@opentiny/vue-docs 3.17.2 → 3.17.4

package/demos/apis/numeric.js

@@ -72,7 +72,7 @@ export default {
           type: 'string',
           defaultValue: '',
           desc: {
-            'zh-CN': '加减按钮位置，可选值为 <code>right</code>，表示加减按钮均位于最右侧',
+            'zh-CN': '加减按钮位置，可选值为 right，表示加减按钮均位于最右侧',
             'en-US': 'Control button position; The optional value of this attribute is right'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
@@ -145,8 +145,8 @@ export default {
           type: 'string',
           defaultValue: '',
           desc: {
-            'zh-CN': '组件<code>arial-label</code>属性取值',
-            'en-US': 'The value of <code>arial-label</code> attribute'
+            'zh-CN': '组件 arial-label 属性取值',
+            'en-US': 'The value of arial-label attribute'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
           pcDemo: '',
@@ -281,7 +281,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '计数器尺寸，该属性的可选值为 medium | small | mini',
-            'en-US': 'Counter size.The optional values of this attribute are medium | small | mini'
+            'en-US': 'Counter size,The optional values of this attribute are medium | small | mini'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'numeric-size',
@@ -305,11 +305,11 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '是否只能输入 <code>step</code> 的倍数',
+            'zh-CN': '是否只能输入 step 的倍数',
             'en-US': 'Whether to enter only multiples of step'
           },
           mode: ['pc', 'mobile', 'mobile-first'],
-          pcDemo: '',
+          pcDemo: 'step',
           mobileDemo: 'step',
           mfDemo: ''
         },

package/demos/apis/search.js

@@ -62,6 +62,17 @@ export default {
           mode: ['mobile-first'],
           mfDemo: ''
         },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置是否禁用【3.18.0新增】',
+            'en-US': ''
+          },
+          mode: ['pc'],
+          pcDemo: 'slot-prefix'
+        },
         {
           name: 'is-enter-search',
           type: 'boolean',

package/demos/apis/switch.js

@@ -175,6 +175,30 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'custom-open-close',
           mfDemo: ''
+        },
+        {
+          name: 'active-icon',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '开启时开关的图标',
+            'en-US': 'Icon of the switch when turned on'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-open-close-icon',
+          mfDemo: ''
+        },
+        {
+          name: 'inactive-icon',
+          type: '',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '关闭时开关的图标',
+            'en-US': 'Icon of the switch when turned off'
+          },
+          mode: ['pc'],
+          pcDemo: 'custom-open-close-icon',
+          mfDemo: ''
         }
       ]
     }

package/demos/apis/tabs.js

