Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/guide-old…

…xdesign-1120

examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue

@@ -6,7 +6,7 @@
 import { ref } from 'vue'
 import { TinyTreeSelect } from '@opentiny/vue'
 
-const value = ref(4)
+const value = ref(10)
 
 const treeOp = ref({
   data: [

examples/sites/demos/pc/app/tree-select/basic-usage.spec.ts

@@ -1,17 +1,22 @@
 import { expect, test } from '@playwright/test'
 
-test('测试基本用法', async ({ page }) => {
+test('下拉树单选', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-select#basic-usage')
 
   const wrap = page.locator('#basic-usage')
   const select = wrap.locator('.tiny-tree-select').nth(0)
   const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-input__suffix .tiny-base-select__caret')
   const treeNode = dropdown.locator('.tiny-tree-node')
 
+  await expect(suffixSvg).toHaveCount(1)
+  await expect(suffixSvg).toBeVisible()
+  await expect(input).toHaveValue('三级 1-1-2')
+
   await input.click()
-  await expect(treeNode).toHaveCount(7)
+  await expect(treeNode.filter({ hasText: /^三级 1-1-2$/ })).toHaveClass(/is-current/)
 
   await treeNode.filter({ hasText: /^二级 2-1$/ }).click()
   await expect(input).toHaveValue('二级 2-1')

examples/sites/demos/pc/app/tree-select/collapse-tags.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test('折叠标签 collapse-tags', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#collapse-tags')
+  const wrap = page.locator('#collapse-tags')
+  const select = wrap.locator('.tiny-tree-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const tag = select.locator('.tiny-tag')
+  const treeNode = dropdown.locator('.tiny-tree-node')
+  const checkedTreeNodes = dropdown.locator('.tiny-tree-node.is-checked')
+
+  // 验证默认值的折叠标签显示
+  await expect(tag).toHaveCount(2)
+  await expect(tag.filter({ hasText: '三级 1-1-1' })).toBeVisible()
+  await expect(tag.filter({ hasText: '+ 1' })).toBeVisible()
+
+  // 点击下拉后选中效果
+  await tag.first().click()
+  await expect(checkedTreeNodes).toHaveCount(2)
+  await expect(treeNode.nth(2)).toHaveClass(/is-checked/)
+  await expect(treeNode.nth(6)).toHaveClass(/is-checked/)
+
+  // 取消选中一个
+  await page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('path').nth(1).click()
+  await expect(tag.filter({ hasText: '+ 1' })).toBeHidden()
+  await expect(tag).toHaveCount(1)
+
+  // 再选中2个
+  await page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('path').nth(1).click()
+  await page.getByRole('treeitem', { name: '三级 1-1-2' }).locator('path').nth(1).click()
+  await expect(tag.filter({ hasText: '+ 4' })).toBeVisible()
+  await expect(tag).toHaveCount(2)
+})

examples/sites/demos/pc/app/tree-select/copy-composition-api.vue

@@ -1,20 +1,19 @@
 <template>
   <div>
     <p>场景1：一键复制所有标签</p>
-    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable></tiny-tree-select>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple copyable></tiny-tree-select>
     <p>场景2：设置复制文本分隔符</p>
-    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
     <p>粘贴至此处：</p>
-    <tiny-input v-model="inputVal" type="text"></tiny-input>
+    <tiny-input v-model="inputVal" class="copy-value" type="text"></tiny-input>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { TinyTreeSelect, TinyInput } from '@opentiny/vue'
 
-const value = ref('')
-const value2 = ref([])
+const value = ref([9, 6])
 const inputVal = ref('')
 
 const treeOp = ref({

examples/sites/demos/pc/app/tree-select/copy.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test'
+
+test('多选一键复制所有标签', async ({ page }) => {
+  await page.goto('tree-select#copy')
+
+  const wrap = page.locator('#copy')
+  const select = wrap.locator('.tiny-tree-select').nth(0)
+  const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
+  const copyIcon = select.locator('.tiny-base-select__copy .tiny-svg')
+
+  await select.hover()
+  await expect(copyIcon).toBeVisible()
+  await copyIcon.click()
+  await copyValueInput.press('Control+V')
+  await expect(copyValueInput).toHaveValue('三级 1-1-1,二级 2-2')
+})
+
+test('多选设置复制文本分隔符', async ({ page }) => {
+  await page.goto('tree-select#copy')
+
+  const wrap = page.locator('#copy')
+  const select = wrap.locator('.tiny-tree-select').nth(1)
+  const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
+
+  await page.waitForTimeout(200)
+  await select.hover()
+  await select.locator('.tiny-base-select__copy > .tiny-svg').click()
+  await copyValueInput.press('Control+V')
+  await expect(copyValueInput).toHaveValue('三级 1-1-1/二级 2-2')
+})

examples/sites/demos/pc/app/tree-select/copy.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <p>场景1：一键复制所有标签</p>
-    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable></tiny-tree-select>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple copyable></tiny-tree-select>
     <p>场景2：设置复制文本分隔符</p>
-    <tiny-tree-select v-model="value2" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
+    <tiny-tree-select v-model="value" :tree-op="treeOp" multiple copyable text-split="/"></tiny-tree-select>
     <p>粘贴至此处：</p>
-    <tiny-input v-model="inputVal" type="text"></tiny-input>
+    <tiny-input v-model="inputVal" class="copy-value" type="text"></tiny-input>
   </div>
 </template>
 
@@ -19,8 +19,7 @@ export default {
   },
   data() {
     return {
-      value1: '',
-      value2: [],
+      value: [9, 6],
       inputVal: '',
       treeOp: {
         data: [

examples/sites/demos/pc/app/tree-select/disabled-composition-api.vue

@@ -15,7 +15,7 @@ import { TinyTreeSelect } from '@opentiny/vue'
 
 const value1 = ref('')
 const value2 = ref(1)
-const value3 = ref([1, 4, 9, 10])
+const value3 = ref([9, 6])
 
 const treeOp = ref({
   data: [

examples/sites/demos/pc/app/tree-select/disabled.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#disabled')
+
+  const wrap = page.locator('#disabled')
+  const select = wrap.locator('.tiny-tree-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+
+  const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled'))
+  await expect(hasDisabled).toBe(true)
+})

examples/sites/demos/pc/app/tree-select/disabled.vue

@@ -20,7 +20,7 @@ export default {
     return {
       value1: '',
       value2: 1,
-      value3: [1, 4, 9, 10],
+      value3: [9, 6],
       treeOp: {
         data: [
           {

examples/sites/demos/pc/app/tree-select/map-field.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test'
+
+test('映射字段', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#map-field')
+
+  const wrap = page.locator('#map-field')
+  const select = wrap.locator('.tiny-tree-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const treeNode = dropdown.locator('.tiny-tree-node')
+
+  await input.click()
+  await treeNode.filter({ hasText: /^二级 2-1$/ }).click()
+  await expect(input).toHaveValue('二级 2-1')
+  await input.click()
+  await expect(treeNode.filter({ hasText: /^二级 2-1$/ })).toHaveClass(/is-current/)
+})

examples/sites/demos/pc/app/tree-select/multiple.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+
+test('下拉树多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#multiple')
+
+  const wrap = page.locator('#multiple')
+  const select = wrap.locator('.tiny-tree-select').nth(0)
+
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-input__suffix .tiny-base-select__caret')
+  const treeNode = dropdown.locator('.tiny-tree-node')
+  const checkedTreeNodes = dropdown.locator('.tiny-tree-node.is-checked')
+  const tag = select.locator('.tiny-tag')
+
+  await expect(tag).toHaveCount(2)
+
+  await suffixSvg.click()
+  await expect(checkedTreeNodes).toHaveCount(2)
+  await expect(treeNode).toHaveCount(7)
+  await page
+    .locator('div')
+    .filter({ hasText: /^一级 2$/ })
+    .locator('.tiny-checkbox')
+    .click()
+
+  await expect(checkedTreeNodes).toHaveCount(4)
+  await expect(tag).toHaveCount(4)
+})

examples/sites/demos/pc/app/tree-select/native-properties.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('原生属性', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#native-properties')
+
+  const wrap = page.locator('#native-properties')
+  const select = wrap.locator('.tiny-tree-select')
+  const input = select.locator('.tiny-input__inner')
+
+  await expect(input).toHaveAttribute('name', 'inputName')
+  await expect(input).toHaveAttribute('placeholder', '请选择一个选项')
+
+  const isHasAutocomplete = await input.evaluate((input) => input.hasAttribute('autocomplete'))
+  await expect(isHasAutocomplete).toBe(true)
+})

examples/sites/demos/pc/app/tree-select/panel-style.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test'
+
+test('不挂载在 body 元素上', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#panel-style')
+
+  const wrap = page.locator('#panel-style')
+  const select = wrap.locator('.tiny-tree-select').nth(0)
+  const dropdown = select.locator('.tiny-base-select__tags-group > .tiny-select-dropdown')
+
+  await select.click()
+  await expect(dropdown).toHaveCount(1)
+})
+
+test('自定义类名', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#panel-style')
+
+  const wrap = page.locator('#panel-style')
+  const select = wrap.locator('.tiny-tree-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+
+  await select.click()
+  await expect(dropdown).toHaveClass(/drop/)
+  await expect(dropdown).toHaveCSS('box-shadow', 'rgba(0, 0, 0, 0.35) 0px 5px 15px 0px')
+})
+
+test('从上方弹出面板', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#panel-style')
+
+  const wrap = page.locator('#panel-style')
+  const select = wrap.locator('.tiny-tree-select').nth(2)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+
+  await select.click()
+  await expect(dropdown).toHaveAttribute('x-placement', 'top')
+})

examples/sites/demos/pc/app/tree-select/reference-style-composition-api.vue

@@ -22,7 +22,7 @@ import { iconPopup } from '@opentiny/vue-icon'
 
 const tinyIconPopup = iconPopup()
 const value = ref('')
-const value2 = ref([])
+const value2 = ref([9])
 
 const treeOp = ref({
   data: [

examples/sites/demos/pc/app/tree-select/reference-style.spec.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义下拉图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#reference-style')
+
+  const wrap = page.locator('#reference-style')
+  const select = wrap.locator('.tiny-tree-select').nth(0)
+  const suffixIconPath = select.locator('.tiny-input__suffix .tiny-base-select__caret path')
+
+  await expect(suffixIconPath).toHaveAttribute(
+    'd',
+    'M2.3 7.78v.08c.02.65.561 1.17 1.221 1.17.68 0 1.229-.54 1.229-1.21 0-.672-.549-1.21-1.229-1.21-.66 0-1.2.519-1.22 1.17Zm4.241.04c0 .67.54 1.21 1.22 1.21.68 0 1.23-.54 1.23-1.21 0-.672-.55-1.21-1.23-1.21-.68 0-1.22.538-1.22 1.21Zm4.24.04v-.08c.02-.651.559-1.17 1.219-1.17.682 0 1.23.538 1.23 1.21 0 .67-.548 1.21-1.23 1.21-.66 0-1.2-.52-1.219-1.17Z'
+  )
+})
+
+test('标签类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#reference-style')
+
+  const wrap = page.locator('#reference-style')
+  const select = wrap.locator('.tiny-tree-select').nth(1)
+  const tag = select.locator('.tiny-tag')
+
+  // 验证是否有对应类型的类名
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--warning/)
+})
+
+test('下划线类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-select#reference-style')
+  const wrap = page.locator('#reference-style')
+  const select = wrap.locator('.tiny-tree-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const treeNode = dropdown.locator('.tiny-tree-node')
+
+  await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/)
+  await expect(input).toHaveCSS('border-top-width', '0px')
+  await expect(input).toHaveCSS('border-left-width', '0px')
+  await expect(input).toHaveCSS('border-right-width', '0px')
+  await expect(input).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)')
+
+  await select.click()
+  await treeNode.filter({ hasText: /^二级 2-1$/ }).click()
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('二级 2-1')
+})

examples/sites/demos/pc/app/tree-select/reference-style.vue

@@ -27,7 +27,7 @@ export default {
     return {
       tinyIconPopup: iconPopup(),
       value: '',
-      value2: [],
+      value2: [9],
       treeOp: {
         data: [
           {

examples/sites/demos/pc/app/tree-select/size-composition-api.vue

@@ -15,7 +15,7 @@
 import { ref } from 'vue'
 import { TinyTreeSelect } from '@opentiny/vue'
 
-const value = ref([])
+const value = ref([9, 6])
 
 const treeOp = ref({
   data: [