Data link block updated to Linked Fields

'Data -ink' block updated to Linked Fields
Additional blocks added, including URL
Icons updated

packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte

@@ -68,7 +68,7 @@
                       <ListItem
                         selected={model._id === $backendUiStore.selectedModel._id && fieldName === $backendUiStore.selectedField}
                         indented
-                        icon="ri-layout-column-fill"
+                        icon="ri-layout-column-line"
                         title={model.schema[fieldName].name}
                         on:click={() => selectModel(model, fieldName)} />
                     {/each}

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

@@ -15,12 +15,15 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(name, [
+    pipe(
-      trimCharsStart("./"),
+      name,
-      trimCharsStart("~/"),
+      [
-      trimCharsStart("../"),
+        trimCharsStart("./"),
-      trimChars(" "),
+        trimCharsStart("~/"),
-    ])
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)

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

@@ -19,7 +19,11 @@
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const get_capitalised_name = name =>
+    pipe(
+      name,
+      [get_name, capitalise]
+    )
   const isScreenslot = name => name === "##builtin/screenslot"
 
   const selectComponent = component => {
@@ -42,7 +46,7 @@
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 40}px">
         <div class="nav-item">
-          <i class="icon ri-arrow-right-circle-fill" />
+          <i class="icon ri-arrow-right-circle-line" />
           {isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
         </div>
         <div class="actions">

packages/builder/src/constants/backend/index.js

@@ -65,8 +65,8 @@ export const FIELDS = {
   //     presence: false,
   //   },
   // },
-  DATA_LINK: {
+  LINKED_FIELDS: {
-    name: "Data Links",
+    name: "Linked Fields",
     icon: "ri-link",
     type: "link",
     modelId: null,
@@ -89,7 +89,7 @@ export const BLOCKS = {
   },
   COMPANY: {
     name: "Company",
-    icon: "ri-text",
+    icon: "ri-store-line",
     type: "string",
     constraints: {
       type: "string",
@@ -99,7 +99,7 @@ export const BLOCKS = {
   },
   EMAIL: {
     name: "Email",
-    icon: "ri-text",
+    icon: "ri-mail-line",
     type: "string",
     constraints: {
       type: "string",
@@ -109,7 +109,7 @@ export const BLOCKS = {
   },
   PHONE_NUMBER: {
     name: "Phone No.",
-    icon: "ri-number-1",
+    icon: "ri-phone-line",
     type: "number",
     constraints: {
       type: "number",
@@ -119,7 +119,7 @@ export const BLOCKS = {
   },
   VALUE: {
     name: "Value",
-    icon: "ri-number-1",
+    icon: "ri-number-5",
     type: "number",
     constraints: {
       type: "number",
@@ -136,6 +136,26 @@ export const BLOCKS = {
       presence: false,
     },
   },
+  URL: {
+    name: "URL",
+    icon: "ri-link",
+    type: "string",
+    constraints: {
+      type: "string",
+      length: {},
+      presence: false,
+    },
+  },
+  IMAGE: {
+    name: "Image URL",
+    icon: "ri-image-line",
+    type: "string",
+    constraints: {
+      type: "string",
+      length: {},
+      presence: false,
+    },
+  },
   // PRIORITY: {
   //   name: "Options",
   //   icon: "ri-list-check-2",