#

all-props

Complete Divider
Vertical
// src/app/piying/page/component/non-field-control/divider/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('divider', (actions) => {
        return [
          actions.inputs.patch({
            direction: 'horizontal',
            contentPosition: 'start',
            color: 'primary',
            content: 'Complete Divider',
          }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('divider', (actions) => {
        return [
          actions.inputs.patch({
            direction: 'vertical',
            color: 'accent',
            content: 'Vertical',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

base

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

color

Primary
Secondary
Accent
Error
// src/app/piying/page/component/non-field-control/divider/example/color/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('divider', (actions) => {
        return [actions.inputs.patch({ color: 'primary', content: 'Primary' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('divider', (actions) => {
        return [actions.inputs.patch({ color: 'secondary', content: 'Secondary' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('divider', (actions) => {
        return [actions.inputs.patch({ color: 'accent', content: 'Accent' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('divider', (actions) => {
        return [actions.inputs.patch({ color: 'error', content: 'Error' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

content-position

Start
End
// src/app/piying/page/component/non-field-control/divider/example/content-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('divider', (actions) => {
        return [
          actions.inputs.patch({
            direction: 'horizontal',
            contentPosition: 'start',
            content: 'Start',
          }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('divider', (actions) => {
        return [
          actions.inputs.patch({ direction: 'horizontal', contentPosition: 'end', content: 'End' }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

direction

Horizontal
Vertical
// src/app/piying/page/component/non-field-control/divider/example/direction/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('divider', (actions) => {
        return [actions.inputs.patch({ direction: 'horizontal', content: 'Horizontal' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('divider', (actions) => {
        return [actions.inputs.patch({ direction: 'vertical', content: 'Vertical' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy