1,580th Commit

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' },

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>

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"

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;

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>

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() },

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