@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/watermark/webdoc/watermark.js

@@ -11,13 +11,21 @@ export default {
     {
       'demoId': 'basic',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example ' },
+      'desc': {
+        'zh-CN':
+          '<p>通过 <code>content</code> 属性设置水印的文字。</br>通过 <code>font</code> 属性设置水印的样式</p>。',
+        'en-US':
+          'Set the text of the watermark through the <code>content</code> attribute.</br> Set the style of the watermark through the <code>font</code> attribute. '
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'image',
       'name': { 'zh-CN': '图片水印', 'en-US': 'Basic Usage Image' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example ' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>image</code> 属性设置水印的图片。</p>',
+        'en-US': 'Set the watermark image through the <code>image</code> property. '
+      },
       'codeFiles': ['image.vue']
     }
   ],
@@ -31,7 +39,7 @@ export default {
           'type': 'number',
           'defaultValue': '120',
           'desc': {
-            'zh-CN': '水印的宽度, 最小宽度120',
+            'zh-CN': '水印的宽度, 最小宽度120px',
             'en-US': 'The width of the watermark, minimum width 120'
           },
           'demoId': 'basic'
@@ -41,7 +49,7 @@ export default {
           'type': 'number',
           'defaultValue': '64',
           'desc': {
-            'zh-CN': '水印的高度, 最小高度64',
+            'zh-CN': '水印的高度, 最小高度64px',
             'en-US': 'The height of the watermark, minimum height 120'
           },
           'demoId': 'basic'
@@ -61,7 +69,7 @@ export default {
           'type': 'number',
           'defaultValue': '9',
           'desc': {
-            'zh-CN': '追加的水印元素的 `z-index `',
+            'zh-CN': "追加的水印元素的 'z-index' ",
             'en-US': 'The z-index of the appended watermark element'
           },
           'demoId': 'basic'
@@ -71,7 +79,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式),此属性高于content',
+            'zh-CN': '图片源，建议导出 2 倍或 3 倍图，优先级高（支持 base64 格式），此属性高于 content ',
             'en-US': 'Image source, it is recommended to export 2x or 3x image, high priority, higher content'
           },
           'demoId': 'image'
@@ -81,23 +89,18 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '水印文字内容，此属性低于image',
+            'zh-CN': '水印文字内容，此属性低于 image',
             'en-US': 'Watermark text content, lower image'
           },
           'demoId': 'basic'
         },
         {
           'name': 'font',
-          'type': 'object',
+          'type': 'Font',
           'defaultValue': '',
+          'typeAnchorName': 'Font',
           'desc': {
-            'zh-CN': `文字样式,可配置字段如下{
-              color:'rgba(0,0,0,.15)',
-              fontSize:'16',
-              "fontWeight":'normal',
-              "fontFamily":'sans-serif',
-              "fontStyle":'normal'
-            }`,
+            'zh-CN': `水印文字样式`,
             'en-US': 'Text style'
           },
           'demoId': 'basic'
@@ -117,7 +120,7 @@ export default {
           'type': 'array',
           'defaultValue': '[20, 20] ',
           'desc': {
-            'zh-CN': '水印距离容器左上角的偏移量，默认为`20 `',
+            'zh-CN': '水印距离容器左上角的偏移量',
             'en-US': 'The offset of the watermark from the upper left corner of the container. '
           },
           'demoId': 'basic'
@@ -136,5 +139,18 @@ export default {
       'events': [],
       'slots': []
     }
+  ],
+  types: [
+    {
+      name: 'Font',
+      type: 'type',
+      code: `type Font = { 
+        color:string,
+        fontSize:number,
+        fontWeight:string,
+        fontFamily:string,
+        fontStyle:string
+       }`
+    }
   ]
 }

package/demos/pc/menus.js

