#

add-position

// 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'),
);
content_copy
#

standalone-add

// 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'),
);
content_copy
#

horizontal

// 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'),
);
content_copy
#

vertical

// 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'),
);
content_copy
#

editable-badge

// 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'),
);
content_copy