nuxt-glorious 1.2.2-8 → 1.2.3-0

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "glorious",
   "configKey": "glorious",
-  "version": "1.2.2-8"
+  "version": "1.2.3-0"
 }

package/dist/module.mjs

@@ -70,7 +70,7 @@ const module = defineNuxtModule({
       });
     });
     addPlugin(resolver.resolve("./runtime/plugins/glorious-app-setting"));
-    addPlugin(resolver.resolve("./runtime/plugins/Drawer"));
+    addPlugin(resolver.resolve("./runtime/plugins/InputComponent"));
     addRouteMiddleware({
       name: "g-auth-strategy",
       path: resolver.resolve("./runtime/middlewares/AuthStrategy"),

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

@@ -88,4 +88,14 @@
 }
 .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;
+}
+.glorious-input-options > div {
+  @apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;
+}
+.glorious-input-options.size-md {
+  @apply top-11;
 }

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

@@ -1,40 +1,40 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "#imports";
-import { useGloriousCore } from "../../composables/useGloriousCore";
+import { computed, ref, watch } from '#imports'
+import { useGloriousCore } from '../../composables/useGloriousCore'
 const props = defineProps({
   modelValue: {
     required: false,
-    default: "",
+    default: '',
     type: [String, Array<String>, Number],
   },
   color: {
     required: false,
-    default: "primary",
-    type: String as () => "orange" | "blue" | "gray" | "red" | "primary",
+    default: 'primary',
+    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'primary',
   },
   placeholder: {
     required: false,
-    default: "",
+    default: '',
     type: String,
   },
   title: {
     required: false,
-    default: "",
+    default: '',
     type: String,
   },
   size: {
     required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "xsm",
+    default: 'md',
+    type: String as () => 'xl' | 'lg' | 'md' | 'sm' | 'xsm',
   },
   error: {
     required: false,
-    default: "|",
+    default: '|',
     type: String,
   },
   icon: {
     required: false,
-    default: "",
+    default: '',
     type: String,
   },
   disabled: {
@@ -44,139 +44,177 @@ const props = defineProps({
   },
   type: {
     required: false,
-    default: "text",
+    default: 'text',
     type: String as () =>
-      | "button"
-      | "checkbox"
-      | "color"
-      | "date"
-      | "email"
-      | "file"
-      | "hidden"
-      | "password"
-      | "radio"
-      | "range"
-      | "tel"
-      | "text"
-      | "url"
-      | "number",
+      | '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",
+    default: 'off',
+    type: String as () => 'off' | 'on' | 'new-password',
   },
   display: {
     required: false,
-    default: "",
-    type: String as () => "price",
+    default: '',
+    type: String as () => 'price',
   },
   inputMode: {
     required: false,
-    default: "text",
+    default: 'text',
     type: String as () =>
-      | "text"
-      | "none"
-      | "decimal"
-      | "numeric"
-      | "tel"
-      | "search"
-      | "email"
-      | "url",
+      | '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,
+  },
+})
 
-const inputValue: any = ref(null);
+const inputValue: any = ref(null)
 
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(['update:modelValue'])
 
 watch(
   () => inputValue.value,
   () => {
-    if (props.mode === "tag") return;
+    if (props.mode === 'tag') return
 
     switch (props.display) {
-      case "price":
+      case 'price':
         inputValue.value = useGloriousCore.numbersWithSeperateSamePrice(
           inputValue.value
-        );
+        )
         emits(
-          "update:modelValue",
-          inputValue.value.toString().replaceAll(",", "")
-        );
-        break;
+          'update:modelValue',
+          inputValue.value.toString().replaceAll(',', '')
+        )
+        break
       default:
-        emits("update:modelValue", inputValue.value);
-        break;
+        emits('update:modelValue', 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 'xsm':
+      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)
+  emits('update:modelValue', 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)
+  emits('update:modelValue', 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)
+  emits('update:modelValue', tags.value)
+}
 
 // -------------------------------------- init value
 const initValue = () => {
-  if (props.mode === "tag") {
-    tags.value = props.modelValue;
-    return;
+  if (props.mode === 'tag') {
+    tags.value = props.modelValue
+    return
   }
 
-  inputValue.value = props.modelValue;
-};
-initValue();
+  inputValue.value = props.modelValue
+}
+initValue()
 watch(
   () => props.modelValue,
   () => initValue()
-);
+)
+
+const typeInput = ref(props.type)
+
+const inputClicked = (event: any) => {
+  if (props.mode === 'tag' && props.options) {
+    console.log(event.currentTarget.parentElement.children)
 
-const typeInput = ref(props.type);
+    const optionsElement = event.currentTarget.parentElement.children[1]
+    if (optionsElement.classList.contains('hidden'))
+      optionsElement.classList.remove('hidden')
+  }
+}
 </script>
 
 <template>
@@ -191,7 +229,7 @@ const typeInput = ref(props.type);
           v-model="inputValue"
           :inputmode="props.inputMode"
           :autocomplete="props.autocomplete"
-          class="w-full"
+          class="w-full glorious-input-field"
           :class="[
             props.size,
             `glorious-input-${props.color}`,
@@ -201,6 +239,7 @@ 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'"
@@ -216,10 +255,29 @@ const typeInput = ref(props.type);
           name="glorious-eye-off-fill"
           @click="typeInput = 'password'"
         ></GIcon>
+
+        <div
+          v-if="props.options.length > 0"
+          class="glorious-input-options"
+          :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 }}
+          {{ typeof item === 'object' ? item.text : item }}
           <GIcon
             name="glorious-x"
             :size="10"
