feat: add utils and compossable example

Author: suradet-ps

src/App.vue

@@ -1,3 +1,4 @@
+<!-- src/App.vue -->
 <script setup lang="ts">
 import { computed } from 'vue';
 import { RouterView, useRoute } from 'vue-router';

src/components/common/AppHeader.vue

@@ -1,3 +1,4 @@
+<!-- src/components/common/AppHeader.vue -->
 <script setup lang="ts">
 import { RouterLink } from 'vue-router';
 </script>

src/components/common/BaseButton.vue

@@ -1,3 +1,4 @@
+<!-- src/components/common/BaseButton.vue -->
 <script setup lang="ts">
 type Props = {
   variant?: 'primary' | 'secondary' | 'danger';

src/composables/.gitkeep

@@ -0,0 +1,45 @@
+// src/composables/useToggle.ts
+import type { Ref } from 'vue';
+
+import { ref } from 'vue';
+
+/**
+ * A simple composable to manage boolean state.
+ * Useful for modals, menus, and switch toggles.
+ */
+export function useToggle(initialValue: boolean = false) {
+  const value: Ref<boolean> = ref(initialValue);
+
+  /**
+   * Explicitly sets the value to true.
+   */
+  const on = (): void => {
+    value.value = true;
+  };
+
+  /**
+   * Explicitly sets the value to false.
+   */
+  const off = (): void => {
+    value.value = false;
+  };
+
+  /**
+   * Toggles the current value.
+   */
+  const toggle = (newValue?: boolean): void => {
+    if (typeof newValue === 'boolean') {
+      value.value = newValue;
+    }
+    else {
+      value.value = !value.value;
+    }
+  };
+
+  return {
+    value,
+    on,
+    off,
+    toggle,
+  };
+}

src/composables/use-toggle.ts

@@ -1,3 +1,4 @@
+// src/env.d.ts
 /// <reference types="vite/client" />
 
 declare module '*.vue' {

src/env.d.ts

@@ -1,3 +1,4 @@
+<!-- src/layouts/BlankLayout.vue -->
 <template>
   <div class="min-h-screen flex flex-col justify-center items-center bg-gray-50">
     <slot />

src/layouts/BlankLayout.vue

@@ -1,3 +1,4 @@
+<!-- src/layouts/DefaultLayout.vue -->
 <script setup lang="ts">
 import AppHeader from '@/components/common/AppHeader.vue';
 </script>

src/layouts/DefaultLayout.vue

@@ -1,3 +1,4 @@
+// src/main.ts
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 

src/main.ts

@@ -1,3 +1,4 @@
+// src/stores/counter.ts
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';