diff --git a/.prettierrc b/.prettierrc index e23b0be753..ac8b0f391c 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,5 +4,5 @@ "singleQuote": false, "trailingComma": "es5", "plugins": ["prettier-plugin-svelte"], - "svelteSortOrder" : "scripts-markup-styles" + "svelteSortOrder" : "options-scripts-markup-styles" } \ No newline at end of file diff --git a/package.json b/package.json index f98624812f..171f9510f3 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "prettier-plugin-svelte": "^2.2.0", "rimraf": "^3.0.2", "rollup-plugin-replace": "^2.2.0", - "svelte": "^3.30.0" + "svelte": "^3.37.0" }, "scripts": { "bootstrap": "lerna link && lerna bootstrap", diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index a4bfd29c83..4bb592aa26 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -42,12 +42,14 @@ class="spectrum-ActionButton spectrum-ActionButton--size{size}" {disabled} on:longPress - on:click|preventDefault> + on:click|preventDefault +> {#if longPressable} {/if} @@ -56,7 +58,8 @@ class="spectrum-Icon spectrum-Icon--size{size}" focusable="false" aria-hidden="true" - aria-label={icon}> + aria-label={icon} + > {/if} diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index 6e2b63adbd..da4d405f02 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -23,13 +23,15 @@ class:active class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" {disabled} - on:click|preventDefault> + on:click|preventDefault +> {#if icon} {/if} diff --git a/packages/bbui/src/ButtonGroup/ButtonGroup.svelte b/packages/bbui/src/ButtonGroup/ButtonGroup.svelte index 51055363a2..f33f8566c3 100644 --- a/packages/bbui/src/ButtonGroup/ButtonGroup.svelte +++ b/packages/bbui/src/ButtonGroup/ButtonGroup.svelte @@ -1,15 +1,19 @@ -
- -
\ No newline at end of file +
+ +
diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte index 1f3e439c2a..c8d473e7c8 100644 --- a/packages/bbui/src/Form/Checkbox.svelte +++ b/packages/bbui/src/Form/Checkbox.svelte @@ -11,7 +11,7 @@ export let error = null const dispatch = createEventDispatcher() - const onChange = e => { + const onChange = (e) => { value = e.detail dispatch("change", e.detail) } diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte index 6b1e67a299..4926ef1f18 100644 --- a/packages/bbui/src/Form/Combobox.svelte +++ b/packages/bbui/src/Form/Combobox.svelte @@ -10,11 +10,11 @@ export let error = null export let placeholder = "Choose an option" export let options = [] - export let getOptionLabel = option => extractProperty(option, "label") - export let getOptionValue = option => extractProperty(option, "value") + export let getOptionLabel = (option) => extractProperty(option, "label") + export let getOptionValue = (option) => extractProperty(option, "value") const dispatch = createEventDispatcher() - const onChange = e => { + const onChange = (e) => { value = e.detail dispatch("change", e.detail) } @@ -35,5 +35,6 @@ {placeholder} {getOptionLabel} {getOptionValue} - on:change={onChange} /> + on:change={onChange} + /> diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte index bc9b9a9fc7..510a67a185 100644 --- a/packages/bbui/src/Form/Core/Checkbox.svelte +++ b/packages/bbui/src/Form/Core/Checkbox.svelte @@ -10,34 +10,38 @@ export let disabled = false const dispatch = createEventDispatcher() - const onChange = event => { + const onChange = (event) => { dispatch("change", event.target.checked) } diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte index 4329467bb0..1d1df810d9 100644 --- a/packages/bbui/src/Form/Core/Combobox.svelte +++ b/packages/bbui/src/Form/Core/Combobox.svelte @@ -11,8 +11,8 @@ export let disabled = false export let error = null export let options = [] - export let getOptionLabel = option => option - export let getOptionValue = option => option + export let getOptionLabel = (option) => option + export let getOptionValue = (option) => option const dispatch = createEventDispatcher() let open = false @@ -31,16 +31,16 @@ } // Render the label if the selected option is found, otherwise raw value - const selected = options.find(option => getOptionValue(option) === value) + const selected = options.find((option) => getOptionValue(option) === value) return selected ? getOptionLabel(selected) : value } - const selectOption = value => { + const selectOption = (value) => { dispatch("change", value) open = false } - const onChange = e => { + const onChange = (e) => { selectOption(e.target.value) } @@ -49,7 +49,8 @@
+ class:is-focused={open || focus} + > (focus = true)} @@ -57,18 +58,21 @@ on:change={onChange} {value} {placeholder} - class="spectrum-Textfield-input spectrum-InputGroup-input" /> + class="spectrum-Textfield-input spectrum-InputGroup-input" + />
@@ -76,7 +80,8 @@
(open = false)} />
+ class="spectrum-Popover spectrum-Popover--bottom is-open" + >
    {#if options && Array.isArray(options)} {#each options as option} @@ -86,13 +91,16 @@ role="option" aria-selected="true" tabindex="0" - on:click={() => selectOption(getOptionValue(option))}> - {getOptionLabel(option)} + on:click={() => selectOption(getOptionValue(option))} + > + {getOptionLabel(option)} diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte index a3a2fefb38..1b57e55b27 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker.svelte @@ -27,12 +27,12 @@ wrap: true, } - const handleChange = event => { + const handleChange = (event) => { const [dates] = event.detail dispatch("change", dates[0]) } - const clearDateOnBackspace = event => { + const clearDateOnBackspace = (event) => { if (["Backspace", "Clear", "Delete"].includes(event.key)) { dispatch("change", null) flatpickr.close() @@ -53,7 +53,7 @@ // We need to blur both because the focus styling does not get properly // applied. const els = document.querySelectorAll(`#${flatpickrId} input`) - els.forEach(el => el.blur()) + els.forEach((el) => el.blur()) } @@ -64,7 +64,8 @@ on:close={onClose} options={flatpickrOptions} on:change={handleChange} - element={`#${flatpickrId}`}> + element={`#${flatpickrId}`} +>
    + aria-haspopup="true" + >
    + class:is-invalid={!!error} + > {#if !!error} {/if} @@ -94,7 +98,8 @@ class="spectrum-Textfield-input spectrum-InputGroup-input" {placeholder} {id} - {value} /> + {value} + />
    diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte index e6addd4e42..77099b09a4 100644 --- a/packages/bbui/src/Form/Core/Dropzone.svelte +++ b/packages/bbui/src/Form/Core/Dropzone.svelte @@ -28,7 +28,7 @@ "bmp", "jfif", ] - const onChange = event => { + const onChange = (event) => { dispatch("change", event.target.checked) } @@ -42,7 +42,7 @@ async function processFileList(fileList) { if ( handleFileTooLarge && - Array.from(fileList).some(file => file.size >= fileSizeLimit) + Array.from(fileList).some((file) => file.size >= fileSizeLimit) ) { handleFileTooLarge(fileSizeLimit, value) return @@ -119,13 +119,15 @@
    0} - on:click={navigateLeft}> + on:click={navigateLeft} + >
    + on:click={navigateRight} + >
    File {selectedImageIdx + 1} of {fileCount}
    @@ -140,19 +142,22 @@ on:dragleave={handleDragLeave} on:dragenter={handleDragOver} on:drop={handleDrop} - class:is-dragged={fileDragged}> + class:is-dragged={fileDragged} + >
    + on:change={handleFile} + /> + viewBox="0 0 199 97.7" + > + d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66" + /> + d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" + /> + d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z" + /> + d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2" + /> + d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7" + /> + d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66" + /> + ry="2" + />

    + class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading" + > Drag and drop your file

    {#if !disabled}

    - + class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description" + > +
    from your computer

    diff --git a/packages/bbui/src/Form/Core/Multiselect.svelte b/packages/bbui/src/Form/Core/Multiselect.svelte index 97420fabad..46ec5d9157 100644 --- a/packages/bbui/src/Form/Core/Multiselect.svelte +++ b/packages/bbui/src/Form/Core/Multiselect.svelte @@ -8,14 +8,14 @@ export let disabled = false export let error = null export let options = [] - export let getOptionLabel = option => option - export let getOptionValue = option => option + export let getOptionLabel = (option) => option + export let getOptionValue = (option) => option const dispatch = createEventDispatcher() $: selectedLookupMap = getSelectedLookupMap(value) $: optionLookupMap = getOptionLookupMap(options) $: fieldText = getFieldText(value, optionLookupMap, placeholder) - $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true + $: isOptionSelected = (optionValue) => selectedLookupMap[optionValue] === true $: toggleOption = makeToggleOption(selectedLookupMap, value) const getFieldText = (value, map, placeholder) => { @@ -23,17 +23,17 @@ if (!map) { return "" } - const vals = value.map(option => map[option] || option).join(", ") + const vals = value.map((option) => map[option] || option).join(", ") return `(${value.length}) ${vals}` } else { return placeholder || "Choose some options" } } - const getSelectedLookupMap = value => { + const getSelectedLookupMap = (value) => { let map = {} if (value?.length) { - value.forEach(option => { + value.forEach((option) => { if (option) { map[option] = true } @@ -42,7 +42,7 @@ return map } - const getOptionLookupMap = options => { + const getOptionLookupMap = (options) => { let map = null if (options?.length) { map = {} @@ -57,9 +57,9 @@ } const makeToggleOption = (map, value) => { - return optionValue => { + return (optionValue) => { if (map[optionValue]) { - const filtered = value.filter(option => option !== optionValue) + const filtered = value.filter((option) => option !== optionValue) dispatch("change", filtered) } else { dispatch("change", [...value, optionValue]) @@ -78,4 +78,5 @@ {isOptionSelected} {getOptionLabel} {getOptionValue} - onSelectOption={toggleOption} /> + onSelectOption={toggleOption} +/> diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index 2f5606dcf1..3911eee306 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -15,13 +15,13 @@ export let options = [] export let isOptionSelected = () => false export let onSelectOption = () => {} - export let getOptionLabel = option => option - export let getOptionValue = option => option + export let getOptionLabel = (option) => option + export let getOptionValue = (option) => option export let open = false export let readonly = false const dispatch = createEventDispatcher() - const onClick = e => { + const onClick = (e) => { dispatch("click") if (readonly) { return @@ -37,7 +37,8 @@ class:is-invalid={!!error} class:is-open={open} aria-haspopup="listbox" - on:mousedown={onClick}> + on:mousedown={onClick} +> {fieldText} @@ -46,14 +47,16 @@ class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon" focusable="false" aria-hidden="true" - aria-label="Folder"> + aria-label="Folder" + > {/if} @@ -61,7 +64,8 @@
    (open = false)} transition:fly={{ y: -20, duration: 200 }} - class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"> + class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" + >
      {#if placeholderOption}
    • onSelectOption(null)}> + on:click={() => onSelectOption(null)} + > {placeholderOption}
      • @@ -88,13 +94,16 @@ role="option" aria-selected="true" tabindex="0" - on:click={() => onSelectOption(getOptionValue(option, idx))}> - {getOptionLabel(option, idx)} + on:click={() => onSelectOption(getOptionValue(option, idx))} + > + {getOptionLabel(option, idx)} diff --git a/packages/bbui/src/Form/Core/RadioGroup.svelte b/packages/bbui/src/Form/Core/RadioGroup.svelte index 385e456a8e..b29d39c017 100644 --- a/packages/bbui/src/Form/Core/RadioGroup.svelte +++ b/packages/bbui/src/Form/Core/RadioGroup.svelte @@ -8,11 +8,11 @@ export let options = [] export let error = null export let disabled = false - export let getOptionLabel = option => option - export let getOptionValue = option => option + export let getOptionLabel = (option) => option + export let getOptionValue = (option) => option const dispatch = createEventDispatcher() - const onChange = e => dispatch("change", e.target.value) + const onChange = (e) => dispatch("change", e.target.value)
      @@ -21,14 +21,16 @@
      + class:is-invalid={!!error} + > + {disabled} + />
      diff --git a/packages/bbui/src/Form/Core/Search.svelte b/packages/bbui/src/Form/Core/Search.svelte index 6855799e86..9ffba779e4 100644 --- a/packages/bbui/src/Form/Core/Search.svelte +++ b/packages/bbui/src/Form/Core/Search.svelte @@ -10,7 +10,7 @@ const dispatch = createEventDispatcher() let focus = false - const updateValue = value => { + const updateValue = (value) => { dispatch("change", value) } @@ -18,12 +18,12 @@ focus = true } - const onBlur = event => { + const onBlur = (event) => { focus = false updateValue(event.target.value) } - const updateValueOnEnter = event => { + const updateValueOnEnter = (event) => { if (event.key === "Enter") { updateValue(event.target.value) } @@ -34,11 +34,13 @@
      + class:is-disabled={disabled} + > + autocomplete="off" + />
      diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte index 58e1ccca5a..3249423feb 100644 --- a/packages/bbui/src/Form/Core/Select.svelte +++ b/packages/bbui/src/Form/Core/Select.svelte @@ -8,8 +8,8 @@ export let disabled = false export let error = null export let options = [] - export let getOptionLabel = option => option - export let getOptionValue = option => option + export let getOptionLabel = (option) => option + export let getOptionValue = (option) => option export let readonly = false const dispatch = createEventDispatcher() @@ -34,7 +34,7 @@ return index !== -1 ? getOptionLabel(options[index], index) : value } - const selectOption = value => { + const selectOption = (value) => { dispatch("change", value) open = false } @@ -51,7 +51,8 @@ {options} {getOptionLabel} {getOptionValue} - isPlaceholder={value == null || value === ''} + isPlaceholder={value == null || value === ""} placeholderOption={placeholder} - isOptionSelected={option => option === value} - onSelectOption={selectOption} /> + isOptionSelected={(option) => option === value} + onSelectOption={selectOption} +/> diff --git a/packages/bbui/src/Form/Core/Switch.svelte b/packages/bbui/src/Form/Core/Switch.svelte index 520b8ebff1..a4df7547c6 100644 --- a/packages/bbui/src/Form/Core/Switch.svelte +++ b/packages/bbui/src/Form/Core/Switch.svelte @@ -9,7 +9,7 @@ export let disabled = false const dispatch = createEventDispatcher() - const onChange = event => { + const onChange = (event) => { dispatch("change", event.target.checked) } @@ -21,7 +21,8 @@ on:change={onChange} {id} type="checkbox" - class="spectrum-Switch-input" /> + class="spectrum-Switch-input" + />
      diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte index 3903c37b28..ae89efc151 100644 --- a/packages/bbui/src/Form/Core/TextArea.svelte +++ b/packages/bbui/src/Form/Core/TextArea.svelte @@ -15,7 +15,7 @@ let focus = false let textarea const dispatch = createEventDispatcher() - const onChange = event => { + const onChange = (event) => { dispatch("change", event.target.value) focus = false } @@ -25,23 +25,28 @@ class="spectrum-Textfield spectrum-Textfield--multiline" class:is-invalid={!!error} class:is-disabled={disabled} - class:is-focused={focus}> + class:is-focused={focus} +> {#if error} {/if} + on:blur={onChange} + > + {value || ""} +
    - \ No newline at end of file + + + diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte index bea421fd07..e07dc28ccf 100644 --- a/packages/bbui/src/Popover/Popover.svelte +++ b/packages/bbui/src/Popover/Popover.svelte @@ -37,7 +37,8 @@ use:clickOutside={hide} on:keydown={handleEscape} class="spectrum-Popover is-open" - role="presentation"> + role="presentation" + >
    diff --git a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte index ba1dc10965..c3c0fb39d6 100644 --- a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte +++ b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte @@ -1,29 +1,33 @@ -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    -
    -
    -
    -
    +
    +
    +
    +
    - +
    diff --git a/packages/bbui/src/SideNavigation/Item.svelte b/packages/bbui/src/SideNavigation/Item.svelte index 17b83d1605..75440796b5 100644 --- a/packages/bbui/src/SideNavigation/Item.svelte +++ b/packages/bbui/src/SideNavigation/Item.svelte @@ -1,30 +1,44 @@ -
  • - {#if heading} - +
  • + {#if heading} + + {/if} + + {#if icon} + {/if} - - {#if icon} - - {/if} - - - {#if multilevel && $$slots.subnav} -
      - -
    - {/if} -
    • \ No newline at end of file + + + {#if multilevel && $$slots.subnav} +
      + +
    + {/if} + diff --git a/packages/bbui/src/SideNavigation/Navigation.svelte b/packages/bbui/src/SideNavigation/Navigation.svelte index 1400f0a508..d4d090ec1f 100644 --- a/packages/bbui/src/SideNavigation/Navigation.svelte +++ b/packages/bbui/src/SideNavigation/Navigation.svelte @@ -1,12 +1,12 @@ \ No newline at end of file + diff --git a/packages/bbui/src/Table/AttachmentRenderer.svelte b/packages/bbui/src/Table/AttachmentRenderer.svelte index ab9760a980..b0c5815641 100644 --- a/packages/bbui/src/Table/AttachmentRenderer.svelte +++ b/packages/bbui/src/Table/AttachmentRenderer.svelte @@ -6,7 +6,7 @@ $: leftover = (value?.length ?? 0) - attachments.length const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"] - const isImage = extension => { + const isImage = (extension) => { return imageExtensions.includes(extension?.toLowerCase()) } diff --git a/packages/bbui/src/Table/BooleanRenderer.svelte b/packages/bbui/src/Table/BooleanRenderer.svelte index a71e28cb91..4e1aa3b4e1 100644 --- a/packages/bbui/src/Table/BooleanRenderer.svelte +++ b/packages/bbui/src/Table/BooleanRenderer.svelte @@ -5,24 +5,28 @@