docs(site/popeditor): improve documentation (#1438)

examples/sites/demos/apis/popeditor.js

@@ -96,8 +96,8 @@ export default {
         },
         {
           name: 'grid-op',
-          typeAnchorName: 'grid#IGridOp',
-          type: 'IGridOp',
+          typeAnchorName: 'grid#API',
+          type: `InstanceType&#60typeof TinyGrid&#62['$props']`,
           defaultValue: '',
           desc: {
             'zh-CN': '设置弹出面板中表格组件的配置信息',
@@ -141,8 +141,8 @@ export default {
         },
         {
           name: 'pager-op',
-          typeAnchorName: 'pager#IPagerOp',
-          type: 'IPagerOp',
+          typeAnchorName: 'pager#API',
+          type: `InstanceType&#60typeof TinyPager&#62['$props']`,
           defaultValue: '',
           desc: {
             'zh-CN': '设置分页配置',
@@ -165,7 +165,7 @@ export default {
         {
           name: 'popseletor',
           type: 'string',
-          defaultValue: 'grid',
+          defaultValue: `'grid'`,
           desc: {
             'zh-CN': '设置弹出面板中可显示的树或者表格组件',
             'en-US': 'Set the tree or table components that can be displayed in the pop-up panel.'
@@ -198,7 +198,8 @@ export default {
         },
         {
           name: 'remote-search',
-          type: '({ page, conditions }) => void',
+          type: 'IRemoteSearch',
+          typeAnchorName: 'IRemoteSearch',
           defaultValue: '',
           desc: {
             'zh-CN': '配置远程搜索',
@@ -220,8 +221,8 @@ export default {
         },
         {
           name: 'selected-box-op',
-          typeAnchorName: 'ISelectedBoxOp',
-          type: 'ISelectedBoxOp',
+          typeAnchorName: 'dialog-select#ISelectedBoxOption',
+          type: 'ISelectedBoxOption',
           defaultValue: '',
           desc: {
             'zh-CN': '通过属性 selected-box-op 指定 SelectedBox 组件配置，可以把已选表格显示为已选栏',
@@ -301,7 +302,7 @@ export default {
         {
           name: 'tabindex',
           type: 'string',
-          defaultValue: '1',
+          defaultValue: `'1'`,
           desc: {
             'zh-CN': '设置通过 Tab 键获焦及获焦顺序（readonly 属性设置为 false 时有效）',
             'en-US':
@@ -313,7 +314,7 @@ export default {
         {
           name: 'text-field',
           type: 'string',
-          defaultValue: 'label',
+          defaultValue: `'label'`,
           desc: {
             'zh-CN': '设置输入框中显示文本的字段，提交数据时，不提交该显示文本',
             'en-US': 'Set the text field in the text box. When data is submitted, the text is not submitted.'
@@ -324,7 +325,7 @@ export default {
         {
           name: 'text-split',
           type: 'string',
-          defaultValue: '/',
+          defaultValue: `'/'`,
           desc: {
             'zh-CN': '在多选的情况下，设置输入框中要显示多个数据时的分隔符',
             'en-US': 'Separator for displaying multiple records in the text box when multiple records are selected.'
@@ -359,7 +360,7 @@ export default {
         {
           name: 'value-field',
           type: 'string',
-          defaultValue: 'id',
+          defaultValue: `'id'`,
           desc: {
             'zh-CN': '设置输入框要提交数据的字段',
             'en-US': 'Set the field to which data is to be submitted in the text box.'
@@ -370,7 +371,7 @@ export default {
         {
           name: 'value-split',
           type: 'string',
-          defaultValue: ';',
+          defaultValue: `';'`,
           desc: {
             'zh-CN': '在多选的情况下，设置输入框要提交多个数据时的分隔符',
             'en-US':
@@ -395,7 +396,7 @@ export default {
       events: [
         {
           name: 'change',
-          type: '(commitValue, selectedDatas) => void',
+          type: '(commitValue: number, selectedDatas: Object) => void',
           defaultValue: '',
           desc: {
             'zh-CN':
@@ -476,6 +477,11 @@ interface IConditions {
   label: string
 }
       `
+    },
+    {
+      name: 'IRemoteSearch',
+      type: 'type',
+      code: `type IRemoteSearch = ({ page: { currentPage: number, pageSize: number }, conditions: { [K in IConditions['field']]: string } }) => void`
     }
   ]
 }

examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue

@@ -160,7 +160,6 @@ const rules = ref({
     { required: true, message: '必填', trigger: 'blur' },
     { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
   ],
-  datepicker: { type: 'date' },
   email: { type: 'email' }
 })
 const ruleFormRef = ref()

examples/sites/demos/pc/app/popeditor/condition-form.vue

@@ -162,7 +162,6 @@ export default {
           { required: true, message: '必填', trigger: 'blur' },
           { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
         ],
-        datepicker: { type: 'date' },
         email: { type: 'email' }
       }
     }

examples/sites/demos/pc/app/popeditor/events-composition-api.vue

@@ -124,10 +124,16 @@ function handlePageChange(val) {
 }
 
 function handlePopup() {
-  Modal.message('popup 弹窗打开事件')
+  Modal.message({
+    message: 'popup 弹窗打开事件',
+    status: 'info'
+  })
 }
 
 function handleClose() {
-  Modal.message('close 弹窗关闭事件')
+  Modal.message({
+    message: 'close 弹窗关闭事件',
+    status: 'info'
+  })
 }
 </script>

examples/sites/demos/pc/app/popeditor/events.vue

@@ -130,10 +130,16 @@ export default {
       this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
     },
     handlePopup() {
-      Modal.message('popup 弹窗打开事件')
+      Modal.message({
+        message: 'popup 弹窗打开事件',
+        status: 'info'
+      })
     },
     handleClose() {
-      Modal.message('close 弹窗关闭事件')
+      Modal.message({
+        message: 'close 弹窗关闭事件',
+        status: 'info'
+      })
     }
   }
 }

examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js

@@ -31,7 +31,7 @@ export default {
     {
       demoId: 'condition-layout',
       name: {
-        'zh-CN': '布局与配置',
+        'zh-CN': '布局',
         'en-US': 'Layout and Configuration'
       },
       desc: {
@@ -115,7 +115,7 @@ export default {
         'zh-CN':
           '<p>grid-op 当 popseletor 为 grid 时生效，目前支持配置 columns 表格列 和 data 数据源，详细配置项参考 Grid 表格组件，需同时配置 textField、valueField 字段。</p>',
         'en-US':
-          '<p>gridOp: This parameter is valid only when popseletor is set to grid. Currently, columns and data data sources can be configured. For details about the configuration items, see the Grid table component. The textField and valueField fields must be configured at the same time. </p>'
+          '<p>grid-op: This parameter is valid only when popseletor is set to grid. Currently, columns and data data sources can be configured. For details about the configuration items, see the Grid table component. The textField and valueField fields must be configured at the same time. </p>'
       },
       codeFiles: ['grid.vue']
     },
@@ -206,7 +206,7 @@ export default {
         'en-US': 'Reset'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>readonly</code> 属性设置为是否只读。</p>',
+        'zh-CN': '<p>通过 <code>readonly</code> 属性设置为是否禁用。</p>',
         'en-US': '<p>Use the <code>before-reset</code> attribute to set the hook function before reset. </p>'
       },
       codeFiles: ['readonly.vue']
@@ -309,7 +309,7 @@ export default {
       desc: {
         'zh-CN': '<p>通过 <code>value-field</code> 属性设置组件提交给后台的字段。</p>',
         'en-US':
-          'The <p><code>showPager</code> attribute is valid only when <code>popseletor</code> is set to <code>grid</code>. The default value is <code>false</code>. Pagination is not enabled. If this parameter is set to <code>true</code>, you need to configure the <code>pagerOp</code> attribute. In addition, you need to listen to the <code>page-change</code> event to change the <code>data</code> data source</p>\n of the <code>gridOp</code>'
+          'The <p><code>showPager</code> attribute is valid only when <code>popseletor</code> is set to <code>grid</code>. The default value is <code>false</code>. Pagination is not enabled. If this parameter is set to <code>true</code>, you need to configure the <code>pager-op</code> attribute. In addition, you need to listen to the <code>page-change</code> event to change the <code>data</code> data source</p>\n of the <code>grid-op</code>'
       },
       codeFiles: ['title.vue']
     },
@@ -348,7 +348,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p><code>showPager</code> 属性只有当 <code>popseletor</code> 为 <code>grid</code> 时才能生效，默认值为 <code>false</code> 不启用分页，配置为 <code>true</code> 后还需配置 <code>pagerOp</code> 属性；并且需要监听 <code>page-change</code> 事件改变 <code>gridOp</code> 的 <code>data</code> 数据源。</p>',
+          '<p><code>showPager</code> 属性只有当 <code>popseletor</code> 为 <code>grid</code> 时才能生效，默认值为 <code>false</code> 不启用分页，配置为 <code>true</code> 后还需配置 <code>pager-op</code> 属性；并且需要监听 <code>page-change</code> 事件改变 <code>grid-op</code> 的 <code>data</code> 数据源。</p>',
         'en-US':
           '<p>Enable the tree mode through the <code>popseletor</code> attribute. Then the <code>tree-op</code> attribute is the <code>op configuration mode</code> of the <code>Tree</code> component. </p>'
       },
@@ -376,7 +376,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>popseletor</code> 属性开启树模式，然后 <code>tree-op</code> 属性是 <code>Tree</code> 组件的 <code>op 配置方式</code>。</p>',
+          '<p>通过 <code>popseletor</code> 属性开启树模式，然后 <code>tree-op</code> 属性是 <code>Tree</code> 组件的 <code>op</code>配置方式。</p>',
         'en-US':
           '<p>Configure the <code>showOverflow</code> attribute on the data column to set the display and hiding of the data when the data exceeds the column width. Values can be of type boolean or string, with three values to choose from, as shown below. By default, all content is displayed in a new line. </p>\n<div class="tip custom-block"><p class="custom-block-title"> optional value description</p>\n<p>tooltip: The extra part is displayed...., and all information is displayed on the left or right. \ntitle: The value is the same as the title attribute of the native tag. \nellipsis: \'...\' is displayed, and no message is displayed. \ntrue: If the value is true, the effect is the same as that of the tooltip. </p>\n</div>'
       },
@@ -390,7 +390,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>popseletor</code> 属性开启树模式，然后 <code>tree-op</code> 属性是 <code>Tree</code> 组件的 <code>op 配置方式</code>。</p>',
+          '<p>通过 <code>popseletor</code> 属性开启树模式，然后 <code>tree-op</code> 属性是 <code>Tree</code> 组件的 <code>op</code>配置方式。</p>',
         'en-US':
           '<p>When a single option is selected, you can only click the option button to select it by default. You can also set <code>trigger</code> to <code>row</code> to select any position in the row. Alternatively, set <code>trigger</code> to <code>cell</code> and click any position in the Operation column to select it. </p>'
       },
@@ -418,7 +418,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          "\n          <p>在数据的列上配置 <code>showOverflow</code> 属性用于设置数据超出列宽时的显示和隐藏。值的类型可以为 boolean 和 string，有三个值可以选择，如下所示。默认为换行显示全部内容。</p>\n          <div class=\"tip custom-block\">\n            <p class=\"custom-block-title\">可选值说明</p>\n            <p>'tooltip'：内容超出部分显示 ...，左侧/右侧弹出提示层显示全部信息。\n            <p>'title'：和原生标签的 title 属性一致。</p>\n            <p>'ellipsis'：内容超出部分显示 ...，没有提示。</p>\n            <p>boolean：为 true 时，效果和 'tooltip' 一致。</p>\n          </div>\n        ",
+          "<p>在数据列上配置 <code>showOverflow</code> 属性用于设置数据超出列宽时的显示和隐藏。值的类型可以为 boolean 和 string，有三个值可以选择，如下所示。默认为换行显示全部内容。</p>\n          <div class=\"tip custom-block\">\n            <p class=\"custom-block-title\">可选值说明</p>\n            <p>'tooltip'：内容超出部分显示 ...，左侧/右侧弹出提示层显示全部信息。\n            <p>'title'：和原生标签的 title 属性一致。</p>\n            <p>'ellipsis'：内容超出部分显示 ...，没有提示。</p>\n            <p>boolean：为 true 时，效果和 'tooltip' 一致。</p>\n          </div>\n        ",
         'en-US':
           '<p>Configure the <code>auto-lookup</code> to false, set initialization to not request data, or call this $ref.popuptor.handleSearch() Proactively calls the request method</p>'
       },
@@ -441,7 +441,7 @@ export default {
     {
       demoId: 'show-history',
       name: {
-        'zh-CN': '设置历史记录标签页',
+        'zh-CN': '历史记录标签页',
         'en-US': ''
       },
       desc: {