From c010eeb31406633afe5b805ccb3b330dfd22caca Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 4 May 2021 11:04:42 +0100 Subject: [PATCH 1/3] Fix prettier and fix crash when using certain views as data sources --- .prettierrc | 2 +- package.json | 2 +- .../bbui/src/ActionButton/ActionButton.svelte | 9 +- packages/bbui/src/Button/Button.svelte | 6 +- .../bbui/src/ButtonGroup/ButtonGroup.svelte | 26 +-- packages/bbui/src/Form/Checkbox.svelte | 2 +- packages/bbui/src/Form/Combobox.svelte | 9 +- packages/bbui/src/Form/Core/Checkbox.svelte | 16 +- packages/bbui/src/Form/Core/Combobox.svelte | 36 ++-- packages/bbui/src/Form/Core/DatePicker.svelte | 27 +-- packages/bbui/src/Form/Core/Dropzone.svelte | 50 ++++-- .../bbui/src/Form/Core/Multiselect.svelte | 21 +-- packages/bbui/src/Form/Core/Picker.svelte | 35 ++-- packages/bbui/src/Form/Core/RadioGroup.svelte | 12 +- packages/bbui/src/Form/Core/Search.svelte | 27 +-- packages/bbui/src/Form/Core/Select.svelte | 13 +- packages/bbui/src/Form/Core/Switch.svelte | 5 +- packages/bbui/src/Form/Core/TextArea.svelte | 15 +- packages/bbui/src/Form/Core/TextField.svelte | 19 ++- packages/bbui/src/Form/DatePicker.svelte | 5 +- packages/bbui/src/Form/Dropzone.svelte | 5 +- packages/bbui/src/Form/Field.svelte | 2 +- packages/bbui/src/Form/FieldLabel.svelte | 5 +- packages/bbui/src/Form/Input.svelte | 5 +- packages/bbui/src/Form/Multiselect.svelte | 9 +- packages/bbui/src/Form/RadioGroup.svelte | 9 +- packages/bbui/src/Form/Search.svelte | 5 +- packages/bbui/src/Form/Select.svelte | 9 +- packages/bbui/src/Form/TextArea.svelte | 5 +- packages/bbui/src/Form/Toggle.svelte | 2 +- packages/bbui/src/Link/Link.svelte | 3 +- packages/bbui/src/Menu/Menu.svelte | 6 +- packages/bbui/src/Menu/Section.svelte | 13 +- packages/bbui/src/Menu/Separator.svelte | 2 +- packages/bbui/src/Modal/CustomContent.svelte | 2 +- packages/bbui/src/Modal/Modal.svelte | 6 +- packages/bbui/src/Modal/ModalContent.svelte | 12 +- packages/bbui/src/Modal/QuizModal.svelte | 3 +- .../Notification/NotificationDisplay.svelte | 70 ++++---- packages/bbui/src/Popover/Popover.svelte | 3 +- .../src/ProgressCircle/ProgressCircle.svelte | 44 ++--- packages/bbui/src/SideNavigation/Item.svelte | 66 +++++--- .../bbui/src/SideNavigation/Navigation.svelte | 10 +- .../bbui/src/Table/AttachmentRenderer.svelte | 2 +- .../bbui/src/Table/BooleanRenderer.svelte | 12 +- packages/bbui/src/Table/CellRenderer.svelte | 4 +- .../bbui/src/Table/DateTimeRenderer.svelte | 2 +- .../src/Table/RelationshipRenderer.svelte | 2 +- packages/bbui/src/Table/Table.svelte | 80 ++++++--- packages/bbui/src/Tabs/Tab.svelte | 6 +- packages/bbui/src/Tabs/Tabs.svelte | 15 +- packages/bbui/src/Tags/Tag.svelte | 32 ++-- packages/bbui/src/Tags/Tags.svelte | 6 +- packages/bbui/src/TreeView/Item.svelte | 60 ++++--- packages/bbui/src/TreeView/Tree.svelte | 19 ++- packages/builder/package.json | 2 +- packages/builder/src/App.svelte | 4 +- .../builder/src/builderStore/dataBinding.js | 23 ++- .../AutomationBuilder.svelte | 2 +- .../AutomationBuilder/BlockList.svelte | 23 +-- .../AutomationBuilder/FlowChart/Arrow.svelte | 6 +- .../FlowChart/AutomationBlockTagline.svelte | 6 +- .../FlowChart/FlowChart.svelte | 3 +- .../FlowChart/FlowItem.svelte | 19 ++- .../CreateAutomationModal.svelte | 6 +- .../SetupPanel/AutomationBlockSetup.svelte | 35 ++-- .../automation/SetupPanel/RowSelector.svelte | 17 +- .../automation/SetupPanel/SchemaSetup.svelte | 17 +- .../SetupPanel/TableSelector.svelte | 5 +- .../backend/DataTable/DataTable.svelte | 10 +- .../DataTable/RelationshipDataTable.svelte | 4 +- .../backend/DataTable/RowFieldControl.svelte | 18 +- .../backend/DataTable/ViewDataTable.svelte | 7 +- .../DataTable/buttons/CalculateButton.svelte | 3 +- .../DataTable/buttons/DeleteRowsButton.svelte | 5 +- .../DataTable/buttons/FilterButton.svelte | 3 +- .../DataTable/buttons/GroupByButton.svelte | 3 +- .../buttons/ManageAccessButton.svelte | 3 +- .../backend/DataTable/cells/RoleCell.svelte | 2 +- .../DataTable/modals/CalculateModal.svelte | 10 +- .../DataTable/modals/CreateEditColumn.svelte | 78 +++++---- .../DataTable/modals/CreateEditRow.svelte | 9 +- .../DataTable/modals/CreateEditUser.svelte | 40 +++-- .../DataTable/modals/CreateViewModal.svelte | 5 +- .../backend/DataTable/modals/EditRoles.svelte | 35 ++-- .../DataTable/modals/ExportModal.svelte | 5 +- .../DataTable/modals/GroupByModal.svelte | 2 +- .../DatasourceNavigator/icons/Airtable.svelte | 15 +- .../DatasourceNavigator/icons/ArangoDB.svelte | 21 ++- .../DatasourceNavigator/icons/CouchDB.svelte | 6 +- .../DatasourceNavigator/icons/DynamoDB.svelte | 24 ++- .../icons/Elasticsearch.svelte | 21 ++- .../DatasourceNavigator/icons/MongoDB.svelte | 24 ++- .../DatasourceNavigator/icons/MySQL.svelte | 12 +- .../DatasourceNavigator/icons/Postgres.svelte | 18 +- .../DatasourceNavigator/icons/Rest.svelte | 9 +- .../DatasourceNavigator/icons/S3.svelte | 39 +++-- .../icons/SQLServer.svelte | 24 ++- .../modals/CreateDatasourceModal.svelte | 10 +- .../backend/TableNavigator/ListItem.svelte | 3 +- .../TableNavigator/TableDataImport.svelte | 28 +-- .../TableNavigator/TableNavigator.svelte | 11 +- .../modals/CreateTableModal.svelte | 17 +- .../popovers/EditViewPopover.svelte | 3 +- .../common/DrawerBindableInput.svelte | 14 +- .../src/components/common/Dropzone.svelte | 8 +- .../src/components/common/ErrorsBox.svelte | 2 +- .../src/components/common/Icons/Add.svelte | 3 +- .../src/components/common/Icons/Apps.svelte | 6 +- .../components/common/Icons/ArrowDown.svelte | 6 +- .../src/components/common/Icons/Bug.svelte | 6 +- .../src/components/common/Icons/Check.svelte | 6 +- .../common/Icons/ChevronDown.svelte | 6 +- .../components/common/Icons/ChevronUp.svelte | 6 +- .../src/components/common/Icons/Close.svelte | 6 +- .../common/Icons/CloseCircle.svelte | 6 +- .../components/common/Icons/Community.svelte | 6 +- .../common/Icons/Contribution.svelte | 6 +- .../src/components/common/Icons/Copy.svelte | 6 +- .../common/Icons/Documentation.svelte | 6 +- .../components/common/Icons/DownArrow.svelte | 3 +- .../src/components/common/Icons/Email.svelte | 6 +- .../src/components/common/Icons/Events.svelte | 6 +- .../components/common/Icons/Feedback.svelte | 6 +- .../src/components/common/Icons/Grid.svelte | 6 +- .../components/common/Icons/Hosting.svelte | 6 +- .../src/components/common/Icons/Image.svelte | 6 +- .../src/components/common/Icons/Info.svelte | 3 +- .../src/components/common/Icons/Input.svelte | 6 +- .../components/common/Icons/JavaScript.svelte | 9 +- .../src/components/common/Icons/Layout.svelte | 6 +- .../src/components/common/Icons/More.svelte | 6 +- .../src/components/common/Icons/Paint.svelte | 6 +- .../src/components/common/Icons/Pencil.svelte | 6 +- .../components/common/Icons/Preview.svelte | 6 +- .../components/common/Icons/Settings.svelte | 6 +- .../src/components/common/Icons/Shape.svelte | 6 +- .../components/common/Icons/Terminal.svelte | 6 +- .../components/common/Icons/Tutorials.svelte | 6 +- .../components/common/Icons/Twitter.svelte | 6 +- .../components/common/Icons/Updates.svelte | 6 +- .../components/common/Icons/XCircle.svelte | 6 +- .../common/LinkedRowSelector.svelte | 36 ++-- .../src/components/common/ValuesList.svelte | 2 +- .../CreateWebhookDeploymentModal.svelte | 8 +- .../deploy/DeploymentHistory.svelte | 16 +- .../AppPreview/ComponentSelectionList.svelte | 10 +- .../ComponentTree.svelte | 26 ++- .../ComponentNavigationTree/index.svelte | 2 +- .../NavigationPanel/NewScreenModal.svelte | 21 ++- .../PropertiesPanel/BindingPanel.svelte | 99 ++++++----- .../design/PropertiesPanel/CategoryTab.svelte | 5 +- .../design/PropertiesPanel/DesignView.svelte | 22 ++- .../PropertiesPanel/PropertiesPanel.svelte | 8 +- .../PropertyControls/ColorPicker.svelte | 6 +- .../DataProviderSelect.svelte | 7 +- .../PropertyControls/DataSourceSelect.svelte | 42 +++-- .../EventsEditor/EventPropertyControl.svelte | 6 +- .../EventsEditor/actions/DeleteRow.svelte | 11 +- .../EventsEditor/actions/LogIn.svelte | 10 +- .../EventsEditor/actions/NavigateTo.svelte | 5 +- .../actions/TriggerAutomation.svelte | 25 +-- .../EventsEditor/actions/ValidateForm.svelte | 5 +- .../PropertyControls/FieldSelect.svelte | 82 ++++----- .../FlatButtonGroup/FlatButtonGroup.svelte | 13 +- .../PropertyControls/FormFieldSelect.svelte | 6 +- .../IconSelect/IconSelect.svelte | 20 +-- .../PropertyControls/LayoutSelect.svelte | 5 +- .../PropertyControls/MultiFieldSelect.svelte | 4 +- .../PropertyControls/PropertyControl.svelte | 24 ++- .../PropertyControls/PropertyGroup.svelte | 13 +- .../PropertyControls/RoleSelect.svelte | 5 +- .../components/feedback/FeedbackIframe.svelte | 2 +- .../src/components/integration/index.svelte | 6 +- .../src/components/login/LoginForm.svelte | 3 +- .../components/settings/Integration.svelte | 2 +- .../src/components/settings/Link.svelte | 3 +- .../components/settings/SettingsModal.svelte | 3 +- .../components/settings/ThemeEditor.svelte | 3 +- .../settings/ThemeEditorDropdown.svelte | 3 +- .../components/settings/tabs/APIKeys.svelte | 5 +- .../settings/tabs/DangerZone.svelte | 13 +- .../components/settings/tabs/General.svelte | 27 ++- .../src/components/start/Indicator.svelte | 6 +- .../pages/builder/[application]/_reset.svelte | 23 ++- .../automate/[automation]/_layout.svelte | 2 +- .../builder/[application]/data/_layout.svelte | 5 +- .../[query]/_layout.svelte | 2 +- .../[selectedDatasource]/[query]/index.svelte | 2 +- .../[selectedDatasource]/_layout.svelte | 2 +- .../data/table/[selectedTable]/_layout.svelte | 2 +- .../[selectedField]/index.svelte | 3 +- .../design/[assetType]/_layout.svelte | 6 +- .../design/[assetType]/index.svelte | 8 +- .../builder/src/pages/builder/_layout.svelte | 6 +- packages/client/package.json | 2 +- .../client/src/components/Component.svelte | 4 +- .../src/components/NotificationDisplay.svelte | 3 +- packages/client/src/components/Router.svelte | 4 +- packages/client/yarn.lock | 8 +- .../static/templates/BudibaseApp.svelte | 3 +- packages/standard-components/package.json | 2 +- .../standard-components/src/Button.svelte | 5 +- packages/standard-components/src/Card.svelte | 6 +- .../src/CardHorizontal.svelte | 9 +- .../standard-components/src/Container.svelte | 3 +- .../src/DataProvider.svelte | 25 ++- .../standard-components/src/Heading.svelte | 12 +- packages/standard-components/src/Icon.svelte | 42 ++--- packages/standard-components/src/Image.svelte | 3 +- packages/standard-components/src/Link.svelte | 4 +- packages/standard-components/src/Login.svelte | 8 +- .../standard-components/src/Search.svelte | 16 +- .../src/charts/BarChart.svelte | 160 +++++++++--------- .../src/charts/CandleStickChart.svelte | 14 +- .../src/charts/LineChart.svelte | 16 +- .../src/charts/PieChart.svelte | 8 +- .../src/forms/AttachmentField.svelte | 17 +- .../src/forms/BooleanField.svelte | 8 +- .../src/forms/DateTimeField.svelte | 5 +- .../src/forms/Field.svelte | 5 +- .../src/forms/FieldGroup.svelte | 3 +- .../standard-components/src/forms/Form.svelte | 20 ++- .../src/forms/LongFormField.svelte | 8 +- .../src/forms/OptionsField.svelte | 6 +- .../src/forms/RelationshipField.svelte | 22 ++- .../src/forms/StringField.svelte | 10 +- .../src/table/Table.svelte | 10 +- yarn.lock | 8 +- 229 files changed, 1752 insertions(+), 1204 deletions(-) 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 @@