diff --git a/packages/bbui/package.json b/packages/bbui/package.json index ec5e7f6c31..722b74a914 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -45,6 +45,7 @@ "@spectrum-css/fieldgroup": "^3.0.2", "@spectrum-css/fieldlabel": "^3.0.1", "@spectrum-css/icon": "^3.0.1", + "@spectrum-css/inputgroup": "^3.0.2", "@spectrum-css/label": "^2.0.9", "@spectrum-css/link": "^3.1.1", "@spectrum-css/menu": "^3.0.1", diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte new file mode 100644 index 0000000000..77953e52d0 --- /dev/null +++ b/packages/bbui/src/Form/Combobox.svelte @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte new file mode 100644 index 0000000000..4329467bb0 --- /dev/null +++ b/packages/bbui/src/Form/Core/Combobox.svelte @@ -0,0 +1,128 @@ + + +
+
+ (focus = true)} + on:blur={() => (focus = false)} + on:change={onChange} + {value} + {placeholder} + class="spectrum-Textfield-input spectrum-InputGroup-input" /> +
+ + {#if open} +
(open = false)} /> +
+
    + {#if options && Array.isArray(options)} + {#each options as option} +
  • selectOption(getOptionValue(option))}> + {getOptionLabel(option)} + +
  • + {/each} + {/if} +
+
+ {/if} +
+ + diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index eea5289218..1e2d6645ac 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -105,6 +105,7 @@ max-height: 240px; width: 100%; z-index: 999; + top: 100%; } .spectrum-Picker { width: 100%; diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte index 63c852dfb3..ae1b8c3a1d 100644 --- a/packages/bbui/src/Form/Core/TextField.svelte +++ b/packages/bbui/src/Form/Core/TextField.svelte @@ -10,6 +10,7 @@ export let id = null const dispatch = createEventDispatcher() + let focus = false const updateValue = value => { if (type === "number") { @@ -20,6 +21,7 @@ } const onBlur = event => { + focus = false updateValue(event.target.value) } @@ -33,7 +35,8 @@
+ class:is-disabled={disabled} + class:is-focused={focus}> {#if error} (focus = true)} {type} class="spectrum-Textfield-input" />
diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js index 7e3bf39c2a..19a6581bbf 100644 --- a/packages/bbui/src/Form/Core/index.js +++ b/packages/bbui/src/Form/Core/index.js @@ -4,3 +4,5 @@ export { default as CoreMultiselect } from "./Multiselect.svelte" export { default as CoreCheckbox } from "./Checkbox.svelte" export { default as CoreRadioGroup } from "./RadioGroup.svelte" export { default as CoreTextArea } from "./TextArea.svelte" +export { default as CoreCombobox } from "./Combobox.svelte" +export { default as CoreSwitch } from "./Switch.svelte" diff --git a/packages/bbui/src/Form/DataList.svelte b/packages/bbui/src/Form/DataList.svelte deleted file mode 100644 index 6f5855d86a..0000000000 --- a/packages/bbui/src/Form/DataList.svelte +++ /dev/null @@ -1,158 +0,0 @@ - - -{#if label} - -{/if} -
- - - { - updateValue(e) - handleBlur(e) - }} - value={value || ''} - type="text" /> -
- -
-
- - diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 17837750cc..629ad79bdf 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -4,7 +4,7 @@ import "./bbui.css" export { default as Input } from "./Form/Input.svelte" export { default as TextArea } from "./Form/TextArea.svelte" export { default as Select } from "./Form/Select.svelte" -export { default as DataList } from "./Form/DataList.svelte" +export { default as Combobox } from "./Form/Combobox.svelte" export { default as Dropzone } from "./Dropzone/Dropzone.svelte" export { default as Drawer } from "./Drawer/Drawer.svelte" export { default as ActionButton } from "./ActionButton/ActionButton.svelte" diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock index a9b90d42d6..74dda17158 100644 --- a/packages/bbui/yarn.lock +++ b/packages/bbui/yarn.lock @@ -116,6 +116,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3" integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q== +"@spectrum-css/inputgroup@^3.0.2": + version "3.0.2" + resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691" + integrity sha512-O0G3Lw9gxsh8gTLQWIAKkN1O8cWhjpEUl+oR1PguIKFni72uNr2ikU9piOwy/r0gJG2Q/TVs6hAshoAAkmsSzw== + "@spectrum-css/label@^2.0.9": version "2.0.10" resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.10.tgz#2368651d7636a19385b5d300cdf6272db1916001" diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte index 9e6ab5529b..44557157ba 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/AttachmentFieldSelect.svelte @@ -2,4 +2,4 @@ import FormFieldSelect from "./FormFieldSelect.svelte" - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte index 51b459bf23..131a375b22 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/BooleanFieldSelect.svelte @@ -2,4 +2,4 @@ import FormFieldSelect from "./FormFieldSelect.svelte" - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte index 5c0ed8cb2f..c3b9b052c4 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DateTimeFieldSelect.svelte @@ -2,4 +2,4 @@ import FormFieldSelect from "./FormFieldSelect.svelte" - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte deleted file mode 100644 index c119985196..0000000000 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DetailScreenSelect.svelte +++ /dev/null @@ -1,55 +0,0 @@ - - -
- - - {/each} - -
- - diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte index 5a903e0b10..1d7f5367df 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte @@ -1,5 +1,5 @@ -
- - - {/each} - -
- - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte index 05a83fe387..65dd54d53a 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/LongFormFieldSelect.svelte @@ -2,4 +2,4 @@ import FormFieldSelect from "./FormFieldSelect.svelte" - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte index ce2569cf91..2006aca0bb 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/NumberFieldSelect.svelte @@ -2,4 +2,4 @@ import FormFieldSelect from "./FormFieldSelect.svelte" - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte index 526372e3d8..a01b837797 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsFieldSelect.svelte @@ -2,4 +2,4 @@ import FormFieldSelect from "./FormFieldSelect.svelte" - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index 0f4d729790..45624ced59 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -134,6 +134,7 @@ flex: 1; display: inline-block; padding-left: 2px; + width: 0; } .icon { diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte index 94e376dc27..5cdb25a112 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte @@ -2,4 +2,4 @@ import FormFieldSelect from "./FormFieldSelect.svelte" - + diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte index 27815af91f..62765676e3 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/StringFieldSelect.svelte @@ -2,4 +2,4 @@ import FormFieldSelect from "./FormFieldSelect.svelte" - + diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index 62072d17f7..ff5a20a0ee 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -17,7 +17,6 @@ import SchemaSelect from "./PropertyControls/SchemaSelect.svelte" import EventsEditor from "./PropertyControls/EventsEditor" import FilterEditor from "./PropertyControls/FilterEditor.svelte" - import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte" import { IconSelect } from "./PropertyControls/IconSelect" import ColorPicker from "./PropertyControls/ColorPicker.svelte" import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte" @@ -61,7 +60,6 @@ select: Select, dataSource: DataSourceSelect, dataProvider: DataProviderSelect, - detailScreen: DetailScreenSelect, boolean: Checkbox, number: Input, event: EventsEditor,