// src/app/piying/page/component/non-field-control/button/example/active/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('button', (actions) => {
return [actions.inputs.patch({ active: true, content: 'Active' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ active: false, content: 'Inactive' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/button/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('button', (actions) => {
return [
actions.inputs.patch({
color: 'primary',
style: 'soft',
size: 'md',
shape: 'square',
active: false,
content: { icon: { fontIcon: 'add' } },
}),
];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [
actions.inputs.patch({
color: 'success',
style: 'outline',
size: 'lg',
shape: 'wide',
content: 'Wide Success Button',
}),
];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [
actions.inputs.patch({
color: 'error',
style: 'dash',
size: 'sm',
shape: 'circle',
content: 'X',
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/button/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('button', (actions) => {
return [actions.inputs.patch({ content: 'base1' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ content: 'base2' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/button/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('button', (actions) => {
return [actions.inputs.patch({ color: 'neutral' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ color: 'primary' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ color: 'secondary' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ color: 'accent' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ color: 'info' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ color: 'success' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ color: 'warning' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ color: 'error' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/button/example/disabled/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('button', (actions) => {
return [actions.inputs.patch({ disabled: true, content: 'Disabled' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ disabled: false, content: 'Enabled' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/button/example/loading/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('button', (actions) => {
return [
actions.inputs.patch({
content: 'Click Loading...',
async clicked(event) {
return new Promise((res) => {
setTimeout(() => {
res();
}, 3000);
});
},
}),
];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [
actions.inputs.patch({
content: 'No Loading Icon',
disableLoadingIcon: true,
async clicked(event) {
return new Promise((res) => {
setTimeout(() => {
res();
}, 3000);
});
},
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/button/example/shape/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('button', (actions) => {
return [actions.inputs.patch({ shape: 'wide', content: 'Wide' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ shape: 'block', content: 'Block' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ shape: 'square', content: 'Square' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ shape: 'circle', content: 'C' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/button/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('button', (actions) => {
return [actions.inputs.patch({ size: 'xs', content: 'XS' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ size: 'sm', content: 'SM' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ size: 'md', content: 'MD' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ size: 'lg', content: 'LG' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/button/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('button', (actions) => {
return [actions.inputs.patch({ style: 'outline', content: 'Outline' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ style: 'dash', content: 'Dash' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ style: 'soft', content: 'Soft' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ style: 'ghost', content: 'Ghost' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [actions.inputs.patch({ style: 'link', content: 'Link' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);