@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.
- package/dist/module.json +1 -1
- package/dist/runtime/components/app.vue +4 -1
- package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.realestate.lease/config.d.vue.ts +6 -6
- package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.realestate.lease/config.vue.d.ts +6 -6
- package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.realestate.lease/runtime.d.vue.ts +6 -6
- package/dist/runtime/components/config/blocks/2026-07-17/com.shwfed.block.invoice.realestate.lease/runtime.vue.d.ts +6 -6
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.date/config.d.vue.ts +2 -2
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.date/config.vue.d.ts +2 -2
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.daterange/config.d.vue.ts +4 -4
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.daterange/config.vue.d.ts +4 -4
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetime/config.d.vue.ts +4 -4
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetime/config.vue.d.ts +4 -4
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.d.vue.ts +6 -6
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.datetimerange/config.vue.d.ts +6 -6
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.time/config.d.vue.ts +2 -2
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.time/config.vue.d.ts +2 -2
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.timerange/config.d.vue.ts +2 -2
- package/dist/runtime/components/form/fields/2026-04-27/com.shwfed.form.field.timerange/config.vue.d.ts +2 -2
- package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.d.vue.ts +2 -2
- package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.numberrange/config.vue.d.ts +2 -2
- package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.month/config.d.vue.ts +2 -2
- package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.month/config.vue.d.ts +2 -2
- package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.monthrange/config.d.vue.ts +4 -4
- package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.monthrange/config.vue.d.ts +4 -4
- package/dist/runtime/components/modal.vue +2 -1
- package/dist/runtime/components/ui/date-picker/DatePicker.d.vue.ts +4 -10
- package/dist/runtime/components/ui/date-picker/DatePicker.vue +57 -40
- package/dist/runtime/components/ui/date-picker/DatePicker.vue.d.ts +4 -10
- package/dist/runtime/components/ui/date-picker/DatePickerInput.d.vue.ts +2 -0
- package/dist/runtime/components/ui/date-picker/DatePickerInput.vue +2 -1
- package/dist/runtime/components/ui/date-picker/DatePickerInput.vue.d.ts +2 -0
- package/dist/runtime/components/ui/date-picker/DatePickerPanels.d.vue.ts +23 -0
- package/dist/runtime/components/ui/date-picker/DatePickerPanels.vue +56 -0
- package/dist/runtime/components/ui/date-picker/DatePickerPanels.vue.d.ts +23 -0
- package/dist/runtime/components/ui/date-picker/DatePickerTimeInput.d.vue.ts +2 -2
- package/dist/runtime/components/ui/date-picker/DatePickerTimeInput.vue.d.ts +2 -2
- package/dist/runtime/components/ui/date-picker/index.d.ts +2 -2
- package/dist/runtime/components/ui/date-picker/types.d.ts +6 -0
- package/dist/runtime/components/ui/date-range-picker/DateRangePicker.d.vue.ts +2 -8
- package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue +59 -43
- package/dist/runtime/components/ui/date-range-picker/DateRangePicker.vue.d.ts +2 -8
- package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.d.vue.ts +2 -0
- package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.vue +3 -2
- package/dist/runtime/components/ui/date-range-picker/DateRangePickerInput.vue.d.ts +2 -0
- package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.d.vue.ts +23 -0
- package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.vue +60 -0
- package/dist/runtime/components/ui/date-range-picker/DateRangePickerPanels.vue.d.ts +23 -0
- package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.d.vue.ts +2 -2
- package/dist/runtime/components/ui/date-range-picker/DateRangePickerTimeInput.vue.d.ts +2 -2
- package/dist/runtime/components/ui/date-range-picker/index.d.ts +2 -2
- package/dist/runtime/components/ui/date-range-picker/types.d.ts +6 -0
- package/dist/runtime/components/ui/input-group/InputGroupNumberField.vue +1 -1
- package/dist/runtime/components/ui/sidebar/SidebarProvider.vue +3 -2
- package/dist/runtime/composables/useIsMobile.d.ts +15 -0
- package/dist/runtime/composables/useIsMobile.js +12 -0
- package/package.json +1 -1
package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.month/config.d.vue.ts
CHANGED
|
@@ -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";
|
package/dist/runtime/components/form/fields/2026-05-24/com.shwfed.form.field.month/config.vue.d.ts
CHANGED
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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:
|
|
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 {
|
|
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
|
|
25
|
+
declare var __VLS_35: {};
|
|
32
26
|
type __VLS_Slots = {} & {
|
|
33
|
-
trailing?: (props: typeof
|
|
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
|
|
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 (!
|
|
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
|
-
|
|
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
|
-
<
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
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 {
|
|
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
|
|
25
|
+
declare var __VLS_35: {};
|
|
32
26
|
type __VLS_Slots = {} & {
|
|
33
|
-
trailing?: (props: typeof
|
|
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
|
|
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 {
|
|
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;
|