@budibase/bbui 1.0.80 → 1.0.81-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.80",
+  "version": "1.0.81-alpha.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,6 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
+    "@budibase/string-templates": "^1.0.81-alpha.0",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -83,5 +84,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "0295a18622fdb95e1d279a0d54962d9e2762bc75"
+  "gitHead": "0dc36960962fee96dd20d9f683d4fec9572501c4"
 }

package/src/Button/Button.svelte

@@ -29,6 +29,7 @@
   {disabled}
   on:click|preventDefault
   on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
 >
   {#if icon}

package/src/ColorPicker/ColorPicker.svelte

@@ -10,6 +10,7 @@
   export let value
   export let size = "M"
   export let spectrumTheme
+  export let alignRight = false
 
   let open = false
 
@@ -133,6 +134,7 @@
       use:clickOutside={() => (open = false)}
       transition:fly={{ y: -20, duration: 200 }}
       class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+      class:spectrum-Popover--align-right={alignRight}
     >
       {#each categories as category}
         <div class="category">
@@ -250,6 +252,9 @@
     align-items: stretch;
     gap: var(--spacing-xl);
   }
+  .spectrum-Popover--align-right {
+    right: 0;
+  }
   .colors {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

package/src/Drawer/Drawer.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { slide } from "svelte/transition"
   import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
   import Body from "../Typography/Body.svelte"
@@ -7,7 +6,9 @@
 
   export let title
   export let fillWidth
+
   let visible = false
+
   export function show() {
     if (visible) {
       return
@@ -21,11 +22,27 @@
     }
     visible = false
   }
+
+  const easeInOutQuad = x => {
+    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
+  }
+
+  // Use a custom svelte transition here because the built-in slide
+  // transition has a horrible overshoot
+  const slide = () => {
+    return {
+      duration: 360,
+      css: t => {
+        const translation = 100 - Math.round(easeInOutQuad(t) * 100)
+        return `transform: translateY(${translation}%);`
+      },
+    }
+  }
 </script>
 
 {#if visible}
   <Portal>
-    <section class:fillWidth class="drawer" transition:slide>
+    <section class:fillWidth class="drawer" transition:slide|local>
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
@@ -79,4 +96,12 @@
     align-items: flex-start;
     gap: var(--spacing-xs);
   }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
 </style>

package/src/Form/Core/Checkbox.svelte

@@ -47,7 +47,9 @@
       <use xlink:href="#spectrum-css-icon-Dash100" />
     </svg>
   </span>
-  <span class="spectrum-Checkbox-label">{text || ""}</span>
+  {#if text}
+    <span class="spectrum-Checkbox-label">{text}</span>
+  {/if}
 </label>
 
 <style>

package/src/Modal/Modal.svelte

@@ -54,34 +54,43 @@
 
 <svelte:window on:keydown={handleKey} />
 
-<!-- These svelte if statements need to be defined like this. -->
-<!-- The modal transitions do not work if nested inside more than one "if" -->
-{#if visible && inline}
-  <div use:focusFirstInput class="spectrum-Modal inline is-open">
-    <slot />
-  </div>
-{:else if visible}
+{#if inline}
+  {#if visible}
+    <div use:focusFirstInput class="spectrum-Modal inline is-open">
+      <slot />
+    </div>
+  {/if}
+{:else}
+  <!--
+    We cannot conditionally render the portal as this leads to a missing
+    insertion point when using nested modals. Therefore we just conditionally
+    render the content of the portal.
+    It still breaks the modal animation, but its better than soft bricking the
+    screen.
+  -->
   <Portal target=".modal-container">
-    <div
-      class="spectrum-Underlay is-open"
-      in:fade={{ duration: 200 }}
-      out:fade|local={{ duration: 200 }}
-      on:mousedown|self={cancel}
-    >
-      <div class="modal-wrapper" on:mousedown|self={cancel}>
-        <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
-          <slot name="outside" />
-          <div
-            use:focusFirstInput
-            class="spectrum-Modal is-open"
-            in:fly={{ y: 30, duration: 200 }}
-            out:fly|local={{ y: 30, duration: 200 }}
-          >
-            <slot />
+    {#if visible}
+      <div
+        class="spectrum-Underlay is-open"
+        in:fade={{ duration: 200 }}
+        out:fade|local={{ duration: 200 }}
+        on:mousedown|self={cancel}
+      >
+        <div class="modal-wrapper" on:mousedown|self={cancel}>
+          <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
+            <slot name="outside" />
+            <div
+              use:focusFirstInput
+              class="spectrum-Modal is-open"
+              in:fly={{ y: 30, duration: 200 }}
+              out:fly|local={{ y: 30, duration: 200 }}
+            >
+              <slot />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    {/if}
   </Portal>
 {/if}
 

package/src/Modal/ModalContent.svelte

@@ -165,4 +165,8 @@
   .secondary-action {
     margin-right: auto;
   }
+
+  .spectrum-Dialog-buttonGroup {
+    padding-left: 0;
+  }
 </style>

package/src/Table/AttachmentRenderer.svelte

@@ -17,14 +17,16 @@
 {#each attachments as attachment}
   {#if isImage(attachment.extension)}
     <Link quiet target="_blank" href={attachment.url}>
-      <img src={attachment.url} alt={attachment.extension} />
+      <div class="center">
+        <img src={attachment.url} alt={attachment.extension} />
+      </div>
     </Link>
   {:else}
     <Tooltip text={attachment.name} direction="right">
       <div class="file">
-        <Link quiet target="_blank" href={attachment.url}
-          >{attachment.extension}</Link
-        >
+        <Link quiet target="_blank" href={attachment.url}>
+          {attachment.extension}
+        </Link>
       </div>
     </Tooltip>
   {/if}
@@ -38,12 +40,15 @@
     height: 32px;
     max-width: 64px;
   }
+  .center,
   .file {
-    height: 32px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+  }
+  .file {
+    height: 32px;
     padding: 0 8px;
     color: var(--spectrum-global-color-gray-800);
     border: 1px solid var(--spectrum-global-color-gray-300);

package/src/Table/BoldRenderer.svelte

@@ -7,5 +7,9 @@
 <style>
   .bold {
     font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
   }
 </style>

package/src/Table/CellRenderer.svelte

@@ -6,6 +6,7 @@
   import AttachmentRenderer from "./AttachmentRenderer.svelte"
   import ArrayRenderer from "./ArrayRenderer.svelte"
   import InternalRenderer from "./InternalRenderer.svelte"
+  import { processStringSync } from "@budibase/string-templates"
 
   export let row
   export let schema
@@ -28,10 +29,33 @@
   $: type = schema?.type ?? "string"
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
+  $: width = schema?.width || "150px"
+  $: cellValue = getCellValue(value, schema.template)
+
+  const getCellValue = (value, template) => {
+    if (!template) {
+      return value
+    }
+    return processStringSync(template, { value })
+  }
 </script>
 
-{#if renderer && (customRenderer || (value != null && value !== ""))}
-  <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
-    <slot />
-  </svelte:component>
+{#if renderer && (customRenderer || (cellValue != null && cellValue !== ""))}
+  <div style="--max-cell-width: {schema.width ? 'none' : '200px'};">
+    <svelte:component
+      this={renderer}
+      {row}
+      {schema}
+      value={cellValue}
+      on:clickrelationship
+    >
+      <slot />
+    </svelte:component>
+  </div>
 {/if}
+
+<style>
+  div {
+    display: contents;
+  }
+</style>

package/src/Table/CodeRenderer.svelte

@@ -3,3 +3,12 @@
 </script>
 
 <code>{value}</code>
+
+<style>
+  code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
+  }
+</style>

package/src/Table/DateTimeRenderer.svelte

@@ -17,6 +17,8 @@
 
 <style>
   div {
-    width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 </style>

package/src/Table/InternalRenderer.svelte

@@ -43,11 +43,3 @@
 <div on:click|stopPropagation={onClick}>
   <Icon size="S" name="Copy" />
 </div>
-
-<style>
-  div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 150px;
-  }
-</style>

package/src/Table/SelectEditRenderer.svelte

@@ -8,9 +8,21 @@
   export let allowEditRows = false
 </script>
 
-{#if allowSelectRows}
-  <Checkbox value={selected} />
-{/if}
-{#if allowEditRows}
-  <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
-{/if}
+<div>
+  {#if allowSelectRows}
+    <Checkbox value={selected} />
+  {/if}
+  {#if allowEditRows}
+    <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
+  {/if}
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+</style>

package/src/Table/StringRenderer.svelte

@@ -8,6 +8,7 @@
   div {
     overflow: hidden;
     text-overflow: ellipsis;
-    width: 150px;
+    white-space: nowrap;
+    max-width: var(--max-cell-width);
   }
 </style>