@sdata/web-vue 3.27.0 → 3.28.0

package/es/input-mask/presets.js

@@ -0,0 +1,220 @@
+//#region components/input-mask/presets.ts
+var testPattern = (pattern, value) => {
+	pattern.lastIndex = 0;
+	return pattern.test(value);
+};
+var filterCharacters = (pattern) => (value) => Array.from(value).filter((character) => testPattern(pattern, character)).join("");
+var acceptsIpv4 = (value) => {
+	if (!/^\d*(?:\.\d*){0,3}$/.test(value)) return false;
+	return value.split(".").every((part) => part.length <= 3 && (!part || Number(part) <= 255));
+};
+var acceptsIpv6 = (value) => {
+	var _value$match, _value$match2;
+	if (!/^[0-9A-Fa-f:]*$/.test(value)) return false;
+	if (value.includes(":::")) return false;
+	if (((_value$match = value.match(/::/g)) !== null && _value$match !== void 0 ? _value$match : []).length > 1) return false;
+	if (((_value$match2 = value.match(/:/g)) !== null && _value$match2 !== void 0 ? _value$match2 : []).length > 7) return false;
+	return value.split(":").every((part) => part.length <= 4);
+};
+var formatDateTimeDigits = (digits, dateTimeSeparator) => {
+	const value = digits.slice(0, 14);
+	let result = value.slice(0, 4);
+	if (value.length >= 4) result += "-";
+	result += value.slice(4, 6);
+	if (value.length >= 6) result += "-";
+	result += value.slice(6, 8);
+	if (value.length >= 8) result += dateTimeSeparator;
+	result += value.slice(8, 10);
+	if (value.length >= 10) result += ":";
+	result += value.slice(10, 12);
+	if (value.length >= 12) result += ":";
+	result += value.slice(12, 14);
+	return result;
+};
+var normalizeDateTime = (dateTimeSeparator) => (value) => {
+	const normalized = filterCharacters(/[0-9TtZz:+\-. ]/)(value);
+	const suffix = normalized.slice(19);
+	if (normalized.includes(".") || /[Zz+]/.test(normalized) || suffix.includes("-")) return normalized;
+	return formatDateTimeDigits(normalized.replace(/\D/g, ""), dateTimeSeparator);
+};
+var normalizeIban = (value) => filterCharacters(/[A-Za-z0-9]/)(value).toUpperCase().slice(0, 34).replace(/(.{4})(?=.)/g, "$1 ");
+var looseUriCharacters = /[^\s]/u;
+var inputMaskPresets = {
+	"date": {
+		placeholder: "YYYY-MM-DD",
+		inputMode: "numeric",
+		mask: "9999-99-99"
+	},
+	"time": {
+		placeholder: "HH:MM:SS",
+		inputMode: "numeric",
+		mask: "99:99:99"
+	},
+	"datetime": {
+		placeholder: "2026-08-06 10:30:00",
+		inputMode: "text",
+		normalize: normalizeDateTime(" "),
+		accepts: (value) => /^\d{0,4}(?:-\d{0,2}(?:-\d{0,2}(?:[Tt ]\d{0,2}(?::\d{0,2}(?::\d{0,2}(?:\.\d{0,6})?(?:[Zz]|[+-]\d{0,2}(?::\d{0,2})?)?)?)?)?)?)?$/.test(value)
+	},
+	"rfc3339": {
+		placeholder: "2026-08-06T10:30:00+08:00",
+		inputMode: "text",
+		normalize: normalizeDateTime("T"),
+		accepts: (value) => /^\d{0,4}(?:-\d{0,2}(?:-\d{0,2}(?:[Tt]\d{0,2}(?::\d{0,2}(?::\d{0,2}(?:\.\d{0,6})?(?:[Zz]|[+-]\d{0,2}(?::\d{0,2})?)?)?)?)?)?)?$/.test(value)
+	},
+	"ip": {
+		placeholder: "192.168.1.1 或 2001:db8::1",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Fa-f:.]/),
+		accepts: (value) => acceptsIpv4(value) || acceptsIpv6(value)
+	},
+	"ipv4": {
+		placeholder: "192.168.1.1",
+		inputMode: "decimal",
+		normalize: filterCharacters(/[0-9.]/),
+		accepts: acceptsIpv4
+	},
+	"ipv6": {
+		placeholder: "2001:db8::1",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Fa-f:]/),
+		accepts: acceptsIpv6
+	},
+	"ip-range": {
+		placeholder: "192.168.1.0/24",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Fa-f:./]/),
+		accepts: (value) => {
+			const slash = value.lastIndexOf("/");
+			if (slash === -1) return acceptsIpv4(value) || acceptsIpv6(value);
+			const ip = value.slice(0, slash);
+			const prefix = value.slice(slash + 1);
+			if (!(acceptsIpv4(ip) || acceptsIpv6(ip))) return false;
+			if (prefix === "") return true;
+			if (!/^\d{0,3}$/.test(prefix)) return false;
+			const prefixNum = Number(prefix);
+			if (prefixNum > 128) return false;
+			if (ip.includes(".") && !ip.includes(":") && prefixNum > 32) return false;
+			return true;
+		}
+	},
+	"url": {
+		placeholder: "https://example.com/path",
+		inputMode: "url",
+		normalize: filterCharacters(/[A-Za-z0-9:/?#@!$&'()*+,;=._~%\u005B\u005D-]/),
+		accepts: (value) => /^(?:[A-Za-z][A-Za-z\d+.-]*:\/{0,2})?[A-Za-z0-9:/?#@!$&'()*+,;=._~%\u005B\u005D-]*$/.test(value)
+	},
+	"email": {
+		placeholder: "name@example.com",
+		inputMode: "email",
+		normalize: filterCharacters(looseUriCharacters),
+		accepts: (value) => /^[^\s@]*(?:@[^\s@]*)?$/u.test(value)
+	},
+	"fqdn": {
+		placeholder: "example.com",
+		inputMode: "url",
+		normalize: filterCharacters(/* @__PURE__ */ new RegExp("[\\p{Letter}\\p{Number}._*-]", "u")),
+		accepts: (value) => !value.includes("..")
+	},
+	"semver": {
+		placeholder: "1.2.3-beta.1+build.7",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Za-z.+-]/),
+		accepts: (value) => /^(?:0|[1-9]\d*)?(?:\.(?:0|[1-9]\d*)?)?(?:\.(?:0|[1-9]\d*)?)?(?:-[0-9A-Za-z-]*(?:\.[0-9A-Za-z-]*)*)?(?:\+[0-9A-Za-z-]*(?:\.[0-9A-Za-z-]*)*)?$/.test(value)
+	},
+	"uuid": {
+		placeholder: "550e8400-e29b-41d4-a716-446655440000",
+		inputMode: "text",
+		mask: "hhhhhhhh-hhhh-hhhh-hhhh-hhhhhhhhhhhh",
+		formatChars: { h: /[0-9A-Fa-f]/ }
+	},
+	"mac-address": {
+		placeholder: "01:23:45:67:89:ab",
+		inputMode: "text",
+		mask: "hh:hh:hh:hh:hh:hh",
+		formatChars: { h: /[0-9A-Fa-f]/ }
+	},
+	"lat-long": {
+		placeholder: "31.2304, 121.4737",
+		inputMode: "text",
+		normalize: filterCharacters(/[-0-9+., ]/),
+		accepts: (value) => /^[-+]?\d*(?:\.\d*)?(?:, ?[-+]?\d*(?:\.\d*)?)?$/.test(value)
+	},
+	"hex-color": {
+		placeholder: "#1677ff",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Fa-f#]/),
+		accepts: (value) => /^#?[0-9A-Fa-f]{0,8}$/.test(value)
+	},
+	"rgb-color": {
+		placeholder: "rgb(22, 119, 255)",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9a-zA-Z().,% ]/),
+		accepts: (value) => /^r(?:g(?:b(?:a)?)?)?\(?(?:\d{0,3}(?:, ?\d{0,3}(?:, ?\d{0,3}(?:, ?(?:\d{0,3}(?:\.\d{0,3})?%?)?)?)?)?)?\)?$/i.test(value)
+	},
+	"hsl": {
+		placeholder: "hsl(210, 100%, 50%)",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9a-zA-Z().,% ]/),
+		accepts: (value) => /^h(?:s(?:l(?:a)?)?)?\(?(?:\d{0,3}(?:, ?\d{0,3}%?(?:, ?\d{0,3}%?(?:, ?(?:\d{0,3}(?:\.\d{0,3})?%?)?)?)?)?)?\)?$/i.test(value)
+	},
+	"imei": {
+		placeholder: "12-345678-901234-5",
+		inputMode: "numeric",
+		mask: "99-999999-999999-9"
+	},
+	"issn": {
+		placeholder: "1234-567X",
+		inputMode: "text",
+		mask: "9999-999x",
+		formatChars: { x: /[0-9Xx]/ }
+	},
+	"isrc": {
+		placeholder: "US-AAA-26-12345",
+		inputMode: "text",
+		mask: "aa-aaa-99-99999"
+	},
+	"iso6346": {
+		placeholder: "MSCU 123456 7",
+		inputMode: "text",
+		mask: "aaaa 999999 9"
+	},
+	"jwt": {
+		placeholder: "header.payload.signature",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Za-z._-]/),
+		accepts: (value) => /^[0-9A-Za-z_-]*(?:\.[0-9A-Za-z_-]*){0,2}$/.test(value)
+	},
+	"mime-type": {
+		placeholder: "application/json",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Za-z!#$&^_.+/-]/),
+		accepts: (value) => /^[^/\s]*(?:\/[^/\s]*)?$/.test(value)
+	},
+	"mailto-uri": {
+		placeholder: "mailto:name@example.com",
+		inputMode: "email",
+		normalize: filterCharacters(looseUriCharacters),
+		accepts: (value) => /^(?:mailto:?)?[^\s]*$/i.test(value)
+	},
+	"data-uri": {
+		placeholder: "data:text/plain;base64,...",
+		inputMode: "text",
+		normalize: filterCharacters(looseUriCharacters),
+		accepts: (value) => /^(?:data:?)?[^\s]*$/i.test(value)
+	},
+	"magnet-uri": {
+		placeholder: "magnet:?xt=urn:btih:...",
+		inputMode: "text",
+		normalize: filterCharacters(looseUriCharacters),
+		accepts: (value) => /^(?:magnet:?)?[^\s]*$/i.test(value)
+	},
+	"iban": {
+		placeholder: "GB82 WEST 1234 5698 7654 32",
+		inputMode: "text",
+		normalize: normalizeIban,
+		accepts: (value) => /^[A-Z0-9 ]{0,42}$/.test(value)
+	}
+};
+//#endregion
+export { inputMaskPresets };

