nuxt-glorious 1.2.0 → 1.2.9-5

package/dist/module.d.mts

@@ -1,7 +1,44 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    fetch?: {
+        baseURL?: string;
+        credentials?: 'same-origin' | 'include';
+    };
+    seo?: {
+        suffix?: string;
+        title?: string;
+        description?: string;
+    };
+    auth?: {
+        cookie?: {
+            name?: string;
+            httpOnly?: boolean;
+        };
+        redirect?: {
+            logout?: string;
+            login?: string;
+        };
+        strategy?: {
+            provider?: 'laravel-passport' | '';
+            endpoints?: {
+                userInfo?: {
+                    url?: string;
+                    method?: 'GET' | 'POST' | 'PUT' | 'PATCH';
+                    pick?: string;
+                };
+            };
+        };
+    };
+    components: {
+        alert: {
+            props: {
+                color: string;
+            };
+        };
+    };
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };

package/dist/module.d.ts

@@ -1,7 +1,44 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
+    fetch?: {
+        baseURL?: string;
+        credentials?: 'same-origin' | 'include';
+    };
+    seo?: {
+        suffix?: string;
+        title?: string;
+        description?: string;
+    };
+    auth?: {
+        cookie?: {
+            name?: string;
+            httpOnly?: boolean;
+        };
+        redirect?: {
+            logout?: string;
+            login?: string;
+        };
+        strategy?: {
+            provider?: 'laravel-passport' | '';
+            endpoints?: {
+                userInfo?: {
+                    url?: string;
+                    method?: 'GET' | 'POST' | 'PUT' | 'PATCH';
+                    pick?: string;
+                };
+            };
+        };
+    };
+    components: {
+        alert: {
+            props: {
+                color: string;
+            };
+        };
+    };
 }
+
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
-  "name": "glorious",
+  "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "1.2.0"
+  "version": "1.2.9-5"
 }

package/dist/module.mjs

@@ -1,47 +1,51 @@
 import { defineNuxtModule, createResolver, installModule, addImportsDir, addComponentsDir, addPlugin, addRouteMiddleware } from '@nuxt/kit';
 import defu from 'defu';
 
