nuxt-glorious 2.0.0-develop-32 → 2.0.0-develop-34

package/dist/module.d.mts

@@ -1,190 +1,11 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-type colors = 'orange' | 'blue' | 'gray' | 'red' | 'green';
-type sizes = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-
-interface ModuleOptions {
-    fetch?: {
-        baseURL?: string;
-        credentials?: 'same-origin' | 'include';
-    };
-    seo?: {
-        suffix?: string;
-        title?: string;
-        description?: string;
-    };
-    auth?: {
-        cookie?: {
-            name?: string;
-            httpOnly?: boolean;
-        };
-        redirect?: {
-            logout?: string;
-            login?: string;
-        };
-        strategy?: {
-            provider?: 'laravel-passport';
-            endpoints?: {
-                userInfo?: {
-                    url?: string;
-                    method?: 'GET' | 'POST' | 'PUT' | 'PATCH';
-                    pick?: string;
-                };
-            };
-        };
-    };
-    components: {
-        accordion: {
-            props: {
-                color?: string;
-            };
-        };
-        alert: {
-            props: {
-                color?: string;
-            };
-        };
-        avatar: {
-            props: {
-                size?: sizes;
-                rounded?: string;
-                alt?: string;
-            };
-        };
-        breadcrumb: {
-            props: {
-                divider?: string;
-            };
-        };
-        button: {
-            props: {
-                color?: colors;
-                size?: sizes;
-                disabled?: boolean;
-                loading?: boolean;
-                outline?: boolean;
-            };
-        };
-        checkbox: {
-            props: {
-                color?: colors;
-                size?: sizes;
-                disabled?: boolean;
-                checked?: boolean;
-            };
-        };
-        drawer: {
-            props: {
-                position?: 'left' | 'right';
-            };
-        };
-        file: {
-            props: {
-                color?: colors;
-                placeholder?: string;
-                title?: string;
-                text?: string;
-                size?: sizes;
-                required?: boolean;
-            };
-        };
-        icon: {
-            props: {
-                color?: colors;
-                size?: number;
-                stroke?: number;
-            };
-        };
-        input: {
-            props: {
-                color?: colors;
-                placeholder?: string;
-                title?: string;
-                displayTextKey?: string;
-                required?: boolean;
-                disable?: boolean;
-                loading?: boolean;
-                type?: string;
-                autocomplete?: string;
-                display?: 'price' | 'normal';
-                inputMode?: string;
-                mode?: 'normal' | 'tag';
-                tagLockOption?: boolean;
-            };
-        };
-        loading: {
-            props: {
-                color?: colors;
-                size?: number;
-                stroke?: number;
-            };
-        };
-        modal: {
-            props: {
-                colorBtn?: colors;
-                size?: sizes;
-            };
-        };
-        paginate: {
-            props: {
-                numberSuggestPage?: number;
-            };
-        };
-        radio: {
-            props: {
-                size?: sizes;
-                color?: colors;
-                checked?: boolean;
-                name?: string;
-            };
-        };
-        switch: {
-            props: {
-                color?: colors;
-                checked: boolean;
-            };
-        };
-        tab: {
-            props: {
-                color?: colors;
-            };
-        };
-        table: {
-            props: {
-                color?: colors;
-                loading?: boolean;
-                loadingColor?: colors;
-                emptyText: string;
-            };
-        };
-        textarea: {
-            props: {
-                color?: colors;
-                placeholder?: string;
-                title?: string;
-                required?: boolean;
-                disabled?: boolean;
-                rows?: number;
-            };
-        };
-        timeline: {
-            props: {
-                color?: colors;
-            };
-        };
-        select: {
-            props: {
-                color?: colors;
-                size?: sizes;
-                disabled?: false;
-                required?: false;
-                displayTextKey?: string;
-                keyOfValue?: string;
-            };
-        };
+interface moduleOptions {
+    components?: {
+        prefix?: string;
     };
 }
 
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const _default: _nuxt_schema.NuxtModule<moduleOptions, moduleOptions, false>;
 
 export { _default as default };

package/dist/module.d.ts

@@ -1,190 +1,11 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-type colors = 'orange' | 'blue' | 'gray' | 'red' | 'green';
-type sizes = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-
-interface ModuleOptions {
-    fetch?: {
-        baseURL?: string;
-        credentials?: 'same-origin' | 'include';
-    };
-    seo?: {
-        suffix?: string;
-        title?: string;
-        description?: string;
-    };
-    auth?: {
-        cookie?: {
-            name?: string;
-            httpOnly?: boolean;
-        };
-        redirect?: {
-            logout?: string;
-            login?: string;
-        };
-        strategy?: {
-            provider?: 'laravel-passport';
-            endpoints?: {
-                userInfo?: {
-                    url?: string;
-                    method?: 'GET' | 'POST' | 'PUT' | 'PATCH';
-                    pick?: string;
-                };
-            };
-        };
-    };
-    components: {
-        accordion: {
-            props: {
-                color?: string;
-            };
-        };
-        alert: {
-            props: {
-                color?: string;
-            };
-        };
-        avatar: {
-            props: {
-                size?: sizes;
-                rounded?: string;
-                alt?: string;
-            };
-        };
-        breadcrumb: {
-            props: {
-                divider?: string;
-            };
-        };
-        button: {
-            props: {
-                color?: colors;
-                size?: sizes;
-                disabled?: boolean;
-                loading?: boolean;
-                outline?: boolean;
-            };
-        };
-        checkbox: {
-            props: {
-                color?: colors;
-                size?: sizes;
-                disabled?: boolean;
-                checked?: boolean;
-            };
-        };
-        drawer: {
-            props: {
-                position?: 'left' | 'right';
-            };
-        };
-        file: {
-            props: {
-                color?: colors;
-                placeholder?: string;
-                title?: string;
-                text?: string;
-                size?: sizes;
-                required?: boolean;
-            };
-        };
-        icon: {
-            props: {
-                color?: colors;
-                size?: number;
-                stroke?: number;
-            };
-        };
-        input: {
-            props: {
-                color?: colors;
-                placeholder?: string;
-                title?: string;
-                displayTextKey?: string;
-                required?: boolean;
-                disable?: boolean;
-                loading?: boolean;
-                type?: string;
-                autocomplete?: string;
-                display?: 'price' | 'normal';
-                inputMode?: string;
-                mode?: 'normal' | 'tag';
-                tagLockOption?: boolean;
-            };
-        };
-        loading: {
-            props: {
-                color?: colors;
-                size?: number;
-                stroke?: number;
-            };
-        };
-        modal: {
-            props: {
-                colorBtn?: colors;
-                size?: sizes;
-            };
-        };
-        paginate: {
-            props: {
-                numberSuggestPage?: number;
-            };
-        };
-        radio: {
-            props: {
-                size?: sizes;
-                color?: colors;
-                checked?: boolean;
-                name?: string;
-            };
-        };
-        switch: {
-            props: {
-                color?: colors;
-                checked: boolean;
-            };
-        };
-        tab: {
-            props: {
-                color?: colors;
-            };
-        };
-        table: {
-            props: {
-                color?: colors;
-                loading?: boolean;
-                loadingColor?: colors;
-                emptyText: string;
-            };
-        };
-        textarea: {
-            props: {
-                color?: colors;
-                placeholder?: string;
-                title?: string;
-                required?: boolean;
-                disabled?: boolean;
-                rows?: number;
-            };
-        };
-        timeline: {
-            props: {
-                color?: colors;
-            };
-        };
-        select: {
-            props: {
-                color?: colors;
-                size?: sizes;
-                disabled?: false;
-                required?: false;
-                displayTextKey?: string;
-                keyOfValue?: string;
-            };
-        };
+interface moduleOptions {
+    components?: {
+        prefix?: string;
     };
 }
 
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const _default: _nuxt_schema.NuxtModule<moduleOptions, moduleOptions, false>;
 
 export { _default as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "2.0.0-develop-32"
+  "version": "2.0.0-develop-34"
 }

package/dist/module.mjs

@@ -46,11 +46,14 @@ const module = defineNuxtModule({
     addComponentsDir({
       path: resolver.resolve("runtime/components"),
       global: true,
+      prefix: options.components?.prefix || "G",
       watch: false
     });
     if (nuxt.options.builder === "@nuxt/vite-builder") {
       const plugin = await import('@tailwindcss/vite').then((r) => r.default);
       addVitePlugin(plugin());
+    } else {
+      nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
     nuxt.hook("nitro:config", async (nitro) => {
       nitro.publicAssets.push({

package/dist/runtime/components/Button.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { colorType, sizeType } from '~/src/types/props'
+
+interface buttonPropInterface {
+  color?: colorType
+  size?: sizeType
+  disabled?: boolean
+  raised?: boolean
+  rounded?: boolean
+  text?: boolean
+  outline?: boolean
+  loading?: boolean
+  ariaLabel?: string
+  to?: string
+  label?: string
+  icon?: string
+  iconColor?: string
+  iconPos?: 'right' | 'left'
+}
+
+const props: any = withDefaults(defineProps<buttonPropInterface>(), {
+  color: 'primary',
+  size: 'md',
+  disabled: false,
+  raised: false,
+  rounded: false,
+  outline: false,
+  loading: false,
+  ariaLabel: '',
+  label: '',
+  icon: '',
+  iconPos: 'right',
+  iconColor: '#fff',
+})
+</script>
+
+<template>
+  <div class="glorious-button">
+    <button
+      :class="[
+        `color-${props.color}`,
+        `size-${props.size}`,
+        `icon-${props.iconPos}`,
+        props.raised ? 'raised' : '',
+        props.rounded ? 'rounded' : '',
+        props.outline ? 'outline' : '',
+      ]"
+      :disabled="props.disabled"
+      :aria-label="props.ariaLabel"
+    >
+      <span v-if="!props.loading">{{ props.label }}</span>
+      <GLoading
+        v-else
+        :size="props.size"
+        :color="props.outline ? props.color : 'white'"
+      />
+      <GIcon
+        v-if="props.icon && !props.loading"
+        :name="props.icon"
+        :size="props.size"
+        :color="props.iconColor"
+      />
+    </button>
+  </div>
+</template>

package/dist/runtime/components/Checkbox.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { colorType, sizeType } from '~/src/types/props'
+
+interface checkboxPropInterface {
+  color?: colorType
+  size?: sizeType
+  checked?: boolean
+  label?: string
+  disabled?: boolean
+  name?: string
+  ariaLabel?: string
+}
+
+const props: any = withDefaults(defineProps<checkboxPropInterface>(), {
+  color: 'primary',
+  size: 'md',
+  checked: false,
+  name: 'checkbox',
+})
+
+const model = defineModel()
+</script>
+
+<template>
+  <label
+    class="glorious-checkbox"
+    :class="[
+      `color-${props.color}`,
+      `size-${props.size}`,
+      props.disabled ? 'disabled' : '',
+    ]"
+  >
+    <span>{{ props.label }}</span>
+    <label :class="[`color-${props.color}`, `size-${props.size}`]">
+      <input
+        type="checkbox"
+        :checked="props.checked"
+        :disabled="props.disabled"
+        v-model="model"
+        :aria-label="props.ariaLabel"
+        :name="props.name"
+      />
+      <div></div>
+    </label>
+  </label>
+</template>

package/dist/runtime/components/{G/ErrorText.vue → ErrorText.vue}

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-import { GloriousStore } from '../../stores/GloriousStore'
-import _props from '../props/ErrorText'
-
-const props = defineProps(_props)
+import { GloriousStore } from '../stores/GloriousStore'
+import _props from './props/ErrorText'
+interface errorTextPropInterface {
+  error?: string
+}
+const props: any = withDefaults(defineProps<errorTextPropInterface>(), {})
 const gs = GloriousStore()
 const error: any = props.error.split('|')
 const isAll = () => error.length === 1
@@ -11,7 +13,7 @@ const isAll = () => error.length === 1
   <div>
     <span
       v-if="gs.forms[error[0]]?.errors[error[1]] && !isAll()"
-      class="validation-error-text text-red-500 text-sm"
+      class="validation-error-text"
     >
       {{ gs.forms[error[0]].errors[error[1]][0] }}
     </span>

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

@@ -1,17 +1,17 @@
-<script lang="ts" setup>
-const props = defineProps({
-  text: {
-    required: true,
-    type: String,
-  },
-})
-</script>
-
-<template>
-  <div class="glorious-tooltip">
-    <div class="tooltip-slot">
-      <slot />
-    </div>
-    <div class="tooltip-content">{{ props.text }}</div>
-  </div>
-</template>
+<script lang="ts" setup>
+const props = defineProps({
+  text: {
+    required: true,
+    type: String,
+  },
+})
+</script>
+
+<template>
+  <div class="glorious-tooltip">
+    <div class="tooltip-slot">
+      <slot />
+    </div>
+    <div class="tooltip-content">{{ props.text }}</div>
+  </div>
+</template>

package/dist/runtime/components/{G/Icon.vue → Icon.vue}

@@ -1,12 +1,44 @@
 <script lang="ts" setup>
 import { ref, watch } from '#imports'
-import _props from '../props/Icon'
 
-const props = defineProps(_props)
+interface iconPropInterface {
+  name: String
+  color?: String
+  hoverColor?: String
+  size?: Number
+  strokeWidth?: Number
+}
+
+const props: any = withDefaults(defineProps<iconPropInterface>(), {
+  size: 20,
+  color: '#000',
+  strokeWidth: 3,
+})
+
 const isHover = ref(false)
 const icon = ref('')
+const computeSize = (size: number | string): number => {
+  let result: number = 0
+
+  switch (size) {
+    case 'sm':
+      result = 14
+      break
+    case 'md':
+      result = 23
+      break
+    case 'lg':
+      result = 24
+      break
+    default:
+      result = <number>size
+      break
+  }
+
+  return result
+}
 const computeProps = (icon: any) => {
-  const size = props.size
+  const size = computeSize(props.size)
   const color = props.color
   const strokeWidth = props.stroke
   const stroke = props.color
@@ -27,7 +59,7 @@ const changeColorIcon = (color: string) => {
     .replace(/stroke="(?!none)([^"]+)"/g, `stroke="${color}"`)
 }
 const mouseover = () => {
-  if (props.hoverColor === '') return
+  if (typeof props.hoverColor === 'undefined') return
 
   if (!isHover.value) {
     const color = props.hoverColor
@@ -54,17 +86,15 @@ const getIcon = async () => {
       const icon: any = await iconsImport[`/assets/icons/${props.name}.svg`]()
       rawIcon = icon.default
     } else {
-      const staticAssets = import.meta.glob('../../assets/icons/**/**.svg', {
+      const staticAssets = import.meta.glob('../assets/icons/**/**.svg', {
         query: '?raw',
         eager: false,
       })
-
       const icon: any = await staticAssets[
-        `../../assets/icons/${props.name}.svg`
+        `../assets/icons/${props.name}.svg`
       ]()
       rawIcon = icon.default
     }
-
     icon.value = computeProps(rawIcon)
   } catch (e) {
     console.error(
@@ -86,7 +116,7 @@ watch(
 
 <template>
   <div
-    class="w-max h-max"
+    class="w-max h-max g-icon"
     @mouseover="mouseover"
     @mouseleave="mouseleave"
     v-html="icon"