docs: improve demo

.prettierrc.cjs

@@ -0,0 +1,20 @@
+/**
+ * @type {import("prettier").Config}
+ */
+module.exports = {
+    arrowParens: 'always',
+    bracketSpacing: true,
+    editorconfig: true,
+    htmlWhitespaceSensitivity: 'ignore',
+    jsxSingleQuote: false,
+    endOfLine: 'crlf',
+    printWidth: 120,
+    proseWrap: 'preserve',
+    quoteProps: 'consistent',
+    semi: true,
+    singleQuote: true,
+    tabs: false,
+    tabWidth: 4,
+    trailingComma: 'none',
+    useTabs: false
+};

demo/tsconfig.json

@@ -15,6 +15,8 @@
         "../src/**/*.tsx",
         "../demo/**/*.ts",
         "../demo/**/*.tsx",
+        "../demo/**/*.vue",
+        "../demo/**/*.vuecode",
         "../types/**/*.ts"
     ],
     "files": [

demo/views/components/data-table/index.vue

@@ -16,6 +16,9 @@ import SampleColumnGroupCodeTs from './sample-columngroup/code-ts.vuecode';
 import SampleSummaryDemo from './sample-summary/demo.vue';
 import SampleSummaryCodeJs from './sample-summary/code-js.vuecode';
 import SampleSummaryCodeTs from './sample-summary/code-ts.vuecode';
+import SampleNestedDemo from './sample-nested/demo.vue';
+import SampleNestedCodeJs from './sample-nested/code-js.vuecode';
+import SampleNestedCodeTs from './sample-nested/code-ts.vuecode';
 import SampleEmptyDemo from './sample-empty/demo.vue';
 import SampleEmptyCodeJs from './sample-empty/code-js.vuecode';
 import SampleEmptyCodeTs from './sample-empty/code-ts.vuecode';
@@ -46,6 +49,10 @@ const $encode = window.encodeURIComponent;
                 title: '总结栏',
                 anchor: 'summary'
             },
