nuxt-glorious 0.7.9-7

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

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+const props = defineProps({
+  name: {
+    required: false,
+    default: "radio",
+    type: String,
+  },
+  value: {
+    required: false,
+    default: "radio",
+    type: [String, Number, null],
+  },
+  modelValue: {
+    required: false,
+    default: "",
+    type: [String, Number, null],
+  },
+  checked: {
+    required: false,
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emits: any = defineEmits(["update:modelValue"]);
+</script>
+
+<template>
+  <div>
+    <input
+      type="radio"
+      :name="props.name"
+      :value="props.value"
+      @click="emits('update:modelValue', props.value)"
+      :checked="props.checked"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import { GloriousStore, ref, watch } from "#imports";
+const props = defineProps({
+  modelValue: {
+    required: false,
+    default: null,
+    type: [String, Number],
+  },
+  options: {
+    required: true,
+    default: [],
+    type: Array<object>,
+  },
+  color: {
+    required: false,
+    default: "primary",
+    type: String,
+  },
+  size: {
+    required: false,
+    default: "md",
+    type: String,
+  },
+  title: {
+    required: false,
+    default: "",
+    type: String,
+  },
+  error: {
+    required: false,
+    default: "|",
+    type: String,
+  },
+  disabled: {
+    required: false,
+    default: false,
+    type: Boolean,
+  },
+  placeholder: {
+    required: false,
+    default: "",
+    type: String,
+  },
+});
+const selectValue = ref(null);
+const emits = defineEmits(["update:modelValue"]);
+watch(
+  () => selectValue.value,
+  () => {
+    emits("update:modelValue", selectValue.value);
+  }
+);
+
+const gs: any = GloriousStore();
+const error: any = props.error.split("|");
+
+// -------------------------------------- init value
+selectValue.value = props.modelValue;
+watch(
+  () => props.modelValue,
+  () => {
+    selectValue.value = props.modelValue;
+  }
+);
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <span class="text-[14px] font-medium text-gray-500">{{ props.title }}</span>
+    <select
+      v-model="selectValue"
+      aria-label="glorious select"
+      :disabled="props.disabled"
+      :class="[`glorious-select-${props.color}`, props.size]"
+    >
+      <option
+        v-for="(item, index) in props.options"
+        :key="index"
+        :value="item.value"
+      >
+        {{ item.text }}
+      </option>
+    </select>
+    <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-select-orange, .xl.glorious-select-blue, .xl.glorious-select-gray, .xl.glorious-select-red, .xl.glorious-select-primary {
+  @apply py-[0.657rem];
+}
+.lg.glorious-select-orange, .lg.glorious-select-blue, .lg.glorious-select-gray, .lg.glorious-select-red, .lg.glorious-select-primary {
+  @apply py-[0.532rem];
+}
+.md.glorious-select-orange, .md.glorious-select-blue, .md.glorious-select-gray, .md.glorious-select-red, .md.glorious-select-primary {
+  @apply py-[0.407rem];
+}
+.sm.glorious-select-orange, .sm.glorious-select-blue, .sm.glorious-select-gray, .sm.glorious-select-red, .sm.glorious-select-primary {
+  @apply py-[0.282rem];
+}
+.xsm.glorious-select-orange, .xsm.glorious-select-blue, .xsm.glorious-select-gray, .xsm.glorious-select-red, .xsm.glorious-select-primary {
+  @apply py-[0.157rem];
+}
+
+.glorious-select-orange:focus-visible, .glorious-select-blue:focus-visible, .glorious-select-gray:focus-visible, .glorious-select-red:focus-visible, .glorious-select-primary:focus-visible {
+  @apply outline-none ring-2;
+}
+
+.glorious-select-primary {
+  @apply rounded-md ring-1 ring-green-500 px-3 text-gray-500 text-[14px];
+}
+.glorious-select-primary:disabled {
+  @apply cursor-not-allowed;
+}
+
+.glorious-select-red {
+  @apply rounded-md ring-1 ring-red-500 px-3;
+}
+.glorious-select-red:disabled {
+  @apply cursor-not-allowed;
+}
+
+.glorious-select-gray {
+  @apply rounded-md ring-1 ring-gray-500 px-3;
+}
+.glorious-select-gray:disabled {
+  @apply cursor-not-allowed;
+}
+
+.glorious-select-blue {
+  @apply rounded-md ring-1 ring-blue-500 px-3;
+}
+.glorious-select-blue:disabled {
+  @apply cursor-not-allowed;
+}
+
+.glorious-select-orange {
+  @apply rounded-md ring-1 ring-orange-500 px-3;
+}
+.glorious-select-orange:disabled {
+  @apply cursor-not-allowed;
+}
+</style>

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

@@ -0,0 +1,57 @@
+<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"]);
+const tabClicked: any = (key: string, event: any) => {
+  emits("update:modelValue", key);
+  Array.from(event.currentTarget.parentElement.parentElement.children).map(
+    (item: any) => item.children[0].classList.remove("active")
+  );
+  event.currentTarget.classList.add("active");
+};
+</script>
+
+<template>
+  <div class="glorious-tab">
+    <div
+      v-for="(item, index) in props.items"
+      :key="index"
+      class="flex justify-center"
+      :style="{ flexBasis: `${100 / props.items.length}%` }"
+    >
+      <button
+        :class="item.active ? `active` : ''"
+        @click="tabClicked(item.key, $event)"
+      >
+        {{ item.text }}
+      </button>
+    </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>

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

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { watch } from "#imports";
+const props = defineProps({
+  items: {
+    required: true,
+    type: Object,
+  },
+  step: {
+    required: true,
+    type: Number,
+    default: 1,
+  },
+  progressColor: {
+    required: false,
+    default: "#00ff00",
+    type: String,
+  },
+  bgColor: {
+    required: false,
+    default: "0000ff",
+    type: String,
+  },
+});
+
+const methods = {
+  computeWizardMobile: () => {
+    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");
+      console.log(props.step);
+      const eachStep = (1 / props.items.length) * 100;
+      let startValue =
+        Number(progressBar.getAttribute("data-percentage")) - eachStep < 0
+          ? 0
+          : Number(progressBar.getAttribute("data-percentage"));
+
+      const endValue: any =
+          props.step === 0
+            ? 0
+            : Number(progressBar.getAttribute("data-percentage")) + eachStep,
+        progressColor = progressBar.getAttribute("data-progress-color");
+      console.log(startValue, endValue);
+      const progress = setInterval(() => {
+        progressValue.textContent = props.step + 1;
+
+        innerCircle.style.backgroundColor = `${progressBar.getAttribute(
+          "data-inner-circle-color"
+        )}`;
+
+        progressBar.style.background = `conic-gradient(${progressColor} ${
+          startValue * 3.6
+        }deg,${progressBar.getAttribute("data-bg-color")} 0deg)`;
+        if (startValue === endValue) {
+          clearInterval(progress);
+        }
+        startValue++;
+      }, 10);
+    });
+  },
+};
+
+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 class="circle" :class="index < props.step ? 'checked' : ''">
+          <GIcon
+            v-if="index < props.step"
+            name="glorious-check-fill"
+            color="#ffffff"
+          />
+
+          <span v-else>{{ index }}</span>
+        </div>
+        <span class="text-[14px] font-medium">{{ item }}</span>
+      </div>
+    </div>
+    <div class="glorious-wizard-mobile">
+      <div
+        class="circular-progress"
+        :style="{ width: '48px', height: '48px' }"
+        :data-percentage="(props.step / props.items.length) * 100"
+        :data-progress-color="props.progressColor"
+        :data-bg-color="props.bgColor"
+      >
+        <div
+          class="inner-circle"
+          :class="[props.step === props.items.length ? 'checked' : '']"
+          :style="{ width: '44px', height: '44px' }"
+        />
+        <p
+          v-show="props.step !== props.items.length"
+          class="percentage text-blue-500"
+        >
+          {{ props.step + 1 }}
+        </p>
+        <GIcon
+          v-show="props.step === props.items.length"
+          name="glorious-check-fill"
+          color="#ffffff"
+        />
+      </div>
+      <span>{{ props.items[props.step] }}</span>
+    </div>
+  </div>
+</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 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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { GloriousStore, ref, watch } 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,
+  },
+  disabled: {
+    required: false,
+    default: false,
+    type: Boolean,
+  },
+  autocomplete: {
+    required: false,
+    default: "off",
+    type: String,
+  },
+});
+
+const inputValue: any = ref(null);
+if (props.modelValue !== "") inputValue.value = props.modelValue;
+const emits = defineEmits(["update:modelValue"]);
+watch(
+  () => inputValue.value,
+  () => emits("update:modelValue", inputValue.value)
+);
+
+const gs: any = GloriousStore();
+const error: any = props.error.split("|");
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <span class="text-[14px] 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}`]"
+        :placeholder="props.placeholder"
+        :disabled="props.disabled"
+      />
+    </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-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>

