nuxt-glorious 1.2.3-2 → 1.2.3-4

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "1.2.3-2"
+  "version": "1.2.3-4"
 }

package/dist/module.mjs

@@ -76,6 +76,11 @@ const module = defineNuxtModule({
       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-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/assets/style/components/modal.css

@@ -17,16 +17,16 @@
   @apply w-full h-full top-0 rounded-none;
 }
 .glorious-scaffold-modal.size-xl {
-  @apply md:w-[70%] w-full md:h-max max-h-[70%];
+  @apply md:w-[70%] w-full md:h-max max-h-[calc(100%-15%)];
 }
 .glorious-scaffold-modal.size-lg {
-  @apply md:w-[60%] w-full md:h-max max-h-[70%];
+  @apply md:w-[60%] w-full md:h-max max-h-[calc(100%-15%)];
 }
 .glorious-scaffold-modal.size-md {
-  @apply md:w-[50%] w-full md:h-max max-h-[70%];
+  @apply md:w-[50%] w-full md:h-max max-h-[calc(100%-15%)];
 }
 .glorious-scaffold-modal.size-sm {
-  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[70%];
+  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[calc(100%-15%)];
 }
 .glorious-scaffold-modal.close {
   @apply hidden;

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

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+.rating {
+  display: inline-block;
+}
+
+.rating input {
+  display: none;
+}
+
+.rating label {
+  float: right;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.rating label:before {
+  content: "★";
+  font-size: 30px;
+}
+
+.rating input:checked ~ label,
+.rating label:hover,
+.rating label:hover ~ label {
+  color: #ffd700;
+  transition: color 0.3s;
+}

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

@@ -1,22 +1,19 @@
-/* From Uiverse.io by namecho */
 .switch {
   direction: ltr;
-  --button-width: 3.5em;
-  --button-height: 2em;
-  --toggle-diameter: 1.5em;
+  --button-width: 3em;
+  --button-height: 1.5em;
+  --toggle-diameter: 1em;
   --button-toggle-offset: calc(
     (var(--button-height) - var(--toggle-diameter)) / 2
   );
   --toggle-shadow-offset: 10px;
   --toggle-wider: 3em;
-  --color-grey: #cccccc;
-  --color-green: #4296f4;
 }
 .switch-slider {
+  @apply bg-gray-300;
   display: inline-block;
   width: var(--button-width);
   height: var(--button-height);
-  background-color: var(--color-grey);
   border-radius: calc(var(--button-height) / 2);
   position: relative;
   transition: 0.3s all ease-in-out;
@@ -34,8 +31,20 @@
   box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
   transition: 0.3s all ease-in-out;
 }
-.switch input[type=checkbox]:checked + .switch-slider {
-  background-color: var(--color-green);
+.switch.color-orange input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.orange.500");
+}
+.switch.color-blue input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.blue.500");
+}
+.switch.color-gray input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.gray.500");
+}
+.switch.color-red input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.red.500");
+}
+.switch.color-green input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.green.500");
 }
 .switch input[type=checkbox]:checked + .switch-slider::after {
   transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));

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

@@ -1,9 +1,9 @@
 .glorious-tab {
-  @apply flex justify-between bg-green-100 px-3 py-2 rounded-lg gap-3 overflow-y-auto w-full shadow-md;
+  @apply flex justify-between bg-green-100 rounded-lg gap-3 w-max max-w-full shadow-md;
 }
