nuxt-glorious 1.3.3 → 1.9.0-dev

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "1.3.3"
+  "version": "1.9.0-dev"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, installModule, addImportsDir, addComponentsDir, addPlugin, addRouteMiddleware } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addImportsDir, addComponentsDir, addVitePlugin, addPlugin, addRouteMiddleware } from '@nuxt/kit';
 import defu from 'defu';
 
 const defaultModuleOption = {
@@ -23,13 +23,6 @@ const defaultModuleOption = {
     strategy: {
       provider: ""
     }
-  },
-  components: {
-    alert: {
-      props: {
-        color: "green"
-      }
-    }
   }
 };
 
@@ -46,35 +39,24 @@ const module = defineNuxtModule({
       nuxt.options.glorious,
       defaultModuleOption
     );
-    await installModule("@nuxtjs/tailwindcss", {
-      // module configuration
-      exposeConfig: true,
-      config: {
-        darkMode: "class",
-        content: {
-          files: [
-            resolver.resolve("./runtime/components/**/*.{vue,mjs,ts}"),
-            resolver.resolve("./runtime/*.{mjs,js,ts}")
-          ]
-        }
-      }
-    });
     await installModule("@pinia/nuxt");
     await installModule("@nuxt/image");
     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
     });
+    if (nuxt.options.builder === "@nuxt/vite-builder") {
+      const plugin = await import('@tailwindcss/vite').then((r) => r.default);
+      addVitePlugin(plugin());
+    }
     nuxt.hook("nitro:config", async (nitro) => {
       nitro.publicAssets.push({
         dir: resolver.resolve("./runtime/assets")
       });
     });
-    addPlugin(resolver.resolve("./runtime/plugins/glorious-app-setting"));
     addPlugin(resolver.resolve("./runtime/plugins/InputComponent"));
     addRouteMiddleware({
       name: "g-auth-strategy",

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _props from './../props/Alert'
+import { getAttribute } from '../helper'
 
 const props = defineProps(_props)
 </script>
@@ -7,10 +8,8 @@ const props = defineProps(_props)
 <template>
   <div
     class="glorious-alert"
-    :class="[`color-${props.color}`]"
+    :class="[`color-${getAttribute(props.color, 'alert', 'color')}`]"
   >
     <slot />
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/alert.scss" />

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _props from '../props/Avatar'
+import { getAttribute } from '../helper'
 
 const props: any = defineProps(_props)
 </script>
@@ -7,10 +8,14 @@ const props: any = defineProps(_props)
 <template>
   <div
     class="glorious-avatar"
-    :class="[`size-${props.size}`, `rounded-${props.rounded}`]"
+    :class="[
+      `size-${getAttribute(props.size, 'avatar', 'size')}`,
+      `rounded-${getAttribute(props.rounded, 'avatar', 'rounded')}`,
+    ]"
   >
-    <nuxt-img :src="props.src" />
+    <nuxt-img
+      :src="props.src"
+      :alt="getAttribute(props.rounded, 'avatar', 'rounded')"
+    />
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/avatar.scss" />

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _props from '../props/Breadcrumb'
+import { getAttribute } from '../helper'
 
 const props: any = defineProps(_props)
 </script>
@@ -29,9 +30,9 @@ const props: any = defineProps(_props)
       >
         {{ item.text }}
       </span>
-      <span v-if="index + 1 !== props.items.length">{{ props.divider }}</span>
+      <span v-if="index + 1 !== props.items.length">
+        {{ getAttribute(props.divider, 'breadcrumb', 'divider') }}
+      </span>
     </div>
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/breadcrumb.scss" />

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _props from '../props/Button'
+import { getAttribute } from '../helper'
 
 const props: any = defineProps(_props)
 </script>
@@ -10,14 +11,14 @@ const props: any = defineProps(_props)
     :aria-label="props.ariaLabel"
     :class="[
       `glorious-button`,
-      `button-color-${props.color}`,
-      `size-${props.size}`,
-      props.outline ? 'outline' : '',
+      `button-color-${getAttribute(props.color, 'button', 'color')}`,
+      `size-${getAttribute(props.size, 'button', 'size')}`,
+      getAttribute(props.outline, 'button', 'outline') ? 'outline' : '',
     ]"
