#

all-props

Complete Badge Small Error
// src/app/piying/page/component/non-field-control/badge/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('badge', (actions) => {
        return [
          actions.inputs.patch({
            style: 'outline',
            color: 'primary',
            size: 'lg',
            content: 'Complete Badge',
          }),
        ];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('badge', (actions) => {
        return [
          actions.inputs.patch({
            style: 'soft',
            color: 'error',
            size: 'sm',
            content: 'Small Error',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

base

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

color

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

size

XS SM MD LG
// src/app/piying/page/component/non-field-control/badge/example/size/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('badge', (actions) => {
        return [actions.inputs.patch({ size: 'xs', content: 'XS' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('badge', (actions) => {
        return [actions.inputs.patch({ size: 'sm', content: 'SM' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('badge', (actions) => {
        return [actions.inputs.patch({ size: 'md', content: 'MD' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('badge', (actions) => {
        return [actions.inputs.patch({ size: 'lg', content: 'LG' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy
#

style

Outline Dash Soft Ghost
// src/app/piying/page/component/non-field-control/badge/example/style/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('badge', (actions) => {
        return [actions.inputs.patch({ style: 'outline', content: 'Outline' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('badge', (actions) => {
        return [actions.inputs.patch({ style: 'dash', content: 'Dash' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('badge', (actions) => {
        return [actions.inputs.patch({ style: 'soft', content: 'Soft' })];
      }),
    ),
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('badge', (actions) => {
        return [actions.inputs.patch({ style: 'ghost', content: 'Ghost' })];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy