@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/select-wrapper/copy-multi.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <p>场景 1：多选复制单个标签</p>
+    <br />
+    <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
+      <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 ref="selectCopyable" v-model="value2" multiple copyable>
+      <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 ref="selectCopyable" v-model="value2" multiple copyable text-split="/">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <tiny-select
+      ref="selectCopyable"
+      v-model="value2"
+      multiple
+      copyable
+      text-split="/"
+      :multiple-limit="2"
+      show-limit-text
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <p>复制到此处：</p>
+    <br />
+    <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyInput
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: ['选项 1'],
+      value2: ['选项 1', '选项 2'],
+      copyValue: ''
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/copy-single-composition-api.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <p>场景 1：单选无需配置可复制</p>
+    <br />
+    <tiny-select v-model="value1" :options="options1"> </tiny-select>
+    <br /><br />
+    <p>场景 2：单选可搜索配置 allow-copy 可复制</p>
+    <br />
+    <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
+    </tiny-select>
+    <br /><br />
+
+    <p>场景 3：单选远程搜索配置 allow-copy 可复制</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      filterable
+      remote
+      placeholder="请输入关键词"
+      :remote-method="remoteMethod"
+      :loading="loading"
+      loading-text="Loading..."
+      allow-copy
+    >
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p class="font-style">粘贴至此处：</p>
+    <br />
+    <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption, TinyInput } from '@opentiny/vue'
+
+const options1 = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const options2 = ref([])
+const value1 = ref('选项 1')
+const value2 = ref('Alabama')
+const inputVal = ref('')
+const selectRef = ref(null)
+const loading = ref(false)
+const list = ref([])
+
+const filter = (value) => {
+  const select = selectRef.value
+
+  if (value) {
+    select.state.cachedOptions.forEach((item) => {
+      item.state.visible = item.label.includes(value)
+    })
+  } else {
+    select.state.cachedOptions.forEach((item) => {
+      item.state.visible = true
+    })
+  }
+}
+
+const remoteMethod = (query) => {
+  if (query !== undefined) {
+    loading.value = true
+    setTimeout(() => {
+      loading.value = false
+      options2.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase())
+      })
+    }, 200)
+  } else {
+    options2.value = []
+  }
+}
+
+onMounted(() => {
+  const states = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Carolina',
+    'North Dakota',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ]
+
+  list.value = states.map((item) => {
+    return { value: item, label: item }
+  })
+})
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/copy-single.spec.ts

@@ -0,0 +1,76 @@
+import { test, expect } from '@playwright/test'
+
+test('单选无需配置可复制', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#copy-single')
+
+  const wrap = page.locator('#copy-single')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const valueInput = wrap.locator('.custom  .tiny-input__inner')
+
+  await page.waitForTimeout(200)
+  const inputBox = await input.boundingBox()
+
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
+  await page.mouse.up()
+  await page.keyboard.press('Control+C')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.focus()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(200)
+  await expect(valueInput).toHaveValue('北京')
+})
+
+test('单选可搜索配置 allow-copy 可复制', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#copy-single')
+
+  const wrap = page.locator('#copy-single')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-input__inner')
+  const valueInput = wrap.locator('.custom .tiny-input__inner')
+
+  await expect(input).toHaveValue('北京')
+  await page.waitForTimeout(200)
+  const inputBox = await input.boundingBox()
+
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
+  await page.mouse.up()
+  await page.waitForTimeout(800)
+
+  await page.keyboard.press('Control+C')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.click()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(200)
+  await expect(valueInput).toHaveValue('北京')
+})
+
+test('单选远程搜索配置 allow-copy 可复制', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#copy-single')
+
+  const wrap = page.locator('#copy-single')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
+  const valueInput = wrap.locator('.custom  .tiny-input__inner')
+
+  await page.waitForTimeout(100)
+  const inputBox = await input.boundingBox()
+
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
+  await page.mouse.up()
+  await page.keyboard.press('Control+C')
+  await expect(valueInput).toHaveValue('')
+  await valueInput.focus()
+  await page.keyboard.press('Control+V')
+  await page.waitForTimeout(200)
+  await expect(valueInput).toHaveValue('Alabama')
+})

