nuxt-glorious 1.2.0 → 1.2.9-5

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

@@ -1,57 +1,93 @@
 <script lang="ts" setup>
-interface itemsType {
-  active: boolean;
-  text: string;
-  key: string;
-}
-
-const props = defineProps({
-  items: {
-    required: true,
-    default: [],
-    type: Array<itemsType>,
-  },
-  modelValue: {
-    required: true,
-    type: String,
-  },
-});
-const emits = defineEmits(["update:modelValue"]);
+import _props from '../props/Tab'
+const props: any = defineProps(_props)
+const modelValue = defineModel()
 const tabClicked: any = (key: string, event: any) => {
-  emits("update:modelValue", key);
+  modelValue.value = key
   Array.from(event.currentTarget.parentElement.parentElement.children).map(
-    (item: any) => item.children[0].classList.remove("active")
-  );
-  event.currentTarget.classList.add("active");
-};
+    (item: any) => item.children[0].classList.remove('active')
+  )
+  event.currentTarget.classList.add('active')
+}
+
+const setArrow = () => {
+  document.querySelectorAll('.glorious-tab-content').forEach((element) => {
+    if (element.scrollWidth > element.clientWidth) {
+      element.previousElementSibling?.classList.replace('hidden', 'flex')
+
+      element.previousElementSibling?.parentElement?.classList.add('!px-7')
+      element.nextElementSibling?.classList.replace('hidden', 'flex')
+    } else {
+      element.previousElementSibling?.classList.add('hidden')
+      element.previousElementSibling?.parentElement?.classList.remove('!px-7')
+      element.nextElementSibling?.classList.add('hidden')
+    }
+  })
+}
+onMounted(() => {
+  window.addEventListener('resize', () => setArrow())
+  setArrow()
+})
+
+const scrollNext = (event: Event) => {
+  const currentTarget = event.currentTarget as HTMLDivElement
+  const nextElement = currentTarget.nextElementSibling as HTMLDivElement
+  nextElement.scrollBy({
+    left: 80,
+    behavior: 'smooth',
+  })
+}
+const scrollPrevious = (event: Event) => {
+  const currentTarget = event.currentTarget as HTMLDivElement
+  const previousElement = currentTarget.previousElementSibling as HTMLDivElement
+  previousElement.scrollBy({
+    left: -80,
+    behavior: 'smooth',
+  })
+}
 </script>
 
 <template>
-  <div class="glorious-tab">
+  <div class="glorious-tab relative">
     <div
-      v-for="(item, index) in props.items"
-      :key="index"
-      class="flex justify-center"
-      :style="{ flexBasis: `${100 / props.items.length}%` }"
+      @click="scrollNext($event)"
+      class="bg-green-700 absolute right-0 h-full top-0 w-8 justify-center items-center rounded-r-lg hidden cursor-pointer"
     >
-      <button
-        :class="item.active ? `active` : ''"
-        @click="tabClicked(item.key, $event)"
+      <GIcon
+        name="glorious-arrow"
+        :size="15"
+        color="#fff"
+      />
+    </div>
+
+    <div class="flex overflow-auto px-3 py-2 gap-3 glorious-tab-content">
+      <div
+        v-for="(item, index) in props.items"
+        :key="index"
+        class="flex justify-center tab-item"
+        :style="{ flexBasis: `${100 / props.items.length}%` }"
       >
-        {{ item.text }}
-      </button>
+        <button
+          :class="item.active ? `active` : ''"
+          @click="tabClicked(item.key, $event)"
+        >
+          {{ item.text }}
+        </button>
+      </div>
+    </div>
+
+    <div
+      @click="scrollPrevious($event)"
+      class="bg-green-700 absolute left-0 h-full top-0 w-8 justify-center items-center rounded-l-lg hidden cursor-pointer"
+    >
+      <GIcon
+        name="glorious-arrow"
+        class="rotate-180"
+        :size="15"
+        color="#fff"
+      />
     </div>
   </div>
 </template>
 
