nuxt-glorious 2.0.0-develop-1 → 2.0.0-develop-3

package/dist/runtime/scss/textarea.css

@@ -0,0 +1,67 @@
+.glorious-textarea-orange {
+  @apply ring-orange-500;
+  @apply rounded-md ring-1 px-3;
+}
+.glorious-textarea-orange:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-textarea-orange:disabled {
+  @apply bg-green-300 cursor-not-allowed;
+}
+
+.glorious-textarea-blue {
+  @apply ring-blue-500;
+  @apply rounded-md ring-1 px-3;
+}
+.glorious-textarea-blue:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-textarea-blue:disabled {
+  @apply bg-green-300 cursor-not-allowed;
+}
+
+.glorious-textarea-gray {
+  @apply ring-gray-500;
+  @apply rounded-md ring-1 px-3;
+}
+.glorious-textarea-gray:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-textarea-gray:disabled {
+  @apply bg-green-300 cursor-not-allowed;
+}
+
+.glorious-textarea-red {
+  @apply ring-red-500;
+  @apply rounded-md ring-1 px-3;
+}
+.glorious-textarea-red:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-textarea-red:disabled {
+  @apply bg-green-300 cursor-not-allowed;
+}
+
+.glorious-textarea-green {
+  @apply ring-green-500;
+  @apply rounded-md ring-1 px-3;
+}
+.glorious-textarea-green:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-textarea-green:disabled {
+  @apply bg-green-300 cursor-not-allowed;
+}
+
+.glorious-textarea {
+  @apply relative w-full flex flex-col;
+}
+.glorious-textarea > textarea {
+  @apply w-full p-2;
+}
+.glorious-textarea > textarea.validation-error {
+  @apply ring-red-500 bg-red-50;
+}
+.glorious-textarea > textarea::placeholder {
+  @apply text-[14px];
+}

package/dist/runtime/scss/timeline.css

@@ -0,0 +1,47 @@
+.glorious-timeline-items {
+  @apply relative;
+}
+.glorious-timeline-items div {
+  @apply relative;
+}
+.glorious-timeline-items div::before {
+  content: "";
+  @apply absolute w-[2px] right-[-15px];
+}
+.glorious-timeline-items div::before:not(:last-child) {
+  @apply h-[calc(100%+20px)];
+}
+.glorious-timeline-items-count {
+  @apply absolute w-5 h-5 top-0 right-[-24px] rounded-full;
+  @apply text-white flex justify-center items-center font-medium;
+}
+.glorious-timeline-items.color-orange > div::before {
+  @apply bg-orange-500;
+}
+.glorious-timeline-items.color-blue > div::before {
+  @apply bg-blue-500;
+}
+.glorious-timeline-items.color-gray > div::before {
+  @apply bg-gray-500;
+}
+.glorious-timeline-items.color-red > div::before {
+  @apply bg-red-500;
+}
+.glorious-timeline-items.color-green > div::before {
+  @apply bg-green-500;
+}
+.glorious-timeline-items.color-orange .glorious-timeline-items-count {
+  @apply bg-orange-500;
+}
+.glorious-timeline-items.color-blue .glorious-timeline-items-count {
+  @apply bg-blue-500;
+}
+.glorious-timeline-items.color-gray .glorious-timeline-items-count {
+  @apply bg-gray-500;
+}
+.glorious-timeline-items.color-red .glorious-timeline-items-count {
+  @apply bg-red-500;
+}
+.glorious-timeline-items.color-green .glorious-timeline-items-count {
+  @apply bg-green-500;
+}

package/dist/runtime/scss/tooltip.css

@@ -0,0 +1,9 @@
+.glorious-tooltip {
+  @apply relative w-max;
+}
+.glorious-tooltip > .tooltip-slot:hover ~ .tooltip-content {
+  @apply opacity-100;
+}
+.glorious-tooltip > .tooltip-content {
+  @apply bg-white w-max rounded-lg shadow-md pt-2 px-3 flex absolute bottom-10 opacity-0 transition-all duration-100 ease-in;
+}

package/dist/runtime/stores/GloriousStore.mjs

@@ -10,6 +10,7 @@ export const GloriousStore = defineStore("GloriousStore", {
     keepData: {},
     forms: {},
     response: {},
+    modals: {},
     keepResponse: []
   }),
   getters: {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-develop-1",
+  "version": "2.0.0-develop-3",
   "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",
@@ -10,16 +10,18 @@
     ".": {
       "types": "./dist/types.d.ts",
       "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "require": "./dist/module.cjs",
+      "style": "./dist/runtime/scss/glorious.css"
     }
   },
