chore: add directives to ui components

src/renderer/components/ContextMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <XMask transparent :show="items && items.length > 0" @close="hide" :style="{ zIndex: 2147483646 }">
-    <ul :class="{menu: true, 'item-focus': itemFocus}" ref="refMenu" @contextmenu.prevent>
+    <ul :class="{menu: true, 'item-focus': itemFocus}" ref="refMenu" @contextmenu.prevent tabindex="-1" v-auto-focus>
       <template v-for="(item, i) in items">
         <li v-if="item.type === 'separator'" v-show="!item.hidden" :key="i" :class="item.type" />
         <li
@@ -184,6 +184,10 @@ export default defineComponent({
   user-select: none;
 }
 
+.menu:focus {
+  outline: none;
+}
+
 .menu > li.separator {
   border-top: 1px rgba(var(--g-color-90-rgb), 0.7) solid;
   border-bottom: 1px rgba(var(--g-color-76-rgb), 0.7) solid;

src/renderer/support/ui/context-menu.ts

@@ -1,6 +1,7 @@
 import { App, ComponentPublicInstance, createApp } from 'vue'
 import type { Components } from '@fe/types'
 import Modal from '@fe/components/ContextMenu.vue'
+import directives from '@fe/directives'
 
 export interface Instance extends ComponentPublicInstance {
   show: (menuItems: Components.ContextMenu.Item[], opts?: Components.ContextMenu.ShowOpts) => void;
@@ -18,10 +19,12 @@ export function useContextMenu (): Instance {
 }
 
 export default function install (app: App) {
-  const toast = createApp(Modal)
+  const contextMenu = createApp(Modal)
+  contextMenu.use(directives)
+
   const el = document.createElement('div')
   document.body.appendChild(el)
 
-  instance = toast.mount(el) as Instance
+  instance = contextMenu.mount(el) as Instance
   app.config.globalProperties.$modal = instance
 }

src/renderer/support/ui/modal.ts

@@ -1,6 +1,7 @@
 import { App, ComponentPublicInstance, createApp } from 'vue'
 import type { Components } from '@fe/types'
 import Modal from '@fe/components/ModalUi.vue'
+import directives from '@fe/directives'
 
 export interface Instance extends ComponentPublicInstance {
   alert: (params: Components.Modal.AlertModalParams) => Promise<boolean>;
@@ -21,10 +22,12 @@ export function useModal (): Instance {
 }
 
 export default function install (app: App) {
-  const toast = createApp(Modal)
+  const modal = createApp(Modal)
+  modal.use(directives)
+
   const el = document.createElement('div')
   document.body.appendChild(el)
 
-  instance = toast.mount(el) as Instance
+  instance = modal.mount(el) as Instance
   app.config.globalProperties.$modal = instance
 }

src/renderer/support/ui/toast.ts

@@ -1,6 +1,7 @@
 import { App, Component, ComponentPublicInstance, createApp } from 'vue'
 import Toast from '@fe/components/Toast.vue'
 import { Components } from '@fe/types'
+import directives from '@fe/directives'
 
 export interface Instance extends ComponentPublicInstance {
   show: (type: Components.Toast.ToastType, content: string | Component, timeout?: number) => void;
@@ -19,6 +20,8 @@ export function useToast (): Instance {
 
 export default function install (app: App) {
   const toast = createApp(Toast)
+  toast.use(directives)
+
   const el = document.createElement('div')
   document.body.appendChild(el)