refactor: Migrate to composition api

ui/src/components/ClockComponent.vue

@@ -1,34 +1,24 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-export default defineComponent({
-  name: 'ClockComponent',
-  data() {
-    return {
-      day: '00',
-      month: '00',
-      year: '0000',
-      min: '00',
-      hour: '00'
-    }
-  },
-  mounted() {
-    setInterval(() => this.setTime(), 5000)
-  },
-  methods: {
-    setTime() {
-      let date = new Date()
-      this.hour = this.dobleDTO(date.getHours()) // 0 - 23
-      this.min = this.dobleDTO(date.getMinutes()) // 0 - 59
-      this.day = this.dobleDTO(date.getDate())
-      this.month = this.dobleDTO(date.getMonth() + 1)
-      this.year = date.getFullYear().toString()
-    },
-    dobleDTO(data: number): string {
-      return data < 10 ? `0${data}` : data.toString()
-    }
-  }
-})
+const day = ref('00');
+const month = ref('00');
+const year = ref('0000');
+const min = ref('00');
+const hour = ref('00');
+
+setInterval(() => {
+  const date = new Date();
+  hour.value = dobleDTO(date.getHours()); // 0 - 23
+  min.value = dobleDTO(date.getMinutes()); // 0 - 59
+  day.value = dobleDTO(date.getDate());
+  month.value = dobleDTO(date.getMonth() + 1);
+  year.value = date.getFullYear().toString();
+}, 5000);
+
+function dobleDTO(data: number): string {
+  return data < 10 ? `0${data}` : data.toString();
+}
 </script>
 
 <template>

ui/src/components/area/WindowsArea.vue

@@ -1,30 +1,14 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { windowsStore } from '@/stores/windows';
-import WindowBottom from '../button/WindowBottom.vue';
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { windowsStore } from '@/stores/windows'
+import WindowBottom from '../button/WindowBottom.vue'
 
-export default defineComponent({
-  name: 'WindowsArea',
-  data() {
-    return {
-      windowsManager: windowsStore(),
-    }
-  },
-  computed: {
-    windows():any[] {
-      return this.windowsManager.windows
-    },
-  },
-  components: {
-    WindowBottom,
-  },
-})
+const windowsManager = windowsStore()
+const windows = computed((): Array<any> => windowsManager.windows)
 </script>
 
 <template>
-  <div>
-    <template v-for="window in windows" :key="window.id">
-      <WindowBottom :window="window" />
-    </template>
+  <div class="navale-applications-zone">
+    <WindowBottom v-for="window in windows" :key="window?.id" :window="window" />
   </div>
 </template>

ui/src/components/button/MenuButton.vue

@@ -1,40 +1,26 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { ref, onMounted, inject, computed } from 'vue'
 
-export default defineComponent({
-  name: 'MenuButton',
-  data() {
-    return {
-      menuIcon: ''
-    }
-  },
-  methods: {
-    openMenu(): void {
-      console.log('hydriam')
-    },
-    async setIcon(): Promise<void> {
-      this.menuIcon = await (this as any).$vsk.getGlobalIcon('applications-all')
-    }
-  },
-  computed: {
-    icon(): string {
-      return this.menuIcon
-    }
-  },
-  mounted() {
-    this.setIcon()
-  }
+const $vsk: any = inject('vsk')
+const menuIcon = ref('')
+const openMenu = (): void => {
+  console.log('hydriam')
+}
+const setIcon = async (): Promise<void> => {
+  menuIcon.value = await $vsk.getGlobalIcon('applications-all')
+}
+const icon = computed(() => menuIcon.value)
+
+onMounted(() => {
+  setIcon()
 })
 </script>
 
 <template>
-  <a class="navbar-brand ms-auto me-auto" href="#" id="dockMenuLauncher" @click="openMenu()">
+  <a class="navale-menu" href="#" id="dockMenuLauncher" @click="openMenu()">
     <img
       :src="'file://' + icon"
-      data-bs-toggle="tooltip"
-      data-bs-placement="left"
       title="Hydriam"
-      class="img-fluid dock-menu-launcher-icon"
       alt="Menu"
     />
   </a>

ui/src/components/button/WindowBottom.vue

@@ -1,28 +1,16 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { inject } from 'vue';
 
-export default defineComponent({
-  name: 'WindowBottom',
-  props: {
-    window: { type: Object, required: true }
-  },
-  methods: {
-    async toggleWindow(): Promise<void> {
-      await (this as any).$vsk.toggleWindow(this.window.id)
-    },
-  },
-})
+const $vsk:any = inject('vsk')
+defineProps<{ window: any }>()
+
+const toggleWindow = async (): Promise<void> => {
+  await $vsk.toggleWindow((window as any).id)
+}
 </script>
 
 <template>
-  <a class="navbar-brand" href="#" @click="toggleWindow">
-    <img
-      :src="window.icon"
-      data-bs-toggle="tooltip"
-      data-bs-placement="left"
-      :title="window.name"
-      class="img-fluid win-img"
-      :alt="window.name"
-    />
+  <a href="#" @click="toggleWindow">
+    <img :src="window.icon" :title="window.name" :alt="window.name" />
   </a>
 </template>

ui/src/components/status/NetworkStatus.vue

@@ -1,45 +1,22 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
 
-export default defineComponent({
-  name: 'NetworkStatus',
-  data() {
-    return {
-      name: '',
-      icon: ''
-    }
-  },
-  mounted() {
-    setInterval(() => this.checkNetwork(), 2000)
-  },
-  methods: {
-    async checkNetwork() {
-      let data = await (this as any).$vsk.getDefaultNetwork()
-      data = JSON.parse(data)
-      this.name = data.name
-      this.icon = data.icon
-    }
-  },
-  computed: {
-    networkName() {
-      return this.name
-    },
-    networkIcon() {
-      return this.icon
-    }
-  }
-})
+const $vsk: any = inject('vsk')
+const name = ref('')
+const icon = ref('')
+
+const checkNetwork = async (): Promise<void> => {
+  let data = await $vsk.getDefaultNetwork()
+  data = JSON.parse(data)
+  name.value = data.name
+  icon.value = data.icon
+}
+
+setInterval(() => checkNetwork(), 2000)
 </script>
 
 <template>
   <div id="network">
-    <img
-      data-bs-toggle="tooltip"
-      data-bs-placement="left"
-      :title="networkName"
-      :src="'file://' + networkIcon"
-      class="img-fluid dock-system-icon"
-      :alt="networkName"
-    />
+    <img :title="name" :src="'file://' + icon" :alt="name" />
   </div>
 </template>

ui/src/main.ts

@@ -6,7 +6,7 @@ import { windowsStore } from './stores/windows'
 const startApp = (channel: any) => {
   const app = createApp(App)
 
-  app.config.globalProperties.$vsk = channel.objects.vsk
+  app.provide('vsk', channel.objects.vsk)
   app.use(createPinia())
   // @ts-ignore
   window["windowManager"] = windowsStore()