diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index 9193a566b5..dcf29b2534 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -61,3 +61,4 @@ ] } ] + diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index fbd3ccb053..665a3dc92d 100644 --- a/packages/client/src/utils/styleable.js +++ b/packages/client/src/utils/styleable.js @@ -74,6 +74,7 @@ export const styleable = (node, styles = {}) => { // preview const applyStyles = styleString => { node.style = addBuilderPreviewStyles(styleString, componentId, selectable) + node.dataset.componentId = componentId } // Applies the "normal" style definition diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index a21a66992b..1cf887bbf2 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -114,57 +114,6 @@ } ] }, - "form": { - "name": "Form", - "icon": "ri-file-edit-line", - "styleable": true, - "hasChildren": true, - "dataProvider": true, - "datasourceSetting": "datasource", - "settings": [ - { - "type": "datasource", - "label": "Data", - "key": "datasource" - }, - { - "type": "select", - "label": "Theme", - "key": "theme", - "defaultValue": "spectrum--light", - "options": [ - { - "label": "Light", - "value": "spectrum--light" - }, - { - "label": "Dark", - "value": "spectrum--dark" - }, - { - "label": "Darkest", - "value": "spectrum--darkest" - } - ] - }, - { - "type": "select", - "label": "Size", - "key": "size", - "defaultValue": "spectrum--medium", - "options": [ - { - "label": "Medium", - "value": "spectrum--medium" - }, - { - "label": "Large", - "value": "spectrum--large" - } - ] - } - ] - }, "richtext": { "name": "Rich Text", "description": "A component that allows the user to enter long form text.", @@ -1121,6 +1070,77 @@ } ] }, + "form": { + "name": "Form", + "icon": "ri-file-edit-line", + "styleable": true, + "hasChildren": true, + "dataProvider": true, + "datasourceSetting": "datasource", + "settings": [ + { + "type": "datasource", + "label": "Data", + "key": "datasource" + }, + { + "type": "select", + "label": "Theme", + "key": "theme", + "defaultValue": "spectrum--light", + "options": [ + { + "label": "Light", + "value": "spectrum--light" + }, + { + "label": "Dark", + "value": "spectrum--dark" + }, + { + "label": "Darkest", + "value": "spectrum--darkest" + } + ] + }, + { + "type": "select", + "label": "Size", + "key": "size", + "defaultValue": "spectrum--medium", + "options": [ + { + "label": "Medium", + "value": "spectrum--medium" + }, + { + "label": "Large", + "value": "spectrum--large" + } + ] + }, + { + "type": "select", + "label": "Labels", + "key": "labelPosition", + "defaultValue": "left", + "options": [ + { + "label": "Left", + "value": "left" + }, + { + "label": "Right", + "value": "right" + }, + { + "label": "Above", + "value": "above" + } + ] + } + ] + }, "stringfield": { "name": "Text Field", "description": "A textfield component that allows the user to input text.", @@ -1189,7 +1209,8 @@ { "type": "text", "label": "Placeholder", - "key": "placeholder" + "key": "placeholder", + "placeholder": "Choose an option" } ] } diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index 7ae2b94b7f..047cfa6aff 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -37,9 +37,15 @@ "@adobe/spectrum-css-workflow-icons": "^1.1.0", "@budibase/bbui": "^1.52.4", "@budibase/svelte-ag-grid": "^0.0.16", + "@spectrum-css/actionbutton": "^1.0.0-beta.1", "@spectrum-css/button": "^3.0.0-beta.6", + "@spectrum-css/fieldlabel": "^3.0.0-beta.7", "@spectrum-css/icon": "^3.0.0-beta.2", + "@spectrum-css/menu": "^3.0.0-beta.5", "@spectrum-css/page": "^3.0.0-beta.0", + "@spectrum-css/picker": "^1.0.0-beta.3", + "@spectrum-css/popover": "^3.0.0-beta.6", + "@spectrum-css/stepper": "^3.0.0-beta.7", "@spectrum-css/textfield": "^3.0.0-beta.6", "@spectrum-css/vars": "^3.0.0-beta.2", "apexcharts": "^3.22.1", diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte index a4a2d46c86..86568f18d5 100644 --- a/packages/standard-components/src/forms/Form.svelte +++ b/packages/standard-components/src/forms/Form.svelte @@ -1,4 +1,5 @@ + + + +
+ +
+ {#if $fieldState.error} +
{$fieldState.error}
+ {/if} +
+ + diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte new file mode 100644 index 0000000000..84f1a22ccb --- /dev/null +++ b/packages/standard-components/src/forms/SpectrumField.svelte @@ -0,0 +1,36 @@ + + +{#if !fieldId} + Add the Field setting to start using your component +{:else if !formContext} + Form components need to be wrapped in a Form +{:else} +
+ {#if label} + + {/if} +
+ +
+
+{/if} diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte index b51b431e24..f75a5b1b6f 100644 --- a/packages/standard-components/src/forms/StringField.svelte +++ b/packages/standard-components/src/forms/StringField.svelte @@ -1,38 +1,34 @@ -{#if !field} - Add the Field setting to start using your component -{:else if !fieldState} - Form components need to be wrapped in a Form -{:else} -
- {#if label} - - {/if} -
+ +
+
{#if !$fieldState.valid} {/if} + class="spectrum-Textfield-input" + class:spectrum-Stepper-input={numeric} />
+ {#if numeric} + + + + + {/if} {#if $fieldState.error} -
- -
+
{$fieldState.error}
{/if}
-{/if} +
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock index 732c50990a..a1a4a11af5 100644 --- a/packages/standard-components/yarn.lock +++ b/packages/standard-components/yarn.lock @@ -132,16 +132,31 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@spectrum-css/actionbutton@^1.0.0-beta.1": + version "1.0.0-beta.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.0-beta.1.tgz#a6684cac108d4a9daefe0be6df8201d3c369a0d6" + integrity sha512-QbrPMTkbkmh+dEBP66TFXmF5z3qSde+BnLR5hnlo2XMvKvnblX2VJStEbQ+hTKuSZXCRFADXyXD5o0NOYDTByQ== + "@spectrum-css/button@^3.0.0-beta.6": version "3.0.0-beta.6" resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a" integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg== +"@spectrum-css/fieldlabel@^3.0.0-beta.7": + version "3.0.0-beta.7" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114" + integrity sha512-0pseiPghqlOdALsRtidveWyt2YjfSXTZWDlSkcne/J0/QXBJOQH/7Qfy7TmROQZYRB2LqH1VzmE1zbvGwr5Aog== + "@spectrum-css/icon@^3.0.0-beta.2": version "3.0.0-beta.2" resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb" integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA== +"@spectrum-css/menu@^3.0.0-beta.5": + version "3.0.0-beta.5" + resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74" + integrity sha512-jvPD5GbNdX31rdFBLxCG7KoUVGeeNYLzNXDpiGZsWme/djVTwitljgNe7bhVwCVlXZE7H20Ti/YrdafnE154Rw== + "@spectrum-css/page@^3.0.0-beta.0": version "3.0.0-beta.0" resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.0-beta.0.tgz#885ea41b44861c5dc3aac904536f9e93c9109b58" @@ -149,6 +164,21 @@ dependencies: "@spectrum-css/vars" "^3.0.0-beta.2" +"@spectrum-css/picker@^1.0.0-beta.3": + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.3.tgz#476593597b5a9e0105397e4e39350869cf6e7965" + integrity sha512-jHzFnS5Frd3JSwZ6B8ymH/sVnNqAUBo9p93Zax4VHTUDsPTtTkvxj/Vxo4POmrJEL9v3qUB2Yk13rD2BSfEzLQ== + +"@spectrum-css/popover@^3.0.0-beta.6": + version "3.0.0-beta.6" + resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.6.tgz#787611f020e091234e6ba7e946b0dbd0ed1a2fa2" + integrity sha512-dUJlwxoNpB6jOR0g/ywH2cPoUz2FVsL6xPfkm6BSsLp9ejhYy0/OFF4w0Q32Fu9qJDbWJ9qaoOlPpt7IjQ+/GQ== + +"@spectrum-css/stepper@^3.0.0-beta.7": + version "3.0.0-beta.7" + resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.0-beta.7.tgz#fc78435ce878c5e233af13e43ed2c3e8671a2bbc" + integrity sha512-TQL2OBcdEgbHBwehMGgqMuWdKZZQPGcBRV5FlF0TUdOT58lEqFAO43Gajqvyte1P23lNmnX8KuMwkRfQdn0RzA== + "@spectrum-css/textfield@^3.0.0-beta.6": version "3.0.0-beta.6" resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.6.tgz#30c044ceb403d6ea82d8046fb8f767f7fe455da6"