@opentiny/vue-docs 2.1.9 → 2.1.10

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

@@ -33,48 +33,59 @@ export default {
     },
     {
       'demoId': 'placement',
-      'name': { 'zh-CN': '提示框显示位置', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>placement</code> 设置提示框显示位置。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '提示框显示位置', 'en-US': 'Display position of prompt box' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>placement</code> 设置提示框显示位置。</p>',
+        'en-US': '<p>Set the display position of the prompt box through<code>placement</code>.</p>'
+      },
       'codeFiles': ['placement.vue']
     },
     {
       'demoId': 'custom-class',
-      'name': { 'zh-CN': '自定义类名', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>custom-class</code> 自定义气泡提示框的类名。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '自定义类名', 'en-US': 'Custom class' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>custom-class</code> 自定义气泡提示框的类名。</p>',
+        'en-US': '<p>Customize the class name of the bubble prompt box through<code>custom class</code>.</p>'
+      },
       'codeFiles': ['custom-class.vue']
     },
     {
       'demoId': 'slot-footer',
-      'name': { 'zh-CN': '底部插槽', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>footer</code> 插槽自定义底部内容。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '底部插槽', 'en-US': 'Footer slot' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>footer</code> 插槽自定义底部内容。</p>',
+        'en-US': '<p>Customize the bottom content through the<code>footer</code>slot.</p>'
+      },
       'codeFiles': ['slot-footer.vue']
     },
     {
       'demoId': 'width',
-      'name': { 'zh-CN': '设置宽度', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>width</code> 设置提示框宽度。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '设置宽度', 'en-US': 'Set width' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>width</code> 设置提示框宽度。</p>',
+        'en-US': '<p>Set the width of the prompt box through<code>width</code></ P>'
+      },
       'codeFiles': ['width.vue']
     },
     {
       'demoId': 'cancel-button',
-      'name': { 'zh-CN': '隐藏取消按钮', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>通过 <code>cancel-button</code> 设置是否展示取消按钮。</p>', 'en-US': '' },
+      'name': { 'zh-CN': '隐藏取消按钮', 'en-US': 'Hide Cancel Button' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>cancel-button</code> 设置是否展示取消按钮。</p>',
+        'en-US': '<p>Set whether to display the cancel button through<code>cancel button</code></ P>'
+      },
       'codeFiles': ['cancel-button.vue']
     },
     {
-      'demoId': 'visible-event',
-      'name': { 'zh-CN': '隐藏、显示事件', 'en-US': '' },
+      'demoId': 'event',
+      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p>当气泡确认框显示时触发 <code>show</code> 事件，当确认框隐藏时触发 <code>hide</code> 事件。</p>',
-        'en-US': ''
+        'zh-CN':
+          '<p>当气泡确认框显示时触发 <code>show</code> 事件，当确认框隐藏时触发 <code>hide</code> 事件。<br />当点击底部确认按钮时会同时触发 <code>hide</code> 和 <code>confirm</code> 事件。</p>',
+        'en-US':
+          '<p>The<code>show</code>event is triggered when the bubble confirmation box is displayed, and the<code>hide</code>event is triggered when the confirmation box is hidden< When clicking the confirm button at the bottom, both the<code>hide</code>and<code>confirm</code>events will be triggered simultaneously.</p>'
       },
-      'codeFiles': ['visible-event.vue']
-    },
-    {
-      'demoId': 'confirm-event',
-      'name': { 'zh-CN': '确认事件', 'en-US': '' },
-      'desc': { 'zh-CN': '<p>当点击底部确认按钮时触发 <code>confirm</code> 事件。</p>', 'en-US': '' },
-      'codeFiles': ['confirm-event.vue']
+      'codeFiles': ['event.vue']
     }
   ],
   apis: [
@@ -95,9 +106,9 @@ export default {
         {
           'name': 'content',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置气泡提示框的内容',
+            'zh-CN': '气泡提示框的内容',
             'en-US': 'Set the pop confirm content'
           },
           'demoId': 'basic-usage'
@@ -105,8 +116,8 @@ export default {
         {
           'name': 'placement',
           'type':
-            'top | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-end',
-          'defaultValue': 'top',
+            "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'",
+          'defaultValue': "'top'",
           'desc': {
             'zh-CN': '气泡提示框显示位置',
             'en-US': 'Set the pop confirm placement'
@@ -116,7 +127,7 @@ export default {
         {
           'name': 'custom-class',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '为气泡提示框自定义类名',
             'en-US': 'Set the pop confirm popper class name'
@@ -126,7 +137,7 @@ export default {
         {
           'name': 'title',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '设置气泡提示框的标题',
             'en-US': 'Set the pop confirm title'
@@ -135,8 +146,8 @@ export default {
         },
         {
           'name': 'trigger',
-          'type': 'trigger | hover',
-          'defaultValue': 'hover',
+          'type': "'click' | 'hover'",
+          'defaultValue': "'hover'",
           'desc': {
             'zh-CN': '气泡提示框显示触发方式',
             'en-US': 'How to show the pop confirm'
@@ -145,11 +156,11 @@ export default {
         },
         {
           'name': 'type',
-          'type': 'info | success | warning | error | Component',
-          'defaultValue': '',
+          'type': "'info' | 'success' | 'warning' | 'error' | VueComponent",
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '提示图标类型，可选值有info、success、warning、error，或者传入自定义图标',
-            'en-US': 'Set the icon type, info,success,warning,error can be set'
+            'zh-CN': '提示图标类型，可以传入自定义图标',
+            'en-US': 'Prompt icon type, custom icons can be passed in'
           },
           'demoId': 'type'
         },
@@ -158,7 +169,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '350',
           'desc': {
-            'zh-CN': '设置气泡提示框宽度',
+            'zh-CN': '气泡提示框宽度',
             'en-US': 'Set the pop confirm box with'
           },
           'demoId': 'width'
@@ -168,7 +179,7 @@ export default {
         {
           'name': 'confirm',
           'type': '(visible: boolean) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '点击确认按钮时触发',
             'en-US': 'Triggered when confirm button is clicked'
@@ -178,29 +189,29 @@ export default {
         {
           'name': 'hide',
           'type': '(visible: boolean) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '气泡确认框关闭时触发',
             'en-US': 'Triggered when pop confirm hide'
           },
-          'demoId': 'visible-event'
+          'demoId': 'event'
         },
         {
           'name': 'show',
           'type': '(visible: boolean) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '气泡确认框显示时触发',
             'en-US': 'Triggered when pop confirm show'
           },
-          'demoId': 'visible-event'
+          'demoId': 'event'
         }
       ],
       'slots': [
         {
           'name': 'footer',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '底部插槽',
             'en-US': 'default slot'
@@ -210,7 +221,7 @@ export default {
         {
           'name': 'reference',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '触发气泡提示框显示的 HTML 元素',
             'en-US': 'reference slot'

package/demos/pc/app/popeditor/{base.spec.ts → basic-usage.spec.ts}

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('PopEditor 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('popeditor#base')
+  await page.goto('popeditor#basic-usage')
 
   const preview = page.locator('#preview')
   const textBox = preview.getByPlaceholder('请选择')

package/demos/pc/app/popeditor/draggable-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <h5>组件属性draggable默认为true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</h5>
+    <p>组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
     <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id"></tiny-popeditor>
-    <h5>如果设置属性draggable为false，那么就不能拖动弹出窗口：</h5>
+    <p>如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
     <tiny-popeditor
       v-model="value"
       :grid-op="gridOp"

package/demos/pc/app/popeditor/draggable.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <h5>组件属性draggable默认为true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</h5>
+    <p>组件属性 draggable 默认为 true，不需设置就可以在标题栏按住鼠标拖动弹出窗口：</p>
     <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id"></tiny-popeditor>
-    <h5>如果设置属性draggable为false，那么就不能拖动弹出窗口：</h5>
+    <p>如果设置属性 draggable 为 false，那么就不能拖动弹出窗口：</p>
     <tiny-popeditor
       v-model="value"
       :grid-op="gridOp"

package/demos/pc/app/popeditor/events-composition-api.vue

@@ -8,6 +8,8 @@
     :show-pager="true"
     :pager-op="pagerOp"
     @page-change="handlePageChange"
+    @popup="handlePopup"
+    @close="handleClose"
   ></tiny-popeditor>
 </template>
 
@@ -120,4 +122,12 @@ function handlePageChange(val) {
   const offset = (val - 1) * pagerOp.value.pageSize
   gridOp.value.data = dataset.slice(offset, offset + pagerOp.value.pageSize)
 }
+
+function handlePopup() {
+  Modal.message('popup 弹窗打开事件')
+}
+
+function handleClose() {
+  Modal.message('close 弹窗关闭事件')
+}
 </script>

package/demos/pc/app/popeditor/events.vue

@@ -8,6 +8,8 @@
     :show-pager="true"
     :pager-op="pagerOp"
     @page-change="handlePageChange"
+    @popup="handlePopup"
+    @close="handleClose"
   ></tiny-popeditor>
 </template>
 
@@ -126,6 +128,12 @@ export default {
       ]
       const offset = (val - 1) * this.pagerOp.pageSize
       this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
+    },
+    handlePopup() {
+      Modal.message('popup 弹窗打开事件')
+    },
+    handleClose() {
+      Modal.message('close 弹窗关闭事件')
     }
   }
 }

package/demos/pc/app/popeditor/multi-composition-api.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/multi-value-array-composition-api.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -107,3 +107,9 @@ const gridOp = ref({
   data: dataset
 })
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/multi-value-array.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -115,3 +115,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/multi.vue

@@ -10,7 +10,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/selected-box-composition-api.vue

@@ -11,7 +11,7 @@
       show-selected-box
       :selected-box-op="selectedBoxOp"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -117,3 +117,9 @@ const selectedBoxOp = ref({
   }
 })
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/selected-box.vue

@@ -11,7 +11,7 @@
       show-selected-box
       :selected-box-op="selectedBoxOp"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <div class="demo-pop-editor-selected-box" v-if="value">value 值：{{ value }}</div>
   </div>
 </template>
 
@@ -125,3 +125,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-pop-editor-selected-box {
+  margin-top: 12px;
+}
+</style>

package/demos/pc/app/popeditor/{showOverflow-composition-api.vue → show-overflow-composition-api.vue}

@@ -8,7 +8,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/{showOverflow.vue → show-overflow.vue}

@@ -8,7 +8,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/size-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-popeditor-size">
     <tiny-popeditor
       size="medium"
       v-model="value"
@@ -9,7 +9,32 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <tiny-popeditor
+      size="small"
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
+    <tiny-popeditor
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
+    <tiny-popeditor
+      size="mini"
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
   </div>
 </template>
 
@@ -106,3 +131,9 @@ const gridOp = ref({
   data: dataset
 })
 </script>
+
+<style scoped>
+.demo-popeditor-size .tiny-popeditor {
+  margin-bottom: 8px;
+}
+</style>

package/demos/pc/app/popeditor/size.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-popeditor-size">
     <tiny-popeditor
       size="medium"
       v-model="value"
@@ -9,7 +9,32 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <tiny-popeditor
+      size="small"
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
+    <tiny-popeditor
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
+    <tiny-popeditor
+      size="mini"
+      v-model="value"
+      :grid-op="gridOp"
+      text-field="name"
+      value-field="id"
+      value-split="@"
+      text-split="@"
+    ></tiny-popeditor>
   </div>
 </template>
 
@@ -114,3 +139,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-popeditor-size .tiny-popeditor {
+  margin-bottom: 8px;
+}
+</style>

package/demos/pc/app/popeditor/suggest-composition-api.vue

@@ -1,5 +1,4 @@
 <template>
-  value值：{{ value }}
   <tiny-popeditor
     v-model="value"
     :show-clear-btn="true"
@@ -10,6 +9,7 @@
     suggest
     :conditions="conditions"
   ></tiny-popeditor>
+  <p>value值：{{ value }}</p>
 </template>
 
 <script setup>

package/demos/pc/app/popeditor/suggest.vue

@@ -1,5 +1,4 @@
 <template>
-  value值：{{ value }}
   <tiny-popeditor
     v-model="value"
     :show-clear-btn="true"
@@ -10,6 +9,7 @@
     suggest
     :conditions="conditions"
   ></tiny-popeditor>
+  <p>value值：{{ value }}</p>
 </template>
 
 <script>

package/demos/pc/app/popeditor/tabindex-composition-api.vue

@@ -118,5 +118,6 @@ const gridOp = ref({
 .demo-popeditor-tabindex .tiny-popeditor {
   width: 250px;
   display: inline-block;
+  margin: 0 12px 12px 0;
 }
 </style>

package/demos/pc/app/popeditor/tabindex.vue

@@ -126,5 +126,6 @@ export default {
 .demo-popeditor-tabindex .tiny-popeditor {
   width: 250px;
   display: inline-block;
+  margin: 0 12px 12px 0;
 }
 </style>

package/demos/pc/app/popeditor/trigger-composition-api.vue

@@ -9,7 +9,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/trigger.vue

@@ -9,7 +9,7 @@
       value-split="@"
       text-split="@"
     ></tiny-popeditor>
-    <div v-if="value">value 值：{{ value }}</div>
+    <p v-if="value">value 值：{{ value }}</p>
   </div>
 </template>
 

package/demos/pc/app/popeditor/webdoc/popeditor.en.md

@@ -1,7 +1,7 @@
 ---
-title: PopEditor pop-up editing
+title: PopEditor
 ---
 
-# PopEditor pop-up editing
+# PopEditor
 
 <div>This component can only select data in the pop-up panel. Data cannot be manually entered. The tree or grid component is displayed in the pop-up panel.</div>