From e6f83a2e19c79bd006a797b90456a97c625236db Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:43:57 +0500
Subject: [PATCH 001/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Accordion/Accordion.vue         | 87 +++++++++----------
 1 file changed, 39 insertions(+), 48 deletions(-)

diff --git a/src/components/compounds/Accordion/Accordion.vue b/src/components/compounds/Accordion/Accordion.vue
index 4006a1b..67665e4 100644
--- a/src/components/compounds/Accordion/Accordion.vue
+++ b/src/components/compounds/Accordion/Accordion.vue
@@ -1,60 +1,51 @@
-<script>
+<script setup lang="ts">
 import { computed, reactive } from "vue";
 
-export default {
-  name: "VAccordion",
-  props: {
-    isHorizontal: Boolean,
-    triggerRight: Boolean,
-    triggerLeft: Boolean,
-    expanded: Boolean,
-    background: String,
-    color: String,
-    hover: Boolean,
-    isLink: Boolean,
-    isActive: Boolean,
-    headerIsTrigger: Boolean,
-  },
-
-  setup(props) {
-    const state = reactive({
-      isExpanded: props.expanded,
-      style: {
-        backgroundColor: props.background,
-        color: props.color,
-      },
-      hover: props.hover,
-      isLink: props.isLink,
-      headerIsTrigger: props.headerIsTrigger,
-    });
+const props = defineProps<{
+  isHorizontal?: boolean;
+  triggerRight?: boolean;
+  triggerLeft?: boolean;
+  expanded?: boolean;
+  background?: string;
+  color?: string;
+  hover?: boolean;
+  isLink?: boolean;
+  isActive?: boolean;
+  headerIsTrigger?: boolean;
+  disabled?: boolean;
+}>();
 
-    const toggle = (isHeaderTrigger) => {
-      if (props.disabled) return;
+const state = reactive({
+  isExpanded: props.expanded,
+  style: {
+    backgroundColor: props.background,
+    color: props.color,
+  },
+  hover: props.hover,
+  isLink: props.isLink,
+  headerIsTrigger: props.headerIsTrigger,
+});
 
-      if (
-        (isHeaderTrigger && props.headerIsTrigger) ||
-        !props.headerIsTrigger
-      ) {
-        state.isExpanded = !state.isExpanded;
-      }
-    };
+const toggle = (isHeaderTrigger: boolean) => {
+  if (props.disabled) return;
 
-    // separate function because of buggy css hover
-    const open = () => {
-      state.isExpanded = true;
-    };
+  if ((isHeaderTrigger && props.headerIsTrigger) || !props.headerIsTrigger) {
+    state.isExpanded = !state.isExpanded;
+  }
+};
 
-    const close = () => {
-      state.isExpanded = false;
-    };
+// separate function because of buggy css hover
+const open = () => {
+  state.isExpanded = true;
+};
 
-    const displayActive = computed(() => props.isActive && props.hover);
+const close = () => {
+  state.isExpanded = false;
+};
 
-    const displayDefault = computed(() => !props.isActive && props.hover);
+const displayActive = computed(() => props.isActive && props.hover);
 
-    return { state, toggle, open, close, displayActive, displayDefault };
-  },
-};
+const displayDefault = computed(() => !props.isActive && props.hover);
 </script>
 
 <template>

From c6e9c2417206e662c7fc033999666e576fd5decb Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:45:04 +0500
Subject: [PATCH 002/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Accordion/AccordionMenu.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Accordion/AccordionMenu.vue b/src/components/compounds/Accordion/AccordionMenu.vue
index acfb643..1ebaa72 100644
--- a/src/components/compounds/Accordion/AccordionMenu.vue
+++ b/src/components/compounds/Accordion/AccordionMenu.vue
@@ -1,7 +1,5 @@
-<script>
-export default {
-  name: "VAccordionMenu",
-};
+<script setup lang="ts">
+//
 </script>
 
 <template>

From 0773624224263a8387a0e5d36ee9b5879fe31010 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:49:38 +0500
Subject: [PATCH 003/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Breadcrumb/Breadcrumb.vue       | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/compounds/Breadcrumb/Breadcrumb.vue b/src/components/compounds/Breadcrumb/Breadcrumb.vue
index 033402b..ec96c6a 100644
--- a/src/components/compounds/Breadcrumb/Breadcrumb.vue
+++ b/src/components/compounds/Breadcrumb/Breadcrumb.vue
@@ -1,12 +1,13 @@
-<script>
-export default {
-  name: "VBreadcrumb",
-  props: {
-    alignment: String,
-    separator: String,
-    size: String,
-  },
-};
+<script setup lang="ts">
+defineProps<{
+  alignment?: "is-centered" | "is-right";
+  separator?:
+    | "has-arrow-separator"
+    | "has-bullet-separator"
+    | "has-dot-separator"
+    | "has-succeeds-separator";
+  size?: "is-normal" | "is-medium" | "is-large";
+}>();
 </script>
 
 <template>

From 01e8e4572e49b9d0bcfeaaf6536be0cb3cf53308 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:51:13 +0500
Subject: [PATCH 004/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Breadcrumb/BreadcrumbItem.vue   | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/compounds/Breadcrumb/BreadcrumbItem.vue b/src/components/compounds/Breadcrumb/BreadcrumbItem.vue
index 236dc80..b2a6404 100644
--- a/src/components/compounds/Breadcrumb/BreadcrumbItem.vue
+++ b/src/components/compounds/Breadcrumb/BreadcrumbItem.vue
@@ -1,15 +1,17 @@
-<script>
-export default {
-  name: "VBreadcrumbItem",
+<script setup lang="ts">
+defineOptions({
   inheritAttrs: false,
-  props: {
-    tag: {
-      type: String,
-      default: "a",
-    },
-    active: Boolean,
+});
+
+withDefaults(
+  defineProps<{
+    tag?: string;
+    active?: boolean;
+  }>(),
+  {
+    tag: "a",
   },
-};
+);
 </script>
 
 <template>

From 12306010360aacc72e5290219311684caeade780 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:53:36 +0500
Subject: [PATCH 005/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Card/Card.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/compounds/Card/Card.vue b/src/components/compounds/Card/Card.vue
index 189f59c..b6ccf2b 100644
--- a/src/components/compounds/Card/Card.vue
+++ b/src/components/compounds/Card/Card.vue
@@ -1,13 +1,12 @@
-<script>
-export default {
-  name: "VCard",
-  props: {
-    tag: {
-      type: String,
-      default: "div",
-    },
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tag?: string;
+  }>(),
+  {
+    tag: "div",
   },
-};
+);
 </script>
 
 <template>

From 7e5dca401f673f59ce10f038ad5d52b304f9bf67 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:55:39 +0500
Subject: [PATCH 006/212] docs: add todo

---
 src/components/compounds/Card/Card.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/compounds/Card/Card.vue b/src/components/compounds/Card/Card.vue
index b6ccf2b..bd880df 100644
--- a/src/components/compounds/Card/Card.vue
+++ b/src/components/compounds/Card/Card.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// TODO: Add documentation for the Card component, including examples with related components, to https://vue3.dev/documentation
+
 withDefaults(
   defineProps<{
     tag?: string;

From d5bdeb0fa56dd852ae5055388f7e6f5b9e2581fc Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:56:10 +0500
Subject: [PATCH 007/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Card/CardContent.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Card/CardContent.vue b/src/components/compounds/Card/CardContent.vue
index a1dfab7..eb481bc 100644
--- a/src/components/compounds/Card/CardContent.vue
+++ b/src/components/compounds/Card/CardContent.vue
@@ -1,7 +1,5 @@
-<script>
-export default {
-  name: "VCardContent",
-};
+<script setup lang="ts">
+//
 </script>
 
 <template>

From 86489ce085aada4c357bb85a384410e65187eaba Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:57:26 +0500
Subject: [PATCH 008/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Card/CardFooter.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/compounds/Card/CardFooter.vue b/src/components/compounds/Card/CardFooter.vue
index 62e9521..a53ea5b 100644
--- a/src/components/compounds/Card/CardFooter.vue
+++ b/src/components/compounds/Card/CardFooter.vue
@@ -1,13 +1,12 @@
-<script>
-export default {
-  name: "VCardFooter",
-  props: {
-    tag: {
-      type: String,
-      default: "footer",
-    },
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tag?: string;
+  }>(),
+  {
+    tag: "footer",
   },
-};
+);
 </script>
 
 <template>

From d2616b41f62dd704d35f0ee47bfdbff2fca6c8a0 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:58:19 +0500
Subject: [PATCH 009/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Card/CardFooterItem.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Card/CardFooterItem.vue b/src/components/compounds/Card/CardFooterItem.vue
index 3ae4399..09b616c 100644
--- a/src/components/compounds/Card/CardFooterItem.vue
+++ b/src/components/compounds/Card/CardFooterItem.vue
@@ -1,7 +1,5 @@
-<script>
-export default {
-  name: "VCardFooterItem",
-};
+<script setup lang="ts">
+//
 </script>
 
 <template>

From 2ca1cd0b61aca39c693d424d1b0d4220b1a64cda Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Mon, 21 Apr 2025 23:59:44 +0500
Subject: [PATCH 010/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Card/CardHeader.vue | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/compounds/Card/CardHeader.vue b/src/components/compounds/Card/CardHeader.vue
index 0d1decc..fac4de3 100644
--- a/src/components/compounds/Card/CardHeader.vue
+++ b/src/components/compounds/Card/CardHeader.vue
@@ -1,14 +1,13 @@
-<script>
-export default {
-  name: "VCardHeader",
-  props: {
-    title: String,
-    tag: {
-      type: String,
-      default: "header",
-    },
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title?: string;
+    tag?: string;
+  }>(),
+  {
+    tag: "header",
   },
-};
+);
 </script>
 
 <template>

From 5552d8f8eca1b7efef8469a2edced6e6d1663b0e Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:00:08 +0500
Subject: [PATCH 011/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Card/CardImage.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Card/CardImage.vue b/src/components/compounds/Card/CardImage.vue
index bffc343..ca0bf2f 100644
--- a/src/components/compounds/Card/CardImage.vue
+++ b/src/components/compounds/Card/CardImage.vue
@@ -1,7 +1,5 @@
-<script>
-export default {
-  name: "VCardImage",
-};
+<script setup lang="ts">
+//
 </script>
 
 <template>

From bbdc69df54d824ec84a735286341a1534d4c8089 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:03:27 +0500
Subject: [PATCH 012/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Columns/Column.vue | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/compounds/Columns/Column.vue b/src/components/compounds/Columns/Column.vue
index cacf1db..c11ff62 100644
--- a/src/components/compounds/Columns/Column.vue
+++ b/src/components/compounds/Columns/Column.vue
@@ -1,13 +1,10 @@
-<script>
-export default {
-  name: "VColumn",
-  props: {
-    size: String,
-    offset: String,
-    narrow: Boolean,
-    narrowBreakpoint: String,
-  },
-};
+<script setup lang="ts">
+defineProps<{
+  size?: string;
+  offset?: string;
+  narrow?: boolean;
+  narrowBreakpoint?: string;
+}>();
 </script>
 
 <template>

From 230e6738e2d65192405b193c161c039b39889561 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:05:52 +0500
Subject: [PATCH 013/212] refactor: add union type

---
 src/components/compounds/Columns/Column.vue | 24 ++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Columns/Column.vue b/src/components/compounds/Columns/Column.vue
index c11ff62..74138c8 100644
--- a/src/components/compounds/Columns/Column.vue
+++ b/src/components/compounds/Columns/Column.vue
@@ -1,6 +1,28 @@
 <script setup lang="ts">
 defineProps<{
-  size?: string;
+  size?:
+    | "is-1"
+    | "is-2"
+    | "is-3"
+    | "is-4"
+    | "is-5"
+    | "is-6"
+    | "is-7"
+    | "is-8"
+    | "is-9"
+    | "is-10"
+    | "is-11"
+    | "is-12"
+    | "is-three-quarters"
+    | "is-two-thirds"
+    | "is-half"
+    | "is-one-third"
+    | "is-one-quarter"
+    | "is-full"
+    | "is-four-fifths"
+    | "is-three-fifths"
+    | "is-two-fifths"
+    | "is-one-fifth";
   offset?: string;
   narrow?: boolean;
   narrowBreakpoint?: string;

From 17578a49f01213a4871960a6d8656d756635ca97 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:08:27 +0500
Subject: [PATCH 014/212] refactor: add union type

---
 src/components/compounds/Columns/Column.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Columns/Column.vue b/src/components/compounds/Columns/Column.vue
index 74138c8..2ffd7ba 100644
--- a/src/components/compounds/Columns/Column.vue
+++ b/src/components/compounds/Columns/Column.vue
@@ -23,7 +23,18 @@ defineProps<{
     | "is-three-fifths"
     | "is-two-fifths"
     | "is-one-fifth";
-  offset?: string;
+  offset?:
+    | "is-offset-1"
+    | "is-offset-2"
+    | "is-offset-3"
+    | "is-offset-4"
+    | "is-offset-5"
+    | "is-offset-6"
+    | "is-offset-7"
+    | "is-offset-8"
+    | "is-offset-9"
+    | "is-offset-10"
+    | "is-offset-11";
   narrow?: boolean;
   narrowBreakpoint?: string;
 }>();

From 3b617043df907ce47f94dd4baeb572e9b1743d9c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:18:32 +0500
Subject: [PATCH 015/212] refactor: add union type

---
 src/components/compounds/Columns/Column.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Columns/Column.vue b/src/components/compounds/Columns/Column.vue
index 2ffd7ba..b0ce5a5 100644
--- a/src/components/compounds/Columns/Column.vue
+++ b/src/components/compounds/Columns/Column.vue
@@ -36,7 +36,13 @@ defineProps<{
     | "is-offset-10"
     | "is-offset-11";
   narrow?: boolean;
-  narrowBreakpoint?: string;
+  narrowBreakpoint?:
+    | "is-narrow-mobile"
+    | "is-narrow-tablet"
+    | "is-narrow-touch"
+    | "is-narrow-desktop"
+    | "is-narrow-widescreen"
+    | "is-narrow-fullhd";
 }>();
 </script>
 

From 29c1e97e526399eb04901d9b5847342d96dda307 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:21:15 +0500
Subject: [PATCH 016/212] refactor: add missing offset variant

---
 src/components/compounds/Columns/Column.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Columns/Column.vue b/src/components/compounds/Columns/Column.vue
index b0ce5a5..1686389 100644
--- a/src/components/compounds/Columns/Column.vue
+++ b/src/components/compounds/Columns/Column.vue
@@ -34,7 +34,8 @@ defineProps<{
     | "is-offset-8"
     | "is-offset-9"
     | "is-offset-10"
-    | "is-offset-11";
+    | "is-offset-11"
+    | "is-offset-12";
   narrow?: boolean;
   narrowBreakpoint?:
     | "is-narrow-mobile"

From f968fe0252dbac12182a7aeb32da5d2e31cd665c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:22:46 +0500
Subject: [PATCH 017/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Columns/Columns.vue | 23 +++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/compounds/Columns/Columns.vue b/src/components/compounds/Columns/Columns.vue
index 1149f74..c4156d2 100644
--- a/src/components/compounds/Columns/Columns.vue
+++ b/src/components/compounds/Columns/Columns.vue
@@ -1,16 +1,13 @@
-<script>
-export default {
-  name: "VColumns",
-  props: {
-    mobile: Boolean,
-    desktop: Boolean,
-    gapless: Boolean,
-    gap: String,
-    multiline: Boolean,
-    hcentered: Boolean,
-    vcentered: Boolean,
-  },
-};
+<script setup lang="ts">
+defineProps<{
+  mobile: boolean;
+  desktop: boolean;
+  gapless: boolean;
+  gap: string;
+  multiline: boolean;
+  hcentered: boolean;
+  vcentered: boolean;
+}>();
 </script>
 
 <template>

From 97362a8950b5c4dfaeb9ff8d39bd9b001b696e4c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:23:49 +0500
Subject: [PATCH 018/212] refactor: all props optional

---
 src/components/compounds/Columns/Columns.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/compounds/Columns/Columns.vue b/src/components/compounds/Columns/Columns.vue
index c4156d2..c623f2b 100644
--- a/src/components/compounds/Columns/Columns.vue
+++ b/src/components/compounds/Columns/Columns.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 defineProps<{
-  mobile: boolean;
-  desktop: boolean;
-  gapless: boolean;
-  gap: string;
-  multiline: boolean;
-  hcentered: boolean;
-  vcentered: boolean;
+  mobile?: boolean;
+  desktop?: boolean;
+  gapless?: boolean;
+  gap?: string;
+  multiline?: boolean;
+  hcentered?: boolean;
+  vcentered?: boolean;
 }>();
 </script>
 

From d65e4e083522fd41612e9dcf9adbf8fea0ea42d5 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:38:19 +0500
Subject: [PATCH 019/212] docs: define docs for gap

---
 src/components/compounds/Columns/Columns.vue | 30 ++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/compounds/Columns/Columns.vue b/src/components/compounds/Columns/Columns.vue
index c623f2b..5b4cd79 100644
--- a/src/components/compounds/Columns/Columns.vue
+++ b/src/components/compounds/Columns/Columns.vue
@@ -3,6 +3,36 @@ defineProps<{
   mobile?: boolean;
   desktop?: boolean;
   gapless?: boolean;
+  /**
+   * Defines the column gap between items.
+   *
+   * You can specify a custom gap size using the following modifiers:
+   *   is-0, is-1, is-2, is-3, is-4, is-5, is-6, is-7, is-8
+   *
+   * You can also define responsive gaps for specific breakpoints
+   * by appending the breakpoint name to the modifier.
+   *
+   * Example usage:
+   * ```vue
+   * <v-columns
+   *   gap="is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd"
+   * >
+   *   ...
+   * </v-columns>
+   * ```
+   *
+   * Breakpoints:
+   * - mobile
+   * - tablet
+   * - desktop
+   * - widescreen
+   * - fullhd
+   *
+   * And special breakpoints for specific screen sizes:
+   * - tablet-only
+   * - desktop-only
+   * - widescreen-only
+   */
   gap?: string;
   multiline?: boolean;
   hcentered?: boolean;

From 8a07b61283dbbe82abd44f6b0c91bff85c3e69d9 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:39:49 +0500
Subject: [PATCH 020/212] docs: define docs for gap

---
 src/components/compounds/Columns/Columns.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Columns/Columns.vue b/src/components/compounds/Columns/Columns.vue
index 5b4cd79..26b35a8 100644
--- a/src/components/compounds/Columns/Columns.vue
+++ b/src/components/compounds/Columns/Columns.vue
@@ -28,7 +28,7 @@ defineProps<{
    * - widescreen
    * - fullhd
    *
-   * And special breakpoints for specific screen sizes:
+   * Additional breakpoints (for targeting only specific screen sizes):
    * - tablet-only
    * - desktop-only
    * - widescreen-only

From 26784fc896ff8d8c37594e911676ba5abedddfe7 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:47:15 +0500
Subject: [PATCH 021/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Dropdown/DropdownItem.vue       | 100 ++++++++----------
 1 file changed, 47 insertions(+), 53 deletions(-)

diff --git a/src/components/compounds/Dropdown/DropdownItem.vue b/src/components/compounds/Dropdown/DropdownItem.vue
index 37c098b..62facd9 100644
--- a/src/components/compounds/Dropdown/DropdownItem.vue
+++ b/src/components/compounds/Dropdown/DropdownItem.vue
@@ -1,64 +1,58 @@
-<script>
+<script setup lang="ts">
 import { computed, inject } from "vue";
 import { DropdownSymbol } from "./Dropdown.vue";
 
-export default {
-  name: "VDropdownItem",
-  props: {
-    value: {
-      type: [String, Number, Boolean, Object, Array, Function],
-    },
-    separator: Boolean,
-    disabled: Boolean,
-    custom: Boolean,
-    focusable: {
-      type: Boolean,
-      default: true,
-    },
-    paddingless: Boolean,
-    hasLink: Boolean,
-    ariaRole: String,
+const props = withDefaults(
+  defineProps<{
+    // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
+    value?: any;
+    separator?: boolean;
+    disabled?: boolean;
+    custom?: boolean;
+    focusable?: boolean;
+    paddingless?: boolean;
+    hasLink?: boolean;
+    ariaRole?: "listitem" | "menuitem";
+  }>(),
+  {
+    focusable: true,
   },
-  setup(props, context) {
-    const ariaRoleItem = computed(() => {
-      return props.ariaRole === "menuitem" || props.ariaRole === "listitem"
-        ? props.ariaRole
-        : null;
-    });
-    const isClickable = computed(() => {
-      return !props.separator && !props.disabled && !props.custom;
-    });
-    const isActive = computed(() => {
-      return false; // TODO
-    });
-    const isFocusable = computed(() => {
-      return props.hasLink ? false : props.focusable;
-    });
-    const tabIndex = computed(() => {
-      return isFocusable.value ? 0 : null;
-    });
-    const dropdownLink = computed(() => {
-      return !props.custom && !props.hasLink;
-    });
-    const { selectItem: reportParent } = inject(DropdownSymbol);
+);
 
-    const selectItem = () => {
-      if (!isClickable.value) return;
-      reportParent(props.value);
-    };
+const ariaRoleItem = computed(() => {
+  return props.ariaRole === "menuitem" || props.ariaRole === "listitem"
+    ? props.ariaRole
+    : null;
+});
 
-    const itemIsBlock = computed(() => !props.hasLink);
+const isClickable = computed(() => {
+  return !props.separator && !props.disabled && !props.custom;
+});
 
-    return {
-      ariaRoleItem,
-      isActive,
-      selectItem,
-      tabIndex,
-      dropdownLink,
-      itemIsBlock,
-    };
-  },
+const isActive = computed(() => {
+  return false; // TODO
+});
+
+const isFocusable = computed(() => {
+  return props.hasLink ? false : props.focusable;
+});
+
+const tabIndex = computed(() => {
+  return isFocusable.value ? 0 : null;
+});
+
+const dropdownLink = computed(() => {
+  return !props.custom && !props.hasLink;
+});
+
+const { selectItem: reportParent } = inject(DropdownSymbol);
+
+const selectItem = () => {
+  if (!isClickable.value) return;
+  reportParent(props.value);
 };
+
+const itemIsBlock = computed(() => !props.hasLink);
 </script>
 
 <template>

From bb2fba5d82c60dbbaf22d80b4207a1ffc833692b Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 00:55:20 +0500
Subject: [PATCH 022/212] refactor: use undefined instead of null

---
 src/components/compounds/Dropdown/DropdownItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Dropdown/DropdownItem.vue b/src/components/compounds/Dropdown/DropdownItem.vue
index 62facd9..e5d99bc 100644
--- a/src/components/compounds/Dropdown/DropdownItem.vue
+++ b/src/components/compounds/Dropdown/DropdownItem.vue
@@ -22,7 +22,7 @@ const props = withDefaults(
 const ariaRoleItem = computed(() => {
   return props.ariaRole === "menuitem" || props.ariaRole === "listitem"
     ? props.ariaRole
-    : null;
+    : undefined;
 });
 
 const isClickable = computed(() => {
@@ -38,7 +38,7 @@ const isFocusable = computed(() => {
 });
 
 const tabIndex = computed(() => {
-  return isFocusable.value ? 0 : null;
+  return isFocusable.value ? 0 : undefined;
 });
 
 const dropdownLink = computed(() => {

From c589c3106e614cd78f6360bbc6b113670a1dae4a Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:07:09 +0500
Subject: [PATCH 023/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Dropdown/Dropdown.vue           | 102 +++++++++---------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 5a87daa..873da25 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -1,67 +1,65 @@
-<script>
+<script setup lang="ts">
 import { computed, provide, reactive } from "vue";
 
 export const DropdownSymbol = Symbol("Dropdown");
 
-export default {
-  name: "VDropdown",
-  props: {
-    value: {
-      type: [String, Number, Boolean, Object, Array, Function],
-    },
-    disabled: Boolean,
-    hoverable: Boolean,
-    inline: Boolean,
-    position: String,
-    mobileModal: {
-      type: Boolean,
-      default: true,
-    },
-    ariaRole: String,
-    closeOnClick: {
-      type: Boolean,
-      default: true,
-    },
-    expanded: Boolean,
+// todo close on click outside
+
+const props = withDefaults(
+  defineProps<{
+    // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
+    modelValue?: any;
+    disabled?: boolean;
+    hoverable?: boolean;
+    inline?: boolean;
+    position?: "is-left" | "is-up" | "is-down" | "is-right";
+    mobileModal?: boolean;
+    ariaRole?: "list" | "menu" | "dialog";
+    closeOnClick?: boolean;
+    /** Full width */
+    expanded?: boolean;
+  }>(),
+  {
+    mobileModal: true,
+    closeOnClick: true,
   },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const state = reactive({
-      selected: props.value,
-      style: {},
-      isActive: false,
-      isHoverable: props.hoverable,
-    });
+);
+
+const emit = defineEmits(["update:modelValue"]);
 
-    const toggle = () => {
-      if (props.disabled || props.hoverable) return;
-      state.isActive = !state.isActive;
-    };
+const state = reactive({
+  selected: props.modelValue,
+  style: {},
+  isActive: false,
+  isHoverable: props.hoverable,
+});
 
-    const closeMenu = () => {
-      if (props.closeOnClick) {
-        state.isActive = false;
-      }
-    };
+const toggle = () => {
+  if (props.disabled || props.hoverable) return;
+  state.isActive = !state.isActive;
+};
 
-    const selectItem = (newValue) => {
-      emit("update:modelValue", newValue);
-      closeMenu();
-    };
+const closeMenu = () => {
+  if (props.closeOnClick) {
+    state.isActive = false;
+  }
+};
 
-    const show = computed(() => {
-      return (
-        (!props.disabled && (state.isActive || props.hoverable)) || props.inline
-      );
-    });
+// biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
+const selectItem = (newValue: any) => {
+  emit("update:modelValue", newValue);
+  closeMenu();
+};
 
-    const displayActive = computed(() => state.isActive || props.inline);
+const show = computed(() => {
+  return (
+    (!props.disabled && (state.isActive || props.hoverable)) || props.inline
+  );
+});
 
-    provide(DropdownSymbol, { selectItem, value: props.value });
+const displayActive = computed(() => state.isActive || props.inline);
 
-    return { state, toggle, show, displayActive };
-  },
-};
+provide(DropdownSymbol, { selectItem, value: props.modelValue });
 </script>
 
 <template>

From 00064cff1f5ad5983cc19df3656f6a5a03389c9d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:15:30 +0500
Subject: [PATCH 024/212] refactor: provide item selection for children

---
 src/components/compounds/Dropdown/Dropdown.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 873da25..649f149 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, provide, reactive } from "vue";
-
-export const DropdownSymbol = Symbol("Dropdown");
+import type { InjectionKey } from "vue";
 
 // todo close on click outside
 
@@ -59,6 +58,16 @@ const show = computed(() => {
 
 const displayActive = computed(() => state.isActive || props.inline);
 
+// provide item selection for children
+export type DropdownItemSelection = {
+  value: typeof props.modelValue;
+  selectItem: typeof selectItem;
+};
+
+export const DropdownSymbol = Symbol(
+  "Dropdown",
+) as InjectionKey<DropdownItemSelection>;
+
 provide(DropdownSymbol, { selectItem, value: props.modelValue });
 </script>
 

From 2bbc12ae509c02b914f0dec39b16cfe705de4e0c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:19:39 +0500
Subject: [PATCH 025/212] refactor: shorter type name

---
 src/components/compounds/Dropdown/Dropdown.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 649f149..3adc84c 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -59,14 +59,12 @@ const show = computed(() => {
 const displayActive = computed(() => state.isActive || props.inline);
 
 // provide item selection for children
-export type DropdownItemSelection = {
+export type DDSelection = {
   value: typeof props.modelValue;
   selectItem: typeof selectItem;
 };
 
-export const DropdownSymbol = Symbol(
-  "Dropdown",
-) as InjectionKey<DropdownItemSelection>;
+export const DropdownSymbol = Symbol("Dropdown") as InjectionKey<DDSelection>;
 
 provide(DropdownSymbol, { selectItem, value: props.modelValue });
 </script>

From 07ca103d2ae0175b3da9257b469f9b703ac815bc Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:20:03 +0500
Subject: [PATCH 026/212] refactor: comment

---
 src/components/compounds/Dropdown/Dropdown.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 3adc84c..5dccf1d 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -58,7 +58,7 @@ const show = computed(() => {
 
 const displayActive = computed(() => state.isActive || props.inline);
 
-// provide item selection for children
+// provide item dropdown selection for children
 export type DDSelection = {
   value: typeof props.modelValue;
   selectItem: typeof selectItem;

From 0aaeb745a0e71d7acb9f152aafcb6c97003a8156 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:20:21 +0500
Subject: [PATCH 027/212] refactor: typed inject

---
 src/components/compounds/Dropdown/DropdownItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Dropdown/DropdownItem.vue b/src/components/compounds/Dropdown/DropdownItem.vue
index e5d99bc..4e90b1f 100644
--- a/src/components/compounds/Dropdown/DropdownItem.vue
+++ b/src/components/compounds/Dropdown/DropdownItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { DropdownSymbol } from "./Dropdown.vue";
+import { type DDSelection, DropdownSymbol } from "./Dropdown.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -45,7 +45,7 @@ const dropdownLink = computed(() => {
   return !props.custom && !props.hasLink;
 });
 
-const { selectItem: reportParent } = inject(DropdownSymbol);
+const { selectItem: reportParent } = inject(DropdownSymbol) as DDSelection;
 
 const selectItem = () => {
   if (!isClickable.value) return;

From dbb1e56bd4c72d929135a88a0910ebf93c36dd32 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:30:17 +0500
Subject: [PATCH 028/212] refactor: change value type to any

---
 src/components/compounds/Dropdown/Dropdown.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 5dccf1d..71764e4 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -60,7 +60,8 @@ const displayActive = computed(() => state.isActive || props.inline);
 
 // provide item dropdown selection for children
 export type DDSelection = {
-  value: typeof props.modelValue;
+  // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
+  value: any;
   selectItem: typeof selectItem;
 };
 

From 51b45d61796d3f2ade5af5e6bd7a1be10be17931 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:31:18 +0500
Subject: [PATCH 029/212] refactor: use defineModel instead of props.modelValue

---
 src/components/compounds/Dropdown/Dropdown.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 71764e4..0122900 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import { computed, provide, reactive } from "vue";
+import { computed, provide, reactive, readonly } from "vue";
 import type { InjectionKey } from "vue";
 
 // todo close on click outside
 
 const props = withDefaults(
   defineProps<{
-    // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
-    modelValue?: any;
     disabled?: boolean;
     hoverable?: boolean;
     inline?: boolean;
@@ -24,10 +22,9 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(["update:modelValue"]);
+const sel = defineModel();
 
 const state = reactive({
-  selected: props.modelValue,
   style: {},
   isActive: false,
   isHoverable: props.hoverable,
@@ -46,7 +43,7 @@ const closeMenu = () => {
 
 // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
 const selectItem = (newValue: any) => {
-  emit("update:modelValue", newValue);
+  sel.value = newValue;
   closeMenu();
 };
 
@@ -67,7 +64,7 @@ export type DDSelection = {
 
 export const DropdownSymbol = Symbol("Dropdown") as InjectionKey<DDSelection>;
 
-provide(DropdownSymbol, { selectItem, value: props.modelValue });
+provide(DropdownSymbol, { selectItem, value: readonly(sel) });
 </script>
 
 <template>

From c4dde51e33e44805086a9677e714d79f502f8247 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:32:02 +0500
Subject: [PATCH 030/212] refactor: rename

---
 src/components/compounds/Dropdown/Dropdown.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 0122900..da30cc1 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -22,7 +22,7 @@ const props = withDefaults(
   },
 );
 
-const sel = defineModel();
+const selected = defineModel();
 
 const state = reactive({
   style: {},
@@ -43,7 +43,7 @@ const closeMenu = () => {
 
 // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
 const selectItem = (newValue: any) => {
-  sel.value = newValue;
+  selected.value = newValue;
   closeMenu();
 };
 
@@ -64,7 +64,7 @@ export type DDSelection = {
 
 export const DropdownSymbol = Symbol("Dropdown") as InjectionKey<DDSelection>;
 
-provide(DropdownSymbol, { selectItem, value: readonly(sel) });
+provide(DropdownSymbol, { selectItem, value: readonly(selected) });
 </script>
 
 <template>

From 6e51fcac9c7a4f0a4160c3948688b1ccc291dae1 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:46:47 +0500
Subject: [PATCH 031/212] refactor: move DropdownSymbol to a separate file

---
 src/components/compounds/Dropdown/dropdown-symbol.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/components/compounds/Dropdown/dropdown-symbol.ts

diff --git a/src/components/compounds/Dropdown/dropdown-symbol.ts b/src/components/compounds/Dropdown/dropdown-symbol.ts
new file mode 100644
index 0000000..7e88014
--- /dev/null
+++ b/src/components/compounds/Dropdown/dropdown-symbol.ts
@@ -0,0 +1,10 @@
+import type { InjectionKey } from "vue";
+
+export type DDSelection = {
+  // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
+  value: any;
+  // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
+  selectItem: (newValue: any) => void;
+};
+
+export const DropdownSymbol = Symbol("Dropdown") as InjectionKey<DDSelection>;

From ab5f1b17d2ecf8fcc2dbee788844934a417d51e6 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 01:51:14 +0500
Subject: [PATCH 032/212] refactor: move DropdownSymbol to a separate file

---
 src/components/compounds/Dropdown/Dropdown.vue     | 12 ++----------
 src/components/compounds/Dropdown/DropdownItem.vue |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index da30cc1..8743478 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, provide, reactive, readonly } from "vue";
-import type { InjectionKey } from "vue";
+import { type DDSelection, DropdownSymbol } from "./dropdown-symbol";
 
 // todo close on click outside
 
@@ -56,15 +56,7 @@ const show = computed(() => {
 const displayActive = computed(() => state.isActive || props.inline);
 
 // provide item dropdown selection for children
-export type DDSelection = {
-  // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
-  value: any;
-  selectItem: typeof selectItem;
-};
-
-export const DropdownSymbol = Symbol("Dropdown") as InjectionKey<DDSelection>;
-
-provide(DropdownSymbol, { selectItem, value: readonly(selected) });
+provide<DDSelection>(DropdownSymbol, { selectItem, value: readonly(selected) });
 </script>
 
 <template>
diff --git a/src/components/compounds/Dropdown/DropdownItem.vue b/src/components/compounds/Dropdown/DropdownItem.vue
index 4e90b1f..02a05ce 100644
--- a/src/components/compounds/Dropdown/DropdownItem.vue
+++ b/src/components/compounds/Dropdown/DropdownItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import { type DDSelection, DropdownSymbol } from "./Dropdown.vue";
+import { type DDSelection, DropdownSymbol } from "./dropdown-symbol";
 
 const props = withDefaults(
   defineProps<{

From 88738c86d2fcb29dcac15c3e841c73018637ded8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 02:09:28 +0500
Subject: [PATCH 033/212] chore: disable linting for tsconfig.json

---
 biome.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/biome.json b/biome.json
index 28a23de..7993dfe 100644
--- a/biome.json
+++ b/biome.json
@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist", "coverage"]
+    "ignore": ["dist", "coverage", "tsconfig.json"]
   },
   "formatter": {
     "enabled": true,

From 26f67b2627d97581cdf34ee148664a3307afbe37 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 03:47:54 +0500
Subject: [PATCH 034/212] chore: remove unnecessary import defineModel

---
 src/components/primitives/Autocomplete/Autocomplete.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/primitives/Autocomplete/Autocomplete.vue b/src/components/primitives/Autocomplete/Autocomplete.vue
index bdf0b15..b7a6d1f 100644
--- a/src/components/primitives/Autocomplete/Autocomplete.vue
+++ b/src/components/primitives/Autocomplete/Autocomplete.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-  defineModel,
-  onBeforeUnmount,
-  onMounted,
-  reactive,
-  useTemplateRef,
-} from "vue";
+import { onBeforeUnmount, onMounted, reactive, useTemplateRef } from "vue";
 
 import VField from "../Field/Field.vue";
 import VInput from "../Input/Input.vue";

From 6a99bd339e3738d6d18e9e81a304c2ea14c1cebf Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 04:51:20 +0500
Subject: [PATCH 035/212] feat: add unrefElement.ts

---
 src/utils/unrefElement.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/utils/unrefElement.ts

diff --git a/src/utils/unrefElement.ts b/src/utils/unrefElement.ts
new file mode 100644
index 0000000..4c00f32
--- /dev/null
+++ b/src/utils/unrefElement.ts
@@ -0,0 +1,29 @@
+import type { ComponentPublicInstance, MaybeRef, MaybeRefOrGetter } from "vue";
+import { toValue } from "vue";
+
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElementRef<T extends MaybeElement = MaybeElement> =
+  MaybeRef<T>;
+export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> =
+  MaybeRefOrGetter<T>;
+export type MaybeElement =
+  | HTMLElement
+  | SVGElement
+  | VueInstance
+  | undefined
+  | null;
+
+export type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
+  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined;
+
+/**
+ * Get the dom element of a ref of element or Vue component instance
+ *
+ * @param elRef
+ */
+export function unrefElement<T extends MaybeElement>(
+  elRef: MaybeComputedElementRef<T>,
+): UnRefElementReturn<T> {
+  const plain = toValue(elRef);
+  return (plain as VueInstance)?.$el ?? plain;
+}

From d66cbac7ef730331c0cdec946e65ac312b930811 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 04:52:36 +0500
Subject: [PATCH 036/212] feat: add onClickOutside.ts

---
 src/utils/onClickOutside.ts | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/utils/onClickOutside.ts

diff --git a/src/utils/onClickOutside.ts b/src/utils/onClickOutside.ts
new file mode 100644
index 0000000..16355ac
--- /dev/null
+++ b/src/utils/onClickOutside.ts
@@ -0,0 +1,33 @@
+import { onBeforeUnmount, onMounted } from "vue";
+import { type MaybeElementRef, unrefElement } from "./unrefElement";
+
+export type OnClickOutsideHandler = (event: PointerEvent) => void;
+
+export function onClickOutside(
+  target: MaybeElementRef,
+  handler: OnClickOutsideHandler,
+) {
+  const listener = (event: Event) => {
+    const el = unrefElement(target);
+
+    if (event.target == null) {
+      return;
+    }
+
+    if (!el || el === event.target || event.composedPath().includes(el)) {
+      return;
+    }
+
+    // clicked outside
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    handler(event as any);
+  };
+
+  onMounted(() => {
+    window.addEventListener("click", listener);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("click", listener);
+  });
+}

From b05e7822e8e63b6e6554b6bb82534ee17d85283c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 04:57:24 +0500
Subject: [PATCH 037/212] chore: passive

---
 src/utils/onClickOutside.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/onClickOutside.ts b/src/utils/onClickOutside.ts
index 16355ac..4830a81 100644
--- a/src/utils/onClickOutside.ts
+++ b/src/utils/onClickOutside.ts
@@ -24,7 +24,7 @@ export function onClickOutside(
   };
 
   onMounted(() => {
-    window.addEventListener("click", listener);
+    window.addEventListener("click", listener, { passive: true });
   });
 
   onBeforeUnmount(() => {

From ebdbd002f674318196ac1192dd6d7dca42917075 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:04:46 +0500
Subject: [PATCH 038/212] refactor: use onClickOutside

---
 .../primitives/Autocomplete/Autocomplete.vue  | 20 +++----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/components/primitives/Autocomplete/Autocomplete.vue b/src/components/primitives/Autocomplete/Autocomplete.vue
index b7a6d1f..b059044 100644
--- a/src/components/primitives/Autocomplete/Autocomplete.vue
+++ b/src/components/primitives/Autocomplete/Autocomplete.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, reactive, useTemplateRef } from "vue";
-
+import { onClickOutside } from "@/utils/onClickOutside";
+import { reactive, useTemplateRef } from "vue";
 import VField from "../Field/Field.vue";
 import VInput from "../Input/Input.vue";
 
@@ -69,21 +69,7 @@ const handleClickOutside = () => {
 
 const dropdownWrapper = useTemplateRef<HTMLElement>("dropdown-wrapper");
 
-const detectOutsideClick = (event: MouseEvent) => {
-  const wrapperEl = dropdownWrapper.value;
-  if (wrapperEl && !wrapperEl.contains(event.target as Node)) {
-    // Clicked outside!
-    handleClickOutside();
-  }
-};
-
-onMounted(() => {
-  document.addEventListener("click", detectOutsideClick);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("click", detectOutsideClick);
-});
+onClickOutside(dropdownWrapper, handleClickOutside);
 </script>
 
 <template>

From ae8f56fcba72199de84669016f90a0c453c8d347 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:08:55 +0500
Subject: [PATCH 039/212] feat: close dropdown on click outside

---
 src/components/compounds/Dropdown/Dropdown.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 8743478..9d9475c 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { computed, provide, reactive, readonly } from "vue";
+import { onClickOutside } from "@/utils/onClickOutside";
+import { computed, provide, reactive, readonly, useTemplateRef } from "vue";
 import { type DDSelection, DropdownSymbol } from "./dropdown-symbol";
 
-// todo close on click outside
-
 const props = withDefaults(
   defineProps<{
     disabled?: boolean;
@@ -57,10 +56,16 @@ const displayActive = computed(() => state.isActive || props.inline);
 
 // provide item dropdown selection for children
 provide<DDSelection>(DropdownSymbol, { selectItem, value: readonly(selected) });
+
+// close dropdown on click outside
+const dropdownWrapper = useTemplateRef<HTMLElement>("dropdown-wrapper");
+onClickOutside(dropdownWrapper, () => {
+  state.isActive = false;
+});
 </script>
 
 <template>
-  <div class="dropdown" :class="[
+  <div ref="dropdown-wrapper" class="dropdown" :class="[
     position,
     {
       'is-disabled': disabled,

From f4a5edf5d731ec80cd24894f739991e2fd896c93 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:11:30 +0500
Subject: [PATCH 040/212] refactor: better code organization

---
 src/components/compounds/Dropdown/Dropdown.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 9d9475c..2ddc645 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -11,6 +11,7 @@ const props = withDefaults(
     position?: "is-left" | "is-up" | "is-down" | "is-right";
     mobileModal?: boolean;
     ariaRole?: "list" | "menu" | "dialog";
+    /** Close dropdown when content is clicked */
     closeOnClick?: boolean;
     /** Full width */
     expanded?: boolean;
@@ -34,12 +35,19 @@ const toggle = () => {
   state.isActive = !state.isActive;
 };
 
+// close dropdown on click inside
 const closeMenu = () => {
   if (props.closeOnClick) {
     state.isActive = false;
   }
 };
 
+// close dropdown on click outside
+const dropdownWrapper = useTemplateRef<HTMLElement>("dropdown-wrapper");
+onClickOutside(dropdownWrapper, () => {
+  state.isActive = false;
+});
+
 // biome-ignore lint/suspicious/noExplicitAny: allow any type according to docs
 const selectItem = (newValue: any) => {
   selected.value = newValue;
@@ -56,12 +64,6 @@ const displayActive = computed(() => state.isActive || props.inline);
 
 // provide item dropdown selection for children
 provide<DDSelection>(DropdownSymbol, { selectItem, value: readonly(selected) });
-
-// close dropdown on click outside
-const dropdownWrapper = useTemplateRef<HTMLElement>("dropdown-wrapper");
-onClickOutside(dropdownWrapper, () => {
-  state.isActive = false;
-});
 </script>
 
 <template>

From d57a5f540dde7a8a96781259540fe9545d4a386a Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:18:17 +0500
Subject: [PATCH 041/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Menu/MenuList.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/compounds/Menu/MenuList.vue b/src/components/compounds/Menu/MenuList.vue
index 5dfe6e8..b3d2057 100644
--- a/src/components/compounds/Menu/MenuList.vue
+++ b/src/components/compounds/Menu/MenuList.vue
@@ -1,11 +1,8 @@
-<script>
-export default {
-  name: "VMenuList",
-  props: {
-    label: String,
-    ariaRole: String,
-  },
-};
+<script setup lang="ts">
+defineProps<{
+  label?: string;
+  ariaRole?: string;
+}>();
 </script>
 
 <template>

From 159ce19939a33184395729c9c25cdcc70d6d5e02 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:18:43 +0500
Subject: [PATCH 042/212] refactor: type

---
 src/components/compounds/Menu/MenuList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Menu/MenuList.vue b/src/components/compounds/Menu/MenuList.vue
index b3d2057..5053f16 100644
--- a/src/components/compounds/Menu/MenuList.vue
+++ b/src/components/compounds/Menu/MenuList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineProps<{
   label?: string;
-  ariaRole?: string;
+  ariaRole?: "menu";
 }>();
 </script>
 

From 5f7f7e4396bc5126871594c8bec7fccb4d467185 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:23:42 +0500
Subject: [PATCH 043/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Menu/MenuItem.vue | 71 +++++++++++-----------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index d621453..e5be75c 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -1,47 +1,48 @@
-<script>
+<script setup lang="ts">
 import { ref, watchEffect } from "vue";
 
-export default {
-  name: "VMenuItem",
+defineOptions({
   inheritAttrs: false,
-  props: {
-    label: String,
-    active: Boolean,
-    expanded: Boolean,
-    disabled: Boolean,
-    icon: String,
-    tag: {
-      type: String,
-      default: "a",
-    },
-    ariaRole: String,
+});
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    active?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+    icon?: string;
+    tag?: string;
+    ariaRole?: string;
+  }>(),
+  {
+    tag: "a",
+    ariaRole: "menuitem",
   },
-  emits: ["update:expanded", "update:active"],
-  setup(props, { emit }) {
-    const newActive = ref(props.active);
-    const newExpanded = ref(props.expanded);
-    const content = ref(null);
+);
 
-    watchEffect(() => {
-      newActive.value = props.active;
-    });
+const emit = defineEmits(["update:expanded", "update:active"]);
 
-    watchEffect(() => {
-      newExpanded.value = props.expanded;
-    });
+const newActive = ref(props.active);
+const newExpanded = ref(props.expanded);
+const content = ref(null);
 
-    const onClick = () => {
-      // TODO Disable previous active item
-      if (props.disabled) return;
+watchEffect(() => {
+  newActive.value = props.active;
+});
 
-      newExpanded.value = !newExpanded.value;
-      emit("update:expanded", newExpanded.value);
-      emit("update:active", newActive.value);
-      // newActive.value = true
-    };
+watchEffect(() => {
+  newExpanded.value = props.expanded;
+});
 
-    return { newActive, newExpanded, onClick, content };
-  },
+const onClick = () => {
+  // TODO Disable previous active item
+  if (props.disabled) return;
+
+  newExpanded.value = !newExpanded.value;
+  emit("update:expanded", newExpanded.value);
+  emit("update:active", newActive.value);
+  // newActive.value = true
 };
 </script>
 

From cb1568375b296d616c9d8828f4706c7a651c81a9 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:32:20 +0500
Subject: [PATCH 044/212] refactor: use defineModel for active model

---
 src/components/compounds/Menu/MenuItem.vue | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index e5be75c..8517565 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -8,7 +8,6 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     label?: string;
-    active?: boolean;
     expanded?: boolean;
     disabled?: boolean;
     icon?: string;
@@ -21,27 +20,23 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(["update:expanded", "update:active"]);
+const emit = defineEmits(["update:expanded"]);
 
-const newActive = ref(props.active);
+const newActive = defineModel<boolean>("active");
 const newExpanded = ref(props.expanded);
 const content = ref(null);
 
-watchEffect(() => {
-  newActive.value = props.active;
-});
-
 watchEffect(() => {
   newExpanded.value = props.expanded;
 });
 
-const onClick = () => {
+const onClick = (e: Event) => {
   // TODO Disable previous active item
   if (props.disabled) return;
 
   newExpanded.value = !newExpanded.value;
   emit("update:expanded", newExpanded.value);
-  emit("update:active", newActive.value);
+
   // newActive.value = true
 };
 </script>

From d62f299c2defaf45e4c0d04012db52e1eb9636e0 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:34:07 +0500
Subject: [PATCH 045/212] refactor: use defineModel for active model

---
 src/components/compounds/Menu/MenuItem.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index 8517565..e52b65f 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect } from "vue";
+import { ref } from "vue";
 
 defineOptions({
   inheritAttrs: false,
@@ -8,7 +8,6 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     label?: string;
-    expanded?: boolean;
     disabled?: boolean;
     icon?: string;
     tag?: string;
@@ -20,23 +19,15 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(["update:expanded"]);
-
 const newActive = defineModel<boolean>("active");
-const newExpanded = ref(props.expanded);
+const newExpanded = defineModel<boolean>("expanded");
 const content = ref(null);
 
-watchEffect(() => {
-  newExpanded.value = props.expanded;
-});
-
 const onClick = (e: Event) => {
   // TODO Disable previous active item
   if (props.disabled) return;
 
   newExpanded.value = !newExpanded.value;
-  emit("update:expanded", newExpanded.value);
-
   // newActive.value = true
 };
 </script>

From 54ae276b04538e1bb05f7bddea6a68aeb3665cfc Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:35:05 +0500
Subject: [PATCH 046/212] refactor: single line

---
 src/components/compounds/Menu/MenuItem.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index e52b65f..84425f7 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -44,8 +44,7 @@ const onClick = (e: Event) => {
       }"
       @click="onClick($event)">
       <span v-if="icon" class="pr-2">{{ icon }} </span>
-      <span v-if="label">
-        {{ label }}</span>
+      <span v-if="label">{{ label }}</span>
       <slot
         v-else
         name="label"

From b6bf7a296118b4a97646a7f4e72f87878988bfa9 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:36:55 +0500
Subject: [PATCH 047/212] refactor: rename newActive -> active

---
 src/components/compounds/Menu/MenuItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index 84425f7..c52b9ef 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -19,7 +19,7 @@ const props = withDefaults(
   },
 );
 
-const newActive = defineModel<boolean>("active");
+const active = defineModel<boolean>("active");
 const newExpanded = defineModel<boolean>("expanded");
 const content = ref(null);
 
@@ -28,7 +28,7 @@ const onClick = (e: Event) => {
   if (props.disabled) return;
 
   newExpanded.value = !newExpanded.value;
-  // newActive.value = true
+  // active.value = true
 };
 </script>
 
@@ -39,7 +39,7 @@ const onClick = (e: Event) => {
       v-bind="$attrs"
       :class="{
         'is-flex': icon,
-        'is-active': newActive,
+        'is-active': active,
         'is-disabled': disabled
       }"
       @click="onClick($event)">
@@ -49,7 +49,7 @@ const onClick = (e: Event) => {
         v-else
         name="label"
         :expanded="newExpanded"
-        :active="newActive" />
+        :active="active" />
     </component>
     <template v-if="$slots.default">
       <!-- <transition name="slide"> -->

From d3920962f2ee18175d0d014a0d9c8b0fbcb5a210 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:37:29 +0500
Subject: [PATCH 048/212] refactor: rename newExpanded -> expanded

---
 src/components/compounds/Menu/MenuItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index c52b9ef..d9f0f41 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -20,14 +20,14 @@ const props = withDefaults(
 );
 
 const active = defineModel<boolean>("active");
-const newExpanded = defineModel<boolean>("expanded");
+const expanded = defineModel<boolean>("expanded");
 const content = ref(null);
 
 const onClick = (e: Event) => {
   // TODO Disable previous active item
   if (props.disabled) return;
 
-  newExpanded.value = !newExpanded.value;
+  expanded.value = !expanded.value;
   // active.value = true
 };
 </script>
@@ -48,12 +48,12 @@ const onClick = (e: Event) => {
       <slot
         v-else
         name="label"
-        :expanded="newExpanded"
+        :expanded="expanded"
         :active="active" />
     </component>
     <template v-if="$slots.default">
       <!-- <transition name="slide"> -->
-      <ul class="ul" v-show="newExpanded">
+      <ul class="ul" v-show="expanded">
         <slot />
       </ul>
       <!-- </transition> -->

From 69ea381df7c7c4d3f234df2575f3536172cde5e5 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 05:37:56 +0500
Subject: [PATCH 049/212] refactor: delete unused event

---
 src/components/compounds/Menu/MenuItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index d9f0f41..aba811a 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -23,7 +23,7 @@ const active = defineModel<boolean>("active");
 const expanded = defineModel<boolean>("expanded");
 const content = ref(null);
 
-const onClick = (e: Event) => {
+const onClick = () => {
   // TODO Disable previous active item
   if (props.disabled) return;
 
@@ -42,7 +42,7 @@ const onClick = (e: Event) => {
         'is-active': active,
         'is-disabled': disabled
       }"
-      @click="onClick($event)">
+      @click="onClick">
       <span v-if="icon" class="pr-2">{{ icon }} </span>
       <span v-if="label">{{ label }}</span>
       <slot

From d19995cfca8a6e8dc29b7224b30d1ecd510bbbfb Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:06:19 +0500
Subject: [PATCH 050/212] fix: do not emit 'update:active' with same value

---
 src/components/compounds/Menu/__tests__/Menu.spec.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Menu/__tests__/Menu.spec.ts b/src/components/compounds/Menu/__tests__/Menu.spec.ts
index 69e0119..e3b2b56 100644
--- a/src/components/compounds/Menu/__tests__/Menu.spec.ts
+++ b/src/components/compounds/Menu/__tests__/Menu.spec.ts
@@ -98,13 +98,22 @@ describe("MenuItem", () => {
   it("emits events on click when not disabled", async () => {
     const wrapper = mount(MenuItem, {
       props: {
-        active: true,
+        active: false,
         expanded: false,
       },
     });
+
+    // first click
     await wrapper.find("a").trigger("click");
     expect(wrapper.emitted("update:expanded")?.[0]).toEqual([true]);
+    /** emitted ('update:active', true) because previous value was false */
     expect(wrapper.emitted("update:active")?.[0]).toEqual([true]);
+
+    // second click
+    await wrapper.find("a").trigger("click");
+    expect(wrapper.emitted("update:expanded")?.[1]).toEqual([false]);
+    /** did not emit ('update:active', true) because previous value is already true */
+    expect(wrapper.emitted("update:active")?.[1]).toBeUndefined();
   });
 
   it("does not emit events when disabled", async () => {

From 41dd3ef9432c15f474ed598d8220d327146b6c1c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:13:17 +0500
Subject: [PATCH 051/212] fix: test

---
 src/components/compounds/Menu/MenuItem.vue           | 2 +-
 src/components/compounds/Menu/__tests__/Menu.spec.ts | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index aba811a..f66c58e 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -28,7 +28,7 @@ const onClick = () => {
   if (props.disabled) return;
 
   expanded.value = !expanded.value;
-  // active.value = true
+  active.value = true;
 };
 </script>
 
diff --git a/src/components/compounds/Menu/__tests__/Menu.spec.ts b/src/components/compounds/Menu/__tests__/Menu.spec.ts
index e3b2b56..98b34d4 100644
--- a/src/components/compounds/Menu/__tests__/Menu.spec.ts
+++ b/src/components/compounds/Menu/__tests__/Menu.spec.ts
@@ -114,6 +114,12 @@ describe("MenuItem", () => {
     expect(wrapper.emitted("update:expanded")?.[1]).toEqual([false]);
     /** did not emit ('update:active', true) because previous value is already true */
     expect(wrapper.emitted("update:active")?.[1]).toBeUndefined();
+
+    // all emits
+    expect(Object.entries(wrapper.emitted())).toHaveLength(3);
+    expect(wrapper.emitted("update:expanded")).toHaveLength(2);
+    expect(wrapper.emitted("update:active")).toHaveLength(1);
+    expect(wrapper.emitted("click")).toHaveLength(2);
   });
 
   it("does not emit events when disabled", async () => {

From 32d8fb69b051d38d5155747d5f890d3c0cd7b7a8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:14:07 +0500
Subject: [PATCH 052/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Menu/Menu.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Menu/Menu.vue b/src/components/compounds/Menu/Menu.vue
index 02a3713..e5f14dd 100644
--- a/src/components/compounds/Menu/Menu.vue
+++ b/src/components/compounds/Menu/Menu.vue
@@ -1,7 +1,5 @@
-<script>
-export default {
-  name: "VMenu",
-};
+<script setup lang="ts">
+//
 </script>
 
 <template>

From 16c5026980e912676ec0261bc80720a56def8b01 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:20:17 +0500
Subject: [PATCH 053/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Navbar/Navbar.vue | 58 ++++++++++------------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/components/compounds/Navbar/Navbar.vue b/src/components/compounds/Navbar/Navbar.vue
index d59e51d..01b2e42 100644
--- a/src/components/compounds/Navbar/Navbar.vue
+++ b/src/components/compounds/Navbar/Navbar.vue
@@ -1,42 +1,38 @@
-<script>
+<script setup lang="ts">
 import { ref, watchEffect } from "vue";
 import NavbarBurger from "./NavbarBurger.vue";
 
-export default {
-  name: "VNavbar",
-  components: { NavbarBurger },
-  props: {
-    type: [String, Object],
-    transparent: Boolean,
-    fixedTop: Boolean,
-    fixedBottom: Boolean,
-    wrapperClass: String,
-    mobileBurger: {
-      type: Boolean,
-      default: true,
-    },
-    spaced: Boolean,
-    shadow: Boolean,
-    modelValue: Boolean,
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean; // todo defineModel
+    type?: string; // todo union
+    transparent?: boolean;
+    fixedTop?: boolean;
+    fixedBottom?: boolean;
+    wrapperClass?: string;
+    mobileBurger?: boolean;
+    spaced?: boolean;
+    shadow?: boolean;
+  }>(),
+  {
+    mobileBurger: true,
   },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const isActive = ref(props.modelValue);
+);
 
-    watchEffect(() => {
-      emit("update:modelValue", isActive.value);
-    });
+const emit = defineEmits(["update:modelValue"]);
 
-    watchEffect(() => {
-      isActive.value = props.modelValue;
-    });
+const isActive = ref(props.modelValue);
 
-    const toggleActive = () => {
-      isActive.value = !isActive.value;
-    };
+watchEffect(() => {
+  emit("update:modelValue", isActive.value);
+});
 
-    return { isActive, toggleActive };
-  },
+watchEffect(() => {
+  isActive.value = props.modelValue;
+});
+
+const toggleActive = () => {
+  isActive.value = !isActive.value;
 };
 </script>
 

From 1758764dd066e2c43664c12c660e915a5ad7bb04 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:23:14 +0500
Subject: [PATCH 054/212] refactor: use defineModel

---
 src/components/compounds/Navbar/Navbar.vue | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/compounds/Navbar/Navbar.vue b/src/components/compounds/Navbar/Navbar.vue
index 01b2e42..108c150 100644
--- a/src/components/compounds/Navbar/Navbar.vue
+++ b/src/components/compounds/Navbar/Navbar.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { ref, watchEffect } from "vue";
 import NavbarBurger from "./NavbarBurger.vue";
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
-    modelValue?: boolean; // todo defineModel
     type?: string; // todo union
     transparent?: boolean;
     fixedTop?: boolean;
@@ -19,17 +17,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(["update:modelValue"]);
-
-const isActive = ref(props.modelValue);
-
-watchEffect(() => {
-  emit("update:modelValue", isActive.value);
-});
-
-watchEffect(() => {
-  isActive.value = props.modelValue;
-});
+const isActive = defineModel<boolean>();
 
 const toggleActive = () => {
   isActive.value = !isActive.value;

From 4e0af5a7264f2241c03bb81d3de6ac59485f1478 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:25:56 +0500
Subject: [PATCH 055/212] refactor: use union

---
 src/components/compounds/Navbar/Navbar.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Navbar/Navbar.vue b/src/components/compounds/Navbar/Navbar.vue
index 108c150..e8ab747 100644
--- a/src/components/compounds/Navbar/Navbar.vue
+++ b/src/components/compounds/Navbar/Navbar.vue
@@ -3,7 +3,18 @@ import NavbarBurger from "./NavbarBurger.vue";
 
 withDefaults(
   defineProps<{
-    type?: string; // todo union
+    type?:
+      | "is-white"
+      | "is-light"
+      | "is-dark"
+      | "is-black"
+      | "is-text"
+      | "is-primary"
+      | "is-link"
+      | "is-info"
+      | "is-success"
+      | "is-warning"
+      | "is-danger";
     transparent?: boolean;
     fixedTop?: boolean;
     fixedBottom?: boolean;

From cd3b8706cfe3a37f43c1419c6c675ec7e7fe32b4 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:27:11 +0500
Subject: [PATCH 056/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Navbar/NavbarBurger.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/compounds/Navbar/NavbarBurger.vue b/src/components/compounds/Navbar/NavbarBurger.vue
index b40f86a..61eea3b 100644
--- a/src/components/compounds/Navbar/NavbarBurger.vue
+++ b/src/components/compounds/Navbar/NavbarBurger.vue
@@ -1,10 +1,5 @@
-<script>
-export default {
-  name: "NavbarBurger",
-  props: {
-    active: Boolean,
-  },
-};
+<script setup lang="ts">
+defineProps<{ active?: boolean }>();
 </script>
 
 <template>

From 5dc22aea1767b2330a360f230ae2d2bc32dad7ee Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:30:15 +0500
Subject: [PATCH 057/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Navbar/NavbarDropdown.vue       | 66 +++++++++----------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/components/compounds/Navbar/NavbarDropdown.vue b/src/components/compounds/Navbar/NavbarDropdown.vue
index 3c1fabc..a5df1ad 100644
--- a/src/components/compounds/Navbar/NavbarDropdown.vue
+++ b/src/components/compounds/Navbar/NavbarDropdown.vue
@@ -1,47 +1,43 @@
-<script>
+<script setup lang="ts">
 import { computed, reactive, watchEffect } from "vue";
 
-export default {
-  name: "VNavbarDropdown",
-  props: {
-    label: String,
-    hoverable: Boolean,
-    active: Boolean,
-    right: Boolean,
-    arrowless: Boolean,
-    boxed: Boolean,
-    closeOnClick: {
-      type: Boolean,
-      default: true,
-    },
-    collapsible: Boolean,
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    hoverable?: boolean;
+    active?: boolean;
+    right?: boolean;
+    arrowless?: boolean;
+    boxed?: boolean;
+    closeOnClick?: boolean;
+    collapsible?: boolean;
+  }>(),
+  {
+    closeOnClick: true,
   },
-  setup(props) {
-    const state = reactive({
-      newActive: props.active,
-    });
+);
 
-    watchEffect(() => {
-      state.newActive = props.active;
-    });
+const state = reactive({
+  newActive: props.active,
+});
 
-    const closeMenu = () => {
-      state.newActive = !props.closeOnClick;
-    };
+watchEffect(() => {
+  state.newActive = props.active;
+});
 
-    const toggleActive = () => {
-      state.newActive = !state.newActive;
-    };
+const closeMenu = () => {
+  state.newActive = !props.closeOnClick;
+};
 
-    const show = computed(() => {
-      return !props.collapsible || (props.collapsible && state.newActive);
-    });
+const toggleActive = () => {
+  state.newActive = !state.newActive;
+};
 
-    const isActive = computed(() => state.newActive);
+const show = computed(() => {
+  return !props.collapsible || (props.collapsible && state.newActive);
+});
 
-    return { closeMenu, toggleActive, show, isActive };
-  },
-};
+const isActive = computed(() => state.newActive);
 </script>
 
 <template>

From d9a3013fe75794cda71d6c20153c223870964327 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:36:04 +0500
Subject: [PATCH 058/212] refactor: unwrap reactive

---
 .../compounds/Navbar/NavbarDropdown.vue        | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/compounds/Navbar/NavbarDropdown.vue b/src/components/compounds/Navbar/NavbarDropdown.vue
index a5df1ad..dfbf66c 100644
--- a/src/components/compounds/Navbar/NavbarDropdown.vue
+++ b/src/components/compounds/Navbar/NavbarDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, watchEffect } from "vue";
+import { computed, ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -17,27 +17,21 @@ const props = withDefaults(
   },
 );
 
-const state = reactive({
-  newActive: props.active,
-});
-
-watchEffect(() => {
-  state.newActive = props.active;
-});
+const newActive = ref(props.active);
 
 const closeMenu = () => {
-  state.newActive = !props.closeOnClick;
+  newActive.value = !props.closeOnClick;
 };
 
 const toggleActive = () => {
-  state.newActive = !state.newActive;
+  newActive.value = !newActive.value;
 };
 
 const show = computed(() => {
-  return !props.collapsible || (props.collapsible && state.newActive);
+  return !props.collapsible || (props.collapsible && newActive.value);
 });
 
-const isActive = computed(() => state.newActive);
+const isActive = computed(() => newActive.value);
 </script>
 
 <template>

From 6b97c9f8c474b9a3953eacbf508f7a508012ed14 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:39:56 +0500
Subject: [PATCH 059/212] refactor: simplify logic

---
 src/components/compounds/Navbar/NavbarDropdown.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/compounds/Navbar/NavbarDropdown.vue b/src/components/compounds/Navbar/NavbarDropdown.vue
index dfbf66c..c74a9de 100644
--- a/src/components/compounds/Navbar/NavbarDropdown.vue
+++ b/src/components/compounds/Navbar/NavbarDropdown.vue
@@ -17,21 +17,19 @@ const props = withDefaults(
   },
 );
 
-const newActive = ref(props.active);
+const isActive = ref(props.active);
 
 const closeMenu = () => {
-  newActive.value = !props.closeOnClick;
+  isActive.value = !props.closeOnClick;
 };
 
 const toggleActive = () => {
-  newActive.value = !newActive.value;
+  isActive.value = !isActive.value;
 };
 
 const show = computed(() => {
-  return !props.collapsible || (props.collapsible && newActive.value);
+  return !props.collapsible || (props.collapsible && isActive.value);
 });
-
-const isActive = computed(() => newActive.value);
 </script>
 
 <template>

From bafb128c052b9e4d9902d130ad85c154ce9c7a7b Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:43:32 +0500
Subject: [PATCH 060/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Navbar/NavbarItem.vue           | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/compounds/Navbar/NavbarItem.vue b/src/components/compounds/Navbar/NavbarItem.vue
index 2bb3ed9..76ae33b 100644
--- a/src/components/compounds/Navbar/NavbarItem.vue
+++ b/src/components/compounds/Navbar/NavbarItem.vue
@@ -1,15 +1,17 @@
-<script>
-export default {
-  name: "VNavbarItem",
+<script setup lang="ts">
+defineOptions({
   inheritAttrs: false,
-  props: {
-    tag: {
-      type: String,
-      default: "a",
-    },
-    active: Boolean,
+});
+
+withDefaults(
+  defineProps<{
+    tag?: string;
+    active?: boolean;
+  }>(),
+  {
+    tag: "a",
   },
-};
+);
 </script>
 
 <template>

From 58169fc0a7ed9de66dbf5520111d75eec7c31df8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:51:23 +0500
Subject: [PATCH 061/212] refactor: use $slots

---
 src/components/compounds/Pagination/Pagination.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 4681d7d..a230280 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -161,7 +161,7 @@ export default {
 			'is-rounded': rounded,
 		},
 	]">
-		<slot v-if="slots.previous" name="previous" :page="getPage(current - 1, {
+		<slot v-if="$slots.previous" name="previous" :page="getPage(current - 1, {
 			disabled: !hasPrev,
 			class: 'pagination-previous',
 			'aria-label': ariaPreviousLabel,
@@ -173,7 +173,7 @@ export default {
 			:aria-label="ariaPreviousLabel">
 			&laquo;
 		</pagination-item>
-		<slot v-if="slots.next" name="next" :page="getPage(current + 1, {
+		<slot v-if="$slots.next" name="next" :page="getPage(current + 1, {
 			disabled: !hasNext,
 			class: 'pagination-next',
 			'aria-label': ariaNextLabel,
@@ -194,7 +194,7 @@ export default {
 		</small>
 		<ul class="pagination-list" v-else>
 			<li v-if="hasFirst">
-				<slot v-if="slots.default" :page="getPage(1)" />
+				<slot v-if="$slots.default" :page="getPage(1)" />
 				<pagination-item v-else :page="getPage(1)" />
 			</li>
 			<li v-if="hasFirstEllipsis">
@@ -202,7 +202,7 @@ export default {
 			</li>
 
 			<li v-for="page in pagesInRange" :key="page.number">
-				<slot v-if="slots.default" :page="page" />
+				<slot v-if="$slots.default" :page="page" />
 				<pagination-item v-else :page="page" />
 			</li>
 
@@ -210,7 +210,7 @@ export default {
 				<span class="pagination-ellipsis">&hellip;</span>
 			</li>
 			<li v-if="hasLast">
-				<slot v-if="slots.default" :page="getPage(pageCount)" />
+				<slot v-if="$slots.default" :page="getPage(pageCount)" />
 				<pagination-item v-else :page="getPage(pageCount)" />
 			</li>
 		</ul>

From 9e53dd8aa0de4d5279e59c1ca3e62678182e99cb Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:51:49 +0500
Subject: [PATCH 062/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Pagination/Pagination.vue       | 270 ++++++++----------
 1 file changed, 123 insertions(+), 147 deletions(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index a230280..a852c46 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -1,154 +1,130 @@
-<script>
+<script setup lang="ts">
 import { computed, nextTick, watchEffect } from "vue";
 import PaginationItem from "./PaginationItem.vue";
 
-export default {
-  name: "VPagination",
-  components: {
-    PaginationItem,
+withDefaults(
+  defineProps<{
+    total?: number | string;
+    perPage?: number | string;
+    current?: number | string;
+    rangeBefore?: number | string;
+    rangeAfter?: number | string;
+    size?: string;
+    simple?: boolean;
+    rounded?: boolean;
+    order?: string;
+    ariaNextLabel?: string;
+    ariaPreviousLabel?: string;
+    ariaPageLabel?: string;
+    ariaCurrentLabel?: string;
+  }>(),
+  {
+    perPage: 20,
+    current: 1,
+    rangeBefore: 1,
+    rangeAfter: 1,
   },
-  props: {
-    total: [Number, String],
-    perPage: {
-      type: [Number, String],
-      default: 20,
-    },
-    current: {
-      type: [Number, String],
-      default: 1,
-    },
-    rangeBefore: {
-      type: [Number, String],
-      default: 1,
-    },
-    rangeAfter: {
-      type: [Number, String],
-      default: 1,
-    },
-    size: String,
-    simple: Boolean,
-    rounded: Boolean,
-    order: String,
-    ariaNextLabel: String,
-    ariaPreviousLabel: String,
-    ariaPageLabel: String,
-    ariaCurrentLabel: String,
-  },
-  emits: ["update:current", "change"],
-
-  setup(props, { emit, slots }) {
-    const beforeCurrent = computed(() => {
-      return Number.parseInt(props.rangeBefore);
-    });
-    const afterCurrent = computed(() => {
-      return Number.parseInt(props.rangeAfter);
-    });
-
-    const pageCount = computed(() => {
-      return Math.ceil(props.total / props.perPage);
-    });
-
-    const firstItem = computed(() => {
-      const _firstItem = props.current * props.perPage - props.perPage + 1;
-      return _firstItem >= 0 ? _firstItem : 0;
-    });
-
-    const hasPrev = computed(() => {
-      return props.current > 1;
-    });
-
-    const hasFirst = computed(() => {
-      return props.current >= 2 + beforeCurrent.value;
-    });
-
-    const hasFirstEllipsis = computed(() => {
-      return props.current >= beforeCurrent.value + 4;
-    });
-
-    const hasLast = computed(() => {
-      return props.current <= pageCount.value - (1 + afterCurrent.value);
-    });
-
-    const hasLastEllipsis = computed(() => {
-      return props.current < pageCount.value - (2 + afterCurrent.value);
-    });
-
-    const hasNext = computed(() => {
-      return props.current < pageCount.value;
-    });
-
-    const pagesInRange = computed(() => {
-      if (props.simple) return null;
-      let left = Math.max(1, props.current - beforeCurrent.value);
-      if (left - 1 === 2) {
-        left--;
-      }
-
-      let right = Math.min(props.current + afterCurrent.value, pageCount.value);
-      if (pageCount.value - right === 2) {
-        right++;
-      }
-      const pages = [];
-
-      for (let i = left; i <= right; i++) {
-        pages.push(getPage(i));
-      }
-
-      return pages;
-    });
-
-    watchEffect(() => {
-      if (props.current > pageCount.value) last();
-    });
-
-    function changePage(num, e) {
-      if (props.current === num || num < 1 || num > pageCount.value) return;
-      emit("update:current", num);
-      emit("change", num);
-      if (e?.target) {
-        nextTick(() => e.target.focus());
-      }
-    }
-
-    function last(e) {
-      changePage(pageCount.value, e);
-    }
-    function getPage(num, options = {}) {
-      return {
-        number: num,
-        isCurrent: props.current === num,
-        click: (e) => changePage(num, e),
-        disabled: options.disabled || false,
-        class: options.class || "",
-        "aria-label":
-          options["aria-label"] || getAriaPageLabel(num, props.current === num),
-      };
-    }
-
-    function getAriaPageLabel(pageNumber, isCurrent) {
-      if (props.ariaPageLabel && (!isCurrent || !props.ariaCurrentLabel)) {
-        return `${props.ariaPageLabel} ${pageNumber}.`;
-      }
-      if (props.ariaPageLabel && isCurrent && props.ariaCurrentLabel) {
-        return `${props.ariaCurrentLabel}, ${props.ariaPageLabel} ${pageNumber}.`;
-      }
-      return null;
-    }
-    return {
-      pageCount,
-      firstItem,
-      hasPrev,
-      hasFirst,
-      hasFirstEllipsis,
-      hasLast,
-      hasLastEllipsis,
-      hasNext,
-      pagesInRange,
-      getPage,
-      slots,
-    };
-  },
-};
+);
+
+const emit = defineEmits(["update:current", "change"]);
+
+const beforeCurrent = computed(() => {
+  return Number.parseInt(props.rangeBefore);
+});
+const afterCurrent = computed(() => {
+  return Number.parseInt(props.rangeAfter);
+});
+
+const pageCount = computed(() => {
+  return Math.ceil(props.total / props.perPage);
+});
+
+const firstItem = computed(() => {
+  const _firstItem = props.current * props.perPage - props.perPage + 1;
+  return _firstItem >= 0 ? _firstItem : 0;
+});
+
+const hasPrev = computed(() => {
+  return props.current > 1;
+});
+
+const hasFirst = computed(() => {
+  return props.current >= 2 + beforeCurrent.value;
+});
+
+const hasFirstEllipsis = computed(() => {
+  return props.current >= beforeCurrent.value + 4;
+});
+
+const hasLast = computed(() => {
+  return props.current <= pageCount.value - (1 + afterCurrent.value);
+});
+
+const hasLastEllipsis = computed(() => {
+  return props.current < pageCount.value - (2 + afterCurrent.value);
+});
+
+const hasNext = computed(() => {
+  return props.current < pageCount.value;
+});
+
+const pagesInRange = computed(() => {
+  if (props.simple) return null;
+  let left = Math.max(1, props.current - beforeCurrent.value);
+  if (left - 1 === 2) {
+    left--;
+  }
+
+  let right = Math.min(props.current + afterCurrent.value, pageCount.value);
+  if (pageCount.value - right === 2) {
+    right++;
+  }
+  const pages = [];
+
+  for (let i = left; i <= right; i++) {
+    pages.push(getPage(i));
+  }
+
+  return pages;
+});
+
+watchEffect(() => {
+  if (props.current > pageCount.value) last();
+});
+
+function changePage(num, e) {
+  if (props.current === num || num < 1 || num > pageCount.value) return;
+  emit("update:current", num);
+  emit("change", num);
+  if (e?.target) {
+    nextTick(() => e.target.focus());
+  }
+}
+
+function last(e) {
+  changePage(pageCount.value, e);
+}
+function getPage(num, options = {}) {
+  return {
+    number: num,
+    isCurrent: props.current === num,
+    click: (e) => changePage(num, e),
+    disabled: options.disabled || false,
+    class: options.class || "",
+    "aria-label":
+      options["aria-label"] || getAriaPageLabel(num, props.current === num),
+  };
+}
+
+function getAriaPageLabel(pageNumber, isCurrent) {
+  if (props.ariaPageLabel && (!isCurrent || !props.ariaCurrentLabel)) {
+    return `${props.ariaPageLabel} ${pageNumber}.`;
+  }
+  if (props.ariaPageLabel && isCurrent && props.ariaCurrentLabel) {
+    return `${props.ariaCurrentLabel}, ${props.ariaPageLabel} ${pageNumber}.`;
+  }
+  return null;
+}
 </script>
 
 <template>

From 6d9e4ec4d24bb5071c8ac60bd9e7fa2c61415532 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:52:10 +0500
Subject: [PATCH 063/212] chore: remove eslint-disable

---
 src/components/compounds/Pagination/Pagination.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index a852c46..0083b03 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -128,7 +128,6 @@ function getAriaPageLabel(pageNumber, isCurrent) {
 </script>
 
 <template>
-	<!-- eslint-disable @pathscale/vue3/v-directive  -->
 	<nav class="pagination" :class="[
 		order,
 		size,

From 6c93cdb39e5e6d5d5bdcb84bfefd161b3b3849c2 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 06:55:16 +0500
Subject: [PATCH 064/212] docs: add todo

---
 src/components/compounds/Pagination/Pagination.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 0083b03..270592c 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, watchEffect } from "vue";
 import PaginationItem from "./PaginationItem.vue";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     total?: number | string;
     perPage?: number | string;
@@ -20,7 +20,7 @@ withDefaults(
   }>(),
   {
     perPage: 20,
-    current: 1,
+    current: 1, // TODO: update documentation to mention the default value
     rangeBefore: 1,
     rangeAfter: 1,
   },

From 12021b01d2742f6b0954c33b634735fd54b3d9af Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:02:31 +0500
Subject: [PATCH 065/212] feat: add intOrParseInt

---
 src/utils/functions.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index a85a1b9..66ca916 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -30,3 +30,10 @@ export function formatToFixed(
   }
   return fixed;
 }
+
+export const intOrParseInt = (num: number | string): number => {
+  if (Number.isInteger(num)) {
+    return num as number;
+  }
+  return Number.parseInt(num as string);
+};

From bbeebf2ed23db25803985cd8c065f8c0283e9dcc Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:03:42 +0500
Subject: [PATCH 066/212] refactor: use intOrParseInt

---
 src/components/compounds/Pagination/Pagination.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 270592c..2c40b6d 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { intOrParseInt } from "@/utils/functions";
 import { computed, nextTick, watchEffect } from "vue";
 import PaginationItem from "./PaginationItem.vue";
 
@@ -29,10 +30,10 @@ const props = withDefaults(
 const emit = defineEmits(["update:current", "change"]);
 
 const beforeCurrent = computed(() => {
-  return Number.parseInt(props.rangeBefore);
+  return intOrParseInt(props.rangeBefore);
 });
 const afterCurrent = computed(() => {
-  return Number.parseInt(props.rangeAfter);
+  return intOrParseInt(props.rangeAfter);
 });
 
 const pageCount = computed(() => {

From c70b715ff3b494cbb7449ccbd5d9031d7a25d4af Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:05:48 +0500
Subject: [PATCH 067/212] refactor: options type

---
 src/components/compounds/Pagination/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 2c40b6d..0b267db 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -105,7 +105,7 @@ function changePage(num, e) {
 function last(e) {
   changePage(pageCount.value, e);
 }
-function getPage(num, options = {}) {
+function getPage(num, options: { disabled?: boolean; class?: string } = {}) {
   return {
     number: num,
     isCurrent: props.current === num,

From bfa01f7c8af4fcb428ebe153a0bf100749b6865b Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:06:00 +0500
Subject: [PATCH 068/212] refactor: options type

---
 src/components/compounds/Pagination/Pagination.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 0b267db..e4491bf 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -105,7 +105,13 @@ function changePage(num, e) {
 function last(e) {
   changePage(pageCount.value, e);
 }
-function getPage(num, options: { disabled?: boolean; class?: string } = {}) {
+function getPage(
+  num,
+  options: {
+    disabled?: boolean;
+    class?: string;
+  } = {},
+) {
   return {
     number: num,
     isCurrent: props.current === num,

From e292931e602af921967d8b8d5580620758a36ade Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:07:27 +0500
Subject: [PATCH 069/212] refactor: options type

---
 src/components/compounds/Pagination/Pagination.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index e4491bf..c5de72f 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -110,6 +110,7 @@ function getPage(
   options: {
     disabled?: boolean;
     class?: string;
+    "aria-label"?: string;
   } = {},
 ) {
   return {

From bbe28276c3d0eb64b29fbcb9db05fcef7f154218 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:08:15 +0500
Subject: [PATCH 070/212] refactor: typing

---
 src/components/compounds/Pagination/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index c5de72f..8eb580a 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -106,7 +106,7 @@ function last(e) {
   changePage(pageCount.value, e);
 }
 function getPage(
-  num,
+  num: number,
   options: {
     disabled?: boolean;
     class?: string;

From 16cd057206999ca5c59620a174fb4bf68d40f72e Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:09:09 +0500
Subject: [PATCH 071/212] refactor: typing

---
 src/components/compounds/Pagination/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 8eb580a..cc3c86b 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -93,7 +93,7 @@ watchEffect(() => {
   if (props.current > pageCount.value) last();
 });
 
-function changePage(num, e) {
+function changePage(num: number, e) {
   if (props.current === num || num < 1 || num > pageCount.value) return;
   emit("update:current", num);
   emit("change", num);

From 61837a9812faef250e774e5a97080c79a6890575 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:19:33 +0500
Subject: [PATCH 072/212] refactor: typing

---
 src/components/compounds/Pagination/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index cc3c86b..671641a 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -93,7 +93,7 @@ watchEffect(() => {
   if (props.current > pageCount.value) last();
 });
 
-function changePage(num: number, e) {
+function changePage(num: number, e: Event) {
   if (props.current === num || num < 1 || num > pageCount.value) return;
   emit("update:current", num);
   emit("change", num);

From 56fddc2f7b63ca73c5a725bf3b3f2e141b9f6290 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:19:57 +0500
Subject: [PATCH 073/212] refactor(compounds): modern vue sfc style

---
 .../compounds/Pagination/PaginationItem.vue   | 52 ++++++++-----------
 1 file changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/components/compounds/Pagination/PaginationItem.vue b/src/components/compounds/Pagination/PaginationItem.vue
index f593427..a2b92ef 100644
--- a/src/components/compounds/Pagination/PaginationItem.vue
+++ b/src/components/compounds/Pagination/PaginationItem.vue
@@ -1,37 +1,31 @@
-
-
-<script>
+<script setup lang="ts">
 import { computed } from "vue";
 
-export default {
-  name: "VPaginationItem",
-  props: {
-    page: {
-      type: Object,
-      required: true,
-    },
-    tag: {
-      type: String,
-      default: "a",
-    },
-    disabled: Boolean,
-  },
+type IPaginationPage = {
+  number: number;
+  isCurrent: boolean;
+  disabled: boolean;
+  class: string;
+};
 
-  setup(props) {
-    const href = computed(() => {
-      return props.tag === "a" ? "#" : null;
-    });
+const props = withDefaults(
+  defineProps<{
+    page: IPaginationPage; // required
+    tag?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    tag: "a",
+  },
+);
 
-    const computedDisabled = computed(() => {
-      return props.disabled || props.page.disabled ? true : null;
-    });
+const href = computed(() => {
+  return props.tag === "a" ? "#" : null;
+});
 
-    return {
-      href,
-      computedDisabled,
-    };
-  },
-};
+const computedDisabled = computed(() => {
+  return props.disabled || props.page.disabled ? true : null;
+});
 </script>
 
 <template>

From ebc583be46cbd1051a37228eab0dd6768c379cec Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:20:28 +0500
Subject: [PATCH 074/212] refactor: modern vue prefer undefined

---
 src/components/compounds/Pagination/PaginationItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Pagination/PaginationItem.vue b/src/components/compounds/Pagination/PaginationItem.vue
index a2b92ef..843f0df 100644
--- a/src/components/compounds/Pagination/PaginationItem.vue
+++ b/src/components/compounds/Pagination/PaginationItem.vue
@@ -20,11 +20,11 @@ const props = withDefaults(
 );
 
 const href = computed(() => {
-  return props.tag === "a" ? "#" : null;
+  return props.tag === "a" ? "#" : undefined;
 });
 
 const computedDisabled = computed(() => {
-  return props.disabled || props.page.disabled ? true : null;
+  return props.disabled || props.page.disabled ? true : undefined;
 });
 </script>
 

From 21885bb2e324587ca914b280add6ad4634cc08c0 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:24:19 +0500
Subject: [PATCH 075/212] feat: separate PaginationPage

---
 src/types/pagination.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/types/pagination.ts

diff --git a/src/types/pagination.ts b/src/types/pagination.ts
new file mode 100644
index 0000000..6d38f15
--- /dev/null
+++ b/src/types/pagination.ts
@@ -0,0 +1,13 @@
+/**
+ * This object used for every page item inside pagination
+ *
+ * https://vue3.dev/documentation/pagination
+ */
+export interface PaginationPage {
+  number?: number;
+  isCurrent?: boolean;
+  click?: (e: Event) => void;
+  disabled?: boolean;
+  class?: string;
+  "aria-label"?: string;
+}

From faa78908e216cd6c9ea0dbe393594f897686ec78 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:26:44 +0500
Subject: [PATCH 076/212] feat: single file for all component shared types

---
 .../{CheckRadioProps.ts => component-types.ts}     | 14 ++++++++++++++
 src/types/pagination.ts                            | 13 -------------
 2 files changed, 14 insertions(+), 13 deletions(-)
 rename src/types/{CheckRadioProps.ts => component-types.ts} (64%)
 delete mode 100644 src/types/pagination.ts

diff --git a/src/types/CheckRadioProps.ts b/src/types/component-types.ts
similarity index 64%
rename from src/types/CheckRadioProps.ts
rename to src/types/component-types.ts
index 23a5e03..fe1b2d3 100644
--- a/src/types/CheckRadioProps.ts
+++ b/src/types/component-types.ts
@@ -21,3 +21,17 @@ export interface CheckRadioProps {
   name?: string;
   size?: "is-small" | "is-medium" | "is-large";
 }
+
+/**
+ * This object used for every page item inside pagination
+ *
+ * https://vue3.dev/documentation/pagination
+ */
+export interface PaginationPage {
+  number?: number;
+  isCurrent?: boolean;
+  click?: (e: Event) => void;
+  disabled?: boolean;
+  class?: string;
+  "aria-label"?: string;
+}
diff --git a/src/types/pagination.ts b/src/types/pagination.ts
deleted file mode 100644
index 6d38f15..0000000
--- a/src/types/pagination.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * This object used for every page item inside pagination
- *
- * https://vue3.dev/documentation/pagination
- */
-export interface PaginationPage {
-  number?: number;
-  isCurrent?: boolean;
-  click?: (e: Event) => void;
-  disabled?: boolean;
-  class?: string;
-  "aria-label"?: string;
-}

From 6dfa0a6ffd1440d457400870ca27d4d1fcd27daa Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:27:52 +0500
Subject: [PATCH 077/212] fix: typing

---
 src/components/compounds/Pagination/Pagination.vue | 3 ++-
 src/components/primitives/Checkbox/Checkbox.vue    | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 671641a..864010b 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { PaginationPage } from "@/types/component-types";
 import { intOrParseInt } from "@/utils/functions";
 import { computed, nextTick, watchEffect } from "vue";
 import PaginationItem from "./PaginationItem.vue";
@@ -112,7 +113,7 @@ function getPage(
     class?: string;
     "aria-label"?: string;
   } = {},
-) {
+): PaginationPage {
   return {
     number: num,
     isCurrent: props.current === num,
diff --git a/src/components/primitives/Checkbox/Checkbox.vue b/src/components/primitives/Checkbox/Checkbox.vue
index 4596b60..f62759c 100644
--- a/src/components/primitives/Checkbox/Checkbox.vue
+++ b/src/components/primitives/Checkbox/Checkbox.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CheckRadioProps } from "@/types/CheckRadioProps";
+import type { CheckRadioProps } from "@/types/component-types";
 import { useTemplateRef } from "vue";
 
 interface IProps extends CheckRadioProps {

From e74e6bd8c58dccf0c6eb856f1271e5f73216cf6b Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:28:36 +0500
Subject: [PATCH 078/212] fix: typing

---
 .../compounds/Pagination/PaginationItem.vue          | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/compounds/Pagination/PaginationItem.vue b/src/components/compounds/Pagination/PaginationItem.vue
index 843f0df..9f0fb8e 100644
--- a/src/components/compounds/Pagination/PaginationItem.vue
+++ b/src/components/compounds/Pagination/PaginationItem.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
+import type { PaginationPage } from "@/types/component-types";
 import { computed } from "vue";
 
-type IPaginationPage = {
-  number: number;
-  isCurrent: boolean;
-  disabled: boolean;
-  class: string;
-};
-
 const props = withDefaults(
   defineProps<{
-    page: IPaginationPage; // required
+    page: PaginationPage; // required
     tag?: string;
     disabled?: boolean;
   }>(),
@@ -42,4 +36,4 @@ const computedDisabled = computed(() => {
     :aria-current="page.isCurrent">
     <slot>{{ page.number }}</slot>
   </component>
-</template>
\ No newline at end of file
+</template>

From 935a92dbc7228b77ae68c09f50d08963504d4b48 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:29:04 +0500
Subject: [PATCH 079/212] refactor: rename

---
 src/components/compounds/Pagination/PaginationItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Pagination/PaginationItem.vue b/src/components/compounds/Pagination/PaginationItem.vue
index 9f0fb8e..1306662 100644
--- a/src/components/compounds/Pagination/PaginationItem.vue
+++ b/src/components/compounds/Pagination/PaginationItem.vue
@@ -17,7 +17,7 @@ const href = computed(() => {
   return props.tag === "a" ? "#" : undefined;
 });
 
-const computedDisabled = computed(() => {
+const effectiveDisabled = computed(() => {
   return props.disabled || props.page.disabled ? true : undefined;
 });
 </script>
@@ -27,7 +27,7 @@ const computedDisabled = computed(() => {
     :is="tag"
     role="button"
     :href="href"
-    :disabled="computedDisabled"
+    :disabled="effectiveDisabled"
     class="pagination-link"
     :class="{ 'is-current': page.isCurrent, [page.class]: true }"
     v-bind="$attrs"

From d994818252f416c7fb5f67063be6dc7df26d3bf8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:33:02 +0500
Subject: [PATCH 080/212] refactor: allow null

---
 src/types/component-types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/component-types.ts b/src/types/component-types.ts
index fe1b2d3..8be0ada 100644
--- a/src/types/component-types.ts
+++ b/src/types/component-types.ts
@@ -33,5 +33,5 @@ export interface PaginationPage {
   click?: (e: Event) => void;
   disabled?: boolean;
   class?: string;
-  "aria-label"?: string;
+  "aria-label"?: string | null;
 }

From 17b58fb3f46b9ccc131798a33e80d74ce3432aa2 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:33:23 +0500
Subject: [PATCH 081/212] refactor: typing

---
 src/components/compounds/Pagination/Pagination.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 864010b..1c92b56 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -125,7 +125,7 @@ function getPage(
   };
 }
 
-function getAriaPageLabel(pageNumber, isCurrent) {
+function getAriaPageLabel(pageNumber: number, isCurrent: boolean) {
   if (props.ariaPageLabel && (!isCurrent || !props.ariaCurrentLabel)) {
     return `${props.ariaPageLabel} ${pageNumber}.`;
   }

From 4155e4f432307da3ea02c1596c13d0aa4ad11541 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:36:02 +0500
Subject: [PATCH 082/212] fix: secure focus() invoke

---
 src/components/compounds/Pagination/Pagination.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 1c92b56..c6d35f5 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -98,8 +98,8 @@ function changePage(num: number, e: Event) {
   if (props.current === num || num < 1 || num > pageCount.value) return;
   emit("update:current", num);
   emit("change", num);
-  if (e?.target) {
-    nextTick(() => e.target.focus());
+  if (e?.target instanceof HTMLElement) {
+    nextTick(() => (e.target as HTMLElement).focus());
   }
 }
 

From d64e59517d2722e52fdd921cc1b5948d467e7b90 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:37:29 +0500
Subject: [PATCH 083/212] refactor: e is optional

---
 src/components/compounds/Pagination/Pagination.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index c6d35f5..1279247 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -94,7 +94,7 @@ watchEffect(() => {
   if (props.current > pageCount.value) last();
 });
 
-function changePage(num: number, e: Event) {
+function changePage(num: number, e?: Event) {
   if (props.current === num || num < 1 || num > pageCount.value) return;
   emit("update:current", num);
   emit("change", num);
@@ -103,7 +103,7 @@ function changePage(num: number, e: Event) {
   }
 }
 
-function last(e) {
+function last(e?: Event) {
   changePage(pageCount.value, e);
 }
 function getPage(

From f3337f6e8e1eb463512b08a15d0b6bd23e691e2c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:44:12 +0500
Subject: [PATCH 084/212] docs: add todo advice about props types

---
 src/components/compounds/Pagination/Pagination.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 1279247..21c0dc0 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -6,6 +6,12 @@ import PaginationItem from "./PaginationItem.vue";
 
 const props = withDefaults(
   defineProps<{
+    /*
+    TODO:
+     as per modern Vue conventions, props should use number instead of (number | string) —
+     this improves type safety, reduces unnecessary type casting, and slightly improves performance.
+     Users can still pass values easily using the colon syntax like :total="100"
+    */
     total?: number | string;
     perPage?: number | string;
     current?: number | string;

From 97204f4cf565045b7a7d9fb0028e4ad6c946a2c1 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:49:00 +0500
Subject: [PATCH 085/212] refactor: useTemplateRef

---
 src/components/compounds/Menu/MenuItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index f66c58e..4f1d59c 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { useTemplateRef } from "vue";
 
 defineOptions({
   inheritAttrs: false,
@@ -21,7 +21,7 @@ const props = withDefaults(
 
 const active = defineModel<boolean>("active");
 const expanded = defineModel<boolean>("expanded");
-const content = ref(null);
+const content = useTemplateRef<HTMLElement>("content");
 
 const onClick = () => {
   // TODO Disable previous active item

From 2d6680e425468e00ec12d3a9ef801375f7c311c9 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 07:52:48 +0500
Subject: [PATCH 086/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Steps/StepItem.vue | 51 ++++++++-------------
 1 file changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/components/compounds/Steps/StepItem.vue b/src/components/compounds/Steps/StepItem.vue
index e0da73f..1d76e49 100644
--- a/src/components/compounds/Steps/StepItem.vue
+++ b/src/components/compounds/Steps/StepItem.vue
@@ -1,41 +1,30 @@
-<script>
+<script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { addToStore, useStore } from "./Steps.vue";
 
-export default {
-  name: "VStep",
-  props: {
-    // eslint-disable-next-line vue/no-unused-properties -- used
-    title: String,
-    // eslint-disable-next-line vue/no-unused-properties -- used
-    subtitle: String,
-    // eslint-disable-next-line vue/no-unused-properties -- used
-    marker: String,
-    // eslint-disable-next-line vue/no-unused-properties -- used
-    disabled: Boolean,
-    // eslint-disable-next-line vue/no-unused-properties -- used
-    clickable: Boolean,
-  },
-  setup(props, { emit }) {
-    const content = ref(null);
-    const tabs = useStore();
-    const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
-
-    addToStore({ ...props, id });
+defineProps<{
+  title?: string;
+  subtitle?: string;
+  marker?: string;
+  disabled?: boolean;
+  clickable?: boolean;
+}>();
 
-    watch(
-      () => tabs.value.tabs.findIndex((tab) => tab.id === id),
-      (index) => {
-        tabs.value.tabs.splice(index, 1, { id, ...props });
-      },
-      { immediate: true },
-    );
+const content = ref(null);
+const tabs = useStore();
+const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
 
-    const isActiveTab = computed(() => tabs.value.activeTab === id);
+addToStore({ ...props, id });
 
-    return { content, isActiveTab };
+watch(
+  () => tabs.value.tabs.findIndex((tab) => tab.id === id),
+  (index) => {
+    tabs.value.tabs.splice(index, 1, { id, ...props });
   },
-};
+  { immediate: true },
+);
+
+const isActiveTab = computed(() => tabs.value.activeTab === id);
 </script>
 
 <template>

From b6100c8df2e78bbffac84459dec27376d3241304 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:10:00 +0500
Subject: [PATCH 087/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Tabs/Tabs.vue  | 116 ++++++++----------------
 src/components/compounds/Tabs/store1.ts |  22 +++++
 2 files changed, 62 insertions(+), 76 deletions(-)
 create mode 100644 src/components/compounds/Tabs/store1.ts

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index a829083..0373dc6 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -1,91 +1,55 @@
-<script>
+<script setup lang="ts">
 import { computed, inject, provide, ref, watchEffect } from "vue";
 
-const TabsSymbol = Symbol("Tabs");
+defineProps<{
+  modelValue: number | string; // required
+  size?: string;
+  type?: string;
+  expanded?: boolean;
+  position?: string;
+  vertical?: boolean; // TODO
+  vanimated?: boolean;
+  animated?: boolean;
+}>();
 
-export function provideStore(store) {
-  const storeRef = ref(store);
-  provide(TabsSymbol, storeRef);
-  return storeRef;
-}
+const emit = defineEmits(["update:modelValue", "change"]);
 
-export function useStore() {
-  const store = inject(TabsSymbol);
-  if (!store) {
-    // throw error, no store provided
-  }
-  return store;
-}
-
-export function addToStore(tab) {
-  const tabs = useStore();
-  tabs.value.tabs.push(tab);
-}
-
-export default {
-  name: "VTabs",
-  props: {
-    modelValue: {
-      type: [Number, String],
-      required: true,
-    },
-    size: String,
-    type: String,
-    expanded: Boolean,
-    position: String,
-    vertical: Boolean, // TODO
-    vanimated: Boolean,
-    animated: Boolean,
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const tabs = provideStore({
-      activeTab: 0,
-      activeHeight: null,
-      tabs: [],
-      animated: props.animated,
-      vanimated: props.vanimated,
-    });
-
-    const setActiveTabID = (id) => {
-      tabs.value.activeTab = id;
-    };
+const tabs = provideStore({
+  activeTab: 0,
+  activeHeight: null,
+  tabs: [],
+  animated: props.animated,
+  vanimated: props.vanimated,
+});
 
-    const setActiveTab = (t) => {
-      if (!t.disabled) {
-        setActiveTabID(t.id);
-      }
-    };
+const setActiveTabID = (id) => {
+  tabs.value.activeTab = id;
+};
 
-    const contentHeight = computed(() => {
-      return `height:${tabs.value.activeHeight}px`;
-    });
+const setActiveTab = (t) => {
+  if (!t.disabled) {
+    setActiveTabID(t.id);
+  }
+};
 
-    watchEffect(() => {
-      setActiveTabID(props.modelValue);
-    });
+const contentHeight = computed(() => {
+  return `height:${tabs.value.activeHeight}px`;
+});
 
-    watchEffect(() => {
-      emit("update:modelValue", tabs.value.activeTab);
-      emit("change", tabs.value.activeTab);
-    });
+watchEffect(() => {
+  setActiveTabID(props.modelValue);
+});
 
-    const isHorizontal = computed(() => props.position && !props.vertical);
+watchEffect(() => {
+  emit("update:modelValue", tabs.value.activeTab);
+  emit("change", tabs.value.activeTab);
+});
 
-    const rounded = computed(() => props.type === "is-toggle-rounded");
+const isHorizontal = computed(() => props.position && !props.vertical);
 
-    const isTabActive = (t) => tabs.value.activeTab === t.id;
+const rounded = computed(() => props.type === "is-toggle-rounded");
 
-    return {
-      contentHeight,
-      setActiveTab,
-      tabs,
-      isHorizontal,
-      rounded,
-      isTabActive,
-    };
-  },
-};
+const isTabActive = (t) => tabs.value.activeTab === t.id;
 </script>
 
 <template>
diff --git a/src/components/compounds/Tabs/store1.ts b/src/components/compounds/Tabs/store1.ts
new file mode 100644
index 0000000..0169489
--- /dev/null
+++ b/src/components/compounds/Tabs/store1.ts
@@ -0,0 +1,22 @@
+import { inject, provide, ref } from "vue";
+
+const TabsSymbol = Symbol("Tabs");
+
+export function provideStore(store) {
+  const storeRef = ref(store);
+  provide(TabsSymbol, storeRef);
+  return storeRef;
+}
+
+export function useStore() {
+  const store = inject(TabsSymbol);
+  if (!store) {
+    // throw error, no store provided
+  }
+  return store;
+}
+
+export function addToStore(tab) {
+  const tabs = useStore();
+  tabs.value.tabs.push(tab);
+}

From 3713067922fc9472bdff22ccec25686c7ab72f8c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:11:09 +0500
Subject: [PATCH 088/212] refactor: delete unused imports

---
 src/components/compounds/Tabs/Tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index 0373dc6..d323fdb 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject, provide, ref, watchEffect } from "vue";
+import { computed, watchEffect } from "vue";
 
 defineProps<{
   modelValue: number | string; // required

From 603b5d4ce939f2e96c9e5bac3dc7b13c984a0146 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:20:13 +0500
Subject: [PATCH 089/212] refactor: typing

---
 src/components/compounds/Tabs/store1.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/compounds/Tabs/store1.ts b/src/components/compounds/Tabs/store1.ts
index 0169489..a554d6c 100644
--- a/src/components/compounds/Tabs/store1.ts
+++ b/src/components/compounds/Tabs/store1.ts
@@ -1,17 +1,18 @@
-import { inject, provide, ref } from "vue";
+import type { MaybeRef } from "vue";
+import { inject, provide, toRef } from "vue";
 
 const TabsSymbol = Symbol("Tabs");
 
-export function provideStore(store) {
-  const storeRef = ref(store);
+export function provideStore<T>(store: MaybeRef<T>) {
+  const storeRef = toRef(store);
   provide(TabsSymbol, storeRef);
   return storeRef;
 }
 
-export function useStore() {
-  const store = inject(TabsSymbol);
+export function useStore<T>(): T {
+  const store = inject<T>(TabsSymbol);
   if (!store) {
-    // throw error, no store provided
+    throw new Error("no store provided");
   }
   return store;
 }

From 4551f8868c34fc4db8856a71371ea598ff3a6618 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:26:05 +0500
Subject: [PATCH 090/212] refactor: typing

---
 src/components/compounds/Tabs/store1.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Tabs/store1.ts b/src/components/compounds/Tabs/store1.ts
index a554d6c..236bb8d 100644
--- a/src/components/compounds/Tabs/store1.ts
+++ b/src/components/compounds/Tabs/store1.ts
@@ -1,4 +1,4 @@
-import type { MaybeRef } from "vue";
+import type { MaybeRef, Ref } from "vue";
 import { inject, provide, toRef } from "vue";
 
 const TabsSymbol = Symbol("Tabs");
@@ -17,7 +17,7 @@ export function useStore<T>(): T {
   return store;
 }
 
-export function addToStore(tab) {
-  const tabs = useStore();
+export function addToStore<Tab, T extends { tabs: Tab[] }>(tab: Tab) {
+  const tabs = useStore<Ref<T>>();
   tabs.value.tabs.push(tab);
 }

From 954078720f45954121956b47579ab1a4cb5b19fd Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:26:37 +0500
Subject: [PATCH 091/212] refactor: typing

---
 src/components/compounds/Tabs/store1.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/store1.ts b/src/components/compounds/Tabs/store1.ts
index 236bb8d..d6eab6d 100644
--- a/src/components/compounds/Tabs/store1.ts
+++ b/src/components/compounds/Tabs/store1.ts
@@ -17,7 +17,7 @@ export function useStore<T>(): T {
   return store;
 }
 
-export function addToStore<Tab, T extends { tabs: Tab[] }>(tab: Tab) {
+export function addToStore<T extends { tabs: Tab[] }, Tab>(tab: Tab) {
   const tabs = useStore<Ref<T>>();
   tabs.value.tabs.push(tab);
 }

From db277759c240a943f69a09d0f45a789349988628 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:27:55 +0500
Subject: [PATCH 092/212] refactor: typing

---
 src/components/compounds/Tabs/store1.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Tabs/store1.ts b/src/components/compounds/Tabs/store1.ts
index d6eab6d..9980465 100644
--- a/src/components/compounds/Tabs/store1.ts
+++ b/src/components/compounds/Tabs/store1.ts
@@ -9,8 +9,8 @@ export function provideStore<T>(store: MaybeRef<T>) {
   return storeRef;
 }
 
-export function useStore<T>(): T {
-  const store = inject<T>(TabsSymbol);
+export function useStore<T>(): Ref<T> {
+  const store = inject<Ref<T>>(TabsSymbol);
   if (!store) {
     throw new Error("no store provided");
   }
@@ -18,6 +18,6 @@ export function useStore<T>(): T {
 }
 
 export function addToStore<T extends { tabs: Tab[] }, Tab>(tab: Tab) {
-  const tabs = useStore<Ref<T>>();
+  const tabs = useStore<T>();
   tabs.value.tabs.push(tab);
 }

From 2d71f41a1e8b69e36e1122385e2637852093ba66 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:36:30 +0500
Subject: [PATCH 093/212] refactor: typing

---
 src/components/compounds/Tabs/Tabs.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index d323fdb..e09b06b 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, watchEffect } from "vue";
+import { provideStore } from "./store1";
 
-defineProps<{
+const props = defineProps<{
   modelValue: number | string; // required
   size?: string;
   type?: string;
@@ -22,7 +23,7 @@ const tabs = provideStore({
   vanimated: props.vanimated,
 });
 
-const setActiveTabID = (id) => {
+const setActiveTabID = (id: number) => {
   tabs.value.activeTab = id;
 };
 

From 10ab9f567d18da01298eb65d7cd4f30627ecc03d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:38:17 +0500
Subject: [PATCH 094/212] refactor: use unions

---
 src/components/compounds/Tabs/Tabs.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index e09b06b..7759f5d 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -4,10 +4,10 @@ import { provideStore } from "./store1";
 
 const props = defineProps<{
   modelValue: number | string; // required
-  size?: string;
-  type?: string;
+  size?: "is-small" | "is-medium" | "is-large";
+  type?: "is-boxed" | "is-toggle";
   expanded?: boolean;
-  position?: string;
+  position?: "is-centered" | "is-right";
   vertical?: boolean; // TODO
   vanimated?: boolean;
   animated?: boolean;

From 7614cf2df1f23a01c3e374f5e64f35548dec7d4a Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:39:56 +0500
Subject: [PATCH 095/212] docs: add todo

---
 src/components/compounds/Tabs/Tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index 7759f5d..9c0243d 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -5,7 +5,7 @@ import { provideStore } from "./store1";
 const props = defineProps<{
   modelValue: number | string; // required
   size?: "is-small" | "is-medium" | "is-large";
-  type?: "is-boxed" | "is-toggle";
+  type?: "is-boxed" | "is-toggle" | "is-toggle-rounded"; // todo update docs: add "is-toggle-rounded" to table
   expanded?: boolean;
   position?: "is-centered" | "is-right";
   vertical?: boolean; // TODO

From d7f27a88bb745d94c42d473def8eda96a9f4cdcc Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:41:16 +0500
Subject: [PATCH 096/212] refactor: typing

---
 src/components/compounds/Tabs/Tabs.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index 9c0243d..e4ef223 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -15,6 +15,11 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
+type Tab = {
+  id: number;
+  disabled: boolean;
+};
+
 const tabs = provideStore({
   activeTab: 0,
   activeHeight: null,
@@ -27,7 +32,7 @@ const setActiveTabID = (id: number) => {
   tabs.value.activeTab = id;
 };
 
-const setActiveTab = (t) => {
+const setActiveTab = (t: Tab) => {
   if (!t.disabled) {
     setActiveTabID(t.id);
   }

From 5a4624921612c342ad409e4ce112c2a89d8dba0d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:43:49 +0500
Subject: [PATCH 097/212] refactor: typing

---
 src/components/compounds/Tabs/Tabs.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index e4ef223..4a6c452 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -20,7 +20,15 @@ type Tab = {
   disabled: boolean;
 };
 
-const tabs = provideStore({
+type TabsState = {
+  activeTab: number;
+  activeHeight: number | null;
+  tabs: Tab[];
+  animated: boolean;
+  vanimated: boolean;
+};
+
+const tabs = provideStore<TabsState>({
   activeTab: 0,
   activeHeight: null,
   tabs: [],

From fb3e5f46c711fb01b11ebcc720c790086912bc2c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:44:26 +0500
Subject: [PATCH 098/212] refactor: typing

---
 src/components/compounds/Tabs/Tabs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index 4a6c452..59ecf7d 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -21,7 +21,7 @@ type Tab = {
 };
 
 type TabsState = {
-  activeTab: number;
+  activeTab: number | string;
   activeHeight: number | null;
   tabs: Tab[];
   animated: boolean;
@@ -36,7 +36,7 @@ const tabs = provideStore<TabsState>({
   vanimated: props.vanimated,
 });
 
-const setActiveTabID = (id: number) => {
+const setActiveTabID = (id: number | string) => {
   tabs.value.activeTab = id;
 };
 

From 248031faec85e033650433023599dbfee52822c3 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:45:27 +0500
Subject: [PATCH 099/212] refactor: typing

---
 src/components/compounds/Tabs/Tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index 59ecf7d..e15e130 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 const emit = defineEmits(["update:modelValue", "change"]);
 
 type Tab = {
-  id: number;
+  id: number | string;
   disabled: boolean;
 };
 

From d9d83723586a380ab83370194975965edf1c223a Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:46:00 +0500
Subject: [PATCH 100/212] refactor: typing

---
 src/components/compounds/Tabs/Tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index e15e130..abf1386 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -63,7 +63,7 @@ const isHorizontal = computed(() => props.position && !props.vertical);
 
 const rounded = computed(() => props.type === "is-toggle-rounded");
 
-const isTabActive = (t) => tabs.value.activeTab === t.id;
+const isTabActive = (t: Tab) => tabs.value.activeTab === t.id;
 </script>
 
 <template>

From b7ece153b2498777788f2f48f873024b4c3161cf Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:50:00 +0500
Subject: [PATCH 101/212] refactor: typing

---
 src/components/compounds/Tabs/Tabs.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index abf1386..e607acd 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -18,6 +18,7 @@ const emit = defineEmits(["update:modelValue", "change"]);
 type Tab = {
   id: number | string;
   disabled: boolean;
+  label: string;
 };
 
 type TabsState = {
@@ -74,7 +75,7 @@ const isTabActive = (t: Tab) => tabs.value.activeTab === t.id;
         type,
         size,
         {
-          [position]: isHorizontal,
+          [position ?? '']: isHorizontal,
           'is-fullwidth': expanded,
           'is-toggle-rounded is-toggle': rounded,
         },

From a45bd700617e4e1549c03f5b7303ffc4a665ad78 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:52:11 +0500
Subject: [PATCH 102/212] docs: add todo

---
 src/components/compounds/Tabs/Tabs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index e607acd..9ba7d00 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -9,8 +9,8 @@ const props = defineProps<{
   expanded?: boolean;
   position?: "is-centered" | "is-right";
   vertical?: boolean; // TODO
-  vanimated?: boolean;
-  animated?: boolean;
+  vanimated?: boolean; // todo update docs: remove true as default
+  animated?: boolean; // todo update docs: remove true as default
 }>();
 
 const emit = defineEmits(["update:modelValue", "change"]);

From 485139c94bd1bc3e4bf8322528e7b763e71c9375 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:54:07 +0500
Subject: [PATCH 103/212] refactor: simplify line breaks

---
 src/components/compounds/Tabs/Tabs.vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index 9ba7d00..bf7bae8 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -82,16 +82,8 @@ const isTabActive = (t: Tab) => tabs.value.activeTab === t.id;
       ]">
       <ul class="ul">
         <template v-for="t in tabs.tabs" :key="t">
-          <li
-            class="li"
-            :class="{
-              'is-active': isTabActive(t),
-            }"
-            @click="setActiveTab(t)">
-            <a
-              :class="{
-                'is-disabled': t.disabled,
-              }">
+          <li class="li" :class="{ 'is-active': isTabActive(t) }" @click="setActiveTab(t)">
+            <a :class="{ 'is-disabled': t.disabled }">
               {{ t.label }}
             </a>
           </li>

From 065656e543b50d88cf1e83687238d0e8cdd8c9f7 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:56:11 +0500
Subject: [PATCH 104/212] refactor: rename tabs store file

---
 src/components/compounds/Tabs/Tabs.vue                     | 2 +-
 src/components/compounds/Tabs/{store1.ts => tabs-store.ts} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/compounds/Tabs/{store1.ts => tabs-store.ts} (100%)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index bf7bae8..a695831 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, watchEffect } from "vue";
-import { provideStore } from "./store1";
+import { provideStore } from "./tabs-store";
 
 const props = defineProps<{
   modelValue: number | string; // required
diff --git a/src/components/compounds/Tabs/store1.ts b/src/components/compounds/Tabs/tabs-store.ts
similarity index 100%
rename from src/components/compounds/Tabs/store1.ts
rename to src/components/compounds/Tabs/tabs-store.ts

From 9fa7c7a2156aa3ad609cdf6468f433e039359baa Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 10:59:14 +0500
Subject: [PATCH 105/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Tabs/Tab.vue | 80 ++++++++++++---------------
 1 file changed, 35 insertions(+), 45 deletions(-)

diff --git a/src/components/compounds/Tabs/Tab.vue b/src/components/compounds/Tabs/Tab.vue
index dab0250..694c452 100644
--- a/src/components/compounds/Tabs/Tab.vue
+++ b/src/components/compounds/Tabs/Tab.vue
@@ -1,56 +1,46 @@
-<script>
+<script setup lang="ts">
 import { computed, onMounted, onUpdated, ref, watch } from "vue";
 import { addToStore, useStore } from "./Tabs.vue";
 
-export default {
-  name: "VTab",
-  props: {
-    // eslint-disable-next-line vue/no-unused-properties -- used
-    label: {
-      type: String,
-      default: "",
-      required: true,
-    },
-    // eslint-disable-next-line vue/no-unused-properties -- used
-    disabled: Boolean,
-    // eslint-disable-next-line vue/no-unused-properties -- used
-    visible: {
-      type: Boolean,
-      default: true,
-    },
+withDefaults(
+  defineProps<{
+    label: string; // required
+    disabled?: boolean;
+    visible?: boolean;
+  }>(),
+  {
+    label: "",
+    visible: true,
   },
-  setup(props, { emit }) {
-    const content = ref(null);
-    const tabs = useStore();
-    const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
-    const transitionName = computed(() => {
-      return tabs.value.activeTab < id ? "slide-right" : "slide-left";
-    });
-
-    const updateActiveHeight = () => {
-      if (tabs.value.vanimated && content.value) {
-        tabs.value.activeHeight = content.value.offsetHeight;
-      }
-    };
-
-    onMounted(updateActiveHeight);
-    onUpdated(updateActiveHeight);
-
-    addToStore({ ...props, id });
+);
+
+const content = ref(null);
+const tabs = useStore();
+const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
+const transitionName = computed(() => {
+  return tabs.value.activeTab < id ? "slide-right" : "slide-left";
+});
+
+const updateActiveHeight = () => {
+  if (tabs.value.vanimated && content.value) {
+    tabs.value.activeHeight = content.value.offsetHeight;
+  }
+};
 
-    watch(
-      () => tabs.value.tabs.findIndex((tab) => tab.id === id),
-      (index) => {
-        tabs.value.tabs.splice(index, 1, { id, ...props });
-      },
-      { immediate: true },
-    );
+onMounted(updateActiveHeight);
+onUpdated(updateActiveHeight);
 
-    const isActiveTab = computed(() => tabs.value.activeTab === id);
+addToStore({ ...props, id });
 
-    return { tabs, transitionName, content, isActiveTab };
+watch(
+  () => tabs.value.tabs.findIndex((tab) => tab.id === id),
+  (index) => {
+    tabs.value.tabs.splice(index, 1, { id, ...props });
   },
-};
+  { immediate: true },
+);
+
+const isActiveTab = computed(() => tabs.value.activeTab === id);
 </script>
 
 <template>

From 7a816020c67edb76da5d07068ebd721967c390e0 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:01:19 +0500
Subject: [PATCH 106/212] refactor: use useTemplateRef

---
 src/components/compounds/Tabs/Tab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Tabs/Tab.vue b/src/components/compounds/Tabs/Tab.vue
index 694c452..a02c7b9 100644
--- a/src/components/compounds/Tabs/Tab.vue
+++ b/src/components/compounds/Tabs/Tab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUpdated, ref, watch } from "vue";
+import { computed, onMounted, onUpdated, useTemplateRef, watch } from "vue";
 import { addToStore, useStore } from "./Tabs.vue";
 
 withDefaults(
@@ -14,7 +14,7 @@ withDefaults(
   },
 );
 
-const content = ref(null);
+const content = useTemplateRef<HTMLElement>("content");
 const tabs = useStore();
 const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
 const transitionName = computed(() => {

From 73123574c10b4cdef118b437e64017f1663b31c7 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:03:59 +0500
Subject: [PATCH 107/212] refactor: use extract tab types

---
 src/components/compounds/Tabs/Tabs.vue | 15 +--------------
 src/types/component-types.ts           | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index a695831..ab863ab 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Tab, TabsState } from "@/types/component-types";
 import { computed, watchEffect } from "vue";
 import { provideStore } from "./tabs-store";
 
@@ -15,20 +16,6 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
-type Tab = {
-  id: number | string;
-  disabled: boolean;
-  label: string;
-};
-
-type TabsState = {
-  activeTab: number | string;
-  activeHeight: number | null;
-  tabs: Tab[];
-  animated: boolean;
-  vanimated: boolean;
-};
-
 const tabs = provideStore<TabsState>({
   activeTab: 0,
   activeHeight: null,
diff --git a/src/types/component-types.ts b/src/types/component-types.ts
index 8be0ada..8ca1c9a 100644
--- a/src/types/component-types.ts
+++ b/src/types/component-types.ts
@@ -35,3 +35,20 @@ export interface PaginationPage {
   class?: string;
   "aria-label"?: string | null;
 }
+
+/**
+ * https://vue3.dev/documentation/tabs
+ */
+export type Tab = {
+  id: number | string;
+  disabled: boolean;
+  label: string;
+};
+
+export type TabsState = {
+  activeTab: number | string;
+  activeHeight: number | null;
+  tabs: Tab[];
+  animated: boolean;
+  vanimated: boolean;
+};

From b0610ca81695ded9c19784e9ac9e26e62f0461e4 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:05:26 +0500
Subject: [PATCH 108/212] refactor: typing

---
 src/components/compounds/Tabs/Tab.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Tabs/Tab.vue b/src/components/compounds/Tabs/Tab.vue
index a02c7b9..791d6f7 100644
--- a/src/components/compounds/Tabs/Tab.vue
+++ b/src/components/compounds/Tabs/Tab.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { TabsState } from "@/types/component-types";
 import { computed, onMounted, onUpdated, useTemplateRef, watch } from "vue";
-import { addToStore, useStore } from "./Tabs.vue";
+import { addToStore, useStore } from "./tabs-store";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     label: string; // required
     disabled?: boolean;
@@ -15,7 +16,7 @@ withDefaults(
 );
 
 const content = useTemplateRef<HTMLElement>("content");
-const tabs = useStore();
+const tabs = useStore<TabsState>();
 const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
 const transitionName = computed(() => {
   return tabs.value.activeTab < id ? "slide-right" : "slide-left";

From bf0697d3a8cb08019b20f46b390ba83cd059dd4d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:13:05 +0500
Subject: [PATCH 109/212] refactor: typing

---
 src/components/compounds/Tabs/tabs-store.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Tabs/tabs-store.ts b/src/components/compounds/Tabs/tabs-store.ts
index 9980465..3c7c87f 100644
--- a/src/components/compounds/Tabs/tabs-store.ts
+++ b/src/components/compounds/Tabs/tabs-store.ts
@@ -17,7 +17,9 @@ export function useStore<T>(): Ref<T> {
   return store;
 }
 
-export function addToStore<T extends { tabs: Tab[] }, Tab>(tab: Tab) {
+export function addToStore<Tab, T extends { tabs: Tab[] } = { tabs: Tab[] }>(
+  tab: Tab,
+) {
   const tabs = useStore<T>();
   tabs.value.tabs.push(tab);
 }

From 40b8821704cb4a8c62c482ef5188350502d38722 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:13:26 +0500
Subject: [PATCH 110/212] refactor: typing

---
 src/components/compounds/Tabs/Tab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Tabs/Tab.vue b/src/components/compounds/Tabs/Tab.vue
index 791d6f7..0bb5389 100644
--- a/src/components/compounds/Tabs/Tab.vue
+++ b/src/components/compounds/Tabs/Tab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TabsState } from "@/types/component-types";
+import type { Tab, TabsState } from "@/types/component-types";
 import { computed, onMounted, onUpdated, useTemplateRef, watch } from "vue";
 import { addToStore, useStore } from "./tabs-store";
 
@@ -31,7 +31,7 @@ const updateActiveHeight = () => {
 onMounted(updateActiveHeight);
 onUpdated(updateActiveHeight);
 
-addToStore({ ...props, id });
+addToStore<Tab>({ ...props, id });
 
 watch(
   () => tabs.value.tabs.findIndex((tab) => tab.id === id),

From e0d7a2c6ed5c39d5732fdab9ddf5e044ef8b00f4 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:16:15 +0500
Subject: [PATCH 111/212] refactor: typing

---
 src/types/component-types.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/types/component-types.ts b/src/types/component-types.ts
index 8ca1c9a..f82e157 100644
--- a/src/types/component-types.ts
+++ b/src/types/component-types.ts
@@ -41,8 +41,9 @@ export interface PaginationPage {
  */
 export type Tab = {
   id: number | string;
-  disabled: boolean;
   label: string;
+  disabled?: boolean;
+  visible?: boolean;
 };
 
 export type TabsState = {

From 89efa76a73e810feb20146fbc3f13b17871417c6 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:25:14 +0500
Subject: [PATCH 112/212] feat: add steps-store.ts

---
 src/components/compounds/Steps/steps-store.ts | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/components/compounds/Steps/steps-store.ts

diff --git a/src/components/compounds/Steps/steps-store.ts b/src/components/compounds/Steps/steps-store.ts
new file mode 100644
index 0000000..6675fc4
--- /dev/null
+++ b/src/components/compounds/Steps/steps-store.ts
@@ -0,0 +1,26 @@
+import type { MaybeRef, Ref } from "vue";
+import { inject, provide, toRef } from "vue";
+
+const TabsSymbol = Symbol("Tabs");
+
+export function provideStore<T>(store: MaybeRef<T>) {
+  const storeRef = toRef(store);
+  provide(TabsSymbol, storeRef);
+  return storeRef;
+}
+
+export function useStore<T>() {
+  const store = inject<Ref<T>>(TabsSymbol);
+  if (!store) {
+    // throw error, no store provided
+    throw new Error("no store provided");
+  }
+  return store;
+}
+
+export function addToStore<Tab, T extends { tabs: Tab[] } = { tabs: Tab[] }>(
+  tab: Tab,
+) {
+  const tabs = useStore<T>();
+  tabs.value.tabs.push(tab);
+}

From 8dddcd7736126901b2ff96f67795875c20fe1b02 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:26:32 +0500
Subject: [PATCH 113/212] refactor: typing

---
 src/components/compounds/Steps/steps-store.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/compounds/Steps/steps-store.ts b/src/components/compounds/Steps/steps-store.ts
index 6675fc4..3c7c87f 100644
--- a/src/components/compounds/Steps/steps-store.ts
+++ b/src/components/compounds/Steps/steps-store.ts
@@ -9,10 +9,9 @@ export function provideStore<T>(store: MaybeRef<T>) {
   return storeRef;
 }
 
-export function useStore<T>() {
+export function useStore<T>(): Ref<T> {
   const store = inject<Ref<T>>(TabsSymbol);
   if (!store) {
-    // throw error, no store provided
     throw new Error("no store provided");
   }
   return store;

From 2dac9014fef3ccb8d655df93486d48214d48c33c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:28:05 +0500
Subject: [PATCH 114/212] refactor: universal generic store for tabs and for
 steps

---
 src/components/compounds/Steps/steps-store.ts | 25 -------------------
 .../compounds/Tabs => utils}/tabs-store.ts    |  0
 2 files changed, 25 deletions(-)
 delete mode 100644 src/components/compounds/Steps/steps-store.ts
 rename src/{components/compounds/Tabs => utils}/tabs-store.ts (100%)

diff --git a/src/components/compounds/Steps/steps-store.ts b/src/components/compounds/Steps/steps-store.ts
deleted file mode 100644
index 3c7c87f..0000000
--- a/src/components/compounds/Steps/steps-store.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { MaybeRef, Ref } from "vue";
-import { inject, provide, toRef } from "vue";
-
-const TabsSymbol = Symbol("Tabs");
-
-export function provideStore<T>(store: MaybeRef<T>) {
-  const storeRef = toRef(store);
-  provide(TabsSymbol, storeRef);
-  return storeRef;
-}
-
-export function useStore<T>(): Ref<T> {
-  const store = inject<Ref<T>>(TabsSymbol);
-  if (!store) {
-    throw new Error("no store provided");
-  }
-  return store;
-}
-
-export function addToStore<Tab, T extends { tabs: Tab[] } = { tabs: Tab[] }>(
-  tab: Tab,
-) {
-  const tabs = useStore<T>();
-  tabs.value.tabs.push(tab);
-}
diff --git a/src/components/compounds/Tabs/tabs-store.ts b/src/utils/tabs-store.ts
similarity index 100%
rename from src/components/compounds/Tabs/tabs-store.ts
rename to src/utils/tabs-store.ts

From 9343cc0c1e1f7365d2395f25f6198854ef1097bb Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 11:29:04 +0500
Subject: [PATCH 115/212] fix: import

---
 src/components/compounds/Tabs/Tab.vue  | 2 +-
 src/components/compounds/Tabs/Tabs.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Tabs/Tab.vue b/src/components/compounds/Tabs/Tab.vue
index 0bb5389..2668fad 100644
--- a/src/components/compounds/Tabs/Tab.vue
+++ b/src/components/compounds/Tabs/Tab.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Tab, TabsState } from "@/types/component-types";
+import { addToStore, useStore } from "@/utils/tabs-store";
 import { computed, onMounted, onUpdated, useTemplateRef, watch } from "vue";
-import { addToStore, useStore } from "./tabs-store";
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index ab863ab..936d0df 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Tab, TabsState } from "@/types/component-types";
+import { provideStore } from "@/utils/tabs-store";
 import { computed, watchEffect } from "vue";
-import { provideStore } from "./tabs-store";
 
 const props = defineProps<{
   modelValue: number | string; // required

From 0743e4f07a0e92143abfd13e341bc6e1c6b087f4 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:04:12 +0500
Subject: [PATCH 116/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Steps/Steps.vue | 96 ++++++++----------------
 1 file changed, 31 insertions(+), 65 deletions(-)

diff --git a/src/components/compounds/Steps/Steps.vue b/src/components/compounds/Steps/Steps.vue
index c4ce4d0..5be3343 100644
--- a/src/components/compounds/Steps/Steps.vue
+++ b/src/components/compounds/Steps/Steps.vue
@@ -1,76 +1,42 @@
-<script>
-import { inject, provide, ref, watchEffect } from "vue";
+<script setup lang="ts">
+import { watchEffect } from "vue";
 
-const TabsSymbol = Symbol("Tabs");
+const props = defineProps<{
+  modelValue: number | string; // required
+  size?: string; // todo union
+  type?: string; // todo union
+  animated?: boolean;
+}>();
 
-export function provideStore(store) {
-  const storeRef = ref(store);
-  provide(TabsSymbol, storeRef);
-  return storeRef;
-}
+const emit = defineEmits(["update:modelValue", "change"]);
 
-export function useStore() {
-  const store = inject(TabsSymbol);
-  if (!store) {
-    // throw error, no store provided
-  }
-  return store;
-}
-
-export function addToStore(tab) {
-  const tabs = useStore();
-  tabs.value.tabs.push(tab);
-}
-
-export default {
-  name: "VSteps",
-  props: {
-    modelValue: {
-      type: [Number, String],
-      required: true,
-    },
-    size: String,
-    type: String,
-    animated: Boolean,
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const tabs = provideStore({
-      activeTab: 0,
-      activeHeight: null,
-      tabs: [],
-    });
-
-    const setActiveTabID = (id) => {
-      tabs.value.activeTab = id;
-    };
+const tabs = provideStore({
+  activeTab: 0,
+  activeHeight: null,
+  tabs: [],
+});
 
-    const setActiveTab = (t) => {
-      if (!t.disabled && t.clickable) {
-        setActiveTabID(t.id);
-      }
-    };
+const setActiveTabID = (id) => {
+  tabs.value.activeTab = id;
+};
 
-    watchEffect(() => {
-      setActiveTabID(props.modelValue);
-    });
+const setActiveTab = (t) => {
+  if (!t.disabled && t.clickable) {
+    setActiveTabID(t.id);
+  }
+};
 
-    watchEffect(() => {
-      emit("update:modelValue", tabs.value.activeTab);
-      emit("change", tabs.value.activeTab);
-    });
+watchEffect(() => {
+  setActiveTabID(props.modelValue);
+});
 
-    const isTabActive = (t) => tabs.value.activeTab === t.id;
-    const isTabCompleted = (t) => tabs.value.activeTab > t.id;
+watchEffect(() => {
+  emit("update:modelValue", tabs.value.activeTab);
+  emit("change", tabs.value.activeTab);
+});
 
-    return {
-      setActiveTab,
-      tabs,
-      isTabActive,
-      isTabCompleted,
-    };
-  },
-};
+const isTabActive = (t) => tabs.value.activeTab === t.id;
+const isTabCompleted = (t) => tabs.value.activeTab > t.id;
 </script>
 
 <template>

From 28fe687de44d2f29afe01f396c8845ce3b585917 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:05:54 +0500
Subject: [PATCH 117/212] refactor: union type

---
 src/components/compounds/Steps/Steps.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Steps/Steps.vue b/src/components/compounds/Steps/Steps.vue
index 5be3343..c888004 100644
--- a/src/components/compounds/Steps/Steps.vue
+++ b/src/components/compounds/Steps/Steps.vue
@@ -3,7 +3,7 @@ import { watchEffect } from "vue";
 
 const props = defineProps<{
   modelValue: number | string; // required
-  size?: string; // todo union
+  size?: "is-small" | "is-medium" | "is-large";
   type?: string; // todo union
   animated?: boolean;
 }>();

From 9aa0f2ed57de29e1f1643ac6be9db94030e05f64 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:08:02 +0500
Subject: [PATCH 118/212] refactor: typing

---
 src/components/compounds/Steps/Steps.vue | 4 +++-
 src/types/component-types.ts             | 9 +++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Steps/Steps.vue b/src/components/compounds/Steps/Steps.vue
index c888004..f5749da 100644
--- a/src/components/compounds/Steps/Steps.vue
+++ b/src/components/compounds/Steps/Steps.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { StepTabsState, Tab } from "@/types/component-types";
+import { provideStore } from "@/utils/tabs-store";
 import { watchEffect } from "vue";
 
 const props = defineProps<{
@@ -10,7 +12,7 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
-const tabs = provideStore({
+const tabs = provideStore<StepTabsState>({
   activeTab: 0,
   activeHeight: null,
   tabs: [],
diff --git a/src/types/component-types.ts b/src/types/component-types.ts
index f82e157..6155ae4 100644
--- a/src/types/component-types.ts
+++ b/src/types/component-types.ts
@@ -53,3 +53,12 @@ export type TabsState = {
   animated: boolean;
   vanimated: boolean;
 };
+
+/**
+ * https://vue3.dev/documentation/steps
+ */
+export type StepTabsState = {
+  activeTab: number | string;
+  activeHeight: number | null;
+  tabs: [];
+};

From 675ca03554db540c8e3a7f5b3613a203c45108e9 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:11:34 +0500
Subject: [PATCH 119/212] refactor: typing

---
 src/components/compounds/Steps/StepItem.vue |  7 ++++---
 src/types/component-types.ts                | 11 ++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Steps/StepItem.vue b/src/components/compounds/Steps/StepItem.vue
index 1d76e49..b545b10 100644
--- a/src/components/compounds/Steps/StepItem.vue
+++ b/src/components/compounds/Steps/StepItem.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { StepTab, StepTabsState } from "@/types/component-types";
+import { addToStore, useStore } from "@/utils/tabs-store";
 import { computed, ref, watch } from "vue";
-import { addToStore, useStore } from "./Steps.vue";
 
-defineProps<{
+const props = defineProps<{
   title?: string;
   subtitle?: string;
   marker?: string;
@@ -11,7 +12,7 @@ defineProps<{
 }>();
 
 const content = ref(null);
-const tabs = useStore();
+const tabs = useStore<StepTabsState>();
 const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
 
 addToStore({ ...props, id });
diff --git a/src/types/component-types.ts b/src/types/component-types.ts
index 6155ae4..d0cccef 100644
--- a/src/types/component-types.ts
+++ b/src/types/component-types.ts
@@ -57,8 +57,17 @@ export type TabsState = {
 /**
  * https://vue3.dev/documentation/steps
  */
+export type StepTab = {
+  id: number | string;
+  title?: string;
+  subtitle?: string;
+  marker?: string;
+  disabled?: boolean;
+  clickable?: boolean;
+};
+
 export type StepTabsState = {
   activeTab: number | string;
   activeHeight: number | null;
-  tabs: [];
+  tabs: StepTab[];
 };

From cbc78a3f9e64799407f40cba1fc4f137fbf3c755 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:12:30 +0500
Subject: [PATCH 120/212] refactor: typing

---
 src/components/compounds/Steps/StepItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Steps/StepItem.vue b/src/components/compounds/Steps/StepItem.vue
index b545b10..a0de29a 100644
--- a/src/components/compounds/Steps/StepItem.vue
+++ b/src/components/compounds/Steps/StepItem.vue
@@ -15,7 +15,7 @@ const content = ref(null);
 const tabs = useStore<StepTabsState>();
 const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
 
-addToStore({ ...props, id });
+addToStore<StepTab>({ ...props, id });
 
 watch(
   () => tabs.value.tabs.findIndex((tab) => tab.id === id),

From 3d0d8da3b76911e5286cc33f51c2d828981b75cd Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:14:18 +0500
Subject: [PATCH 121/212] refactor: typing

---
 src/components/compounds/Steps/Steps.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/compounds/Steps/Steps.vue b/src/components/compounds/Steps/Steps.vue
index f5749da..dacf899 100644
--- a/src/components/compounds/Steps/Steps.vue
+++ b/src/components/compounds/Steps/Steps.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { StepTabsState, Tab } from "@/types/component-types";
+import type { StepTab, StepTabsState } from "@/types/component-types";
 import { provideStore } from "@/utils/tabs-store";
 import { watchEffect } from "vue";
 
@@ -18,11 +18,11 @@ const tabs = provideStore<StepTabsState>({
   tabs: [],
 });
 
-const setActiveTabID = (id) => {
+const setActiveTabID = (id: number | string) => {
   tabs.value.activeTab = id;
 };
 
-const setActiveTab = (t) => {
+const setActiveTab = (t: StepTab) => {
   if (!t.disabled && t.clickable) {
     setActiveTabID(t.id);
   }
@@ -37,8 +37,8 @@ watchEffect(() => {
   emit("change", tabs.value.activeTab);
 });
 
-const isTabActive = (t) => tabs.value.activeTab === t.id;
-const isTabCompleted = (t) => tabs.value.activeTab > t.id;
+const isTabActive = (t: StepTab) => tabs.value.activeTab === t.id;
+const isTabCompleted = (t: StepTab) => tabs.value.activeTab > t.id;
 </script>
 
 <template>

From 2e6d8f0206619a00f3e6c35c4d04450d40564450 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:18:02 +0500
Subject: [PATCH 122/212] refactor: remove unnecessary template wrapper

---
 src/components/compounds/Tabs/Tabs.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index 936d0df..ae50e1a 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -68,13 +68,16 @@ const isTabActive = (t: Tab) => tabs.value.activeTab === t.id;
         },
       ]">
       <ul class="ul">
-        <template v-for="t in tabs.tabs" :key="t">
-          <li class="li" :class="{ 'is-active': isTabActive(t) }" @click="setActiveTab(t)">
-            <a :class="{ 'is-disabled': t.disabled }">
-              {{ t.label }}
-            </a>
-          </li>
-        </template>
+        <li
+          v-for="(t, idx) in tabs.tabs"
+          :key="idx"
+          class="li"
+          :class="{ 'is-active': isTabActive(t) }"
+          @click="setActiveTab(t)">
+          <a :class="{ 'is-disabled': t.disabled }">
+            {{ t.label }}
+          </a>
+        </li>
       </ul>
     </nav>
     <div :class="{ 'is-height-animated': vanimated }" :style="contentHeight">

From 55a7588ab87af6b647bbdcd772945ea22ca92cb8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:18:26 +0500
Subject: [PATCH 123/212] refactor: use index for keying v-for loop

---
 src/components/compounds/Steps/Steps.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Steps/Steps.vue b/src/components/compounds/Steps/Steps.vue
index dacf899..30f5ee0 100644
--- a/src/components/compounds/Steps/Steps.vue
+++ b/src/components/compounds/Steps/Steps.vue
@@ -53,8 +53,8 @@ const isTabCompleted = (t: StepTab) => tabs.value.activeTab > t.id;
         },
       ]">
       <div
-        v-for="t in tabs.tabs"
-        :key="t"
+        v-for="(t, idx) in tabs.tabs"
+        :key="idx"
         class="step-item"
         :class="{
           'is-active': isTabActive(t),

From 449b9eaad8897ad0c9748c7aba4d39e8b6af2ae9 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:19:24 +0500
Subject: [PATCH 124/212] docs: add todo

---
 src/components/compounds/Steps/Steps.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Steps/Steps.vue b/src/components/compounds/Steps/Steps.vue
index 30f5ee0..d42b482 100644
--- a/src/components/compounds/Steps/Steps.vue
+++ b/src/components/compounds/Steps/Steps.vue
@@ -6,7 +6,7 @@ import { watchEffect } from "vue";
 const props = defineProps<{
   modelValue: number | string; // required
   size?: "is-small" | "is-medium" | "is-large";
-  type?: string; // todo union
+  type?: string; // todo update docs: add type to props table
   animated?: boolean;
 }>();
 

From 1ac925d66b3a4207f03613317c51dbf217df1d73 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:22:11 +0500
Subject: [PATCH 125/212] refactor: rename functions

---
 src/components/compounds/Steps/StepItem.vue | 6 +++---
 src/components/compounds/Steps/Steps.vue    | 4 ++--
 src/components/compounds/Tabs/Tab.vue       | 6 +++---
 src/components/compounds/Tabs/Tabs.vue      | 4 ++--
 src/utils/tabs-store.ts                     | 8 ++++----
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/compounds/Steps/StepItem.vue b/src/components/compounds/Steps/StepItem.vue
index a0de29a..fcc173f 100644
--- a/src/components/compounds/Steps/StepItem.vue
+++ b/src/components/compounds/Steps/StepItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { StepTab, StepTabsState } from "@/types/component-types";
-import { addToStore, useStore } from "@/utils/tabs-store";
+import { addTabToStore, useTabsStore } from "@/utils/tabs-store";
 import { computed, ref, watch } from "vue";
 
 const props = defineProps<{
@@ -12,10 +12,10 @@ const props = defineProps<{
 }>();
 
 const content = ref(null);
-const tabs = useStore<StepTabsState>();
+const tabs = useTabsStore<StepTabsState>();
 const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
 
-addToStore<StepTab>({ ...props, id });
+addTabToStore<StepTab>({ ...props, id });
 
 watch(
   () => tabs.value.tabs.findIndex((tab) => tab.id === id),
diff --git a/src/components/compounds/Steps/Steps.vue b/src/components/compounds/Steps/Steps.vue
index d42b482..b5d0a6b 100644
--- a/src/components/compounds/Steps/Steps.vue
+++ b/src/components/compounds/Steps/Steps.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { StepTab, StepTabsState } from "@/types/component-types";
-import { provideStore } from "@/utils/tabs-store";
+import { provideTabsStore } from "@/utils/tabs-store";
 import { watchEffect } from "vue";
 
 const props = defineProps<{
@@ -12,7 +12,7 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
-const tabs = provideStore<StepTabsState>({
+const tabs = provideTabsStore<StepTabsState>({
   activeTab: 0,
   activeHeight: null,
   tabs: [],
diff --git a/src/components/compounds/Tabs/Tab.vue b/src/components/compounds/Tabs/Tab.vue
index 2668fad..78027ea 100644
--- a/src/components/compounds/Tabs/Tab.vue
+++ b/src/components/compounds/Tabs/Tab.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Tab, TabsState } from "@/types/component-types";
-import { addToStore, useStore } from "@/utils/tabs-store";
+import { addTabToStore, useTabsStore } from "@/utils/tabs-store";
 import { computed, onMounted, onUpdated, useTemplateRef, watch } from "vue";
 
 const props = withDefaults(
@@ -16,7 +16,7 @@ const props = withDefaults(
 );
 
 const content = useTemplateRef<HTMLElement>("content");
-const tabs = useStore<TabsState>();
+const tabs = useTabsStore<TabsState>();
 const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
 const transitionName = computed(() => {
   return tabs.value.activeTab < id ? "slide-right" : "slide-left";
@@ -31,7 +31,7 @@ const updateActiveHeight = () => {
 onMounted(updateActiveHeight);
 onUpdated(updateActiveHeight);
 
-addToStore<Tab>({ ...props, id });
+addTabToStore<Tab>({ ...props, id });
 
 watch(
   () => tabs.value.tabs.findIndex((tab) => tab.id === id),
diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index ae50e1a..f51b3a6 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Tab, TabsState } from "@/types/component-types";
-import { provideStore } from "@/utils/tabs-store";
+import { provideTabsStore } from "@/utils/tabs-store";
 import { computed, watchEffect } from "vue";
 
 const props = defineProps<{
@@ -16,7 +16,7 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
-const tabs = provideStore<TabsState>({
+const tabs = provideTabsStore<TabsState>({
   activeTab: 0,
   activeHeight: null,
   tabs: [],
diff --git a/src/utils/tabs-store.ts b/src/utils/tabs-store.ts
index 3c7c87f..1d8a019 100644
--- a/src/utils/tabs-store.ts
+++ b/src/utils/tabs-store.ts
@@ -3,13 +3,13 @@ import { inject, provide, toRef } from "vue";
 
 const TabsSymbol = Symbol("Tabs");
 
-export function provideStore<T>(store: MaybeRef<T>) {
+export function provideTabsStore<T>(store: MaybeRef<T>) {
   const storeRef = toRef(store);
   provide(TabsSymbol, storeRef);
   return storeRef;
 }
 
-export function useStore<T>(): Ref<T> {
+export function useTabsStore<T>(): Ref<T> {
   const store = inject<Ref<T>>(TabsSymbol);
   if (!store) {
     throw new Error("no store provided");
@@ -17,9 +17,9 @@ export function useStore<T>(): Ref<T> {
   return store;
 }
 
-export function addToStore<Tab, T extends { tabs: Tab[] } = { tabs: Tab[] }>(
+export function addTabToStore<Tab, T extends { tabs: Tab[] } = { tabs: Tab[] }>(
   tab: Tab,
 ) {
-  const tabs = useStore<T>();
+  const tabs = useTabsStore<T>();
   tabs.value.tabs.push(tab);
 }

From cde4edd471481db2815868b47531911380b79f62 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:41:03 +0500
Subject: [PATCH 126/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Table/Table.vue | 284 ++++++++++-------------
 1 file changed, 128 insertions(+), 156 deletions(-)

diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index a81b719..0f55f5c 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -1,5 +1,5 @@
-<script>
-import { computed, reactive, ref, toRaw, watch } from "vue";
+<script setup lang="ts">
+import { computed, reactive, ref, toRaw, useSlots, watch } from "vue";
 import VButton from "../../primitives/Button/Button.vue";
 import VCheckbox from "../../primitives/Checkbox/Checkbox.vue";
 import VInput from "../../primitives/Input/Input.vue";
@@ -9,179 +9,151 @@ import VPagination from "../Pagination/Pagination.vue";
 
 const UNKNOW = "unknow";
 
-export default {
-  name: "VTable",
-  components: { VButton, VCheckbox, VSelect, VTag, VInput, VPagination },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    searchable: Boolean,
-    checkable: Boolean,
-    pagination: Boolean,
-    rowsPerPage: {
-      type: Number,
-      default: 5,
-    },
-    rowsPerPageOptions: {
-      type: Array,
-      default: () => [],
-    },
-    bordered: Boolean,
-    striped: Boolean,
-    narrow: Boolean,
-    hoverable: Boolean,
-    fullwidth: Boolean,
-    hasResetBtn: Boolean,
-    sortable: Boolean,
-    expandable: Boolean,
-    draggableRows: Boolean,
-    draggableColumns: Boolean,
-    // eslint-disable-next-line vue/no-unused-properties -- editable prop being used in template
-    editable: Boolean,
-    groupBy: String,
-    sticky: Boolean,
-    mobileCards: Boolean,
+const props = withDefaults(
+  defineProps<{
+    data?: object; // todo typed
+    searchable?: boolean;
+    checkable?: boolean;
+    pagination?: boolean;
+    rowsPerPage?: number;
+    rowsPerPageOptions?: number[]; // todo update docs: use 'Array<Number>', but not just 'Array'
+    bordered?: boolean;
+    striped?: boolean;
+    narrow?: boolean;
+    hoverable?: boolean;
+    fullwidth?: boolean;
+    hasResetBtn?: boolean;
+    sortable?: boolean;
+    expandable?: boolean;
+    draggableRows?: boolean;
+    draggableColumns?: boolean;
+    editable?: boolean;
+    groupBy?: string;
+    sticky?: boolean;
+    mobileCards?: boolean;
+  }>(),
+  {
+    data: () => ({}),
+    rowsPerPage: 5,
+    rowsPerPageOptions: () => [],
   },
+);
 
-  setup(props, { slots }) {
-    // datagrid instance reference
-    const data = ref(props.data);
-    const computedRowsPerPage = ref(props.rowsPerPage);
-    const currentPage = ref(0);
-    const search = reactive({});
-    const expandedRows = ref(new Set());
-    const expandedGroups = ref(new Set());
-    // handle checked all state per page
-    const checked = reactive({
-      0: false,
-    });
+const slots = useSlots();
 
-    // whenever pagination props changes, update the class state accordingly
-    // thsi way pagination settings are directly passed to props and indirectly passed to class
+// datagrid instance reference
+const data = ref(props.data);
+const computedRowsPerPage = ref(props.rowsPerPage);
+const currentPage = ref(0);
+const search = reactive({});
+const expandedRows = ref(new Set());
+const expandedGroups = ref(new Set());
+// handle checked all state per page
+const checked = reactive({
+  0: false,
+});
 
-    // page goes back to first when rowperpage changes
-    watch(computedRowsPerPage, () => {
-      props.data.rowsPerPage = computedRowsPerPage.value;
-      currentPage.value = 0;
-      props.data.switchPage();
-    });
+// whenever pagination props changes, update the class state accordingly
+// this way pagination settings are directly passed to props and indirectly passed to class
 
-    // compute new rows window whenever currentpage changes
-    watch(currentPage, () => {
-      props.data.currentPage = currentPage.value;
-      props.data.switchPage();
-    });
+// page goes back to first when rowperpage changes
+watch(computedRowsPerPage, () => {
+  props.data.rowsPerPage = computedRowsPerPage.value;
+  currentPage.value = 0;
+  props.data.switchPage();
+});
 
-    // compute rows window on first render as no change cb triggers
-    if (props.pagination) {
-      props.data.rowsPerPage = computedRowsPerPage.value;
-      props.data.switchPage();
-    }
+// compute new rows window whenever currentpage changes
+watch(currentPage, () => {
+  props.data.currentPage = currentPage.value;
+  props.data.switchPage();
+});
 
-    const sortColumn = (column) => {
-      props.data.sortByColumn(column.name, column.ascendant);
-      column.ascendant = !column.ascendant;
-    };
+// compute rows window on first render as no change cb triggers
+if (props.pagination) {
+  props.data.rowsPerPage = computedRowsPerPage.value;
+  props.data.switchPage();
+}
 
-    const toggleExpanded = (rowId) => {
-      if (expandedRows.value.has(rowId)) {
-        expandedRows.value.delete(rowId);
-        return;
-      }
-      expandedRows.value.add(rowId);
-    };
-
-    const toggleExpandedGroup = (group) => {
-      if (expandedGroups.value.has(group)) {
-        expandedGroups.value.delete(group);
-        return;
-      }
-      expandedGroups.value.add(group);
-    };
-
-    const countColumns = computed(() => {
-      return (
-        data.value.getColumns().length +
-        (props.checkable ? 1 : 0) +
-        (props.expandable ? 1 : 0)
-      );
-    });
+const sortColumn = (column) => {
+  props.data.sortByColumn(column.name, column.ascendant);
+  column.ascendant = !column.ascendant;
+};
 
-    const handlePageChange = (value) => {
-      currentPage.value = value - 1; // pagination handle indexes from 1, table from 0
-    };
+const toggleExpanded = (rowId) => {
+  if (expandedRows.value.has(rowId)) {
+    expandedRows.value.delete(rowId);
+    return;
+  }
+  expandedRows.value.add(rowId);
+};
 
-    const handleSort = (column) => {
-      if (props.sortable && column.dataType !== UNKNOW) {
-        sortColumn(column);
-      }
-    };
+const toggleExpandedGroup = (group) => {
+  if (expandedGroups.value.has(group)) {
+    expandedGroups.value.delete(group);
+    return;
+  }
+  expandedGroups.value.add(group);
+};
 
-    const columnClasses = (column) => {
-      return {
-        ...column.style,
-        "has-text-primary": column.selected,
-        "sticky-row": props.sticky,
-        "is-clickable": props.sortable && column.dataType !== UNKNOW,
-      };
-    };
+const countColumns = computed(() => {
+  return (
+    data.value.getColumns().length +
+    (props.checkable ? 1 : 0) +
+    (props.expandable ? 1 : 0)
+  );
+});
 
-    const selectedClasses = (row) => {
-      return {
-        "has-background-primary": row.selected,
-        "has-text-white": row.selected,
-      };
-    };
+const handlePageChange = (value) => {
+  currentPage.value = value - 1; // pagination handle indexes from 1, table from 0
+};
 
-    const cellClasses = (column) => {
-      return {
-        ...column.style,
-        "sticky-column": column.sticky,
-      };
-    };
+const handleSort = (column) => {
+  if (props.sortable && column.dataType !== UNKNOW) {
+    sortColumn(column);
+  }
+};
 
-    watch(
-      [checked],
-      () => {
-        data.value.toggleCheckAll(toRaw(checked)[currentPage.value]);
-      },
-      { deep: true },
-    );
+const columnClasses = (column) => {
+  return {
+    ...column.style,
+    "has-text-primary": column.selected,
+    "sticky-row": props.sticky,
+    "is-clickable": props.sortable && column.dataType !== UNKNOW,
+  };
+};
 
-    const isChecked = (row) => {
-      return data.value.checkedRows.has(row);
-    };
+const selectedClasses = (row) => {
+  return {
+    "has-background-primary": row.selected,
+    "has-text-white": row.selected,
+  };
+};
 
-    const hasHeader = computed(() => {
-      return slots.header || props.hasResetBtn;
-    });
+const cellClasses = (column) => {
+  return {
+    ...column.style,
+    "sticky-column": column.sticky,
+  };
+};
 
-    return {
-      props,
-      search,
-      expandedRows,
-      toggleExpanded,
-      expandedGroups,
-      toggleExpandedGroup,
-      countColumns,
-      handlePageChange,
-      handleSort,
-      columnClasses,
-      selectedClasses,
-      cellClasses,
-      slots,
-      hasHeader,
-      currentPage,
-      total: data.value.originalRows.length,
-      computedRowsPerPage,
-      checked,
-      isChecked,
-      UNKNOW,
-    };
+watch(
+  [checked],
+  () => {
+    data.value.toggleCheckAll(toRaw(checked)[currentPage.value]);
   },
+  { deep: true },
+);
+
+const isChecked = (row) => {
+  return data.value.checkedRows.has(row);
 };
+
+const hasHeader = computed(() => {
+  return slots.header || props.hasResetBtn;
+});
+
+const total = computed(() => data.value.originalRows.length);
 </script>
 
 <template>

From 0d457d5c44cbf4e46ec6a8890a8773938f9936e6 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:41:56 +0500
Subject: [PATCH 127/212] style: remove eslint-disable

---
 src/components/compounds/Table/Table.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index 0f55f5c..819e279 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -157,7 +157,6 @@ const total = computed(() => data.value.originalRows.length);
 </script>
 
 <template>
-  <!-- eslint-disable @pathscale/vue3/v-directive  -->
   <div class="v-table">
     <div
       class="table-wrapper table-container"

From b1ca47372c65fb0693ef90e69ebf6e28c9924493 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:43:39 +0500
Subject: [PATCH 128/212] style: fix paths

---
 src/components/compounds/Table/Table.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index 819e279..92e5118 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import VPagination from "@/components/compounds/Pagination/Pagination.vue";
+import VButton from "@/components/primitives/Button/Button.vue";
+import VCheckbox from "@/components/primitives/Checkbox/Checkbox.vue";
+import VInput from "@/components/primitives/Input/Input.vue";
+import VSelect from "@/components/primitives/Select/Select.vue";
+import VTag from "@/components/primitives/Tag/Tag.vue";
 import { computed, reactive, ref, toRaw, useSlots, watch } from "vue";
-import VButton from "../../primitives/Button/Button.vue";
-import VCheckbox from "../../primitives/Checkbox/Checkbox.vue";
-import VInput from "../../primitives/Input/Input.vue";
-import VSelect from "../../primitives/Select/Select.vue";
-import VTag from "../../primitives/Tag/Tag.vue";
-import VPagination from "../Pagination/Pagination.vue";
 
 const UNKNOW = "unknow";
 

From b3bb33dd0952db8db32a45d695922a2216a57866 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:45:21 +0500
Subject: [PATCH 129/212] refactor: typed data

---
 src/components/compounds/Table/Table.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index 92e5118..c3b08df 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -6,12 +6,13 @@ import VInput from "@/components/primitives/Input/Input.vue";
 import VSelect from "@/components/primitives/Select/Select.vue";
 import VTag from "@/components/primitives/Tag/Tag.vue";
 import { computed, reactive, ref, toRaw, useSlots, watch } from "vue";
+import DataGrid from "./DataGrid";
 
 const UNKNOW = "unknow";
 
 const props = withDefaults(
   defineProps<{
-    data?: object; // todo typed
+    data?: DataGrid;
     searchable?: boolean;
     checkable?: boolean;
     pagination?: boolean;
@@ -33,7 +34,7 @@ const props = withDefaults(
     mobileCards?: boolean;
   }>(),
   {
-    data: () => ({}),
+    data: () => new DataGrid(),
     rowsPerPage: 5,
     rowsPerPageOptions: () => [],
   },

From 9427e18e75fc3ff48f34ff2130ae83542a833df4 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:47:30 +0500
Subject: [PATCH 130/212] refactor: export types

---
 src/components/compounds/Table/DataGrid.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Table/DataGrid.ts b/src/components/compounds/Table/DataGrid.ts
index df4bde5..f81de52 100644
--- a/src/components/compounds/Table/DataGrid.ts
+++ b/src/components/compounds/Table/DataGrid.ts
@@ -3,7 +3,7 @@ import { toRaw } from "vue";
 type CellValue = string | number | boolean;
 type RowData = Record<string, CellValue | null | undefined>;
 
-type Column = {
+export type Column = {
   id?: number;
   name: string;
   caption: string;
@@ -19,7 +19,7 @@ type Column = {
   ): number;
 };
 
-type Row = {
+export type Row = {
   id: number;
   selected?: boolean;
 } & RowData;

From 78a3b771e8741c955b6dbb28e19cd43eabea1cdd Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:48:46 +0500
Subject: [PATCH 131/212] refactor: typing

---
 src/components/compounds/Table/DataGrid.ts | 1 +
 src/components/compounds/Table/Table.vue   | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Table/DataGrid.ts b/src/components/compounds/Table/DataGrid.ts
index f81de52..002d4a0 100644
--- a/src/components/compounds/Table/DataGrid.ts
+++ b/src/components/compounds/Table/DataGrid.ts
@@ -11,6 +11,7 @@ export type Column = {
   show: boolean;
   ascendant: boolean;
   selected?: boolean;
+  style?: object;
   sortFunction(
     a: RowData,
     b: RowData,
diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index c3b08df..bc72588 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -6,7 +6,7 @@ import VInput from "@/components/primitives/Input/Input.vue";
 import VSelect from "@/components/primitives/Select/Select.vue";
 import VTag from "@/components/primitives/Tag/Tag.vue";
 import { computed, reactive, ref, toRaw, useSlots, watch } from "vue";
-import DataGrid from "./DataGrid";
+import DataGrid, { type Column } from "./DataGrid";
 
 const UNKNOW = "unknow";
 
@@ -76,7 +76,7 @@ if (props.pagination) {
   props.data.switchPage();
 }
 
-const sortColumn = (column) => {
+const sortColumn = (column: Column) => {
   props.data.sortByColumn(column.name, column.ascendant);
   column.ascendant = !column.ascendant;
 };
@@ -109,13 +109,13 @@ const handlePageChange = (value) => {
   currentPage.value = value - 1; // pagination handle indexes from 1, table from 0
 };
 
-const handleSort = (column) => {
+const handleSort = (column: Column) => {
   if (props.sortable && column.dataType !== UNKNOW) {
     sortColumn(column);
   }
 };
 
-const columnClasses = (column) => {
+const columnClasses = (column: Column) => {
   return {
     ...column.style,
     "has-text-primary": column.selected,

From c0647ef8d4708870e05e981221c288cd8bbdbf94 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:50:52 +0500
Subject: [PATCH 132/212] refactor: typing

---
 src/components/compounds/Table/Table.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index bc72588..9b2ce2a 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -6,7 +6,7 @@ import VInput from "@/components/primitives/Input/Input.vue";
 import VSelect from "@/components/primitives/Select/Select.vue";
 import VTag from "@/components/primitives/Tag/Tag.vue";
 import { computed, reactive, ref, toRaw, useSlots, watch } from "vue";
-import DataGrid, { type Column } from "./DataGrid";
+import DataGrid, { type Column, type Row } from "./DataGrid";
 
 const UNKNOW = "unknow";
 
@@ -47,7 +47,7 @@ const data = ref(props.data);
 const computedRowsPerPage = ref(props.rowsPerPage);
 const currentPage = ref(0);
 const search = reactive({});
-const expandedRows = ref(new Set());
+const expandedRows = ref(new Set<Row["id"]>());
 const expandedGroups = ref(new Set());
 // handle checked all state per page
 const checked = reactive({
@@ -81,7 +81,7 @@ const sortColumn = (column: Column) => {
   column.ascendant = !column.ascendant;
 };
 
-const toggleExpanded = (rowId) => {
+const toggleExpanded = (rowId: Row["id"]) => {
   if (expandedRows.value.has(rowId)) {
     expandedRows.value.delete(rowId);
     return;

From 0d4bce3a52a9ae6983c80d4abc1bd5e03b034e2b Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:52:09 +0500
Subject: [PATCH 133/212] refactor: typing

---
 src/components/compounds/Table/DataGrid.ts | 2 +-
 src/components/compounds/Table/Table.vue   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Table/DataGrid.ts b/src/components/compounds/Table/DataGrid.ts
index 002d4a0..cf7cbf3 100644
--- a/src/components/compounds/Table/DataGrid.ts
+++ b/src/components/compounds/Table/DataGrid.ts
@@ -1,6 +1,6 @@
 import { toRaw } from "vue";
 
-type CellValue = string | number | boolean;
+export type CellValue = string | number | boolean;
 type RowData = Record<string, CellValue | null | undefined>;
 
 export type Column = {
diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index 9b2ce2a..fe3bb22 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -6,7 +6,7 @@ import VInput from "@/components/primitives/Input/Input.vue";
 import VSelect from "@/components/primitives/Select/Select.vue";
 import VTag from "@/components/primitives/Tag/Tag.vue";
 import { computed, reactive, ref, toRaw, useSlots, watch } from "vue";
-import DataGrid, { type Column, type Row } from "./DataGrid";
+import DataGrid, { type Column, type Row, type CellValue } from "./DataGrid";
 
 const UNKNOW = "unknow";
 
@@ -89,7 +89,7 @@ const toggleExpanded = (rowId: Row["id"]) => {
   expandedRows.value.add(rowId);
 };
 
-const toggleExpandedGroup = (group) => {
+const toggleExpandedGroup = (group: CellValue) => {
   if (expandedGroups.value.has(group)) {
     expandedGroups.value.delete(group);
     return;

From b51d8bced936ca287ebac851b29b646e2fba57be Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 16:58:55 +0500
Subject: [PATCH 134/212] refactor: typing emit

---
 src/components/compounds/Pagination/Pagination.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Pagination/Pagination.vue b/src/components/compounds/Pagination/Pagination.vue
index 21c0dc0..a105952 100644
--- a/src/components/compounds/Pagination/Pagination.vue
+++ b/src/components/compounds/Pagination/Pagination.vue
@@ -34,7 +34,10 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(["update:current", "change"]);
+const emit = defineEmits<{
+  (e: "update:current", num: number): void;
+  (e: "change", num: number): void;
+}>();
 
 const beforeCurrent = computed(() => {
   return intOrParseInt(props.rangeBefore);

From 066f2c75bf0543987c6245497b15eeb3b277e867 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 17:05:29 +0500
Subject: [PATCH 135/212] refactor: typing

---
 src/components/compounds/Table/DataGrid.ts | 1 +
 src/components/compounds/Table/Table.vue   | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Table/DataGrid.ts b/src/components/compounds/Table/DataGrid.ts
index cf7cbf3..0e6b4ad 100644
--- a/src/components/compounds/Table/DataGrid.ts
+++ b/src/components/compounds/Table/DataGrid.ts
@@ -12,6 +12,7 @@ export type Column = {
   ascendant: boolean;
   selected?: boolean;
   style?: object;
+  sticky?: boolean;
   sortFunction(
     a: RowData,
     b: RowData,
diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index fe3bb22..070e825 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -105,7 +105,7 @@ const countColumns = computed(() => {
   );
 });
 
-const handlePageChange = (value) => {
+const handlePageChange = (value: number) => {
   currentPage.value = value - 1; // pagination handle indexes from 1, table from 0
 };
 
@@ -124,14 +124,14 @@ const columnClasses = (column: Column) => {
   };
 };
 
-const selectedClasses = (row) => {
+const selectedClasses = (row: Row) => {
   return {
     "has-background-primary": row.selected,
     "has-text-white": row.selected,
   };
 };
 
-const cellClasses = (column) => {
+const cellClasses = (column: Column) => {
   return {
     ...column.style,
     "sticky-column": column.sticky,
@@ -146,7 +146,7 @@ watch(
   { deep: true },
 );
 
-const isChecked = (row) => {
+const isChecked = (row: Row) => {
   return data.value.checkedRows.has(row);
 };
 

From 7a941a44fa7bd1bf35fee3d7f76bca32e4c53366 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 17:06:16 +0500
Subject: [PATCH 136/212] refactor: typing

---
 src/components/compounds/Table/Table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index 070e825..3d78082 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -46,7 +46,7 @@ const slots = useSlots();
 const data = ref(props.data);
 const computedRowsPerPage = ref(props.rowsPerPage);
 const currentPage = ref(0);
-const search = reactive({});
+const search = reactive<Record<string, string>>({});
 const expandedRows = ref(new Set<Row["id"]>());
 const expandedGroups = ref(new Set());
 // handle checked all state per page

From a13fe9611b2e47aec8440db42d8c421cbb8908e7 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 17:08:33 +0500
Subject: [PATCH 137/212] refactor: typing

---
 src/components/primitives/Button/Button.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/primitives/Button/Button.vue b/src/components/primitives/Button/Button.vue
index bb5cddf..c34f7cf 100644
--- a/src/components/primitives/Button/Button.vue
+++ b/src/components/primitives/Button/Button.vue
@@ -14,7 +14,8 @@ const props = withDefaults(
       | "is-info"
       | "is-success"
       | "is-warning"
-      | "is-danger";
+      | "is-danger"
+      | string; // or combination of types for example 'is-light has-text-black'
     size?: "is-small" | "is-normal" | "is-medium" | "is-large";
     label?: string;
     rounded?: boolean;

From fc632bf44bf42922c35b5ae235e8c6903432d1c1 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 17:13:38 +0500
Subject: [PATCH 138/212] refactor: typing

---
 src/components/compounds/Table/Table.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/compounds/Table/Table.vue b/src/components/compounds/Table/Table.vue
index 3d78082..b4033e0 100644
--- a/src/components/compounds/Table/Table.vue
+++ b/src/components/compounds/Table/Table.vue
@@ -50,7 +50,7 @@ const search = reactive<Record<string, string>>({});
 const expandedRows = ref(new Set<Row["id"]>());
 const expandedGroups = ref(new Set());
 // handle checked all state per page
-const checked = reactive({
+const checked = reactive<Record<number, boolean>>({
   0: false,
 });
 
@@ -198,7 +198,7 @@ const total = computed(() => data.value.originalRows.length);
               :class="columnClasses(column)"
               @click="handleSort(column)"
               :draggable="draggableColumns"
-              @dragstart="data.onDragStartColumn($event, row, idx)"
+              @dragstart="data.onDragStartColumn($event, column, idx)"
               @drop="data.onDropColumn($event, column, idx)"
               @dragover="data.onDragOverColumn($event, column, idx)"
               @dragleave="data.onDragLeaveColumn($event, column, idx)">
@@ -252,7 +252,7 @@ const total = computed(() => data.value.originalRows.length);
                   :key="column.name"
                   :class="cellClasses(column)"
                   :contenteditable="props.editable"
-                  @blur="data.editCell(row, column, $event.target.textContent)">
+                  @blur="data.editCell(row, column, ($event.target as HTMLElement).textContent ?? '')">
                   <slot :name="column.name" :row="row">
                     {{ row[column.name] }}
                   </slot>
@@ -287,7 +287,7 @@ const total = computed(() => data.value.originalRows.length);
                     :key="column.name"
                     :class="column.style"
                     :contenteditable="props.editable"
-                    @blur="data.editCell(row, column, $event.target.textContent)">
+                    @blur="data.editCell(row, column, ($event.target as HTMLElement).textContent ?? '')">
                     <slot :name="column.name" :row="row">
                       {{ row[column.name] }}
                     </slot>

From 040f7432f8f67eed6e6a3ce569a5a3e3ea770e4c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 17:23:30 +0500
Subject: [PATCH 139/212] style: remove eslint comments

---
 src/components/compounds/Toast/helpers/event-bus.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/compounds/Toast/helpers/event-bus.js b/src/components/compounds/Toast/helpers/event-bus.js
index 4e95aa5..32bea81 100644
--- a/src/components/compounds/Toast/helpers/event-bus.js
+++ b/src/components/compounds/Toast/helpers/event-bus.js
@@ -1,5 +1,3 @@
-/* eslint-disable promise/prefer-await-to-callbacks -- ignore */
-// eslint-disable-next-line no-shadow -- ignore */
 class Event {
   constructor() {
     this.queue = {};

From 39118913aa35115da5a2f91b40719ed56fd93f2c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 17:36:27 +0500
Subject: [PATCH 140/212] style: rename to ts

---
 .../compounds/Toast/defaults/{positions.js => positions.ts}       | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/compounds/Toast/defaults/{positions.js => positions.ts} (100%)

diff --git a/src/components/compounds/Toast/defaults/positions.js b/src/components/compounds/Toast/defaults/positions.ts
similarity index 100%
rename from src/components/compounds/Toast/defaults/positions.js
rename to src/components/compounds/Toast/defaults/positions.ts

From 1a5ca66fd3d1edea7c7253dc7d718be1cadeec89 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 17:42:14 +0500
Subject: [PATCH 141/212] refactor: typing

---
 .../compounds/Toast/defaults/positions.ts      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/compounds/Toast/defaults/positions.ts b/src/components/compounds/Toast/defaults/positions.ts
index a9fa12c..d014816 100644
--- a/src/components/compounds/Toast/defaults/positions.ts
+++ b/src/components/compounds/Toast/defaults/positions.ts
@@ -1,13 +1,13 @@
-const POSITIONS = {
-  TOP_RIGHT: "top-right",
-  TOP: "top",
-  TOP_LEFT: "top-left",
-  BOTTOM_RIGHT: "bottom-right",
-  BOTTOM: "bottom",
-  BOTTOM_LEFT: "bottom-left",
-};
+enum Positions {
+  TOP_RIGHT = "top-right",
+  TOP = "top",
+  TOP_LEFT = "top-left",
+  BOTTOM_RIGHT = "bottom-right",
+  BOTTOM = "bottom",
+  BOTTOM_LEFT = "bottom-left",
+}
 
-export default Object.freeze(POSITIONS);
+export default Positions;
 
 export function definePosition(position, top, bottom) {
   let result = null;

From 33945171f3f7c36283cceedea397c76be565682d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 17:43:07 +0500
Subject: [PATCH 142/212] fix: enum name

---
 src/components/compounds/Toast/defaults/positions.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/compounds/Toast/defaults/positions.ts b/src/components/compounds/Toast/defaults/positions.ts
index d014816..9eb7879 100644
--- a/src/components/compounds/Toast/defaults/positions.ts
+++ b/src/components/compounds/Toast/defaults/positions.ts
@@ -12,15 +12,15 @@ export default Positions;
 export function definePosition(position, top, bottom) {
   let result = null;
   switch (position) {
-    case POSITIONS.TOP:
-    case POSITIONS.TOP_RIGHT:
-    case POSITIONS.TOP_LEFT:
+    case Positions.TOP:
+    case Positions.TOP_RIGHT:
+    case Positions.TOP_LEFT:
       result = top;
       break;
 
-    case POSITIONS.BOTTOM:
-    case POSITIONS.BOTTOM_RIGHT:
-    case POSITIONS.BOTTOM_LEFT:
+    case Positions.BOTTOM:
+    case Positions.BOTTOM_RIGHT:
+    case Positions.BOTTOM_LEFT:
       result = bottom;
       break;
     default:

From bb5dc6721590dbfcad201ebea5c08a47c44a8b87 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:16:52 +0500
Subject: [PATCH 143/212] refactor(compounds): modern vue sfc style

---
 src/components/compounds/Toast/Toaster.vue | 335 ++++++++++-----------
 1 file changed, 151 insertions(+), 184 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index cd559f8..f35dd11 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -8,7 +8,7 @@
 	</transition>
 </template>
 
-<script>
+<script setup lang="ts">
 // Credits: @MeForma/vue-toaster
 import {
   computed,
@@ -23,189 +23,156 @@ import eventBus from "./helpers/event-bus";
 import { removeElement } from "./helpers/remove-element";
 import Timer from "./helpers/timer";
 
-export default {
-  name: "Toast",
-  props: {
-    message: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: "is-primary",
-    },
-    position: {
-      type: String,
-      default: Positions.BOTTOM_RIGHT,
-      validator(value) {
-        return Object.values(Positions).includes(value);
-      },
-    },
-    maxToasts: {
-      type: [Number, Boolean, String],
-      default: false,
-    },
-    duration: {
-      type: [Number, Boolean, String],
-      default: 4000,
-    },
-    dismissible: {
-      type: Boolean,
-      default: true,
-    },
-    queue: {
-      type: Boolean,
-    },
-    pauseOnHover: {
-      type: Boolean,
-    },
-    onClose: {
-      type: Function,
-      // eslint-disable-next-line no-empty-function -- ignore
-      default() {},
+const props = withDefaults(
+  defineProps<{
+    message: string; // required
+    type?: string;
+    position?: Positions;
+    maxToasts?: false | number | string; // string for numeric strings only
+    duration?: false | number | string; // string for numeric strings only
+    dismissible?: boolean;
+    queue?: boolean;
+    pauseOnHover?: boolean;
+    onClose?: () => void;
+    onClick?: () => void;
+  }>(),
+  {
+    type: "is-primary",
+    position: Positions.BOTTOM_RIGHT,
+    maxToasts: false,
+    duration: 4000,
+    dismissible: true,
+    onClose: () => {},
+    onClick: () => {},
+  },
+);
+
+const root = ref(null);
+
+const state = reactive({
+  isActive: false,
+  parentTop: null,
+  parentBottom: null,
+  isHovered: false,
+  timer: null,
+});
+
+let queueTimer = null;
+
+const correctParent = computed(() => {
+  return definePosition(props.position, state.parentTop, state.parentBottom);
+});
+
+const transition = computed(() => {
+  return definePosition(
+    props.position,
+    {
+      enter: "fadeInDown",
+      leave: "fadeOut",
     },
-    onClick: {
-      type: Function,
-      // eslint-disable-next-line no-empty-function -- ignore
-      default() {},
+    {
+      enter: "fadeInUp",
+      leave: "fadeOut",
     },
-  },
-  setup(props) {
-    const root = ref(null);
-
-    const state = reactive({
-      isActive: false,
-      parentTop: null,
-      parentBottom: null,
-      isHovered: false,
-      timer: null,
-    });
-
-    let queueTimer = null;
-
-    const correctParent = computed(() => {
-      return definePosition(
-        props.position,
-        state.parentTop,
-        state.parentBottom,
-      );
-    });
-
-    const transition = computed(() => {
-      return definePosition(
-        props.position,
-        {
-          enter: "fadeInDown",
-          leave: "fadeOut",
-        },
-        {
-          enter: "fadeInUp",
-          leave: "fadeOut",
-        },
-      );
-    });
-
-    function createParents() {
-      state.parentTop = document.querySelector(".v-toast-container--top");
-      state.parentBottom = document.querySelector(".v-toast-container--bottom");
-
-      if (state.parentTop && state.parentBottom) return;
-
-      if (!state.parentTop) {
-        state.parentTop = document.createElement("div");
-        state.parentTop.className = "v-toast-container v-toast-container--top";
-      }
-
-      if (!state.parentBottom) {
-        state.parentBottom = document.createElement("div");
-        state.parentBottom.className =
-          "v-toast-container v-toast-container--bottom";
-      }
-    }
-
-    function setupContainer() {
-      const container = document.body;
-      container.append(state.parentTop);
-      container.append(state.parentBottom);
-    }
-
-    function shouldQueue() {
-      if (!props.queue && props.maxToasts === false) {
-        return false;
-      }
-
-      if (props.maxToasts !== false) {
-        return (
-          props.maxToasts <=
-          state.parentTop.childElementCount +
-            state.parentBottom.childElementCount
-        );
-      }
-
-      return (
-        state.parentTop.childElementCount > 0 ||
-        state.parentBottom.childElementCount > 0
-      );
-    }
-
-    function showNotice() {
-      if (shouldQueue()) {
-        queueTimer = setTimeout(showNotice, 250);
-        return;
-      }
-
-      correctParent.value.insertAdjacentElement("afterbegin", root.value);
-      state.isActive = true;
-
-      state.timer =
-        props.duration !== false ? new Timer(close, props.duration) : null;
-    }
-
-    function click() {
-      // biome-ignore lint/style/noArguments: <explanation>
-      Reflect.apply(props.onClick, null, arguments);
-
-      if (props.dismissible) {
-        close();
-      }
-    }
-
-    function toggleTimer(newVal) {
-      if (state.timer && props.pauseOnHover) {
-        newVal ? state.timer.pause() : state.timer.resume();
-      }
-    }
-
-    function stopTimer() {
-      state.timer?.stop();
-      clearTimeout(queueTimer);
-    }
-
-    function close() {
-      stopTimer();
-      state.isActive = false;
-      setTimeout(() => {
-        // biome-ignore lint/style/noArguments: <explanation>
-        Reflect.apply(props.onClose, null, arguments);
-        removeElement(root.value);
-      }, 150);
-    }
-
-    onBeforeMount(() => {
-      createParents();
-      setupContainer();
-    });
-
-    onMounted(() => {
-      showNotice();
-      eventBus.$on("toast-clear", close);
-    });
-
-    onBeforeUnmount(() => {
-      eventBus.$off("toast-clear", close);
-    });
-
-    return { state, transition, toggleTimer, click, root };
-  },
-};
+  );
+});
+
+function createParents() {
+  state.parentTop = document.querySelector(".v-toast-container--top");
+  state.parentBottom = document.querySelector(".v-toast-container--bottom");
+
+  if (state.parentTop && state.parentBottom) return;
+
+  if (!state.parentTop) {
+    state.parentTop = document.createElement("div");
+    state.parentTop.className = "v-toast-container v-toast-container--top";
+  }
+
+  if (!state.parentBottom) {
+    state.parentBottom = document.createElement("div");
+    state.parentBottom.className =
+      "v-toast-container v-toast-container--bottom";
+  }
+}
+
+function setupContainer() {
+  const container = document.body;
+  container.append(state.parentTop);
+  container.append(state.parentBottom);
+}
+
+function shouldQueue() {
+  if (!props.queue && props.maxToasts === false) {
+    return false;
+  }
+
+  if (props.maxToasts !== false) {
+    return (
+      props.maxToasts <=
+      state.parentTop.childElementCount + state.parentBottom.childElementCount
+    );
+  }
+
+  return (
+    state.parentTop.childElementCount > 0 ||
+    state.parentBottom.childElementCount > 0
+  );
+}
+
+function showNotice() {
+  if (shouldQueue()) {
+    queueTimer = setTimeout(showNotice, 250);
+    return;
+  }
+
+  correctParent.value.insertAdjacentElement("afterbegin", root.value);
+  state.isActive = true;
+
+  state.timer =
+    props.duration !== false ? new Timer(close, props.duration) : null;
+}
+
+function click() {
+  // biome-ignore lint/style/noArguments: <explanation>
+  Reflect.apply(props.onClick, null, arguments);
+
+  if (props.dismissible) {
+    close();
+  }
+}
+
+function toggleTimer(newVal) {
+  if (state.timer && props.pauseOnHover) {
+    newVal ? state.timer.pause() : state.timer.resume();
+  }
+}
+
+function stopTimer() {
+  state.timer?.stop();
+  clearTimeout(queueTimer);
+}
+
+function close() {
+  stopTimer();
+  state.isActive = false;
+  setTimeout(() => {
+    // biome-ignore lint/style/noArguments: <explanation>
+    Reflect.apply(props.onClose, null, arguments);
+    removeElement(root.value);
+  }, 150);
+}
+
+onBeforeMount(() => {
+  createParents();
+  setupContainer();
+});
+
+onMounted(() => {
+  showNotice();
+  eventBus.$on("toast-clear", close);
+});
+
+onBeforeUnmount(() => {
+  eventBus.$off("toast-clear", close);
+});
 </script>

From 37f0836cf75d5e0a507f1e8b936723b4be129ec5 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:17:35 +0500
Subject: [PATCH 144/212] style: rename to ts

---
 .../compounds/Toast/helpers/{event-bus.js => event-bus.ts}        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/compounds/Toast/helpers/{event-bus.js => event-bus.ts} (100%)

diff --git a/src/components/compounds/Toast/helpers/event-bus.js b/src/components/compounds/Toast/helpers/event-bus.ts
similarity index 100%
rename from src/components/compounds/Toast/helpers/event-bus.js
rename to src/components/compounds/Toast/helpers/event-bus.ts

From e4ef4b8097739c6b867565388f684c00421de8f7 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:18:21 +0500
Subject: [PATCH 145/212] style: remove eslint-disable

---
 src/components/compounds/Toast/helpers/remove-element.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/compounds/Toast/helpers/remove-element.js b/src/components/compounds/Toast/helpers/remove-element.js
index afb0bee..d3b5ee7 100644
--- a/src/components/compounds/Toast/helpers/remove-element.js
+++ b/src/components/compounds/Toast/helpers/remove-element.js
@@ -2,7 +2,6 @@ const removeElement = (el) => {
   if (typeof el.remove !== "undefined") {
     el.remove();
   } else {
-    // eslint-disable-next-line unicorn/prefer-node-remove -- ignore
     el.parentNode.removeChild(el);
   }
 };

From 2b2b357971d381d9c4c576d5ec2051cb4447788c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:18:40 +0500
Subject: [PATCH 146/212] style: rename to ts

---
 .../Toast/helpers/{remove-element.js => remove-element.ts}        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/compounds/Toast/helpers/{remove-element.js => remove-element.ts} (100%)

diff --git a/src/components/compounds/Toast/helpers/remove-element.js b/src/components/compounds/Toast/helpers/remove-element.ts
similarity index 100%
rename from src/components/compounds/Toast/helpers/remove-element.js
rename to src/components/compounds/Toast/helpers/remove-element.ts

From cc02c6a52ad58bb6b723f5eaee762686a3e3ae00 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:19:14 +0500
Subject: [PATCH 147/212] style: rename ts

---
 src/components/compounds/Toast/helpers/{timer.js => timer.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/compounds/Toast/helpers/{timer.js => timer.ts} (100%)

diff --git a/src/components/compounds/Toast/helpers/timer.js b/src/components/compounds/Toast/helpers/timer.ts
similarity index 100%
rename from src/components/compounds/Toast/helpers/timer.js
rename to src/components/compounds/Toast/helpers/timer.ts

From d07ae49f37f832f67c00fe748ba6506a9778e5d7 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:20:23 +0500
Subject: [PATCH 148/212] style: rename to ts

---
 src/components/compounds/Toast/{Toaster.js => Toaster.ts}       | 2 +-
 src/components/compounds/Toast/{api.js => api.ts}               | 0
 .../Toast/helpers/{mount-component.js => mount-component.ts}    | 0
 3 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/compounds/Toast/{Toaster.js => Toaster.ts} (85%)
 rename src/components/compounds/Toast/{api.js => api.ts} (100%)
 rename src/components/compounds/Toast/helpers/{mount-component.js => mount-component.ts} (100%)

diff --git a/src/components/compounds/Toast/Toaster.js b/src/components/compounds/Toast/Toaster.ts
similarity index 85%
rename from src/components/compounds/Toast/Toaster.js
rename to src/components/compounds/Toast/Toaster.ts
index 1a2e9ef..1b988a0 100644
--- a/src/components/compounds/Toast/Toaster.js
+++ b/src/components/compounds/Toast/Toaster.ts
@@ -1,6 +1,6 @@
 import Toaster from "./Toaster.vue";
 import createToaster from "./api.js";
-import ToasterPositions from "./defaults/positions.js";
+import ToasterPositions from "./defaults/positions";
 
 Toaster.install = (app, options = {}) => {
   const methods = createToaster(options);
diff --git a/src/components/compounds/Toast/api.js b/src/components/compounds/Toast/api.ts
similarity index 100%
rename from src/components/compounds/Toast/api.js
rename to src/components/compounds/Toast/api.ts
diff --git a/src/components/compounds/Toast/helpers/mount-component.js b/src/components/compounds/Toast/helpers/mount-component.ts
similarity index 100%
rename from src/components/compounds/Toast/helpers/mount-component.js
rename to src/components/compounds/Toast/helpers/mount-component.ts

From 3825cbc8b196f698572e5726ad60b4ebd2053200 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:22:28 +0500
Subject: [PATCH 149/212] style: typing

---
 src/components/compounds/Toast/Toaster.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index f35dd11..fa5fe7f 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -49,7 +49,12 @@ const props = withDefaults(
 
 const root = ref(null);
 
-const state = reactive({
+const state = reactive<{
+  isActive: boolean;
+  parentTop: Element | null;
+  parentBottom: Element | null;
+  isHovered: boolean;
+}>({
   isActive: false,
   parentTop: null,
   parentBottom: null,

From 4e48d670f53cb5bc5079921082fafbe520ad9d9d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:24:09 +0500
Subject: [PATCH 150/212] style: remove stying types

---
 src/components/compounds/Toast/Toaster.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index fa5fe7f..ceff5d7 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -28,8 +28,8 @@ const props = withDefaults(
     message: string; // required
     type?: string;
     position?: Positions;
-    maxToasts?: false | number | string; // string for numeric strings only
-    duration?: false | number | string; // string for numeric strings only
+    maxToasts?: number | false;
+    duration?: number | false;
     dismissible?: boolean;
     queue?: boolean;
     pauseOnHover?: boolean;

From 1125061b707ebdab8b85eaafd4be57572583ec2e Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:27:23 +0500
Subject: [PATCH 151/212] style: typing

---
 src/components/compounds/Toast/Toaster.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index ceff5d7..7963f7d 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -54,6 +54,7 @@ const state = reactive<{
   parentTop: Element | null;
   parentBottom: Element | null;
   isHovered: boolean;
+  timer: Timer | null;
 }>({
   isActive: false,
   parentTop: null,
@@ -62,7 +63,7 @@ const state = reactive<{
   timer: null,
 });
 
-let queueTimer = null;
+let queueTimer: number | null = null;
 
 const correctParent = computed(() => {
   return definePosition(props.position, state.parentTop, state.parentBottom);
@@ -126,7 +127,7 @@ function shouldQueue() {
 
 function showNotice() {
   if (shouldQueue()) {
-    queueTimer = setTimeout(showNotice, 250);
+    queueTimer = window.setTimeout(showNotice, 250);
     return;
   }
 

From 9d9ffa7130fda359212d27929b9a7701257c0240 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:28:34 +0500
Subject: [PATCH 152/212] style: typing

---
 src/components/compounds/Toast/Toaster.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 7963f7d..59519b0 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -147,7 +147,7 @@ function click() {
   }
 }
 
-function toggleTimer(newVal) {
+function toggleTimer(newVal: boolean) {
   if (state.timer && props.pauseOnHover) {
     newVal ? state.timer.pause() : state.timer.resume();
   }

From 1fbf3bddfb6abf1ac23ef9b2d598f08ceb487cdc Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:30:42 +0500
Subject: [PATCH 153/212] style: check for null

---
 src/components/compounds/Toast/Toaster.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 59519b0..e74a8dd 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -103,8 +103,8 @@ function createParents() {
 
 function setupContainer() {
   const container = document.body;
-  container.append(state.parentTop);
-  container.append(state.parentBottom);
+  if (state.parentTop) container.append(state.parentTop);
+  if (state.parentBottom) container.append(state.parentBottom);
 }
 
 function shouldQueue() {

From 4cefc0b4bf8598f5b41bf6d680c9bff1d8c291f5 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:31:09 +0500
Subject: [PATCH 154/212] style: typing

---
 src/components/compounds/Toast/Toaster.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index e74a8dd..703e354 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -103,8 +103,8 @@ function createParents() {
 
 function setupContainer() {
   const container = document.body;
-  if (state.parentTop) container.append(state.parentTop);
-  if (state.parentBottom) container.append(state.parentBottom);
+  container.append(state.parentTop as Element);
+  container.append(state.parentBottom as Element);
 }
 
 function shouldQueue() {

From ef2800fdb46243f22d13eb614af0cfc69e0075f2 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:33:31 +0500
Subject: [PATCH 155/212] style: reduce state touches

---
 src/components/compounds/Toast/Toaster.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 703e354..1b67b8d 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -51,8 +51,8 @@ const root = ref(null);
 
 const state = reactive<{
   isActive: boolean;
-  parentTop: Element | null;
-  parentBottom: Element | null;
+  parentTop: HTMLElement | null;
+  parentBottom: HTMLElement | null;
   isHovered: boolean;
   timer: Timer | null;
 }>({
@@ -90,14 +90,15 @@ function createParents() {
   if (state.parentTop && state.parentBottom) return;
 
   if (!state.parentTop) {
-    state.parentTop = document.createElement("div");
-    state.parentTop.className = "v-toast-container v-toast-container--top";
+    const parentTop = document.createElement("div");
+    parentTop.className = "v-toast-container v-toast-container--top";
+    state.parentTop = parentTop;
   }
 
   if (!state.parentBottom) {
-    state.parentBottom = document.createElement("div");
-    state.parentBottom.className =
-      "v-toast-container v-toast-container--bottom";
+    const parentBottom = document.createElement("div");
+    parentBottom.className = "v-toast-container v-toast-container--bottom";
+    state.parentBottom = parentBottom;
   }
 }
 

From aaf6856945ec7f31648fe317394a632f677ff250 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:34:52 +0500
Subject: [PATCH 156/212] style: typing

---
 src/components/compounds/Toast/Toaster.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 1b67b8d..6bf0dc1 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -104,8 +104,8 @@ function createParents() {
 
 function setupContainer() {
   const container = document.body;
-  container.append(state.parentTop as Element);
-  container.append(state.parentBottom as Element);
+  container.append(state.parentTop as HTMLElement);
+  container.append(state.parentBottom as HTMLElement);
 }
 
 function shouldQueue() {

From 411ad8c5428713caa83932bf7566d30ed2edc1c6 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:35:24 +0500
Subject: [PATCH 157/212] style: typing

---
 src/components/compounds/Toast/Toaster.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 6bf0dc1..04d3c89 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -116,13 +116,14 @@ function shouldQueue() {
   if (props.maxToasts !== false) {
     return (
       props.maxToasts <=
-      state.parentTop.childElementCount + state.parentBottom.childElementCount
+      (state.parentTop as HTMLElement).childElementCount +
+        (state.parentBottom as HTMLElement).childElementCount
     );
   }
 
   return (
-    state.parentTop.childElementCount > 0 ||
-    state.parentBottom.childElementCount > 0
+    (state.parentTop as HTMLElement).childElementCount > 0 ||
+    (state.parentBottom as HTMLElement).childElementCount > 0
   );
 }
 

From e51c787c0da8e1a119e56010240be30ba675e4d1 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:36:43 +0500
Subject: [PATCH 158/212] style: extract variables for more readability

---
 src/components/compounds/Toast/Toaster.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 04d3c89..2744996 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -113,18 +113,14 @@ function shouldQueue() {
     return false;
   }
 
+  const topCount = (state.parentTop as HTMLElement).childElementCount;
+  const botCount = (state.parentBottom as HTMLElement).childElementCount;
+
   if (props.maxToasts !== false) {
-    return (
-      props.maxToasts <=
-      (state.parentTop as HTMLElement).childElementCount +
-        (state.parentBottom as HTMLElement).childElementCount
-    );
+    return props.maxToasts <= topCount + botCount;
   }
 
-  return (
-    (state.parentTop as HTMLElement).childElementCount > 0 ||
-    (state.parentBottom as HTMLElement).childElementCount > 0
-  );
+  return topCount > 0 || botCount > 0;
 }
 
 function showNotice() {

From c4185503e1de09c1fe585de11b0b6b8574a4bb4d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:38:48 +0500
Subject: [PATCH 159/212] style: use undefined instead of null

---
 src/components/compounds/Toast/Toaster.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 2744996..22d3133 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -63,7 +63,7 @@ const state = reactive<{
   timer: null,
 });
 
-let queueTimer: number | null = null;
+let queueTimer: number | undefined = undefined;
 
 const correctParent = computed(() => {
   return definePosition(props.position, state.parentTop, state.parentBottom);
@@ -153,7 +153,7 @@ function toggleTimer(newVal: boolean) {
 
 function stopTimer() {
   state.timer?.stop();
-  clearTimeout(queueTimer);
+  window.clearTimeout(queueTimer);
 }
 
 function close() {

From 7d0e594483ff382c2d3d446ace65754b9d103901 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:40:48 +0500
Subject: [PATCH 160/212] refactor: typing

---
 src/components/compounds/Toast/helpers/event-bus.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Toast/helpers/event-bus.ts b/src/components/compounds/Toast/helpers/event-bus.ts
index 32bea81..e059be3 100644
--- a/src/components/compounds/Toast/helpers/event-bus.ts
+++ b/src/components/compounds/Toast/helpers/event-bus.ts
@@ -3,12 +3,12 @@ class Event {
     this.queue = {};
   }
 
-  $on(name, callback) {
+  $on(name: string, callback) {
     this.queue[name] = this.queue[name] || [];
     this.queue[name].push(callback);
   }
 
-  $off(name, callback) {
+  $off(name: string, callback) {
     if (this.queue[name]) {
       for (let i = 0; i < this.queue[name].length; i++) {
         if (this.queue[name][i] === callback) {
@@ -19,7 +19,8 @@ class Event {
     }
   }
 
-  $emit(name, data) {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  $emit(name: string, data?: any) {
     if (this.queue[name]) {
       for (const callback of this.queue[name]) {
         callback(data);

From b92224d32844690f36b5abe6f6d54b0cb30542b1 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:42:21 +0500
Subject: [PATCH 161/212] refactor: typing

---
 src/components/compounds/Toast/helpers/event-bus.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/helpers/event-bus.ts b/src/components/compounds/Toast/helpers/event-bus.ts
index e059be3..ab54ee0 100644
--- a/src/components/compounds/Toast/helpers/event-bus.ts
+++ b/src/components/compounds/Toast/helpers/event-bus.ts
@@ -1,9 +1,12 @@
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+type Callback = (data?: any) => void;
+
 class Event {
   constructor() {
     this.queue = {};
   }
 
-  $on(name: string, callback) {
+  $on(name: string, callback: Callback) {
     this.queue[name] = this.queue[name] || [];
     this.queue[name].push(callback);
   }

From 73fb880282b28fbe668a57888161d9ea82c9eff3 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:43:25 +0500
Subject: [PATCH 162/212] refactor: typing

---
 src/components/compounds/Toast/helpers/event-bus.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/helpers/event-bus.ts b/src/components/compounds/Toast/helpers/event-bus.ts
index ab54ee0..1f6f0b6 100644
--- a/src/components/compounds/Toast/helpers/event-bus.ts
+++ b/src/components/compounds/Toast/helpers/event-bus.ts
@@ -1,7 +1,11 @@
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
 type Callback = (data?: any) => void;
 
+type Queue = Record<string, Callback[]>;
+
 class Event {
+  queue: Queue;
+
   constructor() {
     this.queue = {};
   }
@@ -11,7 +15,7 @@ class Event {
     this.queue[name].push(callback);
   }
 
-  $off(name: string, callback) {
+  $off(name: string, callback: Callback) {
     if (this.queue[name]) {
       for (let i = 0; i < this.queue[name].length; i++) {
         if (this.queue[name][i] === callback) {

From 8e99d4c4adf1da620f037362c4a0b18e9edb249d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:44:13 +0500
Subject: [PATCH 163/212] refactor: rename

---
 src/components/compounds/Toast/helpers/event-bus.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/helpers/event-bus.ts b/src/components/compounds/Toast/helpers/event-bus.ts
index 1f6f0b6..a571518 100644
--- a/src/components/compounds/Toast/helpers/event-bus.ts
+++ b/src/components/compounds/Toast/helpers/event-bus.ts
@@ -3,7 +3,7 @@ type Callback = (data?: any) => void;
 
 type Queue = Record<string, Callback[]>;
 
-class Event {
+class EventBus {
   queue: Queue;
 
   constructor() {
@@ -36,4 +36,4 @@ class Event {
   }
 }
 
-export default new Event();
+export default new EventBus();

From e657640f144b574118a98662e78fb360097f58be Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:45:15 +0500
Subject: [PATCH 164/212] refactor: typing

---
 src/components/compounds/Toast/helpers/remove-element.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/helpers/remove-element.ts b/src/components/compounds/Toast/helpers/remove-element.ts
index d3b5ee7..b5ac313 100644
--- a/src/components/compounds/Toast/helpers/remove-element.ts
+++ b/src/components/compounds/Toast/helpers/remove-element.ts
@@ -1,8 +1,8 @@
-const removeElement = (el) => {
+const removeElement = (el: HTMLElement) => {
   if (typeof el.remove !== "undefined") {
     el.remove();
   } else {
-    el.parentNode.removeChild(el);
+    el.parentNode?.removeChild(el);
   }
 };
 

From 884973ce2d48da3dc70f9fe86554ae33668aacc8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:47:02 +0500
Subject: [PATCH 165/212] refactor: typing

---
 src/components/compounds/Toast/helpers/timer.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/helpers/timer.ts b/src/components/compounds/Toast/helpers/timer.ts
index b67687b..692b3cf 100644
--- a/src/components/compounds/Toast/helpers/timer.ts
+++ b/src/components/compounds/Toast/helpers/timer.ts
@@ -1,11 +1,18 @@
+type Callback = () => void;
+
 // https://stackoverflow.com/a/3969760
 export default class Timer {
-  constructor(callback, delay) {
+  startedAt: number;
+  callback: Callback;
+  delay: number;
+  timer: number;
+
+  constructor(callback: Callback, delay: number) {
     this.startedAt = Date.now();
     this.callback = callback;
     this.delay = delay;
 
-    this.timer = setTimeout(callback, delay);
+    this.timer = window.setTimeout(callback, delay);
   }
 
   pause() {

From fae71946fc0bf2d766fb6af0a3a330d997b25a15 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:47:31 +0500
Subject: [PATCH 166/212] refactor: window

---
 src/components/compounds/Toast/helpers/timer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/helpers/timer.ts b/src/components/compounds/Toast/helpers/timer.ts
index 692b3cf..e33ed66 100644
--- a/src/components/compounds/Toast/helpers/timer.ts
+++ b/src/components/compounds/Toast/helpers/timer.ts
@@ -23,10 +23,10 @@ export default class Timer {
   resume() {
     this.stop();
     this.startedAt = Date.now();
-    this.timer = setTimeout(this.callback, this.delay);
+    this.timer = window.setTimeout(this.callback, this.delay);
   }
 
   stop() {
-    clearTimeout(this.timer);
+    window.clearTimeout(this.timer);
   }
 }

From 6fc02837d0827fa1348755698b94f455a697bfc2 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:49:39 +0500
Subject: [PATCH 167/212] refactor: rename Positions to Position

---
 src/components/compounds/Toast/Toaster.ts      |  2 +-
 src/components/compounds/Toast/Toaster.vue     |  6 +++---
 .../defaults/{positions.ts => position.ts}     | 18 +++++++++---------
 3 files changed, 13 insertions(+), 13 deletions(-)
 rename src/components/compounds/Toast/defaults/{positions.ts => position.ts} (54%)

diff --git a/src/components/compounds/Toast/Toaster.ts b/src/components/compounds/Toast/Toaster.ts
index 1b988a0..f98777a 100644
--- a/src/components/compounds/Toast/Toaster.ts
+++ b/src/components/compounds/Toast/Toaster.ts
@@ -1,6 +1,6 @@
 import Toaster from "./Toaster.vue";
 import createToaster from "./api.js";
-import ToasterPositions from "./defaults/positions";
+import ToasterPositions from "./defaults/position";
 
 Toaster.install = (app, options = {}) => {
   const methods = createToaster(options);
diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 22d3133..4634879 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -18,7 +18,7 @@ import {
   reactive,
   ref,
 } from "vue";
-import Positions, { definePosition } from "./defaults/positions";
+import Position, { definePosition } from "./defaults/position";
 import eventBus from "./helpers/event-bus";
 import { removeElement } from "./helpers/remove-element";
 import Timer from "./helpers/timer";
@@ -27,7 +27,7 @@ const props = withDefaults(
   defineProps<{
     message: string; // required
     type?: string;
-    position?: Positions;
+    position?: Position;
     maxToasts?: number | false;
     duration?: number | false;
     dismissible?: boolean;
@@ -38,7 +38,7 @@ const props = withDefaults(
   }>(),
   {
     type: "is-primary",
-    position: Positions.BOTTOM_RIGHT,
+    position: Position.BOTTOM_RIGHT,
     maxToasts: false,
     duration: 4000,
     dismissible: true,
diff --git a/src/components/compounds/Toast/defaults/positions.ts b/src/components/compounds/Toast/defaults/position.ts
similarity index 54%
rename from src/components/compounds/Toast/defaults/positions.ts
rename to src/components/compounds/Toast/defaults/position.ts
index 9eb7879..af2259e 100644
--- a/src/components/compounds/Toast/defaults/positions.ts
+++ b/src/components/compounds/Toast/defaults/position.ts
@@ -1,4 +1,4 @@
-enum Positions {
+enum Position {
   TOP_RIGHT = "top-right",
   TOP = "top",
   TOP_LEFT = "top-left",
@@ -7,20 +7,20 @@ enum Positions {
   BOTTOM_LEFT = "bottom-left",
 }
 
-export default Positions;
+export default Position;
 
-export function definePosition(position, top, bottom) {
+export function definePosition(position: Position, top, bottom) {
   let result = null;
   switch (position) {
-    case Positions.TOP:
-    case Positions.TOP_RIGHT:
-    case Positions.TOP_LEFT:
+    case Position.TOP:
+    case Position.TOP_RIGHT:
+    case Position.TOP_LEFT:
       result = top;
       break;
 
-    case Positions.BOTTOM:
-    case Positions.BOTTOM_RIGHT:
-    case Positions.BOTTOM_LEFT:
+    case Position.BOTTOM:
+    case Position.BOTTOM_RIGHT:
+    case Position.BOTTOM_LEFT:
       result = bottom;
       break;
     default:

From e8a790d29f69a7890fbafc64475c2ac0e2330f0a Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:50:42 +0500
Subject: [PATCH 168/212] refactor: typing

---
 src/components/compounds/Toast/defaults/position.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/defaults/position.ts b/src/components/compounds/Toast/defaults/position.ts
index af2259e..1d200c9 100644
--- a/src/components/compounds/Toast/defaults/position.ts
+++ b/src/components/compounds/Toast/defaults/position.ts
@@ -9,8 +9,8 @@ enum Position {
 
 export default Position;
 
-export function definePosition(position: Position, top, bottom) {
-  let result = null;
+export function definePosition<T, B>(position: Position, top: T, bottom: B) {
+  let result: T | B;
   switch (position) {
     case Position.TOP:
     case Position.TOP_RIGHT:

From 40865deab56d55c762f1ce178ac5e8097571240d Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:52:20 +0500
Subject: [PATCH 169/212] refactor: useTemplateRef

---
 src/components/compounds/Toast/Toaster.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 4634879..3c50991 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -16,7 +16,7 @@ import {
   onBeforeUnmount,
   onMounted,
   reactive,
-  ref,
+  useTemplateRef,
 } from "vue";
 import Position, { definePosition } from "./defaults/position";
 import eventBus from "./helpers/event-bus";
@@ -47,7 +47,7 @@ const props = withDefaults(
   },
 );
 
-const root = ref(null);
+const root = useTemplateRef("root");
 
 const state = reactive<{
   isActive: boolean;

From a9784619afc264b18785a7e0fe5f0910b6ccf201 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:52:37 +0500
Subject: [PATCH 170/212] refactor: typing

---
 src/components/compounds/Toast/Toaster.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 3c50991..31e81a7 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -66,7 +66,11 @@ const state = reactive<{
 let queueTimer: number | undefined = undefined;
 
 const correctParent = computed(() => {
-  return definePosition(props.position, state.parentTop, state.parentBottom);
+  return definePosition(
+    props.position,
+    state.parentTop as HTMLElement,
+    state.parentBottom as HTMLElement,
+  );
 });
 
 const transition = computed(() => {

From da030730ca36edca537da9e3111879e30f5630a6 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:53:30 +0500
Subject: [PATCH 171/212] refactor: typing

---
 src/components/compounds/Toast/Toaster.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 31e81a7..e90eb52 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -133,7 +133,10 @@ function showNotice() {
     return;
   }
 
-  correctParent.value.insertAdjacentElement("afterbegin", root.value);
+  correctParent.value.insertAdjacentElement(
+    "afterbegin",
+    root.value as HTMLElement,
+  );
   state.isActive = true;
 
   state.timer =
@@ -166,7 +169,7 @@ function close() {
   setTimeout(() => {
     // biome-ignore lint/style/noArguments: <explanation>
     Reflect.apply(props.onClose, null, arguments);
-    removeElement(root.value);
+    removeElement(root.value as HTMLElement);
   }, 150);
 }
 

From 0adf39a597a9fd279944479385d6fa46b26e5d93 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:55:48 +0500
Subject: [PATCH 172/212] refactor: typing

---
 src/components/compounds/Toast/api.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index 6b5f943..7e5d887 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -4,7 +4,7 @@ import mount from "./helpers/mount-component";
 
 const Api = (globalOptions = {}) => {
   return {
-    show(message, options = {}) {
+    show(message: string, options = {}) {
       const localOptions = { message, ...options };
       const c = mount(Toaster, {
         props: { ...globalOptions, ...localOptions },
@@ -15,19 +15,19 @@ const Api = (globalOptions = {}) => {
     clear() {
       eventBus.$emit("toast-clear");
     },
-    success(message, options = {}) {
+    success(message: string, options = {}) {
       options.type = "is-success";
       return this.show(message, options);
     },
-    error(message, options = {}) {
+    error(message: string, options = {}) {
       options.type = "is-danger";
       return this.show(message, options);
     },
-    info(message, options = {}) {
+    info(message: string, options = {}) {
       options.type = "is-info";
       return this.show(message, options);
     },
-    warning(message, options = {}) {
+    warning(message: string, options = {}) {
       options.type = "is-warning";
       return this.show(message, options);
     },

From 005868285d7ed557b28254b31edd8555c8e48e55 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 18:57:33 +0500
Subject: [PATCH 173/212] refactor: typing

---
 .../compounds/Toast/helpers/mount-component.ts           | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/compounds/Toast/helpers/mount-component.ts b/src/components/compounds/Toast/helpers/mount-component.ts
index 56369b2..66fbe52 100644
--- a/src/components/compounds/Toast/helpers/mount-component.ts
+++ b/src/components/compounds/Toast/helpers/mount-component.ts
@@ -1,12 +1,15 @@
-import { h, render } from "vue";
+import { type Component, type VNode, h, render } from "vue";
 
 const createElement = () =>
   typeof document !== "undefined" && document.createElement("div");
 
-const mount = (component, { props, children, element, app } = {}) => {
+const mount = (
+  component: Component,
+  { props, children, element, app } = {},
+) => {
   let el = element || createElement();
 
-  let vNode = h(component, props, children);
+  let vNode: VNode | null = h(component, props, children);
 
   if (app?._context) {
     vNode.appContext = app._context;

From 2c918a3f0e5484c821499408566b227c0b153e4c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:00:32 +0500
Subject: [PATCH 174/212] refactor: typing

---
 src/components/compounds/Toast/Toaster.vue                | 2 +-
 src/components/compounds/Toast/helpers/mount-component.ts | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index e90eb52..dab3f36 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -47,7 +47,7 @@ const props = withDefaults(
   },
 );
 
-const root = useTemplateRef("root");
+const root = useTemplateRef<HTMLElement>("root");
 
 const state = reactive<{
   isActive: boolean;
diff --git a/src/components/compounds/Toast/helpers/mount-component.ts b/src/components/compounds/Toast/helpers/mount-component.ts
index 66fbe52..33fba5c 100644
--- a/src/components/compounds/Toast/helpers/mount-component.ts
+++ b/src/components/compounds/Toast/helpers/mount-component.ts
@@ -5,7 +5,8 @@ const createElement = () =>
 
 const mount = (
   component: Component,
-  { props, children, element, app } = {},
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  { props, children, element, app }: any = {},
 ) => {
   let el = element || createElement();
 

From c6178c79fd72400d09f8562cb917a539d34835ac Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:14:22 +0500
Subject: [PATCH 175/212] refactor: typing

---
 src/components/compounds/Toast/api.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index 7e5d887..7a41027 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -1,7 +1,18 @@
 import Toaster from "./Toaster.vue";
+import type Position from "./defaults/position";
 import eventBus from "./helpers/event-bus.js";
 import mount from "./helpers/mount-component";
 
+export type ToastOptions = {
+  type?: "is-success" | "is-danger";
+  position?: Position;
+  duration?: number | false;
+  dismissible?: boolean;
+  pauseOnHover?: boolean;
+  onClose?: () => void;
+  onClick?: () => void;
+};
+
 const Api = (globalOptions = {}) => {
   return {
     show(message: string, options = {}) {

From 56638e7bae96f6bca6b562c347b891cbce8c13ae Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:15:43 +0500
Subject: [PATCH 176/212] refactor: typing

---
 src/components/compounds/Toast/api.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index 7a41027..95e9226 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -4,7 +4,7 @@ import eventBus from "./helpers/event-bus.js";
 import mount from "./helpers/mount-component";
 
 export type ToastOptions = {
-  type?: "is-success" | "is-danger";
+  type?: "is-success" | "is-danger" | "is-info" | "is-warning";
   position?: Position;
   duration?: number | false;
   dismissible?: boolean;
@@ -26,19 +26,19 @@ const Api = (globalOptions = {}) => {
     clear() {
       eventBus.$emit("toast-clear");
     },
-    success(message: string, options = {}) {
+    success(message: string, options: ToastOptions = {}) {
       options.type = "is-success";
       return this.show(message, options);
     },
-    error(message: string, options = {}) {
+    error(message: string, options: ToastOptions = {}) {
       options.type = "is-danger";
       return this.show(message, options);
     },
-    info(message: string, options = {}) {
+    info(message: string, options: ToastOptions = {}) {
       options.type = "is-info";
       return this.show(message, options);
     },
-    warning(message: string, options = {}) {
+    warning(message: string, options: ToastOptions = {}) {
       options.type = "is-warning";
       return this.show(message, options);
     },

From f72431dd805c2af5d3ff66cfd3324cbf9e0968cd Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:17:13 +0500
Subject: [PATCH 177/212] refactor: typing

---
 src/components/compounds/Toast/api.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index 95e9226..e18a62b 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -3,7 +3,7 @@ import type Position from "./defaults/position";
 import eventBus from "./helpers/event-bus.js";
 import mount from "./helpers/mount-component";
 
-export type ToastOptions = {
+export interface ToastOptions {
   type?: "is-success" | "is-danger" | "is-info" | "is-warning";
   position?: Position;
   duration?: number | false;
@@ -11,7 +11,20 @@ export type ToastOptions = {
   pauseOnHover?: boolean;
   onClose?: () => void;
   onClick?: () => void;
-};
+}
+
+export interface ToastGlobalOptions extends ToastOptions {
+  message: string; // required
+  type?: string;
+  position?: Position;
+  maxToasts?: number | false;
+  duration?: number | false;
+  dismissible?: boolean;
+  queue?: boolean;
+  pauseOnHover?: boolean;
+  onClose?: () => void;
+  onClick?: () => void;
+}
 
 const Api = (globalOptions = {}) => {
   return {

From fba882fa9e1964dda776e4f61b8bcc148b3838d8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:17:45 +0500
Subject: [PATCH 178/212] refactor: typing

---
 src/components/compounds/Toast/api.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index e18a62b..c60c18f 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -14,16 +14,8 @@ export interface ToastOptions {
 }
 
 export interface ToastGlobalOptions extends ToastOptions {
-  message: string; // required
-  type?: string;
-  position?: Position;
   maxToasts?: number | false;
-  duration?: number | false;
-  dismissible?: boolean;
   queue?: boolean;
-  pauseOnHover?: boolean;
-  onClose?: () => void;
-  onClick?: () => void;
 }
 
 const Api = (globalOptions = {}) => {

From b52edea18472f43e5d95fd05ccb4a4ee09a1c852 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:18:35 +0500
Subject: [PATCH 179/212] refactor: typing

---
 src/components/compounds/Toast/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index c60c18f..b9fa0ad 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -18,7 +18,7 @@ export interface ToastGlobalOptions extends ToastOptions {
   queue?: boolean;
 }
 
-const Api = (globalOptions = {}) => {
+const Api = (globalOptions: ToastGlobalOptions = {}) => {
   return {
     show(message: string, options = {}) {
       const localOptions = { message, ...options };

From 2efb6ab6ea3bcca548b9027c6dae3bc2a7a68e4f Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:18:55 +0500
Subject: [PATCH 180/212] refactor: typing

---
 src/components/compounds/Toast/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index b9fa0ad..242aef0 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -20,7 +20,7 @@ export interface ToastGlobalOptions extends ToastOptions {
 
 const Api = (globalOptions: ToastGlobalOptions = {}) => {
   return {
-    show(message: string, options = {}) {
+    show(message: string, options: ToastOptions = {}) {
       const localOptions = { message, ...options };
       const c = mount(Toaster, {
         props: { ...globalOptions, ...localOptions },

From 7f3f1bfb089b176ae46ed1996793cebde87405a4 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:19:34 +0500
Subject: [PATCH 181/212] refactor: typing

---
 src/components/compounds/Toast/Toaster.vue | 45 +++++++++++-----------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index dab3f36..f2358ee 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -23,29 +23,28 @@ import eventBus from "./helpers/event-bus";
 import { removeElement } from "./helpers/remove-element";
 import Timer from "./helpers/timer";
 
-const props = withDefaults(
-  defineProps<{
-    message: string; // required
-    type?: string;
-    position?: Position;
-    maxToasts?: number | false;
-    duration?: number | false;
-    dismissible?: boolean;
-    queue?: boolean;
-    pauseOnHover?: boolean;
-    onClose?: () => void;
-    onClick?: () => void;
-  }>(),
-  {
-    type: "is-primary",
-    position: Position.BOTTOM_RIGHT,
-    maxToasts: false,
-    duration: 4000,
-    dismissible: true,
-    onClose: () => {},
-    onClick: () => {},
-  },
-);
+interface IProps {
+  message: string; // required
+  type?: string;
+  position?: Position;
+  maxToasts?: number | false;
+  duration?: number | false;
+  dismissible?: boolean;
+  queue?: boolean;
+  pauseOnHover?: boolean;
+  onClose?: () => void;
+  onClick?: () => void;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  type: "is-primary",
+  position: Position.BOTTOM_RIGHT,
+  maxToasts: false,
+  duration: 4000,
+  dismissible: true,
+  onClose: () => {},
+  onClick: () => {},
+});
 
 const root = useTemplateRef<HTMLElement>("root");
 

From 8884fbbb4ac7a5af5a900b2a6fdc4bbd6b246de7 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:22:37 +0500
Subject: [PATCH 182/212] refactor: typing

---
 src/components/compounds/Toast/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index 242aef0..d57d958 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -4,7 +4,7 @@ import eventBus from "./helpers/event-bus.js";
 import mount from "./helpers/mount-component";
 
 export interface ToastOptions {
-  type?: "is-success" | "is-danger" | "is-info" | "is-warning";
+  type?: "is-success" | "is-danger" | "is-info" | "is-warning" | "is-primary";
   position?: Position;
   duration?: number | false;
   dismissible?: boolean;

From 154ee4dd31f56d6ea912d22f21e566a6da62be76 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:24:04 +0500
Subject: [PATCH 183/212] refactor: typing

---
 src/components/compounds/Toast/Toaster.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index f2358ee..8bda0ca 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -18,14 +18,15 @@ import {
   reactive,
   useTemplateRef,
 } from "vue";
+import type { ToastGlobalOptions, ToastOptions } from "./api";
 import Position, { definePosition } from "./defaults/position";
 import eventBus from "./helpers/event-bus";
 import { removeElement } from "./helpers/remove-element";
 import Timer from "./helpers/timer";
 
-interface IProps {
+interface IProps extends ToastOptions, ToastGlobalOptions {
   message: string; // required
-  type?: string;
+  type?: "is-success" | "is-danger" | "is-info" | "is-warning" | "is-primary";
   position?: Position;
   maxToasts?: number | false;
   duration?: number | false;

From e5982da6b00ab6e4314a88f0270a786209e6ba5f Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:36:13 +0500
Subject: [PATCH 184/212] refactor: typing

---
 src/components/compounds/Toast/Toaster.vue | 17 ++---------------
 src/components/compounds/Toast/api.ts      |  7 ++++++-
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 8bda0ca..7a98e1e 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -18,26 +18,13 @@ import {
   reactive,
   useTemplateRef,
 } from "vue";
-import type { ToastGlobalOptions, ToastOptions } from "./api";
+import type { ToasterProps } from "./api";
 import Position, { definePosition } from "./defaults/position";
 import eventBus from "./helpers/event-bus";
 import { removeElement } from "./helpers/remove-element";
 import Timer from "./helpers/timer";
 
-interface IProps extends ToastOptions, ToastGlobalOptions {
-  message: string; // required
-  type?: "is-success" | "is-danger" | "is-info" | "is-warning" | "is-primary";
-  position?: Position;
-  maxToasts?: number | false;
-  duration?: number | false;
-  dismissible?: boolean;
-  queue?: boolean;
-  pauseOnHover?: boolean;
-  onClose?: () => void;
-  onClick?: () => void;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
+const props = withDefaults(defineProps<ToasterProps>(), {
   type: "is-primary",
   position: Position.BOTTOM_RIGHT,
   maxToasts: false,
diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index d57d958..e4376f6 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -18,12 +18,17 @@ export interface ToastGlobalOptions extends ToastOptions {
   queue?: boolean;
 }
 
+export interface ToasterProps extends ToastOptions, ToastGlobalOptions {
+  message: string; // required
+}
+
 const Api = (globalOptions: ToastGlobalOptions = {}) => {
   return {
     show(message: string, options: ToastOptions = {}) {
       const localOptions = { message, ...options };
+      const mergedOptions: ToasterProps = { ...globalOptions, ...localOptions };
       const c = mount(Toaster, {
-        props: { ...globalOptions, ...localOptions },
+        props: mergedOptions,
       });
 
       return c;

From 834e611886e7e6f737c01421095f40db74b1ee6a Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:38:45 +0500
Subject: [PATCH 185/212] docs: todo delete

---
 src/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.vue b/src/App.vue
index 7296d6a..d862e7a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
 </template>
 
 <script>
+// todo delete
 import HelloWorld from "./components/HelloWorld.vue";
 
 export default {

From 7a80bad3b185570169fd84a14b223af1d21b34f6 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:39:09 +0500
Subject: [PATCH 186/212] refactor: rename ToastApi

---
 src/components/compounds/Toast/api.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/api.ts
index e4376f6..04b3559 100644
--- a/src/components/compounds/Toast/api.ts
+++ b/src/components/compounds/Toast/api.ts
@@ -22,7 +22,7 @@ export interface ToasterProps extends ToastOptions, ToastGlobalOptions {
   message: string; // required
 }
 
-const Api = (globalOptions: ToastGlobalOptions = {}) => {
+const ToastApi = (globalOptions: ToastGlobalOptions = {}) => {
   return {
     show(message: string, options: ToastOptions = {}) {
       const localOptions = { message, ...options };
@@ -55,4 +55,4 @@ const Api = (globalOptions: ToastGlobalOptions = {}) => {
   };
 };
 
-export default Api;
+export default ToastApi;

From 4a4532e43dfa0b828f344d3f0dbc7906099ed795 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:40:37 +0500
Subject: [PATCH 187/212] refactor: typing

---
 src/components/compounds/Toast/Toaster.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Toast/Toaster.ts b/src/components/compounds/Toast/Toaster.ts
index f98777a..5641f71 100644
--- a/src/components/compounds/Toast/Toaster.ts
+++ b/src/components/compounds/Toast/Toaster.ts
@@ -1,8 +1,9 @@
+import type { App } from "vue";
 import Toaster from "./Toaster.vue";
 import createToaster from "./api.js";
 import ToasterPositions from "./defaults/position";
 
-Toaster.install = (app, options = {}) => {
+Toaster.install = (app: App, options = {}) => {
   const methods = createToaster(options);
   app.config.globalProperties.$toast = methods;
   app.provide("$toast", methods);

From 1d2491030f9cdca4994c3b70c9636068eb0896b8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:42:09 +0500
Subject: [PATCH 188/212] refactor: typing

---
 src/components/compounds/Toast/Toaster.ts               | 2 +-
 src/components/compounds/Toast/Toaster.vue              | 2 +-
 src/components/compounds/Toast/{api.ts => toast-api.ts} | 0
 src/components/index.js                                 | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/compounds/Toast/{api.ts => toast-api.ts} (100%)

diff --git a/src/components/compounds/Toast/Toaster.ts b/src/components/compounds/Toast/Toaster.ts
index 5641f71..4bc1286 100644
--- a/src/components/compounds/Toast/Toaster.ts
+++ b/src/components/compounds/Toast/Toaster.ts
@@ -1,7 +1,7 @@
 import type { App } from "vue";
 import Toaster from "./Toaster.vue";
-import createToaster from "./api.js";
 import ToasterPositions from "./defaults/position";
+import createToaster from "./toast-api";
 
 Toaster.install = (app: App, options = {}) => {
   const methods = createToaster(options);
diff --git a/src/components/compounds/Toast/Toaster.vue b/src/components/compounds/Toast/Toaster.vue
index 7a98e1e..b563a4e 100644
--- a/src/components/compounds/Toast/Toaster.vue
+++ b/src/components/compounds/Toast/Toaster.vue
@@ -18,11 +18,11 @@ import {
   reactive,
   useTemplateRef,
 } from "vue";
-import type { ToasterProps } from "./api";
 import Position, { definePosition } from "./defaults/position";
 import eventBus from "./helpers/event-bus";
 import { removeElement } from "./helpers/remove-element";
 import Timer from "./helpers/timer";
+import type { ToasterProps } from "./toast-api";
 
 const props = withDefaults(defineProps<ToasterProps>(), {
   type: "is-primary",
diff --git a/src/components/compounds/Toast/api.ts b/src/components/compounds/Toast/toast-api.ts
similarity index 100%
rename from src/components/compounds/Toast/api.ts
rename to src/components/compounds/Toast/toast-api.ts
diff --git a/src/components/index.js b/src/components/index.js
index 8b5ecfb..d540079 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -35,7 +35,7 @@ export {
   default as Toaster,
   ToasterPositions,
   createToaster,
-} from "./compounds/Toast/Toaster.js";
+} from "./compounds/Toast/Toaster";
 export { default as VAccordion } from "./compounds/Accordion/Accordion.vue";
 export { default as VAccordionMenu } from "./compounds/Accordion/AccordionMenu.vue";
 export { default as VBreadcrumb } from "./compounds/Breadcrumb/Breadcrumb.vue";

From b02fdff1461e3a2f43046aff2d5c55bca270f3c1 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:44:34 +0500
Subject: [PATCH 189/212] refactor: useTemplateRef

---
 src/components/compounds/Steps/StepItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/compounds/Steps/StepItem.vue b/src/components/compounds/Steps/StepItem.vue
index fcc173f..8b68df8 100644
--- a/src/components/compounds/Steps/StepItem.vue
+++ b/src/components/compounds/Steps/StepItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { StepTab, StepTabsState } from "@/types/component-types";
 import { addTabToStore, useTabsStore } from "@/utils/tabs-store";
-import { computed, ref, watch } from "vue";
+import { computed, useTemplateRef, watch } from "vue";
 
 const props = defineProps<{
   title?: string;
@@ -11,7 +11,7 @@ const props = defineProps<{
   clickable?: boolean;
 }>();
 
-const content = ref(null);
+const content = useTemplateRef<HTMLElement>("content");
 const tabs = useTabsStore<StepTabsState>();
 const id = JSON.parse(JSON.stringify(tabs.value.tabs)).length;
 

From f4ad8fd83f94efc7cb044bb75682232155669d16 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:55:19 +0500
Subject: [PATCH 190/212] refactor: modern vue sfc style

---
 .../primitives/Calendar/Calendar.vue          | 140 ++++++++----------
 1 file changed, 61 insertions(+), 79 deletions(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 9719d5d..99dd23e 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -2,93 +2,75 @@
   <input ref="input" :type="type" />
 </template>
 
-<script>
+<script setup lang="ts">
 import { inject, onMounted, ref } from "vue";
 
-export default {
-  name: "VCalendar",
-  props: {
-    clearable: {
-      type: Boolean,
-    },
-    dialog: {
-      type: Boolean,
-    },
-    inline: {
-      type: Boolean,
-    },
-    range: {
-      type: Boolean,
-    },
-    options: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    type: {
-      type: String,
-      default: "datetime",
-    },
-    modelValue: [Date, Array],
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    dialog?: boolean;
+    inline?: boolean;
+    range?: boolean;
+    options?: object; // todo typed
+    type?: "date" | "time" | "datetime";
+    modelValue?: Date | Date[];
+  }>(),
+  {
+    options: () => ({}),
+    type: "datetime",
   },
-  emits: ["update:modelValue", "select"],
-  setup(props, { emit, slots }) {
-    const date = ref([null, null]);
-    const input = ref(null);
+);
 
-    onMounted(() => {
-      const bulmaCalendar = inject("$bulmaCalendar");
-      if (!bulmaCalendar) {
-        throw new Error(
-          "BulmaCalendar component requires the bulmaCalendar service to be provided",
-        );
-      }
-      // Set date
-      if (props.range) {
-        if (Array.isArray(props.modelValue)) {
-          date.value = props.modelValue;
-        }
-      } else {
-        date.value[0] = props.modelValue;
-      }
+const emit = defineEmits(["update:modelValue", "select"]);
 
-      const calendar = bulmaCalendar.attach(input.value, {
-        ...props.options,
-        displayMode: props.inline
-          ? "inline"
-          : props.dialog
-            ? "dialog"
-            : "default",
-        isRange: props.range,
-        showClearButton: props.clearable,
-        startDate: date.value[0],
-        startTime: date.value[0],
-        endDate: date.value[1],
-        endTime: date.value[1],
-      });
+const date = ref([null, null]);
+const input = ref(null);
 
-      calendar[0].on("save", (e) => {
-        date.value = [e.data.startDate, e.data.endDate];
+onMounted(() => {
+  const bulmaCalendar = inject("$bulmaCalendar");
+  if (!bulmaCalendar) {
+    throw new Error(
+      "BulmaCalendar component requires the bulmaCalendar service to be provided",
+    );
+  }
+  // Set date
+  if (props.range) {
+    if (Array.isArray(props.modelValue)) {
+      date.value = props.modelValue;
+    }
+  } else {
+    date.value[0] = props.modelValue;
+  }
 
-        if (props.range) {
-          emit("update:modelValue", date.value);
-          return;
-        }
+  const calendar = bulmaCalendar.attach(input.value, {
+    ...props.options,
+    displayMode: props.inline ? "inline" : props.dialog ? "dialog" : "default",
+    isRange: props.range,
+    showClearButton: props.clearable,
+    startDate: date.value[0],
+    startTime: date.value[0],
+    endDate: date.value[1],
+    endTime: date.value[1],
+  });
 
-        emit("update:modelValue", date.value[0]);
-      });
+  calendar[0].on("save", (e) => {
+    date.value = [e.data.startDate, e.data.endDate];
 
-      calendar[0].on("select", (e) => {
-        if (props.range) {
-          emit("select", [e.data.startDate, e.data.endDate]);
-          return;
-        }
+    if (props.range) {
+      emit("update:modelValue", date.value);
+      return;
+    }
 
-        emit("select", e.data.startDate);
-      });
-    });
-    return { input };
-  },
-};
+    emit("update:modelValue", date.value[0]);
+  });
+
+  calendar[0].on("select", (e) => {
+    if (props.range) {
+      emit("select", [e.data.startDate, e.data.endDate]);
+      return;
+    }
+
+    emit("select", e.data.startDate);
+  });
+});
 </script>

From d2fb2e723da038594e3f75836e48719a0da2fc7b Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:56:38 +0500
Subject: [PATCH 191/212] refactor: modern vue sfc style

---
 src/components/primitives/Calendar/Calendar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 99dd23e..0c744c3 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
     range?: boolean;
     options?: object; // todo typed
     type?: "date" | "time" | "datetime";
-    modelValue?: Date | Date[];
+    modelValue?: Date | [Date, Date];
   }>(),
   {
     options: () => ({}),
@@ -23,7 +23,7 @@ const props = withDefaults(
 
 const emit = defineEmits(["update:modelValue", "select"]);
 
-const date = ref([null, null]);
+const date = ref<[Date | null, Date | null]>([null, null]);
 const input = ref(null);
 
 onMounted(() => {

From 388e3d2f488d8d8cb8d17dab8d81c96cd4d8a1e3 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:58:10 +0500
Subject: [PATCH 192/212] feat: add firstIfArray

---
 src/utils/functions.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index 66ca916..31cef5c 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -37,3 +37,10 @@ export const intOrParseInt = (num: number | string): number => {
   }
   return Number.parseInt(num as string);
 };
+
+/**
+ * Returns typed version of first element of array
+ */
+export function firstIfArray<T>(arr: T | T[]): T {
+  return Array.isArray(arr) ? arr[0] : arr;
+}

From 889a58c687801bf717c5043f7105dcee7509a00b Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 19:59:28 +0500
Subject: [PATCH 193/212] refactor: typing

---
 src/components/primitives/Calendar/Calendar.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 0c744c3..bddb287 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { firstIfArray } from "@/utils/functions";
 import { inject, onMounted, ref } from "vue";
 
 const props = withDefaults(
@@ -23,7 +24,9 @@ const props = withDefaults(
 
 const emit = defineEmits(["update:modelValue", "select"]);
 
-const date = ref<[Date | null, Date | null]>([null, null]);
+type DateRange = [Date | null | undefined, Date | null | undefined];
+
+const date = ref<DateRange>([null, null]);
 const input = ref(null);
 
 onMounted(() => {
@@ -39,7 +42,7 @@ onMounted(() => {
       date.value = props.modelValue;
     }
   } else {
-    date.value[0] = props.modelValue;
+    date.value[0] = firstIfArray(props.modelValue);
   }
 
   const calendar = bulmaCalendar.attach(input.value, {

From b27b9d9b38f7474c572848c30b42b4820a98fb33 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:07:05 +0500
Subject: [PATCH 194/212] refactor: typing

---
 src/components/primitives/Calendar/Calendar.vue      |  3 ++-
 src/components/primitives/Calendar/calendar-types.ts | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/components/primitives/Calendar/calendar-types.ts

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index bddb287..a52ab0b 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -5,6 +5,7 @@
 <script setup lang="ts">
 import { firstIfArray } from "@/utils/functions";
 import { inject, onMounted, ref } from "vue";
+import type { BulmaCalendarOptions } from "./calendar-types";
 
 const props = withDefaults(
   defineProps<{
@@ -12,7 +13,7 @@ const props = withDefaults(
     dialog?: boolean;
     inline?: boolean;
     range?: boolean;
-    options?: object; // todo typed
+    options?: BulmaCalendarOptions;
     type?: "date" | "time" | "datetime";
     modelValue?: Date | [Date, Date];
   }>(),
diff --git a/src/components/primitives/Calendar/calendar-types.ts b/src/components/primitives/Calendar/calendar-types.ts
new file mode 100644
index 0000000..a645e18
--- /dev/null
+++ b/src/components/primitives/Calendar/calendar-types.ts
@@ -0,0 +1,10 @@
+/**
+ * https://bulma-calendar.onrender.com/#options
+ */
+export interface BulmaCalendarOptions {
+  type?: "date" | "time" | "datetime";
+}
+
+export interface BulmaCalendar {
+  attach: () => void;
+}

From 3172b0eb54eebeba9ec60a931dd9ab247ff82c96 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:07:44 +0500
Subject: [PATCH 195/212] refactor: useTemplateRef

---
 src/components/primitives/Calendar/Calendar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index a52ab0b..b9ed353 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { firstIfArray } from "@/utils/functions";
-import { inject, onMounted, ref } from "vue";
+import { inject, onMounted, ref, useTemplateRef } from "vue";
 import type { BulmaCalendarOptions } from "./calendar-types";
 
 const props = withDefaults(
@@ -28,7 +28,7 @@ const emit = defineEmits(["update:modelValue", "select"]);
 type DateRange = [Date | null | undefined, Date | null | undefined];
 
 const date = ref<DateRange>([null, null]);
-const input = ref(null);
+const input = useTemplateRef<HTMLInputElement>("input");
 
 onMounted(() => {
   const bulmaCalendar = inject("$bulmaCalendar");

From 54957cafab9d17f1defb83133520307c90aa6299 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:10:50 +0500
Subject: [PATCH 196/212] refactor: useTemplateRef

---
 src/components/primitives/Calendar/Calendar.vue      | 4 ++--
 src/components/primitives/Calendar/calendar-types.ts | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index b9ed353..78ddbef 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import { firstIfArray } from "@/utils/functions";
 import { inject, onMounted, ref, useTemplateRef } from "vue";
-import type { BulmaCalendarOptions } from "./calendar-types";
+import type { BulmaCalendar, BulmaCalendarOptions } from "./calendar-types";
 
 const props = withDefaults(
   defineProps<{
@@ -31,7 +31,7 @@ const date = ref<DateRange>([null, null]);
 const input = useTemplateRef<HTMLInputElement>("input");
 
 onMounted(() => {
-  const bulmaCalendar = inject("$bulmaCalendar");
+  const bulmaCalendar = inject<BulmaCalendar>("$bulmaCalendar");
   if (!bulmaCalendar) {
     throw new Error(
       "BulmaCalendar component requires the bulmaCalendar service to be provided",
diff --git a/src/components/primitives/Calendar/calendar-types.ts b/src/components/primitives/Calendar/calendar-types.ts
index a645e18..c3dbb14 100644
--- a/src/components/primitives/Calendar/calendar-types.ts
+++ b/src/components/primitives/Calendar/calendar-types.ts
@@ -1,8 +1,16 @@
 /**
+ * See more options at:
  * https://bulma-calendar.onrender.com/#options
  */
 export interface BulmaCalendarOptions {
   type?: "date" | "time" | "datetime";
+  displayMode?: "default" | "dialog" | "inline";
+  isRange?: boolean;
+  showClearButton?: boolean;
+  startDate?: Date;
+  startTime?: Date;
+  endDate?: Date;
+  endTime?: Date;
 }
 
 export interface BulmaCalendar {

From bd3e97ae785753d7d1607ed49987171b4d285ea2 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:15:31 +0500
Subject: [PATCH 197/212] refactor: useTemplateRef

---
 src/components/primitives/Calendar/Calendar.vue      | 4 ++++
 src/components/primitives/Calendar/calendar-types.ts | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 78ddbef..1db16db 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -46,6 +46,10 @@ onMounted(() => {
     date.value[0] = firstIfArray(props.modelValue);
   }
 
+  if (!input.value) {
+    throw new Error("no template ref for calendar");
+  }
+
   const calendar = bulmaCalendar.attach(input.value, {
     ...props.options,
     displayMode: props.inline ? "inline" : props.dialog ? "dialog" : "default",
diff --git a/src/components/primitives/Calendar/calendar-types.ts b/src/components/primitives/Calendar/calendar-types.ts
index c3dbb14..da000c3 100644
--- a/src/components/primitives/Calendar/calendar-types.ts
+++ b/src/components/primitives/Calendar/calendar-types.ts
@@ -14,5 +14,5 @@ export interface BulmaCalendarOptions {
 }
 
 export interface BulmaCalendar {
-  attach: () => void;
+  attach: (ref: HTMLElement, options: BulmaCalendarOptions) => void;
 }

From 1a7d7eef5cd2b1b9393427b3766db72257c02890 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:15:55 +0500
Subject: [PATCH 198/212] refactor: typing

---
 src/components/primitives/Calendar/calendar-types.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/primitives/Calendar/calendar-types.ts b/src/components/primitives/Calendar/calendar-types.ts
index da000c3..d40fef0 100644
--- a/src/components/primitives/Calendar/calendar-types.ts
+++ b/src/components/primitives/Calendar/calendar-types.ts
@@ -7,10 +7,10 @@ export interface BulmaCalendarOptions {
   displayMode?: "default" | "dialog" | "inline";
   isRange?: boolean;
   showClearButton?: boolean;
-  startDate?: Date;
-  startTime?: Date;
-  endDate?: Date;
-  endTime?: Date;
+  startDate?: Date | null;
+  startTime?: Date | null;
+  endDate?: Date | null;
+  endTime?: Date | null;
 }
 
 export interface BulmaCalendar {

From e9151cb55737dcdbd489b65ae55989da7b0094e5 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:37:26 +0500
Subject: [PATCH 199/212] refactor: remove nulls

---
 src/components/primitives/Calendar/Calendar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 1db16db..deee928 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -25,9 +25,9 @@ const props = withDefaults(
 
 const emit = defineEmits(["update:modelValue", "select"]);
 
-type DateRange = [Date | null | undefined, Date | null | undefined];
+type DateRange = [Date | undefined, Date | undefined];
 
-const date = ref<DateRange>([null, null]);
+const date = ref<DateRange>([undefined, undefined]);
 const input = useTemplateRef<HTMLInputElement>("input");
 
 onMounted(() => {

From 114462b22d76b6f6d13666591ec82bc8b899e2a5 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:46:10 +0500
Subject: [PATCH 200/212] feat: add bulma-calendar.d.ts

---
 .../primitives/Calendar/Calendar.vue          |   6 +-
 .../primitives/Calendar/bulma-calendar.d.ts   | 567 ++++++++++++++++++
 .../primitives/Calendar/calendar-types.ts     |  18 -
 3 files changed, 571 insertions(+), 20 deletions(-)
 create mode 100644 src/components/primitives/Calendar/bulma-calendar.d.ts
 delete mode 100644 src/components/primitives/Calendar/calendar-types.ts

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index deee928..8c65a31 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -5,7 +5,9 @@
 <script setup lang="ts">
 import { firstIfArray } from "@/utils/functions";
 import { inject, onMounted, ref, useTemplateRef } from "vue";
-import type { BulmaCalendar, BulmaCalendarOptions } from "./calendar-types";
+import type bulmaCalendarType from "./bulma-calendar";
+
+type BulmaCalendar = typeof bulmaCalendarType;
 
 const props = withDefaults(
   defineProps<{
@@ -13,7 +15,7 @@ const props = withDefaults(
     dialog?: boolean;
     inline?: boolean;
     range?: boolean;
-    options?: BulmaCalendarOptions;
+    options?: bulmaCalendarType.Options;
     type?: "date" | "time" | "datetime";
     modelValue?: Date | [Date, Date];
   }>(),
diff --git a/src/components/primitives/Calendar/bulma-calendar.d.ts b/src/components/primitives/Calendar/bulma-calendar.d.ts
new file mode 100644
index 0000000..30edcba
--- /dev/null
+++ b/src/components/primitives/Calendar/bulma-calendar.d.ts
@@ -0,0 +1,567 @@
+// Type definitions for bulma-calendar 6.0
+// Project: https://creativebulma.net/product/calendar/demo
+// Definitions by: Remco Haszing <https://github.com/remcohaszing>
+//                 Aaron Ross <https://github.com/superhawk610>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// Minimum TypeScript Version: 3.9
+
+declare namespace bulmaCalendar {
+  interface Options {
+    /**
+     * Component type
+     *
+     * @default 'datetime'
+     */
+    type?: "date" | "time" | "datetime";
+
+    /**
+     * Picker dominant color
+     *
+     * @default 'primary'
+     */
+    color?: string;
+
+    /**
+     * Range capability (start and end date/time selection
+     *
+     * @default false
+     */
+    isRange?: boolean;
+
+    /**
+     * Possibility to select same date as start and end date in range mode
+     *
+     * @default true
+     */
+    allowSameDayRange?: boolean;
+
+    /**
+     * Display lang (from language supported by date-fns)
+     *
+     * @default navigator.language.substring(0, 2) || "en"
+     */
+    lang?: string;
+
+    /**
+     * Date format pattern
+     *
+     * @default 'MM/dd/yyyy'
+     */
+    dateFormat?: string;
+
+    /**
+     * Time format pattern
+     *
+     * @default 'HH:mm'
+     */
+    timeFormat?: string;
+
+    /**
+     * Navigation month format pattern
+     *
+     * @default 'MMMM'
+     */
+    navigationMonthFormat?: string;
+
+    /**
+     * Navigation year format pattern
+     *
+     * @default 'yyyy'
+     */
+    navigationYearFormat?: string;
+
+    /**
+     * Header month year format pattern
+     *
+     * @default 'MMMM yyyy'
+     */
+    headerMonthYearFromat?: string;
+
+    /**
+     * Display mode
+     *
+     * @default 'default'
+     */
+    displayMode?: "default" | "dialog" | "inline";
+
+    /**
+     * @default 'auto'
+     */
+    position?: string;
+
+    /**
+     * Show/Hide header block (with current selection)
+     *
+     * @default true
+     */
+    showHeader?: boolean;
+
+    /**
+     * Header block position
+     *
+     * @default 'top'
+     */
+    headerPosition?: "top" | "bottom";
+
+    /**
+     * Show/Hide footer block
+     *
+     * @default true
+     */
+    showFooter?: boolean;
+
+    /**
+     * Show/Hide buttons
+     *
+     * @default true
+     */
+    showButtons?: boolean;
+
+    /**
+     * Show/Hide Today Button
+     *
+     * @default true
+     */
+    showTodayButton?: boolean;
+
+    /**
+     * Show/Hide Clear Button
+     *
+     * @default true
+     */
+    showClearButton?: boolean;
+
+    /**
+     * Cancel button label
+     *
+     * @default 'Cancel'
+     */
+    cancelLabel?: string;
+
+    /**
+     * Clear button label
+     *
+     * @default 'Clear'
+     */
+    clearLabel?: string;
+
+    /**
+     * Today button label
+     *
+     * @default 'Today'
+     */
+    todayLabel?: string;
+
+    /**
+     * Now button label
+     *
+     * @default 'Now'
+     */
+    nowLabel?: string;
+
+    /**
+     * Validate button label
+     *
+     * @default 'Validate'
+     */
+    validateLabel?: string;
+
+    /**
+     * Enable/disable month switch
+     *
+     * @default true
+     */
+    enableMonthSwitch?: boolean;
+
+    /**
+     * Enable/disable year switch
+     *
+     * @default true
+     */
+    enableYearSwitch?: boolean;
+
+    /**
+     * Pre-selected start date
+     */
+    startDate?: Date;
+
+    /**
+     * Pre-selected end date
+     */
+    endDate?: Date;
+
+    /**
+     * List of highlighted dates
+     */
+    highlightedDates?: string | any[];
+
+    /**
+     * Minimum date allowed
+     */
+    minDate?: Date;
+
+    /**
+     * Maximum date allowed
+     */
+    maxDate?: Date;
+
+    /**
+     * List of disabled dates
+     */
+    disabledDates?: any[];
+
+    /**
+     * List of disabled week days
+     */
+    disabledWeekDays?: string | any[];
+
+    /**
+     * Default weekstart day number
+     *
+     * @default 0 // sunday
+     */
+    weekStart?: number;
+
+    /**
+     * Pre-selected start time
+     */
+    startTime?: Date;
+
+    /**
+     * Pre-selected end time
+     */
+    endTime?: Date;
+
+    /**
+     * Steps for minutes selector
+     *
+     * @default 5
+     */
+    minuteSteps?: number;
+
+    /**
+     * From label
+     */
+    labelFrom?: string;
+
+    /**
+     * To label
+     */
+    labelTo?: string;
+
+    /**
+     * Close picker on overlay click (only for dialog display style)
+     *
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+
+    /**
+     * Automatically close the datePicker when date selected (or range date selected) - not available
+     * for inline display style. If set to False then a validate button will be displayed into the
+     * footer section.
+     *
+     * @default true
+     */
+    closeOnSelect?: boolean;
+
+    /**
+     * Automatically open datepicker when click into input element
+     *
+     * @default true
+     */
+    toggleOnInputClick?: boolean;
+
+    /**
+     * Callback to trigger once picker initiated
+     */
+    onReady?: () => void;
+    icons?: {
+      /**
+       * Previous button icon
+       */
+      previous?: string;
+
+      /**
+       * Next button icon
+       */
+      next?: string;
+
+      /**
+       * Time icon
+       */
+      time?: string;
+
+      /**
+       * Date icon
+       */
+      date?: string;
+    };
+  }
+
+  type EventType = "show" | "hide" | "select" | "select:start";
+
+  interface Event<T extends EventType = EventType> {
+    type: T;
+    timeStamp: number;
+    data: bulmaCalendar;
+  }
+}
+
+declare class bulmaCalendar {
+  // Custom EventEmitter implementation
+  listenerCount(eventName: bulmaCalendar.EventType): void;
+
+  removeListeners(
+    eventName: bulmaCalendar.EventType,
+    middleware?: boolean,
+  ): void;
+
+  middleware<T extends bulmaCalendar.EventType>(
+    eventName: T,
+    fn: (event: bulmaCalendar.Event<T>) => void,
+  ): void;
+
+  removeMiddleware(eventName: bulmaCalendar.EventType): void;
+
+  on<T extends bulmaCalendar.EventType>(
+    name: T,
+    callback: (event: bulmaCalendar.Event<T>) => void,
+    once?: boolean,
+  ): void;
+
+  once<T extends bulmaCalendar.EventType>(
+    name: T,
+    callback: (event: bulmaCalendar.Event<T>) => void,
+  ): void;
+
+  emit(
+    name: bulmaCalendar.EventType,
+    data: bulmaCalendar,
+    silent?: boolean,
+  ): void;
+
+  // Constructors
+  constructor(selector: string | HTMLElement, options?: bulmaCalendar.Options);
+
+  static attach(
+    selector?: string | HTMLElement,
+    options?: bulmaCalendar.Options,
+  ): bulmaCalendar[];
+
+  // Methods
+  /**
+   * Open date picker (not available with "inline" display style)
+   */
+  show(): void;
+
+  /**
+   * Close date picker (not available with "inline" display style)
+   */
+  hide(): void;
+
+  /**
+   * Show the date picker if it's hidden, otherwise hide it.
+   */
+  toggle(): void;
+
+  /**
+   * Take a snapshot of the date picker's current state.
+   */
+  snapshot(): void;
+
+  /**
+   * Update the displayed widget to match any changes that have
+   * been made to the date picker.
+   */
+  render(): void;
+
+  /**
+   * Check if date picker is open or not
+   *
+   * @returns True if date picker is open else False
+   */
+  isOpen(): boolean;
+
+  /**
+   * Check if current instance is a range date picker
+   *
+   * @returns True if the instance is a range date picker
+   */
+  isRange(): boolean;
+
+  /**
+   * Enable a date. Make sure the time is set to `00:00:00`.
+   */
+  enableDate(d: Date): void;
+
+  /**
+   * Disable a date. Make sure the time is set to `00:00:00`.
+   */
+  disableDate(d: Date): void;
+
+  /**
+   * Highlight a date. Make sure the time is set to `00:00:00`.
+   */
+  highlightDate(d: Date): void;
+
+  /**
+   * Unhighlight a date. Make sure the time is set to `00:00:00`.
+   */
+  unhighlightDate(d: Date): void;
+
+  /**
+   * Enable a weekday (`0 - 6`, where `0` is `Sunday` and `6` is `Saturday`).
+   */
+  enableWeekDay(weekDay: string): void;
+
+  /**
+   * Disable a weekday (`0 - 6`, where `0` is `Sunday` and `6` is `Saturday`).
+   */
+  disableWeekDay(weekDay: string): void;
+
+  /**
+   * Get the date picker value as formatted string if no parameter else set the passed value
+   *
+   * @param value Formatted date value if no parameter passed else null
+   *
+   * @returns Date picker selected date (if not range calendar then endDate is undefined)
+   */
+  value(value?: string): {
+    startDate: Date;
+    endDate?: Date;
+  };
+
+  /**
+   * Force calendar refresh
+   */
+  refresh(): void;
+
+  /**
+   * Force to set calendar data into UI inputs
+   */
+  save(): void;
+
+  /**
+   * Clear date selection (startDate and endDate are set to undefined)
+   */
+  clear(): void;
+
+  // Getters
+  /**
+   * Get component instance ID
+   */
+  get id(): any;
+
+  /**
+   * Get active lang
+   */
+  get lang(): string;
+
+  /**
+   * Set component lang
+   */
+  set lang(lang: string);
+
+  /**
+   * Get selected date
+   */
+  get date(): { start?: Date; end?: Date };
+
+  /**
+   * Set date
+   */
+  set date(date: { start?: Date; end?: Date });
+
+  /**
+   * Get selected start date
+   */
+  get startDate(): Date;
+
+  /**
+   * Se start date
+   */
+  set startDate(startDate: Date);
+
+  /**
+   * Get selected end date
+   */
+  get endDate(): Date;
+
+  /**
+   * Set end date
+   */
+  set endDate(endDate: Date);
+
+  /**
+   * Get min possible date
+   */
+  get minDate(): Date;
+
+  /**
+   * Set min possible date
+   */
+  set minDate(minDate: Date);
+
+  /**
+   * Get max possible date
+   */
+  get maxDate(): Date;
+
+  /**
+   * Set max possible date
+   */
+  set maxDate(maxDate: Date);
+
+  /**
+   * Get date format pattern
+   */
+  get dateFormat(): string;
+
+  /**
+   * Set date format pattern
+   */
+  set dateFormat(dateFormat: string);
+
+  /**
+   * Get selected time
+   */
+  get time(): Date;
+
+  /**
+   * Set time
+   */
+  set time(time: Date);
+
+  /**
+   * Get selected start time
+   */
+  get startTime(): Date;
+
+  /**
+   * Set start time
+   */
+  set startTime(startTime: Date);
+
+  /**
+   * Get selected end time
+   */
+  get endTime(): Date;
+
+  /**
+   * Set end time
+   */
+  set endTime(endTime: Date);
+
+  /**
+   * Get time format pattern
+   */
+  get timeFormat(): string;
+
+  /**
+   * Set time format pattern
+   */
+  set timeFormat(timeFormat: string);
+}
+
+export = bulmaCalendar;
diff --git a/src/components/primitives/Calendar/calendar-types.ts b/src/components/primitives/Calendar/calendar-types.ts
deleted file mode 100644
index d40fef0..0000000
--- a/src/components/primitives/Calendar/calendar-types.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * See more options at:
- * https://bulma-calendar.onrender.com/#options
- */
-export interface BulmaCalendarOptions {
-  type?: "date" | "time" | "datetime";
-  displayMode?: "default" | "dialog" | "inline";
-  isRange?: boolean;
-  showClearButton?: boolean;
-  startDate?: Date | null;
-  startTime?: Date | null;
-  endDate?: Date | null;
-  endTime?: Date | null;
-}
-
-export interface BulmaCalendar {
-  attach: (ref: HTMLElement, options: BulmaCalendarOptions) => void;
-}

From ccdd48c849dc42a207377b8be88a691c84c8258c Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:48:22 +0500
Subject: [PATCH 201/212] feat: add types for bulma-calendar.d.ts

---
 src/components/primitives/Calendar/bulma-calendar.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/primitives/Calendar/bulma-calendar.d.ts b/src/components/primitives/Calendar/bulma-calendar.d.ts
index 30edcba..f27a94d 100644
--- a/src/components/primitives/Calendar/bulma-calendar.d.ts
+++ b/src/components/primitives/Calendar/bulma-calendar.d.ts
@@ -193,6 +193,7 @@ declare namespace bulmaCalendar {
     /**
      * List of highlighted dates
      */
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     highlightedDates?: string | any[];
 
     /**
@@ -208,11 +209,13 @@ declare namespace bulmaCalendar {
     /**
      * List of disabled dates
      */
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     disabledDates?: any[];
 
     /**
      * List of disabled week days
      */
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     disabledWeekDays?: string | any[];
 
     /**
@@ -451,6 +454,7 @@ declare class bulmaCalendar {
   /**
    * Get component instance ID
    */
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
   get id(): any;
 
   /**

From 267059be2a034fe0d33936d6ad1fc116147a0dd9 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:49:45 +0500
Subject: [PATCH 202/212] chore: comment deprecated event listener

---
 src/components/primitives/Calendar/Calendar.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 8c65a31..938e9f2 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -63,7 +63,8 @@ onMounted(() => {
     endTime: date.value[1],
   });
 
-  calendar[0].on("save", (e) => {
+  // Seems like deprecated event type
+  /* calendar[0].on("save", (e) => {
     date.value = [e.data.startDate, e.data.endDate];
 
     if (props.range) {
@@ -72,7 +73,7 @@ onMounted(() => {
     }
 
     emit("update:modelValue", date.value[0]);
-  });
+  }); */
 
   calendar[0].on("select", (e) => {
     if (props.range) {

From 68465533dc8ae17bbee96e41371fd909b5efb49e Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:52:03 +0500
Subject: [PATCH 203/212] docs: add link for options

---
 src/components/primitives/Calendar/Calendar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 938e9f2..3a07c7e 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -15,6 +15,7 @@ const props = withDefaults(
     dialog?: boolean;
     inline?: boolean;
     range?: boolean;
+    // https://bulma-calendar.onrender.com/#options
     options?: bulmaCalendarType.Options;
     type?: "date" | "time" | "datetime";
     modelValue?: Date | [Date, Date];

From 1b8e9e03aa099889e21995c05641fe58eba2caa6 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 20:58:42 +0500
Subject: [PATCH 204/212] refactor: typing

---
 .../primitives/Calendar/my-bulma-calendar.ts  | 316 ++++++++++++++++++
 1 file changed, 316 insertions(+)
 create mode 100644 src/components/primitives/Calendar/my-bulma-calendar.ts

diff --git a/src/components/primitives/Calendar/my-bulma-calendar.ts b/src/components/primitives/Calendar/my-bulma-calendar.ts
new file mode 100644
index 0000000..9917449
--- /dev/null
+++ b/src/components/primitives/Calendar/my-bulma-calendar.ts
@@ -0,0 +1,316 @@
+interface Options {
+  /**
+   * Component type
+   *
+   * @default 'datetime'
+   */
+  type?: "date" | "time" | "datetime";
+
+  /**
+   * Picker dominant color
+   *
+   * @default 'primary'
+   */
+  color?: string;
+
+  /**
+   * Range capability (start and end date/time selection
+   *
+   * @default false
+   */
+  isRange?: boolean;
+
+  /**
+   * Possibility to select same date as start and end date in range mode
+   *
+   * @default true
+   */
+  allowSameDayRange?: boolean;
+
+  /**
+   * Display lang (from language supported by date-fns)
+   *
+   * @default navigator.language.substring(0, 2) || "en"
+   */
+  lang?: string;
+
+  /**
+   * Date format pattern
+   *
+   * @default 'MM/dd/yyyy'
+   */
+  dateFormat?: string;
+
+  /**
+   * Time format pattern
+   *
+   * @default 'HH:mm'
+   */
+  timeFormat?: string;
+
+  /**
+   * Navigation month format pattern
+   *
+   * @default 'MMMM'
+   */
+  navigationMonthFormat?: string;
+
+  /**
+   * Navigation year format pattern
+   *
+   * @default 'yyyy'
+   */
+  navigationYearFormat?: string;
+
+  /**
+   * Header month year format pattern
+   *
+   * @default 'MMMM yyyy'
+   */
+  headerMonthYearFromat?: string;
+
+  /**
+   * Display mode
+   *
+   * @default 'default'
+   */
+  displayMode?: "default" | "dialog" | "inline";
+
+  /**
+   * @default 'auto'
+   */
+  position?: string;
+
+  /**
+   * Show/Hide header block (with current selection)
+   *
+   * @default true
+   */
+  showHeader?: boolean;
+
+  /**
+   * Header block position
+   *
+   * @default 'top'
+   */
+  headerPosition?: "top" | "bottom";
+
+  /**
+   * Show/Hide footer block
+   *
+   * @default true
+   */
+  showFooter?: boolean;
+
+  /**
+   * Show/Hide buttons
+   *
+   * @default true
+   */
+  showButtons?: boolean;
+
+  /**
+   * Show/Hide Today Button
+   *
+   * @default true
+   */
+  showTodayButton?: boolean;
+
+  /**
+   * Show/Hide Clear Button
+   *
+   * @default true
+   */
+  showClearButton?: boolean;
+
+  /**
+   * Cancel button label
+   *
+   * @default 'Cancel'
+   */
+  cancelLabel?: string;
+
+  /**
+   * Clear button label
+   *
+   * @default 'Clear'
+   */
+  clearLabel?: string;
+
+  /**
+   * Today button label
+   *
+   * @default 'Today'
+   */
+  todayLabel?: string;
+
+  /**
+   * Now button label
+   *
+   * @default 'Now'
+   */
+  nowLabel?: string;
+
+  /**
+   * Validate button label
+   *
+   * @default 'Validate'
+   */
+  validateLabel?: string;
+
+  /**
+   * Enable/disable month switch
+   *
+   * @default true
+   */
+  enableMonthSwitch?: boolean;
+
+  /**
+   * Enable/disable year switch
+   *
+   * @default true
+   */
+  enableYearSwitch?: boolean;
+
+  /**
+   * Pre-selected start date
+   */
+  startDate?: Date;
+
+  /**
+   * Pre-selected end date
+   */
+  endDate?: Date;
+
+  /**
+   * List of highlighted dates
+   */
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  highlightedDates?: string | any[];
+
+  /**
+   * Minimum date allowed
+   */
+  minDate?: Date;
+
+  /**
+   * Maximum date allowed
+   */
+  maxDate?: Date;
+
+  /**
+   * List of disabled dates
+   */
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  disabledDates?: any[];
+
+  /**
+   * List of disabled week days
+   */
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  disabledWeekDays?: string | any[];
+
+  /**
+   * Default weekstart day number
+   *
+   * @default 0 // sunday
+   */
+  weekStart?: number;
+
+  /**
+   * Pre-selected start time
+   */
+  startTime?: Date;
+
+  /**
+   * Pre-selected end time
+   */
+  endTime?: Date;
+
+  /**
+   * Steps for minutes selector
+   *
+   * @default 5
+   */
+  minuteSteps?: number;
+
+  /**
+   * From label
+   */
+  labelFrom?: string;
+
+  /**
+   * To label
+   */
+  labelTo?: string;
+
+  /**
+   * Close picker on overlay click (only for dialog display style)
+   *
+   * @default true
+   */
+  closeOnOverlayClick?: boolean;
+
+  /**
+   * Automatically close the datePicker when date selected (or range date selected) - not available
+   * for inline display style. If set to False then a validate button will be displayed into the
+   * footer section.
+   *
+   * @default true
+   */
+  closeOnSelect?: boolean;
+
+  /**
+   * Automatically open datepicker when click into input element
+   *
+   * @default true
+   */
+  toggleOnInputClick?: boolean;
+
+  /**
+   * Callback to trigger once picker initiated
+   */
+  onReady?: () => void;
+  icons?: {
+    /**
+     * Previous button icon
+     */
+    previous?: string;
+
+    /**
+     * Next button icon
+     */
+    next?: string;
+
+    /**
+     * Time icon
+     */
+    time?: string;
+
+    /**
+     * Date icon
+     */
+    date?: string;
+  };
+}
+
+type EventType = "show" | "hide" | "select" | "select:start";
+
+interface Event<T extends EventType = EventType> {
+  type: T;
+  timeStamp: number;
+  data: BulmaCalendar;
+}
+
+declare class BulmaCalendar {
+  on<T extends EventType>(
+    name: T,
+    callback: (event: Event<T>) => void,
+    once?: boolean,
+  ): void;
+
+  static attach(
+    selector?: string | HTMLElement,
+    options?: Options,
+  ): BulmaCalendar[];
+}

From 33b43741124c7e305b04d44c0073777ac12b6cfc Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 21:01:52 +0500
Subject: [PATCH 205/212] refactor: typing

---
 src/components/primitives/Calendar/my-bulma-calendar.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/primitives/Calendar/my-bulma-calendar.ts b/src/components/primitives/Calendar/my-bulma-calendar.ts
index 9917449..15dcd7d 100644
--- a/src/components/primitives/Calendar/my-bulma-calendar.ts
+++ b/src/components/primitives/Calendar/my-bulma-calendar.ts
@@ -1,4 +1,4 @@
-interface Options {
+export interface Options {
   /**
    * Component type
    *
@@ -302,7 +302,7 @@ interface Event<T extends EventType = EventType> {
   data: BulmaCalendar;
 }
 
-declare class BulmaCalendar {
+export declare class BulmaCalendar {
   on<T extends EventType>(
     name: T,
     callback: (event: Event<T>) => void,

From 02e0edefedb912994a98802f9585c9b37bb67813 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 21:10:07 +0500
Subject: [PATCH 206/212] refactor: typing

---
 src/components/primitives/Calendar/Calendar.vue | 17 +++++++----------
 .../primitives/Calendar/my-bulma-calendar.ts    |  8 +++++++-
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 3a07c7e..cba0353 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -5,9 +5,7 @@
 <script setup lang="ts">
 import { firstIfArray } from "@/utils/functions";
 import { inject, onMounted, ref, useTemplateRef } from "vue";
-import type bulmaCalendarType from "./bulma-calendar";
-
-type BulmaCalendar = typeof bulmaCalendarType;
+import type { BulmaCalendar, Options } from "./my-bulma-calendar";
 
 const props = withDefaults(
   defineProps<{
@@ -16,7 +14,7 @@ const props = withDefaults(
     inline?: boolean;
     range?: boolean;
     // https://bulma-calendar.onrender.com/#options
-    options?: bulmaCalendarType.Options;
+    options?: Options;
     type?: "date" | "time" | "datetime";
     modelValue?: Date | [Date, Date];
   }>(),
@@ -34,7 +32,7 @@ const date = ref<DateRange>([undefined, undefined]);
 const input = useTemplateRef<HTMLInputElement>("input");
 
 onMounted(() => {
-  const bulmaCalendar = inject<BulmaCalendar>("$bulmaCalendar");
+  const bulmaCalendar = inject<typeof BulmaCalendar>("$bulmaCalendar");
   if (!bulmaCalendar) {
     throw new Error(
       "BulmaCalendar component requires the bulmaCalendar service to be provided",
@@ -62,10 +60,9 @@ onMounted(() => {
     startTime: date.value[0],
     endDate: date.value[1],
     endTime: date.value[1],
-  });
+  })[0];
 
-  // Seems like deprecated event type
-  /* calendar[0].on("save", (e) => {
+  calendar.on("save", (e) => {
     date.value = [e.data.startDate, e.data.endDate];
 
     if (props.range) {
@@ -74,9 +71,9 @@ onMounted(() => {
     }
 
     emit("update:modelValue", date.value[0]);
-  }); */
+  });
 
-  calendar[0].on("select", (e) => {
+  calendar.on("select", (e) => {
     if (props.range) {
       emit("select", [e.data.startDate, e.data.endDate]);
       return;
diff --git a/src/components/primitives/Calendar/my-bulma-calendar.ts b/src/components/primitives/Calendar/my-bulma-calendar.ts
index 15dcd7d..1fcc5af 100644
--- a/src/components/primitives/Calendar/my-bulma-calendar.ts
+++ b/src/components/primitives/Calendar/my-bulma-calendar.ts
@@ -294,7 +294,7 @@ export interface Options {
   };
 }
 
-type EventType = "show" | "hide" | "select" | "select:start";
+type EventType = "show" | "hide" | "save" | "select" | "select:start";
 
 interface Event<T extends EventType = EventType> {
   type: T;
@@ -303,6 +303,12 @@ interface Event<T extends EventType = EventType> {
 }
 
 export declare class BulmaCalendar {
+  /** Selected start date */
+  startDate: Date;
+
+  /** Selected end date */
+  endDate: Date;
+
   on<T extends EventType>(
     name: T,
     callback: (event: Event<T>) => void,

From ef105e17b50691e4380fd89dd37bca42ceceb4aa Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 21:10:42 +0500
Subject: [PATCH 207/212] refactor: typing

---
 .../primitives/Calendar/Calendar.vue          |   2 +-
 ...ma-calendar.ts => bulma-calendar-types.ts} |   0
 .../primitives/Calendar/bulma-calendar.d.ts   | 571 ------------------
 3 files changed, 1 insertion(+), 572 deletions(-)
 rename src/components/primitives/Calendar/{my-bulma-calendar.ts => bulma-calendar-types.ts} (100%)
 delete mode 100644 src/components/primitives/Calendar/bulma-calendar.d.ts

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index cba0353..2535b86 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import { firstIfArray } from "@/utils/functions";
 import { inject, onMounted, ref, useTemplateRef } from "vue";
-import type { BulmaCalendar, Options } from "./my-bulma-calendar";
+import type { BulmaCalendar, Options } from "./bulma-calendar-types";
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/primitives/Calendar/my-bulma-calendar.ts b/src/components/primitives/Calendar/bulma-calendar-types.ts
similarity index 100%
rename from src/components/primitives/Calendar/my-bulma-calendar.ts
rename to src/components/primitives/Calendar/bulma-calendar-types.ts
diff --git a/src/components/primitives/Calendar/bulma-calendar.d.ts b/src/components/primitives/Calendar/bulma-calendar.d.ts
deleted file mode 100644
index f27a94d..0000000
--- a/src/components/primitives/Calendar/bulma-calendar.d.ts
+++ /dev/null
@@ -1,571 +0,0 @@
-// Type definitions for bulma-calendar 6.0
-// Project: https://creativebulma.net/product/calendar/demo
-// Definitions by: Remco Haszing <https://github.com/remcohaszing>
-//                 Aaron Ross <https://github.com/superhawk610>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// Minimum TypeScript Version: 3.9
-
-declare namespace bulmaCalendar {
-  interface Options {
-    /**
-     * Component type
-     *
-     * @default 'datetime'
-     */
-    type?: "date" | "time" | "datetime";
-
-    /**
-     * Picker dominant color
-     *
-     * @default 'primary'
-     */
-    color?: string;
-
-    /**
-     * Range capability (start and end date/time selection
-     *
-     * @default false
-     */
-    isRange?: boolean;
-
-    /**
-     * Possibility to select same date as start and end date in range mode
-     *
-     * @default true
-     */
-    allowSameDayRange?: boolean;
-
-    /**
-     * Display lang (from language supported by date-fns)
-     *
-     * @default navigator.language.substring(0, 2) || "en"
-     */
-    lang?: string;
-
-    /**
-     * Date format pattern
-     *
-     * @default 'MM/dd/yyyy'
-     */
-    dateFormat?: string;
-
-    /**
-     * Time format pattern
-     *
-     * @default 'HH:mm'
-     */
-    timeFormat?: string;
-
-    /**
-     * Navigation month format pattern
-     *
-     * @default 'MMMM'
-     */
-    navigationMonthFormat?: string;
-
-    /**
-     * Navigation year format pattern
-     *
-     * @default 'yyyy'
-     */
-    navigationYearFormat?: string;
-
-    /**
-     * Header month year format pattern
-     *
-     * @default 'MMMM yyyy'
-     */
-    headerMonthYearFromat?: string;
-
-    /**
-     * Display mode
-     *
-     * @default 'default'
-     */
-    displayMode?: "default" | "dialog" | "inline";
-
-    /**
-     * @default 'auto'
-     */
-    position?: string;
-
-    /**
-     * Show/Hide header block (with current selection)
-     *
-     * @default true
-     */
-    showHeader?: boolean;
-
-    /**
-     * Header block position
-     *
-     * @default 'top'
-     */
-    headerPosition?: "top" | "bottom";
-
-    /**
-     * Show/Hide footer block
-     *
-     * @default true
-     */
-    showFooter?: boolean;
-
-    /**
-     * Show/Hide buttons
-     *
-     * @default true
-     */
-    showButtons?: boolean;
-
-    /**
-     * Show/Hide Today Button
-     *
-     * @default true
-     */
-    showTodayButton?: boolean;
-
-    /**
-     * Show/Hide Clear Button
-     *
-     * @default true
-     */
-    showClearButton?: boolean;
-
-    /**
-     * Cancel button label
-     *
-     * @default 'Cancel'
-     */
-    cancelLabel?: string;
-
-    /**
-     * Clear button label
-     *
-     * @default 'Clear'
-     */
-    clearLabel?: string;
-
-    /**
-     * Today button label
-     *
-     * @default 'Today'
-     */
-    todayLabel?: string;
-
-    /**
-     * Now button label
-     *
-     * @default 'Now'
-     */
-    nowLabel?: string;
-
-    /**
-     * Validate button label
-     *
-     * @default 'Validate'
-     */
-    validateLabel?: string;
-
-    /**
-     * Enable/disable month switch
-     *
-     * @default true
-     */
-    enableMonthSwitch?: boolean;
-
-    /**
-     * Enable/disable year switch
-     *
-     * @default true
-     */
-    enableYearSwitch?: boolean;
-
-    /**
-     * Pre-selected start date
-     */
-    startDate?: Date;
-
-    /**
-     * Pre-selected end date
-     */
-    endDate?: Date;
-
-    /**
-     * List of highlighted dates
-     */
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-    highlightedDates?: string | any[];
-
-    /**
-     * Minimum date allowed
-     */
-    minDate?: Date;
-
-    /**
-     * Maximum date allowed
-     */
-    maxDate?: Date;
-
-    /**
-     * List of disabled dates
-     */
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-    disabledDates?: any[];
-
-    /**
-     * List of disabled week days
-     */
-    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-    disabledWeekDays?: string | any[];
-
-    /**
-     * Default weekstart day number
-     *
-     * @default 0 // sunday
-     */
-    weekStart?: number;
-
-    /**
-     * Pre-selected start time
-     */
-    startTime?: Date;
-
-    /**
-     * Pre-selected end time
-     */
-    endTime?: Date;
-
-    /**
-     * Steps for minutes selector
-     *
-     * @default 5
-     */
-    minuteSteps?: number;
-
-    /**
-     * From label
-     */
-    labelFrom?: string;
-
-    /**
-     * To label
-     */
-    labelTo?: string;
-
-    /**
-     * Close picker on overlay click (only for dialog display style)
-     *
-     * @default true
-     */
-    closeOnOverlayClick?: boolean;
-
-    /**
-     * Automatically close the datePicker when date selected (or range date selected) - not available
-     * for inline display style. If set to False then a validate button will be displayed into the
-     * footer section.
-     *
-     * @default true
-     */
-    closeOnSelect?: boolean;
-
-    /**
-     * Automatically open datepicker when click into input element
-     *
-     * @default true
-     */
-    toggleOnInputClick?: boolean;
-
-    /**
-     * Callback to trigger once picker initiated
-     */
-    onReady?: () => void;
-    icons?: {
-      /**
-       * Previous button icon
-       */
-      previous?: string;
-
-      /**
-       * Next button icon
-       */
-      next?: string;
-
-      /**
-       * Time icon
-       */
-      time?: string;
-
-      /**
-       * Date icon
-       */
-      date?: string;
-    };
-  }
-
-  type EventType = "show" | "hide" | "select" | "select:start";
-
-  interface Event<T extends EventType = EventType> {
-    type: T;
-    timeStamp: number;
-    data: bulmaCalendar;
-  }
-}
-
-declare class bulmaCalendar {
-  // Custom EventEmitter implementation
-  listenerCount(eventName: bulmaCalendar.EventType): void;
-
-  removeListeners(
-    eventName: bulmaCalendar.EventType,
-    middleware?: boolean,
-  ): void;
-
-  middleware<T extends bulmaCalendar.EventType>(
-    eventName: T,
-    fn: (event: bulmaCalendar.Event<T>) => void,
-  ): void;
-
-  removeMiddleware(eventName: bulmaCalendar.EventType): void;
-
-  on<T extends bulmaCalendar.EventType>(
-    name: T,
-    callback: (event: bulmaCalendar.Event<T>) => void,
-    once?: boolean,
-  ): void;
-
-  once<T extends bulmaCalendar.EventType>(
-    name: T,
-    callback: (event: bulmaCalendar.Event<T>) => void,
-  ): void;
-
-  emit(
-    name: bulmaCalendar.EventType,
-    data: bulmaCalendar,
-    silent?: boolean,
-  ): void;
-
-  // Constructors
-  constructor(selector: string | HTMLElement, options?: bulmaCalendar.Options);
-
-  static attach(
-    selector?: string | HTMLElement,
-    options?: bulmaCalendar.Options,
-  ): bulmaCalendar[];
-
-  // Methods
-  /**
-   * Open date picker (not available with "inline" display style)
-   */
-  show(): void;
-
-  /**
-   * Close date picker (not available with "inline" display style)
-   */
-  hide(): void;
-
-  /**
-   * Show the date picker if it's hidden, otherwise hide it.
-   */
-  toggle(): void;
-
-  /**
-   * Take a snapshot of the date picker's current state.
-   */
-  snapshot(): void;
-
-  /**
-   * Update the displayed widget to match any changes that have
-   * been made to the date picker.
-   */
-  render(): void;
-
-  /**
-   * Check if date picker is open or not
-   *
-   * @returns True if date picker is open else False
-   */
-  isOpen(): boolean;
-
-  /**
-   * Check if current instance is a range date picker
-   *
-   * @returns True if the instance is a range date picker
-   */
-  isRange(): boolean;
-
-  /**
-   * Enable a date. Make sure the time is set to `00:00:00`.
-   */
-  enableDate(d: Date): void;
-
-  /**
-   * Disable a date. Make sure the time is set to `00:00:00`.
-   */
-  disableDate(d: Date): void;
-
-  /**
-   * Highlight a date. Make sure the time is set to `00:00:00`.
-   */
-  highlightDate(d: Date): void;
-
-  /**
-   * Unhighlight a date. Make sure the time is set to `00:00:00`.
-   */
-  unhighlightDate(d: Date): void;
-
-  /**
-   * Enable a weekday (`0 - 6`, where `0` is `Sunday` and `6` is `Saturday`).
-   */
-  enableWeekDay(weekDay: string): void;
-
-  /**
-   * Disable a weekday (`0 - 6`, where `0` is `Sunday` and `6` is `Saturday`).
-   */
-  disableWeekDay(weekDay: string): void;
-
-  /**
-   * Get the date picker value as formatted string if no parameter else set the passed value
-   *
-   * @param value Formatted date value if no parameter passed else null
-   *
-   * @returns Date picker selected date (if not range calendar then endDate is undefined)
-   */
-  value(value?: string): {
-    startDate: Date;
-    endDate?: Date;
-  };
-
-  /**
-   * Force calendar refresh
-   */
-  refresh(): void;
-
-  /**
-   * Force to set calendar data into UI inputs
-   */
-  save(): void;
-
-  /**
-   * Clear date selection (startDate and endDate are set to undefined)
-   */
-  clear(): void;
-
-  // Getters
-  /**
-   * Get component instance ID
-   */
-  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
-  get id(): any;
-
-  /**
-   * Get active lang
-   */
-  get lang(): string;
-
-  /**
-   * Set component lang
-   */
-  set lang(lang: string);
-
-  /**
-   * Get selected date
-   */
-  get date(): { start?: Date; end?: Date };
-
-  /**
-   * Set date
-   */
-  set date(date: { start?: Date; end?: Date });
-
-  /**
-   * Get selected start date
-   */
-  get startDate(): Date;
-
-  /**
-   * Se start date
-   */
-  set startDate(startDate: Date);
-
-  /**
-   * Get selected end date
-   */
-  get endDate(): Date;
-
-  /**
-   * Set end date
-   */
-  set endDate(endDate: Date);
-
-  /**
-   * Get min possible date
-   */
-  get minDate(): Date;
-
-  /**
-   * Set min possible date
-   */
-  set minDate(minDate: Date);
-
-  /**
-   * Get max possible date
-   */
-  get maxDate(): Date;
-
-  /**
-   * Set max possible date
-   */
-  set maxDate(maxDate: Date);
-
-  /**
-   * Get date format pattern
-   */
-  get dateFormat(): string;
-
-  /**
-   * Set date format pattern
-   */
-  set dateFormat(dateFormat: string);
-
-  /**
-   * Get selected time
-   */
-  get time(): Date;
-
-  /**
-   * Set time
-   */
-  set time(time: Date);
-
-  /**
-   * Get selected start time
-   */
-  get startTime(): Date;
-
-  /**
-   * Set start time
-   */
-  set startTime(startTime: Date);
-
-  /**
-   * Get selected end time
-   */
-  get endTime(): Date;
-
-  /**
-   * Set end time
-   */
-  set endTime(endTime: Date);
-
-  /**
-   * Get time format pattern
-   */
-  get timeFormat(): string;
-
-  /**
-   * Set time format pattern
-   */
-  set timeFormat(timeFormat: string);
-}
-
-export = bulmaCalendar;

From f6e44bf841ede04571d98c309ad14f126bb1c4c8 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 21:11:51 +0500
Subject: [PATCH 208/212] refactor: typing

---
 src/components/primitives/Calendar/Calendar.vue                 | 2 +-
 .../Calendar/{bulma-calendar-types.ts => bulma-calendar.d.ts}   | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/primitives/Calendar/{bulma-calendar-types.ts => bulma-calendar.d.ts} (100%)

diff --git a/src/components/primitives/Calendar/Calendar.vue b/src/components/primitives/Calendar/Calendar.vue
index 2535b86..311a3f9 100644
--- a/src/components/primitives/Calendar/Calendar.vue
+++ b/src/components/primitives/Calendar/Calendar.vue
@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import { firstIfArray } from "@/utils/functions";
 import { inject, onMounted, ref, useTemplateRef } from "vue";
-import type { BulmaCalendar, Options } from "./bulma-calendar-types";
+import type { BulmaCalendar, Options } from "./bulma-calendar";
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/primitives/Calendar/bulma-calendar-types.ts b/src/components/primitives/Calendar/bulma-calendar.d.ts
similarity index 100%
rename from src/components/primitives/Calendar/bulma-calendar-types.ts
rename to src/components/primitives/Calendar/bulma-calendar.d.ts

From 775ac555730979ec014c53afcd79637c01ff6fd5 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 21:12:53 +0500
Subject: [PATCH 209/212] docs: link

---
 src/components/primitives/Calendar/bulma-calendar.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/primitives/Calendar/bulma-calendar.d.ts b/src/components/primitives/Calendar/bulma-calendar.d.ts
index 1fcc5af..d5eab94 100644
--- a/src/components/primitives/Calendar/bulma-calendar.d.ts
+++ b/src/components/primitives/Calendar/bulma-calendar.d.ts
@@ -1,3 +1,8 @@
+/**
+ * Short declaration based on
+ * https://github.com/michael-hack/bulma-calendar/blob/master/index.d.ts
+ */
+
 export interface Options {
   /**
    * Component type

From aecda8d98c37ad725d1af5186428482dd4ef2e70 Mon Sep 17 00:00:00 2001
From: Lukas <kosha.industry@gmail.com>
Date: Tue, 22 Apr 2025 21:19:46 +0500
Subject: [PATCH 210/212] test: todo

---
 src/components/compounds/Accordion/Accordion.vue | 1 +
 src/components/compounds/Dropdown/Dropdown.vue   | 1 +
 src/components/compounds/Navbar/Navbar.vue       | 1 +
 src/components/compounds/Steps/Steps.vue         | 1 +
 src/components/compounds/Tabs/Tabs.vue           | 1 +
 5 files changed, 5 insertions(+)

diff --git a/src/components/compounds/Accordion/Accordion.vue b/src/components/compounds/Accordion/Accordion.vue
index 67665e4..36aa4c9 100644
--- a/src/components/compounds/Accordion/Accordion.vue
+++ b/src/components/compounds/Accordion/Accordion.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// todo tests
 import { computed, reactive } from "vue";
 
 const props = defineProps<{
diff --git a/src/components/compounds/Dropdown/Dropdown.vue b/src/components/compounds/Dropdown/Dropdown.vue
index 2ddc645..6e44a6f 100644
--- a/src/components/compounds/Dropdown/Dropdown.vue
+++ b/src/components/compounds/Dropdown/Dropdown.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// todo tests
 import { onClickOutside } from "@/utils/onClickOutside";
 import { computed, provide, reactive, readonly, useTemplateRef } from "vue";
 import { type DDSelection, DropdownSymbol } from "./dropdown-symbol";
diff --git a/src/components/compounds/Navbar/Navbar.vue b/src/components/compounds/Navbar/Navbar.vue
index e8ab747..330f9c0 100644
--- a/src/components/compounds/Navbar/Navbar.vue
+++ b/src/components/compounds/Navbar/Navbar.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// todo tests
 import NavbarBurger from "./NavbarBurger.vue";
 
 withDefaults(
diff --git a/src/components/compounds/Steps/Steps.vue b/src/components/compounds/Steps/Steps.vue
index b5d0a6b..0593856 100644
--- a/src/components/compounds/Steps/Steps.vue
+++ b/src/components/compounds/Steps/Steps.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// todo tests
 import type { StepTab, StepTabsState } from "@/types/component-types";
 import { provideTabsStore } from "@/utils/tabs-store";
 import { watchEffect } from "vue";
diff --git a/src/components/compounds/Tabs/Tabs.vue b/src/components/compounds/Tabs/Tabs.vue
index f51b3a6..57e5188 100644
--- a/src/components/compounds/Tabs/Tabs.vue
+++ b/src/components/compounds/Tabs/Tabs.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// todo tests
 import type { Tab, TabsState } from "@/types/component-types";
 import { provideTabsStore } from "@/utils/tabs-store";
 import { computed, watchEffect } from "vue";

From 493b39ed5d1b9d1ef68e42e6251aacd95ac94836 Mon Sep 17 00:00:00 2001
From: AbsoluteC2H6O <alfredofp63@gmail.com>
Date: Wed, 23 Apr 2025 00:39:50 -0400
Subject: [PATCH 211/212] fix(menu): properly handle submenu expansion

- Update menu item click handlers
- Fix aria attributes for accessibility
---
 helper/mappings.json                       | 567 +++++++++++----------
 src/components/compounds/Menu/MenuItem.vue |  74 +--
 2 files changed, 354 insertions(+), 287 deletions(-)

diff --git a/helper/mappings.json b/helper/mappings.json
index 1f408fb..b1147a1 100644
--- a/helper/mappings.json
+++ b/helper/mappings.json
@@ -20,57 +20,85 @@
     ]
   },
   "VAccordionMenu": {
-    "always": ["accordion-menu"],
+    "always": [
+      "accordion-menu"
+    ],
     "optional": [],
     "unstable": []
   },
   "VBreadcrumb": {
-    "always": ["breadcrumb", "ul"],
+    "always": [
+      "breadcrumb",
+      "ul"
+    ],
     "optional": [],
     "unstable": []
   },
   "VBreadcrumbItem": {
-    "always": ["a", "li"],
-    "optional": ["is-active"],
+    "always": [
+      "li"
+    ],
+    "optional": [
+      "is-active"
+    ],
     "unstable": []
   },
   "VCard": {
-    "always": ["card", "div"],
+    "always": [
+      "card"
+    ],
     "optional": [],
     "unstable": []
   },
   "VCardContent": {
-    "always": ["card-content"],
+    "always": [
+      "card-content"
+    ],
     "optional": [],
     "unstable": []
   },
   "VCardFooter": {
-    "always": ["card-footer", "footer"],
+    "always": [
+      "card-footer"
+    ],
     "optional": [],
     "unstable": []
   },
   "VCardFooterItem": {
-    "always": ["card-footer-item"],
+    "always": [
+      "card-footer-item"
+    ],
     "optional": [],
     "unstable": []
   },
   "VCardHeader": {
-    "always": ["card-header", "card-header-title", "header"],
+    "always": [
+      "card-header",
+      "card-header-title"
+    ],
     "optional": [],
     "unstable": []
   },
   "VCardImage": {
-    "always": ["card-image"],
+    "always": [
+      "card-image"
+    ],
     "optional": [],
     "unstable": []
   },
   "VColumn": {
-    "always": ["column"],
-    "optional": ["is-narrow"],
+    "always": [
+      "column"
+    ],
+    "optional": [
+      "is-narrow"
+    ],
     "unstable": []
   },
   "VColumns": {
-    "always": ["columns"],
+    "always": [
+      "columns"
+    ],
     "optional": [
       "is-desktop",
       "is-gapless",
@@ -78,7 +106,10 @@
       "is-multiline",
       "is-vcentered"
     ],
-    "unstable": ["is-centered", "is-variable"]
+    "unstable": [
+      "is-centered",
+      "is-variable"
+    ]
   },
   "VDropdown": {
     "always": [
@@ -111,25 +142,49 @@
       "slide-right-leave-active",
       "slide-right-leave-to"
     ],
-    "optional": ["is-disabled", "is-expanded", "is-hoverable", "is-inline"],
-    "unstable": ["is-active", "is-mobile-modal"]
+    "optional": [
+      "is-disabled",
+      "is-expanded",
+      "is-hoverable",
+      "is-inline"
+    ],
+    "unstable": [
+      "is-active",
+      "is-mobile-modal"
+    ]
   },
   "VDropdownItem": {
     "always": [
-      "dropdown",
-      "dropdown-content",
       "dropdown-divider",
+      "dropdown-item"
+    ],
+    "optional": [
+      "is-disabled",
+      "is-paddingless"
+    ],
+    "unstable": [
       "dropdown-item",
-      "dropdown-menu",
-      "dropdown-trigger",
+      "has-link",
+      "is-active"
+    ]
+  },
+  "VMenu": {
+    "always": [
+      "menu"
+    ],
+    "optional": [],
+    "unstable": []
+  },
+  "VMenuItem": {
+    "always": [
       "fade-enter",
       "fade-enter-active",
       "fade-enter-to",
       "fade-leave",
       "fade-leave-active",
       "fade-leave-to",
-      "listitem",
-      "menuitem",
+      "li",
+      "pr-2",
       "slide-enter",
       "slide-enter-active",
       "slide-enter-to",
@@ -147,98 +202,112 @@
       "slide-right-enter-to",
       "slide-right-leave",
       "slide-right-leave-active",
-      "slide-right-leave-to"
+      "slide-right-leave-to",
+      "ul"
     ],
     "optional": [
-      "is-disabled",
-      "is-expanded",
-      "is-hoverable",
-      "is-inline",
-      "is-paddingless"
+      "is-active",
+      "is-disabled"
     ],
-    "unstable": ["dropdown-item", "has-link", "is-active", "is-mobile-modal"]
-  },
-  "VMenu": {
-    "always": ["menu"],
-    "optional": [],
-    "unstable": []
-  },
-  "VMenuItem": {
-    "always": ["a", "li", "pr-2", "ul"],
-    "optional": ["is-disabled"],
-    "unstable": ["is-active", "is-flex"]
+    "unstable": [
+      "is-flex"
+    ]
   },
   "VMenuList": {
-    "always": ["menu-label", "menu-list", "ul"],
+    "always": [
+      "menu-label",
+      "menu-list",
+      "ul"
+    ],
     "optional": [],
     "unstable": []
   },
   "VNavbar": {
     "always": [
-      "burger",
       "navbar",
       "navbar-brand",
-      "navbar-burger",
       "navbar-end",
       "navbar-menu",
       "navbar-start"
     ],
-    "optional": ["is-active", "is-spaced", "is-transparent"],
-    "unstable": ["has-shadow", "is-active", "is-fixed-bottom", "is-fixed-top"]
+    "optional": [
+      "is-spaced",
+      "is-transparent"
+    ],
+    "unstable": [
+      "has-shadow",
+      "is-active",
+      "is-fixed-bottom",
+      "is-fixed-top"
+    ]
   },
   "VNavbarBurger": {
-    "always": ["burger", "navbar-burger"],
-    "optional": ["is-active"],
+    "always": [
+      "burger",
+      "navbar-burger"
+    ],
+    "optional": [
+      "is-active"
+    ],
     "unstable": []
   },
   "VNavbarDropdown": {
-    "always": ["has-dropdown", "navbar-dropdown", "navbar-item", "navbar-link"],
-    "optional": ["is-arrowless", "is-boxed", "is-hoverable", "is-right"],
-    "unstable": ["is-active"]
+    "always": [
+      "has-dropdown",
+      "navbar-dropdown",
+      "navbar-item",
+      "navbar-link"
+    ],
+    "optional": [
+      "is-arrowless",
+      "is-boxed",
+      "is-hoverable",
+      "is-right"
+    ],
+    "unstable": [
+      "is-active"
+    ]
   },
   "VNavbarItem": {
-    "always": ["a", "navbar-item"],
-    "optional": ["is-active"],
+    "always": [
+      "navbar-item"
+    ],
+    "optional": [
+      "is-active"
+    ],
     "unstable": []
   },
   "VPagination": {
     "always": [
-      "#",
-      "a",
-      "aria-label",
-      "change",
       "info",
       "pagination",
       "pagination-ellipsis",
-      "pagination-link",
       "pagination-list",
       "pagination-next",
       "pagination-previous"
     ],
-    "optional": ["is-rounded", "is-simple"],
-    "unstable": ["is-current"]
+    "optional": [
+      "is-rounded",
+      "is-simple"
+    ],
+    "unstable": []
   },
   "VPaginationItem": {
-    "always": ["#", "a", "pagination-link"],
+    "always": [
+      "pagination-link"
+    ],
     "optional": [],
-    "unstable": ["is-current"]
+    "unstable": [
+      "is-current"
+    ]
   },
   "VStepItem": {
-    "always": [
-      "change",
-      "step-content",
-      "step-details",
-      "step-item",
-      "step-marker",
-      "step-title",
-      "steps"
-    ],
-    "optional": ["is-animated"],
-    "unstable": ["is-active", "is-clickable", "is-completed", "is-disabled"]
+    "always": [],
+    "optional": [],
+    "unstable": []
   },
   "VSteps": {
     "always": [
-      "change",
       "step-content",
       "step-details",
       "step-item",
@@ -246,148 +315,84 @@
       "step-title",
       "steps"
     ],
-    "optional": ["is-animated"],
-    "unstable": ["is-active", "is-clickable", "is-completed", "is-disabled"]
+    "optional": [
+      "is-animated"
+    ],
+    "unstable": [
+      "is-active",
+      "is-clickable",
+      "is-completed",
+      "is-disabled"
+    ]
   },
   "VTable": {
     "always": [
-      "#",
-      "a",
-      "aria-label",
-      "blur",
-      "button",
-      "change",
-      "check",
-      "checkbox",
-      "close",
-      "control",
-      "control-label",
-      "delete",
       "expansion",
-      "focus",
-      "has-background-dark",
-      "has-background-primary",
-      "has-text-light",
-      "has-text-primary",
-      "has-text-white",
-      "icon",
-      "info",
-      "input",
       "is-aligned-center",
-      "is-clickable",
-      "is-left",
       "is-primary",
-      "is-right",
-      "is-small",
       "mr-4",
       "mx-4",
       "my-2",
-      "pagination",
       "pagination-container",
-      "pagination-ellipsis",
-      "pagination-link",
-      "pagination-list",
-      "pagination-next",
-      "pagination-previous",
       "px-1",
-      "select",
-      "sticky-column",
-      "sticky-row",
       "table",
       "table-container",
       "table-wrapper",
-      "tag",
       "tbody",
       "td",
-      "text",
       "th",
       "thead",
       "tr",
-      "unknow",
-      "v-checkbox",
       "v-table"
     ],
     "optional": [
-      "is-active",
       "is-bordered",
-      "is-disabled",
-      "is-empty",
-      "is-expanded",
-      "is-focused",
       "is-fullwidth",
       "is-hoverable",
-      "is-hovered",
-      "is-inverted",
-      "is-light",
-      "is-loading",
-      "is-multiple",
       "is-narrow",
-      "is-outlined",
-      "is-rounded",
-      "is-selected",
-      "is-simple",
       "is-striped"
     ],
     "unstable": [
-      "has-addons",
-      "has-delete-icon",
-      "has-ellipsis",
-      "has-icons-left",
-      "has-icons-right",
       "has-mobile-cards",
-      "is-current",
-      "is-delete",
-      "is-fullwidth",
-      "sticky-table",
-      "tags"
+      "sticky-table"
     ]
   },
   "VTab": {
     "always": [
-      "change",
       "fade-enter",
       "fade-enter-active",
       "fade-enter-to",
       "fade-leave",
       "fade-leave-active",
       "fade-leave-to",
-      "is-toggle-rounded",
-      "li",
       "slide-enter",
       "slide-enter-active",
       "slide-enter-to",
       "slide-leave",
       "slide-leave-active",
       "slide-leave-to",
-      "slide-left",
       "slide-left-enter",
       "slide-left-enter-active",
       "slide-left-enter-to",
       "slide-left-leave",
       "slide-left-leave-active",
       "slide-left-leave-to",
-      "slide-right",
       "slide-right-enter",
       "slide-right-enter-active",
       "slide-right-enter-to",
       "slide-right-leave",
       "slide-right-leave-active",
-      "slide-right-leave-to",
-      "tabs",
-      "ul"
+      "slide-right-leave-to"
     ],
     "optional": [],
-    "unstable": [
-      "is-active",
-      "is-disabled",
-      "is-fullwidth",
-      "is-height-animated",
-      "is-toggle",
-      "is-toggle-rounded"
-    ]
+    "unstable": []
   },
   "VTabs": {
-    "always": ["change", "is-toggle-rounded", "li", "tabs", "ul"],
+    "always": [
+      "li",
+      "tabs",
+      "ul"
+    ],
     "optional": [],
     "unstable": [
       "is-active",
@@ -400,37 +405,15 @@
   },
   "VAutocomplete": {
     "always": [
-      "control",
       "dropdown",
       "dropdown-content",
       "dropdown-item",
       "dropdown-menu",
-      "dropdown-trigger",
-      "field",
-      "field-body",
-      "field-label",
-      "help",
-      "icon",
-      "input",
-      "is-clickable",
-      "is-left",
-      "is-right",
-      "label",
-      "text"
-    ],
-    "optional": [
-      "is-expanded",
-      "is-grouped",
-      "is-horizontal",
-      "is-loading",
-      "is-rounded"
+      "dropdown-trigger"
     ],
+    "optional": [],
     "unstable": [
-      "has-addons",
-      "has-icons-left",
-      "has-icons-right",
-      "is-active",
-      "is-grouped-multiline"
+      "is-active"
     ]
   },
   "VAvatar": {
@@ -442,11 +425,15 @@
       "is-size-4",
       "mx-1"
     ],
-    "optional": ["is-rounded"],
+    "optional": [
+      "is-rounded"
+    ],
     "unstable": []
   },
   "VButton": {
-    "always": ["button", "is-primary"],
+    "always": [
+      "button"
+    ],
     "optional": [
       "is-active",
       "is-focused",
@@ -458,45 +445,38 @@
       "is-rounded",
       "is-selected"
     ],
-    "unstable": ["is-fullwidth"]
+    "unstable": [
+      "is-fullwidth"
+    ]
   },
   "VCalendar": {
-    "always": [
-      "be",
-      "component",
-      "datetime",
-      "default",
-      "dialog",
-      "inline",
-      "provided",
-      "requires",
-      "save",
-      "select",
-      "service",
-      "the",
-      "to"
-    ],
+    "always": [],
     "optional": [],
     "unstable": []
   },
   "VChart": {
-    "always": ["div", "post"],
+    "always": [
+      "div",
+      "post"
+    ],
     "optional": [],
     "unstable": []
   },
   "VCheckbox": {
-    "always": ["check", "checkbox", "control-label", "v-checkbox"],
-    "optional": ["is-disabled"],
+    "always": [
+      "check",
+      "checkbox",
+      "control-label",
+      "v-checkbox"
+    ],
+    "optional": [
+      "is-disabled"
+    ],
     "unstable": []
   },
   "VContainer": {
     "always": [
-      "background-image",
-      "background-repeat",
-      "background-size",
-      "container",
-      "cover",
-      "no-repeat"
+      "container"
     ],
     "optional": [],
     "unstable": []
@@ -548,9 +528,22 @@
     "unstable": []
   },
   "VField": {
-    "always": ["field", "field-body", "field-label", "help", "label"],
-    "optional": ["is-expanded", "is-grouped", "is-horizontal"],
-    "unstable": ["has-addons", "is-grouped-multiline"]
+    "always": [
+      "field",
+      "field-body",
+      "field-label",
+      "help",
+      "label"
+    ],
+    "optional": [
+      "is-expanded",
+      "is-grouped",
+      "is-horizontal"
+    ],
+    "unstable": [
+      "has-addons",
+      "is-grouped-multiline"
+    ]
   },
   "VFile": {
     "always": [
@@ -558,21 +551,35 @@
       "file-cta",
       "file-input",
       "file-label",
-      "file-name",
-      "is-primary"
+      "file-name"
+    ],
+    "optional": [
+      "is-boxed",
+      "is-fullwidth"
     ],
-    "optional": ["is-boxed", "is-fullwidth"],
-    "unstable": ["has-name"]
+    "unstable": [
+      "has-name"
+    ]
   },
   "VIcon": {
-    "always": ["100%"],
+    "always": [],
     "optional": [],
-    "unstable": ["icon"]
+    "unstable": [
+      "icon"
+    ]
   },
   "VImage": {
-    "always": ["figure", "image", "img"],
-    "optional": ["is-rounded"],
-    "unstable": ["container"]
+    "always": [
+      "figure",
+      "image",
+      "img"
+    ],
+    "optional": [
+      "is-rounded"
+    ],
+    "unstable": [
+      "container"
+    ]
   },
   "VInput": {
     "always": [
@@ -581,14 +588,25 @@
       "input",
       "is-clickable",
       "is-left",
-      "is-right",
-      "text"
+      "is-right"
     ],
-    "optional": ["is-expanded", "is-loading", "is-rounded"],
-    "unstable": ["has-icons-left", "has-icons-right"]
+    "optional": [
+      "is-expanded",
+      "is-loading",
+      "is-rounded"
+    ],
+    "unstable": [
+      "has-icons-left",
+      "has-icons-right"
+    ]
   },
   "VMedia": {
-    "always": ["media", "media-content", "media-left", "media-right"],
+    "always": [
+      "media",
+      "media-content",
+      "media-left",
+      "media-right"
+    ],
     "optional": [],
     "unstable": []
   },
@@ -605,27 +623,25 @@
       "modal-close",
       "modal-content"
     ],
-    "optional": ["is-active"],
+    "optional": [
+      "is-active"
+    ],
     "unstable": []
   },
   "VProgress": {
     "always": [
-      "is-darkgrey",
-      "percent",
       "progress",
       "progress-value",
-      "progress-wrapper",
-      "raw",
-      "value"
+      "progress-wrapper"
     ],
     "optional": [],
-    "unstable": ["more-than-half"]
+    "unstable": [
+      "more-than-half"
+    ]
   },
   "VSelect": {
     "always": [
-      "blur",
       "control",
-      "focus",
       "has-background-dark",
       "has-text-light",
       "select"
@@ -637,23 +653,19 @@
       "is-multiple",
       "is-rounded"
     ],
-    "unstable": ["is-fullwidth"]
+    "unstable": [
+      "is-fullwidth"
+    ]
   },
   "VSidebar": {
     "always": [
-      "absolute",
-      "close",
       "fade-enter",
       "fade-enter-active",
       "fade-enter-to",
       "fade-leave",
       "fade-leave-active",
       "fade-leave-to",
-      "fixed",
-      "fullwidth",
-      "hide",
       "is-width-animated",
-      "reduce",
       "sidebar-background",
       "sidebar-content",
       "slide-enter",
@@ -662,24 +674,25 @@
       "slide-leave",
       "slide-leave-active",
       "slide-leave-to",
-      "slide-left",
       "slide-left-enter",
       "slide-left-enter-active",
       "slide-left-enter-to",
       "slide-left-leave",
       "slide-left-leave-active",
       "slide-left-leave-to",
-      "slide-right",
       "slide-right-enter",
       "slide-right-enter-active",
       "slide-right-enter-to",
       "slide-right-leave",
       "slide-right-leave-active",
       "slide-right-leave-to",
-      "static",
       "v-sidebar"
     ],
-    "optional": ["is-fullheight", "is-fullwidth", "is-right"],
+    "optional": [
+      "is-fullheight",
+      "is-fullwidth",
+      "is-right"
+    ],
     "unstable": [
       "is-absolute",
       "is-fixed",
@@ -693,18 +706,38 @@
     ]
   },
   "VSlider": {
-    "always": ["horizontal", "is-fullwidth", "slider", "vertical"],
+    "always": [
+      "is-fullwidth",
+      "slider"
+    ],
     "optional": [],
-    "unstable": ["has-output-tooltip", "is-circle"]
+    "unstable": [
+      "has-output-tooltip",
+      "is-circle"
+    ]
   },
   "VSwitch": {
-    "always": ["check", "control-label", "switch"],
-    "optional": ["is-disabled", "is-outlined", "is-rounded"],
+    "always": [
+      "check",
+      "control-label",
+      "switch"
+    ],
+    "optional": [
+      "is-disabled",
+      "is-outlined",
+      "is-rounded"
+    ],
     "unstable": []
   },
   "VTag": {
-    "always": ["close", "delete", "is-small", "tag"],
-    "optional": ["is-rounded"],
+    "always": [
+      "delete",
+      "is-small",
+      "tag"
+    ],
+    "optional": [
+      "is-rounded"
+    ],
     "unstable": [
       "has-addons",
       "has-delete-icon",
@@ -714,12 +747,23 @@
     ]
   },
   "VTextarea": {
-    "always": ["control", "textarea"],
-    "optional": ["is-focused", "is-hovered", "is-loading"],
-    "unstable": ["is-invisible"]
+    "always": [
+      "control",
+      "textarea"
+    ],
+    "optional": [
+      "is-focused",
+      "is-hovered",
+      "is-loading"
+    ],
+    "unstable": [
+      "is-invisible"
+    ]
   },
   "VTimeline": {
-    "always": ["timeline"],
+    "always": [
+      "timeline"
+    ],
     "optional": [],
     "unstable": [
       "has-text-danger",
@@ -729,7 +773,7 @@
     ]
   },
   "VTooltip": {
-    "always": ["is-medium", "is-primary", "is-top", "transition-delay"],
+    "always": [],
     "optional": [
       "is-always",
       "is-animated",
@@ -737,7 +781,9 @@
       "is-multiline",
       "is-square"
     ],
-    "unstable": ["v-tooltip"]
+    "unstable": [
+      "v-tooltip"
+    ]
   },
   "VUpload": {
     "always": [
@@ -748,7 +794,14 @@
       "file-label",
       "file-name"
     ],
-    "optional": ["is-boxed", "is-centered", "is-right"],
-    "unstable": ["has-name", "is-fullwidth"]
+    "optional": [
+      "is-boxed",
+      "is-centered",
+      "is-right"
+    ],
+    "unstable": [
+      "has-name",
+      "is-fullwidth"
+    ]
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index 4f1d59c..d8041cd 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTemplateRef } from "vue";
+import { ref, watchEffect } from "vue";
 
 defineOptions({
   inheritAttrs: false,
@@ -12,51 +12,65 @@ const props = withDefaults(
     icon?: string;
     tag?: string;
     ariaRole?: string;
+    active?: boolean;
+    expanded?: boolean;
   }>(),
   {
     tag: "a",
     ariaRole: "menuitem",
+    active: false,
+    expanded: false,
   },
 );
 
-const active = defineModel<boolean>("active");
-const expanded = defineModel<boolean>("expanded");
-const content = useTemplateRef<HTMLElement>("content");
+const emit = defineEmits<{
+  (e: "update:expanded", value: boolean): void;
+  (e: "update:active", value: boolean): void;
+}>();
 
-const onClick = () => {
-  // TODO Disable previous active item
-  if (props.disabled) return;
+const active = ref(props.active);
+const expanded = ref(props.expanded);
+const content = ref<HTMLElement | null>(null);
 
-  expanded.value = !expanded.value;
-  active.value = true;
+// Sync with props
+watchEffect(() => {
+  active.value = props.active;
+  expanded.value = props.expanded;
+});
+
+const onClick = (event: Event) => {
+  if (props.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  // Toggle expansion state
+  const newExpanded = !expanded.value;
+  expanded.value = newExpanded;
+
+  // Emit changes to parent
+  emit("update:expanded", newExpanded);
 };
 </script>
 
 <template>
-  <li class="li" :role="ariaRole" ref="content">
-    <component
-      :is="tag"
-      v-bind="$attrs"
-      :class="{
-        'is-flex': icon,
-        'is-active': active,
-        'is-disabled': disabled
-      }"
-      @click="onClick">
-      <span v-if="icon" class="pr-2">{{ icon }} </span>
+  <li class="li" :role="ariaRole" ref="content" :aria-expanded="expanded">
+    <component :is="tag" v-bind="$attrs" :class="{
+      'is-flex': icon,
+      'is-active': active,
+      'is-disabled': disabled
+    }" :aria-disabled="disabled" @click="onClick" @keydown.enter="onClick">
+      <span v-if="icon" class="pr-2">{{ icon }}</span>
       <span v-if="label">{{ label }}</span>
-      <slot
-        v-else
-        name="label"
-        :expanded="expanded"
-        :active="active" />
+      <slot v-else name="label" :expanded="expanded" :active="active" />
     </component>
+
     <template v-if="$slots.default">
-      <!-- <transition name="slide"> -->
-      <ul class="ul" v-show="expanded">
-        <slot />
-      </ul>
-      <!-- </transition> -->
+      <transition name="slide">
+        <ul v-show="expanded" class="ul" role="menu">
+          <slot />
+        </ul>
+      </transition>
     </template>
   </li>
 </template>

From 39392da1c33ac6c7096aaf6275de16920204c5aa Mon Sep 17 00:00:00 2001
From: AbsoluteC2H6O <alfredofp63@gmail.com>
Date: Wed, 23 Apr 2025 01:11:07 -0400
Subject: [PATCH 212/212] fix(menu): properly handle submenu expansion

- Fix tests menu.
---
 src/components/compounds/Menu/MenuItem.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/compounds/Menu/MenuItem.vue b/src/components/compounds/Menu/MenuItem.vue
index d8041cd..2511f79 100644
--- a/src/components/compounds/Menu/MenuItem.vue
+++ b/src/components/compounds/Menu/MenuItem.vue
@@ -46,10 +46,14 @@ const onClick = (event: Event) => {
 
   // Toggle expansion state
   const newExpanded = !expanded.value;
+  const newActive = !active.value;
   expanded.value = newExpanded;
-
+  active.value = newActive;
   // Emit changes to parent
   emit("update:expanded", newExpanded);
+  if (newActive) {
+    emit("update:active", newActive);
+  }
 };
 </script>