Public Components

@nhtio/lucid-resourceful-vue-components/components

All UI components exported by the library are tree‑shakable. You can import the full module barrel or target just what you need. Each component below lists:

• Tree‑shakable import path
• What it does / when to use it

Tip

Install the IoC plugin first (see Quickstart) so internal services (i18n, validation, HTTP, cache, etc.) are available to components that rely on them.

Import styles

• Barrel: @nhtio/lucid-resourceful-vue-components/components
• Individual components: @nhtio/lucid-resourceful-vue-components/components/<component_name>
• Fields barrel: @nhtio/lucid-resourceful-vue-components/components/fields
• Individual field: @nhtio/lucid-resourceful-vue-components/components/fields/<field_name>

Resourceful Data Suite

ResourcefulIndex

Import: @nhtio/lucid-resourceful-vue-components/components/resourceful_index

Lists, filters, sorts, aggregates and bulk‑acts on records from a Lucid Resourceful backend in a data table style UI.

Advanced customization:

Use the resourcefulIndexRequestPayloadModifier prop to intercept and transform the request payload before it's sent to your backend. This enables powerful scenarios like multi-tenant filtering, role-based field restrictions, or dynamic parameter injection—all without modifying the component's internal logic.

// Multi-tenant filtering example
const addTenantScope = (payload: ResourcefulIndexRequest) => ({
  ...payload,
  filter: payload.filter 
    ? `${payload.filter} AND tenant_id:${currentTenantId}` 
    : `tenant_id:${currentTenantId}`
})

// Role-based field limiting
const restrictFields = (payload: ResourcefulIndexRequest) => ({
  ...payload,
  fields: payload.fields.filter(f => allowedFieldsForRole.includes(f))
})

// Usage
<ResourcefulIndex
  base-url="/api/users"
  :resourceful-index-request-payload-modifier="addTenantScope"
/>

The modifier receives the fully-constructed request object (with search, filters, pagination, sorting, and aggregations) and must return a valid ResourcefulIndexRequest. Chain multiple modifiers via composition for complex scenarios.

ResourcefulRecord

Import: @nhtio/lucid-resourceful-vue-components/components/resourceful_record

Displays, edits, and submits a single record with built‑in validation, state machine, and CRUD action hooks.

request-timeout controls record and metadata GETs: pass a positive number of milliseconds, or false to disable the timeout. By default it is omitted from request options so the HTTP service or consuming app's middleware supplies its default (59,999 ms with the built-in service). Submission timeouts are unchanged.

A template ref exposes refresh(): Promise<void>, record, and these reactive, unwrapped booleans:

• recordLoaded: at least one record GET has succeeded (not simply finished).
• recordLoading: the current record GET is pending.
• isErrored: the record or metadata read failed; clears when the failed read succeeds.

Timeouts and network failures show the existing error view and alert, including on the initial load. Use refresh() to retry the record read, and metadata when its read failed. A request superseded by another read stays silent and cannot overwrite the newer record or its loading state.

ResourcefulRecordForm

Import: @nhtio/lucid-resourceful-vue-components/components/resourceful_record_form

Form wrapper for a record when you want to fully control layout but still leverage the record form context & slots.

ResourcefulRecordDefaultForm

Import: @nhtio/lucid-resourceful-vue-components/components/resourceful_record_default_form

Auto‑renders a form for a record schema (quick scaffolding).

ResourcefulAlerter

Import: @nhtio/lucid-resourceful-vue-components/components/resourceful_alerter

Central alert handler. Expose a ref and call its alert function from anywhere.

Exporter

Import: @nhtio/lucid-resourceful-vue-components/components/exporter

Handles streaming or iterative export flows with format & scope selection.

Sortable

Import: @nhtio/lucid-resourceful-vue-components/components/sortable

Drag‑and‑drop ordering wrapper (Sortable.js under the hood). Emits order changes.

SvgIcon

Import: @nhtio/lucid-resourceful-vue-components/components/svg_icon

