@opentiny/vue-docs 2.1.10 → 2.2.0

package/demos/pc/app/select/input-box-type.spec.ts

@@ -1,25 +1,68 @@
 import { test, expect } from '@playwright/test'
 
-test('default', async ({ page }) => {
+test('下划线默认', async ({ page }) => {
   await page.goto('select#input-box-type')
-  const select = page.locator('#preview .tiny-select').first()
+  const wrap = page.locator('#input-box-type')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
 
   await expect(select).toHaveClass(/tiny-select__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-color', 'rgb(173, 176, 184)')
+  await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(87, 93, 108)')
+
+  await select.click()
+  await option.first().click()
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('黄金糕')
 })
 
-test('disable', async ({ page }) => {
+test('下划线禁用', async ({ page }) => {
   await page.goto('select#input-box-type')
-  const select = page.locator('#preview .tiny-select').nth(1)
+  const wrap = page.locator('#input-box-type')
+  const select = wrap.locator('.tiny-select').nth(1)
   const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
 
   await expect(select).toHaveClass(/tiny-select__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-color', 'rgb(223, 225, 230)')
+  await expect(input).toHaveCSS('cursor', 'not-allowed')
+  await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(173, 176, 184)')
   const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled'))
   await expect(hasDisabled).toBe(true)
+
+  await select.click()
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('')
 })
 
-test('multiple', async ({ page }) => {
+test('下划线多选', async ({ page }) => {
   await page.goto('select#input-box-type')
-  const select = page.locator('#preview .tiny-select').nth(2)
+  const wrap = page.locator('#input-box-type')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
+  const tag = wrap.locator('.tiny-tag')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  await expect(select).toHaveClass(/tiny-select__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-color', 'rgb(173, 176, 184)')
+  await expect(select.locator('.tiny-select__caret')).toHaveCSS('fill', 'rgb(87, 93, 108)')
+
+  await select.click()
+  await expect(dropdown).toBeVisible()
+  await option.first().click()
+  await expect(tag).toHaveCount(5)
 
   await expect(select).toHaveClass(/tiny-select__underline/)
   await expect(select).toHaveClass(/tiny-select__multiple/)

package/demos/pc/app/select/is-drop-inherit-width.spec.ts

@@ -1,29 +1,34 @@
 import { expect, test } from '@playwright/test'
 
-test('not-inherit-width', async ({ page }) => {
+test('默认下拉弹框宽度由内容撑开', async ({ page }) => {
   await page.goto('select#is-drop-inherit-width')
-  const input = page.getByPlaceholder('请选择').first()
-  await input.click()
-  await page.waitForTimeout(1000)
-  const listitem = page.getByRole('listitem').filter({ hasText: '双皮奶' })
+
+  const wrap = page.locator('#is-drop-inherit-width')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const input = select.locator('.tiny-input__inner')
+  const option = dropdown.locator('.tiny-option')
+
+  await select.click()
   const inputBox = await input.boundingBox()
+  const listitemBox = await option.first().boundingBox()
 
-  const listitemBox = await listitem.boundingBox()
-  await page.waitForTimeout(3000)
   const result = listitemBox.width > inputBox.width
   await expect(result).toBe(true)
 })
 
-test('inherit-width', async ({ page }) => {
+test('下拉弹框宽度与输入框一致', async ({ page }) => {
   await page.goto('select#is-drop-inherit-width')
-  const input = page.getByPlaceholder('请选择').nth(1)
-  await input.click()
-  await page.waitForTimeout(1000)
-  const listitem = page.getByRole('listitem').filter({ hasText: '双皮奶' })
+  const wrap = page.locator('#is-drop-inherit-width')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const input = select.locator('.tiny-input__inner')
+  const option = dropdown.locator('.tiny-option')
+
+  await select.click()
   const inputBox = await input.boundingBox()
+  const listitemBox = await option.first().boundingBox()
 
-  const listitemBox = await listitem.boundingBox()
-  await page.waitForTimeout(3000)
   const result = listitemBox.width === inputBox.width
   await expect(result).toBe(true)
 })

package/demos/pc/app/select/manual-focus-blur-composition-api.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <tiny-button @click="handleFocus"> 点击获取焦点 </tiny-button>
-    <tiny-button @click="handleBlur"> 点击失去焦点 </tiny-button>
+    <div>
+      <tiny-button @click="handleFocus"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur"> 点击失去焦点 </tiny-button>
+    </div>
     <tiny-select v-model="value" ref="drop" filterable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>

package/demos/pc/app/select/manual-focus-blur.spec.ts

@@ -1,12 +1,16 @@
 import { test, expect } from '@playwright/test'
 
-test('manual-focus-blur', async ({ page }) => {
+test('手动聚焦失焦', async ({ page }) => {
   await page.goto('select#manual-focus-blur')
-  await page.getByRole('button', { name: '单击按钮 Select 将获取焦点' }).click()
-  await page.waitForTimeout(1000)
-  const dropdown = page.locator('.tiny-select-dropdown')
+  const wrap = page.locator('#manual-focus-blur')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const button = wrap.locator('.tiny-button')
+
+  await button.first().click()
   await expect(dropdown).toBeVisible()
-  await page.getByRole('button', { name: '单击按钮 Select 将失去焦点' }).click()
-  await page.waitForTimeout(1000)
+  await button.nth(1).click()
   await expect(dropdown).toBeHidden()
 })

package/demos/pc/app/select/manual-focus-blur.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-    <tiny-button @click="handleFocus"> 点击获取焦点 </tiny-button>
-    <tiny-button @click="handleBlur"> 点击失去焦点 </tiny-button>
+    <div>
+      <tiny-button @click="handleFocus"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur"> 点击失去焦点 </tiny-button>
+    </div>
     <tiny-select v-model="value" ref="drop" filterable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>

package/demos/pc/app/select/map-field.spec.ts

@@ -1,32 +1,56 @@
 import { expect, test } from '@playwright/test'
 
-test('grid-multiple', async ({ page }) => {
-  await page.goto('select#nest-checkbox-grid')
-  const suffix = page.locator('#preview .tiny-input__suffix')
-  const select = page.locator('#preview .tiny-select')
+test('配置式配置映射字段', async ({ page }) => {
+  await page.goto('select#map-field')
+  const wrap = page.locator('#map-field')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const suffix = select.locator('.tiny-input__suffix')
+  const tag = select.locator('.tiny-tag')
+
+  await expect(tag).toHaveCount(2)
+  await expect(tag.first()).toHaveText('黄金糕')
+  await expect(tag.nth(1)).toHaveText('双皮奶')
+  await suffix.click()
+  await page.waitForTimeout(500)
+  await expect(dropdown).toBeVisible()
+  await expect(option.filter({ hasText: '黄金糕' })).toHaveClass(/selected/)
+  await expect(option.filter({ hasText: '双皮奶' })).toHaveClass(/selected/)
+})
+
+test('嵌套表格配置映射字段', async ({ page }) => {
+  await page.goto('select#map-field')
+  const wrap = page.locator('#map-field')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffix = select.locator('.tiny-input__suffix')
   const tag = select.locator('.tiny-tag')
 
   await expect(tag).toHaveCount(2)
   await suffix.click()
   await page.waitForTimeout(500)
 
-  const tr = page.locator('.tiny-select-dropdown .tiny-grid__body-wrapper .tiny-grid-body__row')
-  const currentTr = page.locator('.tiny-select-dropdown .tiny-grid__body-wrapper .row__selected')
+  const tr = dropdown.locator('.tiny-grid__body-wrapper .tiny-grid-body__row')
+  const currentTr = dropdown.locator('.tiny-grid__body-wrapper .row__selected')
 
   await expect(tr).toHaveCount(5)
   await expect(currentTr).toHaveCount(2)
-  await page.getByRole('row', { name: '华南区 广东省 珠海市' }).getByRole('cell').first().click()
+  await dropdown.getByRole('row', { name: '华南区 广东省 珠海市' }).getByRole('cell').first().click()
   await expect(tag).toHaveCount(3)
   await expect(currentTr).toHaveCount(3)
-  await page.getByRole('row', { name: '华南区 广东省 珠海市' }).getByRole('cell').first().click()
+  await dropdown.getByRole('row', { name: '华南区 广东省 珠海市' }).getByRole('cell').first().click()
   await expect(tag).toHaveCount(2)
   await expect(currentTr).toHaveCount(2)
-  await page.getByRole('row', { name: '区域 省份 城市' }).getByRole('cell').first().click()
+  await dropdown.getByRole('row', { name: '区域 省份 城市' }).getByRole('cell').first().click()
   await expect(tag).toHaveCount(5)
   await expect(currentTr).toHaveCount(5)
-  let all = await page.getByRole('row', { name: '区域 省份 城市' }).locator('.tiny-grid-checkbox__icon .tiny-svg')
+  let all = await dropdown
+    .getByRole('row', { name: '区域 省份 城市' })
+    .locator('.tiny-grid-checkbox__icon .tiny-svg')
+    .nth(1)
   await expect(all).toHaveClass(/icon-checked-sur/)
-  await page.getByRole('row', { name: '区域 省份 城市' }).getByRole('cell').first().click()
+  await dropdown.getByRole('row', { name: '区域 省份 城市' }).getByRole('cell').first().click()
   await page.waitForTimeout(500)
   await expect(all).toBeHidden()
   await expect(tag).toHaveCount(0)

package/demos/pc/app/select/memoize-usage.spec.ts

@@ -1,14 +1,18 @@
 import { expect, test } from '@playwright/test'
 
-test('memoize-usage', async ({ page }) => {
+test('手动缓存', async ({ page }) => {
   await page.goto('select#memoize-usage')
-  const input = page.locator('#preview .tiny-input__inner')
-  const cacheValue = page.locator('#preview .cache-value')
+  const wrap = page.locator('#memoize-usage')
+  const select = wrap.locator('.tiny-select')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const cacheValue = wrap.locator('.cache-value')
 
-  await input.click()
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
+  await select.click()
+  await option.filter({ hasText: '黄金糕' }).click()
   await expect(cacheValue).toContainText(['选项1'])
-  await input.click()
-  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
+
+  await select.click()
+  await option.filter({ hasText: '双皮奶' }).click()
   await expect(cacheValue).toContainText(['选项2'])
 })

package/demos/pc/app/select/memoize-usage.vue

@@ -47,6 +47,9 @@ export default {
       MemorizeInstance.updateByKey(value)
       this.cacheValue = window.localStorage.getItem('tiny_memorize_test456')
     }
+  },
+  mounted() {
+    window.localStorage.setItem('tiny_memorize_test456', '')
   }
 }
 </script>

package/demos/pc/app/select/multiple-limit.spec.ts

@@ -2,18 +2,24 @@ import { test, expect } from '@playwright/test'
 
 test('multiple-limit', async ({ page }) => {
   await page.goto('select#multiple-limit')
-  const select = page.locator('#preview .tiny-select')
+  const wrap = page.locator('#multiple-limit')
+  const select = wrap.locator('.tiny-select')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const tag = select.locator('.tiny-tag')
 
   await select.click()
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
-  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
-  await page.waitForTimeout(2000)
-  const listitems = await page
-    .locator('.tiny-select-dropdown')
-    .getByRole('listitem')
-    .filter({ hasNotText: /黄金糕|双皮奶/ })
+  await option.nth(0).click()
+  await option.nth(1).click()
+  await expect(tag).toHaveCount(2)
+  await expect(option.filter({ hasText: '全部' })).toHaveCount(0)
 
-  await expect(listitems.nth(0)).toHaveClass(/is-disabled/)
-  await expect(listitems.nth(1)).toHaveClass(/is-disabled/)
-  await expect(listitems.nth(2)).toHaveClass(/is-disabled/)
+  const list = await option.all()
+  list.forEach(async (item, index) => {
+    if (index <= 1) {
+      await expect(item).toHaveClass(/selected/)
+    } else {
+      await expect(item).toHaveClass(/is-disabled/)
+    }
+  })
 })

package/demos/pc/app/select/multiple.spec.ts

@@ -2,18 +2,22 @@ import { expect, test } from '@playwright/test'
 
 test('test', async ({ page }) => {
   await page.goto('select#multiple')
-  const select = page.locator('#preview .tiny-select')
+  const wrap = page.locator('#multiple')
+  const select = wrap.locator('.tiny-select')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const tag = select.locator('.tiny-tag')
 
-  await expect(select.locator('.tiny-tag')).toHaveCount(2)
-  await select.click()
-  await page.getByRole('listitem').filter({ hasText: '全部' }).click()
-  await expect(select.locator('.tiny-tag')).toHaveCount(7)
-  await page.getByRole('listitem').filter({ hasText: '全部' }).click()
-  await expect(select.locator('.tiny-tag')).toHaveCount(0)
-  await page.getByRole('listitem').filter({ hasText: '黄金糕' }).click()
-  await expect(select.locator('.tiny-tag')).toHaveCount(1)
-  await page.getByRole('listitem').filter({ hasText: '双皮奶' }).click()
-  await expect(select.locator('.tiny-tag')).toHaveCount(2)
-  await select.locator('.tiny-tag').filter({ hasText: '双皮奶' }).getByRole('img').click()
-  await expect(select.locator('.tiny-tag')).toHaveCount(1)
+  await expect(tag).toHaveCount(2)
+  await select.locator('.tiny-input__suffix').click()
+  await option.filter({ hasText: '全部' }).click()
+  await expect(tag).toHaveCount(7)
+  await option.filter({ hasText: '全部' }).click()
+  await expect(tag).toHaveCount(0)
+  await option.filter({ hasText: '黄金糕' }).click()
+  await expect(tag).toHaveCount(1)
+  await option.filter({ hasText: '双皮奶' }).click()
+  await expect(tag).toHaveCount(2)
+  await tag.filter({ hasText: '双皮奶' }).locator('.tiny-tag__close').click()
+  await expect(tag).toHaveCount(1)
 })

package/demos/pc/app/select/native-properties.spec.ts

@@ -1,23 +1,15 @@
 import { test, expect } from '@playwright/test'
 
-test('name', async ({ page }) => {
-  await page.goto('http://localhost:7130/pc/select/name')
+test('原生属性', async ({ page }) => {
+  await page.goto('select#native-properties')
 
-  const input = page.locator('#preview .tiny-input__inner')
-  await expect(input).toHaveAttribute('name', 'inputName')
-})
+  const wrap = page.locator('#native-properties')
+  const select = wrap.locator('.tiny-select')
+  const input = select.locator('.tiny-input__inner')
 
-test('placeholder', async ({ page }) => {
-  await page.goto('http://localhost:7130/pc/select/name')
-
-  const input = page.locator('#preview .tiny-input__inner')
+  await expect(input).toHaveAttribute('name', 'inputName')
   await expect(input).toHaveAttribute('placeholder', '自定义 placeholder')
-})
-
-test('autocomplete', async ({ page }) => {
-  await page.goto('http://localhost:7130/pc/select/name')
 
-  const input = page.locator('#preview .tiny-input__inner')
-  await expect(input).toHaveAttribute('autocomplete', 'off')
+  const isHasAutocomplete = await input.evaluate((input) => input.hasAttribute('autocomplete'))
+  await expect(isHasAutocomplete).toBe(true)
 })
-

package/demos/pc/app/select/nest-grid-composition-api.vue

@@ -1,26 +1,44 @@
 <template>
   <div class="demo-select">
+    <p>场景1：嵌套表格（单选）</p>
     <tiny-select
-      ref="selectRef"
-      v-model="radioValue"
+      v-model="value1"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpSingle"
+    ></tiny-select>
+    <p>场景2：嵌套表格（多选）</p>
+    <tiny-select
+      v-model="value2"
+      multiple
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpMulti"
+    ></tiny-select>
+    <p>场景3：嵌套表格 + 可搜索 + 可清除</p>
+    <tiny-select
+      ref="select"
+      v-model="value3"
+      filterable
       :filter-method="filter"
       clearable
-      filterable
       value-field="id"
-      :multiple="false"
       text-field="city"
       render-type="grid"
-      :grid-op="gridOpRadio"
+      :grid-op="gridOpSingle"
     ></tiny-select>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
 const radioValue = ref('')
-const gridOpRadio = ref({
+
+const gridOpSingle = reactive({
   data: [
     { id: '001', area: '华南区', province: '广东省', city: '深圳1' },
     { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
@@ -36,19 +54,39 @@ const gridOpRadio = ref({
   ]
 })
 
+const gridOpMulti = reactive({
+  data: [
+    { id: '001', area: '华南区', province: '广东省', city: '深圳1' },
+    { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+    { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+    { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+    { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+  ],
+  columns: [
+    { type: 'selection', title: '' },
+    { field: 'area', title: '区域', width: 90 },
+    { field: 'province', title: '省份', width: 60 },
+    { field: 'city', title: '城市', width: 60 }
+  ]
+})
+
 const filter = (value) => {
   if (!value) {
-    return gridOpRadio.value.data
+    return gridOpSingle.value.data
   }
 
-  return gridOpRadio.value.data.filter((item) => {
+  return gridOpSingle.value.data.filter((item) => {
     return item.city.includes(value)
   })
 }
 </script>
 
-<style scoped>
-.demo-select .tiny-select {
-  width: 270px;
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

package/demos/pc/app/select/nest-grid-disable.spec.ts

@@ -1,27 +1,39 @@
 import { test, expect } from '@playwright/test'
 
-test('test-grid-select', async ({ page }) => {
-  await page.goto('select#disable-grid-select-radio')
-  const tags = page.locator('.grid-select .tiny-tag')
+test('嵌套表格禁用某项（单选）', async ({ page }) => {
+  await page.goto('select#nest-grid-disable')
+  const wrap = page.locator('#nest-grid-disable')
 
-  await page.locator('.tiny-select__tags').click()
-  await page.getByRole('row', { name: '华南区 广东省 广州市' }).getByRole('cell').first().click()
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
 
-  await expect(tags.filter({ hasText: '广州市' })).toHaveCount(1)
-  await page.getByRole('row', { name: '华南区 广东省 深圳市' }).getByRole('cell').first().click()
-  await expect(tags.filter({ hasText: '深圳市' })).toHaveCount(0)
+  await select.click()
+  await expect(dropdown.locator('.tiny-grid-radio.is__disabled')).toHaveCount(3)
+  await expect(input).toHaveValue('')
+
+  await dropdown.getByRole('row').nth(1).getByRole('cell').first().click()
+  await expect(input).toHaveValue('')
+
+  await dropdown.getByRole('row').nth(2).getByRole('cell').first().click()
+  await expect(input).toHaveValue('深圳市')
 })
 
-test('test-grid-radio', async ({ page }) => {
-  await page.goto('select#disable-grid-select-radio')
-
-  const input = page.locator('.grid-radio .tiny-input__inner')
-  await input.click()
-  await page.getByRole('row', { name: '华南区 广东省 深圳市' }).getByRole('cell').first().click()
-  await expect(page.getByPlaceholder('请选择').nth(1)).toHaveValue('深圳市')
-  await input.click()
-  await page.getByRole('row', { name: '华南区 广东省 广州市' }).getByRole('cell').first().click()
-  await expect(page.getByPlaceholder('请选择').nth(1)).toHaveValue('深圳市')
-  await page.getByRole('row', { name: '华南区 广东省 佛山市' }).getByRole('cell').first().click()
-  await expect(page.getByPlaceholder('请选择').nth(1)).toHaveValue('佛山市')
+test('嵌套表格禁用某项（多选）', async ({ page }) => {
+  await page.goto('select#nest-grid-disable')
+
+  const wrap = page.locator('#nest-grid-disable')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const tag = select.locator('.tiny-tag')
+
+  await select.click()
+  await dropdown.getByRole('row').nth(2).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(0)
+
+  await dropdown.getByRole('row').nth(1).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(1)
+
+  await dropdown.getByRole('row').nth(4).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(1)
 })

package/demos/pc/app/select/{nest-grid-remote-filter-composition-api.vue → nest-grid-remote-multi-composition-api.vue}

@@ -25,7 +25,7 @@
       filterable
       remote
       :remote-method="remoteMethod"
-      :remote-config="{ autoSeach: true, clearData: true, showIcon: true }"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
       value-field="id"
       text-field="city"
       render-type="grid"

package/demos/pc/app/select/nest-grid-remote-multi.spec.ts

@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test'
+
+test('下拉表格远程搜索基础用法', async ({ page }) => {
+  await page.goto('select#nest-grid-remote-multi')
+  const wrap = page.locator('#nest-grid-remote-multi')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-select__input')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
+
+  // 下拉按钮不显示
+  await expect(suffixSvg).toBeHidden()
+  await expect(dropdown).toBeHidden()
+
+  await input.fill(' ')
+  await input.press('Enter')
+  await page.waitForTimeout(1000)
+  await expect(dropdown).toBeVisible()
+  await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+  await input.fill('')
+  await input.press('Enter')
+  await page.waitForTimeout(1000)
+  await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+  await page.getByRole('row', { name: '华南区0 广东省0 广州市0' }).getByRole('cell').first().click()
+  const tags = page.locator('.tiny-select .tiny-tag')
+  await expect((await tags.all()).length).toEqual(1)
+  await expect(tags.first()).toContainText(/广州市0/)
+  await page.getByRole('row', { name: '华南区1 广东省1 广州市1' }).getByRole('cell').first().click()
+  await expect((await tags.all()).length).toEqual(2)
+  await expect(tags.first()).toContainText(/广州市0/)
+  await expect(tags.nth(1)).toContainText(/广州市1/)
+})
+
+test('下拉表格远程搜索 + 自动搜索 + 显示按钮', async ({ page }) => {
+  await page.goto('select#nest-grid-remote-multi')
+
+  const wrap = page.locator('#nest-grid-remote-multi')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-select__input')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const suffixSvg = select.locator('.tiny-input__suffix .tiny-select__caret').first()
+  const tag = select.locator('.tiny-tag')
+
+  await expect(suffixSvg).toBeVisible()
+  await expect(dropdown).toBeHidden()
+  await select.click()
+  await expect(dropdown).toBeVisible()
+  await expect(dropdown.locator('.tiny-grid__body tbody')).not.toBeEmpty()
+
+  await dropdown.getByRole('row', { name: '华南区0 广东省0 广州市0' }).getByRole('cell').first().click()
+
+  await expect((await tag.all()).length).toEqual(1)
+  await expect(tag.first()).toContainText(/广州市0/)
+
+  await dropdown.getByRole('row', { name: '华南区1 广东省1 广州市1' }).getByRole('cell').first().click()
+  await expect((await tag.all()).length).toEqual(2)
+  await expect(tag.first()).toContainText(/广州市0/)
+  await expect(tag.nth(1)).toContainText(/广州市1/)
+  await tag.nth(0).locator('.tiny-svg').click()
+  await tag.nth(0).locator('.tiny-svg').click()
+  await expect((await tag.all()).length).toEqual(0)
+  await input.fill(' ')
+  await input.press('Enter')
+  await expect(dropdown).toBeVisible()
+  await expect(dropdown.locator('.tiny-grid__body tbody')).toBeEmpty()
+})

package/demos/pc/app/select/{nest-grid-remote-filter.vue → nest-grid-remote-multi.vue}

@@ -27,7 +27,7 @@
       filterable
       remote
       :remote-method="remoteMethod"
-      :remote-config="{ autoSeach: true, clearData: true, showIcon: true }"
+      :remote-config="{ autoSearch: true, clearData: true, showIcon: true }"
       value-field="id"
       text-field="city"
       render-type="grid"