+  "style": "./dist/runtime/scss/glorious.css",
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build build && cp -R ../../assets/scss/glorious dist && mv dist/glorious dist/scss",
+    "prepack": "cp -R ../../assets/scss/glorious src/runtime/scss && nuxt-module-build build",
     "dev": "nuxi dev --port=3001 playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",

package/dist/runtime/plugins/module.d.ts

@@ -1,4 +0,0 @@
-export interface ModuleOptions {
-}
-declare const _default: import("@nuxt/schema").NuxtModule<ModuleOptions, ModuleOptions, false>;
-export default _default;

package/dist/runtime/plugins/module.mjs

@@ -1,94 +0,0 @@
-import {
-  defineNuxtModule,
-  addPlugin,
-  addComponentsDir,
-  createResolver,
-  addImportsDir,
-  installModule,
-  addRouteMiddleware
-} from "@nuxt/kit";
-import defu from "defu";
-export default defineNuxtModule({
-  meta: {
-    name: "glorious",
-    configKey: "glorious"
-  },
-  // Default configuration options of the Nuxt module
-  defaults: {},
-  async setup(options, nuxt) {
-    const resolver = createResolver(import.meta.url);
-    nuxt.options.runtimeConfig.public.glorious = defu(nuxt.options.glorious, {
-      fetch: {
-        baseURL: "/",
-        credentials: "same-origin"
-      },
-      seo: {
-        suffix: "",
-        title: "",
-        description: ""
-      },
-      auth: {
-        cookie: {
-          name: "ga-token",
-          httpOnly: false
-        },
-        redirect: {
-          logout: "/login",
-          login: "/login"
-        },
-        strategy: {
-          provider: "",
-          //[laravel-passport]
-          endpoints: {
-            userInfo: {
-              url: "/",
-              method: "GET",
-              pick: ""
-            }
-          }
-        }
-      }
-    });
-    await installModule("@nuxtjs/tailwindcss", {
-      // module configuration
-      exposeConfig: true,
-      config: {
-        darkMode: "class",
-        content: {
-          files: [
-            resolver.resolve("./runtime/components/G/**/*.{vue,mjs,ts}"),
-            resolver.resolve("./runtime/*.{mjs,js,ts}")
-          ]
-        }
-      }
-    });
-    await installModule("@pinia/nuxt");
-    addImportsDir(resolver.resolve("runtime/composables"));
-    addImportsDir(resolver.resolve("runtime/stores"));
-    addImportsDir(resolver.resolve("runtime/middlewares"));
-    addComponentsDir({
-      path: resolver.resolve("runtime/components"),
-      global: true,
-      watch: false
-    });
-    nuxt.hook("nitro:config", async (nitro) => {
-      nitro.publicAssets.push({
-        dir: resolver.resolve("./runtime/assets")
-      });
-    });
-    addPlugin(resolver.resolve("./runtime/plugins/glorious-app-setting"));
-    addPlugin({
-      src: resolver.resolve("./runtime/plugins/InputComponent"),
-      mode: "client"
-    });
-    addRouteMiddleware({
-      name: "g-auth-strategy",
-      path: resolver.resolve("./runtime/middlewares/AuthStrategy"),
-      global: true
-    });
-    addRouteMiddleware({
-      name: "g-auth",
-      path: resolver.resolve("./runtime/middlewares/Auth")
-    });
-  }
-});

package/dist/scss/alert.scss

@@ -1,7 +0,0 @@
-@use 'mixin.scss' as mixin;
-
-.glorious-alert {
-  @apply p-3 rounded-md shadow-md;
-  @include mixin.load-bg();
-  @include mixin.load-border();
-}

package/dist/scss/avatar.scss

@@ -1,13 +0,0 @@
-@use 'variable.scss' as var;
-
-.glorious-avatar {
-    @apply overflow-hidden;
-    @each $key, $value in var.$sizes {
-        &.#{'size-' + $key} {
-            @apply #{"w-[" + ($value + 4 ) + "px] h-[" + ($value + 4 ) + "px]"};
-            > img {
-                @apply #{"w-[" + ($value + 4 ) + "px] h-[" + ($value + 4 ) + "px]"};
-            }
-        }
-    }
-}

package/dist/scss/breadcrumb.scss

@@ -1,6 +0,0 @@
-.glorious-breadcrumb {
-    @apply text-sm text-gray-500;
-    .end-text {
-        @apply font-bold text-base text-black;
-    }
-}

package/dist/scss/button.scss

