@chameleon-ds/multiselect NPM

Chameleon Multiselect

import { html, svg } from "lit-html";
import { withKnobs, text, boolean } from "@open-wc/demoing-storybook";
import "./chameleon-multiselect.js";

const options = [
  {
    value: "arch",
    label: "Gateway Arch",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/0/00/St_Louis_night_expblend_cropped.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
  {
    value: "union-station",
    label: "Union Station",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/St._Louis_Union_Station_%2817577826564%29.jpg/320px-St._Louis_Union_Station_%2817577826564%29.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
  {
    value: "scott-joplin-house",
    label: "Scott Joplin House",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Scott_Joplin_House.jpg/568px-Scott_Joplin_House.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
];

const searchIcon = svg`
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="feather feather-search"
    slot="icon"
  >
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
`;

export default {
  title: "Components|Form Elements/Multiselect",
  component: "chameleon-multiselect",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

Property Name	Type(s)	Default Value	Description
`name`	Boolean	`false`	The multiselect's form name
`options`	Array	`false`	An array of the possible options to be selected
`filteredOptions`	Array	`false`	An array of filtered options
`selectedOptions`	Array	`false`	An array of the selected options
`active`	Boolean	`false`	A Boolean attribute which, if present, displays the filtered options
`disabled`	Boolean	`false`	A Boolean attribute which is present if the input should be disabled
`readonly`	Boolean	`false`	A Boolean attribute which, if true, indicates that the multiselect cannot be edited
`required`	Boolean	`false`	A Boolean attribute which, if true, indicates the input is required
`invalid`	Boolean	`false`	A Boolean which, if true, indicates that the input is valid
`label`	String	`false`	The input's label
`placeholder`	String	`false`	The input's placeholder text
`instantSearch`	Boolean	`false`	When true, allows instant search functionality
`instantSearchValue`	String	`false`	The instant search text value
`loading`	Boolean	`false`	Whether or not multiselect is loading
`validationMessage`	String	`false`	The multiselect's error message

Examples

Default

export const Default = () => {
  const disabled = boolean("Disabled", false);
  const readonly = boolean("Read Only", false);
  const required = boolean("Required", false);
  const loading = boolean("Loading", false);
  const invalid = boolean("Invalid", false);
  const label = text("Label", "Landmarks");
  const placeholder = text("Placeholder", "Select an option...");
  const error = text("Error", "");

  return html`
    <chameleon-multiselect
      ?disabled="${disabled}"
      ?readonly="${readonly}"
      ?required="${required}"
      ?loading="${loading}"
      ?invalid="${invalid}"
      .label="${label}"
      .placeholder="${placeholder}"
      .options="${options}"
      .validationMessage="${error}"
    ></chameleon-multiselect>
  `;
};

Icon

export const Icon = () => html`
  <chameleon-multiselect
    label="Landmarks"
    placeholder="Select an option..."
    .options="${options}"
  >
    ${searchIcon}
  </chameleon-multiselect>
`;

Error State

export const ErrorState = () => html`
  <chameleon-multiselect
    label="Landmarks"
    placeholder="Select an option..."
    .options="${options}"
    ?invalid="${true}"
    validationMessage="Please select an option"
  >
    ${searchIcon}
  </chameleon-multiselect>
`;

@chameleon-ds/chip @chameleon-ds/loader lit-element

@infinitebrahmanuniverse/nolb-_cham @everything-registry/sub-chunk-165 @chameleon-ds/table

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago