<script setup lang="ts">
import { ref } from "vue";

/** importType*/
import type { QTableProps } from "quasar";

const columns = defineModel<QTableProps["columns"]>("columns", {
  required: true,
});

const rows = ref<Array<{ id: string; name: string }>>([
  {
    id: "",
    name: "",
  },
]);

/** ตัวอย่างการใช้งาน */
/// <SkeletonTable v-if="isLoading" :columns="columns" />
</script>

<template>
  <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>

    <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>
