@fastkit/vui 0.16.22 → 0.16.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/vui.d.ts +62 -48
  2. package/dist/vui.mjs +37 -19
  3. package/dist/vui.mjs.map +1 -1
  4. package/package.json +12 -12
  5. package/src/components/VNumberField/VNumberField.tsx +36 -16
package/dist/vui.d.ts CHANGED
@@ -482,10 +482,12 @@ declare function createTextFieldProps(): {
482
482
  type: vue.PropType<"number" | "time" | "text" | "search" | "color" | "email" | "tel" | "url" | "date" | "datetime-local" | "month" | "password">;
483
483
  default: string;
484
484
  };
485
- masked: StringConstructor;
486
- typed: (StringConstructor | NumberConstructor | DateConstructor)[];
487
- unmasked: StringConstructor;
488
- mask: vue.PropType<any>;
485
+ inputmode: vue.PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
486
+ maskModel: {
487
+ type: vue.PropType<_fastkit_vue_form_control.TextInputMaskModel>;
488
+ default: string;
489
+ };
490
+ mask: vue.PropType<_fastkit_vue_form_control.IMaskInput>;
489
491
  minlength: (StringConstructor | NumberConstructor)[];
490
492
  maxlength: (StringConstructor | NumberConstructor)[];
491
493
  pattern: (StringConstructor | RegExpConstructor)[];
