docs: 重构表单

Signed-off-by: Tenny <tenny.shu@foxmail.com>

Author: Tenny

docs/.vitepress/config.ts

@@ -44,7 +44,7 @@ export default defineConfig({
     sidebar: [
       {
         text: '指南',
-        collapsed: false,
+        collapsed: true,
         items: [
           {
             text: '快速上手',
@@ -61,45 +61,65 @@ export default defineConfig({
         ],
       },
       {
-        text: '组件',
-        collapsed: false,
+        text: '通用',
+        collapsed: true,
         items: [
           { text: 'Container 容器布局', link: '/components/container' },
-          { text: 'Directives 指令', link: '/components/directives' },
+          { text: 'Polygon 多边形', link: '/components/polygon' },
           { text: 'Icon 图标', link: '/components/icon' },
+        ],
+      },
+      {
+        text: '表单',
+        collapsed: true,
+        items: [
           { text: 'Button 按钮', link: '/components/button' },
           { text: 'Input 输入框', link: '/components/input' },
-          { text: 'Tooltip 文字提示', link: '/components/tooltip' },
-          { text: 'Message 消息提示', link: '/components/message' },
+          { text: 'Checkbox 复选框', link: '/components/checkbox' },
+          { text: 'Radio 单选框', link: '/components/radio' },
+          { text: 'Switch 开关', link: '/components/switch' },
+          { text: 'Form 表单', link: '/components/form' },
+        ],
+      },
+      {
+        text: '数据展示',
+        collapsed: true,
+        items: [
           { text: 'Card 卡片', link: '/components/card' },
           { text: 'Qrcode 二维码', link: '/components/qrcode' },
           { text: 'Image 图片', link: '/components/image' },
           { text: 'Shadow 阴影', link: '/components/shadow' },
           { text: 'Table 表格', link: '/components/table' },
-          { text: 'Checkbox 复选框', link: '/components/checkbox' },
-          { text: 'Radio 单选框', link: '/components/radio' },
-          { text: 'Switch 开关', link: '/components/switch' },
-          { text: 'Polygon 多边形', link: '/components/polygon' },
-          { text: 'Form 表单', link: '/components/form' },
           { text: 'Collapse 折叠面板', link: '/components/collapse' },
           { text: 'Progress 进度条', link: '/components/progress' },
-          { text: 'Loading 加载', link: '/components/loading' },
           {
             text: 'DescriptionPanel 简介面板',
             link: '/components/descriptionpanel',
           },
           {
-            text: 'Tabbar 标签栏',
-            link: '/components/tabbar',
+            text: 'List 滚动列表',
+            link: '/components/list',
           },
           {
             text: 'Tabs 标签页',
             link: '/components/tabs',
           },
+        ],
+      },
+      {
+        text: '导航',
+        collapsed: true,
+        items: [
           {
-            text: 'List 滚动列表',
-            link: '/components/list',
+            text: 'Tabbar 标签栏',
+            link: '/components/tabbar',
           },
+        ],
+      },
+      {
+        text: '反馈',
+        collapsed: true,
+        items: [
           {
             text: 'Popover 弹出气泡',
             link: '/components/popover',
@@ -108,6 +128,16 @@ export default defineConfig({
             text: 'Dialog 对话框',
             link: '/components/dialog',
           },
+          { text: 'Tooltip 文字提示', link: '/components/tooltip' },
+          { text: 'Message 消息提示', link: '/components/message' },
+        ],
+      },
+      {
+        text: '自定义指令',
+        collapsed: true,
+        items: [
+          { text: 'Directives 简单指令', link: '/components/directives' },
+          { text: 'Loading 加载', link: '/components/loading' },
         ],
       },
     ],

docs/.vitepress/theme/index.ts

@@ -2,7 +2,7 @@ import type { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';
 import '../../../style/icon';
 import '../../../style/button';
-import '../../../style/tooltip';
+
 import '../../../style/util/transition.css';
 import '../../../style/polygon';
 import '../../../style/vars.css';
@@ -27,6 +27,7 @@ import '../../../style/loading';
 import '../../../style/description-panel';
 import '../../../style/tabbar';
 import '../../../style/popover';
+import '../../../style/tooltip';
 import '../../../style/util/tabs.css';
 import '../../../style/list';
 import '../../../style/dialog';

docs/components/image.md

@@ -42,31 +42,31 @@ const imgs = [
   </textarea>
     <template #preview>
       <div class="grid grid-cols-5">
-        <Tooltip placement="topStart" title="被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框">
+        <Tooltip content="被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框">
           <div class="demo-img-item">
             <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="fill"></Image>
             <span class="mt-15">fill</span>
           </div>
         </Tooltip>
-        <Tooltip placement="topStart" title="被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比">
+        <Tooltip content="被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比">
           <div class="demo-img-item">
             <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="contain"></Image>
             <span class="mt-15">contain</span>
           </div>
         </Tooltip>
-        <Tooltip placement="top" title="被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框">
+        <Tooltip content="被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框">
           <div class="demo-img-item">
             <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="cover"></Image>
             <span class="mt-15">cover</span>
           </div>
         </Tooltip>
-        <Tooltip placement="topEnd" title="被替换的内容将保持其原有的尺寸">
+        <Tooltip content="被替换的内容将保持其原有的尺寸">
           <div class="demo-img-item">
             <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="none"></Image>
             <span class="mt-15">none</span>
           </div>
         </Tooltip>
-        <Tooltip placement="topEnd" title="内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些">
+        <Tooltip content="内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些">
           <div class="demo-img-item">
             <Image src="/neatui-vue/img1.svg" width="100" height="100" fit="scale-down"></Image>
             <span class="mt-15">scale-down</span>

docs/components/popover.md

@@ -1,4 +1,4 @@
-# Popover 弹出起泡
+# Popover 弹出气泡
 
 点击/鼠标移入元素，弹出气泡式的卡片浮层。在内容周围弹出一些隐藏的信息。和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
 

docs/components/tooltip.md

@@ -1,168 +1,31 @@
 # Tooltip 文字提示
 
-常用于展示鼠标 hover 时的提示信息。
+常用于展示鼠标悬浮、点击时的提示信息。
 
 可用来代替系统默认的 `title` 提示，通常用于针对一个图标按钮的鼠标悬浮显示简单说明
 
-该提示使用纯 `CSS` 实现，所以气泡框位置通常需要手动设置
+该提示基于 [popover](/components/popover) 实现，只是对样式进行了简单修改。
 
-### 基础用法
-
-使用 `title` 属性来决定 `hover` 时的提示信息。 由 `placement` 属性决定展示位置: `topStart`、`top[默认]`、`topEnd`、`bottomStart`、`bottom`、`bottomEnd`
-
-<ClientOnly><CodePreview>
-<textarea lang="vue-html">
-
-  <div class="flex-between">
-    <nt-tooltip placement="topStart" title="prompt text">
-      <nt-button>topStart</nt-button>
-    </nt-tooltip>
-    <nt-tooltip placement="top" title="prompt text">
-      <nt-button>top</nt-button>
-    </nt-tooltip>
-    <nt-tooltip placement="topEnd" title="prompt text">
-      <nt-button>topEnd</nt-button>
-    </nt-tooltip>
-  </div>
-  <div class="flex-between mt-15">
-    <nt-tooltip placement="bottomStart" title="prompt text">
-      <nt-button>bottomStart</nt-button>
-    </nt-tooltip>
-    <nt-tooltip placement="bottom" title="prompt text">
-      <nt-button>bottom</nt-button>
-    </nt-tooltip>
-    <nt-tooltip placement="bottomEnd" title="prompt text">
-      <nt-button>bottomEnd</nt-button>
-    </nt-tooltip>
-  </div>
-  </textarea>
-</CodePreview></ClientOnly>
-
-### 自定义提示
-
-通过使用 `title` 插槽来渲染自定义的提示; 如果同时传递 `title` 和 插槽，则 `title` 属性为准
+## 演示
 
 <script setup>
-import { Tooltip, Button } from '../../src'
+import { Tooltip } from '../../src'
 </script>
 
-<ClientOnly>
-  <CodePreview>
-  <textarea lang="vue-html">
-  <nt-tooltip>
-    <nt-button>自定义提示</nt-button>
-    <template v-slot:title>
-      <span style="color:red;">custome propmt text</span>
-    </template>
-  </nt-tooltip>
-  </textarea>
-  <template #preview>
-    <Tooltip>
-      <Button>自定义提示</Button>
-      <template #title>
-        <span style="color:red;">custome propmt text</span>
-      </template>
-    </Tooltip>
-  </template>
-  </CodePreview>
-</ClientOnly>
-
-### 受控模式
-
-通过 `visible` 属性来控制提示框的显示与隐藏
-
-<ClientOnly>
-  <CodePreview>
-  <textarea lang="vue-html">
-    <nt-tooltip :visible="true" title="Content">
-        <span>受控模式</span>
-    </nt-tooltip>
-  </textarea>
-  <template #preview>
-    <Tooltip :visible="true" title="Content">
-      <span>受控模式</span>
-    </Tooltip>
-  </template>
-  </CodePreview>
-</ClientOnly>
-
-### 自定义风格
-
-通过 `styleName` 属性来设置提示框的风格名称，然后自定义 `.nt-tooltip--xx` 来定义风格样式，`xx` 就是传递的 `styleName` 的值；例如从 [css-generators](https://css-generators.com/tooltip-speech-bubble/) 复制一段样式，改名称为 `nt-tooltip--demo`
-
-<ClientOnly>
-  <CodePreview>
-  <textarea lang="vue">
-  <template>
-    <nt-tooltip title="Content" style-name="demo" placement="bottom">
-      <span>自定义风格</span>
-    </nt-tooltip>
-  </template>
-  <style>
-    .nt-tooltip--demo {
-      color: #fff;
-      font-size: 18px;
-      max-width: 28ch;
-      text-align: center;
-    }
-    .nt-tooltip--demo {
-      /* triangle dimension */
-      --b: 2em; /* base */
-      --h: 1em; /* height */
-      --p: 50%; /* triangle position (0%:left 100%:right) */
-      --r: 1.2em; /* the radius */
-      --c: #6a4a3c;
-      padding: 1em;
-      border-radius: min(var(--r), var(--p) - var(--b) / 2)
-        min(var(--r), 100% - var(--p) - var(--b) / 2) var(--r) var(--r) / var(--r);
-      clip-path: polygon(
-        0 0,
-        0 100%,
-        100% 100%,
-        100% 0,
-        min(100%, var(--p) + var(--b) / 2) 0,
-        var(--p) calc(-1 * var(--h)),
-        max(0%, var(--p) - var(--b) / 2) 0
-      );
-      background: var(--c);
-      border-image: conic-gradient(var(--c) 0 0) fill 0/ 0 calc(
-          100% - var(--p) - var(--b) / 2
-        ) var(--r) calc(var(--p) - var(--b) / 2) / var(--h) 0 0 0;
-    }
-    .nt-tooltip-bottom.nt-tooltip--demo {
-      top: calc(100% + 20px);
-    }
-  </style>
-  </textarea>
-  <template #preview>
-    <Tooltip title="Content" style-name="demo" placement="bottom">
-      <span>自定义风格</span>
-    </Tooltip>
-  </template>
-  </CodePreview>
-</ClientOnly>
-
-> 可以通过配合 `nt-tooltip-top`、`nt-tooltip-start` 等调整箭头或者提示框的位置
-
-### 触发方式
+### 基础用法
 
-默认是悬浮触发，可以通过修改 `trigger` 属性来改变触发方式
+传递 `content` 属性为提示内容
 
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <script setup>
-  </script>
-  <template>
-    <hr />
-  </template>
+  <nt-tooltip content="提示内容">
+      <span>显示提示</span>
+  </nt-tooltip>
   </textarea>
   <template #preview>
-    <Tooltip title="prompt text">
-      <Button>悬浮</Button>
-    </Tooltip>
-    <Tooltip title="prompt text" trigger="click" class="ml-10">
-      <Button>点击</Button>
+    <Tooltip content="提示内容">
+      <span>显示提示</span>
     </Tooltip>
   </template>
   </CodePreview>
@@ -172,16 +35,11 @@ import { Tooltip, Button } from '../../src'
 
 ### Tooltip Props
 
-| 参数           | 说明                     | 类型      | 可选值                                                            | 默认值    |
-| -------------- | ------------------------ | --------- | ----------------------------------------------------------------- | --------- |
-| `title`        | 提示文字                 | `string`  | -                                                                 | -         |
-| `placement`    | 提示框出现位置           | `string`  | `topStart`、`top`、`topEnd`、`bottomStart`、`bottom`、`bottomEnd` | `top`     |
-| `styleName`    | 风格, 可以自定义风格     | `string`  | -                                                                 | `default` |
-| `visible`      | 是否显示提示框[受控模式] | `boolean` | -                                                                 | `false`   |
-| `contentClass` | Tooltip Content 样式     | `string`  | -                                                                 | -         |
+参数与 [popover-props](/components/popover#popover-props) 一致
 
 ### Tooltip Slots
 
-| 参数    | 说明                   | 参数 |
-| ------- | ---------------------- | ---- |
-| `title` | 自定义提示内容以及样式 | `()` |
+| 参数      | 说明           |
+| --------- | -------------- |
+| `default` | 触发提示的元素 |
+| `content` | 自定义提示内容 |