-<style>
-.glorious-tab {
-  @apply flex justify-between bg-green-100 px-3 py-2 rounded-lg gap-3 overflow-y-auto w-full shadow-md;
-}
-.glorious-tab > div > button {
-  @apply text-gray-700 text-[14px] hover:bg-green-200 hover:text-gray-800 cursor-pointer px-2 py-1 rounded-lg;
-}
-.glorious-tab > div > button.active {
-  @apply font-bold text-white bg-green-700;
-}
-</style>
+<style lang="scss" src="../../style/components/tab.scss" />

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

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import _props from '../props/Table'
+const props = defineProps(_props)
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div
+      class="glorious-table"
+      :class="[`color-${props.color}`]"
+    >
+      <table>
+        <thead>
+          <tr>
+            <th
+              v-for="(headItem, index) in props.header"
+              :key="index"
+            >
+              {{ headItem }}
+            </th>
+          </tr>
+        </thead>
+        <tbody v-if="!props.loading">
+          <tr
+            v-for="(bodyItem, bodyIndex) in props.body"
+            :key="bodyIndex"
+          >
+            <td
+              v-for="(headItem, headKey, headIndex) in props.header"
+              :key="headIndex"
+            >
+              <slot
+                v-if="typeof $slots[headKey] !== 'undefined'"
+                :name="headKey"
+                :item="{ ...bodyItem, index: bodyIndex }"
+              />
+              <template v-else>
+                {{ bodyItem[headKey] }}
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div
+      v-if="props.loading"
+      class="flex justify-center mt-3"
+    >
+      <GLoading :color="props.loadingOption.color" />
+    </div>
+    <div
+      class="flex justify-center mt-3"
+      v-if="!props.loading && props.body.length === 0"
+    >
+      <div class="bg-white shadow p-2 rounded w-max">
+        <span> {{ props.emptyText }} </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="../../style/components/table.scss" />

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

@@ -1,140 +1,37 @@
 <script setup lang="ts">
-import { ref, watch } from "#imports";
-const props = defineProps({
-  modelValue: {
-    required: false,
-    default: "",
-    type: String,
-  },
-  color: {
-    required: false,
-    default: "primary",
-    type: String as () => "orange" | "blue" | "gray" | "red" | "primary",
-  },
-  placeholder: {
-    required: false,
-    default: "",
-    type: String,
-  },
-  title: {
-    required: false,
-    default: "",
-    type: String,
-  },
-  size: {
-    required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "xsm",
-  },
-  error: {
-    required: false,
-    default: "|",
-    type: String,
-  },
-  disabled: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  autocomplete: {
-    required: false,
-    default: "off",
-    type: String,
-  },
-});
+import { ref, watch } from '#imports'
+import _props from '../props/Textarea'
+const props = defineProps(_props)
+const modelValue = defineModel()
 
-const inputValue: any = ref(null);
-if (props.modelValue !== "") inputValue.value = props.modelValue;
-const emits = defineEmits(["update:modelValue"]);
+const inputValue: any = ref(null)
+if (modelValue.value !== '') inputValue.value = modelValue.value
 watch(
   () => inputValue.value,
-  () => emits("update:modelValue", inputValue.value)
-);
+  () => (modelValue.value = inputValue.value)
+)
 watch(
-  () => props.modelValue,
-  () => (inputValue.value = props.modelValue)
-);
+  () => modelValue.value,
+  () => (inputValue.value = modelValue.value)
+)
 </script>
 
 <template>
   <div class="flex flex-col">
-    <span class="text-[14px] font-medium text-gray-500">{{ props.title }}</span>
+    <span class="glorious-title text-sm font-medium text-gray-500">{{
+      props.title
+    }}</span>
     <div class="glorious-textarea">
       <textarea
         v-model="inputValue"
-        :autocomplete="props.autocomplete"
-        :class="[props.size, `glorious-textarea-${props.color}`]"
+        :class="[`glorious-textarea-${props.color}`]"
         :placeholder="props.placeholder"
         :disabled="props.disabled"
+        :rows="props.rows"
       />
     </div>
     <GErrorText :error="props.error" />
   </div>
 </template>
 
