nuxt-glorious 1.2.0 → 1.2.9-5

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

@@ -0,0 +1,59 @@
+@use '../variable.scss' as var;
+
+.glorious-radio {
+  @apply block relative cursor-pointer;
+
+  > input {
+    @apply hidden;
+
+    &:checked ~ div {
+      @apply border-none;
+
+      &:after {
+        content: '';
+        @apply block w-1 h-1 bg-white rounded-full;
+      }
+    }
+
+    &:disabled ~ div {
+      @apply cursor-not-allowed;
+    }
+  }
+  > div:last-child {
+    @apply border border-gray-500 rounded-full bg-white left-0 top-0 absolute hover:shadow-lg;
+    > div:first-child {
+      @apply hidden;
+    }
+
+    &:after {
+      @apply absolute hidden right-0 top-0 left-0 bottom-0 m-auto w-10 h-10 bg-white rounded-full;
+    }
+  }
+
+  @each $color in var.$colors {
+    &.#{'' + $color} {
+      > input {
+        &:checked ~ div {
+          @apply #{'bg-'+$color+'-500'};
+        }
+      }
+    }
+  }
+
+  @each $key, $value in var.$sizes {
+    &.size-#{$key} {
+      @apply w-[#{($value - 14)}px] h-[#{($value - 14)}px];
+      > div:last-child {
+        @apply w-[#{($value - 14)}px] h-[#{($value - 14)}px];
+      }
+
+      > input {
+        &:checked ~ div {
+          &:after {
+            @apply w-[#{($value - 24)}px] h-[#{($value - 24)}px];
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+.rating {
+  display: inline-block;
+}
+
+.rating input {
+  display: none;
+}
+
+.rating label {
+  float: right;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.rating label:before {
+  content: "★";
+  font-size: 30px;
+}
+
+.rating input:checked ~ label,
+.rating label:hover,
+.rating label:hover ~ label {
+  color: #ffd700;
+  transition: color 0.3s;
+}

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

@@ -0,0 +1,25 @@
+.rating {
+  display: inline-block;
+}
+
+.rating input {
+  display: none;
+}
+
+.rating label {
+  float: right;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.rating label:before {
+  content: '\2605';
+  font-size: 30px;
+}
+
+.rating input:checked ~ label,
+.rating label:hover,
+.rating label:hover ~ label {
+  color: #ffd700;
+  transition: color 0.3s;
+}

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

@@ -0,0 +1,46 @@
+.xl.glorious-select {
+  @apply py-[0.657rem];
+}
+.lg.glorious-select {
+  @apply py-[0.532rem];
+}
+.md.glorious-select {
+  @apply py-[0.407rem];
+}
+.sm.glorious-select {
+  @apply py-[0.282rem];
+}
+.xsm.glorious-select {
+  @apply py-[0.157rem];
+}
+
+.glorious-select:focus-visible {
+  @apply outline-none ring-2;
+}
+
+.color-orange {
+  @apply ring-orange-500;
+}
+
+.color-blue {
+  @apply ring-blue-500;
+}
+
+.color-gray {
+  @apply ring-gray-500;
+}
+
+.color-red {
+  @apply ring-red-500;
+}
+
+.color-green {
+  @apply ring-green-500;
+}
+
+.glorious-select {
+  @apply rounded-md ring-1 px-3 text-gray-500 text-sm;
+}
+.glorious-select:disabled {
+  @apply cursor-not-allowed;
+}

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

@@ -0,0 +1,40 @@
+@use '../variable.scss' as var;
+
+%select-size {
+  &.xl {
+    @apply py-[0.657rem];
+  }
+  &.lg {
+    @apply py-[0.532rem];
+  }
+  &.md {
+    @apply py-[0.407rem];
+  }
+  &.sm {
+    @apply py-[0.282rem];
+  }
+  &.xsm {
+    @apply py-[0.157rem];
+  }
+}
+
+%focus {
+  &:focus-visible {
+    @apply outline-none ring-2;
+  }
+}
+
+@each $color in var.$colors {
+  .#{'color-' + $color} {
+    @apply #{'ring-'+$color+'-500'};
+  }
+}
+
+.glorious-select {
+  @apply rounded-md ring-1 px-3 text-gray-500 text-sm;
+  @extend %select-size, %focus;
+
+  &:disabled {
+    @apply cursor-not-allowed;
+  }
+}

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

@@ -0,0 +1,61 @@
+.switch {
+  direction: ltr;
+  --button-width: 3em;
+  --button-height: 1.5em;
+  --toggle-diameter: 1em;
+  --button-toggle-offset: calc(
+    (var(--button-height) - var(--toggle-diameter)) / 2
+  );
+  --toggle-shadow-offset: 10px;
+  --toggle-wider: 3em;
+}
+.switch-slider {
+  @apply bg-gray-300;
+  display: inline-block;
+  width: var(--button-width);
+  height: var(--button-height);
+  border-radius: calc(var(--button-height) / 2);
+  position: relative;
+  transition: 0.3s all ease-in-out;
+}
+.switch-slider::after {
+  content: "";
+  display: inline-block;
+  width: var(--toggle-diameter);
+  height: var(--toggle-diameter);
+  background-color: #fff;
+  border-radius: calc(var(--toggle-diameter) / 2);
+  position: absolute;
+  top: var(--button-toggle-offset);
+  transform: translateX(var(--button-toggle-offset));
+  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+  transition: 0.3s all ease-in-out;
+}
+.switch.color-orange input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.orange.500");
+}
+.switch.color-blue input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.blue.500");
+}
+.switch.color-gray input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.gray.500");
+}
+.switch.color-red input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.red.500");
+}
+.switch.color-green input[type=checkbox]:checked + .switch-slider {
+  background-color: theme("colors.green.500");
+}
+.switch input[type=checkbox]:checked + .switch-slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
+  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+}
+.switch input[type=checkbox] {
+  display: none;
+}
+.switch input[type=checkbox]:active + .switch-slider::after {
+  width: var(--toggle-wider);
+}
+.switch input[type=checkbox]:checked:active + .switch-slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
+}

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

@@ -0,0 +1,74 @@
+@use '../variable.scss' as var;
+
+.switch {
+  direction: ltr;
+  --button-width: 3em;
+  --button-height: 1.5em;
+  --toggle-diameter: 1em;
+  --button-toggle-offset: calc(
+    (var(--button-height) - var(--toggle-diameter)) / 2
+  );
+  --toggle-shadow-offset: 10px;
+  --toggle-wider: 3em;
+
+  &-slider {
+    @apply bg-gray-300;
+    display: inline-block;
+    width: var(--button-width);
+    height: var(--button-height);
+
+    border-radius: calc(var(--button-height) / 2);
+    position: relative;
+    transition: 0.3s all ease-in-out;
+
+    &::after {
+      content: '';
+      display: inline-block;
+      width: var(--toggle-diameter);
+      height: var(--toggle-diameter);
+      background-color: #fff;
+      border-radius: calc(var(--toggle-diameter) / 2);
+      position: absolute;
+      top: var(--button-toggle-offset);
+      transform: translateX(var(--button-toggle-offset));
+      box-shadow: var(--toggle-shadow-offset) 0
+        calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+      transition: 0.3s all ease-in-out;
+    }
+  }
+
+  @each $color in var.$colors {
+    &#{'.color-' + $color} {
+      input[type='checkbox']:checked + .switch-slider {
+        background-color: #{theme('colors.' + $color + '.500')};
+      }
+    }
+  }
+
+  input[type='checkbox']:checked + .switch-slider::after {
+    transform: translateX(
+      calc(
+        var(--button-width) - var(--toggle-diameter) -
+          var(--button-toggle-offset)
+      )
+    );
+    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0
+      calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+  }
+
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  input[type='checkbox']:active + .switch-slider::after {
+    width: var(--toggle-wider);
+  }
+
+  input[type='checkbox']:checked:active + .switch-slider::after {
+    transform: translateX(
+      calc(
+        var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)
+      )
+    );
+  }
+}