+            {
+                title: '嵌套表格',
+                anchor: 'nested-table'
+            },
             {
                 title: '空表格',
                 anchor: 'empty'
@@ -159,6 +166,17 @@ const $encode = window.encodeURIComponent;
                 </template>
             </DemoCard>
 
+            <DemoCard
+                title="Nested Table / 嵌套表格"
+                anchor="nested-table"
+                :js-code="$encode(SampleNestedCodeJs)"
+                :ts-code="$encode(SampleNestedCodeTs)"
+            >
+                <template #demo>
+                    <SampleNestedDemo />
+                </template>
+            </DemoCard>
+
             <DemoCard
                 title="Empty / 空表格"
                 anchor="empty"

demo/views/components/data-table/sample-nested/code-js.vuecode

@@ -0,0 +1,92 @@
+<script>
+import { defineComponent, ref } from 'vue';
+const columns = [
+    { type: 'expand' },
+    { title: 'Name', key: 'name' },
+    { title: 'Platform', key: 'platform' },
+    { title: 'Version', key: 'version' },
+    { title: 'Upgraded', key: 'upgradeNum' },
+    { title: 'Creator', key: 'creator' },
+    { title: 'Date', key: 'createdAt' },
+    { title: 'Action', key: 'operation' }
+];
+
+const data = [];
+for (let i = 0; i < 3; ++i) {
+    data.push({
+        key: i,
+        name: `Screem ${i + 1}`,
+        platform: 'iOS',
+        version: '10.3.4.5654',
+        upgradeNum: 500,
+        creator: 'Jack',
+        createdAt: '2014-12-24 23:12:00'
+    });
+}
+
+const innerColumns = [
+    { title: 'Date', key: 'date' },
+    { title: 'Name', key: 'name' },
+    { title: 'Status', key: 'state' },
+    { title: 'Upgrade Status', key: 'upgradeNum' },
+    { title: 'Action', key: 'operation' }
+];
+
+const innerData = [];
+for (let i = 0; i < 3; ++i) {
+    innerData.push({
+        key: i,
+        date: '2014-12-24 23:12:00',
+        name: `This is production name ${i + 1}`,
+        upgradeNum: 'Upgraded: 56'
+    });
+}
+
+export default defineComponent({
+    setup() {
+        return {
+            columns: ref(columns),
+            data: ref(data),
+            innerColumns: ref(innerColumns),
+            innerData: ref(innerData)
+        };
+    }
+});
+</script>
+
+<template>
+    <x-n-data-table class="demo-nested-table" :columns="columns" :data="data">
+        <template #render-cell="{ column }">
+            <template v-if="column.key === 'operation'">
+                <n-button size="tiny">Publish</n-button>
+            </template>
+        </template>
+
+        <template #render-expand>
+            <x-n-data-table :columns="innerColumns" :data="innerData">
+                <template #render-cell="{ column }">
+                    <template v-if="column.key === 'state'">
+                        <span>
+                            <n-badge color="green" dot />
+                            Finished
+                        </span>
+                    </template>
+
+                    <template v-if="column.key === 'operation'">
+                        <n-space>
+                            <n-button size="tiny">Pause</n-button>
+                            <n-button size="tiny">Stop</n-button>
+                        </n-space>
+                    </template>
+                </template>
+            </x-n-data-table>
+        </template>
+    </x-n-data-table>
+</template>
+
+<style>
+.demo-nested-table .n-data-table__expand {
+    margin: calc(var(--n-td-padding) * -1);
+    padding-left: calc(var(--n-td-padding) * 2 + 1rem);
+}
+</style>

demo/views/components/data-table/sample-nested/code-ts.vuecode

@@ -0,0 +1,111 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import type { DataTableColumn, DataTableRenderCellParams } from '@skit/x.naive-ui';
+
+interface DataItem {
+    key: number;
+    name: string;
+    platform: string;
+    version: string;
+    upgradeNum: number;
+    creator: string;
+    createdAt: string;
+}
+
+interface InnerDataItem {
+    key: number;
+    date: string;
+    name: string;
+    upgradeNum: string;
+}
+
+const columns: DataTableColumn<DataItem>[] = [
+    { type: 'expand' },
+    { title: 'Name', key: 'name' },
+    { title: 'Platform', key: 'platform' },
+    { title: 'Version', key: 'version' },
+    { title: 'Upgraded', key: 'upgradeNum' },
+    { title: 'Creator', key: 'creator' },
+    { title: 'Date', key: 'createdAt' },
+    { title: 'Action', key: 'operation' }
+];
+
+const data: DataItem[] = [];
+for (let i = 0; i < 3; ++i) {
+    data.push({
+        key: i,
+        name: `Screem ${i + 1}`,
+        platform: 'iOS',
+        version: '10.3.4.5654',
+        upgradeNum: 500,
+        creator: 'Jack',
+        createdAt: '2014-12-24 23:12:00'
+    });
+}
+
+const innerColumns: DataTableColumn<InnerDataItem>[] = [
+    { title: 'Date', key: 'date' },
+    { title: 'Name', key: 'name' },
+    { title: 'Status', key: 'state' },
+    { title: 'Upgrade Status', key: 'upgradeNum' },
+    { title: 'Action', key: 'operation' }
+];
+
+const innerData: InnerDataItem[] = [];
+for (let i = 0; i < 3; ++i) {
+    innerData.push({
+        key: i,
+        date: '2014-12-24 23:12:00',
+        name: `This is production name ${i + 1}`,
+        upgradeNum: 'Upgraded: 56'
+    });
+}
+
+export default defineComponent({
+    setup() {
+        return {
+            columns: ref(columns),
+            data: ref(data),
+            innerColumns: ref(innerColumns),
+            innerData: ref(innerData)
+        };
+    }
+});
+</script>
+
+<template>
+    <x-n-data-table class="demo-nested-table" :columns="columns" :data="data">
+        <template #render-cell="{ column }: DataTableRenderCellParams<DataItem>">
+            <template v-if="column.key === 'operation'">
+                <n-button size="tiny">Publish</n-button>
+            </template>
+        </template>
+
+        <template #render-expand>
+            <x-n-data-table :columns="innerColumns" :data="innerData">
+                <template #render-cell="{ column }: DataTableRenderCellParams<InnerDataItem>">
+                    <template v-if="column.key === 'state'">
+                        <span>
+                            <n-badge color="green" dot />
+                            Finished
+                        </span>
+                    </template>
+
+                    <template v-if="column.key === 'operation'">
+                        <n-space>
+                            <n-button size="tiny">Pause</n-button>
+                            <n-button size="tiny">Stop</n-button>
+                        </n-space>
+                    </template>
+                </template>
+            </x-n-data-table>
+        </template>
+    </x-n-data-table>
+</template>
+
+<style>
+.demo-nested-table .n-data-table__expand {
+    margin: calc(var(--n-td-padding) * -1);
+    padding-left: calc(var(--n-td-padding) * 2 + 1rem);
+}
+</style>