@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,44 @@
+<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>
+import { TinySelectWrapper as TinySelect, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyButton
+  },
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</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-header-footer-composition-api.vue

@@ -0,0 +1,45 @@
+<template>
+  <tiny-select v-model="value">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <template #dropdown>
+      <div class="select-header">
+        <tiny-button type="success" round> 顶部插槽 </tiny-button>
+      </div>
+    </template>
+    <template #footer>
+      <div class="select-footer">
+        <tiny-button type="success" round> 底部插槽 </tiny-button>
+      </div>
+    </template>
+  </tiny-select>
+</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('')
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+.select-footer {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
+.select-header {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
+</style>

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

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+
+test('底部插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#slot-header-footer')
+
+  const wrap = page.locator('#slot-header-footer')
+  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(5)
+  await expect(page.locator('.select-header')).toHaveText('顶部插槽')
+  await expect(page.locator('.select-footer')).toHaveText('底部插槽')
+})

package/demos/pc/app/select-wrapper/slot-header-footer.vue

@@ -0,0 +1,55 @@
+<template>
+  <tiny-select v-model="value">
+    <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    <template #dropdown>
+      <div class="select-header">
+        <tiny-button type="success" round> 顶部插槽 </tiny-button>
+      </div>
+    </template>
+    <template #footer>
+      <div class="select-footer">
+        <tiny-button type="success" round> 底部插槽 </tiny-button>
+      </div>
+    </template>
+  </tiny-select>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton,
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-select {
+  width: 280px;
+}
+.select-footer {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
+.select-header {
+  text-align: center;
+  background-color: rgb(207, 243, 232, 0.3);
+  padding: 8px;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="demo-select-slot-label">
+    <tiny-select v-model="value1" placeholder="请选择" multiple>
+      <template #label="{ item }">
+        <img class="label-user-head" :src="imgSrc(item.value)" alt="" />
+        <span class="label-desc">{{ item.label }}</span>
+      </template>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+
+    <tiny-select v-model="value2" :options="options" placeholder="请选择" multiple>
+      <template #label="{ item }">
+        <img class="label-user-head" :src="imgSrc(item.value)" alt="" />
+        <span class="label-desc">{{ item.label }}</span>
+      </template>
+    </tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+const options = ref([
+  {
+    value: '选项 1',
+    label: '北京超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长',
+    src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
+  },
+  {
+    value: '选项 2',
+    label: '上海',
+    src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
+  },
+  {
+    value: '选项 3',
+    label: '天津',
+    src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/2.jpg`
+  },
+  {
+    value: '选项 4',
+    label: '重庆',
+    src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/3.jpg`
+  },
+  {
+    value: '选项 5',
+    label: '深圳',
+    src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/4.jpg`
+  }
+])
+
+const value1 = ref(['选项 1', '选项 2'])
+const value2 = ref(['选项 3'])
+
+const imgSrc = (value) => {
+  const option = options.value.find((option) => option.value === value)
+
+  return option && option.src
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+
+.demo-select-slot-label.label-user-head,
+.tiny-tooltip .label-user-head {
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+</style>

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="demo-select-slot-label">
+    <tiny-select v-model="value1" placeholder="请选择" multiple>
+      <template #label="{ item }">
+        <img class="label-user-head" :src="imgSrc(item.value)" alt="" />
+        <span class="label-desc">{{ item.label }}</span>
+      </template>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <tiny-select v-model="value2" :options="options" placeholder="请选择" multiple>
+      <template #label="{ item }">
+        <img class="label-user-head" :src="imgSrc(item.value)" alt="" />
+        <span class="label-desc">{{ item.label }}</span>
+      </template>
+    </tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: '选项 1',
+          label: '北京超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
+        },
+        {
+          value: '选项 2',
+          label: '上海',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
+        },
+        {
+          value: '选项 3',
+          label: '天津',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/2.jpg`
+        },
+        {
+          value: '选项 4',
+          label: '重庆',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/3.jpg`
+        },
+        {
+          value: '选项 5',
+          label: '深圳',
+          src: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/4.jpg`
+        }
+      ],
+      value1: ['选项 1', '选项 2'],
+      value2: ['选项 3']
+    }
+  },
+  methods: {
+    imgSrc(value) {
+      const option = this.options.find((option) => option.value === value)
+
+      return option && option.src
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+
+.demo-select-slot-label.label-user-head,
+.tiny-tooltip .label-user-head {
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <tiny-select v-model="value" multiple collapse-tags>
+    <template #prefix>
+      <tiny-icon-location></tiny-icon-location>
+    </template>
+    <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'
+import { iconLocation } from '@opentiny/vue-icon'
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const value = ref('')
+
+const TinyIconLocation = iconLocation()
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/slot-prefix.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#slot-prefix')
+
+  const wrap = page.locator('#slot-prefix')
+  const select = wrap.locator('.tiny-select')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const prefix = select.locator('.tiny-input .tiny-input__prefix .tiny-svg')
+  const tag = select.locator('.tiny-tag')
+
+  await expect(prefix).toBeVisible()
+  await select.click()
+  await option.filter({ hasText: '北京' }).click()
+  await expect(tag.filter({ hasText: '北京' })).toBeVisible()
+})

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

@@ -0,0 +1,39 @@
+<template>
+  <tiny-select v-model="value" multiple collapse-tags>
+    <template #prefix>
+      <tiny-icon-location></tiny-icon-location>
+    </template>
+    <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'
+import { iconLocation } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyIconLocation: iconLocation()
+  },
+  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/slot-reference-composition-api.vue

@@ -0,0 +1,33 @@
+<template>
+  <tiny-select v-model="value">
+    <template #reference>
+      <tiny-icon-setting class="custom-reference"></tiny-icon-setting>
+    </template>
+    <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'
+import { iconSetting } from '@opentiny/vue-icon'
+
+const TinyIconSetting = iconSetting()
+
+const options = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+const value = ref('')
+</script>
+
+<style scoped>
+.custom-reference {
+  font-size: 24px;
+  fill: #8b949e;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test'
+
+test('custom-reference', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#slot-reference')
+
+  const wrap = page.locator('#slot-reference')
+  const select = wrap.locator('.tiny-select')
+  const dropdown = page.locator('.tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const reference = select.locator('.custom-reference')
+
+  await expect(option).toHaveCount(0)
+  await reference.click()
+  await option.filter({ hasText: '北京' }).click()
+})

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

@@ -0,0 +1,41 @@
+<template>
+  <tiny-select v-model="value">
+    <template #reference>
+      <tiny-icon-setting class="custom-reference"></tiny-icon-setting>
+    </template>
+    <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'
+import { iconSetting } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption,
+    TinyIconSetting: iconSetting()
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳' }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-reference {
+  font-size: 24px;
+  fill: #8b949e;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,27 @@
+<template>
+  <tiny-select v-model="value" multiple tag-type="warning">
+    <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: '深圳' },
+  { value: '选项 6', label: '南京' },
+  { value: '选项 7', label: '成都' }
+])
+const value = ref(['选项 1', '选项 2'])
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/tag-type.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('select-wrapper#tag-type')
+
+  const wrap = page.locator('#tag-type')
+  const select = wrap.locator('.tiny-select')
+  const tag = select.locator('.tiny-tag')
+
+  // 验证是否有对应类型的类名
+  await expect(tag.nth(0)).toHaveClass(/tiny-tag--warning/)
+})

package/demos/pc/app/select-wrapper/tag-type.vue

@@ -0,0 +1,36 @@
+<template>
+  <tiny-select v-model="value" multiple tag-type="warning">
+    <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: '选项 6', label: '南京' },
+        { value: '选项 7', label: '成都' }
+      ],
+      value: ['选项 1', '选项 2']
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

package/demos/pc/app/select-wrapper/webdoc/select-wrapper.cn.md

@@ -0,0 +1,7 @@
+---
+title: Select 选择器
+---
+
+# Select 选择器
+
+Select 选择器是一种通过点击弹出下拉列表展示数据并进行选择的 UI 组件。

package/demos/pc/app/select-wrapper/webdoc/select-wrapper.en.md

@@ -0,0 +1,7 @@
+---
+title: Select Selector
+---
+
+# Select Selector
+
+Select selector is a UI component that displays and selects data from a drop-down list box.