@budibase/bbui 3.32.4 → 3.32.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.32.4",
+  "version": "3.32.5",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "2bca48effb7679e79385bd7515d1fd604c609d8f"
+  "gitHead": "9584bb3f87662f62b08760a78ea5fc0e95818410"
 }

package/src/Table/Table.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" generics="O extends Record<string, any>">
   import "@spectrum-css/table/dist/index-vars.css"
   import { createEventDispatcher, onMount } from "svelte"
   import Checkbox from "../Form/Checkbox.svelte"
@@ -26,7 +26,7 @@
    * borderLeft: show a left border
    * borderRight: show a right border
    */
-  export let data: any[] = []
+  export let data: O[] = []
   export let schema: Record<string, any> = {}
   export let showAutoColumns: boolean = false
   export let rowCount: number = 0
@@ -51,8 +51,14 @@
   export let defaultSortOrder: "Ascending" | "Descending" = "Ascending"
   export let rounded: boolean = false
   export let stickyHeader: boolean = true
+  export let editColumnPosition: "left" | "right" = "left"
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{
+    click: O
+    sort: { column: typeof sortColumn; order: typeof sortOrder }
+    editcolumn: string
+    editrow: O
+  }>()
 
   let ref: HTMLDivElement
 
@@ -91,7 +97,12 @@
     effectiveHeaderHeight
   )
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
-  $: gridStyle = getGridStyle(fields, schema, showEditColumn)
+  $: gridStyle = getGridStyle(
+    fields,
+    schema,
+    showEditColumn,
+    editColumnPosition
+  )
   $: showEditColumn = allowEditRows || allowSelectRows
   $: cellStyles = computeCellStyles(schema)
 
@@ -166,10 +177,11 @@
   const getGridStyle = (
     fields: string[],
     schema: Record<string, any>,
-    showEditColumn: boolean
+    showEditColumn: boolean,
+    editColumnPosition: "left" | "right"
   ): string => {
     let style = "grid-template-columns:"
-    if (showEditColumn) {
+    if (showEditColumn && editColumnPosition === "left") {
       style += " auto"
     }
     fields?.forEach(field => {
@@ -180,6 +192,9 @@
         style += " minmax(auto, 1fr)"
       }
     })
+    if (showEditColumn && editColumnPosition === "right") {
+      style += " auto"
+    }
     style += ";"
     return style
   }
