@sdata/web-vue 1.7.1 → 1.9.0

package/es/input-tag/input-tag.js

@@ -5,16 +5,21 @@ import { isNull, isObject, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import icon_hover_default from "../_components/icon-hover.js";
 import IconClose from "../icon/icon-close/index.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import feedback_icon_default from "../_components/feedback-icon.js";
 import { useSize } from "../_hooks/use-size.js";
 import { INPUT_EVENTS } from "../_utils/constant.js";
 import { Backspace, Enter } from "../_utils/keycode.js";
 import { omit } from "../_utils/omit.js";
 import pick from "../_utils/pick.js";
+import Ellipsis from "../ellipsis/index.js";
 import Tag from "../tag/index.js";
 import { getValueData } from "./utils.js";
-import { TransitionGroup, computed, createVNode, defineComponent, mergeProps, nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
+import { TransitionGroup, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
 //#region components/input-tag/input-tag.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var DEFAULT_FIELD_NAMES = {
 	value: "value",
 	label: "label",
@@ -54,7 +59,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		},
 		size: { type: String },
 		maxTagCount: {
-			type: Number,
+			type: [Number, String],
 			default: 0
 		},
 		retainInputValue: {
@@ -88,10 +93,12 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		"blur": (_ev) => true
 	},
 	setup(props, { emit, slots, attrs }) {
-		const { size, disabled, error, uninjectFormItemContext, modelValue } = toRefs(props);
+		const { size, disabled, error, uninjectFormItemContext, modelValue, allowClear } = toRefs(props);
 		const prefixCls = props.baseCls || getPrefixCls("input-tag");
+		const wrapperRef = ref();
 		const inputRef = ref();
 		const mirrorRef = ref();
+		const measureRef = ref();
 		const { mergedSize: _mergedSize, mergedDisabled, mergedError, feedback, eventHandlers } = useFormItem({
 			size,
 			disabled,
@@ -99,6 +106,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			uninject: uninjectFormItemContext === null || uninjectFormItemContext === void 0 ? void 0 : uninjectFormItemContext.value
 		});
 		const { mergedSize } = useSize(_mergedSize);
+		const { mergedAllowClear } = useAllowClear(allowClear);
 		const mergedFieldNames = computed(() => _objectSpread2(_objectSpread2({}, DEFAULT_FIELD_NAMES), props.fieldNames));
 		const _focused = ref(false);
 		const _value = ref(props.defaultValue);
@@ -116,7 +124,10 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			};
 		});
 		const inputStyle = reactive({ width: "12px" });
+		const responsiveVisibleTagCount = ref(null);
+		const responsiveTagMaxWidth = ref(0);
 		const mergedFocused = computed(() => props.focused || _focused.value);
+		const isResponsiveMaxTagCount = computed(() => props.maxTagCount === "responsive");
 		const updateInputValue = (value, ev) => {
 			_inputValue.value = value;
 			emit("update:inputValue", value);
@@ -164,22 +175,96 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			}
 		};
 		const valueData = computed(() => getValueData(computedValue.value, mergedFieldNames.value));
