// src/app/piying/page/component/form/array/example/add-position/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
const ItemDefine = v.object({
v1: v.pipe(v.string(), v.title('v1')),
v2: v.pipe(v.number(), v.title('v2')),
v3: v.pipe(v.boolean(), v.title('v3')),
});
export default v.pipe(
v.tuple([
v.pipe(
v.array(ItemDefine),
safeDefine.setComponent('editable-group', (actions) => {
return [
actions.inputs.patch({
layout: 'column',
addMode: 1,
addPosition: 'top',
minLength: 1,
initValue: (index: any) => {
return {
v1: `${index}`,
v2: index,
v3: !!index,
};
},
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/form/array/example/standalone-add/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
const ItemDefine = v.object({
v1: v.pipe(v.string(), v.title('v1')),
v2: v.pipe(v.number(), v.title('v2')),
v3: v.pipe(v.boolean(), v.title('v3')),
});
export default v.pipe(
v.tuple([
v.pipe(
v.array(ItemDefine),
safeDefine.setComponent('editable-group', (actions) => {
return [
actions.inputs.patch({
layout: 'column',
addMode: 1,
minLength: 1,
initValue: (index: any) => {
return {
v1: `${index}`,
v2: index,
v3: !!index,
};
},
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/form/array/example/horizontal/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
const ItemDefine = v.object({
v1: v.pipe(v.string(), v.title('v1')),
v2: v.pipe(v.number(), v.title('v2')),
v3: v.pipe(v.boolean(), v.title('v3')),
});
export default v.pipe(
v.tuple([
v.pipe(
v.pipe(
v.array(ItemDefine),
safeDefine.setComponent('editable-group', (actions) => {
return [
actions.inputs.patch({
minLength: 1,
}),
];
}),
),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/form/array/example/vertical/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
const ItemDefine = v.object({
v1: v.pipe(v.string(), v.title('v1')),
v2: v.pipe(v.number(), v.title('v2')),
v3: v.pipe(v.boolean(), v.title('v3')),
});
export default v.pipe(
v.tuple([
v.pipe(
v.array(ItemDefine),
safeDefine.setComponent('editable-group', (actions) => {
return [
actions.inputs.patch({
layout: 'column',
minLength: 1,
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/form/array/example/editable-badge/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
v.tuple([
v.pipe(
v.array(
v.pipe(
v.string(),
safeDefine.setComponent('editable-badge', (actions) => {
return [];
}),
),
),
safeDefine.setComponent('editable-group', (actions) => {
return [
actions.inputs.patch({
layout: 'row',
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);