origam 0.3.10 → 2.3.0

package/dist/src/composables/DataTable/headers.composable.d.ts

@@ -1,6 +1,9 @@
 import { Ref } from 'vue';
 import type { IDataTableHeaderProps, IDataTableSortItem, IHeaderCellProps, IInternalDataTableHeader } from '../../interfaces';
 import type { TDataTableCompareFunction, TFilterKeyFunctions } from '../../types';
+/*********************************************************
+ * createHeaders
+ ********************************************************/
 export declare function createHeaders(props: IDataTableHeaderProps, options?: {
     groupBy?: Ref<Array<IDataTableSortItem>> | undefined;
     showSelect?: Ref<boolean>;
@@ -26,7 +29,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
-            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -45,11 +47,18 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
+            bold: () => string;
+            link: (url: string) => string;
+            [Symbol.iterator]: () => StringIterator<string>;
+            readonly length: number;
             concat: (...strings: string[]) => string;
+            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
+            includes: (searchString: string, position?: number) => boolean;
+            toString: () => string;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -61,7 +70,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
-            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -80,10 +88,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
-            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -94,14 +100,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -112,7 +116,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
-            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -139,7 +142,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
-            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -158,11 +160,18 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
+            bold: () => string;
+            link: (url: string) => string;
+            [Symbol.iterator]: () => StringIterator<string>;
+            readonly length: number;
             concat: (...strings: string[]) => string;
+            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
+            includes: (searchString: string, position?: number) => boolean;
+            toString: () => string;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -174,7 +183,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
-            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -193,10 +201,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
-            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -207,14 +213,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -225,7 +229,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
-            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -253,7 +256,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
-            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -272,11 +274,18 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
+            bold: () => string;
+            link: (url: string) => string;
+            [Symbol.iterator]: () => StringIterator<string>;
+            readonly length: number;
             concat: (...strings: string[]) => string;
+            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
+            includes: (searchString: string, position?: number) => boolean;
+            toString: () => string;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -288,7 +297,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
-            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -307,10 +315,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
-            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -321,14 +327,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -339,7 +343,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
-            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -366,7 +369,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
         title?: string | undefined;
         align?: {
             readonly [x: number]: string;
-            [Symbol.iterator]: () => StringIterator<string>;
             small: () => string;
             fixed: () => string;
             replace: {
@@ -385,11 +387,18 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.search](string: string): number;
                 }): number;
             };
-            charAt: (pos: number) => string;
-            charCodeAt: (index: number) => number;
+            bold: () => string;
+            link: (url: string) => string;
+            [Symbol.iterator]: () => StringIterator<string>;
+            readonly length: number;
             concat: (...strings: string[]) => string;
+            slice: (start?: number, end?: number) => string;
             indexOf: (searchString: string, position?: number) => number;
             lastIndexOf: (searchString: string, position?: number) => number;
+            includes: (searchString: string, position?: number) => boolean;
+            toString: () => string;
+            charAt: (pos: number) => string;
+            charCodeAt: (index: number) => number;
             localeCompare: {
                 (that: string): number;
                 (that: string, locales?: string | string[], options?: Intl.CollatorOptions): number;
@@ -401,7 +410,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                     [Symbol.match](string: string): RegExpMatchArray | null;
                 }): RegExpMatchArray | null;
             };
