#

align

// src/app/piying/page/component/non-field-control/dropdown/example/align/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [actions.inputs.patch({ title: 'Start', content: 'Content', align: 'start' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [actions.inputs.patch({ title: 'Center', content: 'Content', align: 'center' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [actions.inputs.patch({ title: 'End', content: 'Content', align: 'end' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy
#

all-props

// src/app/piying/page/component/non-field-control/dropdown/example/all-props/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [
          actions.inputs.patch({
            title: 'Complete Dropdown',
            content: 'Content with all props',
            align: 'end',
            position: 'top',
            triggerAction: 'hover',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

base

// src/app/piying/page/component/non-field-control/dropdown/example/base/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [
          actions.inputs.patch({
            title: 'Dropdown',
            content: 'Dropdown content',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

position

// src/app/piying/page/component/non-field-control/dropdown/example/position/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [actions.inputs.patch({ title: 'Top', content: 'Content', position: 'top' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [actions.inputs.patch({ title: 'Bottom', content: 'Content', position: 'bottom' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy
#

trigger

// src/app/piying/page/component/non-field-control/dropdown/example/trigger/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [
          actions.inputs.patch({ title: 'Hover', content: 'Content', triggerAction: 'hover' }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('dropdown', (actions) => {
        return [actions.inputs.patch({ title: 'Open', content: 'Content', triggerAction: 'open' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy