nuxt-glorious 1.2.9-9-2 → 1.2.9-9-3

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "1.2.9-9-2"
+  "version": "1.2.9-9-3"
 }

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

@@ -72,8 +72,6 @@ const addTag = (event: any) => {
 
 const addTagViaOption = (option: any, event: any) => {
   //   event.stopPropagation() if want not close with window
-  console.log(typeof tags.value)
-
   if (
     typeof tags.value === 'string' ||
     typeof tags.value === 'undefined' ||
@@ -81,10 +79,14 @@ const addTagViaOption = (option: any, event: any) => {
   )
     tags.value = []
 
-  const value: any = option
-  tags.value.push(value)
-  modelValue.value = tags.value
-  inputValue.value = ''
+  const find = tags.value.find((item: any) => item.value === option.value)
+
+  if (typeof find === 'undefined') {
+    const value: any = option
+    tags.value.push(value)
+    modelValue.value = tags.value
+    inputValue.value = ''
+  }
 }
 
 const removeTag = (tag: string) => {
@@ -115,7 +117,10 @@ const inputClicked = (event: any) => {
     gio.forEach((element: any) => element.classList.add('hidden'))
 
     const optionsElement = event.currentTarget.parentElement.children[1]
-    if (optionsElement.classList.contains('hidden'))
+    if (
+      typeof optionsElement !== 'undefined' &&
+      optionsElement.classList.contains('hidden')
+    )
       optionsElement.classList.remove('hidden')
   }
 }
@@ -150,6 +155,7 @@ const inputClicked = (event: any) => {
             `size-${props.size}`,
             `glorious-input-${props.color}`,
             props.type === 'password' ? 'pl-[30px] pr-3' : 'px-3',
+            `mode-${props.mode}`,
           ]"
           :placeholder="props.placeholder"
           :disabled="props.disabled"
@@ -178,20 +184,12 @@ const inputClicked = (event: any) => {
           :class="[`size-${props.size}`]"
         >
           <div
-            v-if="props.loadingOptions"
-            class="flex justify-center"
+            v-for="(option, index) in props.options"
+            :key="index"
+            @click="addTagViaOption(option, $event)"
           >
-            <GLoading color="green" />
+            {{ option[props.displayTextKey] }}
           </div>
-          <template v-else>
-            <div
-              v-for="(option, index) in props.options"
-              :key="index"
-              @click="addTagViaOption(option, $event)"
-            >
-              {{ option[props.displayTextKey] }}
-            </div>
-          </template>
         </div>
       </div>
       <div
@@ -217,6 +215,12 @@ const inputClicked = (event: any) => {
         :name="props.icon"
         :size="computeIconSize"
       />
+      <div
+        v-if="props.loadingOptions"
+        class="absolute top-1 bottom-0 my-auto left-1"
+      >
+        <GLoading color="green" />
+      </div>
     </div>
     <GErrorText :error="props.error" />
   </div>

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

@@ -38,6 +38,7 @@ const firstVal = selectValue.value
         *
       </span>
     </span>
+    {{ selectValue === '' }}
     <div class="grow flex relative">
       <select
         v-model="selectValue"
@@ -48,6 +49,9 @@ const firstVal = selectValue.value
           `color-${props.color}`,
           props.size,
           hasValidationError(props.error) ? 'validation-error' : '',
+          selectValue === null || selectValue === ''
+            ? 'text-gray-500'
+            : 'text-black',
         ]"
       >
         <option

package/dist/runtime/plugins/InputComponent.mjs

@@ -2,12 +2,28 @@ import { defineNuxtPlugin } from "#imports";
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook("app:beforeMount", () => {
     window.addEventListener("click", (event) => {
+      function getElementPosition(element) {
+        let rect = element.getBoundingClientRect();
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        return rect.top + scrollTop;
+      }
       if (!event.target.matches(".glorious-input-field")) {
         const options = document.querySelectorAll(".glorious-input-options");
         options.forEach((el) => {
           el.classList.add("hidden");
         });
       }
+      if (event.target.matches(".glorious-input-field") && event.target.classList.contains("mode-tag")) {
+        if (typeof event.target.nextElementSibling?.offsetHeight !== "undefined") {
+          if (window.innerHeight < getElementPosition(event.target) + event.target.offsetHeight + event.target.nextElementSibling.offsetHeight) {
+            event.target.nextElementSibling.style.width = `${event.target.offsetWidth}px`;
+            event.target.nextElementSibling.style.top = `${getElementPosition(event.target) - event.target.nextElementSibling.offsetHeight}px`;
+          } else {
+            event.target.nextElementSibling.style.width = `${event.target.offsetWidth}px`;
+            event.target.nextElementSibling.style.top = `${getElementPosition(event.target) + event.target.offsetHeight}px`;
+          }
+        }
+      }
     });
   });
 });

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

@@ -174,14 +174,11 @@
 }
 
 .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;
+  @apply p-1 shadow-lg fixed 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;
 }

package/dist/runtime/style/components/input.scss

@@ -70,15 +70,15 @@
 .glorious-input {
   // -------------------------------------------------- OPTION
   &-options {
-    @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
+    @apply p-1 shadow-lg fixed w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
 
     > div {
       @apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;
     }
 
-    &.size-md {
-      @apply top-11;
-    }
+    // &.size-md {
+    //   @apply top-11;
+    // }
   }
 
   div > input::placeholder {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.9-9-2",
+  "version": "1.2.9-9-3",
   "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",
@@ -20,7 +20,7 @@
   ],
   "scripts": {
     "prepack": "nuxt-module-build build && cp -R src/runtime/style dist/runtime",
-    "dev": "nuxi dev playground",
+    "dev": "nuxi dev --port=3001 playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run prepack && npm publish",