+const defaultModuleOption = {
+  fetch: {
+    baseURL: "/",
+    credentials: "same-origin"
+  },
+  seo: {
+    suffix: "",
+    title: "",
+    description: ""
+  },
+  auth: {
+    cookie: {
+      name: "ga-token",
+      httpOnly: false
+    },
+    redirect: {
+      login: "/login",
+      logout: "/logout"
+    },
+    strategy: {
+      provider: ""
+    }
+  },
+  components: {
+    alert: {
+      props: {
+        color: "green"
+      }
+    }
+  }
+};
+
 const module = defineNuxtModule({
   meta: {
-    name: "glorious",
+    name: "nuxt-glorious",
     configKey: "glorious"
   },
   // Default configuration options of the Nuxt module
   defaults: {},
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    nuxt.options.runtimeConfig.public.glorious = defu(nuxt.options.glorious, {
-      fetch: {
-        baseURL: "/",
-        credentials: "same-origin"
-      },
-      seo: {
-        suffix: "",
-        title: "",
-        description: ""
-      },
-      auth: {
-        cookie: {
-          name: "ga-token",
-          httpOnly: false
-        },
-        redirect: {
-          logout: "/login",
-          login: "/login"
-        },
-        strategy: {
-          provider: "",
-          //[laravel-passport]
-          endpoints: {
-            userInfo: {
-              url: "/",
-              method: "GET",
-              pick: ""
-            }
-          }
-        }
-      }
-    });
+    nuxt.options.runtimeConfig.public.glorious = defu(
+      nuxt.options.glorious,
+      defaultModuleOption
+    );
     await installModule("@nuxtjs/tailwindcss", {
       // module configuration
       exposeConfig: true,
@@ -49,15 +53,15 @@ const module = defineNuxtModule({
         darkMode: "class",
         content: {
           files: [
-            resolver.resolve("./runtime/components/G/**/*.{vue,mjs,ts}"),
+            resolver.resolve("./runtime/components/**/*.{vue,mjs,ts}"),
             resolver.resolve("./runtime/*.{mjs,js,ts}")
           ]
         }
       }
     });
     await installModule("@pinia/nuxt");
+    await installModule("@nuxt/image");
     addImportsDir(resolver.resolve("runtime/composables"));
-    addImportsDir(resolver.resolve("runtime/utils"));
     addImportsDir(resolver.resolve("runtime/stores"));
     addImportsDir(resolver.resolve("runtime/middlewares"));
     addComponentsDir({
@@ -71,12 +75,17 @@ const module = defineNuxtModule({
       });
     });
     addPlugin(resolver.resolve("./runtime/plugins/glorious-app-setting"));
-    addPlugin(resolver.resolve("./runtime/plugins/Drawer"));
+    addPlugin(resolver.resolve("./runtime/plugins/InputComponent"));
     addRouteMiddleware({
       name: "g-auth-strategy",
       path: resolver.resolve("./runtime/middlewares/AuthStrategy"),
       global: true
     });
+    addRouteMiddleware({
+      name: "response-glorious-store",
+      path: resolver.resolve("./runtime/middlewares/ResponseGloriousStore"),
+      global: true
+    });
     addRouteMiddleware({
       name: "g-auth",
       path: resolver.resolve("./runtime/middlewares/Auth")

package/dist/runtime/assets/icons/glorious-eye-fill.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_138_29818)">
-<path d="M1.18091 12C2.12091 6.88 6.60791 3 11.9999 3C17.3919 3 21.8779 6.88 22.8189 12C21.8789 17.12 17.3919 21 11.9999 21C6.60791 21 2.12191 17.12 1.18091 12ZM11.9999 17C13.326 17 14.5978 16.4732 15.5354 15.5355C16.4731 14.5979 16.9999 13.3261 16.9999 12C16.9999 10.6739 16.4731 9.40215 15.5354 8.46447C14.5978 7.52678 13.326 7 11.9999 7C10.6738 7 9.40206 7.52678 8.46437 8.46447C7.52669 9.40215 6.99991 10.6739 6.99991 12C6.99991 13.3261 7.52669 14.5979 8.46437 15.5355C9.40206 16.4732 10.6738 17 11.9999 17ZM11.9999 15C11.2043 15 10.4412 14.6839 9.87859 14.1213C9.31598 13.5587 8.99991 12.7956 8.99991 12C8.99991 11.2044 9.31598 10.4413 9.87859 9.87868C10.4412 9.31607 11.2043 9 11.9999 9C12.7956 9 13.5586 9.31607 14.1212 9.87868C14.6838 10.4413 14.9999 11.2044 14.9999 12C14.9999 12.7956 14.6838 13.5587 14.1212 14.1213C13.5586 14.6839 12.7956 15 11.9999 15Z" fill="black"/>
+<path d="M1.18091 12C2.12091 6.88 6.60791 3 11.9999 3C17.3919 3 21.8779 6.88 22.8189 12C21.8789 17.12 17.3919 21 11.9999 21C6.60791 21 2.12191 17.12 1.18091 12ZM11.9999 17C13.326 17 14.5978 16.4732 15.5354 15.5355C16.4731 14.5979 16.9999 13.3261 16.9999 12C16.9999 10.6739 16.4731 9.40215 15.5354 8.46447C14.5978 7.52678 13.326 7 11.9999 7C10.6738 7 9.40206 7.52678 8.46437 8.46447C7.52669 9.40215 6.99991 10.6739 6.99991 12C6.99991 13.3261 7.52669 14.5979 8.46437 15.5355C9.40206 16.4732 10.6738 17 11.9999 17ZM11.9999 15C11.2043 15 10.4412 14.6839 9.87859 14.1213C9.31598 13.5587 8.99991 12.7956 8.99991 12C8.99991 11.2044 9.31598 10.4413 9.87859 9.87868C10.4412 9.31607 11.2043 9 11.9999 9C12.7956 9 13.5586 9.31607 14.1212 9.87868C14.6838 10.4413 14.9999 11.2044 14.9999 12C14.9999 12.7956 14.6838 13.5587 14.1212 14.1213C13.5586 14.6839 12.7956 15 11.9999 15Z" fill="#6b7280"/>
 </g>
 <defs>
 <clipPath id="clip0_138_29818">

package/dist/runtime/assets/icons/glorious-eye-off-fill.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_138_29807)">
-<path d="M4.51991 5.93407L1.39291 2.80807L2.80791 1.39307L22.6069 21.1931L21.1919 22.6071L17.8819 19.2971C16.1231 20.4126 14.0826 21.0034 11.9999 21.0001C6.60791 21.0001 2.12191 17.1201 1.18091 12.0001C1.61094 9.67078 2.78254 7.54296 4.52091 5.93407H4.51991ZM14.7569 16.1721L13.2929 14.7081C12.733 14.976 12.1037 15.0636 11.4918 14.9589C10.88 14.8541 10.3157 14.5621 9.87678 14.1232C9.43785 13.6843 9.14588 13.12 9.04112 12.5081C8.93637 11.8963 9.02399 11.267 9.29191 10.7071L7.82791 9.24307C7.19162 10.2046 6.90718 11.3564 7.02274 12.5036C7.1383 13.6507 7.64676 14.7227 8.46203 15.5379C9.27729 16.3532 10.3493 16.8617 11.4964 16.9772C12.6436 17.0928 13.7954 16.8084 14.7569 16.1721ZM7.97391 3.76007C9.22091 3.27007 10.5799 3.00007 11.9999 3.00007C17.3919 3.00007 21.8779 6.88007 22.8189 12.0001C22.5125 13.6658 21.8238 15.2376 20.8069 16.5921L16.9469 12.7321C17.0616 11.9597 16.9937 11.1712 16.7488 10.4297C16.5039 9.68827 16.0888 9.01448 15.5366 8.46233C14.9845 7.91019 14.3107 7.49504 13.5693 7.25014C12.8278 7.00524 12.0393 6.93741 11.2669 7.05207L7.97391 3.76107V3.76007Z" fill="black"/>
+<path d="M4.51991 5.93407L1.39291 2.80807L2.80791 1.39307L22.6069 21.1931L21.1919 22.6071L17.8819 19.2971C16.1231 20.4126 14.0826 21.0034 11.9999 21.0001C6.60791 21.0001 2.12191 17.1201 1.18091 12.0001C1.61094 9.67078 2.78254 7.54296 4.52091 5.93407H4.51991ZM14.7569 16.1721L13.2929 14.7081C12.733 14.976 12.1037 15.0636 11.4918 14.9589C10.88 14.8541 10.3157 14.5621 9.87678 14.1232C9.43785 13.6843 9.14588 13.12 9.04112 12.5081C8.93637 11.8963 9.02399 11.267 9.29191 10.7071L7.82791 9.24307C7.19162 10.2046 6.90718 11.3564 7.02274 12.5036C7.1383 13.6507 7.64676 14.7227 8.46203 15.5379C9.27729 16.3532 10.3493 16.8617 11.4964 16.9772C12.6436 17.0928 13.7954 16.8084 14.7569 16.1721ZM7.97391 3.76007C9.22091 3.27007 10.5799 3.00007 11.9999 3.00007C17.3919 3.00007 21.8779 6.88007 22.8189 12.0001C22.5125 13.6658 21.8238 15.2376 20.8069 16.5921L16.9469 12.7321C17.0616 11.9597 16.9937 11.1712 16.7488 10.4297C16.5039 9.68827 16.0888 9.01448 15.5366 8.46233C14.9845 7.91019 14.3107 7.49504 13.5693 7.25014C12.8278 7.00524 12.0393 6.93741 11.2669 7.05207L7.97391 3.76107V3.76007Z" fill="#6b7280"/>
 </g>
 <defs>
 <clipPath id="clip0_138_29807">

package/dist/runtime/assets/icons/glorious-star-fill.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99999 15L4.12199 18.59L5.71999 11.89L0.48999 7.41L7.35499 6.86L9.99999 0.5L12.645 6.86L19.511 7.41L14.28 11.89L15.878 18.59L9.99999 15Z" fill="black"/>
+</svg>

package/dist/runtime/assets/icons/glorious-star-half.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99999 12.656L12.817 14.376L12.051 11.166L14.558 9.019L11.268 8.755L9.99999 5.708V12.656ZM9.99999 15L4.12199 18.59L5.71999 11.89L0.48999 7.41L7.35499 6.86L9.99999 0.5L12.645 6.86L19.511 7.41L14.28 11.89L15.878 18.59L9.99999 15Z" fill="black"/>
+</svg>

package/dist/runtime/assets/icons/glorious-star-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9999 18.26L4.94691 22.208L6.52191 14.28L0.586914 8.792L8.61391 7.84L11.9999 0.5L15.3859 7.84L23.4129 8.792L17.4779 14.28L19.0529 22.208L11.9999 18.26ZM11.9999 15.968L16.2469 18.345L15.2979 13.572L18.8709 10.267L14.0379 9.694L11.9999 5.275L9.96191 9.695L5.12891 10.267L8.70191 13.572L7.75291 18.345L11.9999 15.968Z" fill="black"/>
+</svg>

package/dist/runtime/components/G/Alert.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import _props from './../props/Alert'
+
+const props = defineProps(_props)
+</script>
+
+<template>
+  <div
+    class="glorious-alert"
+    :class="[`color-${props.color}`]"
+  >
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" src="../../style/components/alert.scss" />

package/dist/runtime/components/G/Avatar.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import _props from '../props/Avatar'
+
+const props: any = defineProps(_props)
+</script>
+
+<template>
+  <div
+    class="glorious-avatar"
+    :class="[`size-${props.size}`, `rounded-${props.rounded}`]"
+  >
+    <nuxt-img :src="props.src" />
+  </div>
+</template>
+
+<style lang="scss" src="../../style/components/avatar.scss" />

package/dist/runtime/components/G/Breadcrumb.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import _props from '../props/Breadcrumb'
+
+const props: any = defineProps(_props)
+</script>
+
+<template>
+  <div class="glorious-breadcrumb flex gap-1 flex-wrap">
+    <div
+      v-for="(item, index) in props.items"
+      :key="index"
+      class="flex items-center gap-1 flex-wrap"
+    >
+      <GIcon
+        v-if="item.icon"
+        :name="`${item.icon}`"
+      />
+      <nuxt-link
+        v-if="item.to"
+        class="glorious-breadcrumb-link"
+        :to="`${item.to}`"
+      >
+        {{ item.text }}
+      </nuxt-link>
+      <span
+        v-else
+        class="glorious-breadcrumb-text"
+        :class="[index + 1 === props.items.length ? 'end-text' : '']"
+      >
+        {{ item.text }}
+      </span>
+      <span v-if="index + 1 !== props.items.length">{{ props.divider }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="../../style/components/breadcrumb.scss" />

package/dist/runtime/components/G/Button.vue

@@ -1,41 +1,7 @@
 <script lang="ts" setup>
-const props = defineProps({
-  color: {
-    required: false,
-    default: "primary",
-    type: String as () => "orange" | "blue" | "gray" | "red" | "primary",
-  },
-  size: {
-    required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "xsm",
-  },
-  outline: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  disabled: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  loading: {
-    requried: false,
-    default: false,
-    type: Boolean,
-  },
-  to: {
-    requried: false,
-    default: "",
-    type: String,
-  },
-  ariaLabel: {
-    requried: false,
-    default: "",
-    type: String,
-  },
-});
+import _props from '../props/Button'
+
+const props: any = defineProps(_props)
 </script>
 
 <template>
@@ -43,13 +9,17 @@ const props = defineProps({
     v-if="props.to === ''"
     :aria-label="props.ariaLabel"
     :class="[
-      `glorious-button-${props.color}`,
-      props.size,
+      `glorious-button `,
+      `color-${props.color}`,
+      `size-${props.size}`,
       props.outline ? 'outline' : '',
     ]"
     :disabled="props.disabled"
   >
-    <div v-if="props.loading" class="loading">
+    <div
+      v-if="props.loading"
+      class="loading flex justify-center"
+    >
       <GLoading />
     </div>
     <slot v-else />
@@ -59,124 +29,13 @@ const props = defineProps({
     :to="props.to"
     :class="[
       `glorious-button-${props.color}`,
-      props.size,
+      `size-${props.size}`,
       props.outline ? 'outline' : '',
     ]"
     :disabled="props.disabled"
   >
-    <div v-if="props.loading" class="loading">
-      <GLoading />
-    </div>
-    <slot v-else />
+    <slot />
   </NuxtLink>
 </template>
 
-<style>
-button:focus-visible {
-  @apply outline-none;
-}
-
-.xl.glorious-button-orange, .xl.glorious-button-blue, .xl.glorious-button-gray, .xl.glorious-button-red, .xl.glorious-button-primary {
-  @apply py-2.5;
-}
-.xl.glorious-button-orange > div.loading > div > div, .xl.glorious-button-blue > div.loading > div > div, .xl.glorious-button-gray > div.loading > div > div, .xl.glorious-button-red > div.loading > div > div, .xl.glorious-button-primary > div.loading > div > div {
-  @apply w-[24px] !important;
-}
-.lg.glorious-button-orange, .lg.glorious-button-blue, .lg.glorious-button-gray, .lg.glorious-button-red, .lg.glorious-button-primary {
-  @apply py-2;
-}
-.lg.glorious-button-orange > div.loading > div > div, .lg.glorious-button-blue > div.loading > div > div, .lg.glorious-button-gray > div.loading > div > div, .lg.glorious-button-red > div.loading > div > div, .lg.glorious-button-primary > div.loading > div > div {
-  @apply w-[24px] !important;
-}
-.md.glorious-button-orange, .md.glorious-button-blue, .md.glorious-button-gray, .md.glorious-button-red, .md.glorious-button-primary {
-  @apply py-1.5;
-}
-.md.glorious-button-orange > div.loading > div > div, .md.glorious-button-blue > div.loading > div > div, .md.glorious-button-gray > div.loading > div > div, .md.glorious-button-red > div.loading > div > div, .md.glorious-button-primary > div.loading > div > div {
-  @apply w-[24px] !important;
-}
-.sm.glorious-button-orange, .sm.glorious-button-blue, .sm.glorious-button-gray, .sm.glorious-button-red, .sm.glorious-button-primary {
-  @apply py-1;
-}
-.sm.glorious-button-orange > div.loading > div > div, .sm.glorious-button-blue > div.loading > div > div, .sm.glorious-button-gray > div.loading > div > div, .sm.glorious-button-red > div.loading > div > div, .sm.glorious-button-primary > div.loading > div > div {
-  @apply w-[24px] !important;
-}
-.xsm.glorious-button-orange, .xsm.glorious-button-blue, .xsm.glorious-button-gray, .xsm.glorious-button-red, .xsm.glorious-button-primary {
-  @apply py-0.5;
-}
-.xsm.glorious-button-orange > div.loading > div > div, .xsm.glorious-button-blue > div.loading > div > div, .xsm.glorious-button-gray > div.loading > div > div, .xsm.glorious-button-red > div.loading > div > div, .xsm.glorious-button-primary > div.loading > div > div {
-  @apply w-[24px] !important;
-}
-
-.outline.glorious-button-orange, .outline.glorious-button-blue, .outline.glorious-button-gray, .outline.glorious-button-red, .outline.glorious-button-primary {
-  @apply bg-transparent border outline-none;
-}
-
-.glorious-button-orange > div.loading, .glorious-button-blue > div.loading, .glorious-button-gray > div.loading, .glorious-button-red > div.loading, .glorious-button-primary > div.loading {
-  @apply flex justify-center items-center;
-}
-
-.glorious-button-primary {
-  @apply bg-green-700 hover:bg-green-600 rounded-md text-white border-green-500 px-3;
-}
-.glorious-button-primary.outline {
-  @apply text-gray-500 hover:bg-green-100;
-}
-.glorious-button-primary:disabled {
-  @apply cursor-not-allowed;
-}
-.glorious-button-primary:disabled:not(:disabled) {
-  @apply bg-green-300;
-}
-
-.glorious-button-red {
-  @apply bg-red-500 hover:bg-red-600 rounded-md text-white border-red-500 px-3;
-}
-.glorious-button-red.outline {
-  @apply text-gray-500 hover:bg-red-100;
-}
-.glorious-button-red:disabled {
-  @apply cursor-not-allowed;
-}
-.glorious-button-red:disabled:not(:disabled) {
-  @apply bg-red-300;
-}
-
-.glorious-button-gray {
-  @apply bg-gray-500 hover:bg-gray-600 rounded-md text-white border-gray-500 px-3;
-}
-.glorious-button-gray.outline {
-  @apply text-gray-500 hover:bg-gray-100;
-}
-.glorious-button-gray:disabled {
-  @apply cursor-not-allowed;
-}
-.glorious-button-gray:disabled:not(:disabled) {
-  @apply bg-gray-300;
-}
-
-.glorious-button-blue {
-  @apply bg-blue-500 hover:bg-blue-600 rounded-md text-white border-blue-500 px-3;
-}
-.glorious-button-blue.outline {
-  @apply text-gray-500 hover:bg-blue-100;
-}
-.glorious-button-blue:disabled {
-  @apply cursor-not-allowed;
-}
-.glorious-button-blue:disabled:not(:disabled) {
-  @apply bg-blue-300;
-}
-
-.glorious-button-orange {
-  @apply bg-orange-500 hover:bg-orange-600 rounded-md text-white border-orange-500 px-3;
-}
-.glorious-button-orange.outline {
-  @apply text-gray-500 hover:bg-orange-100;
-}
-.glorious-button-orange:disabled {
-  @apply cursor-not-allowed;
-}
-.glorious-button-orange:disabled:not(:disabled) {
-  @apply bg-orange-300;
-}
-</style>
+<style lang="scss" src="../../style/components/button.scss" />

package/dist/runtime/components/G/Checkbox.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import _props from '../props/CheckBox'
+
+const props: any = defineProps(_props)
+const model = defineModel()
+const inputFunction = (event: any) => (model.value = event.target.checked)
+
+model.value = props.checked
+</script>
+
+<template>
+  <label
+    class="glorious-checkbox"
+    :class="[`color-${props.color}`, `size-${props.size}`]"
+  >
+    <input
+      type="checkbox"
+      :checked="props.checked"
+      :disabled="props.disabled"
+      @input="inputFunction($event)"
+    />
+    <div></div>
+  </label>
+</template>
+
+<style lang="scss" src="../../style/components/checkbox.scss" />

package/dist/runtime/components/G/CountDown.vue

@@ -1,69 +1,59 @@
 <script lang="ts" setup>
-import { onMounted, ref, useId, useSlots } from "#imports";
+import { onMounted, ref, useId, useSlots } from '#imports'
+import _props from '../props/CountDown'
+
+const isEnd = ref<Boolean>(false)
+const props = defineProps(_props)
+const slot = useSlots()
+const id = useId()
 
-const isEnd = ref<Boolean>(false);
-const props = defineProps({
-  second: {
-    required: true,
-    type: Number,
-  },
-  className: {
-    required: true,
-    type: String,
-    default: "flex text-gray-500 font-medium",
-  },
-});
-const slot = useSlots();
-const id = useId();
 onMounted(() => {
-  const currentSecond = props.second;
-  let second = props.second;
+  let second = <number>props.second
   const countInterval = setInterval(() => {
     try {
-      second--;
-      let timeString = "";
+      second--
+      let timeString = ''
 
-      if (currentSecond <= 60)
+      if (<number>props.second <= 60)
         timeString =
-          "00:" + (second.toString().length === 1 ? "0" + second : second);
+          '00:' + (second.toString().length === 1 ? '0' + second : second)
       else {
-        let minute: number | string = Math.floor(second / 60);
+        let minute: number | string = Math.floor(second / 60)
         if (minute >= 1) {
-          const computeSecond = second - minute * 60;
+          const computeSecond = second - minute * 60
           const computeSecond2 =
             computeSecond.toString().length === 1
-              ? "0" + computeSecond
-              : computeSecond;
-          minute = minute.toString().length === 1 ? "0" + minute : minute;
-          timeString = minute + ":" + computeSecond2;
+              ? '0' + computeSecond
+              : computeSecond
+          minute = minute.toString().length === 1 ? '0' + minute : minute
+          timeString = minute + ':' + computeSecond2
         } else {
           timeString =
-            "00:" + (second.toString().length === 1 ? "0" + second : second);
+            '00:' + (second.toString().length === 1 ? '0' + second : second)
         }
       }
 
-      document.getElementById("countDown" + id).innerText = timeString;
+      const countDownElement: any = document.getElementById('countDown' + id)
+      countDownElement.innerText = timeString
 
       if (second === 0) {
-        isEnd.value = true;
-        clearInterval(countInterval);
+        isEnd.value = true
+        clearInterval(countInterval)
       }
     } catch (e) {
-      clearInterval(countInterval);
+      clearInterval(countInterval)
     }
-  }, 1000);
-});
+  }, 1000)
+})
 </script>
 <template>
-  <div>
-    <span
-      v-if="isEnd && typeof slot.end === 'undefined'"
-      :class="props.className"
-    >
-      00:00
-    </span>
-    <slot v-if="isEnd" name="end" />
-    <div v-else :class="props.className">
+  <div class="glorious-count-down">
+    <span v-if="isEnd && typeof slot.end === 'undefined'"> 00:00 </span>
+    <slot
+      v-if="isEnd"
+      name="end"
+    />
+    <div v-else>
       <slot name="one"></slot>
       <div :id="`countDown` + id" />
       <slot name="two"></slot>