@opentiny/vue-docs 2.2.7 → 2.2.9

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

@@ -0,0 +1,125 @@
+<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"
+  />
+</template>
+
+<script setup>
+import { Notify, MindMap as TinyMindMap } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const exmpleData = ref({
+  'nodeData': {
+    'id': 'c9ee6647385c42de',
+    'topic': '前端修仙指南',
+    'root': true,
+    'children': [
+      {
+        'topic': 'Handfirst html and css',
+        'id': 'c9ee977189f3b1f1'
+      },
+      {
+        'topic': '高程',
+        'id': 'c9ee9a4e8f3f83c5'
+      },
+      {
+        'topic': 'Javascript权威指南',
+        'id': 'c9ee9b8e87958282'
+      },
+      {
+        'topic': '算法 第四版',
+        'id': 'c9eea19c874d331f'
+      },
+      {
+        'topic': '大话数据结构',
+        'id': 'c9eea8d788441a71'
+      },
+      {
+        'topic': '算法导论',
+        'id': 'c9eeac4c84aaba37'
+      },
+      {
+        'topic': '编译原理',
+        'id': 'c9eeadee881cf229'
+      },
+      {
+        'topic': '宫水三叶的刷题日记',
+        'id': 'c9eec88a85d8ff76'
+      }
+    ]
+  }
+})
+const onCreate = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件create',
+    duration: 1000
+  })
+}
+const onOperation = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件operation',
+    duration: 1000
+  })
+}
+const onSelectNode = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件selectNode',
+    duration: 1000
+  })
+}
+const onSelectNewNode = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件selectNewNode',
+    duration: 1000
+  })
+}
+const onSelectNodes = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件selectNodes',
+    duration: 1000
+  })
+}
+const onUnselectNode = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件unselectNode',
+    duration: 1000
+  })
+}
+const onUnselectNodes = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件unselectNodes',
+    duration: 1000
+  })
+}
+const onExpandNode = () => {
+  Notify({
+    type: 'info',
+    message: '触发事件expandNode',
+    duration: 1000
+  })
+}
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>

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

@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test'
+
+test('测试创建事件', async ({ page }) => {
+  await page.goto('mind-map#event')
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.getByText('触发事件create').isVisible()
+})
+
+test('测试operation事件', async ({ page }) => {
+  await page.goto('mind-map#event')
+  await page.locator('me-tpc').click()
+  await page.locator('.map-canvas').press('Tab')
+  await page.getByText('触发事件operation').first().isVisible()
+  // 新创建node时会触发selectNewNode事件
+  // 这个触发是符合逻辑的, 因为创建后的node的确是new-node
+  // 创建后会自动选择, 自然触发selectNewNode是符合逻辑的
+  await page.getByText('触发事件selectNewNode').first().isVisible()
+})
+test('测试select-node, select-nodes, select-new-node事件', async ({ page }) => {
+  await page.goto('mind-map#event')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).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').filter({ hasText: 'root' }).click()
+  await page
+    .locator('me-tpc')
+    .nth(1)
+    .filter({ hasText: 'new node' })
+    .click({
+      modifiers: ['Control']
+    })
+  await page.getByText('触发事件selectNode').first().isVisible()
+  await page.getByAltText('触发事件selectNodes').isVisible()
+})
+test('测试 unselect-node,unselect-nodes', async ({ page }) => {
+  await page.goto('mind-map#event')
+  await page.locator('me-tpc').filter({ hasText: 'root' }).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).click()
+  await page
+    .locator('me-tpc')
+    .nth(1)
+
+    .click({
+      modifiers: ['Control']
+    })
+  await page.locator('.map-canvas').click()
+})

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

