@opentiny/vue-docs 2.2.19 → 2.2.21

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

@@ -1,7 +1,7 @@
 <template>
   <tiny-mind-map
     ref="mindmap"
-    class="mindmap"
+    class="demo-mind-map-event"
     @create="onCreate"
     @operation="onOperation"
     @select-node="onSelectNode"
@@ -15,10 +15,10 @@
 </template>
 
 <script setup>
-import { Notify, MindMap as TinyMindMap } from '@opentiny/vue'
+import { Modal, MindMap as TinyMindMap } from '@opentiny/vue'
 import { ref } from 'vue'
 
-const exmpleData = ref({
+const exampleData = ref({
   'nodeData': {
     'id': 'c9ee6647385c42de',
     'topic': '前端修仙指南',
@@ -60,66 +60,34 @@ const exmpleData = ref({
   }
 })
 const onCreate = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件create',
-    duration: 1000
-  })
+  Modal.message({ message: 'create 事件触发了', status: 'info' })
 }
 const onOperation = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件operation',
-    duration: 1000
-  })
+  Modal.message({ message: 'operation 事件触发了', status: 'info' })
 }
 const onSelectNode = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件selectNode',
-    duration: 1000
-  })
+  Modal.message({ message: 'selectNode 事件触发了', status: 'info' })
 }
 const onSelectNewNode = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件selectNewNode',
-    duration: 1000
-  })
+  Modal.message({ message: 'selectNewNode 事件触发了', status: 'info' })
 }
 const onSelectNodes = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件selectNodes',
-    duration: 1000
-  })
+  Modal.message({ message: 'selectNodes 事件触发了', status: 'info' })
 }
 const onUnselectNode = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件unselectNode',
-    duration: 1000
-  })
+  Modal.message({ message: 'unselectNode 事件触发了', status: 'info' })
 }
 const onUnselectNodes = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件unselectNodes',
-    duration: 1000
-  })
+  Modal.message({ message: 'unselectNodes 事件触发了', status: 'info' })
 }
 const onExpandNode = () => {
-  Notify({
-    type: 'info',
-    message: '触发事件expandNode',
-    duration: 1000
-  })
+  Modal.message({ message: 'expandNode 事件触发了', status: 'info' })
 }
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-event {
   width: 100%;
-  height: 300px;
+  height: 400px;
 }
 </style>

package/demos/pc/app/mind-map/event.spec.ts

@@ -1,14 +1,15 @@
 import { test, expect } from '@playwright/test'
 
 test('测试创建事件', async ({ page }) => {
-  await page.goto('mind-map#event')
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#event')
   await page.getByText('触发事件create').isVisible()
 })
 
 test('测试operation事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
-  await page.locator('me-tpc').click()
+  await page.locator('me-tpc').filter({ hasText: '前端修仙指南' }).click()
   await page.locator('.map-canvas').press('Tab')
   await page.getByText('触发事件operation').first().isVisible()
   // 新创建node时会触发selectNewNode事件
@@ -17,16 +18,17 @@ test('测试operation事件', async ({ page }) => {
   await page.getByText('触发事件selectNewNode').first().isVisible()
 })
 test('测试select-node, select-nodes, select-new-node事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: '算法 第四版' }).click()
   await page.locator('.map-canvas').press('Tab')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: '大话数据结构' }).click()
   await page.locator('.map-canvas').press('Tab')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: 'Javascript权威指南' }).click()
   await page
     .locator('me-tpc')
-    .nth(1)
     .filter({ hasText: 'new node' })
+    .nth(1)
     .click({
       modifiers: ['Control']
     })
@@ -34,10 +36,11 @@ test('测试select-node, select-nodes, select-new-node事件', async ({ page })
   await page.getByAltText('触发事件selectNodes').isVisible()
 })
 test('测试 unselect-node,unselect-nodes', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('mind-map#event')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: '算法 第四版' }).click()
   await page.locator('.map-canvas').press('Tab')
-  await page.locator('me-tpc').filter({ hasText: 'root' }).click()
+  await page.locator('me-tpc').filter({ hasText: '大话数据结构' }).click()
   await page.locator('.map-canvas').press('Tab')
 
   await page.locator('me-tpc').nth(2).click()

