nuxt-glorious 1.2.0 → 1.2.9-5

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

@@ -0,0 +1,113 @@
+button:focus-visible {
+  @apply outline-none;
+}
+
+.glorious-button {
+  @apply rounded-md text-white px-3 relative;
+}
+.glorious-button div > loading {
+  @apply flex justify-center items-center;
+}
+.glorious-button div.loading > div > div {
+  @apply w-6 !important;
+}
+.glorious-button.size-xl {
+  @apply py-2.5;
+}
+.glorious-button.size-lg {
+  @apply py-2;
+}
+.glorious-button.size-md {
+  @apply py-1.5;
+}
+.glorious-button.size-sm {
+  @apply py-1;
+}
+.glorious-button.size-xs {
+  @apply py-0.5;
+}
+
+.color-orange {
+  @apply bg-orange-600 border-orange-700 hover:bg-orange-700;
+}
+.color-orange.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-orange-500 hover:bg-orange-100;
+}
+.color-orange.outline div.loading > div > div {
+  border-color: theme("colors.orange.700") !important;
+}
+.color-orange:disabled {
+  @apply cursor-not-allowed;
+}
+.color-orange:disabled:not(:disabled) {
+  @apply bg-orange-300;
+}
+
+.color-blue {
+  @apply bg-blue-600 border-blue-700 hover:bg-blue-700;
+}
+.color-blue.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-blue-500 hover:bg-blue-100;
+}
+.color-blue.outline div.loading > div > div {
+  border-color: theme("colors.blue.700") !important;
+}
+.color-blue:disabled {
+  @apply cursor-not-allowed;
+}
+.color-blue:disabled:not(:disabled) {
+  @apply bg-blue-300;
+}
+
+.color-gray {
+  @apply bg-gray-600 border-gray-700 hover:bg-gray-700;
+}
+.color-gray.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-gray-500 hover:bg-gray-100;
+}
+.color-gray.outline div.loading > div > div {
+  border-color: theme("colors.gray.700") !important;
+}
+.color-gray:disabled {
+  @apply cursor-not-allowed;
+}
+.color-gray:disabled:not(:disabled) {
+  @apply bg-gray-300;
+}
+
+.color-red {
+  @apply bg-red-600 border-red-700 hover:bg-red-700;
+}
+.color-red.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-red-500 hover:bg-red-100;
+}
+.color-red.outline div.loading > div > div {
+  border-color: theme("colors.red.700") !important;
+}
+.color-red:disabled {
+  @apply cursor-not-allowed;
+}
+.color-red:disabled:not(:disabled) {
+  @apply bg-red-300;
+}
+
+.color-green {
+  @apply bg-green-600 border-green-700 hover:bg-green-700;
+}
+.color-green.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-green-500 hover:bg-green-100;
+}
+.color-green.outline div.loading > div > div {
+  border-color: theme("colors.green.700") !important;
+}
+.color-green:disabled {
+  @apply cursor-not-allowed;
+}
+.color-green:disabled:not(:disabled) {
+  @apply bg-green-300;
+}

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

