// 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'),
);
// 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'),
);
// 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'),
);
// 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'),
);
// 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'),
);