@sdata/web-vue 1.11.1 → 1.13.0

package/es/tag-group/tag-group.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,360 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import resize_observer_default from "../_components/resize-observer.js";
+import Popover from "../popover/index.js";
+import Ellipsis from "../ellipsis/index.js";
+import Tag from "../tag/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
+import { createReusableTemplate } from "@vueuse/core";
+import { isFunction, isString } from "es-toolkit";
+import { isNumber as isNumber$1 } from "es-toolkit/compat";
+//#region components/tag-group/tag-group.vue?vue&type=script&setup=true&lang.ts
+var OVERFLOW_COUNTER_VALUE = "__sd_tag_group_more__";
+var tag_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TagGroup" }), {}, {
+	__name: "tag-group",
+	props: {
+		maxCount: { default: "responsive" },
+		options: { default: () => [] },
+		fieldNames: { default: () => ({}) }
+	},
+	setup(__props) {
+		const props = __props;
+		useSlots();
+		const prefixCls = getPrefixCls("tag-group");
+		const innerRef = ref();
+		const measureRef = ref();
+		const responsiveVisibleCount = ref(null);
+		const responsiveItemMaxWidth = ref(0);
+		const [DefineTagGroupItem, ReuseTagGroupItem] = createReusableTemplate();
+		const [DefineTagGroupCounter, ReuseTagGroupCounter] = createReusableTemplate();
+		const isResponsiveMaxCount = computed(() => props.maxCount === "responsive");
+		const cls = computed(() => [prefixCls, {
+			[`${prefixCls}-responsive`]: isResponsiveMaxCount.value,
+			[`${prefixCls}-empty`]: props.options.length === 0
+		}]);
+		function resolveOptionField(option, field, fallbackField) {
+			var _optionRecord$field;
+			return (_optionRecord$field = option[field]) !== null && _optionRecord$field !== void 0 ? _optionRecord$field : option[fallbackField];
+		}
+		function normalizeItemProps(option, labelField, valueField) {
+			if (option.itemProps && typeof option.itemProps === "object" && !Array.isArray(option.itemProps)) return option.itemProps;
+			return Object.fromEntries(Object.entries(option).filter(([key]) => key !== labelField && key !== valueField && key !== "itemProps"));
+		}
+		function normalizeOption(option, index) {
+			const { label = "label", value = "value" } = props.fieldNames;
+			if (isString(option) || isNumber$1(option)) return {
+				key: `${String(option)}-${index}`,
+				label: option,
+				value: option,
+				raw: {
+					label: option,
+					value: option
+				},
+				itemProps: {},
+				isCounter: false,
+				hiddenCount: 0
+			};
+			const normalizedLabel = resolveOptionField(option, label, "label");
+			const normalizedValue = resolveOptionField(option, value, "value");
+			return {
+				key: `${String(normalizedValue)}-${index}`,
+				label: isFunction(normalizedLabel) ? normalizedLabel() : normalizedLabel,
+				value: normalizedValue,
+				raw: _objectSpread2(_objectSpread2({}, option), {}, {
+					label: normalizedLabel,
+					value: normalizedValue
+				}),
+				itemProps: normalizeItemProps(option, label, value),
+				isCounter: false,
+				hiddenCount: 0
+			};
+		}
+		function createOverflowOption(hiddenCount) {
+			const label = `+${hiddenCount}`;
+			return {
+				key: `${OVERFLOW_COUNTER_VALUE}-${hiddenCount}`,
+				label,
+				value: `${OVERFLOW_COUNTER_VALUE}-${hiddenCount}`,
+				raw: {
+					label,
+					value: `${OVERFLOW_COUNTER_VALUE}-${hiddenCount}`
+				},
+				itemProps: { closable: false },
+				isCounter: true,
+				hiddenCount
+			};
+		}
+		const normalizedOptions = computed(() => props.options.map((option, index) => normalizeOption(option, index)));
+		const visibleCount = computed(() => {
+			if (isResponsiveMaxCount.value) {
+				var _responsiveVisibleCou;
+				if (!normalizedOptions.value.length) return 0;
+				return Math.min(normalizedOptions.value.length, Math.max(1, (_responsiveVisibleCou = responsiveVisibleCount.value) !== null && _responsiveVisibleCou !== void 0 ? _responsiveVisibleCou : normalizedOptions.value.length));
+			}
+			if (typeof props.maxCount === "number" && props.maxCount > 0) return Math.min(props.maxCount, normalizedOptions.value.length);
+			return normalizedOptions.value.length;
+		});
+		const visibleOptions = computed(() => normalizedOptions.value.slice(0, visibleCount.value));
+		const hiddenOptions = computed(() => normalizedOptions.value.slice(visibleCount.value));
+		const overflowOption = computed(() => createOverflowOption(hiddenOptions.value.length));
+		const measureCounterOptions = computed(() => Array.from({ length: Math.max(normalizedOptions.value.length - 1, 0) }, (_, index) => createOverflowOption(index + 1)));
+		function resolveOptionLabel(option) {
+			if (option.isCounter) return option.label;
+			const label = option.raw.label;
+			return isFunction(label) ? label() : option.label;
+		}
+		function 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;
+		}
+		function getCounterWidth(hiddenCount) {
+			if (!measureRef.value || hiddenCount <= 0) return 0;
+			return getOuterWidth(measureRef.value.querySelector(`[data-hidden-count="${hiddenCount}"]`));
+		}
+		function setResponsiveState(visibleCount, itemMaxWidth = 0) {
+			responsiveVisibleCount.value = visibleCount;
+			responsiveItemMaxWidth.value = itemMaxWidth;
+		}
+		function findResponsiveState(totalItems, itemWidths, availableWidth) {
+			for (let candidate = totalItems; candidate >= 1; candidate -= 1) {
+				const hiddenCount = totalItems - candidate;
+				const counterWidth = getCounterWidth(hiddenCount);
+				const visibleWidth = itemWidths.slice(0, candidate).reduce((sum, width) => sum + width, 0);
+				if (hiddenCount === 0 && visibleWidth <= availableWidth) return {
+					visibleCount: candidate,
+					itemMaxWidth: 0
+				};
+				if (hiddenCount > 0 && candidate > 1 && visibleWidth + counterWidth <= availableWidth) return {
+					visibleCount: candidate,
+					itemMaxWidth: 0
+				};
+				if (hiddenCount > 0 && candidate === 1) {
+					const leadItemWidth = Math.max(availableWidth - counterWidth, 0);
+					if (leadItemWidth > 0) return {
+						visibleCount: 1,
+						itemMaxWidth: leadItemWidth
+					};
+				}
+			}
+			return {
+				visibleCount: 1,
+				itemMaxWidth: Math.max(availableWidth - getCounterWidth(totalItems - 1), 0)
+			};
+		}
+		function syncResponsiveItems() {
+			if (!isResponsiveMaxCount.value) {
+				responsiveVisibleCount.value = null;
+				responsiveItemMaxWidth.value = 0;
+				return;
+			}
+			const totalItems = normalizedOptions.value.length;
+			if (totalItems <= 1) {
+				setResponsiveState(totalItems);
+				return;
+			}
+			const innerElement = innerRef.value;
+			const measureElement = measureRef.value;
+			if (!innerElement || !measureElement) {
+				setResponsiveState(totalItems);
+				return;
+			}
+			const availableWidth = Math.max(innerElement.clientWidth, 0);
+			if (availableWidth <= 0) {
+				setResponsiveState(1);
+				return;
+			}
+			const responsiveState = findResponsiveState(totalItems, Array.from(measureElement.querySelectorAll("[data-measure-item=\"true\"]")).slice(0, totalItems).map(getOuterWidth), availableWidth);
+			setResponsiveState(responsiveState.visibleCount, responsiveState.itemMaxWidth);
+		}
+		function handleResize() {
+			nextTick(() => {
+				syncResponsiveItems();
+			});
+		}
+		function isCompressedResponsiveItem(index, value) {
+			return isResponsiveMaxCount.value && !String(value).startsWith(OVERFLOW_COUNTER_VALUE) && hiddenOptions.value.length > 0 && index === 0 && responsiveItemMaxWidth.value > 0;
+		}
+		function getItemWrapperClass(option, measure) {
+			return [`${prefixCls}-item`, { [`${prefixCls}-item-measure`]: Boolean(measure) }];
+		}
+		function getCounterWrapperClass(measure) {
+			return [
+				`${prefixCls}-item`,
+				`${prefixCls}-item-counter`,
+				{ [`${prefixCls}-item-measure`]: Boolean(measure) }
+			];
+		}
+		function getItemWrapperStyle(option, index, measure) {
+			if (measure || !isCompressedResponsiveItem(index, option.value)) return;
+			return { maxWidth: `${responsiveItemMaxWidth.value}px` };
+		}
+		function getItemContentClass(option, index) {
+			return [`${prefixCls}-item-content`, { [`${prefixCls}-item-content-overflow`]: isCompressedResponsiveItem(index, option.value) }];
+		}
+		function getItemContentStyle(option, index) {
+			if (!isCompressedResponsiveItem(index, option.value)) return;
+			return { maxWidth: "100%" };
+		}
+		function getCounterContentClass() {
+			return `${prefixCls}-counter-content`;
+		}
+		onMounted(() => {
+			nextTick(() => {
+				syncResponsiveItems();
+			});
+		});
+		watch([normalizedOptions, () => props.maxCount], () => {
+			nextTick(() => {
+				syncResponsiveItems();
+			});
+		}, { deep: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createVNode(unref(DefineTagGroupItem), null, {
+					default: withCtx((slotProps) => [(openBlock(), createBlock(resolveDynamicComponent(slotProps.measure ? "span" : "li"), {
+						class: normalizeClass(getItemWrapperClass(slotProps.option, slotProps.measure)),
+						style: normalizeStyle(getItemWrapperStyle(slotProps.option, slotProps.index, slotProps.measure)),
+						"data-measure-item": slotProps.measure && !slotProps.option.isCounter ? "true" : void 0,
+						"data-hidden-count": slotProps.measure && slotProps.option.isCounter ? slotProps.hiddenCount : void 0
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+							data: slotProps.option.raw,
+							option: slotProps.option.raw,
+							label: resolveOptionLabel(slotProps.option),
+							value: slotProps.option.value,
+							index: slotProps.index,
+							itemClass: getItemContentClass(slotProps.option, slotProps.index),
+							itemStyle: getItemContentStyle(slotProps.option, slotProps.index),
+							isOverflow: isCompressedResponsiveItem(slotProps.index, slotProps.option.value),
+							measure: Boolean(slotProps.measure)
+						}, () => [createVNode(unref(Tag), mergeProps(slotProps.option.itemProps, {
+							class: getItemContentClass(slotProps.option, slotProps.index),
+							style: getItemContentStyle(slotProps.option, slotProps.index),
+							visible: true,
+							nowrap: true
+						}), {
+							default: withCtx(() => [_ctx.$slots.label ? renderSlot(_ctx.$slots, "label", {
+								key: 0,
+								data: slotProps.option.raw,
+								option: slotProps.option.raw
+							}) : isCompressedResponsiveItem(slotProps.index, slotProps.option.value) ? (openBlock(), createBlock(unref(Ellipsis), {
+								key: 1,
+								class: normalizeClass(`${unref(prefixCls)}-item-ellipsis`)
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(resolveOptionLabel(slotProps.option)), 1)]),
+								_: 2
+							}, 1032, ["class"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(resolveOptionLabel(slotProps.option)), 1)], 64))]),
+							_: 2
+						}, 1040, ["class", "style"])])]),
+						_: 2
+					}, 1032, [
+						"class",
+						"style",
+						"data-measure-item",
+						"data-hidden-count"
+					]))]),
+					_: 3
+				}),
+				createVNode(unref(DefineTagGroupCounter), null, {
+					default: withCtx((slotProps) => [(openBlock(), createBlock(resolveDynamicComponent(slotProps.measure ? "span" : "li"), {
+						class: normalizeClass(getCounterWrapperClass(slotProps.measure)),
+						"data-hidden-count": slotProps.hiddenCount
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "counter", {
+							label: slotProps.option.label,
+							value: slotProps.option.value,
+							hiddenCount: slotProps.hiddenCount,
+							measure: Boolean(slotProps.measure),
+							counterClass: getCounterContentClass()
+						}, () => [createVNode(unref(Tag), mergeProps(slotProps.option.itemProps, {
+							class: getCounterContentClass(),
+							visible: true,
+							nowrap: true,
+							ellipsis: false
+						}), {
+							default: withCtx(() => [createTextVNode(toDisplayString(slotProps.option.label), 1)]),
+							_: 2
+						}, 1040, ["class"])])]),
+						_: 2
+					}, 1032, ["class", "data-hidden-count"]))]),
+					_: 3
+				}),
+				createElementVNode("span", { class: normalizeClass(cls.value) }, [normalizedOptions.value.length === 0 ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+					isResponsiveMaxCount.value ? (openBlock(), createBlock(unref(resize_observer_default), {
+						key: 0,
+						onResize: handleResize
+					}, {
+						default: withCtx(() => [createElementVNode("span", {
+							class: normalizeClass(`${unref(prefixCls)}-resize-observer`),
+							"aria-hidden": "true"
+						}, null, 2)]),
+						_: 1
+					})) : createCommentVNode("", true),
+					createElementVNode("ul", {
+						ref_key: "innerRef",
+						ref: innerRef,
+						class: normalizeClass(`${unref(prefixCls)}-inner`)
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleOptions.value, (option, index) => {
+						return openBlock(), createBlock(unref(ReuseTagGroupItem), {
+							key: option.key,
+							option,
+							index,
+							"hidden-count": 0
+						}, null, 8, ["option", "index"]);
+					}), 128)), hiddenOptions.value.length > 0 ? (openBlock(), createBlock(unref(Popover), { key: 0 }, {
+						default: withCtx(() => [createVNode(unref(ReuseTagGroupCounter), {
+							option: overflowOption.value,
+							index: visibleOptions.value.length,
+							"hidden-count": hiddenOptions.value.length
+						}, null, 8, [
+							"option",
+							"index",
+							"hidden-count"
+						])]),
+						content: withCtx(() => [createElementVNode("ul", { class: normalizeClass(`${unref(prefixCls)}-popover`) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(hiddenOptions.value, (option, index) => {
+							return openBlock(), createBlock(unref(ReuseTagGroupItem), {
+								key: `hidden-${option.key}`,
+								option,
+								index: visibleOptions.value.length + index,
+								"hidden-count": 0
+							}, null, 8, ["option", "index"]);
+						}), 128))], 2)]),
+						_: 1
+					})) : createCommentVNode("", true)], 2),
+					isResponsiveMaxCount.value && normalizedOptions.value.length > 1 ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						ref_key: "measureRef",
+						ref: measureRef,
+						class: normalizeClass(`${unref(prefixCls)}-measure`),
+						"aria-hidden": "true"
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedOptions.value, (option, index) => {
+						return openBlock(), createBlock(unref(ReuseTagGroupItem), {
+							key: `measure-${option.key}`,
+							option,
+							index,
+							"hidden-count": 0,
+							measure: true
+						}, null, 8, ["option", "index"]);
+					}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(measureCounterOptions.value, (counterOption) => {
+						return openBlock(), createBlock(unref(ReuseTagGroupCounter), {
+							key: `counter-${counterOption.hiddenCount}`,
+							option: counterOption,
+							index: normalizedOptions.value.length,
+							"hidden-count": counterOption.hiddenCount,
+							measure: true
+						}, null, 8, [
+							"option",
+							"index",
+							"hidden-count"
+						]);
+					}), 128))], 2)) : createCommentVNode("", true)
+				], 64))], 2)
+			], 64);
+		};
+	}
+}));
+//#endregion
+export { tag_group_vue_vue_type_script_setup_true_lang_default as default };

