nuxt-glorious 1.3.3 → 1.9.0-dev

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

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { watch, ref } from '#imports'
 import _props from '../props/Paginate'
+import { getAttribute } from '../helper'
 
 const props = defineProps(_props)
 const modelValue = defineModel()
 const emits = defineEmits(['change'])
 
 const emit = (item: any) => {
-  if (props.currentPage !== item) {
+  if (getAttribute(props.currentPage, 'paginate', 'currentPage') !== item) {
     modelValue.value = item
     emits('change', { page: item })
   }
@@ -17,37 +18,57 @@ const listPage = ref<Array<Number>>([])
 
 const computeListPage = () => {
   listPage.value = []
-  let firstPage = props.currentPage - props.numberSuggestPage
-  const endPage = props.currentPage + (props.numberSuggestPage + 1)
+  let firstPage =
+    getAttribute(props.currentPage, 'paginate', 'currentPage') -
+    getAttribute(props.numberSuggestPage, 'paginate', 'numberSuggestPage')
+  const endPage =
+    getAttribute(props.currentPage, 'paginate', 'currentPage') +
+    (getAttribute(props.numberSuggestPage, 'paginate', 'numberSuggestPage') + 1)
 
   while (firstPage <= endPage) {
-    if (firstPage > 0 && firstPage <= props.lastPage)
+    if (
+      firstPage > 0 &&
+      firstPage <= getAttribute(props.lastPage, 'paginate', 'lastPage')
+    )
       listPage.value.push(firstPage)
     firstPage++
   }
 }
 computeListPage()
 watch(
-  () => props.currentPage,
+  () => getAttribute(props.currentPage, 'paginate', 'currentPage'),
   () => computeListPage()
 )
 
 const arrowPrevious = () => {
-  if (props.currentPage !== 1) emit(props.currentPage - 1)
+  if (getAttribute(props.currentPage, 'paginate', 'currentPage') !== 1)
+    emit(getAttribute(props.currentPage, 'paginate', 'currentPage') - 1)
 }
 const arrowNext = () => {
-  if (props.currentPage !== props.lastPage) emit(props.currentPage + 1)
+  if (
+    getAttribute(props.currentPage, 'paginate', 'currentPage') !==
+    getAttribute(props.lastPage, 'paginate', 'lastPage')
+  )
+    emit(getAttribute(props.currentPage, 'paginate', 'currentPage') + 1)
 }
 </script>
 
 <template>
   <div
-    v-if="props.currentPage && props.lastPage !== 1"
+    v-if="
+      getAttribute(props.currentPage, 'paginate', 'currentPage') &&
+      getAttribute(props.lastPage, 'paginate', 'lastPage') !== 1
+    "
     class="w-max glorious-paginate"
+    :class="[`color-${getAttribute(props.color, 'paginate', 'color')}`]"
   >
     <div>
       <GIcon
-        :color="props.currentPage !== 1 ? '#000' : '#cbd5e1'"
+        :color="
+          getAttribute(props.currentPage, 'paginate', 'currentPage') !== 1
+            ? '#000'
+            : '#cbd5e1'
+        "
         class="ml-2 cursor-pointer"
         name="glorious-arrow"
         :size="15"
@@ -58,14 +79,23 @@ 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="[props.currentPage === item ? 'active' : 'cursor-pointer']"
+        :class="[
+          getAttribute(props.currentPage, 'paginate', 'currentPage') === item
+            ? 'active'
+            : 'cursor-pointer',
+        ]"
         @click="emit(item)"
       >
         {{ item }}
       </div>
 
       <GIcon
-        :color="props.currentPage !== props.lastPage ? '#000' : '#cbd5e1'"
+        :color="
+          getAttribute(props.currentPage, 'paginate', 'currentPage') !==
+          getAttribute(props.lastPage, 'paginate', 'lastPage')
+            ? '#000'
+            : '#cbd5e1'
+        "
         name="glorious-arrow"
         class="mr-2 cursor-pointer"
         :size="15"
@@ -74,5 +104,3 @@ const arrowNext = () => {
     </div>
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/paginate.scss" />

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

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import _props from '../props/Radio'
+import { getAttribute } from '../helper'
+
 const props = defineProps(_props)
 const modelValue = defineModel()
 
@@ -12,18 +14,19 @@ const inputFunction = (event: Event) => {
 <template>
   <label
     class="glorious-radio"
-    :class="[props.color, `size-${props.size}`]"
+    :class="[
+      getAttribute(props.color, 'radio', 'color'),
+      `size-${getAttribute(props.size, 'radio', 'size')}`,
+    ]"
   >
     <input
-      :name="props.name"
+      :name="getAttribute(props.checked, 'radio', 'checked')"
       type="radio"
       :disabled="props.disabled"
       :value="props.value"
-      :checked="props.checked"
+      :checked="getAttribute(props.checked, 'radio', 'checked')"
       @input="inputFunction($event)"
     />
     <div></div>
   </label>
 </template>
-
-<style lang="scss" src="../../style/components/radio.scss" />

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

@@ -36,5 +36,3 @@ const computeModelValue = (event: Event) => {
     </template>
   </div>
 </template>
-
-<style scoped lang="scss" src="../../style/components/rating.scss" />

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, watch } from '#imports'
 import _props from '../props/Select'
-import { hasValidationError } from '../helper'
+import { hasValidationError, getAttribute } from '../helper'
 
 const props: any = defineProps(_props)
 const modelValue = defineModel()
@@ -32,7 +32,7 @@ const firstVal = selectValue.value
     <span class="glorious-title text-sm font-medium text-gray-500">
       {{ props.title }}
       <span
-        v-if="props.required"
+        v-if="getAttribute(props.required, 'select', 'required')"
         class="text-red-500"
       >
         *
@@ -42,11 +42,11 @@ const firstVal = selectValue.value
       <select
         v-model="selectValue"
         aria-label="glorious select"
-        :disabled="props.disabled"
+        :disabled="getAttribute(props.disabled, 'select', 'disabled')"
         class="grow glorious-select"
         :class="[
-          `color-${props.color}`,
-          props.size,
+          `color-${getAttribute(props.color, 'select', 'color')}`,
+          getAttribute(props.size, 'select', 'size'),
           hasValidationError(props.error) ? 'validation-error' : '',
           selectValue === null || selectValue === ''
             ? 'text-gray-500'
@@ -66,14 +66,14 @@ const firstVal = selectValue.value
         <option
           v-for="(item, index) in props.options"
           :key="index"
-          :value="item[props.keyOfValue]"
+          :value="item[getAttribute(props.keyOfValue, 'select', 'keyOfValue')]"
         >
-          {{ item[props.displayTextKey] }}
+          {{
+            item[getAttribute(props.displayTextKey, 'select', 'displayTextKey')]
+          }}
         </option>
       </select>
     </div>
     <GErrorText :error="props.error" />
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/select.scss" />

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

@@ -24,5 +24,3 @@ const input = (e: Event) => {
     </label>
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/switch.scss" />

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import _props from '../props/Tab'
+
 const props: any = defineProps(_props)
 const modelValue = defineModel()
 const tabClicked: any = (key: string, event: any) => {
@@ -89,5 +90,3 @@ const scrollPrevious = (event: Event) => {
     </div>
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/tab.scss" />

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

@@ -58,5 +58,3 @@ const props = defineProps(_props)
     </div>
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/table.scss" />

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

@@ -0,0 +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>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { watch, onMounted } from "#imports";
+import { watch, onMounted } from '#imports'
 const props = defineProps({
   items: {
     required: true,
@@ -12,67 +12,70 @@ const props = defineProps({
   },
   progressColor: {
     required: false,
-    default: "#00ff00",
+    default: '#00ff00',
     type: String,
   },
   bgColor: {
     required: false,
-    default: "#0000ff",
+    default: '#0000ff',
     type: String,
   },
-});
+})
 
 const methods = {
   computeWizardMobile: () => {
-    const circularProgress = document.querySelectorAll(".circular-progress");
+    const circularProgress = document.querySelectorAll('.circular-progress')
     Array.from(circularProgress).forEach((progressBar: any) => {
-      const progressValue: any = progressBar.querySelector(".percentage");
-      const innerCircle: any = progressBar.querySelector(".inner-circle");
-      const eachStep = (1 / props.items.length) * 100;
+      const progressValue: any = progressBar.querySelector('.percentage')
+      const innerCircle: any = progressBar.querySelector('.inner-circle')
+      const eachStep = (1 / props.items.length) * 100
 
       let startValue =
-        Number(progressBar.getAttribute("data-percentage")) - eachStep < 0
+        Number(progressBar.getAttribute('data-percentage')) - eachStep < 0
           ? 0
-          : Number(progressBar.getAttribute("data-percentage"));
+          : Number(progressBar.getAttribute('data-percentage'))
 
       const endValue: any =
           props.step === 0
             ? 0
-            : Number(progressBar.getAttribute("data-percentage")) + eachStep,
-        progressColor = progressBar.getAttribute("data-progress-color");
+            : Number(progressBar.getAttribute('data-percentage')) + eachStep,
+        progressColor = progressBar.getAttribute('data-progress-color')
 
       const progress = setInterval(() => {
-        progressValue.textContent = props.step + 1;
+        progressValue.textContent = props.step + 1
 
         innerCircle.style.backgroundColor = `${progressBar.getAttribute(
-          "data-inner-circle-color"
-        )}`;
+          'data-inner-circle-color'
+        )}`
 
         progressBar.style.background = `conic-gradient(${progressColor} ${
           startValue * 3.6
-        }deg,${progressBar.getAttribute("data-bg-color")} 0deg)`;
+        }deg,${progressBar.getAttribute('data-bg-color')} 0deg)`
 
         if (Math.floor(startValue) == Math.floor(endValue))
-          clearInterval(progress);
+          clearInterval(progress)
 
-        startValue++;
-      }, 10);
-    });
+        startValue++
+      }, 10)
+    })
   },
