Skip to content

Commit b54d156

Browse files
janoshjanosh
committed
apply id prop to <input> insted of outer div (closes #25)
1 parent 6ad44b8 commit b54d156

File tree

5 files changed

+33
-32
lines changed

5 files changed

+33
-32
lines changed

Diff for: ‎.github/workflows/publish.yml

+4-13
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,13 @@ jobs:
1010
runs-on: ubuntu-latest
1111

1212
steps:
13-
- name: Checkout repo
13+
- name: Check out repo
1414
uses: actions/checkout@v2
1515

16-
- name: Setup node
17-
uses: actions/setup-node@v2
18-
with:
19-
node-version: 17
20-
21-
- name: Install dependencies
22-
run: yarn
23-
24-
- name: Build package
25-
run: yarn package
26-
27-
- name: Publish package
16+
- name: Build and publish package
2817
run: |
18+
yarn
19+
yarn package
2920
yarn publish package
3021
env:
3122
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

Diff for: ‎readme.md

+16-14
Original file line numberDiff line numberDiff line change
@@ -88,20 +88,20 @@ Full list of props/bindable variables for this component:
8888
<div class="table">
8989

9090
<!-- prettier-ignore -->
91-
| name | default | description |
92-
| :--------------- | :--------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
93-
| `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. |
94-
| `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. |
95-
| `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. |
96-
| `maxSelectMsg` | ``(current: number, max: number) => `${current}/${max}` `` | Function that returns a string informing the user how many of the maximum allowed options they have currently selected. Return empty string to disable, i.e. `() => ''`. |
97-
| `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. |
98-
| `selectedLabels` | `[]` | Labels of currently selected options. |
99-
| `selectedValues` | `[]` | Values of currently selected options. |
100-
| `readonly` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. |
101-
| `placeholder` | `undefined` | String shown in the text input when no option is selected. |
102-
| `input` | `undefined` | Handle to the `<input>` DOM node. |
103-
| `name` | `undefined` | Passed to the `<input>` for associating HTML form `<label>`s with this component. E.g. clicking a `<label>` with same name will focus this component. |
104-
| `id` | `undefined` | Applied to the top-level `<div>` e.g. for `document.getElementById()`. |
91+
| name | default | description |
92+
| :--------------- | :--------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
93+
| `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. |
94+
| `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. |
95+
| `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. |
96+
| `maxSelectMsg` | ``(current: number, max: number) => `${current}/${max}` `` | Function that returns a string informing the user how many of the maximum allowed options they have currently selected. Return empty string to disable, i.e. `() => ''`. |
97+
| `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. |
98+
| `selectedLabels` | `[]` | Labels of currently selected options. |
99+
| `selectedValues` | `[]` | Values of currently selected options. |
100+
| `readonly` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. |
101+
| `placeholder` | `undefined` | String shown in the text input when no option is selected. |
102+
| `input` | `undefined` | Handle to the `<input>` DOM node. |
103+
| `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. |
104+
| `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>`. |
105105

106106
</div>
107107

@@ -201,6 +201,8 @@ If you only want to make small adjustments, you can pass the following CSS varia
201201
- `height: var(--sms-input-height, 2em)`: Input height.
202202
- `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when focused. Falls back to `--sms-active-color` if not set which in turn falls back on `cornflowerblue`.
203203
- `background: var(--sms-readonly-bg, lightgray)`: Background when in readonly state.
204+
- `div.multiselect.open`:
205+
- `z-index: var(--sms-open-z-index, 4)`: Useful to ensure the dropdown list of options is displayed on top of other page elements of increased `z-index`.
204206
- `div.multiselect input`
205207
- `color: var(--sms-text-color, inherit)`: Input text color.
206208
- `ul.selected > li`:

Diff for: ‎src/components/Confetti.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { fade } from 'svelte/transition'
44
55
export let speed = 0.4
6-
export let nItems = 100
6+
export let nItems = 50
77
88
const emojis = [`🥳`, `🎉`, `✨`]
99

Diff for: ‎src/global.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
/// <reference types="@sveltejs/kit" />
2+
/// <reference types="mdsvex/globals" />

Diff for: ‎src/lib/MultiSelect.svelte

+11-4
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
export let options: ProtoOption[]
1616
export let input: HTMLInputElement | null = null
1717
export let placeholder: string | undefined = undefined
18-
export let name: string | undefined = undefined
1918
export let id: string | undefined = undefined
19+
export let name: string | undefined = id
2020
export let noOptionsMsg = `No matching options`
2121
export let activeOption: Option | null = null
2222
@@ -214,11 +214,10 @@
214214
<!-- z-index: 2 when showOptions is true ensures the ul.selected of one <MultiSelect />
215215
display above those of another following shortly after it -->
216216
<div
217-
{id}
218217
class="multiselect {outerDivClass}"
219218
class:readonly
220219
class:single={maxSelect == 1}
221-
style={showOptions ? `z-index: 2;` : undefined}
220+
class:open={showOptions}
222221
on:mouseup|stopPropagation={() => setOptionsVisible(true)}
223222
use:onClickOutside={() => setOptionsVisible(false)}
224223
use:onClickOutside={() => dispatch(`blur`)}
@@ -249,6 +248,7 @@ display above those of another following shortly after it -->
249248
on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
250249
on:keydown={handleKeydown}
251250
on:focus={() => setOptionsVisible(true)}
251+
{id}
252252
{name}
253253
placeholder={selectedLabels.length ? `` : placeholder}
254254
/>
@@ -298,7 +298,7 @@ display above those of another following shortly after it -->
298298
</slot>
299299
</li>
300300
{:else}
301-
{noOptionsMsg}
301+
<span>{noOptionsMsg}</span>
302302
{/each}
303303
</ul>
304304
{/key}
@@ -318,6 +318,9 @@ display above those of another following shortly after it -->
318318
cursor: text;
319319
padding: 0 3pt;
320320
}
321+
:where(div.multiselect.open) {
322+
z-index: var(--sms-open-z-index, 4);
323+
}
321324
:where(div.multiselect:focus-within) {
322325
border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
323326
}
@@ -397,6 +400,10 @@ display above those of another following shortly after it -->
397400
padding: 3pt 2ex;
398401
cursor: pointer;
399402
}
403+
/* for noOptionsMsg */
404+
:where(ul.options span) {
405+
padding: 3pt 2ex;
406+
}
400407
:where(ul.options li.selected) {
401408
border-left: var(
402409
--sms-li-selected-border-left,

0 commit comments

Comments
 (0)