@opentiny/vue-docs 2.2.8 → 2.2.9

package/demos/pc/app/icon/iconGroups.js

@@ -196,6 +196,7 @@ export const iconGroups = {
   ],
   Tools: [
     'IconAdd',
+    'IconAddPicture',
     'IconAlignBaseline',
     'IconAlignCenter',
     'IconAlignFlexCenter',

package/demos/pc/app/icon/list-composition-api.vue

@@ -32,6 +32,14 @@ import { iconGroups } from './iconGroups.js'
 
 const all = Object.values(iconGroups).flat()
 iconGroups.Others = Object.keys(Svgs).filter((name) => !all.includes(name) && name[0] === 'I')
+
+// 排序
+Object.keys(iconGroups).forEach((k) => {
+  iconGroups[k] = iconGroups[k].sort((a, b) => {
+    return a > b ? 1 : -1
+  })
+})
+
 const searchName = ref('')
 
 function click(name) {

package/demos/pc/app/icon/list.vue

@@ -37,6 +37,13 @@ export default {
     const all = Object.values(iconGroups).flat()
     iconGroups.Others = Object.keys(Svgs).filter((name) => !all.includes(name) && name[0] === 'I')
 
+    // 排序
+    Object.keys(iconGroups).forEach((k) => {
+      iconGroups[k] = iconGroups[k].sort((a, b) => {
+        return a > b ? 1 : -1
+      })
+    })
+
     return {
       iconGroups,
       Svgs,

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

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('基础用法', async ({ page }) => {
+test('测试基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('image#basic-usage')
 

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

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('事件', async ({ page }) => {
+test('测试事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('image#events')
   const errorSlot = page.locator('.tiny-image__error')

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

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('懒加载', async ({ page }) => {
+test('测试懒加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('image#lazy')
 

package/demos/pc/app/image/preview-in-dialog.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('对话框中预览图片', async ({ page }) => {
+test('测试对话框中预览图片', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('image#preview-in-dialog')
 

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

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('图片大图', async ({ page }) => {
+test('测试图片预览大图', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
   await page.goto('image#preview')

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

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('插槽', async ({ page }) => {
+test('测试插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
   await page.goto('image#slot')

package/demos/pc/app/image/webdoc/image.cn.md

@@ -4,4 +4,6 @@ title: Image 图片预览
 
 # Image 图片预览
 
-<div>图片容器，在保留原生 img 的特性下，支持懒加载，自定义占位、加载失败等功能。</div>
+<div>
+图片组件，支持懒加载以及自适应容器大小等，同时还支持点击全屏浏览图册的功能。
+</div>

package/demos/pc/app/image/webdoc/image.en.md

@@ -4,4 +4,6 @@ title: Image preview
 
 # Image preview
 
-<div>Image container, which supports lazy loading, customized placeholder, and loading failure while retaining the native IMG feature.</div>
+<div>
+Image components, support lazy loading and adaptive container size, etc., but also support the function of clicking full-screen browse album.
+</div>

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

@@ -122,7 +122,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置预览图片路径',
+            'zh-CN': '设置图片路径',
             'en-US': 'Set the path of the preview image.'
           },
           'demoId': 'basic-usage'
@@ -132,9 +132,8 @@ export default {
           'type': `'fill' | 'contain' | 'cover' | 'none' | 'scale-down '`,
           'defaultValue': '',
           'desc': {
-            'zh-CN': '确定图片如何适应容器框，同原生 object-fit',
-            'en-US':
-              'Determine how the image adapts to the container frame, which is the same as the native object-fit. '
+            'zh-CN': '确定图片如何适应容器大小',
+            'en-US': 'Determine how the image adapts to the container frame '
           },
           'demoId': 'basic-usage'
         },
@@ -142,7 +141,7 @@ export default {
           'name': 'lazy',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否开启懒加载', 'en-US': 'Whether to enable lazy loading' },
+          'desc': { 'zh-CN': '是否懒加载', 'en-US': 'Whether to enable lazy loading' },
           'demoId': 'lazy'
         },
         {
@@ -150,10 +149,12 @@ export default {
           'type': 'string | HTMLElement',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '开启懒加载后，监听 scroll 事件的容器,该属性的默认值为 最近一个 overflow 值为 auto 或 scroll 的父元素',
-            'en-US':
-              'After lazy loading is enabled, the container listens for the scroll event. The default value of this property is the parent element of the last overflow value being auto or scroll'
+            'zh-CN': `指定滚动容器。启用懒加载时，监听滚动容器的 scroll 事件来懒加载。
+                该属性用于设置图片的容器,当未设置容器时，默认会取最近一个 overflow 值为 auto 或 scroll 的父元素做为滚动容器
+              `,
+            'en-US': `Specifies the scroll container. When lazy loading is enabled, the scroll event of the image component container is monitored for lazy loading. 
+                This property is used to set the image container. When the container is not set, the default will take the parent element of the last overflow value as auto or scroll as the scroll container 
+              `
           },
           'demoId': ''
         },
@@ -161,7 +162,10 @@ export default {
           'name': 'preview-src-list',
           'type': 'string[]',
           'defaultValue': '[]',
-          'desc': { 'zh-CN': '开启图片预览功能', 'en-US': 'Enable the image preview function.' },
+          'desc': {
+            'zh-CN': '指定预览大图时的图片列表',
+            'en-US': 'Specifies the list of images to use when previewing a large image'
+          },
           'demoId': 'preview'
         },
         {
@@ -169,8 +173,8 @@ export default {
           'type': 'number',
           'defaultValue': '2000',
           'desc': {
-            'zh-CN': '设置图片预览外层元素的 z-index',
-            'en-US': 'Set the z-index of the image preview wrapper'
+            'zh-CN': '图片预览功能时，设置最外层元素的 z-index',
+            'en-US': 'For the image preview function, set the z-index of the outermost element'
           },
           'demoId': ''
         }
@@ -178,16 +182,22 @@ export default {
       'events': [
         {
           'name': 'load',
-          'type': '',
+          'type': '(ev) => void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '图片加载成功触发', 'en-US': 'When the image loading success triggered.' },
+          'desc': {
+            'zh-CN': '图片加载成功的触发的事件，参数为原生的成功事件',
+            'en-US': 'When the image loading success triggered,the parameter is a native success event.'
+          },
           'demoId': 'events'
         },
         {
           'name': 'error',
-          'type': '',
+          'type': '(ev) => void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '图片加载失败触发', 'en-US': 'When the Image loading failure triggered' },
+          'desc': {
+            'zh-CN': '图片加载失败后触发的事件，参数为原生的失败事件',
+            'en-US': 'When the Image loading failure triggered,the parameter is a native failure event'
+          },
           'demoId': 'events'
         }
       ],
@@ -196,14 +206,20 @@ export default {
           'name': 'placeholder',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '加载中的占位内容插槽', 'en-US': 'Placeholder Slot that is not loaded to the image' },
+          'desc': {
+            'zh-CN': '图片加载的占位内容插槽',
+            'en-US': 'Placeholder Slot that is not loaded to the image'
+          },
           'demoId': 'slot'
         },
         {
           'name': 'error',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '加载失败的占位内容插槽', 'en-US': 'Error Slot that fails to be loaded' },
+          'desc': {
+            'zh-CN': '图片加载失败的占位内容插槽',
+            'en-US': 'Error Slot that fails to be loaded'
+          },
           'demoId': 'slot'
         }
       ]

package/demos/pc/app/input/method-addMemory-composition-api.vue

@@ -5,6 +5,7 @@
       v-model="input"
       name="textMemory"
       placeholder="Please input"
+      :memory-space="3"
       @change="addMemory"
     ></tiny-input>
   </div>

package/demos/pc/app/input/method-addMemory.spec.ts

@@ -17,4 +17,15 @@ test('[Input]method-addMemory', async ({ page }) => {
   await input.fill('')
   const box = await page.locator('.tiny-modal__body').getByText('1234')
   await expect(box).toBeVisible()
+
+  // memory-space = 3
+  await input.fill('2222')
+  await input.blur()
+  await input.fill('3333')
+  await input.blur()
+  await input.fill('4444')
+  await input.blur()
+  await input.fill('')
+  await input.click()
+  await expect(page.locator('.tiny-tall-storage .tiny-storage-item')).toHaveCount(3)
 })

package/demos/pc/app/input/method-addMemory.vue

@@ -5,6 +5,7 @@
       v-model="input"
       name="textMemory"
       placeholder="Please input"
+      :memory-space="3"
       @change="addMemory"
     ></tiny-input>
   </div>

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

@@ -295,6 +295,16 @@ export default {
           },
           'demoId': 'native'
         },
+        {
+          'name': 'memory-space',
+          'type': 'number',
+          'defaultValue': '5',
+          'desc': {
+            'zh-CN': '设置 addMemory 方法中，最大能保存条目的数量',
+            'en-US': 'Sets the maximum number of entries that can be saved in the addMemory method'
+          },
+          'demoId': 'method-addMemory'
+        },
         {
           'name': 'maxlength',
           'type': 'number',
@@ -347,7 +357,7 @@ export default {
         },
         {
           'name': 'prefix-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': {
             'zh-CN': '输入框头部图标',
@@ -428,7 +438,7 @@ export default {
         },
         {
           'name': 'suffix-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': {
             'zh-CN': '输入框尾部图标',

package/demos/pc/app/ip-address/webdoc/ip-address.cn.md

@@ -1,7 +1,7 @@
 ---
-title: IpAddress ip地址输入框
+title: IpAddress IP地址输入框
 ---
 
-# IpAddress ip 地址输入框
+# IpAddress IP地址输入框
 
 <div>IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。</div>

package/demos/pc/app/ip-address/webdoc/ip-address.js

@@ -79,8 +79,8 @@ export default {
       'props': [
         {
           'name': 'delimiter',
-          'type': 'VueComponent',
-          'defaultValue': 'IconDotIpv4',
+          'type': 'Component',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '设置IP段之间的分隔符，默认图标为IconDotIpv4',
             'en-US': 'Set the separator between IP segments, default icon is icon-dot-ipv4'

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

@@ -95,7 +95,7 @@ export default {
         },
         {
           'name': 'icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': { 'zh-CN': '图标组件', 'en-US': 'Icon component' },
           'demoId': 'custom-icon'

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

@@ -148,7 +148,7 @@ export default {
         },
         {
           'name': 'spinner',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': { 'zh-CN': '自定义加载图标', 'en-US': 'Customized loading icon class name' },
           'demoId': 'spinner'

package/demos/pc/app/milestone/show-number-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="handleClick(!showNum)" style="max-width: unset"
-      >设置 show-number 值为{{ !showNum }}</tiny-button
+      >设置 show-number 值为 {{ !showNum }}</tiny-button
     >
     <tiny-milestone
       :data="milestoneData"

package/demos/pc/app/milestone/show-number.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-button @click="handleClick(!showNum)" style="max-width: unset"
-      >设置 show-number 值为{{ !showNum }}</tiny-button
+      >设置 show-number 值为 {{ !showNum }}</tiny-button
     >
     <tiny-milestone
       :data="milestoneData"

package/demos/pc/app/milestone/solid-style-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="handleClick(!isSolid)" style="max-width: cancel">设置 solid 值为{{ !isSolid }}</tiny-button>
+    <tiny-button @click="handleClick(!isSolid)" style="max-width: cancel">设置 solid 值为 {{ !isSolid }}</tiny-button>
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" :solid="isSolid"></tiny-milestone>
   </div>
 </template>

package/demos/pc/app/milestone/solid-style.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="handleClick(!isSolid)" style="max-width: cancel">设置 solid 值为{{ !isSolid }}</tiny-button>
+    <tiny-button @click="handleClick(!isSolid)" style="max-width: cancel">设置 solid 值为 {{ !isSolid }}</tiny-button>
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" :solid="isSolid"></tiny-milestone>
   </div>
 </template>

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

@@ -135,7 +135,7 @@ export default {
         {
           'name': 'completed-field',
           'type': 'string',
-          'defaultValue': 'completed',
+          'defaultValue': `'completed'`,
           'desc': {
             'zh-CN': '设置节点完成状态对应的键值',
             'en-US': 'Set the key values corresponding to the node completion status'
@@ -167,7 +167,7 @@ export default {
         {
           'name': 'flag-content-field',
           'type': 'string',
-          'defaultValue': 'content',
+          'defaultValue': `'content'`,
           'desc': {
             'zh-CN': '设置旗子内容描述部分对应的键名',
             'en-US': 'Set the key name corresponding to the flag content description section'
@@ -177,7 +177,7 @@ export default {
         {
           'name': 'flag-field',
           'type': 'string',
-          'defaultValue': 'flags',
+          'defaultValue': `'flags'`,
           'desc': {
             'zh-CN': '设置旗子信息数组对应的键名',
             'en-US': 'Set the key name corresponding to the flag information array'
@@ -187,7 +187,7 @@ export default {
         {
           'name': 'flag-name-field',
           'type': 'string',
-          'defaultValue': 'name',
+          'defaultValue': `'name'`,
           'desc': {
             'zh-CN': '设置旗子标题对应的键名',
             'en-US': 'Set the key name corresponding to the flag title'
@@ -197,7 +197,7 @@ export default {
         {
           'name': 'flag-status-field',
           'type': 'string',
-          'defaultValue': 'status',
+          'defaultValue': `'status'`,
           'desc': {
             'zh-CN': '设置旗子状态对应的键名',
             'en-US': 'Set the key name corresponding to the flag state'
@@ -206,7 +206,7 @@ export default {
         },
         {
           'name': 'line-style',
-          'type': 'number | string',
+          'type': `'number' | 'string'`,
           'defaultValue': '1',
           'desc': {
             'zh-CN': `线条颜色取值模式为数字时，只有1和2可选；如果为字符串则需传入 16 进制颜色值<br />
@@ -235,7 +235,7 @@ export default {
         {
           'name': 'name-field',
           'type': 'string',
-          'defaultValue': 'name',
+          'defaultValue': `'name'`,
           'desc': {
             'zh-CN': '设置节点名称对应的键名',
             'en-US': 'Set the key name corresponding to the node name'
@@ -285,7 +285,7 @@ export default {
         {
           'name': 'status-field',
           'type': 'string',
-          'defaultValue': 'status',
+          'defaultValue': `'status'`,
           'desc': {
             'zh-CN': '设置节点状态对应的键名',
             'en-US': 'Set the key name corresponding to the node state'
@@ -295,7 +295,7 @@ export default {
         {
           'name': 'time-field',
           'type': 'string',
-          'defaultValue': 'time',
+          'defaultValue': `'time'`,
           'desc': {
             'zh-CN': '设置节点时间信息对应的键名',
             'en-US': 'Set the key name corresponding to node time information'

package/demos/pc/app/mind-map/basic-usage-composition-api.vue

@@ -0,0 +1,14 @@
+<template>
+  <tiny-mind-map class="mindmap" />
+</template>
+
+<script lang="ts" setup>
+import { MindMap as TinyMindMap } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>

package/demos/pc/app/mind-map/basic-usage.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test'
+
+test('基本使用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#basic-usage')
+
+  const root = page.locator('me-tpc').filter({ hasText: 'root' })
+  expect(root).not.toBeNull()
+  await expect(root).toHaveText('root')
+})
+test('追加节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#basic-usage')
+
+  await page.locator('me-tpc').click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('.map-canvas').press('Tab')
+  await expect(page.locator('me-main me-wrapper')).toHaveCount(2)
+})
+test('修改节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#basic-usage')
+  await page.locator('me-tpc').dblclick()
+  await page.locator('#input-box').fill('root-new')
+  await page.locator('#input-box').press('Enter')
+})
+test('删除节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#basic-usage')
+  await page.locator('me-tpc').click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.locator('me-tpc').nth(2).press('Delete')
+})

package/demos/pc/app/mind-map/basic-usage.vue

@@ -0,0 +1,20 @@
+<template>
+  <tiny-mind-map class="mindmap" />
+</template>
+
+<script lang="ts">
+import { MindMap } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMindMap: MindMap
+  }
+}
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>