-};
+}
 
-onMounted(() => methods.computeWizardMobile());
+onMounted(() => methods.computeWizardMobile())
 
 watch(
   () => props.step,
   () => methods.computeWizardMobile()
-);
+)
 </script>
 
 <template>
   <div class="glorious-wizard">
     <div class="glorious-wizard-desktop">
-      <div v-for="(item, index) in props.items" :key="index">
+      <div
+        v-for="(item, index) in props.items"
+        :key="index"
+      >
         <div
           class="circle"
           :class="parseInt(index) < props.step ? 'checked' : ''"
@@ -119,5 +122,48 @@ watch(
 </template>
 
 <style scoped>
-.glorious-wizard{@apply md:w-full w-max}.glorious-wizard-desktop{@apply md:flex hidden flex-wrap gap-[3%] w-full justify-center}.glorious-wizard-desktop div{@apply flex flex-col items-center}.glorious-wizard-desktop>div>div.circle{@apply rounded-full border border-blue-200 w-12 h-12 flex justify-center items-center}.glorious-wizard-desktop>div>div.circle.checked{@apply border-green-500 bg-green-500}.glorious-wizard-mobile{@apply w-max md:hidden flex flex-col items-center}.glorious-wizard-mobile>span{@apply text-gray-500 text-[12px]}.circular-progress{align-items:center;border-radius:50%;display:flex;justify-content:center}.circular-progress p,.circular-progress>div{@apply z-[25] text-gray-500}.inner-circle{background-color:#fff;border-radius:50%;position:absolute}.inner-circle.checked{@apply bg-green-500}.percentage{font-size:1rem;position:relative}
+/*
+.glorious-wizard {
+  @apply md:w-full w-max;
+}
+.glorious-wizard-desktop {
+  @apply md:flex hidden flex-wrap gap-[3%] w-full justify-center;
+}
+.glorious-wizard-desktop div {
+  @apply flex flex-col items-center;
+}
+.glorious-wizard-desktop > div > div.circle {
+  @apply rounded-full border border-blue-200 w-12 h-12 flex justify-center items-center;
+}
+.glorious-wizard-desktop > div > div.circle.checked {
+  @apply border-green-500 bg-green-500;
+}
+.glorious-wizard-mobile {
+  @apply w-max md:hidden flex flex-col items-center;
+}
+.glorious-wizard-mobile > span {
+  @apply text-gray-500 text-[12px];
+}
+.circular-progress {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+}
+.circular-progress p,
+.circular-progress > div {
+  @apply z-[25] text-gray-500;
+}
+.inner-circle {
+  background-color: #fff;
+  border-radius: 50%;
+  position: absolute;
+}
+.inner-circle.checked {
+  @apply bg-green-500;
+}
+.percentage {
+  font-size: 1rem;
+  position: relative;
+}*/
 </style>

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from '#imports'
 import _props from '../props/Textarea'
-import { hasValidationError } from '../helper'
+import { hasValidationError, getAttribute } from '../helper'
+
 const props = defineProps(_props)
 const modelValue = defineModel()
 
@@ -20,9 +21,9 @@ watch(
 <template>
   <div class="flex flex-col">
     <span class="glorious-title text-sm font-medium text-gray-500">
-      {{ props.title }}
+      {{ getAttribute(props.title, 'textarea', 'title') }}
       <span
-        v-if="props.required"
+        v-if="getAttribute(props.required, 'textarea', 'required')"
         class="text-red-500"
       >
         *
@@ -32,16 +33,16 @@ watch(
       <textarea
         v-model="inputValue"
         :class="[
-          `glorious-textarea-${props.color}`,
+          `glorious-textarea-${getAttribute(props.color, 'textarea', 'color')}`,
           hasValidationError(props.error) ? 'validation-error' : '',
         ]"
-        :placeholder="props.placeholder"
-        :disabled="props.disabled"
-        :rows="props.rows"
+        :placeholder="
+          getAttribute(props.placeholder, 'textarea', 'placeholder')
+        "
+        :disabled="getAttribute(props.disabled, 'textarea', 'disabled')"
+        :rows="getAttribute(props.rows, 'textarea', 'rows')"
       />
       <GErrorText :error="props.error" />
     </div>
   </div>
 </template>
-
-<style lang="scss" src="../../style/components/textarea.scss" />

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

@@ -24,5 +24,3 @@ const props: any = defineProps(_props)
     </div>
   </div>
 </template>
-
-<style scoped lang="scss" src="../../style/components/timeline.scss" />

package/dist/runtime/components/helper.d.ts

@@ -1,3 +1,4 @@
 export declare const createBlurDom: (callback: Function) => void;
 export declare const removeBlurDom: () => void;
 export declare const hasValidationError: (errorProp: string) => boolean;
+export declare const getAttribute: (propsValue: any, componentName: string, prop: string) => any;

package/dist/runtime/components/helper.mjs

@@ -1,3 +1,4 @@
+import { useRuntimeConfig } from "#app";
 import { GloriousStore } from "../stores/GloriousStore.mjs";
 export const createBlurDom = (callback) => {
   const div = document.createElement("div");
@@ -5,9 +6,9 @@ export const createBlurDom = (callback) => {
     "fixed",
     "top-0",
     "right-0",
-    "backdrop-blur-sm",
+    "backdrop-blur-xl",
     "bg-gray-500",
-    "bg-opacity-50",
+    "opacity-75",
     "h-full",
     "w-full",
     "z-[40]",
@@ -35,3 +36,13 @@ export const hasValidationError = (errorProp) => {
     );
   return condition;
 };
+export const getAttribute = (propsValue, componentName, prop) => {
+  let mount;
+  if (import.meta.client) {
+    const config = useRuntimeConfig();
+    return config.public?.glorious?.components?.[componentName]?.props?.[prop] || propsValue;
+  } else {
+    mount = propsValue;
+  }
+  return mount;
+};

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

@@ -2,7 +2,7 @@ declare const _default: {
     color: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
 };
 export default _default;

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

@@ -3,7 +3,16 @@ declare const _default: {
         required: boolean;
         type: StringConstructor;
     };
+    alt: {
+        required: boolean;
+        type: StringConstructor;
+    };
     size: {
+        required: boolean;
+        default: import("../../../types").sizes;
+        type: () => import("../../../types").sizes;
+    };
+    rounded: {
         required: boolean;
         default: string;
         type: () => import("../../../types").rounded;

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

@@ -1,9 +1,7 @@
-import { size, rounded } from "./common/index.mjs";
+import { size, rounded, alt, src } from "./common/index.mjs";
 export default {
-  ...size(),
   ...rounded,
-  src: {
-    required: true,
-    type: String
-  }
+  ...size(),
+  ...alt(),
+  ...src()
 };

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

@@ -41,7 +41,7 @@ declare const _default: {
     color: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
 };
 export default _default;

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

@@ -17,7 +17,7 @@ declare const _default: {
     color: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
 };
 export default _default;

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

@@ -27,7 +27,7 @@ declare const _default: {
     color: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
     error: {
         required: boolean;

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

@@ -1,4 +1,8 @@
 declare const _default: {
+    hoverColor: {
+        required: boolean;
+        default: string;
+    };
     stroke: {
         required: boolean;
         type: (NumberConstructor | null)[];

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

@@ -3,5 +3,9 @@ export default {
   ...name,
   ...hashColor,
   ...intSize(),
-  ...stroke()
+  ...stroke(),
+  hoverColor: {
+    required: false,
+    default: ""
+  }
 };

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

@@ -109,7 +109,7 @@ declare const _default: {
     color: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
 };
 export default _default;

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

@@ -12,7 +12,7 @@ declare const _default: {
     color: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
 };
 export default _default;

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

@@ -32,7 +32,7 @@ declare const _default: {
     colorBtn: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
     title: {
         required: boolean;

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

@@ -14,5 +14,10 @@ declare const _default: {
         type: NumberConstructor;
         default: number;
     };
+    color: {
+        required: boolean;
+        default: string;
+        type: () => import("../../../types").colors | string;
+    };
 };
 export default _default;

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

@@ -1,4 +1,6 @@
+import { color } from "./common/index.mjs";
 export default {
+  ...color(),
   currentPage: {
     required: true,
     type: Number,

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

@@ -12,7 +12,7 @@ declare const _default: {
     color: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
     checked: {
         required: boolean;

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

@@ -50,7 +50,7 @@ declare const _default: {
     color: {
         required: boolean;
         default: string;
-        type: () => import("../../../types").colors;
+        type: () => import("../../../types").colors | string;
     };
     placeholder: {
         required: boolean;