-<style>
-.xl.glorious-textarea-orange, .xl.glorious-textarea-blue, .xl.glorious-textarea-gray, .xl.glorious-textarea-red, .xl.glorious-textarea-primary {
-  @apply py-2.5;
-}
-.lg.glorious-textarea-orange, .lg.glorious-textarea-blue, .lg.glorious-textarea-gray, .lg.glorious-textarea-red, .lg.glorious-textarea-primary {
-  @apply py-2;
-}
-.md.glorious-textarea-orange, .md.glorious-textarea-blue, .md.glorious-textarea-gray, .md.glorious-textarea-red, .md.glorious-textarea-primary {
-  @apply py-1.5;
-}
-.sm.glorious-textarea-orange, .sm.glorious-textarea-blue, .sm.glorious-textarea-gray, .sm.glorious-textarea-red, .sm.glorious-textarea-primary {
-  @apply py-1;
-}
-.xsm.glorious-textarea-orange, .xsm.glorious-textarea-blue, .xsm.glorious-textarea-gray, .xsm.glorious-textarea-red, .xsm.glorious-textarea-primary {
-  @apply py-0.5;
-}
-
-.glorious-textarea-orange:focus-visible, .glorious-textarea-blue:focus-visible, .glorious-textarea-gray:focus-visible, .glorious-textarea-red:focus-visible, .glorious-textarea-primary:focus-visible {
-  @apply outline-none ring-2;
-}
-
-.glorious-textarea-primary {
-  @apply rounded-md ring-1 ring-green-500 px-3;
-}
-.glorious-textarea-primary:disabled {
-  @apply bg-green-300 cursor-not-allowed;
-}
-
-.glorious-textarea-red {
-  @apply rounded-md ring-1 ring-red-500 px-3;
-}
-.glorious-textarea-red:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-textarea-gray {
-  @apply rounded-md ring-1 ring-gray-500 px-3;
-}
-.glorious-textarea-gray:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-textarea-blue {
-  @apply rounded-md ring-1 ring-blue-500 px-3;
-}
-.glorious-textarea-blue:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-textarea-orange {
-  @apply rounded-md ring-1 ring-orange-500 px-3;
-}
-.glorious-textarea-orange:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-textarea {
-  @apply relative w-full;
-}
-.glorious-textarea > textarea {
-  @apply w-full;
-}
-.glorious-textarea > textarea::placeholder {
-  @apply text-[14px];
-}
-</style>
+<style lang="scss" src="../../style/components/textarea.scss" />

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

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import _props from '../props/Timeline'
+const props: any = defineProps(_props)
+</script>
+<template>
+  <div class="flex gap-3 mr-4">
+    <div
+      class="flex flex-col gap-5 glorious-timeline-items"
+      :class="[`color-${props.color}`]"
+    >
+      <div
+        v-for="(item, index) in props.items.reverse()"
+        :key="index"
+      >
+        <div class="glorious-timeline-items-count">
+          {{ props.items.length - index }}
+        </div>
+        <slot
+          name="item"
+          :item="item"
+        >
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="../../style/components/timeline.scss" />

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

@@ -0,0 +1,3 @@
+export declare const createBlurDom: (callback: Function) => void;
+export declare const removeBlurDom: () => void;
+export declare const hasValidationError: (errorProp: string) => boolean;

package/dist/runtime/components/helper.mjs

@@ -0,0 +1,37 @@
+import { GloriousStore } from "../stores/GloriousStore.mjs";
+export const createBlurDom = (callback) => {
+  const div = document.createElement("div");
+  div.classList.add(
+    "fixed",
+    "top-0",
+    "right-0",
+    "backdrop-blur-sm",
+    "bg-gray-500",
+    "bg-opacity-50",
+    "h-full",
+    "w-full",
+    "z-[40]",
+    "glorious-backdrop"
+  );
+  const nuxt = document.getElementById("__nuxt");
+  nuxt?.appendChild(div);
+  div.addEventListener("click", () => {
+    callback();
+    div.remove();
+  });
+};
+export const removeBlurDom = () => {
+  const blur = document.querySelector(".glorious-backdrop");
+  if (blur !== null) blur.remove();
+};
+export const hasValidationError = (errorProp) => {
+  const gs = GloriousStore();
+  const error = errorProp.split("|");
+  let condition = false;
+  if (typeof gs.forms[error[0]]?.errors !== "undefined")
+    condition = Object.prototype.hasOwnProperty.call(
+      gs.forms[error[0]]?.errors,
+      error[1]
+    );
+  return condition;
+};

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

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

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

