@budibase/bbui 1.0.27-alpha.1 → 1.0.27-alpha.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.27-alpha.1",
+  "version": "1.0.27-alpha.5",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -82,5 +82,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "45e6e45098a50b224d1155bcc4d8b1bfefc1fe23"
+  "gitHead": "48d354444d658d4c820897ec5ab8273e0ef84310"
 }

package/src/Drawer/Drawer.svelte

@@ -21,16 +21,8 @@
     }
     visible = false
   }
-
-  function handleKey(e) {
-    if (visible && e.key === "Escape") {
-      hide()
-    }
-  }
 </script>
 
-<svelte:window on:keydown={handleKey} />
-
 {#if visible}
   <Portal>
     <section class:fillWidth class="drawer" transition:slide>

package/src/Table/BoldRenderer.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let value
+</script>
+
+<div class="bold">{value}</div>
+
+<style>
+  .bold {
+    font-weight: bold;
+  }
+</style>

package/src/Table/CodeRenderer.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let value
+</script>
+
+<code>{value}</code>

package/src/Table/Table.svelte

@@ -4,6 +4,7 @@
   import CellRenderer from "./CellRenderer.svelte"
   import SelectEditRenderer from "./SelectEditRenderer.svelte"
   import { cloneDeep } from "lodash"
+  import { deepGet } from "../utils/helpers"
 
   /**
    * The expected schema is our normal couch schemas for our tables.
@@ -318,7 +319,7 @@
                             {customRenderers}
                             {row}
                             schema={schema[field]}
-                            value={row[field]}
+                            value={deepGet(row, field)}
                             on:clickrelationship
                           >
                             <slot />

package/src/index.js

@@ -61,6 +61,10 @@ export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
 export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
 export { default as Banner } from "./Banner/Banner.svelte"
 
+// Renderers
+export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
+export { default as CodeRenderer } from "./Table/CodeRenderer.svelte"
+
 // Typography
 export { default as Body } from "./Typography/Body.svelte"
 export { default as Heading } from "./Typography/Heading.svelte"
@@ -77,3 +81,6 @@ export { default as clickOutside } from "./Actions/click_outside"
 
 // Stores
 export { notifications, createNotificationStore } from "./Stores/notifications"
+
+// Utils
+export * from "./utils/helpers"

package/src/utils/helpers.js

@@ -6,3 +6,61 @@ export const generateID = () => {
 }
 
 export const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
+
+/**
+ * Gets a key within an object. The key supports dot syntax for retrieving deep
+ * fields - e.g. "a.b.c".
+ * Exact matches of keys with dots in them take precedence over nested keys of
+ * the same path - e.g. getting "a.b" from { "a.b": "foo", a: { b: "bar" } }
+ * will return "foo" over "bar".
+ * @param obj the object
+ * @param key the key
+ * @return {*|null} the value or null if a value was not found for this key
+ */
+export const deepGet = (obj, key) => {
+  if (!obj || !key) {
+    return null
+  }
+  if (Object.prototype.hasOwnProperty.call(obj, key)) {
+    return obj[key]
+  }
+  const split = key.split(".")
+  for (let i = 0; i < split.length; i++) {
+    obj = obj?.[split[i]]
+  }
+  return obj
+}
+
+/**
+ * Sets a key within an object. The key supports dot syntax for retrieving deep
+ * fields - e.g. "a.b.c".
+ * Exact matches of keys with dots in them take precedence over nested keys of
+ * the same path - e.g. setting "a.b" of { "a.b": "foo", a: { b: "bar" } }
+ * will override the value "foo" rather than "bar".
+ * If a deep path is specified and the parent keys don't exist then these will
+ * be created.
+ * @param obj the object
+ * @param key the key
+ * @param value the value
+ */
+export const deepSet = (obj, key, value) => {
+  if (!obj || !key) {
+    return
+  }
+  if (Object.prototype.hasOwnProperty.call(obj, key)) {
+    obj[key] = value
+    return
+  }
+  const split = key.split(".")
+  for (let i = 0; i < split.length - 1; i++) {
+    const nextKey = split[i]
+    if (obj && obj[nextKey] == null) {
+      obj[nextKey] = {}
+    }
+    obj = obj?.[nextKey]
+  }
+  if (!obj) {
+    return
+  }
+  obj[split[split.length - 1]] = value
+}