@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test'
+
+test('searchable-single', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#searchable')
+
+  const wrap = page.locator('#searchable')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const input = dropdown.locator('.tiny-input__inner')
+  const option = dropdown.locator('.tiny-option')
+
+  await expect(input).toBeHidden()
+  await select.click()
+  await page.waitForTimeout(500)
+  await expect(input).toBeVisible()
+  await input.fill('上海')
+  await input.press('Enter')
+  await page.waitForTimeout(500)
+  const list = await option.all()
+  list.forEach(async (item) => {
+    const text = await item.innerText()
+    const isVisibleItem = text === '上海' || text === '全部'
+    if (isVisibleItem) {
+      await expect(item).toHaveCSS('display', 'flex')
+    } else {
+      await expect(item).toHaveCSS('display', 'none')
+    }
+  })
+  await option.filter({ hasText: '上海' }).click()
+  await page.waitForTimeout(500)
+  await expect(input).toHaveValue('上海')
+})
+
+test('searchable-multiple', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#searchable')
+
+  const wrap = page.locator('#searchable')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const input = dropdown.locator('.tiny-input__inner')
+  const option = dropdown.locator('.tiny-option')
+  const tags = select.locator('.tiny-tag')
+
+  await expect(input).toBeHidden()
+  await select.click()
+  await page.waitForTimeout(500)
+  await expect(input).toBeVisible()
+  await input.fill('上海')
+  await input.press('Enter')
+  await page.waitForTimeout(500)
+  const list = await option.all()
+  list.forEach(async (item) => {
+    const text = await item.innerText()
+    const isVisibleItem = text === '上海' || text === '全部'
+    if (isVisibleItem) {
+      await expect(item).toHaveCSS('display', 'flex')
+    } else {
+      await expect(item).toHaveCSS('display', 'none')
+    }
+  })
+  await option.filter({ hasText: '上海' }).click()
+  await page.waitForTimeout(500)
+  await expect((await tags.all()).length).toEqual(1)
+})

package/demos/pc/app/select-wrapper/searchable.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div>场景 1：单选</div>
+    <br />
+    <tiny-select v-model="value" :searchable="true">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 2：多选</div>
+    <br />
+    <tiny-select v-model="multivalue" :searchable="true" multiple>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：多选 + 保留搜索关键字</div>
+    <br />
+    <tiny-select v-model="multivalue" :searchable="true" reserve-keyword 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: '深圳' },
+        { value: '选项 6', label: '南京' },
+        { value: '选项 7', label: '成都' }
+      ],
+      value: '',
+      multivalue: []
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <tiny-select v-model="value" multiple :show-alloption="false">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-select>
+</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;
+}
+</style>

package/demos/pc/app/select-wrapper/show-alloption.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('show-alloption', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#show-alloption')
+
+  const wrap = page.locator('#show-alloption')
+  const select = wrap.locator('.tiny-select')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  await select.click()
+  await page.waitForTimeout(500)
+  await expect(option.filter({ hasText: '全部' })).toBeHidden()
+})

package/demos/pc/app/select-wrapper/show-alloption.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-select v-model="value" multiple :show-alloption="false">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-select>
+</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;
+}
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+  <tiny-select v-model="value" multiple show-overflow-tooltip style="width: 200px">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-select>
+</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>

package/demos/pc/app/select-wrapper/show-tip.vue