+		const visibleTagCount = computed(() => {
+			if (isResponsiveMaxTagCount.value) {
+				var _responsiveVisibleTag;
+				if (!valueData.value.length) return 0;
+				return Math.min(valueData.value.length, Math.max(1, (_responsiveVisibleTag = responsiveVisibleTagCount.value) !== null && _responsiveVisibleTag !== void 0 ? _responsiveVisibleTag : valueData.value.length));
+			}
+			if (typeof props.maxTagCount === "number" && props.maxTagCount > 0) return Math.min(props.maxTagCount, valueData.value.length);
+			return valueData.value.length;
+		});
+		const hiddenTagCount = computed(() => {
+			const count = valueData.value.length - visibleTagCount.value;
+			return count > 0 ? count : 0;
+		});
+		const isOverflowCounterTag = (value) => value === "__arco__more";
 		const tags = computed(() => {
-			if (props.maxTagCount > 0) {
-				const invisibleTags = valueData.value.length - props.maxTagCount;
-				if (invisibleTags > 0) {
-					const result = valueData.value.slice(0, props.maxTagCount);
-					const raw = {
-						value: "__arco__more",
-						label: `+${invisibleTags}...`,
-						closable: false
-					};
-					result.push(_objectSpread2({ raw }, raw));
-					return result;
+			const visibleTags = valueData.value.slice(0, visibleTagCount.value);
+			if (!hiddenTagCount.value) return visibleTags;
+			const raw = {
+				value: "__arco__more",
+				label: `+${hiddenTagCount.value}`,
+				closable: false
+			};
+			return visibleTags.concat(_objectSpread2({ raw }, raw));
+		});
+		const getOuterWidth = (element) => {
+			if (!element) return 0;
+			const style = window.getComputedStyle(element);
+			const marginLeft = Number.parseFloat(style.marginLeft || "0") || 0;
+			const marginRight = Number.parseFloat(style.marginRight || "0") || 0;
+			return element.offsetWidth + marginLeft + marginRight;
+		};
+		const getCounterWidth = (hiddenCount) => {
+			if (!measureRef.value || hiddenCount <= 0) return 0;
+			return getOuterWidth(measureRef.value.querySelector(`[data-hidden-count="${hiddenCount}"]`));
+		};
+		const syncResponsiveTags = () => {
+			var _inputRef$value$offse, _inputRef$value;
+			if (!isResponsiveMaxTagCount.value) {
+				responsiveVisibleTagCount.value = null;
+				responsiveTagMaxWidth.value = 0;
+				return;
+			}
+			const totalTags = valueData.value.length;
+			if (totalTags <= 1) {
+				responsiveVisibleTagCount.value = totalTags;
+				responsiveTagMaxWidth.value = 0;
+				return;
+			}
+			const wrapperElement = wrapperRef.value;
+			const measureElement = measureRef.value;
+			const innerElement = wrapperElement === null || wrapperElement === void 0 ? void 0 : wrapperElement.querySelector(`.${prefixCls}-inner`);
+			if (!wrapperElement || !measureElement || !innerElement) {
+				responsiveVisibleTagCount.value = totalTags;
+				responsiveTagMaxWidth.value = 0;
+				return;
+			}
+			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;
+			const availableWidth = Math.max(innerElement.clientWidth - inputWidth, 0);
+			if (availableWidth <= 0) {
+				responsiveVisibleTagCount.value = 1;
+				responsiveTagMaxWidth.value = 0;
+				return;
+			}
+			const tagWidths = Array.from(measureElement.querySelectorAll(`.${prefixCls}-tag`)).slice(0, totalTags).map(getOuterWidth);
+			for (let candidate = totalTags; candidate >= 1; candidate -= 1) {
+				const hiddenCount = totalTags - candidate;
+				const counterWidth = getCounterWidth(hiddenCount);
+				const visibleWidth = tagWidths.slice(0, candidate).reduce((sum, width) => sum + width, 0);
+				if (hiddenCount === 0 && visibleWidth <= availableWidth) {
+					responsiveVisibleTagCount.value = candidate;
+					responsiveTagMaxWidth.value = 0;
+					return;
+				}
+				if (hiddenCount > 0 && candidate > 1 && visibleWidth + counterWidth <= availableWidth) {
+					responsiveVisibleTagCount.value = candidate;
+					responsiveTagMaxWidth.value = 0;
+					return;
+				}
+				if (hiddenCount > 0 && candidate === 1) {
+					const leadTagWidth = Math.max(availableWidth - counterWidth, 0);
+					if (leadTagWidth > 0) {
+						responsiveVisibleTagCount.value = 1;
+						responsiveTagMaxWidth.value = leadTagWidth;
+						return;
+					}
 				}
 			}
-			return valueData.value;
-		});
+			responsiveVisibleTagCount.value = 1;
+			responsiveTagMaxWidth.value = Math.max(availableWidth - getCounterWidth(totalTags - 1), 0);
+		};
 		const updateValue = (value, ev) => {
 			var _eventHandlers$value, _eventHandlers$value$;
 			_value.value = value;
@@ -196,7 +281,7 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 			updateValue([], e);
 			emit("clear", e);
 		};