package/dist/runtime/{assets/style → style}/components/tab.css

@@ -1,9 +1,9 @@
 .glorious-tab {
-  @apply flex justify-between bg-green-100 px-3 py-2 rounded-lg gap-3 overflow-y-auto w-full shadow-md;
+  @apply flex justify-between bg-green-100 rounded-lg gap-3 w-max max-w-full shadow-md;
 }
-.glorious-tab > div > button {
+.glorious-tab 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;
 }
-.glorious-tab > div > button.active {
+.glorious-tab div > div > button.active {
   @apply font-bold text-white bg-green-700;
 }

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

@@ -0,0 +1,11 @@
+.glorious-tab {
+  @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;
+
+    &.active {
+      @apply font-bold text-white bg-green-700;
+    }
+  }
+}

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

@@ -0,0 +1,99 @@
+.glorious-table {
+  @apply overflow-x-auto;
+}
+.glorious-table.color-orange > table > thead {
+  @apply rounded-t-md overflow-hidden;
+}
+.glorious-table.color-orange > table > thead > tr > th:first-child {
+  @apply rounded-r-lg bg-orange-400;
+}
+.glorious-table.color-orange > table > thead > tr > th {
+  @apply bg-orange-400;
+}
+.glorious-table.color-orange > table > thead > tr > th:last-child {
+  @apply rounded-l-lg bg-orange-400;
+}
+.glorious-table.color-orange > table > tbody > tr:nth-child(even) {
+  @apply bg-orange-50;
+}
+.glorious-table.color-orange > table > tbody > tr > td {
+  @apply px-4 py-2 text-center;
+}
+.glorious-table.color-blue > table > thead {
+  @apply rounded-t-md overflow-hidden;
+}
+.glorious-table.color-blue > table > thead > tr > th:first-child {
+  @apply rounded-r-lg bg-blue-400;
+}
+.glorious-table.color-blue > table > thead > tr > th {
+  @apply bg-blue-400;
+}
+.glorious-table.color-blue > table > thead > tr > th:last-child {
+  @apply rounded-l-lg bg-blue-400;
+}
+.glorious-table.color-blue > table > tbody > tr:nth-child(even) {
+  @apply bg-blue-50;
+}
+.glorious-table.color-blue > table > tbody > tr > td {
+  @apply px-4 py-2 text-center;
+}
+.glorious-table.color-gray > table > thead {
+  @apply rounded-t-md overflow-hidden;
+}
+.glorious-table.color-gray > table > thead > tr > th:first-child {
+  @apply rounded-r-lg bg-gray-400;
+}
+.glorious-table.color-gray > table > thead > tr > th {
+  @apply bg-gray-400;
+}
+.glorious-table.color-gray > table > thead > tr > th:last-child {
+  @apply rounded-l-lg bg-gray-400;
+}
+.glorious-table.color-gray > table > tbody > tr:nth-child(even) {
+  @apply bg-gray-50;
+}
+.glorious-table.color-gray > table > tbody > tr > td {
+  @apply px-4 py-2 text-center;
+}
+.glorious-table.color-red > table > thead {
+  @apply rounded-t-md overflow-hidden;
+}
+.glorious-table.color-red > table > thead > tr > th:first-child {
+  @apply rounded-r-lg bg-red-400;
+}
+.glorious-table.color-red > table > thead > tr > th {
+  @apply bg-red-400;
+}
+.glorious-table.color-red > table > thead > tr > th:last-child {
+  @apply rounded-l-lg bg-red-400;
+}
+.glorious-table.color-red > table > tbody > tr:nth-child(even) {
+  @apply bg-red-50;
+}
+.glorious-table.color-red > table > tbody > tr > td {
+  @apply px-4 py-2 text-center;
+}
+.glorious-table.color-green > table > thead {
+  @apply rounded-t-md overflow-hidden;
+}
+.glorious-table.color-green > table > thead > tr > th:first-child {
+  @apply rounded-r-lg bg-green-400;
+}
+.glorious-table.color-green > table > thead > tr > th {
+  @apply bg-green-400;
+}
+.glorious-table.color-green > table > thead > tr > th:last-child {
+  @apply rounded-l-lg bg-green-400;
+}
+.glorious-table.color-green > table > tbody > tr:nth-child(even) {
+  @apply bg-green-50;
+}
+.glorious-table.color-green > table > tbody > tr > td {
+  @apply px-4 py-2 text-center;
+}
+.glorious-table > table {
+  @apply w-full;
+}
+.glorious-table > table > thead > tr > th {
+  @apply px-4 py-2 text-center;
+}

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

