nuxt-glorious 1.3.3 → 1.9.0-dev

package/dist/scss/drawer.scss

@@ -0,0 +1,64 @@
+.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/{runtime/style/components → scss}/file.scss

@@ -1,5 +1,5 @@
-@use '../variable.scss' as var;
-@use '../mixin.scss' as mixin;
+@use 'variable.scss' as var;
+@use 'mixin.scss' as mixin;
 
 @each $color in var.$colors {
   .#{'glorious-file-' + $color} {

package/dist/scss/glorious.scss

@@ -0,0 +1,22 @@
+@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';

package/dist/{runtime/style/components → scss}/input.scss

@@ -1,5 +1,5 @@
-@use '../variable.scss' as var;
-@use '../mixin.scss' as mixin;
+@use 'variable.scss' as var;
+@use 'mixin.scss' as mixin;
 
 @each $color in var.$colors {
   .#{'glorious-input-' + $color} {
@@ -69,8 +69,14 @@
 
 .glorious-input {
   // -------------------------------------------------- OPTION
+  >div{
+    >input.size-md{
+        // @apply top-[20px]
+    }
+  }
+
   &-options {
-    @apply p-1 shadow-lg fixed w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
+    @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;

package/dist/{runtime/style → scss}/mixin.scss

@@ -29,7 +29,7 @@
     @apply flex justify-center items-center;
   }
   div.loading > div > div {
-    @apply #{"w-" + $size !important};
+    @apply #{"w-" + $size};
   }
 }
 

package/dist/scss/modal.scss

@@ -0,0 +1,76 @@
+.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);
+        }
+    }
+}

package/dist/scss/paginate.scss

@@ -0,0 +1,28 @@
+@use 'variable.scss' as var;
+
+.glorious-paginate {
+    > div {
+        @apply border border-gray-50 rounded-xl h-8 flex items-center px-1 bg-white shadow-md gap-1 w-max;
+        direction: rtl;
+        > div {
+            @apply px-2;
+            &:last-child {
+                @apply rotate-[180deg];
+            }
+        }
+    }
+
+    @each $color in var.$colors {
+        &.#{'color-' + $color} {
+            .paginate.active {
+                @apply #{"bg-" + ($color) + "-500 "};
+            }
+        }
+    }
+}
+.paginate {
+    @apply text-[13px];
+    &.active {
+        @apply bg-green-500 rounded-lg text-white font-bold text-[13px];
+    }
+}

package/dist/{runtime/style/components → scss}/radio.scss