@@ -0,0 +1,4 @@
+import { color } from "./common/index.mjs";
+export default {
+  ...color()
+};

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

@@ -0,0 +1,12 @@
+declare const _default: {
+    src: {
+        required: boolean;
+        type: StringConstructor;
+    };
+    size: {
+        required: boolean;
+        default: string;
+        type: () => import("../../../types").rounded;
+    };
+};
+export default _default;

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

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

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

@@ -0,0 +1,26 @@
+import type { breadcrumbInterface } from '../../../types';
+declare const _default: {
+    items: {
+        required: boolean;
+        type: {
+            (arrayLength: number): breadcrumbInterface[];
+            (...items: breadcrumbInterface[]): breadcrumbInterface[];
+            new (arrayLength: number): breadcrumbInterface[];
+            new (...items: breadcrumbInterface[]): breadcrumbInterface[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+    };
+    divider: {
+        required: boolean;
+        type: StringConstructor;
+        default: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,11 @@
+export default {
+  items: {
+    required: true,
+    type: Array
+  },
+  divider: {
+    required: false,
+    type: String,
+    default: "/"
+  }
+};

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

@@ -0,0 +1,47 @@
+declare const _default: {
+    outline: {
+        required: boolean;
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    ariaLabel: {
+        required: boolean;
+        default: string;
+        type: StringConstructor;
+    };
+    to: {
+        required: boolean;
+        default: string;
+        type: StringConstructor;
+    };
+    loading: {
+        required: boolean;
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    loadingOption: {
+        required: boolean;
+        default: {
+            color: string;
+        };
+        type: {
+            color: StringConstructor;
+        };
+    };
+    disabled: {
+        required: boolean;
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    size: {
+        required: boolean;
+        default: import("../../../types").sizes;
+        type: () => import("../../../types").sizes;
+    };
+    color: {
+        required: boolean;
+        default: string;
+        type: () => import("../../../types").colors;
+    };
+};
+export default _default;

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

@@ -0,0 +1,14 @@
+import { color, size, disabled, loading, to, ariaLabel } from "./common/index.mjs";
+export default {
+  ...color(),
+  ...size(),
+  ...disabled,
+  ...loading,
+  ...to,
+  ...ariaLabel,
+  outline: {
+    required: false,
+    default: false,
+    type: Boolean
+  }
+};

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

@@ -0,0 +1,23 @@
+declare const _default: {
+    checked: {
+        required: boolean;
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    disabled: {
+        required: boolean;
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    size: {
+        required: boolean;
+        default: import("../../../types").sizes;
+        type: () => import("../../../types").sizes;
+    };
+    color: {
+        required: boolean;
+        default: string;
+        type: () => import("../../../types").colors;
+    };
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+import { color, size, disabled, checked } from "./common/index.mjs";
+export default {
+  ...color(),
+  ...size("xs"),
+  ...disabled,
+  ...checked
+};

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    second: {
+        required: boolean;
+        type: NumberConstructor;
+    };
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+export default {
+  second: {
+    required: true,
+    type: Number
+  }
+};

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    position: {
+        require: boolean;
+        default: string;
+        type: () => "right" | "left";
+    };
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+export default {
+  position: {
+    require: false,
+    default: "right",
+    type: String
+  }
+};

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    error: {
+        required: boolean;
+        default: string;
+        type: StringConstructor;
+    };
+};
+export default _default;

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

@@ -0,0 +1,4 @@
+import { error } from "./common/index.mjs";
+export default {
+  ...error
+};