From 06bbc88b3e37ccef13ea70fb332b8efd9d380cd4 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 4 May 2020 16:07:04 +0100 Subject: [PATCH 01/24] WIP: Changes for property panel --- .../userInterface/CategoryTab.svelte | 43 ++++++ .../ComponentPropertiesPanel.svelte | 129 ++++++++---------- .../ComponentSelectionList.svelte | 16 +-- .../userInterface/DesignView.svelte | 17 +++ .../userInterface/PropertyGroup.svelte | 72 ++++++++++ .../userInterface/propertyCategories.js | 77 +++++++++++ .../userInterface/temporaryPanelStructure.js | 33 +++-- 7 files changed, 289 insertions(+), 98 deletions(-) create mode 100644 packages/builder/src/components/userInterface/CategoryTab.svelte create mode 100644 packages/builder/src/components/userInterface/DesignView.svelte create mode 100644 packages/builder/src/components/userInterface/PropertyGroup.svelte create mode 100644 packages/builder/src/components/userInterface/propertyCategories.js diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte new file mode 100644 index 0000000000..246c1141e8 --- /dev/null +++ b/packages/builder/src/components/userInterface/CategoryTab.svelte @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index c4c57c8e04..84480b2d69 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -14,17 +14,33 @@ import LayoutEditor from "./LayoutEditor.svelte" import EventsEditor from "./EventsEditor" - let current_view = "props" - let codeEditor + import panelStructure from "./temporaryPanelStructure.js" + import CategoryTab from "./CategoryTab.svelte" + import DesignView from "./DesignView.svelte" + + let current_view = "design" + let codeEditor + let flattenedPanel = flattenComponents(panelStructure.categories) + let categories = [ + { name: "Design" }, + { name: "Settings" }, + { name: "Actions" }, + ] + let selectedCategory = categories[0] - $: component = $store.currentComponentInfo - $: originalName = component.name - $: name = - $store.currentView === "detail" - ? $store.currentPreviewItem.name - : component._component - $: description = component.description $: components = $store.components + $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component + $: componentDefinition = $store.components.find( + c => c.name === componentInstance._component + ) + + $: panelDefinition = flattenedPanel.find( + //use for getting controls for each component property + c => c._component === componentInstance._component + ) + + // OLD PROPS ============================================= + $: screen_props = $store.currentFrontEndType === "page" ? getProps($store.currentPreviewItem, ["name", "favicon"]) @@ -33,77 +49,47 @@ const onPropChanged = store.setComponentProp const onStyleChanged = store.setComponentStyle + //May be able to remove some of the nested components in PropsView, PropsControl and StateBindingControl tree + + function walkProps(component, action) { + action(component) + if (component.children) { + for (let child of component.children) { + walkProps(child, action) + } + } + } + + function flattenComponents(props) { + const components = [] + props.forEach(comp => + walkProps(comp, c => { + if ("_component" in c) { + components.push(c) + } + }) + ) + return components + } + function getProps(obj, keys) { return keys.map((k, i) => [k, obj[k], obj.props._id + i]) }
- + + (selectedCategory = category)} + {categories} + {selectedCategory} /> +
- - {#if current_view === 'props'} - {#if $store.currentView === 'detail'} - {#each screen_props as [k, v, id] (id)} -
- - store.setMetadataProp(k, target.value)} /> -
- {/each} - - {:else} - - {/if} - {:else if current_view === 'layout'} - - {:else if current_view === 'events'} - + {#if current_view === 'design'} + + {/if} - -
@@ -146,7 +132,6 @@ .root { height: 100%; - padding: 20px; display: flex; flex-direction: column; } diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index eb27559933..139dd65c59 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -2,6 +2,7 @@ import { splitName } from "./pagesParsing/splitRootComponentName.js" import components from "./temporaryPanelStructure.js" import ConfirmDialog from "components/common/ConfirmDialog.svelte" + import CategoryTab from "./CategoryTab.svelte" import { find, sortBy, @@ -85,15 +86,12 @@
- + + (selectedCategory = category)} + {selectedCategory} + {categories} /> +
+ import PropertyGroup from "./PropertyGroup.svelte" + export let panelDefinition = {} + export let componentInstance = {} + export let componentDefinition = {} + const getProperties = prop => panelDefinition.props[prop] + + $: props = !!panelDefinition.props && Object.keys(panelDefinition.props) + + +{#each props as prop} + +{/each} diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte new file mode 100644 index 0000000000..1b424dcd28 --- /dev/null +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -0,0 +1,72 @@ + + +
(show = !show)}> +
+
+ +
+
{capitalize(title)}
+
+
+
    + {#each propertyKeys as key} + +
  • {content[key].displayName || capitalize(key)}
  • + + {/each} +
+
+
+ + diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js new file mode 100644 index 0000000000..8b662d443c --- /dev/null +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -0,0 +1,77 @@ + +/* + TODO: all strings types are really inputs and could be typed as such + TODO: Options types need option items + TODO: Allow for default values for all properties +*/ + +export const layout = { + flexDirection: { displayName: "Direction", type: "string" }, + justifyContent: { displayName: "Justify", type: "string" }, + alignItems: { displayName: "Align", type: "string" }, + flexWrap: { displayName: "Wrap", type: "options" }, +} + +export const spacing = { + padding: { type: "string" }, + margin: { type: "string" }, +} + +export const size = { + width: { type: "string" }, + height: { type: "string" }, + minWidth: { displayName: "Min W", type: "string" }, + minHeight: { displayName: "Min H", type: "string" }, + maxWidth: { displayName: "Max W", type: "string" }, + maxHeight: { displayName: "Max H", type: "string" }, + overflow: { type: "string" }, //custom +} + +export const position = { + position: { type: "options" }, +} + +export const typography = { + font: { type: "options" }, + weight: { type: "options" }, + size: { type: "string" }, + lineHeight: { displayName: "Line H", type: "string" }, + color: { type: "colour" }, + align: { type: "string" }, //custom + transform: { type: "string" }, //custom + style: { type: "string" }, //custom +} + +export const background = { + backgroundColor: { displayName: "Background Color", type: "colour" }, + image: { type: "string" }, //custom +} + +export const border = { + radius: { type: "string" }, + width: { type: "string" }, //custom + color: { type: "colour" }, + style: { type: "options" }, +} + +export const effects = { + opacity: "string", + rotate: "string", + shadow: "string", +} + +export const transitions = { + property: { type: "options" }, + duration: { type: "string" }, + ease: { type: "options" }, +} + +export function excludeProps(props, propsToExclude) { + const modifiedProps = {} + for (const prop in props) { + if (!propsToExclude.includes(prop)) { + modifiedProps[prop] = props[prop] + } + } + return modifiedProps +} diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 5c4188d311..07facd4e28 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,3 +1,5 @@ +import { layout, background } from "./propertyCategories.js" + export default { categories: [ { @@ -10,7 +12,8 @@ export default { description: 'This component contains things within itself', icon: 'ri-layout-row-fill', commonProps: {}, - children: [] + children: [], + props: { layout, background }, }, { name: 'Text', @@ -24,12 +27,8 @@ export default { description: "A component for displaying heading text", icon: "ri-heading", props: { - type: { - type: "options", - options: ["h1", "h2", "h3", "h4", "h5", "h6"], - default: "h1", - }, - text: "string", + layout, + background, }, }, { @@ -82,15 +81,15 @@ export default { name: 'Button', description: 'A basic html button that is ready for styling', icon: 'ri-radio-button-fill', - commonProps: {}, - children: [] + children: [], + props: {}, }, { _component: "@budibase/standard-components/icon", name: 'Icon', description: 'A basic component for displaying icons', icon: 'ri-sun-fill', - commonProps: {}, + props: {}, children: [] }, { @@ -98,7 +97,7 @@ export default { name: 'Link', description: 'A basic link component for internal and external links', icon: 'ri-link', - commonProps: {}, + props: {}, children: [] } ] @@ -112,14 +111,14 @@ export default { name: 'Card', description: 'A basic card component that can contain content and actions.', icon: 'ri-layout-bottom-line', - commonProps: {}, + props: {}, children: [] }, { name: 'Login', description: 'A component that automatically generates a login screen for your app.', icon: 'ri-login-box-fill', - commonProps: {}, + props: {}, children: [] }, { @@ -127,7 +126,7 @@ export default { _component: "@budibase/standard-components/Navigation", description: "A component for handling the navigation within your app.", icon: "ri-navigation-fill", - commonProps: {}, + props: {}, children: [] } ] @@ -140,15 +139,15 @@ export default { name: 'Table', description: 'A component that generates a table from your data.', icon: 'ri-archive-drawer-fill', - commonProps: {}, + props: {}, children: [] }, { name: 'Form', description: 'A component that generates a form from your data.', icon: 'ri-file-edit-fill', - commonProps: {}, - component: "@budibase/materialdesign-components/Form", + props: {}, + _component: "@budibase/materialdesign-components/Form", template: { component: "@budibase/materialdesign-components/Form", description: "Form for saving a record", From 8ad10976d3f03c2225a04873409014534e9703b3 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 5 May 2020 10:02:10 +0100 Subject: [PATCH 02/24] Updates to naming conventions --- .../userInterface/DesignView.svelte | 12 ++-- .../userInterface/PropertyGroup.svelte | 18 +++--- .../userInterface/propertyCategories.js | 63 +++++++++---------- .../userInterface/temporaryPanelStructure.js | 30 ++++----- 4 files changed, 62 insertions(+), 61 deletions(-) diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 60a6dc8bc3..f8dad08905 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -1,17 +1,19 @@ -{#each props as prop} +{#each propertyGroupNames as groupName} {/each} diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 1b424dcd28..b2b1e9c9eb 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,6 +1,6 @@
(show = !show)}> -
+
-
{capitalize(title)}
+
{capitalize(name)}
    {#each propertyKeys as key} -
  • {content[key].displayName || capitalize(key)}
  • +
  • {properties[key].label || capitalize(key)}
  • {/each}
@@ -42,7 +42,7 @@ padding: 5px; } - .property-group-title { + .property-group-name { cursor: pointer; flex: 0 0 20px; display: flex; @@ -54,7 +54,7 @@ text-align: center; } - .title { + .name { flex: 1; text-align: left; } diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 8b662d443c..352baea93e 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,4 +1,3 @@ - /* TODO: all strings types are really inputs and could be typed as such TODO: Options types need option items @@ -6,52 +5,52 @@ */ export const layout = { - flexDirection: { displayName: "Direction", type: "string" }, - justifyContent: { displayName: "Justify", type: "string" }, - alignItems: { displayName: "Align", type: "string" }, - flexWrap: { displayName: "Wrap", type: "options" }, + flexDirection: { label: "Direction", control: "string" }, + justifyContent: { label: "Justify", control: "string" }, + alignItems: { label: "Align", control: "string" }, + flexWrap: { label: "Wrap", control: "options" }, } export const spacing = { - padding: { type: "string" }, - margin: { type: "string" }, + padding: { control: "string" }, + margin: { control: "string" }, } export const size = { - width: { type: "string" }, - height: { type: "string" }, - minWidth: { displayName: "Min W", type: "string" }, - minHeight: { displayName: "Min H", type: "string" }, - maxWidth: { displayName: "Max W", type: "string" }, - maxHeight: { displayName: "Max H", type: "string" }, - overflow: { type: "string" }, //custom + width: { control: "string" }, + height: { control: "string" }, + minWidth: { label: "Min W", control: "string" }, + minHeight: { label: "Min H", control: "string" }, + maxWidth: { label: "Max W", control: "string" }, + maxHeight: { label: "Max H", control: "string" }, + overflow: { control: "string" }, //custom } export const position = { - position: { type: "options" }, + position: { control: "options" }, } export const typography = { - font: { type: "options" }, - weight: { type: "options" }, - size: { type: "string" }, - lineHeight: { displayName: "Line H", type: "string" }, - color: { type: "colour" }, - align: { type: "string" }, //custom - transform: { type: "string" }, //custom - style: { type: "string" }, //custom + font: { control: "options" }, + weight: { control: "options" }, + size: { control: "string" }, + lineHeight: { label: "Line H", control: "string" }, + color: { control: "colour" }, + align: { control: "string" }, //custom + transform: { control: "string" }, //custom + style: { control: "string" }, //custom } export const background = { - backgroundColor: { displayName: "Background Color", type: "colour" }, - image: { type: "string" }, //custom + backgroundColor: { label: "Background Color", control: "colour" }, + image: { control: "string" }, //custom } export const border = { - radius: { type: "string" }, - width: { type: "string" }, //custom - color: { type: "colour" }, - style: { type: "options" }, + radius: { control: "string" }, + width: { control: "string" }, //custom + color: { control: "colour" }, + style: { control: "options" }, } export const effects = { @@ -61,9 +60,9 @@ export const effects = { } export const transitions = { - property: { type: "options" }, - duration: { type: "string" }, - ease: { type: "options" }, + property: { control: "options" }, + duration: { control: "string" }, + ease: { control: "options" }, } export function excludeProps(props, propsToExclude) { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 07facd4e28..7ec5988def 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -13,7 +13,7 @@ export default { icon: 'ri-layout-row-fill', commonProps: {}, children: [], - props: { layout, background }, + properties: { layout, background }, }, { name: 'Text', @@ -26,7 +26,7 @@ export default { name: 'Headline', description: "A component for displaying heading text", icon: "ri-heading", - props: { + properties: { layout, background, }, @@ -36,7 +36,7 @@ export default { name: 'Paragraph', description: "A component for displaying paragraph text.", icon: 'ri-paragraph', - props: {} + properties: {} } ] }, @@ -51,28 +51,28 @@ export default { name: "Textfield", description: "A textfield component that allows the user to input text.", icon: 'ri-edit-box-line', - props: {} + properties: {} }, { _component: "@budibase/standard-components/checkbox", name: "Checkbox", description: "A selectable checkbox component", icon: 'ri-checkbox-line', - props: {} + properties: {} }, { _component: "@budibase/standard-components/radiobutton", name: "Radiobutton", description: "A selectable radiobutton component", icon: 'ri-radio-button-line', - props: {} + properties: {} }, { _component: "@budibase/standard-components/select", name: "Select", description: "A select component for choosing from different options", icon: 'ri-file-list-line', - props: {} + properties: {} } ] }, @@ -82,14 +82,14 @@ export default { description: 'A basic html button that is ready for styling', icon: 'ri-radio-button-fill', children: [], - props: {}, + properties: {}, }, { _component: "@budibase/standard-components/icon", name: 'Icon', description: 'A basic component for displaying icons', icon: 'ri-sun-fill', - props: {}, + properties: {}, children: [] }, { @@ -97,7 +97,7 @@ export default { name: 'Link', description: 'A basic link component for internal and external links', icon: 'ri-link', - props: {}, + properties: {}, children: [] } ] @@ -111,14 +111,14 @@ export default { name: 'Card', description: 'A basic card component that can contain content and actions.', icon: 'ri-layout-bottom-line', - props: {}, + properties: {}, children: [] }, { name: 'Login', description: 'A component that automatically generates a login screen for your app.', icon: 'ri-login-box-fill', - props: {}, + properties: {}, children: [] }, { @@ -126,7 +126,7 @@ export default { _component: "@budibase/standard-components/Navigation", description: "A component for handling the navigation within your app.", icon: "ri-navigation-fill", - props: {}, + properties: {}, children: [] } ] @@ -139,14 +139,14 @@ export default { name: 'Table', description: 'A component that generates a table from your data.', icon: 'ri-archive-drawer-fill', - props: {}, + properties: {}, children: [] }, { name: 'Form', description: 'A component that generates a form from your data.', icon: 'ri-file-edit-fill', - props: {}, + properties: {}, _component: "@budibase/materialdesign-components/Form", template: { component: "@budibase/materialdesign-components/Form", From b52b9fdd2f65584111646f13b57a9868729cf30a Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 5 May 2020 14:45:52 +0100 Subject: [PATCH 03/24] solution for rendering --- .../src/components/common/Colorpicker.svelte | 13 +++--- .../ComponentPropertiesPanel.svelte | 7 +++- .../userInterface/DesignView.svelte | 4 ++ .../userInterface/PropertyGroup.svelte | 42 +++++++++++++------ .../userInterface/TempSelect.svelte | 14 +++++++ .../userInterface/propertyCategories.js | 13 ++++-- .../userInterface/temporaryPanelStructure.js | 5 ++- .../standard-components/src/Heading.svelte | 1 - 8 files changed, 71 insertions(+), 28 deletions(-) create mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 9cc3b3926a..28ca92554d 100644 --- a/packages/builder/src/components/common/Colorpicker.svelte +++ b/packages/builder/src/components/common/Colorpicker.svelte @@ -2,7 +2,7 @@ import { onMount, beforeUpdate, afterUpdate } from "svelte" export let value = null - export let onChanged = () => {} + export let onChange = () => {} export let swatches = [] let picker @@ -58,13 +58,10 @@ onMount(() => { getRecentColors() createPicker() - - picker.on("save", (colour, instance) => { - let color = colour.toHEXA().toString() - onChanged(color) - setRecentColor(color) - picker.hide() - }) + return () => { + picker.destroyAndRemove() + picker = null + } }) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 84480b2d69..944862ebee 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -86,8 +86,11 @@
{#if current_view === 'design'} - - + {/if}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index f8dad08905..0aebd7b186 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -4,8 +4,11 @@ export let panelDefinition = {} export let componentInstance = {} export let componentDefinition = {} + export let onPropChanged = () => {} + const getProperties = name => panelDefinition.properties[name] + $: console.log("PDEF", panelDefinition) $: propertyGroupNames = !!panelDefinition.properties && Object.keys(panelDefinition.properties) @@ -14,6 +17,7 @@ {/each} diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index b2b1e9c9eb..fa6dba0156 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,20 +1,27 @@ -
(show = !show)}> + +
{}}>
@@ -22,13 +29,20 @@
{capitalize(name)}
-
    - {#each propertyKeys as key} - -
  • {properties[key].label || capitalize(key)}
  • - - {/each} -
+ + {#each propertyDefinition as [key, definition]} +
+ {#if propExistsOnComponentDef(key)} + {definition.label || capitalize(key)} + + {/if} +
+ {/each}
@@ -62,7 +76,11 @@ .property-panel { height: 0px; overflow: hidden; - /* transition: height 2s ease-in-out; */ + } + + .property-control { + display: flex; + flex-flow: row nowrap; } .show { diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte new file mode 100644 index 0000000000..514c9b5a20 --- /dev/null +++ b/packages/builder/src/components/userInterface/TempSelect.svelte @@ -0,0 +1,14 @@ + + + diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 352baea93e..6246462ecb 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,9 +1,16 @@ -/* +import ColorPicker from "../common/Colorpicker.svelte" +import Input from "../common/Input.svelte" +import TempSelect from "./TempSelect.svelte" +/* TODO: all strings types are really inputs and could be typed as such TODO: Options types need option items TODO: Allow for default values for all properties */ +export const general = { + text: { control: Input } +} + export const layout = { flexDirection: { label: "Direction", control: "string" }, justifyContent: { label: "Justify", control: "string" }, @@ -42,8 +49,8 @@ export const typography = { } export const background = { - backgroundColor: { label: "Background Color", control: "colour" }, - image: { control: "string" }, //custom + backgroundColor: { label: "Background Color", control: ColorPicker }, + image: { control: Input }, //custom } export const border = { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 7ec5988def..bc60ac2bd6 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,4 +1,4 @@ -import { layout, background } from "./propertyCategories.js" +import { general, layout, background } from "./propertyCategories.js" export default { categories: [ @@ -13,7 +13,7 @@ export default { icon: 'ri-layout-row-fill', commonProps: {}, children: [], - properties: { layout, background }, + properties: { background }, }, { name: 'Text', @@ -27,6 +27,7 @@ export default { description: "A component for displaying heading text", icon: "ri-heading", properties: { + general, layout, background, }, diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte index 6a3a210dc3..4bbb9d0b36 100644 --- a/packages/standard-components/src/Heading.svelte +++ b/packages/standard-components/src/Heading.svelte @@ -11,7 +11,6 @@ $: containerElement && !text && _bb.attachChildren(containerElement) $: style = buildStyle({ "font-family": fontFamily, color }) - // $: console.log("HEADING", color) {#if type === 'h1'} From 8d8caa9ff5be59147d2b27726074af57fba30121 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 7 May 2020 14:30:04 +0100 Subject: [PATCH 04/24] Properties panel structure complete --- .../src/components/common/Input.svelte | 5 +- .../ComponentPropertiesPanel.svelte | 86 +-------------- .../ComponentsPaneSwitcher.svelte | 5 +- .../userInterface/DesignView.svelte | 57 ++++++++-- .../userInterface/FlatButton.svelte | 38 +++++++ .../userInterface/FlatButtonGroup.svelte | 54 +++++++++ .../userInterface/OptionSelect.svelte | 22 ++++ .../userInterface/PropertyControl.svelte | 41 +++++++ .../userInterface/PropertyGroup.svelte | 52 ++++----- .../userInterface/TempSelect.svelte | 14 --- .../userInterface/UserInterfaceRoot.svelte | 4 +- .../userInterface/propertyCategories.js | 103 +++++++++++------- .../userInterface/temporaryPanelStructure.js | 6 +- 13 files changed, 305 insertions(+), 182 deletions(-) create mode 100644 packages/builder/src/components/userInterface/FlatButton.svelte create mode 100644 packages/builder/src/components/userInterface/FlatButtonGroup.svelte create mode 100644 packages/builder/src/components/userInterface/OptionSelect.svelte create mode 100644 packages/builder/src/components/userInterface/PropertyControl.svelte delete mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index 50b07f41f0..bc6741e0d8 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -1,8 +1,11 @@ - + diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index 9ca5b1e122..8e72a17c54 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -24,13 +24,13 @@
@@ -55,6 +55,7 @@ display: flex; flex-direction: column; padding: 20px 0; + border-left: solid 1px #e8e8ef; } .switcher { diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 0aebd7b186..7fc6af5312 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -1,23 +1,62 @@ -{#each propertyGroupNames as groupName} - -{/each} +
+ +
+ +
+ +
+ {#each propertyGroupNames as groupName} + + {/each} +
+
+ + diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte new file mode 100644 index 0000000000..abc4a3dc28 --- /dev/null +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -0,0 +1,38 @@ + + +
onClick(value || text)}> + {#if useIcon} + + {:else} + {text} + {/if} +
+ + diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte new file mode 100644 index 0000000000..f16d832c67 --- /dev/null +++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte @@ -0,0 +1,54 @@ + + +
+ {#each buttonProps as props} +
+ +
+ {/each} +
+ + diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte new file mode 100644 index 0000000000..cbbdb8f91f --- /dev/null +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -0,0 +1,22 @@ + + + diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte new file mode 100644 index 0000000000..23dd223de6 --- /dev/null +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -0,0 +1,41 @@ + + +
+
{label}
+
+ +
+
+ + diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index fa6dba0156..96d5ba7a7b 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,28 +1,27 @@ - -
{}}> -
+
+
(show = !show)}>
@@ -31,17 +30,14 @@
{#each propertyDefinition as [key, definition]} -
- {#if propExistsOnComponentDef(key)} - {definition.label || capitalize(key)} - - {/if} -
+ + onChange(key, value)} + props={{ ...excludeProps(definition, ['control']) }} /> + {/each}
@@ -63,14 +59,19 @@ flex-flow: row nowrap; } - .icon { - flex: 0 0 20px; - text-align: center; - } - .name { flex: 1; text-align: left; + padding-top: 2px; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.14px; + color: #393c44; + } + + .icon { + flex: 0 0 20px; + text-align: center; } .property-panel { @@ -78,11 +79,6 @@ overflow: hidden; } - .property-control { - display: flex; - flex-flow: row nowrap; - } - .show { overflow: auto; height: auto; diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte deleted file mode 100644 index 514c9b5a20..0000000000 --- a/packages/builder/src/components/userInterface/TempSelect.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte index 4f32c55d24..13d7a7e2a1 100644 --- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -114,7 +114,7 @@ .root { display: grid; - grid-template-columns: 275px 1fr 275px; + grid-template-columns: 275px 1fr 300px; height: 100%; width: 100%; background: #fafafa; @@ -151,7 +151,7 @@ .components-pane { grid-column: 3; background-color: var(--white); - min-height: 0px; + height: 100vh; overflow-y: scroll; } diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 6246462ecb..525738f02f 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,75 +1,102 @@ -import ColorPicker from "../common/Colorpicker.svelte" import Input from "../common/Input.svelte" -import TempSelect from "./TempSelect.svelte" +import OptionSelect from "./OptionSelect.svelte" /* - TODO: all strings types are really inputs and could be typed as such - TODO: Options types need option items TODO: Allow for default values for all properties */ export const general = { - text: { control: Input } + text: { control: Input }, } export const layout = { - flexDirection: { label: "Direction", control: "string" }, - justifyContent: { label: "Justify", control: "string" }, - alignItems: { label: "Align", control: "string" }, - flexWrap: { label: "Wrap", control: "options" }, + flexDirection: { + label: "Direction", + control: OptionSelect, + initialValue: "columnReverse", + options: [ + { label: "row" }, + { label: "row-reverse", value: "rowReverse" }, + { label: "column" }, + { label: "column-reverse", value: "columnReverse" }, + ], + }, + justifyContent: { label: "Justify", control: Input }, + alignItems: { label: "Align", control: Input }, + flexWrap: { + label: "Wrap", + control: OptionSelect, + options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], + }, } export const spacing = { - padding: { control: "string" }, - margin: { control: "string" }, + padding: { control: Input }, + margin: { control: Input }, } export const size = { - width: { control: "string" }, - height: { control: "string" }, - minWidth: { label: "Min W", control: "string" }, - minHeight: { label: "Min H", control: "string" }, - maxWidth: { label: "Max W", control: "string" }, - maxHeight: { label: "Max H", control: "string" }, - overflow: { control: "string" }, //custom + width: { control: Input }, + height: { control: Input }, + minWidth: { label: "Min W", control: Input }, + minHeight: { label: "Min H", control: Input }, + maxWidth: { label: "Max W", control: Input }, + maxHeight: { label: "Max H", control: Input }, + overflow: { control: Input }, //custom } export const position = { - position: { control: "options" }, + position: { control: Input }, } export const typography = { - font: { control: "options" }, - weight: { control: "options" }, - size: { control: "string" }, - lineHeight: { label: "Line H", control: "string" }, - color: { control: "colour" }, - align: { control: "string" }, //custom - transform: { control: "string" }, //custom - style: { control: "string" }, //custom + font: { control: Input }, + weight: { control: Input }, + size: { control: Input }, + lineHeight: { label: "Line H", control: Input }, + color: { + control: OptionSelect, + options: [{ label: "red" }, { label: "blue" }, { label: "green" }], + }, + align: { control: Input }, //custom + transform: { control: Input }, //custom + style: { control: Input }, //custom } export const background = { - backgroundColor: { label: "Background Color", control: ColorPicker }, + backgroundColor: { label: "Background Color", control: Input }, image: { control: Input }, //custom } export const border = { - radius: { control: "string" }, - width: { control: "string" }, //custom - color: { control: "colour" }, - style: { control: "options" }, + radius: { control: Input }, + width: { control: Input }, //custom + color: { control: Input }, + style: { control: Input }, } export const effects = { - opacity: "string", - rotate: "string", - shadow: "string", + opacity: { control: Input }, + rotate: { control: Input }, + shadow: { control: Input }, } export const transitions = { - property: { control: "options" }, - duration: { control: "string" }, - ease: { control: "options" }, + property: { control: Input }, + duration: { control: Input }, + ease: { control: Input }, +} + +export const all = { + general, + layout, + spacing, + size, + position, + typography, + background, + border, + effects, + transitions, } export function excludeProps(props, propsToExclude) { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index bc60ac2bd6..c4426d1035 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,4 +1,4 @@ -import { general, layout, background } from "./propertyCategories.js" +import { general, layout, typography, background, all } from "./propertyCategories.js" export default { categories: [ @@ -13,7 +13,7 @@ export default { icon: 'ri-layout-row-fill', commonProps: {}, children: [], - properties: { background }, + properties: { ...all }, }, { name: 'Text', @@ -29,7 +29,7 @@ export default { properties: { general, layout, - background, + typography, }, }, { From 6b7a3d1d7e4a650a2e071fa1113dec1451dae626 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 8 May 2020 09:57:41 +0100 Subject: [PATCH 05/24] Style binding options and property categories --- .../userInterface/OptionSelect.svelte | 13 +++- .../userInterface/propertyCategories.js | 75 ++++++++++++++++--- 2 files changed, 75 insertions(+), 13 deletions(-) diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index cbbdb8f91f..b3cfa5e54b 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -4,6 +4,9 @@ export let onChange = value => {} export let options = [] export let initialValue = "" + export let styleBindingProperty = "" + + $: bindOptionToStyle = !!styleBindingProperty onMount(() => { if (!value && !!initialValue) { @@ -17,6 +20,14 @@ {value} on:change={ev => onChange(ev.target.value)}> {#each options as { value, label }} - + {#if bindOptionToStyle} + + {:else} + + {/if} {/each} diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 525738f02f..7505645b65 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -41,25 +41,76 @@ export const size = { minHeight: { label: "Min H", control: Input }, maxWidth: { label: "Max W", control: Input }, maxHeight: { label: "Max H", control: Input }, - overflow: { control: Input }, //custom + overflow: { + control: OptionSelect, + options: [ + { label: "visible" }, + { label: "auto" }, + { label: "hidden" }, + { label: "auto" }, + { label: "scroll" }, + ], + }, //custom } export const position = { - position: { control: Input }, + position: { + control: OptionSelect, + options: [ + { label: "static" }, + { label: "relative" }, + { label: "fixed" }, + { label: "absolute" }, + { label: "sticky" }, + ], + }, } export const typography = { - font: { control: Input }, - weight: { control: Input }, - size: { control: Input }, + fontFamily: { + label: "Font", + control: OptionSelect, + options: [ + { label: "initial" }, + { label: "Times New Roman" }, + { label: "Georgia" }, + { label: "Arial" }, + { label: "Arial Black" }, + { label: "Comic Sans MS" }, + { label: "Impact" }, + { label: "Lucida Sans Unicode" }, + ], + styleBindingProperty: "font-family", + }, + fontWeight: { + label: "weight", + control: OptionSelect, + options: [ + { label: "normal" }, + { label: "bold" }, + { label: "bolder" }, + { label: "lighter" }, + ], + }, + fontSize: { label: "size", control: Input }, lineHeight: { label: "Line H", control: Input }, color: { control: OptionSelect, options: [{ label: "red" }, { label: "blue" }, { label: "green" }], }, - align: { control: Input }, //custom - transform: { control: Input }, //custom - style: { control: Input }, //custom + textAlign: { + label: "align", + control: OptionSelect, + options: [ + { label: "initial" }, + { label: "left" }, + { label: "right" }, + { label: "center" }, + { label: "justify" }, + ], + }, //custom + textTransform: { label: "transform", control: Input }, //custom + fontStyle: { label: "style", control: Input }, //custom } export const background = { @@ -68,10 +119,10 @@ export const background = { } export const border = { - radius: { control: Input }, - width: { control: Input }, //custom - color: { control: Input }, - style: { control: Input }, + borderRadius: { label: "radius", control: Input }, + borderWidth: { label: "width", control: Input }, //custom + borderColor: { label: "color", control: Input }, + borderStyle: { label: "style", control: Input }, } export const effects = { From 2e636dec9347e8fdf6e84408754de51b205def0e Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 8 May 2020 20:29:15 +0100 Subject: [PATCH 06/24] Pre demo changes --- .../ComponentPropertiesPanel.svelte | 5 ++-- .../userInterface/PropertyGroup.svelte | 15 ++++++++++++ .../userInterface/propertyCategories.js | 20 ++++++++++++++-- .../userInterface/temporaryPanelStructure.js | 24 ++++++++++++------- packages/standard-components/components.json | 4 +++- .../standard-components/src/Button.svelte | 6 ++--- .../standard-components/src/Container.svelte | 12 ++++++++++ 7 files changed, 67 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 94c450823a..12a7b3eb90 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -29,7 +29,7 @@ let selectedCategory = categories[0] $: components = $store.components - $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component + $: componentInstance = $store.currentComponentInfo $: componentDefinition = $store.components.find( c => c.name === componentInstance._component ) @@ -39,8 +39,7 @@ c => c._component === componentInstance._component ) - // OLD PROPS ============================================= - + // SCREEN PROPS ============================================= $: screen_props = $store.currentFrontEndType === "page" ? getProps($store.currentPreviewItem, ["name", "favicon"]) diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 96d5ba7a7b..2d88557777 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,6 +1,7 @@ +
(show = !show)}>
@@ -41,6 +55,7 @@ {/each}
+ diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index 02aa072910..18afb123ef 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -60,7 +60,7 @@ _children: [ { _component: "@budibase/standard-components/container", - _styles: { position: {}, layout: {} }, + _styles: {}, _id: "__screenslot__text", _code: "", className: "", @@ -69,7 +69,7 @@ _children: [ { _component: "@budibase/standard-components/text", - _styles: { position: {}, layout: {} }, + _styles: {}, _id: "__screenslot__text_2", _code: "", text: "content", diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js index 3c774cc4b8..c1cf4aab1f 100644 --- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js +++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js @@ -11,7 +11,7 @@ export default ({ diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte index 4bbb9d0b36..4760ae05db 100644 --- a/packages/standard-components/src/Heading.svelte +++ b/packages/standard-components/src/Heading.svelte @@ -2,27 +2,25 @@ import { buildStyle } from "./buildStyle.js" export let className = "" export let type - export let _bb export let text = "" - export let fontFamily = "" - export let color = "" + + export let _bb let containerElement $: containerElement && !text && _bb.attachChildren(containerElement) - $: style = buildStyle({ "font-family": fontFamily, color }) {#if type === 'h1'} -

{text}

+

{text}

{:else if type === 'h2'} -

{text}

+

{text}

{:else if type === 'h3'} -

{text}

+

{text}

{:else if type === 'h4'} -

{text}

+

{text}

{:else if type === 'h5'} -
{text}
+
{text}
{:else if type === 'h6'} -
{text}
+
{text}
{/if} diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte index b6d3c159e9..96fc09e025 100644 --- a/packages/standard-components/src/Text.svelte +++ b/packages/standard-components/src/Text.svelte @@ -4,45 +4,35 @@ export let text = "" export let className = "" - export let formattingTag = "" - - export let fontFamily = "" - export let fontSize = "1em" - export let textAlign = "" - export let verticalAlign = "" - export let color = "" + export let type = "" export let _bb - const isTag = tag => (formattingTag || "").indexOf(tag) > -1 - - $: style = buildStyle({ - "font-size": fontSize, - "font-family": fontFamily, - color, - }) + const isTag = tag => type === tag {#if isTag('none')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else}{text}{/if} + {text} +{:else if isTag('bold')} + {text} +{:else if isTag('strong')} + {text} +{:else if isTag('italic')} + {text} +{:else if isTag('emphasis')} + {text} +{:else if isTag('mark')} + {text} +{:else if isTag('small')} + {text} +{:else if isTag('del')} + {text} +{:else if isTag('ins')} + {text} +{:else if isTag('sub')} + {text} +{:else if isTag('sup')} + {text} +{:else} + {text} +{/if} From 017ac7aced1de768a943e0897eeadf118508aa1a Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 20 May 2020 11:55:25 +0100 Subject: [PATCH 10/24] Settings, Tidyup and Refactor --- .../ComponentPropertiesPanel.svelte | 12 ++-- .../userInterface/ComponentsHierarchy.svelte | 1 - .../ComponentsHierarchyChildren.svelte | 1 - .../userInterface/DesignView.svelte | 26 +++++--- .../userInterface/PropertyControl.svelte | 12 ++-- .../userInterface/PropertyGroup.svelte | 14 ++-- .../userInterface/SettingsView.svelte | 34 ++++++---- .../userInterface/propertyCategories.js | 66 +++++++++---------- .../userInterface/temporaryPanelStructure.js | 18 ++++- packages/standard-components/src/Link.svelte | 38 +---------- 10 files changed, 109 insertions(+), 113 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index b1b07c514e..507d04c356 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -32,11 +32,13 @@ $: components = $store.components $: componentInstance = $store.currentComponentInfo $: componentDefinition = $store.components[componentInstance._component] - $: componentPropDefinition = flattenedPanel.find( - //use for getting controls for each component property - c => c._component === componentInstance._component - ) - $: panelDefinition = componentPropDefinition + $: componentPropDefinition = + flattenedPanel.find( + //use for getting controls for each component property + c => c._component === componentInstance._component + ) || {} + + $: panelDefinition = componentPropDefinition.properties ? componentPropDefinition.properties[selectedCategory.value] : {} diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 31ada23230..56b0af8814 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -45,7 +45,6 @@ } const changeScreen = screen => { - debugger store.setCurrentScreen(screen.title) $goto(`./:page/${screen.title}`) } diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index 36d401f500..c7b426b02b 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -37,7 +37,6 @@ const selectComponent = component => { // Set current component - debugger store.selectComponent(component) // Get ID path diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 612def10b0..4b505420c6 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -33,14 +33,20 @@
- {#each propertyGroupNames as groupName} - - {/each} + {#if propertyGroupNames.length > 0} + {#each propertyGroupNames as groupName} + + {/each} + {:else} +
+ This component does not have any design properties +
+ {/if}
@@ -58,4 +64,8 @@ .design-view-property-groups { flex: 1; } + + .no-design { + text-align: center; + } diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index 99d91fcbd8..600005b5b6 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -5,18 +5,20 @@ export let control = null export let key = "" export let value = "" - export let valueType = "" export let props = {} export let onChange = () => {} function handleChange(key, v) { - !!v.target - ? onChange(name, key, valueType ? v.target[valueType] : v.target.value) - : onChange(name, key, v) + if (v.target) { + let val = props.valueType ? v.target[props.valueType] : v.target.value + onChange(key, val) + } else { + onChange(key, v) + } } const handleValueType = value => - valueType ? { [valueType]: value } : { value } + props.valueType ? { [props.valueType]: value } : { value }
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index e1e3a98980..d15df62545 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -11,12 +11,6 @@ const capitalize = name => name[0].toUpperCase() + name.slice(1) - function onChange(key, v) { - !!v.target - ? onStyleChanged(name, key, v.target.value) - : onStyleChanged(name, key, v) - } - $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill" @@ -33,10 +27,10 @@ + key={props.key} + value={componentInstance['_styles'][props.key]} + onChange={(key, value) => onStyleChanged(name, key, value)} + props={{ ...excludeProps(props, ['control', 'label']) }} /> {/each}
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index fb017f47db..c945f90bdd 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -15,14 +15,26 @@ } -{#each panelDefinition as definition} - {#if propExistsOnComponentDef(definition.key)} - - {/if} -{/each} +{#if panelDefinition.length > 0} + {#each panelDefinition as definition} + {#if propExistsOnComponentDef(definition.key)} + + {/if} + {/each} +{:else} +
+ This component does not have any settings. +
+{/if} + + diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 6f7feaae45..99cd42638b 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -8,7 +8,7 @@ import InputGroup from "../common/Inputs/InputGroup.svelte" export const layout = [ { label: "Direction", - cssKey: "flex-direction", + key: "flex-direction", control: OptionSelect, initialValue: "columnReverse", options: [ @@ -18,11 +18,11 @@ export const layout = [ { label: "column-reverse", value: "columnReverse" }, ], }, - { label: "Justify", cssKey: "justify-content", control: Input }, - { label: "Align", cssKey: "align-items", control: Input }, + { label: "Justify", key: "justify-content", control: Input }, + { label: "Align", key: "align-items", control: Input }, { label: "Wrap", - cssKey: "flex-wrap", + key: "flex-wrap", control: OptionSelect, options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], }, @@ -37,26 +37,26 @@ const spacingMeta = [ export const spacing = [ { label: "Padding", - cssKey: "padding", + key: "padding", control: InputGroup, meta: spacingMeta, }, - { label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta }, + { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta }, ] export const size = [ - { label: "Width", cssKey: "width", control: Input }, - { label: "Height", cssKey: "height", control: Input }, - { label: "Min W", cssKey: "min-width", control: Input }, - { label: "Min H", cssKey: "min-height", control: Input }, - { label: "Max W", cssKey: "max-width", control: Input }, - { label: "Max H", cssKey: "max-height", control: Input }, + { label: "Width", key: "width", control: Input }, + { label: "Height", key: "height", control: Input }, + { label: "Min W", key: "min-width", control: Input }, + { label: "Min H", key: "min-height", control: Input }, + { label: "Max W", key: "max-width", control: Input }, + { label: "Max H", key: "max-height", control: Input }, ] export const position = [ { label: "Position", - cssKey: "position", + key: "position", control: OptionSelect, options: [ { label: "static" }, @@ -71,7 +71,7 @@ export const position = [ export const typography = [ { label: "Font", - cssKey: "font-family", + key: "font-family", control: OptionSelect, options: [ { label: "initial" }, @@ -87,7 +87,7 @@ export const typography = [ }, { label: "Weight", - cssKey: "font-weight", + key: "font-weight", control: OptionSelect, options: [ { label: "normal" }, @@ -96,28 +96,28 @@ export const typography = [ { label: "lighter" }, ], }, - { label: "size", cssKey: "font-size", control: Input }, - { label: "Line H", cssKey: "line-height", control: Input }, + { label: "size", key: "font-size", control: Input }, + { label: "Line H", key: "line-height", control: Input }, { label: "Color", - cssKey: "color", + key: "color", control: OptionSelect, options: ["black", "red", "white", "blue", "green"], }, { label: "align", - cssKey: "text-align", + key: "text-align", control: OptionSelect, options: ["initial", "left", "right", "center", "justify"], }, //custom - { label: "transform", cssKey: "text-transform", control: Input }, //custom - { label: "style", cssKey: "font-style", control: Input }, //custom + { label: "transform", key: "text-transform", control: Input }, //custom + { label: "style", key: "font-style", control: Input }, //custom ] export const background = [ { label: "Background", - cssKey: "background", + key: "background", control: OptionSelect, options: [ { label: "white" }, @@ -127,26 +127,26 @@ export const background = [ { label: "black" }, ], }, - { label: "Image", cssKey: "image", control: Input }, //custom + { label: "Image", key: "image", control: Input }, //custom ] export const border = [ - { label: "Radius", cssKey: "border-radius", control: Input }, - { label: "Width", cssKey: "border-width", control: Input }, //custom - { label: "Color", cssKey: "border-color", control: Input }, - { label: "Style", cssKey: "border-style", control: Input }, + { label: "Radius", key: "border-radius", control: Input }, + { label: "Width", key: "border-width", control: Input }, //custom + { label: "Color", key: "border-color", control: Input }, + { label: "Style", key: "border-style", control: Input }, ] export const effects = [ - { label: "Opacity", cssKey: "opacity", control: Input }, - { label: "Rotate", cssKey: "transform", control: Input }, //needs special control - { label: "Shadow", cssKey: "box-shadow", control: Input }, + { label: "Opacity", key: "opacity", control: Input }, + { label: "Rotate", key: "transform", control: Input }, //needs special control + { label: "Shadow", key: "box-shadow", control: Input }, ] export const transitions = [ - { label: "Property", cssKey: "transition-property", control: Input }, - { label: "Duration", cssKey: "transition-timing-function", control: Input }, - { label: "Ease", cssKey: "transition-ease", control: Input }, + { label: "Property", key: "transition-property", control: Input }, + { label: "Duration", key: "transition-timing-function", control: Input }, + { label: "Ease", key: "transition-ease", control: Input }, ] export const all = { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 449393b67e..58a8a2c674 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -201,7 +201,9 @@ export default { description: "A basic component for displaying icons", icon: "ri-sun-fill", children: [], - properties: { design: { ...all } }, + properties: { + design: { ...all }, + }, }, { _component: "@budibase/standard-components/link", @@ -209,7 +211,19 @@ export default { description: "A basic link component for internal and external links", icon: "ri-link", children: [], - properties: { design: { ...all } }, + properties: { + design: { ...all }, + settings: [ + { label: "Text", key: "text", control: Input }, + { label: "Url", key: "url", control: Input }, + { + label: "Open New Tab", + key: "openInNewTab", + valueType: "checked", + control: Checkbox, + }, + ], + }, }, ], }, diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte index 0ac3d9f628..ef0b71d62e 100644 --- a/packages/standard-components/src/Link.svelte +++ b/packages/standard-components/src/Link.svelte @@ -4,11 +4,6 @@ export let url = "" export let text = "" export let openInNewTab = false - export let color - export let hoverColor - export let underline = false - export let fontFamily - export let fontSize export let _bb @@ -16,43 +11,12 @@ $: anchorElement && !text && _bb.attachChildren(anchorElement) $: target = openInNewTab ? "_blank" : "_self" - $: cssVariables = { - hoverColor, - color, - textDecoration: underline ? "underline" : "none", - fontSize, - fontFamily, - } - $: classes = createClasses(cssVariables) - - {text} - +{text} From facd99f58a5c54c24b3f9b5ca671112c30fc2bda Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 21 May 2020 14:28:32 +0100 Subject: [PATCH 11/24] Stable property panel --- packages/builder/package.json | 3 +- .../builder/src/builderStore/generate_css.js | 4 +- .../src/components/common/Colorpicker.svelte | 136 ++++++++++++------ .../common/Inputs/InputGroup.svelte | 16 +-- .../userInterface/PropertyControl.svelte | 11 +- .../userInterface/SettingsView.svelte | 3 + .../userInterface/propertyCategories.js | 15 +- .../userInterface/temporaryPanelStructure.js | 4 +- packages/server/builder/nano.min.css | 1 - .../standard-components/src/Button.svelte | 6 +- 10 files changed, 122 insertions(+), 77 deletions(-) delete mode 100644 packages/server/builder/nano.min.css diff --git a/packages/builder/package.json b/packages/builder/package.json index d92f64ce17..4e639f2eeb 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -79,7 +79,8 @@ "rollup-plugin-svelte": "^5.0.3", "rollup-plugin-terser": "^4.0.4", "rollup-plugin-url": "^2.2.2", - "svelte": "^3.0.0" + "svelte": "^3.0.0", + "svelte-color-picker": "^1.0.7" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" } diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 279c800396..f592e250bd 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -121,7 +121,9 @@ export const generate_css = style => { return (str += `${key}: ${value};\n`) } } else if (Array.isArray(value)) { - return (str += `${key}: ${value.map(v => `${v}px`).join(" ")};\n`) + return (str += `${key}: ${value + .map(v => (!/px$/.test(v) ? `${v}px` : v)) + .join(" ")};\n`) } }, "") diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 28ca92554d..0b52cebe5f 100644 --- a/packages/builder/src/components/common/Colorpicker.svelte +++ b/packages/builder/src/components/common/Colorpicker.svelte @@ -1,13 +1,78 @@ + +
toggleColorpicker(true)} + class="color-preview" + style={`background: ${value}`} /> + +
+
toggleColorpicker(false)} /> +
+ +
+
+ + + diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index 7976cabd55..7f6d20337b 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -3,13 +3,15 @@ export let meta = [] export let label = "" - export let values = [] + export let value = [0, 0, 0, 0] export let type = "number" export let onChange = () => {} - let _values = values.map(v => v) - - // $: onChange(_values) + function handleChange(val, idx) { + value.splice(idx, 1, val) + value = value + onChange(value) + }
@@ -19,8 +21,8 @@ (_values[i] = e.target.value)} /> + value={value[i] === 0 ? '' : value[i]} + on:change={e => handleChange(e.target.value || 0, i)} /> {/each}
@@ -36,8 +38,6 @@ .inputs { flex: 1; - /* display: flex; - justify-content: space-between; */ } input { diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index 600005b5b6..ff0d332a76 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -4,21 +4,22 @@ export let label = "" export let control = null export let key = "" - export let value = "" + export let value export let props = {} export let onChange = () => {} function handleChange(key, v) { if (v.target) { - let val = props.valueType ? v.target[props.valueType] : v.target.value + let val = props.valueKey ? v.target[props.valueKey] : v.target.value onChange(key, val) } else { onChange(key, v) } } - const handleValueType = value => - props.valueType ? { [props.valueType]: value } : { value } + //Incase the component has a different value key name + const handlevalueKey = value => + props.valueKey ? { [props.valueKey]: value } : { value }
@@ -26,7 +27,7 @@
handleChange(key, val)} onChange={val => handleChange(key, val)} {...props} /> diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index c945f90bdd..56ede7bc91 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -1,6 +1,7 @@ + + {#if panelDefinition.length > 0} {#each panelDefinition as definition} {#if propExistsOnComponentDef(definition.key)} diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 99cd42638b..0ee26d958e 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,6 +1,7 @@ import Input from "../common/Input.svelte" import OptionSelect from "./OptionSelect.svelte" import InputGroup from "../common/Inputs/InputGroup.svelte" +import Colorpicker from "../common/Colorpicker.svelte" /* TODO: Allow for default values for all properties */ @@ -101,8 +102,7 @@ export const typography = [ { label: "Color", key: "color", - control: OptionSelect, - options: ["black", "red", "white", "blue", "green"], + control: Colorpicker, }, { label: "align", @@ -118,14 +118,7 @@ export const background = [ { label: "Background", key: "background", - control: OptionSelect, - options: [ - { label: "white" }, - { label: "red" }, - { label: "blue" }, - { label: "green" }, - { label: "black" }, - ], + control: Colorpicker, }, { label: "Image", key: "image", control: Input }, //custom ] @@ -133,7 +126,7 @@ export const background = [ export const border = [ { label: "Radius", key: "border-radius", control: Input }, { label: "Width", key: "border-width", control: Input }, //custom - { label: "Color", key: "border-color", control: Input }, + { label: "Color", key: "border-color", control: Colorpicker }, { label: "Style", key: "border-style", control: Input }, ] diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 58a8a2c674..9beca685db 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -189,7 +189,7 @@ export default { { label: "Disabled", key: "disabled", - valueType: "checked", + valueKey: "checked", control: Checkbox, }, ] @@ -219,7 +219,7 @@ export default { { label: "Open New Tab", key: "openInNewTab", - valueType: "checked", + valueKey: "checked", control: Checkbox, }, ], diff --git a/packages/server/builder/nano.min.css b/packages/server/builder/nano.min.css deleted file mode 100644 index fb7e96080f..0000000000 --- a/packages/server/builder/nano.min.css +++ /dev/null @@ -1 +0,0 @@ -/*! Pickr 1.5.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat 50%;background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, ');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{-webkit-filter:brightness(1.05);filter:brightness(1.05)}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{-webkit-filter:brightness(.975);filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{-webkit-filter:brightness(.925);filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:currentColor;width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url('data:image/svg+xml;utf8, ');background-size:100%,.25em} \ No newline at end of file diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte index 159c6776b0..eac2150274 100644 --- a/packages/standard-components/src/Button.svelte +++ b/packages/standard-components/src/Button.svelte @@ -17,12 +17,10 @@ @@ -85,13 +85,14 @@ .top-nav { flex: 0 0 auto; - height: 48px; - background: #0d203b; + height: 60px; + background: #fff; padding: 0px 20px 0 20px; display: flex; box-sizing: border-box; justify-content: space-between; align-items: center; + border-bottom: 1px solid var(--grey); } .content > div { @@ -110,8 +111,8 @@ .topnavitem { cursor: pointer; - color: rgb(255, 255, 255, 0.6); - margin: 0px 10px; + color: var(--ink-lighter); + margin: 0px 00px 0px 20px; padding-top: 4px; font-weight: 500; font-size: 1rem; @@ -121,19 +122,19 @@ } .topnavitem:hover { - color: rgb(255, 255, 255, 0.8); + color: var(--ink-light); font-weight: 500; } .active { - color: white; - font-weight: 600; + color: var(--ink); + font-weight: 500; } .topnavitemright { cursor: pointer; - color: rgb(255, 255, 255, 0.6); - margin: 0px 5px; + color: var(--ink-light); + margin: 0px 20px 0px 0px; padding-top: 4px; font-weight: 500; font-size: 1rem; @@ -155,7 +156,8 @@ cursor: pointer; outline: none; height: 40px; - padding: 8px 10px 8px 0; + padding: 0px 10px 8px 0; + align-items: center; } .home-logo:hover { @@ -167,7 +169,7 @@ } .home-logo img { - height: 100%; + height: 40px; } span:first-letter { text-transform: capitalize; diff --git a/packages/server/builder/assets/bb-logo.svg b/packages/server/builder/assets/bb-logo.svg new file mode 100644 index 0000000000..7d115faefc --- /dev/null +++ b/packages/server/builder/assets/bb-logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + From e20b65c13b3c9d108ecef5c36fada9bfe36e2859 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Sat, 23 May 2020 13:00:38 +0100 Subject: [PATCH 15/24] Panel titles updated Panel titles updated to represent designs Further work is required to use global styles to control this --- .../src/components/nav/BackendNav.svelte | 8 +++---- .../nav/SchemaManagementDrawer.svelte | 8 +++---- .../ComponentsPaneSwitcher.svelte | 18 +++++--------- packages/builder/src/global.css | 2 +- .../[application]/backend/_layout.svelte | 9 +++++++ .../[application]/frontend/_layout.svelte | 24 +++++++------------ 6 files changed, 30 insertions(+), 39 deletions(-) diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte index 64812353fd..8a7fd6bb90 100644 --- a/packages/builder/src/components/nav/BackendNav.svelte +++ b/packages/builder/src/components/nav/BackendNav.svelte @@ -81,12 +81,10 @@ .hierarchy-title { align-items: center; - text-transform: uppercase; - font-size: 13px; - font-weight: bold; - opacity: 0.6; - letter-spacing: 1px; + font-size: 18px; + font-weight: 700; text-rendering: optimizeLegibility; + color: var(--ink); } .hierarchy { diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte index 7d678c9104..cc9e5d86a7 100644 --- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte +++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte @@ -125,12 +125,10 @@ .hierarchy-title { align-items: center; - text-transform: uppercase; - font-size: 13px; - font-weight: bold; - opacity: 0.6; - letter-spacing: 1px; + font-size: 18px; + font-weight: 700; text-rendering: optimizeLegibility; + color: var(--ink); } .hierarchy { diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index 9ca5b1e122..1c7e2e8693 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -24,7 +24,7 @@
+
- {#await promise} -
- -
- {:then result} - - {:catch err} -

{err}

- {/await} -
+ {#await promise} +
+ +
+ {:then result} + + {:catch err} +

{err}

+ {/await} +
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index f31a0b2d0d..48ea302c33 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -50,9 +50,6 @@
From 9dc65eef9882841f745dda28032ee3099dfdc529 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 26 May 2020 14:27:33 +0100 Subject: [PATCH 21/24] New jest tests for generate-css --- .../builder/src/builderStore/generate_css.js | 20 +- packages/builder/tests/generate_css.spec.js | 331 ++---------------- 2 files changed, 49 insertions(+), 302 deletions(-) diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 093b43337c..5826d4f824 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -23,16 +23,28 @@ export const generate_css = style => { return (str += `${key}: ${value};\n`) } } else if (Array.isArray(value)) { - return (str += `${key}: ${value - .map(v => (!/px$/.test(v) ? `${v}px` : v)) - .join(" ")};\n`) + if (value.length > 0 && !value.every(v => v === "")) { + return (str += `${key}: ${value + .map(generate_array_styles) + .join(" ")};\n`) + } } }, "") return (cssString || "").trim() } -const apply_class = (id, name = "element", styles, selector) => { +export const generate_array_styles = item => { + let safeItem = item === "" ? 0 : item + let hasPx = new RegExp("px$") + if (!hasPx.test(safeItem)) { + return `${safeItem}px` + } else { + return safeItem + } +} + +export const apply_class = (id, name = "element", styles, selector) => { if (selector === "normal") { return `.${name}-${id} {\n${styles}\n}` } else { diff --git a/packages/builder/tests/generate_css.spec.js b/packages/builder/tests/generate_css.spec.js index 5fa4a94db9..b2a7fca64d 100644 --- a/packages/builder/tests/generate_css.spec.js +++ b/packages/builder/tests/generate_css.spec.js @@ -1,320 +1,55 @@ import { generate_css, - make_margin, generate_screen_css, + generate_array_styles } from "../src/builderStore/generate_css.js" -describe("make_margin", () => { - test("it should generate a valid rule", () => { - expect(make_margin(["1", "1", "1", "1"])).toEqual("1px 1px 1px 1px") - }) - - test("empty values should output 0", () => { - expect(make_margin(["1", "1", "", ""])).toEqual("1px 1px 0px 0px") - expect(make_margin(["1", "", "", "1"])).toEqual("1px 0px 0px 1px") - expect(make_margin(["", "", "", ""])).toEqual("0px 0px 0px 0px") - }) -}) - describe("generate_css", () => { - test("it should generate a valid css rule: grid-area", () => { - expect(generate_css({ layout: { gridarea: ["", "", "", ""] } })).toEqual({ - layout: "", - position: "", - }) + + test("Check how partially empty arrays are handled", () => { + expect(["", "5", "", ""].map(generate_array_styles)).toEqual(["0px", "5px", "0px", "0px"]) }) - test("it should generate a valid css rule: grid-gap", () => { - expect(generate_css({ layout: { gap: "10" } })).toEqual({ - layout: "grid-gap: 10px;\ndisplay: grid;", - position: "", - }) + test("Check how array styles are output", () => { + expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;") }) - test("it should generate a valid css rule: column 1", () => { - expect(generate_css({ position: { column: ["", ""] } })).toEqual({ - layout: "", - position: "", - }) + test("Check handling of an array with empty string values", () => { + expect(generate_css({ padding: ["", "", "", ""] })).toBe("") }) - test("it should generate a valid css rule: column 2", () => { - expect(generate_css({ position: { column: ["1", ""] } })).toEqual({ - position: "grid-column-start: 1;", - layout: "", - }) + test("Check handling of an empty array", () => { + expect(generate_css({ margin: [] })).toBe("") }) - test("it should generate a valid css rule: column 3", () => { - expect(generate_css({ position: { column: ["", "1"] } })).toEqual({ - position: "grid-column-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: column 4", () => { - expect(generate_css({ position: { column: ["1", "1"] } })).toEqual({ - position: "grid-column-start: 1;\ngrid-column-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 1", () => { - expect(generate_css({ position: { row: ["", ""] } })).toEqual({ - layout: "", - position: "", - }) - }) - - test("it should generate a valid css rule: row 2", () => { - expect(generate_css({ position: { row: ["1", ""] } })).toEqual({ - position: "grid-row-start: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 3", () => { - expect(generate_css({ position: { row: ["", "1"] } })).toEqual({ - position: "grid-row-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 4", () => { - expect(generate_css({ position: { row: ["1", "1"] } })).toEqual({ - position: "grid-row-start: 1;\ngrid-row-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: padding 1", () => { - expect( - generate_css({ position: { padding: ["1", "1", "1", "1"] } }) - ).toEqual({ - position: "padding: 1px 1px 1px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: padding 2", () => { - expect(generate_css({ position: { padding: ["1", "", "", "1"] } })).toEqual( - { - position: "padding: 1px 0px 0px 1px;", - layout: "", - } - ) - }) - - test("it should generate a valid css rule: margin 1", () => { - expect( - generate_css({ position: { margin: ["1", "1", "1", "1"] } }) - ).toEqual({ - position: "margin: 1px 1px 1px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: margin 2", () => { - expect(generate_css({ position: { margin: ["1", "", "", "1"] } })).toEqual({ - position: "margin: 1px 0px 0px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: z-index 1", () => { - expect(generate_css({ position: { zindex: "" } })).toEqual({ - position: "", - layout: "", - }) - }) - - test("it should generate a valid css rule: z-index 2", () => { - expect(generate_css({ position: { zindex: "1" } })).toEqual({ - position: "z-index: 1;", - layout: "", - }) + test("Check handling of valid font property", () => { + expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;") }) }) + describe("generate_screen_css", () => { - test("it should compile the css for a list of components", () => { - const components = [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 1, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 2, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 3, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 4, - }, - ] - - const compiled = `.pos-1 { -margin: 1px 1px 1px 1px; -} -.lay-1 { - -} -.pos-2 { -margin: 1px 1px 1px 1px; -} -.lay-2 { - -} -.pos-3 { -margin: 1px 1px 1px 1px; -} -.lay-3 { - -} -.pos-4 { -margin: 1px 1px 1px 1px; -} -.lay-4 { - -}` - - expect(generate_screen_css(components)).toEqual(compiled) + const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } } + + test("Test generation of normal css styles", () => { + expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}") }) - test("it should compile the css for a list of components", () => { - const components = [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 1, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 2, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 3, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 4, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 5, - _children: [], - }, - ], - }, - ], - }, - ], - }, - ], - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 6, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 7, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 8, - }, - ] + const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } } - const compiled = `.pos-1 { -margin: 1px 1px 1px 1px; -} -.lay-1 { - -} -.pos-2 { -margin: 1px 1px 1px 1px; -} -.lay-2 { - -} -.pos-3 { -margin: 1px 1px 1px 1px; -} -.lay-3 { - -} -.pos-4 { -margin: 1px 1px 1px 1px; -} -.lay-4 { - -} -.pos-5 { -margin: 1px 1px 1px 1px; -} -.lay-5 { - -} -.pos-6 { -margin: 1px 1px 1px 1px; -} -.lay-6 { - -} -.pos-7 { -margin: 1px 1px 1px 1px; -} -.lay-7 { - -} -.pos-8 { -margin: 1px 1px 1px 1px; -} -.lay-8 { - -}` - - expect(generate_screen_css(components)).toEqual(compiled) + test("Test generation of hover css styles", () => { + expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}") }) -}) + + const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } } + + test("Test generation of selection css styles", () => { + expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}") + }) + + const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } } + + test.only("Testing handling of empty component styles", () => { + expect(generate_screen_css([emptyComponent])).toBe("") + }) +}) \ No newline at end of file From 9f42b80977d0c1d39674d7820629b1a9ba733df8 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 26 May 2020 15:08:59 +0100 Subject: [PATCH 22/24] Removing Svelte Color Picker --- packages/builder/package.json | 5 ++--- packages/builder/src/components/common/Colorpicker.svelte | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index 5d06fee71d..086d22382a 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -79,8 +79,7 @@ "rollup-plugin-svelte": "^5.0.3", "rollup-plugin-terser": "^4.0.4", "rollup-plugin-url": "^2.2.2", - "svelte": "^3.0.0", - "svelte-color-picker": "^1.0.7" + "svelte": "^3.0.0" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" -} \ No newline at end of file +} diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 0b52cebe5f..8cff0e24bd 100644 --- a/packages/builder/src/components/common/Colorpicker.svelte +++ b/packages/builder/src/components/common/Colorpicker.svelte @@ -1,6 +1,6 @@ -
    +
    {#each categories as category}
  • onClick(category)} @@ -13,31 +13,23 @@
  • {/each} -
+
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 507d04c356..3ab8c522f0 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -117,7 +117,7 @@ } .component-props-container { - margin-top: 10px; + margin-top: 20px; flex: 1 1 auto; } diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index c85e23403c..185b1d640d 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -54,13 +54,13 @@ height: 100%; display: flex; flex-direction: column; - padding: 20px 0; + padding: 20px 20px; border-left: solid 1px #e8e8ef; } .switcher { display: flex; - margin: 0px 20px 20px 20px; + margin: 0px 20px 20px 0px; } .switcher > button { diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte index abc4a3dc28..9e11a546e3 100644 --- a/packages/builder/src/components/userInterface/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -19,16 +19,16 @@ diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index cd1bad35f7..82acb8b3f9 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -43,21 +43,24 @@ diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 240618a4c7..6d0cf63ab0 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -42,14 +42,15 @@ display: flex; flex-direction: column; height: auto; - background: #fbfbfb; - margin: 5px; - padding: 5px; + background: var(--grey-light); + margin: 0px 0px 4px 0px; + padding: 8px 12px; + justify-content: center; + border-radius: 4px; } .property-group-name { cursor: pointer; - flex: 0 0 20px; display: flex; flex-flow: row nowrap; } @@ -61,7 +62,7 @@ font-size: 14px; font-weight: 500; letter-spacing: 0.14px; - color: #393c44; + color: var(--ink); } .icon { diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index df9762fb07..c480a75bfa 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -127,7 +127,6 @@ .root { display: grid; grid-template-columns: 275px 1fr 275px; - height: 100%; width: 100%; background: var(--grey-light); } @@ -136,7 +135,6 @@ .root { display: grid; grid-template-columns: 300px 1fr 300px; - height: 100%; width: 100%; background: var(--grey-light); } @@ -162,8 +160,6 @@ .components-pane { grid-column: 3; background-color: var(--white); - min-height: 0px; - overflow-y: scroll; } .components-nav-page { From ad637348c977b36bc0cfe06355459ca73854d8a5 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Wed, 27 May 2020 21:51:32 +0100 Subject: [PATCH 24/24] workflow UI, orhestrator for executing workflows --- .../src/builderStore/store/workflow.js | 3 +- .../ComponentPropertiesPanel.svelte | 4 +- .../EventsEditor/EventsEditor.svelte | 6 +- packages/builder/src/index.html | 3 - packages/builder/src/main.js | 1 - .../workflow/BlockPanel/index.js | 1 - .../workflow/SetupPanel/SetupPanel.svelte | 88 +++++++ .../SetupPanel/WorkflowBlockSetup.svelte | 17 ++ .../workflow/SetupPanel/index.js | 1 + .../WorkflowBuilder/WorkflowBuilder.svelte | 51 ++++ .../svelte-flows/FlowChart.svelte | 23 ++ .../svelte-flows/FlowItem.svelte | 33 +++ .../svelte-flows/api.js} | 0 .../WorkflowBuilder/svelte-flows/index.js | 0 .../workflow/WorkflowList/index.js | 1 - .../BlockList/BlockList.svelte} | 44 +--- .../BlockList/WorkflowBlock.svelte | 51 ++++ .../WorkflowList/CreateWorkflowModal.svelte | 1 - .../WorkflowList/WorkflowList.svelte | 35 ++- .../WorkflowPanel/WorkflowPanel.svelte | 61 +++++ .../blockDefinitions.js | 36 ++- .../workflow/WorkflowPanel/index.js | 3 + .../[application]/workflow/_layout.svelte | 10 +- .../workflow/flowy/WorkflowBuilder.svelte | 49 ---- .../pages/[application]/workflow/index.svelte | 2 +- .../workflow/orchestrator/index.js | 38 --- packages/client/src/api/workflow/index.js | 1 - .../client/src/api/workflow/orchestrator.js | 14 +- packages/server/package.json | 1 + .../workflow/actions/SEND_EMAIL.js | 27 ++ .../src/api/controllers/workflow/index.js | 2 +- packages/server/yarn.lock | 247 +++++++++++++++++- 32 files changed, 677 insertions(+), 177 deletions(-) delete mode 100644 packages/builder/src/pages/[application]/workflow/BlockPanel/index.js create mode 100644 packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte create mode 100644 packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte create mode 100644 packages/builder/src/pages/[application]/workflow/SetupPanel/index.js create mode 100644 packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte create mode 100644 packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte create mode 100644 packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte rename packages/builder/src/pages/[application]/workflow/{flowy/apl.js => WorkflowBuilder/svelte-flows/api.js} (100%) create mode 100644 packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/index.js delete mode 100644 packages/builder/src/pages/[application]/workflow/WorkflowList/index.js rename packages/builder/src/pages/[application]/workflow/{BlockPanel/BlockPanel.svelte => WorkflowPanel/BlockList/BlockList.svelte} (57%) create mode 100644 packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte rename packages/builder/src/pages/[application]/workflow/{ => WorkflowPanel}/WorkflowList/CreateWorkflowModal.svelte (98%) rename packages/builder/src/pages/[application]/workflow/{ => WorkflowPanel}/WorkflowList/WorkflowList.svelte (74%) create mode 100644 packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte rename packages/builder/src/pages/[application]/workflow/{BlockPanel => WorkflowPanel}/blockDefinitions.js (62%) create mode 100644 packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js delete mode 100644 packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte delete mode 100644 packages/builder/src/pages/[application]/workflow/orchestrator/index.js create mode 100644 packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js diff --git a/packages/builder/src/builderStore/store/workflow.js b/packages/builder/src/builderStore/store/workflow.js index 6ce68e2fa9..f1eb8b93f5 100644 --- a/packages/builder/src/builderStore/store/workflow.js +++ b/packages/builder/src/builderStore/store/workflow.js @@ -36,9 +36,10 @@ const workflowActions = store => ({ select: workflow => { store.update(state => { state.selectedWorkflowId = workflow._id + state.selectedWorkflowBlock = null return state; }) - } + } }); export const getWorkflowStore = () => { diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 3ab8c522f0..a255e92d90 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -25,7 +25,7 @@ let categories = [ { value: "design", name: "Design" }, { value: "settings", name: "Settings" }, - { value: "actions", name: "Actions" }, + { value: "events", name: "Events" } ] let selectedCategory = categories[0] @@ -93,6 +93,8 @@ {componentDefinition} {panelDefinition} onChange={onPropChanged} /> + {:else if selectedCategory.value === 'events'} + {/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte index c85607bd8f..2a61912173 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte @@ -25,16 +25,14 @@ export const EVENT_TYPE = "event" export let component - export let components let modalOpen = false let events = [] let selectedEvent = null $: { - const componentDefinition = components[component._component] - events = Object.keys(componentDefinition.props) - .filter(propName => componentDefinition.props[propName] === EVENT_TYPE) + events = Object.keys(component) + .filter(propName => ["onChange", "onClick", "onLoad"].includes(propName)) .map(propName => ({ name: propName, handlers: component[propName] || [], diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html index 65239c2e69..23c5aaf6c0 100644 --- a/packages/builder/src/index.html +++ b/packages/builder/src/index.html @@ -10,18 +10,15 @@ - - - \ No newline at end of file diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js index f664629c66..eb1357fde2 100644 --- a/packages/builder/src/main.js +++ b/packages/builder/src/main.js @@ -1,5 +1,4 @@ import "./global.css" -import "./flowy.css"; import "./fonts.css" import "./budibase.css" import "/assets/roboto-v20-latin-ext_latin-300" diff --git a/packages/builder/src/pages/[application]/workflow/BlockPanel/index.js b/packages/builder/src/pages/[application]/workflow/BlockPanel/index.js deleted file mode 100644 index 73ebcd6949..0000000000 --- a/packages/builder/src/pages/[application]/workflow/BlockPanel/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as BlockPanel } from "./BlockPanel.svelte"; \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte new file mode 100644 index 0000000000..1bfd17779a --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte @@ -0,0 +1,88 @@ + + +
+
+ Setup +
+
+ {#if workflowBlock} + + + {:else if $workflowStore.selectedWorkflowId} + +
+ +
+ +
+
+
+ + Some User Access Stuff Here +
+ + {/if} +
+
+ + diff --git a/packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte new file mode 100644 index 0000000000..1613a78f18 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte @@ -0,0 +1,17 @@ + + + +{#each workflowArgs as workflowArg} +
+ +
+ +
+
+{/each} diff --git a/packages/builder/src/pages/[application]/workflow/SetupPanel/index.js b/packages/builder/src/pages/[application]/workflow/SetupPanel/index.js new file mode 100644 index 0000000000..800406ff7a --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/index.js @@ -0,0 +1 @@ +export { default as SetupPanel } from "./SetupPanel.svelte"; \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte new file mode 100644 index 0000000000..b9e43e7847 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte @@ -0,0 +1,51 @@ + + +
+ +
diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte new file mode 100644 index 0000000000..d444c14848 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte @@ -0,0 +1,23 @@ + + +
+ {#each blocks as block, idx} + + {#if idx !== blocks.length - 1} + + {/if} + {/each} +
+ + diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte new file mode 100644 index 0000000000..d533e01fa8 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte @@ -0,0 +1,33 @@ + + +
+
{block.heading}
+
+

{block.body}

+
+ + diff --git a/packages/builder/src/pages/[application]/workflow/flowy/apl.js b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/api.js similarity index 100% rename from packages/builder/src/pages/[application]/workflow/flowy/apl.js rename to packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/api.js diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/index.js b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/index.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowList/index.js b/packages/builder/src/pages/[application]/workflow/WorkflowList/index.js deleted file mode 100644 index 18bd078eaa..0000000000 --- a/packages/builder/src/pages/[application]/workflow/WorkflowList/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as WorkflowList } from "./WorkflowList.svelte"; \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte similarity index 57% rename from packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte rename to packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte index 4f2bc3c5cc..66330f11b5 100644 --- a/packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte @@ -1,8 +1,10 @@
-
- Blocks - Props -
{#each SUB_TABS as tab}
{#each definitions as blockDefinition} -
- -
-
- -
-
-

{blockDefinition.name}

-

{blockDefinition.description}

-
-
-
+ {/each}
diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte similarity index 98% rename from packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte rename to packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte index 4420ab4db3..510b21704e 100644 --- a/packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte @@ -16,7 +16,6 @@ name, instanceId, }) - flowy.deleteBlocks(); onClosed() } diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte similarity index 74% rename from packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte rename to packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte index 5e1efe6868..ed28f1b2c2 100644 --- a/packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte @@ -23,17 +23,16 @@
-
- Workflows - -
+
    {#each $workflowStore.workflows as workflow}
  • workflowStore.actions.select(workflow)}> - + {workflow.name}
  • {/each} @@ -41,16 +40,8 @@
diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte new file mode 100644 index 0000000000..7de90a6e05 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte @@ -0,0 +1,61 @@ + + +
+
+ (selectedTab = 'WORKFLOWS')}> + Workflows + + {#if $workflowStore.selectedWorkflowId} + (selectedTab = 'ADD')}> + Add + + {/if} +
+ {#if selectedTab === 'WORKFLOWS'} + + {:else if selectedTab === 'ADD'} + + {/if} +
+ + diff --git a/packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js similarity index 62% rename from packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js rename to packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js index 2a90c8eeda..5920070a7a 100644 --- a/packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js @@ -1,6 +1,6 @@ const ACTIONS = { SET_STATE: { - name: "Update UI", + name: "Update UI State", icon: "", description: "Update your User Interface with some data.", type: "CLIENT", @@ -22,6 +22,24 @@ const ACTIONS = { icon: "ri-delete-bin-line", name: "Delete Record", type: "SERVER", + }, + FIND_RECORD: { + description: "Delete a record from your database.", + icon: "ri-delete-bin-line", + name: "Find Record", + type: "SERVER", + }, + CREATE_USER: { + description: "Create a new user.", + icon: "ri-user-add-fill", + name: "Create User", + type: "SERVER", + }, + SEND_EMAIL: { + description: "Send an email.", + icon: "ri-mail-open-fill", + name: "Send Email", + type: "SERVER", } }; @@ -49,11 +67,17 @@ const TRIGGERS = { }, }; -const UTILITIES = { - IFELSE: { - name: "If/Else", +const LOGIC = { + FILTER: { + name: "Filter", icon: "ri-git-branch-line", - description: "Perform different actions based on a condition", + description: "Filter any workflows which do not meet certain conditions.", + type: "CLIENT" + }, + DELAY: { + name: "Delay", + icon: "ri-git-branch-line", + description: "Delay the workflow until an amount of time has passed.", type: "CLIENT" }, } @@ -61,5 +85,5 @@ const UTILITIES = { export default { ACTIONS, TRIGGERS, - UTILITIES + LOGIC } \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js new file mode 100644 index 0000000000..dea50a6d41 --- /dev/null +++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js @@ -0,0 +1,3 @@ +export { default as WorkflowPanel } from "./WorkflowPanel.svelte"; +export { default as BlockList } from "./BlockList/BlockList.svelte"; +export { default as WorkflowList } from "./WorkflowList/WorkflowList.svelte"; \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte index 7b546e0397..54aa07717f 100644 --- a/packages/builder/src/pages/[application]/workflow/_layout.svelte +++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte @@ -1,20 +1,18 @@
diff --git a/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte b/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte deleted file mode 100644 index 2990eb9e86..0000000000 --- a/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - -
diff --git a/packages/builder/src/pages/[application]/workflow/index.svelte b/packages/builder/src/pages/[application]/workflow/index.svelte index 766d9efaea..817aa67552 100644 --- a/packages/builder/src/pages/[application]/workflow/index.svelte +++ b/packages/builder/src/pages/[application]/workflow/index.svelte @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/packages/builder/src/pages/[application]/workflow/orchestrator/index.js b/packages/builder/src/pages/[application]/workflow/orchestrator/index.js deleted file mode 100644 index 5f037c07ff..0000000000 --- a/packages/builder/src/pages/[application]/workflow/orchestrator/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import api from "builderStore/api"; - -class Orchestrator { - set strategy(strategy) { - this._stategy = strategy - } - - execute(workflow) { - this._strategy.execute(workflow); - } -} - -const ClientStrategy = { - execute: function(workflow) { - const block = workflow.next; - const EXECUTE_WORKFLOW_URL = `api/${workflow.instanceId}/workflows/${workflow._id}`; - - switch (block.type) { - case "CLIENT": - // fetch the workflow code from the server, then execute it here in the client - // catch any errors - // check against the conditions in the workflow - // if everything is fine, recurse - this.execute(workflow.next); - break; - case "SERVER": - // hit the server endpoint and wait for the response - // catch any errors - // check against the conditions in the workflow - // if everything is fine, recurse - await api.post() - break; - default: - break; - } - - } -} \ No newline at end of file diff --git a/packages/client/src/api/workflow/index.js b/packages/client/src/api/workflow/index.js index 7af5fc39dd..f9aa3403b3 100644 --- a/packages/client/src/api/workflow/index.js +++ b/packages/client/src/api/workflow/index.js @@ -2,7 +2,6 @@ import Orchestrator, { clientStrategy } from "./orchestrator"; export const triggerWorkflow = api => ({ workflow }) => { - console.log(workflow); const workflowOrchestrator = new Orchestrator( api, "inst_60dd510_700f7dc06735403e81d5af91072d7241" diff --git a/packages/client/src/api/workflow/orchestrator.js b/packages/client/src/api/workflow/orchestrator.js index 36c460876f..46b12f89a2 100644 --- a/packages/client/src/api/workflow/orchestrator.js +++ b/packages/client/src/api/workflow/orchestrator.js @@ -31,7 +31,7 @@ export default class Orchestrator { // Execute a workflow from a running budibase app export const clientStrategy = { context: {}, - bindContextArgs: function(args) { + bindContextArgs: function(args, api) { const mappedArgs = { ...args }; console.log("original args", args) @@ -50,12 +50,16 @@ export const clientStrategy = { // if the value is bound to state if (argValue.startsWith("$state")) { - const path = argValue.match("$context.", ""); - // pass in the value from context - mappedArgs[arg] = get(path, this.context); + const path = argValue.replace("$state.", ""); + // pass in the value from state + // TODO: not working + mappedArgs[arg] = api.getState(path); } } } + + console.log(mappedArgs); + return Object.values(mappedArgs); }, run: async function({ workflow, api, instanceId }) { @@ -85,7 +89,7 @@ export const clientStrategy = { url: EXECUTE_WORKFLOW_URL, body: { action: block.actionId, - args: block.args + args: this.bindContextArgs(block.args, api) } }); diff --git a/packages/server/package.json b/packages/server/package.json index 446679c5f0..6e2d095655 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -44,6 +44,7 @@ "@budibase/client": "^0.0.32", "@budibase/core": "^0.0.32", "@koa/router": "^8.0.0", + "@sendgrid/mail": "^7.1.1", "ajv": "^6.12.2", "bcryptjs": "^2.4.3", "dotenv": "^8.2.0", diff --git a/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js b/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js new file mode 100644 index 0000000000..072d61932f --- /dev/null +++ b/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js @@ -0,0 +1,27 @@ +const sgMail = require('@sendgrid/mail'); + +sgMail.setApiKey(process.env.SENDGRID_API_KEY); + +module.exports = async function sendEmail(args) { + + const msg = { + to: args.to, + from: args.from, + subject: args.subject, + text: args.text + }; + + try { + await sgMail.send(msg); + return { + success: true, + err + } + } catch (err) { + return { + success: false, + err + } + } + +} \ No newline at end of file diff --git a/packages/server/src/api/controllers/workflow/index.js b/packages/server/src/api/controllers/workflow/index.js index 8d9c7bc1e7..ee7c536519 100644 --- a/packages/server/src/api/controllers/workflow/index.js +++ b/packages/server/src/api/controllers/workflow/index.js @@ -65,7 +65,7 @@ exports.update = async function(ctx) { exports.fetch = async function(ctx) { const db = new CouchDB(ctx.params.instanceId) const response = await db.query(`database/by_type`, { - type: "workflow", + key: ["workflow"], include_docs: true, }) ctx.body = response.rows.map(row => row.doc) diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock index 8a64a7cb8a..763e28134e 100644 --- a/packages/server/yarn.lock +++ b/packages/server/yarn.lock @@ -194,6 +194,20 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@budibase/client@^0.0.32": + version "0.0.32" + resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496" + integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A== + dependencies: + "@nx-js/compiler-util" "^2.0.0" + bcryptjs "^2.4.3" + deep-equal "^2.0.1" + lodash "^4.17.15" + lunr "^2.3.5" + regexparam "^1.3.0" + shortid "^2.2.8" + svelte "^3.9.2" + "@budibase/core@^0.0.32": version "0.0.32" resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa" @@ -409,6 +423,30 @@ resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297" integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ== +"@sendgrid/client@^7.1.1": + version "7.1.1" + resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f" + integrity sha512-V2BmOO81wHNmbTDwTJ07Olb9dWrj1G19xK4crwds68b9R0w05aOWDddZTvpn9mZnHwIJYqcZcBJuhdHDejuSHg== + dependencies: + "@sendgrid/helpers" "^7.0.1" + axios "^0.19.2" + +"@sendgrid/helpers@^7.0.1": + version "7.0.1" + resolved "https://registry.yarnpkg.com/@sendgrid/helpers/-/helpers-7.0.1.tgz#b97debc793ed3f9f56102e12c2a6d2bbbf0ffb78" + integrity sha512-i/zsissq1upgdywtuJKysaplJJZC24GdtEKiJC1IRlXvBHzIjH4eU+rqUFO8h+hGji3UMURGgMFuLUXTUYvZ9w== + dependencies: + chalk "^2.0.1" + deepmerge "^4.2.2" + +"@sendgrid/mail@^7.1.1": + version "7.1.1" + resolved "https://registry.yarnpkg.com/@sendgrid/mail/-/mail-7.1.1.tgz#26191594722d5961de1b61cd9c48fa9a69fd197b" + integrity sha512-VXdJ9J6vBNMw+wMIGFRvms6EmV6pvoRHMWoLJGweHlsZDnvmK3rWUnnNaS3OdDQ3A8B5bMv2WKsEnHsMZ6iDUg== + dependencies: + "@sendgrid/client" "^7.1.1" + "@sendgrid/helpers" "^7.0.1" + "@sindresorhus/is@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea" @@ -825,6 +863,11 @@ array-equal@^1.0.0: resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93" integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM= +array-filter@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83" + integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM= + array-unique@^0.3.2: version "0.3.2" resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428" @@ -897,6 +940,13 @@ atomic-sleep@^1.0.0: resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b" integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ== +available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5" + integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ== + dependencies: + array-filter "^1.0.0" + aws-sign2@~0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" @@ -907,6 +957,13 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e" integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug== +axios@^0.19.2: + version "0.19.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27" + integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA== + dependencies: + follow-redirects "1.5.10" + babel-jest@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54" @@ -1567,6 +1624,13 @@ dateformat@^3.0.3: resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== +debug@=3.1.0, debug@~3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + debug@^2.2.0, debug@^2.3.3, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -1588,13 +1652,6 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1: dependencies: ms "^2.1.1" -debug@~3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" - integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== - dependencies: - ms "2.0.0" - decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" @@ -1612,6 +1669,26 @@ decompress-response@^3.3.0: dependencies: mimic-response "^1.0.0" +deep-equal@^2.0.1: + version "2.0.3" + resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0" + integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA== + dependencies: + es-abstract "^1.17.5" + es-get-iterator "^1.1.0" + is-arguments "^1.0.4" + is-date-object "^1.0.2" + is-regex "^1.0.5" + isarray "^2.0.5" + object-is "^1.1.2" + object-keys "^1.1.1" + object.assign "^4.1.0" + regexp.prototype.flags "^1.3.0" + side-channel "^1.0.2" + which-boxed-primitive "^1.0.1" + which-collection "^1.0.1" + which-typed-array "^1.1.2" + deep-equal@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" @@ -1627,6 +1704,11 @@ deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepmerge@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" + integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== + defer-to-connect@^1.0.1: version "1.1.3" resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591" @@ -1965,7 +2047,7 @@ error-inject@^1.0.0: resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37" integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc= -es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: +es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5: version "1.17.5" resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9" integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg== @@ -1982,6 +2064,19 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5: string.prototype.trimleft "^2.1.1" string.prototype.trimright "^2.1.1" +es-get-iterator@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8" + integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ== + dependencies: + es-abstract "^1.17.4" + has-symbols "^1.0.1" + is-arguments "^1.0.4" + is-map "^2.0.1" + is-set "^2.0.1" + is-string "^1.0.5" + isarray "^2.0.5" + es-to-primitive@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a" @@ -2444,6 +2539,13 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== +follow-redirects@1.5.10: + version "1.5.10" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" + integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ== + dependencies: + debug "=3.1.0" + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -2967,11 +3069,21 @@ is-accessor-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" +is-arguments@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3" + integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA== + is-arrayish@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= +is-bigint@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4" + integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g== + is-binary-path@~2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" @@ -2979,6 +3091,11 @@ is-binary-path@~2.1.0: dependencies: binary-extensions "^2.0.0" +is-boolean-object@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e" + integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ== + is-buffer@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" @@ -3015,7 +3132,7 @@ is-data-descriptor@^1.0.0: dependencies: kind-of "^6.0.0" -is-date-object@^1.0.1: +is-date-object@^1.0.1, is-date-object@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e" integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g== @@ -3090,11 +3207,21 @@ is-installed-globally@^0.3.1: global-dirs "^2.0.1" is-path-inside "^3.0.1" +is-map@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1" + integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw== + is-npm@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d" integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig== +is-number-object@^1.0.3: + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197" + integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw== + is-number@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195" @@ -3131,11 +3258,21 @@ is-regex@^1.0.5: dependencies: has "^1.0.3" +is-set@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43" + integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA== + is-stream@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ= +is-string@^1.0.4, is-string@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6" + integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ== + is-symbol@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937" @@ -3152,11 +3289,31 @@ is-type-of@^1.0.0: is-class-hotfix "~0.0.6" isstream "~0.1.2" +is-typed-array@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d" + integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ== + dependencies: + available-typed-arrays "^1.0.0" + es-abstract "^1.17.4" + foreach "^2.0.5" + has-symbols "^1.0.1" + is-typedarray@^1.0.0, is-typedarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= +is-weakmap@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2" + integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA== + +is-weakset@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83" + integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw== + is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -3182,6 +3339,11 @@ isarray@1.0.0, isarray@~1.0.0: resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= +isarray@^2.0.5: + version "2.0.5" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" + integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw== + isbinaryfile@^4.0.6: version "4.0.6" resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b" @@ -4589,6 +4751,14 @@ object-inspect@^1.7.0: resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67" integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw== +object-is@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6" + integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.17.5" + object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" @@ -5310,6 +5480,19 @@ regex-not@^1.0.0, regex-not@^1.0.2: extend-shallow "^3.0.2" safe-regex "^1.1.0" +regexp.prototype.flags@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75" + integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ== + dependencies: + define-properties "^1.1.3" + es-abstract "^1.17.0-next.1" + +regexparam@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f" + integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g== + regexpp@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f" @@ -5638,6 +5821,14 @@ shortid@^2.2.8: dependencies: nanoid "^2.1.0" +side-channel@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947" + integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA== + dependencies: + es-abstract "^1.17.0-next.1" + object-inspect "^1.7.0" + signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" @@ -6046,6 +6237,11 @@ supports-color@^7.1.0: dependencies: has-flag "^4.0.0" +svelte@^3.9.2: + version "3.22.3" + resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.22.3.tgz#6af3bdcfea44c2fadbf17a32c479f49bdf1aba4b" + integrity sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw== + symbol-tree@^3.2.2: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" @@ -6526,11 +6722,44 @@ whatwg-url@^7.0.0: tr46 "^1.0.1" webidl-conversions "^4.0.2" +which-boxed-primitive@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1" + integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ== + dependencies: + is-bigint "^1.0.0" + is-boolean-object "^1.0.0" + is-number-object "^1.0.3" + is-string "^1.0.4" + is-symbol "^1.0.2" + +which-collection@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906" + integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A== + dependencies: + is-map "^2.0.1" + is-set "^2.0.1" + is-weakmap "^2.0.1" + is-weakset "^2.0.1" + which-module@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a" integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= +which-typed-array@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2" + integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ== + dependencies: + available-typed-arrays "^1.0.2" + es-abstract "^1.17.5" + foreach "^2.0.5" + function-bind "^1.1.1" + has-symbols "^1.0.1" + is-typed-array "^1.1.3" + which@^1.2.9, which@^1.3.0: version "1.3.1" resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"