diff --git a/examples/sites/demos/pc/app/select/multiple.vue b/examples/sites/demos/pc/app/select/multiple.vue index 8b782782b..93be88522 100644 --- a/examples/sites/demos/pc/app/select/multiple.vue +++ b/examples/sites/demos/pc/app/select/multiple.vue @@ -1,14 +1,20 @@ @@ -64,8 +99,8 @@ export default { data() { return { options1: [ - { value: '选项1', label: '北京' }, - { value: '选项2', label: '上海' }, + { value: '选项1', label: '北京(禁用)', disabled: true }, // 禁用项 + { value: '选项2', label: '上海(必选)', required: true }, // 必选项 { value: '选项3', label: '天津' }, { value: '选项4', label: '重庆' }, { value: '选项5', label: '深圳' }, @@ -77,7 +112,7 @@ export default { { value: '选项2', label: '上海' }, { value: '选项3', label: '天津' }, { value: '选项4', label: '重庆' }, - { value: '选项5', label: '深圳', required: true }, + { value: '选项5', label: '深圳(必选)', required: true }, { value: '选项6', label: '南京' }, { value: '选项7', label: '成都' } ], @@ -85,6 +120,7 @@ export default { value2: ['选项1', '选项2'], value3: ['选项1', '选项2'], value4: [], + value5: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'], iconPopup: iconPopup() } } diff --git a/packages/design/aurora/src/select/index.ts b/packages/design/aurora/src/select/index.ts index 56d6e943b..f1e0f118d 100644 --- a/packages/design/aurora/src/select/index.ts +++ b/packages/design/aurora/src/select/index.ts @@ -94,6 +94,14 @@ export default { state.isSilentBlur = true api.updateModelValue(value) api.directEmitChange(value) + }, + // aurora 禁用和只展示的时候都是tagText,默认主题是 isDisplayOnly 才显示tagText + computedShowTagText: () => { + return state.isDisabled || state.isDisplayOnly + }, + // aurora 禁用已选项无效果,必选不显示关闭图标 + isTagClosable: (item) => { + return !item.required } } } diff --git a/packages/renderless/src/select/index.ts b/packages/renderless/src/select/index.ts index ee1fbfe90..6095d202a 100644 --- a/packages/renderless/src/select/index.ts +++ b/packages/renderless/src/select/index.ts @@ -2262,9 +2262,9 @@ export const computedDisabledTooltipContent = } export const computedSelectDisabled = - ({ props, parent }) => + ({ state }) => () => - props.disabled || (parent.form || {}).disabled || props.displayOnly || (parent.form || {}).displayOnly + state.isDisabled || state.isDisplayOnly export const computedIsExpand = ({ props, state }) => @@ -2340,6 +2340,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 + export const computedGetIcon = ({ designConfig, props }) => () => { @@ -2359,6 +2376,7 @@ export const computedGetTagType = } return props.tagType } + export const clearSearchText = ({ state, api }) => () => { @@ -2366,6 +2384,7 @@ export const clearSearchText = state.previousQuery = undefined api.handleQueryChange(state.query) } + export const clearNoMatchValue = ({ props, emit }) => (newModelValue) => { diff --git a/packages/renderless/src/select/vue.ts b/packages/renderless/src/select/vue.ts index 7d701d0e8..286cf7016 100644 --- a/packages/renderless/src/select/vue.ts +++ b/packages/renderless/src/select/vue.ts @@ -106,7 +106,9 @@ import { clearNoMatchValue, handleDebouncedQueryChange, onClickCollapseTag, - computedIsExpand + computedIsExpand, + computedShowTagText, + isTagClosable } from './index' import debounce from '../common/deps/debounce' import { isNumber } from '../common/type' @@ -170,7 +172,9 @@ export const api = [ 'loadTreeData', 'updateModelValue', 'clearSearchText', - 'onClickCollapseTag' + 'onClickCollapseTag', + 'computedShowTagText', + 'isTagClosable' ] const initState = ({ reactive, computed, props, api, emitter, parent, constants, useBreakpoint, vm, designConfig }) => { @@ -287,6 +291,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()), gridCheckedData: computed(() => api.getcheckedData()), isExpandAll: computed(() => api.computedIsExpandAll()), searchSingleCopy: computed(() => props.allowCopy && !props.multiple && (props.filterable || props.searchable)), @@ -381,7 +387,7 @@ const initApi = ({ computedOptionsAllDisabled: computedOptionsAllDisabled(state), computedDisabledTooltipContent: computedDisabledTooltipContent({ props, state }), - computedSelectDisabled: computedSelectDisabled({ props, parent }), + computedSelectDisabled: computedSelectDisabled({ state }), computedIsExpand: computedIsExpand({ props, state }), computedIsExpandAll: computedIsExpandAll(props), watchInitValue: watchInitValue({ props, emit }), @@ -390,7 +396,9 @@ const initApi = ({ computedGetIcon: computedGetIcon({ designConfig, props }), computedGetTagType: computedGetTagType({ designConfig, props }), clearSearchText: clearSearchText({ state, api }), - clearNoMatchValue: clearNoMatchValue({ props, emit }) + clearNoMatchValue: clearNoMatchValue({ props, emit }), + computedShowTagText: computedShowTagText({ state }), + isTagClosable: isTagClosable() }) addApi({ api, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig }) diff --git a/packages/theme/src/input/aurora-theme.js b/packages/theme/src/input/aurora-theme.js index 34686e8ec..e7e5955cb 100644 --- a/packages/theme/src/input/aurora-theme.js +++ b/packages/theme/src/input/aurora-theme.js @@ -1,5 +1,6 @@ export const tinyInputAuroraTheme = { 'ti-input-border-color': '#d9d9d9', 'ti-input-hover-border-color': '#1890ff', - 'ti-input-icon-close-text-color': '#bfbfbf' + 'ti-input-icon-close-text-color': '#bfbfbf', + 'ti-input-display-content-line-height': 'var(--ti-common-space-6x)' } diff --git a/packages/theme/src/input/index.less b/packages/theme/src/input/index.less index 3c4a24d39..63fe34584 100644 --- a/packages/theme/src/input/index.less +++ b/packages/theme/src/input/index.less @@ -303,6 +303,7 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + line-height: var(--ti-input-display-content-line-height); } &__mask { diff --git a/packages/theme/src/input/vars.less b/packages/theme/src/input/vars.less index cc6b686a7..689de421c 100644 --- a/packages/theme/src/input/vars.less +++ b/packages/theme/src/input/vars.less @@ -89,4 +89,6 @@ --ti-input-suffix-icon-height: 1em; // 输入框placeholder颜色 --ti-input-placeholder-color: var(--ti-common-color-placeholder, #adb0b8); + // displayOnly 时文本行高 + --ti-input-display-content-line-height: var(--ti-common-line-height-number); } diff --git a/packages/theme/src/select/aurora-theme.js b/packages/theme/src/select/aurora-theme.js index df0f8e0d6..cb07bea62 100644 --- a/packages/theme/src/select/aurora-theme.js +++ b/packages/theme/src/select/aurora-theme.js @@ -6,6 +6,7 @@ export const tinySelectAuroraTheme = { 'ti-select-tags-margin-bottom': '2px', 'ti-select-tags-margin-left': 'var(--ti-common-space-0)', 'ti-select-tags-wrap-padding-left': '8px', + 'ti-select-tags-padding-right-disabled': 'var(--ti-common-space-4x)', 'ti-select-input-icon-close-margin-right': 'var(--ti-common-space-2x)', 'ti-select-tags-height': '28px', 'ti-select-input-icon-top': '50%', diff --git a/packages/theme/src/select/index.less b/packages/theme/src/select/index.less index 9b28d4c44..601f30dd2 100644 --- a/packages/theme/src/select/index.less +++ b/packages/theme/src/select/index.less @@ -122,6 +122,13 @@ > span { font-size: 0; + + .tiny-tag.is-required { + cursor: not-allowed; + > svg { + cursor: not-allowed; + } + } } } @@ -192,7 +199,7 @@ display: inline-flex; > span { - color: red; + color: var(--ti-select-tags-text-color-disabled); font-size: var(--ti-tag-font-size); margin: var(--ti-select-tags-margin-top) var(--ti-select-tags-margin-right) var(--ti-select-tags-margin-bottom) var(--ti-select-tags-margin-left); @@ -318,7 +325,8 @@ } } - &.is-disabled { + &.is-disabled, + &.is-display-only { cursor: not-allowed; .@{input-prefix-cls} { @@ -334,6 +342,10 @@ .@{select-prefix-cls}__tags { padding-right: 16px; } + + .@{select-prefix-cls}__tags.is-show-tag { + padding-right: var(--ti-select-tags-padding-right-disabled); + } } &-tip &-tipcontent { diff --git a/packages/theme/src/select/smb-theme.js b/packages/theme/src/select/smb-theme.js index 9f68d2d20..49273f0c5 100644 --- a/packages/theme/src/select/smb-theme.js +++ b/packages/theme/src/select/smb-theme.js @@ -13,6 +13,7 @@ export const tinySelectSmbTheme = { 'ti-select-tags-margin-top': 'var(--ti-common-space-2)', 'ti-select-tags-margin-bottom': 'var(--ti-common-space-2)', 'ti-select-tags-max-height': 'none', + 'ti-select-tags-padding-right-disabled': 'var(--ti-common-space-8x)', 'ti-select-collapse-button-text-icon-color': 'var(--ti-common-color-text-link)', 'ti-select-input-icon-top-mini': 'var(--ti-common-space-4x)' } diff --git a/packages/theme/src/select/vars.less b/packages/theme/src/select/vars.less index 3290ca481..4ce810201 100644 --- a/packages/theme/src/select/vars.less +++ b/packages/theme/src/select/vars.less @@ -65,6 +65,10 @@ --ti-select-tags-height: calc(var(--ti-common-size-base) * 7); // 选择器多选标签最大高度 --ti-select-tags-max-height: var(--ti-common-size-24x, 96px); + // 多选禁用时右侧内边距 + --ti-select-tags-padding-right-disabled: var(--ti-common-size-7x, 28px); + // 多选禁用文本色 + --ti-select-tags-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8); // 选择器后缀图标显示状态 --ti-select-suffix-display: 'inline-block'; // 选择器右侧图标间距 diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue index 64347ca61..eaebf95fa 100644 --- a/packages/vue/src/select/src/pc.vue +++ b/packages/vue/src/select/src/pc.vue @@ -25,7 +25,7 @@ hoverExpand ? 'is-hover-expand' : '', clickExpand ? 'is-click-expand' : '', state.showCollapseTag ? 'collapse-tag-clicked' : '', - state.selectDisabled ? 'is-disabled' : '', + state.isDisabled ? 'is-disabled' : '', inputBoxType === 'underline' ? 'tiny-select__underline' : '' ]" @mouseleave.self=" @@ -69,18 +69,24 @@
- + - +