@opentiny/vue-docs 3.20.6 → 3.20.7-beta.0

package/cp-component-md.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+for file in ./examples/sites/dist/\@demos/app/*
+do
+  component=${file##*/}
+  cp ./examples/sites/dist/\@demos/app/${component}/webdoc/*.md ./_site/\@demos/app/${component}/webdoc
+done

package/demos/apis/actionsheet.js

@@ -37,6 +37,17 @@ export default {
           },
           mode: ['mobile'],
           mobileDemo: 'ellipsis'
+        },
+        {
+          name: 'content-position',
+          type: 'Boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否显示action插槽',
+            'en-US': 'Whether to display action slots '
+          },
+          mode: ['mobile'],
+          mobileDemo: 'slot-action'
         }
       ],
       events: [
@@ -70,12 +81,22 @@ export default {
           name: 'action',
           defaultValue: '',
           desc: {
-            'zh-CN': '<p>自定义操作项内容</p>',
+            'zh-CN': '<p>action插槽</p>',
             'en-US': 'Click'
           },
           mode: ['mobile'],
           mobileDemo: 'slot-action'
         },
+        {
+          name: 'item',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '<p>item插槽</p>',
+            'en-US': 'Click'
+          },
+          mode: ['mobile'],
+          mobileDemo: 'slot-item'
+        },
         {
           mode: []
         }

package/demos/apis/dropdown.js

@@ -371,7 +371,10 @@ export default {
             'en-US': 'Menu pop-up location '
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          pcDemo: 'placement',
+          meta: {
+            experimental: '3.21.0'
+          }
         },
         {
           name: 'popper-class',
@@ -551,7 +554,7 @@ type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'i
       name: 'IPlacementType',
       type: 'type',
       code: `        
-type IPlacementType =  'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+type IPlacementType =  'bottom-start' | 'bottom-end'
 `
     }
   ]

package/demos/apis/file-upload.js

@@ -304,8 +304,8 @@ export default {
         },
         {
           name: 'http-request',
-          type: '(file: IFile) => Promise<any>',
-          typeAnchorName: 'IFile',
+          type: '(file: ICustomParam) => Promise<any>',
+          typeAnchorName: 'ICustomParam',
           defaultValue: '',
           desc: {
             'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现; 由于 TinyVue 官网为 Mock 上传不能执行上传',
@@ -1059,6 +1059,22 @@ interface IFile {
 }
       `
     },
+    {
+      name: 'ICustomParam',
+      type: 'interface',
+      code: `
+interface ICustomParam {
+  action: string
+  data: IData // 上传时附带的额外参数
+  file: IFile
+  filename: string
+  headers: object // 头部请求信息
+  onError: (error: any) => void // 上传失败回调函数，自定义入参
+  onProgress: (event: any) => void // 上传中回调函数
+  onSuccess: (res: any) => void // 上传成功回调函数
+  withCredentials: boolean // 是否支持发送 cookie 凭证信息
+}`
+    },
     {
       name: 'IEncryptConfig',
       type: 'interface',

package/demos/apis/fluent-editor.js

@@ -5,6 +5,19 @@ export default {
       name: 'fluent-editor',
       type: 'component',
       props: [
+        {
+          name: 'before-editor-init',
+          type: '(FluentEditor) => void',
+          defaultValue: '',
+          meta: {
+            stable: '3.21.0'
+          },
+          desc: {
+            'zh-CN': 'FluentEditor 初始化之前执行的钩子，用于注册自定义 FluentEditor 模块和格式。',
+            'en-US': ''
+          },
+          pcDemo: 'before-editor-init'
+        },
         {
           name: 'data-type',
           type: 'boolean',
@@ -64,7 +77,7 @@ export default {
         {
           name: 'options',
           type: 'object',
-          defaultValue: "",
+          defaultValue: '',
           desc: {
             'zh-CN': '编辑器配置项，参考 Quill 文档：https://quilljs.com/docs/configuration#options',
             'en-US': ''
@@ -75,7 +88,7 @@ export default {
         {
           name: 'zIndex',
           type: 'number',
-          defaultValue: "",
+          defaultValue: '',
           desc: {
             'zh-CN': '编辑器的 z-index',
             'en-US': ''
@@ -105,6 +118,6 @@ interface IImageUploadOptions {
   fail: (serverError: string) => void // 上传失败回调信息
 }
       `
-    },
+    }
   ]
 }

package/demos/apis/select.js

@@ -657,6 +657,30 @@ export default {
           },
           mode: ['pc'],
           pcDemo: 'init-label'
+        },
+        {
+          name: 'display-only',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '设置组件只显示文字。在Form中使用时，会默认继承上级的<code>display-only</code>的值。',
+            'en-US':
+              'Sets the widget to display only text.When used in a form, the value of <code>display-only</code> is inherited by default.'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple-mix'
+        },
+        {
+          name: 'hover-expand',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '多选时，鼠标移入触发标签的自动展开',
+            'en-US':
+              'When multiple selections are selected, move the cursor to trigger the automatic expansion of the label.'
+          },
+          mode: ['pc'],
+          pcDemo: 'multiple-mix'
         }
       ],
       events: [

package/demos/apis/tree.js

@@ -132,11 +132,12 @@ export default {
         },
         {
           name: 'default-expanded-keys',
-          type: 'boolean',
-          defaultValue: 'false',
+          type: 'string[]',
+          defaultValue: '[]',
           desc: {
-            'zh-CN': '默认展开节点的keys',
-            'en-US': 'The keys of the node are expanded by default'
+            'zh-CN': '默认展开节点的keys。当属性变化时，会自动收起全部并重新展开指定的数据项。 ',
+            'en-US':
+              'The keys of the node are expanded by default.When the property changes, it automatically collapses all and reexpands the specified data item.'
           },
           mode: ['pc'],
           pcDemo: 'expand-control'

package/demos/mobile/app/actionsheet/clickfn.vue

@@ -11,7 +11,6 @@
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
       @click="clickItem"
-      content-position
     ></tiny-action-sheet>
   </div>
 </template>

package/demos/mobile/app/actionsheet/ellipsis.vue

@@ -11,7 +11,6 @@
       ellipsis
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
-      content-position
     ></tiny-action-sheet>
   </div>
 </template>

package/demos/mobile/app/actionsheet/slot-action.vue

@@ -12,7 +12,13 @@
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
       content-position
-    ></tiny-action-sheet>
+    >
+      <template #item="data">
+        <div>
+          {{ data.item.label }}
+        </div>
+      </template>
+    </tiny-action-sheet>
   </div>
 </template>
 

package/demos/mobile/app/actionsheet/slot-item.vue

@@ -10,7 +10,6 @@
       :menus="menus"
       :visible="boxVisibility"
       @update:visible="boxVisibility = $event"
-      content-position
     >
       <template #item="data">
         <div>

package/demos/mobile/app/actionsheet/webdoc/actionsheet.js

@@ -29,7 +29,7 @@ export default {
     {
       demoId: 'slot-item',
       name: {
-        'zh-CN': '插槽',
+        'zh-CN': '数据插槽',
         'en-US': 'events'
       },
       desc: {
@@ -41,7 +41,7 @@ export default {
     {
       demoId: 'slot-action',
       name: {
-        'zh-CN': '插槽',
+        'zh-CN': 'action插槽',
         'en-US': 'events'
       },
       desc: {

package/demos/mobile/app/checkbox/checkbox-group.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="checkbox-wrap">
     <tiny-checkbox-group v-model="checked">
-      <tiny-checkbox label="复选框1"></tiny-checkbox>
-      <tiny-checkbox label="复选框2"></tiny-checkbox>
+      <tiny-checkbox label="复选框1">复选框1</tiny-checkbox>
+      <tiny-checkbox label="复选框2">复选框2</tiny-checkbox>
     </tiny-checkbox-group>
     <p>当前选中的值为：{{ checked }}</p>
   </div>

package/demos/mobile/app/container/basic-usage.vue

@@ -3,8 +3,8 @@
     <div class="option-row">
       <span class="tip">选择版型：</span>
       <tiny-radio-group v-model="pattern">
-        <tiny-radio label="default">默认:default</tiny-radio>
-        <tiny-radio label="classic">经典:classic</tiny-radio>
+        <tiny-radio label="default" v-model="pattern">默认:default</tiny-radio>
+        <tiny-radio label="classic" v-model="pattern">经典:classic</tiny-radio>
       </tiny-radio-group>
     </div>
     <tiny-container :pattern="pattern">

package/demos/mobile/app/dropdownmenu/title-class.vue

@@ -68,6 +68,9 @@ export default {
 </script>
 
 <style>
+.title-class {
+  background-color: #ddd;
+}
 .dropdownMenu {
   width: 356px;
   height: calc(100% - 0px);

package/demos/mobile/app/exception/buttonText.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="tiny-mobile-exception-demo">
-    <tiny-exception
-      type="nodata"
-      button-text="重试"
-      :imageUrl="imageUrl"
-      message="网络异常，请稍后再试，或者联系管理员给您处理"
-    ></tiny-exception>
+    <tiny-exception type="nodata" button-text="重试" :imageUrl="imageUrl"></tiny-exception>
   </div>
 </template>
 

package/demos/mobile/app/exception/exceptionClass.vue

@@ -4,27 +4,31 @@
       type="nodata"
       button-text="重试"
       :imageUrl="imageUrl"
+      :exception-class="exceptionClass"
       message="网络异常，请稍后再试，或者联系管理员给您处理"
     ></tiny-exception>
   </div>
 </template>
 
 <script lang="jsx">
-import { TinyException } from '@opentiny/vue-mobile'
+import { Exception } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyException
+    TinyException: Exception
   },
   data() {
     return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
+      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`,
+      exceptionClass: 'no-problem'
     }
   },
-  methods: {
-    test() {
-      alert(11)
-    }
-  }
+  methods: {}
 }
 </script>
+
+<style lang="less">
+.no-problem {
+  background-color: pink;
+}
+</style>

package/demos/mobile/app/exception/message.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tiny-mobile-exception-demo">
-    <tiny-exception type="nodata" message="自定义文本内容" :imageUrl="imageUrl" @btn-click="test"></tiny-exception>
+    <tiny-exception type="nodata" message="自定义文本内容" @btn-click="test"></tiny-exception>
   </div>
 </template>
 
@@ -12,9 +12,7 @@ export default {
     TinyException
   },
   data() {
-    return {
-      imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
-    }
+    return {}
   },
   methods: {
     test() {

package/demos/mobile/app/form/validate-position.vue

@@ -9,7 +9,7 @@
         <tiny-form-item label="优秀" prop="users" vertical>
           <tiny-input v-model="createData.users" placeholder="请输入内容" type="form"></tiny-input>
         </tiny-form-item>
-        <tiny-form-item label="优秀" vertical>
+        <tiny-form-item label="优秀" vertical prop="user">
           <tiny-input
             v-model="createData.user"
             is-select
@@ -71,7 +71,8 @@ export default {
         user: ''
       },
       rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
+        users: [{ required: true, message: '必填', trigger: 'change' }],
+        user: [{ required: true, message: '必填', trigger: 'change' }]
       },
       boxVisibility: false
     }

package/demos/mobile/app/minipicker/webdoc/minipicker.js

@@ -29,7 +29,7 @@ export default {
     {
       demoId: 'cancel',
       name: {
-        'zh-CN': '<code>cancel</code>事件',
+        'zh-CN': 'cancel事件',
         'en-US': 'events'
       },
       desc: {
@@ -53,7 +53,7 @@ export default {
     {
       demoId: 'change',
       name: {
-        'zh-CN': '<code>change</code>事件',
+        'zh-CN': 'change事件',
         'en-US': 'events'
       },
       desc: {

package/demos/mobile/app/modal/is-form-reset.vue

@@ -2,7 +2,7 @@
   <div class="content">
     <tiny-button @click="value1 = !value1" :reset-time="0">点击关闭按钮时触发事件</tiny-button>
 
-    <tiny-modal v-model="value1" type="confirm" show-footer @close="closeClick" :is-form-reset="false">
+    <tiny-modal v-model="value1" type="confirm" show-footer @close="closeClick" :is-form-reset="true">
       <tiny-form :model="createData" label-width="100px">
         <tiny-form-item label="用户名" prop="username">
           <tiny-input v-model="createData.username"></tiny-input>

package/demos/mobile/app/modal/showFooter.vue

@@ -11,7 +11,7 @@ export default {
   },
   methods: {
     btnClick() {
-      TinyModal.alert({ message: '不显示底部', showFooter: false, tiny_mode: 'mobile' })
+      TinyModal.alert({ message: '不显示底部', maskClosable: true, showFooter: false, tiny_mode: 'mobile' })
     }
   }
 }

package/demos/mobile/app/modal/webdoc/modal.js

@@ -110,18 +110,6 @@ export default {
       },
       codeFiles: ['fullscreen.vue']
     },
-    {
-      demoId: 'grid',
-      name: {
-        'zh-CN': '网格',
-        'en-US': 'button type'
-      },
-      desc: {
-        'zh-CN': '<p>网格</p>',
-        'en-US': '<p>button type</p>'
-      },
-      codeFiles: ['grid.vue']
-    },
     {
       demoId: 'hide-event',
       name: {

package/demos/mobile/app/progress/progress-type-circle.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-progress class="circle-progress" type="circle" :percentage="50" status="exception"></tiny-progress>
+  <tiny-progress class="circle-progress" type="circle" :percentage="50" :width="124" status="exception"></tiny-progress>
 </template>
 
 <script lang="jsx">

package/demos/mobile/app/progress/progress-type-dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-progress type="dashboard" :percentage="percentage" :color="tinyColors"> </tiny-progress>
+  <tiny-progress type="dashboard" :percentage="percentage" :color="tinyColors" :width="124"> </tiny-progress>
 </template>
 
 <script lang="jsx">

package/demos/mobile/app/progress/progress-width.vue

@@ -1,12 +1,23 @@
 <template>
   <div>
-    <br />
     <br />
     <tiny-progress class="progress" type="line" :stroke-width="lineWidth" :percentage="70"></tiny-progress>
     <br />
+    <tiny-progress
+      class="progress"
+      type="circle"
+      :stroke-width="lineWidth"
+      :percentage="70"
+      :width="90"
+    ></tiny-progress>
     <br />
-    <tiny-progress class="progress" type="circle" :stroke-width="lineWidth" :percentage="70"></tiny-progress>
-    <tiny-progress class="progress" type="dashboard" :stroke-width="lineWidth" :percentage="70"></tiny-progress>
+    <tiny-progress
+      class="progress"
+      type="dashboard"
+      :stroke-width="lineWidth"
+      :percentage="70"
+      :width="90"
+    ></tiny-progress>
   </div>
 </template>
 

package/demos/mobile/app/user-head/basic-usage.vue

@@ -3,9 +3,9 @@
     <div class="title">尺寸</div>
     <div class="item-content">
       <tiny-user-head type="label" v-model="name" :size="80" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="name" size="large" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="name" size="medium" round></tiny-user-head>
-      <tiny-user-head type="label" v-model="namePrefix" size="small" round></tiny-user-head>
+      <tiny-user-head type="label" v-model="name" :size="70" round></tiny-user-head>
+      <tiny-user-head type="label" v-model="name" :size="60" round></tiny-user-head>
+      <tiny-user-head type="label" v-model="name" :size="50" round></tiny-user-head>
     </div>
 
     <div class="title">类型</div>
@@ -35,8 +35,7 @@ export default {
   data() {
     return {
       imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
-      name: '小明',
-      namePrefix: '小'
+      name: '小明'
     }
   }
 }

package/demos/mobile/app/user-head/custom-background-color.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-user-head type="icon" background-color="var(--ti-common-color-line-active)"></tiny-user-head>
+  <tiny-user-head type="icon" background-color="'#5E7CE0'"></tiny-user-head>
 </template>
 
 <script lang="jsx">

package/demos/mobile/app/user-head/webdoc/user-head.js

@@ -135,18 +135,6 @@ export default {
       },
       codeFiles: ['min-user-head.vue']
     },
-    {
-      demoId: 'render-user-head-in-grid',
-      name: {
-        'zh-CN': '渲染用户头像在网格中',
-        'en-US': 'button type'
-      },
-      desc: {
-        'zh-CN': '<p>渲染用户头像在网格中</p>',
-        'en-US': '<p>button type</p>'
-      },
-      codeFiles: ['render-user-head-in-grid.vue']
-    },
     {
       demoId: 'round-user-head',
       name: {

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

@@ -22,7 +22,7 @@ const options = ref([
   },
   {
     label: '网络设置',
-    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+    children: [{ label: '更改安全组' }, { label: '切换 VPC', divided: true }]
   }
 ])
 </script>

package/demos/pc/app/action-menu/basic-usage.vue

@@ -27,7 +27,7 @@ export default {
         },
         {
           label: '网络设置',
-          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+          children: [{ label: '更改安全组' }, { label: '切换 VPC', divided: true }]
         }
       ]
     }

package/demos/pc/app/action-menu/card-mode-composition-api.vue

@@ -25,7 +25,7 @@ const options = ref([
   },
   {
     label: '网络设置',
-    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+    children: [{ label: '更改安全组' }, { label: '切换 VPC', divided: true }]
   }
 ])
 </script>

package/demos/pc/app/action-menu/card-mode.vue

@@ -30,7 +30,7 @@ export default {
         },
         {
           label: '网络设置',
-          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+          children: [{ label: '更改安全组' }, { label: '切换 VPC', divided: true }]
         }
       ]
     }

package/demos/pc/app/action-menu/disabled-composition-api.vue

@@ -31,7 +31,7 @@ const options = ref([
     label: '网络设置',
     children: [
       { label: '更改安全组', disabled: true },
-      { label: '切换VPC', divided: true }
+      { label: '切换 VPC', divided: true }
     ]
   }
 ])
@@ -55,7 +55,7 @@ const options1 = ref([
   },
   {
     label: '网络设置',
-    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+    children: [{ label: '更改安全组' }, { label: '切换 VPC', divided: true }]
   }
 ])
 </script>

package/demos/pc/app/action-menu/disabled.vue

@@ -37,7 +37,7 @@ export default {
           label: '网络设置',
           children: [
             { label: '更改安全组', disabled: true },
-            { label: '切换VPC', divided: true }
+            { label: '切换 VPC', divided: true }
           ]
         }
       ],
@@ -60,7 +60,7 @@ export default {
         },
         {
           label: '网络设置',
-          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+          children: [{ label: '更改安全组' }, { label: '切换 VPC', divided: true }]
         }
       ]
     }

package/demos/pc/app/action-menu/events-composition-api.vue

@@ -28,7 +28,7 @@ const options = ref([
   },
   {
     label: '网络设置',
-    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+    children: [{ label: '更改安全组' }, { label: '切换 VPC', divided: true }]
   }
 ])
 
@@ -42,7 +42,7 @@ const itemClick = (data) => {
 
 const visibleChange = (status) => {
   TinyNotify({
-    message: `触发 visible-change 事件,下拉状态为 ${status}`,
+    message: `触发 visible-change 事件，下拉状态为 ${status}`,
     position: 'top-right',
     duration: 2000
   })