nuxt-glorious 1.2.0 → 1.2.9-5

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

@@ -0,0 +1,187 @@
+.glorious-input-orange {
+  @apply ring-orange-500;
+  @apply rounded-md ring-1;
+}
+.glorious-input-orange.size-xl {
+  @apply py-2.5;
+}
+.glorious-input-orange.size-lg {
+  @apply py-2;
+}
+.glorious-input-orange.size-md {
+  @apply py-1.5;
+}
+.glorious-input-orange.size-sm {
+  @apply py-1;
+}
+.glorious-input-orange.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-orange:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-input-orange:disabled {
+  @apply bg-orange-100;
+  @apply cursor-not-allowed;
+}
+
+.glorious-input-blue {
+  @apply ring-blue-500;
+  @apply rounded-md ring-1;
+}
+.glorious-input-blue.size-xl {
+  @apply py-2.5;
+}
+.glorious-input-blue.size-lg {
+  @apply py-2;
+}
+.glorious-input-blue.size-md {
+  @apply py-1.5;
+}
+.glorious-input-blue.size-sm {
+  @apply py-1;
+}
+.glorious-input-blue.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-blue:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-input-blue:disabled {
+  @apply bg-blue-100;
+  @apply cursor-not-allowed;
+}
+
+.glorious-input-gray {
+  @apply ring-gray-500;
+  @apply rounded-md ring-1;
+}
+.glorious-input-gray.size-xl {
+  @apply py-2.5;
+}
+.glorious-input-gray.size-lg {
+  @apply py-2;
+}
+.glorious-input-gray.size-md {
+  @apply py-1.5;
+}
+.glorious-input-gray.size-sm {
+  @apply py-1;
+}
+.glorious-input-gray.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-gray:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-input-gray:disabled {
+  @apply bg-gray-100;
+  @apply cursor-not-allowed;
+}
+
+.glorious-input-red {
+  @apply ring-red-500;
+  @apply rounded-md ring-1;
+}
+.glorious-input-red.size-xl {
+  @apply py-2.5;
+}
+.glorious-input-red.size-lg {
+  @apply py-2;
+}
+.glorious-input-red.size-md {
+  @apply py-1.5;
+}
+.glorious-input-red.size-sm {
+  @apply py-1;
+}
+.glorious-input-red.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-red:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-input-red:disabled {
+  @apply bg-red-100;
+  @apply cursor-not-allowed;
+}
+
+.glorious-input-green {
+  @apply ring-green-500;
+  @apply rounded-md ring-1;
+}
+.glorious-input-green.size-xl {
+  @apply py-2.5;
+}
+.glorious-input-green.size-lg {
+  @apply py-2;
+}
+.glorious-input-green.size-md {
+  @apply py-1.5;
+}
+.glorious-input-green.size-sm {
+  @apply py-1;
+}
+.glorious-input-green.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-green:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-input-green:disabled {
+  @apply bg-green-100;
+  @apply cursor-not-allowed;
+}
+
+.glorious-input {
+  @apply relative w-full;
+}
+.glorious-input.validation-error > div > input {
+  @apply ring-red-500 bg-red-50;
+}
+.glorious-input > input {
+  @apply w-full;
+}
+.glorious-input > input::placeholder {
+  @apply text-sm;
+}
+.glorious-input.icon-xl > input {
+  @apply rtl:pr-9 ltr:pl-9;
+}
+.glorious-input.icon-lg > input {
+  @apply rtl:pr-9 ltr:pl-8;
+}
+.glorious-input.icon-md > input {
+  @apply rtl:pr-9 ltr:pl-8;
+}
+.glorious-input.icon-sm > input {
+  @apply rtl:pr-8 ltr:pl-8;
+}
+.glorious-input.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;
+}
+.glorious-input-tag > div {
+  @apply bg-green-500 px-1 rounded text-white flex items-center gap-2 cursor-pointer;
+}
+
+.glorious-input-options {
+  @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
+}
+.glorious-input-options > div {
+  @apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;
+}
+.glorious-input-options.size-md {
+  @apply top-11;
+}
+.glorious-input div > input::placeholder {
+  @apply text-gray-500;
+}

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

@@ -0,0 +1,87 @@
+@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;
+    @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
+  &-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 {
+      @apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;
+    }
+
+    &.size-md {
+      @apply top-11;
+    }
+  }
+
+  div > input::placeholder {
+    @apply text-gray-500;
+  }
+}

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

@@ -0,0 +1,43 @@
+.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/runtime/style/components/loading.scss

@@ -0,0 +1,92 @@
+.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/runtime/style/components/modal.css

