docs: improve demo

fudiwei · Aug 23, 2023 · 07fbf7c · 07fbf7c
1 parent d987dbc
commit 07fbf7c
Show file tree

Hide file tree

Showing 9 changed files with 221 additions and 13 deletions.
diff --git a/README.en-US.md b/README.en-US.md
@@ -39,8 +39,9 @@ This project is aimed to provide a solution for these issues above.
 
 ## Features
 
--   `DataTable`: Slots for **colums**, **cells** and **expandable rows**.
+-   `DataTable`: Slots for **colums**, **cells**, **expandable rows**.
 -   `Dropdown`: Slots for **options**.
+-   `Select`: Slots for **options**, **option groups**.
 
 ---
 
@@ -97,9 +98,9 @@ app.use(Dropdown);
 </script>
 ```
 
-### 3. Documentation
+### 3. Usage
 
-[Click here to view](./docs/en-US/README.md).
+Please view the [Documentation](./docs/en-US/README.md).
 
 ### 4. Demo
 
@@ -120,6 +121,6 @@ You can run the demo to view more details.
 -   [x] `Dropdown`: Slots
 -   [ ] `Dropdown`: Cascaded Menu
 -   [ ] `Menu`: Slots
--   [ ] `Select`: Slots
+-   [x] `Select`: Slots
 -   [ ] `Tree`: Slots
 -   [ ] `TreeSelect`: Slots
diff --git a/README.md b/README.md
@@ -39,8 +39,9 @@
 
 ## 特性
 
--   `DataTable`：提供了**列头**、**单元格**、**展开行**的插槽式写法支持。
--   `Dropdown`：提供了**下拉菜单项**的插槽式写法支持。
+-   `DataTable`：提供了**列头**、**单元格**、**展开行**的插槽写法支持。
+-   `Dropdown`：提供了**下拉菜单项**的插槽写法支持。
+-   `Select`：提供了**选项**、**选项组**的插槽写法支持。
 
 ---
 
@@ -97,9 +98,9 @@ app.use(Dropdown);
 </script>
 ```
 
-### 3. 开发文档
+### 3. 使用组件
 
-[点此查看](./docs/zh-CN/README.md)。
+请参阅[《开发文档》](./docs/zh-CN/README.md)。
 
 ### 4. 示例项目
 
@@ -120,6 +121,6 @@ app.use(Dropdown);
 -   [x] `Dropdown`: Slot 插槽
 -   [ ] `Dropdown`: 多级菜单
 -   [ ] `Menu`: Slot 插槽
--   [ ] `Select`: Slot 插槽
+-   [x] `Select`: Slot 插槽
 -   [ ] `Tree`: Slot 插槽
 -   [ ] `TreeSelect`: Slot 插槽