-    :disabled="props.disabled"
+    :disabled="getAttribute(props.disabled, 'button', 'disable')"
   >
     <div
-      v-if="props.loading"
+      v-if="getAttribute(props.loading, 'button', 'loading')"
       class="loading flex justify-center"
     >
       <GLoading />
@@ -29,14 +30,12 @@ const props: any = defineProps(_props)
     :to="props.to"
     :class="[
       `glorious-button`,
-      `button-color-${props.color}`,
-      `size-${props.size}`,
-      props.outline ? 'outline' : '',
+      `button-color-${getAttribute(props.color, 'button', 'color')}`,
+      `size-${getAttribute(props.size, 'button', 'size')}`,
+      getAttribute(props.outline, 'button', 'outline') ? 'outline' : '',
     ]"
-    :disabled="props.disabled"
+    :disabled="getAttribute(props.disabled, 'button', 'disable')"
   >
     <slot />
   </NuxtLink>
 </template>
-
-<style lang="scss" src="../../style/components/button.scss" />

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _props from '../props/CheckBox'
+import { getAttribute } from '../helper'
 
 const props: any = defineProps(_props)
 const model = defineModel()
@@ -11,16 +12,17 @@ model.value = props.checked
 <template>
   <label
     class="glorious-checkbox"
-    :class="[`color-${props.color}`, `size-${props.size}`]"
+    :class="[
+      `color-${getAttribute(props.color, 'checkbox', 'color')}`,
+      `size-${getAttribute(props.size, 'checkbox', 'size')}`,
+    ]"
   >
     <input
       type="checkbox"
-      :checked="props.checked"
-      :disabled="props.disabled"
+      :checked="getAttribute(props.checked, 'checkbox', 'checked')"
+      :disabled="getAttribute(props.disabled, 'checkbox', 'disable')"
       @input="inputFunction($event)"
     />
     <div></div>
   </label>
 </template>
-
-<style lang="scss" src="../../style/components/checkbox.scss" />

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { watch } from '#imports'
 import _props from '../props/Drawer'
+import { getAttribute } from '../helper'
 import { createBlurDom, removeBlurDom } from '../helper'
 
 const props = defineProps(_props)
@@ -14,9 +15,13 @@ watch(
   }
 )
 </script>
+
 <template>
   <div
-    :class="[props.position, modelValue ? 'open' : 'close']"
+    :class="[
+      getAttribute(props.position, 'drawer', 'position'),
+      modelValue ? 'open' : 'close',
+    ]"
     class="glorious-drawer close hidden"
   >
     <div class="w-full">
@@ -24,5 +29,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/drawer.scss" />

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _props from '../props/File'
+import { getAttribute } from '../helper'
 
 const props: any = defineProps(_props)
 const modelValue = defineModel()
