nuxt-glorious 1.2.3-9 → 1.2.4

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

@@ -1,115 +1,13 @@
 <script setup lang="ts">
 import { computed, ref, watch } from '#imports'
 import { useGloriousCore } from '../../composables/useGloriousCore'
-const props = defineProps({
-  modelValue: {
-    required: false,
-    default: '',
-    type: [String, Array<String>, Number],
-  },
-  color: {
-    required: false,
-    default: 'primary',
-    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'primary',
-  },
-  placeholder: {
-    required: false,
-    default: '',
-    type: String,
-  },
-  title: {
-    required: false,
-    default: '',
-    type: String,
-  },
-  size: {
-    required: false,
-    default: 'md',
-    type: String as () => 'xl' | 'lg' | 'md' | 'sm' | 'xsm',
-  },
-  error: {
-    required: false,
-    default: '|',
-    type: String,
-  },
-  icon: {
-    required: false,
-    default: '',
-    type: String,
-  },
-  disabled: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  type: {
-    required: false,
-    default: 'text',
-    type: String as () =>
-      | 'button'
-      | 'checkbox'
-      | 'color'
-      | 'date'
-      | 'email'
-      | 'file'
-      | 'hidden'
-      | 'password'
-      | 'radio'
-      | 'range'
-      | 'tel'
-      | 'text'
-      | 'url'
-      | 'number',
-  },
-  autocomplete: {
-    required: false,
-    default: 'off',
-    type: String as () => 'off' | 'on' | 'new-password',
-  },
-  display: {
-    required: false,
-    default: '',
-    type: String as () => 'price',
-  },
-  inputMode: {
-    required: false,
-    default: 'text',
-    type: String as () =>
-      | 'text'
-      | 'none'
-      | 'decimal'
-      | 'numeric'
-      | 'tel'
-      | 'search'
-      | 'email'
-      | 'url',
-  },
-  mode: {
-    required: false,
-    default: 'normal',
-    type: String as () => 'normal' | 'tag',
-  },
-  tagLockOption: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  options: {
-    required: false,
-    default: [],
-    type: Array<object>,
-  },
-  loadingOptions: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-})
+import _props from '../props/Input'
 
+const props: any = defineProps(_props)
+const modelValue = defineModel()
+modelValue.value = ''
 const inputValue: any = ref(null)
 
