@fastkit/vui 0.7.48 → 0.7.52

package/dist/vui.cjs.js

@@ -2684,6 +2684,48 @@ const VTextField = vue.defineComponent({
 
 });
 
+const VNumberField = vue.defineComponent({
+  name: 'VNumberField',
+  props: { ...undefined,
+    modelValue: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: { ...undefined,
+    'update:modelValue': value => true,
+    change: value => true
+  },
+
+  setup(props, ctx) {
+    const toString = value => {
+      if (value == null) return '';
+      return String(value);
+    };
+
+    const toNumber = value => {
+      if (value == null) return null;
+      if (typeof value === 'number') return value;
+      if (value.trim() === '') return null;
+      return Number(value);
+    };
+
+    return () => {
+      return vue.createVNode(VTextField, vue.mergeProps(ctx.attrs, {
+        "type": "number",
+        "modelValue": toString(props.modelValue),
+        "onUpdate:modelValue": value => {
+          ctx.emit('update:modelValue', toNumber(value));
+        },
+        "onChange": value => {
+          ctx.emit('change', toNumber(value));
+        }
+      }), ctx.slots);
+    };
+  }
+
+});
+
 const {
   props: props$1,
   emits: emits$1
@@ -2822,7 +2864,10 @@ const VWysiwygEditor = vue.defineComponent({
 
     vue.watch(() => inputControl.canOperation, updateEditable);
     vue.watch(() => props.modelValue, modelValue => {
-      editor.value && editor.value.commands.setContent(modelValue == null ? '' : modelValue);
+      const $editor = editor.value;
+      if (!$editor) return;
+      $editor.commands.setContent(modelValue == null ? '' : modelValue);
+      textRef.value = $editor.getText();
     });
     const editor = vue3.useEditor({
       onCreate: ({
@@ -3156,13 +3201,16 @@ const {
 } = vueKit.createFormSettings({
   nodeType: VUI_FORM_SYMBOL
 });
-const VForm = vue.defineComponent({
-  name: 'VForm',
-  props: { ...props,
+function createVFormProps() {
+  return { ...props,
     ...createControlProps(),
     ...vueKit.defineSlotsProps() // disableAutoScroll: Boolean,
 
-  },
+  };
+}
+const VForm = vue.defineComponent({
+  name: 'VForm',
+  props: createVFormProps(),
   emits,
 
   setup(props, ctx) {
@@ -4947,6 +4995,7 @@ exports.VIcon = VIcon;
 exports.VListTile = VListTile;
 exports.VNavigation = VNavigation;
 exports.VNavigationItem = VNavigationItem;
+exports.VNumberField = VNumberField;
 exports.VOption = VOption;
 exports.VOptionGroup = VOptionGroup;
 exports.VPagination = VPagination;
@@ -5003,6 +5052,7 @@ exports.createNavigationItemProps = createNavigationItemProps;
 exports.createPaperBaseProps = createPaperBaseProps;
 exports.createPaperProps = createPaperProps;
 exports.createRequiredChipRenderer = createRequiredChipRenderer;
+exports.createVFormProps = createVFormProps;
 exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;

package/dist/vui.cjs.prod.js

@@ -2684,6 +2684,48 @@ const VTextField = vue.defineComponent({
 
 });
 
+const VNumberField = vue.defineComponent({
+  name: 'VNumberField',
+  props: { ...undefined,
+    modelValue: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: { ...undefined,
+    'update:modelValue': value => true,
+    change: value => true
+  },
+
+  setup(props, ctx) {
+    const toString = value => {
+      if (value == null) return '';
+      return String(value);
+    };
+
+    const toNumber = value => {
+      if (value == null) return null;
+      if (typeof value === 'number') return value;
+      if (value.trim() === '') return null;
+      return Number(value);
+    };
+
+    return () => {
+      return vue.createVNode(VTextField, vue.mergeProps(ctx.attrs, {
+        "type": "number",
+        "modelValue": toString(props.modelValue),
+        "onUpdate:modelValue": value => {
+          ctx.emit('update:modelValue', toNumber(value));
+        },
+        "onChange": value => {
+          ctx.emit('change', toNumber(value));
+        }
+      }), ctx.slots);
+    };
+  }
+
+});
+
 const {
   props: props$1,
   emits: emits$1
@@ -2822,7 +2864,10 @@ const VWysiwygEditor = vue.defineComponent({
 
     vue.watch(() => inputControl.canOperation, updateEditable);
     vue.watch(() => props.modelValue, modelValue => {
-      editor.value && editor.value.commands.setContent(modelValue == null ? '' : modelValue);
+      const $editor = editor.value;
+      if (!$editor) return;
+      $editor.commands.setContent(modelValue == null ? '' : modelValue);
+      textRef.value = $editor.getText();
     });
     const editor = vue3.useEditor({
       onCreate: ({
@@ -3156,13 +3201,16 @@ const {
 } = vueKit.createFormSettings({
   nodeType: VUI_FORM_SYMBOL
 });
-const VForm = vue.defineComponent({
-  name: 'VForm',
-  props: { ...props,
+function createVFormProps() {
+  return { ...props,
     ...createControlProps(),
     ...vueKit.defineSlotsProps() // disableAutoScroll: Boolean,
 
-  },
+  };
+}
+const VForm = vue.defineComponent({
+  name: 'VForm',
+  props: createVFormProps(),
   emits,
 
   setup(props, ctx) {
@@ -4947,6 +4995,7 @@ exports.VIcon = VIcon;
 exports.VListTile = VListTile;
 exports.VNavigation = VNavigation;
 exports.VNavigationItem = VNavigationItem;
+exports.VNumberField = VNumberField;
 exports.VOption = VOption;
 exports.VOptionGroup = VOptionGroup;
 exports.VPagination = VPagination;
@@ -5003,6 +5052,7 @@ exports.createNavigationItemProps = createNavigationItemProps;
 exports.createPaperBaseProps = createPaperBaseProps;
 exports.createPaperProps = createPaperProps;
 exports.createRequiredChipRenderer = createRequiredChipRenderer;
+exports.createVFormProps = createVFormProps;
 exports.defineFormSelectorComponent = defineFormSelectorComponent;
 exports.iconProps = iconProps;
 exports.installVuiPlugin = installVuiPlugin;

package/dist/vui.d.ts

@@ -70,6 +70,7 @@ import { TextableCounterSettings } from '@fastkit/vue-kit';
 import { TextareaAutosizeSettings } from '@fastkit/vue-kit';
 import { TextareaControl } from '@fastkit/vue-kit';
 import { TextInputControl } from '@fastkit/vue-kit';
+import { TextInputEmits } from '@fastkit/vue-kit';
 import { TypedSlot } from '@fastkit/vue-kit';
 import { UnderlineOptions } from '@tiptap/extension-underline';
 import { UnwrapNestedRefs } from 'vue';
@@ -998,6 +999,44 @@ declare function createTextFieldProps(): {
     errorMessages: PropType<string | string[]>;
 };
 
+export declare function createVFormProps(): {
+    'v-slots': PropType<ResolveRawSlots<VFormSlots>>;
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        validator: (value: any) => boolean;
+    };
+    action: PropType<FormAction>;
+    autoValidate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    submiting: BooleanConstructor;
+    disableAutoScroll: BooleanConstructor;
+    name: StringConstructor;
+    modelValue: Prop<unknown, unknown>;
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    autofocus: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    spellcheck: BooleanConstructor;
+    viewonly: BooleanConstructor;
+    required: BooleanConstructor;
+    clearable: BooleanConstructor;
+    validateTiming: {
+        type: PropType<ValidateTiming>;
+        default: ValidateTiming;
+    };
+    rules: {
+        type: PropType<RecursiveArray<Rule<any>>>;
+        default: () => never[];
+    };
+    error: BooleanConstructor;
+    errorMessages: PropType<string | string[]>;
+};
+
 declare const DATA_TABLE_DEFAULTS: {
     itemKey: string;
     pageQuery: string;
@@ -2247,8 +2286,12 @@ export declare function splitAttrs(attrs: ImgHTMLAttributes): {
     img: ImgHTMLAttributes;
 };
 
+export declare type TextFieldEmits = TextInputEmits;
+
 export declare type TextFieldInput = ExtractPropInput<ReturnType<typeof createTextFieldProps>>;
 
+export declare type TextFieldPropsOptions = ReturnType<typeof createTextFieldProps>;
+
 declare type ToggleableIconHook = (gen: IconGenerator, ctx: boolean) => VNodeChild;
 
 export declare function useControl(props: ControlProps, opts?: UseControlProviderOptions): ControlProvider;
@@ -6251,6 +6294,201 @@ export declare const VNavigationItem: DefineComponent<{
     ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false" | undefined;
 }>;
 
+export declare const VNumberField: DefineComponent<{
+    modelValue: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    name: StringConstructor;
+    autofocus: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    spellcheck: BooleanConstructor;
+    viewonly: BooleanConstructor;
+    required: BooleanConstructor;
+    clearable: BooleanConstructor;
+    error: BooleanConstructor;
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    validateTiming: {
+        type: PropType<ValidateTiming>;
+        default: ValidateTiming;
+    };
+    rules: {
+        type: PropType<RecursiveArray<Rule<any>>>;
+        default: () => never[];
+    };
+    errorMessages: PropType<string | string[]>;
+    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">;
+    placeholder: StringConstructor;
+    limit: BooleanConstructor;
+    minlength: (StringConstructor | NumberConstructor)[];
+    maxlength: (StringConstructor | NumberConstructor)[];
+    pattern: (StringConstructor | RegExpConstructor)[];
+    autocapitalize: PropType<FormAutoCapitalize>;
+    finishings: PropType<RawTextableFinishingProp>;
+    counter: PropType<string | number | boolean>;
+    counterValue: PropType<(value: string) => number>;
+    masked: StringConstructor;
+    unmasked: StringConstructor;
+    typed: (StringConstructor | NumberConstructor | DateConstructor)[];
+    validating: BooleanConstructor;
+    pending: BooleanConstructor;
+    focused: BooleanConstructor;
+    dirty: BooleanConstructor;
+    pristine: BooleanConstructor;
+    touched: BooleanConstructor;
+    untouched: BooleanConstructor;
+    invalid: BooleanConstructor;
+    valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
+    errors: {
+        type: PropType<FormNodeError[]>;
+        default: () => FormNodeError[];
+    };
+    nodeControl: PropType<FormNodeControl<any, any>>;
+    label: PropType<VNodeChildOrSlot<any>>;
+    hint: PropType<VNodeChildOrSlot<any>>;
+    hinttip: PropType<FormControlHinttip>;
+    hinttipDelay: PropType<FormControlHinttipDelay>;
+    infoAppends: PropType<VNodeChildOrSlot<any>>;
+    requiredChip: PropType<RequiredChipSource>;
+    startAdornment: PropType<VNodeChildOrSlot<any>>;
+    endAdornment: PropType<VNodeChildOrSlot<any>>;
+    variant: {
+        type: PropType<"flat" | "outlined" | "filled">;
+        validator: (value: any) => boolean;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        validator: (value: any) => boolean;
+    };
+    'v-slots': PropType<ResolveRawSlots<FormControlSlots & InputBoxSlots>>;
+    mask: PropType<any>;
+}, () => JSX.Element, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    'update:modelValue': (value: number | null) => true;
+    change: (value: number | null) => true;
+    blur: (ev: FocusEvent) => boolean;
+    accept: (ev: IMaskEvent) => boolean;
+    complete: (ev: IMaskEvent) => boolean;
+    'update:masked': (maskedValue: string) => boolean;
+    'update:typed': (typedValue: IMaskTypedValue | undefined) => boolean;
+    'update:unmasked': (unmaskedValue: string) => boolean;
+    'update:errors': (errors: FormNodeError[]) => boolean;
+    focus: (ev: FocusEvent) => boolean;
+}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    modelValue: {
+        type: PropType<number | null>;
+        default: null;
+    };
+    name: StringConstructor;
+    autofocus: BooleanConstructor;
+    disabled: BooleanConstructor;
+    readonly: BooleanConstructor;
+    spellcheck: BooleanConstructor;
+    viewonly: BooleanConstructor;
+    required: BooleanConstructor;
+    clearable: BooleanConstructor;
+    error: BooleanConstructor;
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    validateTiming: {
+        type: PropType<ValidateTiming>;
+        default: ValidateTiming;
+    };
+    rules: {
+        type: PropType<RecursiveArray<Rule<any>>>;
+        default: () => never[];
+    };
+    errorMessages: PropType<string | string[]>;
+    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">;
+    placeholder: StringConstructor;
+    limit: BooleanConstructor;
+    minlength: (StringConstructor | NumberConstructor)[];
+    maxlength: (StringConstructor | NumberConstructor)[];
+    pattern: (StringConstructor | RegExpConstructor)[];
+    autocapitalize: PropType<FormAutoCapitalize>;
+    finishings: PropType<RawTextableFinishingProp>;
+    counter: PropType<string | number | boolean>;
+    counterValue: PropType<(value: string) => number>;
+    masked: StringConstructor;
+    unmasked: StringConstructor;
+    typed: (StringConstructor | NumberConstructor | DateConstructor)[];
+    validating: BooleanConstructor;
+    pending: BooleanConstructor;
+    focused: BooleanConstructor;
+    dirty: BooleanConstructor;
+    pristine: BooleanConstructor;
+    touched: BooleanConstructor;
+    untouched: BooleanConstructor;
+    invalid: BooleanConstructor;
+    valid: BooleanConstructor;
+    hiddenInfo: BooleanConstructor;
+    errors: {
+        type: PropType<FormNodeError[]>;
+        default: () => FormNodeError[];
+    };
+    nodeControl: PropType<FormNodeControl<any, any>>;
+    label: PropType<VNodeChildOrSlot<any>>;
+    hint: PropType<VNodeChildOrSlot<any>>;
+    hinttip: PropType<FormControlHinttip>;
+    hinttipDelay: PropType<FormControlHinttipDelay>;
+    infoAppends: PropType<VNodeChildOrSlot<any>>;
+    requiredChip: PropType<RequiredChipSource>;
+    startAdornment: PropType<VNodeChildOrSlot<any>>;
+    endAdornment: PropType<VNodeChildOrSlot<any>>;
+    variant: {
+        type: PropType<"flat" | "outlined" | "filled">;
+        validator: (value: any) => boolean;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+        validator: (value: any) => boolean;
+    };
+    'v-slots': PropType<ResolveRawSlots<FormControlSlots & InputBoxSlots>>;
+    mask: PropType<any>;
+}>> & {
+    onBlur?: ((ev: FocusEvent) => any) | undefined;
+    onChange?: ((value: number | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+    onAccept?: ((ev: IMaskEvent) => any) | undefined;
+    onComplete?: ((ev: IMaskEvent) => any) | undefined;
+    "onUpdate:masked"?: ((maskedValue: string) => any) | undefined;
+    "onUpdate:typed"?: ((typedValue: IMaskTypedValue | undefined) => any) | undefined;
+    "onUpdate:unmasked"?: ((unmaskedValue: string) => any) | undefined;
+    "onUpdate:errors"?: ((errors: FormNodeError[]) => any) | undefined;
+    onFocus?: ((ev: FocusEvent) => any) | undefined;
+}, {
+    autofocus: boolean;
+    disabled: boolean;
+    readonly: boolean;
+    spellcheck: boolean;
+    viewonly: boolean;
+    required: boolean;
+    clearable: boolean;
+    error: boolean;
+    modelValue: number | null;
+    tabindex: string | number;
+    validateTiming: ValidateTiming;
+    rules: RecursiveArray<Rule<any>>;
+    limit: boolean;
+    validating: boolean;
+    pending: boolean;
+    focused: boolean;
+    dirty: boolean;
+    pristine: boolean;
+    touched: boolean;
+    untouched: boolean;
+    invalid: boolean;
+    valid: boolean;
+    hiddenInfo: boolean;
+    errors: FormNodeError[];
+}>;
+
 export declare const VOption: DefineComponent<{
     size: {
         type: PropType<"sm" | "md" | "lg">;

package/dist/vui.mjs

@@ -2679,6 +2679,48 @@ const VTextField = defineComponent({
 
 });
 
+const VNumberField = defineComponent({
+  name: 'VNumberField',
+  props: { ...undefined,
+    modelValue: {
+      type: Number,
+      default: null
+    }
+  },
+  emits: { ...undefined,
+    'update:modelValue': value => true,
+    change: value => true
+  },
+
+  setup(props, ctx) {
+    const toString = value => {
+      if (value == null) return '';
+      return String(value);
+    };
+
+    const toNumber = value => {
+      if (value == null) return null;
+      if (typeof value === 'number') return value;
+      if (value.trim() === '') return null;
+      return Number(value);
+    };
+
+    return () => {
+      return createVNode(VTextField, mergeProps(ctx.attrs, {
+        "type": "number",
+        "modelValue": toString(props.modelValue),
+        "onUpdate:modelValue": value => {
+          ctx.emit('update:modelValue', toNumber(value));
+        },
+        "onChange": value => {
+          ctx.emit('change', toNumber(value));
+        }
+      }), ctx.slots);
+    };
+  }
+
+});
+
 const {
   props: props$1,
   emits: emits$1
@@ -2817,7 +2859,10 @@ const VWysiwygEditor = defineComponent({
 
     watch(() => inputControl.canOperation, updateEditable);
     watch(() => props.modelValue, modelValue => {
-      editor.value && editor.value.commands.setContent(modelValue == null ? '' : modelValue);
+      const $editor = editor.value;
+      if (!$editor) return;
+      $editor.commands.setContent(modelValue == null ? '' : modelValue);
+      textRef.value = $editor.getText();
     });
     const editor = useEditor({
       onCreate: ({
@@ -3151,13 +3196,16 @@ const {
 } = createFormSettings({
   nodeType: VUI_FORM_SYMBOL
 });
-const VForm = defineComponent({
-  name: 'VForm',
-  props: { ...props,
+function createVFormProps() {
+  return { ...props,
     ...createControlProps(),
     ...defineSlotsProps() // disableAutoScroll: Boolean,
 
-  },
+  };
+}
+const VForm = defineComponent({
+  name: 'VForm',
+  props: createVFormProps(),
   emits,
 
   setup(props, ctx) {
@@ -4908,4 +4956,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.48",
+  "version": "0.7.52",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.48",
-    "@fastkit/icon-font": "0.7.48",
-    "@fastkit/tiny-logger": "0.7.48",
-    "@fastkit/vite-kit": "0.7.48",
-    "@fastkit/vue-kit": "0.7.48",
+    "@fastkit/color-scheme": "0.7.52",
+    "@fastkit/icon-font": "0.7.52",
+    "@fastkit/tiny-logger": "0.7.52",
+    "@fastkit/vite-kit": "0.7.52",
+    "@fastkit/vue-kit": "0.7.52",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.183",

package/src/components/VForm/VForm.tsx

@@ -18,14 +18,18 @@ export interface VFormSlots {
   default: VueForm;
 }
 
-export const VForm = defineComponent({
-  name: 'VForm',
-  props: {
+export function createVFormProps() {
+  return {
     ...props,
     ...createControlProps(),
     ...defineSlotsProps<VFormSlots>(),
     // disableAutoScroll: Boolean,
-  },
+  };
+}
+
+export const VForm = defineComponent({
+  name: 'VForm',
+  props: createVFormProps(),
   emits,
   setup(props, ctx) {
     const vui = useVui();

package/src/components/VNumberField/VNumberField.tsx

@@ -0,0 +1,55 @@
+import { defineComponent, PropType } from 'vue';
+import {
+  VTextField,
+  TextFieldPropsOptions,
+  TextFieldEmits,
+} from '../VTextField/VTextField';
+
+export const VNumberField = defineComponent({
+  name: 'VNumberField',
+  props: {
+    ...(undefined as unknown as Omit<TextFieldPropsOptions, 'type'>),
+    modelValue: {
+      type: Number as PropType<number | null>,
+      default: null,
+    },
+  },
+  emits: {
+    ...(undefined as unknown as Omit<
+      TextFieldEmits,
+      'update:modelValue' | 'change'
+    >),
+    'update:modelValue': (value: number | null) => true,
+    change: (value: number | null) => true,
+  },
+  setup(props, ctx) {
+    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);
+    };
+
+    return () => {
+      return (
+        <VTextField
+          {...ctx.attrs}
+          type="number"
+          modelValue={toString(props.modelValue)}
+          onUpdate:modelValue={(value) => {
+            ctx.emit('update:modelValue', toNumber(value));
+          }}
+          onChange={(value) => {
+            ctx.emit('change', toNumber(value));
+          }}
+          v-slots={ctx.slots}
+        />
+      );
+    };
+  },
+});

package/src/components/VNumberField/index.ts

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

package/src/components/VTextField/VTextField.tsx

@@ -6,6 +6,7 @@ import {
   createFormControlProps,
   FormControlSlots,
   defineSlotsProps,
+  TextInputEmits,
 } from '@fastkit/vue-kit';
 import { VFormControl } from '../VFormControl';
 import {
@@ -36,6 +37,10 @@ function createTextFieldProps() {
   };
 }
 
+export type TextFieldPropsOptions = ReturnType<typeof createTextFieldProps>;
+
+export type TextFieldEmits = TextInputEmits;
+
 export type TextFieldInput = ExtractPropInput<
   ReturnType<typeof createTextFieldProps>
 >;

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -99,10 +99,10 @@ export const VWysiwygEditor = defineComponent({
     watch(
       () => props.modelValue,
       (modelValue) => {
-        editor.value &&
-          editor.value.commands.setContent(
-            modelValue == null ? '' : modelValue,
-          );
+        const $editor = editor.value;
+        if (!$editor) return;
+        $editor.commands.setContent(modelValue == null ? '' : modelValue);
+        textRef.value = $editor.getText();
       },
     );
 

package/src/components/index.ts

@@ -26,6 +26,7 @@ export * from './VOption';
 export * from './VOptionGroup';
 export * from './VSelect';
 export * from './VTextField';
+export * from './VNumberField';
 export * from './VTextarea';
 export * from './VWysiwygEditor';
 export * from './VForm';