@koi-design/uxd-ui 14.0.39 → 14.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/Calendar/Calendar.vue.d.ts +3 -3
- package/es/components/Calendar/Header.vue.d.ts +3 -3
- package/es/components/Calendar/index.d.ts +6 -6
- package/es/components/Cascader/Cascader.d.ts +1 -1
- package/es/components/DatePicker/DatePicker.vue.d.ts +3 -3
- package/es/components/DatePicker/Panel/DatePickerPanel.vue.d.ts +3 -3
- package/es/components/DatePicker/index.d.ts +6 -6
- package/es/components/Select/RefSelect.vue.d.ts +59 -1017
- package/es/components/Select/Select.d.ts +4 -4
- package/es/components/Select/Select.type.d.ts +1 -1
- package/es/components/Select/Select.type.mjs +1 -1
- package/es/components/Select/Select.type.mjs.map +1 -1
- package/es/components/Select/Selection/Multiple.vue.d.ts +2 -2
- package/es/components/Select/Selection/Multiple.vue_vue_type_script_lang.mjs +1 -1
- package/es/components/Select/Selection/Multiple.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/Select/Selection/MultipleBase.d.ts +253 -0
- package/es/components/Select/Selection/MultipleBase.mjs +317 -0
- package/es/components/Select/Selection/MultipleBase.mjs.map +1 -0
- package/es/components/Select/Selection/MultipleOverFlow.mjs +202 -0
- package/es/components/Select/Selection/MultipleOverFlow.mjs.map +1 -0
- package/es/components/Select/Selection/MultipleOverFlow.vue.d.ts +1191 -0
- package/es/components/Select/Selection/MultipleOverFlow.vue_vue_type_script_lang.mjs +265 -0
- package/es/components/Select/Selection/MultipleOverFlow.vue_vue_type_script_lang.mjs.map +1 -0
- package/es/components/Select/Selection/Selection.mjs +90 -67
- package/es/components/Select/Selection/Selection.mjs.map +1 -1
- package/es/components/Select/Selection/Selection.vue.d.ts +57 -1015
- package/es/components/Select/hooks/useMultipleBase.d.ts +32 -0
- package/es/components/Select/hooks/useMultipleBase.mjs +211 -0
- package/es/components/Select/hooks/useMultipleBase.mjs.map +1 -0
- package/es/components/Select/index.d.ts +3 -3
- package/es/components/TreeSelect/TreeSelect.vue.d.ts +57 -1015
- package/es/components/TreeSelect/index.d.ts +1065 -2981
- package/lib/components/Calendar/Calendar.vue.d.ts +3 -3
- package/lib/components/Calendar/Header.vue.d.ts +3 -3
- package/lib/components/Calendar/index.d.ts +6 -6
- package/lib/components/Cascader/Cascader.d.ts +1 -1
- package/lib/components/DatePicker/DatePicker.vue.d.ts +3 -3
- package/lib/components/DatePicker/Panel/DatePickerPanel.vue.d.ts +3 -3
- package/lib/components/DatePicker/index.d.ts +6 -6
- package/lib/components/Select/RefSelect.vue.d.ts +59 -1017
- package/lib/components/Select/Select.d.ts +4 -4
- package/lib/components/Select/Select.type.d.ts +1 -1
- package/lib/components/Select/Select.type.js +1 -1
- package/lib/components/Select/Select.type.js.map +1 -1
- package/lib/components/Select/Selection/Multiple.vue.d.ts +2 -2
- package/lib/components/Select/Selection/Multiple.vue_vue_type_script_lang.js +1 -1
- package/lib/components/Select/Selection/Multiple.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/Select/Selection/MultipleBase.d.ts +253 -0
- package/lib/components/Select/Selection/MultipleBase.js +326 -0
- package/lib/components/Select/Selection/MultipleBase.js.map +1 -0
- package/lib/components/Select/Selection/MultipleOverFlow.js +206 -0
- package/lib/components/Select/Selection/MultipleOverFlow.js.map +1 -0
- package/lib/components/Select/Selection/MultipleOverFlow.vue.d.ts +1191 -0
- package/lib/components/Select/Selection/MultipleOverFlow.vue_vue_type_script_lang.js +269 -0
- package/lib/components/Select/Selection/MultipleOverFlow.vue_vue_type_script_lang.js.map +1 -0
- package/lib/components/Select/Selection/Selection.js +89 -66
- package/lib/components/Select/Selection/Selection.js.map +1 -1
- package/lib/components/Select/Selection/Selection.vue.d.ts +57 -1015
- package/lib/components/Select/hooks/useMultipleBase.d.ts +32 -0
- package/lib/components/Select/hooks/useMultipleBase.js +216 -0
- package/lib/components/Select/hooks/useMultipleBase.js.map +1 -0
- package/lib/components/Select/index.d.ts +3 -3
- package/lib/components/TreeSelect/TreeSelect.vue.d.ts +57 -1015
- package/lib/components/TreeSelect/index.d.ts +1065 -2981
- package/package.json +1 -1
- package/styles/components/cascader/index.css +1 -1
- package/styles/components/form/index.css +1 -1
- package/styles/components/form/index.less +12 -1
- package/styles/components/form/var.less +1 -1
- package/styles/components/select/index.css +1 -1
- package/styles/components/select/index.less +10 -0
- package/styles/index.css +1 -1
- package/types/components/Calendar/Calendar.vue.d.ts +3 -3
- package/types/components/Calendar/Header.vue.d.ts +3 -3
- package/types/components/Calendar/index.d.ts +6 -6
- package/types/components/Cascader/Cascader.d.ts +1 -1
- package/types/components/DatePicker/DatePicker.vue.d.ts +3 -3
- package/types/components/DatePicker/Panel/DatePickerPanel.vue.d.ts +3 -3
- package/types/components/DatePicker/index.d.ts +6 -6
- package/types/components/Select/RefSelect.vue.d.ts +59 -1017
- package/types/components/Select/Select.d.ts +4 -4
- package/types/components/Select/Select.type.d.ts +1 -1
- package/types/components/Select/Selection/Multiple.vue.d.ts +2 -2
- package/types/components/Select/Selection/MultipleBase.d.ts +253 -0
- package/types/components/Select/Selection/MultipleOverFlow.vue.d.ts +1191 -0
- package/types/components/Select/Selection/Selection.vue.d.ts +57 -1015
- package/types/components/Select/hooks/useMultipleBase.d.ts +32 -0
- package/types/components/Select/index.d.ts +3 -3
- package/types/components/TreeSelect/TreeSelect.vue.d.ts +57 -1015
- package/types/components/TreeSelect/index.d.ts +1065 -2981
- package/uxd-ui.css +1 -1
- package/uxd-ui.esm.min.mjs +7 -7
- package/uxd-ui.esm.mjs +722 -535
- package/uxd-ui.umd.js +722 -535
- package/uxd-ui.umd.min.js +7 -7
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { DisplayOption, SingleValueType } from '../Select.type';
|
|
2
|
+
export declare const REST_TAG_KEY = "__UUI_SELECT_MAX_REST_COUNT__";
|
|
3
|
+
export default function useMultipleBase(props: any, emit: any): {
|
|
4
|
+
motionAppear: import("vue").Ref<boolean, boolean>;
|
|
5
|
+
measureRef: import("vue").Ref<any, any>;
|
|
6
|
+
inputWidth: import("vue").Ref<number, number>;
|
|
7
|
+
inputValue: import("vue").ComputedRef<any>;
|
|
8
|
+
inputEditable: import("vue").ComputedRef<any>;
|
|
9
|
+
showPlaceholder: import("vue").ComputedRef<boolean>;
|
|
10
|
+
isNotRender: import("vue").ComputedRef<boolean>;
|
|
11
|
+
displayValues: import("vue").ComputedRef<any>;
|
|
12
|
+
displayRest: import("vue").ComputedRef<boolean>;
|
|
13
|
+
mergedDisplayCount: import("vue").ComputedRef<number>;
|
|
14
|
+
closable: (item: DisplayOption) => boolean;
|
|
15
|
+
onClose: (value: SingleValueType, e: any) => void;
|
|
16
|
+
onOverflowItemResize: ({ width }: {
|
|
17
|
+
width: number;
|
|
18
|
+
}, item: DisplayOption) => void;
|
|
19
|
+
onSuffixResize: ({ width }: {
|
|
20
|
+
width: number;
|
|
21
|
+
}) => void;
|
|
22
|
+
onInputMouseDown: () => void;
|
|
23
|
+
onInputChange: (val: any) => void;
|
|
24
|
+
onInputKeydown: (e: KeyboardEvent) => void;
|
|
25
|
+
onInputCompositionStart: (e: CompositionEvent) => void;
|
|
26
|
+
onInputCompositionEnd: (e: CompositionEvent) => void;
|
|
27
|
+
onInputPaste: (e: ClipboardEvent) => void;
|
|
28
|
+
REST_TAG_KEY: string;
|
|
29
|
+
getRender: (children: import("vue").VNode | import("vue").VNodeChild | string | number) => () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
30
|
+
[key: string]: any;
|
|
31
|
+
}>;
|
|
32
|
+
};
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var vue = require('vue');
|
|
6
|
+
var slots = require('../../../utils/slots.js');
|
|
7
|
+
|
|
8
|
+
const REST_TAG_KEY = "__UUI_SELECT_MAX_REST_COUNT__";
|
|
9
|
+
function useMultipleBase(props, emit) {
|
|
10
|
+
const motionAppear = vue.ref(false);
|
|
11
|
+
const measureRef = vue.ref();
|
|
12
|
+
const inputWidth = vue.ref(0);
|
|
13
|
+
const mergedContainerWidth = vue.computed(() => props.containerWrapperWidth || 0);
|
|
14
|
+
const itemWidths = vue.shallowRef(/* @__PURE__ */ new Map());
|
|
15
|
+
const suffixWidth = vue.shallowRef(0);
|
|
16
|
+
const prevRestWidth = vue.shallowRef(0);
|
|
17
|
+
const restWidth = vue.shallowRef(0);
|
|
18
|
+
const displayCount = vue.shallowRef(null);
|
|
19
|
+
const restReady = vue.shallowRef(false);
|
|
20
|
+
const inputValue = vue.computed(() => {
|
|
21
|
+
return props.searchValue;
|
|
22
|
+
});
|
|
23
|
+
const inputEditable = vue.computed(() => {
|
|
24
|
+
return props.filterable && props.open;
|
|
25
|
+
});
|
|
26
|
+
const showPlaceholder = vue.computed(() => {
|
|
27
|
+
return !props.values.length && !inputValue.value;
|
|
28
|
+
});
|
|
29
|
+
const isNotRender = vue.computed(() => {
|
|
30
|
+
return !props.tagRender;
|
|
31
|
+
});
|
|
32
|
+
const mergedDisplayCount = vue.computed(() => {
|
|
33
|
+
if (displayCount.value === null) {
|
|
34
|
+
return Number.MAX_SAFE_INTEGER;
|
|
35
|
+
}
|
|
36
|
+
return displayCount.value || 0;
|
|
37
|
+
});
|
|
38
|
+
const mergedRestWidth = vue.computed(() => Math.max(prevRestWidth.value, restWidth.value));
|
|
39
|
+
const omittedItems = vue.computed(() => {
|
|
40
|
+
return props.values.slice(mergedDisplayCount.value + 1);
|
|
41
|
+
});
|
|
42
|
+
const displayRest = vue.computed(() => restReady.value && !!omittedItems.value.length);
|
|
43
|
+
const baseDisplayValues = vue.computed(() => {
|
|
44
|
+
const { values, maxTagCount, maxTagTextLength, maxTagPlaceholder } = props;
|
|
45
|
+
let restCount = 0;
|
|
46
|
+
let _display = values;
|
|
47
|
+
if (typeof maxTagCount === "number") {
|
|
48
|
+
restCount = values.length - maxTagCount;
|
|
49
|
+
_display = values.slice(0, maxTagCount);
|
|
50
|
+
}
|
|
51
|
+
if (typeof maxTagTextLength === "number") {
|
|
52
|
+
_display = _display.map(({ displayLabel, ...rest }) => {
|
|
53
|
+
let _label = displayLabel;
|
|
54
|
+
if (typeof displayLabel === "string" || typeof displayLabel === "number") {
|
|
55
|
+
const strLabel = String(_label);
|
|
56
|
+
if (strLabel.length > maxTagTextLength) {
|
|
57
|
+
_label = `${strLabel.slice(0, maxTagTextLength)}...`;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return {
|
|
61
|
+
...rest,
|
|
62
|
+
displayLabel: _label
|
|
63
|
+
};
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
if (restCount > 0) {
|
|
67
|
+
const rest = values.slice(maxTagCount);
|
|
68
|
+
_display.push({
|
|
69
|
+
key: REST_TAG_KEY,
|
|
70
|
+
value: REST_TAG_KEY,
|
|
71
|
+
displayLabel: maxTagPlaceholder(rest)
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
return _display;
|
|
75
|
+
});
|
|
76
|
+
const overflowDisplayValues = vue.computed(() => {
|
|
77
|
+
const { maxTagPlaceholder } = props;
|
|
78
|
+
let items = [];
|
|
79
|
+
if (props.containerWrapperWidth === null) {
|
|
80
|
+
items = props.values;
|
|
81
|
+
} else {
|
|
82
|
+
items = props.values.slice(0, Math.min(props.values.length, props.containerWrapperWidth / props.itemWidth));
|
|
83
|
+
}
|
|
84
|
+
items = [
|
|
85
|
+
...items,
|
|
86
|
+
{
|
|
87
|
+
key: REST_TAG_KEY,
|
|
88
|
+
value: REST_TAG_KEY,
|
|
89
|
+
displayLabel: maxTagPlaceholder(omittedItems.value)
|
|
90
|
+
}
|
|
91
|
+
];
|
|
92
|
+
return items;
|
|
93
|
+
});
|
|
94
|
+
const displayValues = vue.computed(() => {
|
|
95
|
+
return props.enableOverflow ? overflowDisplayValues.value : baseDisplayValues.value;
|
|
96
|
+
});
|
|
97
|
+
const closable = (item) => {
|
|
98
|
+
return item.key !== REST_TAG_KEY && !item.disabled;
|
|
99
|
+
};
|
|
100
|
+
const onClose = (value, e) => {
|
|
101
|
+
if (e && e.stopPropagation) {
|
|
102
|
+
e.stopPropagation();
|
|
103
|
+
}
|
|
104
|
+
emit("select", value, { selected: false });
|
|
105
|
+
};
|
|
106
|
+
const getItemWidth = (index) => {
|
|
107
|
+
return itemWidths.value.get(displayValues.value[index].value || displayValues.value[index].key);
|
|
108
|
+
};
|
|
109
|
+
const updateDisplayCount = (count, notReady) => {
|
|
110
|
+
displayCount.value = count;
|
|
111
|
+
if (!notReady) {
|
|
112
|
+
restReady.value = count < props.values.length - 1;
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
const onOverflowItemResize = ({ width }, item) => {
|
|
116
|
+
const clone = new Map(itemWidths.value);
|
|
117
|
+
const key = item.value || item.key;
|
|
118
|
+
if (key === REST_TAG_KEY) {
|
|
119
|
+
prevRestWidth.value = restWidth.value;
|
|
120
|
+
restWidth.value = width;
|
|
121
|
+
}
|
|
122
|
+
if (width === null) {
|
|
123
|
+
clone.delete(key);
|
|
124
|
+
} else {
|
|
125
|
+
clone.set(key, width);
|
|
126
|
+
}
|
|
127
|
+
itemWidths.value = clone;
|
|
128
|
+
};
|
|
129
|
+
const onSuffixResize = ({ width }) => {
|
|
130
|
+
suffixWidth.value = width;
|
|
131
|
+
};
|
|
132
|
+
const onInputMouseDown = () => {
|
|
133
|
+
emit("input-mousedown");
|
|
134
|
+
};
|
|
135
|
+
const onInputChange = (val) => {
|
|
136
|
+
emit("input-change", val);
|
|
137
|
+
};
|
|
138
|
+
const onInputKeydown = (e) => {
|
|
139
|
+
emit("input-keydown", e);
|
|
140
|
+
};
|
|
141
|
+
const onInputCompositionStart = (e) => {
|
|
142
|
+
emit("input-compositionstart", e);
|
|
143
|
+
};
|
|
144
|
+
const onInputCompositionEnd = (e) => {
|
|
145
|
+
emit("input-compositionend", e);
|
|
146
|
+
};
|
|
147
|
+
const onInputPaste = (e) => {
|
|
148
|
+
emit("input-paste", e);
|
|
149
|
+
};
|
|
150
|
+
vue.onMounted(() => {
|
|
151
|
+
motionAppear.value = true;
|
|
152
|
+
vue.watch(
|
|
153
|
+
inputValue,
|
|
154
|
+
() => {
|
|
155
|
+
inputWidth.value = measureRef.value.scrollWidth;
|
|
156
|
+
},
|
|
157
|
+
{ flush: "post" }
|
|
158
|
+
);
|
|
159
|
+
});
|
|
160
|
+
vue.watch([mergedContainerWidth, itemWidths, restWidth, suffixWidth, displayValues], () => {
|
|
161
|
+
if (!props.enableOverflow)
|
|
162
|
+
return;
|
|
163
|
+
if (mergedContainerWidth.value && mergedRestWidth.value && displayValues.value) {
|
|
164
|
+
let totalWidth = suffixWidth.value;
|
|
165
|
+
const len = displayValues.value.filter((item) => item.key !== REST_TAG_KEY).length;
|
|
166
|
+
const lastIndex = len - 1;
|
|
167
|
+
if (!len) {
|
|
168
|
+
updateDisplayCount(0);
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
for (let i = 0; i < len; i += 1) {
|
|
172
|
+
const currentItemWidth = getItemWidth(i);
|
|
173
|
+
if (currentItemWidth === void 0) {
|
|
174
|
+
updateDisplayCount(i - 1, true);
|
|
175
|
+
break;
|
|
176
|
+
}
|
|
177
|
+
totalWidth += currentItemWidth;
|
|
178
|
+
if (lastIndex === 0 && totalWidth <= mergedContainerWidth.value || i === lastIndex - 1 && totalWidth + getItemWidth(lastIndex) <= mergedContainerWidth.value) {
|
|
179
|
+
updateDisplayCount(lastIndex);
|
|
180
|
+
break;
|
|
181
|
+
} else if (totalWidth + mergedRestWidth.value > mergedContainerWidth.value) {
|
|
182
|
+
updateDisplayCount(i - 1);
|
|
183
|
+
break;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
});
|
|
188
|
+
return {
|
|
189
|
+
motionAppear,
|
|
190
|
+
measureRef,
|
|
191
|
+
inputWidth,
|
|
192
|
+
inputValue,
|
|
193
|
+
inputEditable,
|
|
194
|
+
showPlaceholder,
|
|
195
|
+
isNotRender,
|
|
196
|
+
displayValues,
|
|
197
|
+
displayRest,
|
|
198
|
+
mergedDisplayCount,
|
|
199
|
+
closable,
|
|
200
|
+
onClose,
|
|
201
|
+
onOverflowItemResize,
|
|
202
|
+
onSuffixResize,
|
|
203
|
+
onInputMouseDown,
|
|
204
|
+
onInputChange,
|
|
205
|
+
onInputKeydown,
|
|
206
|
+
onInputCompositionStart,
|
|
207
|
+
onInputCompositionEnd,
|
|
208
|
+
onInputPaste,
|
|
209
|
+
REST_TAG_KEY,
|
|
210
|
+
getRender: slots.getRender
|
|
211
|
+
};
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
exports.REST_TAG_KEY = REST_TAG_KEY;
|
|
215
|
+
exports["default"] = useMultipleBase;
|
|
216
|
+
//# sourceMappingURL=useMultipleBase.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMultipleBase.js","sources":["../../../../../src/components/Select/hooks/useMultipleBase.ts"],"sourcesContent":["import { ref, computed, shallowRef, onMounted, watch } from 'vue';\nimport type { DisplayOption, SingleValueType } from '../Select.type';\nimport { getRender } from '../../../utils/slots';\n\nexport const REST_TAG_KEY = '__UUI_SELECT_MAX_REST_COUNT__';\n\nexport default function useMultipleBase(props: any, emit: any) {\n type Key = string | number;\n\n const motionAppear = ref(false);\n const measureRef = ref();\n const inputWidth = ref(0);\n\n const mergedContainerWidth = computed(() => props.containerWrapperWidth || 0);\n const itemWidths = shallowRef<Map<Key, number>>(new Map<Key, number>());\n const suffixWidth = shallowRef(0);\n const prevRestWidth = shallowRef(0);\n const restWidth = shallowRef(0);\n const displayCount = shallowRef<number>(null);\n const restReady = shallowRef(false);\n\n const inputValue = computed(() => {\n return props.searchValue;\n });\n\n const inputEditable = computed(() => {\n return props.filterable && props.open;\n });\n\n const showPlaceholder = computed(() => {\n return !props.values.length && !inputValue.value;\n });\n\n const isNotRender = computed(() => {\n return !props.tagRender;\n });\n\n const mergedDisplayCount = computed(() => {\n if (displayCount.value === null) {\n return Number.MAX_SAFE_INTEGER;\n }\n return displayCount.value || 0;\n });\n\n const mergedRestWidth = computed(() => Math.max(prevRestWidth.value, restWidth.value));\n\n const omittedItems = computed(() => {\n return props.values.slice(mergedDisplayCount.value + 1);\n });\n\n const displayRest = computed(() => restReady.value && !!omittedItems.value.length);\n\n const baseDisplayValues = computed(() => {\n const { values, maxTagCount, maxTagTextLength, maxTagPlaceholder } = props;\n let restCount = 0;\n let _display = values;\n\n if (typeof maxTagCount === 'number') {\n restCount = values.length - maxTagCount;\n _display = values.slice(0, maxTagCount);\n }\n\n if (typeof maxTagTextLength === 'number') {\n _display = _display.map(({ displayLabel, ...rest }: { displayLabel: string; [key: string]: any }) => {\n let _label = displayLabel;\n if (typeof displayLabel === 'string' || typeof displayLabel === 'number') {\n const strLabel = String(_label);\n if (strLabel.length > maxTagTextLength) {\n _label = `${strLabel.slice(0, maxTagTextLength)}...`;\n }\n }\n return {\n ...rest,\n displayLabel: _label\n };\n });\n }\n\n if (restCount > 0) {\n const rest = values.slice(maxTagCount);\n _display.push({\n key: REST_TAG_KEY,\n value: REST_TAG_KEY,\n displayLabel: maxTagPlaceholder(rest)\n });\n }\n return _display;\n });\n\n const overflowDisplayValues = computed(() => {\n const { maxTagPlaceholder } = props;\n let items = [];\n\n if (props.containerWrapperWidth === null) {\n items = props.values;\n } else {\n items = props.values.slice(0, Math.min(props.values.length, props.containerWrapperWidth / props.itemWidth));\n }\n\n items = [\n ...items,\n {\n key: REST_TAG_KEY,\n value: REST_TAG_KEY,\n displayLabel: maxTagPlaceholder(omittedItems.value)\n }\n ];\n\n return items as DisplayOption[];\n });\n\n const displayValues = computed(() => {\n return props.enableOverflow ? overflowDisplayValues.value : baseDisplayValues.value;\n });\n\n const closable = (item: DisplayOption) => {\n return item.key !== REST_TAG_KEY && !item.disabled;\n };\n\n const onClose = (value: SingleValueType, e: any) => {\n if (e && e.stopPropagation) {\n e.stopPropagation();\n }\n emit('select', value, { selected: false });\n };\n\n const getItemWidth = (index: number) => {\n return itemWidths.value.get(displayValues.value[index].value || displayValues.value[index].key);\n };\n\n const updateDisplayCount = (count: number, notReady?: boolean) => {\n displayCount.value = count;\n if (!notReady) {\n restReady.value = count < props.values.length - 1;\n }\n };\n\n const onOverflowItemResize = ({ width }: { width: number }, item: DisplayOption) => {\n const clone = new Map(itemWidths.value);\n const key = item.value || item.key;\n\n if (key === REST_TAG_KEY) {\n prevRestWidth.value = restWidth.value;\n restWidth.value = width!;\n }\n\n if (width === null) {\n clone.delete(key);\n } else {\n clone.set(key, width);\n }\n itemWidths.value = clone;\n };\n\n const onSuffixResize = ({ width }: { width: number }) => {\n suffixWidth.value = width;\n };\n\n const onInputMouseDown = () => {\n emit('input-mousedown');\n };\n\n const onInputChange = (val: any) => {\n emit('input-change', val);\n };\n\n const onInputKeydown = (e: KeyboardEvent) => {\n emit('input-keydown', e);\n };\n\n const onInputCompositionStart = (e: CompositionEvent) => {\n emit('input-compositionstart', e);\n };\n\n const onInputCompositionEnd = (e: CompositionEvent) => {\n emit('input-compositionend', e);\n };\n\n const onInputPaste = (e: ClipboardEvent) => {\n emit('input-paste', e);\n };\n\n onMounted(() => {\n motionAppear.value = true;\n watch(\n inputValue,\n () => {\n inputWidth.value = measureRef.value.scrollWidth;\n },\n { flush: 'post' }\n );\n });\n\n watch([mergedContainerWidth, itemWidths, restWidth, suffixWidth, displayValues], () => {\n if (!props.enableOverflow) return;\n\n if (mergedContainerWidth.value && mergedRestWidth.value && displayValues.value) {\n let totalWidth = suffixWidth.value;\n const len = displayValues.value.filter((item: DisplayOption) => item.key !== REST_TAG_KEY).length;\n const lastIndex = len - 1;\n\n if (!len) {\n updateDisplayCount(0);\n return;\n }\n\n for (let i = 0; i < len; i += 1) {\n const currentItemWidth = getItemWidth(i);\n\n if (currentItemWidth === undefined) {\n updateDisplayCount(i - 1, true);\n break;\n }\n\n totalWidth += currentItemWidth;\n\n if (\n (lastIndex === 0 && totalWidth <= mergedContainerWidth.value) ||\n (i === lastIndex - 1 && totalWidth + getItemWidth(lastIndex)! <= mergedContainerWidth.value)\n ) {\n updateDisplayCount(lastIndex);\n break;\n } else if (totalWidth + mergedRestWidth.value > mergedContainerWidth.value) {\n updateDisplayCount(i - 1);\n break;\n }\n }\n }\n });\n\n return {\n motionAppear,\n measureRef,\n inputWidth,\n inputValue,\n inputEditable,\n showPlaceholder,\n isNotRender,\n displayValues,\n displayRest,\n mergedDisplayCount,\n\n closable,\n onClose,\n onOverflowItemResize,\n onSuffixResize,\n onInputMouseDown,\n onInputChange,\n onInputKeydown,\n onInputCompositionStart,\n onInputCompositionEnd,\n onInputPaste,\n\n REST_TAG_KEY,\n getRender\n };\n}\n"],"names":["ref","computed","shallowRef","getRender"],"mappings":"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"}
|
|
@@ -68,7 +68,7 @@ export declare const USelect: {
|
|
|
68
68
|
type: import("vue").PropType<(rest: import("./Select.type").DisplayOption[]) => string | import("vue").VNodeChild | import("vue/jsx-runtime").JSX.Element>;
|
|
69
69
|
};
|
|
70
70
|
maxTagTextLength: {
|
|
71
|
-
type:
|
|
71
|
+
type: import("vue").PropType<number | "responsive">;
|
|
72
72
|
};
|
|
73
73
|
tagRender: {
|
|
74
74
|
type: import("vue").PropType<import("./Select.type").TagRenderFunction>;
|
|
@@ -345,7 +345,7 @@ export declare const USelect: {
|
|
|
345
345
|
type: import("vue").PropType<(rest: import("./Select.type").DisplayOption[]) => string | import("vue").VNodeChild | import("vue/jsx-runtime").JSX.Element>;
|
|
346
346
|
};
|
|
347
347
|
maxTagTextLength: {
|
|
348
|
-
type:
|
|
348
|
+
type: import("vue").PropType<number | "responsive">;
|
|
349
349
|
};
|
|
350
350
|
tagRender: {
|
|
351
351
|
type: import("vue").PropType<import("./Select.type").TagRenderFunction>;
|
|
@@ -605,7 +605,7 @@ export declare const USelect: {
|
|
|
605
605
|
type: import("vue").PropType<(rest: import("./Select.type").DisplayOption[]) => string | import("vue").VNodeChild | import("vue/jsx-runtime").JSX.Element>;
|
|
606
606
|
};
|
|
607
607
|
maxTagTextLength: {
|
|
608
|
-
type:
|
|
608
|
+
type: import("vue").PropType<number | "responsive">;
|
|
609
609
|
};
|
|
610
610
|
tagRender: {
|
|
611
611
|
type: import("vue").PropType<import("./Select.type").TagRenderFunction>;
|