feat(base-select): [base-select,select] add base-select (#1632)

* refactor(base-select): add base-select * refactor(base-select): remove tree/grid and e2e tests * refactor(base-select): remove tree/grid in the base-select/pc.vue * refactor(base-select): remove tree/grid in the renderless/index.ts|vue.ts * docs(base-select): remove tree/grid demos
opentiny · May 21, 2024 · 0778e60 · 0778e60
1 parent f3a9128
commit 0778e60
Show file tree

Hide file tree

Showing 135 changed files with 12,932 additions and 0 deletions.
diff --git a/examples/sites/demos/apis/base-select.js b/examples/sites/demos/apis/base-select.js
diff --git a/examples/sites/demos/pc/app/base-select/all-text-composition-api.vue b/examples/sites/demos/pc/app/base-select/all-text-composition-api.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <tiny-base-select v-model="value" multiple all-text="全部小吃">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { BaseSelect as TinyBaseSelect, Option as TinyOption } from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项1', label: '黄金糕' },
+  { value: '选项2', label: '双皮奶' },
+  { value: '选项3', label: '蚵仔煎' },
+  { value: '选项4', label: '龙须面' },
+  { value: '选项6', label: '螺蛳粉' }
+])
+
+const value = ref([])
+</script>
+
+<style lang="less" scoped>
+.tiny-base-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/base-select/all-text.spec.ts b/examples/sites/demos/pc/app/base-select/all-text.spec.ts
@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test'
+
+test('多选时自定义全部的文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('base-select#all-text')
+  const wrap = page.locator('#all-text')
+  const select = wrap.locator('.tiny-base-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const option = dropdown.locator('.tiny-option')
+
+  await select.locator('.tiny-input__suffix').click()
+  await expect(option.filter({ hasText: '全部小吃' })).toHaveCount(1)
+})
diff --git a/examples/sites/demos/pc/app/base-select/all-text.vue b/examples/sites/demos/pc/app/base-select/all-text.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-base-select v-model="value" multiple all-text="全部小吃">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script>
+import { BaseSelect, Option } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect,
+    TinyOption: Option
+  },
+  data() {
+    return {
+      value: [],
+      options: [
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' },
+        { value: '选项3', label: '蚵仔煎' },
+        { value: '选项4', label: '龙须面' },
+        { value: '选项6', label: '螺蛳粉' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-base-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/base-select/allow-create-composition-api.vue b/examples/sites/demos/pc/app/base-select/allow-create-composition-api.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div>场景1：allow-create + filterable，点击创建条目</div>
+    <br />
+    <tiny-base-select v-model="value" allow-create filterable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
+    <br />
+    <tiny-base-select v-model="value" allow-create filterable default-first-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景3：下拉框显示新增按钮</div>
+    <br />
+    <tiny-base-select
+      v-model="value"
+      placeholder="请选择"
+      @top-create-click="handleAddOption"
+      automatic-dropdown
+      top-create
+      ref="selectDom"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" title="新建" width="30%">
+      <div>
+        <div>
+          <span>label</span>
+          <br />
+          <br />
+          <tiny-input v-model="optionLabel"></tiny-input>
+        </div>
+        <br />
+        <div>
+          <span>value</span>
+          <br />
+          <br />
+          <tiny-input v-model="optionValue"></tiny-input>
+        </div>
+      </div>
+      <template #footer>
+        <tiny-button @click="boxVisibility = false">取消</tiny-button>
+        <tiny-button type="primary" @click="handleConfirm"> 确定 </tiny-button>
+      </template>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  BaseSelect as TinyBaseSelect,
+  Option as TinyOption,
+  Input as TinyInput,
+  Button as TinyButton,
+  DialogBox as TinyDialogBox,
+  Modal
+} from '@opentiny/vue'
+
+const options = ref([
+  { value: '选项1', label: '北京' },
+  { value: '选项2', label: '上海' },
+  { value: '选项3', label: '天津' },
+  { value: '选项4', label: '重庆' },
+  { value: '选项5', label: '深圳' }
+])
+
+const selectDom = ref(null)
+const value = ref('')
+const boxVisibility = ref(false)
+const optionLabel = ref('')
+const optionValue = ref('')
+
+const handleAddOption = () => {
+  optionValue.value = ''
+  optionLabel.value = ''
+  boxVisibility.value = true
+}
+
+const handleConfirm = () => {
+  if (!optionLabel.value || !optionValue.value) {
+    Modal.message({ message: '选项不能为空！', status: 'warning' })
+    return
+  }
+  boxVisibility.value = false
+  options.value.unshift({
+    value: optionValue,
+    label: optionLabel
+  })
+  selectDom.value.focus()
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-base-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/base-select/allow-create.spec.ts b/examples/sites/demos/pc/app/base-select/allow-create.spec.ts
@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test'
+
+test('点击选中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.waitForTimeout(300)
+  await page.goto('base-select#allow-create')
+
+  const wrap = page.locator('#allow-create')
+  const select = wrap.locator('.tiny-base-select').nth(0)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const input = select.locator('.tiny-input__inner')
+
+  await input.click()
+  await input.fill('测试allow-create')
+  const KeyboardEvent = await page.evaluateHandle(() => new KeyboardEvent('keyup'))
+  await input.dispatchEvent('keyup', { KeyboardEvent })
+
+  await expect(input).toHaveValue('测试allow-create')
+  await dropdown.getByRole('listitem').filter({ hasText: '测试allow-create' }).click()
+  await expect(input).toHaveValue('测试allow-create')
+
+  await input.click()
+  await expect(input).toHaveValue('')
+  await expect(dropdown.getByRole('listitem').filter({ hasText: '测试allow-create' })).toHaveClass(/selected/)
+})
+
+test('enter 选中', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.waitForTimeout(300)
+  await page.goto('base-select#allow-create')
+
+  const wrap = page.locator('#allow-create')
+  const select = wrap.locator('.tiny-base-select').nth(1)
+  const dropdown = page.locator('body > .tiny-select-dropdown')
+  const input = select.locator('.tiny-input__inner')
+
+  await input.click()
+  await input.press('a')
+  await input.press('b')
+  await page.waitForTimeout(300)
+  await input.press('Enter')
+
+  await expect(dropdown).toBeHidden()
+  await expect(input).toHaveValue('ab')
+
+  await input.click()
+
+  await expect(input).toHaveValue('')
+  await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
+})
diff --git a/examples/sites/demos/pc/app/base-select/allow-create.vue b/examples/sites/demos/pc/app/base-select/allow-create.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div>场景1：allow-create + filterable，点击创建条目</div>
+    <br />
+    <tiny-base-select v-model="value" allow-create filterable>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景2：allow-create + filterable + default-first-option，Enter 键创建条目</div>
+    <br />
+    <tiny-base-select v-model="value" allow-create filterable default-first-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <br />
+    <br />
+    <div>场景3：下拉框显示新增按钮</div>
+    <br />
+    <tiny-base-select
+      v-model="value"
+      placeholder="请选择"
+      @top-create-click="handleAddOption"
+      automatic-dropdown
+      top-create
+      ref="selectDom"
+    >
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <tiny-dialog-box :visible="boxVisibility" @update:visible="boxVisibility = $event" title="新建" width="30%">
+      <div>
+        <div>
+          <span>label</span>
+          <br />
+          <br />
+          <tiny-input v-model="optionLabel"></tiny-input>
+        </div>
+        <br />
+        <div>
+          <span>value</span>
+          <br />
+          <br />
+          <tiny-input v-model="optionValue"></tiny-input>
+        </div>
+      </div>
+      <template #footer>
+        <tiny-button @click="boxVisibility = false">取消</tiny-button>
+        <tiny-button type="primary" @click="handleConfirm"> 确定 </tiny-button>
+      </template>
+    </tiny-dialog-box>
+  </div>
+</template>
+
+<script>
+import { BaseSelect, Option, Input, Button, DialogBox, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyBaseSelect: BaseSelect,
+    TinyOption: Option,
+    TinyInput: Input,
+    TinyButton: Button,
+    TinyDialogBox: DialogBox
+  },
+  data() {
+    return {
+      options: [
+        { value: '选项1', label: '北京' },
+        { value: '选项2', label: '上海' },
+        { value: '选项3', label: '天津' },
+        { value: '选项4', label: '重庆' },
+        { value: '选项5', label: '深圳' }
+      ],
+      value: '',
+      boxVisibility: false,
+      optionLabel: '',
+      optionValue: ''
+    }
+  },
+  methods: {
+    handleAddOption() {
+      this.optionValue = ''
+      this.optionLabel = ''
+      this.boxVisibility = true
+    },
+    handleConfirm() {
+      if (!this.optionLabel || !this.optionValue) {
+        Modal.message({ message: '选项不能为空！', status: 'warning' })
+        return
+      }
+      this.boxVisibility = false
+      this.options.unshift({
+        value: this.optionValue,
+        label: this.optionLabel
+      })
+      this.$refs.selectDom.focus()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-base-select {
+  width: 280px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue b/examples/sites/demos/pc/app/base-select/automatic-dropdown-composition-api.vue
@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <p>场景1：默认不可搜索时，获取焦点不下拉</p>
+    <tiny-button @click="handleFocus1"> 点击获取焦点 </tiny-button>
+    <tiny-base-select v-model="value" ref="selectOnlyFocusRef">
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+    <p>场景2：设置不可搜索时，获取焦点并自动下拉</p>
+    <tiny-button @click="handleFocus2"> 点击获取焦点 </tiny-button>
+    <tiny-base-select v-model="value" ref="selectAutoDropRef" automatic-dropdown>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+    </tiny-base-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { BaseSelect as TinyBaseSelect, Option as TinyOption, Button as 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('')
+const selectOnlyFocusRef = ref()
+const selectAutoDropRef = ref()
+
+const handleFocus1 = () => {
+  selectOnlyFocusRef.value.focus()
+}
+
+const handleFocus2 = () => {
+  selectAutoDropRef.value.focus()
+}
+</script>
+
+<style lang="less" scoped>
+.tiny-base-select {
+  width: 280px;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+.tiny-button {
+  margin-right: 10px;
+}
+</style>