@@ -0,0 +1,30 @@
+@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 {
+  .#{'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/runtime/style/components/checkbox.css

@@ -0,0 +1,94 @@
+.glorious-checkbox {
+  @apply block relative cursor-pointer;
+}
+.glorious-checkbox > input {
+  @apply hidden;
+}
+.glorious-checkbox > input:checked ~ div {
+  @apply border-none;
+}
+.glorious-checkbox > input:checked ~ div:after {
+  @apply block h-max w-max;
+}
+.glorious-checkbox > input:disabled ~ div {
+  @apply cursor-not-allowed;
+}
+.glorious-checkbox > div:last-child {
+  @apply border border-gray-500 rounded bg-white left-0 top-0 absolute hover:shadow-lg;
+}
+.glorious-checkbox > div:last-child > div:first-child {
+  @apply hidden;
+}
+.glorious-checkbox > div:last-child:after {
+  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNIDI4LjI4MTI1IDYuMjgxMjUgTCAxMSAyMy41NjI1IEwgMy43MTg3NSAxNi4yODEyNSBMIDIuMjgxMjUgMTcuNzE4NzUgTCAxMC4yODEyNSAyNS43MTg3NSBMIDExIDI2LjQwNjI1IEwgMTEuNzE4NzUgMjUuNzE4NzUgTCAyOS43MTg3NSA3LjcxODc1IFoiLz48L3N2Zz4K);
+  @apply absolute hidden top-1 right-0 left-0 bottom-0 m-auto;
+}
+.glorious-checkbox.color-orange > input:checked ~ div {
+  @apply bg-orange-500;
+}
+.glorious-checkbox.color-blue > input:checked ~ div {
+  @apply bg-blue-500;
+}
+.glorious-checkbox.color-gray > input:checked ~ div {
+  @apply bg-gray-500;
+}
+.glorious-checkbox.color-red > input:checked ~ div {
+  @apply bg-red-500;
+}
+.glorious-checkbox.color-green > input:checked ~ div {
+  @apply bg-green-500;
+}
+.glorious-checkbox.size-5xl {
+  @apply w-[54px] h-[54px];
+}
+.glorious-checkbox.size-5xl > div:last-child {
+  @apply w-[54px] h-[54px];
+}
+.glorious-checkbox.size-4xl {
+  @apply w-[50px] h-[50px];
+}
+.glorious-checkbox.size-4xl > div:last-child {
+  @apply w-[50px] h-[50px];
+}
+.glorious-checkbox.size-3xl {
+  @apply w-[46px] h-[46px];
+}
+.glorious-checkbox.size-3xl > div:last-child {
+  @apply w-[46px] h-[46px];
+}
+.glorious-checkbox.size-2xl {
+  @apply w-[42px] h-[42px];
+}
+.glorious-checkbox.size-2xl > div:last-child {
+  @apply w-[42px] h-[42px];
+}
+.glorious-checkbox.size-xl {
+  @apply w-[38px] h-[38px];
+}
+.glorious-checkbox.size-xl > div:last-child {
+  @apply w-[38px] h-[38px];
+}
+.glorious-checkbox.size-lg {
+  @apply w-[32px] h-[32px];
+}
+.glorious-checkbox.size-lg > div:last-child {
+  @apply w-[32px] h-[32px];
+}
+.glorious-checkbox.size-md {
+  @apply w-[28px] h-[28px];
+}
+.glorious-checkbox.size-md > div:last-child {
+  @apply w-[28px] h-[28px];
+}
+.glorious-checkbox.size-sm {
+  @apply w-[24px] h-[24px];
+}
+.glorious-checkbox.size-sm > div:last-child {
+  @apply w-[24px] h-[24px];
+}
+.glorious-checkbox.size-xs {
+  @apply w-[20px] h-[20px];
+}
+.glorious-checkbox.size-xs > div:last-child {
+  @apply w-[20px] h-[20px];
+}

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

@@ -0,0 +1,52 @@
+@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/runtime/{assets/style → style}/components/drawer.css

