@opentiny/vue-docs 3.17.4 → 3.18.0

package/demos/apis/button.js

@@ -191,7 +191,7 @@ export default {
           name: 'type',
           typeAnchorName: 'IButtonType',
           type: 'IButtonType',
-          defaultValue: '',
+          defaultValue: 'default',
           desc: {
             'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
             'en-US': 'Display different states of buttons, set to text to display as text buttons'
@@ -239,7 +239,7 @@ export default {
     {
       name: 'IButtonType',
       type: 'interface',
-      code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+      code: `type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
     }
   ]
 }

package/demos/apis/dropdown.js

@@ -544,7 +544,7 @@ interface IItemData {
       name: 'IButtonType',
       type: 'type',
       code: `        
-type IButtonType =  'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
 `
     },
     {

package/demos/apis/fluent-editor.js

@@ -66,7 +66,7 @@ export default {
           type: 'object',
           defaultValue: "",
           desc: {
-            'zh-CN': '编辑器配置项，参考 <a href="https://quilljs.com/docs/configuration#options" target="_blank">Quill</a> 文档',
+            'zh-CN': '编辑器配置项，参考 Quill 文档：https://quilljs.com/docs/configuration#options',
             'en-US': ''
           },
           mode: ['pc', 'mobile-first'],
@@ -81,7 +81,7 @@ export default {
             'en-US': ''
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'basic-usage'
+          pcDemo: ''
         }
       ],
       events: [],

package/demos/apis/link-menu.js

@@ -7,7 +7,7 @@ export default {
       props: [
         {
           name: 'data',
-          type: 'Array',
+          type: 'array',
           defaultValue: '',
           desc: {
             'zh-CN': '设置收藏夹菜单的数据',
@@ -19,7 +19,7 @@ export default {
         {
           name: 'default-expand-all',
           type: 'boolean',
-          defaultValue: '',
+          defaultValue: 'true',
           desc: {
             'zh-CN': '设置打开菜单弹窗时默认是否展开所有节点，默认为 true',
             'en-US':
@@ -31,7 +31,7 @@ export default {
         {
           name: 'ellipsis',
           type: 'boolean',
-          defaultValue: '',
+          defaultValue: 'true',
           desc: {
             'zh-CN': '菜单内容超长时省略显示，默认为 true',
             'en-US': 'Omitted if the menu content is too long. The default value is true'
@@ -41,7 +41,7 @@ export default {
         },
         {
           name: 'get-menu-data-sync',
-          type: 'Function',
+          type: 'function',
           defaultValue: '',
           desc: {
             'zh-CN': '自定义菜单数据服务，直接返回数据',
@@ -109,10 +109,10 @@ export default {
         {
           name: 'wrap',
           type: 'boolean',
-          defaultValue: '',
+          defaultValue: 'true',
           desc: {
-            'zh-CN': '菜单内容超长时换行显示，默认为 false',
-            'en-US': 'The menu content is displayed in a new line when it is too long. The default value is false'
+            'zh-CN': '菜单内容超长时换行显示，默认为 true',
+            'en-US': 'The menu content is displayed in a new line when it is too long. The default value is true'
           },
           mode: ['pc'],
           pcDemo: 'data-resource'

package/demos/apis/link.js

@@ -72,7 +72,21 @@ export default {
           pcDemo: 'basic-usage'
         }
       ],
-      events: [],
+      events: [
+        {
+          name: 'click',
+          type: '(ev: MouseEvent) => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '点击事件',
+            'en-US': 'click event'
+          },
+          mode: ['pc', 'mobile', 'mobile-first'],
+          pcDemo: '',
+          mobileDemo: '',
+          mfDemo: ''
+        }
+      ],
       methods: [],
       slots: [
         {

package/demos/apis/pager.js

@@ -247,6 +247,9 @@ export default {
           name: 'total-fixed-left',
           type: 'boolean',
           defaultValue: 'false',
+          metaData: {
+            new: '3.18.0'
+          },
           desc: {
             'zh-CN': '总条目数是否固定在左侧，Aurora、SMB主题默认值为 true',
             'en-US':

package/demos/apis/pop-upload.js

@@ -289,7 +289,21 @@ export default {
         }
       ],
       methods: [],
-      slots: []
+      slots: [
+        {
+          name: 'uploadTip',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义上传提示内容',
+            'en-US': 'Customize upload prompt content'
+          },
+          metaData: {
+            new: '3.18.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'upload-tip'
+        }
+      ]
     }
   ],
   types: [

package/demos/mobile-first/app/fluent-editor/basic-usage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/fluent-editor/data-switch.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
+    内容：<br />
+    {{ value }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      value: '<p>Hello <strong>FluentEditor</strong>!</p>'
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/fluent-editor/disabled.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/fluent-editor/image-upload.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import { Modal } from '@opentiny/vue'
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}',
+      imageUpload: {
+        url: 'https://run.mocky.io/v3/f34365b4-679d-4e8f-8313-ddb11d6750be',
+        method: 'POST',
+        name: 'image',
+        withCredentials: true,
+        headers: {},
+        success: (serverResponse, next) => {
+          let file = {}
+
+          for (const key in serverResponse) {
+            file = serverResponse[key]
+            break
+          }
+
+          next(file.downloadUrl)
+        },
+        fail: (serverError) => {
+          Modal.message({
+            message: `上传失败回调事件：${serverError}`,
+            status: 'info'
+          })
+        }
+      }
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/fluent-editor/options.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '',
+      options: {
+        placeholder: '请输入内容',
+        modules: {
+          // 工具栏
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'],
+            [{ list: 'bullet' }, { list: 'ordered' }],
+            [{ align: '' }, { align: 'center' }, { align: 'right' }],
+            ['better-table'],
+            ['fullscreen'],
+          ],
+          // 字数统计
+          counter: true,
+          // 表格
+          'better-table': {
+            operationMenu: {
+              color: {
+                text: '主题色',
+                colors: [
+                  '#ffffff', '#f2f2f2', '#dddddd', '#a6a6a6', '#666666', '#000000',
+                  '#c00000', '#ff0000', '#ffc8d3', '#ffc000', '#ffff00', '#fff4cb',
+                  '#92d050', '#00b050', '#dff3d2', '#00b0f0', '#0070c0', '#d4f1f5',
+                  '#002060', '#7030a0', '#7b69ee', '#1476ff', '#ec66ab', '#42b883',
+                ]
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.cn.md

@@ -0,0 +1,9 @@
+---
+title: FluentEditor 富文本
+---
+
+# FluentEditor 富文本
+
+<div>
+用于创建和编辑富文本内容。
+</div>

package/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.en.md

@@ -0,0 +1,9 @@
+---
+title: FluentEditor
+---
+
+# FluentEditor
+
+<div>
+FluentEditor is a rich text component used to create and edit rich text content.
+</div>

package/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.js

@@ -0,0 +1,68 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '通过 <code>v-model</code> 设置绑定值，默认数据保存格式为 Delta 数据格式。',
+        'en-US': 'You can refer to component label.'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用状态',
+        'en-US': 'The position of the separator copy'
+      },
+      desc: {
+        'zh-CN': '<p>通过属性 <code>disabled</code> 可设置编辑器为不可编辑状态。</p>',
+        'en-US':
+          '<p>The position of the separator text can be set through the<code>content position</code>attribute.</p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'image-upload',
+      name: {
+        'zh-CN': '图片上传',
+        'en-US': 'Image Upload'
+      },
+      desc: {
+        'zh-CN': '通过 <code>image-upload</code> 设置图片上传模块的配置项。',
+        'en-US': ''
+      },
+      codeFiles: ['image-upload.vue']
+    },
+    {
+      demoId: 'options',
+      name: {
+        'zh-CN': '编辑器配置',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '通过 <code>options</code> 设置编辑器的配置项，支持的配置项和 Quill 的相同，可参考 <a href="https://quilljs.com/docs/configuration#options" target="_blank">Quill</a> 文档。',
+        'en-US': ''
+      },
+      codeFiles: ['options.vue']
+    },
+    {
+      demoId: 'data-switch',
+      name: {
+        'zh-CN': '数据格式转换',
+        'en-US': 'Vertical divider line'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>data-type</code> 指定富文本数据保存的格式。数据默认保存格式为 Delta 形式，若需要将数据保存格式设置为 HTML 形式，并关闭 HTML 格式自动转 Delta 格式，设置 <code>:data-type="false"</code>，<code>:data-upgrade="false"</code>。</p>',
+        'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
+      },
+      codeFiles: ['data-switch.vue']
+    },
+  ]
+}

package/demos/mobile-first/app/time-line-new/auto-slot.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex justify-between">
+    <tiny-time-line :data="data">
+      <template #left="data">
+        <div class="ml-1.5 -mt-1.5">
+          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
+        </div>
+        <span class="ml-2 inline-block text-xs leading-5 mb-6">
+          {{ data.slotScope.title }}
+        </span>
+      </template>
+    </tiny-time-line>
+
+    <tiny-time-line :data="data1">
+      <template #left="data1">
+        <div class="ml-1.5 -mt-1.5">
+          <tiny-user-head type="image" round v-model="imgUrl" :size="32"></tiny-user-head>
+        </div>
+        <span class="ml-2 inline-block text-xs leading-5 mb-6">
+          {{ data1.slotScope.title }}
+        </span>
+      </template>
+    </tiny-time-line>
+  </div>
+</template>
+
+<script>
+import { TimeLineNew, UserHead } from '@opentiny/vue'
+import { IconLoading } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew,
+    TinyUserHead: UserHead
+  },
+  data() {
+    return {
+      imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
+      data: [{ title: '节点标题1' }, { title: '节点标题2' }, { title: '节点标题3' }, { title: '节点标题4' }],
+      data1: [
+        { title: '节点标题1' },
+        { title: '节点标题2' },
+        { title: '节点标题3' },
+        { title: '节点标题4' },
+        { title: '节点标题5', autoColor: IconLoading() }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/basic-usage.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-time-line :data="data"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-12 14:20:15' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' },
+        { name: '节点标题', time: '2022-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/fold-time.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-time-line :data="data" vertical></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/limited-nodes.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-time-line :data="data" vertical :limited-nodes="5"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/many-status.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-time-line :data="data" :show-number="false"> </tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-12 14:20:15', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'error' },
+        { name: '节点标题', time: '2022-11-11 00:01:30' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'info' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/node-max.vue

@@ -0,0 +1,26 @@
+<template>
+  <tiny-time-line :data="data" vertical :node-max="5"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      active: 1,
+      data: [
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' },
+        { name: '节点标题', time: '2019-11-11 00:01:30' },
+        { name: '节点标题', time: '2019-11-12 14:20:15' },
+        { name: '节点标题', time: '2019-11-14 20:45:50' }
+      ]
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/time-line-new/node-toset.vue

@@ -0,0 +1,32 @@
+<template>
+  <tiny-time-line :data="data" :show-number="false">
+    <template #icon="{ slotScope }">
+      <icon-loading v-if="slotScope.type === 'loading'"></icon-loading>
+      <icon-time v-if="slotScope.type === 'time'"></icon-time>
+    </template>
+  </tiny-time-line>
+</template>
+
+<script>
+import { TimeLineNew } from '@opentiny/vue'
+import { IconLoading, IconTime } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    IconLoading: IconLoading(),
+    IconTime: IconTime(),
+    TinyTimeLine: TimeLineNew
+  },
+  data() {
+    return {
+      data: [
+        { name: '节点标题', time: '2022-11-11 00:01:30', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-12 14:20:15', autoColor: 'success' },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: IconLoading() },
+        { name: '节点标题', time: '2022-11-11 00:01:30', autoColor: IconTime() },
+        { name: '节点标题', time: '2022-11-14 20:45:50', autoColor: 'info' }
+      ]
+    }
+  }
+}
+</script>