@opentiny/vue-docs 2.1.9 → 2.1.10

package/demos/pc/app/tag-group/tag-group-effect.vue

@@ -1,12 +1,10 @@
 <template>
-  <div>
-    <span>深色标签 </span>
+  <div class="tiny-demo-tag-group-effect">
+    <div>深色标签 </div>
     <tiny-tag-group :data="items" effect="dark"> </tiny-tag-group>
-    <br />
-    <span>浅色标签 </span>
+    <div>浅色标签 </div>
     <tiny-tag-group :data="items" effect="light"> </tiny-tag-group>
-    <br />
-    <span>朴素标签 </span>
+    <div>朴素标签 </div>
     <tiny-tag-group :data="items" effect="plain"> </tiny-tag-group>
   </div>
 </template>
@@ -31,4 +29,10 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style scoped>
+.tiny-demo-tag-group-effect > *:not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/tag-group/tag-group-size-composition-api.vue

@@ -1,12 +1,10 @@
 <template>
-  <div>
-    <span>中等标签：medium </span>
+  <div class="tiny-demo-tag-group-size">
+    <div>中等标签：medium </div>
     <tiny-tag-group :data="items" size="medium"> </tiny-tag-group>
-    <br />
-    <span>小型标签：small </span>
+    <div>小型标签：small </div>
     <tiny-tag-group :data="items" size="small"> </tiny-tag-group>
-    <br />
-    <span>超小标签：mini </span>
+    <div>超小标签：mini </div>
     <tiny-tag-group :data="items" size="mini"> </tiny-tag-group>
   </div>
 </template>
@@ -24,3 +22,9 @@ const items = ref([
   { type: 'info', name: '标签六' }
 ])
 </script>
+
+<style scoped>
+.tiny-demo-tag-group-size > *:not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/tag-group/tag-group-size.vue

@@ -1,12 +1,10 @@
 <template>
-  <div>
-    <span>中等标签：medium </span>
+  <div class="tiny-demo-tag-group-size">
+    <div>中等标签：medium </div>
     <tiny-tag-group :data="items" size="medium"> </tiny-tag-group>
-    <br />
-    <span>小型标签：small </span>
+    <div>小型标签：small </div>
     <tiny-tag-group :data="items" size="small"> </tiny-tag-group>
-    <br />
-    <span>超小标签：mini </span>
+    <div>超小标签：mini </div>
     <tiny-tag-group :data="items" size="mini"> </tiny-tag-group>
   </div>
 </template>
@@ -32,3 +30,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-demo-tag-group-size > *:not(:last-child) {
+  margin-bottom: 12px;
+}
+</style>

package/demos/pc/app/tag-group/webdoc/tag-group.js

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'basic usage' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>name</code> 属性设置对应标签名</br>通过 <code>type</code> 属性可以为标签设置相应的类型，可选值 <code>(success / warning / info / danger  )</code></p>\n',
+          '<p>通过 <code>name</code> 属性设置对应标签名。</br>通过 <code>type</code> 属性可以为标签设置相应的类型，可选值 <code>(success / warning / info / danger  )</code>。</p>',
         'en-US':
           'Set the name of the corresponding tag through the <code>name</code> attribute.</br>You can set the type of a tag through the <code>type</code> attribute. The value can be <code>(success / warning / info / danger)</code>. <code>info</code>. '
       },
