@opentiny/vue-docs 3.27.1 → 3.28.0

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

@@ -0,0 +1,146 @@
+<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="iconPopup"
+      :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>
+import { TinySelectWrapper as TinySelect, TinyOption } from '@opentiny/vue'
+import { iconPopup } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinySelect,
+    TinyOption
+  },
+  data() {
+    return {
+      options1: [
+        { 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: '成都' }
+      ],
+      options2: [
+        { value: '选项 1', label: '北京' },
+        { value: '选项 2', label: '上海' },
+        { value: '选项 3', label: '天津' },
+        { value: '选项 4', label: '重庆' },
+        { value: '选项 5', label: '深圳 (必选)', required: true },
+        { value: '选项 6', label: '南京' },
+        { value: '选项 7', label: '成都' }
+      ],
+      value1: ['选项 1', '选项 2'],
+      value2: ['选项 1', '选项 2'],
+      value3: ['选项 1', '选项 2'],
+      value4: [],
+      value5: ['选项 1', '选项 2', '选项 3', '选项 4', '选项 5', '选项 6', '选项 7'],
+      iconPopup: iconPopup()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+  <tiny-select v-model="value" placeholder="自定义 placeholder" name="inputName" autocomplete>
+    <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/native-properties.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('原生属性', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#native-properties')
+
+  const wrap = page.locator('#native-properties')
+  const select = wrap.locator('.tiny-select')
+  const input = select.locator('.tiny-input__inner')
+
+  await expect(input).toHaveAttribute('name', 'inputName')
+  await expect(input).toHaveAttribute('placeholder', '自定义 placeholder')
+
+  const isHasAutocomplete = await input.evaluate((input) => input.hasAttribute('autocomplete'))
+  await expect(isHasAutocomplete).toBe(true)
+})

package/demos/pc/app/select-wrapper/native-properties.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-select v-model="value" placeholder="自定义 placeholder" name="inputName" autocomplete>
+    <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/nest-grid-composition-api.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="demo-select">
+    <p>场景 1：嵌套表格（单选）</p>
+    <br />
+    <tiny-select
+      v-model="value1"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpSingle"
+    ></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="gridOpMulti"
+    ></tiny-select>
+    <br /><br />
+    <p>场景 3：嵌套表格 + 可搜索 + 可清除</p>
+    <br />
+    <tiny-select
+      ref="select"
+      v-model="value3"
+      filterable
+      :filter-method="filter"
+      clearable
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpSingle"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const value1 = ref('')
+const value2 = ref([])
+const value3 = ref('')
+
+const gridOpSingle = reactive({
+  data: [
+    { id: '001', area: '华南区', province: '广东省', city: '深圳 1' },
+    { id: '002', area: '华南区', province: '广东省', city: '深圳市' },
+    { id: '003', area: '华南区', province: '广东省', city: '珠海市' },
+    { id: '004', area: '华南区', province: '广东省', city: '佛山市' },
+    { id: '005', area: '华南区', province: '广东省', city: '中山市' }
+  ],
+  columns: [
+    { type: 'radio', title: '' },
+    { field: 'area', title: '区域', width: 90 },
+    { field: 'province', title: '省份', width: 60 },
+    { field: 'city', title: '城市', width: 60 }
+  ]
+})
+
+const gridOpMulti = reactive({
+  data: [
+    { id: '001', area: '华南区', province: '广东省', city: '深圳 1' },
+    { 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 filter = (value) => {
+  if (!value) {
+    return gridOpSingle.data
+  }
+
+  return gridOpSingle.data.filter((item) => {
+    return item.city.includes(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/nest-grid-disable-composition-api.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <p>场景 1：嵌套表格禁用某项（单选）</p>
+    <br />
+    <tiny-select
+      v-model="value1"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio"
+      :radio-config="radioConfig"
+    ></tiny-select>
+    <br /><br />
+    <p>场景 2：嵌套表格禁用某项（多选）</p>
+    <br />
+    <tiny-select
+      v-model="value2"
+      value-field="id"
+      multiple
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOp"
+      :select-config="selectConfig"
+    ></tiny-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+const selectConfig = ref({
+  checkMethod({ rowIndex }) {
+    return rowIndex % 2 === 0
+  }
+})
+
+const radioConfig = ref({
+  checkMethod({ rowIndex }) {
+    return rowIndex % 2 === 1
+  }
+})
+
+const value1 = ref('')
+const value2 = ref([])
+
+const gridOpRadio = 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: 'radio', title: '' },
+    { field: 'area', title: '区域', width: 100 },
+    { field: 'province', title: '省份', width: 50 },
+    { field: 'city', title: '城市' }
+  ]
+})
+
+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: 100 },
+    { field: 'province', title: '省份', width: 50 },
+    { field: 'city', title: '城市' }
+  ]
+})
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/select-wrapper/nest-grid-disable.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/test'
+
+test('嵌套表格禁用某项（单选）', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-grid-disable')
+  const wrap = page.locator('#nest-grid-disable')
+
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+
+  await select.click()
+  await expect(dropdown.locator('.tiny-grid-radio.is__disabled')).toHaveCount(3)
+  await expect(input).toHaveValue('')
+
+  await dropdown.getByRole('row').nth(1).getByRole('cell').first().click()
+  await expect(input).toHaveValue('')
+
+  await dropdown.getByRole('row').nth(2).getByRole('cell').first().click()
+  await expect(input).toHaveValue('深圳市')
+})
+
+test('嵌套表格禁用某项（多选）', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('select-wrapper#nest-grid-disable')
+
+  const wrap = page.locator('#nest-grid-disable')
+  const select = wrap.locator('.tiny-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const tag = select.locator('.tiny-tag')
+
+  await select.click()
+  await dropdown.getByRole('row').nth(2).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(0)
+
+  await dropdown.getByRole('row').nth(1).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(1)
+
+  await dropdown.getByRole('row').nth(4).getByRole('cell').first().click()
+  await expect(tag).toHaveCount(1)
+})

