@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/select-wrapper/input-box-type-composition-api.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <p>设置为下划线类型：</p>
+    <br />
+    <p class="font-style">场景 1：下划线默认</p>
+    <br />
+    <tiny-select v-model="value1" input-box-type="underline" clearable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p class="font-style">场景 2：下划线禁用</p>
+    <br />
+    <tiny-select v-model="value2" input-box-type="underline" disabled>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <p class="font-style">场景 3：下划线多选</p>
+    <br />
+    <tiny-select v-model="value3" input-box-type="underline" multiple>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref([])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test'
+
+test('下划线默认', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#input-box-type')
+  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.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 expect(select.locator('svg')).toHaveCSS('fill', 'rgb(128, 128, 128)')
+
+  await select.click()
+  await option.first().click()
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('北京')
+})
+
+test('下划线禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#input-box-type')
+  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.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(219, 219, 219)')
+  await expect(input).toHaveCSS('cursor', 'not-allowed')
+  await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(194, 194, 194)')
+  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('下划线多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#input-box-type')
+  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.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 expect(dropdown).toBeVisible()
+  await option.first().click()
+  await expect(tag).toHaveCount(5)
+
+  await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/)
+  await expect(select).toHaveClass(/tiny-base-select__multiple/)
+})

package/demos/pc/app/select-wrapper/input-box-type.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <p>设置为下划线类型</p>
+    <br />
+    <p>场景 1：下划线默认</p>
+    <br />
+    <tiny-select v-model="value1" input-box-type="underline" clearable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 2：下划线禁用</p>
+    <br />
+    <tiny-select v-model="value2" input-box-type="underline" disabled>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 3：下划线多选</p>
+    <br />
+    <tiny-select v-model="value3" input-box-type="underline" multiple>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: '',
+      value2: '',
+      value3: []
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/is-drop-inherit-width-composition-api.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <p>场景 1：默认下拉弹框宽度由内容撑开：</p>
+    <br />
+    <tiny-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 2：下拉弹框宽度与输入框一致：</p>
+    <br />
+    <tiny-select v-model="value" is-drop-inherit-width>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+const options = ref([
+  {
+    value: '选项 1',
+    label: '北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京'
+  },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const value = ref('')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+
+test('默认下拉弹框宽度由内容撑开', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#is-drop-inherit-width')
+
+  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 result = listitemBox.width > inputBox.width
+  await expect(result).toBe(true)
+})
+
+test('下拉弹框宽度与输入框一致', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#is-drop-inherit-width')
+  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')
+
+  await select.click()
+  const inputBox = await input.boundingBox()
+  const dropdownBox = await dropdown.boundingBox()
+  const result = dropdownBox.width - inputBox.width
+  await expect(result < 1).toBe(true)
+})

