@shwfed/config 3.0.18 → 3.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/app.vue +4 -1
  3. package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.realestate.lease/config.d.vue.ts +6 -6
  4. package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.realestate.lease/config.vue.d.ts +6 -6
  5. package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.realestate.lease/runtime.d.vue.ts +6 -6
  6. package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.realestate.lease/runtime.vue.d.ts +6 -6
  7. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.date/config.d.vue.ts +2 -2
  8. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.date/config.vue.d.ts +2 -2
  9. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.daterange/config.d.vue.ts +4 -4
  10. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.daterange/config.vue.d.ts +4 -4
  11. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetime/config.d.vue.ts +4 -4
  12. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetime/config.vue.d.ts +4 -4
  13. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.d.vue.ts +6 -6
  14. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.vue.d.ts +6 -6
  15. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.time/config.d.vue.ts +2 -2
  16. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.time/config.vue.d.ts +2 -2
  17. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.timerange/config.d.vue.ts +2 -2
  18. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.timerange/config.vue.d.ts +2 -2
  19. package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.d.vue.ts +2 -2
  20. package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.vue.d.ts +2 -2
  21. package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.month/config.d.vue.ts +2 -2
  22. package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.month/config.vue.d.ts +2 -2
  23. package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.monthrange/config.d.vue.ts +4 -4
  24. package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.monthrange/config.vue.d.ts +4 -4
  25. package/dist/runtime/components/modal.vue +2 -1
  26. package/dist/runtime/components/ui/date-picker/DatePicker.d.vue.ts +4 -10
  27. package/dist/runtime/components/ui/date-picker/DatePicker.vue +57 -40
  28. package/dist/runtime/components/ui/date-picker/DatePicker.vue.d.ts +4 -10
  29. package/dist/runtime/components/ui/date-picker/DatePickerInput.d.vue.ts +2 -0
  30. package/dist/runtime/components/ui/date-picker/DatePickerInput.vue +2 -1
  31. package/dist/runtime/components/ui/date-picker/DatePickerInput.vue.d.ts +2 -0
  32. package/dist/runtime/components/ui/date-picker/DatePickerPanels.d.vue.ts +23 -0
  33. package/dist/runtime/components/ui/date-picker/DatePickerPanels.vue +56 -0
  34. package/dist/runtime/components/ui/date-picker/DatePickerPanels.vue.d.ts +23 -0
  35. package/dist/runtime/components/ui/date-picker/DatePickerTimeInput.d.vue.ts +2 -2
  36. package/dist/runtime/components/ui/date-picker/DatePickerTimeInput.vue.d.ts +2 -2
  37. package/dist/runtime/components/ui/date-picker/index.d.ts +2 -2
  38. package/dist/runtime/components/ui/date-picker/types.d.ts +6 -0
  39. package/dist/runtime/components/ui/date-range-picker/DateRangePicker.d.vue.ts +2 -8
  40. package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue +59 -43
  41. package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue.d.ts +2 -8
  42. package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.d.vue.ts +2 -0
  43. package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.vue +3 -2
  44. package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.vue.d.ts +2 -0
  45. package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.d.vue.ts +23 -0
  46. package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.vue +60 -0
  47. package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.vue.d.ts +23 -0
  48. package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.d.vue.ts +2 -2
  49. package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.vue.d.ts +2 -2
  50. package/dist/runtime/components/ui/date-range-picker/index.d.ts +2 -2
  51. package/dist/runtime/components/ui/date-range-picker/types.d.ts +6 -0
  52. package/dist/runtime/components/ui/input-group/InputGroupNumberField.vue +1 -1
  53. package/dist/runtime/components/ui/sidebar/SidebarProvider.vue +3 -2
  54. package/dist/runtime/composables/useIsMobile.d.ts +15 -0
  55. package/dist/runtime/composables/useIsMobile.js +12 -0
  56. package/package.json +1 -1
@@ -40,8 +40,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
40
40
  readonly expression: string;
41
41
  } | undefined;
