@opentiny/vue-docs 3.21.0 → 3.21.2

package/demos/apis/dropdown.js

@@ -218,6 +218,20 @@ export default {
           pcDemo: 'split-button',
           mfDemo: ''
         },
+        {
+          name: 'v-model:visible',
+          type: 'boolean',
+          defaultValue: 'false',
+          meta: {
+            stable: '3.21.1'
+          },
+          desc: {
+            'zh-CN': '手动控制下拉弹框显隐，优先级高于trigger',
+            'en-US': 'Manually control the display and hide of the dropdown menu, with priority higher than the trigger'
+          },
+          mode: ['pc'],
+          pcDemo: 'visible'
+        },
         {
           name: 'visible-arrow',
           type: 'boolean',

package/demos/pc/app/dropdown/visible-composition-api.vue

@@ -0,0 +1,48 @@
+<template>
+  <tiny-dropdown v-model:visible="visible" :show-icon="false" @item-click="itemClick" :hideOnClick="false">
+    <tiny-button @click="handleClick">点击{{ visible ? '隐藏' : '显示' }}</tiny-button>
+    <template #dropdown>
+      <tiny-dropdown-menu>
+        <tiny-dropdown-item
+          v-for="(item, index) in options"
+          :key="index"
+          :label="item.label"
+          :disabled="item.disabled"
+          :item-data="item"
+        ></tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyButton } from '@opentiny/vue'
+
+const visible = ref(false)
+const options = [
+  {
+    label: '黄金糕'
+  },
+  {
+    label: '点击我隐藏'
+  },
+  {
+    label: '螺蛳粉'
+  },
+  {
+    label: '双皮奶'
+  },
+  {
+    label: '蚵仔煎'
+  }
+]
+const itemClick = (e) => {
+  if (e.itemData.label === '点击我隐藏') {
+    visible.value = false
+  }
+}
+const handleClick = () => {
+  visible.value = !visible.value
+}
+</script>

package/demos/pc/app/dropdown/visible.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test('手动控制显隐', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#visible')
+
+  const wrap = page.locator('#visible')
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu').locator('visible=true')
+
+  await wrap.getByText('点击显示').click()
+  await expect(dropDownMenu).toHaveCount(1)
+
+  await page.locator('#all-demos-container').click()
+  await expect(dropDownMenu).toHaveCount(1)
+
+  await dropDownMenu.locator('div').filter({ hasText: '黄金糕' }).nth(1).click()
+  await expect(dropDownMenu).toHaveCount(1)
+
+  await wrap.getByText('点击隐藏').click()
+  await expect(dropDownMenu).toHaveCount(0)
+
+  await wrap.getByText('点击显示').click()
+  await expect(dropDownMenu).toHaveCount(1)
+
+  await dropDownMenu.locator('div').filter({ hasText: '点击我隐藏' }).nth(1).click()
+  await expect(dropDownMenu).toHaveCount(0)
+})

package/demos/pc/app/dropdown/visible.vue

@@ -0,0 +1,61 @@
+<template>
+  <tiny-dropdown v-model:visible="visible" :show-icon="false" @item-click="itemClick" :hideOnClick="false">
+    <tiny-button @click="handleClick">点击{{ visible ? '隐藏' : '显示' }}</tiny-button>
+    <template #dropdown>
+      <tiny-dropdown-menu>
+        <tiny-dropdown-item
+          v-for="(item, index) in options"
+          :key="index"
+          :label="item.label"
+          :disabled="item.disabled"
+          :item-data="item"
+        ></tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script>
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem,
+    TinyButton
+  },
+  data() {
+    return {
+      visible: false,
+      options: [
+        {
+          label: '黄金糕'
+        },
+        {
+          label: '点击我隐藏'
+        },
+        {
+          label: '螺蛳粉'
+        },
+        {
+          label: '双皮奶'
+        },
+        {
+          label: '蚵仔煎'
+        }
+      ]
+    }
+  },
+  methods: {
+    itemClick(e) {
+      if (e.itemData.label === '点击我隐藏') {
+        this.visible = false
+      }
+    },
+    handleClick() {
+      this.visible = !this.visible
+    }
+  }
+}
+</script>

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

@@ -111,6 +111,19 @@ export default {
       },
       codeFiles: ['trigger.vue']
     },
