[#58] update setup script for layout

layouts/default.vue

@@ -1,65 +1,57 @@
-<template>
-  <div class="main-layout">
-    <LayoutSidebar
-      class="main-layout__sidebar"
-      :api-version="apiVersion"
-      :client-version="clientVersion"
-    />
-
-    <div class="main-layout__content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { storeToRefs } from "pinia";
-import { defineComponent } from "vue";
+<script lang="ts" setup>
+import { computed, ref, onMounted } from "vue";
 import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
 import { useSettings } from "~/src/shared/lib/use-settings";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
 import { version } from "../package.json";
 import { useSettingsStore } from "~/stores/settings";
 
-export default defineComponent({
-  components: {
-    LayoutSidebar,
-  },
-
-  async setup() {
-    SfdumpWrap(window.document);
+SfdumpWrap(window.document);
+useSettingsStore();
 
-    const settingsStore = useSettingsStore();
-    const { themeType, isFixedHeader } = storeToRefs(settingsStore);
+const {
+  api: { getVersion },
+} = useSettings();
 
-    const {
-      api: { getVersion },
-    } = useSettings();
+const apiVersion = ref("");
+const clientVersion = ref(
+  !version || version === "0.0.1" ? "@dev" : `v${version}`
+);
 
-    const apiVersion = await getVersion();
+const getApiVersion = async () => {
+  const data = await getVersion();
 
-    const { events } = useEvents();
+  apiVersion.value = String(data).match(/^[0-9.]+.*$/)
+    ? `v${data}`
+    : `@${data}`;
+};
 
-    if (!events?.items?.value?.length) {
-      events.getAll();
-    }
+onMounted(() => {
+  getApiVersion();
 
-    const clientVersion =
-      !version || version === "0.0.1" ? "@dev" : `v${version}`;
+  const { events } = useEvents();
 
-    return {
-      themeType,
-      isFixedHeader,
-      apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
-        ? `v${apiVersion}`
-        : `@${apiVersion}`,
-      clientVersion,
-    };
-  },
+  if (!events?.items?.value?.length) {
+    events.getAll();
+  }
 });
 </script>
 
+<template>
+  <div class="main-layout">
+    <LayoutSidebar
+      class="main-layout__sidebar"
+      :api-version="apiVersion"
+      :client-version="clientVersion"
+    />
+
+    <div class="main-layout__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import "assets/mixins";