-.glorious-tab > div > button {
+.glorious-tab div > div > button {
   @apply text-gray-700 text-[14px] hover:bg-green-200 hover:text-gray-800 cursor-pointer px-2 py-1 rounded-lg;
 }
-.glorious-tab > div > button.active {
+.glorious-tab div > div > button.active {
   @apply font-bold text-white bg-green-700;
 }

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

@@ -0,0 +1,47 @@
+.glorious-timeline-items {
+  @apply relative;
+}
+.glorious-timeline-items div {
+  @apply relative;
+}
+.glorious-timeline-items div::before {
+  content: "";
+  @apply absolute w-[2px] right-[-15px];
+}
+.glorious-timeline-items div::before:not(:last-child) {
+  @apply h-[calc(100%+20px)];
+}
+.glorious-timeline-items-count {
+  @apply absolute w-5 h-5 top-0 right-[-24px] rounded-full !important;
+  @apply text-white flex justify-center items-center font-medium;
+}
+.glorious-timeline-items.color-orange > div::before {
+  @apply bg-orange-500;
+}
+.glorious-timeline-items.color-blue > div::before {
+  @apply bg-blue-500;
+}
+.glorious-timeline-items.color-gray > div::before {
+  @apply bg-gray-500;
+}
+.glorious-timeline-items.color-red > div::before {
+  @apply bg-red-500;
+}
+.glorious-timeline-items.color-green > div::before {
+  @apply bg-green-500;
+}
+.glorious-timeline-items.color-orange .glorious-timeline-items-count {
+  @apply bg-orange-500;
+}
+.glorious-timeline-items.color-blue .glorious-timeline-items-count {
+  @apply bg-blue-500;
+}
+.glorious-timeline-items.color-gray .glorious-timeline-items-count {
+  @apply bg-gray-500;
+}
+.glorious-timeline-items.color-red .glorious-timeline-items-count {
+  @apply bg-red-500;
+}
+.glorious-timeline-items.color-green .glorious-timeline-items-count {
+  @apply bg-green-500;
+}

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { watch } from "#imports";
-import { GloriousStore } from "../../stores/GloriousStore";
+import { watch } from '#imports'
+
 const props = defineProps({
   modelValue: {
     required: true,
@@ -9,17 +9,17 @@ const props = defineProps({
   },
   size: {
     required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "full",
+    default: 'md',
+    type: String as () => 'xl' | 'lg' | 'md' | 'sm' | 'full',
   },
   title: {
     required: false,
-    default: "",
+    default: '',
     type: String,
   },
   okBtn: {
     required: false,
-    default: "",
+    default: '',
     type: String,
   },
   okBtnLoading: {
@@ -29,13 +29,13 @@ const props = defineProps({
   },
   closeBtn: {
     required: false,
-    default: "",
+    default: '',
     type: String,
   },
   rtl: {
     required: false,
-    default: "rtl",
-    type: String as () => "rtl" | "ltr",
+    default: 'rtl',
+    type: String as () => 'rtl' | 'ltr',
   },
   blur: {
     required: false,
@@ -47,45 +47,50 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
-});
+  colorBtn: {
+    required: false,
+    default: 'primary',
+    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'primary',
+  },
+})
 
-const emits = defineEmits(["ok", "close", "update:modelValue"]);
+const emits = defineEmits(['ok', 'close', 'update:modelValue'])
 
 const addBlurBackground = (): void => {
-  const backgroundBlur = document.createElement("div");
-  backgroundBlur.classList.add("glorious-scaffold-modal-bg-blur");
-  const nuxt: any = document.getElementById("__nuxt");
-  nuxt.appendChild(backgroundBlur);
-  backgroundBlur.addEventListener("click", () => {
+  const backgroundBlur = document.createElement('div')
+  backgroundBlur.classList.add('glorious-scaffold-modal-bg-blur')
+  const nuxt: any = document.getElementById('__nuxt')
+  nuxt.appendChild(backgroundBlur)
+  backgroundBlur.addEventListener('click', () => {
     if (props.blurClose) {
-      emits("update:modelValue", false);
-      backgroundBlur.remove();
+      emits('update:modelValue', false)
+      backgroundBlur.remove()
     }
-  });
-};
+  })
+}
 
 watch(
   () => props.modelValue,
   () => {
-    const modals = document.querySelectorAll(".glorious-scaffold-modal");
+    const modals = document.querySelectorAll('.glorious-scaffold-modal')
     if (props.modelValue && props.blur) {
-      addBlurBackground();
+      addBlurBackground()
       setTimeout(() => {
         modals.forEach((el: any) => {
-          el.classList.remove("animation");
-        });
-      }, 500);
+          el.classList.remove('animation')
+        })
+      }, 500)
     } else {
       const blur: any = document.querySelector(
-        ".glorious-scaffold-modal-bg-blur"
-      );
+        '.glorious-scaffold-modal-bg-blur'
+      )
       modals.forEach((el: any) => {
-        el.classList.add("animation");
-      });
-      if (blur !== null) blur.remove();
+        el.classList.add('animation')
+      })
+      if (blur !== null) blur.remove()
     }
   }
-);
+)
 </script>
 
 <template>