+    {
+      demoId: 'visible',
+      name: {
+        'zh-CN': '手动控制显隐',
+        'en-US': 'Manual control of display and concealment'
+      },
+      desc: {
+        'zh-CN': '<p>通过 <code>visible</code> 属性手动控制下拉菜单显隐，优先级高于trigger。</p>\n',
+        'en-US':
+          '<p>Manually control the visibility of the dropdown menu through the<code>visible</code>attribute, with priority over trigger.</p>\n'
+      },
+      codeFiles: ['visible.vue']
+    },
     {
       demoId: 'tip',
       name: {

package/demos/pc/app/grid/custom/column-fixed.spec.js

@@ -2,10 +2,11 @@ import { test, expect } from '@playwright/test'
 
 test('列冻结', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const custom = page.locator('.tiny-grid-custom')
   await page.goto('grid-custom#custom-column-fixed')
   await page.locator('.tiny-grid-custom__setting-btn').click()
-  await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('未冻结').getByRole('img').click()
-  await page.getByRole('row', { name: '员工数 显示 左冻结' }).getByTitle('左冻结').getByRole('img').click()
+  await custom.getByRole('row', { name: '员工数 ' }).getByTitle('未冻结').getByRole('img').click()
+  await custom.getByRole('row', { name: '员工数' }).getByTitle('左冻结').getByRole('img').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('cell', { name: '员工数' })).toHaveCSS('right', '0px')
 })

package/demos/pc/app/grid/custom/column-sort.spec.js

@@ -2,9 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('个性化排序测试', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const custom = page.locator('.tiny-grid-custom')
   await page.goto('grid-custom#custom-column-sort')
   await page.locator('.tiny-grid-custom__setting-btn').click()
-  await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').getByRole('img').click()
+  await custom.getByRole('row', { name: '员工数' }).getByTitle('未排序').getByRole('img').click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(200)
   const sortBtn = await page.getByRole('cell', { name: '员工数' }).getByRole('img')

package/demos/pc/app/grid/custom/column-visible-hidden.spec.js

@@ -2,9 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('列显示隐藏', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const custom = page.locator('.tiny-grid-custom')
   await page.goto('grid-custom#custom-column-visible-hidden')
   await page.locator('.tiny-grid-custom__setting-btn').click()
-  await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
-  await page.getByRole('button', { name: '确定' }).click()
+  await custom.getByRole('row', { name: '员工数' }).getByTitle('显示').getByRole('img').click()
+  await custom.getByRole('button', { name: '确定' }).click()
   await expect(page.getByRole('cell', { name: '员工数' })).not.toBeVisible()
 })

package/demos/pc/app/grid/custom/multiple-column-sort.spec.js

@@ -2,16 +2,17 @@ import { test, expect } from '@playwright/test'
 
 test('多列排序', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const custom = page.locator('.tiny-grid-custom')
   await page.goto('grid-custom#custom-multiple-column-sort')
   await page.locator('.tiny-grid-custom__setting-btn').first().click()
-  await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').locator('path').click()
-  await page.getByTitle('未排序').locator('path').click()
-  await page.getByRole('button', { name: '确定' }).click()
+  await custom.getByRole('row', { name: '员工数' }).getByTitle('未排序').locator('path').click()
+  await custom.getByTitle('未排序').locator('path').click()
+  await custom.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('.tiny-grid-body__row').nth(3)).toContainText('GFD 科技有限公司')
 
   await page.locator('.tiny-grid-custom__setting-btn').nth(1).click()
-  await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').getByRole('img').click()
-  await page.getByTitle('未排序').getByRole('img').click()
-  await page.getByRole('button', { name: '确定' }).click()
+  await custom.getByRole('row', { name: '员工数' }).getByTitle('未排序').getByRole('img').click()
+  await custom.getByTitle('未排序').getByRole('img').click()
+  await custom.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('.tiny-grid-body__row').nth(10)).toContainText('YHN 科技有限公司')
 })

package/demos/pc/app/grid/custom/ordercolumn-local.spec.js

@@ -2,18 +2,19 @@ import { test, expect } from '@playwright/test'
 
 test('个性化按钮点击事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const custom = page.locator('.tiny-grid-custom')
   await page.goto('grid-custom#custom-ordercolumn-local')
   await page.locator('.tiny-grid-custom__setting-btn').click()
-  await page.getByRole('cell', { name: '显示 未冻结' }).getByTitle('显示').getByRole('img').click()
-  await page.getByRole('button', { name: '确定' }).click()
+  await custom.locator('.tiny-grid-body__row').first().getByTitle('显示').getByRole('img').click()
+  await custom.getByRole('button', { name: '确定' }).click()
   await expect(
     page.getByText('点击了确认按钮{"sortType":"page","pageSize":10,"columns":[{"property":"name","order":nu')
   ).toBeVisible()
   await page.getByRole('button', { name: '确定' }).click()
   await page.locator('.tiny-grid-custom__setting-btn').click()
-  await page.getByRole('button', { name: '重置' }).click()
+  await custom.getByRole('button', { name: '重置' }).click()
   await expect(page.getByText('点击了重置按钮')).toBeVisible()
   await page.getByRole('button', { name: '确定' }).nth(1).click()
-  await page.getByRole('button', { name: '取消' }).click()
+  await custom.getByRole('button', { name: '取消' }).click()
   await expect(page.getByText('点击了取消按钮 undefined')).toBeVisible
 })