Renders inline SVG path data or predefined icons in a consistent slot/container.

TimezonePicker

Import: @nhtio/lucid-resourceful-vue-components/components/timezone_picker

Dropdown or select UI for choosing the current timezone.

FormWithValidation

Import: @nhtio/lucid-resourceful-vue-components/components/form_with_validation

Generic form wrapper providing validation state, slot bindings, and schema support.

RCustomField

Import: @nhtio/lucid-resourceful-vue-components/components/custom_field

Define a custom field implementation with controlled rendering & validation hooks; integrate seamlessly into record/index forms.

Field Components

Import: @nhtio/lucid-resourceful-vue-components/components/fields

Primitive field renderers used inside record/index forms. All share a unified API for labels, descriptions, validation, formatting, multiple/read modes, accessibility and i18n.

RBigIntField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/bigint

Unlimited‑precision integer input built on a custom VTextField implementation (Big.js arithmetic). Supports arbitrarily large values beyond JS safe range, optional JSON‑safe string serialization, numeral.js formatting, custom control variants (default/split/stacked/hidden), chip‑based multiple mode and formatted read display.

RBooleanField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/boolean

Boolean (true/false) or ternary (true/false/null) field with selectable render variants: select, toggle, checkbox, radio. Provides indeterminate state visuals, i18n text + icon customization, smart clearability (only when null allowed), chip management in multiple mode, and clean localized read formatting.

RDateTimeField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/date_time

ISO 8601 datetime with full timezone support. Integrated triple picker (date, time, timezone) backed by Luxon, mobile bottom‑sheet optimization, timezone intelligence (map + search), min/max constraint awareness across zones, multiple mode chip UI, and rich localized display formats in read mode.

RDateField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/date

ISO date (YYYY‑MM‑DD) field pairing a manual text input with a visual date picker overlay (dialog on desktop, bottom‑sheet on mobile). Luxon formatting presets, suppression of native browser pickers, multiple mode chips, min/max constraint validation, clean localized read output.

REnumField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/enum

Enumeration selector supporting string, number, or bigint values. Dynamic choice loading via callback (async refresh) or static choices, autocomplete select or radio group rendering, value/label mapping with graceful fallback, multiple mode chips, and labeled read presentation.

RIntegerField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/integer

Whole number specialization of RNumberField enforcing precision 0 and step 1. Retains advanced numeral.js formatting, control variants, validation, accessibility, multiple mode chip handling and formatted read lists—while hiding decimal‑specific props.

RUnsignedIntegerField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/unsigned_integer

Non‑negative integer specialization of RIntegerField. Automatically normalizes constraints (min ≥ 0, ignores negative max), inherits all integer formatting, control variants, validation, multiple/read modes and accessibility features.

RNumberField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/number

Professional numeric input for numbers and BigInt values (VNumberInput base). Provides numeral.js formatting (currency, percent, custom patterns), multiple control variants (default/stacked/split/hidden), min/max/step validation, chip‑based multiple mode and formatted read lists.

RStringField

Import: @nhtio/lucid-resourceful-vue-components/components/fields/string

Formatted string input with specialized modes: email, password (secure masking + visibility toggle), url, tel (sanitization), search, and color (advanced picker dialog with hex/hexa). Supports auto‑linking, mobile optimized dialogs, multiple mode chips, color badges, secure password masking and rich read formatting.

Control & Action Components

ControlButton

Import: @nhtio/lucid-resourceful-vue-components/components/control_button

Single action button with optional badge/state styling.

ControlButtonBar

Import: @nhtio/lucid-resourceful-vue-components/components/control_button_bar

Horizontal grouping of control buttons with overflow handling.

ControlMenu

Import: @nhtio/lucid-resourceful-vue-components/components/control_menu

Menu-style collection of control buttons/actions.

AutoRefreshController

Import: @nhtio/lucid-resourceful-vue-components/components/autorefresh_controller

Automatically triggers refresh logic (polling or interval‑based) for a target component/data source.