@@ -178,13 +178,11 @@ export default {
           type: "'small' | 'large'",
           defaultValue: '',
           desc: {
-            'zh-CN':
-              '设置 tabs 页签尺寸,该属性可选值为 large 或 small，其中 small 在 tabStyle 为 card 或者 border-card 时生效',
-            'en-US':
-              'Sets the tab size. The value can be large or small. This parameter is valid only when tabStyle is set to card or border-card'
+            'zh-CN': '设置 tabs 页签尺寸,该属性可选值为 large 或 small',
+            'en-US': 'Sets the tab size. The value can be large or small'
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'tab-style-card',
+          pcDemo: 'size',
           mfDemo: ''
         },
         {

package/demos/apis/tree-menu.js

@@ -283,17 +283,6 @@ export default {
           mode: ['pc'],
           pcDemo: 'only-check-children'
         },
-        {
-          name: 'prefix-icon',
-          type: 'Component',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '自定义前置图标',
-            'en-US': 'Customize the front icon'
-          },
-          mode: ['pc'],
-          pcDemo: 'custom-icon'
-        },
         {
           name: 'props',
           typeAnchorName: 'IProps',
@@ -381,8 +370,8 @@ export default {
           type: 'Component',
           defaultValue: '',
           desc: {
-            'zh-CN': '自定义后置图标',
-            'en-US': 'Customize the post icon'
+            'zh-CN': '全局设置带图标树形菜单',
+            'en-US': 'Global settings with icon tree menu'
           },
           mode: ['pc'],
           pcDemo: 'custom-icon'

package/demos/apis/tree-select.js

@@ -6,37 +6,109 @@ export default {
       type: 'component',
       props: [
         {
-          name: 'clearable',
+          name: 'autocomplete',
+          type: 'string',
+          defaultValue: "'off'",
+          desc: {
+            'zh-CN': '输入框的原生 autocomplete 属性',
+            'en-US': 'The native autocomplete attribute of the input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'click-expand',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '点击可展开或收起显示不全的选项。仅用于多选',
+            'en-US': 'Click to expand or collapse options. Only applicable to multiple selections'
+          },
+          pcDemo: 'collapse-tags'
+        },
+        {
+          name: 'collapse-tags',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否将多个标签折叠显示。仅适用多选',
+            'en-US': 'Whether to collapse multiple labels for display. Only applicable to multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'collapse-tags',
+          mfDemo: 'collapse-tags'
+        },
+        {
+          name: 'copyable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用一键复制的功能。点击复制按钮一键复制所有标签的文本内容并以逗号分隔，仅适用于多选',
+            'en-US':
+              'Is the one click copy function enabled. Click the copy button to copy the text content of all labels with one click, separated by commas, only applicable to multiple selections'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
+        {
+          name: 'disabled',
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '是否启用一键清除的功能',
-            'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
+            'zh-CN': '是否禁用',
+            'en-US': 'Is it disabled'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'disabled',
+          mfDemo: 'disabled'
+        },
+        {
+          name: 'dropdown-icon',
+          type: 'Component',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉图标',
+            'en-US': 'Custom drop-down icon'
           },
           mode: ['pc'],
-          pcDemo: 'filter'
+          pcDemo: 'multiple'
         },
         {
-          name: 'filter-method',
-          type: '(query: string) => void',
+          name: 'drop-style',
+          type: 'String',
           defaultValue: '',
           desc: {
-            'zh-CN': '自定义过滤方法',
-            'en-US': 'Custom filtering method'
+            'zh-CN': '自定义下拉选项样式',
+            'en-US': 'Custom drop-down options style'
           },
           mode: ['pc'],
-          pcDemo: 'filter'
+          pcDemo: 'multiple'
         },
         {
-          name: 'filterable',
-          type: 'boolean',
-          defaultValue: 'false',
+          name: 'input-box-type',
+          type: "'input' | 'underline'",
+          defaultValue: "'input'",
+          desc: {
+            'zh-CN': '输入框的显示类型',
+            'en-US': 'Display type of input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'input-box-type',
+          mfDemo: 'input-box-type'
+        },
+        {
+          name: 'max-visible-rows',
+          type: 'number',
+          defaultValue: '1',
           desc: {
-            'zh-CN': '是否可搜索',
-            'en-US': 'Is it searchable'
+            'zh-CN': '多行默认最大显示行数，超出后选项自动隐藏',
+            'en-US':
+              'Default maximum display lines for multiple lines, with automatic hiding option for exceeding lines'
           },
           mode: ['pc'],
-          pcDemo: 'filter'
+          pcDemo: 'collapse-tags'
         },
         {
           name: 'modelValue / v-model',
@@ -60,6 +132,92 @@ export default {
           mode: ['pc'],
           pcDemo: 'multiple'
         },
+        {
+          name: 'name',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框的原生 name 属性',
+            'en-US': 'The native name attribute of the input box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'placeholder',
+          type: 'string',
+          defaultValue: "'请选择'",
+          desc: {
+            'zh-CN': '占位符',
+            'en-US': 'Placeholder'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'native-properties',
+          mfDemo: 'native-properties'
+        },
+        {
+          name: 'placement',
+          typeAnchorName: 'IPlacement',
+          type: 'IPlacement',
+          defaultValue: "'bottom-start'",
+          desc: {
+            'zh-CN': '下拉弹框相对于触发源的弹出位置',
+            'en-US': 'The pop-up position of the pull-down pop-up box relative to the trigger source'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'popper-append-to-body',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否将弹出框的 dom 元素插入至 body 元素',
+            'en-US': 'Whether to insert the dom element of the pop-up box into the body element'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'popper-class',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义下拉框的类名，用于自定义样式',
+            'en-US': 'The class name of the custom dropdown box, used for customizing styles'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'popup-style-position',
+          mfDemo: 'popup-style-position'
+        },
+        {
+          name: 'size',
+          type: "'medium' | 'small' | 'mini'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框尺寸。',
+            'en-US': 'Text box size'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'size',
+          mfDemo: 'size'
+        },
+        {
+          name: 'tag-type',
+          type: "'success' | 'info' | 'warning' | 'danger'",
+          defaultValue: '',
+          desc: {
+            'zh-CN': '标签类型，仅多选适用。使用 aurora 主题时设置该属性为 info',
+            'en-US':
+              'Label type, only applicable for multiple choices. Set this property to info when using the aurora theme'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'tag-type',
+          mfDemo: 'tag-type'
+        },
         {
           name: 'text-field',
           type: 'string',
@@ -71,6 +229,18 @@ export default {
           mode: ['pc'],
           pcDemo: 'map-field'
         },
+        {
+          name: 'text-split',
+          type: 'string',
+          defaultValue: "','",
+          desc: {
+            'zh-CN': '自定义复制文本的分隔符，需结合 copyable 属性使用',
+            'en-US': 'The separator for custom copied text needs to be used in conjunction with the copyable attribute'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'copy-multi',
+          mfDemo: 'copy-multi'
+        },
         {
           name: 'tree-op',
           typeAnchorName: 'ITreeOption',
@@ -112,6 +282,13 @@ interface ITreeNode {
 interface ITreeOption {
   data: ITreeNode[] // 树数据，用法同 Tree
 }
+`
+    },
+    {
+      name: 'IPlacement',
+      type: 'type',
+      code: `
+type IPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
 `
     }
   ]

package/demos/apis/tree.js

@@ -491,6 +491,17 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'edit'
+        },
+        {
+          name: 'highlight-query',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '通过 <code> highlightQuery </code> 属性，是否在匹配的节点中，高亮搜索文字。<br>',
+            'en-US': 'Indicates whether to highlight the search text in the matched node.'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter-view'
         }
       ],
       events: [

package/demos/mobile-first/app/file-upload/file-size-array.vue

@@ -0,0 +1,19 @@
+<template>
+  <tiny-file-upload ref="upload" :action="action" accept=".doc,.docx" :file-list="fileList" :file-size="[100, 200]" />
+</template>
+
+<script>
+import { FileUpload } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFileUpload: FileUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      fileList: []
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/file-upload/file-size.vue

@@ -0,0 +1,76 @@
+<template>
+  <tiny-file-upload ref="upload" :action="action" list-type="text" :file-list="fileList" :file-size="100" />
+</template>
+
+<script>
+import { FileUpload } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyFileUpload: FileUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      fileList: [
+        {
+          docId: 'M1T2A1N548572512085860351',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test1.png',
+          docSize: 100 * 1024,
+          size: 100 * 1024,
+          serverName: 'ShenZhen'
+        },
+        {
+          docId: 'M1T2A1N548572512085860352',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test2.doc',
+          docSize: 17252 * 1024,
+          size: 17252 * 1024,
+          serverName: 'ShenZhen'
+        },
+        {
+          docId: 'M1T2A1N548572512085860353',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test3.png',
+          docSize: 200 * 1024,
+          size: 200 * 1024,
+          serverName: 'ShenZhen',
+          status: 'uploading',
+          percentage: 30
+        },
+        {
+          docId: 'M1T2A1N548572512085860353',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test4.doc',
+          docSize: 17252 * 1024,
+          size: 17252 * 1024,
+          serverName: 'ShenZhen',
+          status: 'fail',
+          percentage: 30
+        },
+        {
+          docId: 'M1T2A1N548572512085860353',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: 'test5超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长.doc',
+          docSize: 17252 * 1024,
+          size: 17252 * 1024,
+          serverName: 'ShenZhen'
+        },
+        {
+          docId: 'M1T2A1N548572512085860353',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: '没有文件大小.doc',
+          serverName: 'ShenZhen'
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/file-upload/webdoc/file-upload.js

@@ -38,6 +38,30 @@ export default {
       },
       codeFiles: ['file-list.vue']
     },
+    {
+      demoId: 'file-size',
+      name: {
+        'zh-CN': '上传的文件大小限制',
+        'en-US': 'Uploaded file size limit'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>file-size</code> 配置上传文件的大小。<p>',
+        'en-US': '<p>Use <code>file-size</code> to configure the size of the uploaded file.</p>'
+      },
+      codeFiles: ['file-size.vue']
+    },
+    {
+      demoId: 'file-size-array',
+      name: {
+        'zh-CN': '上传的文件大小范围',
+        'en-US': 'Uploaded file size range'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>file-size</code> 配置为数组类型限制上传文件的大小范围。<p>',
+        'en-US': '<p>Set <code>file-size</code> to an array to limit the size of the file to be uploaded.</p>'
+      },
+      codeFiles: ['file-size-array.vue']
+    },
     {
       demoId: 'show-title',
       name: {

package/demos/mobile-first/app/grid/basic-usage.vue

@@ -5,6 +5,7 @@
       <tiny-radio v-model="viewType" label="card">卡片视图</tiny-radio>
       <tiny-radio v-model="viewType" label="list">列表视图</tiny-radio>
       <tiny-radio v-model="viewType" label="gantt">甘特视图</tiny-radio>
+      <tiny-radio v-model="viewType" label="custom">custom视图</tiny-radio>
     </div>
     <tiny-grid
       highlight-current-row
@@ -68,7 +69,10 @@
         </div>
       </template>
       <template #gantt="{ rows }">
-        <div class="gantt-container">{{ rows.length }}</div>
+        <div class="gantt-container">gantt视图，表格行数{{ rows.length }}</div>
+      </template>
+      <template #custom="{ rows }">
+        <div class="custom-container">custom视图，表格行数{{ rows.length }}</div>
       </template>
     </tiny-grid>
   </div>