# ejp-cascade-select

> A cascading group of select components.

Latest version **1.0.3** (published 2021-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install ejp-cascade-select
pnpm add ejp-cascade-select
yarn add ejp-cascade-select
bun add ejp-cascade-select
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-07-11 |
| First published | 2021-07-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 48.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eric Pederson |
| Maintainers | ericjohnpederson |

## Links

- npm: https://www.npmjs.com/package/ejp-cascade-select
- Repository: https://github.com/QuiWorks/cascade-select
- Issues: https://github.com/QuiWorks/cascade-select/issues
- npm.io page: https://npm.io/package/ejp-cascade-select

## Dependencies (5)

- [lit-html](https://npm.io/package/lit-html.md) ^1.0.0
- [lit-element](https://npm.io/package/lit-element.md) ^2.0.1
- [@polymer/iron-ajax](https://npm.io/package/@polymer/iron-ajax.md) ^3.0.1
- [@polymer/iron-form](https://npm.io/package/@polymer/iron-form.md) ^3.0.1
- [@polymer/paper-spinner](https://npm.io/package/@polymer/paper-spinner.md) ^3.0.2

## Recent versions

- 1.0.3 (latest) — 2021-07-11
- 1.0.2 — 2021-07-11
- 1.0.1 — 2021-07-11
- 1.0.0 — 2021-07-11

## README

# EJP Cascading Select

A suite of components that can be used to create a cascading group of select inputs in which
the options for next list depend on the previous list's selected value.

The base functionality of any cascade component implementation is to throw events.
The cascade-ajax is used to handle request events by making XHR requests to a server.
The cascade-form is used to handle submission events by submitting an HTML form.

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i
```

## Usage
```html
<script type="module">
  import 'cascade-select/cascade-form.js';
  import 'cascade-select/cascade-ajax.js';
  import 'cascade-select/cascade-select.js';
  import 'cascade-select/cascade-combo-box.js';
</script>

<cascade-form action="http://localhost:8001/" method="POST">
  <cascade-ajax url="http://localhost:8001/">
    <cascade-select optional="rideType" class="flex-column">
      <input type="hidden" name="baseUrl" value="/dirt" />
      <select name="year" class="custom-select"></select>
      <select name="make" class="custom-select"></select>
      <select name="rideType" class="custom-select"></select>
      <select name="color" class="custom-select">
        <option value="blue">blue</option>
      </select>
      <select name="model" class="custom-select"></select>
    </cascade-select>
  </cascade-ajax>
</cascade-form>


<cascade-form action="http://localhost:8001/" method="POST">
  <cascade-ajax url="http://localhost:8001/">
    <cascade-combo-box class="flex-row" action="http://localhost:8001/" method="POST">
      <input type="hidden" name="baseUrl" value="/snow" />
      <vaadin-combo-box name="year" item-label-path="name"></vaadin-combo-box>
      <vaadin-combo-box name="make" item-label-path="name"></vaadin-combo-box>
      <vaadin-combo-box name="rideType" item-label-path="name"></vaadin-combo-box>
      <vaadin-combo-box name="color" item-label-path="name" items='[{"name": "blue", "value": "blue"}]'></vaadin-combo-box>
      <vaadin-combo-box name="model" item-label-path="name"></vaadin-combo-box>
    </cascade-combo-box>
  </cascade-ajax>
</cascade-form>
```

## Start the development server.
```bash
npm run start
```

## Run the unit tests.
```bash
npm run test
```

---
_Source: https://npm.io/package/ejp-cascade-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._