diff --git a/demo/views/components/dropdown/demo-icon/code-js.vuecode b/demo/views/components/dropdown/demo-icon/code-js.vuecode
@@ -0,0 +1,39 @@
+<script>
+import { defineComponent } from 'vue';
+import { PersonCircleOutline as UserIcon, Pencil as EditIcon, LogOutOutline as LogoutIcon } from '@vicons/ionicons5';
+
+export default defineComponent({});
+</script>
+
+<template>
+    <x-n-dropdown>
+        <template #trigger>
+            <n-button>用户资料</n-button>
+        </template>
+
+        <x-n-dropdown-item key="profile">
+            <template #icon>
+                <n-icon>
+                    <UserIcon />
+                </n-icon>
+            </template>
+            用户资料
+        </x-n-dropdown-item>
+        <x-n-dropdown-item key="editProfile">
+            <template #icon>
+                <n-icon>
+                    <EditIcon />
+                </n-icon>
+            </template>
+            编辑用户资料
+        </x-n-dropdown-item>
+        <x-n-dropdown-item key="logout">
+            <template #icon>
+                <n-icon>
+                    <LogoutIcon />
+                </n-icon>
+            </template>
+            退出登录
+        </x-n-dropdown-item>
+    </x-n-dropdown>
+</template>
diff --git a/demo/views/components/dropdown/demo-icon/code-ts.vuecode b/demo/views/components/dropdown/demo-icon/code-ts.vuecode
@@ -0,0 +1,39 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { PersonCircleOutline as UserIcon, Pencil as EditIcon, LogOutOutline as LogoutIcon } from '@vicons/ionicons5';
+
+export default defineComponent({});
+</script>
+
+<template>
+    <x-n-dropdown>
+        <template #trigger>
+            <n-button>用户资料</n-button>
+        </template>
+
+        <x-n-dropdown-item key="profile">
+            <template #icon>
+                <n-icon>
+                    <UserIcon />
+                </n-icon>
+            </template>
+            用户资料
+        </x-n-dropdown-item>
+        <x-n-dropdown-item key="editProfile">
+            <template #icon>
+                <n-icon>
+                    <EditIcon />
+                </n-icon>
+            </template>
+            编辑用户资料
+        </x-n-dropdown-item>
+        <x-n-dropdown-item key="logout">
+            <template #icon>
+                <n-icon>
+                    <LogoutIcon />
+                </n-icon>
+            </template>
+            退出登录
+        </x-n-dropdown-item>
+    </x-n-dropdown>
+</template>
diff --git a/demo/views/components/dropdown/demo-icon/demo.vue b/demo/views/components/dropdown/demo-icon/demo.vue
@@ -0,0 +1,105 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
+
+<template>
+    <x-n-dropdown>
+        <template #trigger>
+            <n-button>用户资料</n-button>
+        </template>
+
+        <x-n-dropdown-item key="profile">
+            <template #icon>
+                <n-icon>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        viewBox="0 0 512 512"
+                    >
+                        <path
+                            d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1c117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 0 1-6.14-.32a124.27 124.27 0 0 0-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 0 0-32.35 29.58a4 4 0 0 1-6.14.32A175.32 175.32 0 0 1 80 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 0 1-46.68 119.25z"
+                            fill="currentColor"
+                        ></path>
+                        <path
+                            d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
+                            fill="currentColor"
+                        ></path>
+                    </svg>
+                </n-icon>
+            </template>
+            用户资料
+        </x-n-dropdown-item>
+
+        <x-n-dropdown-item key="editProfile">
+            <template #icon>
+                <n-icon>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        viewBox="0 0 512 512"
+                    >
+                        <path
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="44"
+                            d="M358.62 129.28L86.49 402.08L70 442l39.92-16.49l272.8-272.13l-24.1-24.1z"
+                        ></path>
+                        <path
+                            d="M413.07 74.84l-11.79 11.78l24.1 24.1l11.79-11.79a16.51 16.51 0 0 0 0-23.34l-.75-.75a16.51 16.51 0 0 0-23.35 0z"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="44"
+                        ></path>
+                    </svg>
+                </n-icon>
+            </template>
+
+            编辑用户资料
+        </x-n-dropdown-item>
+
+        <x-n-dropdown-item key="logout">
+            <template #icon>
+                <n-icon>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        viewBox="0 0 512 512"
+                    >
+                        <path
+                            d="M304 336v40a40 40 0 0 1-40 40H104a40 40 0 0 1-40-40V136a40 40 0 0 1 40-40h152c22.09 0 48 17.91 48 40v40"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="32"
+                        ></path>
+                        <path
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="32"
+                            d="M368 336l80-80l-80-80"
+                        ></path>
+                        <path
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="32"
+                            d="M176 256h256"
+                        ></path>
+                    </svg>
+                </n-icon>
+            </template>
+
+            退出登录
+        </x-n-dropdown-item>
+    </x-n-dropdown>
+</template>
diff --git a/demo/views/components/dropdown/demo-icon/index.vue b/demo/views/components/dropdown/demo-icon/index.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import DemoCard from '../../_common/demo-card.vue';
+import DemoSfc from './demo.vue';
+import DemoCodeJs from './code-js.vuecode';
+import DemoCodeTs from './code-ts.vuecode';
+</script>
+
+<template>
+    <DemoCard title="Icon / 图标" anchor="icon" :js-code="DemoCodeJs" :ts-code="DemoCodeTs">
+        <template #content>
+            <p>
+                见 Naive-UI 官方文档示例中「
+                <n-a href="//www.naiveui.com/zh-CN/os-theme/components/dropdown#icon.vue" target="blank">图标</n-a>
+                」。以插槽形式改写。
+            </p>
+        </template>
+
+        <template #demo>
+            <DemoSfc />
+        </template>
+    </DemoCard>
+</template>
diff --git a/demo/views/components/dropdown/demo-render/index.vue b/demo/views/components/dropdown/demo-render/index.vue
@@ -17,9 +17,9 @@ import DemoCodeTs from './code-ts.vuecode';
             </p>
             <p>
                 注意：任何非
-                <n-text type="info">&lt;XNDropdownItem&gt;</n-text>
+                <n-text type="info">&lt;x-n-dropdown-item&gt;</n-text>
                 、
-                <n-text type="info">&lt;XNDropdownDivider&gt;</n-text>
+                <n-text type="info">&lt;x-n-dropdown-divider&gt;</n-text>
                 类型的子元素，将被当作纯渲染内容。
             </p>
         </template>

diff --git a/demo/views/components/dropdown/index.vue b/demo/views/components/dropdown/index.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import DemoBasic from './demo-basic/index.vue';
 import DemoRender from './demo-render/index.vue';
+import DemoIcon from './demo-icon/index.vue';
 </script>
 
 <template>
     <n-space vertical :size="20">
         <DemoBasic />
         <DemoRender />
+        <DemoIcon />
     </n-space>
 </template>
diff --git a/src/data-table/DataTable.tsx b/src/data-table/DataTable.tsx
@@ -74,8 +74,6 @@ export default (<T extends DataTableRowData = any>() => {
         }>,
 
         setup(props, { attrs, slots, expose }) {
-            const nRef = ref<NDataTableInst>();
-
             const nColumns = computed(() => {
                 return props.columns?.map((col) => {
                     let renderColumn = (col as NDataTableBaseColumn<T>).title;
@@ -155,6 +153,7 @@ export default (<T extends DataTableRowData = any>() => {
                 return temp;
             });
 
+            const nRef = ref<NDataTableInst>();
             expose({
                 filter: (filters) => nRef.value?.filter(filters),
                 filters: (filters) => nRef.value?.filters(filters),