@@ -94,7 +99,10 @@ watch(
     :class="[props.modelValue ? 'open' : 'close', `size-${props.size}`]"
   >
     <!-- header -->
-    <div v-show="props?.title !== ''" class="glorious-scaffold-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"
@@ -102,10 +110,17 @@ watch(
         color="red"
         @click="emits('update:modelValue', false)"
       >
-        <GIcon name="glorious-x" color="#fff" :size="10" />
+        <GIcon
+          name="glorious-x"
+          color="#fff"
+          :size="10"
+        />
       </GButton>
     </div>
-    <hr v-show="props.title !== ''" class="my-3" />
+    <hr
+      v-show="props.title !== ''"
+      class="my-3"
+    />
     <!-- end header -->
 
     <div class="glorious-scaffold-modal-content">
@@ -113,12 +128,21 @@ watch(
     </div>
 
     <!-- start footer -->
-    <div v-show="props.okBtn !== ''" class="glorious-scaffold-modal-footer">
-      <GButton :loading="props.okBtnLoading" @click="emits('ok')">
+    <div
+      v-show="props.okBtn !== ''"
+      class="glorious-scaffold-modal-footer"
+    >
+      <GButton
+        :color="props.colorBtn"
+        :loading="props.okBtnLoading"
+        @click="emits('ok')"
+      >
         {{ props.okBtn }}
       </GButton>
       <GButton
+        :color="props.colorBtn"
         v-show="props.closeBtn !== ''"
+        outline
         @click="emits('update:modelValue', false)"
       >
         {{ props.closeBtn }}
@@ -148,16 +172,16 @@ watch(
   @apply w-full h-full top-0 rounded-none;
 }
 .glorious-scaffold-modal.size-xl {
-  @apply md:w-[70%] w-full md:h-max max-h-[70%];
+  @apply md:w-[70%] w-full md:h-max max-h-[calc(100%-15%)];
 }
 .glorious-scaffold-modal.size-lg {
-  @apply md:w-[60%] w-full md:h-max max-h-[70%];
+  @apply md:w-[60%] w-full md:h-max max-h-[calc(100%-15%)];
 }
 .glorious-scaffold-modal.size-md {
-  @apply md:w-[50%] w-full md:h-max max-h-[70%];
+  @apply md:w-[50%] w-full md:h-max max-h-[calc(100%-15%)];
 }
 .glorious-scaffold-modal.size-sm {
-  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[70%];
+  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[calc(100%-15%)];
 }
 .glorious-scaffold-modal.close {
   @apply hidden;

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { watch, ref } from "#imports";
+import { watch, ref } from '#imports'
 const props = defineProps({
   currentPage: {
     required: true,
@@ -17,42 +17,45 @@ const props = defineProps({
     default: 3,
   },
   modelValue: {
-    required: true,
+    required: false,
     type: Number,
   },
-});
+})
 
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(['update:modelValue', 'change'])
 
 const emit = (item: any) => {
-  if (props.currentPage !== item) emits("update:modelValue", item);
-};
+  if (props.currentPage !== item) {
+    emits('update:modelValue', item)
+    emits('change', { page: item })
+  }
+}
 
-const listPage = ref<Array<Number>>([]);
+const listPage = ref<Array<Number>>([])
 
 const computeListPage = () => {
-  listPage.value = [];
-  let firstPage = props.currentPage - props.numberSugestPage;
-  const endPage = props.currentPage + (props.numberSugestPage + 1);
+  listPage.value = []
+  let firstPage = props.currentPage - props.numberSugestPage
+  const endPage = props.currentPage + (props.numberSugestPage + 1)
 
   while (firstPage <= endPage) {
     if (firstPage > 0 && firstPage <= props.lastPage)
-      listPage.value.push(firstPage);
-    firstPage++;
+      listPage.value.push(firstPage)
+    firstPage++
   }
-};
-computeListPage();
+}
+computeListPage()
 watch(
   () => props.currentPage,
   () => computeListPage()
-);
+)
 
 const arrowPrevious = () => {
-  if (props.currentPage !== 1) emit(props.currentPage - 1);
-};
+  if (props.currentPage !== 1) emit(props.currentPage - 1)
+}
 const arrowNext = () => {
-  if (props.currentPage !== props.lastPage) emit(props.currentPage + 1);
-};
+  if (props.currentPage !== props.lastPage) emit(props.currentPage + 1)
+}
 </script>
 
 <template>

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

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+const emits = defineEmits(['update:modelValue'])
+const computeModelValue = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emits('update:modelValue', target.value)
+}
+
+const id = useId()
+const value = [5, 4, 3, 2, 1]
+</script>
+
+<template>
+  <div class="rating">
+    <template
+      v-for="(item, index) in 5"
+      :key="index"
+    >
+      <input
+        type="radio"
+        :id="`star${item}-${id}`"
+        :name="`star-name${id}`"
+        :value="value[index]"
+        @input="computeModelValue"
+      />
+      <label :for="`star${item}-${id}`"></label>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+@charset "UTF-8";
+.rating {
+  display: inline-block;
+}
+
+.rating input {
+  display: none;
+}
+
+.rating label {
+  float: right;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.rating label:before {
+  content: "★";
+  font-size: 30px;
+}
+
+.rating input:checked ~ label,
+.rating label:hover,
+.rating label:hover ~ label {
+  color: #ffd700;
+  transition: color 0.3s;
+}
+</style>

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

@@ -10,6 +10,11 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  color: {
+    required: false,
+    default: 'green',
+    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'green',
+  },
 })
 
 const emits = defineEmits(['update:modelValue'])
