@budibase/bbui 2.1.45 → 2.1.46-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.1.45",
+  "version": "2.1.46-alpha.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^2.1.45",
+    "@budibase/string-templates": "2.1.46-alpha.0",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -67,19 +67,19 @@
     "@spectrum-css/search": "^3.0.2",
     "@spectrum-css/sidenav": "^3.0.2",
     "@spectrum-css/slider": "3.0.1",
-    "@spectrum-css/statuslight": "^3.0.2",
-    "@spectrum-css/stepper": "^3.0.3",
-    "@spectrum-css/switch": "^1.0.2",
-    "@spectrum-css/table": "^3.0.1",
-    "@spectrum-css/tabs": "^3.2.12",
-    "@spectrum-css/tags": "^3.0.2",
-    "@spectrum-css/textfield": "^3.0.1",
-    "@spectrum-css/toast": "^3.0.1",
-    "@spectrum-css/tooltip": "^3.0.3",
-    "@spectrum-css/treeview": "^3.0.2",
-    "@spectrum-css/typography": "^3.0.1",
-    "@spectrum-css/underlay": "^2.0.9",
-    "@spectrum-css/vars": "^3.0.1",
+    "@spectrum-css/statuslight": "3.0.2",
+    "@spectrum-css/stepper": "3.0.3",
+    "@spectrum-css/switch": "1.0.2",
+    "@spectrum-css/table": "3.0.1",
+    "@spectrum-css/tabs": "3.2.12",
+    "@spectrum-css/tags": "3.0.2",
+    "@spectrum-css/textfield": "3.0.1",
+    "@spectrum-css/toast": "3.0.1",
+    "@spectrum-css/tooltip": "3.0.3",
+    "@spectrum-css/treeview": "3.0.2",
+    "@spectrum-css/typography": "3.0.1",
+    "@spectrum-css/underlay": "2.0.9",
+    "@spectrum-css/vars": "3.0.1",
     "dayjs": "^1.10.4",
     "easymde": "^2.16.1",
     "svelte-flatpickr": "^3.2.3",
@@ -88,5 +88,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "4570e0cdf439ea7d89ba3b00875558f0a4b12bba"
+  "gitHead": "1c1f758ab9bbd9b841b1e759a872523aa31f53b4"
 }

package/src/Actions/click_outside.js