package/demos/pc/app/select-wrapper/nest-grid-disable.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div>场景 1：嵌套表格禁用某项（单选）</div>
+    <br />
+    <tiny-select
+      v-model="value1"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio"
+      :radio-config="radioConfig"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 2：嵌套表格禁用某项（多选）</div>
+    <br />
+    <tiny-select
+      v-model="value2"
+      value-field="id"
+      multiple
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOp"
+      :select-config="selectConfig"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 3：嵌套表格行选中（单选）</div>
+    <br />
+    <tiny-select
+      v-model="value3"
+      value-field="id"
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOpRadio"
+      :radio-config="{ trigger: 'row' }"
+      placeholder="请选择"
+    ></tiny-select>
+    <br />
+    <br />
+    <div>场景 4：嵌套表格行选中（多选）</div>
+    <br />
+    <tiny-select
+      v-model="value4"
+      value-field="id"
+      multiple
+      text-field="city"
+      render-type="grid"
+      :grid-op="gridOp"
+      :select-config="{ trigger: 'row' }"
+      placeholder="请选择"
+    ></tiny-select>
+  </div>
+</template>
+
+<script>
+import { TinySelectWrapper as TinySelect } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySelect
+  },
+  data() {
+    return {
+      selectConfig: {
+        checkMethod({ rowIndex }) {
+          return rowIndex % 2 === 0
+        }
+      },
+      radioConfig: {
+        checkMethod({ rowIndex }) {
+          return rowIndex % 2 === 1
+        }
+      },
+      value1: '',
+      value2: [],
+      value3: '',
+      value4: [],
+      gridOpRadio: {
+        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: 'radio', title: '' },
+          { field: 'area', title: '区域', width: 100 },
+          { field: 'province', title: '省份', width: 50 },
+          { field: 'city', title: '城市' }
+        ]
+      },
+      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: 100 },
+          { field: 'province', title: '省份', width: 50 },
+          { field: 'city', title: '城市' }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>