FIREFOX USERS: View this blog post on the documentation website to get the viewable .webm videos.

One feature of commonly required in Web Applications is a select Component that can ingest a data structure and output a list of selectable options. Previously Kahi UI didn't have this feature, now it does and is fully styled!

Searching

Not only that. Just like DataTable, fuzzy search is also supported!

Multiple

And of course, multiple choices are allowed!

Want the user to only be able to select a maximum amount of choices? Sure!

Conclusion

There are many more features documented over at the DataSelect documentation. So check it out!

CHANGELOG

ALL CHANGES: v0.6.1...v0.6.2

• DataSelect

  • Added new Component! Similar to DataTable, allows you to provide a list of data structures to create a dropdown of selectable options.

  • <svelte:fragment slot="default" let:index={number} let:item={IDataSelectItem}> — Allows for overriding of the default display option text.

  • <DataSelect items={IDataSelectItem[]}> — Sets the options displayed to the user.

    • IDataSelectItem.disabled: boolean — Controls if the specific option is disabled.
    • IDataSelectItem.id: string — Controls the element ID assigned to the option's <input /> element.
    • IDataSelectItem.palette: "auto" | "inverse" | "accent" | "dark" | "light" | "alert" | "affirmative" | "informative" | "negative" — Alters the color palette of the inner <Check> or <Radio> Component.
    • IDataSelectItem.text: string — Controls the text displayed to the user for the option.
    • IDataSelectItem.value: string — Controls the form value associated with the option. If unset, IDataSelectItem.id will be used.

  • <DataSelect multiple={boolean}> — Controls whether multiple options can be selected by the user.

    • <DataSelect max={number}> — Controls how many multiple choices a user can select when enabled.

  • <DataSelect logic_name={string}> — Controls the form name that prefixes all options.

  • <DataSelect logic_state={string | string[]}> — Controls which options are selected.

  • <DataSelect searching={string}> — Controls the current searching filter in the inner TextInput value.

    • <DataSelect searching_algorithm={(item: IDataSelectItem, searching?: string) => boolean}> — Allows implementing of custom search filtering.

  • <DataSelect placeholder={string}> — Alters displayed text while closed or if no options are selected.

  • <DataSelect palette={"auto" | "inverse" | "accent" | "dark" | "light" | "alert" | "affirmative" | "informative" | "negative"}> — Alters the color palette of the inner TextInput Component.

  • <DataSelect sizing={"nano", "tiny", "small", "medium", "large", "huge", "massive", "${VIEWPORT}:${SIZE}"}>— Alters the sizing of the innerTextInput Component.

  • <DataSelect variation={"flush"}> — Alters to render the choices inline instead of a Popover.

• DataTable

  • <DataTable searching_algorithm> — Updated to provide <DataTable searching> instead of needing to bind to retrieve value.

    • <DataTable searching_algorithm={(item: IDataSelectItem) => boolean}> -> <DataTable searching_algorithm={(item: IDataSelectItem, searching?: string) => boolean}>

• DateTimeStamp

  • <DateTimeStamp timestamp={number}> — Added support to handle UNIX Epoch number timestamps, e.g. 1646210184506
  • <DateTimeStamp timestamp={string}> — Added support to handle UTC Instant string timestamps, e.g. 2022-03-02T08:28:58.891Z / 2020-01-23T17:04:36.491865121-08:00

• Popover

  • <Popover.Container variation="control"> — Activates the <Popover.Section> content when sibling content is focused.