@opentiny/vue-docs 2.1.9 → 2.2.0

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

@@ -5,293 +5,312 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['basic-usage.vue']
-    },
-    {
-      'demoId': 'popover-content',
-      'name': { 'zh-CN': '添加内容', 'en-US': 'Add Content' },
-      'desc': {
-        'zh-CN': '<p><code>content</code> 设置要显示的内容。</p>\n',
-        'en-US': '<p><code>content</code> Sets what to display. </p>\n'
-      },
-      'codeFiles': ['popover-content.vue']
-    },
-    {
-      'demoId': 'arrow-offset',
-      'name': { 'zh-CN': '箭头偏移', 'en-US': 'Arrow Offset' },
       'desc': {
-        'zh-CN':
-          '<p><code>arrow-offset</code> 设置箭头的在弹窗层上的偏移量。箭头默认至少会保留8px的空间， 以保证箭头不会贴在弹窗层两边。</p>\n',
-        'en-US':
-          '<p><code>arrow-offset</code> Sets the offset of the arrow to change the position of the arrow.By default, the arrow retains at least 8px of space to ensure that the arrow does not stick to the left. </p>\n'
+        'zh-CN': `
+          通过 <code>reference</code>  插槽来指定一个触发源，通过 <code>content</code> 属性来指定提示内容，点击触发源会弹出内容面板。<br>
+          通过 <code>title</code> 属性来指定标题。<br>
+          通过 <code>width</code>  属性来指定一个弹出面板的宽度。<br>
+          <div class="tip custom-block">reference 插槽是必传插槽，没有它时组件渲染不出来。</div>
+        `,
+        'en-US': `
+          Specify a trigger source through the <code>reference</code> slot, specify the prompt content through the <code>content</code> property, click the trigger source will pop up the content panel. <br>
+          The title is specified by the <code>title</code> attribute. <br>
+          Use the <code>width</code> property to specify the width of a pop-up panel. <br>
+          The <div class="tip custom-block">reference slot is a required slot without which the component cannot be rendered. </div>
+        `
       },
-      'codeFiles': ['arrow-offset.vue']
+      'codeFiles': ['basic-usage.vue']
     },
+
     {
-      'demoId': 'frame-offset',
-      'name': { 'zh-CN': '弹出框偏移', 'en-US': 'Popup Box Offset' },
+      'demoId': 'trigger',
+      'name': { 'zh-CN': '触发方式', 'en-US': 'Trigger Mode' },
       'desc': {
-        'zh-CN': '<p><code>offset</code> 设置弹框的偏移量，来改变弹框的位置。</p>\n',
-        'en-US':
-          '<p><code>offset</code> Sets the offset of the dialog box to change the position of the dialog box. </p>\n'
+        'zh-CN': `
+          通过<code>trigger</code> 属性设定弹出框的4种触发方式， 默认值为 <code> click </code>。<br>
+          当触发方式为<code> manual</code>时，通过设置<code>v-model</code> 属性，动态控制显示和隐藏弹出框。
+        `,
+        'en-US': `
+          The <code>trigger</code> property is used to set the triggering mode of the pop-up box. The optional value of the property is <code>click/hover/manual/focus</code>, and the default value is <code>click </code>. <br>
+          When the trigger mode is <code> manual</code>, you can set the <code>v-model</code> property to dynamically display and hide pop-ups.
+        `
       },
-      'codeFiles': ['frame-offset.vue']
+      'codeFiles': ['trigger.vue']
     },