@@ -18,7 +18,7 @@ export default {
       'name': { 'zh-CN': '尺寸', 'en-US': 'size' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>size</code> 设置标签组标签大小，可选值 <code>medium / small / mini</code>，默认值为 <code>medium</code> </p>\n',
+          '<p>可通过 <code>size</code> 设置标签组标签大小，可选值 <code>medium / small / mini</code>，默认值为 <code>medium</code>。</p>',
         'en-US':
           'You can use <code>size</code> to set the label size of a label group. The options are <code>medium / small / mini</code>. The default value is <code>medium</code>. '
       },
@@ -29,7 +29,7 @@ export default {
       'name': { 'zh-CN': '主题', 'en-US': 'effect' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>effect</code> 设置 TagGroup 标签组 标签主题，可选值 <code>dark / light / plain</code>，默认值为 <code>light</code> </p>\n',
+          '<p>可通过 <code>effect</code> 设置 TagGroup 标签组 标签主题，可选值 <code>dark / light / plain</code>，默认值为 <code>light</code> 。</p>',
         'en-US':
           'You can use <code>effect</code> to set the tag group tag theme. The options are <code>dark / light / plain</code>. The default value is <code>light</code>. '
       },
@@ -40,7 +40,7 @@ export default {
       'name': { 'zh-CN': 'Click 事件', 'en-US': 'click event' },
       'desc': {
         'zh-CN':
-          '<p>TagGroup 标签组提供了 <code>item-click</code>事件，<code>item-click</code> 事件默认提供的参数有 <code>item,index,event</code> </p>\n',
+          '<p>TagGroup 标签组提供了 <code>item-click</code>事件，<code>item-click</code> 事件默认提供的参数有 <code>item,index,event</code> 。</p>',
         'en-US':
           'The TagGroup tag group provides the item-click event. By default, the item-click event provides the following parameters: <code>item, index, and event</code>. '
       },
@@ -55,6 +55,7 @@ export default {
         {
           'name': 'data',
           'type': 'ITagGroupDataItem[]',
+          'defaultValue': '',
           'typeAnchorName': 'ITagGroupDataItem',
           'desc': { 'zh-CN': ' 数据源', 'en-US': 'Data source' },
           'demoId': 'basic-usage'

package/demos/pc/app/tooltip/control-composition-api.vue

@@ -71,7 +71,8 @@ const disabled = ref(false)
 .ellipsis {
   display: inline-block;
   width: 100px;
-  height: 20px;
+  height: 24px;
+  line-height: 24px;
   margin: 0 20px;
   white-space: nowrap;
   overflow: hidden;

package/demos/pc/app/tooltip/control.vue

@@ -80,7 +80,8 @@ export default {
 .ellipsis {
   display: inline-block;
   width: 100px;
-  height: 20px;
+  height: 24px;
+  line-height: 24px;
   margin: 0 20px;
   white-space: nowrap;
   overflow: hidden;

package/demos/pc/app/tooltip/custom-popper-composition-api.vue

@@ -1,12 +1,73 @@
 <template>
-  <tiny-tooltip content="不显示 Tooltip 箭头" :visible-arrow="false">
-    <button class="tiny-button tiny-button--primary">不显示 Tooltip 箭头</button>
-  </tiny-tooltip>
+  <div>
+    <div class="row">
+      弹出小箭头：
+      <tiny-switch v-model="visibleArrow" show-text style="width: 80px" @change="key++">
+        <template #open>
+          <span>显示</span>
+        </template>
+        <template #close>
+          <span>隐藏</span>
+        </template>
+      </tiny-switch>
+    </div>
+    <div class="row">
+      鼠标进入：
+      <tiny-switch v-model="enterable" show-text style="width: 80px" @change="key++">
+        <template #open>
+          <span>可进入</span>
+        </template>
+        <template #close>
+          <span>不可入</span>
+        </template>
+      </tiny-switch>
+    </div>
+    <div class="row">自定义类名popper1, 让字体变大</div>
+    <div style="margin-top: 16px">
+      <tiny-tooltip
+        content="我是提示内容"
+        :visible-arrow="visibleArrow"
+        :enterable="enterable"
+        popper-class="popper1"
+        :key="key"
+      >
+        <div class="ellipsis">鼠标悬浮在这里</div>
+      </tiny-tooltip>
+    </div>
+  </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { Tooltip as TinyTooltip } from '@opentiny/vue'
 
-const disabled = ref(false)
+const visibleArrow = ref(true)
+const enterable = ref(true)
+const key = ref(0)
 </script>
+
+<style scoped>
+.row {
+  margin-bottom: 20px;
+}
+.ellipsis {
+  display: inline-block;
+  width: 100px;
+  height: 24px;
+  line-height: 24px;
+  margin: 0 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.ellipsis:hover {
+  background-color: #f1f1f1;
+}
+</style>
+
+<style>
+.popper1 {
+  font-size: 20px !important;
+}
+</style>

package/demos/pc/app/tooltip/custom-popper.vue

@@ -62,7 +62,8 @@ export default {
 .ellipsis {
   display: inline-block;
   width: 100px;
-  height: 20px;
+  height: 24px;
+  line-height: 24px;
   margin: 0 20px;
   white-space: nowrap;
   overflow: hidden;

package/demos/pc/app/tooltip/transition-composition-api.vue

@@ -9,6 +9,8 @@ import { Tooltip as TinyTooltip } from '@opentiny/vue'
 </script>
 
 <style>
+/** 自定义动画类名要匹配transition属性中的值
+    由于弹窗元素是插入到body中的，所以写在全局样式 */
 .tiny-tooltip.custom-transition-enter,
 .tiny-tooltip.custom-transition-enter-from,
 .tiny-tooltip.custom-transition-leave-to {

package/demos/pc/app/tooltip/transition.vue

@@ -15,6 +15,8 @@ export default {
 </script>
 
 <style>
+/** 自定义动画类名要匹配transition属性中的值
+    由于弹窗元素是插入到body中的，所以写在全局样式 */
 .tiny-tooltip.custom-transition-enter,
 .tiny-tooltip.custom-transition-enter-from,
 .tiny-tooltip.custom-transition-leave-to {

package/demos/pc/app/tooltip/webdoc/tooltip.js

@@ -6,16 +6,16 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
           通过 <code>content</code> 属性指定提示的内容<br>
           通过 <code>placement</code> 属性指定提示的显示位置，支持12个显示位置<br>
           通过 <code>effect</code> 属性指定提示的效果<br>
-        </p>`,
-        'en-US': `<p>
+        `,
+        'en-US': `
           Specify the content of the prompt via the <code>content</code> attribute <br>
           Use the <code>placement</code> property to specify the display location of the prompt. 12 display locations are supported <br>
           Specify the effect of the prompt with the <code>effect</code> property <br>
-        </p>`
+        `
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -23,15 +23,14 @@ export default {
       'demoId': 'theme',
       'name': { 'zh-CN': '主题', 'en-US': 'Theme' },
       'desc': {
-        'zh-CN': `<p>
-          通过 <code>effect</code> 属性设置明暗效果,可选值 dark/light 两种效果,默认值为 dark，通常使用<code>effect</code>设置效果<br>
-          通过 <code>type</code> 属性设置主题,它的优先级大于 <code>effect</code>; 可选值 'normal', 'warning', 'error', 'info', 'success', 。
-        </p>
+        'zh-CN': `
+          通过 <code>effect</code> 属性设置明暗效果,可选值 dark/light ,默认值为 dark，通常使用<code>effect</code>设置效果。<br>
+          通过 <code>type</code> 属性设置主题,它的优先级大于 <code>effect</code>。
         `,
-        'en-US': `<p>
+        'en-US': `
           The <code>effect</code> property is used to set the light and dark effect. The optional dark/light effect is dark by default. The effect< br> is usually set by <code>effect</code>.
-          Set the theme with the <code>type</code> property, which has a higher priority than the <code>effect</code>; Optional values 'normal', 'warning', 'error', 'info', 'success',.
-         </p>`
+          Set the theme with the <code>type</code> property, which has a higher priority than the <code>effect</code>.
+         `
       },
       'codeFiles': ['theme.vue']
     },
@@ -39,18 +38,18 @@ export default {
       'demoId': 'control',
       'name': { 'zh-CN': '控制/禁用提示', 'en-US': 'Control/disable' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             提示组件默认是监听鼠标移入/移出事件来触发，手动控制提示的出现，有以下方法：<br>
             1.通过 <code>visible</code> 属性设置是否智能识别溢出后提示,属性取值为 <code> always / auto </code>。当取值为<code>auto</code>时，智能提示是自动识别文字是否有长度溢出，动态的显示提示。<br>
             2.通过 <code>manual</code> 属性为 true 后,就可以通过设置 <code>v-model</code> 属性，动态控制显示和隐藏<br>
             3.通过 <code>diabled</code> 属性，直接禁用提示。<br>
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
             The Tooltip component is triggered by listening for mouse move in/out events by default, and manually controls the appearance of the prompt in the following ways: <br>
             1. Use the <code>visible</code> property to set whether the overflow prompt is intelligently recognized. The property value is <code> always/auto </code>. If the value is <code>auto</code>, the smart prompt automatically identifies whether the text length overruns and dynamically displays the prompt. <br>
             2. After the <code>manual</code> property is true, you can dynamically control the display and hiding of <br> by setting the <code>v-model</code> property.
             3. Use the <code>diabled</code> property to disable the tooltip. <br>
-          </p>`
+          `
       },
       'codeFiles': ['control.vue']
     },
@@ -58,16 +57,16 @@ export default {
       'demoId': 'content',
       'name': { 'zh-CN': '弹出层内容', 'en-US': 'Tooltip content' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             通过 <code>content</code> 属性指定弹出的文本。<br>
-            通过 <code>renderContent</code> 自定义渲染函数,返回需要渲染的节点内容，函数声明为： (h, content)=>vnode。<br>
+            通过 <code>renderContent</code> 自定义渲染函数,可使用 <code>JSX</code> 返回需要渲染的节点内容<br>
             通过 <code>content</code> 插槽，自定义内容，当弹出复杂的内容结构时，推荐使用插槽的方式。<br>
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
             Specify the pop-up text via the <code>content</code> property. <br>
             A custom rendering function with <code>renderContent</code> returns the node content to be rendered. The function is declared as (h, content)=>vnode. <br>
             The <code>content</code> slot is used to customize content. It is recommended to use the slot when a complex content structure pops up. <br>
-         </p>`
+         `
       },
       'codeFiles': ['content.vue']
     },
@@ -75,9 +74,9 @@ export default {
       'demoId': 'offset',
       'name': { 'zh-CN': '弹出层的偏移', 'en-US': 'Offset' },
       'desc': {
-        'zh-CN': `<p>通过 <code>offset</code> 属性设置 Tooltip 组件出现位置的偏移量。</p>`,
+        'zh-CN': `通过 <code>offset</code> 属性设置 Tooltip 组件出现位置的偏移量。`,
         'en-US':
-          '<p>Use the <code>offset</code> property to set the offset of the position where the Tooltip component appears. </p>\n'
+          'Use the <code>offset</code> property to set the offset of the position where the Tooltip component appears. \n'
       },
       'codeFiles': ['offset.vue']
     },
@@ -85,16 +84,16 @@ export default {
       'demoId': 'custom-popper',
       'name': { 'zh-CN': '弹出层的特性', 'en-US': 'Features of the popper layer' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
           通过 <code> visible-arrow </code> 属性设置是否显示小箭头。<br>
           通过 <code> enterable </code> 属性设置鼠标是否可进入到 tooltip 中。<br>
           通过 <code> popper-class </code> 属性设置弹出dom的类名，便于用户定制弹出层的样式。<br>
-        </p>`,
-        'en-US': `<p>
+        `,
+        'en-US': `
             The <code> visible-arrow </code> property sets whether the small arrow is displayed. <br>
             Use the <code> enterable </code> property to set whether the mouse can enter the tooltip. <br>
             You can use the <code> popper-class </code> property to set the class name of the eject dom to customize the style of the eject layer. <br>
-          </p>`
+          `
       },
       'codeFiles': ['custom-popper.vue']
     },
@@ -102,16 +101,16 @@ export default {
       'demoId': 'delay',
       'name': { 'zh-CN': '延迟控制', 'en-US': 'Delay control' },
       'desc': {
-        'zh-CN': `<p>
+        'zh-CN': `
             通过 <code>open-delay</code> 属性设置 Tooltip 组件延迟出现的时间，单位毫秒,默认值为 0。<br>
             通过 <code>close-delay</code> 属性设置 Tooltip 组件延迟关闭的时间，单位毫秒,默认值为 300。<br>
             通过 <code>hide-after</code> 属性设置 Tooltip 组件出现后自动隐藏的时间，单位毫秒，为 0 则不会自动隐藏,默认值为 0。<br>
-          </p>`,
-        'en-US': `<p>
+          `,
+        'en-US': `
             Use the <code>open-delay</code> property to set the delay in milliseconds for the Tooltip component to appear. The default value is 0. <br>
             Use the <code>close-delay</code> property to set the delay in closing the Tooltip component, in milliseconds. The default value is 300. <br>
             Run the <code>hide-after</code> property to set the time for the Tooltip component to be automatically hidden after it appears, in milliseconds. If it is 0, it will not be automatically hidden. The default value is 0. <br>
-          </p>`
+          `
       },
       'codeFiles': ['delay.vue']
     },
@@ -120,9 +119,9 @@ export default {
       'name': { 'zh-CN': '高级配置', 'en-US': 'Advanced configuration' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>popper-options</code> 属性为 Tooltip 的 popper 配置参数,请参考下面的PopperOption文档</p>',
+          '通过 <code>popper-options</code> 属性为 Tooltip 的弹出层的配置参数,请参考下面的<a href="#IPopperOption">IPopperOption</a>文档',
         'en-US':
-          '<p>Use the <code>popper-options</code> property to configure popper parameters for Tooltip. Refer to the PopperOption documentation below </p>\n'
+          'Use the <code>popper-options</code> property to configure popper parameters for Tooltip. Refer to the <a href="#IPopperOption">IPopperOption</a> documentation below \n'
       },
       'codeFiles': ['popper-options.vue']
     },
@@ -130,9 +129,9 @@ export default {
       'demoId': 'transition',
       'name': { 'zh-CN': '自定义渐变动画', 'en-US': 'Customized Animation' },
       'desc': {
-        'zh-CN': '<p>通过 <code>transition</code> 定义渐变动画,默认选值为 <code>tiny-fade-in-linear</code></p>\n',
+        'zh-CN': '通过 <code>transition</code> 定义渐变动画,默认选值为 <code>tiny-fade-in-linear</code>\n',
         'en-US':
-          '<p>Define a gradient animation using <code>transition</code>. The default value is <code>tiny-fade-in-linear</code></p>'
+          'Define a gradient animation using <code>transition</code>. The default value is <code>tiny-fade-in-linear</code>'
       },
       'codeFiles': ['transition.vue']
     }
@@ -145,7 +144,7 @@ export default {
         {
           'name': 'effect',
           'type': 'string',
-          'defaultValue': 'dark',
+          'defaultValue': '"dark"',
           'desc': {
             'zh-CN': '默认提供的主题;该属性的可选值为 dark/light',
             'en-US': 'Default theme; The value of this attribute can be dark or light'
@@ -176,7 +175,7 @@ export default {
         {
           'name': 'placement',
           'type': 'string',
-          'defaultValue': ' bottom',
+          'defaultValue': ' "bottom"',
           'desc': {
             'zh-CN':
               'Tooltip 的出现位置;该属性的可选值为 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end',
@@ -261,7 +260,7 @@ export default {
         {
           'name': 'visible',
           'type': 'string',
-          'defaultValue': 'always',
+          'defaultValue': '"always"',
           'desc': {
             'zh-CN': '提示的智能出现的模式；该属性的可选值为 auto/always',
             'en-US':
@@ -284,8 +283,8 @@ export default {
           'type': 'object',
           'defaultValue': ' { }',
           'desc': {
-            'zh-CN': '高级参数;请参考PopperOption的说明',
-            'en-US': 'Advanced parameters; Refer to the description of PopperOption'
+            'zh-CN': '弹出层参数;请参考IPopperOption的说明',
+            'en-US': 'Advanced parameters; Refer to the description of IPopperOption'
           },
           'demoId': 'popper-options'
         },
@@ -309,7 +308,7 @@ export default {
         {
           'name': 'transition',
           'type': 'string',
-          'defaultValue': 'tiny-fade-in-linear',
+          'defaultValue': '"tiny-fade-in-linear"',
           'desc': { 'zh-CN': '定义渐变动画的类名', 'en-US': 'Define the class name of the gradient animation' },
           'demoId': 'transition'
         },
@@ -325,7 +324,7 @@ export default {
         },
         {
           'name': 'renderContent',
-          'type': '(h, content)=> vnode',
+          'type': '(h: Vue.h, content:string)=> vnode',
           'defaultValue': '',
           'desc': {
             'zh-CN': '自定义渲染函数,返回需要渲染的节点内容',
@@ -349,41 +348,20 @@ export default {
           'desc': { 'zh-CN': '内容插槽', 'en-US': 'Content Slot' },
           'demoId': 'content'
         }
-      ],
-      'PopperOption': [
-        {
-          'name': 'bubbling',
-          'type': 'Boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN':
-              '是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景！',
-            'en-US':
-              'Whether to monitor the scroll event of all elements with a scroll element in the upper level, and update the popper location if the scroll event is detected. Used to solve some pop-up layer position when the page scroll, the position is not correct scenario!'
-          },
-          'demoId': 'popper-options'
-        },
-        {
-          'name': 'followReferenceHide',
-          'type': '',
-          'defaultValue': 'true',
-          'desc': {
-            'zh-CN': '当提示目标隐藏时，自动隐藏弹出层',
-            'en-US': 'Automatically hides the pop-up layer when the target is prompted to hide'
-          },
-          'demoId': 'popper-options'
-        },
-        {
-          'name': 'removeOnDestroy',
-          'type': 'Boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '弹出层消失后，是否移除弹出层的DOM元素',
-            'en-US': 'Whether to remove DOM elements from the pop-up layer after the pop-up layer disappears'
-          },
-          'demoId': 'popper-options'
-        }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+interface IPopperOption {
+  bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+  followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+  removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+}
+      `
+    }
   ]
 }

package/demos/pc/app/transfer/custom-btns-composition-api.vue

@@ -1,11 +1,13 @@
 <template>
-  <span>功能控制：</span>
-  <tiny-button @click="toggleAllBtn()">
-    {{ showAllBtn ? '不显示all-btns' : '显示all-btns' }}
-  </tiny-button>
-  <tiny-button @click="toggleDisable()">
-    {{ alwaysDisable ? '无选时禁用' : '无选时高亮' }}
-  </tiny-button>
+  <div style="margin-bottom: 16px">
+    <span>功能控制：</span>
+    <tiny-button @click="toggleAllBtn()">
+      {{ showAllBtn ? '不显示all-btns' : '显示all-btns' }}
+    </tiny-button>
+    <tiny-button @click="toggleDisable()">
+      {{ alwaysDisable ? '无选中时禁用' : '无选中时高亮' }}
+    </tiny-button>
+  </div>
   <tiny-transfer
     v-model="value"
     :data="data"

package/demos/pc/app/transfer/custom-btns.vue

@@ -1,11 +1,13 @@
 <template>
-  <span>功能控制：</span>
-  <tiny-button @click="toggleAllBtn()">
-    {{ showAllBtn ? '不显示all-btns' : '显示all-btns' }}
-  </tiny-button>
-  <tiny-button @click="toggleDisable()">
-    {{ alwaysDisable ? '无选时禁用' : '无选时高亮' }}
-  </tiny-button>
+  <div style="margin-bottom: 16px">
+    <span>功能控制：</span>
+    <tiny-button @click="toggleAllBtn()">
+      {{ showAllBtn ? '不显示all-btns' : '显示all-btns' }}
+    </tiny-button>
+    <tiny-button @click="toggleDisable()">
+      {{ alwaysDisable ? '无选时中禁用' : '无选中时高亮' }}
+    </tiny-button>
+  </div>
   <tiny-transfer
     v-model="value"
     :data="data"

package/demos/pc/app/transfer/custom-render-composition-api.vue

@@ -5,7 +5,7 @@
   <tiny-transfer v-model="value" :data="data" :props="{ key: 'id', label: 'text' }">
     <template #default="optionData">
       <div>
-        <span class="red">{{ optionData.option.id }}</span> <span>- {{ optionData.option.text }} - customized</span>
+        <span class="red">{{ optionData.option.id }}</span> <span>- {{ optionData.option.text }} - by slot</span>
       </div>
     </template>
   </tiny-transfer>

package/demos/pc/app/transfer/custom-render.vue

@@ -5,7 +5,7 @@
   <tiny-transfer v-model="value" :data="data" :props="{ key: 'id', label: 'text' }">
     <template #default="optionData">
       <div>
-        <span class="red">{{ optionData.option.id }}</span> <span>- {{ optionData.option.text }} - customized</span>
+        <span class="red">{{ optionData.option.id }}</span> <span>- {{ optionData.option.text }} - by slot</span>
       </div>
     </template>
   </tiny-transfer>

package/demos/pc/app/transfer/nested-table-composition-api.vue

@@ -34,8 +34,6 @@ const getGridData = () => {
       id: i.toString(),
       name: 'GFD科技YX公司' + i,
       area: '华东区' + i,
-      address: '福州' + i,
-      introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。' + i,
       disabled: i % 4 === 0
     })
   }
@@ -51,11 +49,11 @@ const data = ref(getGridData())
 const columns = ref([
   {
     type: 'index',
-    width: '50px'
+    width: '30px'
   },
   {
     type: 'selection',
-    width: '50px'
+    width: '30px'
   },
   {
     field: 'name',
@@ -68,20 +66,6 @@ const columns = ref([
     field: 'area',
     title: '所属区域',
     sortable: true
-  },
-  {
-    field: 'address',
-    title: '地址',
-    sortable: true,
-    editor: { component: 'input', autoselect: true },
-    showOverflow: true
-  },
-  {
-    field: 'introduction',
-    title: '公司简介',
-    sortable: true,
-    showOverflow: true,
-    editor: { component: 'input', autoselect: true }
   }
 ])
 const pagerOp = ref({