@sdata/web-vue 3.27.0 → 3.28.0

package/es/_utils/grapheme.d.ts

@@ -0,0 +1,5 @@
+export declare const splitGraphemes: (value: string) => string[];
+export declare const countGraphemes: (value: string) => number;
+export declare const sliceGraphemes: (value: string, maxLength: number) => string;
+export declare const codeUnitToGraphemeIndex: (value: string, offset: number) => number;
+export declare const graphemeIndexToCodeUnit: (value: string, index: number) => number;

package/es/_utils/grapheme.js

@@ -0,0 +1,93 @@
+//#region components/_utils/grapheme.ts
+/**
+* Grapheme-aware string utilities built on `Intl.Segmenter`.
+*
+* The DOM (`selectionStart`, `value.length`, `setSelectionRange`) counts in
+* UTF-16 code units, while user-perceived characters are grapheme clusters.
+* These helpers convert between the two so that astral characters (CJK
+* Extension B, emoji) and combining sequences are counted and sliced as a
+* single unit. Falls back to code-point iteration when `Intl.Segmenter` is
+* unavailable (older runtimes).
+*/
+var segmenter;
+var getSegmenter = () => {
+	var _segmenter;
+	if (segmenter === null) return void 0;
+	if (segmenter) return segmenter;
+	if (typeof Intl !== "undefined" && typeof Intl.Segmenter === "function") segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+	else segmenter = null;
+	return (_segmenter = segmenter) !== null && _segmenter !== void 0 ? _segmenter : void 0;
+};
+/** Split a string into its grapheme-cluster segments. */
+var splitGraphemes = (value) => {
+	const seg = getSegmenter();
+	if (!seg) return Array.from(value);
+	const result = [];
+	for (const { segment } of seg.segment(value)) result.push(segment);
+	return result;
+};
+/** Count user-perceived characters (grapheme clusters). */
+var countGraphemes = (value) => splitGraphemes(value).length;
+/** Keep the first `maxLength` grapheme clusters. */
+var sliceGraphemes = (value, maxLength) => {
+	if (maxLength <= 0) return "";
+	const seg = getSegmenter();
+	if (!seg) return Array.from(value).slice(0, maxLength).join("");
+	let count = 0;
+	let out = "";
+	for (const { segment } of seg.segment(value)) {
+		if (count >= maxLength) break;
+		out += segment;
+		count++;
+	}
+	return out;
+};
+/**
+* Grapheme index that contains (or is at) the given UTF-16 code-unit offset.
+* Round-trips with {@link graphemeIndexToCodeUnit}.
+*/
+var codeUnitToGraphemeIndex = (value, offset) => {
+	const seg = getSegmenter();
+	if (!seg) {
+		let index = 0;
+		let acc = 0;
+		for (const grapheme of Array.from(value)) {
+			if (acc >= offset) break;
+			acc += grapheme.length;
+			index++;
+		}
+		return index;
+	}
+	let index = 0;
+	let acc = 0;
+	for (const { segment } of seg.segment(value)) {
+		if (acc >= offset) break;
+		acc += segment.length;
+		index++;
+	}
+	return index;
+};
+/** UTF-16 code-unit offset at the start of the given grapheme index. */
+var graphemeIndexToCodeUnit = (value, index) => {
+	const seg = getSegmenter();
+	if (!seg) {
+		let offset = 0;
+		let i = 0;
+		for (const grapheme of Array.from(value)) {
+			if (i >= index) break;
+			offset += grapheme.length;
+			i++;
+		}
+		return offset;
+	}
+	let offset = 0;
+	let i = 0;
+	for (const { segment } of seg.segment(value)) {
+		if (i >= index) break;
+		offset += segment.length;
+		i++;
+	}
+	return offset;
+};
+//#endregion
+export { codeUnitToGraphemeIndex, countGraphemes, graphemeIndexToCodeUnit, sliceGraphemes, splitGraphemes };

package/es/basic-crud-table/basic-crud-table.vue_vue_type_script_setup_true_lang.js

@@ -25,6 +25,11 @@ var basic_crud_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		columns: {},
 		tableProps: { default: () => ({}) },
 		toolbarProps: { default: () => ({}) },
