@nhtio/lucid-resourceful-vue-components

Appearance

Variable: RNumberField ​

ts
const RNumberField: DefineComponent<ExtractPropTypes<AppendDefault<{
  active: BooleanConstructor;
  allowUnspecifiedChoices: {
     default: boolean;
     type: BooleanConstructor;
  };
  baseColor: StringConstructor;
  choices: {
     default: undefined;
     type: PropType<any[] | undefined>;
  };
  class: PropType<any>;
  clearIcon: Omit<{
     default: string;
     type: PropType<IconValue>;
   }, "type" | "default"> & {
     default:   | NonNullable<IconValue>
        | () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
      }>;
     type: PropType<
        | IconValue
        | () => VNode<RendererNode, RendererElement, {
      [key: ...]: ...;
     }>>;
  };
  collapseIcon: {
     default: () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
     }>;
     type: PropType<IconValue>;
  };
  color: StringConstructor;
  controlVariant: {
     default: string;
     type: PropType<"default" | "split" | "hidden" | "stacked">;
  };
  decrementIcon: {
     default: () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
     }>;
     type: PropType<IconValue>;
  };
  density: {
     default: string;
     type: PropType<Density>;
     validator: (v: any) => boolean;
  };
  direction: {
     default: string;
     type: PropType<"vertical" | "horizontal">;
     validator: (v: any) => boolean;
  };
  dirty: BooleanConstructor;
  disabled: {
     default: null;
     type: BooleanConstructor;
  };
  error: BooleanConstructor;
  errorMessages: {
     default: () => never[];
     type: PropType<string | readonly string[] | null>;
  };
  expandIcon: {
     default: () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
     }>;
     type: PropType<IconValue>;
  };
  focused: BooleanConstructor;
  format: {
     default: string;
     type: StringConstructor;
  };
  glow: BooleanConstructor;
  hideDetails: PropType<boolean | "auto">;
  hint: StringConstructor;
  href: StringConstructor;
  iconColor: (StringConstructor | BooleanConstructor)[];
  id: StringConstructor;
  incrementIcon: {
     default: () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
     }>;
     type: PropType<IconValue>;
  };
  label: {
     default: undefined;
     type: PropType<string | undefined>;
  };
  max: {
     default: number;
     type: NumberConstructor;
  };
  maxErrors: {
     default: number;
     type: (NumberConstructor | StringConstructor)[];
  };
  maxWidth: (NumberConstructor | StringConstructor)[];
  menuIcon: Omit<{
     default: string;
     type: PropType<IconValue>;
   }, "type" | "default"> & {
     default:   | NonNullable<IconValue>
        | () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
      }>;
     type: PropType<
        | IconValue
        | () => VNode<RendererNode, RendererElement, {
      [key: ...]: ...;
     }>>;
  };
  messages: {
     default: () => never[];
     type: PropType<string | readonly string[]>;
  };
  min: {
     default: number;
     type: NumberConstructor;
  };
  minWidth: (NumberConstructor | StringConstructor)[];
  modelValue: {
     default: undefined;
     type: PropType<
        | RNumberFieldValue
        | RNumberFieldValue[]
        | null
       | undefined>;
  };
  multiple: {
     default: boolean;
     type: PropType<boolean>;
  };
  name: StringConstructor;
  noValuesText: {
     default: undefined;
     type: PropType<string | undefined>;
  };
  onBlur: {
     default: undefined;
     type: PropType<() => void | undefined>;
  };
  onChange: {
     default: undefined;
     type: PropType<() => void | undefined>;
  };
  onClick:append?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:appendInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:clear?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:prepend?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:prependInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onInput: {
     default: undefined;
     type: PropType<() => void | undefined>;
  };
  onMousedown:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onUpdate:focused?: PropType<(...args: [boolean]) => void | undefined>;
  onUpdate:model-value?: PropType<
     | (...args: [RNumberFieldValue | RNumberFieldValue[] | null | undefined]) => void
    | undefined>;
  onUpdate:modelValue?: PropType<
     | (...args: [RNumberFieldValue | RNumberFieldValue[] | null | undefined]) => void
    | undefined>;
  persistentHint: BooleanConstructor;
  persistentPlaceholder: BooleanConstructor;
  precision: {
     default: number;
     type: PropType<number | null>;
  };
  prefix: StringConstructor;
  readonly: {
     default: null;
     type: PropType<boolean | null>;
  };
  renderMode: {
     default: string;
     type: PropType<"edit" | "read">;
  };
  role: {
     default: string;
     type: PropType<string>;
  };
  step: {
     default: number;
     type: NumberConstructor;
  };
  style: {
     default: null;
     type: PropType<StyleValue>;
  };
  suffix: StringConstructor;
  theme: StringConstructor;
  to: PropType<
     | string
     | RouteLocationAsRelativeGeneric
    | RouteLocationAsPathGeneric>;
  validateOn: PropType<
     | "eager"
     | "input"
     | "blur"
     | "submit"
     | "invalid-input"
     | "input lazy"
     | "blur lazy"
     | "submit lazy"
     | "invalid-input lazy"
     | "input eager"
     | "blur eager"
     | "submit eager"
     | "invalid-input eager"
     | "lazy input"
     | "lazy blur"
     | "lazy submit"
     | "lazy invalid-input"
     | "eager input"
     | "eager blur"
     | "eager submit"
     | "eager invalid-input"
     | "lazy"
    | undefined>;
  variant: {
     default: string;
     type: PropType<
        | "outlined"
        | "plain"
        | "underlined"
        | "filled"
        | "solo"
        | "solo-inverted"
       | "solo-filled">;
     validator: (v: any) => boolean;
  };
  width: (NumberConstructor | StringConstructor)[];
}, {
}>>, () =>
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>
  | null, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, EmitFunctions<{
  click:append: (...args: [MouseEvent]) => boolean;
  click:appendInner: (...args: [MouseEvent]) => boolean;
  click:clear: (...args: [MouseEvent]) => boolean;
  click:control: (...args: [MouseEvent]) => boolean;
  click:prepend: (...args: [MouseEvent]) => boolean;
  click:prependInner: (...args: [MouseEvent]) => boolean;
  mousedown:control: (...args: [MouseEvent]) => boolean;
  update:focused: (...args: [boolean]) => boolean;
  update:model-value: (value:
     | RNumberFieldValue
     | RNumberFieldValue[]
     | null
    | undefined) => boolean;
  update:modelValue: (value:
     | RNumberFieldValue
     | RNumberFieldValue[]
     | null
    | undefined) => boolean;
}>, string, PublicProps, ToResolvedProps<ExtractPropTypes<AppendDefault<{
  active: BooleanConstructor;
  allowUnspecifiedChoices: {
     default: boolean;
     type: BooleanConstructor;
  };
  baseColor: StringConstructor;
  choices: {
     default: undefined;
     type: PropType<any[] | undefined>;
  };
  class: PropType<any>;
  clearIcon: Omit<{
     default: string;
     type: PropType<IconValue>;
   }, "type" | "default"> & {
     default:   | NonNullable<IconValue>
        | () => VNode<RendererNode, RendererElement, {
      [key: ...]: ...;
      }>;
     type: PropType<
        | IconValue
       | () => VNode<..., ..., ...>>;
  };
  collapseIcon: {
     default: () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
     }>;
     type: PropType<IconValue>;
  };
  color: StringConstructor;
  controlVariant: {
     default: string;
     type: PropType<"default" | "split" | "hidden" | "stacked">;
  };
  decrementIcon: {
     default: () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
     }>;
     type: PropType<IconValue>;
  };
  density: {
     default: string;
     type: PropType<Density>;
     validator: (v: any) => boolean;
  };
  direction: {
     default: string;
     type: PropType<"vertical" | "horizontal">;
     validator: (v: any) => boolean;
  };
  dirty: BooleanConstructor;
  disabled: {
     default: null;
     type: BooleanConstructor;
  };
  error: BooleanConstructor;
  errorMessages: {
     default: () => never[];
     type: PropType<string | readonly string[] | null>;
  };
  expandIcon: {
     default: () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
     }>;
     type: PropType<IconValue>;
  };
  focused: BooleanConstructor;
  format: {
     default: string;
     type: StringConstructor;
  };
  glow: BooleanConstructor;
  hideDetails: PropType<boolean | "auto">;
  hint: StringConstructor;
  href: StringConstructor;
  iconColor: (StringConstructor | BooleanConstructor)[];
  id: StringConstructor;
  incrementIcon: {
     default: () => VNode<RendererNode, RendererElement, {
      [key: string]: any;
     }>;
     type: PropType<IconValue>;
  };
  label: {
     default: undefined;
     type: PropType<string | undefined>;
  };
  max: {
     default: number;
     type: NumberConstructor;
  };
  maxErrors: {
     default: number;
     type: (NumberConstructor | StringConstructor)[];
  };
  maxWidth: (NumberConstructor | StringConstructor)[];
  menuIcon: Omit<{
     default: string;
     type: PropType<IconValue>;
   }, "type" | "default"> & {
     default:   | NonNullable<IconValue>
        | () => VNode<RendererNode, RendererElement, {
      [key: ...]: ...;
      }>;
     type: PropType<
        | IconValue
       | () => VNode<..., ..., ...>>;
  };
  messages: {
     default: () => never[];
     type: PropType<string | readonly string[]>;
  };
  min: {
     default: number;
     type: NumberConstructor;
  };
  minWidth: (NumberConstructor | StringConstructor)[];
  modelValue: {
     default: undefined;
     type: PropType<
        | RNumberFieldValue
        | RNumberFieldValue[]
        | null
       | undefined>;
  };
  multiple: {
     default: boolean;
     type: PropType<boolean>;
  };
  name: StringConstructor;
  noValuesText: {
     default: undefined;
     type: PropType<string | undefined>;
  };
  onBlur: {
     default: undefined;
     type: PropType<() => void | undefined>;
  };
  onChange: {
     default: undefined;
     type: PropType<() => void | undefined>;
  };
  onClick:append?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:appendInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:clear?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:prepend?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onClick:prependInner?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onInput: {
     default: undefined;
     type: PropType<() => void | undefined>;
  };
  onMousedown:control?: PropType<(...args: [MouseEvent]) => void | undefined>;
  onUpdate:focused?: PropType<(...args: [boolean]) => void | undefined>;
  onUpdate:model-value?: PropType<
     | (...args: [RNumberFieldValue | RNumberFieldValue[] | null | undefined]) => void
    | undefined>;
  onUpdate:modelValue?: PropType<
     | (...args: [RNumberFieldValue | RNumberFieldValue[] | null | undefined]) => void
    | undefined>;
  persistentHint: BooleanConstructor;
  persistentPlaceholder: BooleanConstructor;
  precision: {
     default: number;
     type: PropType<number | null>;
  };
  prefix: StringConstructor;
  readonly: {
     default: null;
     type: PropType<boolean | null>;
  };
  renderMode: {
     default: string;
     type: PropType<"edit" | "read">;
  };
  role: {
     default: string;
     type: PropType<string>;
  };
  step: {
     default: number;
     type: NumberConstructor;
  };
  style: {
     default: null;
     type: PropType<StyleValue>;
  };
  suffix: StringConstructor;
  theme: StringConstructor;
  to: PropType<
     | string
     | RouteLocationAsRelativeGeneric
    | RouteLocationAsPathGeneric>;
  validateOn: PropType<
     | "eager"
     | "input"
     | "blur"
     | "submit"
     | "invalid-input"
     | "input lazy"
     | "blur lazy"
     | "submit lazy"
     | "invalid-input lazy"
     | "input eager"
     | "blur eager"
     | "submit eager"
     | "invalid-input eager"
     | "lazy input"
     | "lazy blur"
     | "lazy submit"
     | "lazy invalid-input"
     | "eager input"
     | "eager blur"
     | "eager submit"
     | "eager invalid-input"
     | "lazy"
    | undefined>;
  variant: {
     default: string;
     type: PropType<
        | "outlined"
        | "plain"
        | "underlined"
        | "filled"
        | "solo"
        | "solo-inverted"
       | "solo-filled">;
     validator: (v: any) => boolean;
  };
  width: (NumberConstructor | StringConstructor)[];
}, {
}>>, EmitFunctions<{
  click:append: (...args: [MouseEvent]) => boolean;
  click:appendInner: (...args: [MouseEvent]) => boolean;
  click:clear: (...args: [MouseEvent]) => boolean;
  click:control: (...args: [MouseEvent]) => boolean;
  click:prepend: (...args: [MouseEvent]) => boolean;
  click:prependInner: (...args: [MouseEvent]) => boolean;
  mousedown:control: (...args: [MouseEvent]) => boolean;
  update:focused: (...args: [boolean]) => boolean;
  update:model-value: (value:
     | RNumberFieldValue
     | RNumberFieldValue[]
     | null
    | undefined) => boolean;
  update:modelValue: (value:
     | RNumberFieldValue
     | RNumberFieldValue[]
     | null
    | undefined) => boolean;
}>>, {
  active: boolean;
  allowUnspecifiedChoices: boolean;
  choices: any[] | undefined;
  clearIcon:   | IconValue
     | () => VNode<RendererNode, RendererElement, {
   [key: string]: any;
   }>;
  collapseIcon: IconValue;
  controlVariant: "default" | "split" | "hidden" | "stacked";
  decrementIcon: IconValue;
  density: Density;
  direction: "vertical" | "horizontal";
  dirty: boolean;
  disabled: boolean;
  error: boolean;
  errorMessages: string | readonly string[] | null;
  expandIcon: IconValue;
  focused: boolean;
  format: string;
  glow: boolean;
  incrementIcon: IconValue;
  label: string | undefined;
  max: number;
  maxErrors: string | number;
  menuIcon:   | IconValue
     | () => VNode<RendererNode, RendererElement, {
   [key: string]: any;
   }>;
  messages: string | readonly string[];
  min: number;
  modelValue:   | RNumberFieldValue
     | RNumberFieldValue[]
     | null
     | undefined;
  multiple: boolean;
  noValuesText: string | undefined;
  onBlur: () => void | undefined;
  onChange: () => void | undefined;
  onInput: () => void | undefined;
  persistentHint: boolean;
  persistentPlaceholder: boolean;
  precision: number | null;
  readonly: boolean | null;
  renderMode: "edit" | "read";
  role: string;
  step: number;
  style: StyleValue;
  variant:   | "outlined"
     | "plain"
     | "underlined"
     | "filled"
     | "solo"
     | "solo-inverted"
     | "solo-filled";
}, SlotsType<Partial<{
  append: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  append-inner: (arg: DefaultInputSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  clear: (arg: DefaultInputSlot & {
     props: Record<string, any>;
   }) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  counter: (arg: VCounterSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  decrement: (arg: ControlSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  details: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  increment: (arg: ControlSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  label: (arg: DefaultInputSlot & {
     label: string | undefined;
     props: Record<string, any>;
   }) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  loader: (arg: LoaderSlotProps) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  message: (arg: VMessageSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  prepend: (arg: VInputSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
  prepend-inner: (arg: DefaultInputSlot) => VNode<RendererNode, RendererElement, {
   [key: string]: any;
  }>[];
}>>, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;

Professional numeric input field component with advanced formatting and validation.

A sophisticated number field built on VNumberInput that provides enterprise-grade numeric input capabilities with numeral.js formatting, custom controls, and full support for single/multiple/read modes through the unified field composer architecture.

Core Features:

  • Advanced Formatting: Numeral.js integration for currency, percentages, thousands
  • Custom Controls: Fully customizable increment/decrement buttons with smart icons
  • BigInt Support: Handles large integers beyond JavaScript's safe integer range
  • Multiple Mode: Chip-based interface for array input with formatted display
  • Read Mode: Formatted display with Oxford comma lists for multiple values
  • Smart Validation: Min/max/step boundary checking with visual feedback
  • Accessibility: Full keyboard navigation and screen reader support

Control Variants:

  • default: Standard stacked controls with up/down arrows
  • stacked: Vertical arrangement optimized for compact spaces
  • split: Side-by-side controls with intuitive +/- icons
  • hidden: Input-only mode without visible controls

Formatting Examples:

  • Currency: format="$0,0.00" → $1,234.56
  • Percentage: format="0.00%" → 45.67%
  • Thousands: format="0,0" → 1,234,567
  • Decimal: format="0.000" → 123.456

Example ​

vue
<!-- Single currency input -->
<RNumberField
  v-model="amount"
  label="Amount"
  format="$0,0.00"
  :min="0"
  :max="1000000"
  control-variant="split"
/>

<!-- Multiple percentages -->
<RNumberField
  v-model="rates"
  multiple
  label="Success Rates"
  format="0.00%"
  :min="0"
  :max="100"
/>

<!-- Read-only display -->
<RNumberField
  v-model="totals"
  multiple
  label="Quarterly Results"
  format="$0,0.00"
  render-mode="read"
/>

Validation:

  • Automatically validates min/max boundaries
  • Rejects NaN and Infinity values
  • Step validation for increment/decrement operations
  • Custom validation through standard Vuetify patterns

Accessibility:

  • Full keyboard navigation support
  • Screen reader announcements for value changes
  • Proper ARIA labels and descriptions
  • Focus management for complex interactions

Copyright © 2025-present New Horizon Technology LTD