@varlet/ui 3.18.0 → 3.18.2

package/highlight/web-types.en-US.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.18.0",
+  "version": "3.18.2",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -2818,7 +2818,7 @@
             },
             {
               "name": "row-key",
-              "description": "Row key field or getter",
+              "description": "Row key field or getter. Selection, detail expansion, and tree expansion rely on stable unique row keys; configure it explicitly when rows do not have `id`",
               "default": "'id'",
               "value": {
                 "type": "string | number | ((context: { row, rowIndex }) => string | number)",

package/highlight/web-types.zh-CN.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "3.18.0",
+  "version": "3.18.2",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/varlet.cjs.js

@@ -849,7 +849,7 @@ var __spreadValues$43 = (a, b) => {
 	return a;
 };
 var __spreadProps$22 = (a, b) => __defProps$22(a, __getOwnPropDescs$22(b));
-var __async$25 = (__this, __arguments, generator) => {
+var __async$27 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -937,7 +937,7 @@ function isZodResult(result) {
 }
 function useValidation() {
 	const errorMessage = (0, vue.ref)("");
-	const validate = (ruleOrRules, value, apis) => __async$25(null, null, function* () {
+	const validate = (ruleOrRules, value, apis) => __async$27(null, null, function* () {
 		const rules = normalizeToArray(ruleOrRules).filter((rule) => isZodRule(rule) || isFunction(rule));
 		const results = yield Promise.all(rules.map((rule) => isZodRule(rule) ? rule.safeParseAsync(value) : rule(value, apis)));
 		resetValidation();
@@ -957,7 +957,7 @@ function useValidation() {
 	const resetValidation = () => {
 		errorMessage.value = "";
 	};
-	const validateWithTrigger = (validateTrigger, trigger, rules, value, apis) => __async$25(null, null, function* () {
+	const validateWithTrigger = (validateTrigger, trigger, rules, value, apis) => __async$27(null, null, function* () {
 		if (validateTrigger.includes(trigger)) (yield validate(rules, value, apis)) && (errorMessage.value = "");
 	});
 	return {
@@ -2357,7 +2357,7 @@ var props$37 = {
 };
 //#endregion
 //#region es/icon/Icon.mjs
-var __async$24 = (__this, __arguments, generator) => {
+var __async$26 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -2409,7 +2409,7 @@ var __sfc__$103 = (0, vue.defineComponent)({
 		const animateInProgress = (0, vue.ref)(false);
 		(0, vue.watch)(() => props2.name, handleNameChange, { immediate: true });
 		function handleNameChange(newName, oldName) {
-			return __async$24(this, null, function* () {
+			return __async$26(this, null, function* () {
 				const { transition } = props2;
 				if (oldName == null || toNumber(transition) === 0) {
 					nextName.value = newName;
@@ -3112,7 +3112,7 @@ var props$33 = {
 };
 //#endregion
 //#region es/field-decorator/FieldDecorator.mjs
-var __async$23 = (__this, __arguments, generator) => {
+var __async$25 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -3220,7 +3220,7 @@ var __sfc__$97 = (0, vue.defineComponent)({
 		call(bindSwipeResizeDispatcher, { onResize() {
 			(0, vue.nextTick)().then(resize);
 		} });
-		if (popup) (0, vue.watch)(() => popup.show.value, (show) => __async$23(null, null, function* () {
+		if (popup) (0, vue.watch)(() => popup.show.value, (show) => __async$25(null, null, function* () {
 			if (show) {
 				yield doubleRaf();
 				resize();
@@ -3772,6 +3772,26 @@ function useCheckboxGroup() {
 }
 //#endregion
 //#region es/checkbox/Checkbox.mjs
+var __async$24 = (__this, __arguments, generator) => {
+	return new Promise((resolve, reject) => {
+		var fulfilled = (value) => {
+			try {
+				step(generator.next(value));
+			} catch (e) {
+				reject(e);
+			}
+		};
+		var rejected = (value) => {
+			try {
+				step(generator.throw(value));
+			} catch (e) {
+				reject(e);
+			}
+		};
+		var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+		step((generator = generator.apply(__this, __arguments)).next());
+	});
+};
 var { name: name$86, n: n$97, classes: classes$78 } = createNamespace("checkbox");
 var _hoisted_1$42 = [
 	"aria-checked",
@@ -3876,26 +3896,32 @@ var __sfc__$95 = (0, vue.defineComponent)({
 			});
 		}
 		function change(changedValue) {
-			const { checkedValue: checkedValue2, onChange } = props2;
-			value.value = changedValue;
-			call(onChange, value.value, isIndeterminate.value);
-			validateWithTrigger("onChange");
-			changedValue === checkedValue2 ? checkboxGroup?.onChecked(checkedValue2) : checkboxGroup?.onUnchecked(checkedValue2);
+			return __async$24(this, null, function* () {
+				const { checkedValue: checkedValue2, onChange } = props2;
+				value.value = changedValue;
+				changedValue === checkedValue2 ? checkboxGroup?.onChecked(checkedValue2) : checkboxGroup?.onUnchecked(checkedValue2);
+				yield (0, vue.nextTick)();
+				call(onChange, changedValue, isIndeterminate.value);
+				validateWithTrigger("onChange");
+			});
 		}
 		function handleClick(e) {
-			const { disabled, readonly, checkedValue: checkedValue2, uncheckedValue, onClick } = props2;
-			if ((form == null ? void 0 : form.disabled.value) || disabled) return;
-			call(onClick, e);
-			if ((form == null ? void 0 : form.readonly.value) || readonly) return;
-			if (isIndeterminate.value === true) {
-				isIndeterminate.value = false;
-				call(props2.onChange, value.value, isIndeterminate.value);
-				validateWithTrigger("onChange");
-				return;
-			}
-			const maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false;
-			if (!checked.value && maximum) return;
-			change(checked.value ? uncheckedValue : checkedValue2);
+			return __async$24(this, null, function* () {
+				const { disabled, readonly, checkedValue: checkedValue2, uncheckedValue, onClick } = props2;
+				if ((form == null ? void 0 : form.disabled.value) || disabled) return;
+				call(onClick, e);
+				if ((form == null ? void 0 : form.readonly.value) || readonly) return;
+				if (isIndeterminate.value === true) {
+					isIndeterminate.value = false;
+					yield (0, vue.nextTick)();
+					call(props2.onChange, value.value, isIndeterminate.value);
+					validateWithTrigger("onChange");
+					return;
+				}
+				const maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false;
+				if (!checked.value && maximum) return;
+				change(checked.value ? uncheckedValue : checkedValue2);
+			});
 		}
 		function handleTextClick() {
 			checkbox.value.focus();
@@ -3998,7 +4024,7 @@ function useMenuSelect() {
 }
 //#endregion
 //#region es/menu-option/MenuOption.mjs
-var __async$22 = (__this, __arguments, generator) => {
+var __async$23 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -4154,7 +4180,7 @@ var __sfc__$94 = (0, vue.defineComponent)({
 			}
 		}
 		function handleSelect() {
-			return __async$22(this, null, function* () {
+			return __async$23(this, null, function* () {
 				yield (0, vue.nextTick)();
 				onSelect(menuOptionProvider);
 			});
@@ -5351,7 +5377,7 @@ var __spreadValues$35 = (a, b) => {
 	return a;
 };
 var __spreadProps$18 = (a, b) => __defProps$18(a, __getOwnPropDescs$18(b));
-var __async$21 = (__this, __arguments, generator) => {
+var __async$22 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -5464,7 +5490,7 @@ function usePopover(options) {
 		open();
 	}
 	function handleReferenceMouseleave() {
-		return __async$21(this, null, function* () {
+		return __async$22(this, null, function* () {
 			if (options.trigger !== "hover") return;
 			enterReference = false;
 			yield doubleRaf();
@@ -5478,7 +5504,7 @@ function usePopover(options) {
 		if (options.cascadeOptimization) allowClose = false;
 	}
 	function handlePopoverMouseleave() {
-		return __async$21(this, null, function* () {
+		return __async$22(this, null, function* () {
 			if (options.trigger !== "hover") return;
 			enterPopover = false;
 			yield doubleRaf();
@@ -5885,7 +5911,7 @@ var __spreadValues$33 = (a, b) => {
 	}
 	return a;
 };
-var __async$20 = (__this, __arguments, generator) => {
+var __async$21 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -6028,7 +6054,7 @@ var __sfc__$92 = (0, vue.defineComponent)({
 			if (!value) show.value = false;
 		}, { immediate: true });
 		function handleArrowRight(key) {
-			return __async$20(this, null, function* () {
+			return __async$21(this, null, function* () {
 				var _a;
 				call(props.onKeyArrowX, key);
 				if (key !== "ArrowRight") return;
@@ -6491,7 +6517,7 @@ var props$93 = __spreadValues$31({
 ]));
 //#endregion
 //#region es/auto-complete/AutoComplete.mjs
-var __async$19 = (__this, __arguments, generator) => {
+var __async$20 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -6695,7 +6721,7 @@ var __sfc__$90 = (0, vue.defineComponent)({
 			});
 		}
 		function handleKeydown(event) {
-			return __async$19(this, null, function* () {
+			return __async$20(this, null, function* () {
 				var _a;
 				if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || props2.disabled || props2.readonly || !isFocusing.value || !isShowMenuSelect.value) return;
 				const { key } = event;
@@ -6744,7 +6770,7 @@ var __sfc__$90 = (0, vue.defineComponent)({
 			validateWithTrigger("onChange");
 		}
 		function handleAutoComplete(newValue) {
-			return __async$19(this, null, function* () {
+			return __async$20(this, null, function* () {
 				var _a;
 				if (props2.maxlength != null) newValue = newValue.slice(0, toNumber(props2.maxlength));
 				if (newValue !== value.value) {
@@ -6857,7 +6883,7 @@ var __spreadValues$30 = (a, b) => {
 	}
 	return a;
 };
-var __async$18 = (__this, __arguments, generator) => {
+var __async$19 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -6984,7 +7010,7 @@ function attemptLoad(el) {
 	createImage(el, attemptSRC);
 }
 function check(el) {
-	return __async$18(this, null, function* () {
+	return __async$19(this, null, function* () {
 		yield doubleRaf();
 		if (inViewport(el)) attemptLoad(el);
 	});
@@ -6993,7 +7019,7 @@ function checkAll() {
 	lazyElements.forEach((el) => check(el));
 }
 function add$2(el) {
-	return __async$18(this, null, function* () {
+	return __async$19(this, null, function* () {
 		!lazyElements.includes(el) && lazyElements.push(el);
 		getAllParentScroller(el).forEach(bindEvents);
 		yield check(el);
@@ -7008,13 +7034,13 @@ function diff(el, binding) {
 	return src !== binding.value || arg !== binding.arg;
 }
 function mounted(el, binding) {
-	return __async$18(this, null, function* () {
+	return __async$19(this, null, function* () {
 		createLazy(el, binding);
 		yield add$2(el);
 	});
 }
 function updated(el, binding) {
-	return __async$18(this, null, function* () {
+	return __async$19(this, null, function* () {
 		if (!diff(el, binding)) {
 			lazyElements.includes(el) && (yield check(el));
 			return;
@@ -8319,7 +8345,7 @@ var props$13 = {
 };
 //#endregion
 //#region es/card/Card.mjs
-var __async$17 = (__this, __arguments, generator) => {
+var __async$18 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -8501,7 +8527,7 @@ var __sfc__$78 = (0, vue.defineComponent)({
 			clearTimeout(floater.value);
 			clearTimeout(dropper);
 			floater.value = null;
-			floater.value = setTimeout(() => __async$17(null, null, function* () {
+			floater.value = setTimeout(() => __async$18(null, null, function* () {
 				const { width, height, left, top } = getRect(card.value);
 				holderWidth.value = toSizeUnit(width);
 				holderHeight.value = toSizeUnit(height);
@@ -8975,7 +9001,7 @@ var props$18 = {
 };
 //#endregion
 //#region es/code/Code.mjs
-var __async$16 = (__this, __arguments, generator) => {
+var __async$17 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -9019,7 +9045,7 @@ var __sfc__$74 = (0, vue.defineComponent)({
 			props2.language,
 			normalizedTheme.value,
 			props2.trim
-		], (_0) => __async$16(null, [_0], function* ([highlighter2, code, lang = "", theme2 = "", trim]) {
+		], (_0) => __async$17(null, [_0], function* ([highlighter2, code, lang = "", theme2 = "", trim]) {
 			if (!highlighter2) return;
 			highlightedCode.value = yield highlighter2.codeToHtml(trim ? code.trim() : code, {
 				lang,
@@ -9304,7 +9330,7 @@ var _CollapseComponent = stdin_default$407;
 var stdin_default$21 = stdin_default$407;
 //#endregion
 //#region es/collapse-transition/useCollapseTransition.mjs
-var __async$15 = (__this, __arguments, generator) => {
+var __async$16 = (__this, __arguments, generator) => {
 	return new Promise((resolve, reject) => {
 		var fulfilled = (value) => {
 			try {
@@ -9339,7 +9365,7 @@ function useCollapseTransition(options) {
 		return version === transitionVersion;
 	}
 	function open(version) {
-		return __async$15(this, null, function* () {
+		return __async$16(this, null, function* () {
 			if (!contentEl.value) return;
 			contentEl.value.style.height = "";
 			showContent.value = true;
@@ -9355,7 +9381,7 @@ function useCollapseTransition(options) {
 			if (isInitToTrigger && isLatestTransition(version)) handleTransitionEnd();
 		});
 	}
-	const close = (version) => __async$15(null, null, function* () {
+	const close = (version) => __async$16(null, null, function* () {
 		if (!contentEl.value) return;
 		const { offsetHeight } = contentEl.value;
 		contentEl.value.style.height = offsetHeight + "px";
@@ -12394,6 +12420,26 @@ function useRadioGroup() {
 }
 //#endregion
 //#region es/radio/Radio.mjs
+var __async$15 = (__this, __arguments, generator) => {
+	return new Promise((resolve, reject) => {
+		var fulfilled = (value) => {
+			try {
+				step(generator.next(value));
+			} catch (e) {
+				reject(e);
+			}
+		};
+		var rejected = (value) => {
+			try {
+				step(generator.throw(value));
+			} catch (e) {
+				reject(e);
+			}
+		};
+		var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+		step((generator = generator.apply(__this, __arguments)).next());
+	});
+};
 var { name: name$56, n: n$67, classes: classes$55 } = createNamespace("radio");
 var _hoisted_1$30 = [
 	"aria-checked",
@@ -12516,12 +12562,15 @@ var __sfc__$65 = (0, vue.defineComponent)({
 			});
 		}
 		function change(changedValue) {
-			const { checkedValue, onChange } = props2;
-			if (radioGroup && value.value === checkedValue) return;
-			value.value = changedValue;
-			call(onChange, value.value);
-			radioGroup?.onToggle(checkedValue);
-			validateWithTrigger("onChange");
+			return __async$15(this, null, function* () {
+				const { checkedValue, onChange } = props2;
+				if (radioGroup && value.value === checkedValue) return;
+				value.value = changedValue;
+				radioGroup?.onToggle(checkedValue);
+				yield (0, vue.nextTick)();
+				call(onChange, changedValue);
+				validateWithTrigger("onChange");
+			});
 		}
 		function handleClick(e) {
 			const { disabled, readonly, uncheckedValue, checkedValue, onClick } = props2;
@@ -23778,8 +23827,8 @@ var __sfc__$16 = (0, vue.defineComponent)({
 			item.handleHovering(value);
 		}
 		function emitChange(value) {
-			call(props2.onChange, value);
 			call(props2["onUpdate:modelValue"], value);
+			call(props2.onChange, value);
 			validateWithTrigger();
 		}
 		function setPercent(moveDistance, type) {
@@ -24865,8 +24914,8 @@ var __sfc__$11 = (0, vue.defineComponent)({
 				validateWithTrigger("onLazyChange");
 			});
 			else {
-				call(onChange, newValue);
 				call(updateModelValue, newValue);
+				call(onChange, newValue);
 				validateWithTrigger("onChange");
 			}
 		}
@@ -25833,7 +25882,7 @@ var stdin_default$314 = {
 	"--data-table-sort-trigger-hover-background": "hsla(var(--hsl-primary), 0.12)",
 	"--data-table-empty-text-color": "var(--color-text-disabled)",
 	"--data-table-resize-trigger-color": "hsla(var(--hsl-on-surface-variant), 0.36)",
-	"--data-table-fixed-shadow-color": "rgba(0, 0, 0, 0.04)",
+	"--data-table-fixed-shadow-color": "rgba(0, 0, 0, 0.14)",
 	"--data-table-border-radius": "2px",
 	"--data-table-cell-normal-padding": "8px 16px",
 	"--data-table-cell-small-padding": "4px 16px",
@@ -27187,7 +27236,7 @@ var stdin_default$240 = {
 	"--data-table-sort-trigger-hover-background": "hsla(var(--hsl-primary), 0.12)",
 	"--data-table-empty-text-color": "var(--color-text-disabled)",
 	"--data-table-resize-trigger-color": "hsla(var(--hsl-on-surface-variant), 0.36)",
-	"--data-table-fixed-shadow-color": "rgba(0, 0, 0, 0.04)",
+	"--data-table-fixed-shadow-color": "rgba(0, 0, 0, 0.14)",
 	"--data-table-border-radius": "2px",
 	"--data-table-cell-normal-padding": "8px 16px",
 	"--data-table-cell-small-padding": "4px 16px",
@@ -31273,7 +31322,7 @@ var _WatermarkComponent = stdin_default$106;
 var stdin_default$100 = stdin_default$106;
 //#endregion
 //#region es/index.bundle.mjs
-var version = "3.18.0";
+var version = "3.18.2";
 function install(app) {
 	stdin_default.install && app.use(stdin_default);
 	stdin_default$1.install && app.use(stdin_default$1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.18.0",
+  "version": "3.18.2",
   "description": "A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.",
   "keywords": [
     "Vue3",
@@ -44,9 +44,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.18.0",
-    "@varlet/shared": "3.18.0",
-    "@varlet/use": "3.18.0"
+    "@varlet/icons": "3.18.2",
+    "@varlet/use": "3.18.2",
+    "@varlet/shared": "3.18.2"
   },
   "devDependencies": {
     "@types/node": "^20.19.0",
@@ -62,9 +62,9 @@
     "vue": "3.5.21",
     "vue-router": "4.5.1",
     "zod": "^3.23.8",
-    "@varlet/cli": "3.18.0",
-    "@varlet/ui": "3.18.0",
-    "@varlet/touch-emulator": "3.18.0"
+    "@varlet/touch-emulator": "3.18.2",
+    "@varlet/cli": "3.18.2",
+    "@varlet/ui": "3.18.2"
   },
   "peerDependencies": {
     "vue": "^3.2.0"

package/types/dialog.d.ts

@@ -1,4 +1,4 @@
-import { App, TeleportProps, VNode } from 'vue'
+import { App, Ref, TeleportProps, VNode } from 'vue'
 import { ButtonProps } from './button'
 import { BasicAttributes, ListenerProp, SetPropsDefaults, VarComponent } from './varComponent'
 
@@ -6,6 +6,13 @@ export declare const dialogProps: Record<keyof DialogProps, any>
 
 export type DialogTypeMessageAlign = 'left' | 'center' | 'right'
 
+export interface DialogBeforeCloseRefs {
+  confirmButtonLoading: Ref<boolean>
+  cancelButtonLoading: Ref<boolean>
+  confirmButtonDisabled: Ref<boolean>
+  cancelButtonDisabled: Ref<boolean>
+}
+
 export interface DialogProps extends BasicAttributes {
   show?: boolean
   width?: string | number
@@ -37,7 +44,7 @@ export interface DialogProps extends BasicAttributes {
   teleport?: TeleportProps['to'] | false
   onOpen?: ListenerProp<() => void>
   onOpened?: ListenerProp<() => void>
-  onBeforeClose?: ListenerProp<(action: DialogActions, done: () => void) => void>
+  onBeforeClose?: ListenerProp<(action: DialogActions, done: () => void, refs: DialogBeforeCloseRefs) => void>
   onClose?: ListenerProp<() => void>
   onClosed?: ListenerProp<() => void>
   onConfirm?: ListenerProp<() => void>
@@ -94,7 +101,7 @@ export interface DialogOptions {
   closeOnKeyEscape?: boolean
   onOpen?: () => void
   onOpened?: () => void
-  onBeforeClose?: (action: DialogActions, done: () => void) => void
+  onBeforeClose?: (action: DialogActions, done: () => void, refs: DialogBeforeCloseRefs) => void
   onClose?: () => void
   onClosed?: () => void
   onConfirm?: () => void