nuxt-glorious 1.2.0 → 1.2.9-5

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

@@ -1,113 +1,84 @@
 <script lang="ts" setup>
-import { onMounted, useId, watch } from "#imports";
-const props = defineProps({
-  modelValue: {
-    required: true,
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "full",
-  },
-  title: {
-    required: false,
-    default: "",
-    type: String,
-  },
-  okBtn: {
-    required: false,
-    default: "",
-    type: String,
-  },
-  okBtnLoading: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  closeBtn: {
-    required: false,
-    default: "",
-    type: String,
-  },
-  rtl: {
-    required: false,
-    default: "rtl",
-    type: String as () => "rtl" | "ltr",
-  },
-  blur: {
-    required: false,
-    default: true,
-    type: Boolean,
-  },
-  blurClose: {
-    required: false,
-    default: true,
-    type: Boolean,
-  },
-});
+import { watch } from '#imports'
+import { createBlurDom, removeBlurDom } from '../helper'
+import _props from '../props/Modal'
 
-const emits = defineEmits(["ok", "close", "update:modelValue"]);
-
-const addBlurBackground = (): void => {
-  const backgroundBlur = document.createElement("div");
-  backgroundBlur.classList.add("g-scafold-modal-bg-blur");
-  const nuxt: any = document.getElementById("__nuxt");
-  nuxt.appendChild(backgroundBlur);
-  backgroundBlur.addEventListener("click", () => {
-    if (props.blurClose) {
-      emits("update:modelValue", false);
-      backgroundBlur.remove();
-    }
-  });
-};
+const props = defineProps(_props)
+const emits = defineEmits(['ok', 'close'])
+const modelValue = defineModel()
 
 watch(
-  () => props.modelValue,
+  () => modelValue.value,
   () => {
-    if (props.modelValue && props.blur) {
-      addBlurBackground();
+    const modals = document.querySelectorAll('.glorious-scaffold-modal')
+    if (modelValue.value && props.blur) {
+      createBlurDom(() => (modelValue.value = false))
+      setTimeout(() => {
+        modals.forEach((el: any) => {
+          el.classList.remove('animation')
+        })
+      }, 500)
     } else {
-      const blur: any = document.querySelector(".g-scafold-modal-bg-blur");
-      if (blur !== null) blur.remove();
+      modals.forEach((el: any) => {
+        el.classList.add('animation')
+      })
+      removeBlurDom()
     }
   }
-);
+)
 </script>
 
 <template>
   <div
-    class="g-scafold-modal"
-    :class="[props.modelValue ? 'open' : 'close', `size-${props.size}`]"
+    class="glorious-scaffold-modal animation"
+    :class="[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"
         size="sm"
         color="red"
-        @click="emits('update:modelValue', false)"
+        @click="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" />
-    <!-- end hader -->
+    <hr
+      v-show="props.title !== ''"
+      class="my-3"
+    />
+    <!-- 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">
-      <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 !== ''"
-        @click="emits('update:modelValue', false)"
+        outline
+        @click="modelValue = false"
       >
         {{ props.closeBtn }}
       </GButton>
