@shwfed/nuxt 0.1.25 → 0.1.26
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.d.vue.ts +21 -6
- package/dist/runtime/components/app.vue +67 -10
- package/dist/runtime/components/app.vue.d.ts +21 -6
- package/dist/runtime/components/ui/command/CommandGroup.vue +2 -2
- package/dist/runtime/components/ui/command/CommandItem.vue +1 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,11 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
export type NavigationCommand = Readonly<{
|
|
2
|
+
type: 'navigation';
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
icon?: string;
|
|
6
|
+
path: string;
|
|
7
|
+
}>;
|
|
8
|
+
export type APICommand = Readonly<{
|
|
9
|
+
type: 'api';
|
|
10
|
+
id: string;
|
|
11
|
+
title: string;
|
|
12
|
+
icon?: string;
|
|
13
|
+
}>;
|
|
14
|
+
export type Command = NavigationCommand | APICommand;
|
|
7
15
|
declare const _default: typeof __VLS_export;
|
|
8
16
|
export default _default;
|
|
17
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
18
|
+
commands?: ReadonlyArray<Command>;
|
|
19
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
|
|
20
|
+
commands?: ReadonlyArray<Command>;
|
|
21
|
+
}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
22
|
+
default?: (props: {}) => any;
|
|
23
|
+
}>;
|
|
9
24
|
type __VLS_WithSlots<T, S> = T & {
|
|
10
25
|
new (): {
|
|
11
26
|
$slots: S;
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
<script
|
|
2
|
-
import { useHead } from "#app";
|
|
1
|
+
<script>
|
|
2
|
+
import { useHead, useRouter } from "#app";
|
|
3
3
|
import { ref } from "vue";
|
|
4
|
-
import { CommandDialog, CommandInput, CommandList, CommandGroup, CommandEmpty } from "./ui/command";
|
|
4
|
+
import { CommandDialog, CommandInput, CommandList, CommandGroup, CommandEmpty, CommandItem, CommandSeparator } from "./ui/command";
|
|
5
5
|
import { TooltipProvider } from "./ui/tooltip";
|
|
6
6
|
import { Toaster } from "vue-sonner";
|
|
7
|
-
import { useMagicKeys, whenever } from "@vueuse/core";
|
|
7
|
+
import { useLocalStorage, useMagicKeys, whenever } from "@vueuse/core";
|
|
8
8
|
import { useI18n } from "vue-i18n";
|
|
9
9
|
import { Icon } from "@iconify/vue";
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<script setup>
|
|
13
|
+
const props = defineProps({
|
|
14
|
+
commands: { type: Array, required: false }
|
|
15
|
+
});
|
|
10
16
|
const { t } = useI18n();
|
|
11
17
|
useHead({
|
|
12
18
|
bodyAttrs: {
|
|
@@ -20,6 +26,29 @@ const { meta_k } = useMagicKeys();
|
|
|
20
26
|
whenever(() => meta_k?.value, () => {
|
|
21
27
|
isCommandOpen.value = !isCommandOpen.value;
|
|
22
28
|
});
|
|
29
|
+
const router = useRouter();
|
|
30
|
+
const recent = useLocalStorage("recent-commands", []);
|
|
31
|
+
function addRecent(id) {
|
|
32
|
+
if (recent.value.includes(id)) {
|
|
33
|
+
recent.value.splice(recent.value.indexOf(id), 1);
|
|
34
|
+
}
|
|
35
|
+
recent.value.unshift(id);
|
|
36
|
+
recent.value.splice(10);
|
|
37
|
+
}
|
|
38
|
+
async function handleCommandSelect(event) {
|
|
39
|
+
const value = event.detail.value;
|
|
40
|
+
const command = props.commands?.find((command2) => command2.title === value);
|
|
41
|
+
if (!command) return;
|
|
42
|
+
switch (command.type) {
|
|
43
|
+
case "navigation":
|
|
44
|
+
isCommandOpen.value = false;
|
|
45
|
+
addRecent(command.id);
|
|
46
|
+
await router.push(command.path);
|
|
47
|
+
break;
|
|
48
|
+
case "api":
|
|
49
|
+
break;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
23
52
|
</script>
|
|
24
53
|
|
|
25
54
|
<template>
|
|
@@ -43,18 +72,40 @@ whenever(() => meta_k?.value, () => {
|
|
|
43
72
|
</p>
|
|
44
73
|
</section>
|
|
45
74
|
</CommandEmpty>
|
|
46
|
-
|
|
47
|
-
|
|
75
|
+
|
|
76
|
+
<CommandGroup
|
|
77
|
+
v-if="recent.length > 0"
|
|
78
|
+
:heading="t('recent')"
|
|
79
|
+
>
|
|
80
|
+
<CommandItem
|
|
81
|
+
v-for="command in commands"
|
|
82
|
+
:key="command.title"
|
|
83
|
+
:value="command.title"
|
|
84
|
+
@select="handleCommandSelect"
|
|
85
|
+
>
|
|
86
|
+
<Icon
|
|
87
|
+
v-if="command.icon"
|
|
88
|
+
:icon="command.icon"
|
|
89
|
+
/>
|
|
90
|
+
<span>{{ command.title }}</span>
|
|
91
|
+
</CommandItem>
|
|
92
|
+
</CommandGroup>
|
|
93
|
+
|
|
94
|
+
<CommandSeparator v-if="recent.length > 0" />
|
|
95
|
+
|
|
96
|
+
<CommandGroup :heading="t('navigation')">
|
|
97
|
+
<CommandItem
|
|
48
98
|
v-for="command in commands"
|
|
49
99
|
:key="command.title"
|
|
50
100
|
:value="command.title"
|
|
101
|
+
@select="handleCommandSelect"
|
|
51
102
|
>
|
|
52
103
|
<Icon
|
|
53
104
|
v-if="command.icon"
|
|
54
105
|
:icon="command.icon"
|
|
55
106
|
/>
|
|
56
107
|
<span>{{ command.title }}</span>
|
|
57
|
-
</CommandItem>
|
|
108
|
+
</CommandItem>
|
|
58
109
|
</CommandGroup>
|
|
59
110
|
</CommandList>
|
|
60
111
|
</CommandDialog>
|
|
@@ -66,13 +117,19 @@ whenever(() => meta_k?.value, () => {
|
|
|
66
117
|
<i18n lang="json">
|
|
67
118
|
{
|
|
68
119
|
"zh": {
|
|
69
|
-
"command-palette-empty": "无搜索结果"
|
|
120
|
+
"command-palette-empty": "无搜索结果",
|
|
121
|
+
"navigation": "导航",
|
|
122
|
+
"recent": "最近访问"
|
|
70
123
|
},
|
|
71
124
|
"ja": {
|
|
72
|
-
"command-palette-empty": "結果はありません"
|
|
125
|
+
"command-palette-empty": "結果はありません",
|
|
126
|
+
"navigation": "ナビゲーション",
|
|
127
|
+
"recent": "最近使用"
|
|
73
128
|
},
|
|
74
129
|
"en": {
|
|
75
|
-
"command-palette-empty": "No results"
|
|
130
|
+
"command-palette-empty": "No results",
|
|
131
|
+
"navigation": "Navigation",
|
|
132
|
+
"recent": "Recent"
|
|
76
133
|
}
|
|
77
134
|
}
|
|
78
135
|
</i18n>
|
|
@@ -1,11 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
type
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
export type NavigationCommand = Readonly<{
|
|
2
|
+
type: 'navigation';
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
icon?: string;
|
|
6
|
+
path: string;
|
|
7
|
+
}>;
|
|
8
|
+
export type APICommand = Readonly<{
|
|
9
|
+
type: 'api';
|
|
10
|
+
id: string;
|
|
11
|
+
title: string;
|
|
12
|
+
icon?: string;
|
|
13
|
+
}>;
|
|
14
|
+
export type Command = NavigationCommand | APICommand;
|
|
7
15
|
declare const _default: typeof __VLS_export;
|
|
8
16
|
export default _default;
|
|
17
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
18
|
+
commands?: ReadonlyArray<Command>;
|
|
19
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
|
|
20
|
+
commands?: ReadonlyArray<Command>;
|
|
21
|
+
}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
22
|
+
default?: (props: {}) => any;
|
|
23
|
+
}>;
|
|
9
24
|
type __VLS_WithSlots<T, S> = T & {
|
|
10
25
|
new (): {
|
|
11
26
|
$slots: S;
|
|
@@ -29,13 +29,13 @@ onUnmounted(() => {
|
|
|
29
29
|
v-bind="delegatedProps"
|
|
30
30
|
:id="id"
|
|
31
31
|
data-slot="command-group"
|
|
32
|
-
:class="cn('text-zinc-700
|
|
32
|
+
:class="cn('text-zinc-700 p-1 pt-0 outline-none', props.class)"
|
|
33
33
|
:hidden="isRender ? void 0 : true"
|
|
34
34
|
>
|
|
35
35
|
<ListboxGroupLabel
|
|
36
36
|
v-if="heading"
|
|
37
37
|
data-slot="command-group-heading"
|
|
38
|
-
class="px-2 py-
|
|
38
|
+
class="sticky top-0 z-10 bg-white px-2 py-2 text-xs font-medium text-zinc-700 select-none"
|
|
39
39
|
>
|
|
40
40
|
{{ heading }}
|
|
41
41
|
</ListboxGroupLabel>
|
|
@@ -55,7 +55,7 @@ onUnmounted(() => {
|
|
|
55
55
|
:id="id"
|
|
56
56
|
ref="itemRef"
|
|
57
57
|
data-slot="command-item"
|
|
58
|
-
:class="cn('data-highlighted:bg-zinc-100 data-highlighted:text-zinc-700 [&_svg:not([class*=\'text-\'])]:text-zinc-700 relative flex
|
|
58
|
+
:class="cn('data-highlighted:bg-zinc-100 data-highlighted:text-zinc-700 [&_svg:not([class*=\'text-\'])]:text-zinc-700 cursor-pointer relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
|
|
59
59
|
@select="() => {
|
|
60
60
|
filterState.search = '';
|
|
61
61
|
}"
|