// src/app/piying/page/component/non-field-control/alert/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('alert', (actions) => {
return [
actions.inputs.patch({
style: 'outline',
color: 'primary',
direction: 'horizontal',
content: 'Complete alert with all props',
}),
];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [
actions.inputs.patch({
style: 'soft',
color: 'error',
direction: 'vertical',
content: 'Vertical error alert with soft style',
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/alert/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('alert', (actions) => {
return [actions.inputs.patch({ content: 'This is a base alert message' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/alert/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('alert', (actions) => {
return [actions.inputs.patch({ color: 'primary', content: 'Primary alert' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [actions.inputs.patch({ color: 'secondary', content: 'Secondary alert' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [actions.inputs.patch({ color: 'accent', content: 'Accent alert' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [actions.inputs.patch({ color: 'info', content: 'Info alert' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [actions.inputs.patch({ color: 'success', content: 'Success alert' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [actions.inputs.patch({ color: 'warning', content: 'Warning alert' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [actions.inputs.patch({ color: 'error', content: 'Error alert' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4 flex-wrap'),
);
// src/app/piying/page/component/non-field-control/alert/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('alert', (actions) => {
return [
actions.inputs.patch({ direction: 'horizontal', content: 'Horizontal alert with icon' }),
];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [
actions.inputs.patch({ direction: 'vertical', content: 'Vertical alert with icon' }),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/non-field-control/alert/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('alert', (actions) => {
return [actions.inputs.patch({ style: 'outline', content: 'Outline alert' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [actions.inputs.patch({ style: 'dash', content: 'Dash alert' })];
}),
),
v.pipe(
NFCSchema,
safeDefine.setComponent('alert', (actions) => {
return [actions.inputs.patch({ style: 'soft', content: 'Soft alert' })];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4 flex-wrap'),
);