@@ -0,0 +1,136 @@
+<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"
+  />
+</template>
+
+<script lang="jsx">
+import { MindMap, Notify } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMindMap: MindMap
+  },
+  data() {
+    return {
+      exampleData: {
+        'nodeData': {
+          'id': 'c9ee6647385c42de',
+          'topic': '前端修仙指南',
+          'root': true,
+          'children': [
+            {
+              'topic': 'Handfirst html and css',
+              'id': 'c9ee977189f3b1f1'
+            },
+            {
+              'topic': '高程',
+              'id': 'c9ee9a4e8f3f83c5'
+            },
+            {
+              'topic': 'Javascript权威指南',
+              'id': 'c9ee9b8e87958282'
+            },
+            {
+              'topic': '算法 第四版',
+              'id': 'c9eea19c874d331f'
+            },
+            {
+              'topic': '大话数据结构',
+              'id': 'c9eea8d788441a71'
+            },
+            {
+              'topic': '算法导论',
+              'id': 'c9eeac4c84aaba37'
+            },
+            {
+              'topic': '编译原理',
+              'id': 'c9eeadee881cf229'
+            },
+            {
+              'topic': '宫水三叶的刷题日记',
+              'id': 'c9eec88a85d8ff76'
+            }
+          ]
+        }
+      },
+      loading: false
+    }
+  },
+  methods: {
+    onCreate() {
+      Notify({
+        type: 'info',
+        message: '触发事件create',
+        duration: 1000
+      })
+    },
+    onOperation() {
+      Notify({
+        type: 'info',
+        message: '触发事件operation',
+        duration: 1000
+      })
+    },
+    onSelectNode() {
+      Notify({
+        type: 'info',
+        message: '触发事件selectNode',
+        duration: 1000
+      })
+    },
+    onSelectNewNode() {
+      Notify({
+        type: 'info',
+        message: '触发事件selectNewNode',
+        duration: 1000
+      })
+    },
+    onSelectNodes() {
+      Notify({
+        type: 'info',
+        message: '触发事件selectNodes',
+        duration: 1000
+      })
+    },
+    onUnselectNode() {
+      Notify({
+        type: 'info',
+        message: '触发事件unselectNode',
+        duration: 1000
+      })
+    },
+    onUnselectNodes() {
+      Notify({
+        type: 'info',
+        message: '触发事件unselectNodes',
+        duration: 1000
+      })
+    },
+    onExpandNode() {
+      Notify({
+        type: 'info',
+        message: '触发事件expandNode',
+        duration: 1000
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>

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

@@ -0,0 +1,108 @@
+<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>
+</template>
+
+<script setup>
+import { MindMap as TinyMindMap, Button as TinyButton, Notify } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const render = ref(null)
+const exampleData = ref({
+  'nodeData': {
+    'id': 'c9ee6647385c42de',
+    'topic': '前端修仙指南',
+    'root': true,
+    'children': [
+      {
+        'topic': 'Handfirst html and css',
+        'id': 'c9ee977189f3b1f1'
+      },
+      {
+        'topic': '高程',
+        'id': 'c9ee9a4e8f3f83c5'
+      },
+      {
+        'topic': 'Javascript权威指南',
+        'id': 'c9ee9b8e87958282'
+      },
+      {
+        'topic': '算法 第四版',
+        'id': 'c9eea19c874d331f'
+      },
+      {
+        'topic': '大话数据结构',
+        'id': 'c9eea8d788441a71'
+      },
+      {
+        'topic': '算法导论',
+        'id': 'c9eeac4c84aaba37'
+      },
+      {
+        'topic': '编译原理',
+        'id': 'c9eeadee881cf229'
+      },
+      {
+        'topic': '宫水三叶的刷题日记',
+        'id': 'c9eec88a85d8ff76'
+      }
+    ]
+  }
+})
+const loading = ref(false)
+const onCreate = (instance) => {
+  render.value = instance
+}
+const exportData = () => {
+  if (render.value) {
+    Notify({
+      type: 'info',
+      message: '数据已经输出于控制台, 请打开控制台查看'
+    })
+    // eslint-disable-next-line no-console
+    console.log(render.value.getData())
+  }
+}
+const importData = () => {
+  if (render.value) {
+    const fn = async () => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          if (render.value) {
+            render.value.init(exampleData.value)
+          }
+          resolve(null)
+        }, 1000)
+      })
+    }
+    loading.value = true
+    fn().finally(() => (loading.value = false))
+  }
+}
+const clearData = () => {
+  loading.value = true
+  const clearNodeData = {
+    'nodeData': {
+      'id': 'c9ee6647385c42de',
+      'topic': '我的子节点被清空啦~',
+      'root': true,
+      'children': []
+    }
+  }
+  try {
+    render.value.init(clearNodeData)
+    render.value.refresh(clearNodeData)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>

package/demos/pc/app/mind-map/export-data.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('导出数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#export-data')
+  await page.locator('button').filter({ hasText: '导出数据' }).click()
+})
+
+test('导入数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#export-data')
+  await page.locator('button').filter({ hasText: '导入示例数据' }).click()
+})
+
+test('清空样例数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('mind-map#export-data')
+  await page.locator('button').filter({ hasText: '清空数据' }).click()
+})

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

