@budibase/bbui 1.0.80-alpha.3 → 1.0.80

package/package.json

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

package/src/Button/Button.svelte

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

package/src/ColorPicker/ColorPicker.svelte

@@ -10,7 +10,6 @@
   export let value
   export let size = "M"
   export let spectrumTheme
-  export let alignRight = false
 
   let open = false
 
@@ -134,7 +133,6 @@
       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">
@@ -252,9 +250,6 @@
     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,4 +1,5 @@
 <script>
+  import { slide } from "svelte/transition"
   import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
   import Body from "../Typography/Body.svelte"
@@ -6,9 +7,7 @@
 
   export let title
   export let fillWidth
-
   let visible = false
-
   export function show() {
     if (visible) {
       return
@@ -22,27 +21,11 @@
     }
     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|local>
+    <section class:fillWidth class="drawer" transition:slide>
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
@@ -96,12 +79,4 @@
     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,9 +47,7 @@
       <use xlink:href="#spectrum-css-icon-Dash100" />
     </svg>
   </span>
-  {#if text}
-    <span class="spectrum-Checkbox-label">{text}</span>
-  {/if}
+  <span class="spectrum-Checkbox-label">{text || ""}</span>
 </label>
 
 <style>

package/src/Modal/Modal.svelte

@@ -54,43 +54,34 @@
 
 <svelte:window on:keydown={handleKey} />
 
-{#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.
-  -->
+<!-- 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}
   <Portal target=".modal-container">
-    {#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
+      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>
-    {/if}
+    </div>
   </Portal>
 {/if}
 

package/src/Modal/ModalContent.svelte

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

package/src/Table/AttachmentRenderer.svelte

@@ -17,16 +17,14 @@
 {#each attachments as attachment}
   {#if isImage(attachment.extension)}
     <Link quiet target="_blank" href={attachment.url}>
-      <div class="center">
-        <img src={attachment.url} alt={attachment.extension} />
-      </div>
+      <img src={attachment.url} alt={attachment.extension} />
     </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}
@@ -40,15 +38,12 @@
     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,9 +7,5 @@
 <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,7 +6,6 @@
   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
@@ -29,33 +28,10 @@
   $: 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 || (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 renderer && (customRenderer || (value != null && value !== ""))}
+  <svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
+    <slot />
+  </svelte:component>
 {/if}
-
-<style>
-  div {
-    display: contents;
-  }
-</style>

package/src/Table/CodeRenderer.svelte

@@ -3,12 +3,3 @@
 </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,8 +17,6 @@
 
 <style>
   div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    width: 200px;
   }
 </style>

package/src/Table/InternalRenderer.svelte

@@ -43,3 +43,11 @@
 <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,21 +8,9 @@
   export let allowEditRows = false
 </script>
 
-<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>
+{#if allowSelectRows}
+  <Checkbox value={selected} />
+{/if}
+{#if allowEditRows}
+  <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
+{/if}

package/src/Table/StringRenderer.svelte

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