@nhtio/lucid-resourceful-vue-components

Appearance

Variable: RIntegerField ​

ts
const RIntegerField: 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]) => void
    | undefined>;
  onUpdate:modelValue: PropType<
     | (...args: [
     | RNumberFieldValue
     | RNumberFieldValue[]
     | null]) => void
    | undefined>;
  persistentHint: BooleanConstructor;
  persistentPlaceholder: BooleanConstructor;
  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;
}>, {
}, {
}, {
}, 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 | ...[] | null]) => void
    | undefined>;
  onUpdate:modelValue: PropType<
     | (...args: [RNumberFieldValue | ...[] | null]) => void
    | undefined>;
  persistentHint: BooleanConstructor;
  persistentPlaceholder: BooleanConstructor;
  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;
  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>;

Specialized integer input field component with advanced formatting and validation.

A professional integer field that wraps RNumberField with integer-specific constraints, providing a clean API for whole number input while inheriting all advanced features like custom controls, numeral.js formatting, and unified field composer architecture.

Core Features:

  • Integer-Only Input: Automatically enforces precision: 0 and step: 1
  • RNumberField Foundation: Inherits all advanced capabilities without code duplication
  • Clean API Design: Removes inappropriate props (precision, step) from public interface
  • Advanced Formatting: Numeral.js integration for thousands separators and custom patterns
  • Custom Controls: Fully customizable increment/decrement buttons with smart icons
  • Multiple Mode: Chip-based interface for integer arrays with formatted display
  • Read Mode: Professional display with Oxford comma lists for multiple values
  • Smart Validation: Min/max boundary checking with visual feedback
  • Perfect Accessibility: Full keyboard navigation and screen reader support

Inherited from RNumberField:

  • Control Variants: default, stacked, split, hidden with adaptive icons
  • Icon Customization: increment, decrement, collapse, expand icons
  • Advanced Validation: Boundary checking with disabled state management
  • Mobile Optimization: Touch-friendly controls with proper sizing
  • Theme Integration: Pure Vuetify styling with zero custom CSS
  • Event System: Complete event forwarding with type safety
  • Slot System: Full slot inheritance for maximum customization

Integer-Specific Behavior:

  • Forces precision: 0 to prevent decimal input
  • Forces step: 1 for whole number increments
  • Optimized default format "0,0" for integer display
  • Removes confusing decimal-related props from API

Formatting Examples:

  • Basic: format="0,0" → 1,234,567
  • No separators: format="0" → 1234567
  • Ordinals: format="0o" → 1st, 2nd, 3rd
  • Bytes: format="0b" → 1KB, 2MB, 3GB

Example ​

vue
<!-- Single integer input -->
<RIntegerField
  v-model="quantity"
  label="Quantity"
  format="0,0"
  :min="1"
  :max="999999"
  control-variant="split"
/>

<!-- Multiple integers -->
<RIntegerField
  v-model="scores"
  multiple
  label="Test Scores"
  format="0,0"
  :min="0"
  :max="100"
/>

<!-- Read-only display -->
<RIntegerField
  v-model="results"
  multiple
  label="Results"
  format="0,0"
  render-mode="read"
/>

<!-- Custom icons and controls -->
<RIntegerField
  v-model="count"
  label="Item Count"
  control-variant="stacked"
  :increment-icon="customPlusIcon"
  :decrement-icon="customMinusIcon"
/>

Architecture Benefits:

  • Zero Code Duplication: Leverages RNumberField's complex implementation
  • Perfect Type Safety: Full TypeScript support with proper prop extraction
  • Consistent UX: Identical behavior across all numeric field variants
  • Easy Maintenance: Bug fixes in RNumberField automatically benefit integer field
  • Clean Separation: Integer-specific logic isolated in wrapper component

Performance:

  • Minimal overhead through efficient prop binding and event forwarding
  • Optimal re-rendering through computed prop aggregation
  • Lazy evaluation of event handlers for better memory usage

Copyright © 2025-present New Horizon Technology LTD