Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(base-select): [base-select] optimize base select and fix some bugs #2532

Merged
merged 9 commits into from
Nov 19, 2024
2 changes: 0 additions & 2 deletions examples/sites/demos/pc/app/base-select/disabled.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,6 @@ test('多选,禁用项默认选中', async ({ page }) => {

// 默认值显示tag数
await expect(tag).toHaveCount(2)
// 禁用项默认选中不显示关闭图标
await expect(tag.filter({ hasText: '上海' }).locator('svg')).toHaveCount(0)
// 非禁用项显示关闭图标
await expect(tag.filter({ hasText: '天津' }).locator('svg')).toHaveCount(1)

Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div>
<p>默认</p>
<tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
<p>medium</p>
<tiny-base-select v-model="value2" size="medium" multiple :options="options"></tiny-base-select>
<p>默认</p>
<tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
<p>small</p>
<tiny-base-select v-model="value3" size="small" multiple :options="options"> </tiny-base-select>
<p>mini</p>
Expand Down
14 changes: 7 additions & 7 deletions examples/sites/demos/pc/app/base-select/size.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test'

test('默认尺寸', async ({ page }) => {
test('medium 尺寸', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('base-select#size')

Expand All @@ -9,11 +9,12 @@ test('默认尺寸', async ({ page }) => {
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/)
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('medium 尺寸', async ({ page }) => {
test('默认尺寸', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('base-select#size')

Expand All @@ -22,9 +23,8 @@ test('medium 尺寸', async ({ page }) => {
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/)
await expect(input.locator('.tiny-input__inner')).toHaveCSS('height', '32px')
await expect(tag.nth(0)).toHaveClass(/tiny-tag--light/)
})

test('small 尺寸', async ({ page }) => {
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/base-select/size.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div>
<p>默认</p>
<tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
<p>medium</p>
<tiny-base-select v-model="value2" size="medium" multiple :options="options"></tiny-base-select>
<p>默认</p>
<tiny-base-select v-model="value1" multiple :options="options"></tiny-base-select>
<p>small</p>
<tiny-base-select v-model="value3" size="small" multiple :options="options"> </tiny-base-select>
<p>mini</p>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div>
<p>场景1:带标签和提示信息</p>
<br />
<tiny-base-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">
Expand All @@ -15,8 +16,10 @@
</tiny-option>
</template>
</tiny-base-select>
<br /><br />

<p>场景2:选项双行</p>
<br />
<tiny-base-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>
Expand Down Expand Up @@ -69,11 +72,6 @@ const value2 = ref('选项1')
margin: 6px;
}
}
p {
font-size: 14px;
line-height: 1.5;
padding: 16px 0;
}
</style>

<style lang="less">
Expand Down
8 changes: 3 additions & 5 deletions examples/sites/demos/pc/app/base-select/slot-default.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div>
<p>场景1:带标签和提示信息</p>
<br />
<tiny-base-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">
Expand All @@ -15,8 +16,10 @@
</tiny-option>
</template>
</tiny-base-select>
<br /><br />

<p>场景2:选项双行</p>
<br />
<tiny-base-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>
Expand Down Expand Up @@ -78,11 +81,6 @@ export default {
margin: 6px;
}
}
p {
font-size: 14px;
line-height: 1.5;
padding: 16px 0;
}
</style>

<style lang="less">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<tiny-base-select v-model="value" multiple collapse-tags>
<template #prefix>
<tiny-icon-share></tiny-icon-share>
<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-base-select>
Expand All @@ -10,7 +10,7 @@
<script setup>
import { ref } from 'vue'
import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
import { iconShare } from '@opentiny/vue-icon'
import { iconLocation } from '@opentiny/vue-icon'

const options = ref([
{ value: '选项1', label: '北京' },
Expand All @@ -21,7 +21,7 @@ const options = ref([
])
const value = ref('')

const TinyIconShare = iconShare()
const TinyIconLocation = iconLocation()
</script>

<style lang="less" scoped>
Expand Down
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/base-select/slot-prefix.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<template>
<tiny-base-select v-model="value" multiple collapse-tags>
<template #prefix>
<icon-share></icon-share>
<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-base-select>
</template>

<script>
import { TinyBaseSelect, TinyOption } from '@opentiny/vue'
import { iconShare } from '@opentiny/vue-icon'
import { iconLocation } from '@opentiny/vue-icon'

export default {
components: {
TinyBaseSelect,
TinyOption,
IconShare: iconShare()
TinyIconLocation: iconLocation()
},
data() {
return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ title: BaseSelect 基础选择器

# BaseSelect 基础选择器

BaseSelect 基础选择器是 Select 组件的基础版本,用法和 Select 一样,但是不包含下拉树和下拉表格功能。
BaseSelect 基础选择器是 Select 组件的基础版本,用法和 Select 一样,但是不包含下拉树和下拉表格功能。BaseSelect 组件的包体积更小,如果你不需要下拉树和下拉表格功能,推荐使用 BaseSelect 组件,而不是 Select 组件。
3 changes: 0 additions & 3 deletions examples/sites/demos/pc/app/base-select/webdoc/base-select.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
export default {
column: '2',
owner: '',
meta: {
experimental: '3.16.0'
},
demos: [
{
demoId: 'basic-usage',
Expand Down
5 changes: 1 addition & 4 deletions examples/sites/demos/pc/menus.js
Original file line number Diff line number Diff line change
Expand Up @@ -121,10 +121,7 @@ export const cmpMenus = [
{
'nameCn': '基础选择器',
'name': 'BaseSelect',
'key': 'base-select',
'meta': {
'experimental': '3.17.0'
}
'key': 'base-select'
},
{ 'nameCn': '级联选择器', 'name': 'Cascader', 'key': 'cascader' },
{ 'nameCn': '级联面板', 'name': 'CascaderPanel', 'key': 'cascader-panel' },
Expand Down
22 changes: 20 additions & 2 deletions packages/renderless/src/base-select/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,7 @@ const getOptionOfSetSelected = ({ api, props }) => {
}

// tiny 新增
if (!option.currentLabel) {
if (!option.state.currentLabel) {
api.clearNoMatchValue('')
}

Expand Down Expand Up @@ -316,9 +316,10 @@ export const setSelected =
: 'halfselect'
: 'check'

if (state.selected.length === 0 || !state.selected[0].currentLabel) {
if (!state.selected?.[0]?.isTree && !state.selected?.[0]?.isGrid) {
state.selected = result
}
state.selected.length && (state.selectedLabel = '')

state.tips = state.selected.map((item) => (item.state ? item.state.currentLabel : item.currentLabel)).join(',')

Expand Down Expand Up @@ -1875,6 +1876,23 @@ export const watchShowClose =
}

// 以下为tiny 新增功能
/**
* 兼容不同主题多选禁用的展示类型
* default 和 smb 主题,displayOnly 时显示为 tagText,否则为 tag
* aurora 主题 displayOnly||disabled 时显示为tagText,否则为 tag
*/
export const computedShowTagText =
({ state }) =>
() =>
state.isDisplayOnly

/**
* 兼容不同主题多选,tag 在disabled 和 required 时是否显示关闭按钮的区别
* default 主题 ,禁用显示关闭按钮,required目前和aurora保持一致不显示,待设计图补充时更新
* aurora 主题,禁用时无禁用效果,required 时不显示关闭按钮
*/
export const isTagClosable = () => (item) => !item.required

Comment on lines +1879 to +1895
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use consistent language for code comments

The comments added in lines 1879-1895 are in Chinese. To maintain consistency and improve collaboration among the development team, please translate these comments into English.

Apply this diff to update the comments:

-/**
- * 兼容不同主题多选禁用的展示类型
- * default 和 smb 主题,displayOnly 时显示为 tagText,否则为 tag
- * aurora 主题 displayOnly||disabled 时显示为tagText,否则为 tag
- */
+/**
+ * Handle display types for multi-select disabled states across different themes
+ * In default and smb themes, shows tagText when displayOnly is true; otherwise, shows tag
+ * In aurora theme, shows tagText when displayOnly or disabled is true; otherwise, shows tag
+ */
 export const computedShowTagText =
   ({ state }) =>
   () =>
     state.isDisplayOnly

-/**
- * 兼容不同主题多选,tag 在disabled 和 required 时是否显示关闭按钮的区别
- * default 主题 ,禁用显示关闭按钮,required目前和aurora保持一致不显示,待设计图补充时更新
- * aurora 主题,禁用时无禁用效果,required 时不显示关闭按钮
- */
+/**
+ * Manage tag closability for multi-select across different themes when disabled or required
+ * In default theme, the close button is shown when disabled; currently, required behaves like aurora theme and does not display the close button (pending design updates)
+ * In aurora theme, disabled state has no effect; the close button is not displayed when required
+ */
 export const isTagClosable = () => (item) => !item.required
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/**
* 兼容不同主题多选禁用的展示类型
* default smb 主题,displayOnly 时显示为 tagText,否则为 tag
* aurora 主题 displayOnly||disabled 时显示为tagText,否则为 tag
*/
export const computedShowTagText =
({ state }) =>
() =>
state.isDisplayOnly
/**
* 兼容不同主题多选,tag 在disabled required 时是否显示关闭按钮的区别
* default 主题 ,禁用显示关闭按钮,required目前和aurora保持一致不显示,待设计图补充时更新
* aurora 主题,禁用时无禁用效果,required 时不显示关闭按钮
*/
export const isTagClosable = () => (item) => !item.required
/**
* Handle display types for multi-select disabled states across different themes
* In default and smb themes, shows tagText when displayOnly is true; otherwise, shows tag
* In aurora theme, shows tagText when displayOnly or disabled is true; otherwise, shows tag
*/
export const computedShowTagText =
({ state }) =>
() =>
state.isDisplayOnly
/**
* Manage tag closability for multi-select across different themes when disabled or required
* In default theme, the close button is shown when disabled; currently, required behaves like aurora theme and does not display the close button (pending design updates)
* In aurora theme, disabled state has no effect; the close button is not displayed when required
*/
export const isTagClosable = () => (item) => !item.required

export const computedGetIcon =
({ designConfig, props }) =>
() => {
Expand Down
12 changes: 10 additions & 2 deletions packages/renderless/src/base-select/vue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,9 @@ import {
onClickCollapseTag,
computedIsExpand,
updateSelectedData,
hidePanel
hidePanel,
computedShowTagText,
isTagClosable
} from './index'
import debounce from '../common/deps/debounce'
import { isNumber } from '../common/type'
Expand Down Expand Up @@ -152,7 +154,9 @@ export const api = [
'clearSearchText',
'onClickCollapseTag',
'updateSelectedData',
'hidePanel'
'hidePanel',
'computedShowTagText',
'isTagClosable'
]

const initState = ({ reactive, computed, props, api, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
Expand Down Expand Up @@ -267,6 +271,8 @@ const initStateAdd = ({ computed, props, api, parent }) => {
formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
selectDisabled: computed(() => api.computedSelectDisabled()),
isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
isDisabled: computed(() => props.disabled || (parent.form || {}).disabled),
isShowTagText: computed(() => api.computedShowTagText()),
searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
childrenName: computed(() => 'children'),
tooltipContent: {},
Expand Down Expand Up @@ -356,6 +362,8 @@ const initApi = ({
computedGetTagType: computedGetTagType({ designConfig, props }),
clearSearchText: clearSearchText({ state, api }),
clearNoMatchValue: clearNoMatchValue({ props, emit }),
computedShowTagText: computedShowTagText({ state }),
isTagClosable: isTagClosable(),
updateSelectedData: updateSelectedData({ state }),
hidePanel: hidePanel({ state })
})
Expand Down
3 changes: 2 additions & 1 deletion packages/renderless/src/grid-select/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ export const selectChange =
return {
...node,
currentLabel: node[props.textField],
value: node[props.valueField]
value: node[props.valueField],
isGrid: true
}
})
)
Expand Down
3 changes: 2 additions & 1 deletion packages/renderless/src/tree-select/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ export const check =
return {
...node,
currentLabel: node[props.textField],
value: node[props.valueField]
value: node[props.valueField],
isTree: true
}
})
)
Expand Down
19 changes: 0 additions & 19 deletions packages/theme/src/base-select/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -308,10 +308,6 @@
&__inner {
padding-right: 12px;
}

&__suffix {
display: inline-block;
}
}

.@{base-select-prefix-cls}__tags {
Expand Down Expand Up @@ -359,8 +355,6 @@
}

.@{input-prefix-cls}__suffix {
top: var(--tv-BaseSelect-suffix-top);

&-inner {
font-size: 0;
}
Expand All @@ -370,19 +364,6 @@
overflow: hidden;
}

&-medium .@{input-prefix-cls}__suffix {
top: var(--tv-BaseSelect-suffix-top-medium);
}

// TODO: 尾部按钮应垂直居中,待优化
&-small .@{input-prefix-cls}__suffix {
top: var(--tv-BaseSelect-suffix-top-small);
}

&-mini .@{input-prefix-cls}__suffix {
top: var(--tv-BaseSelect-suffix-top-mini);
}

&.is-disabled {
.@{base-select-prefix-cls}__caret {
fill: var(--tv-BaseSelect-icon-color-disabled);
Expand Down
4 changes: 4 additions & 0 deletions packages/vue/src/base-select/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,10 @@ export default defineComponent({
allText: {
type: String,
default: ''
},
showAllTextTag: {
type: Boolean,
default: false
}
},
setup(props, context) {
Expand Down
Loading
Loading