npm.io
0.1.0 • Published yesterday

@pydmin/lit-components

Licence
MIT
Version
0.1.0
Deps
7
Size
93 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

lit-components

A library of Web Components built with Lit. The components are standard Web Components — they work in any framework (React, Vue, Angular) as well as in plain HTML.

Installation

npm install @fredlak/lit-components

Usage

// the whole library
import '@fredlak/lit-components';

// or a single component
import '@fredlak/lit-components/toggle-switch';
<lit-toggle-switch checked></lit-toggle-switch>
<lit-date-picker></lit-date-picker>

Components

Tag Import path Description
<lit-accordion> @fredlak/lit-components/accordion Expandable/collapsible content panel
<lit-combobox> @fredlak/lit-components/combobox Text input with a filterable dropdown list
<lit-date-picker> @fredlak/lit-components/datepicker Segmented date input; order and separators follow the browser locale
<lit-fast-number-field> @fredlak/lit-components/fast-number-field Number field with fast value editing and validation icons
<lit-labeled-control> @fredlak/lit-components/labeled-control Wrapper that adds a label to any form control
<lit-numeric-input> @fredlak/lit-components/numeric-input Numeric input with up/down stepper buttons
<lit-path-picker> @fredlak/lit-components/path-picker File/directory system path picker
<lit-textinput> @fredlak/lit-components/textinput Styled text input
<lit-textinput-button> @fredlak/lit-components/textinput-button Text input with an attached action button
<lit-time-picker> @fredlak/lit-components/timepicker Segmented time input, 24h/12h formats
<lit-toggle-switch> @fredlak/lit-components/toggle-switch Checkbox styled as a modern toggle switch
<lit-weekday-picker> @fredlak/lit-components/weekday-picker Multi-select for days of the week

See the JSDoc comment at the top of each component file in src/components/ for the full list of attributes, events, and CSS custom properties.

Development

npm install
npm start        # dev server with the demo page
npm test         # tests

Publishing to npm

  1. Bump the version in package.json (npm version patch|minor|major).
  2. Inspect the package contents: npm pack --dry-run.
  3. Log in: npm login.
  4. Publish: npm publish.

The name lit-components may be taken in the npm registry — check availability before publishing (npm view @fredlak/lit-components) or use a scoped name, e.g. @your-username/lit-components.

License

MIT

Keywords

litweb-componentscomponentsuipydmin