@@ -1,4 +1,4 @@
-@use '../variable.scss' as var;
+@use 'variable.scss' as var;
 
 .glorious-radio {
   @apply block relative cursor-pointer;

package/dist/{runtime/style/components → scss}/select.scss

@@ -1,4 +1,4 @@
-@use '../variable.scss' as var;
+@use 'variable.scss' as var;
 
 %select-size {
   &.xl {
@@ -39,6 +39,6 @@
   }
 
   &.validation-error {
-    @apply ring-red-500 bg-red-50 !important;
+    @apply ring-red-500 bg-red-50 ;
   }
 }

package/dist/{runtime/style/components → scss}/switch.scss

@@ -1,4 +1,4 @@
-@use '../variable.scss' as var;
+@use 'variable.scss' as var;
 
 .switch {
   direction: ltr;

package/dist/{runtime/style/components → scss}/tab.scss

@@ -2,7 +2,7 @@
   @apply flex justify-between bg-green-100 rounded-lg gap-3 w-max max-w-full shadow-md;
 
   div > div > button {
-    @apply text-gray-700 text-[14px] hover:bg-green-200 hover:text-gray-800 cursor-pointer px-2 py-1 rounded-lg;
+    @apply text-gray-700 text-sm hover:bg-green-200 hover:text-gray-800 cursor-pointer px-2 py-1 rounded-lg whitespace-nowrap;
 
     &.active {
       @apply font-bold text-white bg-green-700;

package/dist/{runtime/style/components → scss}/table.scss

@@ -1,4 +1,4 @@
-@use '../variable.scss' as var;
+@use 'variable.scss' as var;
 
 .glorious-table {
   @apply overflow-x-auto;

package/dist/{runtime/style/components → scss}/textarea.scss

@@ -1,5 +1,5 @@
-@use '../mixin.scss' as mixin;
-@use '../variable.scss' as var;
+@use 'mixin.scss' as mixin;
+@use 'variable.scss' as var;
 
 %textarea-size {
   &.xl {

package/dist/{runtime/style/components → scss}/timeline.scss

@@ -1,4 +1,4 @@
-@use '../variable.scss' as var;
+@use 'variable.scss' as var;
 
 .glorious-timeline {
   &-items {
@@ -17,7 +17,7 @@
     }
 
     &-count {
-      @apply absolute w-5 h-5 top-0 right-[-24px] rounded-full !important;
+      @apply absolute w-5 h-5 top-0 right-[-24px] rounded-full ;
       @apply text-white flex justify-center items-center font-medium;
     }
 

package/dist/scss/tooltip.scss

@@ -0,0 +1,14 @@
+.glorious-tooltip {
+    @apply relative w-max;
+
+    > .tooltip-slot {
+      &:hover {
+        ~ .tooltip-content {
+          @apply opacity-100;
+        }
+      }
+    }
+    > .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": "1.3.3",
+  "version": "1.9.0-dev",
   "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",
@@ -19,7 +19,7 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build build && cp -R src/runtime/style dist/runtime",
+    "prepack": "nuxt-module-build build && cp -R ../../assets/scss/glorious dist && mv dist/glorious dist/scss",
     "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",
@@ -30,23 +30,25 @@
   },
   "dependencies": {
     "@nuxt/image": "^1.8.1",
-    "@nuxt/kit": "^3.14.1592",
-    "@nuxtjs/tailwindcss": "^6.12.0",
+    "@nuxt/kit": "^3.16.0",
     "@pinia/nuxt": "^0.5.1",
+    "@tailwindcss/postcss": "^4.0.14",
+    "@tailwindcss/vite": "^4.0.14",
     "defu": "^6.1.4",
     "pinia": "^2.1.7",
-    "sass": "^1.80.3"
+    "sass": "^1.86.0",
+    "tailwindcss": "^4.0.14"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.14.1592",
+    "@nuxt/schema": "^3.16.0",
     "@nuxt/test-utils": "^3.12.0",
     "@types/node": "^20.11.29",
     "changelogen": "^0.5.5",
     "eslint": "^8.57.0",
-    "nuxt": "^3.14.1592",
+    "nuxt": "^3.16.0",
     "vitest": "^1.4.0"
   },
   "overrides": {

package/dist/runtime/style/components/alert.css

@@ -1,33 +0,0 @@
-.glorious-alert {
-  @apply p-3 rounded shadow;
-}
-.glorious-alert.color-orange {
-  @apply bg-orange-100;
-}
-.glorious-alert.color-blue {
-  @apply bg-blue-100;
-}
-.glorious-alert.color-gray {
-  @apply bg-gray-100;
-}
-.glorious-alert.color-red {
-  @apply bg-red-100;
-}
-.glorious-alert.color-green {
-  @apply bg-green-100;
-}
-.glorious-alert.color-orange {
-  @apply border border-orange-300;
-}
-.glorious-alert.color-blue {
-  @apply border border-blue-300;
-}
-.glorious-alert.color-gray {
-  @apply border border-gray-300;
-}
-.glorious-alert.color-red {
-  @apply border border-red-300;
-}
-.glorious-alert.color-green {
-  @apply border border-green-300;
-}

package/dist/runtime/style/components/avatar.css

@@ -1,57 +0,0 @@
-.glorious-avatar {
-  @apply overflow-hidden;
-}
-.glorious-avatar.size-5xl {
-  @apply w-[58px] h-[58px];
-}
-.glorious-avatar.size-5xl > img {
-  @apply w-[58px] h-[58px];
-}
-.glorious-avatar.size-4xl {
-  @apply w-[54px] h-[54px];
-}
-.glorious-avatar.size-4xl > img {
-  @apply w-[54px] h-[54px];
-}
-.glorious-avatar.size-3xl {
-  @apply w-[50px] h-[50px];
-}
-.glorious-avatar.size-3xl > img {
-  @apply w-[50px] h-[50px];
-}
-.glorious-avatar.size-2xl {
-  @apply w-[46px] h-[46px];
-}
-.glorious-avatar.size-2xl > img {
-  @apply w-[46px] h-[46px];
-}
-.glorious-avatar.size-xl {
-  @apply w-[42px] h-[42px];
-}
-.glorious-avatar.size-xl > img {
-  @apply w-[42px] h-[42px];
-}
-.glorious-avatar.size-lg {
-  @apply w-[36px] h-[36px];
-}
-.glorious-avatar.size-lg > img {
-  @apply w-[36px] h-[36px];
-}
-.glorious-avatar.size-md {
-  @apply w-[32px] h-[32px];
-}
-.glorious-avatar.size-md > img {
-  @apply w-[32px] h-[32px];
-}
-.glorious-avatar.size-sm {
-  @apply w-[28px] h-[28px];
-}
-.glorious-avatar.size-sm > img {
-  @apply w-[28px] h-[28px];
-}
-.glorious-avatar.size-xs {
-  @apply w-[24px] h-[24px];
-}
-.glorious-avatar.size-xs > img {
-  @apply w-[24px] h-[24px];
-}

package/dist/runtime/style/components/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/runtime/style/components/breadcrumb.css

@@ -1,6 +0,0 @@
-.glorious-breadcrumb {
-  @apply text-xs;
-}
-.glorious-breadcrumb .end-text {
-  @apply font-bold;
-}

package/dist/runtime/style/components/breadcrumb.scss

@@ -1,6 +0,0 @@
-.glorious-breadcrumb{
-    @apply text-xs;
-    .end-text{
-        @apply font-bold
-    }
-}

package/dist/runtime/style/components/drawer.scss

@@ -1,57 +0,0 @@
-.glorious-drawer {
-  @apply fixed top-0 bg-white h-full w-[300px] z-[50];
-
-  &.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 {
-    @apply right-[-300px];
-  }
-  to {
-    @apply right-0;
-  }
-}
-@keyframes drawer-close-right {
-  from {
-    @apply right-0;
-  }
-  to {
-    @apply right-[-300px] hidden;
-  }
-}
-
-@keyframes drawer-open-left {
-  from {
-    @apply left-[-300px];
-  }
-  to {
-    @apply left-0;
-  }
-}
-
-@keyframes drawer-close-left {
-  from {
-    @apply left-0;
-  }
-  to {
-    @apply left-[-300px] hidden;
-  }
-}

package/dist/runtime/style/components/dropdown.scss

@@ -1,19 +0,0 @@
-.glorious-dropdown {
-  @apply relative;
-  > div:last-child {
-    @apply hidden;
-  }
-  > div:first-child {
-    @apply relative;
-    > button {
-      @apply z-[30] w-5 relative;
-    }
-    > div:nth-child(2) {
-      @apply absolute top-0 bottom-0 my-auto z-[20];
-    }
-  }
-
-  &.open > div:last-child {
-    @apply bg-white px-2 py-2 rounded-md shadow absolute z-[41] left-[16px] top-5 flex;
-  }
-}

package/dist/runtime/style/components/editor.scss

@@ -1,4 +0,0 @@
-.ql-editor {
-  direction: rtl;
-  text-align: right !important;
-}