@opentiny/vue-docs 2.2.12 → 2.2.14

package/demos/mobile-first/app/dropdown/round.vue

@@ -0,0 +1,26 @@
+<template>
+  <tiny-dropdown border round>
+    <span>下拉菜单</span>
+    <template #dropdown>
+      <tiny-dropdown-menu>
+        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script>
+import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyDropdownItem: DropdownItem
+  }
+}
+</script>

package/demos/mobile-first/app/dropdown/webdoc/dropdown.js

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'checked-status',
       name: {
@@ -211,84 +210,44 @@ export default {
         'en-US': '<p>The maximum height of the drop-down can be set by adding the `max-height` attribute.</p>'
       },
       codeFiles: ['max-height.vue']
-    }
-  ],
-  apis: [
+    },
     {
-      'name': 'Dropdown',
-      'type': 'component',
-      'props': [
-        {
-          'name': 'show-self-icon ',
-          'type': 'Boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '更多图标下拉菜单。',
-            'en-US': 'More icon drop-down list.'
-          },
-          'demoId': 'many-dropdown'
-        },
-        {
-          'name': 'single-button',
-          'type': 'Boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '下拉触发元素呈现为按钮组。',
-            'en-US': 'The drop-down trigger element is rendered as a button group.'
-          },
-          'demoId': 'button-dropdown'
-        }
-      ]
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>Dropdown、DropdownItem 两个组件分别可以通过 disabled 属性设置禁用状态。</p>',
+        'en-US': '<p>The Dropdown and DropdownItem components can be disabled through the disabled attribute.</p>'
+      },
+      codeFiles: ['disabled.vue']
     },
     {
-      'name': 'Dropdown-Menu',
-      'type': '属性',
-      'props': [
-        {
-          'name': 'custom-class',
-          'type': 'String',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '设置弹出下拉自定义样式。',
-            'en-US': 'Set the custom style of the pop-up drop-down list.'
-          }
-        },
-        {
-          'name': 'max-height',
-          'type': 'Number | String',
-          'defaultValue': '400',
-          'desc': {
-            'zh-CN': '设置下拉最大高度。',
-            'en-US': 'Sets the maximum pull-down height. '
-          },
-          'demoId': 'max-height'
-        },
-        {
-          'name': 'multi-stage',
-          'type': 'Boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '设置二级下拉菜单。',
-            'en-US': 'Sets the level-2 drop-down list. '
-          },
-          'demoId': 'multi-stage'
-        }
-      ]
+      demoId: 'hide-on-click',
+      name: {
+        'zh-CN': '菜单隐藏方式',
+        'en-US': 'Menu Hiding Mode'
+      },
+      desc: {
+        'zh-CN':
+          '<p>下拉菜单默认在点击菜单项后会被隐藏，由 `hide-on-click` 属性控制，默认为 `true`，设置为 `false` 可以关闭此功能。</p>',
+        'en-US':
+          '<p>By default, the drop-down menu is hidden after a menu item is clicked. The drop-down menu is controlled by the `hide-on-click` attribute. The default value is `true`. You can set this parameter to `false` to disable this function.</p>'
+      },
+      codeFiles: ['hide-on-click.vue']
     },
     {
-      'name': 'Dropdown-Item',
-      'type': '属性',
-      'props': [
-        {
-          'name': 'level',
-          'type': 'String',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '设置二级下拉菜单标志',
-            'en-US': 'Sets the level-2 drop-down menu flag.'
-          }
-        }
-      ]
+      demoId: 'round',
+      name: {
+        'zh-CN': '圆角',
+        'en-US': 'Round'
+      },
+      desc: {
+        'zh-CN': '<p>`border` 为 `true` 时，通过 `round` 属性设置是否为圆角。</p>',
+        'en-US': '<p>When `border` is set to `true`, the `round` attribute is used to set whether to round corners.</p>'
+      },
+      codeFiles: ['round.vue']
     }
   ]
 }

package/demos/mobile-first/app/exception/webdoc/exception.js