+		searchBtn: {},
+		resetBtn: {},
+		createBtn: {},
+		editBtn: { type: [Object, Function] },
+		deleteBtn: { type: [Object, Function] },
 		spinProps: {},
 		modalProps: { default: () => ({}) },
 		modalFormProps: { default: () => ({ schemas: [] }) },
@@ -165,6 +170,9 @@ var basic_crud_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		function getForwardedSlotNames(prefix, excluded = []) {
 			return Object.keys(slots).filter((name) => name.startsWith(prefix)).map((name) => name.slice(prefix.length)).filter((name) => !excluded.includes(name));
 		}
+		function resolveRowLinkProps(value, row) {
+			return isFunction(value) ? value(row) : value;
+		}
 		function resolvePaginationNumber(controlled, initial, fallback) {
 			const pagination = __props.tableProps.pagination;
 			if (typeof pagination === "object") {
@@ -387,13 +395,10 @@ var basic_crud_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					!__props.showToolbar && __props.showCreate ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: normalizeClass(`${unref(prefixCls)}-header-actions`)
-					}, [createVNode(unref(Button), {
-						type: "primary",
-						onClick: handleCreate
-					}, {
+					}, [createVNode(unref(Button), mergeProps({ type: "primary" }, __props.createBtn, { onClick: handleCreate }), {
 						default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("新建", -1)])]),
 						_: 1
-					})], 2)) : createCommentVNode("", true),
+					}, 16)], 2)) : createCommentVNode("", true),
 					__props.showToolbar ? (openBlock(), createBlock(unref(Toolbar), mergeProps({
 						key: 1,
 						ref_key: "toolbarRef",
@@ -402,17 +407,18 @@ var basic_crud_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => toolbarModel.value = $event)
 					}, __props.toolbarProps, {
 						loading: loading.value,
+						"search-btn": __props.searchBtn,
+						"reset-btn": __props.resetBtn,
 						onSearch: handleSearch,
 						onReset: handleReset
 					}), createSlots({
-						"action-append": withCtx(() => [renderSlot(_ctx.$slots, "toolbar__action_append"), __props.showCreate ? (openBlock(), createBlock(unref(Button), {
+						"action-append": withCtx(() => [renderSlot(_ctx.$slots, "toolbar__action_append"), __props.showCreate ? (openBlock(), createBlock(unref(Button), mergeProps({
 							key: 0,
-							type: "primary",
-							onClick: handleCreate
-						}, {
-							default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("新建", -1)])]),
+							type: "primary"
+						}, __props.createBtn, { onClick: handleCreate }), {
+							default: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode(" 新建 ", -1)])]),
 							_: 1
-						})) : createCommentVNode("", true)]),
+						}, 16)) : createCommentVNode("", true)]),
 						_: 2
 					}, [
 						_ctx.$slots.toolbar__default ? {
@@ -431,7 +437,12 @@ var basic_crud_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 								fn: withCtx((data) => [renderSlot(_ctx.$slots, `toolbar__${name}`, normalizeProps(guardReactiveProps(data)))])
 							};
 						})
