Rewrite page store in Pinia setup-function style

src/store/page.ts

@@ -1,149 +1,162 @@
 import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
 import { useAppStore } from '@/store/app'
 import type { InteractiveBlock, InteractiveBlockIds, AppMenu, AppMenuMain, DialogInterface } from '@/models/page'
 
-export const usePageStore = defineStore('page', {
-  state: () => ({
-    menu: {
-      view: false,
-      items: []
-    } as AppMenuMain | AppMenu,
-
-    dialog: null as DialogInterface | null,
-
-    mainTabIndex: 0,
-    language: '',
-    languages: [] as string[],
-    activeBlocks: [] as InteractiveBlock[],
-    interactiveBlocks: [
-      {
-        id: 'login',
-        closeBeforeMount: ['settings'],
-        mayOpen: () => !useAppStore().viewThemeOnly
-      },
-      {
-        id: 'settings',
-        closeBeforeMount: ['login'],
-        openAfterDestroy: ['login']
-      }
-    ] as InteractiveBlock[]
-  }),
-
-  getters: {
-    locale: (state): string => {
-      const localesMap: Record<string, string> = {
-        ru: 'ru-RU',
-        en: 'en-US',
-        fr: 'fr-FR',
-        de: 'de-DE',
-        es: 'es-ES'
-      }
-      return localesMap[state.language] || 'en-US'
+export const usePageStore = defineStore('page', () => {
+  const menu = ref<AppMenuMain | AppMenu>({ view: false, items: [] })
+  const dialog = ref<DialogInterface | null>(null)
+
+  const mainTabIndex = ref(0)
+  const language = ref('')
+  const languages = ref<string[]>([])
+  const activeBlocks = ref<InteractiveBlock[]>([])
+  const interactiveBlocks = ref<InteractiveBlock[]>([
+    {
+      id: 'login',
+      closeBeforeMount: ['settings'],
+      mayOpen: () => !useAppStore().viewThemeOnly
     },
+    {
+      id: 'settings',
+      closeBeforeMount: ['login'],
+      openAfterDestroy: ['login']
+    }
+  ])
+
+  const locale = computed((): string => {
+    const localesMap: Record<string, string> = {
+      ru: 'ru-RU',
+      en: 'en-US',
+      fr: 'fr-FR',
+      de: 'de-DE',
+      es: 'es-ES'
+    }
+    return localesMap[language.value] || 'en-US'
+  })
 
-    getBlock: (state) => (id: InteractiveBlockIds) =>
-      state.activeBlocks.find((b) => b.id === id),
+  const getBlock = (id: InteractiveBlockIds) => activeBlocks.value.find((b) => b.id === id)
 
-    isOpenBlock: (state) => (id: InteractiveBlockIds) =>
-      !!state.activeBlocks.find((b) => b.id === id),
+  const isOpenBlock = (id: InteractiveBlockIds) => !!activeBlocks.value.find((b) => b.id === id)
 
-    activeBlock: (state): InteractiveBlock | undefined =>
-      state.activeBlocks[state.activeBlocks.length - 1]
-  },
+  const activeBlock = computed((): InteractiveBlock | undefined =>
+    activeBlocks.value[activeBlocks.value.length - 1])
 
-  actions: {
-    openFirstBlock() {
-      for (const block of this.interactiveBlocks) {
-        const canOpen = block.mayOpen ? block.mayOpen() : true
-        if (canOpen) {
-          this.openActiveBlock(block.id)
-          break
-        }
+  function openFirstBlock() {
+    for (const block of interactiveBlocks.value) {
+      const canOpen = block.mayOpen ? block.mayOpen() : true
+      if (canOpen) {
+        openActiveBlock(block.id)
+        break
       }
-    },
+    }
+  }
 
-    openActiveBlock(id: InteractiveBlockIds) {
-      const activeBlock = this.interactiveBlocks.find((b) => b.id === id)
-      if (!activeBlock) return
+  function openActiveBlock(id: InteractiveBlockIds) {
+    const block = interactiveBlocks.value.find((b) => b.id === id)
+    if (!block) return
 
-      const canOpen = activeBlock.mayOpen ? activeBlock.mayOpen() : true
-      if (!canOpen) return
+    const canOpen = block.mayOpen ? block.mayOpen() : true
+    if (!canOpen) return
 
-      this.activeBlocks.push(activeBlock)
-    },
+    activeBlocks.value.push(block)
+  }
 
-    closeActiveBlock(idBlock?: string) {
-      const index = this.activeBlocks.findIndex(({ id }) => id === idBlock)
-      if (index !== -1) {
-        this.activeBlocks.splice(index, 1)
-      } else if (!idBlock) {
-        this.activeBlocks.pop()
-      }
-    },
+  function closeActiveBlock(idBlock?: string) {
+    const index = activeBlocks.value.findIndex(({ id }) => id === idBlock)
+    if (index !== -1) {
+      activeBlocks.value.splice(index, 1)
+    } else if (!idBlock) {
+      activeBlocks.value.pop()
+    }
+  }
 
-    closeAllBlocks() {
-      this.activeBlocks = []
-    },
+  function closeAllBlocks() {
+    activeBlocks.value = []
+  }
 
-    assignMenu(menu: Partial<AppMenu>) {
-      this.menu = Object.assign(this.menu, menu)
-    },
+  function assignMenu(partialMenu: Partial<AppMenu>) {
+    menu.value = Object.assign(menu.value, partialMenu)
+  }
 
-    openTab({ type }: { type: 'settings' | 'themes' | 'custom' }) {
-      const hasCustomCurrentTheme = useAppStore().activeTheme?.settings?.length !== undefined
-      let updatedTabIndex = this.mainTabIndex
-
-      switch (type) {
-        case 'settings':
-          updatedTabIndex = hasCustomCurrentTheme ? 2 : 1
-          break
-        case 'custom':
-          updatedTabIndex = hasCustomCurrentTheme ? 1 : updatedTabIndex
-          break
-        default:
-          updatedTabIndex = 0
-      }
+  function openTab({ type }: { type: 'settings' | 'themes' | 'custom' }) {
+    const hasCustomCurrentTheme = useAppStore().activeTheme?.settings?.length !== undefined
+    let updatedTabIndex = mainTabIndex.value
+
+    switch (type) {
+      case 'settings':
+        updatedTabIndex = hasCustomCurrentTheme ? 2 : 1
+        break
+      case 'custom':
+        updatedTabIndex = hasCustomCurrentTheme ? 1 : updatedTabIndex
+        break
+      default:
+        updatedTabIndex = 0
+    }
 
-      this.mainTabIndex = updatedTabIndex
-    },
+    mainTabIndex.value = updatedTabIndex
+  }
 
-    async openBlock(settings: { id: InteractiveBlockIds }) {
-      const { id } = settings || {}
-      if (!id) return
+  async function openBlock(settings: { id: InteractiveBlockIds }) {
+    const { id } = settings || {}
+    if (!id) return
 
-      if (this.activeBlocks.find((b) => b.id === id)) return
+    if (activeBlocks.value.find((b) => b.id === id)) return
 
-      const block = this.interactiveBlocks.find((b) => b.id === id)
-      if (!block) return
+    const block = interactiveBlocks.value.find((b) => b.id === id)
+    if (!block) return
 
-      block.closeBeforeMount?.forEach((bid) => this.closeActiveBlock(bid))
-      this.openActiveBlock(id)
-    },
+    block.closeBeforeMount?.forEach((bid) => closeActiveBlock(bid))
+    openActiveBlock(id)
+  }
 
-    async closeBlock(settings?: { id?: InteractiveBlockIds }) {
-      const lastId = this.activeBlocks[this.activeBlocks.length - 1]?.id
-      const id = settings?.id || lastId
-      if (!id) return
+  async function closeBlock(settings?: { id?: InteractiveBlockIds }) {
+    const lastId = activeBlocks.value[activeBlocks.value.length - 1]?.id
+    const id = settings?.id || lastId
+    if (!id) return
 
-      const block = this.activeBlocks.find((b) => b.id === id)
-      if (!block) return
+    const block = activeBlocks.value.find((b) => b.id === id)
+    if (!block) return
 
-      block.openAfterDestroy?.forEach((bid) => this.openActiveBlock(bid))
+    block.openAfterDestroy?.forEach((bid) => openActiveBlock(bid))
 
-      let needToClose = true
-      if (block.callbackBeforeClose) {
-        needToClose = block.callbackBeforeClose.map((cb) => cb()).every(Boolean)
-      }
+    let needToClose = true
+    if (block.callbackBeforeClose) {
+      needToClose = block.callbackBeforeClose.map((cb) => cb()).every(Boolean)
+    }
 
-      if (needToClose) this.closeActiveBlock(id)
-    },
+    if (needToClose) closeActiveBlock(id)
+  }
 
-    openDialog(dialog: DialogInterface) {
-      this.dialog = dialog
-    },
+  function openDialog(newDialog: DialogInterface) {
+    dialog.value = newDialog
+  }
 
-    closeDialog() {
-      this.dialog = null
-    }
+  function closeDialog() {
+    dialog.value = null
+  }
+
+  return {
+    menu,
+    dialog,
+    mainTabIndex,
+    language,
+    languages,
+    activeBlocks,
+    interactiveBlocks,
+    locale,
+    getBlock,
+    isOpenBlock,
+    activeBlock,
+    openFirstBlock,
+    openActiveBlock,
+    closeActiveBlock,
+    closeAllBlocks,
+    assignMenu,
+    openTab,
+    openBlock,
+    closeBlock,
+    openDialog,
+    closeDialog
   }
 })