From 8cf1d7e55a258a34581215a0e2cf36d1224c6c45 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Fri, 1 Nov 2024 16:07:41 +0800
Subject: [PATCH] 1,580th Commit

---
 app/src/layouts/baseline/links-list.ts        |  2 +-
 .../table/dynamic-table/+page.vue             | 22 +++-----
 .../table/dynamic-table/Basic.vue             |  9 ++-
 .../table/dynamic-table/Loading.vue           |  2 -
 .../table/dynamic-table/Selectable.vue        | 56 +++++++++++++++++++
 .../table/dynamic-table/leetcode.ts           |  9 +++
 ui/src/components/table/Table.vue             | 14 ++++-
 7 files changed, 93 insertions(+), 21 deletions(-)
 create mode 100644 app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Selectable.vue

diff --git a/app/src/layouts/baseline/links-list.ts b/app/src/layouts/baseline/links-list.ts
index fc89d02f..dbe96428 100644
--- a/app/src/layouts/baseline/links-list.ts
+++ b/app/src/layouts/baseline/links-list.ts
@@ -120,8 +120,8 @@ const links = [
       {
         name: 'Table',
         sub: [
-          { name: 'Dynamic Table', to: '/data-display/table/dynamic-table' },
           { name: 'Static Table', to: '/data-display/table/static-table' },
+          { name: 'Dynamic Table', to: '/data-display/table/dynamic-table' },
         ],
       },
       { name: 'Tag', to: '/data-display/tag' },
diff --git a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/+page.vue b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/+page.vue
index 4cbee697..5972bee4 100644
--- a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/+page.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/+page.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
-import { XBreadcrumb, XButton, XCollapse, XDivider, XTable } from '@x/ui';
+import { XBreadcrumb, XButton, XCard, XCollapse, XDivider, XTable } from '@x/ui';
 
 import Basic from './Basic.vue';
 import Loading from './Loading.vue';
 import Controllable from './Controllable.vue';
 import Draggable from './Draggable.vue';
+import Selectable from './Selectable.vue';
 
 const data = [
   {
@@ -264,20 +265,13 @@ const flux = reactive({
 
   <Controllable />
 
-  <div class="flex flex-col border p-4 mb-4">
-    <div class="mb-2">Selectable</div>
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">Selectable</h2>
 
-    <div class="w-full bg-white dark:bg-slate-800 shadow-md rounded">
-      <XTable
-        v-model:selected="flux.selected"
-        selectable
-        :columns="flux.columns1"
-        :rows="flux.table"
-      />
-    </div>
-
-    <div class="mt-2">{{ flux.selectedName(flux.selected) }}</div>
-  </div>
+    <XCard>
+      <Selectable />
+    </XCard>
+  </section>
 
   <div class="flex flex-col border p-4 mb-4">
     <div class="mb-2">Collapsible</div>
diff --git a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Basic.vue b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Basic.vue
index 4c900e2c..0bda8358 100644
--- a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Basic.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Basic.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import type { ComponentProps } from 'vue-component-type-helpers';
-import { reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { XButton, XSelect, XTable, XTextField } from '@x/ui';
 
 import leetcode from './leetcode';
 
 type TableProps = ComponentProps<typeof XTable>;
 
+const loading = ref(true);
+
 const state = reactive({
   rows: [] as any[],
   control: { rows: 10, page: 1, field: 'id', direction: 'asc' } as TableProps['control'],
@@ -29,15 +31,19 @@ function reset() {
 }
 
 async function search() {
+  loading.value = true;
   state.control = { rows: 10, page: 1, field: 'id', direction: 'asc' };
   const response = await leetcode({ ...body, ...state.control });
+  loading.value = false;
   state.rows = response.result;
   state.count = response.count;
 }
 
 async function change(params: TableProps['control']) {
+  loading.value = true;
   state.control = params;
   const response = await leetcode({ ...body, ...params });
+  loading.value = false;
   state.rows = response.result;
 }
 </script>
@@ -71,6 +77,7 @@ async function change(params: TableProps['control']) {
           { key: 'title', name: 'Title' },
           { key: 'difficulty', name: 'Difficulty' },
         ]"
+        :loading
         :rows="state.rows"
         :count="state.count"
         @change="change"
diff --git a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Loading.vue b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Loading.vue
index 982b9d55..d5e12ae6 100644
--- a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Loading.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Loading.vue
@@ -22,7 +22,6 @@ const body = reactive({
 async function search() {
   state.loading = true;
   state.control = { rows: 10, page: 1, field: 'id', direction: 'asc' };
-  await new Promise((resolve) => setTimeout(resolve, 1000));
   const response = await leetcode({ ...body, ...state.control });
   state.loading = false;
   state.rows = response.result;
@@ -32,7 +31,6 @@ async function search() {
 async function change(control: TableProps['control']) {
   state.loading = true;
   state.control = control;
-  await new Promise((resolve) => setTimeout(resolve, 1000));
   const response = await leetcode({ ...body, ...state.control });
   state.loading = false;
   state.rows = response.result;
diff --git a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Selectable.vue b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Selectable.vue
new file mode 100644
index 00000000..44954ba9
--- /dev/null
+++ b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/Selectable.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { ComponentProps } from 'vue-component-type-helpers';
+import { ref, onMounted } from 'vue';
+import { XTable } from '@x/ui';
+
+import leetcode, { type Problem } from './leetcode';
+
+type TableProps = ComponentProps<typeof XTable>;
+
+const loading = ref(true);
+const selected = ref<Problem[]>([]);
+const control = ref<TableProps['control']>({});
+const rows = ref<Problem[]>([]);
+const count = ref(0);
+
+async function initial() {
+  const response = await leetcode();
+  loading.value = false;
+  rows.value = response.result;
+  count.value = response.count;
+}
+
+async function change(params: TableProps['control']) {
+  loading.value = true;
+  control.value = params;
+  const response = await leetcode(params);
+  loading.value = false;
+  rows.value = response.result;
+}
+
+onMounted(() => {
+  initial();
+});
+</script>
+
+<template>
+  <XTable
+    v-model:selected="selected"
+    v-model:control="control"
+    selectable
+    :columns="[
+      { key: 'id', name: 'ID' },
+      { key: 'title', name: 'Title' },
+      { key: 'difficulty', name: 'Difficulty' },
+    ]"
+    :loading
+    :rows
+    :count
+    @change="change"
+  />
+
+  <div class="flex gap-1 mt-1">
+    Output:
+    <output>{{ selected.map((item) => item.id) }}</output>
+  </div>
+</template>
diff --git a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/leetcode.ts b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/leetcode.ts
index 5248c7cf..706c6635 100644
--- a/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/leetcode.ts
+++ b/app/src/routes/(backstage)/(library)/data-display/table/dynamic-table/leetcode.ts
@@ -1,6 +1,15 @@
 import { staticTable } from '@x/ui';
 
+export type Problem = {
+  id: number;
+  title: string;
+  difficulty: string;
+  createdAt: Date;
+};
+
 export default async (body: any = {}) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
   const data = [
     { id: 1, title: '1. Two Sum', difficulty: 'Easy', createdAt: new Date() },
     { id: 2, title: '2. Add Two Numbers', difficulty: 'Medium', createdAt: new Date() },
diff --git a/ui/src/components/table/Table.vue b/ui/src/components/table/Table.vue
index 54a3fe2d..c04ca60a 100644
--- a/ui/src/components/table/Table.vue
+++ b/ui/src/components/table/Table.vue
@@ -265,7 +265,9 @@ watchEffect(
 
           <tr :class="{ 'sticky top-0 z-10': stickyHeader }">
             <Column v-if="selectable" :class="{ '!border-0': stickyHeader }">
-              <Checkbox v-model:value="flux.selecteAll" :indeterminate="flux.indeterminate" />
+              <div class="flex items-center">
+                <Checkbox v-model:value="flux.selecteAll" :indeterminate="flux.indeterminate" />
+              </div>
             </Column>
 
             <Column
@@ -331,7 +333,9 @@ watchEffect(
                 @click="flux.clickRow(row)"
               >
                 <Cell v-if="selectable">
-                  <Checkbox v-model:value="row.checked" />
+                  <div class="flex items-center">
+                    <Checkbox v-model:value="row.checked" />
+                  </div>
                 </Cell>
 
                 <Cell
@@ -402,7 +406,7 @@ watchEffect(
     >
       <div class="Table-RowsPerPage">
         {{ locale.rowsPerPage || 'Rows per page:' }}
-        <div class="w-auto ml-2">
+        <div class="w-20 ml-2">
           <Select
             v-model:value="flux.rowsPerPage"
             :options="[
@@ -450,6 +454,10 @@ watchEffect(
   @apply w-full border-collapse;
 }
 
+:deep(.Checkbox-Label) {
+  @apply !min-h-auto;
+}
+
 .selected {
   @apply !bg-primary-50 !hover:bg-primary-100 !dark:bg-primary-950 !dark:hover:bg-primary-900;
 }