package/demos/pc/app/select-wrapper/copy-single.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <p>场景 1：单选无需配置可复制</p>
+    <br />
+    <tiny-select v-model="value1" :options="options1"> </tiny-select>
+    <br /><br />
+    <p>场景 2：单选可搜索配置 allow-copy 可复制</p>
+    <br />
+    <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
+    </tiny-select>
+    <br /><br />
+
+    <p>场景 3：单选远程搜索配置 allow-copy 可复制</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      filterable
+      remote
+      placeholder="请输入关键词"
+      :remote-method="remoteMethod"
+      :loading="loading"
+      loading-text="Loading..."
+      allow-copy
+    >
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p class="font-style">粘贴至此处：</p>
+    <br />
+    <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyInput
+  },
+  data() {
+    return {
+      options1: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      options2: [],
+      value1: '选项 1',
+      value2: 'Alabama',
+      inputVal: '',
+      loading: false,
+      list: []
+    }
+  },
+  mounted() {
+    const states = [
+      'Alabama',
+      'Alaska',
+      'Arizona',
+      'Arkansas',
+      'California',
+      'Colorado',
+      'Connecticut',
+      'Delaware',
+      'Florida',
+      'Georgia',
+      'Hawaii',
+      'Idaho',
+      'Illinois',
+      'Indiana',
+      'Iowa',
+      'Kansas',
+      'Kentucky',
+      'Louisiana',
+      'Maine',
+      'Maryland',
+      'Massachusetts',
+      'Michigan',
+      'Minnesota',
+      'Mississippi',
+      'Missouri',
+      'Montana',
+      'Nebraska',
+      'Nevada',
+      'New Hampshire',
+      'New Jersey',
+      'New Mexico',
+      'New York',
+      'North Carolina',
+      'North Dakota',
+      'Ohio',
+      'Oklahoma',
+      'Oregon',
+      'Pennsylvania',
+      'Rhode Island',
+      'South Carolina',
+      'South Dakota',
+      'Tennessee',
+      'Texas',
+      'Utah',
+      'Vermont',
+      'Virginia',
+      'Washington',
+      'West Virginia',
+      'Wisconsin',
+      'Wyoming'
+    ]
+
+    this.list = states.map((item) => {
+      return { value: item, label: item }
+    })
+  },
+  methods: {
+    filter(value) {
+      const select = this.$refs.selectRef
+
+      if (value) {
+        select.state.cachedOptions.forEach((item) => {
+          item.state.visible = item.label.includes(value)
+        })
+      } else {
+        select.state.cachedOptions.forEach((item) => {
+          item.state.visible = true
+        })
+      }
+    },
+    remoteMethod(query) {
+      if (query !== undefined) {
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+          this.options2 = this.list.filter((item) => {
+            return item.label.toLowerCase().includes(query.toLowerCase())
+          })
+        }, 200)
+      } else {
+        this.options2 = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <br />
+    <div>场景 1：下拉禁用</div>
+    <br />
+    <tiny-select v-model="value1" disabled autocomplete>
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：多选 + 下拉某项禁用</div>
+    <br />
+    <tiny-select v-model="value2" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：单选 + 下拉某项禁用</div>
+    <br />
+    <tiny-select v-model="value3">
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：多选 + 禁用项默认选中</div>
+    <br />
+    <tiny-select v-model="value4" multiple>
+      <tiny-option
+        v-for="item in options2"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 5：多选 hover-expand 模式下禁用</div>
+    <br />
+    <tiny-select
+      v-model="value5"
+      placeholder="请选择"
+      multiple
+      disabled
+      hover-expand
+      disabled-tooltip-content="我是自定义内容"
+    >
+      <tiny-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+const options1 = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆重庆超长超长超长超长超长超长超长超长超长' },
+  { value: '选项 5', label: '深圳' }
+])
+
+const options2 = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海', disabled: true },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆', disabled: true },
+  { value: '选项 5', label: '深圳' }
+])
+
+const value1 = ref('')
+const value2 = ref(['选项 2'])
+const value3 = ref('')
+const value4 = ref(['选项 2', '选项 3'])
+const value5 = ref(['选项 1', '选项 2', '选项 3', '选项 4', '选项 5'])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/disabled.spec.ts

@@ -0,0 +1,88 @@
+import { test, expect } from '@playwright/test'
+
+test('下拉禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#disabled')
+  const wrap = page.locator('#disabled')
+  const input = wrap.locator('.tiny-input__inner').first()
+
+  const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled'))
+  await expect(hasDisabled).toBe(true)
+})
+
+test('多选某项禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#disabled')
+  const wrap = page.locator('#disabled')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const tag = select.locator('.tiny-tag')
+  const option = dropdown.locator('.tiny-option')
+
+  await expect(tag).toHaveCount(1)
+  await select.click()
+  await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)
+
+  await option.filter({ hasText: '上海' }).click()
+  await expect(tag).toHaveCount(1)
+
+  await option.filter({ hasText: '北京' }).click()
+  await expect(tag).toHaveCount(2)
+  await expect(tag.filter({ hasText: '北京' })).toHaveCount(1)
+})
+
+test('单选某项禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#disabled')
+  const wrap = page.locator('#disabled')
+  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')
+
+  await select.click()
+  await expect(option.filter({ hasText: '全部' })).toHaveCount(0)
+  await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)
+
+  await option.filter({ hasText: '上海' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(input).toHaveValue('')
+
+  await option.filter({ hasText: '北京' }).click()
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('北京')
+})
+
+test('多选，禁用项默认选中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#disabled')
+  const wrap = page.locator('#disabled')
+  const select = wrap.locator('.tiny-select').nth(3)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const tag = select.locator('.tiny-tag')
+  const option = dropdown.locator('.tiny-option')
+
+  // 默认值显示 tag 数
+  await expect(tag).toHaveCount(2)
+  // 禁用项默认选中不显示关闭图标
+  await expect(tag.filter({ hasText: '上海' }).locator('svg')).toHaveCount(1)
+  // 非禁用项显示关闭图标
+  await expect(tag.filter({ hasText: '天津' }).locator('svg')).toHaveCount(1)
+
+  // 下拉禁用和默认选中的效果
+  await select.click()
+  await expect(option.filter({ hasText: '全部' })).toHaveCount(1)
+  await expect(option.filter({ hasText: '上海' })).toHaveClass(/is-disabled/)
+  await expect(option.filter({ hasText: '上海' })).toHaveClass(/selected/)
+  await expect(option.filter({ hasText: '天津' })).toHaveClass(/selected/)
+
+  // 点击禁用项不取消选中
+  await option.filter({ hasText: '上海' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(tag).toHaveCount(2)
+
+  // 选中其他项
+  await option.filter({ hasText: '北京' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(tag).toHaveCount(3)
+})