package/demos/pc/app/select-wrapper/is-drop-inherit-width.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <p>场景 1：默认下拉弹框宽度由内容撑开：</p>
+    <br />
+    <tiny-select v-model="value">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p>场景 2：下拉弹框宽度与输入框一致：</p>
+    <br />
+    <tiny-select v-model="value" is-drop-inherit-width>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: '选项 1',
+          label: '北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京北京'
+        },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div class="demo1">
+      <div>场景 1：默认 focus() 后仅聚焦，不下拉</div>
+      <br />
+      <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur1"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-select v-model="value" ref="drop1">
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-select>
+    </div>
+    <br />
+    <div class="demo2">
+      <div>场景 2：配置 filterable，focus() 后聚焦并自动下拉</div>
+      <br />
+      <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur2"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-select v-model="value" ref="drop2" filterable>
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-select>
+    </div>
+    <br />
+    <div class="demo3">
+      <div>场景 2：配置 automaticDropdown，focus() 后聚焦并自动下拉</div>
+      <br />
+      <tiny-button @click="handleFocus3"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur3"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-select v-model="value" ref="drop3" automatic-dropdown>
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-select>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+
+const value = ref('')
+const drop1 = ref(null)
+const drop2 = ref(null)
+const drop3 = ref(null)
+
+const handleFocus1 = () => {
+  drop1.value.focus()
+}
+
+const handleBlur1 = () => {
+  drop1.value.blur()
+}
+
+const handleFocus2 = () => {
+  drop2.value.focus()
+}
+
+const handleBlur2 = () => {
+  drop2.value.blur()
+}
+
+const handleFocus3 = () => {
+  drop3.value.focus()
+}
+
+const handleBlur3 = () => {
+  drop3.value.blur()
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+.tiny-button {
+  max-width: unset;
+  margin-bottom: 10px;
+}
+</style>

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

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('可搜索 + 手动聚焦失焦', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#manual-focus-blur')
+  const wrap = page.locator('#manual-focus-blur')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const button = wrap.locator('.demo2 .tiny-button')
+
+  await page.waitForTimeout(2000)
+  // 手动聚焦下拉
+  await button.nth(0).click()
+  await expect(dropdown).toBeVisible()
+
+  // 手动失焦收起
+  await button.nth(1).click()
+  await expect(dropdown).toBeHidden()
+})

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

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="demo1">
+      <div>场景 1：默认 focus() 后仅聚焦，不下拉</div>
+      <br />
+      <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur1"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-select v-model="value" ref="drop1">
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-select>
+    </div>
+    <br />
+    <div class="demo2">
+      <div>场景 2：配置 filterable，focus() 后聚焦并自动下拉</div>
+      <br />
+      <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur2"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-select v-model="value" ref="drop2" filterable>
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-select>
+    </div>
+    <br />
+    <div class="demo3">
+      <div>场景 2：配置 automaticDropdown，focus() 后聚焦并自动下拉</div>
+      <br />
+      <tiny-button @click="handleFocus3"> 点击获取焦点 </tiny-button>
+      <tiny-button @click="handleBlur3"> 点击失去焦点 </tiny-button>
+      <br />
+      <tiny-select v-model="value" ref="drop3" automatic-dropdown>
+        <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      </tiny-select>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyButton
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  },
+  methods: {
+    handleFocus1() {
+      this.$refs.drop1.focus()
+    },
+    handleBlur1() {
+      this.$refs.drop1.blur()
+    },
+    handleFocus2() {
+      this.$refs.drop2.focus()
+    },
+    handleBlur2() {
+      this.$refs.drop2.blur()
+    },
+    handleFocus3() {
+      this.$refs.drop3.focus()
+    },
+    handleBlur3() {
+      this.$refs.drop3.blur()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+.tiny-button {
+  max-width: unset;
+  margin-bottom: 10px;
+}
+</style>

package/demos/pc/app/select-wrapper/map-field-composition-api.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <p>场景 1：配置式配置映射字段</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options" value-field="val" text-field="text"> </tiny-select>
+    <br /><br />
+    <p>场景 2：嵌套表格配置映射字段</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      multiple
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOp"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const value1 = ref(['选项 1', '选项 2'])
+const value2 = ref(['001', '002'])
+const gridOp = ref({
+  data: [
+    { id: '001', area: '华南区', province: '广东省', city: '广州市' },
+    { 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 options = ref([
+  { val: '选项 1', text: '北京' },
+  { val: '选项 2', text: '上海' },
+  { val: '选项 3', text: '天津' },
+  { val: '选项 4', text: '重庆' },
+  { val: '选项 5', text: '深圳' },
+  { val: '选项 6', text: '南京' },
+  { val: '选项 7', text: '成都' }
+])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,60 @@
+import { expect, test } from '@playwright/test'
+
+test('配置式配置映射字段', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#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 }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#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 = 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 dropdown.getByRole('row', { name: '华南区 广东省 珠海市' }).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(3)
+  await expect(currentTr).toHaveCount(3)
+  await dropdown.getByRole('row', { name: '华南区 广东省 珠海市' }).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(2)
+  await expect(currentTr).toHaveCount(2)
+  await dropdown.getByRole('row', { name: '区域 省份 城市' }).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(5)
+  await expect(currentTr).toHaveCount(5)
+  let all = await dropdown
+    .getByRole('row', { name: '区域 省份 城市' })
+    .locator('.tiny-grid-checkbox__icon .tiny-svg')
+    .nth(1)
+  await expect(all).toHaveClass(/icon-checked-sur/)
+  await dropdown.getByRole('row', { name: '区域 省份 城市' }).getByRole('cell').first().click()
+  await page.waitForTimeout(500)
+  await expect(all).toBeHidden()
+  await expect(tag).toHaveCount(0)
+  await expect(currentTr).toHaveCount(0)
+})