Skip to content

Commit

Permalink
add and document prop invalid (closes #47)
Browse files Browse the repository at this point in the history
  • Loading branch information
@janosh
janosh committed Mar 6, 2022
1 parent ba77f93 commit af009b5
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 31 deletions.
51 changes: 26 additions & 25 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,31 +95,32 @@ Full list of props/bindable variables for this component:
<div class="table">

<!-- prettier-ignore -->
| name | default | description |
| :--------------------- | :-------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `options` | required prop | Array of strings/numbers or `Option` objects that will be listed in the dropdown. See `src/lib/index.ts` for admissible fields. The `label` is the only mandatory one. It must also be unique. |
| `showOptions` | `false` | Bindable boolean that controls whether the options dropdown is visible. |
| `searchText` | `` | Text the user-entered to filter down on the list of options. Binds both ways, i.e. can also be used to set the input text. |
| `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. |
| `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. |
| `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. |
| `selectedLabels` | `[]` | Labels of currently selected options. |
| `selectedValues` | `[]` | Values of currently selected options. |
| `noOptionsMsg` | `'No matching options'` | What message to show if no options match the user-entered search string. |
| `disabled` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. |
| `disabledTitle` | `This field is disabled` | Tooltip text to display on hover when the component is in `disabled` state. |
| `placeholder` | `undefined` | String shown in the text input when no option is selected. |
| `input` | `undefined` | Handle to the `<input>` DOM node. |
| `id` | `undefined` | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component. |
| `name` | `id` | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. |
| `required` | `false` | Whether forms can be submitted without selecting any options. Aborts submission, is scrolled into view and shows help "Please fill out" message when true and user tries to submit with no options selected. |
| `autoScroll` | `true` | `false` disables keeping the active dropdown items in view when going up/down the list of options with arrow keys. |
| `allowUserOptions` | `false` | Whether users are allowed to enter values not in the dropdown list. `true` means add user-defined options to the selected list only, `'append'` means add to both options and selected. |
| `loading` | `false` | Whether the component should display a spinner to indicate it's in loading state. Use `<slot name='spinner'>` to specify a custom spinner. |
| `removeBtnTitle` | `'Remove'` | Title text to display when user hovers over button (cross icon) to remove selected option. |
| `removeAllTitle` | `'Remove all'` | Title text to display when user hovers over remove-all button. |
| `defaultDisabledTitle` | `'This option is disabled'` | Title text to display when user hovers over a disabled option. Each option can override this through its `disabledTitle` attribute. |
| `autocomplete` | `'off'` | Applied to the `<input>`. Specifies if browser is permitted to auto-fill this form field. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for other admissible values. |
| name | default | description |
| :--------------------- | :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `options` | required prop | Array of strings/numbers or `Option` objects that will be listed in the dropdown. See `src/lib/index.ts` for admissible fields. The `label` is the only mandatory one. It must also be unique. |
| `showOptions` | `false` | Bindable boolean that controls whether the options dropdown is visible. |
| `searchText` | `` | Text the user-entered to filter down on the list of options. Binds both ways, i.e. can also be used to set the input text. |
| `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. |
| `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. |
| `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. |
| `selectedLabels` | `[]` | Labels of currently selected options. |
| `selectedValues` | `[]` | Values of currently selected options. |
| `noOptionsMsg` | `'No matching options'` | What message to show if no options match the user-entered search string. |
| `disabled` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. |
| `disabledTitle` | `This field is disabled` | Tooltip text to display on hover when the component is in `disabled` state. |
| `placeholder` | `undefined` | String shown in the text input when no option is selected. |
| `input` | `undefined` | Handle to the `<input>` DOM node. |
| `id` | `undefined` | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component. |
| `name` | `id` | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. |
| `required` | `false` | Whether forms can be submitted without selecting any options. Aborts submission, is scrolled into view and shows help "Please fill out" message when true and user tries to submit with no options selected. |
| `autoScroll` | `true` | `false` disables keeping the active dropdown items in view when going up/down the list of options with arrow keys. |
| `allowUserOptions` | `false` | Whether users are allowed to enter values not in the dropdown list. `true` means add user-defined options to the selected list only, `'append'` means add to both options and selected. |
| `loading` | `false` | Whether the component should display a spinner to indicate it's in loading state. Use `<slot name='spinner'>` to specify a custom spinner. |
| `removeBtnTitle` | `'Remove'` | Title text to display when user hovers over button (cross icon) to remove selected option. |
| `removeAllTitle` | `'Remove all'` | Title text to display when user hovers over remove-all button. |
| `defaultDisabledTitle` | `'This option is disabled'` | Title text to display when user hovers over a disabled option. Each option can override this through its `disabledTitle` attribute. |
| `autocomplete` | `'off'` | Applied to the `<input>`. Specifies if browser is permitted to auto-fill this form field. See [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for other admissible values. |
| `invalid` | `false` | If `required=true` and user tries to submit but `selected = []` is empty, `invalid` is automatically set to `true` and CSS class `invalid` applied to the top-level `div.multiselect`. `invalid` class is removed again as soon as the user selects an option. `invalid` can also be controlled externally by binding to it `<MultiSelect bind:invalid />` and setting it to `true` based on outside events or custom validation. |

</div>

Expand Down
Loading

0 comments on commit af009b5

Please sign in to comment.