package/dist/runtime/composables/useGloriousAppSetting.d.ts

@@ -0,0 +1,11 @@
+interface appSettingInterface {
+    dir?: String;
+    darkMode?: Boolean;
+}
+export declare const useGloriousAppSetting: {
+    getSetting: () => appSettingInterface;
+    setSetting: (key: any, value: any) => void;
+    setDarkMode: () => void;
+    setDir: (type: "rtl" | "ltr") => void;
+};
+export {};

package/dist/runtime/composables/useGloriousAppSetting.mjs

@@ -0,0 +1,37 @@
+import { useCookie } from "#imports";
+import defu from "defu";
+const defaultSetting = {
+  dir: "rtl",
+  darkMode: false
+};
+export const useGloriousAppSetting = {
+  getSetting: () => {
+    const appSetting = useCookie("glorious-app-setting");
+    let result = {};
+    if (typeof appSetting.value === "undefined") {
+      appSetting.value = defaultSetting;
+      result = defaultSetting;
+    } else
+      result = defu(appSetting.value, defaultSetting);
+    return result;
+  },
+  setSetting: (key, value) => {
+    const setting = useGloriousAppSetting.getSetting();
+    setting[key] = value;
+    const appSetting = useCookie("glorious-app-setting");
+    appSetting.value[key] = value;
+  },
+  setDarkMode: () => {
+    const html = document.getElementsByTagName("html")[0];
+    useGloriousAppSetting.setSetting(
+      "darkMode",
+      !html.classList.contains("dark")
+    );
+    html.classList.toggle("dark");
+  },
+  setDir: (type) => {
+    const html = document.getElementsByTagName("html")[0];
+    html.dir = type;
+    useGloriousAppSetting.setSetting("dir", type);
+  }
+};