+
     {
-      'demoId': 'close-delay',
-      'name': { 'zh-CN': '延迟隐藏', 'en-US': 'Delay Hiding' },
+      'demoId': 'content',
+      'name': { 'zh-CN': '弹出层内容', 'en-US': 'Pop-up layer content' },
       'desc': {
-        'zh-CN': '<p><code>close-delay</code> 弹出框延迟隐藏单位为毫秒(number)</p>\n',
-        'en-US':
-          '<p><code>close-delay</code> The delay for hiding the pop-up dialog box is in milliseconds (number)</p>\n'
+        'zh-CN': `
+          通过 <code>content</code> 属性设置要显示的字符串内容。<br>
+          通过 <code>default</code> 插槽，支持自定义复杂的内容结构。<br>
+        `,
+        'en-US': `
+          The <code>content</code> property sets the string content to be displayed.
+          Support for custom complex content structures through the <code>default</code> slot.
+        `
       },
-      'codeFiles': ['close-delay.vue']
+      'codeFiles': ['content.vue']
     },
     {
-      'demoId': 'dynamic-disable',
+      'demoId': 'disabled',
       'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p><code>disabled</code> 设置是否禁用弹出框。</p>\n',
-        'en-US': '<p><code>disabled</code> Sets whether to disable pop-up boxes. </p>\n'
+        'zh-CN': '<code>disabled</code> 设置是否禁用弹出框。',
+        'en-US': '<code>disabled</code> Specifies whether to disable the pop-up. '
       },
-      'codeFiles': ['dynamic-disable.vue']
+      'codeFiles': ['disabled.vue']
     },
+
     {
-      'demoId': 'open-delay',
-      'name': { 'zh-CN': '延迟显示', 'en-US': 'Delay Display' },
+      'demoId': 'offset',
+      'name': { 'zh-CN': '自定义偏移', 'en-US': 'Custom Offset' },
       'desc': {
-        'zh-CN': '<p><code>open-delay</code>，设置延迟时间 ( type:number,单位毫秒 )</p>\n',
-        'en-US': '<p><code>open-delay</code>, Set the delay time (type: number, unit: ms)</p>\n'
+        'zh-CN': `
+          通过<code>arrow-offset</code> 设置箭头的在弹窗层上的偏移量。箭头默认至少会保留8px的空间， 以保证箭头不会贴在弹窗层两边。<br>
+          通过<code> offset</code> 设置弹框的偏移量，来改变弹框的位置
+        `,
+        'en-US': `
+          Use <code>arrow-offset</code> to set the offset of the arrow on the popup layer. Arrows are left at least 8px by default to ensure that they are not stuck on either side of the popup layer. <br>
+          Change the position of the springboard by setting the offset</code> of the springboard
+        `
       },
-      'codeFiles': ['open-delay.vue']
+      'codeFiles': ['offset.vue']
     },