@@ -1,18 +1,53 @@
-export default function clickOutside(element, callbackFunction) {
-  function onClick(event) {
-    if (!element.contains(event.target)) {
-      callbackFunction(event)
+const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
+let clickHandlers = []
+
+/**
+ * Handle a body click event
+ */
+const handleClick = event => {
+  // Ignore click if needed
+  for (let className of ignoredClasses) {
+    if (event.target.closest(className)) {
+      return
+    }
+  }
+
+  // Process handlers
+  clickHandlers.forEach(handler => {
+    if (!handler.element.contains(event.target)) {
+      handler.callback?.(event)
     }
+  })
+}
+document.documentElement.addEventListener("click", handleClick, true)
+
+/**
+ * Adds or updates a click handler
+ */
+const updateHandler = (id, element, callback) => {
+  let existingHandler = clickHandlers.find(x => x.id === id)
+  if (!existingHandler) {
+    clickHandlers.push({ id, element, callback })
+  } else {
+    existingHandler.callback = callback
   }
+}
 
-  document.body.addEventListener("click", onClick, true)
+/**
+ * Removes a click handler
+ */
+const removeHandler = id => {
+  clickHandlers = clickHandlers.filter(x => x.id !== id)
+}
 
+/**
+ * Svelte action to apply a click outside handler for a certain element
+ */
+export default (element, callback) => {
+  const id = Math.random()
+  updateHandler(id, element, callback)
   return {
-    update(newCallbackFunction) {
-      callbackFunction = newCallbackFunction
-    },
-    destroy() {
-      document.body.removeEventListener("click", onClick, true)
-    },
+    update: newCallback => updateHandler(id, element, newCallback),
+    destroy: () => removeHandler(id),
   }
 }

package/src/DetailSummary/DetailSummary.svelte

@@ -19,13 +19,19 @@
 </script>
 
 <div class="property-group-container">
-  <div class="property-group-name" on:click={onHeaderClick}>
-    <div class="name">{name}</div>
-    {#if collapsible}
-      <Icon size="S" name={show ? "Remove" : "Add"} />
-    {/if}
-  </div>
-  <div class="property-panel" class:show={show || !collapsible}>
+  {#if name}
+    <div class="property-group-name" on:click={onHeaderClick}>
+      <div class="name">{name}</div>
+      {#if collapsible}
+        <Icon size="S" name={show ? "Remove" : "Add"} />
+      {/if}
+    </div>
+  {/if}
+  <div
+    class="property-panel"
+    class:show={show || !collapsible}
+    class:no-title={!name}
+  >
     <slot />
   </div>
 </div>
@@ -72,6 +78,9 @@
     padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
       var(--spacing-xl);
   }
+  .property-panel.no-title {
+    padding: var(--spacing-xl);
+  }
 
   .show {
     display: flex;

package/src/Form/Core/DatePicker.svelte

@@ -23,6 +23,15 @@
   let open = false
   let flatpickr, flatpickrOptions
 
+  // Another classic flatpickr issue. Errors were randomly being thrown due to
+  // flatpickr internal code. Making sure that "destroy" is a valid function
+  // fixes it. The sooner we remove flatpickr the better.
+  $: {
+    if (flatpickr && !flatpickr.destroy) {
+      flatpickr.destroy = () => {}
+    }
+  }
+
   const resolveTimeStamp = timestamp => {
     let maskedDate = new Date(`0-${timestamp}`)
 
@@ -252,6 +261,7 @@
     width: 100vw;
     height: 100vh;
     z-index: 999;
+    max-height: 100%;
   }
   :global(.flatpickr-calendar) {
     font-family: "Source Sans Pro", sans-serif;

package/src/Form/Core/Picker.svelte

@@ -205,7 +205,10 @@
     width: 100%;
   }
   .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
+    max-width: 400px;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .spectrum-Picker {
     width: 100%;

package/src/Icon/Icon.svelte

@@ -64,7 +64,7 @@
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected-hover);
+    color: var(--spectrum-alias-icon-color-selected-hover) !important;
     cursor: pointer;
   }
 

package/src/Modal/ModalContent.svelte

@@ -28,9 +28,9 @@
   let loading = false
   $: confirmDisabled = disabled || loading
 
-  async function secondary() {
+  async function secondary(e) {
     loading = true
-    if (!secondaryAction || (await secondaryAction()) !== false) {
+    if (!secondaryAction || (await secondaryAction(e)) !== false) {
       hide()
     }
     loading = false

package/src/Notification/Notification.svelte

@@ -25,7 +25,7 @@
     </svg>
   {/if}
   <div class="spectrum-Toast-body" class:actionBody={!!action}>
-    <div class="spectrum-Toast-content">{message || ""}</div>
+    <div class="wrap spectrum-Toast-content">{message || ""}</div>
     {#if action}
       <ActionButton quiet emphasized on:click={action}>
         <div style="color: white; font-weight: 600;">{actionMessage}</div>
@@ -53,6 +53,10 @@
 </div>
 
 <style>
+  .wrap {
+    overflow-wrap: anywhere;
+  }
+
   .spectrum-Toast {
     pointer-events: all;
   }

package/src/Skeleton/Skeleton.svelte

@@ -0,0 +1,56 @@
+<div class="skeleton">
+  <div class="children">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .skeleton {
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    background-color: var(--spectrum-global-color-gray-200) !important;
+    border-radius: 7px;
+    overflow: hidden;
+    position: relative;
+    animation: fadeIn 130ms ease 0s 1 normal forwards;
+  }
+
+  .children {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .skeleton::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 0.15) 20%,
+      rgba(255, 255, 255, 0.3) 60%,
+      rgba(255, 255, 255, 0)
+    );
+    animation: shimmer 2s infinite;
+    content: "";
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0.75;
+    }
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+</style>

package/src/Table/Table.svelte

@@ -71,7 +71,8 @@
     visibleRowCount,
     rowCount,
     totalRowCount,
-    rowHeight
+    rowHeight,
+    loading
   )
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: gridStyle = getGridStyle(fields, schema, showEditColumn)
@@ -120,8 +121,12 @@
     visibleRowCount,
     rowCount,
     totalRowCount,
-    rowHeight
+    rowHeight,
+    loading
   ) => {
+    if (loading) {
+      return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
+    }
     if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
       return ""
     }
@@ -270,155 +275,159 @@
   }
 </script>
 
-<div
-  class="wrapper"
-  class:wrapper--quiet={quiet}
-  class:wrapper--compact={compact}
-  bind:offsetHeight={height}
-  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
->
-  {#if !loaded}
-    <div class="loading" style={heightStyle}>
-      <ProgressCircle />
-    </div>
-  {:else}
-    <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
-      {#if fields.length}
-        <div class="spectrum-Table-head">
-          {#if showEditColumn}
-            <div
-              class:noBorderHeader={!showHeaderBorder}
-              class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
-            >
-              {#if allowSelectRows}
-                <Checkbox
-                  bind:value={checkboxStatus}
-                  on:change={toggleSelectAll}
-                />
-              {:else}
-                Edit
-              {/if}
-            </div>
-          {/if}
-          {#each fields as field}
-            <div
-              class="spectrum-Table-headCell"
-              class:noBorderHeader={!showHeaderBorder}
-              class:spectrum-Table-headCell--alignCenter={schema[field]
-                .align === "Center"}
-              class:spectrum-Table-headCell--alignRight={schema[field].align ===
-                "Right"}
-              class:is-sortable={schema[field].sortable !== false}
-              class:is-sorted-desc={sortColumn === field &&
-                sortOrder === "Descending"}
-              class:is-sorted-asc={sortColumn === field &&
-                sortOrder === "Ascending"}
-              on:click={() => sortBy(schema[field])}
-            >
-              <div class="title">{getDisplayName(schema[field])}</div>
-              {#if schema[field]?.autocolumn}
-                <svg
-                  class="spectrum-Icon spectrum-Table-autoIcon"
-                  focusable="false"
-                >
-                  <use xlink:href="#spectrum-icon-18-MagicWand" />
-                </svg>
-              {/if}
-              {#if sortColumn === field}
-                <svg
-                  class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                  focusable="false"
-                  aria-hidden="true"
-                >
-                  <use xlink:href="#spectrum-css-icon-Arrow100" />
-                </svg>
-              {/if}
-              {#if allowEditColumns && schema[field]?.editable !== false}
-                <svg
-                  class="spectrum-Icon spectrum-Table-editIcon"
-                  focusable="false"
-                  on:click={e => editColumn(e, field)}
-                >
-                  <use xlink:href="#spectrum-icon-18-Edit" />
-                </svg>
-              {/if}
-            </div>
-          {/each}
-        </div>
-      {/if}
-      {#if sortedRows?.length}
-        {#each sortedRows as row, idx}
-          <div class="spectrum-Table-row">
+{#key fields?.length}
+  <div
+    class="wrapper"
+    class:wrapper--quiet={quiet}
+    class:wrapper--compact={compact}
+    bind:offsetHeight={height}
+    style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+  >
+    {#if loading}
+      <div class="loading" style={heightStyle}>
+        <slot name="loadingIndicator">
+          <ProgressCircle />
+        </slot>
+      </div>
+    {:else}
+      <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
+        {#if fields.length}
+          <div class="spectrum-Table-head">
             {#if showEditColumn}
               <div
-                class:noBorderCheckbox={!showHeaderBorder}
-                class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
-                on:click={e => {
-                  toggleSelectRow(row)
-                  e.stopPropagation()
-                }}
+                class:noBorderHeader={!showHeaderBorder}
+                class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
               >
-                <SelectEditRenderer
-                  data={row}
-                  selected={selectedRows.findIndex(
-                    selectedRow => selectedRow._id === row._id
-                  ) !== -1}
-                  onEdit={e => editRow(e, row)}
-                  {allowSelectRows}
-                  {allowEditRows}
-                />
+                {#if allowSelectRows}
+                  <Checkbox
+                    bind:value={checkboxStatus}
+                    on:change={toggleSelectAll}
+                  />
+                {:else}
+                  Edit
+                {/if}
               </div>
             {/if}
             {#each fields as field}
               <div
-                class="spectrum-Table-cell"
-                class:spectrum-Table-cell--divider={!!schema[field].divider}
-                style={cellStyles[field]}
-                on:click={() => {
-                  if (!schema[field]?.preventSelectRow) {
-                    dispatch("click", row)
-                    toggleSelectRow(row)
-                  }
-                }}
+                class="spectrum-Table-headCell"
+                class:noBorderHeader={!showHeaderBorder}
+                class:spectrum-Table-headCell--alignCenter={schema[field]
+                  .align === "Center"}
+                class:spectrum-Table-headCell--alignRight={schema[field]
+                  .align === "Right"}
+                class:is-sortable={schema[field].sortable !== false}
+                class:is-sorted-desc={sortColumn === field &&
+                  sortOrder === "Descending"}
+                class:is-sorted-asc={sortColumn === field &&
+                  sortOrder === "Ascending"}
+                on:click={() => sortBy(schema[field])}
               >
-                <CellRenderer
-                  {customRenderers}
-                  {row}
-                  schema={schema[field]}
-                  value={deepGet(row, field)}
-                  on:clickrelationship
-                  on:buttonclick
-                >
-                  <slot />
-                </CellRenderer>
+                <div class="title">{getDisplayName(schema[field])}</div>
+                {#if schema[field]?.autocolumn}
+                  <svg
+                    class="spectrum-Icon spectrum-Table-autoIcon"
+                    focusable="false"
+                  >
+                    <use xlink:href="#spectrum-icon-18-MagicWand" />
+                  </svg>
+                {/if}
+                {#if sortColumn === field}
+                  <svg
+                    class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                    focusable="false"
+                    aria-hidden="true"
+                  >
+                    <use xlink:href="#spectrum-css-icon-Arrow100" />
+                  </svg>
+                {/if}
+                {#if allowEditColumns && schema[field]?.editable !== false}
+                  <svg
+                    class="spectrum-Icon spectrum-Table-editIcon"
+                    focusable="false"
+                    on:click={e => editColumn(e, field)}
+                  >
+                    <use xlink:href="#spectrum-icon-18-Edit" />
+                  </svg>
+                {/if}
               </div>
             {/each}
           </div>
-        {/each}
-      {:else}
-        <div
-          class="placeholder"
-          class:placeholder--custom={customPlaceholder}
-          class:placeholder--no-fields={!fields?.length}
-        >
-          {#if customPlaceholder}
-            <slot name="placeholder" />
-          {:else}
-            <div class="placeholder-content">
-              <svg
-                class="spectrum-Icon spectrum-Icon--sizeXXL"
-                focusable="false"
-              >
-                <use xlink:href="#spectrum-icon-18-Table" />
-              </svg>
-              <div>{placeholderText}</div>
+        {/if}
+        {#if sortedRows?.length}
+          {#each sortedRows as row, idx}
+            <div class="spectrum-Table-row">
+              {#if showEditColumn}
+                <div
+                  class:noBorderCheckbox={!showHeaderBorder}
+                  class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
+                  on:click={e => {
+                    toggleSelectRow(row)
+                    e.stopPropagation()
+                  }}
+                >
+                  <SelectEditRenderer
+                    data={row}
+                    selected={selectedRows.findIndex(
+                      selectedRow => selectedRow._id === row._id
+                    ) !== -1}
+                    onEdit={e => editRow(e, row)}
+                    {allowSelectRows}
+                    {allowEditRows}
+                  />
+                </div>
+              {/if}
+              {#each fields as field}
+                <div
+                  class="spectrum-Table-cell"
+                  class:spectrum-Table-cell--divider={!!schema[field].divider}
+                  style={cellStyles[field]}
+                  on:click={() => {
+                    if (!schema[field]?.preventSelectRow) {
+                      dispatch("click", row)
+                      toggleSelectRow(row)
+                    }
+                  }}
+                >
+                  <CellRenderer
+                    {customRenderers}
+                    {row}
+                    schema={schema[field]}
+                    value={deepGet(row, field)}
+                    on:clickrelationship
+                    on:buttonclick
+                  >
+                    <slot />
+                  </CellRenderer>
+                </div>
+              {/each}
             </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>
+          {/each}
+        {:else}
+          <div
+            class="placeholder"
+            class:placeholder--custom={customPlaceholder}
+            class:placeholder--no-fields={!fields?.length}
+          >
+            {#if customPlaceholder}
+              <slot name="placeholder" />
+            {:else}
+              <div class="placeholder-content">
+                <svg
+                  class="spectrum-Icon spectrum-Icon--sizeXXL"
+                  focusable="false"
+                >
+                  <use xlink:href="#spectrum-icon-18-Table" />
+                </svg>
+                <div>{placeholderText}</div>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/key}
 
 <style>
   /* Wrapper */
@@ -438,9 +447,10 @@
 
   /* Loading */
   .loading {
-    display: grid;
-    place-items: center;
+    display: flex;
+    align-items: center;
     min-height: 100px;
+    justify-content: center;
   }
 
   /* Table */

package/src/index.js

@@ -4,6 +4,7 @@ import "./bbui.css"
 import "@spectrum-css/icon/dist/index-vars.css"
 
 // Components
+export { default as Skeleton } from "./Skeleton/Skeleton.svelte"
 export { default as Input } from "./Form/Input.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"