@budibase/bbui 1.0.76-alpha.5 → 1.0.78

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.76-alpha.5",
+  "version": "1.0.78",
   "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.72-alpha.0",
     "@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": "2cf00112ad17b2e4805b38d3897bf6d230aa6a85"
+  "gitHead": "457fb4fae186f9257b73e096ade8d4ecfbb5e9de"
 }

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/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/StringRenderer.svelte

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