nuxt-glorious 0.7.9-7

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

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { ref, watch } from "#imports";
+
+const props = defineProps({
+  name: {
+    required: true,
+    type: String,
+    default: "",
+  },
+  color: {
+    required: false,
+    type: String,
+    default: "#000",
+  },
+  size: {
+    required: false,
+    type: Number,
+    default: 20,
+  },
+  stroke: {
+    required: false,
+    type: Number,
+    default: 1,
+  },
+});
+
+const icon = ref("");
+
+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(" ");
+
+    icon = icon
+      .split(" ")
+      .map((item: any) =>
+        item.includes('height="') && typeof props.size !== "undefined"
+          ? 'height="' + props.size + '"'
+          : item
+      )
+      .join(" ");
+
+    //stroke
+    icon = icon.replaceAll("\n", " ");
+
+    icon = icon
+      .split(" ")
+      .map((item: any) =>
+        item.includes("stroke-width") && typeof props.stroke !== "undefined"
+          ? 'stroke-width="' + props.stroke + '"'
+          : item
+      )
+      .join(" ");
+
+    return icon;
+  },
+};
+
+async function getIcon() {
+  try {
+    const iconsImport = import.meta.glob("assets/icons/**/**.svg", {
+      query: "?raw",
+      eager: false,
+    });
+    let rawIcon = "";
+    if (typeof iconsImport[`/assets/icons/${props.name}.svg`] !== "undefined") {
+      const icon: any = await iconsImport[`/assets/icons/${props.name}.svg`]();
+      rawIcon = icon.default;
+    } else {
+      const staticAssets = import.meta.glob("../../../assets/icons/**/**.svg", {
+        query: "?raw",
+        eager: false,
+      });
+
+      const icon: any = await staticAssets[
+        `../../../assets/icons/${props.name}.svg`
+      ]();
+      rawIcon = icon.default;
+    }
+
+    icon.value = methods.computeProps(rawIcon);
+  } catch (e) {
+    console.error(
+      `glorious error -> Icon '${props.name}' doesn't exist in 'assets/icons'`
+    );
+  }
+}
+
+await getIcon();
+
+watch(
+  () => props,
+  () => getIcon(),
+  {
+    deep: true,
+  }
+);
+</script>
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div class="w-max h-max" v-html="icon" />
+</template>

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

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { computed, ref, watch, GloriousStore } from "#imports";
+const props = defineProps({
+  modelValue: {
+    required: false,
+    default: "",
+    type: [String, Array<String>, Number],
+  },
+  color: {
+    required: false,
+    default: "primary",
+    type: String,
+  },
+  placeholder: {
+    required: false,
+    default: "",
+    type: String,
+  },
+  title: {
+    required: false,
+    default: "",
+    type: String,
+  },
+  size: {
+    required: false,
+    default: "md",
+    type: String,
+  },
+  error: {
+    required: false,
+    default: "|",
+    type: String,
+  },
+  icon: {
+    required: false,
+    default: "",
+    type: String,
+  },
+  disabled: {
+    required: false,
+    default: false,
+    type: Boolean,
+  },
+  type: {
+    required: false,
+    default: "text",
+    type: String,
+  },
+  autocomplete: {
+    required: false,
+    default: "off",
+    type: String,
+  },
+  mode: {
+    required: false,
+    default: "normal",
+    type: String,
+  },
+});
+
+const inputValue: any = ref(null);
+
+const emits = defineEmits(["update:modelValue"]);
+
+watch(
+  () => inputValue.value,
+  () => {
+    if (props.mode === "tag") return;
+    emits("update:modelValue", inputValue.value);
+  }
+);
+
+const gs: any = GloriousStore();
+const error: any = props.error.split("|");
+
+const computeIconSize = computed(() => {
+  let iconSize = 0;
+
+  switch (props.size) {
+    case "xl":
+      iconSize = 30;
+      break;
+    case "lg":
+      iconSize = 27;
+      break;
+    case "md":
+      iconSize = 25;
+      break;
+    case "sm":
+      iconSize = 23;
+      break;
+    case "xsm":
+      iconSize = 20;
+      break;
+    default:
+      iconSize = 30;
+      break;
+  }
+
+  return iconSize;
+});
+
+// ------------------------------------------------------------------------------------------------ TAG
+const tags: any = ref([]);
+
+const addTag = (event: any) => {
+  if (tags.value.length === 0) tags.value = [];
+
+  if (props.mode !== "tag") return;
+  const value: any = event.target.value;
+  tags.value.push(value);
+  emits("update:modelValue", tags.value);
+  inputValue.value = "";
+};
+const removeTag = (tag: string) => {
+  tags.value = tags.value.filter((item: any) => item !== tag);
+  emits("update:modelValue", tags.value);
+};
+
+// -------------------------------------- init value
+const initValue = () => {
+  if (props.mode === "tag") {
+    tags.value = props.modelValue;
+    return;
+  }
+
+  inputValue.value = props.modelValue;
+};
+initValue();
+watch(
+  () => props.modelValue,
+  () => initValue()
+);
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <span class="text-[14px] font-medium text-gray-500">{{ props.title }}</span>
+    <div
+      class="glorious-input"
+      :class="[props.icon !== '' ? `icon-${props.size}` : '']"
+    >
+      <input
+        v-model="inputValue"
+        :autocomplete="props.autocomplete"
+        :class="[props.size, `glorious-input-${props.color}`]"
+        :placeholder="props.placeholder"
+        :disabled="props.disabled"
+        :type="props.type"
+        @keyup.enter="addTag($event)"
+      />
+      <div v-if="tags.length !== 0" class="glorious-input-tag">
+        <div v-for="(item, index) in tags" :key="index">
+          {{ item }}
+          <GIcon
+            name="glorious-x"
+            :size="10"
+            color="#ff0000"
+            @click="removeTag(item)"
+          />
+        </div>
+      </div>
+      <GIcon
+        v-if="props.icon !== ''"
+        class="glorious-input-icon"
+        :name="props.icon"
+        :size="computeIconSize"
+        :color="$tailwindColor('gray', '500')"
+      />
+    </div>
+    <span v-if="gs.forms[error[0]]?.errors[error[1]]" class="text-red-500">
+      {{ gs.forms[error[0]].errors[error[1]][0] }}
+    </span>
+  </div>
+</template>
+
+<style>
+.xl.glorious-input-orange, .xl.glorious-input-blue, .xl.glorious-input-gray, .xl.glorious-input-red, .xl.glorious-input-primary {
+  @apply py-2.5;
+}
+.lg.glorious-input-orange, .lg.glorious-input-blue, .lg.glorious-input-gray, .lg.glorious-input-red, .lg.glorious-input-primary {
+  @apply py-2;
+}
+.md.glorious-input-orange, .md.glorious-input-blue, .md.glorious-input-gray, .md.glorious-input-red, .md.glorious-input-primary {
+  @apply py-1.5;
+}
+.sm.glorious-input-orange, .sm.glorious-input-blue, .sm.glorious-input-gray, .sm.glorious-input-red, .sm.glorious-input-primary {
+  @apply py-1;
+}
+.xsm.glorious-input-orange, .xsm.glorious-input-blue, .xsm.glorious-input-gray, .xsm.glorious-input-red, .xsm.glorious-input-primary {
+  @apply py-0.5;
+}
+
+.glorious-input-orange:focus-visible, .glorious-input-blue:focus-visible, .glorious-input-gray:focus-visible, .glorious-input-red:focus-visible, .glorious-input-primary:focus-visible {
+  @apply outline-none ring-2;
+}
+
+.glorious-input-primary {
+  @apply rounded-md ring-1 ring-green-500 px-3;
+}
+.glorious-input-primary:disabled {
+  @apply bg-green-300 cursor-not-allowed;
+}
+
+.glorious-input-red {
+  @apply rounded-md ring-1 ring-red-500 px-3;
+}
+.glorious-input-red:disabled {
+  @apply cursor-not-allowed;
+}
+
+.glorious-input-gray {
+  @apply rounded-md ring-1 ring-gray-500 px-3;
+}
+.glorious-input-gray:disabled {
+  @apply cursor-not-allowed;
+}
+
+.glorious-input-blue {
+  @apply rounded-md ring-1 ring-blue-500 px-3;
+}
+.glorious-input-blue:disabled {
+  @apply cursor-not-allowed;
+}
+
+.glorious-input-orange {
+  @apply rounded-md ring-1 ring-orange-500 px-3;
+}
+.glorious-input-orange:disabled {
+  @apply cursor-not-allowed;
+}
+
+.glorious-input {
+  @apply relative w-full;
+}
+.glorious-input > input {
+  @apply w-full;
+}
+.glorious-input > input::placeholder {
+  @apply text-[14px];
+}
+.glorious-input.icon-xl > input {
+  @apply rtl:pr-9 ltr:pl-9;
+}
+.glorious-input.icon-lg > input {
+  @apply rtl:pr-9 ltr:pl-8;
+}
+.glorious-input.icon-md > input {
+  @apply rtl:pr-9 ltr:pl-8;
+}
+.glorious-input.icon-sm > input {
+  @apply rtl:pr-8 ltr:pl-8;
+}
+.glorious-input.icon-xsm > input {
+  @apply rtl:pr-8 ltr:pl-7;
+}
+
+.glorious-input-icon {
+  @apply absolute h-max top-0 bottom-0 my-auto rtl:right-1 ltr:left-1;
+}
+
+/* ----------------------------------------------- TAG */
+.glorious-input-tag {
+  @apply mt-3 gap-2 flex flex-wrap;
+}
+.glorious-input-tag > div {
+  @apply bg-green-500 px-1 rounded text-white flex items-center gap-2 cursor-pointer;
+}
+</style>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { onMounted, useId } from "#imports";
+const elementId = useId();
+const emits = defineEmits(["intersect"]);
+
+onMounted(() => {
+  const element: any = document.querySelector(
+    `#intersection-observe-${elementId}`
+  );
+
+  const observe: any = new IntersectionObserver((event: any) => {
+    if (event[0].isIntersecting) emits("intersect", true);
+  });
+
+  observe.observe(element);
+});
+</script>
+<template>
+  <div :id="`intersection-observe-${elementId}`">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = defineProps({
+  color: {
+    required: false,
+    default: "#fff",
+    type: String,
+  },
+  size: {
+    required: false,
+    default: 30,
+    type: Number,
+  },
+  stroke: {
+    required: false,
+    default: 3,
+    type: Number,
+  },
+});
+</script>
+
+<template>
+  <div class="inline">
+    <div
+      class="loader"
+      :style="{
+        width: `${props.size}px`,
+        border: `${props.stroke}px solid ${props.color}`,
+      }"
+    />
+  </div>
+</template>
+
+<style>
+.loader{animation:l20-1 .8s linear infinite alternate,l20-2 1.6s linear infinite;aspect-ratio:1;border-radius:50%}@keyframes l20-1{0%{-webkit-clip-path:polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,0 0,50% 0,50% 0,50% 0,50% 0,50% 0)}12.5%{-webkit-clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 0,100% 0,100% 0)}25%{-webkit-clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,100% 100%,100% 100%)}50%{-webkit-clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,50% 100%,0 100%);clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 100%,50% 100%,0 100%)}62.5%{-webkit-clip-path:polygon(50% 50%,100% 0,100% 0,100% 0,100% 100%,50% 100%,0 100%);clip-path:polygon(50% 50%,100% 0,100% 0,100% 0,100% 100%,50% 100%,0 100%)}75%{-webkit-clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0 100%);clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0 100%)}to{-webkit-clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%);clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0deg)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0deg)}to{transform:scaleY(-1) rotate(-135deg)}}
+</style>

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

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+const props = defineProps({
+  id: {
+    required: false,
+    default: "modal",
+    type: String,
+  },
+  size: {
+    required: false,
+    default: "md", //[sm,md,lg,xl,full]
+    type: String,
+  },
+  title: {
+    required: false,
+    default: "",
+    type: String,
+  },
+});
+</script>
+
+<template>
+  <div
+    :id="props.id"
+    :class="[`size-${props.size}`]"
+    class="glorious-modal close"
+  >
+    <!-- start title -->
+    <div v-if="props?.title !== ''" class="flex justify-between items-center">
+      <span class="font-medium">{{ props.title }}</span>
+      <GButton
+        class="flex justify-center items-center w-[10px]"
+        size="sm"
+        @click="$modal(`${props.id}`)"
+      >
+        <GIcon name="glorious-x" color="#fff" :size="10" />
+      </GButton>
+    </div>
+    <hr v-if="props.title !== ''" class="my-3" />
+    <!-- end title -->
+
+    <slot />
+  </div>
+</template>
+
+<style>
+.bg-blur-modal {
+  @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
+}
+
+.glorious-modal {
+  @apply fixed bg-white md:top-[15%] z-50 right-0 left-0 mx-auto p-3 md:rounded-md rounded-t-md md:bottom-0 bottom-0 overflow-y-auto;
+}
+.glorious-modal.size-full {
+  @apply w-full h-full top-0 rounded-none;
+}
+.glorious-modal.size-xl {
+  @apply md:w-[70%] w-full md:h-max max-h-[70%];
+}
+.glorious-modal.size-lg {
+  @apply md:w-[60%] w-full md:h-max max-h-[70%];
+}
+.glorious-modal.size-md {
+  @apply md:w-[50%] w-full md:h-max max-h-[70%];
+}
+.glorious-modal.size-sm {
+  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[70%];
+}
+.glorious-modal.close {
+  @apply hidden;
+}
+.glorious-modal.open {
+  animation: animation-mobile 0.3s normal forwards;
+}
+@screen md {
+  .glorious-modal.open {
+    animation: animation-opacity 0.2s normal forwards;
+  }
+}
+@keyframes animation-opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes animation-mobile {
+  to {
+    bottom: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { reactive, watch } from "#imports";
+const props = defineProps({
+  data: {
+    required: true,
+    type: Object,
+  },
+  modelValue: {
+    required: true,
+    type: Number,
+  },
+});
+const el = reactive({
+  pageList: [],
+});
+
+const emits = defineEmits(["update:modelValue"]);
+const methods = {
+  emit: (item: any) => {
+    if (props.data?.current_page !== item) emits("update:modelValue", item);
+  },
+  computePageList: () => {
+    let count: number = 0;
+
+    for (
+      let i: number = props.data?.current_page;
+      i > 0 && el.pageList.length <= 2;
+      i--
+    ) {
+      if (!el.pageList.includes(i)) el.pageList.push(i);
+
+      count++;
+    }
+
+    let page: number = props.data?.current_page;
+    while (count < 5 && page < props.data?.last_page) {
+      page++;
+
+      if (!el.pageList.includes(page)) el.pageList.push(page);
+
+      count++;
+    }
+
+    if (!el.pageList.includes(props.data?.current_page))
+      el.pageList.push(props.data?.current_page);
+
+    el.pageList = el.pageList.sort((a: number, b: number) => a - b);
+  },
+};
+methods.computePageList();
+watch(
+  () => props.data,
+  () => methods.computePageList(),
+  { deep: true }
+);
+</script>
+
+<template>
+  <div
+    v-if="props.data?.current_page && props.data?.last_page !== 1"
+    class="w-max glorious-paginate"
+  >
+    <div>
+      <ClientOnly>
+        <GIcon
+          v-if="props.data?.current_page !== 1"
+          class="ml-2 cursor-pointer"
+          name="glorious-arrow"
+          :size="15"
+          @click="methods.emit(props.data?.current_page - 1)"
+        />
+        <GIcon
+          v-else
+          name="glorious-arrow"
+          :size="15"
+          class="ml-2"
+          color="#cbd5e1"
+        />
+      </ClientOnly>
+
+      <div
+        v-for="(item, index) in el.pageList"
+        :key="index"
+        class="w-6 h-6 rounded-lg flex items-center justify-center paginate"
+        :class="[
+          props.data?.current_page === item ? 'active' : 'cursor-pointer',
+        ]"
+        @click="methods.emit(item)"
+      >
+        {{ item }}
+      </div>
+
+      <ClientOnly>
+        <GIcon
+          v-if="props.data?.current_page !== props.data?.last_page"
+          name="glorious-arrow"
+          class="mr-2 cursor-pointer"
+          :size="15"
+          @click="methods.emit(props.data?.current_page + 1)"
+        />
+        <GIcon
+          v-else
+          name="glorious-arrow"
+          color="#cbd5e1"
+          class="mr-2 cursor-pointer"
+        />
+      </ClientOnly>
+    </div>
+  </div>
+</template>
+
+<style>
+.glorious-paginate > div {
+  @apply border border-gray-50 rounded-xl h-8 flex items-center px-1 bg-white shadow-md gap-1 w-max;
+  direction: rtl;
+}
+.glorious-paginate > div > div {
+  @apply px-2;
+}
+.glorious-paginate > div > div:last-child {
+  @apply rotate-[180deg];
+}
+
+.paginate {
+  @apply text-[13px];
+}
+.paginate.active {
+  @apply bg-green-500 rounded-lg text-white font-bold text-[13px];
+}
+</style>