Simple Modal or Outlet
npm install smoo> Hold your horses!
>
> !Build status
> 
> 
``html
It works.
Got: {JSON.stringify(members)}
`
smoo lets you place any kind of markup or components inside a
,
it also brings to you many other useful components, you'll see below.Components
We have a
Fence component, i.e. a thing you need to guard your cows...$3
This is a
wrapper that handle various effects:- Allows you to subscribe to any connection status and block its content while loading...
- All focusable inputs found during
onMount(...) will be traped an cycled back and forth
- When rendered as a modal-overlay, it can be canceled with the ESC key or clicking outside
- It can setup autofocus on the first input-element found inside the inner wrapper (js only)> Before submitting HTML5 validation will run, if it's valid a
submit event will be triggered.
> The cancel event is fired when you click outside the modal, or press the ESC key to close the modal.Available props:
-
{id} — Used id for the inner element
- {class} — Used class for the inner element
- {loading} — Its presence will protect the UI with pointer-events:none
- {modal} — Its presence will render the inner in a modal-overlay
- {noform} — It disables the render, use the main slot instead
- {visible} — Its value is used to toggle the render of the entire custom-element
- {autofocus} — Its presence enables focus() on the first input-element foundAvailable slots:
-
before — Renders before the tag
- after — Renders after the tag> Add the
nofocus or data-nofocus attribute to any element to skip autofocus on it (useful for close-icons, etc.).$3
This is an
wrapper that handle various effects:- It is fully accessible through the keyboard, e.g.
- you can press ESC to clear search
- on items, press ESC to focus back to the input
- It allows you to customize the data-source used and the render options
- The search input fires their
input, focus and blur events, while the dropdown fires open and close events.> It uses _checkboxes_ or _radios_ to enable selection through the keyboard,
> once values are choosen a
change event is fired with the current selection.
> You can use CSS to hide those inputs and render the items by using :focus and :checked selectors.Available props:
-
{id} — Used id for the inner element
- {pk} — Property to identify each item from data list, default is id
- {keys} — Properties to filter-out when searching for values, default are ['name', 'value']
- {data} — Used data-source to retrieve items when searching, it must be an Array
- {value} — This is an Array of selected ids from the data-source, can be bound
- {class} — Used class for the inner element
- {label} — Property used to print a human-readable value from each rendered item
- {nofilter} — its presence will disable the filtering over the passed data-source
- {disabled} — It just disables the field, while disabled options are hidden
- {multiple} — Enable multiple selection of values (checkbox vs radio), disabled by default
- {autoclose} — Close the dropdown on click-selection, it should not work with multiple options, disabled by default
- {fallback} — This message is shown when no results are found while searching
- {placeholder} — Custom placeholder for the fieldAvailable slots:
-
before — Renders before the tag
- after — Renders before the tag
- item — Renders each value, use let:item to access its props
- empty — Renders when no values where found in the data-source> If you like, place an icon like
and it will be positioned inside the on its left.
> Later you can use CSS to customize this through the [role=search]` selector.