@nhtio/lucid-resourceful-vue-components

Appearance

Variable: RUnsignedIntegerField ​

ts
const RUnsignedIntegerField: 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 unsigned integer input field component with automatic constraint normalization.

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

Core Features:

  • Unsigned-Only Input: Automatically enforces min ≥ 0 through constraint normalization
  • RIntegerField Foundation: Inherits integer constraints (precision: 0, step: 1)
  • Smart Constraint Normalization: Automatically corrects negative min/max values
  • Clean Layered Architecture: Builds on integer field with minimal additional logic
  • 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 unsigned 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 (non-negative only)
  • Perfect Accessibility: Full keyboard navigation and screen reader support

Inherited from RIntegerField:

  • Integer Constraints: precision: 0, step: 1 for whole numbers only
  • 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

Unsigned-Specific Behavior:

  • Forces min ≥ 0 regardless of user input (negative mins become 0)
  • Ignores negative max values (sets to undefined for no upper limit)
  • Preserves positive min/max constraints (respects user intent)
  • Uses constraint validation instead of silent value transformation
  • No Math.abs on input - better UX through validation feedback

Architecture Excellence:

typescript
// Three-layer architecture:
RNumberField (engine) → RIntegerField (integer constraints) → RUnsignedIntegerField (unsigned constraints)

// Maximum code reuse: ~98% inherited, ~2% unsigned-specific logic

Constraint Normalization Examples:

  • Input: min: -5, max: -10 → Normalized: min: 0, max: undefined
  • Input: min: 10, max: 100 → Preserved: min: 10, max: 100
  • Input: min: -1, max: 50 → Normalized: min: 0, max: 50

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 unsigned integer input -->
<RUnsignedIntegerField
  v-model="quantity"
  label="Item Count"
  format="0,0"
  :min="1"
  :max="999999"
  control-variant="split"
/>

<!-- Multiple unsigned integers -->
<RUnsignedIntegerField
  v-model="ratings"
  multiple
  label="Star Ratings"
  format="0,0"
  :min="1"
  :max="5"
/>

<!-- Read-only display -->
<RUnsignedIntegerField
  v-model="counts"
  multiple
  label="Item Counts"
  format="0,0"
  render-mode="read"
/>

<!-- Automatic constraint normalization -->
<RUnsignedIntegerField
  v-model="value"
  label="Positive Value"
  :min="-10"
  :max="-5"
  <!-- Becomes: min: 0, max: undefined -->
/>

Use Cases:

  • Quantity Fields: Product counts, inventory numbers
  • Rating Systems: Star ratings, score systems (1-5, 1-10)
  • Count Fields: User counts, item totals, statistics
  • ID Fields: Positive integer identifiers
  • Index Fields: Array indices, page numbers

Performance:

  • Minimal overhead through efficient constraint normalization
  • Optimal re-rendering through computed prop aggregation
  • Maximum code reuse from underlying integer field implementation
  • Lazy evaluation of constraints for better performance

Copyright © 2025-present New Horizon Technology LTD