@@ -21,7 +26,10 @@ const input = (e: Event) => {
 
 <template>
   <div>
-    <label class="switch">
+    <label
+      class="switch"
+      :class="[`color-${props.color}`]"
+    >
       <input
         type="checkbox"
         @input="input"
@@ -33,25 +41,22 @@ const input = (e: Event) => {
 </template>
 
 <style>
-/* From Uiverse.io by namecho */
 .switch {
   direction: ltr;
-  --button-width: 3.5em;
-  --button-height: 2em;
-  --toggle-diameter: 1.5em;
+  --button-width: 3em;
+  --button-height: 1.5em;
+  --toggle-diameter: 1em;
   --button-toggle-offset: calc(
     (var(--button-height) - var(--toggle-diameter)) / 2
   );
   --toggle-shadow-offset: 10px;
   --toggle-wider: 3em;
-  --color-grey: #cccccc;
-  --color-green: #4296f4;
 }
 .switch-slider {
+  @apply bg-gray-300;
   display: inline-block;
   width: var(--button-width);
   height: var(--button-height);
-  background-color: var(--color-grey);
   border-radius: calc(var(--button-height) / 2);
   position: relative;
   transition: 0.3s all ease-in-out;
@@ -69,8 +74,20 @@ const input = (e: Event) => {
   box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
   transition: 0.3s all ease-in-out;
 }
-.switch input[type=checkbox]:checked + .switch-slider {
-  background-color: var(--color-green);
+.switch.color-orange input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.orange.500");
+}
+.switch.color-blue input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.blue.500");
+}
+.switch.color-gray input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.gray.500");
+}
+.switch.color-red input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.red.500");
+}
+.switch.color-green input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.green.500");
 }
 .switch input[type=checkbox]:checked + .switch-slider::after {
   transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));

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

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 interface itemsType {
-  active: boolean;
-  text: string;
-  key: string;
+  active: boolean
+  text: string
+  key: string
 }
-
 const props = defineProps({
   items: {
     required: true,
@@ -15,43 +14,104 @@ const props = defineProps({
     required: true,
     type: String,
   },
-});
-const emits = defineEmits(["update:modelValue"]);
+})
+const emits = defineEmits(['update:modelValue'])
 const tabClicked: any = (key: string, event: any) => {
-  emits("update:modelValue", key);
+  emits('update:modelValue', key)
   Array.from(event.currentTarget.parentElement.parentElement.children).map(
-    (item: any) => item.children[0].classList.remove("active")
-  );
-  event.currentTarget.classList.add("active");
-};
+    (item: any) => item.children[0].classList.remove('active')
+  )
+  event.currentTarget.classList.add('active')
+}
+
+const setArrow = () => {
+  document.querySelectorAll('.glorious-tab-content').forEach((element) => {
+    if (element.scrollWidth > element.clientWidth) {
+      element.previousElementSibling?.classList.replace('hidden', 'flex')
+
+      element.previousElementSibling?.parentElement?.classList.add('!px-7')
+      element.nextElementSibling?.classList.replace('hidden', 'flex')
+    } else {
+      element.previousElementSibling?.classList.add('hidden')
+      element.previousElementSibling?.parentElement?.classList.remove('!px-7')
+      element.nextElementSibling?.classList.add('hidden')
+    }
+  })
+}
+onMounted(() => {
+  window.addEventListener('resize', () => setArrow())
+  setArrow()
+})
+
+const scrollNext = (event: Event) => {
+  const currentTarget = event.currentTarget as HTMLDivElement
+  const nextElement = currentTarget.nextElementSibling as HTMLDivElement
+  nextElement.scrollBy({
+    left: 80,
+    behavior: 'smooth',
+  })
+}
+const scrollPrevious = (event: Event) => {
+  const currentTarget = event.currentTarget as HTMLDivElement
+  const previousElement = currentTarget.previousElementSibling as HTMLDivElement
+  previousElement.scrollBy({
+    left: -80,
+    behavior: 'smooth',
+  })
+}
 </script>
 
 <template>
