@sdata/web-vue 3.30.0 → 4.0.0

package/es/verification-code/verification-code.js

@@ -1,218 +1,5 @@
-import { getPrefixCls } from "../_utils/global-config.js";
-import { isExist, isFunction, isString, isUndefined } from "../_utils/is.js";
-import { useI18n } from "../locale/index.js";
-import { ArrowLeft, ArrowRight, Backspace } from "../_utils/keycode.js";
-import Input from "../input/index.js";
-import { Fragment, computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
-//#region components/verification-code/verification-code.tsx
-var verification_code_default = /* @__PURE__ */ defineComponent({
-	name: "VerificationCode",
-	props: {
-		/**
-		* @zh 绑定值
-		* @en Value
-		*/
-		modelValue: String,
-		/**
-		* @zh 默认值（非受控状态）
-		* @en Default value (uncontrolled state)
-		*/
-		defaultValue: {
-			type: String,
-			default: ""
-		},
-		/**
-		* @zh 验证码的长度，根据长度渲染对应个数的输入框
-		* @en The length of the verification code, rendering the corresponding number of input boxes according to the length.
-		*/
-		length: {
-			type: Number,
-			default: 6
-		},
-		/**
-		* @zh 输入框大小
-		* @en Input size
-		* @values 'mini','small','medium','large'
-		* @defaultValue 'medium'
-		*/
-		size: { type: String },
-		/**
-		* @zh 是否禁用
-		* @en Whether to disable
-		*/
-		disabled: Boolean,
-		/**
-		* @zh 是否密码模式
-		* @en Password mode
-		*/
-		masked: Boolean,
-		/**
-		* @zh 只读
-		* @en Readonly
-		*/
-		readonly: {
-			type: [Boolean, String],
-			default: false
-		},
-		/**
-		* @zh 是否为错误状态
-		* @en Whether it is an error state
-		*/
-		error: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 分隔符。可在不同索引的输入框后自定义渲染分隔符
-		* @en Separator. Customizable rendering separators after input boxes with different indexes
-		*/
-		separator: { type: Function },
-		/**
-		* @zh 格式化函数，当用户输入值改变时触发
-		* @en Formatter function, triggered when the user input value changes
-		*/
-		formatter: { type: Function }
-	},
-	emits: {
-		"update:modelValue": (_value) => true,
-		/**
-		* @zh 值发生改变时触发
-		* @en Triggered when the value changes
-		* @param { string } value
-		*/
-		"change": (_value) => true,
-		/**
-		* @zh 填充完成时触发
-		* @en Triggered when the filling is complete
-		* @param { string } value
-		*/
-		"finish": (_value) => true,
-		/**
-		* @zh 输入时触发
-		* @en Triggered on input
-		* @param { string } inputValue
-		* @param { number } index
-		* @param {Event} ev
-		*/
-		"input": (_inputValue, _index, _ev) => true
-	},
-	setup(props, { emit }) {
-		const { t } = useI18n();
-		const prefixCls = getPrefixCls("verification-code");
-		const prefixInputCls = getPrefixCls("input");
-		const inputRefList = ref([]);
-		const mergedValue = computed(() => {
-			var _props$modelValue;
-			return (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : props.defaultValue;
-		});
-		const type = computed(() => props.masked ? "password" : "text");
-		const inputCls = computed(() => [prefixInputCls, { [`${prefixInputCls}-size-${props.size}`]: props.size }]);
-		const filledValue = computed(() => {
-			const newVal = String(mergedValue.value).split("");
-			return Array.from({ length: props.length }, (_, index) => {
-				return isExist(newVal[index]) ? String(newVal[index]) : "";
-			});
-		});
-		const innerValue = ref(filledValue.value);
-		watch(mergedValue, () => {
-			innerValue.value = filledValue.value;
-		});
-		const updateValue = () => {
-			const value = innerValue.value.join("").trim();
-			emit("update:modelValue", value);
-			emit("change", value);
-			if (value.length === props.length) emit("finish", value);
-			focusFirstEmptyInput();
-		};
-		const handleFocus = (index) => inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value[index].focus();
-		const focusFirstEmptyInput = (index) => {
-			const values = innerValue.value;
-			const len = values.length;
-			if (!isUndefined(index) && values[index]) return;
-			const firstEmpty = values.findIndex((v) => !v);
-			handleFocus(firstEmpty === -1 ? len - 1 : firstEmpty);
-		};
-		const handleCursorToEnd = (e, i) => {
-			if (!innerValue.value[i]) return;
-			const target = e.target;
-			if (!(target === null || target === void 0 ? void 0 : target.setSelectionRange)) return;
-			e.preventDefault();
-			target.focus();
-			const end = target.value.length;
-			target.setSelectionRange(end, end);
-		};
-		const handlePaste = (e, index) => {
-			e.preventDefault();
-			const { clipboardData } = e;
-			const text = clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData("text");
-			if (!text) return;
-			text.split("").forEach((char, i) => {
-				if (index + i >= props.length) return;
-				if (isFunction(props.formatter)) {
-					const result = props.formatter(char, index + i, innerValue.value.join(""));
-					if (result === false) {
-						index -= 1;
-						return;
-					}
-					if (isString(result)) char = result.charAt(0);
-				}
-				innerValue.value[index + i] = char;
-			});
-			updateValue();
-		};
-		const handleKeydown = (index, e) => {
-			const keyCode = e.code || e.key;
-			if (keyCode === Backspace.code && !innerValue.value[index]) {
-				e.preventDefault();
-				innerValue.value[Math.max(index - 1, 0)] = "";
-				updateValue();
-			} else if (keyCode === ArrowLeft.code && index > 0) {
-				e.preventDefault();
-				handleFocus(index - 1);
-			} else if (keyCode === ArrowRight.code && innerValue.value[index] && index < props.length - 1) {
-				e.preventDefault();
-				handleFocus(index + 1);
-			}
-		};
-		const handleInput = (index, value, event) => {
-			let char = (value || "").trim().charAt(value.length - 1);
-			emit("input", char, index, event);
-			if (isFunction(props.formatter)) {
-				const result = props.formatter(char, index, innerValue.value.join(""));
-				if (result === false) return;
-				if (isString(result)) char = result.charAt(0);
-			}
-			innerValue.value[index] = char;
-			updateValue();
-		};
-		return () => {
-			return createVNode("div", {
-				"class": prefixCls,
-				"role": "group",
-				"aria-label": t("a11y.verificationCode")
-			}, [innerValue.value.map((c, i) => {
-				var _props$separator;
-				return createVNode(Fragment, null, [createVNode(Input, mergeProps({
-					"key": i,
-					"ref": (el) => inputRefList.value[i] = el,
-					"type": type.value,
-					"class": inputCls.value,
-					"modelValue": c,
-					"size": props.size,
-					"error": props.error,
-					"disabled": props.disabled,
-					"readonly": props.readonly,
-					"inputAttrs": { "aria-label": t("a11y.characterOf", i + 1, props.length) },
-					"onFocus": () => focusFirstEmptyInput(i),
-					"onInput": (v, e) => handleInput(i, v, e)
-				}, {
-					onKeydown: (e) => handleKeydown(i, e),
-					onPaste: (e) => handlePaste(e, i),
-					onMousedown: (e) => handleCursorToEnd(e, i)
-				}), null), (_props$separator = props.separator) === null || _props$separator === void 0 ? void 0 : _props$separator.call(props, i, c)]);
-			})]);
-		};
-	}
-});
+import verification_code_vue_vue_type_script_setup_true_lang_default from "./verification-code.vue_vue_type_script_setup_true_lang.js";
+//#region components/verification-code/verification-code.vue
+var verification_code_default = verification_code_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { verification_code_default as default };

package/es/verification-code/{verification-code.d.ts → verification-code.vue.d.ts}

@@ -1,6 +1,6 @@
-import { PropType, VNode } from 'vue';
-import { Size } from '../_utils/constant';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+import { type PropType, type VNode } from 'vue';
+import type { Size } from '../_utils/constant';
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: StringConstructor;
     defaultValue: {
         type: StringConstructor;
@@ -10,9 +10,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
-    size: {
-        type: PropType<Size>;
-    };
+    size: PropType<Size>;
     disabled: BooleanConstructor;
     masked: BooleanConstructor;
     readonly: {
@@ -29,11 +27,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     formatter: {
         type: PropType<(inputValue: string, index: number, value: string) => string | boolean>;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (_value: string) => true;
-    change: (_value: string) => true;
-    finish: (_value: string) => true;
-    input: (_inputValue: string, _index: number, _ev: Event) => true;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: string) => void;
+    input: (_inputValue: string, _index: number, _event: Event) => void;
+    "update:modelValue": (_value: string) => void;
+    finish: (_value: string) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: StringConstructor;
     defaultValue: {
@@ -44,9 +42,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: NumberConstructor;
         default: number;
     };
-    size: {
-        type: PropType<Size>;
-    };
+    size: PropType<Size>;
     disabled: BooleanConstructor;
     masked: BooleanConstructor;
     readonly: {
@@ -65,7 +61,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{
     onChange?: ((_value: string) => any) | undefined;
-    onInput?: ((_inputValue: string, _index: number, _ev: Event) => any) | undefined;
+    onInput?: ((_inputValue: string, _index: number, _event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((_value: string) => any) | undefined;
     onFinish?: ((_value: string) => any) | undefined;
 }>, {
@@ -76,4 +72,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     defaultValue: string;
     masked: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/es/verification-code/verification-code.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,192 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isExist, isFunction, isString, isUndefined } from "../_utils/is.js";
+import { useI18n } from "../locale/index.js";
+import { ArrowLeft, ArrowRight, Backspace } from "../_utils/keycode.js";
+import Input from "../input/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, unref, watch } from "vue";
+//#region components/verification-code/verification-code.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var verification_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "VerificationCode" }), {}, {
+	__name: "verification-code",
+	props: {
+		/** @zh 绑定值 @en Value */
+		modelValue: String,
+		/** @zh 默认值（非受控状态） @en Default value (uncontrolled state) */
+		defaultValue: {
+			type: String,
+			default: ""
+		},
+		/** @zh 验证码的长度，根据长度渲染对应个数的输入框 @en Verification code length */
+		length: {
+			type: Number,
+			default: 6
+		},
+		/** @zh 输入框大小 @en Input size */
+		size: String,
+		/** @zh 是否禁用 @en Whether to disable */
+		disabled: Boolean,
+		/** @zh 是否密码模式 @en Password mode */
+		masked: Boolean,
+		/** @zh 只读 @en Readonly */
+		readonly: {
+			type: [Boolean, String],
+			default: false
+		},
+		/** @zh 是否为错误状态 @en Whether it is an error state */
+		error: {
+			type: Boolean,
+			default: false
+		},
+		/** @zh 分隔符 @en Separator */
+		separator: { type: Function },
+		/** @zh 格式化函数 @en Formatter */
+		formatter: { type: Function }
+	},
+	emits: {
+		"update:modelValue": (_value) => true,
+		"change": (_value) => true,
+		"finish": (_value) => true,
+		"input": (_inputValue, _index, _event) => true
+	},
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useI18n();
+		const prefixCls = getPrefixCls("verification-code");
+		const prefixInputCls = getPrefixCls("input");
+		const inputRefList = ref([]);
+		const VNodeRenderer = ({ content }) => content;
+		const mergedValue = computed(() => {
+			var _props$modelValue;
+			return (_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : props.defaultValue;
+		});
+		const type = computed(() => props.masked ? "password" : "text");
+		const inputCls = computed(() => [prefixInputCls, { [`${prefixInputCls}-size-${props.size}`]: props.size }]);
+		const filledValue = computed(() => {
+			const newValue = String(mergedValue.value).split("");
+			return Array.from({ length: props.length }, (_, index) => isExist(newValue[index]) ? String(newValue[index]) : "");
+		});
+		const innerValue = ref(filledValue.value);
+		watch(mergedValue, () => {
+			innerValue.value = filledValue.value;
+		});
+		function setInputRef(element, index) {
+			if (element) inputRefList.value[index] = element;
+		}
+		function updateValue() {
+			const value = innerValue.value.join("").trim();
+			emit("update:modelValue", value);
+			emit("change", value);
+			if (value.length === props.length) emit("finish", value);
+			focusFirstEmptyInput();
+		}
+		function handleFocus(index) {
+			inputRefList.value[index].focus();
+		}
+		function focusFirstEmptyInput(index) {
+			const values = innerValue.value;
+			if (!isUndefined(index) && values[index]) return;
+			const firstEmpty = values.findIndex((value) => !value);
+			handleFocus(firstEmpty === -1 ? values.length - 1 : firstEmpty);
+		}
+		function handleCursorToEnd(event, index) {
+			if (!innerValue.value[index]) return;
+			const target = event.target;
+			if (!(target === null || target === void 0 ? void 0 : target.setSelectionRange)) return;
+			event.preventDefault();
+			target.focus();
+			const end = target.value.length;
+			target.setSelectionRange(end, end);
+		}
+		function handlePaste(event, index) {
+			var _event$clipboardData;
+			event.preventDefault();
+			const text = (_event$clipboardData = event.clipboardData) === null || _event$clipboardData === void 0 ? void 0 : _event$clipboardData.getData("text");
+			if (!text) return;
+			text.split("").forEach((originalCharacter, offset) => {
+				let character = originalCharacter;
+				if (index + offset >= props.length) return;
+				if (isFunction(props.formatter)) {
+					const result = props.formatter(character, index + offset, innerValue.value.join(""));
+					if (result === false) {
+						index -= 1;
+						return;
+					}
+					if (isString(result)) character = result.charAt(0);
+				}
+				innerValue.value[index + offset] = character;
+			});
+			updateValue();
+		}
+		function handleKeydown(index, event) {
+			const keyCode = event.code || event.key;
+			if (keyCode === Backspace.code && !innerValue.value[index]) {
+				event.preventDefault();
+				innerValue.value[Math.max(index - 1, 0)] = "";
+				updateValue();
+			} else if (keyCode === ArrowLeft.code && index > 0) {
+				event.preventDefault();
+				handleFocus(index - 1);
+			} else if (keyCode === ArrowRight.code && innerValue.value[index] && index < props.length - 1) {
+				event.preventDefault();
+				handleFocus(index + 1);
+			}
+		}
+		function handleInput(index, value, event) {
+			let character = (value || "").trim().charAt(value.length - 1);
+			emit("input", character, index, event);
+			if (isFunction(props.formatter)) {
+				const result = props.formatter(character, index, innerValue.value.join(""));
+				if (result === false) return;
+				if (isString(result)) character = result.charAt(0);
+			}
+			innerValue.value[index] = character;
+			updateValue();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(prefixCls)),
+				role: "group",
+				"aria-label": unref(t)("a11y.verificationCode")
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(innerValue.value, (character, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [createVNode(unref(Input), {
+					ref_for: true,
+					ref: (element) => setInputRef(element, index),
+					type: type.value,
+					class: normalizeClass(inputCls.value),
+					"model-value": character,
+					size: __props.size,
+					error: __props.error,
+					disabled: __props.disabled,
+					readonly: __props.readonly,
+					"input-attrs": { "aria-label": unref(t)("a11y.characterOf", index + 1, __props.length) },
+					onFocus: ($event) => focusFirstEmptyInput(index),
+					onInput: (value, event) => handleInput(index, value, event),
+					onKeydown: ($event) => handleKeydown(index, $event),
+					onPaste: ($event) => handlePaste($event, index),
+					onMousedown: ($event) => handleCursorToEnd($event, index)
+				}, null, 8, [
+					"type",
+					"class",
+					"model-value",
+					"size",
+					"error",
+					"disabled",
+					"readonly",
+					"input-attrs",
+					"onFocus",
+					"onInput",
+					"onKeydown",
+					"onPaste",
+					"onMousedown"
+				]), __props.separator ? (openBlock(), createBlock(VNodeRenderer, {
+					key: 0,
+					content: __props.separator(index, character)
+				}, null, 8, ["content"])) : createCommentVNode("", true)], 64);
+			}), 128))], 10, _hoisted_1);
+		};
+	}
+}));
+//#endregion
+export { verification_code_vue_vue_type_script_setup_true_lang_default as default };

