nuxt-glorious 2.0.0-develop-3 → 2.0.0-develop-5

package/dist/module.json

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

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

@@ -4,7 +4,7 @@ import { hasValidationError, getAttribute } from '../helper'
 import _props from '../props/Input'
 
 const props: any = defineProps(_props)
-const modelValue = defineModel()
+const modelValue: any = defineModel()
 const { numbersWithSeparateSamePrice } = useGloriousCore()
 modelValue.value = ''
 const inputValue: any = ref(null)
@@ -68,6 +68,18 @@ const addTag = (event: any) => {
   inputValue.value = ''
 }
 
+const isSelected = (value: any): boolean => {
+  if (typeof tags.value !== 'object' && typeof modelValue.value !== 'object')
+    return false
+
+  console.log()
+
+  return (
+    tags.value.some((item: any) => item.value === value) ||
+    (typeof modelValue.value === 'object' &&
+      modelValue.value.some((item: any) => item.value === value))
+  )
+}
 const addTagViaOption = (option: any, event: any) => {
   //   event.stopPropagation() if want not close with window
   if (
@@ -77,9 +89,7 @@ const addTagViaOption = (option: any, event: any) => {
   )
     tags.value = []
 
-  const find = tags.value.find((item: any) => item.value === option.value)
-
-  if (typeof find === 'undefined') {
+  if (!isSelected(option.value)) {
     const value: any = option
     tags.value.push(value)
     modelValue.value = tags.value
@@ -202,6 +212,11 @@ const inputClicked = (event: any) => {
               v-for="(option, index) in props.options"
               :key="index"
               @click="addTagViaOption(option, $event)"
+              :class="[
+                isSelected(option.value)
+                  ? '!cursor-not-allowed bg-gray-50'
+                  : '',
+              ]"
             >
               {{
                 option[

package/dist/runtime/{scss/glorious.css → style/style.css}

@@ -741,6 +741,9 @@ button:focus-visible {
 .glorious-scaffold-modal-footer > button {
   @apply min-w-24;
 }
+.glorious-scaffold-modal div.glorious-input-options {
+  @apply fixed;
+}
 .glorious-scaffold-modal-bg-blur {
   @apply fixed top-0 right-0 backdrop-blur-sm bg-gray-500 opacity-50 h-full w-full z-[40];
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-develop-3",
+  "version": "2.0.0-develop-5",
   "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",
@@ -11,17 +11,17 @@
       "types": "./dist/types.d.ts",
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs",
-      "style": "./dist/runtime/scss/glorious.css"
+      "style": "./dist/runtime/style/style.css"
     }
   },
-  "style": "./dist/runtime/scss/glorious.css",
+  "style": "./dist/runtime/style/style.css",
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "prepack": "cp -R ../../assets/scss/glorious src/runtime/scss && nuxt-module-build build",
+    "prepack": "bash load-style.sh && nuxt-module-build build",
     "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",

package/dist/runtime/scss/alert.css

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

@@ -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/scss/breadcrumb.css

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

@@ -1,113 +0,0 @@
-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/drawer.css

@@ -1,56 +0,0 @@
-.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/glorious/alert.css

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

@@ -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/scss/glorious/breadcrumb.css

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

package/dist/runtime/scss/glorious/button.css

@@ -1,113 +0,0 @@
-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/glorious/checkbox.css

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