package/demos/pc/app/grid/custom/reset-resizable.spec.js

@@ -30,10 +30,12 @@ test.describe('手动重置列操作', () => {
 
   test('重置列隐藏', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
+    const custom = page.locator('.tiny-grid-custom')
+
     await page.goto('grid-custom#custom-reset-resizable')
     await page.locator('.tiny-grid-custom__setting-btn').click()
-    await page.getByRole('row', { name: '员工数 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
-    await page.getByRole('button', { name: '确定' }).click()
+    await custom.getByRole('row', { name: '员工数' }).getByTitle('显示').getByRole('img').click()
+    await custom.getByRole('button', { name: '确定' }).click()
     const thHeader = page.locator('th.tiny-grid-header__column').nth(1)
     await expect(thHeader).toContainText('地址')
     await page.getByRole('button', { name: '重置列的隐藏操作' }).click()

package/demos/pc/app/grid/edit/custom-editing.spec.js

@@ -6,11 +6,5 @@ test('自定义编辑规则', async ({ page }) => {
   await page.getByText('GFD 科技 YX 公司').first().click()
   await expect(page.getByText('GFD 科技 YX 公司').first()).toBeVisible()
   await page.getByText('WWWW 科技 YX 公司').first().click()
-  await expect(
-    page
-      .getByRole('row', {
-        name: '2 华南区 2014-02-14 14:14:14 1300 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-      })
-      .getByRole('textbox')
-  ).toBeVisible()
+  await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
 })

package/demos/pc/app/grid/edit/editing.spec.js

@@ -5,18 +5,7 @@ test('编辑方式', async ({ page }) => {
   await page.goto('grid-edit#edit-editing')
   // 单元格编辑
   await page.getByRole('cell', { name: 'GFD 科技 YX 公司' }).first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('GFD 科技 Y 水电费第三方 X 公司')
+  await page.locator('.tiny-grid-default-input').fill('GFD 科技 Y 水电费第三方 X 公司')
   await page.getByRole('heading', { name: '单元格编辑：' }).click()
   await expect(await page.getByText('GFD 科技 Y 水电费第三方 X 公司')).toHaveCount(2)
 

package/demos/pc/app/grid/edit/has-row-change.spec.js

@@ -2,18 +2,14 @@ import { test, expect } from '@playwright/test'
 
 test('检查数据是否改变', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#edit-has-row-change')
   await page.goto('grid-edit#edit-has-row-change')
-  await page.getByText('GFD 科技 YX 公司').first().click()
-  await page.getByRole('row', { name: '1 保存' }).locator('input[type="text"]').fill('sdf')
-  await page.getByRole('row', { name: '1 保存' }).getByRole('button', { name: '保存' }).click()
+  await demo.getByText('GFD 科技 YX 公司').first().click()
+  await demo.locator('.tiny-grid-body__row').first().locator('input[type="text"]').fill('sdf')
+  await demo.locator('.tiny-grid-body__row').first().getByRole('button', { name: '保存' }).click()
   await expect(page.getByText('保存成功！')).toBeVisible()
   await page.getByRole('button', { name: '确定' }).click()
-  await page
-    .getByRole('row', {
-      name: '2 WWWW 科技 YX 公司 华南区 深圳福田区 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。 保存'
-    })
-    .getByRole('button', { name: '保存' })
-    .click()
+  await demo.locator('.tiny-grid-body__row').nth(1).getByRole('button', { name: '保存' }).click()
   await expect(page.getByText('当前数据未改变！')).toBeVisible()
   await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/grid/edit/revert-data.spec.js

@@ -4,19 +4,9 @@ test('表格编辑还原更改', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-edit#edit-revert-data')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。 恢复'
-    })
-    .getByRole('textbox')
-    .fill('sss')
+  await page.locator('.tiny-grid-default-input').fill('sss')
   await page.getByText('RFV 有限责任公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '3 华南区 中山市 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。 恢复'
-    })
-    .getByRole('textbox')
-    .fill('eee')
+  await page.locator('.tiny-grid-default-input').fill('eee')
   await page.locator('#edit-revert-data').getByRole('cell', { name: '名称' }).click()
   await page.getByRole('button', { name: '恢复全部' }).click()
   await expect(page.getByText('GFD 科技 YX 公司').first()).toBeVisible()

package/demos/pc/app/grid/edit/status-of-editing.spec.js

@@ -4,12 +4,7 @@ test('开启编辑状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-edit#edit-status-of-editing')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('sdfdf')
+  await page.locator('.tiny-grid-default-input').fill('sdfdf')
   await page.getByRole('heading', { name: '开启编辑状态：' }).click()
   await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(0)).toHaveClass(/col__valid-success/)
   await expect(page.getByRole('cell', { name: 'sdfdf' }).nth(1)).not.toHaveClass(/col__valid-success/)

package/demos/pc/app/grid/edit/trigger-mode-for-editing.spec.js

@@ -4,21 +4,9 @@ test('触发编辑方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-edit#edit-trigger-mode-for-editing')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await expect(
-    page
-      .getByRole('row', {
-        name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-      })
-      .getByRole('textbox')
-  ).toBeVisible()
+  await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
 
   await page.getByText('WWWW 科技 YX 公司').nth(1).dblclick()
 
-  await expect(
-    page
-      .getByRole('row', {
-        name: '2 华南区 深圳福田区 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-      })
-      .getByRole('textbox')
-  ).toBeVisible()
+  await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
 })

package/demos/pc/app/grid/edit/trigger-mode-hm-editing.spec.js

@@ -2,18 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('手动触发编辑', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#edit-trigger-mode-hm-editing')
   await page.goto('grid-edit#edit-trigger-mode-hm-editing')
   await page.getByText('GFD 科技 YX 公司').first().click()
   await expect(page.getByText('GFD 科技 YX 公司').first()).toBeVisible()
-  await page
-    .getByRole('row', {
-      name: '1 GFD 科技 YX 公司 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。 编辑'
-    })
-    .getByRole('button', { name: '编辑' })
-    .click()
-  await expect(
-    page.getByRole('row', { name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863' }).getByRole('textbox')
-  ).toBeVisible()
+  await demo.locator('.tiny-grid-body__row').first().getByRole('button', { name: '编辑' }).click()
+  await expect(page.locator('.tiny-grid-default-input')).toBeVisible()
 
   await page.getByRole('row', { name: '3 RFV' }).getByRole('button').click()
   await expect(page.getByRole('combobox')).toBeVisible()

package/demos/pc/app/grid/editor/custom-edit.spec.js

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('多行编辑', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-editor#editor-custom-edit')
-  await expect(page.getByRole('row', { name: '1 请选择 保存 取消' }).getByRole('textbox').first()).toBeVisible()
-  await expect(page.getByRole('row', { name: '2 请选择 保存 取消' }).getByRole('textbox').first()).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'GFD 科技有限公司' }).getByRole('textbox')).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'WWWW 科技有限公司' }).getByRole('textbox')).toBeVisible()
 })

package/demos/pc/app/grid/editor/inner-editor.spec.js

@@ -2,13 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('Grid-编辑器 - 内置编辑器', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#editor-inner-editor')
   await page.goto('grid-editor#grid_Example-gridEdit-inner-editor')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  const input = page
-    .getByRole('row', {
-      name: '1 800 华东区 2014-04-30 00:56:00 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
+  const input = demo.locator('.tiny-grid-body__row input').first()
 
   // 内置编辑器
   await expect(input).toHaveClass(/tiny-grid-default-input/)

package/demos/pc/app/grid/event/valid-error-event.spec.js

@@ -4,12 +4,7 @@ test('校验不通过事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-event#event-valid-error-event')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .clear()
+  await page.locator('.tiny-grid-default-input').clear()
   await page.waitForTimeout(400)
   await expect(page.getByText('触发校验不通过事件').first()).toBeVisible()
 })

package/demos/pc/app/grid/faq/grid-in-dialog-box.spec.js

@@ -5,12 +5,7 @@ test('弹窗框中表格编辑器失焦功能测试', async ({ page }) => {
   await page.goto('grid-faq#faq-grid-in-dialog-box')
   await page.getByRole('button', { name: '弹出 Dialog false' }).click()
   await page.getByText('GFD 科技有限公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('ss')
+  await page.locator('.tiny-grid-default-input').fill('ss')
   await page.getByText('消息').click()
 
   await expect(page.getByText('ss').first()).toBeVisible()

package/demos/pc/app/grid/pager/show-save-msg.spec.js

@@ -4,12 +4,7 @@ test('保存', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-pager#pager-show-save-msg')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('GFD 科技 YX 公司 ds')
+  await page.locator('.tiny-grid-default-input').fill('GFD 科技 YX 公司 ds')
   await page.locator('#pager-show-save-msg').getByRole('cell', { name: '名称' }).click()
   await page.getByRole('listitem').filter({ hasText: '2' }).click()
   await expect(page.getByText('有修改的数据，是否要保存？')).toBeVisible()

package/demos/pc/app/grid/toolbar/save-data.spec.js

@@ -4,12 +4,7 @@ test('服务端数据保存和删除方法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-toolbar#toolbar-save-data')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('dsfds')
+  await page.locator('.tiny-grid-default-input').fill('dsfds')
   await page.getByRole('row', { name: '名称 区域 地址 公司简介' }).getByText('名称').click()
   await page.getByRole('button', { name: '保存' }).click()
   await expect(page.getByText('dsfds').first()).toBeVisible()

package/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.spec.js

@@ -24,8 +24,7 @@ test.describe('树表增删改功能', () => {
       .first()
       .click()
     await page.getByRole('row', { name: '3 WWWW 科技股份有限子公司 华南区 720' }).getByText('华南区').first().click()
-    await page.getByRole('row', { name: '3 WWWW 科技股份有限子公司 720' }).getByRole('textbox').first().click()
-    await page.getByRole('row', { name: '3 WWWW 科技股份有限子公司 720' }).getByRole('textbox').fill('华南区 ee')
+    await page.locator('.tiny-grid-default-input').fill('华南区 ee')
     await page.getByText('WWWW 科技 YX 公司').first().click()
     await page.getByRole('button', { name: '获取修改' }).click()
 

package/demos/pc/app/grid/validation/before-submit-validation.spec.js

@@ -2,14 +2,11 @@ import { test, expect } from '@playwright/test'
 
 test('提交前校验', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#validation-before-submit-validation')
   await page.goto('grid-validation#validation-before-submit-validation')
-  await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('')
+  await demo.getByText('GFD 科技 YX 公司').first().click()
+  await demo.locator('.tiny-grid-default-input').fill('')
+
   await page.getByRole('button', { name: '提交数据' }).click()
   await expect(page.getByText('校验不通过', { exact: true })).toBeVisible()
 

package/demos/pc/app/grid/validation/custcomp.spec.js

@@ -2,14 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('自定义组件与插槽编辑器校验', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#validation-custcomp')
   await page.goto('grid-validation#validation-custcomp')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。 1234567890'
-    })
-    .getByRole('textbox')
-    .fill('')
+  await demo.locator('.tiny-grid-default-input').fill('')
 
   await expect(page.getByRole('tooltip', { name: '必填' })).toBeVisible()
 })

package/demos/pc/app/grid/validation/editing-isvalidalways-validation.spec.js

@@ -2,19 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('隐藏列编辑时校验', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  const demo = page.locator('#validation-editing-isvalidalways-validation')
   await page.goto('grid-validation#validation-editing-isvalidalways-validation')
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .clear()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('GF')
+  await demo.locator('.tiny-grid-default-input').first().fill('GF')
 
   await expect(page.getByRole('tooltip', { name: '名称长度在 3 到 50 个字符' })).toBeVisible()
 })

package/demos/pc/app/grid/validation/editing-validation.spec.js

@@ -2,14 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('表格校验', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#validation-editing-validation')
   await page.goto('grid-validation#validation-editing-validation')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('')
+  await demo.locator('.tiny-grid-default-input').fill('')
 
   await expect(page.getByRole('tooltip', { name: '名称必填' })).toBeVisible()
 })

package/demos/pc/app/grid/validation/row-data-valid.spec.js

@@ -2,9 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('数据关联校验', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#validation-row-data-valid')
   await page.goto('grid-validation#validation-row-data-valid')
   await page.getByText('70').first().click()
-  await page.getByRole('row', { name: '1 100 0' }).getByRole('textbox').fill('700')
+  await demo.locator('.tiny-grid-default-input').fill('700')
 
   await expect(page.getByRole('tooltip', { name: '数值不能大于 100' })).toBeVisible()
 })

package/demos/pc/app/grid/validation/select-validation.spec.js

@@ -2,21 +2,13 @@ import { test, expect } from '@playwright/test'
 
 test('选中时校验', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  const demo = page.locator('#validation-select-validation')
   await page.goto('grid-validation#validation-select-validation')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .clear()
+  await demo.locator('.tiny-grid-default-input').fill('')
   await page.waitForTimeout(200)
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .locator('span')
-    .click()
+  await demo.locator('.tiny-grid-body__row .tiny-grid-checkbox__icon').first().click()
   await page.getByRole('button', { name: '校验选中数据' }).click()
 
   await expect(page.getByText('校验不通过', { exact: true })).toBeVisible()

package/demos/pc/app/grid/validation/tipconfig.spec.js

@@ -2,20 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('错误提示配置项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const demo = page.locator('#validation-tipconfig')
   await page.goto('grid-validation#validation-tipconfig')
   await page.getByText('GFD 科技 YX 公司').click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('')
+  await demo.locator('.tiny-grid-default-input').fill('')
 
   await expect(page.getByRole('tooltip', { name: '名称必填' })).toBeVisible()
 })

package/demos/pc/app/grid/validation/validation-scroll-to-col.spec.js

@@ -6,12 +6,7 @@ test('触发校验时自动定位到当前校验的单元格', async ({ page })
 
   const demo = page.locator('#validation-validation-scroll-to-col')
   await page.getByText('GFD 科技 YX 公司').first().click()
-  await page
-    .getByRole('row', {
-      name: '1 华东区 福州 公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
-    })
-    .getByRole('textbox')
-    .fill('')
+  await demo.locator('.tiny-input__inner').fill('')
   await demo.getByText('名称').click()
   const lastColumn = demo.getByText('公司简介')
   await lastColumn.scrollIntoViewIfNeeded()

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

@@ -12,21 +12,21 @@ test('时间格式化', async ({ page }) => {
 
   await page.getByRole('textbox', { name: '19:40:00 pm' }).click()
   await page.waitForTimeout(100)
-  await page.getByRole('listitem').filter({ hasText: '08 pm' }).first().locator('span').click()
+  await page.locator('.tiny-time-panel[visible=true]').getByText('08 pm').click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()
 
   await page.getByRole('textbox', { name: '8:40:0 PM' }).click()
   await page.waitForTimeout(100)
-  await page.getByRole('listitem').filter({ hasText: '09 PM' }).locator('span').click()
+  await page.locator('.tiny-time-panel[visible=true]').getByText('09 PM').click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '9:40:0 PM' })).toBeVisible()
 
   await page.getByRole('textbox', { name: '21:40:0 PM' }).click()
   await page.waitForTimeout(100)
-  await page.getByRole('listitem').filter({ hasText: '10 PM' }).locator('span').click()
+  await page.locator('.tiny-time-panel[visible=true]').getByText('10 PM').click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '22:40:0 PM' })).toBeVisible()
@@ -34,14 +34,14 @@ test('时间格式化', async ({ page }) => {
   // value-format: 选中值的格式
   await page.getByRole('textbox', { name: '18:30:00' }).click()
   await page.waitForTimeout(100)
-  await page.getByRole('listitem').filter({ hasText: '19' }).first().click()
+  await page.locator('.tiny-time-panel[visible=true]').getByText('19').first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '19:30:00' })).toBeVisible()
 
   // picker-options.format: 下拉框中显示的格式
-  const timePickerHour = page.getByRole('listitem').filter({ hasText: '18' }).first()
-  const timePickerMinute = page.getByRole('listitem').filter({ hasText: '40' }).first()
+  const timePickerHour = page.locator('.tiny-time-panel[visible=true]').getByText('18').first()
+  const timePickerMinute = page.locator('.tiny-time-panel[visible=true]').getByText('40').first()
   const timePickerSecond = page.locator('.of-hidden > div:nth-child(12) .tiny-scrollbar').nth(2)
   await page.getByRole('textbox', { name: '18:40:00' }).click()
   await page.waitForTimeout(200)

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "3.21.0",
+  "version": "3.21.2",
   "license": "MIT",
   "dependencies": {
+    "@docsearch/css": "^3.8.0",
+    "@docsearch/js": "^3.8.0",
+    "@docsearch/react": "npm:@docsearch/css",
     "@opentiny/vue-repl": "^1.1.2",
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -16,27 +19,23 @@
     "vue": "^3.4.31",
     "vue-i18n": "^9.1.10",
     "vue-router": "4.1.5",
-    "@docsearch/js": "^3.8.0",
-    "@docsearch/css": "^3.8.0",
-    "@docsearch/react": "npm:@docsearch/css",
+    "@opentiny/vue": "~3.21.2",
+    "@opentiny/vue-design-aurora": "~3.21.0",
     "@opentiny/vue-common": "~3.21.0",
-    "@opentiny/vue": "~3.21.1",
     "@opentiny/vue-design-saas": "~3.21.0",
-    "@opentiny/vue-design-aurora": "~3.21.0",
-    "@opentiny/vue-design-smb": "~3.21.0",
-    "@opentiny/vue-hooks": "~3.21.0",
     "@opentiny/vue-directive": "~3.21.0",
     "@opentiny/vue-icon": "~3.21.0",
+    "@opentiny/vue-design-smb": "~3.21.0",
+    "@opentiny/vue-hooks": "~3.21.0",
     "@opentiny/vue-icon-multicolor": "~3.21.0",
     "@opentiny/vue-theme": "~3.21.0",
     "@opentiny/vue-icon-saas": "~3.21.0",
     "@opentiny/vue-theme-saas": "~3.21.0",
-    "@opentiny/vue-theme-mobile": "~3.21.0",
-    "@opentiny/vue-vite-import": "~1.2.0"
+    "@opentiny/vue-vite-import": "~1.2.0",
+    "@opentiny/vue-theme-mobile": "~3.21.0"
   },
   "devDependencies": {
-    "@playwright/test": "~1.42.0",
-    "rollup-plugin-visualizer": "^5.12.0",
+    "@playwright/test": "~1.49.0",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^17.0.45",
     "@unocss/preset-icons": "^0.38.2",
@@ -57,6 +56,7 @@
     "markdown-it-table-of-contents": "^0.6.0",
     "markdown-it-toc-done-right": "^4.2.0",
     "prettier": "^2.7.1",
+    "rollup-plugin-visualizer": "^5.12.0",
     "stylelint": "^14.9.1",
     "stylelint-config-standard": "^26.0.0",
     "typescript": "~5.3.3",

package/src/i18n/en.json

@@ -32,6 +32,7 @@
   "backTop": "Back To Top",
   "overview": "Components Overview",
   "overviewDesc": "TinyVue provides a wealth of basic UI components for web applications, and we will continue to explore the best UI practices for enterprise-level applications. Welcome to try TinyVue.",
+  "overviewDescPlus": "TinyVuePlus is a component library for Cloud business scenarios based on TinyVue, following the new design specifications of Cloud CloudDesign and utilizing Vite+Vue3+TypeScript technology stack.",
   "searchComponents": "search components",
   "apiType": "Components demos code style",
   "apiStyleOptions": "Options",
@@ -41,4 +42,4 @@
   "demoModeMultiple": "Multiple",
   "contributor": "Contributors",
   "noData": "No Data"
-}
+}