package/es/input-mask/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/input-mask/style/index.css

@@ -0,0 +1,20 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-input-mask .sd-input {
+  font-variant-numeric: tabular-nums;
+}

package/es/input-mask/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../input/style';
+import './index.scss';

package/es/input-mask/style/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/input-mask/style/index.scss

@@ -0,0 +1,10 @@
+@use '@style/theme/index.scss' as theme;
+@use '@components/input-mask/style/token.scss' as *;
+@use 'sass:string';
+
+$input-mask-prefix-cls: string.unquote('#{theme.$prefix}-input-mask');
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+
+.#{$input-mask-prefix-cls} .#{$input-prefix-cls} {
+  font-variant-numeric: $input-mask-font-variant-numeric;
+}

package/es/input-mask/style/token.scss

@@ -0,0 +1,5 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+
+$input-mask-font-variant-numeric: tabular-nums;

package/es/input-mask/types.d.ts

@@ -0,0 +1,49 @@
+export type InputMaskSize = 'mini' | 'small' | 'medium' | 'large';
+export type InputMaskToken = string | RegExp;
+export type InputMaskPattern = string | readonly InputMaskToken[];
+export interface InputMaskSelection {
+    start: number;
+    end: number;
+}
+export interface InputMaskState {
+    value: string;
+    selection: InputMaskSelection | null;
+}
+export type InputMaskBeforeChange = (nextState: InputMaskState, previousState: InputMaskState) => InputMaskState;
+export interface InputMaskPresetDefinition {
+    placeholder: string;
+    inputMode?: 'decimal' | 'email' | 'numeric' | 'search' | 'tel' | 'text' | 'url';
+    mask?: InputMaskPattern;
+    formatChars?: Readonly<Record<string, RegExp>>;
+    normalize?: (value: string) => string;
+    accepts?: (value: string) => boolean;
+}
+export interface InputMaskProps {
+    modelValue?: string;
+    defaultValue?: string;
+    mask?: InputMaskPattern;
+    preset?: InputMaskPresetName;
+    maskChar?: string | null;
+    formatChars?: Readonly<Record<string, RegExp>>;
+    alwaysShowMask?: boolean;
+    beforeMaskedValueChange?: InputMaskBeforeChange;
+    size?: InputMaskSize;
+    allowClear?: boolean;
+    disabled?: boolean;
+    readonly?: boolean | string;
+    error?: boolean;
+    placeholder?: string;
+    fitWidth?: boolean;
+    maxWFull?: boolean;
+    showWordLimit?: boolean;
+    maxLength?: number | {
+        length: number;
+        errorOnly?: boolean;
+    };
+    wordLength?: (value: string) => number;
+    wordSlice?: (value: string, maxLength: number) => string;
+    inputAttrs?: Record<string, unknown>;
+    prepend?: string;
+    append?: string;
+}
+export type InputMaskPresetName = 'data-uri' | 'date' | 'datetime' | 'email' | 'fqdn' | 'hex-color' | 'hsl' | 'iban' | 'imei' | 'ip' | 'ip-range' | 'ipv4' | 'ipv6' | 'isrc' | 'iso6346' | 'issn' | 'jwt' | 'lat-long' | 'mac-address' | 'magnet-uri' | 'mailto-uri' | 'mime-type' | 'rgb-color' | 'rfc3339' | 'semver' | 'time' | 'url' | 'uuid';