@@ -1,34 +1,22 @@
-.bg-blur-drawer {
-  @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
-}
-
-.drawer {
+.glorious-drawer {
   @apply fixed top-0 bg-white h-full w-[300px] z-[50];
 }
-.drawer.close.rtl {
+.glorious-drawer.close.right {
   animation: drawer-close-right 250ms normal forwards;
 }
-.drawer.close.ltr {
+.glorious-drawer.close.left {
   animation: drawer-close-left 250ms normal forwards;
 }
-.drawer.open {
+.glorious-drawer.open {
   @apply flex;
 }
-.drawer.open.rtl {
+.glorious-drawer.open.right {
   animation: drawer-open-right 100ms normal forwards;
 }
-.drawer.open.ltr {
+.glorious-drawer.open.left {
   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];
@@ -45,6 +33,14 @@
     @apply right-[-300px] hidden;
   }
 }
+@keyframes drawer-open-left {
+  from {
+    @apply left-[-300px];
+  }
+  to {
+    @apply left-0;
+  }
+}
 @keyframes drawer-close-left {
   from {
     @apply left-0;

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

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

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

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

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

@@ -0,0 +1,134 @@
+.glorious-file-orange {
+  @apply ring-orange-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
+}
+.glorious-file-orange > div.placeholder {
+  @apply bg-orange-500;
+  @apply text-white px-3 w-max;
+}
+.glorious-file-orange > div.placeholder.size-xl {
+  @apply py-2.5;
+}
+.glorious-file-orange > div.placeholder.size-lg {
+  @apply py-2;
+}
+.glorious-file-orange > div.placeholder.size-md {
+  @apply py-1.5;
+}
+.glorious-file-orange > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-orange > div.placeholder.size-xs {
+  @apply py-0.5;
+}
+.glorious-file-orange > div:last-child {
+  @apply absolute left-3 hidden;
+}
+
+.glorious-file-blue {
+  @apply ring-blue-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
+}
+.glorious-file-blue > div.placeholder {
+  @apply bg-blue-500;
+  @apply text-white px-3 w-max;
+}
+.glorious-file-blue > div.placeholder.size-xl {
+  @apply py-2.5;
+}
+.glorious-file-blue > div.placeholder.size-lg {
+  @apply py-2;
+}
+.glorious-file-blue > div.placeholder.size-md {
+  @apply py-1.5;
+}
+.glorious-file-blue > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-blue > div.placeholder.size-xs {
+  @apply py-0.5;
+}
+.glorious-file-blue > div:last-child {
+  @apply absolute left-3 hidden;
+}
+
+.glorious-file-gray {
+  @apply ring-gray-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
+}
+.glorious-file-gray > div.placeholder {
+  @apply bg-gray-500;
+  @apply text-white px-3 w-max;
+}
+.glorious-file-gray > div.placeholder.size-xl {
+  @apply py-2.5;
+}
+.glorious-file-gray > div.placeholder.size-lg {
+  @apply py-2;
+}
+.glorious-file-gray > div.placeholder.size-md {
+  @apply py-1.5;
+}
+.glorious-file-gray > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-gray > div.placeholder.size-xs {
+  @apply py-0.5;
+}
+.glorious-file-gray > div:last-child {
+  @apply absolute left-3 hidden;
+}
+
+.glorious-file-red {
+  @apply ring-red-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
+}
+.glorious-file-red > div.placeholder {
+  @apply bg-red-500;
+  @apply text-white px-3 w-max;
+}
+.glorious-file-red > div.placeholder.size-xl {
+  @apply py-2.5;
+}
+.glorious-file-red > div.placeholder.size-lg {
+  @apply py-2;
+}
+.glorious-file-red > div.placeholder.size-md {
+  @apply py-1.5;
+}
+.glorious-file-red > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-red > div.placeholder.size-xs {
+  @apply py-0.5;
+}
+.glorious-file-red > div:last-child {
+  @apply absolute left-3 hidden;
+}
+
+.glorious-file-green {
+  @apply ring-green-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
+}
+.glorious-file-green > div.placeholder {
+  @apply bg-green-500;
+  @apply text-white px-3 w-max;
+}
+.glorious-file-green > div.placeholder.size-xl {
+  @apply py-2.5;
+}
+.glorious-file-green > div.placeholder.size-lg {
+  @apply py-2;
+}
+.glorious-file-green > div.placeholder.size-md {
+  @apply py-1.5;
+}
+.glorious-file-green > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-green > div.placeholder.size-xs {
+  @apply py-0.5;
+}
+.glorious-file-green > div:last-child {
+  @apply absolute left-3 hidden;
+}

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

@@ -0,0 +1,19 @@
+@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;
+    }
+  }
+}