nuxt-glorious 2.0.0-develop-1 → 2.0.0-develop-3

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "2.0.0-develop-1"
+  "version": "2.0.0-develop-3"
 }

package/dist/module.mjs

@@ -57,6 +57,7 @@ const module = defineNuxtModule({
         dir: resolver.resolve("./runtime/assets")
       });
     });
+    addPlugin(resolver.resolve("./runtime/plugins/modalClose"));
     addPlugin(resolver.resolve("./runtime/plugins/InputComponent"));
     addRouteMiddleware({
       name: "g-auth-strategy",

package/dist/runtime/components/G/Modal.vue

@@ -26,14 +26,6 @@ watch(
     }
   }
 )
-
-onMounted(() => {
-  document.onkeydown = (e) => {
-    if (e.code === 'Escape') {
-      modelValue.value = false
-    }
-  }
-})
 </script>
 
 <template>
@@ -51,7 +43,7 @@ onMounted(() => {
     >
       <span class="font-medium">{{ props.title }}</span>
       <GButton
-        class="flex justify-center items-center w-6 h-6"
+        class="close-modal-btn"
         size="sm"
         color="red"
         @click="modelValue = false"

package/dist/runtime/plugins/modalClose.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/modalClose.mjs

@@ -0,0 +1,17 @@
+import { defineNuxtPlugin } from "#imports";
+import { GloriousStore } from "../stores/GloriousStore.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  const gs = GloriousStore();
+  nuxtApp.hook("app:beforeMount", () => {
+    document.onkeydown = (e) => {
+      if (e.code === "Escape") {
+        Object.entries(gs.modals).map((item, index) => {
+          const [key, value] = item;
+          if (value) {
+            gs.modals[key] = false;
+          }
+        });
+      }
+    };
+  });
+});

package/dist/runtime/scss/alert.css

@@ -0,0 +1,33 @@
+.glorious-alert {
+  @apply p-3 rounded-md shadow-md;
+}
+.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/scss/avatar.css

@@ -0,0 +1,57 @@
+.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/scss/breadcrumb.css

@@ -0,0 +1,6 @@
+.glorious-breadcrumb {
+  @apply text-sm text-gray-500;
+}
+.glorious-breadcrumb .end-text {
+  @apply font-bold text-base text-black;
+}

package/dist/runtime/scss/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;
+}
+.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;
+}
+
+.button-color-orange {
+  @apply bg-orange-600 border-orange-700 hover:bg-orange-700;
+}
+.button-color-orange.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-orange-500 hover:bg-orange-100;
+}
+.button-color-orange.outline div.loading > div > div {
+  border-color: theme("colors.orange.700") !important;
+}
+.button-color-orange:disabled {
+  @apply cursor-not-allowed;
+}
+.button-color-orange:disabled:not(:disabled) {
+  @apply bg-orange-300;
+}
+
+.button-color-blue {
+  @apply bg-blue-600 border-blue-700 hover:bg-blue-700;
+}
+.button-color-blue.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-blue-500 hover:bg-blue-100;
+}
+.button-color-blue.outline div.loading > div > div {
+  border-color: theme("colors.blue.700") !important;
+}
+.button-color-blue:disabled {
+  @apply cursor-not-allowed;
+}
+.button-color-blue:disabled:not(:disabled) {
+  @apply bg-blue-300;
+}
+
+.button-color-gray {
+  @apply bg-gray-600 border-gray-700 hover:bg-gray-700;
+}
+.button-color-gray.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-gray-500 hover:bg-gray-100;
+}
+.button-color-gray.outline div.loading > div > div {
+  border-color: theme("colors.gray.700") !important;
+}
+.button-color-gray:disabled {
+  @apply cursor-not-allowed;
+}
+.button-color-gray:disabled:not(:disabled) {
+  @apply bg-gray-300;
+}
+
+.button-color-red {
+  @apply bg-red-600 border-red-700 hover:bg-red-700;
+}
+.button-color-red.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-red-500 hover:bg-red-100;
+}
+.button-color-red.outline div.loading > div > div {
+  border-color: theme("colors.red.700") !important;
+}
+.button-color-red:disabled {
+  @apply cursor-not-allowed;
+}
+.button-color-red:disabled:not(:disabled) {
+  @apply bg-red-300;
+}
+
+.button-color-green {
+  @apply bg-green-600 border-green-700 hover:bg-green-700;
+}
+.button-color-green.outline {
+  @apply bg-transparent border outline-none;
+  @apply text-green-500 hover:bg-green-100;
+}
+.button-color-green.outline div.loading > div > div {
+  border-color: theme("colors.green.700") !important;
+}
+.button-color-green:disabled {
+  @apply cursor-not-allowed;
+}
+.button-color-green:disabled:not(:disabled) {
+  @apply bg-green-300;
+}

package/dist/runtime/scss/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/scss/drawer.css

@@ -0,0 +1,56 @@
+.glorious-drawer {
+  @apply fixed top-0 bg-white h-full w-[300px] z-[50];
+}
+.glorious-drawer > div {
+  @apply bg-white min-h-screen;
+}
+.glorious-drawer.close.right {
+  animation: drawer-close-right 250ms normal forwards;
+}
+.glorious-drawer.close.left {
+  animation: drawer-close-left 250ms normal forwards;
+}
+.glorious-drawer.open {
+  @apply flex;
+}
+.glorious-drawer.open.right {
+  animation: drawer-open-right 100ms normal forwards;
+}
+.glorious-drawer.open.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/scss/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/scss/glorious/alert.css

@@ -0,0 +1,33 @@
+.glorious-alert {
+  @apply p-3 rounded-md shadow-md;
+}
+.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/scss/glorious/avatar.css

@@ -0,0 +1,57 @@
+.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/scss/glorious/breadcrumb.css

@@ -0,0 +1,6 @@
+.glorious-breadcrumb {
+  @apply text-sm text-gray-500;
+}
+.glorious-breadcrumb .end-text {
+  @apply font-bold text-base text-black;
+}