-const emits = defineEmits(['update:modelValue'])
-
 watch(
   () => inputValue.value,
   () => {
@@ -117,16 +15,13 @@ watch(
 
     switch (props.display) {
       case 'price':
-        inputValue.value = useGloriousCore.numbersWithSeperateSamePrice(
+        inputValue.value = useGloriousCore.numbersWithSeparateSamePrice(
           inputValue.value
         )
-        emits(
-          'update:modelValue',
-          inputValue.value.toString().replaceAll(',', '')
-        )
+        modelValue.value = inputValue.value.toString().replaceAll(',', '')
         break
       default:
-        emits('update:modelValue', inputValue.value)
+        modelValue.value = inputValue.value
         break
     }
   }
@@ -148,7 +43,7 @@ const computeIconSize = computed(() => {
     case 'sm':
       iconSize = 23
       break
-    case 'xsm':
+    case 'xs':
       iconSize = 20
       break
     default:
@@ -170,7 +65,7 @@ const addTag = (event: any) => {
   if (props.mode !== 'tag') return
   const value: any = event.target.value
   tags.value.push(value)
-  emits('update:modelValue', tags.value)
+  modelValue.value = tags.value
   inputValue.value = ''
 }
 
@@ -180,27 +75,27 @@ const addTagViaOption = (option: any, event: any) => {
 
   const value: any = option
   tags.value.push(value)
-  emits('update:modelValue', tags.value)
+  modelValue.value = tags.value
   inputValue.value = ''
 }
 
 const removeTag = (tag: string) => {
   tags.value = tags.value.filter((item: any) => item !== tag)
-  emits('update:modelValue', tags.value)
+  modelValue.value = tags.value
 }
 
 // -------------------------------------- init value
 const initValue = () => {
   if (props.mode === 'tag') {
-    tags.value = props.modelValue
+    tags.value = modelValue.value
     return
   }
 
-  inputValue.value = props.modelValue
+  inputValue.value = modelValue.value
 }
 initValue()
 watch(
-  () => props.modelValue,
+  () => modelValue.value,
   () => initValue()
 )
 
@@ -232,7 +127,7 @@ const inputClicked = (event: any) => {
           :autocomplete="props.autocomplete"
           class="w-full glorious-input-field"
           :class="[
-            props.size,
+            `size-${props.size}`,
             `glorious-input-${props.color}`,
             props.type === 'password' ? 'pl-[30px] pr-3' : 'px-3',
           ]"
@@ -262,7 +157,10 @@ const inputClicked = (event: any) => {
           class="glorious-input-options hidden"
           :class="[`size-${props.size}`]"
         >
-          <div v-if="props.loadingOptions" class="flex justify-center">
+          <div
+            v-if="props.loadingOptions"
+            class="flex justify-center"
+          >
             <GLoading color="green" />
           </div>
           <template v-else>
@@ -276,8 +174,14 @@ const inputClicked = (event: any) => {
           </template>
         </div>
       </div>
-      <div v-if="tags.length !== 0" class="glorious-input-tag">
-        <div v-for="(item, index) in tags" :key="index">
+      <div
+        v-if="tags.length !== 0"
+        class="glorious-input-tag"
+      >
+        <div
+          v-for="(item, index) in tags"
+          :key="index"
+        >
           {{ typeof item === 'object' ? item.text : item }}
           <GIcon
             name="glorious-x"
@@ -298,109 +202,4 @@ const inputClicked = (event: any) => {
   </div>
 </template>
 
-<style>
-.xl.glorious-input-orange, .xl.glorious-input-blue, .xl.glorious-input-gray, .xl.glorious-input-red, .xl.glorious-input-primary {
-  @apply py-2.5;
-}
-.lg.glorious-input-orange, .lg.glorious-input-blue, .lg.glorious-input-gray, .lg.glorious-input-red, .lg.glorious-input-primary {
-  @apply py-2;
-}
-.md.glorious-input-orange, .md.glorious-input-blue, .md.glorious-input-gray, .md.glorious-input-red, .md.glorious-input-primary {
-  @apply py-1.5;
-}
-.sm.glorious-input-orange, .sm.glorious-input-blue, .sm.glorious-input-gray, .sm.glorious-input-red, .sm.glorious-input-primary {
-  @apply py-1;
-}
-.xsm.glorious-input-orange, .xsm.glorious-input-blue, .xsm.glorious-input-gray, .xsm.glorious-input-red, .xsm.glorious-input-primary {
-  @apply py-0.5;
-}
-
-.glorious-input-orange:focus-visible, .glorious-input-blue:focus-visible, .glorious-input-gray:focus-visible, .glorious-input-red:focus-visible, .glorious-input-primary:focus-visible {
-  @apply outline-none ring-2;
-}
-
-.glorious-input-primary {
-  @apply rounded-md ring-1 ring-green-500;
-}
-.glorious-input-primary:disabled {
-  @apply bg-green-100 cursor-not-allowed;
-}
-
-.glorious-input-red {
-  @apply rounded-md ring-1 ring-red-500;
-}
-.glorious-input-red:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-input-gray {
-  @apply rounded-md ring-1 ring-gray-500;
-}
-.glorious-input-gray:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-input-blue {
-  @apply rounded-md ring-1 ring-blue-500;
-}
-.glorious-input-blue:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-input-orange {
-  @apply rounded-md ring-1 ring-orange-500;
-}
-.glorious-input-orange:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-input {
-  @apply relative w-full;
-}
-.glorious-input > input {
-  @apply w-full;
-}
-.glorious-input > input::placeholder {
-  @apply text-[14px];
-}
-.glorious-input.icon-xl > input {
-  @apply rtl:pr-9 ltr:pl-9;
-}
-.glorious-input.icon-lg > input {
-  @apply rtl:pr-9 ltr:pl-8;
-}
-.glorious-input.icon-md > input {
-  @apply rtl:pr-9 ltr:pl-8;
-}
-.glorious-input.icon-sm > input {
-  @apply rtl:pr-8 ltr:pl-8;
-}
-.glorious-input.icon-xsm > input {
-  @apply rtl:pr-8 ltr:pl-7;
-}
-
-.glorious-input-icon {
-  @apply absolute h-max top-0 bottom-0 my-auto rtl:right-1 ltr:left-1;
-}
-
-/* ----------------------------------------------- TAG */
-.glorious-input-tag {
-  @apply mt-3 gap-2 flex flex-wrap;
-}
-.glorious-input-tag > div {
-  @apply bg-green-500 px-1 rounded text-white flex items-center gap-2 cursor-pointer;
-}
-
-.glorious-input-options {
-  @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
-}
-.glorious-input-options > div {
-  @apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;
-}
-.glorious-input-options.size-md {
-  @apply top-11;
-}
-.glorious-input div > input::placeholder {
-  @apply text-gray-500;
-}
-</style>
+<style lang="scss" src="../../assets/style/components/input.scss" />

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

@@ -1,27 +1,12 @@
 <script setup lang="ts">
-const props = defineProps({
-  color: {
-    required: false,
-    default: "#fff",
-    type: String,
-  },
-  size: {
-    required: false,
-    default: 30,
-    type: Number,
-  },
-  stroke: {
-    required: false,
-    default: 3,
-    type: Number,
-  },
-});
+import _props from '../props/Loading'
+const props: any = defineProps(_props)
 </script>
 
 <template>
   <div class="inline">
     <div
-      class="loader"
+      class="glorious-loading"
       :style="{
         width: `${props.size}px`,
         border: `${props.stroke}px solid ${props.color}`,
@@ -30,6 +15,4 @@ const props = defineProps({
   </div>
 </template>
 
-<style>
-.loader{animation:l20-1 .8s linear infinite alternate,l20-2 1.6s linear infinite;aspect-ratio:1;border-radius:50%}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 0,100% 0,100% 0)}25%{clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,50% 100%,0 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0,100% 0,100% 100%,50% 100%,0 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0deg)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0deg)}to{transform:scaleY(-1) rotate(-135deg)}}
-</style>
+<style src="../../assets/style/components/loading.scss" />

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

@@ -1,93 +1,28 @@
 <script lang="ts" setup>
 import { watch } from '#imports'
+import { createBlurDom, removeBlurDom } from '../helper'
+import _props from '../props/Modal'
 
-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,
-  },
-  colorBtn: {
-    required: false,
-    default: 'primary',
-    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'primary',
-  },
-})
-
-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', () => {
-    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,
   () => {
     const modals = document.querySelectorAll('.glorious-scaffold-modal')
-    if (props.modelValue && props.blur) {
-      addBlurBackground()
+    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(
-        '.glorious-scaffold-modal-bg-blur'
-      )
       modals.forEach((el: any) => {
         el.classList.add('animation')
       })
-      if (blur !== null) blur.remove()
+      removeBlurDom()
     }
   }
 )
@@ -96,7 +31,7 @@ watch(
 <template>
   <div
     class="glorious-scaffold-modal animation"
-    :class="[props.modelValue ? 'open' : 'close', `size-${props.size}`]"
+    :class="[modelValue ? 'open' : 'close', `size-${props.size}`]"
   >
     <!-- header -->
     <div
@@ -108,7 +43,7 @@ watch(
         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"
@@ -143,7 +78,7 @@ watch(
         :color="props.colorBtn"
         v-show="props.closeBtn !== ''"
         outline
-        @click="emits('update:modelValue', false)"
+        @click="modelValue = false"
       >
         {{ props.closeBtn }}
       </GButton>
@@ -152,71 +87,4 @@ watch(
   </div>
 </template>
 
-<style>
-.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;
-}
-.glorious-scaffold-modal-header {
-  @apply flex justify-between items-center;
-}
-.glorious-scaffold-modal-footer {
-  @apply flex justify-center gap-3 mt-3;
-}
-.glorious-scaffold-modal-footer > button {
-  @apply min-w-24;
-}
-.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];
-}
-.glorious-scaffold-modal.size-full {
-  @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-[calc(100%-15%)];
-}
-.glorious-scaffold-modal.size-lg {
-  @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-[calc(100%-15%)];
-}
-.glorious-scaffold-modal.size-sm {
-  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[calc(100%-15%)];
-}
-.glorious-scaffold-modal.close {
-  @apply hidden;
-}
-.glorious-scaffold-modal.open.animation {
-  animation: animationMobile 0.3s normal forwards;
-}
-@screen md {
-  .glorious-scaffold-modal.open.animation {
-    animation: animationOpacity 0.3s normal forwards;
-  }
-}
-@keyframes animationOpacity {
-  0% {
-    transform: scale(0.1);
-    opacity: 0;
-  }
-  99% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: unset;
-    opacity: 1;
-  }
-}
-@keyframes animationMobile {
-  0% {
-    transform: translateY(100%);
-  }
-  99% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-</style>
+<style lang="scss" src="../../assets/style/components/modal.scss" />

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

@@ -1,32 +1,14 @@
 <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: false,
-    type: Number,
-  },
-})
+import _props from '../props/Paginate'
 
-const emits = defineEmits(['update:modelValue', 'change'])
+const props = defineProps(_props)
+const modelValue = defineModel()
+const emits = defineEmits(['change'])
 
 const emit = (item: any) => {
   if (props.currentPage !== item) {
-    emits('update:modelValue', item)
+    modelValue.value = item
     emits('change', { page: item })
   }
 }
@@ -35,8 +17,8 @@ const listPage = ref<Array<Number>>([])
 
 const computeListPage = () => {
   listPage.value = []
-  let firstPage = props.currentPage - props.numberSugestPage
-  const endPage = props.currentPage + (props.numberSugestPage + 1)
+  let firstPage = props.currentPage - props.numberSuggestPage
+  const endPage = props.currentPage + (props.numberSuggestPage + 1)
 
   while (firstPage <= endPage) {
     if (firstPage > 0 && firstPage <= props.lastPage)
@@ -93,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="../../assets/style/components/paginate.scss" />