From 2de13515ac43d56a63ee0ed3092b01a146a689c4 Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Mon, 4 Apr 2022 19:02:44 +0930 Subject: [PATCH 01/19] feat(components): add SearchableSelect --- .../SearchableSelect/SearchableSelect.svelte | 86 +++++++++++++++++++ components/custom/SearchableSelect/index.js | 3 + components/custom/index.js | 3 +- index.mjs | 3 +- stories/SearchableSelect.stories.svelte | 39 +++++++++ 5 files changed, 132 insertions(+), 2 deletions(-) create mode 100644 components/custom/SearchableSelect/SearchableSelect.svelte create mode 100644 components/custom/SearchableSelect/index.js create mode 100644 stories/SearchableSelect.stories.svelte diff --git a/components/custom/SearchableSelect/SearchableSelect.svelte b/components/custom/SearchableSelect/SearchableSelect.svelte new file mode 100644 index 00000000..dfab7f6b --- /dev/null +++ b/components/custom/SearchableSelect/SearchableSelect.svelte @@ -0,0 +1,86 @@ + + + + + + + + {#each Object.keys(options) as option} + diff --git a/components/custom/SearchableSelect/index.js b/components/custom/SearchableSelect/index.js new file mode 100644 index 00000000..135121e2 --- /dev/null +++ b/components/custom/SearchableSelect/index.js @@ -0,0 +1,3 @@ +import SearchableSelect from './SearchableSelect.svelte' + +export default SearchableSelect \ No newline at end of file diff --git a/components/custom/index.js b/components/custom/index.js index fc20665f..e9552deb 100644 --- a/components/custom/index.js +++ b/components/custom/index.js @@ -1,5 +1,6 @@ import Badge from './Badge' import Form from './Form' import StaticChip from './StaticChip' +import SearchableSelect from './SearchableSelect' -export { Badge, Form, StaticChip } \ No newline at end of file +export { Badge, Form, SearchableSelect, StaticChip } \ No newline at end of file diff --git a/index.mjs b/index.mjs index a83f9cdd..9cd71269 100644 --- a/index.mjs +++ b/index.mjs @@ -27,7 +27,7 @@ import { setNotice, } from './components/mdc/index.js' -import { Badge, Form, StaticChip } from './components/custom/index.js' +import { Badge, Form, SearchableSelect, StaticChip } from './components/custom/index.js' export { actions, @@ -47,6 +47,7 @@ export { MoneyInput, Progress, Select, + SearchableSelect, Snackbar, TabBar, TextArea, diff --git a/stories/SearchableSelect.stories.svelte b/stories/SearchableSelect.stories.svelte new file mode 100644 index 00000000..4c814ad5 --- /dev/null +++ b/stories/SearchableSelect.stories.svelte @@ -0,0 +1,39 @@ + + + + + + + + + + + + From 817db0fc91a139b10415637d8938ac5257ed32a5 Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Tue, 5 Apr 2022 09:38:11 +0930 Subject: [PATCH 02/19] update choice in onChange in case consumer doesn't --- .../SearchableSelect/SearchableSelect.svelte | 14 +++++++++----- stories/SearchableSelect.stories.svelte | 12 +++++------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/components/custom/SearchableSelect/SearchableSelect.svelte b/components/custom/SearchableSelect/SearchableSelect.svelte index dfab7f6b..73f7b3d7 100644 --- a/components/custom/SearchableSelect/SearchableSelect.svelte +++ b/components/custom/SearchableSelect/SearchableSelect.svelte @@ -10,13 +10,19 @@ export let width = '232px' export let maxlength = 255 export let disabled = false +let element = {} + let randomId = generateRandomID('dataList-') $: internalChoice = choice const dispatch = createEventDispatcher() -const onChange = () => options[internalChoice] && dispatch('chosen', options[internalChoice]) +const onChange = () => { + options[internalChoice] && dispatch('chosen', options[internalChoice]) + choice = internalChoice + element.blur() +} +