@@ -0,0 +1,66 @@
+.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;
+}
+.glorious-scaffold-modal-header {
+  @apply flex justify-between items-center;
+}
+.glorious-scaffold-modal-footer {
+  @apply flex justify-center gap-3 mt-3;
+}
+.glorious-scaffold-modal-footer > button {
+  @apply min-w-24;
+}
+.glorious-scaffold-modal-bg-blur {
+  @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 bg-opacity-50 h-full w-full z-[40];
+}
+.glorious-scaffold-modal.size-full {
+  @apply w-full h-full top-0 rounded-none;
+}
+.glorious-scaffold-modal.size-xl {
+  @apply md:w-[70%] w-full md:h-max max-h-[calc(100%-15%)];
+}
+.glorious-scaffold-modal.size-lg {
+  @apply md:w-[60%] w-full md:h-max max-h-[calc(100%-15%)];
+}
+.glorious-scaffold-modal.size-md {
+  @apply md:w-[50%] w-full md:h-max max-h-[calc(100%-15%)];
+}
+.glorious-scaffold-modal.size-sm {
+  @apply lg:w-[25%] md:w-[35%] w-full md:h-max max-h-[calc(100%-15%)];
+}
+.glorious-scaffold-modal.close {
+  @apply hidden;
+}
+.glorious-scaffold-modal.open.animation {
+  animation: animationMobile 0.3s normal forwards;
+}
+@screen md {
+  .glorious-scaffold-modal.open.animation {
+    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/runtime/style/components/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 bg-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/runtime/style/components/paginate.scss

@@ -0,0 +1,18 @@
+.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];
+      }
+    }
+  }
+}
+.paginate {
+  @apply text-[13px];
+  &.active {
+    @apply bg-green-500 rounded-lg text-white font-bold text-[13px];
+  }
+}

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

@@ -0,0 +1,121 @@
+.glorious-radio {
+  @apply block relative cursor-pointer;
+}
+.glorious-radio > input {
+  @apply hidden;
+}
+.glorious-radio > input:checked ~ div {
+  @apply border-none;
+}
+.glorious-radio > input:checked ~ div:after {
+  content: "";
+  @apply block w-1 h-1 bg-white rounded-full;
+}
+.glorious-radio > input:disabled ~ div {
+  @apply cursor-not-allowed;
+}
+.glorious-radio > div:last-child {
+  @apply border border-gray-500 rounded-full bg-white left-0 top-0 absolute hover:shadow-lg;
+}
+.glorious-radio > div:last-child > div:first-child {
+  @apply hidden;
+}
+.glorious-radio > div:last-child:after {
+  @apply absolute hidden right-0 top-0 left-0 bottom-0 m-auto w-10 h-10 bg-white rounded-full;
+}
+.glorious-radio.orange > input:checked ~ div {
+  @apply bg-orange-500;
+}
+.glorious-radio.blue > input:checked ~ div {
+  @apply bg-blue-500;
+}
+.glorious-radio.gray > input:checked ~ div {
+  @apply bg-gray-500;
+}
+.glorious-radio.red > input:checked ~ div {
+  @apply bg-red-500;
+}
+.glorious-radio.green > input:checked ~ div {
+  @apply bg-green-500;
+}
+.glorious-radio.size-5xl {
+  @apply w-[40px] h-[40px];
+}
+.glorious-radio.size-5xl > div:last-child {
+  @apply w-[40px] h-[40px];
+}
+.glorious-radio.size-5xl > input:checked ~ div:after {
+  @apply w-[30px] h-[30px];
+}
+.glorious-radio.size-4xl {
+  @apply w-[36px] h-[36px];
+}
+.glorious-radio.size-4xl > div:last-child {
+  @apply w-[36px] h-[36px];
+}
+.glorious-radio.size-4xl > input:checked ~ div:after {
+  @apply w-[26px] h-[26px];
+}
+.glorious-radio.size-3xl {
+  @apply w-[32px] h-[32px];
+}
+.glorious-radio.size-3xl > div:last-child {
+  @apply w-[32px] h-[32px];
+}
+.glorious-radio.size-3xl > input:checked ~ div:after {
+  @apply w-[22px] h-[22px];
+}
+.glorious-radio.size-2xl {
+  @apply w-[28px] h-[28px];
+}
+.glorious-radio.size-2xl > div:last-child {
+  @apply w-[28px] h-[28px];
+}
+.glorious-radio.size-2xl > input:checked ~ div:after {
+  @apply w-[18px] h-[18px];
+}
+.glorious-radio.size-xl {
+  @apply w-[24px] h-[24px];
+}
+.glorious-radio.size-xl > div:last-child {
+  @apply w-[24px] h-[24px];
+}
+.glorious-radio.size-xl > input:checked ~ div:after {
+  @apply w-[14px] h-[14px];
+}
+.glorious-radio.size-lg {
+  @apply w-[18px] h-[18px];
+}
+.glorious-radio.size-lg > div:last-child {
+  @apply w-[18px] h-[18px];
+}
+.glorious-radio.size-lg > input:checked ~ div:after {
+  @apply w-[8px] h-[8px];
+}
+.glorious-radio.size-md {
+  @apply w-[14px] h-[14px];
+}
+.glorious-radio.size-md > div:last-child {
+  @apply w-[14px] h-[14px];
+}
+.glorious-radio.size-md > input:checked ~ div:after {
+  @apply w-[4px] h-[4px];
+}
+.glorious-radio.size-sm {
+  @apply w-[10px] h-[10px];
+}
+.glorious-radio.size-sm > div:last-child {
+  @apply w-[10px] h-[10px];
+}
+.glorious-radio.size-sm > input:checked ~ div:after {
+  @apply w-[0px] h-[0px];
+}
+.glorious-radio.size-xs {
+  @apply w-[6px] h-[6px];
+}
+.glorious-radio.size-xs > div:last-child {
+  @apply w-[6px] h-[6px];
+}
+.glorious-radio.size-xs > input:checked ~ div:after {
+  @apply w-[-4px] h-[-4px];
+}