@@ -1,7 +1,8 @@
 export default {
   column: '2',
   owner: '',
-  demos: [{
+  demos: [
+    {
       demoId: 'message',
       name: {
         'zh-CN': '基本用法',
@@ -20,8 +21,10 @@ export default {
         'en-US': 'Page-level void'
       },
       desc: {
-        'zh-CN': '<p>通过添加`page-empty`属性展示页面级空态，其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`<br> 对应场景：<br>`pagenoperm` ：无访问权限<br>`pageweaknet` ：网络异常<br>`pagenothing` ：你访问的页面不存在<br>`pageservererror`：服务器异常 </p>',
-        'en-US': '<p>The page-level empty state is displayed by adding the `page-empty` attribute. The type types include `pagenoperm`, `pageweaknet`, `pagenothing`, and `pageservererror`.<br>Scenario:<br>`pagenoperm`: no access permission<br>`pageweaknet`: network exception<br>`pagenothing`: The page you access does not exist<br>`pageservererror`: The server is abnormal</p>'
+        'zh-CN':
+          '<p>通过添加`page-empty`属性展示页面级空态，其中 type 类型有`pagenoperm`、 `pageweaknet`、 `pagenothing`、 `pageservererror`<br> 对应场景：<br>`pagenoperm` ：无访问权限<br>`pageweaknet` ：网络异常<br>`pagenothing` ：你访问的页面不存在<br>`pageservererror`：服务器异常 </p>',
+        'en-US':
+          '<p>The page-level empty state is displayed by adding the `page-empty` attribute. The type types include `pagenoperm`, `pageweaknet`, `pagenothing`, and `pageservererror`.<br>Scenario:<br>`pagenoperm`: no access permission<br>`pageweaknet`: network exception<br>`pagenothing`: The page you access does not exist<br>`pageservererror`: The server is abnormal</p>'
       },
       codeFiles: ['page-empty.vue']
     },
@@ -32,8 +35,10 @@ export default {
         'en-US': 'Component-level empty state'
       },
       desc: {
-        'zh-CN': '<p>通过添加`component-empty`属性展示组件级空态，其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`<br> 对应场景：<br>`noperm` ：无访问权限<br>`nodata` ：暂无数据<br>`weaknet` ：网络不给力<br>`noresult`：无相关搜索结果<br>`nonews`：暂无最新消息<br></p>',
-        'en-US': '<p>Add the `component-empty` attribute to display the component-level empty state. The type type can be `noperm, nodata, weaknet, noresult, or nonews`<br>The corresponding scenario is as follows: <br>`noperm`: No access<br>`nodata`: no data<br>`weaknet`: network is not powerful<br>`noresult`: no related search results<br>`nonews`: no latest news<br></p>'
+        'zh-CN':
+          '<p>通过添加`component-empty`属性展示组件级空态，其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`<br> 对应场景：<br>`noperm` ：无访问权限<br>`nodata` ：暂无数据<br>`weaknet` ：网络不给力<br>`noresult`：无相关搜索结果<br>`nonews`：暂无最新消息<br></p>',
+        'en-US':
+          '<p>Add the `component-empty` attribute to display the component-level empty state. The type type can be `noperm, nodata, weaknet, noresult, or nonews`<br>The corresponding scenario is as follows: <br>`noperm`: No access<br>`nodata`: no data<br>`weaknet`: network is not powerful<br>`noresult`: no related search results<br>`nonews`: no latest news<br></p>'
       },
       codeFiles: ['component-empty.vue']
     },
@@ -73,81 +78,5 @@ export default {
       },
       codeFiles: ['content-slot.vue']
     }
-  ],
-  apis: [{
-    'name': 'Exception',
-    'type': 'component',
-    'props': [{
-        'name': 'component-page',
-        'type': 'Boolean',
-        'defaultValue': '',
-        'desc': {
-          'zh-CN': '设置组件级空态',
-          'en-US': 'Set component-level empty state'
-        },
-        'demoId': 'component-empty'
-      },
-      {
-        'name': 'exception-class',
-        'type': 'String',
-        'defaultValue': '',
-        'desc': {
-          'zh-CN': '设置自定义类',
-          'en-US': 'Setting Custom Classes'
-        },
-        'demoId': ''
-      },
-      {
-        'name': 'page-empty ',
-        'type': 'Boolean',
-        'defaultValue': '',
-        'desc': {
-          'zh-CN': '设置页面级空态',
-          'en-US': 'Set page-level empty status'
-        },
-        'demoId': 'page-empty'
-      },
-      {
-        'name': 'sub-message',
-        'type': 'String',
-        'defaultValue': '',
-        'desc': {
-          'zh-CN': '设置二级标题',
-          'en-US': 'Set Level-2 Title'
-        },
-        'demoId': 'sub-message'
-      },
-      {
-        'name': 'type',
-        'type': 'String',
-        'defaultValue': '',
-        'desc': {
-          'zh-CN': '设置页面级空态类型。默认值为nodata',
-          'en-US': 'Sets the page-level empty state type. The default value is nodata.'
-        },
-        'demoId': 'page-empty'
-      }
-    ],
-    'slots': [{
-        'name': 'content',
-        'type': '',
-        'defaultValue': '',
-        'desc': {
-          'zh-CN': '内容插槽。可以设置自定义展示内容',
-          'en-US': 'Content slot. Custom display content can be set.'
-        },
-        'demoId': 'content-slot'
-      },
-      {
-        'name': 'default',
-        'type': '',
-        'defaultValue': '',
-        'desc': {
-          'zh-CN': '默认插槽',
-          'en-US': 'Default Slot'
-        },
-        'demoId': ''
-      }
-    ]
-  }]
-}
+  ]
+}

