@veltra/desktop 1.1.22 → 1.1.23

package/dist/components/action/action-group.vue.d.ts

@@ -8,9 +8,9 @@ type __VLS_Slots = {
   default?: () => VNode[];
 };
 declare const __VLS_base: _$vue.DefineComponent<ActionGroupProps, _ActionGroupExposed, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ActionGroupProps> & Readonly<{}>, {
-  size: "small" | "default" | "large";
   type: _$_veltra_utils0.ColorType;
   text: boolean;
+  size: "small" | "default" | "large";
   circle: boolean;
   max: number;
   loading: boolean;

package/dist/components/action/action.vue.d.ts

@@ -15,9 +15,9 @@ declare const __VLS_base: _$vue.DefineComponent<ActionProps, {}, {}, {}, {}, _$v
 }, string, _$vue.PublicProps, Readonly<ActionProps> & Readonly<{
   onRun?: (() => any) | undefined;
 }>, {
-  size: _$_veltra_utils0.ComponentSize;
   type: ButtonType;
   text: boolean;
+  size: _$_veltra_utils0.ComponentSize;
   circle: boolean;
   loading: boolean;
   inDropdown: boolean;

package/dist/components/auto-complete/auto-complete.vue.d.ts

@@ -25,9 +25,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   onSelect?: ((value: string) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/cascade/cascade.vue.d.ts

@@ -12,7 +12,6 @@ declare const __VLS_export: _$vue.DefineComponent<CascadeProps, {}, {}, {}, {},
   onChange?: ((...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
   childrenKey: string;
@@ -20,6 +19,7 @@ declare const __VLS_export: _$vue.DefineComponent<CascadeProps, {}, {}, {}, {},
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
+  readonly: boolean;
   visibilityLimit: number;
   separator: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/checkbox/checkbox-button.vue.d.ts

@@ -21,8 +21,8 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   onChange?: ((checked: boolean) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   type: _$_veltra_utils0.ColorType;
+  readonly: boolean;
   round: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/checkbox-group/checkbox-group.vue.d.ts

@@ -15,9 +15,9 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-panel/date-panel.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_export: _$vue.DefineComponent<DatePanelProps, {}, {}, {}, {}
   "onSelect:range-date"?: ((rangeDate?: [_$_cat_kit_core0.Dater, _$_cat_kit_core0.Dater] | undefined) => any) | undefined;
   "onSelect:date"?: ((date: _$_cat_kit_core0.Dater) => any) | undefined;
 }>, {
-  size: _$_veltra_utils0.ComponentSize;
   type: "date" | "month" | "year";
+  size: _$_veltra_utils0.ComponentSize;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-picker/date-picker.vue.d.ts

@@ -8,10 +8,10 @@ declare const __VLS_export: _$vue.DefineComponent<DatePickerProps, {}, {}, {}, {
   "onUpdate:modelValue"?: ((value?: string | number | Date | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   type: "date" | "month" | "year";
   placeholder: string;
   clearable: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/date-range-picker/date-range-picker.vue.d.ts

@@ -8,10 +8,10 @@ declare const __VLS_export: _$vue.DefineComponent<DateRangePickerProps, {}, {},
   "onUpdate:modelValue"?: ((value?: [string, string] | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   type: "date" | "month" | "year";
   placeholder: [string, string];
   clearable: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/drawer/drawer.vue.d.ts

@@ -14,12 +14,12 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: boolean) => any;
 } & {
-  "update:modelValue": (value: boolean) => any;
   close: () => any;
+  "update:modelValue": (value: boolean) => any;
   closed: () => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
   onClose?: (() => any) | undefined;
+  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
   onClosed?: (() => any) | undefined;
 }>, {
   direction: DrawerDirection;

package/dist/components/empty/empty.vue.d.ts

@@ -3,8 +3,8 @@ import * as _$vue from "vue";
 
 //#region src/components/empty/empty.vue.d.ts
 declare const __VLS_export: _$vue.DefineComponent<EmptyProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<EmptyProps> & Readonly<{}>, {
-  size: number;
   text: string;
+  size: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/file-viewer/file-viewer.vue.d.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, _FileViewer
   }) => any) | undefined;
   "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-  modelValue: string;
   open: boolean;
+  modelValue: string;
   sidebarWidth: string | number | false;
   sheetMaxRows: number;
   downloadable: boolean;

package/dist/components/input/input.vue.d.ts

@@ -35,9 +35,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, _InputExposed
   "onNative:input"?: ((ev: Event) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/input/style2.css

@@ -35,6 +35,7 @@
   height: var(--u-form-component-height-small);
   border-radius: var(--u-radius-small);
   padding: 0 calc(var(--u-gap-small) / 2);
+  font-size: var(--u-font-size-main-small);
 }
 .u-input--small .u-input__native {
   height: var(--u-form-component-height-small);
@@ -44,6 +45,7 @@
   height: var(--u-form-component-height-default);
   border-radius: var(--u-radius-default);
   padding: 0 calc(var(--u-gap-default) / 2);
+  font-size: var(--u-font-size-main-default);
 }
 .u-input--default .u-input__native {
   height: var(--u-form-component-height-default);
@@ -53,6 +55,7 @@
   height: var(--u-form-component-height-large);
   border-radius: var(--u-radius-large);
   padding: 0 calc(var(--u-gap-large) / 2);
+  font-size: var(--u-font-size-main-large);
 }
 .u-input--large .u-input__native {
   height: var(--u-form-component-height-large);
@@ -68,7 +71,7 @@
   width: 100%;
   flex-grow: 1;
   color: var(--u-text-color-main);
-  font-size: 1em;
+  font-size: inherit;
   padding: 0;
   font-family: var(--u-font-family);
 }
@@ -80,7 +83,7 @@
   color: var(--u-text-color-placeholder);
 }
 .u-input__prefix, .u-input__suffix {
-  font-size: 14px;
+  font-size: inherit;
   color: var(--u-text-color-main);
   flex-shrink: 0;
   min-width: 20px;

package/dist/components/multi-select/multi-select.vue.d.ts

@@ -28,13 +28,13 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
   onChange?: ((options: Record<string, any>[]) => any) | undefined;
 }>, {
+  minWidth: string;
   disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
-  minWidth: string;
+  readonly: boolean;
   visibilityLimit: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts

@@ -22,15 +22,15 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   onClear?: (() => any) | undefined;
   onChange?: ((checked: Record<string, any>[]) => any) | undefined;
 }>, {
+  minWidth: string;
   disabled: boolean;
-  readonly: boolean;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  minWidth: string;
+  readonly: boolean;
   visibilityLimit: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/number-input/number-input.vue.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   onChange?: ((value?: number | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/number-range-input/number-range-input.vue.d.ts

@@ -25,11 +25,11 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   "onUpdate:end"?: ((value: number | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   clearable: boolean;
-  separator: string;
+  readonly: boolean;
   startPlaceholder: string;
   endPlaceholder: string;
+  separator: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/password-input/password-input.js

@@ -1,9 +1,9 @@
 import _sfc_main$1 from "../icon/icon.js";
 import input_default from "../input/input.js";
-import { Transition, computed, createBlock, createSlots, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, renderSlot, shallowRef, unref, useModel, useSlots, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementVNode, createSlots, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, renderSlot, shallowRef, unref, useModel, useSlots, withCtx, withModifiers } from "vue";
 import { useFormFallbackProps } from "@veltra/compositions";
 import { bem, injectFormContext } from "@veltra/utils";
-import { Hide, View } from "@veltra/icons/normal";
+import { Close, Hide, View } from "@veltra/icons/normal";
 import { o } from "@cat-kit/core";
 //#region src/components/password-input/password-input.vue
 const passwordChar = "●";
@@ -50,7 +50,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		});
 		const inputProps = computed(() => {
 			return o(props).pick([
-				"clearable",
 				"disabled",
 				"placeholder",
 				"size"
@@ -58,6 +57,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		});
 		const cls = bem("password-input");
 		const model = useModel(__props, "modelValue");
+		const hovered = ref(false);
+		const handleMouseEnter = () => {
+			hovered.value = true;
+		};
+		const handleMouseLeave = () => {
+			hovered.value = false;
+		};
+		const showClear = computed(() => {
+			return props.clearable && !disabled.value && !!model.value && hovered.value;
+		});
 		const handleUpdatePwd = (e) => {
 			const target = e.target;
 			const val = target.value;
@@ -101,20 +110,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 				size: unref(size),
 				readonly: unref(readonly),
 				disabled: unref(disabled),
+				clearable: false,
 				"onNative:input": handleUpdatePwd,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => !$event && handleClear()),
-				"onSuffix:click": toggleVisible
+				onMouseenter: handleMouseEnter,
+				onMouseleave: handleMouseLeave
 			}), createSlots({
-				suffix: withCtx(() => [createVNode(Transition, { name: "fade" }, {
-					default: withCtx(() => [createVNode(unref(_sfc_main$1), {
-						class: normalizeClass(unref(cls).e("visibility-toggle")),
-						size: 18
-					}, {
-						default: withCtx(() => [pwdVisible.value ? (openBlock(), createBlock(unref(Hide), { key: 0 })) : (openBlock(), createBlock(unref(View), { key: 1 }))]),
-						_: 1
-					}, 8, ["class"])]),
+				suffix: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(cls).e("suffix")) }, [showClear.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
+					key: 0,
+					class: normalizeClass(unref(cls).e("clear")),
+					title: "清除",
+					onClick: withModifiers(handleClear, ["stop"])
+				}, {
+					default: withCtx(() => [createVNode(unref(Close))]),
+					_: 1
+				}, 8, ["class"])) : createCommentVNode("v-if", true), createVNode(unref(_sfc_main$1), {
+					class: normalizeClass(unref(cls).e("visibility-toggle")),
+					size: 18,
+					onClick: withModifiers(toggleVisible, ["stop"])
+				}, {
+					default: withCtx(() => [pwdVisible.value ? (openBlock(), createBlock(unref(Hide), { key: 0 })) : (openBlock(), createBlock(unref(View), { key: 1 }))]),
 					_: 1
-				})]),
+				}, 8, ["class"])], 2)]),
 				_: 2
 			}, [slots.prefix ? {
 				name: "prefix",

package/dist/components/password-input/password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n  <u-input\n    :class=\"cls.b\"\n    :model-value=\"passwordText\"\n    v-bind=\"inputProps\"\n    :size=\"size\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    @native:input=\"handleUpdatePwd\"\n    @update:model-value=\"!$event && handleClear()\"\n    @suffix:click=\"toggleVisible\"\n  >\n    <template #suffix>\n      <Transition name=\"fade\">\n        <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\">\n          <Hide v-if=\"pwdVisible\" />\n          <View v-else />\n        </UIcon>\n      </Transition>\n    </template>\n\n    <template #prefix v-if=\"slots.prefix\">\n      <slot name=\"prefix\" />\n    </template>\n  </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({\n  name: 'PasswordInput'\n})\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n  clearable: false,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst slots = defineSlots<{\n  prefix?: () => any\n}>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst inputProps = computed(() => {\n  return o(props).pick(['clearable', 'disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n  const target = e.target as HTMLInputElement\n  const val = target.value\n  if (!val) {\n    model.value = val\n    return\n  }\n\n  // 字符从无到有\n  if (!model.value) {\n    model.value = val\n    return\n  }\n\n  const pointIndex = target.selectionStart!\n  let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n  if (inputChar === passwordChar) inputChar = ''\n\n  // 光标右侧字符数量（当前字符长度减去光标位置）\n  const rightLen = val.length - pointIndex\n  // 光标左侧字符数量 （当光标前的字符是刚刚输入的，则为这个字符前的所有的字符，否则为光标前的所有赐福）\n  const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n  const leftVal = model.value.slice(0, leftLen)\n  const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n  model.value = leftVal + inputChar + rightVal\n\n  nextTick(() => {\n    target.selectionStart = pointIndex\n    target.selectionEnd = pointIndex\n  })\n}\n\nconst handleClear = (): void => {\n  model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n  if (pwdVisible.value) return model.value\n  return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n  pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":";;;;;;;;AAqEA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA1BrB,MAAM,QAAQ;EAMd,MAAM,QAAQ,UAAA;EAId,MAAM,EAAE,cAAc,mBAAkB;EAExC,MAAM,EAAE,MAAM,UAAU,aAAa,qBAAqB,CAAC,aAAa,EAAC,EAAG,MAAK,EAAG;GAClF,MAAM;GACN,UAAU;GACV,UAAU;GACX,CAAA;EAED,MAAM,aAAa,eAAe;GAChC,OAAO,EAAE,MAAK,CAAE,KAAK;IAAC;IAAa;IAAY;IAAe;IAAO,CAAA;IACtE;EAED,MAAM,MAAM,IAAI,iBAAgB;EAEhC,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAIlC,MAAM,mBAAmB,MAAmB;GAC1C,MAAM,SAAS,EAAE;GACjB,MAAM,MAAM,OAAO;GACnB,IAAI,CAAC,KAAK;IACR,MAAM,QAAQ;IACd;;GAIF,IAAI,CAAC,MAAM,OAAO;IAChB,MAAM,QAAQ;IACd;;GAGF,MAAM,aAAa,OAAO;GAC1B,IAAI,YAAY,eAAe,IAAI,KAAK,IAAI,aAAa;GACzD,IAAI,cAAc,cAAc,YAAY;GAG5C,MAAM,WAAW,IAAI,SAAS;GAE9B,MAAM,UAAU,cAAc,KAAK,aAAa,aAAa;GAE7D,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,QAAO;GAC5C,MAAM,WAAW,aAAa,IAAI,KAAK,MAAM,MAAM,MAAM,CAAC,SAAQ;GAElE,MAAM,QAAQ,UAAU,YAAY;GAEpC,eAAe;IACb,OAAO,iBAAiB;IACxB,OAAO,eAAe;KACvB;;EAGH,MAAM,oBAA0B;GAC9B,MAAM,QAAQ;;EAGhB,MAAM,aAAa,WAAW,MAAK;EAEnC,MAAM,eAAe,eAAmC;GACtD,IAAI,WAAW,OAAO,OAAO,MAAM;GACnC,OAAO,MAAM,QAAQ,aAAa,OAAO,MAAM,MAAM,OAAM,GAAI;IAChE;EAED,MAAM,sBAAsB;GAC1B,WAAW,QAAQ,CAAC,WAAW;;;uBApH/B,YAuBU,MAAA,cAAA,EAvBV,WAuBU;IAtBP,OAAO,MAAA,IAAA,CAAI;IACX,eAAa,aAAA;MACN,WAAA,OAAU;IACjB,MAAM,MAAA,KAAA;IACN,UAAU,MAAA,SAAA;IACV,UAAU,MAAA,SAAA;IACV,kBAAc;IACd,uBAAkB,OAAA,OAAA,OAAA,MAAA,WAAA,CAAG,UAAU,aAAW;IAC1C,kBAAc;;IAEJ,QAAM,cAMF,CALb,YAKa,YAAA,EALD,MAAK,QAAM,EAAA;4BAIb,CAHR,YAGQ,MAAA,YAAA,EAAA;MAHA,OAAK,eAAE,MAAA,IAAA,CAAI,EAAC,oBAAA,CAAA;MAAwB,MAAM;;6BACtB,CAAd,WAAA,SAAA,WAAA,EAAZ,YAA0B,MAAA,KAAA,EAAA,EAAA,KAAA,GAAA,CAAA,KAAA,WAAA,EAC1B,YAAe,MAAA,KAAA,EAAA,EAAA,KAAA,GAAA,CAAA,EAAA,CAAA;;;;;;OAKG,MAAM,SAAA;UAAnB;sBACa,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../../src/components/password-input/password-input.vue"],"sourcesContent":["<template>\n  <u-input\n    :class=\"cls.b\"\n    :model-value=\"passwordText\"\n    v-bind=\"inputProps\"\n    :size=\"size\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :clearable=\"false\"\n    @native:input=\"handleUpdatePwd\"\n    @update:model-value=\"!$event && handleClear()\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <template #suffix>\n      <span :class=\"cls.e('suffix')\">\n        <UIcon v-if=\"showClear\" :class=\"cls.e('clear')\" title=\"清除\" @click.stop=\"handleClear\">\n          <Close />\n        </UIcon>\n        <UIcon :class=\"cls.e('visibility-toggle')\" :size=\"18\" @click.stop=\"toggleVisible\">\n          <Hide v-if=\"pwdVisible\" />\n          <View v-else />\n        </UIcon>\n      </span>\n    </template>\n\n    <template #prefix v-if=\"slots.prefix\">\n      <slot name=\"prefix\" />\n    </template>\n  </u-input>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useFormFallbackProps } from '@veltra/compositions'\nimport { Close, Hide, View } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { injectFormContext } from '@veltra/utils'\nimport { computed, nextTick, ref, shallowRef } from 'vue'\n\nimport type { PasswordInputProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { UInput } from '../input'\n\ndefineOptions({ name: 'PasswordInput' })\n\nconst props = withDefaults(defineProps<PasswordInputProps>(), {\n  clearable: false,\n  disabled: undefined,\n  readonly: undefined\n})\n\nconst slots = defineSlots<{ prefix?: () => any }>()\n\nconst { formProps } = injectFormContext()\n\nconst { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {\n  size: 'default',\n  disabled: false,\n  readonly: false\n})\n\nconst inputProps = computed(() => {\n  return o(props).pick(['disabled', 'placeholder', 'size'])\n})\n\nconst cls = bem('password-input')\n\nconst model = defineModel<string>()\n\nconst hovered = ref(false)\n\nconst handleMouseEnter = (): void => {\n  hovered.value = true\n}\n\nconst handleMouseLeave = (): void => {\n  hovered.value = false\n}\n\nconst showClear = computed(() => {\n  return props.clearable && !disabled.value && !!model.value && hovered.value\n})\n\nconst passwordChar = '●'\n\nconst handleUpdatePwd = (e: Event): void => {\n  const target = e.target as HTMLInputElement\n  const val = target.value\n  if (!val) {\n    model.value = val\n    return\n  }\n\n  // 字符从无到有\n  if (!model.value) {\n    model.value = val\n    return\n  }\n\n  const pointIndex = target.selectionStart!\n  let inputChar = pointIndex === 0 ? '' : val[pointIndex - 1]!\n  if (inputChar === passwordChar) inputChar = ''\n\n  // 光标右侧字符数量（当前字符长度减去光标位置）\n  const rightLen = val.length - pointIndex\n  // 光标左侧字符数量 （当光标前的字符是刚刚输入的，则为这个字符前的所有的字符，否则为光标前的所有赐福）\n  const leftLen = inputChar === '' ? pointIndex : pointIndex - 1\n\n  const leftVal = model.value.slice(0, leftLen)\n  const rightVal = rightLen === 0 ? '' : model.value.slice(-rightLen)\n\n  model.value = leftVal + inputChar + rightVal\n\n  nextTick(() => {\n    target.selectionStart = pointIndex\n    target.selectionEnd = pointIndex\n  })\n}\n\nconst handleClear = (): void => {\n  model.value = ''\n}\n\nconst pwdVisible = shallowRef(false)\n\nconst passwordText = computed<string | undefined>(() => {\n  if (pwdVisible.value) return model.value\n  return model.value ? passwordChar.repeat(model.value.length) : ''\n})\n\nconst toggleVisible = () => {\n  pwdVisible.value = !pwdVisible.value\n}\n</script>\n"],"mappings":"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"}

package/dist/components/password-input/password-input.vue.d.ts

@@ -16,8 +16,8 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   clearable: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/password-input/style2.css

@@ -15,3 +15,24 @@
 * --u-height-small: 24px;
 */
 /** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-password-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 2px;
+}
+.u-password-input__clear {
+  cursor: pointer;
+  flex-shrink: 0;
+  width: 20px;
+  border-radius: var(--u-radius-default);
+  transition: color 0.25s;
+}
+.u-password-input__clear:hover {
+  color: var(--u-color-primary);
+}
+.u-password-input__visibility-toggle {
+  cursor: pointer;
+  flex-shrink: 0;
+}

package/dist/components/pop-confirm/pop-confirm.vue.d.ts

@@ -14,8 +14,8 @@ declare const __VLS_base: _$vue.DefineComponent<PopConfirmProps, {}, {}, {}, {},
   onConfirm?: (() => any) | undefined;
   onCancel?: (() => any) | undefined;
 }>, {
-  direction: TipDirection;
   trigger: "hover" | "click";
+  direction: TipDirection;
   icon: _$vue.Component;
   iconColor: string;
   confirmText: string;

package/dist/components/progress-nodes/progress-nodes.vue.d.ts

@@ -16,11 +16,11 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ProgressNodesProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
-  "update:modelValue": (value: string | number) => any;
   click: (node: Record<string, any>, index: number) => any;
+  "update:modelValue": (value: string | number) => any;
 }, string, _$vue.PublicProps, Readonly<ProgressNodesProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
   onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
   labelKey: string;
   valueKey: string;

package/dist/components/radio-group/radio-group.vue.d.ts

@@ -17,9 +17,9 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   onChange?: ((item: Record<string, any>) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/components/rich-text-editor/rich-text-editor.vue.d.ts

@@ -13,8 +13,8 @@ declare const __VLS_export: _$vue.DefineComponent<RichTextEditorProps & {
   "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   placeholder: string;
+  readonly: boolean;
   format: RichTextFormat;
   toolbar: ToolbarItem[];
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/select/select.vue.d.ts

@@ -27,11 +27,11 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   "onUpdate:label"?: ((label?: string | undefined) => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tabs/tabs-horizontal.vue.d.ts

@@ -15,13 +15,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
   rounded: boolean;

package/dist/components/tabs/tabs-vertical.vue.d.ts

@@ -14,13 +14,13 @@ type __VLS_Slots = {} & { [K in NonNullable<typeof __VLS_2>]?: (props: typeof __
 declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
   rounded: boolean;

package/dist/components/tabs/tabs.vue.d.ts

@@ -10,13 +10,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (value: string | undefined) => any;
 } & {
-  "update:modelValue": (value: string) => any;
-  click: (item: TabItem, index: number) => any;
   close: (item: TabItem, index: number) => any;
+  click: (item: TabItem, index: number) => any;
+  "update:modelValue": (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-  onClick?: ((item: TabItem, index: number) => any) | undefined;
   onClose?: ((item: TabItem, index: number) => any) | undefined;
+  onClick?: ((item: TabItem, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
   closable: boolean;
   rounded: boolean;

package/dist/components/textarea/style2.css

@@ -29,6 +29,7 @@
 }
 .u-textarea--small {
   border-radius: var(--u-radius-small);
+  font-size: var(--u-font-size-main-small);
 }
 .u-textarea--small .u-textarea__native {
   padding: calc(var(--u-gap-small) / 2);
@@ -36,10 +37,11 @@
   padding-right: 20px;
 }
 .u-textarea--small .u-textarea__clear {
-  font-size: var(--u-font-size-main-small);
+  font-size: inherit;
 }
 .u-textarea--default {
   border-radius: var(--u-radius-default);
+  font-size: var(--u-font-size-main-default);
 }
 .u-textarea--default .u-textarea__native {
   padding: calc(var(--u-gap-default) / 2);
@@ -47,10 +49,11 @@
   padding-right: 20px;
 }
 .u-textarea--default .u-textarea__clear {
-  font-size: var(--u-font-size-main-default);
+  font-size: inherit;
 }
 .u-textarea--large {
   border-radius: var(--u-radius-large);
+  font-size: var(--u-font-size-main-large);
 }
 .u-textarea--large .u-textarea__native {
   padding: calc(var(--u-gap-large) / 2);
@@ -58,7 +61,7 @@
   padding-right: 20px;
 }
 .u-textarea--large .u-textarea__clear {
-  font-size: var(--u-font-size-main-large);
+  font-size: inherit;
 }
 .u-textarea__native {
   color: var(--u-text-color-main);
@@ -66,7 +69,7 @@
   border: none;
   background-color: transparent;
   font-family: var(--u-font-family);
-  font-size: 1em;
+  font-size: inherit;
   width: 100%;
   display: block;
   padding: 0;

package/dist/components/textarea/textarea.vue.d.ts

@@ -23,9 +23,9 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
   onBlur?: (() => any) | undefined;
 }>, {
   disabled: boolean;
-  readonly: boolean;
   placeholder: string;
   clearable: boolean;
+  readonly: boolean;
   resize: boolean;
   autosize: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/tip/tip.vue.d.ts

@@ -11,10 +11,10 @@ declare const __VLS_base: _$vue.DefineComponent<TipProps, {}, {}, {}, {}, _$vue.
 }, string, _$vue.PublicProps, Readonly<TipProps> & Readonly<{
   "onUpdate:visible"?: ((value: boolean) => any) | undefined;
 }>, {
-  direction: TipDirection;
   trigger: "hover" | "click";
   contentTag: string;
   visible: boolean;
+  direction: TipDirection;
   content: string;
   alignment: TipAlign;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;

package/dist/components/tree-select/tree-select.vue.d.ts

@@ -24,15 +24,15 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
   onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
   "onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
 }>, {
+  minWidth: string;
   disabled: boolean;
-  readonly: boolean;
   expandAll: boolean;
   labelKey: string;
   valueKey: string;
   placeholder: string;
   clearable: boolean;
   filterable: boolean;
-  minWidth: string;
+  readonly: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/desktop",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "files": [
     "dist",
     "src"
@@ -68,11 +68,11 @@
     "@cat-kit/core": ">=1.1.5",
     "@cat-kit/excel": ">=1.0.0",
     "@cat-kit/fe": "^1.1.5",
-    "@veltra/compositions": "1.1.22",
-    "@veltra/directives": "1.1.22",
-    "@veltra/icons": "1.1.22",
-    "@veltra/styles": "1.1.22",
-    "@veltra/utils": "1.1.22",
+    "@veltra/compositions": "1.1.23",
+    "@veltra/directives": "1.1.23",
+    "@veltra/icons": "1.1.23",
+    "@veltra/styles": "1.1.23",
+    "@veltra/utils": "1.1.23",
     "vue": ">=3.5.0"
   }
 }

package/src/components/input/style.scss

@@ -28,15 +28,12 @@ $root-name: input;
     height: fn.use-var(form-component-height, $size);
     border-radius: fn.use-var(radius, $size);
     padding: 0 calc(fn.use-var(gap, $size) / 2);
+    font-size: fn.use-var(font-size-main, $size);
 
     @include m.bem($root-name, native) {
       height: fn.use-var(form-component-height, $size);
       line-height: fn.use-var(form-component-height, $size);
     }
-
-    // @include m.bem($root-name, clear) {
-    //   font-size: fn.use-var(font-size-main, $size);
-    // }
   }
 
   @include m.is(focus) {
@@ -51,7 +48,7 @@ $root-name: input;
     width: 100%;
     flex-grow: 1;
     color: fn.use-var(text-color, main);
-    font-size: 1em;
+    font-size: inherit;
     padding: 0;
     font-family: fn.use-var(font-family);
 
@@ -66,7 +63,7 @@ $root-name: input;
   }
 
   @include m.e(prefix, suffix) {
-    font-size: 14px;
+    font-size: inherit;
     color: fn.use-var(text-color, main);
     flex-shrink: 0;
     min-width: 20px;

package/src/components/password-input/__test__/password-input.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref } from 'vue'
+
+import UPasswordInput from '../password-input.vue'
+
+function mountPasswordInput(props: Record<string, unknown>) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const model = ref(props.modelValue as string | undefined)
+  const app = createApp({
+    render() {
+      return h(UPasswordInput, {
+        ...props,
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: string | undefined) => {
+          model.value = value
+        }
+      })
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    model,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('PasswordInput', () => {
+  it('keeps visibility toggle while clear control is shown on hover', async () => {
+    const { host, unmount } = mountPasswordInput({ modelValue: 'secret', clearable: true })
+
+    try {
+      expect(host.querySelector('.u-password-input__visibility-toggle')).not.toBeNull()
+
+      host.querySelector('.u-password-input')?.dispatchEvent(new MouseEvent('mouseenter'))
+      await nextTick()
+
+      expect(host.querySelector('.u-password-input__clear')).not.toBeNull()
+      expect(host.querySelector('.u-password-input__visibility-toggle')).not.toBeNull()
+    } finally {
+      unmount()
+    }
+  })
+
+  it('toggles password visibility when clearable', async () => {
+    const { host, unmount } = mountPasswordInput({ modelValue: 'secret', clearable: true })
+
+    try {
+      const native = host.querySelector('.u-input__native') as HTMLInputElement
+      expect(native.value).toBe('●●●●●●')
+
+      host
+        .querySelector('.u-password-input__visibility-toggle')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await nextTick()
+
+      expect(native.value).toBe('secret')
+    } finally {
+      unmount()
+    }
+  })
+
+  it('toggles password visibility when clear control is visible on hover', async () => {
+    const { host, unmount } = mountPasswordInput({ modelValue: 'secret', clearable: true })
+
+    try {
+      const native = host.querySelector('.u-input__native') as HTMLInputElement
+      host.querySelector('.u-password-input')?.dispatchEvent(new MouseEvent('mouseenter'))
+      await nextTick()
+
+      expect(host.querySelector('.u-password-input__clear')).not.toBeNull()
+
+      host
+        .querySelector('.u-password-input__visibility-toggle')
+        ?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      await nextTick()
+
+      expect(native.value).toBe('secret')
+    } finally {
+      unmount()
+    }
+  })
+})

package/src/components/password-input/password-input.vue

@@ -6,17 +6,22 @@
     :size="size"
     :readonly="readonly"
     :disabled="disabled"
+    :clearable="false"
     @native:input="handleUpdatePwd"
     @update:model-value="!$event && handleClear()"
-    @suffix:click="toggleVisible"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
   >
     <template #suffix>
-      <Transition name="fade">
-        <UIcon :class="cls.e('visibility-toggle')" :size="18">
+      <span :class="cls.e('suffix')">
+        <UIcon v-if="showClear" :class="cls.e('clear')" title="清除" @click.stop="handleClear">
+          <Close />
+        </UIcon>
+        <UIcon :class="cls.e('visibility-toggle')" :size="18" @click.stop="toggleVisible">
           <Hide v-if="pwdVisible" />
           <View v-else />
         </UIcon>
-      </Transition>
+      </span>
     </template>
 
     <template #prefix v-if="slots.prefix">
@@ -28,18 +33,16 @@
 <script lang="ts" setup>
 import { o } from '@cat-kit/core'
 import { useFormFallbackProps } from '@veltra/compositions'
-import { Hide, View } from '@veltra/icons/normal'
+import { Close, Hide, View } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { injectFormContext } from '@veltra/utils'
-import { computed, nextTick, shallowRef } from 'vue'
+import { computed, nextTick, ref, shallowRef } from 'vue'
 
 import type { PasswordInputProps } from '../../types'
 import { UIcon } from '../icon'
 import { UInput } from '../input'
 
-defineOptions({
-  name: 'PasswordInput'
-})
+defineOptions({ name: 'PasswordInput' })
 
 const props = withDefaults(defineProps<PasswordInputProps>(), {
   clearable: false,
@@ -47,9 +50,7 @@ const props = withDefaults(defineProps<PasswordInputProps>(), {
   readonly: undefined
 })
 
-const slots = defineSlots<{
-  prefix?: () => any
-}>()
+const slots = defineSlots<{ prefix?: () => any }>()
 
 const { formProps } = injectFormContext()
 
@@ -60,13 +61,27 @@ const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, prop
 })
 
 const inputProps = computed(() => {
-  return o(props).pick(['clearable', 'disabled', 'placeholder', 'size'])
+  return o(props).pick(['disabled', 'placeholder', 'size'])
 })
 
 const cls = bem('password-input')
 
 const model = defineModel<string>()
 
+const hovered = ref(false)
+
+const handleMouseEnter = (): void => {
+  hovered.value = true
+}
+
+const handleMouseLeave = (): void => {
+  hovered.value = false
+}
+
+const showClear = computed(() => {
+  return props.clearable && !disabled.value && !!model.value && hovered.value
+})
+
 const passwordChar = '●'
 
 const handleUpdatePwd = (e: Event): void => {

package/src/components/password-input/style.scss

@@ -5,7 +5,28 @@
 $root-name: password-input;
 
 @include m.b($root-name) {
+  @include m.e(suffix) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 2px;
+  }
+
+  @include m.e(clear) {
+    cursor: pointer;
+    flex-shrink: 0;
+    width: 20px;
+    border-radius: fn.use-var(radius, default);
+    transition: color 0.25s;
+
+    &:hover {
+      color: fn.use-var(color, primary);
+    }
+  }
+
   @include m.e(visibility-toggle) {
-    // cursor: pointer;
+    cursor: pointer;
+    flex-shrink: 0;
   }
 }

package/src/components/textarea/style.scss

@@ -23,6 +23,7 @@ $root-name: textarea;
 
   @include m.size using ($size) {
     border-radius: fn.use-var(radius, $size);
+    font-size: fn.use-var(font-size-main, $size);
 
     @include m.bem($root-name, native) {
       padding: calc(fn.use-var(gap, $size) / 2);
@@ -31,7 +32,7 @@ $root-name: textarea;
     }
 
     @include m.bem($root-name, clear) {
-      font-size: fn.use-var(font-size-main, $size);
+      font-size: inherit;
     }
   }
 
@@ -41,7 +42,7 @@ $root-name: textarea;
     border: none;
     background-color: transparent;
     font-family: fn.use-var(font-family);
-    font-size: 1em;
+    font-size: inherit;
     width: 100%;
     display: block;
     padding: 0;