@opentiny/vue-docs 2.1.8 → 2.1.9

package/demos/mobile/config.js

@@ -1,4 +1,13 @@
+const map = {
+  tinyMode: 'tiny_mode'
+}
+
 export default {
   isMobile: true,
-  initApp: (app) => {}
+  VITE_CONTEXT: '',
+  base: '',
+  prodBase: '',
+  initApp: (app) => {
+    app.config.globalProperties[map.tinyMode] = { value: 'mobile' }
+  }
 }

package/demos/mobile/webdoc/changelog.md

@@ -0,0 +1,38 @@
+# 更新日志
+
+
+##  v2.6.0/v3.6.0
+
+`2023/03/30`
+
+### 📢 破坏性变更
+
+- 无
+
+### ✨ 新特性
+
+- 【TimeLine 组件】增加内容插槽功能
+- 【TimeLine 组件】增加内容折叠功能
+- 【Exception 组件】增加自定义图片功能
+- 【PullRefresh 组件】增加上拉刷新功能
+- 【Tabs 组件】增加可展开的功能
+- 【Form 组件】增加label支撑文字超长自动换行功能
+- 【UserHead 组件】新增移动端UserHead组件
+- 【Popover 组件】新增移动端Popover组件
+- 【Table 组件】新增移动端Table组件
+- 【IndexBar 组件】新增移动端IndexBar组件
+- 【Multi-select 组件】新增移动端Multi-select组件
+
+
+### 🐞 缺陷修复
+
+- 无
+
+### 🚀 优化
+
+- 【Button 组件】优化 Button 组件的移动端样式
+- 【Search 组件】优化 Search 组件的移动端样式
+- 【Action-sheet 组件】优化 Action-sheet 组件的滚动方式
+- 【Input 组件】优化type为select时，可下拉选择
+
+---

package/demos/mobile/webdoc/import.md

@@ -0,0 +1,87 @@
+<!--anchor:on-->
+
+## 引入组件
+
+`TinyVue` 支持多组件引入、单组件引入以及完整引入三种方式。
+
+### 多组件引入（推荐）
+
+多组件引用即从依赖包 `@opentiny/vue` 中引用多个组件，参考示例如下（以 `Button` 和 `Alert` 组件为例）：
+
+```vue
+<template>
+  <div>
+    <tiny-button>TinyVue</tiny-button>
+    <tiny-alert description="TinyVue"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import { Button, Alert } from '@opentiny/vue';
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyAlert: Alert,
+  },
+};
+</script>
+```
+
+### 单组件引入
+
+`TinyVue` 每个组件都可以独立安装、独立使用，即只安装单个组件的依赖并单独引用该组件。
+
+以 `Button` 和 `Alert` 组件为例，执行以下命令安装：
+
+```bash
+yarn add @opentiny/vue-button @opentiny/vue-alert
+# 或者
+npm install @opentiny/vue-button @opentiny/vue-alert
+```
+
+在页面中的使用 `Button` 和 `Alert` 组件的示例如下：
+
+```vue
+<template>
+  <div>
+    <tiny-button>TinyVue</tiny-button>
+    <tiny-alert description="TinyVue"></tiny-alert>
+  </div>
+</template>
+
+<script>
+import Button from '@opentiny/vue-button';
+import Alert from '@opentiny/vue-alert';
+
+export default {
+  components: {
+    TinyButton: Button,
+    TinyAlert: Alert,
+  },
+};
+</script>
+```
+
+### 完整引入（不推荐）
+
+完整引入组件后，就不需每个页面都 import 组件和局部注册，只需在 `main.js` 中全局注册，但因此会失去 `tree-shaking` 的能力，打包后会有冗余代码。
+
+`Vue 3.0` 版本完整引入的示例如下：
+
+```js
+import { createApp } from 'vue';
+import TinyVue from '@opentiny/vue';
+
+const app = createApp(App);
+app.use(TinyVue);
+```
+
+`Vue 2.0` 版本完整引入的示例如下：
+
+```js
+import Vue from 'vue';
+import TinyVue from '@opentiny/vue';
+
+Vue.use(TinyVue);
+```

package/demos/mobile/webdoc/introduce.md

