nuxt-glorious 1.2.3-9 → 1.2.4

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

@@ -1,36 +1,16 @@
 <script lang="ts" setup>
-const props = defineProps({
-  color: {
-    required: false,
-    default: "blue",
-    type: String as () => "orange" | "blue" | "gray" | "red" | "green",
-  },
-});
+import _props from './../props/Alert'
+
+const props = defineProps(_props)
 </script>
 
 <template>
-  <div class="glorious-alert" :class="[`color-${props.color}`]">
+  <div
+    class="glorious-alert"
+    :class="[`color-${props.color}`]"
+  >
     <slot />
   </div>
 </template>
 
-<style>
-.glorious-alert {
-  @apply p-3 rounded shadow;
-}
-.glorious-alert.color-orange {
-  @apply border border-orange-300 bg-orange-100;
-}
-.glorious-alert.color-blue {
-  @apply border border-blue-300 bg-blue-100;
-}
-.glorious-alert.color-gray {
-  @apply border border-gray-300 bg-gray-100;
-}
-.glorious-alert.color-red {
-  @apply border border-red-300 bg-red-100;
-}
-.glorious-alert.color-green {
-  @apply border border-green-300 bg-green-100;
-}
-</style>
+<style lang="scss" src="../../assets/style/components/alert.scss" />

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

@@ -1,84 +1,16 @@
 <script lang="ts" setup>
-const props = defineProps({
-  src: {
-    required: true,
-    type: String,
-  },
-  size: {
-    required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "xs",
-  },
-  rounded: {
-    required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "xs" | "full",
-  },
-});
+import _props from '../props/Avatar'
+
+const props: any = defineProps(_props)
 </script>
 
 <template>
   <div
-    class="glorious-avatar overflow-hidden"
+    class="glorious-avatar"
     :class="[`size-${props.size}`, `rounded-${props.rounded}`]"
   >
     <img :src="props.src" />
   </div>
 </template>
 
-<style>
-.glorious-avatar.size-5xl {
-  @apply w-[64px] h-[64px];
-}
-.glorious-avatar.size-5xl > img {
-  @apply w-[64px] h-[64px];
-}
-.glorious-avatar.size-4xl {
-  @apply w-[60px] h-[60px];
-}
-.glorious-avatar.size-4xl > img {
-  @apply w-[60px] h-[60px];
-}
-.glorious-avatar.size-3xl {
-  @apply w-[56px] h-[56px];
-}
-.glorious-avatar.size-3xl > img {
-  @apply w-[56px] h-[56px];
-}
-.glorious-avatar.size-2xl {
-  @apply w-[52px] h-[52px];
-}
-.glorious-avatar.size-2xl > img {
-  @apply w-[52px] h-[52px];
-}
-.glorious-avatar.size-xl {
-  @apply w-[48px] h-[48px];
-}
-.glorious-avatar.size-xl > img {
-  @apply w-[48px] h-[48px];
-}
-.glorious-avatar.size-lg {
-  @apply w-[44px] h-[44px];
-}
-.glorious-avatar.size-lg > img {
-  @apply w-[44px] h-[44px];
-}
-.glorious-avatar.size-md {
-  @apply w-[40px] h-[40px];
-}
-.glorious-avatar.size-md > img {
-  @apply w-[40px] h-[40px];
-}
-.glorious-avatar.size-sm {
-  @apply w-[36px] h-[36px];
-}
-.glorious-avatar.size-sm > img {
-  @apply w-[36px] h-[36px];
-}
-.glorious-avatar.size-xs {
-  @apply w-[32px] h-[32px];
-}
-.glorious-avatar.size-xs > img {
-  @apply w-[32px] h-[32px];
-}
-</style>
+<style lang="scss" src="../../assets/style/components/avatar.scss" />

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

@@ -1,21 +1,7 @@
 <script lang="ts" setup>
-interface breadcrumbInterface {
-  text: String;
-  icon?: String;
-  to?: String;
-}
+import _props from '../props/Breadcrumb'
 
-const props = defineProps({
-  items: {
-    required: true,
-    type: Array<breadcrumbInterface>,
-  },
-  divider: {
-    required: false,
-    type: String,
-    default: "/",
-  },
-});
+const props: any = defineProps(_props)
 </script>
 
 <template>
