@shwfed/config 3.0.17 → 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 (82) 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-22/com.shwfed.form.field.textarea/config.d.vue.ts +2 -2
  8. package/dist/runtime/components/form/fields/2026-04-22/com.shwfed.form.field.textarea/config.vue.d.ts +2 -2
  9. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.date/config.d.vue.ts +2 -2
  10. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.date/config.vue.d.ts +2 -2
  11. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.daterange/config.d.vue.ts +4 -4
  12. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.daterange/config.vue.d.ts +4 -4
  13. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetime/config.d.vue.ts +4 -4
  14. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetime/config.vue.d.ts +4 -4
  15. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.d.vue.ts +6 -6
  16. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.vue.d.ts +6 -6
  17. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.time/config.d.vue.ts +2 -2
  18. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.time/config.vue.d.ts +2 -2
  19. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.timerange/config.d.vue.ts +2 -2
  20. package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.timerange/config.vue.d.ts +2 -2
  21. package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.d.vue.ts +2 -2
  22. package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.vue.d.ts +2 -2
  23. package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.month/config.d.vue.ts +2 -2
  24. package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.month/config.vue.d.ts +2 -2
  25. package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.monthrange/config.d.vue.ts +4 -4
  26. package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.monthrange/config.vue.d.ts +4 -4
  27. package/dist/runtime/components/modal.vue +2 -1
  28. package/dist/runtime/components/table/columns/2026-05-27/com.shwfed.table.column.tree-combobox-multi/config.d.vue.ts +2 -2
  29. package/dist/runtime/components/table/columns/2026-05-27/com.shwfed.table.column.tree-combobox-multi/config.vue.d.ts +2 -2
  30. package/dist/runtime/components/table/columns/2026-05-27/com.shwfed.table.column.tree-combobox-single/config.d.vue.ts +2 -2
  31. package/dist/runtime/components/table/columns/2026-05-27/com.shwfed.table.column.tree-combobox-single/config.vue.d.ts +2 -2
  32. package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-multi/config.d.vue.ts +2 -2
  33. package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-multi/config.vue.d.ts +2 -2
  34. package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-single/config.d.vue.ts +2 -2
  35. package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-single/config.vue.d.ts +2 -2
  36. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/config.d.vue.ts +2 -0
  37. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/config.vue +22 -0
  38. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/config.vue.d.ts +2 -0
  39. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/schema.d.ts +1 -0
  40. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/schema.js +2 -0
  41. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/config.d.vue.ts +2 -0
  42. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/config.vue +22 -0
  43. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/config.vue.d.ts +2 -0
  44. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/schema.d.ts +1 -0
  45. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/schema.js +2 -0
  46. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-multi/config.d.vue.ts +2 -2
  47. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-multi/config.vue.d.ts +2 -2
  48. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-single/config.d.vue.ts +2 -2
  49. package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-single/config.vue.d.ts +2 -2
  50. package/dist/runtime/components/table/utils/shared.d.ts +1 -0
  51. package/dist/runtime/components/table/utils/shared.js +11 -8
  52. package/dist/runtime/components/ui/date-picker/DatePicker.d.vue.ts +4 -10
  53. package/dist/runtime/components/ui/date-picker/DatePicker.vue +57 -40
  54. package/dist/runtime/components/ui/date-picker/DatePicker.vue.d.ts +4 -10
  55. package/dist/runtime/components/ui/date-picker/DatePickerInput.d.vue.ts +2 -0
  56. package/dist/runtime/components/ui/date-picker/DatePickerInput.vue +2 -1
  57. package/dist/runtime/components/ui/date-picker/DatePickerInput.vue.d.ts +2 -0
  58. package/dist/runtime/components/ui/date-picker/DatePickerPanels.d.vue.ts +23 -0
  59. package/dist/runtime/components/ui/date-picker/DatePickerPanels.vue +56 -0
  60. package/dist/runtime/components/ui/date-picker/DatePickerPanels.vue.d.ts +23 -0
  61. package/dist/runtime/components/ui/date-picker/DatePickerTimeInput.d.vue.ts +2 -2
  62. package/dist/runtime/components/ui/date-picker/DatePickerTimeInput.vue.d.ts +2 -2
  63. package/dist/runtime/components/ui/date-picker/index.d.ts +2 -2
  64. package/dist/runtime/components/ui/date-picker/types.d.ts +6 -0
  65. package/dist/runtime/components/ui/date-range-picker/DateRangePicker.d.vue.ts +2 -8
  66. package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue +59 -43
  67. package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue.d.ts +2 -8
  68. package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.d.vue.ts +2 -0
  69. package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.vue +3 -2
  70. package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.vue.d.ts +2 -0
  71. package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.d.vue.ts +23 -0
  72. package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.vue +60 -0
  73. package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.vue.d.ts +23 -0
  74. package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.d.vue.ts +2 -2
  75. package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.vue.d.ts +2 -2
  76. package/dist/runtime/components/ui/date-range-picker/index.d.ts +2 -2
  77. package/dist/runtime/components/ui/date-range-picker/types.d.ts +6 -0
  78. package/dist/runtime/components/ui/input-group/InputGroupNumberField.vue +1 -1
  79. package/dist/runtime/components/ui/sidebar/SidebarProvider.vue +3 -2
  80. package/dist/runtime/composables/useIsMobile.d.ts +15 -0
  81. package/dist/runtime/composables/useIsMobile.js +12 -0
  82. package/package.json +1 -1