-  <div class="glorious-tab">
+  <div class="glorious-tab relative">
     <div
-      v-for="(item, index) in props.items"
-      :key="index"
-      class="flex justify-center"
-      :style="{ flexBasis: `${100 / props.items.length}%` }"
+      @click="scrollNext($event)"
+      class="bg-green-700 absolute right-0 h-full top-0 w-8 justify-center items-center rounded-r-lg hidden cursor-auto"
     >
-      <button
-        :class="item.active ? `active` : ''"
-        @click="tabClicked(item.key, $event)"
+      <GIcon
+        name="glorious-arrow"
+        :size="15"
+        color="#fff"
+      />
+    </div>
+
+    <div class="flex overflow-auto px-3 py-2 gap-3 glorious-tab-content">
+      <div
+        v-for="(item, index) in props.items"
+        :key="index"
+        class="flex justify-center tab-item"
+        :style="{ flexBasis: `${100 / props.items.length}%` }"
       >
-        {{ item.text }}
-      </button>
+        <button
+          :class="item.active ? `active` : ''"
+          @click="tabClicked(item.key, $event)"
+        >
+          {{ item.text }}
+        </button>
+      </div>
+    </div>
+
+    <div
+      @click="scrollPrevious($event)"
+      class="bg-green-700 absolute left-0 h-full top-0 w-8 justify-center items-center rounded-l-lg hidden cursor-pointer"
+    >
+      <GIcon
+        name="glorious-arrow"
+        class="rotate-180"
+        :size="15"
+        color="#fff"
+      />
     </div>
   </div>
 </template>
 
 <style>
 .glorious-tab {
-  @apply flex justify-between bg-green-100 px-3 py-2 rounded-lg gap-3 overflow-y-auto w-full shadow-md;
+  @apply flex justify-between bg-green-100 rounded-lg gap-3 w-max max-w-full shadow-md;
 }
