Skip to content

v0.6.2 - Introducing DataSelect

Pre-release
Pre-release
Compare
Choose a tag to compare
@novacbn novacbn released this 02 Mar 10:57
· 10 commits to main since this release
v0.6.2
0f154ef

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!

kahi-ui-dataselect-preview.mp4

Searching

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

kahi-ui-dataselect-filter.mp4

Multiple

And of course, multiple choices are allowed!

kahi-ui-dataselect-multiple.mp4

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

kahi-ui-dataselect-max.mp4

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.
Assets 8
Loading