@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.
- 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-22/com.shwfed.form.field.textarea/config.d.vue.ts +2 -2
- package/dist/runtime/components/form/fields/2026-04-22/com.shwfed.form.field.textarea/config.vue.d.ts +2 -2
- 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/table/columns/2026-05-27/com.shwfed.table.column.tree-combobox-multi/config.d.vue.ts +2 -2
- package/dist/runtime/components/table/columns/2026-05-27/com.shwfed.table.column.tree-combobox-multi/config.vue.d.ts +2 -2
- package/dist/runtime/components/table/columns/2026-05-27/com.shwfed.table.column.tree-combobox-single/config.d.vue.ts +2 -2
- package/dist/runtime/components/table/columns/2026-05-27/com.shwfed.table.column.tree-combobox-single/config.vue.d.ts +2 -2
- package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-multi/config.d.vue.ts +2 -2
- package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-multi/config.vue.d.ts +2 -2
- package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-single/config.d.vue.ts +2 -2
- package/dist/runtime/components/table/columns/2026-05-28/com.shwfed.table.column.tree-combobox-single/config.vue.d.ts +2 -2
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/config.d.vue.ts +2 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/config.vue +22 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/config.vue.d.ts +2 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/schema.d.ts +1 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-multi/schema.js +2 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/config.d.vue.ts +2 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/config.vue +22 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/config.vue.d.ts +2 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/schema.d.ts +1 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.combobox-single/schema.js +2 -0
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-multi/config.d.vue.ts +2 -2
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-multi/config.vue.d.ts +2 -2
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-single/config.d.vue.ts +2 -2
- package/dist/runtime/components/table/columns/2026-06-14/com.shwfed.table.column.tree-combobox-single/config.vue.d.ts +2 -2
- package/dist/runtime/components/table/utils/shared.d.ts +1 -0
- package/dist/runtime/components/table/utils/shared.js +11 -8
- 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
|
@@ -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:
|
|
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 {
|
|
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;
|