@opentiny/vue-docs 3.27.2 → 3.28.0

package/demos/pc/app/space/space-size.vue

@@ -15,7 +15,7 @@
 
     <!-- 使用 dynamic direction 值 -->
     <tiny-space class="tiny-space" :size="[rowValue, columnValue]" :wrap="true">
-      <tiny-button style="margin: 0" v-for="n in 15" :key="n">按钮 {{ n }}</tiny-button>
+      <tiny-button v-for="n in 15" :key="n">按钮 {{ n }}</tiny-button>
     </tiny-space>
   </div>
 </template>

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

@@ -28,6 +28,18 @@ export default {
       },
       codeFiles: ['mini-mode.vue']
     },
+    {
+      demoId: 'width',
+      name: {
+        'zh-CN': '自定义宽度',
+        'en-US': 'Custom width'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>width</code> 设置开关的宽度。</p>',
+        'en-US': '<p>Set the width of the switch through <code>width</code> .</p>'
+      },
+      codeFiles: ['width.vue']
+    },
     {
       demoId: 'loading',
       name: {

package/demos/pc/app/switch/width-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="switch-demo">
+    <div class="demo-item">
+      <div class="demo-title">number类型</div>
+      <tiny-switch :width="150"></tiny-switch>
+    </div>
+
+    <div class="demo-item">
+      <div class="demo-title">string类型</div>
+      <tiny-switch width="150PX"></tiny-switch>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TinySwitch } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.demo-item {
+  padding: 15px;
+}
+
+.demo-title {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+</style>

package/demos/pc/app/switch/width.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('width 属性', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('switch#width')
+
+  const demo = page.locator('#width')
+  const switchBtns = demo.locator('.tiny-switch')
+
+  // 测试 number 类型的 width
+  const numberSwitch = switchBtns.nth(0)
+  await expect(numberSwitch).toHaveCSS('width', '150px')
+
+  // 测试 string 类型的 width
+  const stringSwitch = switchBtns.nth(1)
+  await expect(stringSwitch).toHaveCSS('width', '150px')
+})

package/demos/pc/app/switch/width.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="switch-demo">
+    <div class="demo-item">
+      <div class="demo-title">number类型</div>
+      <tiny-switch :width="150"></tiny-switch>
+    </div>
+
+    <div class="demo-item">
+      <div class="demo-title">string类型</div>
+      <tiny-switch width="150PX"></tiny-switch>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinySwitch } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySwitch
+  }
+}
+</script>
+
+<style scoped>
+.demo-item {
+  padding: 15px;
+}
+
+.demo-title {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+</style>

package/demos/pc/app/tabs/header-only-composition-api.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tab-demo-position">
+    <tiny-radio-group v-model="position" class="mb10">
+      <tiny-radio-button label="top">top 显示</tiny-radio-button>
+      <tiny-radio-button label="bottom">bottom 显示</tiny-radio-button>
+      <tiny-radio-button label="left">left 显示</tiny-radio-button>
+      <tiny-radio-button label="right">right 显示</tiny-radio-button>
+    </tiny-radio-group>
+    <tiny-tabs v-model="activeName4" tab-style="card" :position="position" header-only>
+      <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
+        {{ item.content }}
+      </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, onMounted, nextTick } from 'vue'
+import { TinyTabs, TinyTabItem, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
+
+const activeName4 = ref('navigation3')
+const position = ref('bottom')
+const tabs3 = ref([
+  {
+    name: 'navigation1',
+    title: 'Navigation 1',
+    content: 'Navigation 1'
+  },
+  {
+    name: 'navigation2',
+    title: 'Navigation 2',
+    content: 'Navigation 2'
+  },
+  {
+    name: 'navigation3',
+    title: 'Navigation 3',
+    content: 'Navigation 3'
+  },
+  {
+    name: 'navigation4',
+    title: 'Navigation 4',
+    content: 'Navigation 4'
+  },
+  {
+    name: 'navigation5',
+    title: 'Navigation 5',
+    content: 'Navigation 5'
+  }
+])
+</script>
+
+<style scoped>
+.tab-demo-position {
+  min-height: 250px;
+}
+</style>

package/demos/pc/app/tabs/header-only.vue

@@ -14,39 +14,50 @@
   </div>
 </template>
 
-<script setup lang="jsx">
-import { ref } from 'vue'
+<script>
 import { TinyTabs, TinyTabItem, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
 
-const activeName4 = ref('navigation1')
-const position = ref('left')
-const tabs3 = ref([
-  {
-    name: 'navigation1',
-    title: 'Navigation 1',
-    content: 'Navigation 1'
+export default {
+  components: {
+    TinyTabs,
+    TinyTabItem,
+    TinyRadioGroup,
+    TinyRadioButton
   },
-  {
-    name: 'navigation2',
-    title: 'Navigation 2',
-    content: 'Navigation 2'
-  },
-  {
-    name: 'navigation3',
-    title: 'Navigation 3',
-    content: 'Navigation 3'
-  },
-  {
-    name: 'navigation4',
-    title: 'Navigation 4',
-    content: 'Navigation 4'
-  },
-  {
-    name: 'navigation5',
-    title: 'Navigation 5',
-    content: 'Navigation 5'
+  data() {
+    return {
+      activeName4: 'navigation1',
+      position: 'bottom',
+      tabs3: [
+        {
+          name: 'navigation1',
+          title: 'Navigation 1',
+          content: 'Navigation 1'
+        },
+        {
+          name: 'navigation2',
+          title: 'Navigation 2',
+          content: 'Navigation 2'
+        },
+        {
+          name: 'navigation3',
+          title: 'Navigation 3',
+          content: 'Navigation 3'
+        },
+        {
+          name: 'navigation4',
+          title: 'Navigation 4',
+          content: 'Navigation 4'
+        },
+        {
+          name: 'navigation5',
+          title: 'Navigation 5',
+          content: 'Navigation 5'
+        }
+      ]
+    }
   }
-])
+}
 </script>
 
 <style scoped>

package/demos/pc/app/time-picker/picker-options.spec.ts

@@ -4,20 +4,19 @@ test('固定时间范围', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#picker-options')
 
-  const selectTime = page.getByRole('textbox', { name: '18:40:00' })
-  const selectTime1 = page.getByRole('textbox', { name: '19:40:00' })
+  const selectTime = page.getByLabel('任意时间点')
   // 点击 17 点，点击确定，关闭选择框后，查看 input 时间是否仍是 18:40:00
   await selectTime.click()
   await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '17' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
-  await expect(selectTime).toBeVisible()
+  await expect(selectTime).toHaveValue('18:40:00')
   // 点击 19 点，点击确定，关闭选择框后，查看 input 时间是 19:40:00
   await selectTime.click()
   await page.waitForTimeout(100)
   await page.getByRole('listitem').filter({ hasText: '19' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
-  await expect(selectTime1).toBeVisible()
+  await expect(selectTime).toHaveValue('19:40:00')
 })

package/demos/pc/app/time-picker/step.spec.ts

@@ -4,11 +4,11 @@ test('步长', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#step')
 
-  await page.getByRole('textbox', { name: '18:40:00' }).click()
+  await page.getByLabel('任意时间点').click()
   await page.waitForTimeout(100)
   await page.locator('li').filter({ hasText: '20' }).first().click()
   await page.waitForTimeout(100)
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
-  await expect(page.getByRole('textbox', { name: '20:40:00' })).toBeVisible()
+  await expect(page.getByLabel('任意时间点')).toHaveValue('20:40:00')
 })

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

@@ -31,8 +31,8 @@ test('测试基本用法', async ({ page }) => {
   await page.waitForTimeout(10)
 
   // 复选框应该为半选状态
-  let checkbox = leftPanel.getByRole('paragraph').filter({ hasText: '列表 1 2 / 14' }).getByRole('checkbox')
-  await expect(checkbox).toHaveClass(/is-indeterminate/)
+  let checkbox = leftPanel.locator('.tiny-checkbox__input')
+  await expect(checkbox.first()).toHaveClass(/is-indeterminate/)
   // 按钮可用状态
   await expect(toRightBtn).toBeEnabled()
   await expect(toLeftBtn).toBeDisabled()
@@ -62,8 +62,8 @@ test('测试基本用法', async ({ page }) => {
   await page.waitForTimeout(10)
 
   // 复选框应该为半选状态
-  checkbox = rightPanel.getByRole('paragraph').filter({ hasText: '列表 2 2 / 4' }).getByRole('checkbox')
-  await expect(checkbox).toHaveClass(/is-indeterminate/)
+  checkbox = rightPanel.locator('.tiny-checkbox__input')
+  await expect(checkbox.first()).toHaveClass(/is-indeterminate/)
 
   // 按钮可用状态
   await expect(toRightBtn).toBeDisabled()

package/demos/pc/app/tree/filter-view.spec.ts

@@ -7,7 +7,7 @@ test('测试过滤视图', async ({ page }) => {
   const preview = page.locator('.pc-demo-container')
   const tree = preview.locator('.tiny-tree').nth(0)
   const btnPlain = preview.getByText('平铺视图 plain')
-  const btnHighlight = preview.getByRole('radio', { name: '高亮' }).nth(0)
+  const btnHighlight = preview.locator('label').filter({ hasText: '高亮' })
   const checkboxs = tree.locator('.tiny-tree__plain-node .tiny-checkbox')
   const highlightNodes = tree.locator('.tiny-tree__plain-node .tiny-hl-query-node')
   const input = preview.locator('.tiny-input input')

package/demos/pc/app/tree-menu/clearable.spec.ts

@@ -1,8 +1,5 @@
-import type { Page } from '@playwright/test'
 import { test, expect } from '@playwright/test'
 
-const getIcon = (page: Page) => page.locator('#clearable').getByRole('img').nth(1)
-
 test('搜索框可清除', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
@@ -11,8 +8,7 @@ test('搜索框可清除', async ({ page }) => {
   await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).click()
   await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).fill('123')
   await expect(page.getByText('暂无数据')).toBeVisible()
-  const icon = getIcon(page)
-  await icon.click()
+  await page.getByLabel('清除').click()
   const val = await page.locator('#clearable').getByRole('textbox', { name: '输入关键字搜索' }).inputValue()
   expect(val).toBe('')
   await expect(page.getByText('暂无数据')).not.toBeVisible()

package/demos/pc/app/tree-select/collapse-tags.vue

@@ -2,30 +2,14 @@
   <div>
     <p>场景 1：collapse-tags 折叠</p>
     <tiny-tree-select v-model="value" :tree-op="treeOp" multiple collapse-tags></tiny-tree-select>
-    <p>场景 2：hover-expand 折叠</p>
-    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
     <br />
     <br />
+    <p>场景 2：hover-expand 折叠</p>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple hover-expand></tiny-tree-select>
     <br />
     <br />
     <p>场景 3：click-expand 折叠</p>
     <tiny-tree-select v-model="value" :tree-op="treeOp" multiple click-expand :max-visible-rows="1"></tiny-tree-select>
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
-    <br />
   </div>
 </template>
 

package/demos/pc/app/tree-select/lazy-composition-api.vue

@@ -0,0 +1,51 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" lazy :load="load" :after-load="afterLoad"></tiny-tree-select>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref('')
+const treeOp = ref({})
+
+// node 为点击的节点，resolve 为回调函数，用于异步返回下层节点的数据
+function load(node, resolve) {
+  console.log('即将加载节点下级数据：', node)
+
+  // 通过 level =0 来识别第一次加载
+  if (node.level === 0) {
+    resolve([
+      { value: '1', label: '一级 1' },
+      { value: '2', label: '一级 2' },
+      { value: '3', label: '一级 3' }
+    ])
+  }
+  // 通过 data 有值，识别是用户点击后的加载
+  else if (node.data) {
+    const parentId = node.data.value
+    const parentLabel = node.data.label
+
+    const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
+      value: `${parentId}-${num}`,
+      label: `${parentLabel}-${num}`,
+      disabled: Math.random() - 0.5 > 0, // 随机禁用节点
+      isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
+    }))
+
+    // 模拟异步返回
+    setTimeout(() => resolve(children), Math.random() * 2 * 1000)
+  }
+}
+
+function afterLoad(data) {
+  console.log('afterLoad 属性触发：', data)
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
+

package/demos/pc/app/tree-select/lazy-multiple-composition-api.vue

@@ -0,0 +1,58 @@
+<template>
+  <tiny-tree-select
+    v-model="value"
+    :tree-op="treeOp"
+    lazy
+    :load="load"
+    :after-load="afterLoad"
+    multiple
+  ></tiny-tree-select>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyTreeSelect } from '@opentiny/vue'
+
+const value = ref([])
+const treeOp = ref({})
+
+// node 为点击的节点，resolve 为回调函数，用于异步返回下层节点的数据
+function load(node, resolve) {
+  console.log('即将加载节点下级数据：', node)
+
+  // 通过 level =0 来识别第一次加载
+  if (node.level === 0) {
+    resolve([
+      { value: '1', label: '一级 1' },
+      { value: '2', label: '一级 2' },
+      { value: '3', label: '一级 3' }
+    ])
+  }
+  // 通过 data 有值，识别是用户点击后的加载
+  else if (node.data) {
+    const parentId = node.data.value
+    const parentLabel = node.data.label
+
+    const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
+      value: `${parentId}-${num}`,
+      label: `${parentLabel}-${num}`,
+      disabled: Math.random() - 0.5 > 0, // 随机禁用节点
+      isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
+    }))
+
+    // 模拟异步返回
+    setTimeout(() => resolve(children), Math.random() * 2 * 1000)
+  }
+}
+
+function afterLoad(data) {
+  console.log('afterLoad 属性触发：', data)
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
+

package/demos/pc/app/tree-select/lazy-multiple.vue

@@ -0,0 +1,66 @@
+<template>
+  <tiny-tree-select
+    v-model="value"
+    :tree-op="treeOp"
+    lazy
+    :load="load"
+    :after-load="afterLoad"
+    multiple
+  ></tiny-tree-select>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: [],
+      treeOp: {}
+    }
+  },
+  methods: {
+    // node 为点击的节点，resolve 为回调函数，用于异步返回下层节点的数据
+    load(node, resolve) {
+      console.log('即将加载节点下级数据：', node)
+
+      // 通过 level =0 来识别第一次加载
+      if (node.level === 0) {
+        resolve([
+          { value: '1', label: '一级 1' },
+          { value: '2', label: '一级 2' },
+          { value: '3', label: '一级 3' }
+        ])
+      }
+      // 通过 data 有值，识别是用户点击后的加载
+      else if (node.data) {
+        const parentId = node.data.value
+        const parentLabel = node.data.label
+
+        const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
+          value: `${parentId}-${num}`,
+          label: `${parentLabel}-${num}`,
+          disabled: Math.random() - 0.5 > 0, // 随机禁用节点
+          isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
+        }))
+
+        // 模拟异步返回
+        setTimeout(() => resolve(children), Math.random() * 2 * 1000)
+      }
+    },
+    afterLoad(data) {
+      console.log('afterLoad 属性触发：', data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
+

package/demos/pc/app/tree-select/lazy.vue

@@ -0,0 +1,59 @@
+<template>
+  <tiny-tree-select v-model="value" :tree-op="treeOp" lazy :load="load" :after-load="afterLoad"></tiny-tree-select>
+</template>
+
+<script>
+import { TinyTreeSelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeSelect
+  },
+  data() {
+    return {
+      value: '',
+      treeOp: {}
+    }
+  },
+  methods: {
+    // node 为点击的节点，resolve 为回调函数，用于异步返回下层节点的数据
+    load(node, resolve) {
+      console.log('即将加载节点下级数据：', node)
+
+      // 通过 level =0 来识别第一次加载
+      if (node.level === 0) {
+        resolve([
+          { value: '1', label: '一级 1' },
+          { value: '2', label: '一级 2' },
+          { value: '3', label: '一级 3' }
+        ])
+      }
+      // 通过 data 有值，识别是用户点击后的加载
+      else if (node.data) {
+        const parentId = node.data.value
+        const parentLabel = node.data.label
+
+        const children = Array.from({ length: 5 }, (v, k) => k + 1).map((num) => ({
+          value: `${parentId}-${num}`,
+          label: `${parentLabel}-${num}`,
+          disabled: Math.random() - 0.5 > 0, // 随机禁用节点
+          isLeaf: Math.random() - 0.5 > 0 // 随机设置叶子节点
+        }))
+
+        // 模拟异步返回
+        setTimeout(() => resolve(children), Math.random() * 2 * 1000)
+      }
+    },
+    afterLoad(data) {
+      console.log('afterLoad 属性触发：', data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tree-select {
+  width: 280px;
+}
+</style>
+

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

@@ -68,6 +68,20 @@ export default {
       },
       codeFiles: ['disabled.vue']
     },
+    {
+      demoId: 'lazy',
+      name: {
+        'zh-CN': '懒加载',
+        'en-US': 'Lazy loading'
+      },
+      desc: {
+        'zh-CN':
+          '通过 <code>lazy</code> 属性，启用懒加载模式。<br>通过 <code>load</code> 函数属性，触发加载，初始会执行一次。<br>通过 <code>after-load</code> 函数属性，监听下级节点加载完毕的事件。',
+        'en-US':
+          'Enable lazy loading mode with the <code>lazy</code> property. <br>load is triggered by the <code>load</code> function property, which is initially executed once. <br>afterLoad </code> function properties are used to listen for events when a subordinate node has finished loading.'
+      },
+      codeFiles: ['lazy.vue']
+    },
     {
       demoId: 'map-field',
       name: {

package/demos/pc/app/user/custom-service.spec.ts

@@ -16,6 +16,6 @@ test('user-custom-service', async ({ page }) => {
   await input.press('Enter')
   await page.waitForTimeout(2000)
   await expect((await options.all()).length).toEqual(4)
-  await page.getByRole('listitem', { name: 'test2' }).click()
+  await page.getByRole('option', { name: 'test2' }).click()
   await expect(input).toHaveValue('test2')
 })