package/dist/runtime/composables/useGloriousFetch.d.ts

@@ -0,0 +1,13 @@
+interface gloriousFetchOptions {
+    gKey?: String;
+    params?: Object;
+    server?: Boolean;
+    is$?: Boolean;
+    lazy?: Boolean;
+    headers?: Object;
+    body?: Object;
+    method?: "POST" | "GET" | "PATCH" | "PUT" | "DELETE" | "HEAD";
+    credentials?: "same-origin" | "include";
+}
+export default function (url: string, options: gloriousFetchOptions): Promise<unknown>;
+export {};

package/dist/runtime/composables/useGloriousFetch.mjs

@@ -0,0 +1,107 @@
+import { useCookie, useFetch, useRuntimeConfig } from "nuxt/app";
+import { GloriousStore } from "../stores/GloriousStore.mjs";
+import defu from "defu";
+const defaultOptions = {
+  server: false,
+  method: "GET",
+  lazy: true,
+  is$: true,
+  params: {},
+  headers: {
+    Accept: "application/json"
+  },
+  body: {},
+  credentials: "same-origin"
+};
+export default function(url, options) {
+  const moduleConfig = useRuntimeConfig();
+  options = defu(moduleConfig.public.glorious.fetch, options, defaultOptions);
+  const gs = GloriousStore();
+  const gKey = computeGKey(options.gKey, url);
+  options.params = computeParams(options.params);
+  options.headers = { ...options.headers, ...computeAuth() };
+  if (Object.entries(options.body).length === 0)
+    delete options.body;
+  if (Object.prototype.hasOwnProperty.call(options, "bodyType") && options.bodyType === "formData") {
+    const form = new FormData();
+    Object.entries(options.body).forEach((item) => {
+      if (item[1] === null)
+        return;
+      if (Object.prototype.hasOwnProperty.call(options, "fileKey") && options.fileKey.includes(item[0]))
+        form.append(item[0], item[1]);
+      else {
+        if (typeof item[1] === "object")
+          Object.entries(item[1]).forEach((nestedItem, index) => {
+            form.append(`${item[0]}[${index}]`, nestedItem[1]);
+          });
+        else
+          form.append(`${item[0]}`, item[1]);
+      }
+    });
+    options.body = form;
+  }
+  const opt = {
+    ...options,
+    onRequest() {
+      try {
+        gs.loading[gKey] = true;
+      } catch (e) {
+      }
+    },
+    onResponse({ response: res }) {
+      try {
+        gs.loading[gKey] = false;
+        gs.forms[gKey].errors = [];
+        if (res.status >= 200 && res.status <= 299 && Object.prototype.hasOwnProperty.call(options, "saveBody") && !options.saveBody)
+          gs.forms[gKey].form = {};
+      } catch (e) {
+      }
+    },
+    async onResponseError({ response: res }) {
+      const fetch = import.meta.glob("/glorious/fetch.ts");
+      if (typeof fetch["/glorious/fetch.ts"] !== "undefined")
+        fetch["/glorious/fetch.ts"]().then((data) => {
+          data.fetchHandler.onResponseError(res, gKey);
+        });
+      else {
+        if (res.status === 422) {
+          try {
+            gs.forms[gKey].errors = res._data.errors;
+          } catch (e) {
+          }
+        }
+        if (res.status === 401 && process.client) {
+          const cookieToken = useCookie(moduleConfig.auth.cookie.name);
+          if (typeof cookieToken.value !== "undefined")
+            gs.authLogout();
+        }
+      }
+    }
+  };
+  if (opt.method === "GET" && typeof opt.body !== "undefined") {
+    opt.method = "POST";
+    return $fetch(url, opt);
+  } else if (opt.method === "GET" && typeof opt.body === "undefined" && !opt.is$)
+    return useFetch(url, opt);
+  else
+    return $fetch(url, opt);
+}
+function computeParams(params) {
+  const computeParams2 = {};
+  Object.entries(params).map((item) => {
+    if (item[1] !== null && item[1] !== "")
+      computeParams2[item[0]] = item[1];
+  });
+  return computeParams2;
+}
+function computeGKey(gKey, url) {
+  return typeof gKey !== "undefined" ? gKey : url.split("/")[url.split("/").length - 1];
+}
+function computeAuth() {
+  const moduleConfig = useRuntimeConfig();
+  const header = {};
+  const token = useCookie(moduleConfig.public.glorious.auth.cookie.name);
+  if (typeof token.value !== "undefined")
+    header.Authorization = "Bearer " + token.value;
+  return header;
+}

package/dist/runtime/composables/useGloriousHead.d.ts

@@ -0,0 +1,8 @@
+interface headInterface {
+    title?: string;
+    description?: string;
+    image?: string;
+    type?: string;
+}
+export default function (object?: headInterface): void;
+export {};