-.glorious-tab > div > button {
+.glorious-tab div > div > button {
   @apply text-gray-700 text-[14px] hover:bg-green-200 hover:text-gray-800 cursor-pointer px-2 py-1 rounded-lg;
 }
-.glorious-tab > div > button.active {
+.glorious-tab div > div > button.active {
   @apply font-bold text-white bg-green-700;
 }
 </style>

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

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+const props = defineProps({
+  items: {
+    required: true,
+  },
+  color: {
+    required: false,
+    default: 'green',
+    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'green',
+  },
+})
+</script>
+<template>
+  <div class="flex gap-3 mr-4">
+    <div
+      class="flex flex-col gap-5 glorious-timeline-items"
+      :class="[`color-${props.color}`]"
+    >
+      <div
+        v-for="(item, index) in props.items.reverse()"
+        :key="index"
+      >
+        <div class="glorious-timeline-items-count">
+          {{ props.items.length - index }}
+        </div>
+        <slot
+          name="item"
+          :item="item"
+        >
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.glorious-timeline-items {
+  @apply relative;
+}
+.glorious-timeline-items div {
+  @apply relative;
+}
+.glorious-timeline-items div::before {
+  content: "";
+  @apply absolute w-[2px] right-[-15px];
+}
+.glorious-timeline-items div::before:not(:last-child) {
+  @apply h-[calc(100%+20px)];
+}
+.glorious-timeline-items-count {
+  @apply absolute w-5 h-5 top-0 right-[-24px] rounded-full !important;
+  @apply text-white flex justify-center items-center font-medium;
+}
+.glorious-timeline-items.color-orange > div::before {
+  @apply bg-orange-500;
+}
+.glorious-timeline-items.color-blue > div::before {
+  @apply bg-blue-500;
+}
+.glorious-timeline-items.color-gray > div::before {
+  @apply bg-gray-500;
+}
+.glorious-timeline-items.color-red > div::before {
+  @apply bg-red-500;
+}
+.glorious-timeline-items.color-green > div::before {
+  @apply bg-green-500;
+}
+.glorious-timeline-items.color-orange .glorious-timeline-items-count {
+  @apply bg-orange-500;
+}
+.glorious-timeline-items.color-blue .glorious-timeline-items-count {
+  @apply bg-blue-500;
+}
+.glorious-timeline-items.color-gray .glorious-timeline-items-count {
+  @apply bg-gray-500;
+}
+.glorious-timeline-items.color-red .glorious-timeline-items-count {
+  @apply bg-red-500;
+}
+.glorious-timeline-items.color-green .glorious-timeline-items-count {
+  @apply bg-green-500;
+}
+</style>

package/dist/runtime/composables/useGloriousFetch.d.ts

@@ -6,9 +6,10 @@ interface gloriousFetchOptions {
     lazy?: Boolean;
     headers?: Object;
     body?: Object;
-    bodyType?: "formData" | "formDataCustom" | "normal";
-    method?: "POST" | "GET" | "PATCH" | "PUT" | "DELETE" | "HEAD";
-    credentials?: "same-origin" | "include";
+    keepResponse?: Boolean;
+    bodyType?: 'formData' | 'formDataCustom' | 'normal';
+    method?: 'POST' | 'GET' | 'PATCH' | 'PUT' | 'DELETE' | 'HEAD';
+    credentials?: 'same-origin' | 'include';
     watch?: Array<Object>;
 }
 export default function (url: string, options?: gloriousFetchOptions): Promise<unknown>;

package/dist/runtime/composables/useGloriousFetch.mjs

@@ -6,6 +6,7 @@ const defaultOptions = {
   method: "GET",
   lazy: true,
   is$: true,
+  keepResponse: false,
   params: {},
   headers: {
     Accept: "application/json"
@@ -29,7 +30,8 @@ export default function(url, options = defaultOptions) {
       } catch (e) {
       }
     },
-    onResponse() {
+    onResponse({ response }) {
+      gs.response[gKey] = response._data;
       try {
         gs.loading[gKey] = false;
         gs.forms[gKey].errors = [];
@@ -53,6 +55,8 @@ export default function(url, options = defaultOptions) {
       }
     }
   };
+  if (opt.keepResponse && !gs.keepResponse.includes(gKey))
+    gs.keepResponse.push(gKey);
   if (opt.method === "GET" && typeof opt.body !== "undefined") {
     opt.method = "POST";
     return $fetch(url, opt);
@@ -83,7 +87,7 @@ function computeFormData(options) {
   Object.entries(options.body).forEach((item) => {
     console.log(item[1]);
     if (item[1] === null) return;
-    if (typeof item[1] === "object" && typeof item[1].lastModifiedDate === "undefined" && (typeof item[1].type === "undefined" && typeof item[1].size === "undefined"))
+    if (typeof item[1] === "object" && typeof item[1].lastModifiedDate === "undefined" && typeof item[1].type === "undefined" && typeof item[1].size === "undefined")
       Object.entries(item[1]).forEach((nestedItem, index) => {
         form.append(`${item[0]}[${index}]`, nestedItem[1]);
       });

package/dist/runtime/middlewares/ResponseGloriousStore.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/middlewares/ResponseGloriousStore.mjs

@@ -0,0 +1,8 @@
+import { defineNuxtRouteMiddleware } from "#imports";
+import { GloriousStore } from "../stores/GloriousStore.mjs";
+export default defineNuxtRouteMiddleware(() => {
+  const gs = GloriousStore();
+  Object.entries(gs.response).forEach((element) => {
+    if (!gs.keepResponse.includes(element[0])) delete gs.response[element[0]];
+  });
+});

package/dist/runtime/stores/GloriousStore.mjs

@@ -8,7 +8,9 @@ export const GloriousStore = defineStore("GloriousStore", {
     },
     loading: {},
     keepData: {},
-    forms: {}
+    forms: {},
+    response: {},
+    keepResponse: []
   }),
   getters: {
     authIsLogin() {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.3-2",
+  "version": "1.2.3-4",
   "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",