@@ -394,10 +409,10 @@
       >
         {#if fields.length && !hideHeader}
           <div class="spectrum-Table-head">
-            {#if showEditColumn}
+            {#if showEditColumn && editColumnPosition === "left"}
               <div
                 class:noBorderHeader={!showHeaderBorder}
-                class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
+                class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit spectrum-Table-headCell--editLeft"
               >
                 {#if allowSelectRows}
                   <Checkbox
@@ -453,15 +468,30 @@
                 </div>
               </div>
             {/each}
+            {#if showEditColumn && editColumnPosition === "right"}
+              <div
+                class:noBorderHeader={!showHeaderBorder}
+                class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit spectrum-Table-headCell--editRight"
+              >
+                {#if allowSelectRows}
+                  <Checkbox
+                    bind:value={checkboxStatus}
+                    on:change={toggleSelectAll}
+                  />
+                {:else}
+                  Edit
+                {/if}
+              </div>
+            {/if}
           </div>
         {/if}
         {#if sortedRows?.length}
           {#each sortedRows as row}
             <div class="spectrum-Table-row" class:clickable={allowClickRows}>
-              {#if showEditColumn}
+              {#if showEditColumn && editColumnPosition === "left"}
                 <div
                   class:noBorderCheckbox={!showHeaderBorder}
-                  class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
+                  class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit spectrum-Table-cell--editLeft"
                   on:click={e => {
                     if (row.__selectable === false) {
                       return
@@ -508,6 +538,29 @@
                   </CellRenderer>
                 </div>
               {/each}
+              {#if showEditColumn && editColumnPosition === "right"}
+                <div
+                  class:noBorderCheckbox={!showHeaderBorder}
+                  class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit spectrum-Table-cell--editRight"
+                  on:click={e => {
+                    if (row.__selectable === false) {
+                      return
+                    }
+                    toggleSelectRow(row)
+                    e.stopPropagation()
+                  }}
+                >
+                  <SelectEditRenderer
+                    data={row}
+                    selected={selectedRows.some(
+                      selectedRow => selectedRow._id === row._id
+                    )}
+                    onEdit={e => editRow(e, row)}
+                    {allowSelectRows}
+                    {allowEditRows}
+                  />
+                </div>
+              {/if}
             </div>
           {/each}
         {:else}
@@ -585,6 +638,10 @@
     /* adding 1px to compensate for lack of right border in header */
     padding-right: calc(var(--cell-padding) / 1.33 + 1px);
   }
+  .spectrum-Table-head > .spectrum-Table-headCell--edit:last-child {
+    padding-left: calc(var(--cell-padding) / 1.33);
+    padding-right: calc(var(--cell-padding) / 1.33);
+  }
   .spectrum-Table-head > :last-child {
     border-right: 1px solid transparent;
     padding-right: var(--cell-padding);
@@ -640,7 +697,7 @@
     position: sticky;
     top: 0;
   }
-  .wrapper--sticky-header .spectrum-Table-headCell--edit {
+  .wrapper--sticky-header .spectrum-Table-headCell--editLeft {
     position: sticky;
     left: 0;
   }
@@ -679,6 +736,9 @@
   .spectrum-Table-row > .spectrum-Table-cell--edit:first-child {
     padding-left: calc(var(--cell-padding) / 1.33);
   }
+  .spectrum-Table-row > .spectrum-Table-cell--edit:last-child {
+    padding-right: calc(var(--cell-padding) / 1.33);
+  }
   .spectrum-Table-row > :last-child {
     border-right: var(--table-border);
     padding-right: var(--cell-padding);
@@ -705,13 +765,15 @@
     transition: background-color 130ms ease-out;
   }
   .spectrum-Table-cell--edit {
-    position: sticky;
-    left: 0;
     z-index: 2;
     justify-content: center;
     padding-left: calc(var(--cell-padding) / 1.33);
     padding-right: calc(var(--cell-padding) / 1.33);
   }
+  .spectrum-Table-cell--editLeft {
+    position: sticky;
+    left: 0;
+  }
 
   /* Placeholder  */
   .placeholder {

package/src/bbui.css

@@ -14,6 +14,79 @@
   --bb-blue: #6a9bcc;
   --bb-green: #788c5d;
 
+  /* temporary colours for Joe testing */
+  /* Brand */
+  --color-brand-100: #e9f0ff;
+  --color-brand-200: #d3e0ff;
+  --color-brand-300: #afc7ff;
+  --color-brand-400: #7fa6ff;
+  --color-brand-500: #386cf4;
+  --color-brand-600: #2660f3;
+  --color-brand-700: #1e4fd4;
+  --color-brand-800: #173ea8;
+  --color-brand-900: #112d7a;
+  --color-brand-950: #091841;
+
+  /* Blue */
+  --color-blue-100: #eaf2f9;
+  --color-blue-200: #c3daea;
+  --color-blue-300: #89b5e2;
+  --color-blue-400: #6a9bcc;
+  --color-blue-500: #467db4;
+  --color-blue-600: #215f9e;
+  --color-blue-700: #1b436a;
+  --color-blue-800: #13324f;
+  --color-blue-900: #0c2236;
+  --color-blue-950: #0c2236;
+
+  /* Clay / Orange */
+  --color-orange-100: #f6e6da;
+  --color-orange-200: #ecd3c2;
+  --color-orange-300: #ddb99a;
+  --color-orange-400: #d4a27f;
+  --color-orange-500: #d97757;
+  --color-orange-600: #c86240;
+  --color-orange-700: #aa4321;
+  --color-orange-800: #7f3118;
+  --color-orange-900: #4a1d0e;
+  --color-orange-950: #301208;
+
+  /* Grass / Green */
+  --color-green-100: #eef3e9;
+  --color-green-200: #d2ddc3;
+  --color-green-300: #b6c7a8;
+  --color-green-400: #9fb88a;
+  --color-green-500: #8ca171;
+  --color-green-600: #788c5d;
+  --color-green-700: #4c622f;
+  --color-green-800: #35461f;
+  --color-green-900: #1f2a12;
+  --color-green-950: #141b0c;
+
+  /* Lavender / Purple */
+  --color-purple-100: #f1eefb;
+  --color-purple-200: #d2ccef;
+  --color-purple-300: #bdb0f5;
+  --color-purple-400: #a292e3;
+  --color-purple-500: #8777d1;
+  --color-purple-600: #585392;
+  --color-purple-700: #363174;
+  --color-purple-800: #252154;
+  --color-purple-900: #171336;
+  --color-purple-950: #110e27;
+
+  /* Reds */
+  --color-red-100: #f4e7e4;
+  --color-red-200: #e9c8c3;
+  --color-red-300: #d9a29a;
+  --color-red-400: #c87c72;
+  --color-red-500: #b4564b;
+  --color-red-600: #9c3f36;
+  --color-red-700: #7e2c24;
+  --color-red-800: #5a1e19;
+  --color-red-900: #361210;
+  --color-red-950: #220b0a;
+
   /* Custom spectrum additions */
   --spectrum-global-color-static-red-1200: #740000;
   --spectrum-global-color-static-orange-1200: #612300;

package/src/helpers.ts

@@ -1216,6 +1216,7 @@ export const SpectrumIconMap: Record<string, string> = {
   WebPages: "browsers",
   Workflow: "tree-structure",
   WorkflowAdd: "tree-structure",
+  Brain: "brain",
   Wrench: "wrench",
   ZoomIn: "magnifying-glass-plus",
   ZoomOut: "magnifying-glass-minus",