vlite3 0.7.12 → 0.7.14
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/Badge.vue.d.ts +6 -2
- package/components/Badge.vue.js +16 -9
- package/components/Button.vue.js +1 -1
- package/components/{CommandPaletteContent.vue.d.ts → CommandPalette/CommandPaletteContent.vue.d.ts} +3 -3
- package/components/CommandPalette/CommandPaletteContent.vue.js +7 -0
- package/components/CommandPalette/CommandPaletteContent.vue2.js +180 -0
- package/components/CommandPalette/CommandPaletteItem.vue.d.ts +15 -0
- package/components/CommandPalette/CommandPaletteItem.vue2.js +7 -0
- package/components/CommandPalette/CommandPaletteItem.vue3.js +60 -0
- package/components/CommandPalette/index.d.ts +5 -0
- package/components/CommandPalette/types.d.ts +40 -0
- package/components/CommandPalette/useCommandPaletteItems.d.ts +15 -0
- package/components/CommandPalette/useCommandPaletteItems.js +99 -0
- package/components/CommandPalette/useCommandPaletteNav.d.ts +13 -0
- package/components/CommandPalette/useCommandPaletteNav.js +49 -0
- package/components/Form/CustomFields.vue.js +1 -1
- package/components/Form/CustomFields.vue2.js +60 -53
- package/components/Form/FormField.vue.js +3 -1
- package/components/MultiSelect/MultiSelect.vue.d.ts +6 -0
- package/components/MultiSelect/MultiSelect.vue.js +116 -98
- package/components/NavbarCommandPalette.vue.d.ts +7 -30
- package/components/NavbarCommandPalette.vue.js +40 -40
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/style.css +1 -1
- package/components/CommandPaletteContent.vue.js +0 -7
- package/components/CommandPaletteContent.vue2.js +0 -311
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export type BadgeVariant = 'default' | 'secondary' | 'danger' | 'outline' | 'warning' | 'info' | 'success' | 'purple' | 'teal' | 'indigo' | 'orange' | 'pink' | 'cyan';
|
|
2
2
|
interface Props {
|
|
3
3
|
variant?: BadgeVariant | string;
|
|
4
|
-
|
|
4
|
+
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
5
|
+
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string;
|
|
6
|
+
class?: any;
|
|
5
7
|
}
|
|
6
8
|
declare function __VLS_template(): {
|
|
7
9
|
attrs: Partial<{}>;
|
|
@@ -14,7 +16,9 @@ declare function __VLS_template(): {
|
|
|
14
16
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
15
17
|
declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
16
18
|
variant: BadgeVariant | string;
|
|
17
|
-
|
|
19
|
+
size: "xs" | "sm" | "md" | "lg";
|
|
20
|
+
rounded: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | string;
|
|
21
|
+
class: any;
|
|
18
22
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
19
23
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
20
24
|
export default _default;
|
package/components/Badge.vue.js
CHANGED
|
@@ -1,13 +1,20 @@
|
|
|
1
|
-
import { defineComponent as b, computed as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as b, computed as d, openBlock as a, createElementBlock as u, normalizeClass as i, renderSlot as c } from "vue";
|
|
2
|
+
const p = /* @__PURE__ */ b({
|
|
3
3
|
__name: "Badge",
|
|
4
4
|
props: {
|
|
5
5
|
variant: { default: "default" },
|
|
6
|
+
size: { default: "md" },
|
|
7
|
+
rounded: { default: "full" },
|
|
6
8
|
class: { default: "" }
|
|
7
9
|
},
|
|
8
10
|
setup(o) {
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
+
const e = o, s = d(() => {
|
|
12
|
+
const r = {
|
|
13
|
+
xs: "px-1.5 h-5 text-[10.5px] leading-none",
|
|
14
|
+
sm: "px-2 h-6 text-xs font-medium",
|
|
15
|
+
md: "px-2.5 h-7 text-xs font-semibold",
|
|
16
|
+
lg: "px-3 h-8 text-sm font-semibold"
|
|
17
|
+
}, l = `inline-flex items-center ${e.rounded === "none" ? "rounded-none" : `rounded-${e.rounded}`} border ${r[e.size] || r.md} focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2`, t = {
|
|
11
18
|
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
|
12
19
|
outline: "text-foreground border-border",
|
|
13
20
|
/* Base Semantics */
|
|
@@ -24,15 +31,15 @@ const c = /* @__PURE__ */ b({
|
|
|
24
31
|
pink: "border-pink-subtle-border bg-pink-subtle text-pink-subtle-fg hover:opacity-80",
|
|
25
32
|
cyan: "border-cyan-subtle-border bg-cyan-subtle text-cyan-subtle-fg hover:opacity-80"
|
|
26
33
|
};
|
|
27
|
-
return [
|
|
34
|
+
return [l, t[e.variant] || t.default, e.class].join(" ");
|
|
28
35
|
});
|
|
29
|
-
return (
|
|
30
|
-
class:
|
|
36
|
+
return (r, n) => (a(), u("div", {
|
|
37
|
+
class: i(s.value)
|
|
31
38
|
}, [
|
|
32
|
-
|
|
39
|
+
c(r.$slots, "default")
|
|
33
40
|
], 2));
|
|
34
41
|
}
|
|
35
42
|
});
|
|
36
43
|
export {
|
|
37
|
-
|
|
44
|
+
p as default
|
|
38
45
|
};
|
package/components/Button.vue.js
CHANGED
package/components/{CommandPaletteContent.vue.d.ts → CommandPalette/CommandPaletteContent.vue.d.ts}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { SidebarMenuItemSchema } from '
|
|
2
|
-
import { CommandPaletteItem } from './
|
|
1
|
+
import { SidebarMenuItemSchema } from '../SidebarMenu/types';
|
|
2
|
+
import { CommandPaletteItem } from './types';
|
|
3
3
|
type __VLS_Props = {
|
|
4
4
|
close: () => void;
|
|
5
5
|
items: CommandPaletteItem[];
|
|
@@ -7,7 +7,7 @@ type __VLS_Props = {
|
|
|
7
7
|
placeholder: string;
|
|
8
8
|
placeholderI18n?: string;
|
|
9
9
|
maxResultsPerGroup: number;
|
|
10
|
-
onOpenDynamicModal: (body: any,
|
|
10
|
+
onOpenDynamicModal: (body: any, modalProps: any) => void;
|
|
11
11
|
};
|
|
12
12
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
13
13
|
inputRef: HTMLInputElement;
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { defineComponent as j, computed as r, ref as g, watch as U, onMounted as z, nextTick as A, openBlock as i, createElementBlock as c, createElementVNode as o, createVNode as y, withDirectives as H, unref as u, vModelText as J, createTextVNode as f, toDisplayString as l, createCommentVNode as V, Fragment as _, renderList as B, isMemoSame as Q, createBlock as W } from "vue";
|
|
2
|
+
import { useRouter as X } from "vue-router";
|
|
3
|
+
import k from "../Icon.vue.js";
|
|
4
|
+
import { $t as E } from "../../utils/i18n.js";
|
|
5
|
+
import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
|
|
6
|
+
import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
|
|
7
|
+
import ee from "./CommandPaletteItem.vue2.js";
|
|
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.5 border-b border-border/60 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
|
|
9
|
+
key: 0,
|
|
10
|
+
class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",
|
|
11
|
+
"aria-live": "polite"
|
|
12
|
+
}, le = { class: "text-sm font-medium text-muted-foreground" }, ae = { class: "text-foreground font-semibold" }, de = { class: "text-xs text-muted-foreground/60 mt-1" }, ie = ["aria-label"], ue = ["aria-label"], ce = {
|
|
13
|
+
key: 0,
|
|
14
|
+
class: "my-1.5 mx-3 h-px bg-border/40",
|
|
15
|
+
"aria-hidden": "true"
|
|
16
|
+
}, me = {
|
|
17
|
+
class: "px-4 py-2.5 border-t border-border/40 flex items-center gap-4 shrink-0 bg-muted/30",
|
|
18
|
+
"aria-hidden": "true"
|
|
19
|
+
}, pe = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, xe = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, fe = { class: "flex items-center gap-1 text-[11px] text-muted-foreground/60" }, be = { class: "ml-auto text-[11px] text-muted-foreground/50" }, Ce = /* @__PURE__ */ j({
|
|
20
|
+
__name: "CommandPaletteContent",
|
|
21
|
+
props: {
|
|
22
|
+
close: { type: Function },
|
|
23
|
+
items: {},
|
|
24
|
+
menuItems: {},
|
|
25
|
+
placeholder: {},
|
|
26
|
+
placeholderI18n: {},
|
|
27
|
+
maxResultsPerGroup: {},
|
|
28
|
+
onOpenDynamicModal: { type: Function }
|
|
29
|
+
},
|
|
30
|
+
setup(b) {
|
|
31
|
+
const n = b, a = (e, s) => {
|
|
32
|
+
const t = E(e);
|
|
33
|
+
return t !== e ? t : s;
|
|
34
|
+
}, G = r(() => {
|
|
35
|
+
if (n.placeholderI18n) {
|
|
36
|
+
const e = E(n.placeholderI18n);
|
|
37
|
+
if (e !== n.placeholderI18n) return e;
|
|
38
|
+
}
|
|
39
|
+
return n.placeholder;
|
|
40
|
+
}), $ = r(() => a("vlite.commandPalette.noResults", "No results for")), L = r(
|
|
41
|
+
() => a("vlite.commandPalette.noResultsDesc", "Try a different term or browse with arrow keys")
|
|
42
|
+
), O = r(() => a("vlite.commandPalette.navigate", "Navigate")), T = r(() => a("vlite.commandPalette.open", "Open")), F = r(() => a("vlite.commandPalette.close", "Close")), P = r(() => a("vlite.commandPalette.result", "result")), w = r(() => a("vlite.commandPalette.results", "results")), m = g(""), R = g(null), C = g(null), q = X(), { flatList: v } = Y({
|
|
43
|
+
items: () => n.items,
|
|
44
|
+
menuItems: () => n.menuItems,
|
|
45
|
+
query: () => m.value,
|
|
46
|
+
maxResultsPerGroup: () => n.maxResultsPerGroup
|
|
47
|
+
}), p = r(() => v.value.total), I = (e) => {
|
|
48
|
+
if (!e.disabled) {
|
|
49
|
+
if (n.close(), e.modalBody) {
|
|
50
|
+
n.onOpenDynamicModal(e.modalBody, e.modalProps);
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (e.action) {
|
|
54
|
+
e.action();
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
if (e.to) {
|
|
58
|
+
q.push(e.to).catch(() => {
|
|
59
|
+
});
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
e.href && window.open(e.href, "_blank", "noopener,noreferrer");
|
|
63
|
+
}
|
|
64
|
+
}, { activeIndex: h, isPointerLocked: K, handleKeydown: N, handleItemMouseenter: S } = Z({
|
|
65
|
+
flatList: v,
|
|
66
|
+
listRef: C,
|
|
67
|
+
onExecute: I,
|
|
68
|
+
onClose: n.close
|
|
69
|
+
});
|
|
70
|
+
return U(m, () => {
|
|
71
|
+
h.value = 0;
|
|
72
|
+
}), z(() => {
|
|
73
|
+
A(() => R.value?.focus());
|
|
74
|
+
}), (e, s) => (i(), c("div", te, [
|
|
75
|
+
o("div", oe, [
|
|
76
|
+
y(k, {
|
|
77
|
+
icon: "lucide:search",
|
|
78
|
+
class: "w-4 h-4 text-muted-foreground shrink-0"
|
|
79
|
+
}),
|
|
80
|
+
H(o("input", {
|
|
81
|
+
ref_key: "inputRef",
|
|
82
|
+
ref: R,
|
|
83
|
+
"onUpdate:modelValue": s[0] || (s[0] = (t) => m.value = t),
|
|
84
|
+
type: "text",
|
|
85
|
+
autocomplete: "off",
|
|
86
|
+
autocorrect: "off",
|
|
87
|
+
spellcheck: "false",
|
|
88
|
+
placeholder: G.value,
|
|
89
|
+
class: "flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/60 outline-none min-w-0",
|
|
90
|
+
"aria-autocomplete": "list",
|
|
91
|
+
"aria-controls": "cp-listbox",
|
|
92
|
+
onKeydown: s[1] || (s[1] = //@ts-ignore
|
|
93
|
+
(...t) => u(N) && u(N)(...t))
|
|
94
|
+
}, null, 40, se), [
|
|
95
|
+
[J, m.value]
|
|
96
|
+
]),
|
|
97
|
+
o("button", {
|
|
98
|
+
type: "button",
|
|
99
|
+
class: "shrink-0 p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
|
|
100
|
+
"aria-label": "Close",
|
|
101
|
+
tabindex: "-1",
|
|
102
|
+
onClick: s[2] || (s[2] = //@ts-ignore
|
|
103
|
+
(...t) => b.close && b.close(...t))
|
|
104
|
+
}, [
|
|
105
|
+
y(k, {
|
|
106
|
+
icon: "lucide:x",
|
|
107
|
+
class: "w-3.5 h-3.5"
|
|
108
|
+
})
|
|
109
|
+
])
|
|
110
|
+
]),
|
|
111
|
+
o("div", {
|
|
112
|
+
id: "cp-listbox",
|
|
113
|
+
ref_key: "listRef",
|
|
114
|
+
ref: C,
|
|
115
|
+
role: "listbox",
|
|
116
|
+
class: "flex-1 overflow-y-auto py-2 scrollbar-thin cp-scroll-container",
|
|
117
|
+
"aria-label": `${p.value} ${p.value === 1 ? P.value : w.value}`
|
|
118
|
+
}, [
|
|
119
|
+
p.value === 0 ? (i(), c("div", re, [
|
|
120
|
+
y(k, {
|
|
121
|
+
icon: "lucide:search-x",
|
|
122
|
+
class: "w-9 h-9 text-muted-foreground/40 mb-3"
|
|
123
|
+
}),
|
|
124
|
+
o("p", le, [
|
|
125
|
+
f(l($.value) + " ", 1),
|
|
126
|
+
o("span", ae, '"' + l(m.value) + '"', 1)
|
|
127
|
+
]),
|
|
128
|
+
o("p", de, l(L.value), 1)
|
|
129
|
+
])) : V("", !0),
|
|
130
|
+
(i(!0), c(_, null, B(u(v).groups, (t) => (i(), c(_, {
|
|
131
|
+
key: t.key
|
|
132
|
+
}, [
|
|
133
|
+
o("div", {
|
|
134
|
+
class: "px-4 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 select-none",
|
|
135
|
+
"aria-label": `Group: ${t.label}`
|
|
136
|
+
}, l(t.label), 9, ie),
|
|
137
|
+
o("div", {
|
|
138
|
+
role: "group",
|
|
139
|
+
"aria-label": t.label,
|
|
140
|
+
class: "px-2"
|
|
141
|
+
}, [
|
|
142
|
+
(i(!0), c(_, null, B(t.rows, (d, ve, he, x) => {
|
|
143
|
+
const M = [d.index === u(h), d.item.id];
|
|
144
|
+
if (x && x.key === d.item.id && Q(x, M)) return x;
|
|
145
|
+
const D = (i(), W(ee, {
|
|
146
|
+
key: d.item.id,
|
|
147
|
+
item: d.item,
|
|
148
|
+
index: d.index,
|
|
149
|
+
"is-active": d.index === u(h),
|
|
150
|
+
"is-pointer-locked": u(K),
|
|
151
|
+
onExecute: I,
|
|
152
|
+
onMouseenter: u(S)
|
|
153
|
+
}, null, 8, ["item", "index", "is-active", "is-pointer-locked", "onMouseenter"]));
|
|
154
|
+
return D.memo = M, D;
|
|
155
|
+
}, s, 3), 128))
|
|
156
|
+
], 8, ue),
|
|
157
|
+
t.rows.length && t.rows[t.rows.length - 1].isLastInGroup ? (i(), c("div", ce)) : V("", !0)
|
|
158
|
+
], 64))), 128))
|
|
159
|
+
], 8, ne),
|
|
160
|
+
o("div", me, [
|
|
161
|
+
o("span", pe, [
|
|
162
|
+
s[5] || (s[5] = o("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "↑↓", -1)),
|
|
163
|
+
f(" " + l(O.value), 1)
|
|
164
|
+
]),
|
|
165
|
+
o("span", xe, [
|
|
166
|
+
s[6] || (s[6] = o("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "↵", -1)),
|
|
167
|
+
f(" " + l(T.value), 1)
|
|
168
|
+
]),
|
|
169
|
+
o("span", fe, [
|
|
170
|
+
s[7] || (s[7] = o("kbd", { class: "px-1 rounded border border-border/60 bg-background text-[10px]" }, "Esc", -1)),
|
|
171
|
+
f(" " + l(F.value), 1)
|
|
172
|
+
]),
|
|
173
|
+
o("span", be, l(p.value) + " " + l(p.value === 1 ? P.value : w.value), 1)
|
|
174
|
+
])
|
|
175
|
+
]));
|
|
176
|
+
}
|
|
177
|
+
});
|
|
178
|
+
export {
|
|
179
|
+
Ce as default
|
|
180
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CommandPaletteItem } from './types';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
item: CommandPaletteItem;
|
|
4
|
+
isActive: boolean;
|
|
5
|
+
isPointerLocked: boolean;
|
|
6
|
+
index: number;
|
|
7
|
+
};
|
|
8
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
9
|
+
mouseenter: (index: number) => any;
|
|
10
|
+
execute: (item: CommandPaletteItem) => any;
|
|
11
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
12
|
+
onMouseenter?: (index: number) => any;
|
|
13
|
+
onExecute?: (item: CommandPaletteItem) => any;
|
|
14
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
|
|
15
|
+
export default _default;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { defineComponent as f, openBlock as i, createElementBlock as n, normalizeClass as c, createElementVNode as o, createVNode as x, toDisplayString as s, unref as a, createCommentVNode as r, createBlock as g } from "vue";
|
|
2
|
+
import m from "../Icon.vue.js";
|
|
3
|
+
import { getEffectiveLabel as b, getEffectiveDesc as k } from "./useCommandPaletteItems.js";
|
|
4
|
+
const v = ["id", "aria-selected", "aria-disabled", "data-active"], h = { class: "flex-1 min-w-0" }, y = { class: "block font-medium truncate text-inherit leading-tight" }, w = {
|
|
5
|
+
key: 0,
|
|
6
|
+
class: "block text-xs text-muted-foreground/70 truncate mt-0.5"
|
|
7
|
+
}, A = {
|
|
8
|
+
key: 1,
|
|
9
|
+
class: "shrink-0 hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-mono border border-border/60 bg-background/80 text-muted-foreground ml-1"
|
|
10
|
+
}, L = /* @__PURE__ */ f({
|
|
11
|
+
__name: "CommandPaletteItem",
|
|
12
|
+
props: {
|
|
13
|
+
item: {},
|
|
14
|
+
isActive: { type: Boolean },
|
|
15
|
+
isPointerLocked: { type: Boolean },
|
|
16
|
+
index: {}
|
|
17
|
+
},
|
|
18
|
+
emits: ["execute", "mouseenter"],
|
|
19
|
+
setup(e, { emit: l }) {
|
|
20
|
+
const d = l;
|
|
21
|
+
return (B, t) => (i(), n("button", {
|
|
22
|
+
id: `cp-item-${e.item.id}`,
|
|
23
|
+
type: "button",
|
|
24
|
+
role: "option",
|
|
25
|
+
"aria-selected": e.isActive,
|
|
26
|
+
"aria-disabled": e.item.disabled || void 0,
|
|
27
|
+
"data-active": e.isActive,
|
|
28
|
+
class: c(["command-palette-item w-full flex items-center gap-3 px-3! py-2.5 mx-1 rounded-lg text-sm text-left cursor-pointer select-none focus-visible:outline-none cp-item-transition", [
|
|
29
|
+
e.isActive ? "bg-gray-200/80 text-foreground" : "text-muted-foreground hover:bg-muted/70 hover:text-foreground",
|
|
30
|
+
e.item.disabled ? "opacity-40 cursor-not-allowed" : "",
|
|
31
|
+
e.isPointerLocked ? "pointer-events-none" : ""
|
|
32
|
+
]]),
|
|
33
|
+
style: { width: "calc(100% - 8px)" },
|
|
34
|
+
onClick: t[0] || (t[0] = (u) => d("execute", e.item)),
|
|
35
|
+
onMouseenter: t[1] || (t[1] = (u) => d("mouseenter", e.index))
|
|
36
|
+
}, [
|
|
37
|
+
o("span", {
|
|
38
|
+
class: c(["shrink-0 flex items-center justify-center w-7 h-7 rounded-md", e.isActive ? "bg-gray-300/80 text-gray-900" : "bg-muted/80 text-muted-foreground"])
|
|
39
|
+
}, [
|
|
40
|
+
x(m, {
|
|
41
|
+
icon: e.item.icon ?? "lucide:arrow-right",
|
|
42
|
+
class: "w-3.5 h-3.5"
|
|
43
|
+
}, null, 8, ["icon"])
|
|
44
|
+
], 2),
|
|
45
|
+
o("span", h, [
|
|
46
|
+
o("span", y, s(a(b)(e.item)), 1),
|
|
47
|
+
e.item.description || e.item.descriptionI18n ? (i(), n("span", w, s(a(k)(e.item)), 1)) : r("", !0)
|
|
48
|
+
]),
|
|
49
|
+
e.item.href ? (i(), g(m, {
|
|
50
|
+
key: 0,
|
|
51
|
+
icon: "lucide:external-link",
|
|
52
|
+
class: "shrink-0 w-3 h-3 text-muted-foreground/50"
|
|
53
|
+
})) : r("", !0),
|
|
54
|
+
e.isActive ? (i(), n("kbd", A, " ↵ ")) : r("", !0)
|
|
55
|
+
], 42, v));
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
export {
|
|
59
|
+
L as default
|
|
60
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as CommandPaletteContent } from './CommandPaletteContent.vue';
|
|
2
|
+
export { default as CommandPaletteItemComponent } from './CommandPaletteItem.vue';
|
|
3
|
+
export * from './types';
|
|
4
|
+
export * from './useCommandPaletteItems';
|
|
5
|
+
export * from './useCommandPaletteNav';
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export interface CommandPaletteItem {
|
|
2
|
+
id?: string;
|
|
3
|
+
label: string;
|
|
4
|
+
labelI18n?: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
descriptionI18n?: string;
|
|
7
|
+
icon?: string;
|
|
8
|
+
group?: string;
|
|
9
|
+
to?: string;
|
|
10
|
+
href?: string;
|
|
11
|
+
action?: () => void;
|
|
12
|
+
keywords?: string[];
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
modalBody?: any;
|
|
15
|
+
modalProps?: Record<string, any>;
|
|
16
|
+
show?: boolean | (() => boolean);
|
|
17
|
+
children?: CommandPaletteItem[];
|
|
18
|
+
}
|
|
19
|
+
export interface CommandPaletteGroup {
|
|
20
|
+
key: string;
|
|
21
|
+
label: string;
|
|
22
|
+
items: CommandPaletteItem[];
|
|
23
|
+
}
|
|
24
|
+
/** A pre-indexed row used by the flat render list — index is baked in at compute time */
|
|
25
|
+
export interface FlatRow {
|
|
26
|
+
item: CommandPaletteItem;
|
|
27
|
+
/** Absolute 0-based position across all groups — used directly in v-memo */
|
|
28
|
+
index: number;
|
|
29
|
+
/** Whether a divider should be rendered after this row's group */
|
|
30
|
+
isLastInGroup: boolean;
|
|
31
|
+
}
|
|
32
|
+
export interface FlatGrouped {
|
|
33
|
+
key: string;
|
|
34
|
+
label: string;
|
|
35
|
+
rows: FlatRow[];
|
|
36
|
+
}
|
|
37
|
+
export interface FlatList {
|
|
38
|
+
groups: FlatGrouped[];
|
|
39
|
+
total: number;
|
|
40
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { SidebarMenuItemSchema } from '../SidebarMenu/types';
|
|
2
|
+
import { CommandPaletteItem, CommandPaletteGroup, FlatList } from './types';
|
|
3
|
+
export declare function getEffectiveLabel(item: CommandPaletteItem): string;
|
|
4
|
+
export declare function getEffectiveDesc(item: CommandPaletteItem): string;
|
|
5
|
+
export declare function flattenCommandItems(items: CommandPaletteItem[], parentLabel?: string, depth?: number): CommandPaletteItem[];
|
|
6
|
+
export declare function flattenSidebarItems(items: SidebarMenuItemSchema[], parentLabel?: string, depth?: number): CommandPaletteItem[];
|
|
7
|
+
export declare function useCommandPaletteItems(options: {
|
|
8
|
+
items: () => CommandPaletteItem[];
|
|
9
|
+
menuItems: () => SidebarMenuItemSchema[];
|
|
10
|
+
query: () => string;
|
|
11
|
+
maxResultsPerGroup: () => number;
|
|
12
|
+
}): {
|
|
13
|
+
filteredGroups: import('vue').ComputedRef<CommandPaletteGroup[]>;
|
|
14
|
+
flatList: import('vue').ComputedRef<FlatList>;
|
|
15
|
+
};
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { computed as f } from "vue";
|
|
2
|
+
import { $t as d } from "../../utils/i18n.js";
|
|
3
|
+
function b(e) {
|
|
4
|
+
if (e.labelI18n) {
|
|
5
|
+
const r = d(e.labelI18n);
|
|
6
|
+
if (r !== e.labelI18n) return r;
|
|
7
|
+
}
|
|
8
|
+
return e.label;
|
|
9
|
+
}
|
|
10
|
+
function I(e) {
|
|
11
|
+
if (e.descriptionI18n) {
|
|
12
|
+
const r = d(e.descriptionI18n);
|
|
13
|
+
if (r !== e.descriptionI18n) return r;
|
|
14
|
+
}
|
|
15
|
+
return e.description ?? "";
|
|
16
|
+
}
|
|
17
|
+
function m(e) {
|
|
18
|
+
return typeof e == "function" ? e() : e !== void 0 ? e : !0;
|
|
19
|
+
}
|
|
20
|
+
function p(e, r, s = 0) {
|
|
21
|
+
const l = [];
|
|
22
|
+
for (const t of e) {
|
|
23
|
+
if (!m(t.show)) continue;
|
|
24
|
+
const o = s === 0 ? t.label : r ?? "Navigation";
|
|
25
|
+
(t.to || t.href || t.action || t.modalBody) && l.push({
|
|
26
|
+
...t,
|
|
27
|
+
id: t.id ?? t.to ?? t.label ?? Math.random().toString(),
|
|
28
|
+
group: t.group ?? o
|
|
29
|
+
}), t.children?.length && l.push(...p(t.children, o, s + 1));
|
|
30
|
+
}
|
|
31
|
+
return l;
|
|
32
|
+
}
|
|
33
|
+
function g(e, r, s = 0) {
|
|
34
|
+
const l = [];
|
|
35
|
+
for (const t of e) {
|
|
36
|
+
if (!m(t.show)) continue;
|
|
37
|
+
const o = s === 0 ? t.label : r ?? "Navigation";
|
|
38
|
+
(t.to || t.href || t.action || t.modalBody) && l.push({
|
|
39
|
+
id: t.id ?? (typeof t.to == "string" ? t.to : "") ?? t.label ?? Math.random().toString(),
|
|
40
|
+
label: t.label,
|
|
41
|
+
labelI18n: t.labelI18n,
|
|
42
|
+
icon: t.icon,
|
|
43
|
+
group: t.group ?? o,
|
|
44
|
+
to: typeof t.to == "string" ? t.to : t.to?.path,
|
|
45
|
+
href: t.href,
|
|
46
|
+
action: t.action ? () => t.action(t) : void 0,
|
|
47
|
+
disabled: t.disabled,
|
|
48
|
+
modalBody: t.modalBody,
|
|
49
|
+
modalProps: t.modalProps
|
|
50
|
+
}), t.children?.length && l.push(...g(t.children, o, s + 1));
|
|
51
|
+
}
|
|
52
|
+
return l;
|
|
53
|
+
}
|
|
54
|
+
function u(e) {
|
|
55
|
+
return e.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
|
56
|
+
}
|
|
57
|
+
function y(e, r) {
|
|
58
|
+
const s = u(b(e)), l = u(I(e)), t = (e.keywords ?? []).map(u).join(" "), o = u(r);
|
|
59
|
+
return s === o ? 100 : s.startsWith(o) ? 80 : s.includes(o) ? 60 : l.includes(o) || t.includes(o) ? 40 : 0;
|
|
60
|
+
}
|
|
61
|
+
function w(e) {
|
|
62
|
+
const r = f(() => {
|
|
63
|
+
const t = g(e.menuItems()), o = p(e.items()), i = /* @__PURE__ */ new Set(), c = [];
|
|
64
|
+
for (const n of [...o, ...t])
|
|
65
|
+
n.id && !i.has(n.id) && (i.add(n.id), c.push(n));
|
|
66
|
+
return c;
|
|
67
|
+
}), s = f(() => {
|
|
68
|
+
const t = e.query().trim();
|
|
69
|
+
let o = r.value.filter((n) => !n.disabled);
|
|
70
|
+
t && (o = o.map((n) => ({ item: n, s: y(n, t) })).filter(({ s: n }) => n > 0).sort((n, a) => a.s - n.s).map(({ item: n }) => n));
|
|
71
|
+
const i = /* @__PURE__ */ new Map();
|
|
72
|
+
for (const n of o) {
|
|
73
|
+
const a = n.group ?? "Actions";
|
|
74
|
+
i.has(a) || i.set(a, []), i.get(a).push(n);
|
|
75
|
+
}
|
|
76
|
+
const c = [];
|
|
77
|
+
for (const [n, a] of i)
|
|
78
|
+
c.push({ key: n, label: n, items: a.slice(0, e.maxResultsPerGroup()) });
|
|
79
|
+
return c;
|
|
80
|
+
}), l = f(() => {
|
|
81
|
+
let t = 0;
|
|
82
|
+
return { groups: s.value.map((i, c) => {
|
|
83
|
+
const n = i.items.map((a, h) => ({
|
|
84
|
+
item: a,
|
|
85
|
+
index: t++,
|
|
86
|
+
isLastInGroup: h === i.items.length - 1 && c < s.value.length - 1
|
|
87
|
+
}));
|
|
88
|
+
return { key: i.key, label: i.label, rows: n };
|
|
89
|
+
}), total: t };
|
|
90
|
+
});
|
|
91
|
+
return { filteredGroups: s, flatList: l };
|
|
92
|
+
}
|
|
93
|
+
export {
|
|
94
|
+
p as flattenCommandItems,
|
|
95
|
+
g as flattenSidebarItems,
|
|
96
|
+
I as getEffectiveDesc,
|
|
97
|
+
b as getEffectiveLabel,
|
|
98
|
+
w as useCommandPaletteItems
|
|
99
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Ref } from 'vue';
|
|
2
|
+
import { FlatList, CommandPaletteItem } from './types';
|
|
3
|
+
export declare function useCommandPaletteNav(options: {
|
|
4
|
+
flatList: Ref<FlatList>;
|
|
5
|
+
listRef: Ref<HTMLElement | null>;
|
|
6
|
+
onExecute: (item: CommandPaletteItem) => void;
|
|
7
|
+
onClose: () => void;
|
|
8
|
+
}): {
|
|
9
|
+
activeIndex: Ref<number, number>;
|
|
10
|
+
isPointerLocked: Ref<boolean, boolean>;
|
|
11
|
+
handleKeydown: (e: KeyboardEvent) => void;
|
|
12
|
+
handleItemMouseenter: (index: number) => void;
|
|
13
|
+
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { ref as c, onUnmounted as m, nextTick as d } from "vue";
|
|
2
|
+
function w(r) {
|
|
3
|
+
const t = c(0), o = c(!1);
|
|
4
|
+
let l = null;
|
|
5
|
+
const a = () => {
|
|
6
|
+
o.value = !0, l && clearTimeout(l), l = setTimeout(() => {
|
|
7
|
+
o.value = !1;
|
|
8
|
+
}, 200);
|
|
9
|
+
};
|
|
10
|
+
let n = null;
|
|
11
|
+
const f = (e) => {
|
|
12
|
+
o.value || (n !== null && cancelAnimationFrame(n), n = requestAnimationFrame(() => {
|
|
13
|
+
t.value = e, n = null;
|
|
14
|
+
}));
|
|
15
|
+
}, u = () => {
|
|
16
|
+
d(() => {
|
|
17
|
+
const e = r.listRef.value?.querySelector('[data-active="true"]');
|
|
18
|
+
e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
|
|
19
|
+
});
|
|
20
|
+
}, s = (e) => {
|
|
21
|
+
if (e.key === "Escape") {
|
|
22
|
+
r.onClose();
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (e.key === "ArrowDown") {
|
|
26
|
+
e.preventDefault(), a(), t.value = Math.min(t.value + 1, r.flatList.value.total - 1), u();
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (e.key === "ArrowUp") {
|
|
30
|
+
e.preventDefault(), a(), t.value = Math.max(t.value - 1, 0), u();
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
if (e.key === "Enter") {
|
|
34
|
+
e.preventDefault();
|
|
35
|
+
for (const v of r.flatList.value.groups)
|
|
36
|
+
for (const i of v.rows)
|
|
37
|
+
if (i.index === t.value) {
|
|
38
|
+
r.onExecute(i.item);
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
return m(() => {
|
|
44
|
+
n !== null && cancelAnimationFrame(n), l && clearTimeout(l);
|
|
45
|
+
}), { activeIndex: t, isPointerLocked: o, handleKeydown: s, handleItemMouseenter: f };
|
|
46
|
+
}
|
|
47
|
+
export {
|
|
48
|
+
w as useCommandPaletteNav
|
|
49
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./CustomFields.vue2.js";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
-
const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
4
|
+
const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-112b16b5"]]);
|
|
5
5
|
export {
|
|
6
6
|
s as default
|
|
7
7
|
};
|