@@ -0,0 +1,119 @@
+<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>
+</template>
+
+<script lang="jsx">
+import { MindMap, Button, Notify } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyMindMap: MindMap,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      render: null,
+      exampleData: {
+        'nodeData': {
+          'id': 'c9ee6647385c42de',
+          'topic': '前端修仙指南',
+          'root': true,
+          'children': [
+            {
+              'topic': 'Handfirst html and css',
+              'id': 'c9ee977189f3b1f1'
+            },
+            {
+              'topic': '高程',
+              'id': 'c9ee9a4e8f3f83c5'
+            },
+            {
+              'topic': 'Javascript权威指南',
+              'id': 'c9ee9b8e87958282'
+            },
+            {
+              'topic': '算法 第四版',
+              'id': 'c9eea19c874d331f'
+            },
+            {
+              'topic': '大话数据结构',
+              'id': 'c9eea8d788441a71'
+            },
+            {
+              'topic': '算法导论',
+              'id': 'c9eeac4c84aaba37'
+            },
+            {
+              'topic': '编译原理',
+              'id': 'c9eeadee881cf229'
+            },
+            {
+              'topic': '宫水三叶的刷题日记',
+              'id': 'c9eec88a85d8ff76'
+            }
+          ]
+        }
+      },
+      loading: false
+    }
+  },
+  methods: {
+    onCreate(instance) {
+      this.render = instance
+    },
+    exportData() {
+      if (this.render) {
+        Notify({
+          type: 'info',
+          message: '数据已经输出于控制台, 请打开控制台查看'
+        })
+        // eslint-disable-next-line no-console
+        console.log(this.render.getData())
+      }
+    },
+    importData() {
+      if (this.render) {
+        const fn = async () => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              if (this.render) {
+                this.render.init(this.exampleData)
+              }
+              resolve(null)
+            }, 1000)
+          })
+        }
+        this.loading = true
+        fn().finally(() => (this.loading = false))
+      }
+    },
+    clearData() {
+      this.loading = true
+      const clearNodeData = {
+        'nodeData': {
+          'id': 'c9ee6647385c42de',
+          'topic': '我的子节点被清空啦~',
+          'root': true,
+          'children': []
+        }
+      }
+      try {
+        this.render.init(clearNodeData)
+        this.render.refresh(clearNodeData)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mindmap {
+  width: 100%;
+  height: 300px;
+}
+</style>

package/demos/pc/app/mind-map/webdoc/mind-map.cn.md

@@ -0,0 +1,7 @@
+---
+title: MindMap 脑图
+---
+
+# MindMap 脑图
+
+思维导图组件，默认启用了拖拽与缩放

package/demos/pc/app/mind-map/webdoc/mind-map.en.md

@@ -0,0 +1,7 @@
+---
+title: MindMap
+---
+
+# MindMap 脑图
+
+MindMap component. Dragging and scaling are enabled by default