vlite3 1.3.9 → 1.3.11
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/components/AsyncSelect/createAsyncSelect.d.ts +44 -3
- package/components/AsyncSelect/createAsyncSelect.js +107 -76
- package/components/CommandPalette/CommandPaletteContent.vue2.js +1 -1
- package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js} +1 -1
- package/components/Dropdown/DropdownBooleanItem.vue.js +6 -6
- package/components/Dropdown/DropdownItem.vue.js +17 -17
- package/components/Dropdown/DropdownMenu.vue.js +1 -1
- package/components/Dropdown/DropdownMenu.vue2.js +23 -23
- package/components/Form/Form.vue.d.ts +5 -5
- package/components/Form/Form.vue.js +2 -2
- package/components/Form/Form.vue2.js +263 -239
- package/components/Form/composables/useForm.js +57 -56
- package/components/Form/types.d.ts +12 -4
- package/components/ImportData/ImportData.vue.js +112 -109
- package/components/ImportData/ImportStep1.vue.js +28 -28
- package/components/ImportData/ImportStep3.vue.js +25 -6
- package/components/ImportData/types.d.ts +1 -0
- package/components/NavbarCommandPalette.vue.js +1 -1
- package/components/NumberInput.vue.js +1 -1
- package/components/NumberInput.vue2.js +47 -45
- package/components/Tabes/Tabes.vue.js +2 -2
- package/components/Tabes/Tabes.vue2.js +73 -71
- package/package.json +1 -1
- package/style.css +37 -1
- package/utils/functions.js +9 -5
|
@@ -14,6 +14,26 @@ export interface SelectOption<T = unknown> {
|
|
|
14
14
|
data?: T;
|
|
15
15
|
}
|
|
16
16
|
export type OptionsMapper<T> = (item: T) => SelectOption<T> | null | undefined;
|
|
17
|
+
/**
|
|
18
|
+
* A static filter object, or a function that derives the filter from the
|
|
19
|
+
* surrounding form state. Returning `undefined` clears the filter.
|
|
20
|
+
*
|
|
21
|
+
* When a function is used, the function is only re-invoked when one of the
|
|
22
|
+
* keys it actually *reads* changes. Reading `values.quotationType` will not
|
|
23
|
+
* cause the function to re-run on changes to `values.cargoQuantityDelivered`.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* // Static
|
|
27
|
+
* filter: { status: 'ACTIVE' }
|
|
28
|
+
*
|
|
29
|
+
* // Dynamic — reactive against the parent form's values
|
|
30
|
+
* filter: ({ values }) => values.quotationType === 'WATER_DELIVERY'
|
|
31
|
+
* ? { isTanker: true }
|
|
32
|
+
* : undefined
|
|
33
|
+
*/
|
|
34
|
+
export type AsyncSelectFilter = Record<string, any> | ((ctx: {
|
|
35
|
+
values: Record<string, any>;
|
|
36
|
+
}) => Record<string, any> | undefined | void);
|
|
17
37
|
export interface CreateSelectConfig<T = any> {
|
|
18
38
|
name: string;
|
|
19
39
|
useQuery: any;
|
|
@@ -46,7 +66,17 @@ export declare const createAsyncSelect: <T extends {
|
|
|
46
66
|
default: string;
|
|
47
67
|
};
|
|
48
68
|
filter: {
|
|
49
|
-
type:
|
|
69
|
+
type: PropType<AsyncSelectFilter>;
|
|
70
|
+
default: () => {};
|
|
71
|
+
};
|
|
72
|
+
/**
|
|
73
|
+
* The parent form's current values. Only used when `filter` is a
|
|
74
|
+
* function — the function receives `{ values }` and returns a filter.
|
|
75
|
+
* The form (`FormField.vue`) automatically passes this prop down for
|
|
76
|
+
* custom components; for standalone use, default to `{}`.
|
|
77
|
+
*/
|
|
78
|
+
values: {
|
|
79
|
+
type: PropType<Record<string, any>>;
|
|
50
80
|
default: () => {};
|
|
51
81
|
};
|
|
52
82
|
disabled: {
|
|
@@ -75,7 +105,17 @@ export declare const createAsyncSelect: <T extends {
|
|
|
75
105
|
default: string;
|
|
76
106
|
};
|
|
77
107
|
filter: {
|
|
78
|
-
type:
|
|
108
|
+
type: PropType<AsyncSelectFilter>;
|
|
109
|
+
default: () => {};
|
|
110
|
+
};
|
|
111
|
+
/**
|
|
112
|
+
* The parent form's current values. Only used when `filter` is a
|
|
113
|
+
* function — the function receives `{ values }` and returns a filter.
|
|
114
|
+
* The form (`FormField.vue`) automatically passes this prop down for
|
|
115
|
+
* custom components; for standalone use, default to `{}`.
|
|
116
|
+
*/
|
|
117
|
+
values: {
|
|
118
|
+
type: PropType<Record<string, any>>;
|
|
79
119
|
default: () => {};
|
|
80
120
|
};
|
|
81
121
|
disabled: {
|
|
@@ -93,7 +133,8 @@ export declare const createAsyncSelect: <T extends {
|
|
|
93
133
|
"onUpdate:modelValue"?: (...args: any[]) => any;
|
|
94
134
|
onOnChange?: (...args: any[]) => any;
|
|
95
135
|
}>, {
|
|
96
|
-
filter:
|
|
136
|
+
filter: {};
|
|
137
|
+
values: Record<string, any>;
|
|
97
138
|
placeholder: string;
|
|
98
139
|
disabled: boolean;
|
|
99
140
|
multiple: boolean;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
1
|
+
import { defineComponent as E, ref as y, computed as i, watch as I, createVNode as d, mergeProps as _, nextTick as H, isVNode as L } from "vue";
|
|
2
|
+
import Q from "../Dropdown/Dropdown.vue.js";
|
|
3
3
|
import "@iconify/vue";
|
|
4
4
|
import "../../core/config.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
/* empty css */
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
function
|
|
11
|
-
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" &&
|
|
7
|
+
import R from "../Button.vue.js";
|
|
8
|
+
import T from "../MultiSelect/MultiSelect.vue.js";
|
|
9
|
+
import U from "../Modal.vue.js";
|
|
10
|
+
function j(t) {
|
|
11
|
+
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !L(t);
|
|
12
12
|
}
|
|
13
|
-
const
|
|
13
|
+
const ne = (t) => /* @__PURE__ */ E({
|
|
14
14
|
name: t.name,
|
|
15
15
|
inheritAttrs: !1,
|
|
16
16
|
props: {
|
|
@@ -29,6 +29,16 @@ const X = (t) => /* @__PURE__ */ P({
|
|
|
29
29
|
default: "Select..."
|
|
30
30
|
},
|
|
31
31
|
filter: {
|
|
32
|
+
type: [Object, Function],
|
|
33
|
+
default: () => ({})
|
|
34
|
+
},
|
|
35
|
+
/**
|
|
36
|
+
* The parent form's current values. Only used when `filter` is a
|
|
37
|
+
* function — the function receives `{ values }` and returns a filter.
|
|
38
|
+
* The form (`FormField.vue`) automatically passes this prop down for
|
|
39
|
+
* custom components; for standalone use, default to `{}`.
|
|
40
|
+
*/
|
|
41
|
+
values: {
|
|
32
42
|
type: Object,
|
|
33
43
|
default: () => ({})
|
|
34
44
|
},
|
|
@@ -45,104 +55,125 @@ const X = (t) => /* @__PURE__ */ P({
|
|
|
45
55
|
},
|
|
46
56
|
emits: ["onChange", "update:modelValue", "change"],
|
|
47
57
|
setup(l, {
|
|
48
|
-
attrs:
|
|
49
|
-
emit:
|
|
58
|
+
attrs: M,
|
|
59
|
+
emit: m
|
|
50
60
|
}) {
|
|
51
|
-
const
|
|
61
|
+
const c = y([]), s = y(1), b = y(""), B = 20, h = i(() => l.value !== void 0 ? l.value : l.modelValue), g = i(() => l.optionsMapper || t.optionsMapper), N = (e, a) => {
|
|
62
|
+
const r = l.filter;
|
|
63
|
+
if (typeof r != "function")
|
|
64
|
+
return r || {};
|
|
65
|
+
const o = a != null ? new Proxy(e || {}, {
|
|
66
|
+
get(n, u) {
|
|
67
|
+
return typeof u == "string" && !u.startsWith("__v_") && a.add(u), Reflect.get(n, u);
|
|
68
|
+
}
|
|
69
|
+
}) : e || {};
|
|
70
|
+
try {
|
|
71
|
+
return r({
|
|
72
|
+
values: o
|
|
73
|
+
}) || {};
|
|
74
|
+
} catch (n) {
|
|
75
|
+
return console.error(`[${t.name}] Error evaluating filter function:`, n), {};
|
|
76
|
+
}
|
|
77
|
+
}, w = /* @__PURE__ */ new Set(), P = N(l.values, w), f = y(P), S = Array.from(w), F = i(() => S.length > 0 ? JSON.stringify(S.map((e) => l.values?.[e])) : JSON.stringify(l.filter || {}));
|
|
78
|
+
I(F, () => {
|
|
79
|
+
const e = N(l.values), a = JSON.stringify(f.value), r = JSON.stringify(e);
|
|
80
|
+
a !== r && (f.value = e, s.value = 1);
|
|
81
|
+
});
|
|
82
|
+
const q = i(() => ({
|
|
52
83
|
pagination: {
|
|
53
|
-
page:
|
|
54
|
-
limit:
|
|
84
|
+
page: s.value,
|
|
85
|
+
limit: B
|
|
55
86
|
},
|
|
56
87
|
search: b.value || void 0,
|
|
57
88
|
filter: {
|
|
58
|
-
...
|
|
89
|
+
...f.value
|
|
59
90
|
}
|
|
60
91
|
})), {
|
|
61
|
-
result:
|
|
62
|
-
loading:
|
|
63
|
-
refetch:
|
|
64
|
-
} = t.useQuery(
|
|
92
|
+
result: K,
|
|
93
|
+
loading: A,
|
|
94
|
+
refetch: C
|
|
95
|
+
} = t.useQuery(q, {
|
|
65
96
|
notifyOnNetworkStatusChange: !0,
|
|
66
97
|
fetchPolicy: "cache-and-network"
|
|
67
|
-
}),
|
|
68
|
-
const e =
|
|
98
|
+
}), O = i(() => {
|
|
99
|
+
const e = K.value?.[t.queryName]?.pageInfo;
|
|
69
100
|
return e ? e.currentPage < e.totalPages : !1;
|
|
70
101
|
});
|
|
71
|
-
|
|
102
|
+
I(() => K.value?.[t.queryName], (e) => {
|
|
72
103
|
if (!e) return;
|
|
73
|
-
const
|
|
74
|
-
if (
|
|
75
|
-
if (
|
|
76
|
-
|
|
104
|
+
const a = Array.isArray(e) ? e : e.items;
|
|
105
|
+
if (a)
|
|
106
|
+
if (s.value === 1)
|
|
107
|
+
c.value = [...a];
|
|
77
108
|
else {
|
|
78
|
-
const r = new Set(
|
|
79
|
-
|
|
109
|
+
const r = new Set(c.value.map((n) => n.id)), o = a.filter((n) => !r.has(n.id));
|
|
110
|
+
c.value.push(...o);
|
|
80
111
|
}
|
|
81
112
|
}, {
|
|
82
113
|
immediate: !0
|
|
83
114
|
});
|
|
84
|
-
const
|
|
85
|
-
if (
|
|
86
|
-
return
|
|
87
|
-
const
|
|
115
|
+
const V = (e) => {
|
|
116
|
+
if (g.value)
|
|
117
|
+
return g.value(e);
|
|
118
|
+
const a = typeof t.labelKey == "function" ? t.labelKey(e) : e[t.labelKey || "name"], r = typeof t.subtitleKey == "function" ? t.subtitleKey(e) : e[t.subtitleKey || ""], o = typeof t.descriptionKey == "function" ? t.descriptionKey(e) : e[t.descriptionKey || ""], n = t.iconKey ? typeof t.iconKey == "function" ? t.iconKey(e) : e[t.iconKey] : void 0;
|
|
88
119
|
return {
|
|
89
|
-
label:
|
|
120
|
+
label: a,
|
|
90
121
|
subtitle: r || void 0,
|
|
91
122
|
description: o || void 0,
|
|
92
123
|
value: e[t.valueKey || "id"],
|
|
93
|
-
icon:
|
|
124
|
+
icon: n || void 0,
|
|
94
125
|
data: e
|
|
95
126
|
};
|
|
96
|
-
},
|
|
97
|
-
let r =
|
|
98
|
-
l.multiple && Array.isArray(e) && (r = e.map((
|
|
99
|
-
const u =
|
|
127
|
+
}, p = i(() => c.value.map(V).filter(Boolean)), v = (e, a) => {
|
|
128
|
+
let r = a;
|
|
129
|
+
l.multiple && Array.isArray(e) && (r = e.map((n) => {
|
|
130
|
+
const u = p.value.find((x) => x.value === n);
|
|
100
131
|
return u ? u.data : null;
|
|
101
132
|
}).filter(Boolean));
|
|
102
133
|
const o = {
|
|
103
134
|
value: e,
|
|
104
135
|
data: r
|
|
105
136
|
};
|
|
106
|
-
|
|
107
|
-
},
|
|
108
|
-
b.value = e,
|
|
109
|
-
},
|
|
110
|
-
!
|
|
111
|
-
},
|
|
112
|
-
const
|
|
113
|
-
if (
|
|
114
|
-
await
|
|
115
|
-
const r = new Set(
|
|
137
|
+
m("update:modelValue", e), m("change", o), m("onChange", o);
|
|
138
|
+
}, J = (e) => {
|
|
139
|
+
b.value = e, s.value = 1;
|
|
140
|
+
}, $ = () => {
|
|
141
|
+
!O.value || A.value || s.value++;
|
|
142
|
+
}, z = async (e) => {
|
|
143
|
+
const a = (Array.isArray(e) ? e : [e]).filter((n) => (typeof n == "string" || typeof n == "number") && n !== "");
|
|
144
|
+
if (a.length === 0) return [];
|
|
145
|
+
await H();
|
|
146
|
+
const r = new Set(p.value.map((n) => n.value)), o = a.filter((n) => !r.has(n));
|
|
116
147
|
if (o.length === 0) return [];
|
|
117
148
|
try {
|
|
118
149
|
const {
|
|
119
|
-
data:
|
|
120
|
-
} = await
|
|
150
|
+
data: n
|
|
151
|
+
} = await C({
|
|
121
152
|
pagination: {
|
|
122
153
|
page: 1,
|
|
123
154
|
limit: o.length
|
|
124
155
|
},
|
|
125
156
|
filter: {
|
|
126
|
-
...
|
|
157
|
+
...f.value,
|
|
127
158
|
ids: o
|
|
128
159
|
}
|
|
129
|
-
}), u =
|
|
130
|
-
return (Array.isArray(u) ? u : u?.items || []).map(
|
|
131
|
-
} catch (
|
|
132
|
-
return console.error(`[${t.name}] Hydration failed`,
|
|
160
|
+
}), u = n?.[t.queryName];
|
|
161
|
+
return (Array.isArray(u) ? u : u?.items || []).map(V).filter(Boolean);
|
|
162
|
+
} catch (n) {
|
|
163
|
+
return console.error(`[${t.name}] Hydration failed`, n), [];
|
|
133
164
|
}
|
|
134
|
-
},
|
|
165
|
+
}, k = () => l.addNewConfig ? d("div", {
|
|
135
166
|
class: "px-1 pb-1 pt-1 mt-1 border-t border-border bg-body sticky bottom-0 z-10"
|
|
136
|
-
}, [
|
|
167
|
+
}, [d(U, {
|
|
137
168
|
title: l.addNewConfig.label || "Add New",
|
|
138
169
|
titleI18n: l.addNewConfig.labelI18n,
|
|
139
170
|
body: l.addNewConfig.component,
|
|
140
171
|
bodyProps: l.addNewConfig.props,
|
|
141
172
|
onClose: () => {
|
|
142
|
-
|
|
173
|
+
C();
|
|
143
174
|
}
|
|
144
175
|
}, {
|
|
145
|
-
trigger: () =>
|
|
176
|
+
trigger: () => d(R, {
|
|
146
177
|
class: "w-full justify-start text-primary hover:text-primary hover:bg-primary/10",
|
|
147
178
|
variant: "ghost",
|
|
148
179
|
size: "sm",
|
|
@@ -152,35 +183,35 @@ const X = (t) => /* @__PURE__ */ P({
|
|
|
152
183
|
})]) : null;
|
|
153
184
|
return () => {
|
|
154
185
|
const e = {
|
|
155
|
-
options:
|
|
156
|
-
loading:
|
|
186
|
+
options: p.value,
|
|
187
|
+
loading: A.value,
|
|
157
188
|
searchable: t.searchable ?? !0,
|
|
158
189
|
remote: t.remote ?? !0,
|
|
159
|
-
hasMore:
|
|
190
|
+
hasMore: O.value,
|
|
160
191
|
placeholder: l.placeholder,
|
|
161
192
|
disabled: l.disabled,
|
|
162
|
-
fetchSelected:
|
|
163
|
-
onSearch:
|
|
164
|
-
onLoadMore:
|
|
165
|
-
...
|
|
166
|
-
},
|
|
167
|
-
return l.addNewConfig && (
|
|
193
|
+
fetchSelected: z,
|
|
194
|
+
onSearch: J,
|
|
195
|
+
onLoadMore: $,
|
|
196
|
+
...M
|
|
197
|
+
}, a = {};
|
|
198
|
+
return l.addNewConfig && (a.footer = () => k()), l.multiple ? d(T, _(e, {
|
|
168
199
|
modelValue: h.value,
|
|
169
|
-
"onUpdate:modelValue": (r) =>
|
|
170
|
-
onChange: (r) =>
|
|
171
|
-
}),
|
|
172
|
-
default: () => [
|
|
173
|
-
}) :
|
|
200
|
+
"onUpdate:modelValue": (r) => v(r),
|
|
201
|
+
onChange: (r) => v(r)
|
|
202
|
+
}), j(a) ? a : {
|
|
203
|
+
default: () => [a]
|
|
204
|
+
}) : d(Q, _(e, {
|
|
174
205
|
showSelectedIcon: !0,
|
|
175
206
|
emptyMessage: "Data not found",
|
|
176
207
|
modelValue: h.value,
|
|
177
|
-
onOnSelect: (r) =>
|
|
178
|
-
}),
|
|
179
|
-
default: () => [
|
|
208
|
+
onOnSelect: (r) => v(r.value, r.data)
|
|
209
|
+
}), j(a) ? a : {
|
|
210
|
+
default: () => [a]
|
|
180
211
|
});
|
|
181
212
|
};
|
|
182
213
|
}
|
|
183
214
|
});
|
|
184
215
|
export {
|
|
185
|
-
|
|
216
|
+
ne as createAsyncSelect
|
|
186
217
|
};
|
|
@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
|
|
|
4
4
|
import { $t as E } from "../../utils/i18n.js";
|
|
5
5
|
import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
|
|
6
6
|
import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
|
|
7
|
-
import ee from "./CommandPaletteItem.
|
|
7
|
+
import ee from "./CommandPaletteItem.vue.js";
|
|
8
8
|
const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as m, computed as d, openBlock as a, createElementBlock as u, withModifiers as
|
|
1
|
+
import { defineComponent as m, computed as d, openBlock as a, createElementBlock as u, withModifiers as f, normalizeClass as p, createElementVNode as l, createBlock as g, createCommentVNode as v, toDisplayString as b, createVNode as h } from "vue";
|
|
2
2
|
import x from "../Switch.vue.js";
|
|
3
3
|
import y from "../Icon.vue.js";
|
|
4
4
|
import { $t as k } from "../../utils/i18n.js";
|
|
@@ -19,11 +19,11 @@ const w = ["data-testid"], B = { class: "flex items-center gap-2 flex-1 min-w-0"
|
|
|
19
19
|
return (t, i) => (a(), u("div", {
|
|
20
20
|
tabindex: "0",
|
|
21
21
|
"data-dropdown-item": "",
|
|
22
|
-
class:
|
|
22
|
+
class: p(["relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus-visible:bg-accent focus-visible:text-accent-foreground", [
|
|
23
23
|
e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
|
|
24
24
|
]]),
|
|
25
25
|
"data-testid": t.$attrs["data-testid"] || `dropdown-item-bool-${e.option.key || e.option.label}`.toLowerCase().replace(/[^a-z0-9]+/g, "-"),
|
|
26
|
-
onClick: i[0] || (i[0] =
|
|
26
|
+
onClick: i[0] || (i[0] = f((j) => n(!e.value), ["stop"]))
|
|
27
27
|
}, [
|
|
28
28
|
l("div", B, [
|
|
29
29
|
e.option.icon || e.option.emoji ? (a(), g(y, {
|
|
@@ -31,10 +31,10 @@ const w = ["data-testid"], B = { class: "flex items-center gap-2 flex-1 min-w-0"
|
|
|
31
31
|
icon: e.option.icon,
|
|
32
32
|
emoji: e.option.emoji,
|
|
33
33
|
class: "h-4 w-4 shrink-0 opacity-70"
|
|
34
|
-
}, null, 8, ["icon", "emoji"])) :
|
|
35
|
-
l("span", $,
|
|
34
|
+
}, null, 8, ["icon", "emoji"])) : v("", !0),
|
|
35
|
+
l("span", $, b(r.value), 1)
|
|
36
36
|
]),
|
|
37
|
-
|
|
37
|
+
h(x, {
|
|
38
38
|
"model-value": e.value,
|
|
39
39
|
class: "ml-3 shrink-0 scale-75 origin-right",
|
|
40
40
|
"onUpdate:modelValue": n
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as w, computed as l, openBlock as n, createElementBlock as s, withKeys as g, withModifiers as k, normalizeClass as h, renderSlot as $, normalizeProps as I, guardReactiveProps as B, createBlock as p, createCommentVNode as i, createElementVNode as d, toDisplayString as c } from "vue";
|
|
2
2
|
import v from "../Icon.vue.js";
|
|
3
3
|
import { $t as r } from "../../utils/i18n.js";
|
|
4
4
|
const j = ["tabindex", "data-disabled", "data-testid"], C = { class: "flex flex-col flex-1 min-w-0" }, S = { class: "flex items-center justify-between gap-2" }, z = { class: "truncate font-medium" }, D = {
|
|
@@ -7,7 +7,7 @@ const j = ["tabindex", "data-disabled", "data-testid"], C = { class: "flex flex-
|
|
|
7
7
|
}, E = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "text-[10px] text-muted-foreground truncate opacity-70"
|
|
10
|
-
}, N = /* @__PURE__ */
|
|
10
|
+
}, N = /* @__PURE__ */ w({
|
|
11
11
|
__name: "DropdownItem",
|
|
12
12
|
props: {
|
|
13
13
|
option: {},
|
|
@@ -18,41 +18,41 @@ const j = ["tabindex", "data-disabled", "data-testid"], C = { class: "flex flex-
|
|
|
18
18
|
},
|
|
19
19
|
emits: ["click", "mouseenter"],
|
|
20
20
|
setup(e, { emit: x }) {
|
|
21
|
-
const t = e, u = x, y =
|
|
21
|
+
const t = e, u = x, y = l(
|
|
22
22
|
() => t.option.labelI18n ? r(t.option.labelI18n) : t.option.label
|
|
23
|
-
), m =
|
|
23
|
+
), m = l(
|
|
24
24
|
() => t.option.subtitleI18n ? r(t.option.subtitleI18n) : t.option.subtitle
|
|
25
|
-
),
|
|
25
|
+
), b = l(
|
|
26
26
|
() => t.option.descriptionI18n ? r(t.option.descriptionI18n) : t.option.description
|
|
27
27
|
);
|
|
28
|
-
return (
|
|
28
|
+
return (a, o) => (n(), s("div", {
|
|
29
29
|
tabindex: e.option.disabled ? -1 : 0,
|
|
30
30
|
"data-dropdown-item": "",
|
|
31
|
-
class: h(["relative w-full flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus-visible:bg-accent focus-visible:text-accent-foreground
|
|
31
|
+
class: h(["relative w-full flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus-visible:bg-accent focus-visible:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", [
|
|
32
32
|
e.selectable && e.selected && !e.option.children ? "bg-accent" : "",
|
|
33
33
|
e.focused ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
|
|
34
34
|
e.option.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
|
|
35
35
|
e.option.class || ""
|
|
36
36
|
]]),
|
|
37
37
|
"data-disabled": e.option.disabled ? !0 : void 0,
|
|
38
|
-
"data-testid":
|
|
39
|
-
onClick: o[0] || (o[0] = (
|
|
40
|
-
onKeydown: o[1] || (o[1] =
|
|
41
|
-
onMouseenter: o[2] || (o[2] = (
|
|
38
|
+
"data-testid": a.$attrs["data-testid"] || (e.option.value ? `dropdown-item-${e.option.value}` : `dropdown-item-${e.option.label}`).toString().toLowerCase().replace(/[^a-z0-9]+/g, "-"),
|
|
39
|
+
onClick: o[0] || (o[0] = (f) => u("click", e.option)),
|
|
40
|
+
onKeydown: o[1] || (o[1] = g(k((f) => u("click", e.option), ["prevent"]), ["enter"])),
|
|
41
|
+
onMouseenter: o[2] || (o[2] = (f) => a.$emit("mouseenter", e.index ?? -1))
|
|
42
42
|
}, [
|
|
43
|
-
$(
|
|
43
|
+
$(a.$slots, "default", I(B({ option: e.option, index: e.index, selected: e.selected })), () => [
|
|
44
44
|
e.option.icon || e.option.emoji ? (n(), p(v, {
|
|
45
45
|
key: 0,
|
|
46
46
|
icon: e.option.icon,
|
|
47
47
|
emoji: e.option.emoji,
|
|
48
48
|
class: "mr-2.5 h-4 w-4 shrink-0 mt-0.5"
|
|
49
49
|
}, null, 8, ["icon", "emoji"])) : i("", !0),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
m.value ? (n(), s("span", D,
|
|
50
|
+
d("div", C, [
|
|
51
|
+
d("div", S, [
|
|
52
|
+
d("span", z, c(y.value), 1),
|
|
53
|
+
m.value ? (n(), s("span", D, c(m.value), 1)) : i("", !0)
|
|
54
54
|
]),
|
|
55
|
-
|
|
55
|
+
b.value ? (n(), s("span", E, c(b.value), 1)) : i("", !0)
|
|
56
56
|
]),
|
|
57
57
|
e.selectable && e.selected ? (n(), p(v, {
|
|
58
58
|
key: 1,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./DropdownMenu.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import r from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
-
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-
|
|
4
|
+
const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0df8084f"]]);
|
|
5
5
|
export {
|
|
6
6
|
m as default
|
|
7
7
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as ee, ref as j, computed as g, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as o, createElementBlock as
|
|
1
|
+
import { defineComponent as ee, ref as j, computed as g, watch as T, onMounted as te, onBeforeUnmount as le, openBlock as o, createElementBlock as d, createVNode as O, createCommentVNode as f, renderSlot as k, unref as r, normalizeStyle as se, normalizeClass as E, createElementVNode as w, toDisplayString as N, createBlock as h, Fragment as P, renderList as oe, withCtx as V, createSlots as ne, mergeProps as re, nextTick as ae } from "vue";
|
|
2
2
|
import p from "../Icon.vue.js";
|
|
3
3
|
import ie from "../Input.vue.js";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import
|
|
6
|
-
import
|
|
5
|
+
import de from "./DropdownItem.vue.js";
|
|
6
|
+
import ce from "./DropdownBooleanItem.vue.js";
|
|
7
7
|
import ue from "./DropdownGroupedLayout.vue.js";
|
|
8
8
|
import { useDropdownNavigation as fe } from "./composables/useDropdownNavigation.js";
|
|
9
9
|
import { useDropdownIds as me } from "./composables/useDropdownIds.js";
|
|
@@ -105,13 +105,13 @@ const ve = ["dir"], ye = {
|
|
|
105
105
|
}, Q = (e, s) => {
|
|
106
106
|
let l = s.value;
|
|
107
107
|
e.key && (l = { [e.key]: l });
|
|
108
|
-
const n = s.option,
|
|
108
|
+
const n = s.option, c = n?._path || [n?._originalOption || n].filter(Boolean), Z = {
|
|
109
109
|
label: e.label,
|
|
110
110
|
value: l,
|
|
111
111
|
data: s.data,
|
|
112
112
|
key: e.key,
|
|
113
113
|
_originalOption: n?._originalOption || n,
|
|
114
|
-
_path: [e, ...
|
|
114
|
+
_path: [e, ...c]
|
|
115
115
|
};
|
|
116
116
|
m("select", Z);
|
|
117
117
|
}, W = async () => {
|
|
@@ -130,11 +130,11 @@ const ve = ["dir"], ye = {
|
|
|
130
130
|
window.removeEventListener("keydown", C), v && clearTimeout(v), i.value && t.remote && m("search", "");
|
|
131
131
|
});
|
|
132
132
|
const X = (e) => e.labelI18n ? $(e.labelI18n) : e.label, Y = (e) => e.showChevron !== !1;
|
|
133
|
-
return (e, s) => (o(),
|
|
133
|
+
return (e, s) => (o(), d("div", {
|
|
134
134
|
class: "dropdown-menu w-full flex flex-col",
|
|
135
135
|
dir: a.direction
|
|
136
136
|
}, [
|
|
137
|
-
B.value ? (o(),
|
|
137
|
+
B.value ? (o(), d("div", ye, [
|
|
138
138
|
O(ie, {
|
|
139
139
|
modelValue: i.value,
|
|
140
140
|
"onUpdate:modelValue": s[0] || (s[0] = (l) => i.value = l),
|
|
@@ -150,10 +150,10 @@ const ve = ["dir"], ye = {
|
|
|
150
150
|
"data-testid": "dropdown-search-input"
|
|
151
151
|
}, null, 8, ["modelValue", "placeholder"])
|
|
152
152
|
])) : f("", !0),
|
|
153
|
-
e.$slots.header ? (o(),
|
|
153
|
+
e.$slots.header ? (o(), d("div", ge, [
|
|
154
154
|
k(e.$slots, "header", {}, void 0, !0)
|
|
155
155
|
])) : f("", !0),
|
|
156
|
-
u.value.length > 0 || y.value.length === 0 ? (o(),
|
|
156
|
+
u.value.length > 0 || y.value.length === 0 ? (o(), d("div", {
|
|
157
157
|
key: 2,
|
|
158
158
|
ref_key: "containerRef",
|
|
159
159
|
ref: _,
|
|
@@ -168,7 +168,7 @@ const ve = ["dir"], ye = {
|
|
|
168
168
|
(...l) => r(I) && r(I)(...l)),
|
|
169
169
|
onScroll: A
|
|
170
170
|
}, [
|
|
171
|
-
!a.isCustomSlotMenu && y.value.length === 0 && !a.loading && !(u.value.length === 0 && e.$slots.menu) ? (o(),
|
|
171
|
+
!a.isCustomSlotMenu && y.value.length === 0 && !a.loading && !(u.value.length === 0 && e.$slots.menu) ? (o(), d("div", ke, [
|
|
172
172
|
O(p, {
|
|
173
173
|
icon: "lucide:inbox",
|
|
174
174
|
class: "w-8 h-8 mb-2 opacity-70"
|
|
@@ -182,14 +182,14 @@ const ve = ["dir"], ye = {
|
|
|
182
182
|
selectable: a.selectable,
|
|
183
183
|
columns: a.columns,
|
|
184
184
|
onSelect: x
|
|
185
|
-
}, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0),
|
|
186
|
-
l.label === "---" ? (o(),
|
|
185
|
+
}, null, 8, ["options", "selected", "selectable", "columns"])) : (o(!0), d(P, { key: 2 }, oe(y.value, (l, n) => (o(), d(P, { key: n }, [
|
|
186
|
+
l.label === "---" ? (o(), d("div", we)) : l.data?.isBoolean ? (o(), h(ce, {
|
|
187
187
|
key: 1,
|
|
188
188
|
option: l,
|
|
189
189
|
value: G(l),
|
|
190
190
|
focused: r(M) && r(b) === n,
|
|
191
191
|
onChange: J,
|
|
192
|
-
onMouseenter: (
|
|
192
|
+
onMouseenter: (c) => r(S)(n)
|
|
193
193
|
}, null, 8, ["option", "value", "focused", "onMouseenter"])) : l.children && l.children.length > 0 ? (o(), h(he, {
|
|
194
194
|
key: 2,
|
|
195
195
|
"is-nested": !0,
|
|
@@ -204,18 +204,18 @@ const ve = ["dir"], ye = {
|
|
|
204
204
|
selectable: t.selectable,
|
|
205
205
|
ignoreClickOutside: r(H)(l.children),
|
|
206
206
|
direction: a.direction,
|
|
207
|
-
onOnSelect: (
|
|
207
|
+
onOnSelect: (c) => Q(l, c)
|
|
208
208
|
}, {
|
|
209
209
|
trigger: V(() => [
|
|
210
210
|
w("div", {
|
|
211
211
|
tabindex: 0,
|
|
212
212
|
"data-dropdown-item": "",
|
|
213
|
-
class: E(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full focus-visible:bg-accent focus-visible:text-accent-foreground
|
|
213
|
+
class: E(["relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none transition-colors justify-between w-full focus-visible:bg-accent focus-visible:text-accent-foreground", [
|
|
214
214
|
r(M) && r(b) === n ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground",
|
|
215
215
|
l.disabled ? "opacity-50 cursor-not-allowed" : "",
|
|
216
216
|
l.triggerClass || l.class || ""
|
|
217
217
|
]]),
|
|
218
|
-
onMouseenter: (
|
|
218
|
+
onMouseenter: (c) => r(S)(n)
|
|
219
219
|
}, [
|
|
220
220
|
w("div", xe, [
|
|
221
221
|
l.icon || l.emoji ? (o(), h(p, {
|
|
@@ -234,26 +234,26 @@ const ve = ["dir"], ye = {
|
|
|
234
234
|
], 42, pe)
|
|
235
235
|
]),
|
|
236
236
|
_: 2
|
|
237
|
-
}, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), h(
|
|
237
|
+
}, 1032, ["position", "offset", "options", "selected", "menuId", "nestedPosition", "nestedOffset", "selectable", "ignoreClickOutside", "direction", "onOnSelect"])) : (o(), h(de, {
|
|
238
238
|
key: 3,
|
|
239
239
|
option: l,
|
|
240
240
|
index: n,
|
|
241
241
|
selected: q(l),
|
|
242
242
|
focused: r(M) && r(b) === n,
|
|
243
243
|
selectable: a.selectable,
|
|
244
|
-
onClick: (
|
|
245
|
-
onMouseenter: (
|
|
244
|
+
onClick: (c) => x(l),
|
|
245
|
+
onMouseenter: (c) => r(S)(n)
|
|
246
246
|
}, ne({ _: 2 }, [
|
|
247
247
|
e.$slots.item ? {
|
|
248
248
|
name: "default",
|
|
249
|
-
fn: V((
|
|
250
|
-
k(e.$slots, "item", re({ ref_for: !0 },
|
|
249
|
+
fn: V((c) => [
|
|
250
|
+
k(e.$slots, "item", re({ ref_for: !0 }, c), void 0, !0)
|
|
251
251
|
]),
|
|
252
252
|
key: "0"
|
|
253
253
|
} : void 0
|
|
254
254
|
]), 1032, ["option", "index", "selected", "focused", "selectable", "onClick", "onMouseenter"]))
|
|
255
255
|
], 64))), 128)),
|
|
256
|
-
a.loading ? (o(),
|
|
256
|
+
a.loading ? (o(), d("div", Se, [
|
|
257
257
|
O(p, {
|
|
258
258
|
icon: "lucide:loader-2",
|
|
259
259
|
class: "w-4 h-4 animate-spin text-muted-foreground"
|
|
@@ -261,7 +261,7 @@ const ve = ["dir"], ye = {
|
|
|
261
261
|
])) : f("", !0),
|
|
262
262
|
k(e.$slots, "menu", {}, void 0, !0)
|
|
263
263
|
], 46, be)) : f("", !0),
|
|
264
|
-
e.$slots.footer ? (o(),
|
|
264
|
+
e.$slots.footer ? (o(), d("div", Oe, [
|
|
265
265
|
k(e.$slots, "footer", {}, void 0, !0)
|
|
266
266
|
])) : f("", !0)
|
|
267
267
|
], 8, ve));
|