nuxt-glorious 1.2.9-6 → 1.2.9-8

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "1.2.9-6"
+  "version": "1.2.9-8"
 }

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

@@ -29,7 +29,7 @@ const props: any = defineProps(_props)
     :to="props.to"
     :class="[
       `glorious-button`,
-      `color-${props.color}`,
+      `button-color-${props.color}`,
       `size-${props.size}`,
       props.outline ? 'outline' : '',
     ]"

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

@@ -23,6 +23,7 @@ watch(
 
 modelValue.value = null
 selectValue.value = null
+const firstVal = selectValue.value
 </script>
 
 <template>
@@ -31,6 +32,7 @@ selectValue.value = null
       {{ props.title }}
     </span>
     <div class="grow flex relative">
+      {{ selectValue }}
       <select
         v-model="selectValue"
         aria-label="glorious select"
@@ -38,6 +40,16 @@ selectValue.value = null
         class="grow glorious-select"
         :class="[`color-${props.color}`, props.size]"
       >
+        <option
+          :selected="
+            selectValue === null ||
+            selectValue === '' ||
+            typeof selectValue === 'undefined'
+          "
+          :value="firstVal"
+        >
+          {{ props.placeholder }}
+        </option>
         <option
           v-for="(item, index) in props.options"
           :key="index"
@@ -46,16 +58,6 @@ selectValue.value = null
           {{ item[props.displayTextKey] }}
         </option>
       </select>
-      <span
-        v-if="
-          selectValue === null ||
-          selectValue === '' ||
-          typeof selectValue === 'undefined'
-        "
-        class="absolute top-0 bottom-0 my-auto px-3 h-max text-gray-500"
-      >
-        {{ props.placeholder }}
-      </span>
     </div>
     <GErrorText :error="props.error" />
   </div>

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

@@ -27,87 +27,87 @@ button:focus-visible {
   @apply py-0.5;
 }
 
-.color-orange {
+.button-color-orange {
   @apply bg-orange-600 border-orange-700 hover:bg-orange-700;
 }
-.color-orange.outline {
+.button-color-orange.outline {
   @apply bg-transparent border outline-none;
   @apply text-orange-500 hover:bg-orange-100;
 }
-.color-orange.outline div.loading > div > div {
+.button-color-orange.outline div.loading > div > div {
   border-color: theme("colors.orange.700") !important;
 }
-.color-orange:disabled {
+.button-color-orange:disabled {
   @apply cursor-not-allowed;
 }
-.color-orange:disabled:not(:disabled) {
+.button-color-orange:disabled:not(:disabled) {
   @apply bg-orange-300;
 }
 
-.color-blue {
+.button-color-blue {
   @apply bg-blue-600 border-blue-700 hover:bg-blue-700;
 }
-.color-blue.outline {
+.button-color-blue.outline {
   @apply bg-transparent border outline-none;
   @apply text-blue-500 hover:bg-blue-100;
 }
-.color-blue.outline div.loading > div > div {
+.button-color-blue.outline div.loading > div > div {
   border-color: theme("colors.blue.700") !important;
 }
-.color-blue:disabled {
+.button-color-blue:disabled {
   @apply cursor-not-allowed;
 }
-.color-blue:disabled:not(:disabled) {
+.button-color-blue:disabled:not(:disabled) {
   @apply bg-blue-300;
 }
 
-.color-gray {
+.button-color-gray {
   @apply bg-gray-600 border-gray-700 hover:bg-gray-700;
 }
-.color-gray.outline {
+.button-color-gray.outline {
   @apply bg-transparent border outline-none;
   @apply text-gray-500 hover:bg-gray-100;
 }
-.color-gray.outline div.loading > div > div {
+.button-color-gray.outline div.loading > div > div {
   border-color: theme("colors.gray.700") !important;
 }
-.color-gray:disabled {
+.button-color-gray:disabled {
   @apply cursor-not-allowed;
 }
-.color-gray:disabled:not(:disabled) {
+.button-color-gray:disabled:not(:disabled) {
   @apply bg-gray-300;
 }
 
-.color-red {
+.button-color-red {
   @apply bg-red-600 border-red-700 hover:bg-red-700;
 }
-.color-red.outline {
+.button-color-red.outline {
   @apply bg-transparent border outline-none;
   @apply text-red-500 hover:bg-red-100;
 }
-.color-red.outline div.loading > div > div {
+.button-color-red.outline div.loading > div > div {
   border-color: theme("colors.red.700") !important;
 }
-.color-red:disabled {
+.button-color-red:disabled {
   @apply cursor-not-allowed;
 }
-.color-red:disabled:not(:disabled) {
+.button-color-red:disabled:not(:disabled) {
   @apply bg-red-300;
 }
 
-.color-green {
+.button-color-green {
   @apply bg-green-600 border-green-700 hover:bg-green-700;
 }
-.color-green.outline {
+.button-color-green.outline {
   @apply bg-transparent border outline-none;
   @apply text-green-500 hover:bg-green-100;
 }
-.color-green.outline div.loading > div > div {
+.button-color-green.outline div.loading > div > div {
   border-color: theme("colors.green.700") !important;
 }
-.color-green:disabled {
+.button-color-green:disabled {
   @apply cursor-not-allowed;
 }
-.color-green:disabled:not(:disabled) {
+.button-color-green:disabled:not(:disabled) {
   @apply bg-green-300;
 }

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

@@ -11,7 +11,7 @@ button:focus-visible {
   @include mixin.load-size();
 }
 @each $color in var.$colors {
-  .#{'color-' + $color} {
+  .#{'button-color-' + $color} {
     @apply #{"bg-" + ($color) + "-600 border-" + $color + "-700 hover:bg-" + $color + "-700"};
 
     &.outline {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.9-6",
+  "version": "1.2.9-8",
   "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",