@@ -0,0 +1,23 @@
+## 环境准备
+
+TinyVue 是一个基于 `Vue` 的 UI 组件库，可以同时支持 `Vue 2.0` 和 `Vue 3.0`。
+
+浏览器兼容性 `TinyVue` 支持主流浏览器的最新版本：Chrome、Edge、Firefox、Opera、Safari 不支持 IE 浏览器
+
+### 安装 Node.js
+
+推荐安装 `v16.13.0` 及以上版本，如果本地已经安装了 `Node.js`，可以通过以下命令检查版本是否正确：
+
+```bash
+node -v
+```
+
+### 安装 Yarn
+
+管理 `npm` 包的工具主要有两种，一种是安装 `Node.js` 时自带的 `npm` ，另一种是速度更快的 `yarn`，通过以下命令安装：
+
+```bash
+npm install -g yarn
+```
+
+包管理器的选择 `yarn` 和 `npm` 建议只选择使用一种包管理器，以免在安装过程中出现无法升级依赖包等问题。

package/demos/mobile/webdoc/menus.js

@@ -0,0 +1,112 @@
+export const standaloneMenus = [
+  {
+    label: '组件总览',
+    key: 'overview'
+  }
+]
+
+export const docMenus = [
+  {
+    label: '使用指南',
+    labelEn: 'Guide',
+    key: 'doc_use',
+    children: [
+      {
+        title: '更新日志',
+        titleEn: 'Change Log',
+        key: 'changelog'
+      },
+      {
+        title: '组件介绍',
+        titleEn: 'Introduce',
+        key: 'introduce'
+      },
+      {
+        title: '引入组件',
+        titleEn: 'Import Component',
+        key: 'import'
+      },
+      {
+        title: '切换模式',
+        titleEn: 'Switch Mode',
+        key: 'mode'
+      }
+    ]
+  }
+]
+
+export const cmpMenus = [
+  {
+    label: '导航组件',
+    labelEn: 'Navigation',
+    key: 'cmp_navigation',
+    children: [
+      { name: 'Navbar', nameCn: '导航栏', key: 'navbar' },
+      { name: 'Tabbar', nameCn: '标签栏', key: 'tabbar' },
+      { name: 'Tabs', nameCn: '选项卡', key: 'tabs' },
+      { name: 'TimeLine ', nameCn: '时间轴', key: 'timeline' },
+      { name: 'IndexBar ', nameCn: '索引条', key: 'index-bar' }
+    ]
+  },
+  {
+    label: '容器组件',
+    labelEn: 'Container',
+    key: 'cmp_container',
+    children: [{ name: 'Dialog', nameCn: '对话框', key: 'dialogbox' }]
+  },
+  {
+    label: '数据组件',
+    labelEn: 'Data',
+    key: 'cmp_data',
+    children: [{ name: 'Progress', nameCn: '进度条', key: 'progress' }]
+  },
+  {
+    label: '表单组件',
+    labelEn: 'Form',
+    key: 'cmp_form',
+    children: [
+      { name: 'Table', nameCn: '表格', key: 'table' },
+      { name: 'Button', nameCn: '按钮', key: 'button' },
+      { name: 'Form', nameCn: '表单', key: 'form' },
+      { name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
+      { name: 'Slider', nameCn: '滑块', key: 'slider' },
+      { name: 'CheckboxGroup', nameCn: '复选框组', key: 'checkboxgroup' },
+      { name: 'DropdownMenu ', nameCn: '筛选排序', key: 'dropdownmenu' },
+      { name: 'ImageViewer', nameCn: '图片预览', key: 'imageviewer' },
+      { name: 'Input', nameCn: '输入框', key: 'input' },
+      { name: 'List', nameCn: '列表', key: 'list' },
+      { name: 'Radio', nameCn: '单选', key: 'radio' },
+      { name: 'Search', nameCn: '搜索框', key: 'search' },
+      { name: 'Switch', nameCn: '开关', key: 'switch' },
+      { name: 'Numeric', nameCn: '计数器 ', key: 'numeric' },
+      { name: 'FileUpload', nameCn: '文件上传', key: 'file-upload' },
+      { name: 'MultiSelect', nameCn: '下拉选择器', key: 'multi-select' }
+    ]
+  },
+  {
+    label: '提示组件',
+    labelEn: 'Tooltip',
+    key: 'cmp_tooltip',
+    children: [
+      { name: 'PullRefresh', nameCn: '下拉刷新', key: 'pull-refresh' },
+      { name: 'Alert', nameCn: '提示', key: 'alert' },
+      { name: 'Badge', nameCn: '徽章', key: 'badge' },
+      { name: 'Loading', nameCn: '加载', key: 'loading' },
+      { name: 'Modal', nameCn: '模态框', key: 'modal' },
+      { name: 'Popover', nameCn: '气泡', key: 'popover' }
+    ]
+  },
+  {
+    label: '其它组件',
+    labelEn: 'Others',
+    key: 'cmp_others',
+    children: [
+      { name: 'Exception', nameCn: '缺省页', key: 'exception' },
+      { name: 'Avatar', nameCn: '头像', key: 'avatar' },
+      { name: 'Icon', nameCn: '图标', key: 'icon' },
+      { name: 'ActionSheet', nameCn: '上滑列表组件', key: 'actionsheet' },
+      { name: 'MiniPicker', nameCn: 'mini选择器', key: 'minipicker' },
+      { name: 'UserHead', nameCn: '用户头像', key: 'user-head' }
+    ]
+  }
+]

package/demos/mobile/webdoc/mode.md

@@ -0,0 +1,23 @@
+## 切换为 mobile 模式
+
+Tiny Vue 移动组件既存在和 PC 组件同名的组件，也存在不同名的组件。针对于同名组件，组件在渲染时默认加载的是 PC 组件，所以在使用移动组件之前，需要先切换为 mobile 模式，切换方式有如下两种：
+
+### 单组件切换
+
+可在组件标签上配置 `tiny_mode` 为 `mobile` 将该组件切换为 mobile 模式，渲染时就会按照移动组件模板渲染，如下所示：
+
+```html
+<tiny-alert tiny_mode="mobile" description="type 为默认值 info"></tiny-alert>
+```
+
+### 全局切换
+
+如果按照单组件切换的方式，则每用到一个同名组件时都需要切换，比较麻烦，实际上还可以通过在 Vue 的原型上全局设置 `tiny_mode` 来实现。在 `src/main.js` 文件中 `boot` 之前增加如下代码：
+
+```bash
+## Vue 2.0
+Vue.prototype.tiny_mode = { value: 'mobile' }
+
+## Vue 3.0
+app.config.globalProperties.tiny_mode = { value: 'mobile' }
+```

package/demos/mobile-first/app/action-sheet/webdoc/action-sheet.js

@@ -6,11 +6,11 @@ export default {
       demoId: 'basic-usage',
       name: {
         'zh-CN': '基本用法',
-        'en-US': 'events'
+        'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN': '<p><p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p></p>',
+        'en-US': '<p></p>'
       },
       codeFiles: ['basic-usage.vue']
     },
@@ -18,11 +18,11 @@ export default {
       demoId: 'action',
       name: {
         'zh-CN': '操作列表模式',
-        'en-US': 'events'
+        'en-US': 'Operation list mode'
       },
       desc: {
-        'zh-CN': '<p>设置 `type` 为 `action` 启用操作列表模式，设置 `title` 显示提示语。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>设置 `type` 为 `action` 启用操作列表模式，设置 `title` 显示提示语。</p>',
+        'en-US': '<p>Set `type` to `action` to enable the operation list mode and set `title` to display prompts.</p>'
       },
       codeFiles: ['action.vue']
     },
@@ -30,12 +30,13 @@ export default {
       demoId: 'show',
       name: {
         'zh-CN': '显示隐藏',
-        'en-US': 'events'
+        'en-US': 'Show Hide'
       },
       desc: {
         'zh-CN':
-          '<p>- show-header: 显示头部，默认值为 true；- show-search: 显示头部搜索功能，默认值为 true；- show-footer: 显示底部，默认值为 false；<p>',
-        'en-US': '<p>bbutton click</p>'
+          '<p>show-header: 显示头部，默认值为 true；- show-search: 显示头部搜索功能，默认值为 true；- show-footer: 显示底部，默认值为 false；</p>',
+        'en-US':
+          '<p>show-header: displays the header. The default value is true. - show-search: displays the header search function. The default value is true. - show-footer: displays the bottom. The default value is false</p>'
       },
       codeFiles: ['show.vue']
     },
@@ -43,11 +44,11 @@ export default {
       demoId: 'mask',
       name: {
         'zh-CN': '遮罩层1',
-        'en-US': 'events'
+        'en-US': 'Mask layer one'
       },
       desc: {
-        'zh-CN': '<p>添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>添加 `mask` 属性可以关闭遮罩层，默认值为 `true` 。</p>',
+        'en-US': '<p>bAdd the `mask` attribute to turn off the mask layer. The default value is `true`.</p>'
       },
       codeFiles: ['mask.vue']
     },
@@ -55,12 +56,13 @@ export default {
       demoId: 'mask-event',
       name: {
         'zh-CN': '遮罩层2',
-        'en-US': 'events'
+        'en-US': 'Mask layer two'
       },
       desc: {
         'zh-CN':
-          '<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true` 。        <p>',
-        'en-US': '<p>bbutton click</p>'
+          '<p>默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 `mask-closable` 为 `false` 后将禁用该功能，默认值为 `true`。</p>',
+        'en-US':
+          '<p>After the default pop-up window is opened, you can click the mask layer to close the pop-up window. If `mask-closable` is set to `false`, this function is disabled. The default value is `true`</p>'
       },
       codeFiles: ['mask-event.vue']
     },
@@ -68,12 +70,13 @@ export default {
       demoId: 'slot',
       name: {
         'zh-CN': '插槽',
-        'en-US': 'events'
+        'en-US': 'slot'
       },
       desc: {
         'zh-CN':
-          '<p>- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；- header-left: 头部左侧插槽，默认显示搜索功能；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；<p>',
-        'en-US': '<p>bbutton click</p>'
+          '<p>- header: 头部插槽，默认显示头部，设置 show-header="true" 时有效；- header-left: 头部左侧插槽，默认显示搜索功能；- header-right: 头部右侧插槽，默认显示关闭功能；- footer: 头部插槽，默认隐藏底部，设置 show-footer="true" 时有效；</p>',
+        'en-US':
+          '<p> header: header slot. The header is displayed by default. This parameter is valid only when show-header is set to true. - header-left: slot on the left of the header. The search function is displayed by default. - header-right: slot on the right side of the head. The function is disabled by default. - footer: head slot. The bottom is hidden by default. This parameter is valid only when show-footer is set to true.</p>'
       },
       codeFiles: ['slot.vue']
     },
@@ -81,14 +84,236 @@ export default {
       demoId: 'ellipsis',
       name: {
         'zh-CN': '超出省略',
-        'en-US': 'events'
+        'en-US': 'ellipsis'
       },
       desc: {
-        'zh-CN': '<p>添加属性 `ellipsis` 选项内容会超出隐藏。<p>',
-        'en-US': '<p>bbutton click</p>'
+        'zh-CN': '<p>添加属性 `ellipsis` 选项内容会超出隐藏。</p>',
+        'en-US': '<p>Added attribute `ellipsis` content meeting super surviving.</p>'
       },
       codeFiles: ['ellipsis.vue']
     }
   ],
