@fastkit/vui 0.16.23 → 0.16.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.16.23",
+  "version": "0.16.24",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,31 +44,31 @@
     "src"
   ],
   "dependencies": {
-    "@fastkit/color-scheme": "1.0.8",
-    "@fastkit/color-scheme-gen": "0.13.8",
     "@fastkit/helpers": "0.13.1",
     "@fastkit/dom": "0.1.1",
-    "@fastkit/media-match": "1.0.7",
+    "@fastkit/color-scheme-gen": "0.13.8",
+    "@fastkit/color-scheme": "1.0.8",
     "@fastkit/rules": "0.13.1",
     "@fastkit/icon-font": "1.0.7",
-    "@fastkit/media-match-gen": "0.13.8",
-    "@fastkit/stylebase": "0.13.0",
     "@fastkit/tiny-logger": "0.13.1",
+    "@fastkit/media-match": "1.0.7",
+    "@fastkit/media-match-gen": "0.13.8",
     "@fastkit/vue-action": "0.2.3",
     "@fastkit/vue-app-layout": "0.14.2",
-    "@fastkit/vue-body-scroll-lock": "0.1.3",
+    "@fastkit/vue-form-control": "0.15.13",
+    "@fastkit/stylebase": "0.13.0",
     "@fastkit/vue-click-outside": "0.1.3",
+    "@fastkit/vue-body-scroll-lock": "0.1.3",
     "@fastkit/vue-color-scheme": "0.14.3",
-    "@fastkit/vue-form-control": "0.15.12",
     "@fastkit/vue-keyboard": "0.1.1",
     "@fastkit/vue-loading": "0.14.4",
     "@fastkit/vue-location": "0.1.3",
     "@fastkit/vue-media-match": "0.13.8",
     "@fastkit/vue-resize": "0.1.3",
+    "@fastkit/vue-utils": "0.14.1",
     "@fastkit/vue-scroller": "0.14.2",
     "@fastkit/vue-stack": "0.15.14",
-    "@fastkit/vue-transitions": "0.1.4",
-    "@fastkit/vue-utils": "0.14.1"
+    "@fastkit/vue-transitions": "0.1.4"
   },
   "peerDependencies": {
     "vue": "^3.3.0",

package/src/components/VNumberField/VNumberField.tsx

@@ -1,10 +1,23 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, computed } from 'vue';
 import {
   VTextField,
   TextFieldPropsOptions,
+  TextFieldInput,
   TextFieldEmits,
 } from '../VTextField/VTextField';
 
+const toString = (value?: string | number | null): string => {
+  if (value == null) return '';
+  return String(value);
+};
+
+const toNumber = (value?: string | number | null): number | null => {
+  if (value == null) return null;
+  if (typeof value === 'number') return value;
+  if (value.trim() === '') return null;
+  return Number(value);
+};
+
 export const VNumberField = defineComponent({
   name: 'VNumberField',
   props: {
@@ -23,30 +36,37 @@ export const VNumberField = defineComponent({
     change: (value: number | null) => true,
   },
   setup(props, ctx) {
-    const toString = (value?: string | number | null): string => {
-      if (value == null) return '';
-      return String(value);
+    const hasNumberMask = computed(() => {
+      const { mask } = ctx.attrs as TextFieldInput;
+      return (
+        !!mask && typeof mask === 'object' && (mask as any).mask === Number
+      );
+    });
+
+    const inputmode = computed<TextFieldInput['inputmode']>(() => {
+      const { inputmode } = ctx.attrs as TextFieldInput;
+      if (inputmode) return inputmode;
+      return hasNumberMask.value ? 'decimal' : undefined;
+    });
+
+    const onUpdateModelValue = (value: string) => {
+      ctx.emit('update:modelValue', toNumber(value));
     };
 
-    const toNumber = (value?: string | number | null): number | null => {
-      if (value == null) return null;
-      if (typeof value === 'number') return value;
-      if (value.trim() === '') return null;
-      return Number(value);
+    const onChange = (value: string) => {
+      ctx.emit('change', toNumber(value));
     };
 
     return () => {
       return (
         <VTextField
           {...ctx.attrs}
-          type="number"
+          type={hasNumberMask.value ? 'text' : 'number'}
+          inputmode={inputmode.value}
+          maskModel="typed"
           modelValue={toString(props.modelValue)}
-          onUpdate:modelValue={(value) => {
-            ctx.emit('update:modelValue', toNumber(value));
-          }}
-          onChange={(value) => {
-            ctx.emit('change', toNumber(value));
-          }}
+          onUpdate:modelValue={onUpdateModelValue}
+          onChange={onChange}
           v-slots={ctx.slots as any}
         />
       );