@@ -22,30 +23,34 @@ const deleteFile = (event: any) => {
       v-if="props.title !== ''"
       class="glorious-title text-sm font-medium text-gray-500"
     >
-      {{ props.title }}
+      {{ getAttribute(props.title, 'file', 'title') }}
       <span
-        v-if="props.required"
+        v-if="getAttribute(props.required, 'file', 'required')"
         class="text-red-500"
       >
         *
       </span>
     </span>
     <label
-      :class="[`glorious-file-${props.color}`]"
+      :class="[`glorious-file-${getAttribute(props.color, 'file', 'color')}`]"
       class="flex items-center gap-3 text-gray-500 bg-white"
     >
       <div
         class="placeholder"
-        :class="[`size-${props.size}`]"
+        :class="[`size-${getAttribute(props.size, 'file', 'size')}`]"
       >
-        <span>{{ props.placeholder }}</span>
+        <span>{{
+          getAttribute(props.placeholder, 'file', 'placeholder')
+        }}</span>
       </div>
       <input
         type="file"
         class="hidden"
         @change="changeInput($event)"
       />
-      <span class="text-xs">{{ props.text }}</span>
+      <span class="text-xs">{{
+        getAttribute(props.text, 'file', 'text')
+      }}</span>
       <GIcon
         name="glorious-x"
         color="#ff0000"
@@ -55,5 +60,3 @@ const deleteFile = (event: any) => {
     <GErrorText :error="props.error" />
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/file.scss" />

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

@@ -1,82 +1,46 @@
 <script lang="ts" setup>
 import { ref, watch } from '#imports'
 import _props from '../props/Icon'
-const props = defineProps(_props)
+import { getAttribute } from '../helper'
 
+const props = defineProps(_props)
+const isHover = ref(false)
 const icon = ref('')
+const computeProps = (icon: any) => {
+  const size = getAttribute(props.size, 'icon', 'size')
+  const color = getAttribute(props.color, 'icon', 'color')
+  const strokeWidth = getAttribute(props.stroke, 'icon', 'stroke')
+  const stroke = getAttribute(props.color, 'icon', 'color')
 
-const methods = {
-  computeProps: (icon: any) => {
-    //color
-    icon = icon.replaceAll('\n', ' ')
-    //stroke
-    icon = icon
-      .split(' ')
-      .map((item: any) =>
-        item.includes('stroke="') && typeof props.color !== 'undefined'
-          ? 'stroke="' + props.color + '"'
-          : item
-      )
-      .join(' ')
-
-    //fill
-    if (typeof props.color !== 'undefined') {
-      icon = icon
-        .split(' ')
-        .map((item: any) => {
-          if (!item.includes('fill="none"')) {
-            if (item.includes('fill="') && !item.includes('"/>'))
-              return `fill="${props.color}"`
-            else if (item.includes('fill="') && item.includes('"/>'))
-              return `fill="${props.color}"/>`
-            else return item
-          } else return item
-        })
-        .join(' ')
-    }
-
-    //size
-    icon = icon.replaceAll('\n', ' ')
-
-    //width
-    icon = icon
-      .split(' ')
-      .map((item: any) =>
-        item.includes('width="') &&
-        !item.includes('stroke-width') &&
-        typeof props.size !== 'undefined'
-          ? 'width="' + props.size + '"'
-          : item
-      )
-      .join(' ')
+  return icon
+    .replace(/width="(\d+)"/g, `width="${size}"`)
+    .replace(/height="(\d+)"/g, `height="${size}"`)
+    .replace(/fill="(?!none)([^"]+)"/g, `fill="${color}"`)
+    .replace(/stroke="(?!none)([^"]+)"/g, `stroke="${stroke}"`)
+    .replace(/stroke-width="[^"]*"/g, `stroke-width="${strokeWidth}"`)
+}
+const changeColorIcon = (color: string) => {
+  icon.value = icon.value
+    .replace(/fill="(?!none)([^"]+)"/g, `fill="${color}"`)
+    .replace(/stroke="(?!none)([^"]+)"/g, `stroke="${color}"`)
+}
+const mouseover = () => {
+  if (props.hoverColor === '') return
 
-    icon = icon
-      .split(' ')
-      .map((item: any) =>
-        item.includes('height="') && typeof props.size !== 'undefined'
-          ? 'height="' + props.size + '"'
-          : item
-      )
-      .join(' ')
+  if (!isHover.value) {
+    const color = getAttribute(props.hoverColor, 'icon', 'hoverColor')
 
-    //stroke
-    if (props.stroke !== null) {
-      icon = icon.replaceAll('\n', ' ')
-      icon = icon
-        .split(' ')
-        .map((item: any) =>
-          item.includes('stroke-width') && typeof props.stroke !== 'undefined'
-            ? 'stroke-width="' + props.stroke + '"'
-            : item
-        )
-        .join(' ')
-    }
+    changeColorIcon(color)
+  }
 
-    return icon
-  },
+  isHover.value = true
 }
