#

all-props

D
// src/app/piying/page/component/non-field-control/fab/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('fab', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Action 1', icon: { fontIcon: 'save' } },
              { label: 'Action 2', icon: { fontIcon: 'edit' } },
              { label: 'Action 3', icon: { fontIcon: 'delete' } },
            ],
            flower: false,
            autoClose: true,
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform h-50'),
);
content_copy
#

autoClose

D
// src/app/piying/page/component/non-field-control/fab/example/autoClose/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('fab', (actions) => {
        return [
          actions.inputs.patch({
            options: [{ label: 'Option 1' }, { label: 'Option 2' }],
            autoClose: false,
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform h-50'),
);
content_copy
#

base

+
// src/app/piying/page/component/non-field-control/fab/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('fab', (actions) => {
        return [actions.inputs.patch({ defaultIcon: { label: '+' } })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform h-50'),
);
content_copy
#

flower

// src/app/piying/page/component/non-field-control/fab/example/flower/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('fab', (actions) => {
        return [
          actions.inputs.patch({
            defaultIcon: { label: '⭐' },
            flower: true,
            options: [{ label: 'Like' }, { label: 'Share' }, { label: 'Save' }],
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform h-50'),
);
content_copy
#

options

D
// src/app/piying/page/component/non-field-control/fab/example/options/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('fab', (actions) => {
        return [
          actions.inputs.patch({
            options: [{ label: 'Add' }, { label: 'Edit' }, { label: 'Delete' }],
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 will-change-transform h-50'),
);
content_copy