#

all-props

Complete Stat
99.9%
Success rate this month
// src/app/piying/page/component/non-field-control/stat/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('stat', (actions) => {
        return [
          actions.inputs.patch({
            title: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [actions.inputs.patch({ content: 'Complete Stat' })];
              }),
            ),
            titleClass: 'text-xl font-bold',
            value: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [actions.inputs.patch({ content: '99.9%' })];
              }),
            ),
            valueClass: 'text-4xl font-bold text-primary',
            desc: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [actions.inputs.patch({ content: 'Success rate this month' })];
              }),
            ),
            descClass: 'text-success',
            figure: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [actions.inputs.patch({ content: { icon: { fontIcon: 'stars' } } })];
              }),
            ),
            figureClass: 'text-warning',
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

base

12K
// src/app/piying/page/component/non-field-control/stat/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('stat', (actions) => {
        return [
          actions.inputs.patch({
            value: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [actions.inputs.patch({ content: '12K' })];
              }),
            ),
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4'),
);
content_copy
#

figure

// src/app/piying/page/component/non-field-control/stat/example/figure/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('stat', (actions) => {
        return [
          actions.inputs.patch({
            figure: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [actions.inputs.patch({ content: { icon: { fontIcon: 'favorite' } } })];
              }),
            ),
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy
#

list

cantaloupe
1
92-day age
sultana
6
A slow-roa
mangosteen
1
Baked red
date
8
Tenderly b
currant
2
32-day age
prune
3
A delightf
butternut pumpkin
4
Tenderly b
blood orange
3
Tenderly b
sprout
0
A special
tomato
2
Fresh mixe
// src/app/piying/page/component/non-field-control/stat/example/list/content.ts
import * as v from 'valibot';
import { actions, NFCSchema } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
import { range } from 'es-toolkit';
import { faker } from '@faker-js/faker';
export default v.pipe(
  v.tuple([
    v.pipe(
      NFCSchema,
      safeDefine.setComponent('list-template', (actions) => {
        return [
          actions.wrappers.set(['div']),
          actions.class.top('stats shadow'),
          actions.inputs.patch({
            template: v.pipe(
              NFCSchema,
              safeDefine.setComponent('stat', (actions) => {
                return [
                  actions.inputs.patchAsync({
                    valueClass: (field) => {
                      const item = field.context['getItem']().valueClass;
                      return item;
                    },
                  }),
                  actions.inputs.patch({
                    title: v.pipe(
                      NFCSchema,
                      safeDefine.setComponent('common-data', (actions) => {
                        return [
                          actions.inputs.patchAsync({
                            content: (field) => {
                              return field.context['getItem']().title;
                            },
                          }),
                        ];
                      }),
                      actions.class.top('stat-title'),
                    ),

                    value: v.pipe(
                      NFCSchema,
                      safeDefine.setComponent('common-data', (actions) => {
                        return [
                          actions.inputs.patchAsync({
                            content: (field) => {
                              return field.context['getItem']().value;
                            },
                          }),
                        ];
                      }),

                      actions.class.top('stat-value'),
                    ),
                    desc: v.pipe(
                      NFCSchema,
                      safeDefine.setComponent('common-data', (actions) => {
                        return [
                          actions.inputs.patchAsync({
                            content: (field) => {
                              return field.context['getItem']().desc;
                            },
                          }),
                        ];
                      }),
                      actions.class.top('stat-desc'),
                    ),
                  }),
                ];
              }),
            ),
          }),
        ];
      }),
      actions.inputs.patchAsync({
        list: (field) => {
          const data = [
            'text-primary',
            'text-secondary',
            'text-accent',
            'text-neutral',
            'text-base-content',
          ];
          return range(10).map((a) => {
            const value = faker.number.int(8);
            return {
              title: faker.food.fruit(),
              value: value,
              desc: faker.food.description().slice(0, 10),
              valueClass: data[value % 5],
            };
          });
        },
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy
#

title

Monthly Sales
// src/app/piying/page/component/non-field-control/stat/example/title/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('stat', (actions) => {
        return [
          actions.inputs.patch({
            title: v.pipe(
              NFCSchema,
              safeDefine.setComponent('common-data', (actions) => {
                return [actions.inputs.patch({ content: 'Monthly Sales' })];
              }),
            ),
          }),
        ];
      }),
    ),
  ]),
  actions.wrappers.patch(['div']),
  actions.class.top('flex gap-4 flex-wrap'),
);
content_copy