nuxt-glorious 1.2.0 → 1.2.9-5

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

@@ -1,200 +1,142 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "#imports";
-import { useGloriousCore } from "../../composables/useGloriousCore";
-import gTailwindColor from "../../utils/gTailwindColor";
-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",
-  },
-  mode: {
-    required: false,
-    default: "normal",
-    type: String as () => "normal" | "tag",
-  },
-  display: {
-    required: false,
-    default: "",
-    type: String as () => "price",
-  },
-  inputMode: {
-    required: false,
-    default: "text",
-    type: String as () =>
-      | "text"
-      | "none"
-      | "decimal"
-      | "numeric"
-      | "tel"
-      | "search"
-      | "email"
-      | "url",
-  },
-});
+import { computed, GloriousStore, ref, watch } from '#imports'
+import { hasValidationError } from '../helper'
+import { useGloriousCore } from '../../composables/useGloriousCore'
+import _props from '../props/Input'
 
-const inputValue: any = ref(null);
-
-const emits = defineEmits(["update:modelValue"]);
+const props: any = defineProps(_props)
+const modelValue = defineModel()
+modelValue.value = ''
+const inputValue: any = ref(null)
 
 watch(
   () => inputValue.value,
   () => {
-    if (props.mode === "tag") return;
+    if (props.mode === 'tag') return
 
     switch (props.display) {
-      case "price":
-        inputValue.value = useGloriousCore.numbersWithSeperateSamePrice(
+      case 'price':
+        inputValue.value = useGloriousCore.numbersWithSeparateSamePrice(
           inputValue.value
-        );
-        emits(
-          "update:modelValue",
-          inputValue.value.toString().replaceAll(",", "")
-        );
-        break;
+        )
+        modelValue.value = inputValue.value.toString().replaceAll(',', '')
+        break
       default:
-        emits("update:modelValue", inputValue.value);
-        break;
+        modelValue.value = inputValue.value
+        break
     }
   }
-);
+)
 
 const computeIconSize = computed(() => {
-  let iconSize = 0;
+  let iconSize = 0
 
   switch (props.size) {
-    case "xl":
-      iconSize = 30;
-      break;
-    case "lg":
-      iconSize = 27;
-      break;
-    case "md":
-      iconSize = 25;
-      break;
-    case "sm":
-      iconSize = 23;
-      break;
-    case "xsm":
-      iconSize = 20;
-      break;
+    case 'xl':
+      iconSize = 30
+      break
+    case 'lg':
+      iconSize = 27
+      break
+    case 'md':
+      iconSize = 25
+      break
+    case 'sm':
+      iconSize = 23
+      break
+    case 'xs':
+      iconSize = 20
+      break
     default:
-      iconSize = 30;
-      break;
+      iconSize = 30
+      break
   }
 
-  return iconSize;
-});
+  return iconSize
+})
 
 // ------------------------------------------------------------------------------------------------ TAG
-const tags: any = ref([]);
+const tags: any = ref([])
 
 const addTag = (event: any) => {
-  if (tags.value.length === 0) tags.value = [];
+  if (props.tagLockOption) return
+
+  if (tags.value.length === 0) tags.value = []
+
+  if (props.mode !== 'tag') return
+  const value: any = event.target.value
+  tags.value.push(value)
+  modelValue.value = tags.value
+  inputValue.value = ''
+}
+
+const addTagViaOption = (option: any, event: any) => {
+  //   event.stopPropagation() if want not close with window
+  if (tags.value.length === 0) tags.value = []
+
+  const value: any = option
+  tags.value.push(value)
+  modelValue.value = tags.value
+  inputValue.value = ''
+}
 
-  if (props.mode !== "tag") return;
-  const value: any = event.target.value;
-  tags.value.push(value);
-  emits("update:modelValue", tags.value);
-  inputValue.value = "";
-};
 const removeTag = (tag: string) => {
-  tags.value = tags.value.filter((item: any) => item !== tag);
-  emits("update:modelValue", tags.value);
-};
+  tags.value = tags.value.filter((item: any) => item !== tag)
+  modelValue.value = tags.value
+}
 
 // -------------------------------------- init value
 const initValue = () => {
-  if (props.mode === "tag") {
-    tags.value = props.modelValue;
-    return;
+  if (props.mode === 'tag') {
+    tags.value = modelValue.value
+    return
   }
 
-  inputValue.value = props.modelValue;
-};
-initValue();
+  inputValue.value = modelValue.value
+}
+initValue()
 watch(
-  () => props.modelValue,
+  () => modelValue.value,
   () => initValue()
-);
+)
+
+const typeInput = ref(props.type)
 
-const typeInput = ref(props.type);
+const inputClicked = (event: any) => {
+  if (props.mode === 'tag' && props.options) {
+    const gio = document.querySelectorAll('.glorious-input-options')
+    gio.forEach((element: any) => element.classList.add('hidden'))
+
+    const optionsElement = event.currentTarget.parentElement.children[1]
+    if (optionsElement.classList.contains('hidden'))
+      optionsElement.classList.remove('hidden')
+  }
+}
+
+const gs = GloriousStore()
 </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="glorious-input"
-      :class="[props.icon !== '' ? `icon-${props.size}` : '']"
+      :class="[
+        props.icon !== '' ? `icon-${props.size}` : '',
+        hasValidationError(props.error) ? 'validation-error' : '',
+      ]"
     >
       <div class="relative">
         <input
           v-model="inputValue"
           :inputmode="props.inputMode"
           :autocomplete="props.autocomplete"
-          class="w-full"
+          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',
           ]"
@@ -202,13 +144,13 @@ const typeInput = ref(props.type);
           :disabled="props.disabled"
           :type="typeInput"
           @keyup.enter="addTag($event)"
+          @click="inputClicked($event)"
         />
         <GIcon
           v-if="props.type === 'password' && typeInput === 'password'"
           class="absolute left-0 top-0 bottom-0 my-auto ml-1 cursor-pointer"
           :size="23"
           name="glorious-eye-fill"
-          :color="gTailwindColor('gray', 500)"
           @click="typeInput = 'text'"
         ></GIcon>
         <GIcon
@@ -216,13 +158,40 @@ const typeInput = ref(props.type);
           class="absolute left-0 top-0 bottom-0 my-auto ml-1 cursor-pointer"
           :size="23"
           name="glorious-eye-off-fill"
-          :color="gTailwindColor('gray', 500)"
           @click="typeInput = 'password'"
         ></GIcon>
+
+        <div
+          v-if="props.options.length > 0"
+          class="glorious-input-options hidden"
+          :class="[`size-${props.size}`]"
+        >
+          <div
+            v-if="props.loadingOptions"
+            class="flex justify-center"
+          >
+            <GLoading color="green" />
+          </div>
+          <template v-else>
+            <div
+              v-for="(option, index) in props.options"
+              :key="index"
+              @click="addTagViaOption(option, $event)"
+            >
+              {{ option.text }}
+            </div>
+          </template>
+        </div>
       </div>
-      <div v-if="tags.length !== 0" class="glorious-input-tag">
-        <div v-for="(item, index) in tags" :key="index">
-          {{ item }}
+      <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"
             :size="10"
@@ -236,103 +205,10 @@ const typeInput = ref(props.type);
         class="glorious-input-icon"
         :name="props.icon"
         :size="computeIconSize"
-        :color="gTailwindColor('gray', '500')"
       />
     </div>
     <GErrorText :error="props.error" />
   </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-300 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;
-}
-</style>
+<style lang="scss" src="../../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 lang="scss" src="../../style/components/loading.scss" />