@@ -1,30 +0,0 @@
-@use 'variable.scss' as var;
-@use 'mixin.scss' as mixin;
-
-button:focus-visible {
-  @apply outline-none;
-}
-
-.glorious-button {
-  @apply rounded-md text-white px-3 relative;
-  @include mixin.loading-size(6);
-  @include mixin.load-size();
-}
-@each $color in var.$colors {
-  .#{'button-color-' + $color} {
-    @apply #{"bg-" + ($color) + "-600 border-" + $color + "-700 hover:bg-" + $color + "-700"};
-
-    &.outline {
-      @apply bg-transparent border outline-none;
-      @apply #{"text-" + $color + "-500 hover:bg-" + $color + "-100"};
-      @include mixin.loading-color($color);
-    }
-
-    &:disabled {
-      @apply cursor-not-allowed;
-      &:not(:disabled) {
-        @apply #{"bg-" + ($color) + "-300"};
-      }
-    }
-  }
-}

package/dist/scss/checkbox.scss

@@ -1,52 +0,0 @@
-@use 'variable.scss' as var;
-$svg-check-icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNIDI4LjI4MTI1IDYuMjgxMjUgTCAxMSAyMy41NjI1IEwgMy43MTg3NSAxNi4yODEyNSBMIDIuMjgxMjUgMTcuNzE4NzUgTCAxMC4yODEyNSAyNS43MTg3NSBMIDExIDI2LjQwNjI1IEwgMTEuNzE4NzUgMjUuNzE4NzUgTCAyOS43MTg3NSA3LjcxODc1IFoiLz48L3N2Zz4K';
-.glorious-checkbox {
-  @apply block relative cursor-pointer;
-
-  > input {
-    @apply hidden;
-
-    &:checked ~ div {
-      @apply border-none;
-
-      &:after {
-        @apply block h-max w-max;
-      }
-    }
-
-    &:disabled ~ div {
-      @apply cursor-not-allowed;
-    }
-  }
-  > div:last-child {
-    @apply border border-gray-500 rounded bg-white left-0 top-0 absolute hover:shadow-lg;
-    > div:first-child {
-      @apply hidden;
-    }
-
-    &:after {
-      content: url(#{$svg-check-icon});
-
-      @apply absolute hidden top-1 right-0 left-0 bottom-0 m-auto;
-    }
-  }
-
-  @each $color in var.$colors {
-    &.#{'color-' + $color} {
-      > input {
-        &:checked ~ div {
-          @apply #{"bg-" + $color + "-500"};
-        }
-      }
-    }
-  }
-
-  @each $key, $value in var.$sizes {
-    &.size-#{$key} {
-      @apply w-[#{$value}px] h-[#{$value}px];
-      > div:last-child {
-        @apply w-[#{$value}px] h-[#{$value}px];
-      }
-    }
-  }
-}

package/dist/scss/drawer.scss

@@ -1,64 +0,0 @@
-.glorious-drawer {
-    @apply fixed top-0 bg-white h-full w-[300px] z-[50];
-
-    > div {
-        @apply bg-white min-h-screen;
-    }
-
-    &.close {
-        &.right {
-            animation: drawer-close-right 250ms normal forwards;
-        }
-        &.left {
-            animation: drawer-close-left 250ms normal forwards;
-        }
-    }
-
-    &.open {
-        @apply flex;
-        &.right {
-            animation: drawer-open-right 100ms normal forwards;
-        }
-        &.left {
-            animation: drawer-open-left 100ms normal forwards;
-        }
-    }
-}
-
-@keyframes drawer-open-right {
-    from {
-        right: -300px;
-    }
-    to {
-        right: 0;
-    }
-}
-
-@keyframes drawer-close-right {
-    from {
-        right: 0;
-    }
-    to {
-        right: 300px;
-        display: hidden;
-    }
-}
-
-@keyframes drawer-open-left {
-    from {
-        left: -300px;
-    }
-    to {
-        left: 0;
-    }
-}
-
-@keyframes drawer-close-left {
-    from {
-        left: 0;
-    }
-    to {
-        left: -300px;
-        display: hidden;
-    }
-}

package/dist/scss/file.scss

@@ -1,19 +0,0 @@
-@use 'variable.scss' as var;
-@use 'mixin.scss' as mixin;
-
-@each $color in var.$colors {
-  .#{'glorious-file-' + $color} {
-    @apply #{"ring-"+$color+"-500"};
-    @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
-
-    > div.placeholder {
-      @apply #{"bg-"+$color+"-500"};
-      @apply text-white px-3 w-max;
-      @include mixin.load-size();
-    }
-
-    > div:last-child {
-      @apply absolute left-3 hidden;
-    }
-  }
-}

