|
| 1 | +import { iconChevronDown } from '@opentiny/vue-icon' |
| 2 | + |
| 3 | +export default { |
| 4 | + // 虚拟滚动的默认options不一致 |
| 5 | + baseOpts: { optionHeight: 34, limit: 20 }, |
| 6 | + icons: { |
| 7 | + dropdownIcon: iconChevronDown() |
| 8 | + }, |
| 9 | + state: { |
| 10 | + sizeMap: { |
| 11 | + default: 30, |
| 12 | + mini: 24, |
| 13 | + small: 36, |
| 14 | + medium: 42 |
| 15 | + }, |
| 16 | + spacingHeight: 2, |
| 17 | + initialInputHeight: 30, |
| 18 | + // 显示清除等图标时，不隐藏下拉箭头时 |
| 19 | + autoHideDownIcon: false, |
| 20 | + delayBlur: true |
| 21 | + }, |
| 22 | + props: { |
| 23 | + tagType: 'info', |
| 24 | + stopPropagation: true |
| 25 | + }, |
| 26 | + renderless: (props, hooks, { emit }, api) => { |
| 27 | + const state = api.state |
| 28 | + |
| 29 | + return { |
| 30 | + // 兼容不同主题输入框尺寸对应标签尺寸不一致 |
| 31 | + computedCollapseTagSize: () => { |
| 32 | + let size = 'small' |
| 33 | + |
| 34 | + if (~['small', 'mini'].indexOf(state.selectSize)) { |
| 35 | + size = state.selectSize |
| 36 | + } else if (~['medium', 'default'].indexOf(state.selectSize)) { |
| 37 | + size = 'small' |
| 38 | + } |
| 39 | + |
| 40 | + return size |
| 41 | + }, |
| 42 | + // 兼容显示清除图标时，是否同时显示下拉图标 |
| 43 | + computedShowDropdownIcon: () => { |
| 44 | + return !(props.remote && props.filterable && !props.remoteConfig.showIcon) |
| 45 | + }, |
| 46 | + |
| 47 | + // aui 的勾选未处理disabled的选项，故此放这里。 |
| 48 | + toggleCheckAll: (filtered) => { |
| 49 | + const getEnabledValues = (options) => { |
| 50 | + let values = [] |
| 51 | + |
| 52 | + for (let i = 0; i < options.length; i++) { |
| 53 | + if (!options[i].state.disabled && !options[i].state.groupDisabled && options[i].state.visible) { |
| 54 | + values.push(options[i].value) |
| 55 | + } |
| 56 | + } |
| 57 | + |
| 58 | + return values |
| 59 | + } |
| 60 | + |
| 61 | + let value |
| 62 | + const enabledValues = getEnabledValues(state.options) |
| 63 | + |
| 64 | + if (filtered) { |
| 65 | + if (state.filteredSelectCls === 'check' || state.filteredSelectCls === 'halfselect') { |
| 66 | + value = Array.from(new Set([...state.modelValue, ...enabledValues])) |
| 67 | + } else { |
| 68 | + value = state.modelValue.filter((val) => !enabledValues.includes(val)) |
| 69 | + } |
| 70 | + } else { |
| 71 | + if (state.selectCls === 'check') { |
| 72 | + value = enabledValues |
| 73 | + } else if (state.selectCls === 'halfselect') { |
| 74 | + const unchecked = state.options.filter((item) => !item.state.disabled && item.state.selectCls === 'check') |
| 75 | + |
| 76 | + unchecked.length ? (value = enabledValues) : (value = []) |
| 77 | + } else if (state.selectCls === 'checked-sur') { |
| 78 | + value = [] |
| 79 | + } |
| 80 | + } |
| 81 | + |
| 82 | + const requiredValue = [] |
| 83 | + if (props.multiple) { |
| 84 | + state.options.forEach((opt) => { |
| 85 | + if (opt.required) requiredValue.push(opt.value) |
| 86 | + }) |
| 87 | + } |
| 88 | + |
| 89 | + if (Array.isArray(value)) { |
| 90 | + value = requiredValue.concat(value.filter((val) => !requiredValue.find((requireVal) => requireVal === val))) |
| 91 | + } |
| 92 | + |
| 93 | + api.setSoftFocus() |
| 94 | + |
| 95 | + state.isSilentBlur = true |
| 96 | + api.updateModelValue(value) |
| 97 | + api.directEmitChange(value) |
| 98 | + }, |
| 99 | + // aurora 禁用和只展示的时候都是tagText，默认主题是 isDisplayOnly 才显示tagText |
| 100 | + computedShowTagText: () => { |
| 101 | + return state.isDisabled || state.isDisplayOnly |
| 102 | + }, |
| 103 | + // aurora 禁用已选项无效果，必选不显示关闭图标 |
| 104 | + isTagClosable: (item) => { |
| 105 | + return !item.required |
| 106 | + } |
| 107 | + } |
| 108 | + } |
| 109 | +} |
0 commit comments