@opentiny/vue-docs 2.1.10 → 2.2.0

package/demos/pc/app/tooltip/content.spec.js

@@ -2,18 +2,11 @@ import { test, expect } from '@playwright/test'
 
 test('测试插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tooltip#tooltip-content')
+  await page.goto('tooltip#content')
 
-  const button1 = page.getByRole('button', { name: '插槽的使用' })
   const button2 = page.getByRole('button', { name: '校验错误' })
-  const tooltip1 = page.getByText('通过 slot = "content" 自定义提示内容')
   const tooltip2 = page.getByText('该网段不可用！可用网段：163')
 
-  await button1.hover()
-  await expect(tooltip1).toBeVisible
-
-  await page.waitForTimeout(300)
-
   await button2.hover()
   await expect(tooltip2).toBeVisible()
 })

package/demos/pc/app/tooltip/control.spec.js

@@ -2,16 +2,20 @@ import { test, expect } from '@playwright/test'
 
 test('测试手动控制tooltip', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tooltip#manual-control-tip')
+  await page.goto('tooltip#control')
 
-  const button = page.getByRole('button', { name: '手动控制tooltip的显示和隐藏' })
-  const tooltip = page.getByRole('tooltip', { name: '手动控制模式', includeHidden: true })
+  const preview = page.locator('.pc-demo-container')
+  const visibleSwitch = preview.locator('.tiny-switch').nth(0)
+  const manualSwitch = preview.locator('.tiny-switch').nth(1)
+  const disableSwitch = preview.locator('.tiny-switch').nth(2)
 
-  await button.click()
-  await expect(tooltip).toBeVisible()
+  const pop1 = page.getByText('智能提示的提示内容')
 
-  await page.waitForTimeout(300)
+  await preview.getByText('内容不超长').hover()
+  await expect(pop1).toBeVisible()
+  await page.waitForTimeout(50)
 
-  await button.click()
-  await expect(tooltip).toBeHidden()
+  await visibleSwitch.click()
+  await preview.getByText('内容不超长').hover()
+  await expect(pop1).toBeHidden()
 })

package/demos/pc/app/tooltip/custom-popper-composition-api.vue

@@ -31,7 +31,7 @@
         popper-class="popper1"
         :key="key"
       >
-        <div class="ellipsis">鼠标悬浮在这里</div>
+        <tiny-button type="primary">鼠标悬浮在这里</tiny-button>
       </tiny-tooltip>
     </div>
   </div>
@@ -39,7 +39,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tooltip as TinyTooltip } from '@opentiny/vue'
+import { Tooltip as TinyTooltip, Switch as TinySwitch, Button as TinySwitch } from '@opentiny/vue'
 
 const visibleArrow = ref(true)
 const enterable = ref(true)
@@ -50,20 +50,6 @@ const key = ref(0)
 .row {
   margin-bottom: 20px;
 }
-.ellipsis {
-  display: inline-block;
-  width: 100px;
-  height: 24px;
-  line-height: 24px;
-  margin: 0 20px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-}
-.ellipsis:hover {
-  background-color: #f1f1f1;
-}
 </style>
 
 <style>

package/demos/pc/app/tooltip/custom-popper.vue

@@ -31,18 +31,19 @@
         popper-class="popper1"
         :key="key"
       >
-        <div class="ellipsis">鼠标悬浮在这里</div>
+        <tiny-button type="primary">鼠标悬浮在这里</tiny-button>
       </tiny-tooltip>
     </div>
   </div>
 </template>
 
 <script lang="jsx">
