nuxt-glorious 0.7.9-7

package/dist/runtime/assets/style/components/textarea.css

@@ -0,0 +1,64 @@
+.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];
+}

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

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+const props = defineProps({
+  items: {
+    required: true,
+    type: Object,
+  },
+});
+</script>
+
+<template>
+  <div class="flex gap-1 flex-wrap">
+    <div
+      v-for="(item, key, index) in props.items"
+      :key="index"
+      class="flex items-center gap-1 flex-wrap"
+    >
+      <nuxt-link
+        v-if="index !== Object.entries(props.items).length - 1"
+        :to="key"
+        class="text-gray-500 hover:text-gray-800"
+      >
+        {{ item }}
+      </nuxt-link>
+
+      <span
+        v-if="index === Object.entries(props.items).length - 1"
+        class="text-gray-600 font-medium"
+      >
+        {{ item }}
+      </span>
+
+      <GIcon
+        v-if="index !== Object.entries(props.items).length - 1"
+        name="glorious-arrow"
+        style="rotate: 180deg"
+        :size="10"
+        color="#6b7280"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+const props = defineProps({
+  color: {
+    required: false,
+    default: "primary",
+    type: String,
+  },
+  size: {
+    required: false,
+    default: "md",
+    type: String,
+  },
+  outline: {
+    required: false,
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    required: false,
+    default: false,
+    type: Boolean,
+  },
+  loading: {
+    requried: false,
+    default: false,
+    type: Boolean,
+  },
+  to: {
+    requried: false,
+    default: "",
+    type: String,
+  },
+  ariaLabel: {
+    requried: false,
+    default: "",
+    type: String,
+  },
+});
+</script>
+
+<template>
+  <button
+    v-if="props.to === ''"
+    :aria-label="props.ariaLabel"
+    :class="[
+      `glorious-button-${props.color}`,
+      props.size,
+      props.outline ? 'outline' : '',
+    ]"
+    :disabled="props.disabled"
+  >
+    <div v-if="props.loading" class="loading">
+      <GLoading />
+    </div>
+    <slot v-else />
+  </button>
+  <NuxtLink
+    v-else
+    :to="props.to"
+    :class="[
+      `glorious-button-${props.color}`,
+      props.size,
+      props.outline ? 'outline' : '',
+    ]"
+    :disabled="props.disabled"
+  >
+    <div v-if="props.loading" class="loading">
+      <GLoading />
+    </div>
+    <slot v-else />
+  </NuxtLink>
+</template>
+
+<style>
+.xl.glorious-button-orange, .xl.glorious-button-blue, .xl.glorious-button-gray, .xl.glorious-button-red, .xl.glorious-button-primary {
+  @apply py-2.5;
+}
+.xl.glorious-button-orange > div.loading > div > div, .xl.glorious-button-blue > div.loading > div > div, .xl.glorious-button-gray > div.loading > div > div, .xl.glorious-button-red > div.loading > div > div, .xl.glorious-button-primary > div.loading > div > div {
+  @apply w-[24px] !important;
+}
+.lg.glorious-button-orange, .lg.glorious-button-blue, .lg.glorious-button-gray, .lg.glorious-button-red, .lg.glorious-button-primary {
+  @apply py-2;
+}
+.lg.glorious-button-orange > div.loading > div > div, .lg.glorious-button-blue > div.loading > div > div, .lg.glorious-button-gray > div.loading > div > div, .lg.glorious-button-red > div.loading > div > div, .lg.glorious-button-primary > div.loading > div > div {
+  @apply w-[24px] !important;
+}
+.md.glorious-button-orange, .md.glorious-button-blue, .md.glorious-button-gray, .md.glorious-button-red, .md.glorious-button-primary {
+  @apply py-1.5;
+}
+.md.glorious-button-orange > div.loading > div > div, .md.glorious-button-blue > div.loading > div > div, .md.glorious-button-gray > div.loading > div > div, .md.glorious-button-red > div.loading > div > div, .md.glorious-button-primary > div.loading > div > div {
+  @apply w-[24px] !important;
+}
+.sm.glorious-button-orange, .sm.glorious-button-blue, .sm.glorious-button-gray, .sm.glorious-button-red, .sm.glorious-button-primary {
+  @apply py-1;
+}
+.sm.glorious-button-orange > div.loading > div > div, .sm.glorious-button-blue > div.loading > div > div, .sm.glorious-button-gray > div.loading > div > div, .sm.glorious-button-red > div.loading > div > div, .sm.glorious-button-primary > div.loading > div > div {
+  @apply w-[24px] !important;
+}
+.xsm.glorious-button-orange, .xsm.glorious-button-blue, .xsm.glorious-button-gray, .xsm.glorious-button-red, .xsm.glorious-button-primary {
+  @apply py-0.5;
+}
+.xsm.glorious-button-orange > div.loading > div > div, .xsm.glorious-button-blue > div.loading > div > div, .xsm.glorious-button-gray > div.loading > div > div, .xsm.glorious-button-red > div.loading > div > div, .xsm.glorious-button-primary > div.loading > div > div {
+  @apply w-[24px] !important;
+}
+
+.outline.glorious-button-orange, .outline.glorious-button-blue, .outline.glorious-button-gray, .outline.glorious-button-red, .outline.glorious-button-primary {
+  @apply bg-transparent border outline-none;
+}
+
+.glorious-button-orange > div.loading, .glorious-button-blue > div.loading, .glorious-button-gray > div.loading, .glorious-button-red > div.loading, .glorious-button-primary > div.loading {
+  @apply flex justify-center items-center;
+}
+
+.glorious-button-primary {
+  @apply bg-green-700 hover:bg-green-600 rounded-md text-white border-green-500 px-3;
+}
+.glorious-button-primary.outline {
+  @apply text-gray-500 hover:bg-green-100;
+}
+.glorious-button-primary:disabled {
+  @apply bg-green-300 cursor-not-allowed;
+}
+
+.glorious-button-red {
+  @apply bg-red-500 hover:bg-red-600 rounded-md text-white border-red-500 px-3;
+}
+.glorious-button-red.outline {
+  @apply text-gray-500 hover:bg-red-100;
+}
+.glorious-button-red:disabled {
+  @apply bg-red-300 cursor-not-allowed;
+}
+
+.glorious-button-gray {
+  @apply bg-gray-500 hover:bg-gray-600 rounded-md text-white border-gray-500 px-3;
+}
+.glorious-button-gray.outline {
+  @apply text-gray-500 hover:bg-gray-100;
+}
+.glorious-button-gray:disabled {
+  @apply bg-gray-300 cursor-not-allowed;
+}
+
+.glorious-button-blue {
+  @apply bg-blue-500 hover:bg-blue-600 rounded-md text-white border-blue-500 px-3;
+}
+.glorious-button-blue.outline {
+  @apply text-gray-500 hover:bg-blue-100;
+}
+.glorious-button-blue:disabled {
+  @apply bg-blue-300 cursor-not-allowed;
+}
+
+.glorious-button-orange {
+  @apply bg-orange-500 hover:bg-orange-600 rounded-md text-white border-orange-500 px-3;
+}
+.glorious-button-orange.outline {
+  @apply text-gray-500 hover:bg-orange-100;
+}
+.glorious-button-orange:disabled {
+  @apply bg-orange-300 cursor-not-allowed;
+}
+</style>

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

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { onMounted, ref } from "#imports";
+
+const isEnd = ref<Boolean>(false);
+const props = defineProps({
+  second: {
+    required: true,
+    type: Number,
+  },
+  className: {
+    required: true,
+    type: String,
+    default: "flex text-gray-500 font-medium",
+  },
+});
+
+onMounted(() => {
+  const currentSecond = props.second;
+  let second = props.second;
+  const countInterval = setInterval(() => {
+    try {
+      second--;
+      let timeString = "";
+
+      if (currentSecond <= 60)
+        timeString =
+          "00:" + (second.toString().length === 1 ? "0" + second : second);
+      else {
+        let minute: number | string = Math.floor(second / 60);
+        if (minute >= 1) {
+          const computeSecond = second - minute * 60;
+          const computeSecond2 =
+            computeSecond.toString().length === 1
+              ? "0" + computeSecond
+              : computeSecond;
+          minute = minute.toString().length === 1 ? "0" + minute : minute;
+          timeString = minute + ":" + computeSecond2;
+        } else {
+          timeString =
+            "00:" + (second.toString().length === 1 ? "0" + second : second);
+        }
+      }
+
+      document.getElementById("countDown").innerText = timeString;
+
+      if (second === 0) {
+        isEnd.value = true;
+        clearInterval(countInterval);
+      }
+    } catch (e) {
+      clearInterval(countInterval);
+    }
+  }, 1000);
+});
+</script>
+<template>
+  <div>
+    <slot v-if="isEnd" name="end" />
+    <div v-else :class="props.className">
+      <slot name="one"></slot>
+      <div id="countDown" />
+      <slot name="two"></slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { useGloriousAppSetting } from "../../composables/useGloriousAppSetting";
+
+const props = defineProps({
+  id: {
+    required: false,
+    default: "drawer",
+    type: String,
+  },
+});
+</script>
+<template>
+  <div
+    :id="props.id"
+    :class="[useGloriousAppSetting.getSetting().dir]"
+    class="drawer close hidden"
+  >
+    <div class="w-full">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+.bg-blur-drawer {
+  @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
+}
+
+.drawer {
+  @apply fixed top-0 bg-white h-full w-[300px] z-[50];
+}
+.drawer.close.rtl {
+  animation: drawer-close-right 250ms normal forwards;
+}
+.drawer.close.ltr {
+  animation: drawer-close-left 250ms normal forwards;
+}
+.drawer.open {
+  @apply flex;
+}
+.drawer.open.rtl {
+  animation: drawer-open-right 100ms normal forwards;
+}
+.drawer.open.ltr {
+  animation: drawer-open-left 100ms normal forwards;
+}
+
+@keyframes drawer-open-left {
+  from {
+    @apply left-[-300px];
+  }
+  to {
+    @apply left-0;
+  }
+}
+@keyframes drawer-open-right {
+  from {
+    @apply right-[-300px];
+  }
+  to {
+    @apply right-0;
+  }
+}
+@keyframes drawer-close-right {
+  from {
+    @apply right-0;
+  }
+  to {
+    @apply right-[-300px] hidden;
+  }
+}
+@keyframes drawer-close-left {
+  from {
+    @apply left-0;
+  }
+  to {
+    @apply left-[-300px] hidden;
+  }
+}
+</style>

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

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { onMounted } from "#imports";
+
+const props = defineProps({
+  icon: {
+    required: false,
+    default: "",
+    type: String,
+  },
+});
+
+const openDropdown = (event: any) =>
+  event.currentTarget.parentElement.parentElement.classList.toggle("open");
+
+onMounted(() => {
+  window.onclick = (event: any) => {
+    if (!event.target.matches(".glorious-dropdown-button")) {
+      const allDropdown = document.querySelectorAll(".glorious-dropdown");
+      allDropdown.forEach((item: any) => {
+        item.classList.remove("open");
+      });
+    }
+  };
+});
+</script>
+<template>
+  <div class="glorious-dropdown">
+    <div>
+      <button
+        aria-label="dots"
+        class="glorious-dropdown-button"
+        @click.prevent="openDropdown($event)"
+      >
+        &nbsp;
+      </button>
+      <GIcon :name="props.icon" :color="$tailwindColor('gray', '500')" />
+    </div>
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.glorious-dropdown {
+  @apply relative;
+}
+.glorious-dropdown > div:last-child {
+  @apply hidden;
+}
+.glorious-dropdown > div:first-child {
+  @apply relative;
+}
+.glorious-dropdown > div:first-child > button {
+  @apply z-[30] w-5 relative;
+}
+.glorious-dropdown > div:first-child > div:nth-child(2) {
+  @apply absolute top-0 bottom-0 my-auto z-[20];
+}
+.glorious-dropdown.open > div:last-child {
+  @apply bg-white px-2 py-2 rounded-md shadow absolute z-[41] left-[16px] top-5 flex;
+}
+</style>

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

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { GloriousStore } from "#imports";
+const props = defineProps({
+  modelValue: {
+    required: false,
+    default: "",
+    type: String,
+  },
+  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,
+  },
+});
+const gs: any = GloriousStore();
+const error: any = props.error.split("|");
+const emits = defineEmits(["update:modelValue"]);
+
+const changeInput = (event: any) => {
+  if (!event.target.files[0]) return;
+  emits("update:modelValue", event.target.files[0]);
+  event.target.nextElementSibling.innerText = event.target.files[0].name;
+  event.target.nextElementSibling.nextElementSibling.style.display = "flex";
+};
+const deleteFile = (event: any) => {
+  event.currentTarget.style.display = "none";
+  event.currentTarget.previousElementSibling.innerText =
+    "فایلی انتخاب نشده است";
+  emits("update:modelValue", null);
+};
+</script>
+<template>
+  <div class="flex flex-col">
+    <span class="text-[14px] font-medium text-gray-500">{{ props.title }}</span>
+    <label
+      :class="[`glorious-file-${props.color}`]"
+      class="flex items-center gap-3 text-gray-500"
+    >
+      <div class="placeholder" :class="[props.size]">
+        <span>{{ props.placeholder }}</span>
+      </div>
+      <input type="file" class="hidden" @change="changeInput($event)" />
+      <span class="text-[12px]">فایلی انتخاب نشده است</span>
+      <GIcon
+        name="glorious-x"
+        color="#ff0000"
+        @click.prevent="deleteFile($event)"
+      />
+    </label>
+    <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>
+.glorious-file-orange > div.xl.placeholder, .glorious-file-blue > div.xl.placeholder, .glorious-file-gray > div.xl.placeholder, .glorious-file-red > div.xl.placeholder, .glorious-file-primary > div.xl.placeholder {
+  @apply py-2.5;
+}
+.glorious-file-orange > div.lg.placeholder, .glorious-file-blue > div.lg.placeholder, .glorious-file-gray > div.lg.placeholder, .glorious-file-red > div.lg.placeholder, .glorious-file-primary > div.lg.placeholder {
+  @apply py-2;
+}
+.glorious-file-orange > div.md.placeholder, .glorious-file-blue > div.md.placeholder, .glorious-file-gray > div.md.placeholder, .glorious-file-red > div.md.placeholder, .glorious-file-primary > div.md.placeholder {
+  @apply py-1.5;
+}
+.glorious-file-orange > div.sm.placeholder, .glorious-file-blue > div.sm.placeholder, .glorious-file-gray > div.sm.placeholder, .glorious-file-red > div.sm.placeholder, .glorious-file-primary > div.sm.placeholder {
+  @apply py-1;
+}
+.glorious-file-orange > div.xsm.placeholder, .glorious-file-blue > div.xsm.placeholder, .glorious-file-gray > div.xsm.placeholder, .glorious-file-red > div.xsm.placeholder, .glorious-file-primary > div.xsm.placeholder {
+  @apply py-0.5;
+}
+
+.glorious-file-primary {
+  @apply rounded-md ring-1 ring-green-500 overflow-hidden cursor-pointer relative;
+}
+.glorious-file-primary > div.placeholder {
+  @apply bg-green-500 text-white px-3 w-max;
+}
+.glorious-file-primary > div:last-child {
+  @apply absolute left-3 hidden;
+}
+
+.glorious-file-red {
+  @apply rounded-md ring-1 ring-red-500 px-3 cursor-pointer relative;
+}
+.glorious-file-red > div.placeholder {
+  @apply bg-green-500 text-white px-3 w-max;
+}
+.glorious-file-red > div:last-child {
+  @apply absolute left-3;
+}
+
+.glorious-file-gray {
+  @apply rounded-md ring-1 ring-gray-500 px-3 cursor-pointer relative;
+}
+.glorious-file-gray > div.placeholder {
+  @apply bg-green-500 text-white px-3 w-max;
+}
+.glorious-file-gray > div:last-child {
+  @apply absolute left-3;
+}
+
+.glorious-file-blue {
+  @apply rounded-md ring-1 ring-blue-500 px-3 cursor-pointer relative;
+}
+.glorious-file-blue > div.placeholder {
+  @apply bg-green-500 text-white px-3 w-max;
+}
+.glorious-file-blue > div:last-child {
+  @apply absolute left-3;
+}
+
+.glorious-file-orange {
+  @apply rounded-md ring-1 ring-orange-500 px-3 cursor-pointer relative;
+}
+.glorious-file-orange > div.placeholder {
+  @apply bg-green-500 text-white px-3 w-max;
+}
+.glorious-file-orange > div:last-child {
+  @apply absolute left-3;
+}
+</style>