@@ -0,0 +1,41 @@
+@use '../variable.scss' as var;
+
+.glorious-table {
+  @apply overflow-x-auto;
+  @each $color in var.$colors {
+    &.#{'color-' + $color} {
+      > table > thead {
+        @apply rounded-t-md overflow-hidden;
+        > tr {
+          > th:first-child {
+            @apply rounded-r-lg #{"bg-" + $color + "-400"};
+          }
+          > th {
+            @apply #{"bg-" + $color + "-400"};
+          }
+          > th:last-child {
+            @apply rounded-l-lg #{"bg-" + $color + "-400"};
+          }
+        }
+      }
+
+      > table > tbody {
+        > tr {
+          &:nth-child(even) {
+            @apply #{"bg-" + $color + "-50"};
+          }
+          > td {
+            @apply px-4 py-2 text-center;
+          }
+        }
+      }
+    }
+  }
+  > table {
+    @apply w-full;
+
+    > thead > tr > th {
+      @apply px-4 py-2 text-center;
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+.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;
+}
+.glorious-textarea > textarea {
+  @apply w-full;
+}
+.glorious-textarea > textarea::placeholder {
+  @apply text-[14px];
+}

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

@@ -0,0 +1,43 @@
+@use '../mixin.scss' as mixin;
+@use '../variable.scss' as var;
+
+%textarea-size {
+  &.xl {
+    @apply py-2.5;
+  }
+  &.lg {
+    @apply py-2;
+  }
+  &.md {
+    @apply py-1.5;
+  }
+  &.sm {
+    @apply py-1;
+  }
+  &.xsm {
+    @apply py-0.5;
+  }
+}
+
+@each $color in var.$colors {
+  .#{'glorious-textarea-' + $color} {
+    @apply #{"ring-" + $color + "-500"};
+    @apply rounded-md ring-1 px-3;
+    &:focus-visible {
+      @apply outline-none ring-2;
+    }
+    &:disabled {
+      @apply bg-green-300 cursor-not-allowed;
+    }
+  }
+}
+
+.glorious-textarea {
+  @apply relative w-full;
+  > textarea {
+    @apply w-full;
+  }
+  > textarea::placeholder {
+    @apply text-[14px];
+  }
+}

package/dist/runtime/style/components/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 !important;
+  @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/style/components/timeline.scss

@@ -0,0 +1,40 @@
+@use '../variable.scss' as var;
+
+.glorious-timeline {
+  &-items {
+    @apply relative;
+
+    div {
+      @apply relative;
+
+      &::before {
+        content: '';
+        @apply absolute w-[2px] right-[-15px];
+        &:not(:last-child) {
+          @apply h-[calc(100%+20px)];
+        }
+      }
+    }
+
+    &-count {
+      @apply absolute w-5 h-5 top-0 right-[-24px] rounded-full !important;
+      @apply text-white flex justify-center items-center font-medium;
+    }
+
+    @each $color in var.$colors {
+      &.#{'color-' + $color} > div {
+        &::before {
+          @apply #{"bg-" + $color + "-500"};
+        }
+      }
+    }
+
+    @each $color in var.$colors {
+      &.#{'color-' + $color} {
+        .glorious-timeline-items-count {
+          @apply #{"bg-" + $color + "-500"};
+        }
+      }
+    }
+  }
+}