@opentiny/vue-docs 2.2.6 → 2.2.7

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

@@ -416,7 +416,7 @@ export default {
     {
       'name': 'tree',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data',
           'type': 'Array',
@@ -688,14 +688,14 @@ export default {
             'zh-CN': '是否开启节点拖拽',
             'en-US': 'Whether to enable the node dragging function'
           },
-          'demoId': 'node-draggable'
+          'demoId': 'drag'
         },
         {
           'name': 'allow-drag',
           'type': '(node)=>boolean',
           'defaultValue': '',
           'desc': { 'zh-CN': '判断节点能否被拖拽', 'en-US': 'Whether a node can be dragged.' },
-          'demoId': 'allow-drag'
+          'demoId': 'drag'
         },
         {
           'name': 'allow-drop',
@@ -707,7 +707,7 @@ export default {
             'en-US':
               "Whether the target node can be placed during dragging. The type parameter has three situations: 'prev',' inner', and'next', which indicate that it is placed before the target node, inserted into the target node, and placed after the target node respectively"
           },
-          'demoId': 'allow-drop'
+          'demoId': 'drag'
         },
         {
           'name': 'show-contextmenu',
@@ -717,7 +717,7 @@ export default {
             'zh-CN': '是否启用右键菜单功能',
             'en-US': 'Whether to enable the right-click menu function'
           },
-          'demoId': 'node-draggable'
+          'demoId': 'contextmenu'
         },
         {
           'name': 'accordion',
@@ -747,7 +747,7 @@ export default {
             'zh-CN': '是否在第一次展开某个树节点后才渲染其子节点',
             'en-US': 'Whether to render child nodes after the first expansion of a tree node'
           },
-          'demoId': 'other'
+          'demoId': ''
         },
         {
           'name': 'show-check-easily',
@@ -839,7 +839,7 @@ export default {
             'zh-CN': '懒加载时，加载数据成功的事件;<br>参数说明：{data: 加载的数据}',
             'en-US': 'During lazy loading, data is loaded successfully. <br> Parameter description: {data: loaded data}'
           },
-          'demoId': 'check-op'
+          'demoId': 'lazy'
         },
         {
           'name': 'node-drop',
@@ -1039,7 +1039,7 @@ export default {
           'demoId': 'node-hl'
         },
         {
-          'name': 'getNodeKey ',
+          'name': 'getNodeKey',
           'type': '(node:object) => number',
           'defaultValue': '',
           'desc': {
@@ -1049,7 +1049,7 @@ export default {
           'demoId': 'node-hl'
         },
         {
-          'name': 'getNodePath ',
+          'name': 'getNodePath',
           'type': '(key:string) => object[]',
           'defaultValue': '',
           'desc': {
@@ -1066,7 +1066,7 @@ export default {
             'zh-CN': '通过 key 设置某个节点的当前选中状态',
             'en-US': 'Use key to set the selected status of a node'
           },
-          'demoId': 'node-key'
+          'demoId': 'node-op'
         },
         {
           'name': 'setCurrentNode',
@@ -1076,7 +1076,7 @@ export default {
             'zh-CN': '通过节点数据， 设置某个节点的当前选中状态',
             'en-US': 'This section describes how to set the selected status of a node based on node data'
           },
-          'demoId': 'node-key'
+          'demoId': 'node-op'
         },
         {
           'name': 'expandAllNodes',
@@ -1221,7 +1221,7 @@ export default {
           'demoId': 'check-op'
         },
         {
-          'name': 'setCurrentRadio ',
+          'name': 'setCurrentRadio',
           'type': '() => void',
           'defaultValue': '',
           'desc': {
@@ -1261,7 +1261,7 @@ export default {
           'demoId': 'edit'
         },
         {
-          'name': 'addNode ',
+          'name': 'addNode',
           'type': '(node:object) => void',
           'defaultValue': '',
           'desc': {

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

@@ -265,7 +265,7 @@ export default {
     {
       'name': 'user',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
           'type': 'string',

package/demos/pc/app/user-account/webdoc/user-account.js

@@ -25,7 +25,7 @@ export default {
     {
       'name': 'user-account',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'getUserInfo',
           'type': 'Function',

package/demos/pc/app/user-contact/data-source.spec.ts

@@ -5,9 +5,6 @@ test('设置数据源', async ({ page }) => {
   await page.goto('user-contact#data-source')
   const partBox = page.locator('.dropdown-part')
   await partBox.hover()
-  const imageUrl = page.locator('.tiny-user-head div').first()
-  await expect(imageUrl).toHaveCSS(
-    'background-image',
-    'url("user-contact#static/images/fruit.jpg")'
-  )
+  const imageUrl = page.locator('.tiny-user-contact').first()
+  await expect(imageUrl).toHaveText('小红')
 })

package/demos/pc/app/user-link/webdoc/user-link.js

@@ -92,7 +92,7 @@ export default {
     {
       'name': 'user-link',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
           'type': 'string',

package/demos/pc/app/watermark/basic-usage.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('watermark#basic')
+
+  const watermark = page.locator('#basic .tiny-watermark-wrapper')
+  await expect(watermark.locator('div').nth(1)).toHaveCSS('z-index', '9')
+})

package/demos/pc/app/watermark/image.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('图片水印', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('watermark#image')
+
+  const watermark = page.locator('#image .tiny-watermark-wrapper')
+  await expect(watermark.locator('div').nth(1)).toHaveCSS('z-index', '9')
+})

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

@@ -25,10 +25,10 @@ export default {
     {
       'name': 'watermark',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'width',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '120',
           'desc': {
             'zh-CN': '水印的宽度, 最小宽度120',
@@ -38,7 +38,7 @@ export default {
         },
         {
           'name': 'height',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '64',
           'desc': {
             'zh-CN': '水印的高度, 最小高度64',
@@ -48,7 +48,7 @@ export default {
         },
         {
           'name': 'rotate',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '-22',
           'desc': {
             'zh-CN': '水印绘制时，旋转的角度，单位 °',
@@ -58,7 +58,7 @@ export default {
         },
         {
           'name': 'zIndex',
-          'type': 'Number',
+          'type': 'number',
           'defaultValue': '9',
           'desc': {
             'zh-CN': '追加的水印元素的 `z-index `',
@@ -68,7 +68,7 @@ export default {
         },
         {
           'name': 'image',
-          'type': 'String',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式),此属性高于content',
@@ -78,7 +78,7 @@ export default {
         },
         {
           'name': 'content',
-          'type': 'String | String[]',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '水印文字内容，此属性低于image',
@@ -88,7 +88,7 @@ export default {
         },
         {
           'name': 'font',
-          'type': 'Font',
+          'type': 'object',
           'defaultValue': '',
           'desc': {
             'zh-CN': `文字样式,可配置字段如下{
@@ -104,7 +104,7 @@ export default {
         },
         {
           'name': 'gap',
-          'type': '[Number, Number] ',
+          'type': 'array',
           'defaultValue': '[100, 100]',
           'desc': {
             'zh-CN': '水印之间的间距',
@@ -114,7 +114,7 @@ export default {
         },
         {
           'name': 'offset',
-          'type': '[Number, Number] ',
+          'type': 'array',
           'defaultValue': '[20, 20] ',
           'desc': {
             'zh-CN': '水印距离容器左上角的偏移量，默认为`20 `',
@@ -124,7 +124,7 @@ export default {
         },
         {
           'name': 'interlaced',
-          'type': 'Boolean',
+          'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
             'zh-CN': '水印是否交错',

package/demos/pc/menus.js

@@ -244,7 +244,15 @@ export const cmpMenus = [
         }
       },
       { 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' },
-      { 'nameCn': '表头详情栏', 'name': 'DetailPage', 'key': 'detail-page' },
+      {
+        'nameCn': '表头详情栏',
+        'name': 'DetailPage',
+        'key': 'detail-page',
+        'mark': {
+          'type': 'danger',
+          'text': 'Del'
+        }
+      },
       { 'nameCn': '图片预览', 'name': 'Image', 'key': 'image' },
       { 'nameCn': '评分', 'name': 'Rate', 'key': 'rate' },
       { 'nameCn': '文字滚动', 'name': 'ScrollText', 'key': 'scroll-text' },

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

@@ -34,7 +34,7 @@ npm install @opentiny/vue@2
 If it's`Vite`After the dependency is installed, modify the project.`vite.config.js`, add the following code highlighted section:
 
 ```js {8-10}
-//vite.config.js
+// vite.config.js
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -52,6 +52,11 @@ export default defineConfig({
 <p> To avoid the uncertainty associated with monthly (minor) upgrades of <code> @opentiny/vue </code>, it is recommended to use ~ before relying on the version number of the package in <code> package.json </code> in your project.
 For example, <code>"@opentiny/vue": "~3.12.0</code>. </p>
 </div>
+<div class="tip custom-block">
+<br>
+<p><code> @opentiny/vue </code> supports multiple modes. If your project is not a mobile project, you can declare the value of <code>TINY_MODE</code> in <code>process.env</code> in the above configuration code. In order to make the project during construction, the mobile side code can be shaken off and the volume of the packaged product can be optimized. For example, <code>'process.env': {... env,TINY_MODE:'pc'}</code>. </p>
+</div>
+
 ### Import through CDN
 
 In order to experience TinyVue components faster, you can also import TinyVue directly into the HTML page through CDN,you are advised to write two valid version numbers as follows.

package/demos/pc/webdoc/installation.md

@@ -52,6 +52,10 @@ export default defineConfig({
   <p>为了避免<code> @opentiny/vue </code> 的月度版本(minor)升级带来的不确定因素，因此推荐在您的工程中的<code> package.json </code> 中依赖包的版本号前使用 ~，
     比如 <code>"@opentiny/vue": "~3.12.0</code>。</p>
 </div>
+<div class="tip custom-block">
+  <br>
+  <p><code> @opentiny/vue </code> 支持多种模式。如果您的工程非移动端工程，可以在上面配置代码中的<code>process.env</code>中，声明<code>TINY_MODE</code>的值，以使工程在构建时，能将移动端模式的代码摇掉，优化打包产物的体积。比如 <code>'process.env': { ...process.env,TINY_MODE:'pc' }</code>。</p>
+</div>
 
 ### 通过 CDN 方式引入
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -18,14 +18,14 @@
     "@opentiny/vue-repl": "^1.1.0",
     "@opentiny/vue": "~3.12.0",
     "@opentiny/vue-common": "~3.12.0",
-    "@opentiny/vue-design-aurora": "~3.12.0",
     "@opentiny/vue-icon": "~3.12.0",
-    "@opentiny/vue-design-smb": "~3.12.0",
     "@opentiny/vue-icon-saas": "~3.12.0",
-    "@opentiny/vue-theme": "~3.12.0",
+    "@opentiny/vue-design-smb": "~3.12.0",
+    "@opentiny/vue-design-aurora": "~3.12.0",
     "@opentiny/vue-theme-mobile": "~3.12.0",
-    "@opentiny/vue-vite-import": "~1.1.5",
-    "@opentiny/vue-theme-saas": "~3.12.0"
+    "@opentiny/vue-theme": "~3.12.1",
+    "@opentiny/vue-theme-saas": "~3.12.0",
+    "@opentiny/vue-vite-import": "~1.1.5"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/playground.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
     <script>
-      const cdnHost = 'https://unpkg.com'
+      const cdnHost = 'https://npm.onmicrosoft.cn'
       window.localStorage.setItem('setting-cdn', cdnHost)
     </script>
   </head>

package/src/views/components/components.vue

@@ -55,7 +55,7 @@
                         <th width="15%">{{ i18nByKey('name') }}</th>
                         <th width="85%">{{ i18nByKey('desc') }}</th>
                       </tr>
-                      <tr v-else-if="key.includes('events')">
+                      <tr v-else-if="key.includes('events') || key.includes('methods')">
                         <th width="15%">{{ i18nByKey('name') }}</th>
                         <th width="20%">{{ i18nByKey('propType') }}</th>
                         <th width="65%">{{ i18nByKey('desc') }}</th>
@@ -90,7 +90,7 @@
                           ></a>
                           <span v-else v-html="row.type"></span>
                         </td>
-                        <td v-if="!key.includes('slots') && !key.includes('events')">
+                        <td v-if="!key.includes('slots') && !key.includes('events') && !key.includes('methods')">
                           <span
                             v-html="typeof row.defaultValue === 'string' ? row.defaultValue || '--' : row.defaultValue"
                           ></span>

package/demos/mobile/app/input/autofocus.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="textarea" autosize autofocus placeholder="请输入内容"></tiny-input>
-    <tiny-input
-      v-model="input"
-      type="textarea"
-      :autosize="{ minRows: 2, maxRows: 3 }"
-      placeholder="请输入内容"
-    ></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-.input-wrap .tiny-mobile-textarea + .tiny-mobile-textarea {
-  margin-top: 24px;
-}
-</style>

package/demos/mobile/app/input/autosize.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input
-      v-model="input"
-      type="textarea"
-      autosize
-      disabled
-      textarea-title="textarea-title"
-      placeholder="请输入内容"
-    ></tiny-input>
-    <tiny-input
-      v-model="input"
-      type="textarea"
-      :autosize="{ minRows: 2, maxRows: 3 }"
-      placeholder="请输入内容"
-    ></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/blur-focus.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-button @click="focus">获取焦点</tiny-button>
-    <tiny-button @click="blur">失去焦点</tiny-button>
-    <br /><br />
-    <tiny-input ref="input" v-model="input"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      input: ''
-    }
-  },
-  methods: {
-    focus() {
-      this.$refs.input.focus()
-    },
-    blur() {
-      this.$refs.input.blur()
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/cols-rows.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="textarea" :cols="5" :rows="1"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      input: '测试 cols 属性'
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/form.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="input" type="form" is-select :select-menu="selectMenu" placeholder="下拉功能"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      selectMenu: [
-        {
-          label: '黄金糕'
-        },
-        {
-          label: '双皮奶'
-        },
-        {
-          label: '蚵仔煎'
-        },
-        {
-          label: '龙须面'
-        },
-        {
-          label: '北京烤鸭'
-        }
-      ],
-      input: ''
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/input-event.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-input v-model="value" clearable @blur="blur" @focus="focus" @input="input"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input
-  },
-  data() {
-    return {
-      value: '事件测试'
-    }
-  },
-  methods: {
-    blur() {
-      console.log('blur 事件')
-    },
-    focus() {
-      console.log('focus 事件')
-    },
-    input(value) {
-      console.log('input' + value)
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>

package/demos/mobile/app/input/method-select.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="input-wrap">
-    <tiny-button @click="click">选中输入框内容</tiny-button>
-    <br /><br />
-    <tiny-input ref="input" v-model="input"></tiny-input>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Input, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyInput: Input,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      input: '我是输入框'
-    }
-  },
-  methods: {
-    click() {
-      this.$refs.input.select()
-    }
-  }
-}
-</script>
-
-<style>
-.input-wrap {
-  padding-top: 20px;
-  height: 100%;
-  background: #f4f4f4;
-}
-</style>