@@ -97,7 +97,7 @@ export const cmpMenus = [
       { 'nameCn': '文件上传', 'name': 'FileUpload', 'key': 'file-upload' },
       { 'nameCn': '表单', 'name': 'Form', 'key': 'form' },
       { 'nameCn': '输入框', 'name': 'Input', 'key': 'input' },
-      { 'nameCn': '输入框', 'name': 'IpAddress', 'key': 'ip-address' },
+      { 'nameCn': ' IP地址输入框', 'name': 'IpAddress', 'key': 'ip-address' },
       { 'nameCn': '文字链接', 'name': 'Link', 'key': 'link' },
       { 'nameCn': '计数器', 'name': 'Numeric', 'key': 'numeric' },
       { 'nameCn': '弹出编辑', 'name': 'PopEditor', 'key': 'popeditor' },
@@ -288,6 +288,11 @@ export const cmpMenus = [
         'mark': {
           'text': 'New'
         }
+      },
+      {
+        'nameCn': '脑图',
+        'name': 'mind-map',
+        'key': 'mind-map'
       }
     ]
   }

package/demos/pc/webdoc/form-valid-en.md

@@ -117,14 +117,20 @@ rules: {
 
 #### trigger
 
-By`trigger`Configure the method of triggering the verification rule.`change`When the input box value changes, the verification is triggered.`blur`When the focus is lost, the calibration is triggered. The following is an example:
+Configure the way to trigger the verification rules through `trigger`. When it is `change`, the verification is triggered when the input box value changes. When it is `blur`,
+the verification is triggered after the input box value is out of focus. Can be set to an array `['change', 'blur']` to trigger both scenarios. The default is to trigger both scenarios.
+If it is only triggered when the verification method is actively called, it can be set to an empty array `[]`. An example of usage is as follows:
 
 ```js
 rules: {
-  users: { len: 2, message: 'The length must be 2', trigger: 'change' }
+  users: { len: 2, message: 'The length must be 2', trigger: 'change' },
+  password: { len: 2, message: 'The length must be 2', trigger: ['change', 'blur'] },
+  nickname: { len: 10, message: 'Duplicate name already exists', trigger: [] }
 }
 ```
 
+````
+
 The configurable values are as follows:
 
 - `blur`: The verification is triggered after the focus is out of focus.
@@ -139,7 +145,7 @@ Enumerated value validation, which verifies whether the value of the field is in
 rules: {
   role: { type: 'enum', enum: ['admin', 'user', 'guest'] }
 }
-```
+````
 
 #### whitespace
 

package/demos/pc/webdoc/form-valid.md

@@ -117,12 +117,14 @@ rules: {
 
 #### trigger
 
-通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。可设置成数组 `['change', 'blur']` 两种场景都触发。使用示例如下所示：
+通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。可设置成数组 `['change', 'blur']` 两种场景都触发，默认为两种场景都触发。
+如果如果仅在主动调用校验方式时触发，可设置为空数组 `[]`。使用示例如下所示：
 
 ```js
 rules: {
   users: { len: 2, message: '长度必须为2', trigger: 'change' },
   password: { len: 2, message: '长度必须为2', trigger: ['change', 'blur'] },
+  nickname: { len: 10, message: '已存在重复名称', trigger: [] }
 }
 ```
 

package/demos/pc/webdoc/theme-en.md

@@ -49,20 +49,22 @@ resolve: {
 
 ```js
 import TinyThemeTool from' @opentiny/vue-theme/theme-tool.js'
-import {tinyInfinityTheme} from'@opentiny/vue-theme/theme' //Infinite theme
 
-const theme = new TinyThemeTool(tinyInfinityTheme,'tinyStyleSheetId') / / Initialize the infinite theme.
+// Infinite theme
+import {tinyInfinityTheme} from'@opentiny/vue-theme/theme'
 
-//Customize the theme data format.
+// Initialize the infinite theme.
+const theme = new TinyThemeTool(tinyInfinityTheme,'tinyStyleSheetId') 
 
+// Customize the theme data format.
 const tinyTestTheme = {
-id: 'tiny-test-theme', //Unique ID of a topic. Each topic must be unique.
-name: 'testTheme', //English name of the theme
-cnName:'Test Topic', //Chinese name of the topic
-data: {'ti-base-color':'#f2f2f3'} //Subject data
+id: 'tiny-test-theme', // Unique ID of a topic. Each topic must be unique.
+name: 'testTheme', // English name of the theme
+cnName:'Test Topic', // Chinese name of the topic
+data: {'ti-base-color':'#f2f2f3'} // Subject data
 }
 
-//Dynamic theme switching
+// Dynamic theme switching
 
 theme.changeTheme(tinyTestTheme)
 ```

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.7",
+  "version": "2.2.9",
+  "license": "MIT",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -13,19 +14,18 @@
     "vue-i18n": "^9.1.10",
     "vue-router": "4.1.5",
     "marked": "^4.3.0",
-    "@playwright/test": "^1.29.2",
     "sortablejs": "1.15.0",
     "@opentiny/vue-repl": "^1.1.0",
     "@opentiny/vue": "~3.12.0",
-    "@opentiny/vue-common": "~3.12.0",
     "@opentiny/vue-icon": "~3.12.0",
-    "@opentiny/vue-icon-saas": "~3.12.0",
     "@opentiny/vue-design-smb": "~3.12.0",
+    "@opentiny/vue-common": "~3.12.0",
+    "@opentiny/vue-icon-saas": "~3.12.0",
+    "@opentiny/vue-theme": "~3.13.1",
     "@opentiny/vue-design-aurora": "~3.12.0",
-    "@opentiny/vue-theme-mobile": "~3.12.0",
-    "@opentiny/vue-theme": "~3.12.1",
-    "@opentiny/vue-theme-saas": "~3.12.0",
-    "@opentiny/vue-vite-import": "~1.1.5"
+    "@opentiny/vue-vite-import": "~1.1.5",
+    "@opentiny/vue-theme-mobile": "~3.13.0",
+    "@opentiny/vue-theme-saas": "~3.13.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",
@@ -38,6 +38,7 @@
     "cross-spawn": "^7.0.3",
     "fs-extra": "^10.1.0",
     "less": "^4.1.3",
+    "@playwright/test": "^1.40.1",
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.4",
     "markdown-it-emoji": "^2.0.2",

package/playground/App.vue

@@ -38,6 +38,8 @@ const createImportMap = (version) => {
     '@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
     '@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
     '@opentiny/vue-theme/': `${cdnHost}/@opentiny/vue-theme@${version}/`,
+    '@opentiny/vue-theme-mobile/': `${cdnHost}/@opentiny/vue-theme-mobile@${version}/`,
+    '@opentiny/vue-renderless/': `${cdnHost}/@opentiny/vue-renderless@${version}/`,
     'sortablejs': `${cdnHost}/sortablejs@1.15.0/modular/sortable.esm.js`
   }
   if (['aurora', 'smb'].includes(tinyTheme)) {
@@ -72,6 +74,7 @@ const getTinyTheme = (version) => {
 const hash = location.hash.slice(1)
 const shareData = hash.split('|')
 
+// eslint-disable-next-line new-cap
 const store = new useStore({
   serializedState: shareData.length === 2 ? shareData[1] : '',
   showOutput: true,
@@ -153,6 +156,11 @@ function insertStyleDom(version) {
     link.href = getTinyTheme(version)
     iframeWin.addEventListener('DOMContentLoaded', () => {
       iframeWin.document.head.append(link)
+
+      // 增加mobile支持，增加mobile的样式表
+      const mobileLink = link.cloneNode(true)
+      mobileLink.href = `${cdnHost}/@opentiny/vue-theme-mobile@${version}/index.css`
+      iframeWin.document.head.append(mobileLink)
     })
   })
 }
@@ -170,6 +178,7 @@ function getDemoName(name, apiMode) {
   return name.replace(/\.vue$/, `${apiMode === 'Options' ? '' : '-composition-api'}.vue`)
 }
 
+// eslint-disable-next-line unused-imports/no-unused-vars
 const getDemoCode = async ({ cmpId, fileName, apiMode, mode }) => {
   const demoName = getDemoName(`${getWebdocPath(cmpId)}/${fileName}`, apiMode)
   const path = tinyMode === 'mobile-first' ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}`

package/demos/mobile/app/button/event-click.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button round>默认1秒</tiny-button>
-    <tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
-    <tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
-    <tiny-button round>圆角按钮</tiny-button>
-    <tiny-button type="primary" round disabled>主要按钮</tiny-button>
-    <tiny-button type="success" round disabled>成功按钮</tiny-button>
-    <tiny-button type="info" round disabled>信息按钮</tiny-button>
-    <tiny-button type="warning" round disabled>警告按钮</tiny-button>
-    <tiny-button type="danger" round disabled>危险按钮</tiny-button>
-    <tiny-button type="secondary" round disabled>次要按钮</tiny-button>
-    <tiny-button round disabled>弱按钮</tiny-button>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  methods: {
-    click() {
-      console.log('click event!!!')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>

package/demos/mobile/app/button/native-type.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="demo-form-native-type">
-    <div class="page__hd">
-      <h1 class="page__title">Form</h1>
-      <p class="page__desc">表单（纯展示）</p>
-    </div>
-    <div class="demo-padds-native-type">
-      <tiny-form ref="ruleForm" :model="createData" :rules="rules">
-        <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-input
-            v-model="createData.user"
-            is-select
-            :select-menu="menus"
-            placeholder="请输入内容"
-            type="form"
-          ></tiny-input>
-        </tiny-form-item>
-        <tiny-form-item class="demo-form-base-item">
-          <tiny-button type="primary" @click="handleSubmit('ruleForm')">提交</tiny-button>
-        </tiny-form-item>
-      </tiny-form>
-    </div>
-    <tiny-dialog-box
-      :visible="boxVisibility"
-      @update:visible="boxVisibility = $event"
-      :modal-append-to-body="false"
-      title="消息提示"
-    >
-      <span>reset</span>
-    </tiny-dialog-box>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Form, FormItem, Input, Button, DialogBox } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyForm: Form,
-    TinyFormItem: FormItem,
-    TinyInput: Input,
-    TinyButton: Button,
-    TinyDialogBox: DialogBox
-  },
-  data() {
-    return {
-      createData: {
-        users: ''
-      },
-      rules: {
-        users: [{ required: true, message: '必填', trigger: 'change' }]
-      },
-      boxVisibility: false
-    }
-  },
-  methods: {
-    handleSubmit(formName) {
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          this.boxVisibility = true
-          this.$refs[formName].resetFields()
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.demo-padds-native-type {
-  padding: 15px;
-  background: white;
-  margin-bottom: 15px;
-}
-.page__hd {
-  padding: 40px;
-}
-.page__title {
-  font-weight: 400;
-  font-size: 21px;
-  text-align: left;
-}
-.page__desc {
-  margin-top: 5px;
-  color: #888;
-  font-size: 14px;
-  text-align: left;
-}
-.demo-form-native-type {
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>
-
-<style>
-.demo-form-native-type .tiny-form-item__label {
-  background: #fff;
-}
-.demo-padds-native-type .tiny-mobile-input-form__input {
-  text-align: right;
-}
-</style>

package/demos/mobile/app/button/plain.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button plain>朴素按钮</tiny-button>
-    <tiny-button type="primary" plain>主要按钮</tiny-button>
-    <tiny-button type="success" plain>成功按钮</tiny-button>
-    <tiny-button type="info" plain>信息按钮</tiny-button>
-    <tiny-button type="warning" plain>警告按钮</tiny-button>
-    <tiny-button type="danger" plain>危险按钮</tiny-button>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button:not(:nth-child(3n)) {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>

package/demos/mobile/app/button/round.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button round>圆角按钮</tiny-button>
-    <tiny-button type="primary" round>主要按钮</tiny-button>
-    <tiny-button type="success" round>成功按钮</tiny-button>
-    <tiny-button type="info" round>信息按钮</tiny-button>
-    <tiny-button type="warning" round>警告按钮</tiny-button>
-    <tiny-button type="danger" round>危险按钮</tiny-button>
-    <tiny-button type="secondary" round>次要按钮</tiny-button>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>

package/demos/mobile/app/button/text.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="button-wrap">
-    <tiny-button round>默认1秒</tiny-button>
-    <tiny-button type="primary" round :reset-time="2000">禁用2秒</tiny-button>
-    <tiny-button type="success" round :reset-time="5000">禁用5秒</tiny-button>
-    <tiny-button round>圆角按钮</tiny-button>
-    <tiny-button type="primary" round disabled>主要按钮</tiny-button>
-    <tiny-button type="success" round disabled>成功按钮</tiny-button>
-    <tiny-button type="info" round disabled>信息按钮</tiny-button>
-    <tiny-button type="warning" round disabled>警告按钮</tiny-button>
-    <tiny-button type="danger" round disabled>危险按钮</tiny-button>
-    <tiny-button type="secondary" round disabled>次要按钮</tiny-button>
-    <tiny-button round disabled>弱按钮</tiny-button>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyButton: Button
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style scoped>
-.button-wrap {
-  padding: 0 10px;
-}
-.button-wrap .tiny-mobile-button {
-  margin-right: 16px;
-  margin-bottom: 16px;
-}
-</style>

package/demos/pc/app/calendar-view/hide-mode-composition-api.vue

@@ -1,7 +0,0 @@
-<template>
-  <tiny-calendar-view :modes="[]"></tiny-calendar-view>
-</template>
-
-<script setup lang="ts">
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
-</script>

package/demos/pc/app/calendar-view/hide-mode.vue

@@ -1,13 +0,0 @@
-<template>
-  <tiny-calendar-view :modes="[]"> </tiny-calendar-view>
-</template>
-
-<script>
-import { CalendarView } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCalendarView: CalendarView
-  }
-}
-</script>

package/demos/pc/app/calendar-view/mode-combination-composition-api.vue

@@ -1,7 +0,0 @@
-<template>
-  <tiny-calendar-view :modes="['timeline', 'schedule']" mode="timeline"></tiny-calendar-view>
-</template>
-
-<script setup lang="ts">
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
-</script>

package/demos/pc/app/calendar-view/mode-combination.vue

@@ -1,14 +0,0 @@
-<template>
-  <tiny-calendar-view :modes="['timeline', 'schedule']" mode="timeline"> </tiny-calendar-view>
-</template>
-
-<script>
-import { CalendarView } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCalendarView: CalendarView
-  },
-  methods: {}
-}
-</script>

package/demos/pc/app/file-upload/upload-limit-composition-api.vue

@@ -1,22 +0,0 @@
-<template>
-  <tiny-file-upload :action="action" :before-upload="beforeAvatarUpload">
-    <tiny-button type="primary">点击上传</tiny-button>
-  </tiny-file-upload>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal as TinyModal } from '@opentiny/vue'
-
-const action = ref('http://localhost:3000/api/upload')
-
-function beforeAvatarUpload(file) {
-  const isJPG = file.type === 'image/jpeg'
-  const isLt2M = file.size / 1024 / 1024 < 2
-  const allow = isJPG && isLt2M
-
-  !allow && TinyModal.alert('自定义提示：该文件不合规范，文件类型或大小超出限制')
-
-  return allow
-}
-</script>

package/demos/pc/app/file-upload/upload-limit.spec.ts

@@ -1,20 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('上传前限制', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('file-upload#upload-limit')
-
-  const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
-  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-
-  const path = require('node:path')
-  const path1 = path.resolve(__dirname, '测试.jpg')
-  const path2 = path.resolve(__dirname, '测试.svg')
-  const path3 = path.resolve(__dirname, '测试.png')
-
-  fileChooser.setFiles(path1)
-  fileChooser.setFiles(path2)
-  fileChooser.setFiles(path3)
-  await expect(lists).toHaveCount(0)
-})