@@ -0,0 +1,28 @@
+<template>
+  <tiny-select v-model="value" multiple show-overflow-tooltip style="width: 200px">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+  </tiny-select>
+</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>

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

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <p>medium</p>
+    <br />
+    <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
+    <br />
+    <br />
+    <p>默认</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
+    <p>small</p>
+    <br />
+    <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
+    <br />
+    <br />
+    <p>mini</p>
+    <br />
+    <tiny-select v-model="value4" size="mini" multiple :options="options"> </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const value1 = ref(['选项 1', '选项 2'])
+const value2 = ref(['选项 1', '选项 2'])
+const value3 = ref(['选项 1', '选项 2'])
+const value4 = ref(['选项 1', '选项 2'])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test'
+
+test('默认尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#size')
+
+  const wrap = page.locator('#size')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-input')
+  const tag = select.locator('.tiny-tag')
+
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '32px')
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
+})
+
+test('medium 尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#size')
+
+  const wrap = page.locator('#size')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input')
+  const tag = select.locator('.tiny-tag')
+
+  await expect(input).toHaveClass(/tiny-input-medium/)
+
+  await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '40px')
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--medium tiny-tag--light/)
+})
+
+test('small 尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#size')
+
+  const wrap = page.locator('#size')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input')
+  const tag = select.locator('.tiny-tag')
+  const { height } = await input.locator('.tiny-input__inner').boundingBox()
+
+  await expect(input).toHaveClass(/tiny-input-small/)
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--small tiny-tag--light/)
+  // TODO: 此处继承 input 尺寸的话，应该是 28
+  expect(height).toBeCloseTo(28, 1)
+})
+
+test('mini 尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#size')
+
+  const wrap = page.locator('#size')
+  const select = wrap.locator('.tiny-select').nth(3)
+  const input = select.locator('.tiny-input')
+  const tag = select.locator('.tiny-tag')
+  const { height } = await input.locator('.tiny-input__inner').boundingBox()
+
+  await expect(input).toHaveClass(/tiny-input-mini/)
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--mini tiny-tag--light/)
+  // TODO: 此处继承 input 尺寸的话，应该是 24
+  expect(height).toBeCloseTo(24, 1)
+})

