Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pateketrueke/smoo
Simple Modal or Outlet
https://github.com/pateketrueke/smoo
Last synced: 10 days ago
JSON representation
Simple Modal or Outlet
- Host: GitHub
- URL: https://github.com/pateketrueke/smoo
- Owner: pateketrueke
- Created: 2021-05-24T02:42:11.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-17T21:48:38.000Z (over 2 years ago)
- Last Synced: 2024-10-29T11:24:12.236Z (about 2 months ago)
- Language: Svelte
- Homepage: https://svelte.dev/repl/2464b3414dbf4c58850f957776fafda9?version=3.38.2
- Size: 1.31 MB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> Hold your horses!
>
> 
> [](http://badge.fury.io/js/smoo)
> [](https://snyk.io/test/npm/smoo)
```html
import { Fence, Search } from 'smoo';
let users = [
{ id: 1, name: 'Juanito Hace', value: '[email protected]' },
{ id: 2, name: 'Carlangas Marca', value: '[email protected]' },
];
let members = [];
let visible = false;
function open() {
visible = true;
}
function close() {
visible = false;
}
It works.
Got: {JSON.stringify(members)}
Open modal
```
## How it works?
`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...
### ``
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 found
Available 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.).
### ``
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 `` field
Available 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.