Merge branch 'Nice' into develop

src/components/SkeletonTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -8,26 +8,55 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
   required: true,
 });
 
-/** จำนวนคอลัมน์ */
-const skeletonColumns = computed(() => columns.value?.length || 5);
+const rows = ref<Array<{ id: string; name: string }>>([
+  {
+    id: "",
+    name: "",
+  },
+]);
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
 </script>
 
 <template>
-  <q-markup-table flat bordered>
-    <thead>
-      <tr>
-        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
-          <q-skeleton type="text" />
-        </th>
-      </tr>
-    </thead>
+  <d-table
+    flat
+    bordered
+    :columns="columns"
+    :rows="rows"
+    row-key="id"
+    hide-pagination
+  >
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            <q-skeleton type="text" width="80px" />
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
 
-    <tbody>
-      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
-        <td v-for="(col, idx) in skeletonColumns" :key="idx">
-          <q-skeleton type="text" width="80px" />
-        </td>
-      </tr>
-    </tbody>
-  </q-markup-table>
+    <template v-slot:item="props">
+      <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list dense class="q-mt-lg relative-position">
+            <q-item v-for="col in props.cols" :key="col.name">
+              <q-item-section>
+                <q-item-label class="text-grey-6 text-weight-medium">{{
+                  col.label
+                }}</q-item-label>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="text-dark text-weight-medium">
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
 </template>