-import { Tooltip, Switch } from '@opentiny/vue'
+import { Tooltip, Switch, Button } from '@opentiny/vue'
 
 export default {
   components: {
     TinyTooltip: Tooltip,
+    TinyButton: Button,
     TinySwitch: Switch
   },
   data() {
@@ -59,20 +60,6 @@ export default {
 .row {
   margin-bottom: 20px;
 }
-.ellipsis {
-  display: inline-block;
-  width: 100px;
-  height: 24px;
-  line-height: 24px;
-  margin: 0 20px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-}
-.ellipsis:hover {
-  background-color: #f1f1f1;
-}
 </style>
 
 <style>

package/demos/pc/app/tooltip/delay.spec.js

@@ -2,28 +2,13 @@ import { test, expect } from '@playwright/test'
 
 test('测试延迟显示隐藏', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tooltip#open-delay')
+  await page.goto('tooltip#delay')
 
   const button1 = page.getByRole('button', { name: '延迟 2s 出现' })
-  const button2 = page.getByRole('button', { name: '2s 后自动隐藏' })
   const tip1 = page.getByRole('tooltip', { name: '延迟 2000ms 出现' })
-  const tip2 = page.getByRole('tooltip', { name: '2000ms后自动隐藏' })
-
   // 延迟出现
+  await page.waitForTimeout(100)
   await button1.hover()
-  await page.waitForTimeout(300)
+  await page.waitForTimeout(100)
   await expect(tip1).toBeHidden()
-
-  await page.waitForTimeout(2000)
-  await expect(tip1).toBeVisible()
-
-  await page.waitForTimeout(300)
-
-  // 延迟隐藏
-  await button2.hover()
-  await page.waitForTimeout(300)
-  await expect(tip2).toBeVisible()
-
-  await page.waitForTimeout(2000)
-  await expect(tip2).toBeHidden()
 })

package/demos/pc/app/tooltip/offset.spec.js

@@ -2,15 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('测试偏移量', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tooltip#tooltip-offset')
+  await page.goto('tooltip#offset')
 
-  const button = page.getByRole('button', { name: '出现位置的偏移量' })
   const tip = page.getByRole('tooltip', { name: '出现位置的偏移量' })
-
-  await button.hover()
-  await page.waitForTimeout(300)
-  const box1 = await button.boundingBox()
-  const box2 = await tip.boundingBox()
-
-  expect(box2.x - box1.x).toBeGreaterThanOrEqual(20)
+  await expect(tip).toBeVisible()
 })

package/demos/pc/app/tooltip/popper-options.spec.js

@@ -4,14 +4,9 @@ test('测试自定义popper', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#popper-options')
 
-  const button = page.getByRole('button', { name: 'popper-options配置' })
-  const tooltip = page.getByRole('tooltip', { name: 'popper-options配置', includeHidden: true })
+  const button = page.getByRole('button', { name: '鼠标悬浮到这里' })
+  const tooltip = page.getByRole('tooltip', { name: '提示内容' })
 
   await button.hover()
   await expect(tooltip).toBeVisible()
-
-  await page.waitForTimeout(300)
-
-  await page.mouse.move(0, 0)
-  await expect(tooltip).toBeHidden()
 })

package/demos/pc/app/tooltip/theme.spec.js

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('测试tooltip主题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tooltip#tooltip-theme')
+  await page.goto('tooltip#theme')
 
   await page.getByRole('button', { name: 'Dark' }).hover()
   await expect(page.getByRole('tooltip', { name: 'dark 提示文字' })).toHaveClass(/is-dark/)

package/demos/pc/app/tooltip/transition.spec.js

@@ -2,20 +2,18 @@ import { test, expect } from '@playwright/test'
 
 test('测试自定义动画显示正常', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tooltip#custom-transition')
+  await page.goto('tooltip#transition')
 
-  const button = page.getByRole('button', { name: '定义渐变动画' })
-  const tooltip = page.getByRole('tooltip', { name: '定义渐变动画', includeHidden: true })
+  const button = page.getByRole('button', { name: '鼠标悬浮到这里' })
+  const tooltip = page.getByRole('tooltip', { name: '渐隐动画', includeHidden: true })
 
   // 悬浮
   await button.hover()
   await expect(tooltip).toBeVisible()
-  await expect(tooltip).toHaveClass(/custom-transition-enter-active/)
-  await page.waitForTimeout(300)
 
   // 离开
   await page.mouse.move(0, 0)
   await page.waitForTimeout(300)
-  await expect(tooltip).not.toBeVisible()
+  await expect(tooltip).toBeHidden()
   await expect(tooltip).toHaveCSS('display', 'none')
 })

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