package/src/i18n/zh.json

@@ -32,6 +32,7 @@
   "backTop": "返回顶部",
   "overview": "组件总览",
   "overviewDesc": "TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。",
+  "overviewDescPlus": "TinyVuePlus 是一款基于 TinyVue 的面向云业务场景的组件库，遵循 CloudDesign 新设计规范，基于 Vite + Vue3 + TypeScript 技术栈。",
   "searchComponents": "搜索组件",
   "apiType": "组件示例代码风格",
   "apiStyleOptions": "选项式",
@@ -41,4 +42,4 @@
   "demoModeMultiple": "多示例",
   "contributor": "贡献者",
   "noData": "暂无数据"
-}
+}

package/src/main.js

@@ -41,13 +41,15 @@ hljs.registerLanguage('javascript', javascript)
 hljs.registerLanguage('css', css)
 hljs.registerLanguage('html', html)
 
-docsearch({
-  appId: 'AGPA5UXHMH',
-  apiKey: '5fa09fc20270efa61d68e2c2eb0f56df',
-  indexName: 'opentiny',
-  container: '.search-box',
-  debug: false
-})
+if (!location.href.includes('tiny-vue-plus')) {
+  docsearch({
+    appId: 'AGPA5UXHMH',
+    apiKey: '5fa09fc20270efa61d68e2c2eb0f56df',
+    indexName: 'opentiny',
+    container: '.search-box',
+    debug: false
+  })
+}
 
 if (envTarget !== 'open') {
   // 支持本地开发和内网使用全局搜索

package/src/views/components/components.vue

@@ -20,7 +20,84 @@
     <div class="ti-rel cmp-container">
       <div class="flex-horizontal docs-content-main">
         <div class="docs-tabs-wrap">
-          <tiny-tabs v-model="activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
+          <div v-if="['interfaces', 'types', 'classes'].includes(cmpId)" id="TS" class="all-api-container">
+            <div class="ti-f-c ti-f-wrap api-list">
+              <div class="mt20" v-for="oneGroup in currJson.apis" :key="oneGroup.name">
+                <div class="ti-f-r ti-f-pos-start ti-fw-bold">
+                  <div :id="`cmp-${oneGroup.name}`" class="ti-f18">
+                    {{ oneGroup.name }}
+                  </div>
+                  <div class="ti-ml12 ti-b-a-primary ti-c-primary ti-px8 ti-py4">
+                    {{ oneGroup.type }}
+                  </div>
+                </div>
+                <div v-for="(oneApiArr, key) in oneGroup" :key="key">
+                  <template v-if="key !== 'name' && key !== 'type' && oneApiArr.length > 0">
+                    <div class="ti-f18 ti-py28" :id="`${oneGroup.name}--${key}`">
+                      {{ key }}
+                    </div>
+                    <div class="api-table-box">
+                      <tiny-grid class="api-table" :data="tableData[oneGroup.name][key]" :expand-config="apiExpandConf">
+                        <tiny-grid-column
+                          v-if="tableData[oneGroup.name][key][0]?.type"
+                          class-name="api-table-expand-col"
+                          type="expand"
+                          width="32"
+                        >
+                          <template #default="{ row }">
+                            <async-highlight v-if="row.code" :code="row.code.trim()" types="ts"></async-highlight>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column field="name" :title="i18nByKey('name')" :width="columnWidth[key][0]">
+                          <template #default="{ row }">
+                            <span class="api-table-name">
+                              <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
+                              <span v-else>{{ row.name }}</span>
+                            </span>
+                            <version-tip
+                              v-if="row.meta || row.versionTipOption"
+                              :meta="row.meta"
+                              v-bind="row.versionTipOption"
+                              render-type="tag"
+                              tip-subject="api"
+                            >
+                            </version-tip>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column
+                          v-if="tableData[oneGroup.name][key][0]?.type"
+                          field="type"
+                          :title="i18nByKey('propType')"
+                          :width="columnWidth[key][1]"
+                        >
+                          <template #default="{ row }">
+                            <a
+                              v-if="row.typeAnchorName"
+                              :href="`${row.typeAnchorName.indexOf('#') === -1 ? '#' : ''}${row.typeAnchorName}`"
+                              v-html="row.type"
+                            ></a>
+                            <span v-else v-html="row.type"></span>
+                          </template>
+                        </tiny-grid-column>
+                        <tiny-grid-column
+                          v-if="key === 'props'"
+                          field="defaultValue"
+                          :title="i18nByKey('defValue')"
+                          :width="columnWidth[key][2]"
+                        ></tiny-grid-column>
+                        <tiny-grid-column field="desc" :title="i18nByKey('desc')">
+                          <template #default="data">
+                            <span v-html="data.row.desc"></span>
+                          </template>
+                        </tiny-grid-column>
+                      </tiny-grid>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+          <tiny-tabs v-else v-model="activeTab" ref="demoTabs" class="docs-content-tabs" @click="onTabsClick">
             <tiny-tab-item :title="i18nByKey('demos')" name="demos">
               <!-- demos列表 -->
               <template v-if="currJson?.demos?.length">

package/src/views/overview.vue

@@ -7,7 +7,7 @@
       </h1>
 
       <h1 class="ti-f14 ti-my20 ti-lh21">
-        {{ i18nByKey('overviewDesc') }}
+        {{ i18nByKey(isPlus ? 'overviewDescPlus' : 'overviewDesc') }}
       </h1>
       <!-- 搜索 -->
       <tiny-input
@@ -64,7 +64,7 @@
 </template>
 
 <script lang="js">
-import { defineComponent, reactive, toRefs, onMounted } from 'vue'
+import { defineComponent, reactive, toRefs, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { cmpMenus } from '@menu/menus.js'
 import TinyInput from '@opentiny/vue-input'
@@ -85,6 +85,7 @@ export default defineComponent({
       value: '',
       palceMenus: new Array(14)
     })
+    const isPlus = computed(() => location.href.includes('tiny-vue-plus'))
     function debounce(fn, delay) {
       let timeout = 0
       return (value) => {
@@ -162,7 +163,7 @@ export default defineComponent({
       const common = new window.TDCommon(['#footer'], {})
       common.renderFooter()
     })
-    return { ...toRefs(state), ...fn, TinyInput, noDataSvg, searchSvg, isZhCn, getWord, i18nByKey, pubUrl }
+    return { ...toRefs(state), ...fn, TinyInput, noDataSvg, searchSvg, isZhCn, getWord, i18nByKey, isPlus, pubUrl }
   }
 })
 </script>
@@ -198,6 +199,7 @@ export default defineComponent({
   font-size: 14px;
   color: rgb(51, 54, 57);
   line-height: 1.6;
+
   &:hover {
     box-shadow: 1px 1px 6px 6px rgba(31, 52, 121, 0.08);
   }
@@ -227,6 +229,7 @@ export default defineComponent({
   .overview-card {
     gap: 2%;
   }
+
   .overview-card-container {
     width: 49%;
   }