@sdata/web-vue 1.19.0 → 2.1.1

package/es/tag/tag.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,368 @@
+import { configProviderInjectionKey } from "../config-provider/context.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import icon_hover_default from "../_components/icon-hover.js";
+import IconClose from "../icon/icon-close/index.js";
+import IconLoading from "../icon/icon-loading/index.js";
+import { useSize } from "../_hooks/use-size.js";
+import Ellipsis, { PerformantEllipsis } from "../ellipsis/index.js";
+import { extractColorsFromGradient, isGradientString } from "../_utils/color.js";
+import { TAG_COLORS } from "./interface.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, unref, useSlots, withCtx, withModifiers } from "vue";
+import chroma from "chroma-js";
+import { isNil } from "es-toolkit/compat";
+//#region components/tag/tag.vue?vue&type=script&setup=true&lang.ts
+var tag_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "Tag" }), {}, {
+	__name: "tag",
+	props: {
+		/**
+		* @zh 标签的颜色
+		* @en Label color
+		* @values 'red','orangered','orange','gold','lime','green','cyan','blue','sdblue','purple','pinkpurple','magenta','gray'
+		*/
+		color: { type: String },
+		/**
+		* @zh 标签的大小
+		* @en Label size
+		* @values 'small','medium','large'
+		* @defaultValue 'medium'
+		*/
+		size: { type: String },
+		/**
+		* @zh 是否显示边框
+		* @en Whether the tag is bordered
+		* @version 2.33.0
+		*/
+		bordered: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 标签是否可见
+		* @en Whether the tag is visible
+		* @vModel
+		*/
+		visible: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* @zh 标签默认是否可见
+		* @en Whether the tag is visible by default
+		*/
+		defaultVisible: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 标签是否为加载中状态
+		* @en Whether the tag is loading state
+		*/
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 标签是否可关闭
+		* @en Whether the tag can be closed
+		*/
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 标签是否可选中
+		* @en Whether the tag can be checked
+		*/
+		checkable: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 标签是否选中（标签可选中时可用）
+		* @en Whether the tag is checked (available when the tag is checkable)
+		* @vModel
+		*/
+		checked: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* @zh 标签默认选中状态（标签可选中时可用）
+		* @en Whether the tag is checked by default (available when the tag is checkable)
+		*/
+		defaultChecked: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 标签内容不换行
+		* @en Tag content does not wrap
+		* @version 2.56.1
+		*/
+		nowrap: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* @zh 是否开启默认内容省略
+		* @en Whether to enable ellipsis for the default slot content
+		* @defaultValue true
+		*/
+		ellipsis: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* @zh 默认内容省略的最大显示行数
+		* @en Maximum number of displayed lines for ellipsis content
+		*/
+		ellipsisLineClamp: {
+			type: [Number, String],
+			default: void 0
+		},
+		/**
+		* @zh 省略内容的展开触发方式
+		* @en Trigger mode for ellipsis expansion
+		* @values 'click'
+		*/
+		ellipsisExpandTrigger: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* @zh 省略时是否展示提示。可传入 Tooltip 属性。
+		* @en Whether to show a tooltip when ellipsis is active. Tooltip props are supported.
+		* @defaultValue true
+		*/
+		ellipsisTooltip: {
+			type: [Boolean, Object],
+			default: true
+		},
+		/**
+		* @zh 是否使用高性能省略实现
+		* @en Whether to use the performant ellipsis implementation
+		*/
+		ellipsisPerformant: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 自定义颜色的文字颜色，仅在自定义颜色时生效
+		* @en Text color for custom color tags, only effective when using a custom color
+		*/
+		textColor: {
+			type: String,
+			default: void 0
+		},
+		/**
+		* @zh 自定义颜色的背景透明度，仅在自定义颜色时生效，默认 0.8
+		* @en Background opacity for custom color tags, only effective when using a custom color, default 0.8
+		*/
+		backgroundAlpha: {
+			type: Number,
+			default: .8
+		}
+	},
+	emits: [
+		"update:visible",
+		"update:checked",
+		"close",
+		"check"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const prefixCls = getPrefixCls("tag");
+		const { mergedSize: _mergedSize } = useSize(computed(() => props.size));
+		const configCtx = inject(configProviderInjectionKey, void 0);
+		const _visible = ref(props.defaultVisible);
+		const _checked = ref(props.defaultChecked);
+		const isBuiltInColor = computed(() => props.color && TAG_COLORS.includes(props.color));
+		const isCustomColor = computed(() => props.color && !TAG_COLORS.includes(props.color));
+		const resolvedColor = computed(() => {
+			if (!isCustomColor.value) return props.color;
+			try {
+				const dom = document.createElement("div");
+				dom.style.color = props.color;
+				document.body.appendChild(dom);
+				const computedColor = window.getComputedStyle(dom).color;
+				document.body.removeChild(dom);
+				return computedColor;
+			} catch (_unused) {
+				return props.color;
+			}
+		});
+		const isGradientColor = computed(() => isGradientString(resolvedColor.value));
+		computed(() => {
+			if (isBuiltInColor.value) return resolvedColor.value;
+		});
+		const resolvedBackgroundColor = computed(() => {
+			if (isBuiltInColor.value) return;
+			return resolvedColor.value;
+		});
+		const autoTextColor = computed(() => {
+			if (isBuiltInColor.value) return;
+			if (!resolvedColor.value) return;
+			try {
+				const rawColor = resolvedColor.value;
+				const bg = isGradientColor.value ? chroma.average(extractColorsFromGradient(rawColor), "rgb") : chroma(rawColor);
+				const contrastWhite = chroma.contrast(bg, "white");
+				if (contrastWhite >= 4.5) return "#FFFFFF";
+				const [h, s] = bg.hsl();
+				if (isNaN(h) || s < .02) return "#1D2129";
+				let targetH = h;
+				if (h >= 130 && h <= 200) targetH += 10;
+				const targetS = Math.min(s + .4, .9);
+				let bestL = .15;
+				for (let curL = .5; curL >= .1; curL -= .01) {
+					const tempColor = chroma.hsl(targetH, targetS, curL);
+					if (chroma.contrast(bg, tempColor) >= 2) {
+						bestL = curL;
+						break;
+					}
+				}
+				const colorfulDark = chroma.hsl(targetH, targetS, bestL);
+				const contrastDark = chroma.contrast(bg, colorfulDark);
+				if (contrastWhite > contrastDark) return "#FFFFFF";
+				if (contrastDark < 2) return "#1D2129";
+				return colorfulDark.css();
+			} catch (_unused2) {
+				return "#FFFFFF";
+			}
+		});
+		const finalTextColor = computed(() => {
+			var _props$textColor;
+			return (_props$textColor = props.textColor) !== null && _props$textColor !== void 0 ? _props$textColor : autoTextColor.value;
+		});
+		const finalBackgroundAlpha = computed(() => {
+			return isNil(props.bordered) ? 1 : props.backgroundAlpha;
+		});
+		const computedVisible = computed(() => {
+			var _props$visible;
+			return (_props$visible = props.visible) !== null && _props$visible !== void 0 ? _props$visible : _visible.value;
+		});
+		const computedChecked = computed(() => {
+			var _props$checked;
+			return props.checkable ? (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : _checked.value : true;
+		});
+		const mergedSize = computed(() => {
+			if (_mergedSize.value === "mini") return "small";
+			return _mergedSize.value;
+		});
+		const hasDefaultSlot = computed(() => Boolean(slots.default));
+		const resolvedEllipsis = computed(() => {
+			var _ref, _props$ellipsis;
+			return (_ref = (_props$ellipsis = props.ellipsis) !== null && _props$ellipsis !== void 0 ? _props$ellipsis : props.nowrap) !== null && _ref !== void 0 ? _ref : true;
+		});
+		const shouldRenderEllipsis = computed(() => resolvedEllipsis.value && hasDefaultSlot.value);
+		const hasLineClampEllipsis = computed(() => shouldRenderEllipsis.value && props.ellipsisLineClamp !== void 0);
+		const ellipsisComponent = computed(() => props.ellipsisPerformant ? PerformantEllipsis : Ellipsis);
+		const rtl = computed(() => {
+			var _configCtx$rtl;
+			return (_configCtx$rtl = configCtx === null || configCtx === void 0 ? void 0 : configCtx.rtl) !== null && _configCtx$rtl !== void 0 ? _configCtx$rtl : false;
+		});
+		const cls = computed(() => [
+			prefixCls,
+			`${prefixCls}-size-${mergedSize.value}`,
+			{
+				[`${prefixCls}-ellipsis`]: shouldRenderEllipsis.value,
+				[`${prefixCls}-ellipsis-line-clamp`]: hasLineClampEllipsis.value,
+				[`${prefixCls}-loading`]: props.loading,
+				[`${prefixCls}-hide`]: !computedVisible.value,
+				[`${prefixCls}-no-ellipsis`]: !shouldRenderEllipsis.value,
+				[`${prefixCls}-${props.color}`]: isBuiltInColor.value,
+				[`${prefixCls}-bordered`]: props.bordered,
+				[`${prefixCls}-checkable`]: props.checkable,
+				[`${prefixCls}-checked`]: computedChecked.value,
+				[`${prefixCls}-custom-color`]: isCustomColor.value,
+				[`${prefixCls}-rtl`]: rtl.value
+			}
+		]);
+		const style = computed(() => {
+			if (isCustomColor.value && resolvedColor.value) {
+				const styleObj = {};
+				if (finalTextColor.value) styleObj["--sd-tag-color"] = finalTextColor.value;
+				try {
+					styleObj["--sd-tag-bg-color"] = (isGradientColor.value ? chroma.average(extractColorsFromGradient(resolvedColor.value), "rgb") : chroma(resolvedColor.value)).alpha(finalBackgroundAlpha.value).css();
+				} catch (_unused3) {
+					styleObj["--sd-tag-bg-color"] = resolvedColor.value;
+				}
+				if (!isNil(props.bordered)) styleObj["--sd-tag-border-color"] = resolvedBackgroundColor.value;
+				return styleObj;
+			}
+		});
+		const handleClose = (ev) => {
+			_visible.value = false;
+			emit("update:visible", false);
+			emit("close", ev);
+		};
+		const handleCloseKeydown = (ev) => {
+			if (ev.key !== "Enter" && ev.key !== " ") return;
+			handleClose(ev);
+		};
+		const handleClick = (ev) => {
+			if (props.checkable) {
+				const newChecked = !computedChecked.value;
+				_checked.value = newChecked;
+				emit("update:checked", newChecked);
+				emit("check", newChecked, ev);
+			}
+		};
+		return (_ctx, _cache) => {
+			return computedVisible.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(cls.value),
+				style: normalizeStyle(style.value),
+				onClick: handleClick
+			}, [
+				_ctx.$slots.icon ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-icon`)
+				}, [renderSlot(_ctx.$slots, "icon")], 2)) : createCommentVNode("", true),
+				shouldRenderEllipsis.value ? (openBlock(), createBlock(resolveDynamicComponent(ellipsisComponent.value), {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-text`),
+					"line-clamp": __props.ellipsisLineClamp,
+					"expand-trigger": __props.ellipsisExpandTrigger,
+					tooltip: __props.ellipsisTooltip
+				}, createSlots({
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 2
+				}, [_ctx.$slots.tooltip ? {
+					name: "tooltip",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "tooltip")]),
+					key: "0"
+				} : void 0]), 1032, [
+					"class",
+					"line-clamp",
+					"expand-trigger",
+					"tooltip"
+				])) : _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(`${unref(prefixCls)}-text`)
+				}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true),
+				__props.closable ? (openBlock(), createBlock(icon_hover_default, {
+					key: 3,
+					tabindex: "0",
+					role: "button",
+					"aria-label": "Close",
+					prefix: unref(prefixCls),
+					class: normalizeClass(`${unref(prefixCls)}-close-btn`),
+					onClick: withModifiers(handleClose, ["stop"]),
+					onKeydown: withModifiers(handleCloseKeydown, ["stop", "prevent"])
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "close-icon", {}, () => [createVNode(unref(IconClose))])]),
+					_: 3
+				}, 8, ["prefix", "class"])) : createCommentVNode("", true),
+				__props.loading ? (openBlock(), createElementBlock("span", {
+					key: 4,
+					class: normalizeClass(`${unref(prefixCls)}-loading-icon`)
+				}, [createVNode(unref(IconLoading))], 2)) : createCommentVNode("", true)
+			], 6)) : createCommentVNode("", true);
+		};
+	}
+}));
+//#endregion
+export { tag_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -1,4 +1,4 @@
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/objectSpread2.js";
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import resize_observer_default from "../_components/resize-observer.js";
 import Popover from "../popover/index.js";
@@ -6,11 +6,11 @@ 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 { isNumber } from "es-toolkit/compat";
 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" }), {}, {
+var tag_group_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "TagGroup" }), {}, {
 	__name: "tag-group",
 	props: {
 		maxCount: { default: "responsive" },
@@ -42,7 +42,7 @@ var tag_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		}
 		function normalizeOption(option, index) {
 			const { label = "label", value = "value" } = props.fieldNames;
-			if (isString(option) || isNumber$1(option)) return {
+			if (isString(option) || isNumber(option)) return {
 				key: `${String(option)}-${index}`,
 				label: option,
 				value: option,

package/es/textarea/index.d.ts

@@ -49,8 +49,8 @@ declare const Textarea: {
             type: import("vue").PropType<Record<string, any>>;
         };
     }>> & Readonly<{
-        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: MouseEvent) => any) | undefined;
+        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onChange?: ((_value: string, _ev: Event) => any) | undefined;
         onInput?: ((_value: string, _ev: Event) => any) | undefined;
@@ -92,8 +92,8 @@ declare const Textarea: {
         focus: (_ev: FocusEvent) => true;
         blur: (_ev: FocusEvent) => true;
     }, import("vue").PublicProps, {
-        error: boolean;
         disabled: boolean;
+        error: boolean;
         defaultValue: string;
         allowClear: boolean;
         maxLength: number | {
@@ -125,7 +125,7 @@ declare const Textarea: {
             };
         }>, {
             prefixCls: string;
-        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             prefix: {
                 type: StringConstructor;
             };
@@ -137,8 +137,10 @@ declare const Textarea: {
                 type: BooleanConstructor;
                 default: boolean;
             };
-        }>> & Readonly<{}>, {
-            size: "small" | "mini" | "medium" | "large";
+        }>> & Readonly<{
+            onClick?: ((...args: any[]) => any) | undefined;
+        }>, {
+            size: "medium" | "large" | "small" | "mini";
             disabled: boolean;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         IconClose: {
@@ -316,8 +318,8 @@ declare const Textarea: {
             type: import("vue").PropType<Record<string, any>>;
         };
     }>> & Readonly<{
-        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onClear?: ((_ev: MouseEvent) => any) | undefined;
+        onFocus?: ((_ev: FocusEvent) => any) | undefined;
         onBlur?: ((_ev: FocusEvent) => any) | undefined;
         onChange?: ((_value: string, _ev: Event) => any) | undefined;
         onInput?: ((_value: string, _ev: Event) => any) | undefined;
@@ -352,8 +354,8 @@ declare const Textarea: {
         focus(): void;
         blur(): void;
     }, {
-        error: boolean;
         disabled: boolean;
+        error: boolean;
         defaultValue: string;
         allowClear: boolean;
         maxLength: number | {
@@ -416,8 +418,8 @@ declare const Textarea: {
         type: import("vue").PropType<Record<string, any>>;
     };
 }>> & Readonly<{
-    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: MouseEvent) => any) | undefined;
+    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onChange?: ((_value: string, _ev: Event) => any) | undefined;
     onInput?: ((_value: string, _ev: Event) => any) | undefined;
@@ -459,8 +461,8 @@ declare const Textarea: {
     focus: (_ev: FocusEvent) => true;
     blur: (_ev: FocusEvent) => true;
 }, string, {
-    error: boolean;
     disabled: boolean;
+    error: boolean;
     defaultValue: string;
     allowClear: boolean;
     maxLength: number | {
@@ -492,7 +494,7 @@ declare const Textarea: {
         };
     }>, {
         prefixCls: string;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         prefix: {
             type: StringConstructor;
         };
@@ -504,8 +506,10 @@ declare const Textarea: {
             type: BooleanConstructor;
             default: boolean;
         };
-    }>> & Readonly<{}>, {
-        size: "small" | "mini" | "medium" | "large";
+    }>> & Readonly<{
+        onClick?: ((...args: any[]) => any) | undefined;
+    }>, {
+        size: "medium" | "large" | "small" | "mini";
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconClose: {

package/es/textarea/style/index.css

@@ -26,33 +26,33 @@
   width: 100%;
   padding-right: 12px;
   padding-left: 12px;
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
   font-size: 14px;
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
   border: 1px solid transparent;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
   cursor: text;
   transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-textarea-wrapper:hover {
-  background-color: var(--color-fill-3);
+  background-color: var(--sd-color-fill-3);
   border-color: transparent;
 }
 .sd-textarea-wrapper:focus-within, .sd-textarea-wrapper.sd-textarea-focus {
   z-index: 1;
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--primary-6));
-  box-shadow: 0 0 0 0 var(--color-primary-light-2);
+  background-color: var(--sd-color-bg-2);
+  border-color: rgb(var(--sd-primary-6));
+  box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
 }
 .sd-textarea-wrapper.sd-textarea-disabled {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-fill-2);
   border-color: transparent;
   cursor: not-allowed;
 }
 .sd-textarea-wrapper.sd-textarea-disabled:hover {
-  color: var(--color-text-4);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-4);
+  background-color: var(--sd-color-fill-2);
   border-color: transparent;
 }
 .sd-textarea-wrapper.sd-textarea-disabled .sd-textarea-prefix,
@@ -60,18 +60,18 @@
   color: inherit;
 }
 .sd-textarea-wrapper.sd-textarea-error {
-  background-color: var(--color-danger-light-1);
+  background-color: var(--sd-color-danger-light-1);
   border-color: transparent;
 }
 .sd-textarea-wrapper.sd-textarea-error:hover {
-  background-color: var(--color-danger-light-2);
+  background-color: var(--sd-color-danger-light-2);
   border-color: transparent;
 }
 .sd-textarea-wrapper.sd-textarea-error:focus-within, .sd-textarea-wrapper.sd-textarea-error.sd-textarea-wrapper-focus {
   z-index: 1;
-  background-color: var(--color-bg-2);
-  border-color: rgb(var(--danger-6));
-  box-shadow: 0 0 0 0 var(--color-danger-light-2);
+  background-color: var(--sd-color-bg-2);
+  border-color: rgb(var(--sd-danger-6));
+  box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
 }
 .sd-textarea-wrapper .sd-textarea-prefix,
 .sd-textarea-wrapper .sd-textarea-suffix {
@@ -87,30 +87,30 @@
 }
 .sd-textarea-wrapper .sd-textarea-prefix {
   padding-right: 12px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-textarea-wrapper .sd-textarea-suffix {
   padding-left: 12px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon {
   display: inline-flex;
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon-status-validating {
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon-status-success {
-  color: rgb(var(--success-6));
+  color: rgb(var(--sd-success-6));
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon-status-warning {
-  color: rgb(var(--warning-6));
+  color: rgb(var(--sd-warning-6));
 }
 .sd-textarea-wrapper .sd-textarea-suffix .sd-feedback-icon-status-error {
-  color: rgb(var(--danger-6));
+  color: rgb(var(--sd-danger-6));
 }
 .sd-textarea-wrapper .sd-textarea-clear-btn {
   align-self: center;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 12px;
   visibility: hidden;
   cursor: pointer;
@@ -123,7 +123,7 @@
   visibility: visible;
 }
 .sd-textarea-wrapper:not(.sd-textarea-focus) .sd-textarea-icon-hover:hover::before {
-  background-color: var(--color-fill-4);
+  background-color: var(--sd-color-fill-4);
 }
 .sd-textarea-wrapper {
   position: relative;
@@ -137,7 +137,7 @@
   position: absolute;
   right: 10px;
   bottom: 6px;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   font-size: 12px;
   user-select: none;
 }
@@ -176,13 +176,13 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .sd-textarea::placeholder {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-textarea[disabled]::placeholder {
-  color: var(--color-text-4);
+  color: var(--sd-color-text-4);
 }
 .sd-textarea[disabled] {
-  -webkit-text-fill-color: var(--color-text-4);
+  -webkit-text-fill-color: var(--sd-color-text-4);
 }
 .sd-textarea {
   display: block;

package/es/textarea/textarea.js

@@ -52,6 +52,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		})], 2)) : createCommentVNode("", true)
 	], 16);
 }
-var textarea_default = /* @__PURE__ */ _plugin_vue_export_helper_default(textarea_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(textarea_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { textarea_default as default };

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

@@ -130,15 +130,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<Record<string, any>>;
     };
 }>> & Readonly<{
-    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onClear?: ((_ev: MouseEvent) => any) | undefined;
+    onFocus?: ((_ev: FocusEvent) => any) | undefined;
     onBlur?: ((_ev: FocusEvent) => any) | undefined;
     onChange?: ((_value: string, _ev: Event) => any) | undefined;
     onInput?: ((_value: string, _ev: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
 }>, {
-    error: boolean;
     disabled: boolean;
+    error: boolean;
     defaultValue: string;
     allowClear: boolean;
     maxLength: number | {
@@ -170,7 +170,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         };
     }>, {
         prefixCls: string;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         prefix: {
             type: StringConstructor;
         };
@@ -182,8 +182,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
             type: BooleanConstructor;
             default: boolean;
         };
-    }>> & Readonly<{}>, {
-        size: "small" | "mini" | "medium" | "large";
+    }>> & Readonly<{
+        onClick?: ((...args: any[]) => any) | undefined;
+    }>, {
+        size: "medium" | "large" | "small" | "mini";
         disabled: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconClose: {