@@ -140,23 +140,23 @@ export default {
     {
       'name': 'tooltip',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'effect',
-          'type': 'string',
+          'type': '"dark" | "light"',
           'defaultValue': '"dark"',
           'desc': {
-            'zh-CN': '默认提供的主题;该属性的可选值为 dark/light',
+            'zh-CN': '提示的主题',
             'en-US': 'Default theme; The value of this attribute can be dark or light'
           },
           'demoId': 'theme'
         },
         {
           'name': 'type',
-          'type': 'string',
+          'type': '"normal" | "warning" | "error" | "info" | "success"',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '默认提供的类型;该属性的可选值为 normal/warning/error/info/success 。type的优先级大于effect',
+            'zh-CN': '提示的类型，type的优先级大于effect',
             'en-US':
               'The default type is provided. The options for this attribute are normal, warning, error, information, and success. The priority of type is higher than that of effect.'
           },
@@ -174,7 +174,8 @@ export default {
         },
         {
           'name': 'placement',
-          'type': 'string',
+          'type':
+            '"top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end"',
           'defaultValue': ' "bottom"',
           'desc': {
             'zh-CN':

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

@@ -199,7 +199,7 @@ export default {
     {
       'name': 'transfer',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data',
           'type': 'object[]',

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

@@ -1,74 +1,79 @@
 <template>
-  <tiny-tree :data="data5" :props="defaultProps" @node-click="handleNodeClick"></tiny-tree>
+  <div>
+    <div class="option-row">
+      <span> 连接线：</span>
+      <tiny-radio-group v-model="showLine">
+        <tiny-radio label="show">显示</tiny-radio>
+        <tiny-radio label="hide">不显示</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="option-row">
+      <span> 组件大小：</span>
+      <tiny-radio-group v-model="size">
+        <tiny-radio label="small">迷你尺寸</tiny-radio>
+        <tiny-radio label="medium">正常尺寸</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="option-row">
+      <span> 层级水平缩进：</span>
+      <tiny-radio-group v-model="indent">
+        <tiny-radio :label="18">18px</tiny-radio>
+        <tiny-radio :label="28">28px</tiny-radio>
+        <tiny-radio :label="38">38px</tiny-radio>
+      </tiny-radio-group>
+    </div>
+
+    <tiny-tree
+      :data="data"
+      :size="size"
+      :indent="indent"
+      :show-line="showLine === 'show'"
+      default-expand-all
+      @node-click="nodeClick"
+    ></tiny-tree>
+  </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tree as TinyTree, Modal } from '@opentiny/vue'
+import { Tree as TinyTree, RadioGroup as TinyRadioGroup, Radio as TinyRadio } from '@opentiny/vue'
 
-const defaultProps = ref({
-  children: 'children',
-  label: 'label'
-})
-const data5 = ref([
+const showLine = ref('hide')
+const size = ref('medium')
+const indent = ref(18)
+const data = ref([
   {
-    label: '一级 1',
-    children: [
-      {
-        label: '二级 1-1',
-        children: [
-          {
-            label: '三级 1-1-1'
-          }
-        ]
-      }
-    ]
+    id: '1',
+    label: '数据 1',
+    children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
   },
   {
-    label: '一级 2',
+    id: '2',
+    label: '数据 2',
     children: [
-      {
-        label: '二级 2-1',
-        children: [
-          {
-            label: '三级 2-1-1'
-          }
-        ]
-      },
-      {
-        label: '二级 2-2',
-        children: [
-          {
-            label: '三级 2-2-1'
-          }
-        ]
-      }
+      { id: '2-1', label: '数据 2-1' },
+      { id: '2-2', label: '数据 2-2' }
     ]
   },
   {
-    label: '一级 3',
-    children: [
-      {
-        label: '二级 3-1',
-        children: [
-          {
-            label: '三级 3-1-1'
-          }
-        ]
-      },
-      {
-        label: '二级 3-2',
-        children: [
-          {
-            label: '三级 3-2-1'
-          }
-        ]
-      }
-    ]
+    id: '3',
+    label: '数据 3',
+    children: [{ id: '3-1', label: '数据 3-1' }]
   }
 ])
-
-function handleNodeClick(data) {
-  Modal.message({ message: `${data.label}`, status: 'info' })
+function nodeClick(data, node, vm) {
+  console.log('点击节点事件：', { data, node, vm })
 }
 </script>
+
+<style scoped>
+.option-row {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.option-row > span {
+  font-size: 18px;
+}
+</style>

package/demos/pc/app/tree/basic-usage.vue

@@ -1,83 +1,91 @@
 <template>
-  <tiny-tree :data="data5" :props="defaultProps" @node-click="handleNodeClick"></tiny-tree>
+  <div>
+    <div class="option-row">
+      <span> 连接线：</span>
+      <tiny-radio-group v-model="showLine">
+        <tiny-radio label="show">显示</tiny-radio>
+        <tiny-radio label="hide">不显示</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="option-row">
+      <span> 组件大小：</span>
+      <tiny-radio-group v-model="size">
+        <tiny-radio label="small">迷你尺寸</tiny-radio>
+        <tiny-radio label="medium">正常尺寸</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <div class="option-row">
+      <span> 层级水平缩进：</span>
+      <tiny-radio-group v-model="indent">
+        <tiny-radio :label="18">18px</tiny-radio>
+        <tiny-radio :label="28">28px</tiny-radio>
+        <tiny-radio :label="38">38px</tiny-radio>
+      </tiny-radio-group>
+    </div>
+
+    <tiny-tree
+      :data="data"
+      :size="size"
+      :indent="indent"
+      :show-line="showLine === 'show'"
+      default-expand-all
+      @node-click="nodeClick"
+    ></tiny-tree>
+  </div>
 </template>
 
 <script lang="jsx">
-import { Tree, Modal } from '@opentiny/vue'
+import { Tree, RadioGroup, Radio } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTree: Tree
+    TinyTree: Tree,
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup
   },
   data() {
     return {
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      data5: [
+      showLine: 'hide',
+      size: 'medium',
+      indent: 18,
+      data: [
         {
-          label: '一级 1',
-          children: [
-            {
-              label: '二级 1-1',
-              children: [
-                {
-                  label: '三级 1-1-1'
-                }
-              ]
-            }
-          ]
+          id: '1',
+          label: '数据 1',
+          children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
         },
         {
-          label: '一级 2',
+          id: '2',
+          label: '数据 2',
           children: [
-            {
-              label: '二级 2-1',
-              children: [
-                {
-                  label: '三级 2-1-1'
-                }
-              ]
-            },
-            {
-              label: '二级 2-2',
-              children: [
-                {
-                  label: '三级 2-2-1'
-                }
-              ]
-            }
+            { id: '2-1', label: '数据 2-1' },
+            { id: '2-2', label: '数据 2-2' }
           ]
         },
         {
-          label: '一级 3',
-          children: [
-            {
-              label: '二级 3-1',
-              children: [
-                {
-                  label: '三级 3-1-1'
-                }
-              ]
-            },
-            {
-              label: '二级 3-2',
-              children: [
-                {
-                  label: '三级 3-2-1'
-                }
-              ]
-            }
-          ]
+          id: '3',
+          label: '数据 3',
+          children: [{ id: '3-1', label: '数据 3-1' }]
         }
       ]
     }
   },
   methods: {
-    handleNodeClick(data) {
-      Modal.message({ message: `${data.label}`, status: 'info' })
+    nodeClick(data, node, vm) {
+      console.log('点击节点事件：', { data, node, vm })
     }
   }
 }
 </script>
+
+<style scoped>
+.option-row {
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.option-row > span {
+  font-size: 18px;
+}
+</style>