+
     {
-      'demoId': 'popover-placement',
-      'name': { 'zh-CN': '显示位置', 'en-US': 'Display position' },
+      'demoId': 'custom-popper',
+      'name': { 'zh-CN': '自定义弹出面板', 'en-US': 'Customize the pop-up panel' },
       'desc': {
-        'zh-CN':
-          '<p><code>placement</code> 设置弹出框的的位置,可选值为（top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end）</p>\n',
-        'en-US':
-          '<p><code>placement</code>: indicates the position of the dialog box that is displayed. The value can be (top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end) </p>\n'
+        'zh-CN': `
+          通过<code>placement</code> 设置弹出框的的位置,可选值为（top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end）。<br>
+          通过<code>visible-arrow</code> 设定是否显示提示框的箭头，默认值为 true。<br>
+          通过<code>popper-class</code> 可配置单个或多个 class，通过类名可以控制弹窗样式。
+        `,
+        'en-US': `
+          By <code>placement</code> Set the location of the pop-up box. The optional value is (top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end ). <br>
+          Set whether the arrow of the prompt box is displayed by <code>visible-arrow</code>. The default value is true. <br>
+          You can run the <code>popper-class</code> command to configure one or more classes. You can control the popup style by class name.
+        `
       },
-      'codeFiles': ['popover-placement.vue']
+      'codeFiles': ['custom-popper.vue']
     },
     {
-      'demoId': 'popper-class',
-      'name': { 'zh-CN': '自定义样式', 'en-US': 'Custom Style' },
+      'demoId': 'delay',
+      'name': { 'zh-CN': '延迟控制', 'en-US': 'Delay control' },
       'desc': {
-        'zh-CN': '<p><code>popper-class</code> 可配置单个或多个 class</p>\n',
-        'en-US': '<p><code>popper-class</code> You can configure one or more classes</p>\n'
+        'zh-CN': `
+          通过 <code>open-delay</code> 弹出框打开时延迟的时长，默认值为0，单位为毫秒<br>
+          通过 <code>close-delay</code> 弹出框关闭时延迟的时长，默认值为200，单位为毫秒<br>
+          <div class="tip custom-block">只有在触发方式为 hover 时，延迟控制功能才生效。</div>
+        `,
+        'en-US': `
+          Run the <code>open-delay</code> command to open a pop-up. The default value is 0, in milliseconds. <br>
+          Run the <code>close-delay</code> command to close the pop-up. The default value is 200, in milliseconds. <br>
+          <div class="tip custom-block"> Delay control takes effect only if the trigger mode is hover. </div>
+        `
       },
-      'codeFiles': ['popper-class.vue']
+      'codeFiles': ['delay.vue']
     },
     {
-      'demoId': 'custom-transition',
+      'demoId': 'transition',
       'name': { 'zh-CN': '自定义渐变动画', 'en-US': 'Customized Gradient Animation' },
       'desc': {
-        'zh-CN':
-          '<p><code>transition</code> 设置弹框的显示隐藏淡入淡出动画，默认取值 fade-in-linear，fade-in ( 无动画效果 )</p>\n',
+        'zh-CN': `通过 <code>transition</code> 设置弹框的显示隐藏淡入淡出动画，默认取值 fade-in-linear。`,
         'en-US':
-          '<p><code>transition</code> Sets the display-hide-in-fade-out animation of the dialog box. The default values are fade-in-linear and fade-in (no animation effect).</p>\n'
-      },
-      'codeFiles': ['custom-transition.vue']
-    },
-    {
-      'demoId': 'trigger-mode',
-      'name': { 'zh-CN': '触发方式', 'en-US': 'Trigger Mode' },
-      'desc': {
-        'zh-CN':
-          '<p><code>trigger</code>设定弹出框的触发方式  <code>click</code> 点击触发  <code>focus</code> 鼠标长按触发  <code>hover</code> 鼠标悬浮触发  <code>manual</code> 点击触发，再次点击隐藏</p>\n',
-        'en-US':
-          '<p><code>trigger</code> Set the triggering mode of the pop-up dialog box. <code>click</code>Click to trigger <code>focus</code>Hover</code>Hover</code>Click to trigger <code>manual</code>. Click Hide</p>\n again'
-      },
-      'codeFiles': ['trigger-mode.vue']
-    },
-    {
-      'demoId': 'hidden-arrow',
-      'name': { 'zh-CN': '隐藏提示框箭头', 'en-US': 'Hide the arrow in the dialog box' },
-      'desc': {
-        'zh-CN': '<p><code>visible-arrow</code> 设定是否显示提示框的箭头</p>\n',
-        'en-US': '<p><code>visible-arrow</code> Sets whether to display the arrow of the prompt box.</p>\n'
-      },
-      'codeFiles': ['hidden-arrow.vue']
-    },
-    {
-      'demoId': 'popover-width',
-      'name': { 'zh-CN': '宽度', 'en-US': 'Width' },
-      'desc': {
-        'zh-CN':
-          '<p><code>width</code> 弹出框的宽度，<code>height</code> 弹出框的高度。两者默认值为auto,由子内容撑开。</p>\n',
-        'en-US': 'Width of the <p><code>width</code> pop-up box</p>\n'
+          'You can run the <code>transition</code> command to set the display hidden fade in and fade out animation of a pop-up. The default value is fade-in-linear.'
       },
-      'codeFiles': ['popover-width.vue']
+      'codeFiles': ['transition.vue']
     },
     {
       'demoId': 'popper-options',
-      'name': { 'zh-CN': '弹出框选项', 'en-US': 'Pop-up Options' },
+      'name': { 'zh-CN': '高级选项', 'en-US': 'Pop-up Options' },
       'desc': {
-        'zh-CN': '<p><code>popper-options</code> 配置弹出框选项</p>\n',
-        'en-US': '<p><code>popper-options</code> Configuration pop-up options</p>\n'
-      },
-      'codeFiles': ['popper-options.vue']
-    },
-    {
-      'demoId': 'trigger-reference',
-      'name': { 'zh-CN': '触发源', 'en-US': 'Trigger Source' },
-      'desc': {
-        'zh-CN': '<p><code>slot</code> 设置弹出框的触发源</p>\n',
-        'en-US': '<p><code>slot</code> Set the trigger source of the pop-up dialog box</p>\n'
-      },
-      'codeFiles': ['trigger-reference.vue']
-    },
-    {
-      'demoId': 'custom-tip-text',
-      'name': { 'zh-CN': '自定义提示文本', 'en-US': 'Custom Prompt Text' },
-      'desc': {
-        'zh-CN': '<p><code>content</code> 设置自定义文本，也可在标签内直接嵌套默认插槽为自定义文本</p>\n',
+        'zh-CN': '通过<code>popper-options</code> 配置弹出框高级选项，参考底部的IPopperOption说明',
         'en-US':
-          '<p><code>content</code> Set the custom text. You can also nest the default slot in the label as the custom text</p>\n'
+          'Run the <code>popper-options</code> command to configure the advanced pop-up options. For details, see the IPopperOption description at the bottom'
       },
-      'codeFiles': ['custom-tip-text.vue']
+      'codeFiles': ['popper-options.vue']
     },