package/demos/pc/app/select-wrapper/size.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <p>medium</p>
+    <br />
+    <tiny-select v-model="value2" size="medium" multiple :options="options"></tiny-select>
+    <br />
+    <br />
+    <p>默认</p>
+    <br />
+    <tiny-select v-model="value1" multiple :options="options"></tiny-select>
+    <br />
+    <br />
+    <p>small</p>
+    <br />
+    <tiny-select v-model="value3" size="small" multiple :options="options"> </tiny-select>
+    <br />
+    <br />
+    <p>mini</p>
+    <br />
+    <tiny-select v-model="value4" size="mini" multiple :options="options"> </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value1: ['选项 1', '选项 2'],
+      value2: ['选项 1', '选项 2'],
+      value3: ['选项 1', '选项 2'],
+      value4: ['选项 1', '选项 2']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <p>场景 1：带标签和提示信息</p>
+    <br />
+    <tiny-select v-model="value1" popper-class="slot-default">
+      <template v-for="item in options1">
+        <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
+          <tiny-option :label="item.label" :value="item.value">
+            <span class="left">{{ item.label }}</span>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          </tiny-option>
+        </tiny-tooltip>
+        <tiny-option v-if="!item.tip" :key="item.value" :label="item.label" :value="item.value">
+          <span class="left">{{ item.label }}</span>
+          <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+        </tiny-option>
+      </template>
+    </tiny-select>
+    <br /><br />
+
+    <p>场景 2：选项双行</p>
+    <br />
+    <tiny-select v-model="value2" popper-class="double-row">
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+        <div>
+          <p>
+            {{ item.label }}
+          </p>
+          <p>{{ item.desc }}</p>
+        </div>
+      </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption, TinyTag, TinyTooltip } from '@opentiny/vue'
+
+const options1 = ref([
+  { value: '选项 1', label: '北京', tag: 'New', tip: '自定义提示' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+
+const options2 = ref([
+  { value: '选项 1', label: '子网 1（192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项 2', label: '子网 2（192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项 3', label: '子网 3（192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项 4', label: '子网 4（192.168.0.1/24）', desc: '可用 IP 数 250' },
+  { value: '选项 5', label: '子网 5（192.168.0.1/24）', desc: '可用 IP 数 250' }
+])
+
+const value1 = ref('选项 1')
+const value2 = ref('选项 1')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+.tiny-option {
+  .left {
+    margin-right: 8px;
+  }
+
+  p {
+    height: 18px;
+    line-height: 18px;
+    margin: 6px;
+  }
+}
+</style>
+
+<style lang="less">
+.double-row {
+  &.tiny-select-dropdown .tiny-select-dropdown__wrap {
+    max-height: 224px;
+    .tiny-option {
+      height: 54px;
+    }
+  }
+}
+</style>

package/demos/pc/app/select-wrapper/slot-default.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('select-wrapper#slot-default')
+
+  const wrap = page.locator('#slot-default')
+  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 input.click()
+  await expect(option.filter({ hasText: '北京' })).toBeVisible()
+  await expect(option.filter({ hasText: '北京' }).locator('.tiny-tag')).toHaveText('New')
+  await option.filter({ hasText: '北京' }).hover()
+  await expect(page.locator('body > .tiny-tooltip').filter({ hasText: '自定义提示' })).toBeVisible()
+})

package/demos/pc/app/select-wrapper/slot-default.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <p>场景 1：带标签和提示信息</p>
+    <br />
+    <tiny-select v-model="value1" popper-class="slot-default">
+      <template v-for="item in options1">
+        <tiny-tooltip v-if="item.tip" :content="item.tip" placement="right" effect="light" :key="item.value">
+          <tiny-option :label="item.label" :value="item.value">
+            <span class="left">{{ item.label }}</span>
+            <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+          </tiny-option>
+        </tiny-tooltip>
+        <tiny-option v-if="!item.tip" :key="item.value" :label="item.label" :value="item.value">
+          <span class="left">{{ item.label }}</span>
+          <tiny-tag v-if="item.tag" type="danger" effect="light" size="small">{{ item.tag }}</tiny-tag>
+        </tiny-option>
+      </template>
+    </tiny-select>
+    <br /><br />
+
+    <p>场景 2：选项双行</p>
+    <br />
+    <tiny-select v-model="value2" popper-class="double-row">
+      <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
+        <div>
+          <p>
+            {{ item.label }}
+          </p>
+          <p>{{ item.desc }}</p>
+        </div>
+      </tiny-option>
+    </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyTag, TinyTooltip } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyTag,
+    TinyTooltip
+  },
+  data() {
+    return {
+      options1: [
+        { value: '选项 1', label: '北京', tag: 'New', tip: '自定义提示' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      options2: [
+        { value: '选项 1', label: '子网 1（192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项 2', label: '子网 2（192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项 3', label: '子网 3（192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项 4', label: '子网 4（192.168.0.1/24）', desc: '可用 IP 数 250' },
+        { value: '选项 5', label: '子网 5（192.168.0.1/24）', desc: '可用 IP 数 250' }
+      ],
+      value1: '选项 1',
+      value2: '选项 1'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+.tiny-option {
+  .left {
+    margin-right: 8px;
+  }
+
+  p {
+    height: 18px;
+    line-height: 18px;
+    margin: 6px;
+  }
+}
+</style>
+
+<style lang="less">
+.double-row {
+  &.tiny-select-dropdown .tiny-select-dropdown__wrap {
+    max-height: 224px;
+    .tiny-option {
+      height: 54px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <tiny-select v-model="value">
+    <template #empty>
+      <div class="custom-empty">
+        <p>APIG 网关异常</p>
+        <tiny-button size="small">重新加载</tiny-button>
+      </div>
+    </template>
+  </tiny-select>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyButton } from '@opentiny/vue'
+
+const value = ref('')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+
+.custom-empty {
+  text-align: center;
+
+  p {
+    color: var(--tv-color-text-secondary);
+  }
+
+  .tiny-button {
+    margin-top: 8px;
+  }
+}
+</style>

package/demos/pc/app/select-wrapper/slot-empty.spec.ts

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test'
+
+test('空数据插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#slot-empty')
+
+  const wrap = page.locator('#slot-empty')
+  const select = wrap.locator('.tiny-select')
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  await input.click()
+  await expect((await option.all()).length).toEqual(0)
+  await expect(page.locator('.tiny-select-dropdown')).toHaveText('APIG 网关异常重新加载')
+})