@sdata/web-vue 4.2.0 → 4.3.1
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/dist/sd.css +17 -117
- package/dist/sd.min.css +2 -2
- package/es/_components/auto-tooltip/auto-tooltip.vue_vue_type_script_setup_true_lang.js +17 -50
- package/es/_components/input-label/input-label.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/_components/picker/input-range.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/_components/picker/input.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/_components/select-view/style/index.css +0 -39
- package/es/anchor/anchor.vue.d.ts +1 -1
- package/es/anchor/index.d.ts +3 -3
- package/es/auto-complete/auto-complete.vue.d.ts +6 -22
- package/es/auto-complete/auto-complete.vue_vue_type_script_setup_true_lang.js +6 -6
- package/es/auto-complete/index.d.ts +1 -17
- package/es/avatar/avatar.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/button/button.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/cascader/cascader-option.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/cascader/cascader-panel.vue.d.ts +1 -1
- package/es/cascader/cascader.vue.d.ts +1 -1
- package/es/cascader/cascader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/clamp/index.d.ts +212 -0
- package/es/clamp/index.js +15 -0
- package/es/clamp/style/css.js +1 -0
- package/es/clamp/style/index.css +0 -0
- package/es/clamp/style/index.d.ts +1 -0
- package/es/clamp/style/index.js +1 -0
- package/es/clamp/style/index.scss +1 -0
- package/es/clamp/style/token.scss +1 -0
- package/es/color-picker/color-picker.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/components.d.ts +4 -0
- package/es/date-picker/picker.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/date-picker/range-picker.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/drawer/drawer.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/ellipsis/ellipsis.vue.d.ts +8 -15
- package/es/ellipsis/ellipsis.vue_vue_type_script_setup_true_lang.js +113 -118
- package/es/ellipsis/index.d.ts +14 -16
- package/es/ellipsis/performant-ellipsis.vue.d.ts +3 -5
- package/es/ellipsis/performant-ellipsis.vue_vue_type_script_setup_true_lang.js +12 -24
- package/es/ellipsis/style/index.css +0 -2
- package/es/ellipsis/style/index.scss +3 -2
- package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/image/image.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/image/preview.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/index.css +17 -117
- package/es/index.d.ts +2 -0
- package/es/index.js +4 -3
- package/es/index.scss +1 -0
- package/es/input/input.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/input-tag/index.d.ts +0 -4
- package/es/input-tag/input-tag.vue.d.ts +3 -7
- package/es/input-tag/input-tag.vue_vue_type_script_setup_true_lang.js +85 -157
- package/es/input-tag/style/index.css +6 -39
- package/es/input-tag/style/index.scss +7 -0
- package/es/input-tag/style/input-tag.scss +0 -45
- package/es/link/link.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/list/index.d.ts +3 -3
- package/es/list/list.vue.d.ts +1 -1
- package/es/menu/base-menu.vue_vue_type_script_setup_true_lang.js +3 -3
- package/es/menu/overflow-wrap.vue_vue_type_script_setup_true_lang.js +21 -27
- package/es/menu/style/index.css +5 -2
- package/es/menu/style/index.scss +5 -2
- package/es/modal/index.js +1 -1
- package/es/modal/modal.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/popover/style/index.css +0 -1
- package/es/popover/style/index.scss +0 -1
- package/es/rate/rate.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/sd-vue.js +7 -2
- package/es/secret/secret.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/select/select.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/sender/sender.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/table/index.d.ts +8 -8
- package/es/table/table-tr.vue.d.ts +1 -1
- package/es/table/table.vue.d.ts +2 -2
- package/es/tag/tag.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tag-group/index.d.ts +4 -6
- package/es/tag-group/style/index.css +6 -29
- package/es/tag-group/style/index.scss +9 -34
- package/es/tag-group/tag-group.vue.d.ts +8 -11
- package/es/tag-group/tag-group.vue_vue_type_script_setup_true_lang.js +91 -272
- package/es/textarea/textarea.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/time-picker/time-picker.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tree/node-switcher.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tree/tree.vue.d.ts +12 -12
- package/es/tree/tree.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/tree-select/tree-select.vue_vue_type_script_setup_true_lang.js +2 -2
- package/es/trigger/trigger.vue_vue_type_script_setup_true_lang.js +3 -3
- package/es/typography/base.vue.d.ts +15 -15
- package/es/typography/base.vue_vue_type_script_setup_true_lang.js +93 -164
- package/es/typography/interface.d.ts +1 -2
- package/es/typography/style/index.css +0 -5
- package/es/typography/style/index.scss +0 -7
- package/json/vetur-attributes.json +0 -20
- package/json/vetur-tags.json +2 -10
- package/json/web-types.json +3 -53
- package/package.json +2 -1
- package/es/typography/utils/measure.d.ts +0 -6
- package/es/typography/utils/measure.js +0 -69
|
@@ -6,16 +6,16 @@ import resize_observer_default from "../_components/resize-observer.js";
|
|
|
6
6
|
import icon_hover_default from "../_components/icon-hover.js";
|
|
7
7
|
import IconClose from "../icon/icon-close/index.js";
|
|
8
8
|
import { useAllowClear } from "../_hooks/use-allow-clear.js";
|
|
9
|
+
import { WrapClamp } from "../clamp/index.js";
|
|
10
|
+
import { omit } from "../_utils/omit.js";
|
|
11
|
+
import Tooltip from "../tooltip/index.js";
|
|
9
12
|
import feedback_icon_default from "../_components/feedback-icon.js";
|
|
10
13
|
import { useFitWidth } from "../_hooks/use-fit-width.js";
|
|
11
14
|
import { isReadonlyModificationKey, useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
|
|
12
15
|
import { useSize } from "../_hooks/use-size.js";
|
|
13
16
|
import { INPUT_EVENTS } from "../_utils/constant.js";
|
|
14
17
|
import { Backspace, Enter } from "../_utils/keycode.js";
|
|
15
|
-
import { omit } from "../_utils/omit.js";
|
|
16
18
|
import pick from "../_utils/pick.js";
|
|
17
|
-
import Tooltip from "../tooltip/index.js";
|
|
18
|
-
import Ellipsis from "../ellipsis/index.js";
|
|
19
19
|
import Tag from "../tag/index.js";
|
|
20
20
|
import { getValueData } from "./utils.js";
|
|
21
21
|
import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onMounted, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, toRef, toRefs, unref, useAttrs, useSlots, watch, withCtx, withModifiers } from "vue";
|
|
@@ -26,6 +26,11 @@ var _hoisted_1 = [
|
|
|
26
26
|
"disabled",
|
|
27
27
|
"readonly"
|
|
28
28
|
];
|
|
29
|
+
var _hoisted_2 = [
|
|
30
|
+
"placeholder",
|
|
31
|
+
"disabled",
|
|
32
|
+
"readonly"
|
|
33
|
+
];
|
|
29
34
|
var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
|
|
30
35
|
name: "InputTag",
|
|
31
36
|
inheritAttrs: false
|
|
@@ -119,7 +124,6 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
119
124
|
const wrapperRef = ref();
|
|
120
125
|
const inputRef = ref();
|
|
121
126
|
const mirrorRef = ref();
|
|
122
|
-
const measureRef = ref();
|
|
123
127
|
const { mergedSize: formSize, mergedDisabled, mergedError, feedback, eventHandlers } = useFormItem({
|
|
124
128
|
size,
|
|
125
129
|
disabled,
|
|
@@ -137,8 +141,6 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
137
141
|
const isComposition = ref(false);
|
|
138
142
|
const compositionValue = ref("");
|
|
139
143
|
const inputStyle = reactive({ width: "12px" });
|
|
140
|
-
const responsiveVisibleTagCount = ref(null);
|
|
141
|
-
const responsiveTagMaxWidth = ref(0);
|
|
142
144
|
const [DefineTagContent, ReuseTagContent] = createReusableTemplate();
|
|
143
145
|
const retainInputValue = computed(() => isObject(props.retainInputValue) ? _objectSpread2({
|
|
144
146
|
create: false,
|
|
@@ -206,11 +208,6 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
206
208
|
}
|
|
207
209
|
};
|
|
208
210
|
const visibleTagCount = computed(() => {
|
|
209
|
-
if (isResponsiveMaxTagCount.value) {
|
|
210
|
-
var _responsiveVisibleTag;
|
|
211
|
-
if (!valueData.value.length) return 0;
|
|
212
|
-
return Math.min(valueData.value.length, Math.max(1, (_responsiveVisibleTag = responsiveVisibleTagCount.value) !== null && _responsiveVisibleTag !== void 0 ? _responsiveVisibleTag : valueData.value.length));
|
|
213
|
-
}
|
|
214
211
|
if (typeof props.maxTagCount === "number" && props.maxTagCount > 0) return Math.min(props.maxTagCount, valueData.value.length);
|
|
215
212
|
return valueData.value.length;
|
|
216
213
|
});
|
|
@@ -226,75 +223,11 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
226
223
|
};
|
|
227
224
|
return visibleTags.concat(_objectSpread2({ raw }, raw));
|
|
228
225
|
});
|
|
229
|
-
const getOuterWidth = (element) => {
|
|
230
|
-
if (!element) return 0;
|
|
231
|
-
const style = window.getComputedStyle(element);
|
|
232
|
-
return element.offsetWidth + (Number.parseFloat(style.marginLeft || "0") || 0) + (Number.parseFloat(style.marginRight || "0") || 0);
|
|
233
|
-
};
|
|
234
|
-
const getCounterWidth = (hiddenCount) => {
|
|
235
|
-
if (!measureRef.value || hiddenCount <= 0) return 0;
|
|
236
|
-
return getOuterWidth(measureRef.value.querySelector(`[data-hidden-count="${hiddenCount}"]`));
|
|
237
|
-
};
|
|
238
226
|
const isClosableTag = (item) => {
|
|
239
227
|
var _item$tagProps$closab, _item$tagProps;
|
|
240
228
|
return Boolean((_item$tagProps$closab = (_item$tagProps = item.tagProps) === null || _item$tagProps === void 0 ? void 0 : _item$tagProps.closable) !== null && _item$tagProps$closab !== void 0 ? _item$tagProps$closab : !mergedDisabled.value && !props.readonly && item.closable);
|
|
241
229
|
};
|
|
242
230
|
const getSlotData = (item) => item.raw;
|
|
243
|
-
const syncResponsiveTags = () => {
|
|
244
|
-
var _inputRef$value$offse, _inputRef$value;
|
|
245
|
-
if (!isResponsiveMaxTagCount.value) {
|
|
246
|
-
responsiveVisibleTagCount.value = null;
|
|
247
|
-
responsiveTagMaxWidth.value = 0;
|
|
248
|
-
return;
|
|
249
|
-
}
|
|
250
|
-
const totalTags = valueData.value.length;
|
|
251
|
-
if (totalTags <= 1) {
|
|
252
|
-
responsiveVisibleTagCount.value = totalTags;
|
|
253
|
-
responsiveTagMaxWidth.value = 0;
|
|
254
|
-
return;
|
|
255
|
-
}
|
|
256
|
-
const wrapperElement = wrapperRef.value;
|
|
257
|
-
const measureElement = measureRef.value;
|
|
258
|
-
const innerElement = wrapperElement === null || wrapperElement === void 0 ? void 0 : wrapperElement.querySelector(`.${prefixCls}-inner`);
|
|
259
|
-
if (!wrapperElement || !measureElement || !innerElement) {
|
|
260
|
-
responsiveVisibleTagCount.value = totalTags;
|
|
261
|
-
responsiveTagMaxWidth.value = 0;
|
|
262
|
-
return;
|
|
263
|
-
}
|
|
264
|
-
const inputWidth = ((_inputRef$value$offse = (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value.offsetWidth) !== null && _inputRef$value$offse !== void 0 ? _inputRef$value$offse : Number.parseFloat(inputStyle.width)) || 12;
|
|
265
|
-
const availableWidth = Math.max(innerElement.clientWidth - inputWidth, 0);
|
|
266
|
-
if (availableWidth <= 0) {
|
|
267
|
-
responsiveVisibleTagCount.value = 1;
|
|
268
|
-
responsiveTagMaxWidth.value = 0;
|
|
269
|
-
return;
|
|
270
|
-
}
|
|
271
|
-
const tagWidths = Array.from(measureElement.querySelectorAll(`.${prefixCls}-tag`)).slice(0, totalTags).map(getOuterWidth);
|
|
272
|
-
for (let candidate = totalTags; candidate >= 1; candidate -= 1) {
|
|
273
|
-
const hiddenCount = totalTags - candidate;
|
|
274
|
-
const counterWidth = getCounterWidth(hiddenCount);
|
|
275
|
-
const visibleWidth = tagWidths.slice(0, candidate).reduce((sum, width) => sum + width, 0);
|
|
276
|
-
if (hiddenCount === 0 && visibleWidth <= availableWidth) {
|
|
277
|
-
responsiveVisibleTagCount.value = candidate;
|
|
278
|
-
responsiveTagMaxWidth.value = 0;
|
|
279
|
-
return;
|
|
280
|
-
}
|
|
281
|
-
if (hiddenCount > 0 && candidate > 1 && visibleWidth + counterWidth <= availableWidth) {
|
|
282
|
-
responsiveVisibleTagCount.value = candidate;
|
|
283
|
-
responsiveTagMaxWidth.value = 0;
|
|
284
|
-
return;
|
|
285
|
-
}
|
|
286
|
-
if (hiddenCount > 0 && candidate === 1) {
|
|
287
|
-
const leadTagWidth = Math.max(availableWidth - counterWidth, 0);
|
|
288
|
-
if (leadTagWidth > 0) {
|
|
289
|
-
responsiveVisibleTagCount.value = 1;
|
|
290
|
-
responsiveTagMaxWidth.value = leadTagWidth;
|
|
291
|
-
return;
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
responsiveVisibleTagCount.value = 1;
|
|
296
|
-
responsiveTagMaxWidth.value = Math.max(availableWidth - getCounterWidth(totalTags - 1), 0);
|
|
297
|
-
};
|
|
298
231
|
const updateValue = (value, event) => {
|
|
299
232
|
var _eventHandlers$value, _eventHandlers$value$;
|
|
300
233
|
innerValue.value = value;
|
|
@@ -356,20 +289,13 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
356
289
|
};
|
|
357
290
|
const handleResize = () => {
|
|
358
291
|
if (mirrorRef.value) setInputWidth(mirrorRef.value.offsetWidth);
|
|
359
|
-
nextTick(syncResponsiveTags);
|
|
360
292
|
};
|
|
361
293
|
onMounted(() => {
|
|
362
294
|
if (mirrorRef.value) setInputWidth(mirrorRef.value.offsetWidth);
|
|
363
|
-
nextTick(syncResponsiveTags);
|
|
364
295
|
});
|
|
365
296
|
watch(computedInputValue, (value) => {
|
|
366
297
|
if (inputRef.value && !isComposition.value && value !== inputRef.value.value) inputRef.value.value = value;
|
|
367
298
|
});
|
|
368
|
-
watch([
|
|
369
|
-
valueData,
|
|
370
|
-
computedInputValue,
|
|
371
|
-
() => props.maxTagCount
|
|
372
|
-
], () => nextTick(syncResponsiveTags), { deep: true });
|
|
373
299
|
const cls = computed(() => [
|
|
374
300
|
prefixCls,
|
|
375
301
|
`${prefixCls}-size-${mergedSize.value}`,
|
|
@@ -394,10 +320,6 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
394
320
|
});
|
|
395
321
|
const inputEventAttrs = computed(() => pick(attrs, INPUT_EVENTS));
|
|
396
322
|
const mergedInputAttrs = computed(() => _objectSpread2(_objectSpread2({}, inputEventAttrs.value), props.inputAttrs));
|
|
397
|
-
const getTagStyle = (index) => {
|
|
398
|
-
var _tags$value$index;
|
|
399
|
-
return isCompressedResponsiveTag(index, (_tags$value$index = tags.value[index]) === null || _tags$value$index === void 0 ? void 0 : _tags$value$index.value) ? { maxWidth: `${responsiveTagMaxWidth.value}px` } : void 0;
|
|
400
|
-
};
|
|
401
323
|
const inputElementStyle = computed(() => {
|
|
402
324
|
const width = props.fitWidth ? fitWidthValue : inputStyle.width;
|
|
403
325
|
return isResponsiveMaxTagCount.value ? _objectSpread2(_objectSpread2({}, inputStyle), {}, {
|
|
@@ -406,16 +328,13 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
406
328
|
minWidth: width
|
|
407
329
|
}) : _objectSpread2(_objectSpread2({}, inputStyle), {}, { width });
|
|
408
330
|
});
|
|
409
|
-
function isCompressedResponsiveTag(index, value) {
|
|
410
|
-
return isResponsiveMaxTagCount.value && !isOverflowCounterTag(value) && hiddenTagCount.value > 0 && index === 0 && responsiveTagMaxWidth.value > 0;
|
|
411
|
-
}
|
|
412
331
|
const focus = () => {
|
|
413
|
-
var _inputRef$
|
|
414
|
-
return (_inputRef$
|
|
332
|
+
var _inputRef$value;
|
|
333
|
+
return (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value.focus();
|
|
415
334
|
};
|
|
416
335
|
const blur = () => {
|
|
417
|
-
var _inputRef$
|
|
418
|
-
return (_inputRef$
|
|
336
|
+
var _inputRef$value2;
|
|
337
|
+
return (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 ? void 0 : _inputRef$value2.blur();
|
|
419
338
|
};
|
|
420
339
|
__expose({
|
|
421
340
|
inputRef,
|
|
@@ -424,19 +343,10 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
424
343
|
});
|
|
425
344
|
return (_ctx, _cache) => {
|
|
426
345
|
return openBlock(), createElementBlock(Fragment, null, [createVNode(unref(DefineTagContent), null, {
|
|
427
|
-
default: withCtx(({ item, index, measure }) => [
|
|
346
|
+
default: withCtx(({ item, index, measure }) => [renderSlot(_ctx.$slots, "tag", { data: getSlotData(item) }, () => {
|
|
428
347
|
var _props$formatTag, _props$formatTag2;
|
|
429
348
|
return [createTextVNode(toDisplayString((_props$formatTag = (_props$formatTag2 = props.formatTag) === null || _props$formatTag2 === void 0 ? void 0 : _props$formatTag2.call(props, item.raw)) !== null && _props$formatTag !== void 0 ? _props$formatTag : item.label), 1)];
|
|
430
|
-
}
|
|
431
|
-
key: 1,
|
|
432
|
-
class: normalizeClass(`${unref(prefixCls)}-tag-ellipsis`)
|
|
433
|
-
}, {
|
|
434
|
-
default: withCtx(() => [renderSlot(_ctx.$slots, "tag", { data: getSlotData(item) }, () => {
|
|
435
|
-
var _props$formatTag3, _props$formatTag4;
|
|
436
|
-
return [createTextVNode(toDisplayString((_props$formatTag3 = (_props$formatTag4 = props.formatTag) === null || _props$formatTag4 === void 0 ? void 0 : _props$formatTag4.call(props, item.raw)) !== null && _props$formatTag3 !== void 0 ? _props$formatTag3 : item.label), 1)];
|
|
437
|
-
})]),
|
|
438
|
-
_: 2
|
|
439
|
-
}, 1032, ["class"]))]),
|
|
349
|
+
})]),
|
|
440
350
|
_: 3
|
|
441
351
|
}), createVNode(unref(Tooltip), {
|
|
442
352
|
"popup-visible": unref(tipVisible),
|
|
@@ -450,16 +360,6 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
450
360
|
class: cls.value,
|
|
451
361
|
onMousedown: handleMousedown
|
|
452
362
|
}), [
|
|
453
|
-
isResponsiveMaxTagCount.value && valueData.value.length > 0 ? (openBlock(), createBlock(resize_observer_default, {
|
|
454
|
-
key: 0,
|
|
455
|
-
onResize: handleResize
|
|
456
|
-
}, {
|
|
457
|
-
default: withCtx(() => [createElementVNode("span", {
|
|
458
|
-
class: normalizeClass(`${unref(prefixCls)}-resize-observer`),
|
|
459
|
-
"aria-hidden": "true"
|
|
460
|
-
}, null, 2)]),
|
|
461
|
-
_: 1
|
|
462
|
-
})) : createCommentVNode("", true),
|
|
463
363
|
createVNode(resize_observer_default, { onResize: handleResize }, {
|
|
464
364
|
default: withCtx(() => [createElementVNode("span", {
|
|
465
365
|
ref_key: "mirrorRef",
|
|
@@ -468,45 +368,76 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
468
368
|
}, toDisplayString(mirrorText.value), 3)]),
|
|
469
369
|
_: 1
|
|
470
370
|
}),
|
|
471
|
-
|
|
371
|
+
_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", {
|
|
372
|
+
key: 0,
|
|
373
|
+
class: normalizeClass(`${unref(prefixCls)}-prefix`)
|
|
374
|
+
}, [renderSlot(_ctx.$slots, "prefix")], 2)) : createCommentVNode("", true),
|
|
375
|
+
isResponsiveMaxTagCount.value ? (openBlock(), createBlock(unref(WrapClamp), {
|
|
472
376
|
key: 1,
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
377
|
+
items: valueData.value,
|
|
378
|
+
"item-key": (item) => item.value,
|
|
379
|
+
"max-lines": 1,
|
|
380
|
+
as: "span",
|
|
381
|
+
class: normalizeClass([`${unref(prefixCls)}-inner`, `${unref(prefixCls)}-inner-responsive`])
|
|
382
|
+
}, {
|
|
383
|
+
item: withCtx(({ item, index }) => [createVNode(TransitionGroup, {
|
|
384
|
+
tag: "span",
|
|
385
|
+
name: "input-tag-zoom",
|
|
386
|
+
class: normalizeClass(`${unref(prefixCls)}-item-holder`)
|
|
387
|
+
}, {
|
|
388
|
+
default: withCtx(() => [(openBlock(), createBlock(unref(Tag), mergeProps({
|
|
389
|
+
key: `tag-${item.value}`,
|
|
390
|
+
class: `${unref(prefixCls)}-tag`,
|
|
391
|
+
closable: isClosableTag(item),
|
|
392
|
+
visible: "",
|
|
393
|
+
nowrap: "",
|
|
394
|
+
ellipsis: !_ctx.$slots.tag
|
|
395
|
+
}, item.tagProps, { onClose: ($event) => handleRemove(item.value, index, $event) }), {
|
|
396
|
+
default: withCtx(() => [createVNode(unref(ReuseTagContent), {
|
|
397
|
+
item,
|
|
398
|
+
index,
|
|
399
|
+
measure: false
|
|
400
|
+
}, null, 8, ["item", "index"])]),
|
|
401
|
+
_: 2
|
|
402
|
+
}, 1040, [
|
|
403
|
+
"class",
|
|
404
|
+
"closable",
|
|
405
|
+
"ellipsis",
|
|
406
|
+
"onClose"
|
|
407
|
+
]))]),
|
|
490
408
|
_: 2
|
|
491
|
-
},
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
key: `measure-counter-${hiddenCount}`,
|
|
409
|
+
}, 1032, ["class"])]),
|
|
410
|
+
after: withCtx(({ hiddenItems }) => [hiddenItems.length ? (openBlock(), createBlock(unref(Tag), {
|
|
411
|
+
key: hiddenItems.length,
|
|
495
412
|
class: normalizeClass([`${unref(prefixCls)}-tag`, `${unref(prefixCls)}-tag-counter`]),
|
|
496
|
-
"data-overflow-counter": "true",
|
|
497
|
-
"data-hidden-count": hiddenCount,
|
|
498
413
|
visible: "",
|
|
499
|
-
nowrap: ""
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
414
|
+
nowrap: "",
|
|
415
|
+
ellipsis: false,
|
|
416
|
+
textContent: toDisplayString(`+${hiddenItems.length}`)
|
|
417
|
+
}, null, 8, ["class", "textContent"])) : createCommentVNode("", true), createElementVNode("input", mergeProps({
|
|
418
|
+
ref_key: "inputRef",
|
|
419
|
+
ref: inputRef
|
|
420
|
+
}, mergedInputAttrs.value, {
|
|
421
|
+
class: `${unref(prefixCls)}-input`,
|
|
422
|
+
style: inputElementStyle.value,
|
|
423
|
+
placeholder: valueData.value.length === 0 ? props.placeholder : void 0,
|
|
424
|
+
disabled: unref(mergedDisabled),
|
|
425
|
+
readonly: Boolean(props.readonly || props.disabledInput),
|
|
426
|
+
onInput: handleInput,
|
|
427
|
+
onKeydown: handleKeyDown,
|
|
428
|
+
onFocus: handleFocus,
|
|
429
|
+
onBlur: handleBlur,
|
|
430
|
+
onCompositionstart: handleComposition,
|
|
431
|
+
onCompositionupdate: handleComposition,
|
|
432
|
+
onCompositionend: handleComposition
|
|
433
|
+
}), null, 16, _hoisted_1)]),
|
|
434
|
+
_: 1
|
|
435
|
+
}, 8, [
|
|
436
|
+
"items",
|
|
437
|
+
"item-key",
|
|
438
|
+
"class"
|
|
439
|
+
])) : (openBlock(), createBlock(TransitionGroup, {
|
|
506
440
|
key: 2,
|
|
507
|
-
class: normalizeClass(`${unref(prefixCls)}-prefix`)
|
|
508
|
-
}, [renderSlot(_ctx.$slots, "prefix")], 2)) : createCommentVNode("", true),
|
|
509
|
-
createVNode(TransitionGroup, {
|
|
510
441
|
tag: "span",
|
|
511
442
|
name: "input-tag-zoom",
|
|
512
443
|
class: normalizeClass([`${unref(prefixCls)}-inner`, {
|
|
@@ -517,14 +448,11 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
517
448
|
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (item, index) => {
|
|
518
449
|
return openBlock(), createBlock(unref(Tag), mergeProps({
|
|
519
450
|
key: `tag-${item.value}`,
|
|
520
|
-
class: [`${unref(prefixCls)}-tag`, {
|
|
521
|
-
[`${unref(prefixCls)}-tag-counter`]: isOverflowCounterTag(item.value),
|
|
522
|
-
[`${unref(prefixCls)}-tag-overflow`]: isCompressedResponsiveTag(index, item.value)
|
|
523
|
-
}],
|
|
451
|
+
class: [`${unref(prefixCls)}-tag`, { [`${unref(prefixCls)}-tag-counter`]: isOverflowCounterTag(item.value) }],
|
|
524
452
|
closable: isClosableTag(item),
|
|
525
453
|
visible: "",
|
|
526
|
-
|
|
527
|
-
|
|
454
|
+
ellipsis: !_ctx.$slots.tag,
|
|
455
|
+
nowrap: props.tagNowrap || isResponsiveMaxTagCount.value
|
|
528
456
|
}, { ref_for: true }, item.tagProps, { onClose: ($event) => handleRemove(item.value, index, $event) }), {
|
|
529
457
|
default: withCtx(() => [createVNode(unref(ReuseTagContent), {
|
|
530
458
|
item,
|
|
@@ -535,8 +463,8 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
535
463
|
}, 1040, [
|
|
536
464
|
"class",
|
|
537
465
|
"closable",
|
|
466
|
+
"ellipsis",
|
|
538
467
|
"nowrap",
|
|
539
|
-
"style",
|
|
540
468
|
"onClose"
|
|
541
469
|
]);
|
|
542
470
|
}), 128)), createElementVNode("input", mergeProps({
|
|
@@ -556,9 +484,9 @@ var input_tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
556
484
|
onCompositionstart: handleComposition,
|
|
557
485
|
onCompositionupdate: handleComposition,
|
|
558
486
|
onCompositionend: handleComposition
|
|
559
|
-
}), null, 16,
|
|
487
|
+
}), null, 16, _hoisted_2)]),
|
|
560
488
|
_: 1
|
|
561
|
-
}, 8, ["class"]),
|
|
489
|
+
}, 8, ["class"])),
|
|
562
490
|
showClearBtn.value ? (openBlock(), createBlock(icon_hover_default, {
|
|
563
491
|
key: 3,
|
|
564
492
|
class: normalizeClass(`${unref(prefixCls)}-clear-btn`),
|
|
@@ -640,14 +640,6 @@
|
|
|
640
640
|
.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
|
|
641
641
|
background-color: rgba(255, 255, 255, 0.2);
|
|
642
642
|
}
|
|
643
|
-
.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow {
|
|
644
|
-
flex-shrink: 1;
|
|
645
|
-
white-space: nowrap;
|
|
646
|
-
word-break: normal;
|
|
647
|
-
}
|
|
648
|
-
.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow .sd-tag-text {
|
|
649
|
-
max-width: 100%;
|
|
650
|
-
}
|
|
651
643
|
.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-counter {
|
|
652
644
|
flex-shrink: 0;
|
|
653
645
|
white-space: nowrap;
|
|
@@ -690,37 +682,6 @@
|
|
|
690
682
|
visibility: hidden;
|
|
691
683
|
pointer-events: none;
|
|
692
684
|
}
|
|
693
|
-
.sd-input-tag .sd-input-tag-resize-observer {
|
|
694
|
-
position: absolute;
|
|
695
|
-
inset: 0;
|
|
696
|
-
display: block;
|
|
697
|
-
width: 100%;
|
|
698
|
-
height: 100%;
|
|
699
|
-
visibility: hidden;
|
|
700
|
-
pointer-events: none;
|
|
701
|
-
}
|
|
702
|
-
.sd-input-tag .sd-input-tag-measure {
|
|
703
|
-
position: absolute;
|
|
704
|
-
top: 0;
|
|
705
|
-
left: 0;
|
|
706
|
-
display: block;
|
|
707
|
-
width: 100%;
|
|
708
|
-
max-width: 100%;
|
|
709
|
-
overflow: hidden;
|
|
710
|
-
white-space: nowrap;
|
|
711
|
-
visibility: hidden;
|
|
712
|
-
pointer-events: none;
|
|
713
|
-
}
|
|
714
|
-
.sd-input-tag .sd-input-tag-measure .sd-input-tag-tag {
|
|
715
|
-
display: inline-flex;
|
|
716
|
-
flex-shrink: 0;
|
|
717
|
-
}
|
|
718
|
-
.sd-input-tag .sd-input-tag-tag-ellipsis {
|
|
719
|
-
display: block;
|
|
720
|
-
min-width: 0;
|
|
721
|
-
max-width: 100%;
|
|
722
|
-
vertical-align: bottom;
|
|
723
|
-
}
|
|
724
685
|
.sd-input-tag.sd-input-tag-focus .sd-input-tag-tag:not(.sd-tag-custom-color):not(.sd-tag-red):not(.sd-tag-orangered):not(.sd-tag-orange):not(.sd-tag-gold):not(.sd-tag-lime):not(.sd-tag-green):not(.sd-tag-cyan):not(.sd-tag-blue):not(.sd-tag-sdblue):not(.sd-tag-purple):not(.sd-tag-pinkpurple):not(.sd-tag-magenta) {
|
|
725
686
|
background-color: var(--sd-color-fill-2);
|
|
726
687
|
border-color: var(--sd-color-fill-2);
|
|
@@ -844,4 +805,10 @@
|
|
|
844
805
|
|
|
845
806
|
.input-tag-zoom-move {
|
|
846
807
|
transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
.sd-input-tag-item-holder {
|
|
811
|
+
display: inline-flex;
|
|
812
|
+
min-width: 0;
|
|
813
|
+
max-width: 100%;
|
|
847
814
|
}
|
|
@@ -46,3 +46,10 @@ $input-tag-prefix-cls: string.unquote('#{theme.$prefix}-input-tag');
|
|
|
46
46
|
.input-tag-zoom-move {
|
|
47
47
|
transition: transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
|
|
48
48
|
}
|
|
49
|
+
|
|
50
|
+
// responsive 分支:WrapClamp 每个 item 外层的 TransitionGroup 容器
|
|
51
|
+
.#{$input-tag-prefix-cls}-item-holder {
|
|
52
|
+
display: inline-flex;
|
|
53
|
+
min-width: 0;
|
|
54
|
+
max-width: 100%;
|
|
55
|
+
}
|
|
@@ -142,16 +142,6 @@
|
|
|
142
142
|
@include icon-hover.icon-hover-bg($tag-prefix-cls, token.$tag-custom-color-icon-bg_hover);
|
|
143
143
|
}
|
|
144
144
|
|
|
145
|
-
&.#{$cls}-tag-overflow {
|
|
146
|
-
flex-shrink: 1;
|
|
147
|
-
white-space: nowrap;
|
|
148
|
-
word-break: normal;
|
|
149
|
-
|
|
150
|
-
.#{theme.$prefix}-tag-text {
|
|
151
|
-
max-width: 100%;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
155
145
|
&.#{$cls}-tag-counter {
|
|
156
146
|
flex-shrink: 0;
|
|
157
147
|
white-space: nowrap;
|
|
@@ -179,41 +169,6 @@
|
|
|
179
169
|
pointer-events: none;
|
|
180
170
|
}
|
|
181
171
|
|
|
182
|
-
.#{$cls}-resize-observer {
|
|
183
|
-
position: absolute;
|
|
184
|
-
inset: 0;
|
|
185
|
-
display: block;
|
|
186
|
-
width: 100%;
|
|
187
|
-
height: 100%;
|
|
188
|
-
visibility: hidden;
|
|
189
|
-
pointer-events: none;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.#{$cls}-measure {
|
|
193
|
-
position: absolute;
|
|
194
|
-
top: 0;
|
|
195
|
-
left: 0;
|
|
196
|
-
display: block;
|
|
197
|
-
width: 100%;
|
|
198
|
-
max-width: 100%;
|
|
199
|
-
overflow: hidden;
|
|
200
|
-
white-space: nowrap;
|
|
201
|
-
visibility: hidden;
|
|
202
|
-
pointer-events: none;
|
|
203
|
-
|
|
204
|
-
.#{$cls}-tag {
|
|
205
|
-
display: inline-flex;
|
|
206
|
-
flex-shrink: 0;
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.#{$cls}-tag-ellipsis {
|
|
211
|
-
display: block;
|
|
212
|
-
min-width: 0;
|
|
213
|
-
max-width: 100%;
|
|
214
|
-
vertical-align: bottom;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
172
|
&.#{$cls}-focus {
|
|
218
173
|
.#{$cls}-tag {
|
|
219
174
|
&#{tag-color-not-chain()} {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
|
|
2
2
|
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
|
-
import IconLoading from "../icon/icon-loading/index.js";
|
|
4
3
|
import Tooltip from "../tooltip/index.js";
|
|
5
|
-
import { hasPropOrSlot } from "../_utils/use-prop-or-slot.js";
|
|
6
4
|
import { PerformantEllipsis } from "../ellipsis/index.js";
|
|
5
|
+
import IconLoading from "../icon/icon-loading/index.js";
|
|
6
|
+
import { hasPropOrSlot } from "../_utils/use-prop-or-slot.js";
|
|
7
7
|
import IconLink from "../icon/icon-link/index.js";
|
|
8
8
|
import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, useSlots, withCtx } from "vue";
|
|
9
9
|
//#region components/link/link.vue?vue&type=script&setup=true&lang.ts
|
package/es/list/index.d.ts
CHANGED
|
@@ -907,10 +907,10 @@ declare const List: {
|
|
|
907
907
|
split: boolean;
|
|
908
908
|
size: "small" | "medium" | "large";
|
|
909
909
|
scrollbar: boolean | import("../index.ts").ScrollbarProps;
|
|
910
|
+
maxHeight: string | number;
|
|
910
911
|
loading: boolean;
|
|
911
912
|
bottomOffset: number;
|
|
912
913
|
bordered: boolean;
|
|
913
|
-
maxHeight: string | number;
|
|
914
914
|
hoverable: boolean;
|
|
915
915
|
}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
|
916
916
|
P: {};
|
|
@@ -1817,10 +1817,10 @@ declare const List: {
|
|
|
1817
1817
|
split: boolean;
|
|
1818
1818
|
size: "small" | "medium" | "large";
|
|
1819
1819
|
scrollbar: boolean | import("../index.ts").ScrollbarProps;
|
|
1820
|
+
maxHeight: string | number;
|
|
1820
1821
|
loading: boolean;
|
|
1821
1822
|
bottomOffset: number;
|
|
1822
1823
|
bordered: boolean;
|
|
1823
|
-
maxHeight: string | number;
|
|
1824
1824
|
hoverable: boolean;
|
|
1825
1825
|
}>;
|
|
1826
1826
|
__isFragment?: never;
|
|
@@ -2729,10 +2729,10 @@ declare const List: {
|
|
|
2729
2729
|
split: boolean;
|
|
2730
2730
|
size: "small" | "medium" | "large";
|
|
2731
2731
|
scrollbar: boolean | import("../index.ts").ScrollbarProps;
|
|
2732
|
+
maxHeight: string | number;
|
|
2732
2733
|
loading: boolean;
|
|
2733
2734
|
bottomOffset: number;
|
|
2734
2735
|
bordered: boolean;
|
|
2735
|
-
maxHeight: string | number;
|
|
2736
2736
|
hoverable: boolean;
|
|
2737
2737
|
}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
|
|
2738
2738
|
$slots: {
|
package/es/list/list.vue.d.ts
CHANGED
|
@@ -964,10 +964,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
964
964
|
split: boolean;
|
|
965
965
|
size: "small" | "medium" | "large";
|
|
966
966
|
scrollbar: boolean | ScrollbarProps;
|
|
967
|
+
maxHeight: string | number;
|
|
967
968
|
loading: boolean;
|
|
968
969
|
bottomOffset: number;
|
|
969
970
|
bordered: boolean;
|
|
970
|
-
maxHeight: string | number;
|
|
971
971
|
hoverable: boolean;
|
|
972
972
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
973
973
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -2,9 +2,9 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/es
|
|
|
2
2
|
import { getPrefixCls } from "../_utils/global-config.js";
|
|
3
3
|
import { isNumber, isObject } from "../_utils/is.js";
|
|
4
4
|
import { KEYBOARD_KEY } from "../_utils/keyboard.js";
|
|
5
|
-
import useMergeState from "../_hooks/use-merge-state.js";
|
|
6
|
-
import { omit } from "../_utils/omit.js";
|
|
7
5
|
import usePickSlots from "../_hooks/use-pick-slots.js";
|
|
6
|
+
import { omit } from "../_utils/omit.js";
|
|
7
|
+
import useMergeState from "../_hooks/use-merge-state.js";
|
|
8
8
|
import { MenuInjectionKey } from "./context.js";
|
|
9
9
|
import { provideLevel } from "./hooks/use-level.js";
|
|
10
10
|
import useMenuDataCollector from "./hooks/use-menu-data-collector.js";
|
|
@@ -253,7 +253,7 @@ var base_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
253
253
|
const backward = horizontal ? e.key === KEYBOARD_KEY.ARROW_LEFT : e.key === KEYBOARD_KEY.ARROW_UP;
|
|
254
254
|
if (!forward && !backward && e.key !== KEYBOARD_KEY.HOME && e.key !== KEYBOARD_KEY.END) return;
|
|
255
255
|
const container = e.currentTarget;
|
|
256
|
-
const items = Array.from(container.querySelectorAll("[role=\"menuitem\"]")).filter((el) => el.tabIndex === 0);
|
|
256
|
+
const items = Array.from(container.querySelectorAll("[role=\"menuitem\"]")).filter((el) => el.tabIndex === 0 && el.offsetParent !== null && el.getAttribute("aria-hidden") !== "true");
|
|
257
257
|
if (!items.length) return;
|
|
258
258
|
const current = e.target;
|
|
259
259
|
const idx = items.indexOf(current);
|