pukaad-ui-lib 1.33.0 → 1.35.0
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/input/input-autocomplete.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-autocomplete.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-birth-date.d.vue.ts +42 -0
- package/dist/runtime/components/input/input-birth-date.vue +74 -0
- package/dist/runtime/components/input/input-birth-date.vue.d.ts +42 -0
- package/dist/runtime/components/input/input-combobox.vue +22 -3
- package/dist/runtime/components/input/input-date-picker.d.vue.ts +4 -0
- package/dist/runtime/components/input/input-date-picker.vue +24 -2
- package/dist/runtime/components/input/input-date-picker.vue.d.ts +4 -0
- package/dist/runtime/components/input/input-file.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-file.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-password.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-password.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-slider.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-slider.vue.d.ts +1 -1
- package/dist/runtime/components/ui/command/CommandEmpty.d.vue.ts +4 -3
- package/dist/runtime/components/ui/command/CommandEmpty.vue +8 -6
- package/dist/runtime/components/ui/command/CommandEmpty.vue.d.ts +4 -3
- package/dist/runtime/components/ui/command/CommandGroup.vue +9 -4
- package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts +2 -2
- package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts +2 -2
- package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts +2 -2
- package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts +2 -2
- package/package.json +1 -1
- /package/dist/runtime/components/{tab.d.vue.ts → tab_old.d.vue.ts} +0 -0
- /package/dist/runtime/components/{tab.vue → tab_old.vue} +0 -0
- /package/dist/runtime/components/{tab.vue.d.ts → tab_old.vue.d.ts} +0 -0
package/dist/module.json
CHANGED
|
@@ -37,8 +37,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
37
37
|
name: string;
|
|
38
38
|
placeholder: string;
|
|
39
39
|
description: string;
|
|
40
|
-
limit: number;
|
|
41
40
|
options: AutocompleteOption[] | string[] | number[];
|
|
41
|
+
limit: number;
|
|
42
42
|
disabledErrorMessage: boolean;
|
|
43
43
|
disabledBorder: boolean;
|
|
44
44
|
showCounter: boolean;
|
|
@@ -37,8 +37,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
37
37
|
name: string;
|
|
38
38
|
placeholder: string;
|
|
39
39
|
description: string;
|
|
40
|
-
limit: number;
|
|
41
40
|
options: AutocompleteOption[] | string[] | number[];
|
|
41
|
+
limit: number;
|
|
42
42
|
disabledErrorMessage: boolean;
|
|
43
43
|
disabledBorder: boolean;
|
|
44
44
|
showCounter: boolean;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { HTMLAttributes } from "vue";
|
|
2
|
+
import type { LayoutTypes } from "@/runtime/components/ui/calendar";
|
|
3
|
+
export interface InputBirthDateProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
name?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
label?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
disabledErrorMessage?: boolean;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
dateFormat?: string;
|
|
13
|
+
locale?: string;
|
|
14
|
+
layout?: LayoutTypes;
|
|
15
|
+
class?: HTMLAttributes["class"];
|
|
16
|
+
minAge?: number;
|
|
17
|
+
maxYearsBack?: number;
|
|
18
|
+
}
|
|
19
|
+
type __VLS_Props = InputBirthDateProps;
|
|
20
|
+
type __VLS_ModelProps = {
|
|
21
|
+
modelValue?: Date | undefined;
|
|
22
|
+
};
|
|
23
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
24
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
25
|
+
"update:modelValue": (value: Date | undefined) => any;
|
|
26
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
27
|
+
"onUpdate:modelValue"?: ((value: Date | undefined) => any) | undefined;
|
|
28
|
+
}>, {
|
|
29
|
+
required: boolean;
|
|
30
|
+
id: string;
|
|
31
|
+
name: string;
|
|
32
|
+
placeholder: string;
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
disabledErrorMessage: boolean;
|
|
35
|
+
locale: string;
|
|
36
|
+
layout: "month-and-year" | "month-only" | "year-only";
|
|
37
|
+
dateFormat: string;
|
|
38
|
+
minAge: number;
|
|
39
|
+
maxYearsBack: number;
|
|
40
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
41
|
+
declare const _default: typeof __VLS_export;
|
|
42
|
+
export default _default;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<InputDatePicker
|
|
3
|
+
v-model="modelValue"
|
|
4
|
+
:id="props.id"
|
|
5
|
+
:name="props.name"
|
|
6
|
+
:label="props.label"
|
|
7
|
+
:placeholder="props.placeholder"
|
|
8
|
+
:disabled="props.disabled"
|
|
9
|
+
:required="props.required"
|
|
10
|
+
:description="props.description"
|
|
11
|
+
:disabled-error-message="props.disabledErrorMessage"
|
|
12
|
+
:date-format="props.dateFormat"
|
|
13
|
+
:locale="props.locale"
|
|
14
|
+
:layout="props.layout"
|
|
15
|
+
:max-value="today"
|
|
16
|
+
:min-value="minDate"
|
|
17
|
+
:rules="birthDateRules"
|
|
18
|
+
:class="props.class"
|
|
19
|
+
/>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script setup>
|
|
23
|
+
import { computed } from "vue";
|
|
24
|
+
const props = defineProps({
|
|
25
|
+
id: { type: String, required: false, default: "input-birth-date" },
|
|
26
|
+
name: { type: String, required: false, default: "input-birth-date" },
|
|
27
|
+
disabled: { type: Boolean, required: false, default: false },
|
|
28
|
+
label: { type: String, required: false },
|
|
29
|
+
placeholder: { type: String, required: false, default: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E40\u0E01\u0E34\u0E14" },
|
|
30
|
+
description: { type: String, required: false },
|
|
31
|
+
disabledErrorMessage: { type: Boolean, required: false, default: false },
|
|
32
|
+
required: { type: Boolean, required: false, default: false },
|
|
33
|
+
dateFormat: { type: String, required: false, default: "D MMMM BBBB" },
|
|
34
|
+
locale: { type: String, required: false, default: "th" },
|
|
35
|
+
layout: { type: null, required: false, default: "month-and-year" },
|
|
36
|
+
class: { type: null, required: false },
|
|
37
|
+
minAge: { type: Number, required: false, default: 13 },
|
|
38
|
+
maxYearsBack: { type: Number, required: false, default: 100 }
|
|
39
|
+
});
|
|
40
|
+
const modelValue = defineModel({ type: null, ...{ default: void 0 } });
|
|
41
|
+
const today = computed(() => /* @__PURE__ */ new Date());
|
|
42
|
+
const minDate = computed(() => {
|
|
43
|
+
const date = /* @__PURE__ */ new Date();
|
|
44
|
+
date.setFullYear(date.getFullYear() - props.maxYearsBack);
|
|
45
|
+
return date;
|
|
46
|
+
});
|
|
47
|
+
const birthDateRules = (v) => {
|
|
48
|
+
if (!v && props.required) {
|
|
49
|
+
return `\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01${props.label || "\u0E27\u0E31\u0E19\u0E40\u0E01\u0E34\u0E14"}`;
|
|
50
|
+
}
|
|
51
|
+
if (v) {
|
|
52
|
+
const now = /* @__PURE__ */ new Date();
|
|
53
|
+
if (v > now) {
|
|
54
|
+
return "\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
|
|
55
|
+
}
|
|
56
|
+
const minAllowedDate = /* @__PURE__ */ new Date();
|
|
57
|
+
minAllowedDate.setFullYear(
|
|
58
|
+
minAllowedDate.getFullYear() - props.maxYearsBack
|
|
59
|
+
);
|
|
60
|
+
if (v < minAllowedDate) {
|
|
61
|
+
return "\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48\u0E44\u0E21\u0E48\u0E16\u0E39\u0E01\u0E15\u0E49\u0E2D\u0E07";
|
|
62
|
+
}
|
|
63
|
+
const ageDate = new Date(
|
|
64
|
+
now.getFullYear() - props.minAge,
|
|
65
|
+
now.getMonth(),
|
|
66
|
+
now.getDate()
|
|
67
|
+
);
|
|
68
|
+
if (v > ageDate) {
|
|
69
|
+
return `\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49\u0E15\u0E49\u0E2D\u0E07\u0E21\u0E35\u0E2D\u0E32\u0E22\u0E38\u0E44\u0E21\u0E48\u0E15\u0E48\u0E33\u0E01\u0E27\u0E48\u0E32 ${props.minAge} \u0E1B\u0E35`;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
return true;
|
|
73
|
+
};
|
|
74
|
+
</script>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { HTMLAttributes } from "vue";
|
|
2
|
+
import type { LayoutTypes } from "@/runtime/components/ui/calendar";
|
|
3
|
+
export interface InputBirthDateProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
name?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
label?: string;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
disabledErrorMessage?: boolean;
|
|
11
|
+
required?: boolean;
|
|
12
|
+
dateFormat?: string;
|
|
13
|
+
locale?: string;
|
|
14
|
+
layout?: LayoutTypes;
|
|
15
|
+
class?: HTMLAttributes["class"];
|
|
16
|
+
minAge?: number;
|
|
17
|
+
maxYearsBack?: number;
|
|
18
|
+
}
|
|
19
|
+
type __VLS_Props = InputBirthDateProps;
|
|
20
|
+
type __VLS_ModelProps = {
|
|
21
|
+
modelValue?: Date | undefined;
|
|
22
|
+
};
|
|
23
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
24
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
25
|
+
"update:modelValue": (value: Date | undefined) => any;
|
|
26
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
27
|
+
"onUpdate:modelValue"?: ((value: Date | undefined) => any) | undefined;
|
|
28
|
+
}>, {
|
|
29
|
+
required: boolean;
|
|
30
|
+
id: string;
|
|
31
|
+
name: string;
|
|
32
|
+
placeholder: string;
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
disabledErrorMessage: boolean;
|
|
35
|
+
locale: string;
|
|
36
|
+
layout: "month-and-year" | "month-only" | "year-only";
|
|
37
|
+
dateFormat: string;
|
|
38
|
+
minAge: number;
|
|
39
|
+
maxYearsBack: number;
|
|
40
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
41
|
+
declare const _default: typeof __VLS_export;
|
|
42
|
+
export default _default;
|
|
@@ -43,7 +43,13 @@
|
|
|
43
43
|
role="combobox"
|
|
44
44
|
class="w-full justify-between text-start"
|
|
45
45
|
>
|
|
46
|
-
|
|
46
|
+
<span
|
|
47
|
+
:class="{
|
|
48
|
+
'text-cloud': props.placeholder && isShowingPlaceholder
|
|
49
|
+
}"
|
|
50
|
+
>
|
|
51
|
+
{{ displayValue }}
|
|
52
|
+
</span>
|
|
47
53
|
<Icon name="lucide:chevrons-up-down" class="h-4 w-4" />
|
|
48
54
|
</ShadButton>
|
|
49
55
|
</ShadFormControl>
|
|
@@ -52,7 +58,7 @@
|
|
|
52
58
|
<ShadCommand>
|
|
53
59
|
<ShadCommandInput />
|
|
54
60
|
<ShadCommandList>
|
|
55
|
-
<ShadCommandGroup>
|
|
61
|
+
<ShadCommandGroup v-if="options && options.length > 0">
|
|
56
62
|
<slot name="options">
|
|
57
63
|
<ShadCommandItem
|
|
58
64
|
v-for="option in options"
|
|
@@ -80,7 +86,9 @@
|
|
|
80
86
|
</ShadCommandItem>
|
|
81
87
|
</slot>
|
|
82
88
|
</ShadCommandGroup>
|
|
83
|
-
<ShadCommandEmpty
|
|
89
|
+
<ShadCommandEmpty
|
|
90
|
+
:force-show="!options || options.length === 0"
|
|
91
|
+
/>
|
|
84
92
|
</ShadCommandList>
|
|
85
93
|
</ShadCommand>
|
|
86
94
|
</ShadPopoverContent>
|
|
@@ -132,6 +140,17 @@ const displayValue = computed(() => {
|
|
|
132
140
|
return selectedOption?.label || props.placeholder || "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
|
|
133
141
|
}
|
|
134
142
|
});
|
|
143
|
+
const isShowingPlaceholder = computed(() => {
|
|
144
|
+
if (props.multiple) {
|
|
145
|
+
const selectedValues = modelValue.value;
|
|
146
|
+
return !selectedValues || selectedValues.length === 0;
|
|
147
|
+
} else {
|
|
148
|
+
const selectedOption = props.options?.find(
|
|
149
|
+
(opt) => opt.value === modelValue.value
|
|
150
|
+
);
|
|
151
|
+
return !selectedOption;
|
|
152
|
+
}
|
|
153
|
+
});
|
|
135
154
|
const isLimitReached = computed(() => {
|
|
136
155
|
if (!props.multiple || props.limit <= 0) return false;
|
|
137
156
|
return modelValue.value.length >= props.limit;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { DateValue } from "reka-ui";
|
|
1
2
|
import type { HTMLAttributes } from "vue";
|
|
2
3
|
import type { LayoutTypes } from "@/runtime/components/ui/calendar";
|
|
3
4
|
export interface InputDatePickerProps {
|
|
@@ -15,6 +16,9 @@ export interface InputDatePickerProps {
|
|
|
15
16
|
layout?: LayoutTypes;
|
|
16
17
|
showTime?: boolean;
|
|
17
18
|
class?: HTMLAttributes["class"];
|
|
19
|
+
maxValue?: Date;
|
|
20
|
+
minValue?: Date;
|
|
21
|
+
isDateDisabled?: (date: DateValue) => boolean;
|
|
18
22
|
}
|
|
19
23
|
type __VLS_Props = InputDatePickerProps;
|
|
20
24
|
type __VLS_ModelProps = {
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
cn(
|
|
28
28
|
'w-full flex items-center justify-between gap-2 font-body-large',
|
|
29
29
|
!modelValue && 'text-muted-foreground',
|
|
30
|
-
errorMessage && 'border-destructive',
|
|
30
|
+
errorMessage && 'border-destructive hover:border-destructive',
|
|
31
31
|
props.class
|
|
32
32
|
)
|
|
33
33
|
"
|
|
@@ -44,6 +44,9 @@
|
|
|
44
44
|
initial-focus
|
|
45
45
|
:locale="locale"
|
|
46
46
|
:layout="layout"
|
|
47
|
+
:max-value="maxCalendarValue"
|
|
48
|
+
:min-value="minCalendarValue"
|
|
49
|
+
:is-date-disabled="props.isDateDisabled"
|
|
47
50
|
/>
|
|
48
51
|
<!-- Time Picker -->
|
|
49
52
|
<div
|
|
@@ -126,7 +129,26 @@ const props = defineProps({
|
|
|
126
129
|
locale: { type: String, required: false, default: "th" },
|
|
127
130
|
layout: { type: null, required: false, default: "month-and-year" },
|
|
128
131
|
showTime: { type: Boolean, required: false, default: false },
|
|
129
|
-
class: { type: null, required: false }
|
|
132
|
+
class: { type: null, required: false },
|
|
133
|
+
maxValue: { type: Date, required: false },
|
|
134
|
+
minValue: { type: Date, required: false },
|
|
135
|
+
isDateDisabled: { type: Function, required: false }
|
|
136
|
+
});
|
|
137
|
+
const maxCalendarValue = computed(() => {
|
|
138
|
+
if (!props.maxValue) return void 0;
|
|
139
|
+
return new CalendarDate(
|
|
140
|
+
props.maxValue.getFullYear(),
|
|
141
|
+
props.maxValue.getMonth() + 1,
|
|
142
|
+
props.maxValue.getDate()
|
|
143
|
+
);
|
|
144
|
+
});
|
|
145
|
+
const minCalendarValue = computed(() => {
|
|
146
|
+
if (!props.minValue) return void 0;
|
|
147
|
+
return new CalendarDate(
|
|
148
|
+
props.minValue.getFullYear(),
|
|
149
|
+
props.minValue.getMonth() + 1,
|
|
150
|
+
props.minValue.getDate()
|
|
151
|
+
);
|
|
130
152
|
});
|
|
131
153
|
const modelValue = defineModel({ type: null, ...{ default: void 0 } });
|
|
132
154
|
const fieldRef = ref();
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { DateValue } from "reka-ui";
|
|
1
2
|
import type { HTMLAttributes } from "vue";
|
|
2
3
|
import type { LayoutTypes } from "@/runtime/components/ui/calendar";
|
|
3
4
|
export interface InputDatePickerProps {
|
|
@@ -15,6 +16,9 @@ export interface InputDatePickerProps {
|
|
|
15
16
|
layout?: LayoutTypes;
|
|
16
17
|
showTime?: boolean;
|
|
17
18
|
class?: HTMLAttributes["class"];
|
|
19
|
+
maxValue?: Date;
|
|
20
|
+
minValue?: Date;
|
|
21
|
+
isDateDisabled?: (date: DateValue) => boolean;
|
|
18
22
|
}
|
|
19
23
|
type __VLS_Props = InputDatePickerProps;
|
|
20
24
|
type __VLS_ModelProps = {
|
|
@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
27
27
|
label: string;
|
|
28
28
|
name: string;
|
|
29
29
|
limit: number;
|
|
30
|
-
disabledErrorMessage: boolean;
|
|
31
30
|
accept: string;
|
|
31
|
+
disabledErrorMessage: boolean;
|
|
32
32
|
labelIcon: string;
|
|
33
33
|
disabledDrop: boolean;
|
|
34
34
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -27,8 +27,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
27
27
|
label: string;
|
|
28
28
|
name: string;
|
|
29
29
|
limit: number;
|
|
30
|
-
disabledErrorMessage: boolean;
|
|
31
30
|
accept: string;
|
|
31
|
+
disabledErrorMessage: boolean;
|
|
32
32
|
labelIcon: string;
|
|
33
33
|
disabledDrop: boolean;
|
|
34
34
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
18
18
|
}>, {
|
|
19
19
|
id: string;
|
|
20
20
|
name: string;
|
|
21
|
-
new: boolean;
|
|
22
21
|
disabledForgotPassword: boolean;
|
|
22
|
+
new: boolean;
|
|
23
23
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
24
24
|
declare const _default: typeof __VLS_export;
|
|
25
25
|
export default _default;
|
|
@@ -18,8 +18,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
18
18
|
}>, {
|
|
19
19
|
id: string;
|
|
20
20
|
name: string;
|
|
21
|
-
new: boolean;
|
|
22
21
|
disabledForgotPassword: boolean;
|
|
22
|
+
new: boolean;
|
|
23
23
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
24
24
|
declare const _default: typeof __VLS_export;
|
|
25
25
|
export default _default;
|
|
@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
12
12
|
color: InputSliderColor;
|
|
13
13
|
fullWidth: boolean;
|
|
14
14
|
label: string;
|
|
15
|
+
step: number;
|
|
15
16
|
max: number;
|
|
16
17
|
min: number;
|
|
17
|
-
step: number;
|
|
18
18
|
lineHeight: number | string;
|
|
19
19
|
appearance: boolean;
|
|
20
20
|
thumbSize: number | string;
|
|
@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
12
12
|
color: InputSliderColor;
|
|
13
13
|
fullWidth: boolean;
|
|
14
14
|
label: string;
|
|
15
|
+
step: number;
|
|
15
16
|
max: number;
|
|
16
17
|
min: number;
|
|
17
|
-
step: number;
|
|
18
18
|
lineHeight: number | string;
|
|
19
19
|
appearance: boolean;
|
|
20
20
|
thumbSize: number | string;
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import type { PrimitiveProps } from "reka-ui";
|
|
2
2
|
import type { HTMLAttributes } from "vue";
|
|
3
|
-
|
|
3
|
+
interface CommandEmptyProps extends PrimitiveProps {
|
|
4
4
|
class?: HTMLAttributes["class"];
|
|
5
|
-
|
|
5
|
+
forceShow?: boolean;
|
|
6
|
+
}
|
|
6
7
|
declare var __VLS_8: {};
|
|
7
8
|
type __VLS_Slots = {} & {
|
|
8
9
|
default?: (props: typeof __VLS_8) => any;
|
|
9
10
|
};
|
|
10
|
-
declare const __VLS_base: import("vue").DefineComponent<
|
|
11
|
+
declare const __VLS_base: import("vue").DefineComponent<CommandEmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CommandEmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
12
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
12
13
|
declare const _default: typeof __VLS_export;
|
|
13
14
|
export default _default;
|
|
@@ -5,15 +5,17 @@ import { computed } from "vue";
|
|
|
5
5
|
import { cn } from "@/runtime/plugins/shadcn";
|
|
6
6
|
import { useCommand } from ".";
|
|
7
7
|
const props = defineProps({
|
|
8
|
+
class: { type: null, required: false },
|
|
9
|
+
forceShow: { type: Boolean, required: false },
|
|
8
10
|
asChild: { type: Boolean, required: false },
|
|
9
|
-
as: { type: null, required: false }
|
|
10
|
-
class: { type: null, required: false }
|
|
11
|
+
as: { type: null, required: false }
|
|
11
12
|
});
|
|
12
|
-
const delegatedProps = reactiveOmit(props, "class");
|
|
13
|
+
const delegatedProps = reactiveOmit(props, "class", "forceShow");
|
|
13
14
|
const { filterState } = useCommand();
|
|
14
|
-
const isRender = computed(
|
|
15
|
-
()
|
|
16
|
-
|
|
15
|
+
const isRender = computed(() => {
|
|
16
|
+
if (props.forceShow) return true;
|
|
17
|
+
return !!filterState.search && filterState.filtered.count === 0;
|
|
18
|
+
});
|
|
17
19
|
</script>
|
|
18
20
|
|
|
19
21
|
<template>
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import type { PrimitiveProps } from "reka-ui";
|
|
2
2
|
import type { HTMLAttributes } from "vue";
|
|
3
|
-
|
|
3
|
+
interface CommandEmptyProps extends PrimitiveProps {
|
|
4
4
|
class?: HTMLAttributes["class"];
|
|
5
|
-
|
|
5
|
+
forceShow?: boolean;
|
|
6
|
+
}
|
|
6
7
|
declare var __VLS_8: {};
|
|
7
8
|
type __VLS_Slots = {} & {
|
|
8
9
|
default?: (props: typeof __VLS_8) => any;
|
|
9
10
|
};
|
|
10
|
-
declare const __VLS_base: import("vue").DefineComponent<
|
|
11
|
+
declare const __VLS_base: import("vue").DefineComponent<CommandEmptyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CommandEmptyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
11
12
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
12
13
|
declare const _default: typeof __VLS_export;
|
|
13
14
|
export default _default;
|
|
@@ -13,11 +13,12 @@ const props = defineProps({
|
|
|
13
13
|
const delegatedProps = reactiveOmit(props, "class");
|
|
14
14
|
const { allGroups, filterState } = useCommand();
|
|
15
15
|
const id = useId();
|
|
16
|
-
const isRender = computed(
|
|
16
|
+
const isRender = computed(
|
|
17
|
+
() => !filterState.search ? true : filterState.filtered.groups.has(id)
|
|
18
|
+
);
|
|
17
19
|
provideCommandGroupContext({ id });
|
|
18
20
|
onMounted(() => {
|
|
19
|
-
if (!allGroups.value.has(id))
|
|
20
|
-
allGroups.value.set(id, /* @__PURE__ */ new Set());
|
|
21
|
+
if (!allGroups.value.has(id)) allGroups.value.set(id, /* @__PURE__ */ new Set());
|
|
21
22
|
});
|
|
22
23
|
onUnmounted(() => {
|
|
23
24
|
allGroups.value.delete(id);
|
|
@@ -32,7 +33,11 @@ onUnmounted(() => {
|
|
|
32
33
|
:class="cn('text-foreground overflow-hidden p-1', props.class)"
|
|
33
34
|
:hidden="isRender ? void 0 : true"
|
|
34
35
|
>
|
|
35
|
-
<ListboxGroupLabel
|
|
36
|
+
<ListboxGroupLabel
|
|
37
|
+
v-if="heading"
|
|
38
|
+
data-slot="command-group-heading"
|
|
39
|
+
class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
|
|
40
|
+
>
|
|
36
41
|
{{ heading }}
|
|
37
42
|
</ListboxGroupLabel>
|
|
38
43
|
<slot />
|
|
@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
59
59
|
'aria-colindex'?: (string | number) | undefined;
|
|
60
60
|
'aria-colspan'?: (string | number) | undefined;
|
|
61
61
|
'aria-controls'?: string | undefined | undefined;
|
|
62
|
-
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "
|
|
62
|
+
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
|
|
63
63
|
'aria-describedby'?: string | undefined | undefined;
|
|
64
64
|
'aria-details'?: string | undefined | undefined;
|
|
65
65
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
253
253
|
'aria-colindex'?: (string | number) | undefined;
|
|
254
254
|
'aria-colspan'?: (string | number) | undefined;
|
|
255
255
|
'aria-controls'?: string | undefined | undefined;
|
|
256
|
-
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "
|
|
256
|
+
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
|
|
257
257
|
'aria-describedby'?: string | undefined | undefined;
|
|
258
258
|
'aria-details'?: string | undefined | undefined;
|
|
259
259
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
59
59
|
'aria-colindex'?: (string | number) | undefined;
|
|
60
60
|
'aria-colspan'?: (string | number) | undefined;
|
|
61
61
|
'aria-controls'?: string | undefined | undefined;
|
|
62
|
-
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "
|
|
62
|
+
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
|
|
63
63
|
'aria-describedby'?: string | undefined | undefined;
|
|
64
64
|
'aria-details'?: string | undefined | undefined;
|
|
65
65
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
253
253
|
'aria-colindex'?: (string | number) | undefined;
|
|
254
254
|
'aria-colspan'?: (string | number) | undefined;
|
|
255
255
|
'aria-controls'?: string | undefined | undefined;
|
|
256
|
-
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "
|
|
256
|
+
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
|
|
257
257
|
'aria-describedby'?: string | undefined | undefined;
|
|
258
258
|
'aria-details'?: string | undefined | undefined;
|
|
259
259
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
61
61
|
'aria-colindex'?: (string | number) | undefined;
|
|
62
62
|
'aria-colspan'?: (string | number) | undefined;
|
|
63
63
|
'aria-controls'?: string | undefined | undefined;
|
|
64
|
-
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "
|
|
64
|
+
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
|
|
65
65
|
'aria-describedby'?: string | undefined | undefined;
|
|
66
66
|
'aria-details'?: string | undefined | undefined;
|
|
67
67
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
257
257
|
'aria-colindex'?: (string | number) | undefined;
|
|
258
258
|
'aria-colspan'?: (string | number) | undefined;
|
|
259
259
|
'aria-controls'?: string | undefined | undefined;
|
|
260
|
-
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "
|
|
260
|
+
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
|
|
261
261
|
'aria-describedby'?: string | undefined | undefined;
|
|
262
262
|
'aria-details'?: string | undefined | undefined;
|
|
263
263
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
61
61
|
'aria-colindex'?: (string | number) | undefined;
|
|
62
62
|
'aria-colspan'?: (string | number) | undefined;
|
|
63
63
|
'aria-controls'?: string | undefined | undefined;
|
|
64
|
-
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "
|
|
64
|
+
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
|
|
65
65
|
'aria-describedby'?: string | undefined | undefined;
|
|
66
66
|
'aria-details'?: string | undefined | undefined;
|
|
67
67
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
|
|
|
257
257
|
'aria-colindex'?: (string | number) | undefined;
|
|
258
258
|
'aria-colspan'?: (string | number) | undefined;
|
|
259
259
|
'aria-controls'?: string | undefined | undefined;
|
|
260
|
-
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "
|
|
260
|
+
'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
|
|
261
261
|
'aria-describedby'?: string | undefined | undefined;
|
|
262
262
|
'aria-details'?: string | undefined | undefined;
|
|
263
263
|
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|