-  apis: []
+  apis: [
+    {
+      'name': 'ActionSheet',
+      'type': 'component',
+      'props': [
+        {
+          'name': 'custom-class',
+          'type': 'String',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '自定义 class 样式',
+            'en-US': 'Customize the class style.'
+          }
+        },
+        {
+          'name': 'flex',
+          'type': 'Boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '设置弹性布局,默认为 true',
+            'en-US': 'Sets the elastic layout. The default value is true.'
+          }
+        },
+        {
+          'name': 'mask',
+          'type': 'Boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示遮罩层，默认值为 true',
+            'en-US': 'Indicates whether to display the mask layer. The default value is true.'
+          },
+          'demoId': 'mask'
+        },
+        {
+          'name': 'mask-closable',
+          'type': 'Boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '单击遮罩层是否关闭弹窗，默认值为 true',
+            'en-US':
+              'Indicates whether to close the pop-up window when you click the mask layer. The default value is true.'
+          },
+          'demoId': 'mask-event'
+        },
+        {
+          'name': 'menus',
+          'type': 'Array',
+          'defaultValue': '[]',
+          'desc': {
+            'zh-CN': '操作列表，设置 type 为 action 启用操作列表模式时有效。',
+            'en-US': 'Operation list. This parameter is valid only when type is set to action.'
+          },
+          'demoId': 'action'
+        },
+        {
+          'name': 'show-footer',
+          'type': 'Boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否显示底部，默认值为 false',
+            'en-US': 'Indicates whether to display the bottom. The default value is false.'
+          },
+          'demoId': 'show'
+        },
+        {
+          'name': 'show-header',
+          'type': 'Boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示头部，默认值为 true',
+            'en-US': 'Indicates whether to display the header. The default value is true.'
+          },
+          'demoId': 'show'
+        },
+        {
+          'name': 'title',
+          'type': 'String',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '面板标题',
+            'en-US': 'Panel Title'
+          },
+          'demoId': 'actoin'
+        },
+        {
+          'name': 'type',
+          'type': 'Array[string]',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '设置 type 为 action 启用操作列表模式',
+            'en-US': 'Set type to action to enable the operation list mode.'
+          },
+          'demoId': 'action'
+        },
+        {
+          'name': 'v-model',
+          'type': 'Number | String | Array',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '双向数据绑定',
+            'en-US': 'bidirectional data binding'
+          }
+        },
+        {
+          'name': 'visible',
+          'type': 'Boolean',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '是否弹出面板',
+            'en-US': 'Indicates whether to display the panel.'
+          }
+        }
+      ],
+      'methods': [
+        {
+          'name': 'actionSelectOption',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '选择列表项，设置 type 为 action 启用操作列表模式时有效',
+            'en-US':
+              'Select a list item and set type to action. This parameter is valid only when the operation list mode is enabled.'
+          }
+        },
+        {
+          'name': 'close',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '关闭面板',
+            'en-US': 'Close the panel.'
+          },
+          'demoId': 'action'
+        }
+      ],
+      'events': [
+        {
+          'name': 'click',
+          'type': 'Function()',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '点击列表选项时触发，设置 type 为 action 启用操作列表模式时有效。',
+            'en-US':
+              'This event is triggered when a list option is clicked. This event is valid only when type is set to action and the operation list mode is enabled.'
+          },
+          'demoId': 'action'
+        },
+        {
+          'name': 'close',
+          'type': 'Function()',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '关闭面板时触发的事件。',
+            'en-US': 'Event triggered when a panel is closed.'
+          },
+          'demoId': 'action'
+        },
+        {
+          'name': 'confirm',
+          'type': 'Function()',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '点击底部按钮时触发，设置 show-footer 为 true 时有效。',
+            'en-US':
+              'This event is triggered when the bottom button is clicked. It is valid only when show-footer is set to true.'
+          }
+        },
+        {
+          'name': 'update:visible',
+          'type': 'Function()',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '面板显示或隐藏时触发',
+            'en-US': 'riggered when the panel is displayed or hidden'
+          },
+          'demoId': 'slot'
+        }
+      ],
+      'slots': [
+        {
+          'name': 'default',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '组件默认插槽，设置 type 为 action 启用操作列表模式会提供参数 data 列表项和 index 列表索引。',
+            'en-US':
+              'Component default slot. Set type to action to enable the operation list mode. The parameter data list item and index list index are provided.'
+          },
+          'demoId': 'slot'
+        },
+        {
+          'name': 'footer',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '底部插槽，设置 show-footer 为 true 时有效',
+            'en-US': 'Bottom slot. This parameter is valid only when show-footer is set to true.'
+          },
+          'demoId': 'slot'
+        },
+        {
+          'name': 'header-left',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '头部左侧插槽，设置 show-header 为 true 时有效',
+            'en-US': 'Slot on the left of the header. This parameter is valid only when show-header is set to true.'
+          },
+          'demoId': 'slot'
+        },
+        {
+          'name': 'header-right ',
+          'type': '',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '头部右侧插槽，设置 show-header 为 true 时有效',
+            'en-US': 'Slot on the right of the header. This parameter is valid only when show-header is set to true.'
+          },
+          'demoId': 'slot'
+        }
+      ]
+    }
+  ]
 }