nuxt-glorious 1.2.3-9 → 1.2.4

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

@@ -1,56 +1,23 @@
 <script lang="ts" setup>
-import { useGloriousAppSetting } from "../../composables/useGloriousAppSetting";
-import { watch } from "#imports";
+import { watch } from '#imports'
+import _props from '../props/Drawer'
+import { createBlurDom, removeBlurDom } from '../helper'
 
-const props = defineProps({
-  modelValue: {
-    required: true,
-    default: false,
-    type: Boolean,
-  },
-  dir: {
-    require: false,
-    default: null,
-    type: String as () => "rtl" | "ltr",
-  },
-});
-
-const emits = defineEmits(["update:modelValue"]);
-
-const addBlurBackground = (): void => {
-  const backgroundBlur = document.createElement("div");
-  backgroundBlur.classList.add("glorious-scaffold-drawer-bg-blur");
-  const nuxt: any = document.getElementById("__nuxt");
-  nuxt.appendChild(backgroundBlur);
-  backgroundBlur.addEventListener("click", () => {
-    console.log("here");
-
-    emits("update:modelValue", false);
-    backgroundBlur.remove();
-  });
-};
+const props = defineProps(_props)
+const modelValue = defineModel()
 
 watch(
-  () => props.modelValue,
+  () => modelValue.value,
   () => {
-    if (props.modelValue) {
-      addBlurBackground();
-    } else {
-      const blur: any = document.querySelector(
-        ".glorious-scaffold-drawer-bg-blur"
-      );
-      if (blur !== null) blur.remove();
-    }
+    if (modelValue.value) createBlurDom(() => (modelValue.value = false))
+    else removeBlurDom()
   }
-);
+)
 </script>
 <template>
   <div
-    :class="[
-      props.dir === null ? useGloriousAppSetting.getSetting().dir : props.dir,
-      props.modelValue ? 'open' : 'close',
-    ]"
-    class="drawer close hidden"
+    :class="[props.position, modelValue ? 'open' : 'close']"
+    class="glorious-drawer close hidden"
   >
     <div class="w-full">
       <slot></slot>
@@ -58,60 +25,4 @@ watch(
   </div>
 </template>
 
-<style>
-.glorious-scaffold-drawer-bg-blur {
-  @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>
+<style lang="scss" src="../../assets/style/components/drawer.scss" />

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

@@ -1,30 +1,32 @@
 <script lang="ts" setup>
-import { onMounted } from "#imports";
+//SHOULD DEPRICATED
+import { onMounted } from '#imports'
 
 const props = defineProps({
   icon: {
     required: false,
-    default: "",
+    default: '',
     type: String,
   },
-});
+})
 
 const openDropdown = (event: any) =>
-  event.currentTarget.parentElement.parentElement.classList.toggle("open");
+  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");
+    if (!event.target.matches('.glorious-dropdown-button')) {
+      const allDropdown = document.querySelectorAll('.glorious-dropdown')
       allDropdown.forEach((item: any) => {
-        item.classList.remove("open");
-      });
+        item.classList.remove('open')
+      })
     }
-  };
-});
+  }
+})
 </script>
 <template>
   <div class="glorious-dropdown">
+    {{ props.icon }}
     <div>
       <button
         aria-label="dots"
@@ -33,7 +35,10 @@ onMounted(() => {
       >
         &nbsp;
       </button>
-      <GIcon :name="props.icon" color="#000" />
+      <GIcon
+        :name="props.icon"
+        color="#000"
+      />
     </div>
     <div>
       <slot />

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

@@ -1,20 +1,15 @@
 <script lang="ts" setup>
-import { GloriousStore } from "../../stores/GloriousStore";
+import { GloriousStore } from '../../stores/GloriousStore'
+import _props from '../props/ErrorText'
 
-const props = defineProps({
-  error: {
-    required: false,
-    default: "|",
-    type: String,
-  },
-});
-const gs = GloriousStore();
-const error: any = props.error.split("|");
+const props = defineProps(_props)
+const gs = GloriousStore()
+const error: any = props.error.split('|')
 </script>
 <template>
   <span
     v-if="gs.forms[error[0]]?.errors[error[1]]"
-    class="text-red-500 text-[14px]"
+    class="text-red-500 text-sm"
   >
     {{ gs.forms[error[0]].errors[error[1]][0] }}
   </span>

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

@@ -1,66 +1,40 @@
 <script lang="ts" setup>
-const props = defineProps({
-  modelValue: {
-    required: true,
-    type: null,
-  },
-  color: {
-    required: false,
-    default: "primary",
-    type: String as () => "orange" | "blue" | "gray" | "red" | "primary",
-  },
-  placeholder: {
-    required: false,
-    default: "choose file",
-    type: String,
-  },
-  title: {
-    required: false,
-    default: "file",
-    type: String,
-  },
-  text: {
-    required: false,
-    default: "No file has been selected",
-    type: String,
-  },
-  size: {
-    required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "xsm",
-  },
-  error: {
-    required: false,
-    default: "|",
-    type: String,
-  },
-});
-const emits = defineEmits(["update:modelValue"]);
+import _props from '../props/File'
+
+const props: any = defineProps(_props)
+const modelValue = defineModel()
 
 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";
-};
+  if (!event.target.files[0]) return
+  modelValue.value = 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 = props.text;
-  emits("update:modelValue", null);
-};
+  event.currentTarget.style.display = 'none'
+  event.currentTarget.previousElementSibling.innerText = props.text
+  modelValue.value = null
+}
 </script>
 <template>
   <div class="flex flex-col">
-    <span class="text-[14px] font-medium text-gray-500">{{ props.title }}</span>
+    <span class="text-sm 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]">
+      <div
+        class="placeholder"
+        :class="[`size-${props.size}`]"
+      >
         <span>{{ props.placeholder }}</span>
       </div>
-      <input type="file" class="hidden" @change="changeInput($event)" />
-      <span class="text-[12px]">{{ props.text }}</span>
+      <input
+        type="file"
+        class="hidden"
+        @change="changeInput($event)"
+      />
+      <span class="text-xs">{{ props.text }}</span>
       <GIcon
         name="glorious-x"
         color="#ff0000"
@@ -71,70 +45,4 @@ const deleteFile = (event: any) => {
   </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>
+<style lang="scss" src="../../assets/style/components/file.scss" />

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

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { ref, watch } from '#imports'
+import _props from '../props/Icon'
+const props = defineProps(_props)
+
+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
+    if (props.stroke !== null) {
+      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>
+  <div
+    class="w-max h-max"
+    v-html="icon"
+  />
+</template>