Merge pull request #292 from Budibase/components/card-settings-and-input-suffix

Components/card settings and input suffix

packages/builder/src/components/common/Input.svelte

@@ -5,13 +5,23 @@
   export let textAlign = "left"
   export let width = "160px"
   export let placeholder = ""
+  export let suffix = ""
+  export let onChange = val => {}
   
   let centerPlaceholder = textAlign === "center"
 
   let style = buildStyle({ width, textAlign })
+  
+  function handleChange(val) {
+    value = val
+    onChange(value)
+  }
+
+  $: displayValue = suffix && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : value
+  
 </script>
 
-<input class:centerPlaceholder type="text" {placeholder} {style} on:change bind:value />
+<input class:centerPlaceholder type="text" value={displayValue} {placeholder} {style} on:change={e => handleChange(e.target.value)} />
 
 <style>
   input {

packages/builder/src/components/common/Inputs/InputGroup.svelte

@@ -30,7 +30,7 @@
         textAlign="center"
         placeholder={m.placeholder || ''}
         value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
-        on:change={e => handleChange(e.target.value || 0, i)} />
+        onChange={value => handleChange(value || 0, i)} />
     {/each}
   </div>
 </div>

packages/builder/src/components/userInterface/propertyCategories.js

@@ -103,6 +103,7 @@ export const size = [
     key: "width",
     control: Input,
     placeholder: "px",
+    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -111,6 +112,7 @@ export const size = [
     key: "height",
     control: Input,
     placeholder: "px",
+    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -119,6 +121,7 @@ export const size = [
     key: "min-width",
     control: Input,
     placeholder: "px",
+    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -126,6 +129,7 @@ export const size = [
     label: "Min H",
     key: "min-height",
     control: Input,
+    suffix: "px",
     placeholder: "px",
     width: "48px",
     textAlign: "center",
@@ -135,6 +139,7 @@ export const size = [
     key: "max-width",
     control: Input,
     placeholder: "px",
+    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -143,6 +148,7 @@ export const size = [
     key: "max-height",
     control: Input,
     placeholder: "px",
+    suffix: "px",
     width: "48px",
     textAlign: "center",
   },

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -229,7 +229,35 @@ export default {
             "A basic card component that can contain content and actions.",
           icon: "ri-layout-bottom-fill",
           children: [],
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "text",
+              },
+              {
+                label: "Subheading",
+                key: "subheading",
+                control: Input,
+                placeholder: "text",
+              },
+              {
+                label: "Content",
+                key: "content",
+                control: Input,
+                placeholder: "text",
+              },
+              {
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "src",
+              },
+            ],
+          },
         },
         {
           name: "Login",