nuxt-glorious 1.2.2-4 → 1.2.2-6

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "glorious",
   "configKey": "glorious",
-  "version": "1.2.2-4"
+  "version": "1.2.2-6"
 }

package/dist/runtime/assets/style/components/input.css

@@ -22,7 +22,7 @@
   @apply rounded-md ring-1 ring-green-500;
 }
 .glorious-input-primary:disabled {
-  @apply bg-green-300 cursor-not-allowed;
+  @apply bg-green-100 cursor-not-allowed;
 }
 
 .glorious-input-red {

package/dist/runtime/assets/style/components/modal.css

@@ -1,57 +1,66 @@
-.g-scafold-modal {
+.glorious-scaffold-modal {
   @apply fixed bg-white md:top-[15%] z-50 right-0 left-0 mx-auto p-3 md:rounded-md rounded-t-md md:bottom-0 bottom-0 overflow-y-auto;
 }
-.g-scafold-modal-header {
+.glorious-scaffold-modal-header {
   @apply flex justify-between items-center;
 }
-.g-scafold-modal-footer {
-  @apply flex justify-center gap-3;
+.glorious-scaffold-modal-footer {
+  @apply flex justify-center gap-3 mt-3;
 }
-.g-scafold-modal-footer > button {
+.glorious-scaffold-modal-footer > button {
   @apply min-w-24;
 }
-.g-scafold-modal-bg-blur {
+.glorious-scaffold-modal-bg-blur {
   @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
 }
-.g-scafold-modal.size-full {
+.glorious-scaffold-modal.size-full {
   @apply w-full h-full top-0 rounded-none;
 }
-.g-scafold-modal.size-xl {
+.glorious-scaffold-modal.size-xl {
   @apply md:w-[70%] w-full md:h-max max-h-[70%];
 }
-.g-scafold-modal.size-lg {
+.glorious-scaffold-modal.size-lg {
   @apply md:w-[60%] w-full md:h-max max-h-[70%];
 }
-.g-scafold-modal.size-md {
+.glorious-scaffold-modal.size-md {
   @apply md:w-[50%] w-full md:h-max max-h-[70%];
 }
-.g-scafold-modal.size-sm {
+.glorious-scaffold-modal.size-sm {
   @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[70%];
 }
-.g-scafold-modal.close {
+.glorious-scaffold-modal.close {
   @apply hidden;
 }
+.glorious-scaffold-modal.open {
+  animation: animationMobile 0.3s normal forwards;
+}
 @screen md {
-  .g-scafold-modal.open {
-    animation: animationOpacity 0.2s normal forwards;
+  .glorious-scaffold-modal.open {
+    animation: animationOpacity 0.3s normal forwards;
   }
 }
-.g-scafold-modal.open {
-  animation: animationMobile 0.3s normal forwards;
-}
 @keyframes animationOpacity {
-  from {
+  0% {
+    transform: scale(0.1);
     opacity: 0;
   }
-  to {
+  99% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: unset;
     opacity: 1;
   }
 }
 @keyframes animationMobile {
-  from {
+  0% {
     transform: translateY(100%);
   }
-  to {
+  99% {
     transform: translateY(0);
   }
+  100% {
+    transform: unset;
+  }
 }

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

@@ -264,7 +264,7 @@ const typeInput = ref(props.type);
   @apply rounded-md ring-1 ring-green-500;
 }
 .glorious-input-primary:disabled {
-  @apply bg-green-300 cursor-not-allowed;
+  @apply bg-green-100 cursor-not-allowed;
 }
 
 .glorious-input-red {

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { watch } from "#imports";
+import { GloriousStore } from "../../stores/GloriousStore";
 const props = defineProps({
   modelValue: {
     required: true,
@@ -52,7 +53,7 @@ const emits = defineEmits(["ok", "close", "update:modelValue"]);
 
 const addBlurBackground = (): void => {
   const backgroundBlur = document.createElement("div");
-  backgroundBlur.classList.add("g-scafold-modal-bg-blur");
+  backgroundBlur.classList.add("glorious-scaffold-modal-bg-blur");
   const nuxt: any = document.getElementById("__nuxt");
   nuxt.appendChild(backgroundBlur);
   backgroundBlur.addEventListener("click", () => {
@@ -69,7 +70,9 @@ watch(
     if (props.modelValue && props.blur) {
       addBlurBackground();
     } else {
-      const blur: any = document.querySelector(".g-scafold-modal-bg-blur");
+      const blur: any = document.querySelector(
+        ".glorious-scaffold-modal-bg-blur"
+      );
       if (blur !== null) blur.remove();
     }
   }
@@ -78,11 +81,11 @@ watch(
 
 <template>
   <div
-    class="g-scafold-modal"
+    class="glorious-scaffold-modal"
     :class="[props.modelValue ? 'open' : 'close', `size-${props.size}`]"
   >
     <!-- header -->
-    <div v-show="props?.title !== ''" class="g-scafold-modal-header">
+    <div v-show="props?.title !== ''" class="glorious-scaffold-modal-header">
       <span class="font-medium">{{ props.title }}</span>
       <GButton
         class="flex justify-center items-center w-6 h-6"
@@ -94,14 +97,14 @@ watch(
       </GButton>
     </div>
     <hr v-show="props.title !== ''" class="my-3" />
-    <!-- end hader -->
+    <!-- end header -->
 
-    <div class="g-scafold-modal-header">
+    <div class="glorious-scaffold-modal-content">
       <slot />
     </div>
 
     <!-- start footer -->
-    <div v-show="props.okBtn !== ''" class="g-scafold-modal-footer">
+    <div v-show="props.okBtn !== ''" class="glorious-scaffold-modal-footer">
       <GButton :loading="props.okBtnLoading" @click="emits('ok')">
         {{ props.okBtn }}
       </GButton>
@@ -117,61 +120,70 @@ watch(
 </template>
 
 <style>
-.g-scafold-modal {
+.glorious-scaffold-modal {
   @apply fixed bg-white md:top-[15%] z-50 right-0 left-0 mx-auto p-3 md:rounded-md rounded-t-md md:bottom-0 bottom-0 overflow-y-auto;
 }
-.g-scafold-modal-header {
+.glorious-scaffold-modal-header {
   @apply flex justify-between items-center;
 }
-.g-scafold-modal-footer {
-  @apply flex justify-center gap-3;
+.glorious-scaffold-modal-footer {
+  @apply flex justify-center gap-3 mt-3;
 }
-.g-scafold-modal-footer > button {
+.glorious-scaffold-modal-footer > button {
   @apply min-w-24;
 }
-.g-scafold-modal-bg-blur {
+.glorious-scaffold-modal-bg-blur {
   @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
 }
-.g-scafold-modal.size-full {
+.glorious-scaffold-modal.size-full {
   @apply w-full h-full top-0 rounded-none;
 }
-.g-scafold-modal.size-xl {
+.glorious-scaffold-modal.size-xl {
   @apply md:w-[70%] w-full md:h-max max-h-[70%];
 }
-.g-scafold-modal.size-lg {
+.glorious-scaffold-modal.size-lg {
   @apply md:w-[60%] w-full md:h-max max-h-[70%];
 }
-.g-scafold-modal.size-md {
+.glorious-scaffold-modal.size-md {
   @apply md:w-[50%] w-full md:h-max max-h-[70%];
 }
-.g-scafold-modal.size-sm {
+.glorious-scaffold-modal.size-sm {
   @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[70%];
 }
-.g-scafold-modal.close {
+.glorious-scaffold-modal.close {
   @apply hidden;
 }
+.glorious-scaffold-modal.open {
+  animation: animationMobile 0.3s normal forwards;
+}
 @screen md {
-  .g-scafold-modal.open {
-    animation: animationOpacity 0.2s normal forwards;
+  .glorious-scaffold-modal.open {
+    animation: animationOpacity 0.3s normal forwards;
   }
 }
-.g-scafold-modal.open {
-  animation: animationMobile 0.3s normal forwards;
-}
 @keyframes animationOpacity {
-  from {
+  0% {
+    transform: scale(0.1);
     opacity: 0;
   }
-  to {
+  99% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: unset;
     opacity: 1;
   }
 }
 @keyframes animationMobile {
-  from {
+  0% {
     transform: translateY(100%);
   }
-  to {
+  99% {
     transform: translateY(0);
   }
+  100% {
+    transform: unset;
+  }
 }
 </style>

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

@@ -13,37 +13,56 @@ const props = defineProps({
     required: true,
     type: Object,
   },
+  loading: {
+    required: false,
+    default: false,
+    type: Boolean,
+  },
+  loadingOption: {
+    required: false,
+    default: {
+      color: "green",
+    },
+    type: {
+      color: String,
+    },
+  },
 });
 </script>
 
 <template>
-  <div class="glorious-table" :class="[`color-${props.color}`]">
-    <table>
-      <thead>
-        <tr>
-          <th v-for="(headItem, index) in props.header" :key="index">
-            {{ headItem }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(bodyItem, index) in props.body" :key="index">
-          <td
-            v-for="(headItem, headKey, headIndex) in props.header"
-            :key="headIndex"
-          >
-            <slot
-              v-if="typeof $slots[headKey] !== 'undefined'"
-              :name="headKey"
-              :item="bodyItem"
-            />
-            <template v-else>
-              {{ bodyItem[headKey] }}
-            </template>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="flex flex-col">
+    <div class="glorious-table" :class="[`color-${props.color}`]">
+      <table>
+        <thead>
+          <tr>
+            <th v-for="(headItem, index) in props.header" :key="index">
+              {{ headItem }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(bodyItem, index) in props.body" :key="index">
+            <td
+              v-for="(headItem, headKey, headIndex) in props.header"
+              :key="headIndex"
+            >
+              <slot
+                v-if="typeof $slots[headKey] !== 'undefined'"
+                :name="headKey"
+                :item="bodyItem"
+              />
+              <template v-else>
+                {{ bodyItem[headKey] }}
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="flex justify-center">
+      <GLoading v-if="props.loading" :color="props.loadingOption.color" />
+    </div>
   </div>
 </template>
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.2-4",
+  "version": "1.2.2-6",
   "name": "nuxt-glorious",
   "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
   "repository": "sajadhzj/nuxt-glorious",