nuxt-glorious 2.0.0-develop-20 → 2.0.0-develop-22

package/dist/module.d.mts

@@ -1,5 +1,8 @@
 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;
@@ -20,7 +23,7 @@ interface ModuleOptions {
             login?: string;
         };
         strategy?: {
-            provider?: 'laravel-passport' | '';
+            provider?: 'laravel-passport';
             endpoints?: {
                 userInfo?: {
                     url?: string;
@@ -36,14 +39,142 @@ interface ModuleOptions {
                 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?: string;
-                size?: 'md';
+                color?: colors;
+                size?: sizes;
                 disabled?: false;
                 required?: false;
-                displayTextKey?: 'text';
-                keyOfValue?: 'value';
+                displayTextKey?: string;
+                keyOfValue?: string;
             };
         };
     };

package/dist/module.d.ts

@@ -1,5 +1,8 @@
 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;
@@ -20,7 +23,7 @@ interface ModuleOptions {
             login?: string;
         };
         strategy?: {
-            provider?: 'laravel-passport' | '';
+            provider?: 'laravel-passport';
             endpoints?: {
                 userInfo?: {
                     url?: string;
@@ -36,14 +39,142 @@ interface ModuleOptions {
                 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?: string;
-                size?: 'md';
+                color?: colors;
+                size?: sizes;
                 disabled?: false;
                 required?: false;
-                displayTextKey?: 'text';
-                keyOfValue?: 'value';
+                displayTextKey?: string;
+                keyOfValue?: string;
             };
         };
     };

package/dist/module.json

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

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

@@ -8,7 +8,10 @@ const props = defineProps(_props)
 <template>
   <div
     class="glorious-alert"
-    :class="[`color-${getAttribute(props.color, 'alert', 'color')}`]"
+    :class="[
+      `color-${getAttribute(props.color, 'alert', 'color')}`,
+      getAttribute(props.color, 'alert', 'color'),
+    ]"
   >
     <slot />
   </div>

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

@@ -15,7 +15,7 @@ const props: any = defineProps(_props)
   >
     <nuxt-img
       :src="props.src"
-      :alt="getAttribute(props.rounded, 'avatar', 'rounded')"
+      :alt="getAttribute(props.rounded, 'avatar', 'alt')"
     />
   </div>
 </template>

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

@@ -45,5 +45,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/dropdown.scss" />

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

@@ -1,16 +1,15 @@
 <script lang="ts" setup>
 import { ref, watch } from '#imports'
 import _props from '../props/Icon'
-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 size = props.size
+  const color = props.color
+  const strokeWidth = props.stroke
+  const stroke = props.color
 
   return icon
     .replace(
@@ -31,7 +30,7 @@ const mouseover = () => {
   if (props.hoverColor === '') return
 
   if (!isHover.value) {
-    const color = getAttribute(props.hoverColor, 'icon', 'hoverColor')
+    const color = props.hoverColor
 
     changeColorIcon(color)
   }
@@ -40,7 +39,7 @@ const mouseover = () => {
 }
 const mouseleave = () => {
   isHover.value = false
-  const color = getAttribute(props.color, 'icon', 'color')
+  const color = props.color
   changeColorIcon(color)
 }
 const getIcon = async () => {

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { watch, onMounted } from '#imports'
+import { watch } from '#imports'
 import { createBlurDom, removeBlurDom, getAttribute } from '../helper'
 import _props from '../props/Modal'
 

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

@@ -8,7 +8,7 @@ const modelValue = defineModel()
 const emits = defineEmits(['change'])
 
 const emit = (item: any) => {
-  if (getAttribute(props.currentPage, 'paginate', 'currentPage') !== item) {
+  if (props.currentPage !== item) {
     modelValue.value = item
     emits('change', { page: item })
   }
@@ -19,56 +19,41 @@ const listPage = ref<Array<Number>>([])
 const computeListPage = () => {
   listPage.value = []
   let firstPage =
-    getAttribute(props.currentPage, 'paginate', 'currentPage') -
+    props.currentPage -
     getAttribute(props.numberSuggestPage, 'paginate', 'numberSuggestPage')
   const endPage =
-    getAttribute(props.currentPage, 'paginate', 'currentPage') +
+    props.currentPage +
     (getAttribute(props.numberSuggestPage, 'paginate', 'numberSuggestPage') + 1)
 
   while (firstPage <= endPage) {
-    if (
-      firstPage > 0 &&
-      firstPage <= getAttribute(props.lastPage, 'paginate', 'lastPage')
-    )
+    if (firstPage > 0 && firstPage <= props.lastPage)
       listPage.value.push(firstPage)
     firstPage++
   }
 }
 computeListPage()
 watch(
-  () => getAttribute(props.currentPage, 'paginate', 'currentPage'),
+  () => props.currentPage,
   () => computeListPage()
 )
 
 const arrowPrevious = () => {
-  if (getAttribute(props.currentPage, 'paginate', 'currentPage') !== 1)
-    emit(getAttribute(props.currentPage, 'paginate', 'currentPage') - 1)
+  if (props.currentPage !== 1) emit(props.currentPage - 1)
 }
 const arrowNext = () => {
-  if (
-    getAttribute(props.currentPage, 'paginate', 'currentPage') !==
-    getAttribute(props.lastPage, 'paginate', 'lastPage')
-  )
-    emit(getAttribute(props.currentPage, 'paginate', 'currentPage') + 1)
+  if (props.currentPage !== props.lastPage) emit(props.currentPage + 1)
 }
 </script>
 
 <template>
   <div
-    v-if="
-      getAttribute(props.currentPage, 'paginate', 'currentPage') &&
-      getAttribute(props.lastPage, 'paginate', 'lastPage') !== 1
-    "
+    v-if="props.currentPage && props.lastPage !== 1"
     class="w-max glorious-paginate"
     :class="[`color-${getAttribute(props.color, 'paginate', 'color')}`]"
   >
     <div>
       <GIcon
-        :color="
-          getAttribute(props.currentPage, 'paginate', 'currentPage') !== 1
-            ? '#000'
-            : '#cbd5e1'
-        "
+        :color="props.currentPage !== 1 ? '#000' : '#cbd5e1'"
         class="ml-2 cursor-pointer"
         name="glorious-arrow"
         :size="15"
@@ -79,23 +64,14 @@ const arrowNext = () => {
         v-for="(item, index) in listPage"
         :key="index"
         class="w-6 h-6 rounded-lg flex items-center justify-center paginate font-bold"
-        :class="[
-          getAttribute(props.currentPage, 'paginate', 'currentPage') === item
-            ? 'active'
-            : 'cursor-pointer',
-        ]"
+        :class="[props.currentPage === item ? 'active' : 'cursor-pointer']"
         @click="emit(item)"
       >
         {{ item }}
       </div>
 
       <GIcon
-        :color="
-          getAttribute(props.currentPage, 'paginate', 'currentPage') !==
-          getAttribute(props.lastPage, 'paginate', 'lastPage')
-            ? '#000'
-            : '#cbd5e1'
-        "
+        :color="props.currentPage !== props.lastPage ? '#000' : '#cbd5e1'"
         name="glorious-arrow"
         class="mr-2 cursor-pointer"
         :size="15"

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _props from '../props/Switch'
+import { getAttribute } from '../helper'
 
 const props = defineProps(_props)
 const modelValue = defineModel()
@@ -13,7 +14,7 @@ const input = (e: Event) => {
   <div>
     <label
       class="switch"
-      :class="[`color-${props.color}`]"
+      :class="[`color-${getAttribute(props.color, 'switch', 'color')}`]"
     >
       <input
         type="checkbox"

package/dist/runtime/components/helper.mjs

@@ -26,10 +26,6 @@ export const hasValidationError = (errorProp) => {
   return condition;
 };
 export const getAttribute = (propsValue, componentName, prop) => {
-  let mount = propsValue;
-  if (import.meta.client) {
-    const config = useRuntimeConfig();
-    mount = config.public?.glorious?.components?.[componentName]?.props?.[prop] || propsValue;
-  }
-  return mount;
+  const config = useRuntimeConfig();
+  return config.public?.glorious?.components?.[componentName]?.props?.[prop] || propsValue;
 };

package/dist/runtime/components/props/Button.mjs

@@ -5,7 +5,8 @@ import {
   loading,
   loadingColor,
   to,
-  ariaLabel
+  ariaLabel,
+  outline
 } from "./common/index.mjs";
 export default {
   ...color(),
@@ -15,9 +16,5 @@ export default {
   ...loadingColor,
   ...to,
   ...ariaLabel,
-  outline: {
-    required: false,
-    default: false,
-    type: Boolean
-  }
+  ...outline()
 };

package/dist/runtime/components/props/Icon.mjs

@@ -1,11 +1,8 @@
-import { name, hashColor, intSize, stroke } from "./common/index.mjs";
+import { name, hashColor, intSize, stroke, hoverColor } from "./common/index.mjs";
 export default {
   ...name,
   ...hashColor,
   ...intSize(),
   ...stroke(),
-  hoverColor: {
-    required: false,
-    default: ""
-  }
+  ...hoverColor()
 };

package/dist/runtime/components/props/Input.d.ts

@@ -81,6 +81,11 @@ declare const _default: {
         default: string;
         type: StringConstructor;
     };
+    keyOfValue: {
+        required: boolean;
+        default: string;
+        type: StringConstructor;
+    };
     required: {
         required: boolean;
         default: boolean;

package/dist/runtime/components/props/Input.mjs

@@ -9,6 +9,7 @@ import {
   options,
   required,
   displayTextKey,
+  keyOfValue,
   loading
 } from "./common/index.mjs";
 export default {
@@ -18,6 +19,7 @@ export default {
   ...size(),
   ...displayTextKey(),
   ...required(),
+  ...keyOfValue(),
   ...error,
   ...icon,
   ...disabled,

package/dist/runtime/components/props/Modal.d.ts

@@ -14,11 +14,6 @@ declare const _default: {
         default: string;
         type: StringConstructor;
     };
-    rtl: {
-        required: boolean;
-        default: string;
-        type: () => "rtl" | "ltr";
-    };
     blur: {
         required: boolean;
         default: boolean;

package/dist/runtime/components/props/Modal.mjs

@@ -17,11 +17,6 @@ export default {
     default: "",
     type: String
   },
-  rtl: {
-    required: false,
-    default: "rtl",
-    type: String
-  },
   blur: {
     required: false,
     default: true,

package/dist/runtime/components/props/Textarea.mjs

@@ -1,11 +1,4 @@
-import {
-  color,
-  placeholder,
-  title,
-  error,
-  disabled,
-  required
-} from "./common/index.mjs";
+import { color, placeholder, title, error, disabled, required } from "./common/index.mjs";
 export default {
   ...color(),
   ...placeholder(),

package/dist/runtime/components/props/common/index.d.ts

@@ -199,3 +199,16 @@ export declare const src: () => {
         type: StringConstructor;
     };
 };
+export declare const hoverColor: () => {
+    hoverColor: {
+        required: boolean;
+        default: string;
+    };
+};
+export declare const outline: () => {
+    outline: {
+        required: boolean;
+        default: boolean;
+        type: BooleanConstructor;
+    };
+};

package/dist/runtime/components/props/common/index.mjs

@@ -185,3 +185,16 @@ export const src = () => ({
     type: String
   }
 });
+export const hoverColor = () => ({
+  hoverColor: {
+    required: false,
+    default: ""
+  }
+});
+export const outline = () => ({
+  outline: {
+    required: false,
+    default: false,
+    type: Boolean
+  }
+});

package/dist/runtime/style/style.css

@@ -103,7 +103,7 @@ button:focus-visible {
 }
 
 .glorious-button {
-  @apply rounded-md text-white px-3 relative;
+  @apply rounded-md text-white px-3 relative cursor-pointer;
 }
 .glorious-button div > loading {
   @apply flex justify-center items-center;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-develop-20",
+  "version": "2.0.0-develop-22",
   "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",