-            slice: (start?: number, end?: number) => string;
             split: {
                 (separator: string | RegExp, limit?: number): string[];
                 (splitter: {
@@ -420,10 +428,8 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
                 (locales?: Intl.LocalesArgument): string;
             };
             trim: () => string;
-            readonly length: number;
             substr: (from: number, length?: number) => string;
             codePointAt: (pos: number) => number | undefined;
-            includes: (searchString: string, position?: number) => boolean;
             endsWith: (searchString: string, endPosition?: number) => boolean;
             normalize: {
                 (form: "NFC" | "NFD" | "NFKC" | "NFKD"): string;
@@ -434,14 +440,12 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             anchor: (name: string) => string;
             big: () => string;
             blink: () => string;
-            bold: () => string;
             fontcolor: (color: string) => string;
             fontsize: {
                 (size: number): string;
                 (size: string): string;
             };
             italics: () => string;
-            link: (url: string) => string;
             strike: () => string;
             sub: () => string;
             sup: () => string;
@@ -452,7 +456,6 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
             trimLeft: () => string;
             trimRight: () => string;
             matchAll: (regexp: RegExp) => RegExpStringIterator<RegExpExecArray>;
-            toString: () => string;
             valueOf: () => string;
         } | undefined;
         headerProps?: any;
@@ -464,10 +467,16 @@ export declare function createHeaders(props: IDataTableHeaderProps, options?: {
     sortRawFunctions: Ref<Record<string, TDataTableCompareFunction>, Record<string, TDataTableCompareFunction>>;
     filterFunctions: Ref<TFilterKeyFunctions, TFilterKeyFunctions>;
 };
+/*********************************************************
+ * useHeaders
+ ********************************************************/
 export declare function useHeaders(): {
     headers: Ref<Array<Array<IInternalDataTableHeader>>>;
     columns: Ref<Array<IInternalDataTableHeader>>;
 };
+/*********************************************************
+ * useHeadersCell
+ ********************************************************/
 export declare function useHeadersCell(props: IHeaderCellProps): {
     getSortIcon: (column: IInternalDataTableHeader) => import("../../types").TIcon | undefined;
 };

package/dist/src/composables/DataTable/items.composable.d.ts

@@ -1,5 +1,8 @@
 import { Ref } from 'vue';
 import type { IDataTableItemsProps, IInternalDataTableHeader } from '../../interfaces';
+/*********************************************************
+ * useDataTableItems
+ ********************************************************/
 export declare function useDataTableItems(props: IDataTableItemsProps, columns: Ref<Array<IInternalDataTableHeader>>): {
     items: import("vue").ComputedRef<import("../../interfaces").IDataTableItem<any>[]>;
 };

package/dist/src/composables/DataTable/options.composable.d.ts

@@ -1,5 +1,8 @@
 import type { IDataTableSortItem } from '../../interfaces';
 import { Ref } from 'vue';
+/*********************************************************
+ * useOptions
+ ********************************************************/
 export declare function useOptions({ page, itemsPerPage, sortBy, groupBy, search }: {
     page: Ref<number>;
     itemsPerPage: Ref<number>;

package/dist/src/composables/DataTable/pagination.composable.d.ts

@@ -1,14 +1,23 @@
 import { Ref } from 'vue';
 import type { IDataTableGroup, IDataTablePaginationProps, IDataTableProvidePagination } from '../../interfaces';
+/*********************************************************
+ * createPagination
+ ********************************************************/
 export declare function createPagination(props: IDataTablePaginationProps): {
     page: import("../../types").TVModel<IDataTablePaginationProps, "page", number>;
     itemsPerPage: import("../../types").TVModel<IDataTablePaginationProps, "itemsPerPage", number>;
 };
+/*********************************************************
+ * providePagination
+ ********************************************************/
 export declare function providePagination(options: {
     page: Ref<number>;
     itemsPerPage: Ref<number>;
     itemsLength: Ref<number>;
 }): IDataTableProvidePagination;
+/*********************************************************
+ * usePagination
+ ********************************************************/
 export declare function usePagination(): {
     page: Ref<number>;
     itemsPerPage: Ref<number>;
@@ -21,6 +30,9 @@ export declare function usePagination(): {
     setPage: (value: number) => void;
     setItemsPerPage: (value: number) => void;
 };
+/*********************************************************
+ * usePaginatedItems
+ ********************************************************/
 export declare function usePaginatedItems<T>(options: {
     items: Ref<readonly (T | IDataTableGroup<T>)[]>;
     startIndex: Ref<number>;

package/dist/src/composables/DataTable/select.composable.d.ts

@@ -1,7 +1,13 @@
 import type { IDataTableProvideSelection, IDataTableSelectableItem, IDataTableSelectProps } from '../../interfaces';
 import { Ref } from 'vue';
+/*********************************************************
+ * provideSelection
+ ********************************************************/
 export declare function provideSelection(props: IDataTableSelectProps, { allItems, currentPage }: {
     allItems: Ref<Array<IDataTableSelectableItem>>;
     currentPage: Ref<Array<IDataTableSelectableItem>>;
 }): IDataTableProvideSelection;
+/*********************************************************
+ * useSelection
+ ********************************************************/
 export declare function useSelection(): IDataTableProvideSelection;

package/dist/src/composables/DataTable/sort.composable.d.ts

@@ -1,22 +1,34 @@
 import type { IDataTableProvideSort, IDataTableSortItem, IDataTableSortProps, IInternalDataTableHeader, IInternalItem } from '../../interfaces';
 import type { TDataTableCompareFunction } from '../../types';
 import { Ref } from 'vue';
+/*********************************************************
+ * createSort
+ ********************************************************/
 export declare function createSort(props: IDataTableSortProps): {
     sortBy: import("../../types").TVModel<IDataTableSortProps, "sortBy", IDataTableSortItem[] | undefined>;
     mustSort: Ref<boolean | undefined, boolean | undefined>;
     multiSort: Ref<boolean | undefined, boolean | undefined>;
 };
+/*********************************************************
+ * provideSort
+ ********************************************************/
 export declare function provideSort(options: {
     sortBy: Ref<Array<IDataTableSortItem>>;
     mustSort: Ref<boolean>;
     multiSort: Ref<boolean>;
     page?: Ref<number>;
 }): IDataTableProvideSort;
+/*********************************************************
+ * useSort
+ ********************************************************/
 export declare function useSort(): {
     sortBy: Ref<Array<IDataTableSortItem>>;
     toggleSort: (column: IInternalDataTableHeader) => void;
     isSorted: (column: IInternalDataTableHeader) => boolean;
 };
+/*********************************************************
+ * useSortedItems
+ ********************************************************/
 export declare function useSortedItems<T extends IInternalItem>(props: {
     customKeySort: TDataTableCompareFunction | undefined;
 }, items: Ref<T[]>, sortBy: Ref<Array<IDataTableSortItem>>, options?: {

package/dist/src/composables/Form/form.composable.d.ts

@@ -1,4 +1,7 @@
 import type { IFormField, IFormProps, IValidationFieldResult } from '../../interfaces';
+/*********************************************************
+ * useForm
+ ********************************************************/
 export declare function useForm(props: IFormProps): {
     errors: import("vue").Ref<{
         id: number | string;

package/dist/src/composables/Icon/icon.composable.cjs

@@ -36,6 +36,12 @@ const useIcon = props => {
         icon
       };
     }
+    if (/^[MmLlHhVvCcSsQqTtAaZz][\s\d,.-]/.test(icon)) {
+      return {
+        component: _components.OrigamSvgIcon,
+        icon
+      };
+    }
     const iconSetName = Object.keys(icons.sets).find(setName => typeof icon === "string" && icon.startsWith(`${setName}:`));
     const iconName = iconSetName ? icon.slice(iconSetName.length + 1) : icon;
     const iconSet = icons.sets[iconSetName ?? icons.defaultSet];

package/dist/src/composables/Icon/icon.composable.d.ts

@@ -3,4 +3,7 @@ import type { TIcon, TIconInstance, TIconOptions } from '../../types';
 export declare const useIcon: (props: Ref<TIcon | undefined>) => {
     iconData: import("vue").ComputedRef<TIconInstance>;
 };
+/*********************************************************
+ * createIcons
+ ********************************************************/
 export declare function createIcons(options?: TIconOptions): Record<string, unknown>;

package/dist/src/composables/Icon/icon.composable.js

@@ -27,6 +27,12 @@ export const useIcon = (props) => {
         icon
       };
     }
+    if (/^[MmLlHhVvCcSsQqTtAaZz][\s\d,.-]/.test(icon)) {
+      return {
+        component: OrigamSvgIcon,
+        icon
+      };
+    }
     const iconSetName = Object.keys(icons.sets).find(
       (setName) => typeof icon === "string" && icon.startsWith(`${setName}:`)
     );

package/dist/src/composables/List/list.composable.d.ts

@@ -1,10 +1,16 @@
 import { ComputedRef } from 'vue';
+/*********************************************************
+ * useCreateList
+ ********************************************************/
 export declare function useCreateList(): {
     hasPrepend: import("vue").Ref<boolean>;
     updateHasPrepend: (value: ComputedRef<boolean>) => void;
     hasAppend: import("vue").Ref<boolean>;
     updateHasAppend: (value: ComputedRef<boolean>) => void;
 };
+/*********************************************************
+ * useList
+ ********************************************************/
 export declare function useList(): {
     hasPrepend: import("vue").Ref<boolean>;
     updateHasPrepend: (value: ComputedRef<boolean>) => void;

package/dist/src/composables/Mask/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _mask = require("./mask.composable.cjs");
+Object.keys(_mask).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mask[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _mask[key];
+    }
+  });
+});

package/dist/src/composables/Mask/index.d.ts

@@ -0,0 +1 @@
+export * from './mask.composable';

package/dist/src/composables/Mask/index.js

@@ -0,0 +1 @@
+export * from "./mask.composable.js";

package/dist/src/composables/Mask/mask.composable.cjs

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMask = useMask;
+var _vue = require("vue");
+var _utils = require("../../utils/index.cjs");
+function useMask(modelValue, mask) {
+  const config = (0, _vue.computed)(() => {
+    return (0, _utils.resolveMaskConfig)((0, _vue.unref)(mask) ?? null);
+  });
+  const masked = (0, _vue.ref)("");
+  const unmasked = (0, _vue.ref)("");
+  const complete = (0, _vue.ref)(false);
+  function recompute(raw) {
+    const cfg = config.value;
+    const source = raw ?? "";
+    if (!cfg) {
+      masked.value = source;
+      unmasked.value = source;
+      complete.value = false;
+      return;
+    }
+    const r = (0, _utils.applyMask)(source, cfg.pattern);
+    masked.value = r.masked;
+    unmasked.value = r.unmasked;
+    complete.value = r.complete;
+  }
+  recompute((0, _vue.unref)(modelValue));
+  if ((0, _vue.isRef)(modelValue)) {
+    (0, _vue.watch)(modelValue, v => recompute(v));
+  }
+  (0, _vue.watch)(config, () => recompute((0, _vue.unref)(modelValue) ?? unmasked.value));
+  const isValid = (0, _vue.computed)(() => {
+    const cfg = config.value;
+    if (!cfg) return true;
+    if (!unmasked.value) return !cfg.required;
+    if (cfg.required && !complete.value) return false;
+    if (cfg.validator) {
+      return (0, _utils.validatePattern)(unmasked.value, cfg.validator);
+    }
+    return complete.value;
+  });
+  function setRaw(raw) {
+    recompute(raw);
+    return unmasked.value;
+  }
+  return {
+    masked,
+    unmasked,
+    isValid,
+    complete,
+    setRaw,
+    config
+  };
+}

package/dist/src/composables/Mask/mask.composable.d.ts

@@ -0,0 +1,39 @@
+import { MaybeRef, Ref } from 'vue';
+import type { IMaskOptions, IResolvedMaskConfig } from '../../interfaces';
+import type { TMask } from '../../types';
+/**
+ * Public return shape of `useMask`.
+ */
+export interface IUseMaskReturn {
+    masked: Ref<string>;
+    unmasked: Ref<string>;
+    isValid: Ref<boolean>;
+    complete: Ref<boolean>;
+    /**
+     * Imperatively re-run the formatter on a raw value
+     * (used by paste / external sync). Returns the new
+     * `unmasked` so callers can keep their model in sync.
+     */
+    setRaw: (raw: string) => string;
+    /**
+     * Currently resolved config (pattern + validator +
+     * required). `null` when no mask is active.
+     */
+    config: Ref<IResolvedMaskConfig | null>;
+}
+/**
+ * Reactive mask engine — keeps `masked`, `unmasked`,
+ * `isValid` and `complete` in sync with a source string
+ * (`modelValue`) and a (possibly polymorphic) mask spec.
+ *
+ * Both the value and the mask are accepted as a `MaybeRef`
+ * so the composable plays well with `props.modelValue` and
+ * a static `props.mask` alike.
+ *
+ * Reactivity:
+ *   - When `modelValue` changes → reformat + revalidate.
+ *   - When `mask` changes      → re-resolve config, reformat
+ *                                the current value.
+ */
+export declare function useMask(modelValue: MaybeRef<string | null | undefined>, mask: MaybeRef<TMask | undefined>): IUseMaskReturn;
+export type { IMaskOptions };

package/dist/src/composables/Mask/mask.composable.js

@@ -0,0 +1,51 @@
+import { computed, isRef, ref, unref, watch } from "vue";
+import { applyMask, resolveMaskConfig, validatePattern } from "../../utils/index.js";
+export function useMask(modelValue, mask) {
+  const config = computed(() => {
+    return resolveMaskConfig(unref(mask) ?? null);
+  });
+  const masked = ref("");
+  const unmasked = ref("");
+  const complete = ref(false);
+  function recompute(raw) {
+    const cfg = config.value;
+    const source = raw ?? "";
+    if (!cfg) {
+      masked.value = source;
+      unmasked.value = source;
+      complete.value = false;
+      return;
+    }
+    const r = applyMask(source, cfg.pattern);
+    masked.value = r.masked;
+    unmasked.value = r.unmasked;
+    complete.value = r.complete;
+  }
+  recompute(unref(modelValue));
+  if (isRef(modelValue)) {
+    watch(modelValue, (v) => recompute(v));
+  }
+  watch(config, () => recompute(unref(modelValue) ?? unmasked.value));
+  const isValid = computed(() => {
+    const cfg = config.value;
+    if (!cfg) return true;
+    if (!unmasked.value) return !cfg.required;
+    if (cfg.required && !complete.value) return false;
+    if (cfg.validator) {
+      return validatePattern(unmasked.value, cfg.validator);
+    }
+    return complete.value;
+  });
+  function setRaw(raw) {
+    recompute(raw);
+    return unmasked.value;
+  }
+  return {
+    masked,
+    unmasked,
+    isValid,
+    complete,
+    setRaw,
+    config
+  };
+}

package/dist/src/composables/NumberField/hold.composable.d.ts

@@ -1,3 +1,6 @@
+/*********************************************************
+ * useHold
+ ********************************************************/
 export declare function useHold({ toggleUpDown }: {
     toggleUpDown: (increment: boolean) => void;
 }, holdRepeat?: number, holdDelay?: number): {