package/es/sd-vue.js

@@ -105,6 +105,7 @@ import preview_group_default from "./image/preview-group.js";
 import Image from "./image/index.js";
 import FilePreviewer from "./file-previewer/index.js";
 import Icon from "./icon-component/index.js";
+import InputMask from "./input-mask/index.js";
 import KvList from "./kv-list/index.js";
 import content_default from "./layout/content.js";
 import footer_default from "./layout/footer.js";
@@ -194,6 +195,7 @@ var components = {
 	JsonForm,
 	KvList,
 	Input,
+	InputMask,
 	InputNumber,
 	InputTag,
 	Mention,

package/es/textarea/textarea.vue_vue_type_script_setup_true_lang.js

@@ -12,6 +12,7 @@ import { useCursor } from "../_hooks/use-cursor.js";
 import { useFitWidth } from "../_hooks/use-fit-width.js";
 import { isReadonlyModificationKey, useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
 import { INPUT_EVENTS } from "../_utils/constant.js";
+import { countGraphemes, sliceGraphemes } from "../_utils/grapheme.js";
 import { omit } from "../_utils/omit.js";
 import pick from "../_utils/pick.js";
 import Tooltip from "../tooltip/index.js";
@@ -191,9 +192,8 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			return props.maxLength;
 		});
 		const getValueLength = (value) => {
-			var _value$length;
 			if (isFunction(props.wordLength)) return props.wordLength(value);
-			return (_value$length = value.length) !== null && _value$length !== void 0 ? _value$length : 0;
+			return countGraphemes(value);
 		};
 		const valueLength = computed(() => getValueLength(computedValue.value));
 		const mergedError = computed(() => _mergedError.value || Boolean(computedMaxLength.value && maxLengthErrorOnly.value && valueLength.value > computedMaxLength.value));