package/es/watermark/hooks/use-mutation-observer.js

@@ -1,4 +1,4 @@
-import _objectWithoutProperties from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectWithoutProperties.js";
+import _objectWithoutProperties from "../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectWithoutProperties.js";
 import { getCurrentScope, onScopeDispose, unref, watch } from "vue";
 //#region components/watermark/hooks/use-mutation-observer.ts
 var _excluded = ["window"];

package/es/watermark/index.d.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 import type { SDOptions } from '../_utils/types';
-import _Watermark from './watermark';
+import _Watermark from './watermark.vue';
 declare const Watermark: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
         content: {
@@ -27,7 +27,7 @@ declare const Watermark: {
             default: number;
         };
         font: {
-            type: import("vue").PropType<import("./interface").WatermarkFont>;
+            type: import("vue").PropType<import("./interface.ts").WatermarkFont>;
         };
         zIndex: {
             type: NumberConstructor;
@@ -53,7 +53,7 @@ declare const Watermark: {
             type: BooleanConstructor;
             default: boolean;
         };
-    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
         repeat: boolean;
         alpha: number;
         rotate: number;
@@ -94,7 +94,7 @@ declare const Watermark: {
             default: number;
         };
         font: {
-            type: import("vue").PropType<import("./interface").WatermarkFont>;
+            type: import("vue").PropType<import("./interface.ts").WatermarkFont>;
         };
         zIndex: {
             type: NumberConstructor;
@@ -120,7 +120,7 @@ declare const Watermark: {
             type: BooleanConstructor;
             default: boolean;
         };
-    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
         repeat: boolean;
         alpha: number;
         rotate: number;
@@ -158,7 +158,7 @@ declare const Watermark: {
         default: number;
     };
     font: {
-        type: import("vue").PropType<import("./interface").WatermarkFont>;
+        type: import("vue").PropType<import("./interface.ts").WatermarkFont>;
     };
     zIndex: {
         type: NumberConstructor;
@@ -184,7 +184,7 @@ declare const Watermark: {
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+}>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     repeat: boolean;
     alpha: number;
     rotate: number;
@@ -193,7 +193,11 @@ declare const Watermark: {
     antiTamper: boolean;
     grayscale: boolean;
     staggered: boolean;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        default?: (props: {}) => any;
+    };
+}) & {
     install: (app: App, options?: SDOptions) => void;
 };
 export type WatermarkInstance = InstanceType<typeof _Watermark>;