+    // 暂时屏蔽
+    // {
+    //   'demoId': 'dynamic-reference',
+    //   'name': { 'zh-CN': '动态触发源', 'en-US': 'Pop-up Options' },
+    //   'desc': {
+    //     'zh-CN': `
+    //       当组件不传入<code>reference</code> 插槽时,弹出框由于没有触发源而无法触发显示。<br>
+    //       通过 <code>reference</code> 属性，可以动态传入一个Dom元素作为动态触发源，之后调用<code>doShow() \ doClose() </code>，来控制弹出框显示与隐藏。
+    //       <div class="tip custom-block">通过这个高级技巧，可以实现在列表中共享一个<code> Popover</code> 组件实例,提升了列表时的性能。</div>
+    //     `,
+    //     'en-US':
+    //       'Run the <code>popper-options</code> command to configure the advanced pop-up options. For details, see the IPopperOption description at the bottom'
+    //   },
+    //   'codeFiles': ['dynamic-reference.vue']
+    // },
     {
-      'demoId': 'popover-events',
+      'demoId': 'events',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN':
-          '<p><code>input</code> 加载完触发回调\n\n<code>hide</code> 隐藏时触发回调\n\n<code>show</code> 显示时触发回调\n\n<code>after-leave</code> 显示时触发回调\n\n<code>after-enter</code> 显示动画播放完毕后触发回调</p>\n',
-        'en-US':
-          'Callback triggered after <p><code>input</code> loading\n\n<code>hide</code>Hide</code>Hide</code>Callback triggered during display\n\n<code>show</code> \n\n<code>after-leave</code> displayCallback triggered during display \n\n<code>after-enter</code> displayCallback triggered after animation playing is complete</p> \n'
+        'zh-CN': `
+          组件支持以下事件：<br>
+          <code>hide</code> 隐藏时触发回调<br>
+          <code>show</code> 显示时触发回调<br>
+          <code>after-leave</code> 进入的动画结束后触发回调<br>
+          <code>after-enter</code> 离开的动画播结束后触发回调<br>`,
+        'en-US': `
+          The component supports the following events: <br>
+          <code>hide</code> Trigger callback when hiding <br>
+          <code>show</code> callback triggered when displayed <br>
+          <code>after-leave</code> Triggers callback after entering animation <br>
+          <code>after-enter</code> Trigger callback after the leaving animation ends <br>
+          `
       },