-					]), 1040, ["modelValue", "loading"])) : createCommentVNode("", true)
+					]), 1040, [
+						"modelValue",
+						"loading",
+						"search-btn",
+						"reset-btn"
+					])) : createCommentVNode("", true)
 				], 2)) : createCommentVNode("", true),
 				createVNode(unref(Spin), mergeProps(resolvedSpinProps.value, {
 					loading: loading.value,
@@ -449,14 +460,13 @@ var basic_crud_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						"basic-crud-action": withCtx((data) => [createVNode(unref(Space), null, {
 							default: withCtx(() => [
 								renderSlot(_ctx.$slots, "table__action_prepend", normalizeProps(guardReactiveProps(data))),
-								__props.showEdit ? (openBlock(), createBlock(unref(Link), {
+								__props.showEdit ? (openBlock(), createBlock(unref(Link), mergeProps({
 									key: 0,
-									ellipsis: false,
-									onClick: ($event) => handleEdit(data.record, data)
-								}, {
+									ellipsis: false
+								}, resolveRowLinkProps(__props.editBtn, data.record), { onClick: ($event) => handleEdit(data.record, data) }), {
 									default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode(" 编辑 ", -1)])]),
 									_: 1
-								}, 8, ["onClick"])) : createCommentVNode("", true),
+								}, 16, ["onClick"])) : createCommentVNode("", true),
 								__props.showDelete ? (openBlock(), createBlock(unref(Popconfirm), {
 									key: 1,
 									content: deleteConfirmContent.value,
@@ -464,15 +474,15 @@ var basic_crud_table_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 									"on-before-ok": handleDeleteConfirm,
 									onPopupVisibleChange: (visible) => handleDeletePopupChange(visible, data.record)
 								}, {
-									default: withCtx(() => [createVNode(unref(Link), {
+									default: withCtx(() => [createVNode(unref(Link), mergeProps({
 										ellipsis: false,
 										status: "danger"
-									}, {
-										default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode("删除", -1)])]),
+									}, resolveRowLinkProps(__props.deleteBtn, data.record)), {
+										default: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode(" 删除 ", -1)])]),
 										_: 1
-									})]),
-									_: 1
-								}, 8, ["content", "onPopupVisibleChange"])) : createCommentVNode("", true),
+									}, 16)]),
+									_: 2
+								}, 1032, ["content", "onPopupVisibleChange"])) : createCommentVNode("", true),
 								renderSlot(_ctx.$slots, "table__action_append", normalizeProps(guardReactiveProps(data)))
 							]),
 							_: 2

package/es/basic-crud-table/index.d.ts

@@ -2718,5 +2718,5 @@ declare const BasicCrudTable: {
     install: (app: App, options?: SDOptions) => void;
 };
 export type BasicCrudTableInstance = InstanceType<typeof _BasicCrudTable>;
-export type { BasicCrudTableActionSlotProps, BasicCrudTableDataResult, BasicCrudTableModalFormProps, BasicCrudTableModalProps, BasicCrudTableModalSlotProps, BasicCrudTableModalSubmitContext, BasicCrudTableProps, BasicCrudTableTableProps, BasicCrudTableToolbarProps, InferBasicCrudTableRow, InferBasicCrudTableRowFromValue, MaybePromise, } from './types';
+export type { BasicCrudTableActionSlotProps, BasicCrudTableDataResult, BasicCrudTableModalFormProps, BasicCrudTableModalProps, BasicCrudTableModalSlotProps, BasicCrudTableModalSubmitContext, BasicCrudTableProps, BasicCrudTableRowLinkProps, BasicCrudTableTableProps, BasicCrudTableToolbarProps, InferBasicCrudTableRow, InferBasicCrudTableRowFromValue, MaybePromise, } from './types';
 export default BasicCrudTable;

package/es/basic-crud-table/types.d.ts

@@ -1,5 +1,7 @@
 import type { UnknownRecord } from 'type-fest';
+import type { ButtonProps } from '../button';
 import type { JsonFormProps } from '../json-form';
+import type { LinkProps } from '../link';
 import type ModalComponent from '../modal/modal.vue';
 import type { SpinProps } from '../spin';
 import type { TableColumnData, TableData, TableInstance } from '../table';
@@ -12,14 +14,20 @@ export type BasicCrudTableDataResult<TData extends TableData = TableData> = TDat
     [key: string]: unknown;
 };
 export type BasicCrudTableTableProps = Omit<TableInstance['$props'], 'columns' | 'data' | 'onChange' | 'onPageChange' | 'onPageSizeChange'>;
-export type BasicCrudTableToolbarProps = Omit<ToolbarProps, 'loading'>;
+export type BasicCrudTableToolbarProps = Omit<ToolbarProps, 'loading' | 'searchBtn' | 'resetBtn'>;
 export type BasicCrudTableModalProps = Omit<InstanceType<typeof ModalComponent>['$props'], 'visible' | 'title' | 'onBeforeOk' | 'onClose' | 'onUpdate:visible'>;
 export type BasicCrudTableModalFormProps = Omit<JsonFormProps, 'model'>;