@@ -214,10 +214,9 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			});
 		};
 		const updateValue = (value, inner = true) => {
-			if (computedMaxLength.value && !maxLengthErrorOnly.value && getValueLength(value) > computedMaxLength.value) {
-				var _props$wordSlice, _props$wordSlice2;
-				value = (_props$wordSlice = (_props$wordSlice2 = props.wordSlice) === null || _props$wordSlice2 === void 0 ? void 0 : _props$wordSlice2.call(props, value, computedMaxLength.value)) !== null && _props$wordSlice !== void 0 ? _props$wordSlice : value.slice(0, computedMaxLength.value);
-			}
+			if (computedMaxLength.value && !maxLengthErrorOnly.value && getValueLength(value) > computedMaxLength.value) if (isFunction(props.wordSlice)) value = props.wordSlice(value, computedMaxLength.value);
+			else if (isFunction(props.wordLength)) value = value.slice(0, computedMaxLength.value);
+			else value = sliceGraphemes(value, computedMaxLength.value);
 			_value.value = value;
 			if (inner) emit("update:modelValue", value);
 			keepControl();

package/es/toolbar/toolbar.vue_vue_type_script_setup_true_lang.js

@@ -27,6 +27,8 @@ var toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			type: Boolean,
 			default: true
 		},
