Settings, Tidyup and Refactor

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]
     : {}
 

packages/builder/src/components/userInterface/ComponentsHierarchy.svelte

@@ -45,7 +45,6 @@
   }
 
   const changeScreen = screen => {
-    debugger
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
   }

packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte

@@ -37,7 +37,6 @@
 
   const selectComponent = component => {
     // Set current component
-    debugger
     store.selectComponent(component)
 
     // Get ID path

packages/builder/src/components/userInterface/DesignView.svelte

@@ -33,14 +33,20 @@
   </div>
 
   <div class="design-view-property-groups">
-    {#each propertyGroupNames as groupName}
-      <PropertyGroup
-        name={groupName}
-        properties={getProperties(groupName)}
-        {onStyleChanged}
-        {componentDefinition}
-        {componentInstance} />
-    {/each}
+    {#if propertyGroupNames.length > 0}
+      {#each propertyGroupNames as groupName}
+        <PropertyGroup
+          name={groupName}
+          properties={getProperties(groupName)}
+          {onStyleChanged}
+          {componentDefinition}
+          {componentInstance} />
+      {/each}
+    {:else}
+      <div class="no-design">
+        <span>This component does not have any design properties</span>
+      </div>
+    {/if}
   </div>
 </div>
 
@@ -58,4 +64,8 @@
   .design-view-property-groups {
     flex: 1;
   }
+
+  .no-design {
+    text-align: center;
+  }
 </style>

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 }
 </script>
 
 <div class="property-control">

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"
 </script>
 
@@ -33,10 +27,10 @@
       <PropertyControl
         label={props.label}
         control={props.control}
-        key={props.cssKey}
-        value={componentInstance['_styles'][props.cssKey]}
-        onChange={onStyleChanged}
-        props={{ ...excludeProps(props, ['control']) }} />
+        key={props.key}
+        value={componentInstance['_styles'][props.key]}
+        onChange={(key, value) => onStyleChanged(name, key, value)}
+        props={{ ...excludeProps(props, ['control', 'label']) }} />
     {/each}
   </div>
 </div>

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -15,14 +15,26 @@
   }
 </script>
 
-{#each panelDefinition as definition}
-  {#if propExistsOnComponentDef(definition.key)}
-    <PropertyControl
-      control={definition.control}
-      label={definition.label}
-      key={definition.key}
-      value={componentInstance[definition.key]}
-      {onChange}
-      props={{ ...excludeProps(definition, ['control']) }} />
-  {/if}
-{/each}
+{#if panelDefinition.length > 0}
+  {#each panelDefinition as definition}
+    {#if propExistsOnComponentDef(definition.key)}
+      <PropertyControl
+        control={definition.control}
+        label={definition.label}
+        key={definition.key}
+        value={componentInstance[definition.key]}
+        {onChange}
+        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+    {/if}
+  {/each}
+{:else}
+  <div>
+    <span>This component does not have any settings.</span>
+  </div>
+{/if}
+
+<style>
+  div {
+    text-align: center;
+  }
+</style>

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 = {

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,
+              },
+            ],
+          },
         },
       ],
     },

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)
 </script>
 
-<a
-  href={url}
-  bind:this={anchorElement}
-  class={classes}
-  {target}
-  use:cssVars={cssVariables}>
-  {text}
-</a>
+<a href={url} bind:this={anchorElement} {target}>{text}</a>
 
 <style>
-  .color {
-    color: var(--color);
-  }
-
-  .hoverColor:hover {
-    color: var(--color);
-  }
-
   .textDecoration {
     text-decoration: var(--textDecoration);
   }
-
-  .fontSize {
-    font-size: var(--fontSize);
-  }
-
-  .fontFamily {
-    font-family: var(--fontFamily);
-  }
 </style>