package/demos/mobile-first/app/file-upload/display-only-picture.vue

@@ -21,23 +21,23 @@ export default {
       fileList1: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: '/static/images/ld.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
         }
       ],
       fileList2: [
         {
           name: 'test1.png',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: '/static/images/ry.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
         },
         {
           name: 'test3',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'fail'
         }
       ]

package/demos/mobile-first/app/file-upload/download-picture.vue

@@ -33,23 +33,23 @@ export default {
       fileList1: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: '/static/images/ld.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
         }
       ],
       fileList2: [
         {
           name: 'test1.png',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: '/static/images/ry.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
         },
         {
           name: 'test3',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'fail'
         }
       ]

package/demos/mobile-first/app/file-upload/drag-file-list.vue

@@ -28,7 +28,7 @@ export default {
       fileList1: [
         {
           name: 'ld.png',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'uploading',
           percentage: 30
         }
@@ -36,13 +36,13 @@ export default {
       fileList2: [
         {
           name: 'ld.png',
-          url: '/static/images/ld.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
         }
       ],
       fileList3: [
         {
           name: 'ld.png',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'fail'
         }
       ]

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

@@ -3,12 +3,11 @@
 </template>
 
 <script>
-import { FileUpload, Button } from '@opentiny/vue'
+import { FileUpload } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
+    TinyFileUpload: FileUpload
   },
   data() {
     return {
@@ -62,6 +61,13 @@ export default {
           docSize: 17252 * 1024,
           size: 17252 * 1024,
           serverName: 'ShenZhen'
+        },
+        {
+          docId: 'M1T2A1N548572512085860353',
+          path: 'edm/one/',
+          docVersion: 'V1',
+          name: '没有文件大小.doc',
+          serverName: 'ShenZhen'
         }
       ]
     }

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

@@ -0,0 +1,24 @@
+<template>
+  <tiny-file-upload ref="upload" :action="action" accept=".doc,.docx" :file-list="fileList">
+    <template #notice>
+      <tiny-alert description="type 为默认值 info都是公示的文件的提示信息"></tiny-alert>
+    </template>
+  </tiny-file-upload>
+</template>
+
+<script>
+import { FileUpload, Alert } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyAlert: Alert,
+    TinyFileUpload: FileUpload
+  },
+  data() {
+    return {
+      action: 'http://localhost:3000/api/upload',
+      fileList: []
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/file-upload/picture-card.vue

@@ -18,17 +18,17 @@ export default {
       fileList: [
         {
           name: 'test1.png',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: '/static/images/ry.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
         },
         {
           name: 'test3',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'fail'
         }
       ]

package/demos/mobile-first/app/file-upload/picture-show-name.vue

@@ -18,17 +18,17 @@ export default {
       fileList: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: '/static/images/ry.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
         },
         {
           name: 'test1',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'fail'
         }
       ]

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

@@ -15,7 +15,7 @@ export default {
       fileList: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: '/static/images/ld.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
         }
       ]
     }

package/demos/mobile-first/app/file-upload/preview-picture.vue

@@ -23,23 +23,23 @@ export default {
       fileList1: [
         {
           name: 'Snipaste_2022-12-02_18-05-51.png',
-          url: '/static/images/ld.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
         }
       ],
       fileList2: [
         {
           name: 'test1.png',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'uploading',
           percentage: '50'
         },
         {
           name: 'test2',
-          url: '/static/images/ry.png'
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ry.png`
         },
         {
           name: 'test3',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'fail'
         }
       ]

package/demos/mobile-first/app/file-upload/re-upload-picture.vue

@@ -17,7 +17,7 @@ export default {
       fileList: [
         {
           name: 'test3',
-          url: '/static/images/ld.png',
+          url: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
           status: 'fail'
         }
       ]

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

@@ -14,7 +14,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-
     {
       demoId: 'file-type',
       name: {
@@ -330,15 +329,39 @@ export default {
     {
       demoId: 'assist-content',
       name: {
-        'zh-CN': '插槽',
-        'en-US': 'events'
+        'zh-CN': '辅助内容插槽',
+        'en-US': 'Secondary Content Slot'
       },
       desc: {
-        'zh-CN': '<p>`assist-content` 辅助内容插槽<p>',
-        'en-US': '<p>button click</p>'
+        'zh-CN': '<p><code>assist-content</code> 辅助内容插槽。<p>',
+        'en-US': '<p><code>assist-content</code> secondary content slot.</p>'
       },
       codeFiles: ['assist-content.vue']
     },
+    {
+      demoId: 'slot-operate',
+      name: {
+        'zh-CN': '操作区域插槽',
+        'en-US': 'Operating Area Slot'
+      },
+      desc: {
+        'zh-CN': '<p><code>operate</code> 定义操作区域插槽。<p>',
+        'en-US': '<p><code>operate</code>Define operation area slot.</p>'
+      },
+      codeFiles: ['slot-operate.vue']
+    },
+    {
+      demoId: 'notice',
+      name: {
+        'zh-CN': '公告通知插槽',
+        'en-US': 'Bulletin Notification Slot'
+      },
+      desc: {
+        'zh-CN': '<p><code>notice</code> 定义公告通知插槽。<p>',
+        'en-US': '<p><code>notice</code> Defines the bulletin notification slot.</p>'
+      },
+      codeFiles: ['notice.vue']
+    },
     {
       demoId: 'encrypt-config',
       name: {
@@ -346,11 +369,12 @@ export default {
         'en-US': 'Watermark and Encryption Configuration'
       },
       desc: {
-        'zh-CN': `<p>设置 <code>:encrypt-config: { enabled: true, ... }</code> 开启水印和加密弹窗配置，<code>encrypt-config</code> 默认值为 <code>{ enabled: false, encrypt: false, watermark: '' }</code><p>`,
-        'en-US': `<p>Set the <code>:encrypt-config: {enabled: true, ...}</code> to enable the watermark and encryption pop-up window configuration. <code>encrypt-config</code>The default value is <code>{enabled: false, encrypt: false, watermark: ''}</code><p>`
+        'zh-CN':
+          "<p>设置 <code>:encrypt-config: { enabled: true, ... }</code> 开启水印和加密弹窗配置，<code>encrypt-config</code> 默认值为 <code>{ enabled: false, encrypt: false, watermark: '' }</code><p>",
+        'en-US':
+          "<p>Set the <code>:encrypt-config: {enabled: true, ...}</code> to enable the watermark and encryption pop-up window configuration. <code>encrypt-config</code>The default value is <code>{enabled: false, encrypt: false, watermark: ''}</code><p>"
       },
       codeFiles: ['encrypt-config.vue']
     }
-  ],
-  apis: []
+  ]
 }