+export type BasicCrudTableRowLinkProps<TRow extends TableData = TableData> = LinkProps | ((row: TRow) => LinkProps);
 export interface BasicCrudTableProps<TRow extends TableData = TableData> {
     title?: string;
     columns: TableColumnData[];
     tableProps?: BasicCrudTableTableProps;
     toolbarProps?: BasicCrudTableToolbarProps;
+    searchBtn?: ButtonProps;
+    resetBtn?: ButtonProps;
+    createBtn?: ButtonProps;
+    editBtn?: BasicCrudTableRowLinkProps<TRow>;
+    deleteBtn?: BasicCrudTableRowLinkProps<TRow>;
     spinProps?: SpinProps;
     modalProps?: BasicCrudTableModalProps;
     modalFormProps?: BasicCrudTableModalFormProps;

package/es/components.d.ts

@@ -72,6 +72,7 @@ declare module 'vue' {
         SdInputGroup: SDVue['InputGroup'];
         SdInputSearch: SDVue['InputSearch'];
         SdInputPassword: SDVue['InputPassword'];
+        SdInputMask: SDVue['InputMask'];
         SdInputNumber: SDVue['InputNumber'];
         SdInputTag: SDVue['InputTag'];
         SdLayout: SDVue['Layout'];

package/es/index.css

@@ -13423,6 +13423,10 @@ body.sd-tour-active .sd-tour-popover * {
   cursor: pointer;
 }
 
+.sd-input-mask .sd-input {
+  font-variant-numeric: tabular-nums;
+}
+
 .sd-image-trigger {
   padding: 6px 4px;
   background: var(--sd-color-bg-5);

package/es/index.d.ts

@@ -81,6 +81,9 @@ export { default as Image, ImagePreviewAction, ImagePreview, ImagePreviewGroup }
 export type { ImageInstance, ImagePreviewActionInstance, ImagePreviewInstance, ImagePreviewGroupInstance, } from './image';
 export { default as Input, InputGroup, InputPassword, InputSearch } from './input';
 export type { InputGroupInstance, InputInstance, InputPasswordInstance, InputSearchInstance, } from './input';
+export { default as InputMask } from './input-mask';
+export type { InputMaskBeforeChange, InputMaskInstance, InputMaskPattern, InputMaskPresetDefinition, InputMaskPresetName, InputMaskProps, InputMaskSelection, InputMaskState, InputMaskToken, } from './input-mask';
+export { defaultInputMaskFormatChars, formatInputMask, inputMaskPresets } from './input-mask';
 export { default as InputNumber } from './input-number';
 export type { InputNumberChangeHandler, InputNumberFormatter, InputNumberInputHandler, InputNumberInstance, InputNumberParser, InputNumberValue, } from './input-number';
 export { default as InputTag } from './input-tag';

package/es/index.js

@@ -107,6 +107,9 @@ 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 { defaultInputMaskFormatChars, formatInputMask } from "./input-mask/mask-engine.js";
+import { inputMaskPresets } from "./input-mask/presets.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";
@@ -169,4 +172,4 @@ import Typography from "./typography/index.js";
 import Upload from "./upload/index.js";
 import Watermark from "./watermark/index.js";
 import SDVue from "./sd-vue.js";
-export { $createInlineComponentNode, $isInlineComponentNode, A2UI_0_9_1, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, BasicCrudTable, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DEFAULT_LOCALE, DEFAULT_LOCALE_KEY, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, InlineComponentNode, Input, input_group_default as InputGroup, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, KvList, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, MODEL_SELECTOR_PROVIDERS, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, ModelSelector, model_selector_content_default as ModelSelectorContent, model_selector_dialog_default as ModelSelectorDialog, model_selector_empty_default as ModelSelectorEmpty, model_selector_group_default as ModelSelectorGroup, model_selector_input_default as ModelSelectorInput, model_selector_item_default as ModelSelectorItem, model_selector_list_default as ModelSelectorList, model_selector_logo_default as ModelSelectorLogo, model_selector_logo_group_default as ModelSelectorLogoGroup, model_selector_name_default as ModelSelectorName, model_selector_separator_default as ModelSelectorSeparator, model_selector_shortcut_default as ModelSelectorShortcut, model_selector_trigger_default as ModelSelectorTrigger, month_picker_default as MonthPicker, Notification, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, RICH_TEXT_EDITOR_BUILT_IN_NODE_NAMES, RICH_TEXT_EDITOR_JSON_FORM_NODE_NAMES, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, recorder_core_default as RecorderCore, ResizeBox, Result, RichTextEditor, grid_row_default as Row, Scrollbar, Secret, Select, SelectableCard, Sender, SenderHeader, SenderSwitch, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, ThinkingOrb, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, defineJsonFormComponents, defineJsonFormSchemas, getCssVarToken, getLocale, useFormItem, useLocale };
+export { $createInlineComponentNode, $isInlineComponentNode, A2UI_0_9_1, Affix, Alert, Anchor, anchor_link_default as AnchorLink, AutoComplete, Avatar, AvatarGroup, BackTop, Badge, BasicCrudTable, BorderBeam, Breadcrumb, breadcrumb_item_default as BreadcrumbItem, Button, button_group_default as ButtonGroup, Calendar, Card, card_grid_default as CardGrid, card_meta_default as CardMeta, Carousel, carousel_item_default as CarouselItem, Cascader, cascader_panel_default as CascaderPanel, Checkbox, checkbox_group_default as CheckboxGroup, grid_col_default as Col, Collapse, collapse_item_default as CollapseItem, ColorPicker, Comment, ConfigProvider, Copy, countdown_default as Countdown, Cropper, DEFAULT_LOCALE, DEFAULT_LOCALE_KEY, DatePicker, Descriptions, descriptions_item_default as DescriptionsItem, dropdown_group_default as Dgroup, Divider, dropdown_option_default as Doption, Drawer, Dropdown, dropdown_button_default as DropdownButton, dropdown_submenu_default as Dsubmenu, Ellipsis, Empty, FilePreviewer, Form, form_item_default as FormItem, Grid, grid_item_default as GridItem, Icon, Image, preview_default as ImagePreview, preview_action_default as ImagePreviewAction, preview_group_default as ImagePreviewGroup, InlineComponentNode, Input, input_group_default as InputGroup, InputMask, InputNumber, input_password_default as InputPassword, input_search_default as InputSearch, InputTag, JsonForm, KvList, Layout, content_default as LayoutContent, footer_default as LayoutFooter, header_default as LayoutHeader, sider_default as LayoutSider, Link, List, list_item_default as ListItem, list_item_meta_default as ListItemMeta, MODEL_SELECTOR_PROVIDERS, Mention, Menu, item_default as MenuItem, item_group_default as MenuItemGroup, Message, Modal, ModelSelector, model_selector_content_default as ModelSelectorContent, model_selector_dialog_default as ModelSelectorDialog, model_selector_empty_default as ModelSelectorEmpty, model_selector_group_default as ModelSelectorGroup, model_selector_input_default as ModelSelectorInput, model_selector_item_default as ModelSelectorItem, model_selector_list_default as ModelSelectorList, model_selector_logo_default as ModelSelectorLogo, model_selector_logo_group_default as ModelSelectorLogoGroup, model_selector_name_default as ModelSelectorName, model_selector_separator_default as ModelSelectorSeparator, model_selector_shortcut_default as ModelSelectorShortcut, model_selector_trigger_default as ModelSelectorTrigger, month_picker_default as MonthPicker, Notification, OverflowList, PageHeader, Pagination, PerformantEllipsis, Popconfirm, Popover, Progress, QrCode, quarter_picker_default as QuarterPicker, RICH_TEXT_EDITOR_BUILT_IN_NODE_NAMES, RICH_TEXT_EDITOR_JSON_FORM_NODE_NAMES, Radio, radio_group_default as RadioGroup, range_picker_default as RangePicker, Rate, recorder_core_default as RecorderCore, ResizeBox, Result, RichTextEditor, grid_row_default as Row, Scrollbar, Secret, Select, SelectableCard, Sender, SenderHeader, SenderSwitch, Skeleton, line_default as SkeletonLine, shape_default as SkeletonShape, Slider, Space, Spin, Split, Statistic, step_default as Step, Steps, sub_menu_default as SubMenu, Switch, tab_pane_default as TabPane, Table, table_column_default as TableColumn, Tabs, Tag, TagGroup, table_tbody_default as Tbody, table_td_default as Td, Textarea, table_th_default as Th, table_thead_default as Thead, ThemeProvider, ThinkingOrb, TimePicker, Timeline, item_default$1 as TimelineItem, Toolbar, Tooltip, Tour, table_tr_default as Tr, Transfer, Tree, TreeSelect, Trigger, Typography, paragraph_default as TypographyParagraph, text_default as TypographyText, title_default as TypographyTitle, Upload, VerificationCode, Watermark, week_picker_default as WeekPicker, year_picker_default as YearPicker, addI18nMessages, SDVue as default, defaultInputMaskFormatChars, defineJsonFormComponents, defineJsonFormSchemas, formatInputMask, getCssVarToken, getLocale, inputMaskPresets, useFormItem, useLocale };

package/es/index.scss

@@ -58,6 +58,7 @@
 @use '@components/input-tag/style/index.scss' as *;
 @use '@components/input-number/style/index.scss' as *;
 @use '@components/input/style/index.scss' as *;
+@use '@components/input-mask/style/index.scss' as *;
 @use '@components/image/style/index.scss' as *;
 @use '@components/kv-list/style/index.scss' as *;
 @use '@components/grid/style/index.scss' as *;

package/es/input/input.js

@@ -13,6 +13,7 @@ import { useFitWidth } from "../_hooks/use-fit-width.js";
 import { isReadonlyModificationKey, useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
 import { useSize } from "../_hooks/use-size.js";
 import { INPUT_EVENTS } from "../_utils/constant.js";
+import { countGraphemes, sliceGraphemes } from "../_utils/grapheme.js";
 import { Enter } from "../_utils/keycode.js";
 import { omit } from "../_utils/omit.js";
 import pick from "../_utils/pick.js";
@@ -255,9 +256,8 @@ var input_default = /* @__PURE__ */ defineComponent({
 			target: inputRef
 		});
 		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(isObject(props.maxLength) && props.maxLength.errorOnly && valueLength.value > maxLength.value));
@@ -271,10 +271,9 @@ var input_default = /* @__PURE__ */ defineComponent({
 			return Math.floor(maxLength.value / bytePerChar);
 		});
 		const updateValue = (value) => {
-			if (maxLength.value && !maxLengthErrorOnly.value && getValueLength(value) > maxLength.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, maxLength.value)) !== null && _props$wordSlice !== void 0 ? _props$wordSlice : value.slice(0, defaultMaxLength.value);
-			}
+			if (maxLength.value && !maxLengthErrorOnly.value && getValueLength(value) > maxLength.value) if (isFunction(props.wordSlice)) value = props.wordSlice(value, maxLength.value);
+			else if (isFunction(props.wordLength)) value = value.slice(0, defaultMaxLength.value);
+			else value = sliceGraphemes(value, defaultMaxLength.value);
 			_value.value = value;
 			emit("update:modelValue", value);
 		};

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

@@ -0,0 +1,120 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _InputMask from './input-mask.vue';
+declare const InputMask: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types").InputMaskProps> & Readonly<{
+        onClear?: ((event: MouseEvent) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((value: string, event: Event) => any) | undefined;
+        onInput?: ((value: string, event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onPressEnter?: ((event: KeyboardEvent) => any) | undefined;
+        onComplete?: ((value: string) => any) | undefined;
+    }>, {
+        readonly inputRef: HTMLInputElement | undefined;
+        focus: () => void | undefined;
+        blur: () => void | undefined;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        clear: (event: MouseEvent) => any;
+        focus: (event: FocusEvent) => any;
+        blur: (event: FocusEvent) => any;
+        change: (value: string, event: Event) => any;
+        input: (value: string, event: Event) => any;
+        "update:modelValue": (value: string) => any;
+        pressEnter: (event: KeyboardEvent) => any;
+        complete: (value: string) => any;
+    }, import("vue").PublicProps, {
+        disabled: boolean;
+        error: boolean;
+        readonly: boolean | string;
+        defaultValue: string;
+        allowClear: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
+        showWordLimit: boolean;
+        maskChar: string | null;
+        alwaysShowMask: boolean;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./types").InputMaskProps> & Readonly<{
+        onClear?: ((event: MouseEvent) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((value: string, event: Event) => any) | undefined;
+        onInput?: ((value: string, event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onPressEnter?: ((event: KeyboardEvent) => any) | undefined;
+        onComplete?: ((value: string) => any) | undefined;
+    }>, {
+        readonly inputRef: HTMLInputElement | undefined;
+        focus: () => void | undefined;
+        blur: () => void | undefined;
+    }, {}, {}, {}, {
+        disabled: boolean;
+        error: boolean;
+        readonly: boolean | string;
+        defaultValue: string;
+        allowClear: boolean;
+        fitWidth: boolean;
+        maxWFull: boolean;
+        showWordLimit: boolean;
+        maskChar: string | null;
+        alwaysShowMask: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./types").InputMaskProps> & Readonly<{
+    onClear?: ((event: MouseEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string, event: Event) => any) | undefined;
+    onInput?: ((value: string, event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onPressEnter?: ((event: KeyboardEvent) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    readonly inputRef: HTMLInputElement | undefined;
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (event: MouseEvent) => any;
+    focus: (event: FocusEvent) => any;
+    blur: (event: FocusEvent) => any;
+    change: (value: string, event: Event) => any;
+    input: (value: string, event: Event) => any;
+    "update:modelValue": (value: string) => any;
+    pressEnter: (event: KeyboardEvent) => any;
+    complete: (value: string) => any;
+}, string, {
+    disabled: boolean;
+    error: boolean;
+    readonly: boolean | string;
+    defaultValue: string;
+    allowClear: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
+    showWordLimit: boolean;
+    maskChar: string | null;
+    alwaysShowMask: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        prefix?: () => unknown;
+        suffix?: () => unknown;
+        prepend?: () => unknown;
+        append?: () => unknown;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type InputMaskInstance = InstanceType<typeof _InputMask>;
+export type { InputMaskBeforeChange, InputMaskPattern, InputMaskPresetDefinition, InputMaskPresetName, InputMaskProps, InputMaskSelection, InputMaskState, InputMaskToken, } from './types';
+export { defaultInputMaskFormatChars, formatInputMask } from './mask-engine';
+export { inputMaskPresets } from './presets';
+export default InputMask;

package/es/input-mask/index.js

@@ -0,0 +1,12 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import { defaultInputMaskFormatChars, formatInputMask } from "./mask-engine.js";
+import { inputMaskPresets } from "./presets.js";
+import input_mask_default from "./input-mask.js";
+//#region components/input-mask/index.ts
+var InputMask = Object.assign(input_mask_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + input_mask_default.name, input_mask_default);
+} });
+//#endregion
+export { InputMask as default, defaultInputMaskFormatChars, formatInputMask, inputMaskPresets };

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

@@ -0,0 +1,5 @@
+import input_mask_vue_vue_type_script_setup_true_lang_default from "./input-mask.vue_vue_type_script_setup_true_lang.js";
+//#region components/input-mask/input-mask.vue
+var input_mask_default = input_mask_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { input_mask_default as default };

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

@@ -0,0 +1,49 @@
+import type { InputMaskProps } from './types';
+type __VLS_Slots = {
+    prefix?: () => unknown;
+    suffix?: () => unknown;
+    prepend?: () => unknown;
+    append?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<InputMaskProps, {
+    readonly inputRef: HTMLInputElement | undefined;
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (event: MouseEvent) => any;
+    focus: (event: FocusEvent) => any;
+    blur: (event: FocusEvent) => any;
+    change: (value: string, event: Event) => any;
+    input: (value: string, event: Event) => any;
+    "update:modelValue": (value: string) => any;
+    pressEnter: (event: KeyboardEvent) => any;
+    complete: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<InputMaskProps> & Readonly<{
+    onClear?: ((event: MouseEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((value: string, event: Event) => any) | undefined;
+    onInput?: ((value: string, event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onPressEnter?: ((event: KeyboardEvent) => any) | undefined;
+    onComplete?: ((value: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    error: boolean;
+    readonly: boolean | string;
+    defaultValue: string;
+    allowClear: boolean;
+    fitWidth: boolean;
+    maxWFull: boolean;
+    showWordLimit: boolean;
+    maskChar: string | null;
+    alwaysShowMask: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};