package/demos/pc/app/mind-map/event.vue

@@ -1,21 +1,23 @@
 <template>
-  <tiny-mind-map
-    ref="mindmap"
-    class="mindmap"
-    @create="onCreate"
-    @operation="onOperation"
-    @select-node="onSelectNode"
-    @select-new-node="onSelectNewNode"
-    @select-nodes="onSelectNodes"
-    @unselect-node="onUnselectNode"
-    @unselect-nodes="onUnselectNodes"
-    @expand-node="onExpandNode"
-    v-model="exampleData"
-  />
+  <div>
+    <tiny-mind-map
+      ref="mindmap"
+      class="demo-mind-map-event"
+      @create="onCreate"
+      @operation="onOperation"
+      @select-node="onSelectNode"
+      @select-new-node="onSelectNewNode"
+      @select-nodes="onSelectNodes"
+      @unselect-node="onUnselectNode"
+      @unselect-nodes="onUnselectNodes"
+      @expand-node="onExpandNode"
+      v-model="exampleData"
+    />
+  </div>
 </template>
 
-<script lang="jsx">
-import { MindMap, Notify } from '@opentiny/vue'
+<script>
+import { MindMap, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -69,68 +71,36 @@ export default {
   },
   methods: {
     onCreate() {
-      Notify({
-        type: 'info',
-        message: '触发事件create',
-        duration: 1000
-      })
+      Modal.message({ message: 'create 事件触发了', status: 'info' })
     },
     onOperation() {
-      Notify({
-        type: 'info',
-        message: '触发事件operation',
-        duration: 1000
-      })
+      Modal.message({ message: 'operation 事件触发了', status: 'info' })
     },
     onSelectNode() {
-      Notify({
-        type: 'info',
-        message: '触发事件selectNode',
-        duration: 1000
-      })
+      Modal.message({ message: 'selectNode 事件触发了', status: 'info' })
     },
     onSelectNewNode() {
-      Notify({
-        type: 'info',
-        message: '触发事件selectNewNode',
-        duration: 1000
-      })
+      Modal.message({ message: 'selectNewNode 事件触发了', status: 'info' })
     },
     onSelectNodes() {
-      Notify({
-        type: 'info',
-        message: '触发事件selectNodes',
-        duration: 1000
-      })
+      Modal.message({ message: 'selectNodes 事件触发了', status: 'info' })
     },
     onUnselectNode() {
-      Notify({
-        type: 'info',
-        message: '触发事件unselectNode',
-        duration: 1000
-      })
+      Modal.message({ message: 'unselectNode 事件触发了', status: 'info' })
     },
     onUnselectNodes() {
-      Notify({
-        type: 'info',
-        message: '触发事件unselectNodes',
-        duration: 1000
-      })
+      Modal.message({ message: 'unselectNodes 事件触发了', status: 'info' })
     },
     onExpandNode() {
-      Notify({
-        type: 'info',
-        message: '触发事件expandNode',
-        duration: 1000
-      })
+      Modal.message({ message: 'expandNode 事件触发了', status: 'info' })
     }
   }
 }
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-event {
   width: 100%;
-  height: 300px;
+  height: 400px;
 }
 </style>

package/demos/pc/app/mind-map/export-data-composition-api.vue

@@ -1,12 +1,12 @@
 <template>
-  <tiny-mind-map class="mindmap" ref="mindmap" @create="onCreate" v-model="exampleData" />
   <tiny-button @click="exportData">导出数据</tiny-button>
   <tiny-button @click="importData" :loading="loading">导入示例数据</tiny-button>
   <tiny-button @click="clearData" :loading="loading">清空数据</tiny-button>
+  <tiny-mind-map class="demo-mind-map-export-date" ref="mindmap" @create="onCreate" v-model="exampleData" />
 </template>
 
 <script setup>
-import { MindMap as TinyMindMap, Button as TinyButton, Notify } from '@opentiny/vue'
+import { MindMap as TinyMindMap, Button as TinyButton, Modal } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const render = ref(null)
@@ -57,11 +57,8 @@ const onCreate = (instance) => {
 }
 const exportData = () => {
   if (render.value) {
-    Notify({
-      type: 'info',
-      message: '数据已经输出于控制台, 请打开控制台查看'
-    })
-    // eslint-disable-next-line no-console
+    Modal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
+
     console.log(render.value.getData())
   }
 }
