Move conetxtmenu to composable

src/App.vue

@@ -10,13 +10,13 @@ import LandingPage from './pages/LandingPage.vue'
 import { useInterval } from './composables/useInterval'
 import { AppStorage } from './storage'
 import ContextMenu from './components/ContextMenu.vue'
-import { useContextmenu } from './stores/contextmenu'
 import { useTheme } from './composables/useTheme'
 import { Page, useRoute } from './composables/useRoute'
+import { useContextMenu } from './composables/useContextMenu'
 
 const store = useStore()
 const { currentPage } = useRoute()
-const contextmenu = useContextmenu()
+const contextmenu = useContextMenu()
 
 useInterval(() => {
   if (AppStorage.get('accessToken') && AppStorage.get('user'))
@@ -47,7 +47,7 @@ watchEffect(() => {
   </AppScroller>
 
   <ContextMenu
-    :state="contextmenu.state"
-    @close="contextmenu.clear"
+    :state="contextmenu.state.value"
+    @close="contextmenu.clear()"
   />
 </template>

src/components/ContextMenu.vue

@@ -3,14 +3,15 @@ import { Wowerlay } from 'wowerlay'
 import { type Context, filterSelectableItems } from 'vue-selectable-items'
 import { useKey } from '../composables/useKey'
 import { handleTransition } from '../utils/wowerlay'
-import type { ContextmenuState } from '../stores/contextmenu'
+
 import type { Option } from '../types'
+import type { ContextMenuState } from '../composables/useContextMenu'
 import MenuItems from './MenuItems.vue'
 </script>
 
 <script lang="ts" setup>
 type Props = {
-  state: Option<ContextmenuState>
+  state: Option<ContextMenuState>
 }
 
 const props = defineProps<Props>()

src/stores/contextmenu.ts → src/composables/useContextMenu.ts

@@ -1,17 +1,17 @@
-import { defineStore } from 'pinia'
 import { shallowRef } from 'vue'
 import type { ItemRenderList } from 'vue-selectable-items'
 import type { ItemMeta } from '../components/MenuItems.vue'
 import type { Option } from '../types'
+import { singleton } from '../utils/common'
 
-export type ContextmenuState = {
+export type ContextMenuState = {
   targetRectFn: () => DOMRect
   itemsFn: () => ItemRenderList<ItemMeta>
   currentTarget: HTMLElement | null
 }
 
-export const useContextmenu = defineStore('tooltip', () => {
-  const state = shallowRef<Option<ContextmenuState>>(null)
+export const useContextMenu = singleton(() => {
+  const state = shallowRef<Option<ContextMenuState>>(null)
 
   function clear() {
     state.value = null

src/directives/contextmenu.ts

@@ -1,17 +1,18 @@
 import type { Directive, DirectiveBinding } from 'vue'
-import { type ContextmenuState, useContextmenu } from '../stores/contextmenu'
+import type { ContextMenuState } from '../composables/useContextMenu'
+import { useContextMenu } from '../composables/useContextMenu'
 
 const registeredElements = new WeakSet<HTMLElement>()
 
-function directiveHandler(el: HTMLElement, binding: DirectiveBinding<ContextmenuState['itemsFn']>) {
+function directiveHandler(el: HTMLElement, binding: DirectiveBinding<ContextMenuState['itemsFn']>) {
   if (!registeredElements.has(el)) {
     registeredElements.add(el)
 
-    const contextmenu = useContextmenu()
+    const contextmenu = useContextMenu()
 
     el.addEventListener('contextmenu', (event) => {
       event.preventDefault()
-      contextmenu.state = {
+      contextmenu.state.value = {
         currentTarget: el,
         itemsFn: binding.value,
         targetRectFn: () => ({
@@ -31,13 +32,13 @@ function directiveHandler(el: HTMLElement, binding: DirectiveBinding<Contextmenu
 }
 
 function unmountHandler(el: HTMLElement) {
-  const contextmenu = useContextmenu()
+  const contextmenu = useContextMenu()
 
-  if (contextmenu.state?.currentTarget === el)
-    contextmenu.state = null
+  if (contextmenu.state.value?.currentTarget === el)
+    contextmenu.clear()
 }
 
-export const vContextmenu: Directive<HTMLElement, ContextmenuState['itemsFn']> = {
+export const vContextmenu: Directive<HTMLElement, ContextMenuState['itemsFn']> = {
   mounted: directiveHandler,
   updated: directiveHandler,
   unmounted: unmountHandler,