package/dist/scss/glorious.scss

@@ -1,26 +0,0 @@
-@use 'mixin.scss';
-@use 'variable.scss';
-@use 'alert.scss';
-@use 'avatar.scss';
-@use 'breadcrumb.scss';
-@use 'button.scss';
-@use 'checkbox.scss';
-@use 'drawer.scss';
-@use 'file.scss';
-@use 'input.scss';
-@use 'loading.scss';
-@use 'modal.scss';
-@use 'paginate.scss';
-@use 'radio.scss';
-@use 'rating.scss';
-@use 'select.scss';
-@use 'switch.scss';
-@use 'tab.scss';
-@use 'table.scss';
-@use 'textarea.scss';
-@use 'timeline.scss';
-@use 'tooltip.scss';
-
-.glorious-backdrop {
-    @apply backdrop-blur-md fixed top-0 w-full h-full bg-gray-500/50 z-40;
-}

package/dist/scss/input.scss

@@ -1,93 +0,0 @@
-@use 'variable.scss' as var;
-@use 'mixin.scss' as mixin;
-
-@each $color in var.$colors {
-    .#{'glorious-input-' + $color} {
-        @apply #{"ring-" + $color + "-500"};
-        @apply rounded-md ring-1 bg-white;
-        @include mixin.load-size();
-        &:focus-visible {
-            @apply outline-none ring-2;
-        }
-        &:disabled {
-            @apply #{"bg-" + $color + "-100"};
-            @apply cursor-not-allowed;
-        }
-    }
-}
-
-.glorious-input {
-    &.validation-error {
-        > div > input {
-            @apply ring-red-500 bg-red-50;
-        }
-    }
-    @apply relative w-full;
-    > input {
-        @apply w-full;
-    }
-    > input::placeholder {
-        @apply text-sm;
-    }
-    &.icon-xl {
-        > input {
-            @apply rtl:pr-9 ltr:pl-9;
-        }
-    }
-    &.icon-lg {
-        > input {
-            @apply rtl:pr-9 ltr:pl-8;
-        }
-    }
-    &.icon-md {
-        > input {
-            @apply rtl:pr-9 ltr:pl-8;
-        }
-    }
-    &.icon-sm {
-        > input {
-            @apply rtl:pr-8 ltr:pl-8;
-        }
-    }
-    &.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;
-    > div {
-        @apply bg-green-500 px-1 rounded text-white flex items-center gap-2 cursor-pointer;
-    }
-}
-
-.glorious-input {
-    // -------------------------------------------------- OPTION
-    > div {
-        > input.size-md {
-            // @apply top-[20px]
-        }
-    }
-
-    &-options {
-        @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
-
-        > div > div {
-            @apply p-2 hover:bg-gray-100 cursor-pointer rounded;
-        }
-
-        // &.size-md {
-        //   @apply top-11;
-        // }
-    }
-
-    div > input::placeholder {
-        @apply text-gray-500;
-    }
-}

package/dist/scss/loading.scss

@@ -1,92 +0,0 @@
-.glorious-loading {
-  aspect-ratio: 1;
-  border-radius: 50%;
-  animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
-}
-
-@keyframes l20-1 {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
-  }
-  12.5% {
-    clip-path: polygon(
-      50% 50%,
-      0 0,
-      50% 0%,
-      100% 0%,
-      100% 0%,
-      100% 0%,
-      100% 0%
-    );
-  }
-  25% {
-    clip-path: polygon(
-      50% 50%,
-      0 0,
-      50% 0%,
-      100% 0%,
-      100% 100%,
-      100% 100%,
-      100% 100%
-    );
-  }
-  50% {
-    clip-path: polygon(
-      50% 50%,
-      0 0,
-      50% 0%,
-      100% 0%,
-      100% 100%,
-      50% 100%,
-      0% 100%
-    );
-  }
-  62.5% {
-    clip-path: polygon(
-      50% 50%,
-      100% 0,
-      100% 0%,
-      100% 0%,
-      100% 100%,
-      50% 100%,
-      0% 100%
-    );
-  }
-  75% {
-    clip-path: polygon(
-      50% 50%,
-      100% 100%,
-      100% 100%,
-      100% 100%,
-      100% 100%,
-      50% 100%,
-      0% 100%
-    );
-  }
-  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);
-  }
-  100% {
-    transform: scaleY(-1) rotate(-135deg);
-  }
-}