#

all-props

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

base

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

max

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

min

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

picker-ref

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