@@ -101,8 +98,9 @@ const clearData = () => {
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-export-date {
   width: 100%;
-  height: 300px;
+  height: 400px;
+  margin-top: 10px;
 }
 </style>

package/demos/pc/app/mind-map/export-data.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-mind-map class="mindmap" ref="mindmap" @create="onCreate" v-model="exampleData" />
-  <tiny-button @click="exportData">导出数据</tiny-button>
-  <tiny-button @click="importData" :loading="loading">导入示例数据</tiny-button>
-  <tiny-button @click="clearData" :loading="loading">清空数据</tiny-button>
+  <div>
+    <tiny-button @click="exportData">导出数据</tiny-button>
+    <tiny-button @click="importData" :loading="loading">导入示例数据</tiny-button>
+    <tiny-button @click="clearData" :loading="loading">清空数据</tiny-button>
+    <tiny-mind-map class="demo-mind-map-date" ref="mindmap" @create="onCreate" v-model="exampleData" />
+  </div>
 </template>
 
-<script lang="jsx">
-import { MindMap, Button, Notify } from '@opentiny/vue'
+<script>
+import { MindMap, Button, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -66,11 +68,8 @@ export default {
     },
     exportData() {
       if (this.render) {
-        Notify({
-          type: 'info',
-          message: '数据已经输出于控制台, 请打开控制台查看'
-        })
-        // eslint-disable-next-line no-console
+        Modal.message({ message: '数据已经输出于控制台, 请打开控制台查看', status: 'info' })
+
         console.log(this.render.getData())
       }
     },
@@ -112,8 +111,9 @@ export default {
 </script>
 
 <style scoped>
-.mindmap {
+.demo-mind-map-date {
   width: 100%;
-  height: 300px;
+  height: 400px;
+  margin-top: 10px;
 }
 </style>

package/demos/pc/app/mind-map/webdoc/mind-map.js

@@ -1,5 +1,5 @@
 export default {
-  column: '2',
+  column: '1',
   owner: '',
   demos: [
     {
@@ -10,32 +10,60 @@ export default {
       },
       codeFiles: ['basic-usage.vue'],
       desc: {
-        'zh-CN': '本示例介绍了脑图的基本使用方法',
-        'en-US': 'This example introduces the basic usage of mind map'
+        'zh-CN':
+          '通过<code>Tab</code> 键增加子节点；<br/>' +
+          '通过<code>Enter</code> 键增加同级节点；<br/>' +
+          '通过<code>Delete</code> 键删除选中的单个或区域节点；<br/>' +
+          '通过<code>Ctrl + C/V</code> 实现节点的复制粘贴；<br/>' +
+          '通过鼠标滚轮＋ <code>Shift</code> 进行左右滚动；<br/>' +
+          '通过鼠标滚轮进行上下滚动；也可以使用鼠标点击拖动移动节点。',
+        'en-US':
+          'Press <code>Tab</code> to add a subnode. <br/>' +
+          'Press <code>Enter</code> to add a node of the same level. <br/>' +
+          'Press <code>Delete</code> to delete the selected node or area node. <br/>' +
+          'Copy and paste the node through <code>Ctrl + C/V</code>; <br/>' +
+          'Scroll left and right with the mouse wheel + <code>Shift</code>; <br/>' +
+          'Scroll up and down with the mouse wheel; You can also move nodes by clicking and dragging with the mouse.'
       }
     },
     {
       demoId: 'export-data',
       name: {
-        'zh-CN': '导出数据',
-        'en-US': 'Export data'
+        'zh-CN': '数据处理',
+        'en-US': 'Data Processing'
       },
       codeFiles: ['export-data.vue'],
       desc: {
-        'zh-CN': '本demo讲解了如何导入导出脑图',
-        'en-US': 'This demo introduces how to import/exprot mind map data'
+        'zh-CN': '通过对实例的获取实现对数据的导出、导入、清空等功能。',
+        'en-US': 'Export, import, and clear data by obtaining instances.'
       }
     },
     {
       demoId: 'event',
       name: {
-        'zh-CN': '事件触发',
+        'zh-CN': '事件',
         'en-US': 'Event'
       },
       codeFiles: ['event.vue'],
       desc: {
-        'zh-CN': '本demo讲解了该组件的所有可触发事件',
-        'en-US': 'This demo explains all the triggering events of the build'
+        'zh-CN':
+          '<code>create</code> 创建实例触发事件；<br/>' +
+          '<code>operation</code> 节点重新计算触发事件；<br/>' +
+          '<code>selectNode</code> 选中节点触发事件；<br/>' +
+          '<code>selectNewNode</code> 新增节点触发事件；<br/>' +
+          '<code>selectNodes</code> 选中多个节点触发事件；<br/>' +
+          '<code>unselectNode</code> 取消选择节点触发事件；<br/>' +
+          '<code>unselectNodes</code> 取消多个选择节点触发事件；<br/>' +
+          '<code>expandNode</code> 展开节点触发事件；<br/>',
+        'en-US':
+          '<code>create</code> Create an instance to trigger an event;<br/>' +
+          '<code>operation</code> The node recalculates the trigger event;<br/>' +
+          '<code>selectNode</code> Select a node to trigger an event;<br/>' +
+          '<code>selectNewNode</code> Add a node to trigger an event;<br/>' +
+          '<code>selectNodes</code> Select multiple nodes to trigger events;<br/>' +
+          '<code>unselectNode</code> Deselect a node to trigger an event;<br/>' +
+          '<code>unselectNodes</code> Cancel triggering events for multiple selected nodes;<br/>' +
+          '<code>expandNode</code> Expand the node to trigger an event;<br/>'
       }
     }
   ]

package/demos/pc/app/numeric/controls-composition-api.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="numeric-controls-demo">
-    <p>1. 隐藏加减按钮</p>
-    <tiny-numeric v-model="value1" :controls="controls" show-left></tiny-numeric>
-    <p>2. 加减按钮全置于右侧</p>
-    <tiny-numeric v-model="value2" controls-position="right"></tiny-numeric>
+    <p>隐藏加减按钮:</p>
+    <tiny-numeric v-model="value1" :controls="controls" show-left class="numeric-class"></tiny-numeric>
+    <p>加减按钮全置于右侧:</p>
+    <tiny-numeric v-model="value2" controls-position="right" class="numeric-class"></tiny-numeric>
   </div>
 </template>
 
@@ -15,3 +15,9 @@ const controls = ref(false)
 const value1 = ref(1)
 const value2 = ref(2)
 </script>
+
+<style scoped>
+.numeric-class {
+  margin: 4px 0px;
+}
+</style>

package/demos/pc/app/numeric/controls.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="numeric-controls-demo">
-    <p>1. 隐藏加减按钮</p>
-    <tiny-numeric v-model="value1" :controls="controls" show-left></tiny-numeric>
-    <p>2. 加减按钮全置于右侧</p>
-    <tiny-numeric v-model="value2" controls-position="right"></tiny-numeric>
+    <p>隐藏加减按钮:</p>
+    <tiny-numeric v-model="value1" :controls="controls" show-left class="numeric-class"></tiny-numeric>
+    <p>加减按钮全置于右侧:</p>
+    <tiny-numeric v-model="value2" controls-position="right" class="numeric-class"></tiny-numeric>
   </div>
 </template>
 
@@ -23,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.numeric-class {
+  margin: 4px 0px;
+}
+</style>

package/demos/pc/app/numeric/empty-value-composition-api.vue

@@ -0,0 +1,15 @@
+<template>
+  <tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Numeric as TinyNumeric, Modal } from '@opentiny/vue'
+
+const step = ref(2)
+const stepNum = ref(1)
+
+function onChange(val, oldVal) {
+  Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+}
+</script>

package/demos/pc/app/numeric/empty-value.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('设定清空输入后的绑定值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('numeric#empty-value')
+
+  const numeric = page.locator('.tiny-numeric').first()
+  const numericInput = numeric.locator('.tiny-numeric__input-inner')
+  const message = page.getByText('null 1')
+
+  await numericInput.fill('')
+  await numericInput.blur()
+
+  await expect(message).toBeVisible()
+})

package/demos/pc/app/numeric/empty-value.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-numeric v-model="stepNum" :step="step" :empty-value="null" @change="onChange" allow-empty></tiny-numeric>
+</template>
+
+<script>
+import { Numeric, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric: Numeric
+  },
+  data() {
+    return {
+      step: 2,
+      stepNum: 1
+    }
+  },
+  methods: {
+    onChange(val, oldVal) {
+      Modal.message({ message: `${val} ${oldVal}`, status: 'info' })
+    }
+  }
+}
+</script>

package/demos/pc/app/numeric/mouse-wheel.spec.ts

@@ -7,7 +7,7 @@ test('鼠标滚轮事件', async ({ page }) => {
   const numeric = page.getByRole('spinbutton')
   const initVal = Number(await numeric.inputValue())
   await numeric.click()
-  await page.mouse.wheel(0, -100)
+  await page.mouse.wheel(0, -1000)
   const currentVal = Number(await numeric.inputValue())
   expect(currentVal).toBeGreaterThanOrEqual(initVal)
 })

package/demos/pc/app/numeric/precision-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
-  <p>1、数值精度</p>
-  <tiny-numeric v-model="value" :precision="precision"></tiny-numeric>
-  <p>2、数值格式</p>
-  <tiny-numeric style="width: 300px" v-model="value1" :format="format"></tiny-numeric>
+  <p>数值精度:</p>
+  <tiny-numeric v-model="value" :precision="precision" class="numeric-class"></tiny-numeric>
+  <p>数值格式:</p>
+  <tiny-numeric style="width: 300px" v-model="value1" :format="format" class="numeric-class"></tiny-numeric>
 </template>
 
 <script setup lang="ts">
@@ -26,3 +26,9 @@ const format = reactive({
   suffix: '@' // 后置标识
 })
 </script>
+
+<style scoped>
+.numeric-class {
+  margin: 4px 0px;
+}
+</style>

package/demos/pc/app/numeric/precision.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <p>1、数值精度</p>
-    <tiny-numeric v-model="value" :precision="precision"></tiny-numeric>
-    <p>2、数值格式</p>
-    <tiny-numeric style="width: 300px" v-model="value1" :format="format"></tiny-numeric>
+    <p>数值精度:</p>
+    <tiny-numeric v-model="value" :precision="precision" class="numeric-class"></tiny-numeric>
+    <p>数值格式:</p>
+    <tiny-numeric style="width: 300px" v-model="value1" :format="format" class="numeric-class"></tiny-numeric>
   </div>
 </template>
 
@@ -36,3 +36,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.numeric-class {
+  margin: 4px 0px;
+}
+</style>

package/demos/pc/app/numeric/string-mode-composition-api.vue

@@ -0,0 +1,10 @@
+<template>
+  <tiny-numeric style="width: 500px" v-model="stepNum" :step="step" string-mode :precision="20"></tiny-numeric>
+</template>
+
+<script setup>
+import { Numeric as TinyNumeric } from '@opentiny/vue'
+import { ref } from 'vue'
+const step = ref('0.00000000000000000002')
+const stepNum = ref('0.00000000000000000002')
+</script>

package/demos/pc/app/numeric/string-mode.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('高精度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('numeric#string-mode')
+
+  const input = page.getByRole('spinbutton')
+  const increaseBtn = page.locator('.tiny-numeric__increase')
+  const decreaseBtn = page.locator('.tiny-numeric__decrease')
+  await increaseBtn.click()
+  const increasedVal = await input.inputValue()
+  expect(increasedVal).toContain('0.00000000000000000004')
+
+  await decreaseBtn.click()
+  const decreasedVal = await input.inputValue()
+  expect(decreasedVal).toContain('0.00000000000000000002')
+})

package/demos/pc/app/numeric/string-mode.vue

@@ -0,0 +1,19 @@
+<template>
+  <tiny-numeric style="width: 500px" v-model="stepNum" :step="step" string-mode :precision="20"></tiny-numeric>
+</template>
+
+<script>
+import { Numeric } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric: Numeric
+  },
+  data() {
+    return {
+      step: '0.00000000000000000002',
+      stepNum: '0.00000000000000000002'
+    }
+  }
+}
+</script>