@budibase/bbui 1.0.25 → 1.0.27-alpha.10

package/src/Tabs/Tabs.svelte

@@ -6,8 +6,14 @@
   export let selected
   export let vertical = false
   export let noPadding = false
+  // added as a separate option as noPadding is used for vertical padding
+  export let noHorizPadding = false
   export let quiet = false
   export let emphasized = false
+  // overlay content from the tab bar onto tabs e.g. for a dropdown
+  export let onTop = false
+
+  let thisSelected = undefined
 
   let _id = id()
   const tab = writable({ title: selected, id: _id, emphasized })
@@ -18,9 +24,19 @@
   const dispatch = createEventDispatcher()
 
   $: {
-    if ($tab.title !== selected) {
+    if (thisSelected !== selected) {
+      thisSelected = selected
+      dispatch("select", thisSelected)
+    } else if ($tab.title !== thisSelected) {
+      thisSelected = $tab.title
       selected = $tab.title
-      dispatch("select", selected)
+      dispatch("select", thisSelected)
+    }
+    if ($tab.title !== thisSelected) {
+      tab.update(state => {
+        state.title = thisSelected
+        return state
+      })
     }
   }
 
@@ -59,10 +75,12 @@
 <div
   bind:this={container}
   class:quiet
+  class:noHorizPadding
   class="selected-border spectrum-Tabs {quiet &&
     'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
     ? 'vertical'
     : 'horizontal'}"
+  class:onTop
 >
   <slot />
   {#if $tab.info}
@@ -83,7 +101,9 @@
   .quiet {
     border-bottom: none !important;
   }
-
+  .onTop {
+    z-index: 20;
+  }
   .spectrum-Tabs {
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
@@ -99,6 +119,9 @@
   .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
     bottom: 0 !important;
   }
+  .noHorizPadding {
+    padding: 0;
+  }
   .noPadding {
     margin: 0;
   }

package/src/Typography/Detail.svelte

@@ -13,3 +13,9 @@
 >
   <slot />
 </p>
+
+<style>
+  p {
+    font-weight: 600;
+  }
+</style>

package/src/index.js

@@ -59,6 +59,11 @@ export { default as Badge } from "./Badge/Badge.svelte"
 export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 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"
@@ -76,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
+}