@@ -46,10 +46,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
46
46
  readonly mode: "formula" | "prefill";
47
47
  readonly expression: string;
48
48
  } | undefined;
49
- readonly enableSorting?: boolean | undefined;
50
49
  readonly nodeKey: string;
51
50
  readonly nodeChildren: string;
52
51
  readonly nodeLabel: string;
52
+ readonly enableSorting?: boolean | undefined;
53
53
  readonly cascade: "independent" | "cascade-down" | "cascade-both";
54
54
  readonly nodeTooltip?: readonly [{
55
55
  readonly locale: "zh";
@@ -106,10 +106,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
106
106
  readonly mode: "formula" | "prefill";
107
107
  readonly expression: string;
108
108
  } | undefined;
109
- readonly enableSorting?: boolean | undefined;
110
109
  readonly nodeKey: string;
111
110
  readonly nodeChildren: string;
112
111
  readonly nodeLabel: string;
112
+ readonly enableSorting?: boolean | undefined;
113
113
  readonly cascade: "independent" | "cascade-down" | "cascade-both";
114
114
  readonly nodeTooltip?: readonly [{
115
115
  readonly locale: "zh";
@@ -46,10 +46,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
46
46
  readonly mode: "formula" | "prefill";
47
47
  readonly expression: string;
48
48
  } | undefined;
49
- readonly enableSorting?: boolean | undefined;
50
49
  readonly nodeKey: string;
51
50
  readonly nodeChildren: string;
52
51
  readonly nodeLabel: string;
52
+ readonly enableSorting?: boolean | undefined;
53
53
  readonly cascade: "independent" | "cascade-down" | "cascade-both";
54
54
  readonly nodeTooltip?: readonly [{
55
55
  readonly locale: "zh";
@@ -106,10 +106,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
106
106
  readonly mode: "formula" | "prefill";
107
107
  readonly expression: string;
108
108
  } | undefined;
109
- readonly enableSorting?: boolean | undefined;
110
109
  readonly nodeKey: string;
111
110
  readonly nodeChildren: string;
112
111
  readonly nodeLabel: string;
112
+ readonly enableSorting?: boolean | undefined;
113
113
  readonly cascade: "independent" | "cascade-down" | "cascade-both";
114
114
  readonly nodeTooltip?: readonly [{
115
115
  readonly locale: "zh";
@@ -46,10 +46,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
46
46
  readonly mode: "formula" | "prefill";
47
47
  readonly expression: string;
48
48
  } | undefined;
49
- readonly enableSorting?: boolean | undefined;
50
49
  readonly nodeKey: string;
51
50
  readonly nodeChildren: string;
52
51
  readonly nodeLabel: string;
52
+ readonly enableSorting?: boolean | undefined;
53
53
  readonly nodeTooltip?: readonly [{
54
54
  readonly locale: "zh";
55
55
  readonly message: string;
@@ -105,10 +105,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
105
105
  readonly mode: "formula" | "prefill";
106
106
  readonly expression: string;
107
107
  } | undefined;
108
- readonly enableSorting?: boolean | undefined;
109
108
  readonly nodeKey: string;
110
109
  readonly nodeChildren: string;
111
110
  readonly nodeLabel: string;
111
+ readonly enableSorting?: boolean | undefined;
112
112
  readonly nodeTooltip?: readonly [{
113
113
  readonly locale: "zh";
114
114
  readonly message: string;
@@ -46,10 +46,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
46
46
  readonly mode: "formula" | "prefill";
47
47
  readonly expression: string;
48
48
  } | undefined;
49
- readonly enableSorting?: boolean | undefined;
50
49
  readonly nodeKey: string;
51
50
  readonly nodeChildren: string;
52
51
  readonly nodeLabel: string;
52
+ readonly enableSorting?: boolean | undefined;
53
53
  readonly nodeTooltip?: readonly [{
54
54
  readonly locale: "zh";
55
55
  readonly message: string;
@@ -105,10 +105,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
105
105
  readonly mode: "formula" | "prefill";
106
106
  readonly expression: string;
107
107
  } | undefined;
108
- readonly enableSorting?: boolean | undefined;
109
108
  readonly nodeKey: string;
110
109
  readonly nodeChildren: string;
111
110
  readonly nodeLabel: string;
111
+ readonly enableSorting?: boolean | undefined;
112
112
  readonly nodeTooltip?: readonly [{
113
113
  readonly locale: "zh";
114
114
  readonly message: string;
@@ -43,6 +43,7 @@ export declare function columnFields(configure: (env: Environment) => void): {
43
43
  id: Schema.refine<string, typeof Schema.String>;
44
44
  groupId: Schema.optional<typeof Schema.UUID>;
45
45
  };
46
+ export declare function editableRequiredField(configure: (env: Environment) => void): Schema.optional<Schema.Schema<string, string, never>>;
46
47
  export declare function editableColumnFields(configure: (env: Environment) => void): {
47
48
  title: Schema.suspend<readonly [{
48
49
  readonly locale: "zh";
@@ -74,6 +74,16 @@ function CelColumnRequired(configure) {
74
74
  resultType: "bool"
75
75
  });
76
76
  }
77
+ export function editableRequiredField(configure) {
78
+ return Schema.optional(CelColumnRequired(configure).annotations({
79
+ title: "\u5FC5\u586B",
80
+ description: md`
81
+ 返回 \`true\` 时,该列**表头显示必填星号**。可访问 \`row\` / \`index\` / \`form\`,因此可写「部分行必填」的条件(例如 \`row.type == 'company'\`)。
82
+
83
+ **当前版本星号仅作视觉标识,不会拦截提交**——实际必填校验请在表格字段的「校验规则」中用 CEL 编写(可读整表 \`form.<绑定路径>\`)。后续版本将据此表达式自动完成逐行校验并拦截提交。
84
+ `
85
+ }));
86
+ }
77
87
  export function editableColumnFields(configure) {
78
88
  return {
79
89
  ...columnIdentityFields(),
@@ -100,14 +110,7 @@ export function editableColumnFields(configure) {
100
110
  title: "\u9ED8\u8BA4\u9690\u85CF",
101
111
  description: "\u5F00\u542F\u540E\u8BE5\u5217\u9ED8\u8BA4\u9690\u85CF\uFF1B\u4F7F\u7528\u8005\u53EF\u5728\u8868\u683C\u7684\u5217\u8BBE\u7F6E\u4E2D\u91CD\u65B0\u663E\u793A\u3002\u4EC5\u4F5C\u4E3A\u521D\u59CB\u72B6\u6001\uFF0C\u4E0D\u968F\u6570\u636E\u53D8\u5316"
102
112
  })),
103
- required: Schema.optional(CelColumnRequired(configure).annotations({
104
- title: "\u5FC5\u586B",
105
- description: md`
106
- 返回 \`true\` 时,该列**表头显示必填星号**。可访问 \`row\` / \`index\` / \`form\`,因此可写「部分行必填」的条件(例如 \`row.type == 'company'\`)。
107
-
108
- **当前版本星号仅作视觉标识,不会拦截提交**——实际必填校验请在表格字段的「校验规则」中用 CEL 编写(可读整表 \`form.<绑定路径>\`)。后续版本将据此表达式自动完成逐行校验并拦截提交。
109
- `
110
- }))
113
+ required: editableRequiredField(configure)
111
114
  };
112
115
  }
113
116
  const EDITABLE_HEADER_MARKER = Symbol("shwfed-editable-header");
@@ -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;