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.

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.