@@ -495,9 +497,9 @@ declare function createTextFieldProps(): {
495
497
  counter: vue.PropType<string | number | boolean>;
496
498
  counterValue: vue.PropType<(value: string) => number>;
497
499
  limit: BooleanConstructor;
498
- autocomplete: vue.PropType<boolean | "name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo">;
500
+ autocomplete: vue.PropType<boolean | "name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo">;
499
501
  name: StringConstructor;
500
- modelValue: vue.Prop<string, string>;
502
+ modelValue: vue.Prop<any, any>;
501
503
  autofocus: BooleanConstructor;
502
504
  spellcheck: BooleanConstructor;
503
505
  viewonly: BooleanConstructor;
@@ -571,10 +573,12 @@ declare const VTextField: vue.DefineComponent<{
571
573
  type: vue.PropType<"number" | "time" | "text" | "search" | "color" | "email" | "tel" | "url" | "date" | "datetime-local" | "month" | "password">;
572
574
  default: string;
573
575
  };
574
- masked: StringConstructor;
575
- typed: (StringConstructor | NumberConstructor | DateConstructor)[];
576
- unmasked: StringConstructor;
577
- mask: vue.PropType<any>;
576
+ inputmode: vue.PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
577
+ maskModel: {
578
+ type: vue.PropType<_fastkit_vue_form_control.TextInputMaskModel>;
579
+ default: string;
580
+ };
581
+ mask: vue.PropType<_fastkit_vue_form_control.IMaskInput>;
578
582
  minlength: (StringConstructor | NumberConstructor)[];
579
583
  maxlength: (StringConstructor | NumberConstructor)[];
580
584
  pattern: (StringConstructor | RegExpConstructor)[];
@@ -584,9 +588,9 @@ declare const VTextField: vue.DefineComponent<{
584
588
  counter: vue.PropType<string | number | boolean>;
585
589
  counterValue: vue.PropType<(value: string) => number>;
586
590
  limit: BooleanConstructor;
587
- autocomplete: vue.PropType<boolean | "name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo">;
591
+ autocomplete: vue.PropType<boolean | "name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo">;
588
592
  name: StringConstructor;
589
- modelValue: vue.Prop<string, string>;
593
+ modelValue: vue.Prop<any, any>;
590
594
  autofocus: BooleanConstructor;
591
595
  spellcheck: BooleanConstructor;
592
596
  viewonly: BooleanConstructor;
@@ -606,8 +610,6 @@ declare const VTextField: vue.DefineComponent<{
606
610
  size: vue.ComputedRef<"sm" | "md" | "lg">;
607
611
  classes: vue.ComputedRef<any>;
608
612
  textInputControl: _fastkit_vue_form_control.TextInputControl;
609
- computedMask: vue.ComputedRef<any>;
610
- computedType: vue.ComputedRef<"number" | "time" | "text" | "search" | "color" | "email" | "tel" | "url" | "date" | "datetime-local" | "month" | "password">;
611
613
  inputElementRef: vue.Ref<HTMLInputElement | null>;
612
614
  focus: (opts?: FocusOptions | undefined) => void;
613
615
  blur: () => void;
@@ -618,7 +620,7 @@ declare const VTextField: vue.DefineComponent<{
618
620
  computedAutocapitalize: vue.ComputedRef<_fastkit_vue_form_control.FormAutoCapitalize | undefined>;
619
621
  counterSettings: vue.ComputedRef<_fastkit_vue_form_control.TextableCounterSettings | undefined>;
620
622
  counterResult: vue.ComputedRef<_fastkit_vue_form_control.TextableCounterResult | undefined>;
621
- computedAutocomplete: vue.ComputedRef<"name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | undefined>;
623
+ computedAutocomplete: vue.ComputedRef<"name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined>;
622
624
  nodeControl: _fastkit_vue_form_control.FormNodeControl<any, any>;
623
625
  currentValue: vue.WritableComputedRef<string>;
624
626
  computedTabindex: vue.ComputedRef<number>;
@@ -649,8 +651,9 @@ declare const VTextField: vue.DefineComponent<{
649
651
  validateSelf: (force?: boolean | undefined) => Promise<_fastkit_vue_form_control.ValidationResult>;
650
652
  validate: () => Promise<boolean>;
651
653
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
652
- accept: (ev: _fastkit_vue_form_control.IMaskEvent) => boolean;
653
- complete: (ev: _fastkit_vue_form_control.IMaskEvent) => boolean;
654
+ acceptMask: (ev: _fastkit_vue_form_control.IMaskEvent) => boolean;
655
+ acceptDynamicMaskMeta: (meta?: any) => boolean;
656
+ completeMask: (ev: _fastkit_vue_form_control.IMaskEvent) => boolean;
654
657
  'update:masked': (maskedValue: string) => boolean;
655
658
  'update:typed': (typedValue: _fastkit_vue_form_control.IMaskTypedValue | undefined) => boolean;
656
659
  'update:unmasked': (unmaskedValue: string) => boolean;
@@ -714,10 +717,12 @@ declare const VTextField: vue.DefineComponent<{
714
717
  type: vue.PropType<"number" | "time" | "text" | "search" | "color" | "email" | "tel" | "url" | "date" | "datetime-local" | "month" | "password">;
715
718
  default: string;
716
719
  };
717
- masked: StringConstructor;
718
- typed: (StringConstructor | NumberConstructor | DateConstructor)[];
719
- unmasked: StringConstructor;
720
- mask: vue.PropType<any>;
720
+ inputmode: vue.PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
721
+ maskModel: {
722
+ type: vue.PropType<_fastkit_vue_form_control.TextInputMaskModel>;
723
+ default: string;
724
+ };
725
+ mask: vue.PropType<_fastkit_vue_form_control.IMaskInput>;
721
726
  minlength: (StringConstructor | NumberConstructor)[];
722
727
  maxlength: (StringConstructor | NumberConstructor)[];
723
728
  pattern: (StringConstructor | RegExpConstructor)[];
@@ -727,9 +732,9 @@ declare const VTextField: vue.DefineComponent<{
727
732
  counter: vue.PropType<string | number | boolean>;
728
733
  counterValue: vue.PropType<(value: string) => number>;
729
734
  limit: BooleanConstructor;
730
- autocomplete: vue.PropType<boolean | "name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo">;
735
+ autocomplete: vue.PropType<boolean | "name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo">;
731
736
  name: StringConstructor;
732
- modelValue: vue.Prop<string, string>;
737
+ modelValue: vue.Prop<any, any>;
733
738
  autofocus: BooleanConstructor;
734
739
  spellcheck: BooleanConstructor;
735
740
  viewonly: BooleanConstructor;
@@ -750,8 +755,9 @@ declare const VTextField: vue.DefineComponent<{
750
755
  onChange?: ((value: string) => any) | undefined;
751
756
  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
752
757
  "onUpdate:errors"?: ((errors: _fastkit_vue_form_control.FormNodeError[]) => any) | undefined;
753
- onAccept?: ((ev: _fastkit_vue_form_control.IMaskEvent) => any) | undefined;
754
- onComplete?: ((ev: _fastkit_vue_form_control.IMaskEvent) => any) | undefined;
758
+ onAcceptMask?: ((ev: _fastkit_vue_form_control.IMaskEvent) => any) | undefined;
759
+ onAcceptDynamicMaskMeta?: ((meta?: any) => any) | undefined;
760
+ onCompleteMask?: ((ev: _fastkit_vue_form_control.IMaskEvent) => any) | undefined;
755
761
  "onUpdate:masked"?: ((maskedValue: string) => any) | undefined;
756
762
  "onUpdate:typed"?: ((typedValue: _fastkit_vue_form_control.IMaskTypedValue | undefined) => any) | undefined;
757
763
  "onUpdate:unmasked"?: ((unmaskedValue: string) => any) | undefined;
@@ -780,6 +786,7 @@ declare const VTextField: vue.DefineComponent<{
780
786
  invalid: boolean;
781
787
  valid: boolean;
782
788
  hiddenInfo: boolean;
789
+ maskModel: _fastkit_vue_form_control.TextInputMaskModel;
783
790
  limit: boolean;
784
791
  }, _fastkit_vue_utils.DefinedSlots<{
785
792
  [x: `error:${string}`]: (error: _fastkit_vue_form_control.FormNodeError) => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -2328,7 +2335,7 @@ declare const VBusyImage: vue.DefineComponent<{
2328
2335
  results: PropType<(string | number) | undefined>;
2329
2336
  security: PropType<string | undefined>;
2330
2337
  unselectable: PropType<"off" | "on" | undefined>;
2331
- inputmode: PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined>;
2338
+ inputmode: PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric" | undefined>;
2332
2339
  is: PropType<string | undefined>;
2333
2340
  'aria-activedescendant': PropType<string | undefined>;
2334
2341
  'aria-atomic': PropType<(boolean | "true" | "false") | undefined>;
@@ -2520,7 +2527,7 @@ declare const VBusyImage: vue.DefineComponent<{
2520
2527
  results: PropType<(string | number) | undefined>;
2521
2528
  security: PropType<string | undefined>;
2522
2529
  unselectable: PropType<"off" | "on" | undefined>;
2523
- inputmode: PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined>;
2530
+ inputmode: PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric" | undefined>;
2524
2531
  is: PropType<string | undefined>;
2525
2532
  'aria-activedescendant': PropType<string | undefined>;
2526
2533
  'aria-atomic': PropType<(boolean | "true" | "false") | undefined>;
@@ -6197,7 +6204,7 @@ declare const VNumberField: vue.DefineComponent<{
6197
6204
  name: StringConstructor;
6198
6205
  required: BooleanConstructor;
6199
6206
  label: PropType<_fastkit_vue_utils__.VNodeChildOrSlot>;
6200
- mask: PropType<any>;
6207
+ mask: PropType<_fastkit_vue_form_control__.IMaskInput>;
6201
6208
  pattern: (StringConstructor | RegExpConstructor)[];
6202
6209
  loading: BooleanConstructor;
6203
6210
  size: {
@@ -6262,9 +6269,11 @@ declare const VNumberField: vue.DefineComponent<{
6262
6269
  startAdornment: PropType<_fastkit_vue_utils__.VNodeChildOrSlot>;
6263
6270
  endAdornment: PropType<_fastkit_vue_utils__.VNodeChildOrSlot>;
6264
6271
  maxlength: (StringConstructor | NumberConstructor)[];
6265
- masked: StringConstructor;
6266
- typed: (StringConstructor | NumberConstructor | DateConstructor)[];
6267
- unmasked: StringConstructor;
6272
+ inputmode: PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
6273
+ maskModel: {
6274
+ type: PropType<_fastkit_vue_form_control__.TextInputMaskModel>;
6275
+ default: string;
6276
+ };
6268
6277
  minlength: (StringConstructor | NumberConstructor)[];
6269
6278
  placeholder: StringConstructor;
6270
6279
  autocapitalize: PropType<_fastkit_vue_form_control__.FormAutoCapitalize>;
@@ -6272,15 +6281,16 @@ declare const VNumberField: vue.DefineComponent<{
6272
6281
  counter: PropType<string | number | boolean>;
6273
6282
  counterValue: PropType<(value: string) => number>;
6274
6283
  limit: BooleanConstructor;
6275
- autocomplete: PropType<boolean | "name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo">;
6284
+ autocomplete: PropType<boolean | "name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo">;
6276
6285
  }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
6277
6286
  'update:modelValue': (value: number | null) => boolean;
6278
6287
  change: (value: number | null) => boolean;
6279
6288
  'update:errors': (errors: _fastkit_vue_form_control__.FormNodeError[]) => boolean;
6280
6289
  focus: (ev: FocusEvent) => boolean;
6281
6290
  blur: (ev: FocusEvent) => boolean;
6282
- accept: (ev: _fastkit_vue_form_control__.IMaskEvent) => boolean;
6283
- complete: (ev: _fastkit_vue_form_control__.IMaskEvent) => boolean;
6291
+ acceptMask: (ev: _fastkit_vue_form_control__.IMaskEvent) => boolean;
6292
+ acceptDynamicMaskMeta: (meta?: any) => boolean;
6293
+ completeMask: (ev: _fastkit_vue_form_control__.IMaskEvent) => boolean;
6284
6294
  'update:masked': (maskedValue: string) => boolean;
6285
6295
  'update:typed': (typedValue: _fastkit_vue_form_control__.IMaskTypedValue | undefined) => boolean;
6286
6296
  'update:unmasked': (unmaskedValue: string) => boolean;
@@ -6292,7 +6302,7 @@ declare const VNumberField: vue.DefineComponent<{
6292
6302
  name: StringConstructor;
6293
6303
  required: BooleanConstructor;
6294
6304
  label: PropType<_fastkit_vue_utils__.VNodeChildOrSlot>;
6295
- mask: PropType<any>;
6305
+ mask: PropType<_fastkit_vue_form_control__.IMaskInput>;
6296
6306
  pattern: (StringConstructor | RegExpConstructor)[];
6297
6307
  loading: BooleanConstructor;
6298
6308
  size: {
@@ -6357,9 +6367,11 @@ declare const VNumberField: vue.DefineComponent<{
6357
6367
  startAdornment: PropType<_fastkit_vue_utils__.VNodeChildOrSlot>;
6358
6368
  endAdornment: PropType<_fastkit_vue_utils__.VNodeChildOrSlot>;
6359
6369
  maxlength: (StringConstructor | NumberConstructor)[];
6360
- masked: StringConstructor;
6361
- typed: (StringConstructor | NumberConstructor | DateConstructor)[];
6362
- unmasked: StringConstructor;
6370
+ inputmode: PropType<"none" | "text" | "search" | "email" | "tel" | "url" | "decimal" | "numeric">;
6371
+ maskModel: {
6372
+ type: PropType<_fastkit_vue_form_control__.TextInputMaskModel>;
6373
+ default: string;
6374
+ };
6363
6375
  minlength: (StringConstructor | NumberConstructor)[];
6364
6376
  placeholder: StringConstructor;
6365
6377
  autocapitalize: PropType<_fastkit_vue_form_control__.FormAutoCapitalize>;
@@ -6367,15 +6379,16 @@ declare const VNumberField: vue.DefineComponent<{
6367
6379
  counter: PropType<string | number | boolean>;
6368
6380
  counterValue: PropType<(value: string) => number>;
6369
6381
  limit: BooleanConstructor;
6370
- autocomplete: PropType<boolean | "name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo">;
6382
+ autocomplete: PropType<boolean | "name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo">;
6371
6383
  }>> & {
6372
6384
  onFocus?: ((ev: FocusEvent) => any) | undefined;
6373
6385
  onBlur?: ((ev: FocusEvent) => any) | undefined;
6374
6386
  onChange?: ((value: number | null) => any) | undefined;
6375
6387
  "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
6376
6388
  "onUpdate:errors"?: ((errors: _fastkit_vue_form_control__.FormNodeError[]) => any) | undefined;
6377
- onAccept?: ((ev: _fastkit_vue_form_control__.IMaskEvent) => any) | undefined;
6378
- onComplete?: ((ev: _fastkit_vue_form_control__.IMaskEvent) => any) | undefined;
6389
+ onAcceptMask?: ((ev: _fastkit_vue_form_control__.IMaskEvent) => any) | undefined;
6390
+ onAcceptDynamicMaskMeta?: ((meta?: any) => any) | undefined;
6391
+ onCompleteMask?: ((ev: _fastkit_vue_form_control__.IMaskEvent) => any) | undefined;
6379
6392
  "onUpdate:masked"?: ((maskedValue: string) => any) | undefined;
6380
6393
  "onUpdate:typed"?: ((typedValue: _fastkit_vue_form_control__.IMaskTypedValue | undefined) => any) | undefined;
6381
6394
  "onUpdate:unmasked"?: ((unmaskedValue: string) => any) | undefined;
@@ -6404,6 +6417,7 @@ declare const VNumberField: vue.DefineComponent<{
6404
6417
  invalid: boolean;
6405
6418
  valid: boolean;
6406
6419
  hiddenInfo: boolean;
6420
+ maskModel: _fastkit_vue_form_control__.TextInputMaskModel;
6407
6421
  limit: boolean;
6408
6422
  }, {}>;
6409
6423
 
@@ -6463,7 +6477,7 @@ declare const VTextarea: vue.DefineComponent<{
6463
6477
  default: number | undefined;
6464
6478
  type: vue.PropType<_fastkit_vue_utils.Numberish>;
6465
6479
  };
6466
- mask: vue.PropType<any>;
6480
+ mask: vue.PropType<_fastkit_vue_form_control.IMaskInput>;
6467
6481
  minlength: (StringConstructor | NumberConstructor)[];
6468
6482
  maxlength: (StringConstructor | NumberConstructor)[];
6469
6483
  pattern: (StringConstructor | RegExpConstructor)[];
@@ -6473,9 +6487,9 @@ declare const VTextarea: vue.DefineComponent<{
6473
6487
  counter: vue.PropType<string | number | boolean>;
6474
6488
  counterValue: vue.PropType<(value: string) => number>;
6475
6489
  limit: BooleanConstructor;
6476
- autocomplete: vue.PropType<boolean | "name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo">;
6490
+ autocomplete: vue.PropType<boolean | "name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo">;
6477
6491
  name: StringConstructor;
6478
- modelValue: vue.Prop<string, string>;
6492
+ modelValue: vue.Prop<any, any>;
6479
6493
  autofocus: BooleanConstructor;
6480
6494
  spellcheck: BooleanConstructor;
6481
6495
  viewonly: BooleanConstructor;
@@ -6510,7 +6524,7 @@ declare const VTextarea: vue.DefineComponent<{
6510
6524
  computedAutocapitalize: vue.ComputedRef<_fastkit_vue_form_control.FormAutoCapitalize | undefined>;
6511
6525
  counterSettings: vue.ComputedRef<_fastkit_vue_form_control.TextableCounterSettings | undefined>;
6512
6526
  counterResult: vue.ComputedRef<_fastkit_vue_form_control.TextableCounterResult | undefined>;
6513
- computedAutocomplete: vue.ComputedRef<"name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | undefined>;
6527
+ computedAutocomplete: vue.ComputedRef<"name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined>;
6514
6528
  nodeControl: _fastkit_vue_form_control.FormNodeControl<any, any>;
6515
6529
  currentValue: vue.WritableComputedRef<string>;
6516
6530
  computedTabindex: vue.ComputedRef<number>;
@@ -6602,7 +6616,7 @@ declare const VTextarea: vue.DefineComponent<{
6602
6616
  default: number | undefined;
6603
6617
  type: vue.PropType<_fastkit_vue_utils.Numberish>;
6604
6618
  };
6605
- mask: vue.PropType<any>;
6619
+ mask: vue.PropType<_fastkit_vue_form_control.IMaskInput>;
6606
6620
  minlength: (StringConstructor | NumberConstructor)[];
6607
6621
  maxlength: (StringConstructor | NumberConstructor)[];
6608
6622
  pattern: (StringConstructor | RegExpConstructor)[];
@@ -6612,9 +6626,9 @@ declare const VTextarea: vue.DefineComponent<{
6612
6626
  counter: vue.PropType<string | number | boolean>;
6613
6627
  counterValue: vue.PropType<(value: string) => number>;
6614
6628
  limit: BooleanConstructor;
6615
- autocomplete: vue.PropType<boolean | "name" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo">;
6629
+ autocomplete: vue.PropType<boolean | "name" | "email" | "tel" | "url" | "off" | "on" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo">;
6616
6630
  name: StringConstructor;
6617
- modelValue: vue.Prop<string, string>;
6631
+ modelValue: vue.Prop<any, any>;
6618
6632
  autofocus: BooleanConstructor;
6619
6633
  spellcheck: BooleanConstructor;
6620
6634
  viewonly: BooleanConstructor;
package/dist/vui.mjs CHANGED
@@ -3129,6 +3129,20 @@ var VTextField = defineComponent({
3129
3129
  });
3130
3130
  }
3131
3131
  });
3132
+ var toString = (value) => {
3133
+ if (value == null)
3134
+ return "";
3135
+ return String(value);
3136
+ };
3137
+ var toNumber = (value) => {
3138
+ if (value == null)
3139
+ return null;
3140
+ if (typeof value === "number")
3141
+ return value;
3142
+ if (value.trim() === "")
3143
+ return null;
3144
+ return Number(value);
3145
+ };
3132
3146
  var VNumberField = defineComponent({
3133
3147
  name: "VNumberField",
3134
3148
  props: {
@@ -3144,30 +3158,34 @@ var VNumberField = defineComponent({
3144
3158
  change: (value) => true
3145
3159
  },
3146
3160
  setup(props11, ctx) {
3147
- const toString = (value) => {
3148
- if (value == null)
3149
- return "";
3150
- return String(value);
3161
+ const hasNumberMask = computed(() => {
3162
+ const {
3163
+ mask
3164
+ } = ctx.attrs;
3165
+ return !!mask && typeof mask === "object" && mask.mask === Number;
3166
+ });
3167
+ const inputmode = computed(() => {
3168
+ const {
3169
+ inputmode: inputmode2
3170
+ } = ctx.attrs;
3171
+ if (inputmode2)
3172
+ return inputmode2;
3173
+ return hasNumberMask.value ? "decimal" : void 0;
3174
+ });
3175
+ const onUpdateModelValue = (value) => {
3176
+ ctx.emit("update:modelValue", toNumber(value));
3151
3177
  };
3152
- const toNumber = (value) => {
3153
- if (value == null)
3154
- return null;
3155
- if (typeof value === "number")
3156
- return value;
3157
- if (value.trim() === "")
3158
- return null;
3159
- return Number(value);
3178
+ const onChange = (value) => {
3179
+ ctx.emit("change", toNumber(value));
3160
3180
  };
3161
3181
  return () => {
3162
3182
  return createVNode(VTextField, mergeProps(ctx.attrs, {
3163
- "type": "number",
3183
+ "type": hasNumberMask.value ? "text" : "number",
3184
+ "inputmode": inputmode.value,
3185
+ "maskModel": "typed",
3164
3186
  "modelValue": toString(props11.modelValue),
3165
- "onUpdate:modelValue": (value) => {
3166
- ctx.emit("update:modelValue", toNumber(value));
3167
- },
3168
- "onChange": (value) => {
3169
- ctx.emit("change", toNumber(value));
3170
- }
3187
+ "onUpdate:modelValue": onUpdateModelValue,
3188
+ "onChange": onChange
3171
3189
  }), ctx.slots);
3172
3190
  };
3173
3191
  }