+		searchBtn: {},
+		resetBtn: {},
 		showActions: {
 			type: Boolean,
 			default: true
@@ -175,21 +177,17 @@ var toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					_: 3
 				}, 8, ["class"])) : createCommentVNode("", true), _ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", {}, void 0, void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
 					renderSlot(_ctx.$slots, "action-prepend"),
-					__props.showSearch ? (openBlock(), createBlock(unref(Button), {
+					__props.showSearch ? (openBlock(), createBlock(unref(Button), mergeProps({
 						key: 0,
-						type: "primary",
-						onClick: handleSearch
-					}, {
+						type: "primary"
+					}, __props.searchBtn, { onClick: handleSearch }), {
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.searchText), 1)]),
 						_: 1
-					})) : createCommentVNode("", true),
-					__props.showReset ? (openBlock(), createBlock(unref(Button), {
-						key: 1,
-						onClick: _cache[1] || (_cache[1] = ($event) => reset())
-					}, {
+					}, 16)) : createCommentVNode("", true),
+					__props.showReset ? (openBlock(), createBlock(unref(Button), mergeProps({ key: 1 }, __props.resetBtn, { onClick: _cache[1] || (_cache[1] = ($event) => reset()) }), {
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.resetText), 1)]),
 						_: 1
-					})) : createCommentVNode("", true),
+					}, 16)) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "action-append")
 				], 64))], 2)) : createCommentVNode("", true)]),
 				_: 3

package/es/toolbar/types.d.ts

@@ -1,3 +1,4 @@
+import type { ButtonProps } from '../button';
 import type { JsonFormSchema } from '../json-form';
 import type { SpinProps } from '../spin';
 export type ToolbarModelValue = Record<string, unknown>;
@@ -7,6 +8,8 @@ export interface ToolbarProps {
     spinProps?: SpinProps;
     showSearch?: boolean;
     showReset?: boolean;
+    searchBtn?: ButtonProps;
+    resetBtn?: ButtonProps;
     showActions?: boolean;
     searchText?: string;
     resetText?: string;

package/json/vetur-attributes.json

@@ -4184,6 +4184,12 @@
     "description": "Whether to show the reset button",
     "type": "boolean"
   },
+  "sd-toolbar/search-btn": {
+    "description": "Props of the search button"
+  },
+  "sd-toolbar/reset-btn": {
+    "description": "Props of the reset button"
+  },
   "sd-toolbar/show-actions": {
     "description": "Whether to show the right-side action area",
     "type": "boolean"

package/json/vetur-tags.json

@@ -698,6 +698,9 @@
       "zoom-rate"
     ]
   },
+  "sd-input-mask": {
+    "attributes": []
+  },
   "sd-input-number": {
     "attributes": [
       "change",
@@ -1728,6 +1731,8 @@
       "spin-props",
       "show-search",
       "show-reset",
+      "search-btn",
+      "reset-btn",
       "show-actions",
       "search-text",
       "reset-text",

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "3.26.0",
+  "version": "3.27.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -4126,6 +4126,12 @@
           ],
           "slots": []
         },
+        {
+          "name": "sd-input-mask",
+          "attributes": [],
+          "events": [],
+          "slots": []
+        },
         {
           "name": "sd-input-number",
           "attributes": [
@@ -10225,6 +10231,22 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "search-btn",
+              "description": "Props of the search button",
+              "value": {
+                "type": "ButtonProps",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "reset-btn",
+              "description": "Props of the reset button",
+              "value": {
+                "type": "ButtonProps",
+                "kind": "expression"
+              }
+            },
             {
               "name": "show-actions",
               "description": "Whether to show the right-side action area",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "3.27.0",
+  "version": "3.28.0",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",