@@ -331,4 +389,14 @@ const typeInput = ref(props.type);
 .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;
+}
+.glorious-input-options > div {
+  @apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;
+}
+.glorious-input-options.size-md {
+  @apply top-11;
+}
 </style>

package/dist/runtime/plugins/InputComponent.mjs

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin } from "#imports";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook("app:beforeMount", () => {
+    window.addEventListener("click", (event) => {
+      if (!event.target.matches(".glorious-input-field")) {
+        const options = document.querySelectorAll(".glorious-input-options");
+        options.forEach((el) => {
+          el.classList.add("hidden");
+        });
+      }
+    });
+  });
+});

package/dist/runtime/plugins/module.d.ts

@@ -0,0 +1,4 @@
+export interface ModuleOptions {
+}
+declare const _default: import("@nuxt/schema").NuxtModule<ModuleOptions, ModuleOptions, false>;
+export default _default;

package/dist/runtime/plugins/module.mjs

@@ -0,0 +1,94 @@
+import {
+  defineNuxtModule,
+  addPlugin,
+  addComponentsDir,
+  createResolver,
+  addImportsDir,
+  installModule,
+  addRouteMiddleware
+} from "@nuxt/kit";
+import defu from "defu";
+export default defineNuxtModule({
+  meta: {
+    name: "glorious",
+    configKey: "glorious"
+  },
+  // Default configuration options of the Nuxt module
+  defaults: {},
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.runtimeConfig.public.glorious = defu(nuxt.options.glorious, {
+      fetch: {
+        baseURL: "/",
+        credentials: "same-origin"
+      },
+      seo: {
+        suffix: "",
+        title: "",
+        description: ""
+      },
+      auth: {
+        cookie: {
+          name: "ga-token",
+          httpOnly: false
+        },
+        redirect: {
+          logout: "/login",
+          login: "/login"
+        },
+        strategy: {
+          provider: "",
+          //[laravel-passport]
+          endpoints: {
+            userInfo: {
+              url: "/",
+              method: "GET",
+              pick: ""
+            }
+          }
+        }
+      }
+    });
+    await installModule("@nuxtjs/tailwindcss", {
+      // module configuration
+      exposeConfig: true,
+      config: {
+        darkMode: "class",
+        content: {
+          files: [
+            resolver.resolve("./runtime/components/G/**/*.{vue,mjs,ts}"),
+            resolver.resolve("./runtime/*.{mjs,js,ts}")
+          ]
+        }
+      }
+    });
+    await installModule("@pinia/nuxt");
+    addImportsDir(resolver.resolve("runtime/composables"));
+    addImportsDir(resolver.resolve("runtime/stores"));
+    addImportsDir(resolver.resolve("runtime/middlewares"));
+    addComponentsDir({
+      path: resolver.resolve("runtime/components"),
+      global: true,
+      watch: false
+    });
+    nuxt.hook("nitro:config", async (nitro) => {
+      nitro.publicAssets.push({
+        dir: resolver.resolve("./runtime/assets")
+      });
+    });
+    addPlugin(resolver.resolve("./runtime/plugins/glorious-app-setting"));
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/InputComponent"),
+      mode: "client"
+    });
+    addRouteMiddleware({
+      name: "g-auth-strategy",
+      path: resolver.resolve("./runtime/middlewares/AuthStrategy"),
+      global: true
+    });
+    addRouteMiddleware({
+      name: "g-auth",
+      path: resolver.resolve("./runtime/middlewares/Auth")
+    });
+  }
+});

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.2-8",
+  "version": "1.2.3-0",
   "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",

package/dist/runtime/plugins/Drawer.mjs

@@ -1,35 +0,0 @@
-import { defineNuxtPlugin } from "#app";
-export default defineNuxtPlugin(() => {
-  const methods = {
-    addBlurBackground: (key) => {
-      const backgroundBlur = document.createElement("div");
-      backgroundBlur.classList.add("bg-blur-drawer");
-      const nuxt = document.getElementById("__nuxt");
-      nuxt.appendChild(backgroundBlur);
-      backgroundBlur.addEventListener("click", () => {
-        const componentId = document.getElementById(key);
-        componentId.classList.replace("open", "close");
-        backgroundBlur.remove();
-      });
-    },
-    drawer: {
-      provide: (key) => {
-        let drawer = document.getElementById(key);
-        if (drawer.classList.contains("close")) {
-          drawer.classList.remove("hidden");
-          drawer.classList.replace("close", "open");
-          methods.addBlurBackground(key);
-        } else {
-          drawer.classList.replace("open", "close");
-          const bgBlur = document.querySelector(".bg-blur-drawer");
-          bgBlur?.remove();
-        }
-      }
-    }
-  };
-  return {
-    provide: {
-      drawer: (key = "drawer") => methods.drawer.provide(key)
-    }
-  };
-});