forked from halo-sigs/richtext-editor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
CommandsView.vue
152 lines (129 loc) · 3.04 KB
/
CommandsView.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<script lang="ts" setup>
import { type PropType, ref, watch } from "vue";
import type { CommandMenuItem } from "@/types";
import { i18n } from "@/locales";
import scrollIntoView from "scroll-into-view-if-needed";
const props = defineProps({
items: {
type: Array as PropType<CommandMenuItem[]>,
required: true,
},
command: {
type: Function as PropType<(item: CommandMenuItem) => void>,
required: true,
},
});
const selectedIndex = ref(0);
watch(
() => props.items,
() => {
selectedIndex.value = 0;
}
);
function onKeyDown({ event }: { event: KeyboardEvent }) {
if (event.key === "ArrowUp" || (event.key === "k" && event.ctrlKey)) {
handleKeyUp();
return true;
}
if (event.key === "ArrowDown" || (event.key === "j" && event.ctrlKey)) {
handleKeyDown();
return true;
}
if (event.key === "Enter") {
handleKeyEnter();
return true;
}
return false;
}
function handleKeyUp() {
selectedIndex.value =
(selectedIndex.value + props.items.length - 1) % props.items.length;
}
function handleKeyDown() {
selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
}
function handleKeyEnter() {
handleSelectItem(selectedIndex.value);
}
function handleSelectItem(index: number) {
const item = props.items[index];
if (item) {
props.command(item);
}
}
watch(
() => selectedIndex.value,
() => {
const selected = document.getElementById(
`command-item-${selectedIndex.value}`
);
if (selected) {
scrollIntoView(selected, { behavior: "smooth", scrollMode: "if-needed" });
}
}
);
defineExpose({
onKeyDown,
});
</script>
<template>
<div class="command-items">
<template v-if="items.length">
<div
v-for="(item, index) in items"
:id="`command-item-${index}`"
:key="index"
:class="{ 'is-selected': index === selectedIndex }"
class="command-item group hover:bg-gray-100"
@click="handleSelectItem(index)"
>
<component :is="item.icon" class="command-icon group-hover:!bg-white" />
<span
class="command-title group-hover:text-gray-900 group-hover:font-medium"
>
{{ i18n.global.t(item.title) }}
</span>
</div>
</template>
<div v-else class="command-empty">
<span>
{{ i18n.global.t("editor.extensions.commands_menu.no_results") }}
</span>
</div>
</div>
</template>
<style lang="scss">
.command-items {
@apply relative
rounded-md
bg-white
overflow-hidden
drop-shadow
w-52
p-1
max-h-72
overflow-y-auto;
.command-item {
@apply flex flex-row items-center rounded gap-4 p-1;
&.is-selected {
@apply bg-gray-100;
.command-icon {
@apply bg-white;
}
.command-title {
@apply text-gray-900 font-medium;
}
}
.command-icon {
@apply bg-gray-100 p-1 rounded w-6 h-6;
}
.command-title {
@apply text-xs
text-gray-600;
}
}
.command-empty {
@apply flex justify-center items-center p-1 text-xs text-gray-600;
}
}
</style>