-		const showClearBtn = computed(() => !mergedDisabled.value && !props.readonly && props.allowClear && Boolean(computedValue.value.length));
+		const showClearBtn = computed(() => !mergedDisabled.value && !props.readonly && mergedAllowClear.value && Boolean(computedValue.value.length));
 		const handlePressEnter = (e) => {
 			if (computedInputValue.value) {
 				var _computedValue$value2;
@@ -242,13 +327,28 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		};
 		onMounted(() => {
 			if (mirrorRef.value) setInputWidth(mirrorRef.value.offsetWidth);
+			nextTick(() => {
+				syncResponsiveTags();
+			});
 		});
 		const handleResize = () => {
 			if (mirrorRef.value) setInputWidth(mirrorRef.value.offsetWidth);
+			nextTick(() => {
+				syncResponsiveTags();
+			});
 		};
 		watch(computedInputValue, (value) => {
 			if (inputRef.value && !isComposition.value && value !== inputRef.value.value) inputRef.value.value = value;
 		});
+		watch([
+			valueData,
+			computedInputValue,
+			() => props.maxTagCount
+		], () => {
+			nextTick(() => {
+				syncResponsiveTags();
+			});
+		}, { deep: true });
 		const cls = computed(() => [
 			prefixCls,
 			`${prefixCls}-size-${mergedSize.value}`,
@@ -258,7 +358,8 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 				[`${prefixCls}-error`]: mergedError.value,
 				[`${prefixCls}-focus`]: mergedFocused.value,
 				[`${prefixCls}-readonly`]: props.readonly,
-				[`${prefixCls}-has-tag`]: tags.value.length > 0,
+				[`${prefixCls}-responsive`]: isResponsiveMaxTagCount.value,
+				[`${prefixCls}-has-tag`]: valueData.value.length > 0,
 				[`${prefixCls}-has-prefix`]: Boolean(slots.prefix),
 				[`${prefixCls}-has-suffix`]: Boolean(slots.suffix) || showClearBtn.value || feedback.value,
 				[`${prefixCls}-has-placeholder`]: !computedValue.value.length
@@ -266,36 +367,86 @@ var input_tag_default = /* @__PURE__ */ defineComponent({
 		]);
 		const wrapperAttrs = computed(() => omit(attrs, INPUT_EVENTS));
 		const inputAttrs = computed(() => pick(attrs, INPUT_EVENTS));
+		const renderTagContent = (item, index) => {
+			var _ref, _slots$tag, _slots$tag2, _props$formatTag;
+			const content = (_ref = (_slots$tag = (_slots$tag2 = slots.tag) === null || _slots$tag2 === void 0 ? void 0 : _slots$tag2.call(slots, { data: item.raw })) !== null && _slots$tag !== void 0 ? _slots$tag : (_props$formatTag = props.formatTag) === null || _props$formatTag === void 0 ? void 0 : _props$formatTag.call(props, item.raw)) !== null && _ref !== void 0 ? _ref : item.label;
+			if (!isResponsiveMaxTagCount.value || hiddenTagCount.value === 0 || index !== 0 || responsiveTagMaxWidth.value <= 0) return content;
+			return createVNode(Ellipsis, { "class": `${prefixCls}-tag-ellipsis` }, _isSlot(content) ? content : { default: () => [content] });
+		};
+		const getTagStyle = (index) => {
+			if (!isResponsiveMaxTagCount.value || hiddenTagCount.value === 0 || index !== 0 || responsiveTagMaxWidth.value <= 0) return;
+			return { maxWidth: `${responsiveTagMaxWidth.value}px` };
+		};
+		const getInputStyle = computed(() => {
+			if (!isResponsiveMaxTagCount.value) return inputStyle;
+			return _objectSpread2(_objectSpread2({}, inputStyle), {}, {
+				flex: "0 0 auto",
+				minWidth: inputStyle.width
+			});
+		});
+		const isCompressedResponsiveTag = (index, value) => isResponsiveMaxTagCount.value && !isOverflowCounterTag(value) && hiddenTagCount.value > 0 && index === 0 && responsiveTagMaxWidth.value > 0;
 		const render = () => {
 			var _slots$suffix;
 			return createVNode("span", mergeProps({
+				"ref": wrapperRef,
 				"class": cls.value,
 				"onMousedown": handleMousedown
 			}, wrapperAttrs.value), [
+				isResponsiveMaxTagCount.value && valueData.value.length > 0 ? createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode("span", {
+					"class": `${prefixCls}-resize-observer`,
+					"aria-hidden": "true"
+				}, null)] }) : null,
 				createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode("span", {
 					"ref": mirrorRef,
 					"class": `${prefixCls}-mirror`
-				}, [tags.value.length > 0 ? compositionValue.value || computedInputValue.value : compositionValue.value || computedInputValue.value || props.placeholder])] }),
+				}, [valueData.value.length > 0 ? compositionValue.value || computedInputValue.value : compositionValue.value || computedInputValue.value || props.placeholder])] }),
+				isResponsiveMaxTagCount.value && valueData.value.length > 1 ? createVNode("span", {
+					"ref": measureRef,
+					"class": `${prefixCls}-measure`,
+					"aria-hidden": "true"
+				}, [valueData.value.map((item) => createVNode(Tag, mergeProps({
+					"key": `measure-tag-${item.value}`,
+					"class": `${prefixCls}-tag`,
+					"visible": true,
+					"nowrap": true
+				}, item.tagProps), { default: () => {
+					var _ref2, _slots$tag3, _slots$tag4, _props$formatTag2;
+					return [(_ref2 = (_slots$tag3 = (_slots$tag4 = slots.tag) === null || _slots$tag4 === void 0 ? void 0 : _slots$tag4.call(slots, { data: item.raw })) !== null && _slots$tag3 !== void 0 ? _slots$tag3 : (_props$formatTag2 = props.formatTag) === null || _props$formatTag2 === void 0 ? void 0 : _props$formatTag2.call(props, item.raw)) !== null && _ref2 !== void 0 ? _ref2 : item.label];
+				} })), Array.from({ length: valueData.value.length - 1 }, (_, index) => index + 1).map((hiddenCount) => createVNode(Tag, {
+					"key": `measure-counter-${hiddenCount}`,
+					"class": `${prefixCls}-tag ${prefixCls}-tag-counter`,
+					"data-overflow-counter": "true",
+					"data-hidden-count": hiddenCount,
+					"visible": true,
+					"nowrap": true
+				}, { default: () => [`+${hiddenCount}`] }))]) : null,
 				slots.prefix && createVNode("span", { "class": `${prefixCls}-prefix` }, [slots.prefix()]),
 				createVNode(TransitionGroup, {
 					"tag": "span",
 					"name": "input-tag-zoom",
-					"class": [`${prefixCls}-inner`, { [`${prefixCls}-nowrap`]: props.tagNowrap }]
-				}, { default: () => [tags.value.map((item, index) => createVNode(Tag, mergeProps({
-					"key": `tag-${item.value}`,
-					"class": `${prefixCls}-tag`,
-					"closable": !mergedDisabled.value && !props.readonly && item.closable,
-					"visible": true,
-					"nowrap": props.tagNowrap
-				}, item.tagProps, { "onClose": (ev) => handleRemove(item.value, index, ev) }), { default: () => {
-					var _ref, _slots$tag, _slots$tag2, _props$formatTag;
-					return [(_ref = (_slots$tag = (_slots$tag2 = slots.tag) === null || _slots$tag2 === void 0 ? void 0 : _slots$tag2.call(slots, { data: item.raw })) !== null && _slots$tag !== void 0 ? _slots$tag : (_props$formatTag = props.formatTag) === null || _props$formatTag === void 0 ? void 0 : _props$formatTag.call(props, item.raw)) !== null && _ref !== void 0 ? _ref : item.label];
-				} })), createVNode("input", mergeProps(inputAttrs.value, {
+					"class": [`${prefixCls}-inner`, {
+						[`${prefixCls}-inner-responsive`]: isResponsiveMaxTagCount.value,
+						[`${prefixCls}-nowrap`]: props.tagNowrap
+					}]
+				}, { default: () => [tags.value.map((item, index) => {
+					let _slot;
+					return createVNode(Tag, mergeProps({
+						"key": `tag-${item.value}`,
+						"class": [`${prefixCls}-tag`, {
+							[`${prefixCls}-tag-counter`]: isOverflowCounterTag(item.value),
+							[`${prefixCls}-tag-overflow`]: isCompressedResponsiveTag(index, item.value)
+						}],
+						"closable": !mergedDisabled.value && !props.readonly && item.closable,
+						"visible": true,
+						"nowrap": props.tagNowrap || isResponsiveMaxTagCount.value,
+						"style": getTagStyle(index)
+					}, item.tagProps, { "onClose": (ev) => handleRemove(item.value, index, ev) }), _isSlot(_slot = renderTagContent(item, index)) ? _slot : { default: () => [_slot] });
+				}), createVNode("input", mergeProps(inputAttrs.value, {
 					"ref": inputRef,
 					"key": "input-tag-input",
 					"class": `${prefixCls}-input`,
-					"style": inputStyle,
-					"placeholder": tags.value.length === 0 ? props.placeholder : void 0,
+					"style": getInputStyle.value,
+					"placeholder": valueData.value.length === 0 ? props.placeholder : void 0,
 					"disabled": mergedDisabled.value,
 					"readonly": props.readonly || props.disabledInput,
 					"onInput": handleInput,

package/es/input-tag/style/index.css

@@ -587,6 +587,7 @@
 }
 .sd-input-tag .sd-input-tag-inner {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   line-height: 0;
 }
@@ -594,9 +595,16 @@
   display: flex;
   flex-wrap: wrap;
 }
+.sd-input-tag .sd-input-tag-inner.sd-input-tag-inner-responsive {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
+  min-width: 0;
   margin-right: 4px;
   color: var(--color-text-1);
   font-size: 12px;
@@ -614,6 +622,19 @@
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-tag-custom-color .sd-icon-hover.sd-tag-icon-hover:hover::before {
   background-color: rgba(255, 255, 255, 0.2);
 }
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow {
+  flex-shrink: 1;
+  white-space: nowrap;
+  word-break: normal;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-overflow .sd-tag-text {
+  max-width: 100%;
+}
+.sd-input-tag .sd-input-tag-inner .sd-input-tag-tag.sd-input-tag-tag-counter {
+  flex-shrink: 0;
+  white-space: nowrap;
+  word-break: normal;
+}
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   width: 100%;
   padding-right: 0;
@@ -640,6 +661,9 @@
 .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
   box-sizing: border-box;
 }
+.sd-input-tag-inner-responsive .sd-input-tag .sd-input-tag-inner .sd-input-tag-input {
+  flex: 0 0 auto;
+}
 .sd-input-tag .sd-input-tag-mirror {
   position: absolute;
   top: 0;
@@ -648,6 +672,27 @@
   visibility: hidden;
   pointer-events: none;
 }
+.sd-input-tag .sd-input-tag-resize-observer {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-measure {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+.sd-input-tag .sd-input-tag-tag-ellipsis {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .sd-input-tag.sd-input-tag-focus .sd-input-tag-tag {
   background-color: var(--color-fill-2);
   border-color: var(--color-fill-2);

package/es/input-tag/style/input-tag.scss

@@ -229,6 +229,7 @@ $less-vars: (
 
   .#{$cls}-inner {
     flex: 1;
+    min-width: 0;
     overflow: hidden;
     line-height: 0;
 
@@ -237,9 +238,17 @@ $less-vars: (
       flex-wrap: wrap;
     }
 
+    &.#{$cls}-inner-responsive {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+    }
+
     .#{$cls}-tag {
       display: inline-flex;
+      flex-shrink: 0;
       align-items: center;
+      min-width: 0;
       margin-right: $input-tag-tag-margin-right;
       color: $input-tag-color-text_default;
       font-size: $input-tag-tag-font-size;
@@ -257,12 +266,32 @@ $less-vars: (
 
         @include icon-hover.icon-hover-bg($tag-prefix-cls, token.$tag-custom-color-icon-bg_hover);
       }
+
+      &.#{$cls}-tag-overflow {
+        flex-shrink: 1;
+        white-space: nowrap;
+        word-break: normal;
+
+        .#{theme.$prefix}-tag-text {
+          max-width: 100%;
+        }
+      }
+
+      &.#{$cls}-tag-counter {
+        flex-shrink: 0;
+        white-space: nowrap;
+        word-break: normal;
+      }
     }
 
     .#{$cls}-input {
       @include input-style();
 
       box-sizing: border-box;
+
+      .#{$cls}-inner-responsive & {
+        flex: 0 0 auto;
+      }
     }
   }
 
@@ -275,6 +304,30 @@ $less-vars: (
     pointer-events: none;
   }
 
+  .#{$cls}-resize-observer {
+    position: absolute;
+    inset: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .#{$cls}-measure {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-flex;
+    white-space: nowrap;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .#{$cls}-tag-ellipsis {
+    display: block;
+    min-width: 0;
+    max-width: 100%;
+    vertical-align: bottom;
+  }
+
   &.#{$cls}-focus {
     .#{$cls}-tag {
       background-color: $input-tag-tag-color-bg_focus;

package/es/list/index.d.ts

@@ -68,8 +68,8 @@ declare const List: {
         size: "small" | "medium" | "large";
         loading: boolean;
         split: boolean;
-        bordered: boolean;
         scrollbar: boolean | import("..").ScrollbarProps;
+        bordered: boolean;
         bottomOffset: number;
         maxHeight: string | number;
         hoverable: boolean;
@@ -139,8 +139,8 @@ declare const List: {
         size: "small" | "medium" | "large";
         loading: boolean;
         split: boolean;
-        bordered: boolean;
         scrollbar: boolean | import("..").ScrollbarProps;
+        bordered: boolean;
         bottomOffset: number;
         maxHeight: string | number;
         hoverable: boolean;
@@ -212,8 +212,8 @@ declare const List: {
     size: "small" | "medium" | "large";
     loading: boolean;
     split: boolean;
-    bordered: boolean;
     scrollbar: boolean | import("..").ScrollbarProps;
+    bordered: boolean;
     bottomOffset: number;
     maxHeight: string | number;
     hoverable: boolean;

package/es/list/list.d.ts

@@ -111,8 +111,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     size: "small" | "medium" | "large";
     loading: boolean;
     split: boolean;
-    bordered: boolean;
     scrollbar: boolean | ScrollbarProps;
+    bordered: boolean;
     bottomOffset: number;
     maxHeight: string | number;
     hoverable: boolean;

package/es/mention/mention.js

@@ -3,6 +3,7 @@ import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helper
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isNull, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
+import { useAllowClear } from "../_hooks/use-allow-clear.js";
 import Input from "../input/index.js";
 import { getKeyFromValue } from "../select/utils.js";
 import { useSelect } from "../select/hooks/use-select.js";
@@ -62,6 +63,7 @@ var mention_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(props, { emit, attrs, slots }) {
 		const prefixCls = getPrefixCls("mention");
+		const { mergedAllowClear } = useAllowClear(toRef(props, "allowClear"));
 		let styleDeclaration;
 		const { mergedDisabled, eventHandlers } = useFormItem({ disabled: toRef(props, "disabled") });
 		const { data, modelValue } = toRefs(props);
@@ -211,7 +213,7 @@ var mention_default = /* @__PURE__ */ defineComponent({
 				var _computedValue$value;
 				return createVNode("div", { "class": prefixCls }, [createVNode(resize_observer_default, { "onResize": handleResize }, { default: () => [createVNode(Textarea, mergeProps(attrs, {
 					"ref": inputRef,
-					"allowClear": props.allowClear,
+					"allowClear": mergedAllowClear.value,
 					"modelValue": computedValue.value,
 					"disabled": mergedDisabled.value,
 					"onInput": handleInput,
@@ -251,7 +253,7 @@ var mention_default = /* @__PURE__ */ defineComponent({
 			}, {
 				default: () => [createVNode(Input, mergeProps(attrs, {
 					"ref": inputRef,
-					"allowClear": props.allowClear,
+					"allowClear": mergedAllowClear.value,
 					"modelValue": computedValue.value,
 					"disabled": mergedDisabled.value,
 					"onInput": handleInput,

package/es/menu/sub-menu-pop.vue.d.ts

@@ -651,10 +651,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             };
         }>> & Readonly<{
             onResize?: (() => any) | undefined;
+            onHide?: (() => any) | undefined;
+            onShow?: (() => any) | undefined;
             "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
             onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
-            onShow?: (() => any) | undefined;
-            onHide?: (() => any) | undefined;
         }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             'update:popupVisible': (_visible: boolean) => true;
             popupVisibleChange: (_visible: boolean) => true;
@@ -842,10 +842,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             };
         }>> & Readonly<{
             onResize?: (() => any) | undefined;
+            onHide?: (() => any) | undefined;
+            onShow?: (() => any) | undefined;
             "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
             onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
-            onShow?: (() => any) | undefined;
-            onHide?: (() => any) | undefined;
         }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
             disabled: boolean;
             unmountOnClose: boolean;
@@ -1024,10 +1024,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         };
     }>> & Readonly<{
         onResize?: (() => any) | undefined;
+        onHide?: (() => any) | undefined;
+        onShow?: (() => any) | undefined;
         "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
         onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
-        onShow?: (() => any) | undefined;
-        onHide?: (() => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:popupVisible': (_visible: boolean) => true;
         popupVisibleChange: (_visible: boolean) => true;

package/es/modal/modal.vue_vue_type_script_lang.js

@@ -14,8 +14,8 @@ import { useI18n } from "../locale/index.js";
 import client_only_default from "../_components/client-only.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
 import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
-import { useOverflow } from "../_hooks/use-overflow.js";
 import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/asyncToGenerator.js";
+import { useOverflow } from "../_hooks/use-overflow.js";
 import { useDraggable } from "./hooks/use-draggable.js";
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, toRefs, watch } from "vue";
 //#region components/modal/modal.vue?vue&type=script&lang.tsx

package/es/overflow-list/index.d.ts

@@ -21,8 +21,8 @@ declare const OverflowList: {
         change: (_value: number) => true;
     }, import("vue").PublicProps, {
         from: "start" | "end";
-        min: number;
         margin: number;
+        min: number;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -47,8 +47,8 @@ declare const OverflowList: {
         onChange?: ((_value: number) => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
         from: "start" | "end";
-        min: number;
         margin: number;
+        min: number;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -72,8 +72,8 @@ declare const OverflowList: {
     change: (_value: number) => true;
 }, string, {
     from: "start" | "end";
-    min: number;
     margin: number;
+    min: number;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;
 };

package/es/overflow-list/overflow-list.d.ts

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onChange?: ((_value: number) => any) | undefined;
 }>, {
     from: "start" | "end";
-    min: number;
     margin: number;
+    min: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;