nuxt-glorious 1.2.3-4 → 1.2.3-6

package/dist/module.json

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

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

@@ -98,4 +98,7 @@
 }
 .glorious-input-options.size-md {
   @apply top-11;
+}
+.glorious-input div > input::placeholder {
+  @apply text-gray-500;
 }

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

@@ -7,29 +7,34 @@ const props = defineProps({
   },
   color: {
     required: false,
-    default: "green",
-    type: String as () => "orange" | "blue" | "gray" | "red" | "green",
+    default: 'green',
+    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'green',
   },
   size: {
     required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "xs",
+    default: 'md',
+    type: String as () => 'xl' | 'lg' | 'md' | 'sm' | 'xs',
   },
   disabled: {
     required: false,
     default: false,
     type: Boolean,
   },
-});
+})
 
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(['update:modelValue'])
 
 const inputFunction = (event: any) =>
-  emits("update:modelValue", event.currentTarget.checked);
+  emits('update:modelValue', event.currentTarget.checked)
+
+emits('update:modelValue', false)
 </script>
 
 <template>
-  <label class="glorious-checkbox" :class="[props.color, `size-${props.size}`]">
+  <label
+    class="glorious-checkbox"
+    :class="[props.color, `size-${props.size}`]"
+  >
     <input
       type="checkbox"
       :disabled="props.disabled"

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

@@ -400,4 +400,7 @@ const inputClicked = (event: any) => {
 .glorious-input-options.size-md {
   @apply top-11;
 }
+.glorious-input div > input::placeholder {
+  @apply text-gray-500;
+}
 </style>

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { ref, watch } from "#imports";
+import { ref, watch } from '#imports'
 interface selectOptionsInterface {
-  text: string;
-  value: [string, object];
+  text: string
+  value: [string, object]
 }
-const props = defineProps({
+const props: any = defineProps({
   modelValue: {
     required: false,
     default: null,
@@ -17,22 +17,22 @@ const props = defineProps({
   },
   color: {
     required: false,
-    default: "primary",
+    default: 'primary',
     type: String,
   },
   size: {
     required: false,
-    default: "md",
+    default: 'md',
     type: String,
   },
   title: {
     required: false,
-    default: "",
+    default: '',
     type: String,
   },
   error: {
     required: false,
-    default: "|",
+    default: '|',
     type: String,
   },
   disabled: {
@@ -41,28 +41,36 @@ const props = defineProps({
     type: Boolean,
   },
   placeholder: {
-    require: false,
-    default: "",
+    required: false,
+    default: '',
     type: String,
   },
-});
-const selectValue: any = ref(null);
-const emits = defineEmits(["update:modelValue"]);
+  displayTextKey: {
+    required: false,
+    default: 'text',
+    type: String,
+  },
+})
+const selectValue: any = ref(null)
+const emits = defineEmits(['update:modelValue'])
 watch(
   () => selectValue.value,
   () => {
-    emits("update:modelValue", selectValue.value);
+    emits('update:modelValue', selectValue.value)
   }
-);
+)
 
 // -------------------------------------- init value
-selectValue.value = props.modelValue;
+selectValue.value = props.modelValue
 watch(
   () => props.modelValue,
   () => {
-    selectValue.value = props.modelValue;
+    selectValue.value = props.modelValue
   }
-);
+)
+
+emits('update:modelValue', null)
+selectValue.value = null
 </script>
 
 <template>
@@ -81,12 +89,12 @@ watch(
           :key="index"
           :value="item.value"
         >
-          {{ item.text }}
+          {{ item[props.displayTextKey] }}
         </option>
       </select>
       <span
         v-if="selectValue === null"
-        class="absolute top-0 bottom-0 my-auto pr-2 h-max"
+        class="absolute top-0 bottom-0 my-auto pr-2 h-max text-gray-500"
       >
         {{ props.placeholder }}
       </span>

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

@@ -2,8 +2,8 @@
 const props = defineProps({
   color: {
     required: false,
-    default: "blue",
-    type: String as () => "orange" | "blue" | "gray" | "red" | "green",
+    default: 'blue',
+    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'green',
   },
   header: {
     required: true,
@@ -21,28 +21,37 @@ const props = defineProps({
   loadingOption: {
     required: false,
     default: {
-      color: "green",
+      color: 'green',
     },
     type: {
       color: String,
     },
   },
-});
+})
 </script>
 
 <template>
   <div class="flex flex-col">
-    <div class="glorious-table" :class="[`color-${props.color}`]">
+    <div
+      class="glorious-table"
+      :class="[`color-${props.color}`]"
+    >
       <table>
         <thead>
           <tr>
-            <th v-for="(headItem, index) in props.header" :key="index">
+            <th
+              v-for="(headItem, index) in props.header"
+              :key="index"
+            >
               {{ headItem }}
             </th>
           </tr>
         </thead>
-        <tbody>
-          <tr v-for="(bodyItem, index) in props.body" :key="index">
+        <tbody v-if="!props.loading">
+          <tr
+            v-for="(bodyItem, bodyIndex) in props.body"
+            :key="bodyIndex"
+          >
             <td
               v-for="(headItem, headKey, headIndex) in props.header"
               :key="headIndex"
@@ -50,7 +59,7 @@ const props = defineProps({
               <slot
                 v-if="typeof $slots[headKey] !== 'undefined'"
                 :name="headKey"
-                :item="bodyItem"
+                :item="{ ...bodyItem, index: bodyIndex }"
               />
               <template v-else>
                 {{ bodyItem[headKey] }}
@@ -60,8 +69,11 @@ const props = defineProps({
         </tbody>
       </table>
     </div>
-    <div class="flex justify-center">
-      <GLoading v-if="props.loading" :color="props.loadingOption.color" />
+    <div
+      v-if="props.loading"
+      class="flex justify-center mt-3"
+    >
+      <GLoading :color="props.loadingOption.color" />
     </div>
   </div>
 </template>

package/package.json

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