@@ -116,62 +87,4 @@ watch(
   </div>
 </template>
 
-<style>
-.g-scafold-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 {
-  @apply flex justify-between items-center;
-}
-.g-scafold-modal-footer {
-  @apply flex justify-center gap-3;
-}
-.g-scafold-modal-footer > button {
-  @apply min-w-24;
-}
-.g-scafold-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 {
-  @apply w-full h-full top-0 rounded-none;
-}
-.g-scafold-modal.size-xl {
-  @apply md:w-[70%] w-full md:h-max max-h-[70%];
-}
-.g-scafold-modal.size-lg {
-  @apply md:w-[60%] w-full md:h-max max-h-[70%];
-}
-.g-scafold-modal.size-md {
-  @apply md:w-[50%] w-full md:h-max max-h-[70%];
-}
-.g-scafold-modal.size-sm {
-  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[70%];
-}
-.g-scafold-modal.close {
-  @apply hidden;
-}
-@screen md {
-  .g-scafold-modal.open {
-    animation: animationOpacity 0.2s normal forwards;
-  }
-}
-.g-scafold-modal.open {
-  animation: animationMobile 0.3s normal forwards;
-}
-@keyframes animationOpacity {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes animationMobile {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-</style>
+<style lang="scss" src="../../style/components/modal.scss" />

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

@@ -1,58 +1,43 @@
 <script lang="ts" setup>
-import { watch, ref } from "#imports";
-const props = defineProps({
-  currentPage: {
-    required: true,
-    type: Number,
-    default: 1,
-  },
-  lastPage: {
-    required: true,
-    type: Number,
-    default: 1,
-  },
-  numberSugestPage: {
-    required: false,
-    type: Number,
-    default: 3,
-  },
-  modelValue: {
-    required: true,
-    type: Number,
-  },
-});
+import { watch, ref } from '#imports'
+import _props from '../props/Paginate'
 
-const emits = defineEmits(["update:modelValue"]);
+const props = defineProps(_props)
+const modelValue = defineModel()
+const emits = defineEmits(['change'])
 
 const emit = (item: any) => {
-  if (props.currentPage !== item) emits("update:modelValue", item);
-};
+  if (props.currentPage !== item) {
+    modelValue.value = 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.numberSuggestPage
+  const endPage = props.currentPage + (props.numberSuggestPage + 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>
@@ -90,22 +75,4 @@ const arrowNext = () => {
   </div>
 </template>
 
-<style>
-.glorious-paginate > div {
-  @apply border border-gray-50 rounded-xl h-8 flex items-center px-1 bg-white shadow-md gap-1 w-max;
-  direction: rtl;
-}
-.glorious-paginate > div > div {
-  @apply px-2;
-}
-.glorious-paginate > div > div:last-child {
-  @apply rotate-[180deg];
-}
-
-.paginate {
-  @apply text-[13px];
-}
-.paginate.active {
-  @apply bg-green-500 rounded-lg text-white font-bold text-[13px];
-}
-</style>
+<style lang="scss" src="../../style/components/paginate.scss" />

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

@@ -1,38 +1,29 @@
 <script lang="ts" setup>
-const props = defineProps({
-  name: {
-    required: false,
-    default: "radio",
-    type: String,
-  },
-  value: {
-    required: false,
-    default: "radio",
-    type: [String, Number, null],
-  },
-  modelValue: {
-    required: false,
-    default: "",
-    type: [String, Number, null],
-  },
-  checked: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-});
+import _props from '../props/Radio'
+const props = defineProps(_props)
+const modelValue = defineModel()
 
-const emits: any = defineEmits(["update:modelValue"]);
+const inputFunction = (event: Event) => {
+  const target = event.currentTarget as HTMLInputElement
+  modelValue.value = target.value
+}
 </script>
 
 <template>
-  <div>
+  <label
+    class="glorious-radio"
+    :class="[props.color, `size-${props.size}`]"
+  >
     <input
-      type="radio"
       :name="props.name"
+      type="radio"
+      :disabled="props.disabled"
       :value="props.value"
-      @click="emits('update:modelValue', props.value)"
       :checked="props.checked"
+      @input="inputFunction($event)"
     />
-  </div>
+    <div></div>
+  </label>
 </template>
+
+<style lang="scss" src="../../style/components/radio.scss" />

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

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+const modelValue = defineModel()
+const computeModelValue = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  modelValue.value = 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 lang="scss" src="../../style/components/rating.scss" />

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

@@ -1,88 +1,58 @@
 <script lang="ts" setup>
-import { ref, watch } from "#imports";
-const props = defineProps({
-  modelValue: {
-    required: false,
-    default: null,
-    type: [String, Number],
-  },
-  options: {
-    required: true,
-    default: [],
-    type: Array<object>,
-  },
-  color: {
-    required: false,
-    default: "primary",
-    type: String,
-  },
-  size: {
-    required: false,
-    default: "md",
-    type: String,
-  },
-  title: {
-    required: false,
-    default: "",
-    type: String,
-  },
-  error: {
-    required: false,
-    default: "|",
-    type: String,
-  },
-  disabled: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  placeholder: {
-    require: false,
-    default: "",
-    type: String,
-  },
-});
-const selectValue = ref(null);
-const emits = defineEmits(["update:modelValue"]);
+import { ref, watch } from '#imports'
+import _props from '../props/Select'
+
+const props: any = defineProps(_props)
+const modelValue = defineModel()
+const selectValue: any = ref(null)
 watch(
   () => selectValue.value,
   () => {
-    emits("update:modelValue", selectValue.value);
+    modelValue.value = selectValue.value
   }
-);
+)
 
 // -------------------------------------- init value
-selectValue.value = props.modelValue;
+selectValue.value = props.modelValue
 watch(
   () => props.modelValue,
   () => {
-    selectValue.value = props.modelValue;
+    selectValue.value = props.modelValue
   }
-);
+)
+
+modelValue.value = null
+selectValue.value = null
 </script>
 
 <template>
   <div class="flex flex-col">
-    <span class="text-[14px] font-medium text-gray-500">{{ props.title }}</span>
+    <span class="glorious-title text-sm font-medium text-gray-500">
+      {{ props.title }}
+    </span>
     <div class="grow flex relative">
       <select
         v-model="selectValue"
         aria-label="glorious select"
         :disabled="props.disabled"
-        class="grow"
-        :class="[`glorious-select-${props.color}`, props.size]"
+        class="grow glorious-select"
+        :class="[`color-${props.color}`, props.size]"
       >
         <option
           v-for="(item, index) in props.options"
           :key="index"
           :value="item.value"
         >
-          {{ item.text }}
+          {{ item[props.displayTextKey] }}
         </option>
       </select>
       <span
-        v-if="selectValue === null"
-        class="absolute top-0 bottom-0 my-auto pr-2 h-max"
+        v-if="
+          selectValue === null ||
+          selectValue === '' ||
+          typeof selectValue === 'undefined'
+        "
+        class="absolute top-0 bottom-0 my-auto px-3 h-max text-gray-500"
       >
         {{ props.placeholder }}
       </span>
@@ -91,59 +61,4 @@ watch(
   </div>
 </template>
 
-<style>
-.xl.glorious-select-orange, .xl.glorious-select-blue, .xl.glorious-select-gray, .xl.glorious-select-red, .xl.glorious-select-primary {
-  @apply py-[0.657rem];
-}
-.lg.glorious-select-orange, .lg.glorious-select-blue, .lg.glorious-select-gray, .lg.glorious-select-red, .lg.glorious-select-primary {
-  @apply py-[0.532rem];
-}
-.md.glorious-select-orange, .md.glorious-select-blue, .md.glorious-select-gray, .md.glorious-select-red, .md.glorious-select-primary {
-  @apply py-[0.407rem];
-}
-.sm.glorious-select-orange, .sm.glorious-select-blue, .sm.glorious-select-gray, .sm.glorious-select-red, .sm.glorious-select-primary {
-  @apply py-[0.282rem];
-}
-.xsm.glorious-select-orange, .xsm.glorious-select-blue, .xsm.glorious-select-gray, .xsm.glorious-select-red, .xsm.glorious-select-primary {
-  @apply py-[0.157rem];
-}
-
-.glorious-select-orange:focus-visible, .glorious-select-blue:focus-visible, .glorious-select-gray:focus-visible, .glorious-select-red:focus-visible, .glorious-select-primary:focus-visible {
-  @apply outline-none ring-2;
-}
-
-.glorious-select-primary {
-  @apply rounded-md ring-1 ring-green-500 px-3 text-gray-500 text-[14px];
-}
-.glorious-select-primary:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-select-red {
-  @apply rounded-md ring-1 ring-red-500 px-3;
-}
-.glorious-select-red:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-select-gray {
-  @apply rounded-md ring-1 ring-gray-500 px-3;
-}
-.glorious-select-gray:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-select-blue {
-  @apply rounded-md ring-1 ring-blue-500 px-3;
-}
-.glorious-select-blue:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-select-orange {
-  @apply rounded-md ring-1 ring-orange-500 px-3;
-}
-.glorious-select-orange:disabled {
-  @apply cursor-not-allowed;
-}
-</style>
+<style lang="scss" src="../../style/components/select.scss" />

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

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import _props from '../props/Switch'
+
+const props = defineProps(_props)
+const modelValue = defineModel()
+const input = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  modelValue.value = target.checked
+}
+</script>
+
+<template>
+  <div>
+    <label
+      class="switch"
+      :class="[`color-${props.color}`]"
+    >
+      <input
+        type="checkbox"
+        @input="input"
+        :checked="props.checked"
+      />
+      <span class="switch-slider"></span>
+    </label>
+  </div>
+</template>
+
+<style lang="scss" src="../../style/components/switch.scss" />