@@ -25,7 +11,10 @@ const props = defineProps({
       :key="index"
       class="flex items-center gap-1 flex-wrap"
     >
-      <GIcon v-if="item.icon" :name="`${item.icon}`" />
+      <GIcon
+        v-if="item.icon"
+        :name="`${item.icon}`"
+      />
       <nuxt-link
         v-if="item.to"
         class="glorious-breadcrumb-link"
@@ -45,11 +34,4 @@ const props = defineProps({
   </div>
 </template>
 
-<style>
-.glorious-breadcrumb {
-  @apply text-xs;
-}
-.glorious-breadcrumb .end-text {
-  @apply font-bold;
-}
-</style>
+<style lang="scss" src="../../assets/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>
@@ -44,12 +10,15 @@ const props = defineProps({
     :aria-label="props.ariaLabel"
     :class="[
       `glorious-button-${props.color}`,
-      props.size,
+      `size-${props.size}`,
       props.outline ? 'outline' : '',
     ]"
     :disabled="props.disabled"
   >
-    <div v-if="props.loading" class="loading">
+    <div
+      v-if="props.loading"
+      class="loading"
+    >
       <GLoading />
     </div>
     <slot v-else />
@@ -64,119 +33,8 @@ const props = defineProps({
     ]"
     :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="../../assets/style/components/button.scss" />

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

@@ -1,42 +1,21 @@
 <script lang="ts" setup>
-const props = defineProps({
-  modelValue: {
-    required: false,
-    default: true,
-    type: Boolean,
-  },
-  color: {
-    required: false,
-    default: 'green',
-    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'green',
-  },
-  size: {
-    required: false,
-    default: 'md',
-    type: String as () => 'xl' | 'lg' | 'md' | 'sm' | 'xs',
-  },
-  disabled: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-})
+import _props from '../props/CheckBox'
 
-const emits = defineEmits(['update:modelValue'])
+const props: any = defineProps(_props)
+const model = defineModel()
+const inputFunction = (event: any) => (model.value = event.target.checked)
 
-const inputFunction = (event: any) =>
-  emits('update:modelValue', event.currentTarget.checked)
-
-emits('update:modelValue', false)
+model.value = props.checked
 </script>
 
 <template>
   <label
     class="glorious-checkbox"
-    :class="[props.color, `size-${props.size}`]"
+    :class="[`color-${props.color}`, `size-${props.size}`]"
   >
     <input
       type="checkbox"
+      :checked="props.checked"
       :disabled="props.disabled"
       @input="inputFunction($event)"
     />
@@ -44,99 +23,4 @@ emits('update:modelValue', false)
   </label>
 </template>
 
-<style>
-.glorious-checkbox {
-  @apply block relative cursor-pointer;
-}
-.glorious-checkbox > input {
-  @apply hidden;
-}
-.glorious-checkbox > input:checked ~ div {
-  @apply border-none;
-}
-.glorious-checkbox > input:checked ~ div:after {
-  @apply block h-max w-max;
-}
-.glorious-checkbox > input:disabled ~ div {
-  @apply cursor-not-allowed;
-}
-.glorious-checkbox > div:last-child {
-  @apply border border-gray-500 rounded bg-white left-0 top-0 absolute hover:shadow-lg;
-}
-.glorious-checkbox > div:last-child > div:first-child {
-  @apply hidden;
-}
-.glorious-checkbox > div:last-child:after {
-  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzFfNDg2MTQpIj4KPHBhdGggZD0iTTkuOTk5OTkgMTUuMTcyTDE5LjE5MiA1Ljk3OUwyMC42MDcgNy4zOTNMOS45OTk5OSAxOEwzLjYzNTk5IDExLjYzNkw1LjA0OTk5IDEwLjIyMkw5Ljk5OTk5IDE1LjE3MloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMV80ODYxNCI+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
-  @apply absolute hidden top-1 right-0 left-0 bottom-0 m-auto;
-}
-.glorious-checkbox.orange > input:checked ~ div {
-  @apply bg-orange-500;
-}
-.glorious-checkbox.blue > input:checked ~ div {
-  @apply bg-blue-500;
-}
-.glorious-checkbox.gray > input:checked ~ div {
-  @apply bg-gray-500;
-}
-.glorious-checkbox.red > input:checked ~ div {
-  @apply bg-red-500;
-}
-.glorious-checkbox.green > input:checked ~ div {
-  @apply bg-green-500;
-}
-.glorious-checkbox.size-5xl {
-  @apply w-[60px] h-[60px];
-}
-.glorious-checkbox.size-5xl > div:last-child {
-  @apply w-[60px] h-[60px];
-}
-.glorious-checkbox.size-4xl {
-  @apply w-[56px] h-[56px];
-}
-.glorious-checkbox.size-4xl > div:last-child {
-  @apply w-[56px] h-[56px];
-}
-.glorious-checkbox.size-3xl {
-  @apply w-[52px] h-[52px];
-}
-.glorious-checkbox.size-3xl > div:last-child {
-  @apply w-[52px] h-[52px];
-}
-.glorious-checkbox.size-2xl {
-  @apply w-[48px] h-[48px];
-}
-.glorious-checkbox.size-2xl > div:last-child {
-  @apply w-[48px] h-[48px];
-}
-.glorious-checkbox.size-xl {
-  @apply w-[44px] h-[44px];
-}
-.glorious-checkbox.size-xl > div:last-child {
-  @apply w-[44px] h-[44px];
-}
-.glorious-checkbox.size-lg {
-  @apply w-[40px] h-[40px];
-}
-.glorious-checkbox.size-lg > div:last-child {
-  @apply w-[40px] h-[40px];
-}
-.glorious-checkbox.size-md {
-  @apply w-[36px] h-[36px];
-}
-.glorious-checkbox.size-md > div:last-child {
-  @apply w-[36px] h-[36px];
-}
-.glorious-checkbox.size-sm {
-  @apply w-[32px] h-[32px];
-}
-.glorious-checkbox.size-sm > div:last-child {
-  @apply w-[32px] h-[32px];
-}
-.glorious-checkbox.size-xs {
-  @apply w-[28px] h-[28px];
-}
-.glorious-checkbox.size-xs > div:last-child {
-  @apply w-[28px] h-[28px];
-}
-</style>
+<style lang="scss" src="../../assets/style/components/checkbox.scss" />

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

@@ -1,70 +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)
         }
       }
 
-      const countDownElement: any = document.getElementById("countDown" + id);
-      countDownElement.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>