package/es/textarea/index.d.ts

@@ -138,7 +138,7 @@ declare const Textarea: {
                 default: boolean;
             };
         }>> & Readonly<{}>, {
-            size: "mini" | "small" | "medium" | "large";
+            size: "small" | "mini" | "medium" | "large";
             disabled: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         IconClose: {
@@ -505,7 +505,7 @@ declare const Textarea: {
             default: boolean;
         };
     }>> & Readonly<{}>, {
-        size: "mini" | "small" | "medium" | "large";
+        size: "small" | "mini" | "medium" | "large";
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconClose: {

package/es/textarea/textarea.vue.d.ts

@@ -183,7 +183,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             default: boolean;
         };
     }>> & Readonly<{}>, {
-        size: "mini" | "small" | "medium" | "large";
+        size: "small" | "mini" | "medium" | "large";
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconClose: {

package/es/textarea/textarea.vue_vue_type_script_lang.js

@@ -1,5 +1,5 @@
 import { useFormItem } from "../_hooks/use-form-item.js";
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isNull, isObject, isUndefined } from "../_utils/is.js";
 import resize_observer_default from "../_components/resize-observer.js";
@@ -22,46 +22,123 @@ var textarea_vue_vue_type_script_lang_default = defineComponent({
 	},
 	inheritAttrs: false,
 	props: {
+		/**
+		* @zh 绑定值
+		* @en Value
+		* @vModel
+		*/
 		modelValue: String,
+		/**
+		* @zh 默认值（非受控状态）
+		* @en Default value (uncontrolled state)
+		*/
 		defaultValue: {
 			type: String,
 			default: ""
 		},
+		/**
+		* @zh 提示文字
+		* @en Placeholder
+		*/
 		placeholder: String,
+		/**
+		* @zh 是否禁用
+		* @en Whether to disable
+		*/
 		disabled: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 是否为错误状态
+		* @en Whether it is an error state
+		*/
 		error: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 输入值的最大长度，errorOnly 属性在 2.12.0 版本添加
+		* @en Maximum length of input value, the errorOnly attribute was added in version 2.12.0
+		*/
 		maxLength: {
 			type: [Number, Object],
 			default: 0
 		},
+		/**
+		* @zh 是否显示字数统计
+		* @en Whether to display word count
+		*/
 		showWordLimit: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 是否允许清空文本域
+		* @en Whether to allow clearing the text
+		*/
 		allowClear: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		* @zh 是否让文本框自适应内容高度
+		* @en Whether to make the textarea adapt to the height of the content
+		*/
 		autoSize: {
 			type: [Boolean, Object],
 			default: false
 		},
+		/**
+		* @zh 字符长度的计算方法
+		* @en Calculation method of word length
+		*/
 		wordLength: { type: Function },
+		/**
+		* @zh 字符截取方法，同 wordLength 一起使用
+		* @en Character interception method, used together with wordLength
+		* @version 2.12.0
+		*/
 		wordSlice: { type: Function },
+		/**
+		* @zh 透传给 textarea 的属性
+		* @en Attributes passed to textarea
+		*/
 		textareaAttrs: { type: Object }
 	},
 	emits: {
 		"update:modelValue": (_value) => true,
+		/**
+		* @zh 用户输入时触发
+		* @en Emitted when the user enters
+		* @param {string} value
+		* @param {Event} ev
+		*/
 		"input": (_value, _ev) => true,
+		/**
+		* @zh 仅在文本框失焦时触发
+		* @en Only emitted when the textarea is out of focus
+		* @param {string} value
+		* @param {Event} ev
+		*/
 		"change": (_value, _ev) => true,
+		/**
+		* @zh 点击清除按钮时触发
+		* @en Emitted when the clear button is clicked
+		* @param {MouseEvent} ev
+		*/
 		"clear": (_ev) => true,
+		/**
+		* @zh 文本框获取焦点时触发
+		* @en Emitted when the textarea gets focus
+		* @param {FocusEvent} ev
+		*/
 		"focus": (_ev) => true,
+		/**
+		* @zh 文本框失去焦点时触发
+		* @en Emitted when the textarea loses focus
+		* @param {FocusEvent} ev
+		*/
 		"blur": (_ev) => true
 	},
 	setup(props, { emit, attrs }) {
@@ -281,10 +358,22 @@ var textarea_vue_vue_type_script_lang_default = defineComponent({
 		};
 	},
 	methods: {
+		/**
+		* @zh 使输入框获取焦点
+		* @en Make the input box focus
+		* @public
+		* @version 2.24.0
+		*/
 		focus() {
 			var _this$$refs$textareaR;
 			(_this$$refs$textareaR = this.$refs.textareaRef) === null || _this$$refs$textareaR === void 0 || _this$$refs$textareaR.focus();
 		},
+		/**
+		* @zh 使输入框失去焦点
+		* @en Make the input box lose focus
+		* @public
+		* @version 2.24.0
+		*/
 		blur() {
 			var _this$$refs$textareaR2;
 			(_this$$refs$textareaR2 = this.$refs.textareaRef) === null || _this$$refs$textareaR2 === void 0 || _this$$refs$textareaR2.blur();