// src/app/piying/page/component/field-control/calendar/example/all-props/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
v.tuple([
v.pipe(
v.date(),
safeDefine.setComponent('calendar', (actions) => {
return [
actions.inputs.patch({
dateProps: { min: new Date('2024-01-01'), max: new Date('2024-12-31') },
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/field-control/calendar/example/base/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
v.tuple([
v.pipe(
v.date(),
safeDefine.setComponent('calendar', (actions) => {
return [actions.inputs.patch({})];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4'),
);
// src/app/piying/page/component/field-control/calendar/example/max/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
v.tuple([
v.pipe(
v.date(),
safeDefine.setComponent('calendar', (actions) => {
return [
actions.inputs.patch({
dateProps: {
max: new Date('2024-12-31'),
},
}),
];
}),
),
v.pipe(
v.date(),
safeDefine.setComponent('calendar', (actions) => {
return [
actions.inputs.patch({
dateProps: {
min: new Date('2024-01-01'),
max: new Date('2024-06-30'),
},
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4 flex-wrap'),
);
// src/app/piying/page/component/field-control/calendar/example/min/content.ts
import * as v from 'valibot';
import { actions } from '@piying/view-angular-core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
v.tuple([
v.pipe(
v.date(),
safeDefine.setComponent('calendar', (actions) => {
return [
actions.inputs.patch({
dateProps: {
min: new Date('2024-01-01'),
},
}),
];
}),
),
v.pipe(
v.date(),
safeDefine.setComponent('calendar', (actions) => {
return [
actions.inputs.patch({
dateProps: {
min: new Date('2023-06-01'),
max: new Date('2024-12-31'),
},
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4 flex-wrap'),
);
// src/app/piying/page/component/field-control/calendar/example/picker-ref/content.ts
import * as v from 'valibot';
import { actions, asControl, NFCSchema } from '@piying/view-angular-core';
import { computed } from '@angular/core';
import { safeDefine } from '@@piying-define';
export default v.pipe(
v.tuple([
v.pipe(
v.date(),
safeDefine.setComponent('picker-ref', (actions) => {
return [
actions.inputs.patch({
trigger: v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [
actions.inputs.patchAsync({
content: (field) => {
return computed(() => {
const pickerValue = field.context['pickerValue']();
return pickerValue ? `${pickerValue}` : '[date]';
});
},
}),
];
}),
),
content: v.pipe(
v.date(),
safeDefine.setComponent('calendar', (actions) => {
return [
actions.attributes.patch({
class: 'bg-base-200 rounded-xl shadow-2xs',
}),
];
}),
),
}),
];
}),
),
v.pipe(
v.tuple([v.date(), v.date()]),
asControl(),
safeDefine.setComponent('picker-ref', (actions) => {
return [
actions.inputs.patch({
overlayConfig: { panelClass: 'bg-base-100' },
trigger: v.pipe(
NFCSchema,
safeDefine.setComponent('button', (actions) => {
return [
actions.inputs.patchAsync({
content: (field) => {
return computed(() => {
const pickerValue = field.context['pickerValue']();
return pickerValue ? `${pickerValue}` : '[date range]';
});
},
}),
];
}),
),
content: v.pipe(
v.tuple([v.date(), v.date()]),
asControl(),
safeDefine.setComponent('calendar', (actions) => {
return [
actions.inputs.patch({ type: 'range' }),
actions.attributes.patch({
class: 'bg-base-200 rounded-xl shadow-2xs',
}),
];
}),
),
}),
];
}),
),
]),
actions.wrappers.patch(['div']),
actions.class.top('flex gap-4 flex-wrap'),
);