Variable: RBigIntField
ts
const RBigIntField: 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">;
hideInput: BooleanConstructor;
hint: StringConstructor;
href: StringConstructor;
iconColor: (StringConstructor | BooleanConstructor)[];
id: StringConstructor;
incrementIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
inset: BooleanConstructor;
jsonSafe: {
default: boolean;
type: BooleanConstructor;
};
label: {
default: undefined;
type: PropType<string | undefined>;
};
max: {
default: undefined;
type: PropType<string | number | bigint | undefined>;
};
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: undefined;
type: PropType<string | number | bigint | undefined>;
};
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: [RBigIntFieldValue | RBigIntFieldValue[] | null | undefined]) => void
| undefined>;
onUpdate:modelValue?: PropType<
| (...args: [RBigIntFieldValue | RBigIntFieldValue[] | null | undefined]) => void
| undefined>;
persistentHint: BooleanConstructor;
persistentPlaceholder: BooleanConstructor;
prefix: StringConstructor;
readonly: {
default: null;
type: PropType<boolean | null>;
};
renderMode: {
default: string;
type: PropType<"edit" | "read">;
};
reverse: BooleanConstructor;
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:
| RBigIntFieldValue
| RBigIntFieldValue[]
| null
| undefined) => boolean;
update:modelValue: (value:
| RBigIntFieldValue
| RBigIntFieldValue[]
| 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">;
hideInput: BooleanConstructor;
hint: StringConstructor;
href: StringConstructor;
iconColor: (StringConstructor | BooleanConstructor)[];
id: StringConstructor;
incrementIcon: {
default: () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
type: PropType<IconValue>;
};
inset: BooleanConstructor;
jsonSafe: {
default: boolean;
type: BooleanConstructor;
};
label: {
default: undefined;
type: PropType<string | undefined>;
};
max: {
default: undefined;
type: PropType<string | number | bigint | undefined>;
};
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: undefined;
type: PropType<string | number | bigint | undefined>;
};
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: [RBigIntFieldValue | RBigIntFieldValue[] | null | undefined]) => void
| undefined>;
onUpdate:modelValue?: PropType<
| (...args: [RBigIntFieldValue | RBigIntFieldValue[] | null | undefined]) => void
| undefined>;
persistentHint: BooleanConstructor;
persistentPlaceholder: BooleanConstructor;
prefix: StringConstructor;
readonly: {
default: null;
type: PropType<boolean | null>;
};
renderMode: {
default: string;
type: PropType<"edit" | "read">;
};
reverse: BooleanConstructor;
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:
| RBigIntFieldValue
| RBigIntFieldValue[]
| null
| undefined) => boolean;
update:modelValue: (value:
| RBigIntFieldValue
| RBigIntFieldValue[]
| 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;
hideInput: boolean;
incrementIcon: IconValue;
inset: boolean;
jsonSafe: boolean;
label: string | undefined;
max: string | number | bigint | undefined;
maxErrors: string | number;
menuIcon: | IconValue
| () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;
messages: string | readonly string[];
min: string | number | bigint | undefined;
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";
reverse: boolean;
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>;RBigIntField - A sophisticated Vue component for handling unlimited precision integers.
This component provides a comprehensive solution for working with large integers that exceed JavaScript's Number.MAX_SAFE_INTEGER. It uses Big.js for arithmetic operations and provides seamless integration with the resourceful field ecosystem.
Key Features
- Unlimited Precision: Handle arbitrarily large integers using Big.js
- JSON Compatibility: Configurable serialization for API compatibility
- Input Controls: Custom increment/decrement buttons with proper accessibility
- Multiple Values: Support for arrays with chip-based interface
- Validation: Comprehensive boundary checking and type validation
- Formatting: Integration with numeral.js for display formatting
Technical Details
The component uses VTextField as its base instead of VNumberInput due to BigInt incompatibility with HTML number inputs. Custom controls are recreated to match VNumberInput behavior while supporting unlimited precision values.
Example
vue
<template>
<!-- Basic usage -->
<RBigIntField v-model="largeNumber" label="Large Number" format="0,0" />
<!-- Multiple values -->
<RBigIntField v-model="largeNumbers" multiple label="Large Numbers" />
<!-- With constraints -->
<RBigIntField
v-model="constrainedNumber"
:min="1000000000000000n"
:max="9999999999999999n"
/>
</template>