nuxt-glorious 2.0.0-develop-30 → 2.0.0-develop-32

package/dist/module.d.mts

@@ -34,6 +34,11 @@ interface ModuleOptions {
         };
     };
     components: {
+        accordion: {
+            props: {
+                color?: string;
+            };
+        };
         alert: {
             props: {
                 color?: string;

package/dist/module.d.ts

@@ -34,6 +34,11 @@ interface ModuleOptions {
         };
     };
     components: {
+        accordion: {
+            props: {
+                color?: string;
+            };
+        };
         alert: {
             props: {
                 color?: string;

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "2.0.0-develop-30"
+  "version": "2.0.0-develop-32"
 }

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

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import _props from './../props/Accordion'
+import { getAttribute } from '../helper'
+
+const props = defineProps(_props)
+const openAccordion = (e: Event) => {
+  const headerElement = e.currentTarget as HTMLElement
+  const bodyElement = headerElement.nextElementSibling as HTMLElement
+  if (bodyElement.style.maxHeight) {
+    headerElement.classList.remove('accordion-open')
+    bodyElement.style.removeProperty('max-height')
+  } else {
+    headerElement.classList.add('accordion-open')
+    bodyElement.style.maxHeight = bodyElement.scrollHeight + 24 + 'px'
+  }
+}
+</script>
+
+<template>
+  <div
+    class="glorious-accordion"
+    :class="`color-${getAttribute(props.color, 'accordion', 'color')}`"
+  >
+    <div
+      class="header"
+      @click="openAccordion"
+    >
+      <div>
+        <slot name="header" />
+      </div>
+      <GIcon
+        name="glorious-arrow"
+        :size="10"
+      />
+    </div>
+    <div class="body">
+      <slot name="body" />
+    </div>
+  </div>
+</template>

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

@@ -5,12 +5,27 @@ import _props from '../props/ErrorText'
 const props = defineProps(_props)
 const gs = GloriousStore()
 const error: any = props.error.split('|')
+const isAll = () => error.length === 1
 </script>
 <template>
-  <span
-    v-if="gs.forms[error[0]]?.errors[error[1]]"
-    class="validation-error-text text-red-500 text-sm"
-  >
-    {{ gs.forms[error[0]].errors[error[1]][0] }}
-  </span>
+  <div>
+    <span
+      v-if="gs.forms[error[0]]?.errors[error[1]] && !isAll()"
+      class="validation-error-text text-red-500 text-sm"
+    >
+      {{ gs.forms[error[0]].errors[error[1]][0] }}
+    </span>
+    <ul
+      v-else-if="isAll()"
+      class="flex flex-col list-disc ltr:ml-4 rtl:mr-4"
+    >
+      <li
+        v-for="(item, index) in gs.forms[error[0]].errors"
+        :key="index"
+        class="text-sm"
+      >
+        <span class="validation-error-text">{{ item[0] }}</span>
+      </li>
+    </ul>
+  </div>
 </template>

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

@@ -79,6 +79,9 @@ const isSelected = (value: any): boolean => {
   )
 }
 const addTagViaOption = (option: any, event: any) => {
+  if (event.currentTarget.classList.contains('disabled')) {
+    event.stopPropagation()
+  }
   //   event.stopPropagation() if want not close with window
   if (
     typeof tags.value === 'string' ||

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

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

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

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

package/dist/runtime/style/style.css

@@ -1,4 +1,68 @@
 @charset "UTF-8";
+.glorious-accordion {
+  @apply border rounded h-max text-sm cursor-pointer;
+}
+.glorious-accordion.color-orange {
+  @apply border-orange-500;
+}
+.glorious-accordion.color-orange div.header:hover {
+  @apply rounded bg-orange-100;
+}
+.glorious-accordion.color-orange.accordion-open + div.body {
+  @apply mt-2 pt-3 border-t border-orange-500;
+}
+.glorious-accordion.color-blue {
+  @apply border-blue-500;
+}
+.glorious-accordion.color-blue div.header:hover {
+  @apply rounded bg-blue-100;
+}
+.glorious-accordion.color-blue.accordion-open + div.body {
+  @apply mt-2 pt-3 border-t border-blue-500;
+}
+.glorious-accordion.color-gray {
+  @apply border-gray-500;
+}
+.glorious-accordion.color-gray div.header:hover {
+  @apply rounded bg-gray-100;
+}
+.glorious-accordion.color-gray.accordion-open + div.body {
+  @apply mt-2 pt-3 border-t border-gray-500;
+}
+.glorious-accordion.color-red {
+  @apply border-red-500;
+}
+.glorious-accordion.color-red div.header:hover {
+  @apply rounded bg-red-100;
+}
+.glorious-accordion.color-red.accordion-open + div.body {
+  @apply mt-2 pt-3 border-t border-red-500;
+}
+.glorious-accordion.color-green {
+  @apply border-green-500;
+}
+.glorious-accordion.color-green div.header:hover {
+  @apply rounded bg-green-100;
+}
+.glorious-accordion.color-green.accordion-open + div.body {
+  @apply mt-2 pt-3 border-t border-green-500;
+}
+.glorious-accordion div.header {
+  @apply p-3 flex justify-between items-center;
+}
+.glorious-accordion div.header div:last-child {
+  @apply rotate-90 transition-[rotate] duration-300 ease-out text-sm;
+}
+.glorious-accordion div.header.accordion-open div:last-child {
+  @apply rotate-270 transition-[rotate] duration-300 ease-out;
+}
+.glorious-accordion div.header.accordion-open + div.body {
+  @apply border-t py-3;
+}
+.glorious-accordion div.body {
+  @apply px-3 max-h-0 overflow-hidden transition-all duration-300 ease-out text-sm;
+}
+
 .glorious-alert {
   @apply p-3 rounded-md shadow-md;
 }
@@ -733,6 +797,13 @@ button:focus-visible {
     transform: scaleY(-1) rotate(-135deg);
   }
 }
+html:has(.glorious-scaffold-modal.open) {
+  @apply overflow-hidden;
+}
+html:has(.glorious-scaffold-modal.open) div.glorious-input-options {
+  @apply md:!fixed !absolute;
+}
+
 .glorious-scaffold-modal {
   @apply fixed bg-white md:top-[15%] z-50 right-0 left-0 mx-auto md:rounded-md rounded-t-md md:bottom-0 bottom-0;
 }
@@ -743,7 +814,7 @@ button:focus-visible {
   @apply flex justify-between items-center px-3 pt-3;
 }
 .glorious-scaffold-modal-content {
-  @apply overflow-y-auto max-h-150 px-3 pb-3;
+  @apply overflow-y-auto max-h-[50vh] px-3 pb-3;
 }
 .glorious-scaffold-modal-footer {
   @apply flex justify-center gap-3 my-3;
@@ -1359,6 +1430,28 @@ label.checked {
     display: inline-block !important;
   }
 }
+.validation-error-text {
+  display: inline-block;
+  animation: vibrateErrorTextLR 0.3s ease-in-out 1;
+}
+
+@keyframes vibrateErrorTextLR {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+  75% {
+    transform: translateX(-5px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
 .glorious-backdrop {
   @apply backdrop-blur-md fixed top-0 w-full h-full bg-gray-500/50 z-40;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-develop-30",
+  "version": "2.0.0-develop-32",
   "name": "nuxt-glorious",
   "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
   "repository": "sajadhzj/nuxt-glorious",

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

@@ -1,11 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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/plugins/glorious-app-setting.d.ts

@@ -1,2 +0,0 @@
-declare const _default: any;
-export default _default;

package/dist/runtime/plugins/glorious-app-setting.mjs

@@ -1,11 +0,0 @@
-import { defineNuxtPlugin, useHead } from "#imports";
-import { useGloriousAppSetting } from "../composables/useGloriousAppSetting.mjs";
-export default defineNuxtPlugin(() => {
-  const gloriousAppSetting = useGloriousAppSetting.getSetting();
-  useHead({
-    htmlAttrs: {
-      dir: gloriousAppSetting.dir,
-      class: [gloriousAppSetting.darkMode ? "dark" : ""]
-    }
-  });
-});