@opentiny/vue-docs 3.16.2 → 3.17.0

package/demos/apis/modal.js

@@ -18,7 +18,7 @@ export default {
         },
         {
           name: 'cancel-btn-props',
-          typeAnchorName: 'button#API',
+          linkTo: 'button#API',
           type: 'Button.props',
           defaultValue: '{}',
           desc: {
@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'confirm-btn-props',
-          typeAnchorName: 'button#API',
+          linkTo: 'button#API',
           type: 'Button.props',
           defaultValue: '{}',
           desc: {

package/demos/apis/multi-select.js

@@ -161,6 +161,7 @@ export default {
     {
       name: 'IMultiSelectMenu',
       type: 'interface',
+      depTypes: ['IMultiSelectOption'],
       code: `
 interface IMultiSelectMenu {
   title: string, // 菜单项标题

package/demos/apis/pop-upload.js

@@ -29,7 +29,7 @@ export default {
         },
         {
           name: 'before-remove',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'before-upload',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -227,7 +227,7 @@ export default {
       events: [
         {
           name: 'error',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -239,7 +239,7 @@ export default {
         },
         {
           name: 'exceed',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(files: File | File[], fileList: IFile[]) => void',
           defaultValue: '',
           desc: {
@@ -251,7 +251,7 @@ export default {
         },
         {
           name: 'progress',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile) => void',
           defaultValue: '',
           desc: {
@@ -263,7 +263,7 @@ export default {
         },
         {
           name: 'remove',
-          typeAnchorName: 'file-upload#IFile',
+          linkTo: 'file-upload#IFile',
           type: '(file: IFile, fileList: IFile[]) => void',
           defaultValue: '',
           desc: {
@@ -276,7 +276,7 @@ export default {
         },
         {
           name: 'success',
-          typeAnchorName: 'IFile',
+          linkTo: 'file-upload#IFile',
           type: '(res: ProgressEvent, file: IFile) => void',
           defaultValue: '',
           desc: {

package/demos/apis/popconfirm.js

@@ -43,7 +43,7 @@ export default {
         },
         {
           name: 'placement',
-          typeAnchorName: 'popover#IPopperPlacement',
+          linkTo: 'popover#IPopperPlacement',
           type: 'IPopperPlacement',
           defaultValue: "'top'",
           desc: {

package/demos/apis/popeditor.js

@@ -96,7 +96,7 @@ export default {
         },
         {
           name: 'grid-op',
-          typeAnchorName: 'grid#API',
+          linkTo: 'grid#API',
           type: `InstanceType&#60typeof TinyGrid&#62['$props']`,
           defaultValue: '',
           desc: {
@@ -141,8 +141,8 @@ export default {
         },
         {
           name: 'pager-op',
-          typeAnchorName: 'pager#API',
-          type: `InstanceType&#60typeof TinyPager&#62['$props']`,
+          linkTo: 'pager#API',
+          type: `InstanceType<typeof TinyPager>['$props']`,
           defaultValue: '',
           desc: {
             'zh-CN': '设置分页配置',
@@ -221,7 +221,7 @@ export default {
         },
         {
           name: 'selected-box-op',
-          typeAnchorName: 'dialog-select#ISelectedBoxOption',
+          linkTo: 'dialog-select#ISelectedBoxOption',
           type: 'ISelectedBoxOption',
           defaultValue: '',
           desc: {

package/demos/apis/popover.js

@@ -169,7 +169,8 @@ export default {
         },
         {
           name: 'popper-options',
-          type: 'object',
+          type: 'IPopperOption',
+          typeAnchorName: 'IPopperOption',
           defaultValue: '{}',
           desc: {
             'zh-CN': '弹出层参数',
@@ -283,7 +284,7 @@ export default {
       events: [
         {
           name: 'after-enter',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '进入的动画播放完毕后触发',
@@ -296,7 +297,7 @@ export default {
         },
         {
           name: 'after-leave',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '离开的动画播放完毕后触发',
@@ -309,7 +310,7 @@ export default {
         },
         {
           name: 'hide',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '隐藏时触发',
@@ -322,7 +323,7 @@ export default {
         },
         {
           name: 'show',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '显示时触发',
@@ -376,6 +377,8 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
   updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
   boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
 }
       `
     },

package/demos/apis/qr-code.js

@@ -86,7 +86,7 @@ export default {
       events: [
         {
           name: 'change',
-          type: '()=> void',
+          type: '() => void',
           desc: {
             'zh-CN': '二维码发生变化后的回调',
             'en-US': 'chang callback'

package/demos/apis/select.js

@@ -18,6 +18,19 @@ export default {
           pcDemo: 'all-text',
           mfDemo: 'all-text'
         },
+        {
+          name: 'show-all-text-tag',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN':
+              '指定多选模式全选后，在输入框中，是否只显示 all-text 指定的Tag。 默认值为 <code>false</code>，所有选项循环显示在输入框。',
+            'en-US':
+              'Specifies whether only the tag specified by all-text is displayed in the text box after the multi-select mode is specified. The default value is <code>false</code>. All options are displayed in the text box cyclically.'
+          },
+          mode: ['pc'],
+          pcDemo: 'all-text'
+        },
         {
           name: 'allow-copy',
           type: 'boolean',
@@ -625,12 +638,25 @@ export default {
           defaultValue: 'false',
           desc: {
             'zh-CN':
-              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性，同时设置只',
+              '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于<code>show-proportion</code> 属性。',
             'en-US':
               'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
           },
           mode: ['pc'],
           pcDemo: 'multiple'
+        },
+        {
+          name: 'init-label',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN':
+              '通过 <code>init-label</code> 属性设置远程搜索或者嵌套树懒加载数据未获取到时显示的初始化 <code>label </code>值。',
+            'en-US':
+              'Use the <code>init-label</code> attribute to set the initial <code>label </code> value displayed when remote search or nested sloth loading data is not obtained.'
+          },
+          mode: ['pc'],
+          pcDemo: 'init-label'
         }
       ],
       events: [
@@ -910,8 +936,8 @@ interface ICacheOp {
   highlightClass?: string // 个性化高亮 class 名称，默认：memorize-highlight
   highlightNum?: number // 高亮个性化的条数,默认：Infinity
   cacheNum?: number // 存储个性化的条数,默认：Infinity
-  serialize?: ()=> string  // 本地存储序列化方法,默认：JSON.stringify
-  deserialize?: ()=> ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
+  serialize?: () => string  // 本地存储序列化方法,默认：JSON.stringify
+  deserialize?: () => ICacheItem[] // 本地存储序反列化方法，默认：JSON.parse
 }        
 `
     },

package/demos/apis/split.js

@@ -87,13 +87,34 @@ export default {
           pcDemo: 'split-threshold'
         },
         {
-          mode: []
+          name: 'border',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '是否显示边框',
+            'en-US': 'Indicates whether to display the border.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
+        },
+        {
+          name: 'right-bottom-value',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN':
+              '默认情况下，v-model的值为左/上面板的位置。 当设置right-bottom-value 为true时，指明 v-model的值为 右/下面板的位置。 ',
+            'en-US':
+              'By default, the value of v-model is the position of the left/top panel. When right-bottom-value is set to true, the value of v-model is the position of the right/lower panel.'
+          },
+          mode: ['pc'],
+          pcDemo: ''
         }
       ],
       events: [
         {
           name: 'left-top-click',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '左箭头收起时触发',
@@ -104,7 +125,7 @@ export default {
         },
         {
           name: 'moveend',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '拖拽结束的事件',
@@ -115,7 +136,7 @@ export default {
         },
         {
           name: 'movestart',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '拖拽开始的事件',

package/demos/apis/steps.js

@@ -225,6 +225,7 @@ export default {
     {
       name: 'IStepsItem',
       type: 'interface',
+      depTypes: ['IStepsStatus'],
       code: `
 interface IStepsItem {
   // 节点数据

package/demos/apis/tag-group.js

@@ -70,6 +70,7 @@ export default {
     },
     {
       name: 'ITagGroupItemClick',
+      depTypes: ['ITagGroupDataItem'],
       type: 'type',
       code: `type ITagGroupItemClick = (item: ITagGroupDataItem, index: number, event: Event) => void`
     }

package/demos/apis/time-line.js

@@ -146,8 +146,9 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '是否显示底部分割线，适用于横向时间线',
-            'en-US': 'Whether to display the bottom separator line of horizontal timeline'
+            'zh-CN': '是否显示底部指标三角，适用于横向时间线',
+            'en-US':
+              'Indicates whether to display the bottom indicator triangle, which is applicable to the horizontal timeline.'
           },
           mode: ['pc'],
           pcDemo: 'show-divider'

package/demos/apis/tooltip.js

@@ -321,6 +321,8 @@ interface IPopperOption {
   removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
   updateHiddenPopperOnScroll: boolean  // 滚动过程中是否更新隐藏的弹出层位置
   boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+  ignoreBoundaries: boolean  // 忽略边界判断，弹出的位置始终是设置的 placement 值
+  scrollParent:  HTMLElement  // 指定滚动的父节点，优化级最高。 默认为null
 }
       `
     },

package/demos/apis/transfer.js

@@ -19,7 +19,7 @@ export default {
         },
         {
           name: 'columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -102,7 +102,7 @@ export default {
         },
         {
           name: 'left-columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -173,7 +173,7 @@ export default {
         },
         {
           name: 'right-columns',
-          typeAnchorName: 'grid#IColumnConfig',
+          linkTo: 'grid#IColumnConfig',
           type: 'IColumnConfig',
           defaultValue: '',
           desc: {
@@ -267,7 +267,7 @@ export default {
         },
         {
           name: 'tree-op',
-          typeAnchorName: 'tree#API',
+          linkTo: 'tree#API',
           type: 'Tree props',
           defaultValue: '',
           desc: {

package/demos/apis/tree-menu.js

@@ -397,6 +397,17 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'text-wrap'
+        },
+        {
+          name: 'clearable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '搜索框是否可清空',
+            'en-US': 'Can the search box be cleared'
+          },
+          mode: ['pc'],
+          pcDemo: 'clearable'
         }
       ],
       events: [

package/demos/apis/tree-select.js

@@ -0,0 +1,118 @@
+export default {
+  mode: ['pc'],
+  apis: [
+    {
+      name: 'tree-select',
+      type: 'component',
+      props: [
+        {
+          name: 'clearable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否启用一键清除的功能',
+            'en-US': 'Whether to display the one click clear button, only applicable to radio selection'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter'
+        },
+        {
+          name: 'filter-method',
+          type: '(query: string) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义过滤方法',
+            'en-US': 'Custom filtering method'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter'
+        },
+        {
+          name: 'filterable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否可搜索',
+            'en-US': 'Is it searchable'
+          },
+          mode: ['pc'],
+          pcDemo: 'filter'
+        },
+        {
+          name: 'modelValue / v-model',
+          type: 'string | number | Array<string|number>',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': 'Bind value'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'multiple',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否允许选择多个选项',
+            'en-US': 'Allow multiple options to be selected'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple'
+        },
+        {
+          name: 'text-field',
+          type: 'string',
+          defaultValue: "'label'",
+          desc: {
+            'zh-CN': '显示值字段',
+            'en-US': 'Show Value Fields'
+          },
+          mode: ['pc'],
+          pcDemo: 'map-field'
+        },
+        {
+          name: 'tree-op',
+          typeAnchorName: 'ITreeOption',
+          type: 'ITreeOption',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '下拉树时，内置树组件的配置，用法同 Tree 组件。',
+            'en-US':
+              'When pulling down a tree, the configuration of the built-in tree component is the same as that of the Tree component. To be used in conjunction with the render type attribute'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'value-field',
+          type: 'string',
+          defaultValue: "'value'",
+          desc: {
+            'zh-CN': '绑定值字段',
+            'en-US': 'Bind Value Field'
+          },
+          mode: ['pc'],
+          pcDemo: 'map-field'
+        }
+      ]
+    }
+  ],
+  types: [
+    {
+      name: 'ITreeOption',
+      type: 'interface',
+      code: `
+interface ITreeNode {
+  label: string         // 默认树节点的文本字段
+  id: number|string     // 树节点唯一标识
+  children: ITreeNode[] // 子节点
+}
+
+interface ITreeOption {
+  data: ITreeNode[] // 树数据，用法同 Tree
+}
+`
+    }
+  ]
+}

package/demos/apis/tree.js

@@ -478,6 +478,19 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'filter-view'
+        },
+        {
+          name: 'edit-config',
+          typeAnchorName: 'ITreeEditConfig',
+          type: 'ITreeEditConfig',
+          defaultValue: '{}',
+          desc: {
+            'zh-CN': '用于编辑模式下参数配置,指示新增节点的 id ,是否显示 id 重复的警告等',
+            'en-US':
+              'Used for parameter configuration in editing mode, indicating the ID of a new node and whether to display a warning indicating duplicate IDs.'
+          },
+          mode: ['pc'],
+          pcDemo: 'edit'
         }
       ],
       events: [
@@ -533,7 +546,7 @@ export default {
         },
         {
           name: 'close-edit',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '关闭编辑的事件',
@@ -728,7 +741,7 @@ export default {
         },
         {
           name: 'open-edit',
-          type: '()=>void',
+          type: '() =>void',
           defaultValue: '',
           desc: {
             'zh-CN': '进入编辑的事件',
@@ -1193,5 +1206,19 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'ITreeEditConfig',
+      type: 'type',
+      code: `
+interface ITreeEditConfig{
+  // 生成新节点的id
+  initNodeIdMethod: (node) => string;
+  // 新节点id与其它id重复时，是否在控制台显示告警。
+  noWarning: boolean;
+}
+      `
+    }
   ]
 }

package/demos/mobile-first/app/date-picker/about-clear.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <p>默认可清除</p>
+    <tiny-date-picker v-model="value1"></tiny-date-picker>
+    <br />
+    <p>不可清除：</p>
+    <tiny-date-picker v-model="value2" :clearable="false"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value1: new Date(),
+      value2: new Date()
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/date-picker/basic-usage.vue

@@ -0,0 +1,20 @@
+<template>
+  <div style="width: 270px">
+    <tiny-date-picker v-model="value" type="date" title="日期选择"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: new Date()
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/date-picker/date-range.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <p>日期值：{{ value }}</p>
+    <tiny-date-picker v-model="value" type="daterange" :picker-options="onPickOptions"></tiny-date-picker>
+  </div>
+</template>
+
+<script>
+import { DatePicker, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDatePicker: DatePicker
+  },
+  data() {
+    return {
+      value: [new Date(2022, 10, 12), new Date(2022, 11, 25)],
+      onPickOptions: {
+        onPick: (val) => {
+          if (val.maxDate) {
+            Modal.message({
+              message: '当前获取的值 maxDate' + val.maxDate,
+              status: 'info'
+            })
+            Modal.message({
+              message: '当前获取的值 minDate：' + val.minDate,
+              status: 'info'
+            })
+          }
+        }
+      }
+    }
+  }
+}
+</script>