<vcf-lookup-field>

The Lookup field component allows you to search a specific record with either a combobox or a dialog with a grid view.

Live demo ↗ | API documentation ↗

Installation

Install vcf-lookup-field:

npm i @vaadin-component-factory/vcf-lookup-field --save

Important information about versioning

Component versions 23.x and 24.x were deprecated in order to follow Semanting Versioning practices. Please use latest version 3.x for Vaadin 23 and version 4/5.x for Vaadin 24.

Compatibility

• Version 1.x.x -> Vaadin 14+
• Version 3.x.x -> Vaadin 23.x
• Version 4.x.x -> Vaadin 24.x
• Version 5.x.x -> Vaadin 24.x (improved accessibility)
• Version 6.x.x -> Vaadin 25.x

Usage

Once installed, import it in your application:

import '@vaadin-component-factory/vcf-lookup-field';

Add <vcf-lookup-field> element to the page.

<vcf-lookup-field></vcf-lookup-field>

Running demo

1. Fork the vcf-lookup-field repository and clone it locally.

2. Make sure you have npm installed.

3. When in the vcf-lookup-field directory, run npm install to install dependencies.

4. Run npm run serve to open the demo.

Running tests

The test suite runs in a real Chromium browser via @web/test-runner.

1. Install dependencies with npm install.

2. Install the browser once with npx playwright install chromium.

3. Run the tests:

npm test              # single run
npm run test:watch    # re-run on change, with a browser you can debug in
npm run test:coverage # single run plus a coverage report

The specs live in test/ and are grouped by concern: structure, properties, filtering, dialog, selection, slots, grid-pro and focus. Shared fixtures and DOM helpers are in test/helpers.js.

Publishing

To publish a new version, updte the version then run: npm publish with a account on npm that can update this component.

License

Apache License 2.0