-      'codeFiles': ['popover-events.vue']
+      'codeFiles': ['events.vue']
     }
   ],
   apis: [
     {
       'name': 'popover',
       'type': 'component',
-      'properties': [
-        {
-          'name': 'trigger',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 click',
-          'desc': {
-            'zh-CN': '触发方式;该属性的可选值为 click / focus / hover / manual',
-            'en-US': 'Trigger mode; The optional values of this attribute are click / focus / hover / manual'
-          },
-          'demoId': 'trigger-mode'
-        },
+      'props': [
         {
           'name': 'title',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '标题', 'en-US': 'Title' },
-          'demoId': 'custom-tip-text'
+          'desc': { 'zh-CN': '弹出层的标题', 'en-US': 'Layer Title' },
+          'demoId': 'basic-usage'
         },
         {
           'name': 'content',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '显示的内容，也可以通过 slot 传入 DOM',
-            'en-US': 'Displayed content, which can also be transferred to the DOM through slot.'
+            'zh-CN': '弹出层的内容',
+            'en-US': 'Layer Content.'
           },
-          'demoId': 'popover-content'
+          'demoId': 'basic-usage'
+        },
+
+        {
+          'name': 'placement',
+          'type': `'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'`,
+          'defaultValue': '"bottom"',
+          'desc': {
+            'zh-CN': '弹出层出现的位置',
+            'en-US': 'Layer Placement'
+          },
+          'demoId': 'custom-popper'
         },
         {
           'name': 'width',
-          'type': 'string , number',
-          'defaultValue': '该属性的默认值为auto，最小宽度 150px',
-          'desc': { 'zh-CN': '宽度', 'en-US': 'Width' },
-          'demoId': 'popover-width'
+          'type': `'auto' | number`,
+          'defaultValue': '"auto"',
+          'desc': { 'zh-CN': '弹出层宽度', 'en-US': 'Layer width' },
+          'demoId': 'basic-usage'
         },
         {
           'name': 'height',
-          'type': 'string , number',
-          'defaultValue': '该属性的默认值为auto',
+          'type': `'auto' | number`,
+          'defaultValue': '"auto"',
           'desc': {
-            'zh-CN': '高度',
-            'en-US':
-              'Location; The optional value of this attribute is top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end'
+            'zh-CN': '弹出层高度',
+            'en-US': 'Layer height'
           },
-          'demoId': 'popover-width'
+          'demoId': 'basic-usage'
         },
         {
-          'name': 'placement',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 bottom',
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': { 'zh-CN': '是否禁用', 'en-US': 'Whether the status is visible' },
+          'demoId': 'disabled'
+        },
+        {
+          'name': 'trigger',
+          'type': `'click' | 'focus' | 'hover' | 'manual'`,
+          'defaultValue': '"click"',
           'desc': {
-            'zh-CN':
-              '出现位置;该属性的可选值为 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end',
-            'en-US': 'Popover available'
+            'zh-CN': '触发方式',
+            'en-US': 'Trigger mode'
           },
-          'demoId': 'popover-placement'
+          'demoId': 'trigger'
         },
         {
-          'name': 'disabled',
+          'name': 'modelValue',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
-          'desc': { 'zh-CN': 'Popover 是否可用', 'en-US': 'Whether the status is visible' },
-          'demoId': 'dynamic-disable'
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '状态是否可见，仅在<code>trigger="manual"</code>时有效',
+            'en-US': 'Status is visible only when <code>trigger="manual"</code>'
+          },
+          'demoId': 'trigger'
         },
         {
-          'name': 'modelValue / v-model',
+          'name': 'offset',
+          'type': 'number',
+          'defaultValue': '0',
+          'desc': { 'zh-CN': '弹出层的偏移量', 'en-US': 'Layer offset' },
+          'demoId': 'offset'
+        },
+        {
+          'name': 'visible-arrow',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'true',
           'desc': {
-            'zh-CN': '状态是否可见，仅在<a href="#trigger-mode">trigger="manual"</a>时有效',
-            'en-US': 'Whether the status is visible is only valid when<a href="#trigger-mode">trigger="manual"</a>'
+            'zh-CN': '是否显示弹出层的箭头',
+            'en-US': "whether to show layer's arrow"
           },
-          'demoId': 'trigger-mode'
+          'demoId': 'custom-popper'
         },
         {
-          'name': 'offset',
+          'name': 'arrow-offset',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 0',
-          'desc': { 'zh-CN': '出现位置的偏移量', 'en-US': 'Arrow position offset' },
-          'demoId': 'frame-offset'
+          'defaultValue': '0',
+          'desc': { 'zh-CN': '弹出层的箭头偏移位置', 'en-US': "the layer's arrow offset " },
+          'demoId': 'offset'
         },
         {
-          'name': 'arrow-offset',
+          'name': 'open-delay',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 0',
-          'desc': { 'zh-CN': '箭头的位置偏移', 'en-US': 'The rotation center of the component' },
-          'demoId': 'arrow-offset'
+          'defaultValue': '0',
+          'desc': {
+            'zh-CN': '触发方式为 hover 时的显示延迟，单位为毫秒',
+            'en-US': 'The display delay when the trigger mode is hover, in milliseconds'
+          },
+          'demoId': 'delay'
+        },
+        {
+          'name': 'close-delay',
+          'type': 'number',
+          'defaultValue': '200',
+          'desc': {
+            'zh-CN': '触发方式为 hover 时的隐藏延迟，单位为毫秒',
+            'en-US': 'The close delay when the trigger mode is hover, in milliseconds'
+          },
+          'demoId': 'delay'
         },
         {
           'name': 'append-to-body',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': { 'zh-CN': '是否添加到body上', 'en-US': 'Define gradient animation' },
-          'demoId': 'basic-usage'
+          'defaultValue': 'true',
+          'desc': { 'zh-CN': '是否添加到body上', 'en-US': 'Whether to add it to the body' },
+          'demoId': ''
         },
         {
           'name': 'transition',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 fade-in-linear',
-          'desc': { 'zh-CN': '定义渐变动画', 'en-US': 'Whether to display the Tooltip arrow.' },
-          'demoId': 'custom-transition'
-        },
-        {
-          'name': 'visible-arrow',
-          'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
-          'desc': {
-            'zh-CN': '是否显示 Tooltip 箭头',
-            'en-US':
-              "Parameters of popper.js; The optional value of this attribute is a reference to the <a href='https://popper.js.org/docs/v1/#new_Popper_new' target='_blank'>popper.js</a> document"
-          },
-          'demoId': 'hidden-arrow'
+          'defaultValue': '"fade-in-linear"',
+          'desc': { 'zh-CN': '定义渐变动画', 'en-US': 'Define gradient animation' },
+          'demoId': 'transition'
         },
         {
           'name': 'popper-options',
           'type': 'object',
-          'defaultValue': "该属性的默认值为 { boundariesElement: 'body', gpuAcceleration: false }",
+          'defaultValue': '{}',
           'desc': {
-            'zh-CN':
-              "popper.js 的参数;该属性的可选值为 参考<a href='https://popper.js.org/docs/v1/#new_Popper_new' target='_blank'>popper.js</a>文档",
-            'en-US': 'Add a class name for popper'
+            'zh-CN': '弹出层参数;请参考IPopperOption的说明',
+            'en-US': 'layer parameters; Refer to the description of IPopperOption'
           },
           'demoId': 'popper-options'
         },
@@ -300,60 +319,46 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '为 popper 添加类名',
-            'en-US': 'Display delay when the trigger mode is hover, in milliseconds.'
-          },
-          'demoId': 'popper-class'
-        },
-        {
-          'name': 'open-delay',
-          'type': 'number',
-          'defaultValue': '该属性的默认值为 0',
-          'desc': {
-            'zh-CN': '触发方式为 hover 时的显示延迟，单位为毫秒',
-            'en-US': 'Hide delay when the trigger mode is hover, in milliseconds.'
+            'zh-CN': '为弹出层添加类名',
+            'en-US': 'Add a class name for the pop-up layer.'
           },
-          'demoId': 'open-delay'
-        },
-        {
-          'name': 'close-delay',
-          'type': 'number',
-          'defaultValue': '该属性的默认值为 200',
-          'desc': { 'zh-CN': '触发方式为 hover 时的隐藏延迟，单位为毫秒', 'en-US': '' },
-          'demoId': 'close-delay'
+          'demoId': 'custom-popper'
         }
       ],
       'events': [
         {
           'name': 'show',
-          'type': 'Function()',
+          'type': '()=>void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '显示时触发', 'en-US': 'Triggered upon display' },
-          'demoId': 'popover-events'
+          'desc': { 'zh-CN': '显示时触发', 'en-US': 'Triggered when display' },
+          'demoId': 'events'
         },
         {
           'name': 'hide',
-          'type': 'Function()',
+          'type': '()=>void',
           'defaultValue': '',
           'desc': { 'zh-CN': '隐藏时触发', 'en-US': 'Triggered when hidden' },
-          'demoId': 'popover-events'
+          'demoId': 'events'
         },
         {
           'name': 'after-enter',
-          'type': 'Function',
+          'type': '()=>void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '显示动画播放完毕后触发',
+            'zh-CN': '进入的动画播放完毕后触发',
             'en-US': 'This event is triggered after the animation is played.'
           },
-          'demoId': 'popover-events'
+          'demoId': 'events'
         },
         {
           'name': 'after-leave',
-          'type': 'Function()',
+          'type': '()=>void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '隐藏动画播放完毕后触发', 'en-US': 'Triggered after the hidden animation is played.' },
-          'demoId': 'popover-events'
+          'desc': {
+            'zh-CN': '离开的动画播放完毕后触发',
+            'en-US': 'Triggered after the hidden animation is played.'
+          },
+          'demoId': 'events'
         }
       ],
       'slots': [
@@ -361,17 +366,33 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': 'Popover 内嵌 HTML 文本', 'en-US': 'Popover embedded HTML text' },
-          'demoId': 'custom-tip-text'
+          'desc': { 'zh-CN': '弹出层元素插槽', 'en-US': 'The layer element slot' },
+          'demoId': 'content'
         },
         {
           'name': 'reference',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '触发 Popover 显示的 HTML 元素', 'en-US': 'HTML element that triggers popover display' },
-          'demoId': 'popover-events'
+          'desc': {
+            'zh-CN': '触发源元素插槽，该插槽是必传插槽。',
+            'en-US': "The layer's reference element slot"
+          },
+          'demoId': 'content'
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IPopperOption',
+      type: 'interface',
+      code: `
+interface IPopperOption {
+  bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件，监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时，位置不正确的场景，默认false
+  followReferenceHide: boolean // 当触发源隐藏时，自动隐藏弹出层，默认true
+  removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
+}
+      `
+    }
   ]
 }

package/demos/pc/app/progress/basic-usage-composition-api.vue

@@ -17,7 +17,7 @@ import { ref } from 'vue'
 import { Progress as TinyProgress, Button as TinyButton } from '@opentiny/vue'
 import { iconMinus, iconPlus } from '@opentiny/vue-icon'
 
-const percentage = ref(20)
+const percentage = ref(90)
 const IconMinus = iconMinus()
 const IconPlus = iconPlus()