#

all-props

// src/app/piying/page/component/non-field-control/breadcrumbs/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('breadcrumbs', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Home', url: '/' },
              { label: 'Products', url: '/products' },
              { label: 'Details', url: '/products/123' },
            ],
            optionClass: 'text-base hover:text-blue-500',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

base

// src/app/piying/page/component/non-field-control/breadcrumbs/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('breadcrumbs', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Home', url: '' },
              { label: 'About', url: '' },
              { label: 'Contact', url: '' },
            ],
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

optionClass

// src/app/piying/page/component/non-field-control/breadcrumbs/example/optionClass/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('breadcrumbs', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Home', url: '' },
              { label: 'About', url: '' },
              { label: 'Contact', url: '' },
            ],
            optionClass: 'text-lg font-bold',
          }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('breadcrumbs', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Page 1', url: '' },
              { label: 'Page 2', url: '' },
              { label: 'Page 3', url: '' },
            ],
            optionClass: 'text-primary hover:text-accent',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

options

// src/app/piying/page/component/non-field-control/breadcrumbs/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('breadcrumbs', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Home', url: '/' },
              { label: 'About', url: '/about' },
              { label: 'Contact', url: '/contact' },
            ],
          }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('breadcrumbs', (actions) => {
        return [
          actions.inputs.patch({
            options: [
              { label: 'Dashboard', icon: { fontIcon: 'home' }, url: '' },
              { label: 'Settings', icon: { fontIcon: 'settings' }, url: '' },
              { label: 'Profile', icon: { fontIcon: 'person' }, url: '' },
            ],
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy