@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,68 @@
+<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>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      value1: ['选项 1', '选项 2'],
+      value2: ['001', '002'],
+      gridOp: {
+        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 }
+        ]
+      },
+      options: [
+        { 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/memoize-usage-composition-api.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <tiny-select v-model="value">
+      <tiny-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        @click.native="clickItem(item.value)"
+        :highlight-class="item._highlightClass"
+      ></tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+import { Memorize } from '@opentiny/utils'
+
+const MemorizeInstance = new Memorize({ key: 'test456' })
+
+const options = MemorizeInstance.assemble([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+
+const value = ref('选项 3')
+const cacheValue = ref([])
+
+const clickItem = (value) => {
+  MemorizeInstance.updateByKey(value)
+  cacheValue.value = window.localStorage.getItem('tiny_memorize_test456')
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+
+test('手动缓存', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#memoize-usage')
+  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 select.click()
+  await option.filter({ hasText: '北京' }).click()
+  await expect(cacheValue).toContainText(['选项 1'])
+
+  await select.click()
+  await option.filter({ hasText: '上海' }).click()
+  await expect(cacheValue).toContainText(['选项 2'])
+})

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <tiny-select v-model="value">
+      <tiny-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        @click.native="clickItem(item.value)"
+        :highlight-class="item._highlightClass"
+      ></tiny-option>
+    </tiny-select>
+    <br /><br />
+    <p class="cache-value">
+      {{ cacheValue }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+import { Memorize } from '@opentiny/utils'
+
+const MemorizeInstance = new Memorize({ key: 'test456' })
+
+const options = MemorizeInstance.assemble([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' }
+])
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options,
+      value: '选项 3',
+      cacheValue: []
+    }
+  },
+  methods: {
+    clickItem(value) {
+      MemorizeInstance.updateByKey(value)
+      this.cacheValue = window.localStorage.getItem('tiny_memorize_test456')
+    }
+  },
+  mounted() {
+    window.localStorage.setItem('tiny_memorize_test456', '')
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <div>场景 1：多选</div>
+    <br />
+    <tiny-select v-model="value1" multiple searchable>
+      <tiny-option
+        v-for="item in options1"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+        :required="item.required"
+      >
+      </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"
+        :required="item.required"
+      >
+      </tiny-option>
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 3：配置式必选</div>
+    <br />
+    <tiny-select v-model="value3" multiple :options="options2"> </tiny-select>
+    <br />
+    <br />
+    <div>场景 4：多选个数限制</div>
+    <br />
+    <tiny-select v-model="value4" :options="options1" multiple :multiple-limit="2" show-limit-text> </tiny-select>
+    <br />
+    <br />
+    <div>场景 5：自定义图标 + 自定义样式</div>
+    <br />
+    <tiny-select
+      v-model="value4"
+      multiple
+      :options="options1"
+      :dropdown-icon="tinyIconPopup"
+      :drop-style="{ width: '200px', 'min-width': '200px' }"
+    >
+    </tiny-select>
+    <br />
+    <br />
+    <div>场景 6：禁用</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" disabled> </tiny-select>
+    <br />
+    <br />
+    <div>场景 7：只展示</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" display-only> </tiny-select>
+    <br />
+    <br />
+    <div>场景 8：显示全选文本</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" show-all-text-tag> </tiny-select>
+    <br />
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" show-all-text-tag disabled> </tiny-select>
+    <br />
+    <br />
+    <div>场景 9：折叠 tag + 必选项 + 禁用项</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" collapse-tags> </tiny-select>
+    <br />
+    <br />
+    <div>场景 10：悬浮展开 + 必选项 + 禁用项</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" hover-expand> </tiny-select>
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <div>场景 11：点击展开 + 必选项 + 禁用项</div>
+    <br />
+    <tiny-select v-model="value5" multiple :options="options1" click-expand> </tiny-select>
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+    <br />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+const options1 = ref([
+  { value: '选项 1', label: '北京 (禁用)', disabled: true }, // 禁用项
+  { value: '选项 2', label: '上海 (必选)', required: true }, // 必选项
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳' },
+  { value: '选项 6', label: '南京' },
+  { value: '选项 7', label: '成都' }
+])
+
+const options2 = ref([
+  { value: '选项 1', label: '北京' },
+  { value: '选项 2', label: '上海' },
+  { value: '选项 3', label: '天津' },
+  { value: '选项 4', label: '重庆' },
+  { value: '选项 5', label: '深圳 (必选)', required: true },
+  { value: '选项 6', label: '南京' },
+  { value: '选项 7', label: '成都' }
+])
+
+const value1 = ref(['选项 1', '选项 2'])
+const value2 = ref(['选项 1', '选项 2'])
+const value3 = ref(['选项 1', '选项 2'])
+const value4 = ref([])
+const value5 = ref(['选项 1', '选项 2', '选项 3', '选项 4', '选项 5', '选项 6', '选项 7'])
+const tinyIconPopup = iconPopup()
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <div class="demo-box">
+    <tiny-button @click="displayOnly = !displayOnly">{{ displayOnly ? '解除' : '设置' }} 只读</tiny-button>
+    <br />
+    <br />
+    <tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
+      <tiny-form-item label="单选只读">
+        <tiny-select v-model="formData.value" :options="options"> </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="多选只读">
+        <tiny-select v-model="formData.select1" multiple :options="options" hover-expand> </tiny-select>
+      </tiny-form-item>
+      <br />
+      <br />
+    </tiny-form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TinySelectWrapper as TinySelect, TinyForm, TinyFormItem, TinyButton } 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 displayOnly = ref(true)
+
+const formData = reactive({
+  value: '选项 1',
+  select1: ['选项 1', '选项 2', '选项 3', '选项 4', '选项 5', '选项 6', '选项 7']
+})
+</script>
+
+<style lang="less" scoped>
+.demo-box {
+  width: 350px;
+
+  .custom-form {
+    border: 1px solid #fdf4f4;
+    padding: 10px;
+  }
+
+  .visible-form {
+    overflow: visible;
+  }
+}
+</style>

package/demos/pc/app/select-wrapper/multiple-mix.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="demo-box">
+    <tiny-button @click="displayOnly = !displayOnly">{{ displayOnly ? '解除' : '设置' }} 只读</tiny-button>
+    <br />
+    <br />
+    <tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
+      <tiny-form-item label="单选只读">
+        <tiny-select v-model="formData.value" :options="options"> </tiny-select>
+      </tiny-form-item>
+      <tiny-form-item label="多选只读">
+        <tiny-select v-model="formData.select1" multiple :options="options" hover-expand> </tiny-select>
+      </tiny-form-item>
+      <br />
+      <br />
+    </tiny-form>
+  </div>
+</template>
+
+<script>
+import { TinyForm, TinyFormItem, TinySelectWrapper as TinySelect, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyForm,
+    TinyButton,
+    TinyFormItem,
+    TinySelect
+  },
+  data() {
+    return {
+      displayOnly: true,
+      options: [
+        {
+          value: '选项 1',
+          label: '北京'
+        },
+        {
+          value: '选项 2',
+          label: '上海'
+        },
+        {
+          value: '选项 3',
+          label: '天津'
+        },
+        {
+          value: '选项 4',
+          label: '重庆'
+        },
+        {
+          value: '选项 5',
+          label: '深圳'
+        },
+        {
+          value: '选项 6',
+          label: '杭州'
+        },
+        {
+          value: '选项 7',
+          label: '宇宙无敌老面小馒头'
+        }
+      ],
+      formData: {
+        value: '选项 1',
+        select1: ['选项 1', '选项 2', '选项 3', '选项 4', '选项 5', '选项 6', '选项 7']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-box {
+  width: 350px;
+
+  .custom-form {
+    border: 1px solid #fdf4f4;
+    padding: 10px;
+  }
+
+  .visible-form {
+    overflow: visible;
+  }
+}
+</style>

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

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test'
+
+test('多选时取远端数据与当前已选数据的并集', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#multiple')
+  const wrap = page.locator('#multiple')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const tag = select.locator('.tiny-tag')
+
+  await expect(tag).toHaveCount(2)
+  await select.locator('.tiny-input__suffix').nth(0).click()
+  await option.filter({ hasText: '全部' }).click()
+  await expect(tag).toHaveCount(7)
+  await option.filter({ hasText: '全部' }).click()
+  await expect(tag).toHaveCount(2)
+  await option.filter({ hasText: '北京' }).click()
+  await expect(tag).toHaveCount(2)
+  await option.filter({ hasText: '上海' }).click()
+  await expect(tag).toHaveCount(2)
+  await option.filter({ hasText: '天津' }).click()
+  await expect(tag).toHaveCount(3)
+  await tag.filter({ hasText: '天津' }).locator('.tiny-tag__close').click()
+  await expect(tag).toHaveCount(2)
+})
+
+test('multiple-limit', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#multiple')
+  const wrap = page.locator('#multiple')
+  const select = wrap.locator('.tiny-select').nth(3)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+  const tag = select.locator('.tiny-tag')
+
+  await select.click()
+  await option.nth(0).click()
+  await option.nth(1).click()
+  await option.nth(2).click()
+  await expect(tag).toHaveCount(2)
+  await expect(option.filter({ hasText: '全部' })).toHaveCount(0)
+
+  const list = await option.all()
+  await expect(list[0]).toHaveClass(/selected is-required/)
+  await expect(list[1]).toHaveClass(/is-disabled/)
+  await expect(list[2]).toHaveClass(/selected hover/)
+  await expect(list[3]).toHaveClass(/is-disabled/)
+  await expect(list[4]).toHaveClass(/is-disabled/)
+  await expect(list[5]).toHaveClass(/is-disabled/)
+  await expect(list[6]).toHaveClass(/is-disabled/)
+})