42
42
  readonly format?: string | undefined;
43
- readonly valueFormat?: string | undefined;
44
43
  readonly disabledDate?: string | undefined;
44
+ readonly valueFormat?: string | undefined;
45
45
  readonly validations?: readonly {
46
46
  readonly message: readonly [{
47
47
  readonly locale: "zh";
@@ -103,8 +103,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
103
103
  readonly expression: string;
104
104
  } | undefined;
105
105
  readonly format?: string | undefined;
106
- readonly valueFormat?: string | undefined;
107
106
  readonly disabledDate?: string | undefined;
107
+ readonly valueFormat?: string | undefined;
108
108
  readonly validations?: readonly {
109
109
  readonly message: readonly [{
110
110
  readonly locale: "zh";
@@ -40,8 +40,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
40
40
  readonly expression: string;
41
41
  } | undefined;
42
42
  readonly format?: string | undefined;
43
- readonly valueFormat?: string | undefined;
44
43
  readonly disabledDate?: string | undefined;
44
+ readonly valueFormat?: string | undefined;
45
45
  readonly validations?: readonly {
46
46
  readonly message: readonly [{
47
47
  readonly locale: "zh";
@@ -103,8 +103,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
103
103
  readonly expression: string;
104
104
  } | undefined;
105
105
  readonly format?: string | undefined;
106
- readonly valueFormat?: string | undefined;
107
106
  readonly disabledDate?: string | undefined;
107
+ readonly valueFormat?: string | undefined;
108
108
  readonly validations?: readonly {
109
109
  readonly message: readonly [{
110
110
  readonly locale: "zh";
@@ -33,9 +33,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
33
33
  readonly expression: string;
34
34
  } | undefined;
35
35
  readonly format?: string | undefined;
36
- readonly valueFormat?: string | undefined;
37
36
  readonly disabledDate?: string | undefined;
38
- readonly rangeSeparatorIcon?: string | undefined;
37
+ readonly valueFormat?: string | undefined;
39
38
  readonly startPlaceholder?: readonly [{
40
39
  readonly locale: "zh";
41
40
  readonly message: string;
@@ -50,6 +49,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
50
49
  readonly locale: "en" | "ja" | "ko";
51
50
  readonly message: string;
52
51
  }[]] | undefined;
52
+ readonly rangeSeparatorIcon?: string | undefined;
53
53
  readonly validations?: readonly {
54
54
  readonly message: readonly [{
55
55
  readonly locale: "zh";
@@ -105,9 +105,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
105
105
  readonly expression: string;
106
106
  } | undefined;
107
107
  readonly format?: string | undefined;
108
- readonly valueFormat?: string | undefined;
109
108
  readonly disabledDate?: string | undefined;
110
- readonly rangeSeparatorIcon?: string | undefined;
109
+ readonly valueFormat?: string | undefined;
111
110
  readonly startPlaceholder?: readonly [{
112
111
  readonly locale: "zh";
113
112
  readonly message: string;
@@ -122,6 +121,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
122
121
  readonly locale: "en" | "ja" | "ko";
123
122
  readonly message: string;
124
123
  }[]] | undefined;
124
+ readonly rangeSeparatorIcon?: string | undefined;
125
125
  readonly validations?: readonly {
126
126
  readonly message: readonly [{
127
127
  readonly locale: "zh";
@@ -33,9 +33,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
33
33
  readonly expression: string;
34
34
  } | undefined;
35
35
  readonly format?: string | undefined;
36
- readonly valueFormat?: string | undefined;
37
36
  readonly disabledDate?: string | undefined;
38
- readonly rangeSeparatorIcon?: string | undefined;
37
+ readonly valueFormat?: string | undefined;
39
38
  readonly startPlaceholder?: readonly [{
40
39
  readonly locale: "zh";
41
40
  readonly message: string;
@@ -50,6 +49,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
50
49
  readonly locale: "en" | "ja" | "ko";
51
50
  readonly message: string;
52
51
  }[]] | undefined;
52
+ readonly rangeSeparatorIcon?: string | undefined;
53
53
  readonly validations?: readonly {
54
54
  readonly message: readonly [{
55
55
  readonly locale: "zh";
@@ -105,9 +105,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
105
105
  readonly expression: string;
106
106
  } | undefined;
107
107
  readonly format?: string | undefined;
108
- readonly valueFormat?: string | undefined;
109
108
  readonly disabledDate?: string | undefined;
110
- readonly rangeSeparatorIcon?: string | undefined;
109
+ readonly valueFormat?: string | undefined;
111
110
  readonly startPlaceholder?: readonly [{
112
111
  readonly locale: "zh";
113
112
  readonly message: string;
@@ -122,6 +121,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
122
121
  readonly locale: "en" | "ja" | "ko";
123
122
  readonly message: string;
124
123
  }[]] | undefined;
124
+ readonly rangeSeparatorIcon?: string | undefined;
125
125
  readonly validations?: readonly {
126
126
  readonly message: readonly [{
127
127
  readonly locale: "zh";
@@ -1,6 +1,7 @@
1
1
  <script setup>
2
2
  import { useMediaQuery } from "@vueuse/core";
3
3
  import { computed, ref, useAttrs, useSlots } from "vue";
4
+ import { DESKTOP_MEDIA_QUERY } from "../composables/useIsMobile";
4
5
  import {
5
6
  Dialog,
6
7
  DialogClose,
@@ -28,7 +29,7 @@ defineOptions({
28
29
  const props = defineProps({
29
30
  open: { type: Boolean, required: false },
30
31
  defaultOpen: { type: Boolean, required: false, default: false },
31
- breakpoint: { type: String, required: false, default: "(min-width: 640px)" },
32
+ breakpoint: { type: String, required: false, default: DESKTOP_MEDIA_QUERY },
32
33
  showCloseButton: { type: Boolean, required: false, default: true },
33
34
  dismissible: { type: Boolean, required: false, default: true },
34
35
  contentWidth: { type: String, required: false }
@@ -1,12 +1,6 @@
1
1
  import type { DateValue } from 'reka-ui';
2
2
  import type { HTMLAttributes } from 'vue';
3
- import type { LocaleValue } from '../../../share/locale.js';
4
- import type { DatePickerType } from './types.js';
5
- type ShortcutValue = string | (() => string);
6
- export interface DatePickerShortcut {
7
- name: LocaleValue;
8
- value: ShortcutValue;
9
- }
3
+ import type { DatePickerShortcut, DatePickerType } from './types.js';
10
4
  type __VLS_Props = {
11
5
  modelValue?: string;
12
6
  defaultValue?: string;
@@ -28,9 +22,9 @@ type __VLS_Props = {
28
22
  shortcuts?: ReadonlyArray<DatePickerShortcut>;
29
23
  size?: 'sm' | 'md' | 'lg';
30
24
  };
31
- declare var __VLS_33: {};
25
+ declare var __VLS_35: {};
32
26
  type __VLS_Slots = {} & {
33
- trailing?: (props: typeof __VLS_33) => any;
27
+ trailing?: (props: typeof __VLS_35) => any;
34
28
  };
35
29
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
36
30
  clear: () => any;
@@ -47,8 +41,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
47
41
  }>, {
48
42
  size: "sm" | "md" | "lg";
49
43
  type: DatePickerType;
50
- hourCycle: 12 | 24;
51
44
  clearable: boolean;
45
+ hourCycle: 12 | 24;
52
46
  timeGranularity: "hour" | "minute" | "second";
53
47
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
54
48
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -3,15 +3,13 @@ import { CalendarDate, CalendarDateTime, Time } from "@internationalized/date";
3
3
  import { useVModel } from "@vueuse/core";
4
4
  import { format as formatDate, isValid, parse as parseDate } from "date-fns";
5
5
  import { computed, ref, useTemplateRef } from "vue";
6
+ import { useIsMobile } from "../../../composables/useIsMobile";
6
7
  import { cn } from "../../../utils/cn";
8
+ import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "../drawer";
7
9
  import { Popover, PopoverAnchor, PopoverContent } from "../popover";
8
- import DatePickerDatePanel from "./DatePickerDatePanel.vue";
9
- import DatePickerDateTimePanel from "./DatePickerDateTimePanel.vue";
10
10
  import DatePickerInput from "./DatePickerInput.vue";
11
- import DatePickerMonthPanel from "./DatePickerMonthPanel.vue";
11
+ import DatePickerPanels from "./DatePickerPanels.vue";
12
12
  import DatePickerTimeInput from "./DatePickerTimeInput.vue";
13
- import DatePickerYearPanel from "./DatePickerYearPanel.vue";
14
- import PickerShortcuts from "./PickerShortcuts.vue";
15
13
  import { DATE_PICKER_DEFAULT_FORMATS } from "./types";
16
14
  defineOptions({ name: "UiDatePicker", inheritAttrs: false });
17
15
  const props = defineProps({
@@ -116,6 +114,13 @@ const dateTimeValue = computed(() => {
116
114
  });
117
115
  const open = ref(false);
118
116
  const anchorEl = useTemplateRef("anchor-el");
117
+ const isMobile = useIsMobile();
118
+ const interactive = computed(() => !props.disabled && !props.readonly);
119
+ function onAnchorClick() {
120
+ if (isMobile.value && interactive.value && props.type !== "time") {
121
+ open.value = true;
122
+ }
123
+ }
119
124
  function isInsideAnchor(target) {
120
125
  if (!(target instanceof Node)) return false;
121
126
  return anchorEl.value?.contains(target) ?? false;
@@ -128,7 +133,7 @@ function onInteractOutside(event) {
128
133
  }
129
134
  }
130
135
  function onInputFocus(event) {
131
- if (!props.disabled && !props.readonly) {
136
+ if (!isMobile.value && interactive.value) {
132
137
  open.value = true;
133
138
  }
134
139
  emits("focus", event);
@@ -156,6 +161,15 @@ function onPanelUpdate(value, closeAfter) {
156
161
  setPickerValue(value);
157
162
  if (closeAfter) open.value = false;
158
163
  }
164
+ const panelProps = computed(() => ({
165
+ type: props.type,
166
+ dateValue: dateValue.value,
167
+ dateTimeValue: dateTimeValue.value,
168
+ disabledDate: props.disabledDate,
169
+ timeGranularity: props.timeGranularity,
170
+ hourCycle: props.hourCycle,
171
+ shortcuts: props.shortcuts
172
+ }));
159
173
  function applyShortcut(index) {
160
174
  const item = props.shortcuts?.[index];
161
175
  if (!item) return;
@@ -175,6 +189,7 @@ function applyShortcut(index) {
175
189
  ref="anchor-el"
176
190
  data-slot="date-picker"
177
191
  :class="cn('w-full', props.class)"
192
+ @click="onAnchorClick"
178
193
  >
179
194
  <DatePickerTimeInput
180
195
  v-if="props.type === 'time'"
@@ -192,9 +207,14 @@ function applyShortcut(index) {
192
207
  @update:model-value="setFromInputTime"
193
208
  @clear="emits('clear')"
194
209
  />
210
+ <!-- The popover root stays mounted on mobile so the input is declared once;
211
+ it is simply never opened there, and the drawer below takes over. -->
195
212
  <Popover
196
213
  v-else
197
- v-model:open="open"
214
+ :open="!isMobile && open"
215
+ @update:open="(value) => {
216
+ if (!isMobile) open = value;
217
+ }"
198
218
  >
199
219
  <PopoverAnchor as-child>
200
220
  <DatePickerInput
@@ -205,6 +225,7 @@ function applyShortcut(index) {
205
225
  :clearable="props.clearable"
206
226
  :disabled="props.disabled"
207
227
  :readonly="props.readonly"
228
+ :typeable="!isMobile"
208
229
  :open="open"
209
230
  :prefix-icon="props.prefixIcon"
210
231
  :clear-icon="props.clearIcon"
@@ -224,45 +245,41 @@ function applyShortcut(index) {
224
245
  </DatePickerInput>
225
246
  </PopoverAnchor>
226
247
  <PopoverContent
248
+ v-if="!isMobile"
227
249
  align="start"
228
250
  :class="cn('w-auto p-0', props.popoverClass)"
229
251
  @open-auto-focus="(event) => event.preventDefault()"
230
252
  @interact-outside="onInteractOutside"
231
253
  >
232
- <div class="flex flex-col">
233
- <DatePickerDatePanel
234
- v-if="props.type === 'date'"
235
- :model-value="dateValue"
236
- :is-date-disabled="props.disabledDate"
237
- @update:model-value="(value) => onPanelUpdate(value, true)"
238
- />
239
- <DatePickerMonthPanel
240
- v-else-if="props.type === 'month'"
241
- :model-value="dateValue"
242
- :is-date-disabled="props.disabledDate"
243
- @update:model-value="(value) => onPanelUpdate(value, true)"
244
- />
245
- <DatePickerYearPanel
246
- v-else-if="props.type === 'year'"
247
- :model-value="dateValue"
248
- :is-date-disabled="props.disabledDate"
249
- @update:model-value="(value) => onPanelUpdate(value, true)"
250
- />
251
- <DatePickerDateTimePanel
252
- v-else-if="props.type === 'datetime'"
253
- :model-value="dateTimeValue"
254
- :is-date-disabled="props.disabledDate"
255
- :granularity="props.timeGranularity"
256
- :hour-cycle="props.hourCycle"
257
- @update:model-value="(value) => onPanelUpdate(value, false)"
258
- />
259
- <PickerShortcuts
260
- v-if="props.shortcuts && props.shortcuts.length > 0"
261
- :items="props.shortcuts"
262
- @select="applyShortcut"
263
- />
264
- </div>
254
+ <DatePickerPanels
255
+ v-bind="panelProps"
256
+ @update="onPanelUpdate"
257
+ @shortcut="applyShortcut"
258
+ />
265
259
  </PopoverContent>
266
260
  </Popover>
261
+
262
+ <Drawer
263
+ v-if="isMobile && props.type !== 'time'"
264
+ v-model:open="open"
265
+ >
266
+ <DrawerContent
267
+ :show-close-button="false"
268
+ :class="cn('p-0 pt-4 gap-0', props.popoverClass)"
269
+ >
270
+ <DrawerTitle class="sr-only">
271
+ {{ props.placeholder || "\u9009\u62E9\u65E5\u671F" }}
272
+ </DrawerTitle>
273
+ <DrawerDescription class="sr-only" />
274
+ <!-- No cross-axis centering here: the calendar sizes itself with
275
+ `w-full` and `flex-1` cells, and `items-center` would collapse its
276
+ container to fit-content and undo that. -->
277
+ <DatePickerPanels
278
+ v-bind="panelProps"
279
+ @update="onPanelUpdate"
280
+ @shortcut="applyShortcut"
281
+ />
282
+ </DrawerContent>
283
+ </Drawer>
267
284
  </div>
268
285
  </template>
@@ -1,12 +1,6 @@
1
1
  import type { DateValue } from 'reka-ui';
2
2
  import type { HTMLAttributes } from 'vue';
3
- import type { LocaleValue } from '../../../share/locale.js';
4
- import type { DatePickerType } from './types.js';
5
- type ShortcutValue = string | (() => string);
6
- export interface DatePickerShortcut {
7
- name: LocaleValue;
8
- value: ShortcutValue;
9
- }
3
+ import type { DatePickerShortcut, DatePickerType } from './types.js';
10
4
  type __VLS_Props = {
11
5
  modelValue?: string;
12
6
  defaultValue?: string;
@@ -28,9 +22,9 @@ type __VLS_Props = {
28
22
  shortcuts?: ReadonlyArray<DatePickerShortcut>;
29
23
  size?: 'sm' | 'md' | 'lg';
30
24
  };
31
- declare var __VLS_33: {};
25
+ declare var __VLS_35: {};
32
26
  type __VLS_Slots = {} & {
33
- trailing?: (props: typeof __VLS_33) => any;
27
+ trailing?: (props: typeof __VLS_35) => any;
34
28
  };
35
29
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
36
30
  clear: () => any;
@@ -47,8 +41,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
47
41
  }>, {
48
42
  size: "sm" | "md" | "lg";
49
43
  type: DatePickerType;
50
- hourCycle: 12 | 24;
51
44
  clearable: boolean;
45
+ hourCycle: 12 | 24;
52
46
  timeGranularity: "hour" | "minute" | "second";
53
47
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
54
48
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -6,6 +6,7 @@ type __VLS_Props = {
6
6
  clearable?: boolean;
7
7
  disabled?: boolean;
8
8
  readonly?: boolean;
9
+ typeable?: boolean;
9
10
  open?: boolean;
10
11
  prefixIcon?: string;
11
12
  clearIcon?: string;
@@ -29,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
29
30
  }>, {
30
31
  size: "sm" | "md" | "lg";
31
32
  clearable: boolean;
33
+ typeable: boolean;
32
34
  clearIcon: string;
33
35
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
34
36
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -12,6 +12,7 @@ const props = defineProps({
12
12
  clearable: { type: Boolean, required: false, default: true },
13
13
  disabled: { type: Boolean, required: false },
14
14
  readonly: { type: Boolean, required: false },
15
+ typeable: { type: Boolean, required: false, default: true },
15
16
  open: { type: Boolean, required: false },
16
17
  prefixIcon: { type: String, required: false },
17
18
  clearIcon: { type: String, required: false, default: "fluent:dismiss-20-regular" },
@@ -90,7 +91,7 @@ const showClear = computed(
90
91
  :class="inputSizeClass"
91
92
  :placeholder="props.placeholder"
92
93
  :disabled="props.disabled"
93
- :readonly="props.readonly"
94
+ :readonly="props.readonly || !props.typeable"
94
95
  @update:model-value="(value) => draft = String(value)"
95
96
  @focus="onFocus"
96
97
  @blur="onBlur"
@@ -6,6 +6,7 @@ type __VLS_Props = {
6
6
  clearable?: boolean;
7
7
  disabled?: boolean;
8
8
  readonly?: boolean;
9
+ typeable?: boolean;
9
10
  open?: boolean;
10
11
  prefixIcon?: string;
11
12
  clearIcon?: string;
@@ -29,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
29
30
  }>, {
30
31
  size: "sm" | "md" | "lg";
31
32
  clearable: boolean;
33
+ typeable: boolean;
32
34
  clearIcon: string;
33
35
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
34
36
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -0,0 +1,23 @@
1
+ import type { CalendarDateTime } from '@internationalized/date';
2
+ import type { DateValue } from 'reka-ui';
3
+ import type { HTMLAttributes } from 'vue';
4
+ import type { DatePickerShortcut, DatePickerType } from './types.js';
5
+ type __VLS_Props = {
6
+ type: DatePickerType;
7
+ dateValue?: DateValue;
8
+ dateTimeValue?: CalendarDateTime;
9
+ disabledDate?: (d: DateValue) => boolean;
10
+ timeGranularity: 'hour' | 'minute' | 'second';
11
+ hourCycle: 12 | 24;
12
+ shortcuts?: ReadonlyArray<DatePickerShortcut>;
13
+ class?: HTMLAttributes['class'];
14
+ };
15
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
16
+ shortcut: (args_0: number) => any;
17
+ update: (args_0: DateValue | undefined, args_1: boolean) => any;
18
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
19
+ onShortcut?: ((args_0: number) => any) | undefined;
20
+ onUpdate?: ((args_0: DateValue | undefined, args_1: boolean) => any) | undefined;
21
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
22
+ declare const _default: typeof __VLS_export;
23
+ export default _default;
@@ -0,0 +1,56 @@
1
+ <script setup>
2
+ import { cn } from "../../../utils/cn";
3
+ import DatePickerDatePanel from "./DatePickerDatePanel.vue";
4
+ import DatePickerDateTimePanel from "./DatePickerDateTimePanel.vue";
5
+ import DatePickerMonthPanel from "./DatePickerMonthPanel.vue";
6
+ import DatePickerYearPanel from "./DatePickerYearPanel.vue";
7
+ import PickerShortcuts from "./PickerShortcuts.vue";
8
+ defineOptions({ name: "UiDatePickerPanels" });
9
+ const props = defineProps({
10
+ type: { type: String, required: true },
11
+ dateValue: { type: Object, required: false },
12
+ dateTimeValue: { type: Object, required: false },
13
+ disabledDate: { type: Function, required: false },
14
+ timeGranularity: { type: String, required: true },
15
+ hourCycle: { type: Number, required: true },
16
+ shortcuts: { type: Array, required: false },
17
+ class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
18
+ });
19
+ const emits = defineEmits(["update", "shortcut"]);
20
+ </script>
21
+
22
+ <template>
23
+ <div :class="cn('flex flex-col', props.class)">
24
+ <DatePickerDatePanel
25
+ v-if="props.type === 'date'"
26
+ :model-value="props.dateValue"
27
+ :is-date-disabled="props.disabledDate"
28
+ @update:model-value="(value) => emits('update', value, true)"
29
+ />
30
+ <DatePickerMonthPanel
31
+ v-else-if="props.type === 'month'"
32
+ :model-value="props.dateValue"
33
+ :is-date-disabled="props.disabledDate"
34
+ @update:model-value="(value) => emits('update', value, true)"
35
+ />
36
+ <DatePickerYearPanel
37
+ v-else-if="props.type === 'year'"
38
+ :model-value="props.dateValue"
39
+ :is-date-disabled="props.disabledDate"
40
+ @update:model-value="(value) => emits('update', value, true)"
41
+ />
42
+ <DatePickerDateTimePanel
43
+ v-else-if="props.type === 'datetime'"
44
+ :model-value="props.dateTimeValue"
45
+ :is-date-disabled="props.disabledDate"
46
+ :granularity="props.timeGranularity"
47
+ :hour-cycle="props.hourCycle"
48
+ @update:model-value="(value) => emits('update', value, false)"
49
+ />
50
+ <PickerShortcuts
51
+ v-if="props.shortcuts && props.shortcuts.length > 0"
52
+ :items="props.shortcuts"
53
+ @select="(index) => emits('shortcut', index)"
54
+ />
55
+ </div>
56
+ </template>
@@ -0,0 +1,23 @@
1
+ import type { CalendarDateTime } from '@internationalized/date';
2
+ import type { DateValue } from 'reka-ui';
3
+ import type { HTMLAttributes } from 'vue';
4
+ import type { DatePickerShortcut, DatePickerType } from './types.js';
5
+ type __VLS_Props = {
6
+ type: DatePickerType;
7
+ dateValue?: DateValue;
8
+ dateTimeValue?: CalendarDateTime;
9
+ disabledDate?: (d: DateValue) => boolean;
10
+ timeGranularity: 'hour' | 'minute' | 'second';
11
+ hourCycle: 12 | 24;
12
+ shortcuts?: ReadonlyArray<DatePickerShortcut>;
13
+ class?: HTMLAttributes['class'];
14
+ };
15
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
16
+ shortcut: (args_0: number) => any;
17
+ update: (args_0: DateValue | undefined, args_1: boolean) => any;
18
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
19
+ onShortcut?: ((args_0: number) => any) | undefined;
20
+ onUpdate?: ((args_0: DateValue | undefined, args_1: boolean) => any) | undefined;
21
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
22
+ declare const _default: typeof __VLS_export;
23
+ export default _default;
@@ -20,10 +20,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
20
20
  "onUpdate:modelValue"?: ((args_0: Time | undefined) => any) | undefined;
21
21
  }>, {
22
22
  size: "sm" | "md" | "lg";
23
- granularity: "hour" | "minute" | "second";
24
- hourCycle: 12 | 24;
25
23
  clearable: boolean;
26
24
  clearIcon: string;
25
+ granularity: "hour" | "minute" | "second";
26
+ hourCycle: 12 | 24;
27
27
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
28
28
  declare const _default: typeof __VLS_export;
29
29
  export default _default;
@@ -20,10 +20,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
20
20
  "onUpdate:modelValue"?: ((args_0: Time | undefined) => any) | undefined;
21
21
  }>, {
22
22
  size: "sm" | "md" | "lg";
23
- granularity: "hour" | "minute" | "second";
24
- hourCycle: 12 | 24;
25
23
  clearable: boolean;
26
24
  clearIcon: string;
25
+ granularity: "hour" | "minute" | "second";
26
+ hourCycle: 12 | 24;
27
27
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
28
28
  declare const _default: typeof __VLS_export;
29
29
  export default _default;
@@ -1,4 +1,4 @@
1
- export { default as DatePicker, type DatePickerShortcut } from './DatePicker.vue.js';
1
+ export { default as DatePicker } from './DatePicker.vue.js';
2
2
  export { default as DatePickerDatePanel } from './DatePickerDatePanel.vue.js';
3
3
  export { default as DatePickerDateTimePanel } from './DatePickerDateTimePanel.vue.js';
4
4
  export { default as DatePickerInput } from './DatePickerInput.vue.js';
@@ -7,4 +7,4 @@ export { default as DatePickerTimeInput } from './DatePickerTimeInput.vue.js';
7
7
  export { default as DatePickerYearPanel } from './DatePickerYearPanel.vue.js';
8
8
  export { default as PickerShortcuts } from './PickerShortcuts.vue.js';
9
9
  export { DATE_PICKER_DEFAULT_FORMATS } from './types.js';
10
- export type { DatePickerType } from './types.js';
10
+ export type { DatePickerShortcut, DatePickerType } from './types.js';
@@ -1,4 +1,10 @@
1
+ import type { LocaleValue } from '../../../share/locale.js';
1
2
  export type DatePickerType = 'date' | 'datetime' | 'year' | 'month' | 'time';
3
+ export type DatePickerShortcutValue = string | (() => string);
4
+ export interface DatePickerShortcut {
5
+ name: LocaleValue;
6
+ value: DatePickerShortcutValue;
7
+ }
2
8
  export declare const DATE_PICKER_DEFAULT_FORMATS: Record<DatePickerType, {
3
9
  display: string;
4
10
  value: string;
@@ -1,12 +1,6 @@
1
1
  import type { DateValue } from 'reka-ui';
2
2
  import type { HTMLAttributes } from 'vue';
3
- import type { LocaleValue } from '../../../share/locale.js';
4
- import type { DateRangePickerType } from './types.js';
5
- type RangeShortcutValue = [string, string] | (() => [string, string]);
6
- export interface DateRangePickerShortcut {
7
- name: LocaleValue;
8
- value: RangeShortcutValue;
9
- }
3
+ import type { DateRangePickerShortcut, DateRangePickerType } from './types.js';
10
4
  type __VLS_Props = {
11
5
  modelValue?: [string, string];
12
6
  defaultValue?: [string, string];
@@ -47,8 +41,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
47
41
  size: "sm" | "md" | "lg";
48
42
  type: DateRangePickerType;
49
43
  numberOfMonths: number;
50
- hourCycle: 12 | 24;
51
44
  clearable: boolean;
45
+ hourCycle: 12 | 24;
52
46
  timeGranularity: "hour" | "minute" | "second";
53
47
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
54
48
  declare const _default: typeof __VLS_export;