-
-async function getIcon() {
+const mouseleave = () => {
+  isHover.value = false
+  const color = getAttribute(props.color, 'icon', 'color')
+  changeColorIcon(color)
+}
+const getIcon = async () => {
   try {
     const iconsImport = import.meta.glob('assets/icons/**/**.svg', {
       query: '?raw',
@@ -99,7 +63,7 @@ async function getIcon() {
       rawIcon = icon.default
     }
 
-    icon.value = methods.computeProps(rawIcon)
+    icon.value = computeProps(rawIcon)
   } catch (e) {
     console.error(
       `glorious error -> Icon '${props.name}' doesn't exist in 'assets/icons'`
@@ -117,9 +81,12 @@ watch(
   }
 )
 </script>
+
 <template>
   <div
     class="w-max h-max"
+    @mouseover="mouseover"
+    @mouseleave="mouseleave"
     v-html="icon"
   />
 </template>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch, useGloriousCore } from '#imports'
-import { hasValidationError } from '../helper'
+import { hasValidationError, getAttribute } from '../helper'
 import _props from '../props/Input'
 
 const props: any = defineProps(_props)
@@ -12,9 +12,9 @@ const inputValue: any = ref(null)
 watch(
   () => inputValue.value,
   () => {
-    if (props.mode === 'tag') return
+    if (getAttribute(props.mode, 'icon', 'mode') === 'tag') return
 
-    switch (props.display) {
+    switch (getAttribute(props.display, 'icon', 'display')) {
       case 'price':
         inputValue.value = numbersWithSeparateSamePrice(inputValue.value)
         modelValue.value = inputValue.value.toString().replaceAll(',', '')
@@ -57,11 +57,11 @@ const computeIconSize = computed(() => {
 const tags: any = ref([])
 
 const addTag = (event: any) => {
-  if (props.tagLockOption) return
+  if (getAttribute(props.tagLockOption, 'icon', 'tagLockOption')) return
 
   if (tags.value.length === 0) tags.value = []
 
-  if (props.mode !== 'tag') return
+  if (getAttribute(props.mode, 'icon', 'mode') !== 'tag') return
   const value: any = event.target.value
   tags.value.push(value)
   modelValue.value = tags.value
@@ -94,7 +94,7 @@ const removeTag = (tag: string) => {
 
 // -------------------------------------- init value
 const initValue = () => {
-  if (props.mode === 'tag') {
+  if (getAttribute(props.mode, 'icon', 'mode') === 'tag') {
     tags.value = modelValue.value
     return
   }
@@ -107,10 +107,10 @@ watch(
   () => initValue()
 )
 
-const typeInput = ref(props.type)
+const typeInput = ref(getAttribute(props.type, 'icon', 'type'))
 
 const inputClicked = (event: any) => {
-  if (props.mode === 'tag' && props.options) {
+  if (getAttribute(props.mode, 'icon', 'mode') === 'tag' && props.options) {
     const gio = document.querySelectorAll('.glorious-input-options')
     gio.forEach((element: any) => element.classList.add('hidden'))
 
@@ -127,9 +127,9 @@ const inputClicked = (event: any) => {
 <template>
   <div class="flex flex-col">
     <span class="glorious-title text-sm font-medium text-gray-500">
-      {{ props.title }}
+      {{ getAttribute(props.title, 'icon', 'title') }}
       <span
-        v-if="props.required"
+        v-if="getAttribute(props.required, 'icon', 'required')"
         class="text-red-500"
       >
         *
@@ -146,30 +146,40 @@ const inputClicked = (event: any) => {
       <div class="relative">
         <input
           v-model="inputValue"
-          :inputmode="props.inputMode"
-          :autocomplete="props.autocomplete"
+          :inputmode="getAttribute(props.inputMode, 'icon', 'inputMode')"
+          :autocomplete="
+            getAttribute(props.autocomplete, 'icon', 'autocomplete')
+          "
           class="w-full glorious-input-field"
           :class="[
             `size-${props.size}`,
-            `glorious-input-${props.color}`,
-            props.type === 'password' ? 'pl-[30px] pr-3' : 'px-3',
-            `mode-${props.mode}`,
+            `glorious-input-${getAttribute(props.color, 'icon', 'color')}`,
+            getAttribute(props.type, 'icon', 'type') === 'password'
+              ? 'pl-[30px] pr-3'
+              : 'px-3',
+            `mode-${getAttribute(props.mode, 'icon', 'mode')}`,
           ]"
-          :placeholder="props.placeholder"
-          :disabled="props.disabled"
+          :placeholder="getAttribute(props.placeholder, 'icon', 'placeholder')"
+          :disabled="getAttribute(props.disable, 'icon', 'disable')"
           :type="typeInput"
           @keyup.enter="addTag($event)"
           @click="inputClicked($event)"
         />
         <GIcon
-          v-if="props.type === 'password' && typeInput === 'password'"
+          v-if="
+            getAttribute(props.type, 'icon', 'type') === 'password' &&
+            typeInput === 'password'
+          "
           class="absolute left-0 top-0 bottom-0 my-auto ml-1 cursor-pointer"
           :size="23"
           name="glorious-eye-fill"
           @click="typeInput = 'text'"
         ></GIcon>
         <GIcon
-          v-if="props.type === 'password' && typeInput === 'text'"
+          v-if="
+            getAttribute(props.type, 'icon', 'type') === 'password' &&
+            typeInput === 'text'
+          "
           class="absolute left-0 top-0 bottom-0 my-auto ml-1 cursor-pointer"
           :size="23"
           name="glorious-eye-off-fill"
@@ -182,7 +192,7 @@ const inputClicked = (event: any) => {
           :class="[`size-${props.size}`]"
         >
           <div
-            v-if="props.loading"
+            v-if="getAttribute(props.loading, 'icon', 'loading')"
             class="flex justify-center"
           >
             <GLoading color="green" />
@@ -193,7 +203,11 @@ const inputClicked = (event: any) => {
               :key="index"
               @click="addTagViaOption(option, $event)"
             >
-              {{ option[props.displayTextKey] }}
+              {{
+                option[
+                  getAttribute(props.displayTextKey, 'icon', 'displayTextKey')
+                ]
+              }}
             </div>
           </div>
         </div>
@@ -206,7 +220,13 @@ const inputClicked = (event: any) => {
           v-for="(item, index) in tags"
           :key="index"
         >
-          {{ typeof item === 'object' ? item[props.displayTextKey] : item }}
+          {{
+            typeof item === 'object'
+              ? item[
+                  getAttribute(props.displayTextKey, 'icon', 'displayTextKey')
+                ]
+              : item
+          }}
           <GIcon
             name="glorious-x"
             :size="10"
@@ -222,7 +242,7 @@ const inputClicked = (event: any) => {
         :size="computeIconSize"
       />
       <div
-        v-if="props.loadingOptions"
+        v-if="getAttribute(props.loading, 'icon', 'loading')"
         class="absolute top-1 bottom-0 my-auto left-1"
       >
         <GLoading color="green" />
@@ -231,5 +251,3 @@ const inputClicked = (event: any) => {
     <GErrorText :error="props.error" />
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/input.scss" />

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import _props from '../props/Loading'
+import { getAttribute } from '../helper'
+
 const props: any = defineProps(_props)
 </script>
 
@@ -8,11 +10,13 @@ const props: any = defineProps(_props)
     <div
       class="glorious-loading"
       :style="{
-        width: `${props.size}px`,
-        border: `${props.stroke}px solid ${props.color}`,
+        width: `${getAttribute(props.size, 'icon', 'size')}px`,
+        border: `${getAttribute(
+          props.stroke,
+          'icon',
+          'stroke'
+        )}px solid ${getAttribute(props.color, 'icon', 'color')}`,
       }"
     />
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/loading.scss" />

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { watch } from '#imports'
-import { createBlurDom, removeBlurDom } from '../helper'
+import { createBlurDom, removeBlurDom, getAttribute } from '../helper'
 import _props from '../props/Modal'
 
 const props = defineProps(_props)
@@ -31,7 +31,10 @@ watch(
 <template>
   <div
     class="glorious-scaffold-modal animation"
-    :class="[modelValue ? 'open' : 'close', `size-${props.size}`]"
+    :class="[
+      modelValue ? 'open' : 'close',
+      `size-${getAttribute(props.size, 'icon', 'size')}`,
+    ]"
   >
     <!-- header -->
     <div
@@ -68,14 +71,14 @@ watch(
       class="glorious-scaffold-modal-footer"
     >
       <GButton
-        :color="props.colorBtn"
+        :color="getAttribute(props.colorBtn, 'icon', 'colorBtn')"
         :loading="props.okBtnLoading"
         @click="emits('ok')"
       >
         {{ props.okBtn }}
       </GButton>
       <GButton
-        :color="props.colorBtn"
+        :color="getAttribute(props.colorBtn, 'icon', 'colorBtn')"
         v-show="props.closeBtn !== ''"
         outline
         @click="modelValue = false"
@@ -86,5 +89,3 @@ watch(
     <!-- end footer -->
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/modal.scss" />