json-keyslist v1.0.0

\

This webcomponent follows the open-wc recommendation.

Installation

npm i json-keyslist

Usage

<script type="module">
  import 'json-keyslist/json-keyslist.js';
</script>

<json-keyslist id="json-keyslist1"></json-keyslist>

Events

Dispatched Events

• wc-ready: Dispatch event when the webcomponent is ready, after the first render. The event detail has id, componentName and component, with the webcomponent instance, properties.
• json-keyslist-selected-item: Dispatch event when an item is selected. The event detail has mainKey and selectedItem properties.

Listening for events

• json-keyslist-data-changed: Listen for this event to get notified when the data changes. The event detail has mainKey and data properties. Expect the data to be an array of objects and the mainKey to be the key of the object.

Theming

• --json-keyslist-text-color .Default #000
• --json-keyslist-background-color .Default #fff
• --json-keyslist-width .Default 100%
• --json-keyslist-link-margin .Default 0.5rem
• --json-keyslist-link-border-bottom .Default 1px solid #000
• --json-keyslist-link-color .Default #000
• --json-keyslist-link-font-size .Default 16px
• --json-keyslist-link-font-weight .Default normal
• --json-keyslist-link-font-family .Default verdana
• --json-keyslist-selected-link-color .Default #333
• --json-keyslist-selected-link-font-weight .Default bold
• --json-keyslist-selected-link-background-color .Default #a0a0a0

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html