# lit-directive-switch-part

> Lit HTML directive for switch content part in your template

Latest version **0.0.5** (published 2020-12-27) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install lit-directive-switch-part
pnpm add lit-directive-switch-part
yarn add lit-directive-switch-part
bun add lit-directive-switch-part
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2020-12-27 |
| First published | 2020-12-26 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jimmy Collazos |
| Maintainers | jimmy-collazos |
| Keywords | lit-html, lit, webcomponents, customelements, lit-element, template, switch, switch-part |

## Links

- npm: https://www.npmjs.com/package/lit-directive-switch-part
- Repository: https://github.com/jimmy-collazos/lit-directive-switch-part
- Homepage: https://github.com/jimmy-collazos/lit-directive-switch-part#README
- Issues: https://github.com/jimmy-collazos/lit-directive-switch-part/issues
- npm.io page: https://npm.io/package/lit-directive-switch-part

## Recent versions

- 0.0.5 (latest) — 2020-12-27
- 0.0.4 — 2020-12-27
- 0.0.3 — 2020-12-26
- 0.0.2 — 2020-12-26
- 0.0.1 — 2020-12-26

## README

![Switch Part](./header.webp)
<sup>_Social Media Photo by [pure julia](https://unsplash.com/@purejulia) on [Unsplash](https://unsplash.com/photos/HH-iKI0veVI)_</sup>

# Switch Part
<p align="center">
  <img alt="Export format: ESM" src="https://img.shields.io/badge/fomat-esm-yellowgreen" />
  <img alt="Distribution: Npm, Unpackage" src="https://img.shields.io/badge/%F0%9F%93%A6-npm%20unpk-yellowgreen" />
  <img alt="License: GPL 3.0" src="https://img.shields.io/badge/GPL 3.0-license-yellowgreen" />
</p>

This is a directive for [lit-html](https://lit-html.polymer-project.org/) for switch [parts](https://lit-html.polymer-project.org/api/interfaces/_lit_html_.part.html) of your template. Change any part of your template without re-rendering.

## Installation

Install from [NPM](https://www.npmjs.com/package/lit-directive-switch-part) or use from [Unpkg](https://unpkg.com/lit-directive-switch-part) CDN

**Npm**
```sh
npm install --save lit-directive-switch-part
```

**Unpkg**
```javascript
import {switchPart} from 'https://unpkg.com/lit-directive-switch-part?module'
```

## # switchPart(store, options)

### _Arguments_

* store: Key value store. The Value can by a function for a lazy rendering; the function recibe previus key used. If cache is enabled, the function is called once and cache result for next setter.
* options:
  * default: Default key for first rendering. Default value is "default"
  * cache: Enable/Disable cache for lazy rendering. Default value is "true"
  * resolver(store, key): Resolver function

### API

#### case(key)

Switch to another content associated to key.

#### clear()

Set empty content in content part.

### _Common example_

```javascript
import {render, html} from 'lit-html'
import {switchPart} from 'lit-directive-switch-part';

const content = switchPart({
  a: html`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
  b: html`Ut tempor tellus at nibh blandit rutrum.`,
  c: html`Nam vitae diam consequat, tristique lectus sed, ultricies erat.`
}, {default: 'a'});

render(html`
  <h1>Sw</h1>
  <ul>
    <li><button type="button" @click=${_ => content.case('a')}>Lorem</buttom></li>
    <li><button type="button" @click=${_ => content.case('b')}>Ut</buttom></li>
    <li><button type="button" @click=${_ => content.case('c')}>Nam</buttom></li>
    <li><button type="button" @click=${_ => content.clear()}>Clear</buttom></li>
  </ul>
  <hr>
  ${tab}
  `, document.querySelector('#mainbox'));
```

### _Lazy render example_

```javascript
import {render, html} from 'lit-html'
import {switchPart} from 'lit-directive-switch-part';

const content = switchPart({
  a: () => html`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`,
  b: () => html`Ut tempor tellus at nibh blandit rutrum.`,
  c: () => html`Nam vitae diam consequat, tristique lectus sed, ultricies erat.`
}, {default: 'a', cache: true});

render(html`
  <h1>Sw</h1>
  <ul>
    <li><button type="button" @click=${_ => content.case('a')}>Lorem</buttom></li>
    <li><button type="button" @click=${_ => content.case('b')}>Ut</buttom></li>
    <li><button type="button" @click=${_ => content.case('c')}>Nam</buttom></li>
    <li><button type="button" @click=${_ => content.clear()}>Clear</buttom></li>
  </ul>
  <hr>
  ${tab}
  `, document.querySelector('#mainbox'));
```

---
_Source: https://npm.io/package/lit-directive-switch-part · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._