nuxt-glorious 2.0.0-develop-1 → 2.0.0-develop-2

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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-develop-1",
+  "version": "2.0.0-develop-2",
   "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/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);
-  }
-}

package/dist/scss/mixin.scss

@@ -1,40 +0,0 @@
-@use 'variable.scss' as var;
-
-@mixin load-bg($range: 100) {
-  @each $color in var.$colors {
-    &.#{'color-' + $color} {
-      @apply #{"bg-" + $color + "-" + $range};
-    }
-  }
-}
-
-@mixin load-size() {
-  @each $key, $value in var.$pSize {
-    &.#{'size-' + $key} {
-      @apply #{"py-" + $value};
-    }
-  }
-}
-
-@mixin load-border($range: 300) {
-  @each $color in var.$colors {
-    &.#{'color-' + $color} {
-      @apply #{"border border-" + $color + "-" + $range};
-    }
-  }
-}
-
-@mixin loading-size($size) {
-  div > loading {
-    @apply flex justify-center items-center;
-  }
-  div.loading > div > div {
-    @apply #{"w-" + $size};
-  }
-}
-
-@mixin loading-color($color) {
-  div.loading > div > div {
-    border-color: theme('colors.' + $color + '.700') !important;
-  }
-}

package/dist/scss/modal.scss

@@ -1,76 +0,0 @@
-.glorious-scaffold-modal {
-    @apply fixed bg-white md:top-[15%] z-50 right-0 left-0 mx-auto p-3 md:rounded-md rounded-t-md md:bottom-0 bottom-0 overflow-y-auto;
-
-    &-header {
-        @apply flex justify-between items-center;
-    }
-
-    &-footer {
-        @apply flex justify-center gap-3 mt-3;
-        > button {
-            @apply min-w-24;
-        }
-    }
-
-    &-bg-blur {
-        @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 opacity-50 h-full w-full z-[40];
-    }
-
-    &.size-full {
-        @apply w-full h-full top-0 rounded-none;
-    }
-
-    &.size-xl {
-        @apply md:w-[70%] w-full md:h-max max-h-[calc(100%-15%)];
-    }
-
-    &.size-lg {
-        @apply md:w-[60%] w-full md:h-max max-h-[calc(100%-15%)];
-    }
-
-    &.size-md {
-        @apply md:w-[50%] w-full md:h-max max-h-[calc(100%-15%)];
-    }
-
-    &.size-sm {
-        @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[calc(100%-15%)];
-    }
-
-    &.close {
-        @apply hidden;
-    }
-
-    &.open.animation {
-        animation: animationMobile 0.3s normal forwards;
-        @screen md {
-            animation: animationOpacity 0.3s normal forwards;
-        }
-    }
-
-    @keyframes animationOpacity {
-        0% {
-            transform: scale(0.1);
-            opacity: 0;
-        }
-        99% {
-            transform: scale(1);
-            opacity: 1;
-        }
-        100% {
-            transform: unset;
-            opacity: 1;
-        }
-    }
-    @keyframes animationMobile {
-        0% {
-            transform: translateY(100%);
-        }
-
-        99% {
-            transform: translateY(0);
-        }
-        100% {
-            transform: translateY(0);
-        }
-    }
-}