@budibase/bbui 2.8.31 → 2.8.32-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.8.31",
+  "version": "2.8.32-alpha.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,8 +38,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.8.31",
-    "@budibase/string-templates": "2.8.31",
+    "@budibase/shared-core": "2.8.32-alpha.0",
+    "@budibase/string-templates": "2.8.32-alpha.0",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -84,6 +84,7 @@
     "@spectrum-css/vars": "3.0.1",
     "dayjs": "^1.10.4",
     "easymde": "^2.16.1",
+    "svelte-dnd-action": "^0.9.8",
     "svelte-flatpickr": "3.2.3",
     "svelte-portal": "^1.0.0"
   },
@@ -96,7 +97,9 @@
         "dependsOn": [
           {
             "projects": [
-              "@budibase/string-templates"
+              "@budibase/string-templates",
+              "@budibase/shared-core",
+              "@budibase/types"
             ],
             "target": "build"
           }
@@ -104,5 +107,5 @@
       }
     }
   },
-  "gitHead": "4613b17c1e76328bf279998c821a17195fbaab37"
+  "gitHead": "d004c83e8892505e19d9a06b85167a9f79f127fe"
 }

package/src/Button/Button.svelte

@@ -1,6 +1,7 @@
 <script>
   import "@spectrum-css/button/dist/index-vars.css"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
+  import { createEventDispatcher } from "svelte"
 
   export let type
   export let disabled = false
@@ -17,65 +18,52 @@
   export let newStyles = true
   export let id
 
-  let showTooltip = false
+  const dispatch = createEventDispatcher()
 </script>
 
-<button
-  {id}
-  {type}
-  class:spectrum-Button--cta={cta}
-  class:spectrum-Button--primary={primary}
-  class:spectrum-Button--secondary={secondary}
-  class:spectrum-Button--warning={warning}
-  class:spectrum-Button--overBackground={overBackground}
-  class:spectrum-Button--quiet={quiet}
-  class:new-styles={newStyles}
-  class:active
-  class:disabled
-  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
-  {disabled}
-  on:click|preventDefault
-  on:mouseover={() => (showTooltip = true)}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
->
-  {#if icon}
-    <svg
-      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
-      focusable="false"
-      aria-hidden="true"
-      aria-label={icon}
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
-  {/if}
-  {#if $$slots}
-    <span class="spectrum-Button-label"><slot /></span>
-  {/if}
-  {#if !disabled && tooltip}
-    <div class="tooltip-icon">
+<AbsTooltip text={tooltip}>
+  <button
+    {id}
+    {type}
+    class:spectrum-Button--cta={cta}
+    class:spectrum-Button--primary={primary}
+    class:spectrum-Button--secondary={secondary}
+    class:spectrum-Button--warning={warning}
+    class:spectrum-Button--overBackground={overBackground}
+    class:spectrum-Button--quiet={quiet}
+    class:new-styles={newStyles}
+    class:active
+    class:is-disabled={disabled}
+    class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+    on:click|preventDefault={() => {
+      if (!disabled) {
+        dispatch("click")
+      }
+    }}
+  >
+    {#if icon}
       <svg
         class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
         focusable="false"
         aria-hidden="true"
-        aria-label="Info"
+        aria-label={icon}
       >
-        <use xlink:href="#spectrum-icon-18-InfoOutline" />
+        <use xlink:href="#spectrum-icon-18-{icon}" />
       </svg>
-    </div>
-  {/if}
-  {#if showTooltip && tooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
-    </div>
-  {/if}
-</button>
+    {/if}
+    {#if $$slots}
+      <span class="spectrum-Button-label"><slot /></span>
+    {/if}
+  </button>
+</AbsTooltip>
 
 <style>
   button {
     position: relative;
   }
-
+  button.is-disabled {
+    cursor: default;
+  }
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
@@ -84,21 +72,6 @@
   .active {
     color: var(--spectrum-global-color-blue-600) !important;
   }
-  .tooltip {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    z-index: 100;
-    width: 160px;
-    text-align: center;
-    transform: translateX(-50%);
-    left: 50%;
-    top: calc(100% - 3px);
-  }
-  .tooltip-icon {
-    padding-left: var(--spacing-m);
-    line-height: 0;
-  }
   .spectrum-Button--primary.new-styles {
     background: var(--spectrum-global-color-gray-800);
     border-color: transparent;
@@ -112,10 +85,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
+  .spectrum-Button--secondary.new-styles:not(.is-disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
-  .spectrum-Button--secondary.new-styles.disabled {
+  .spectrum-Button--secondary.new-styles.is-disabled {
     color: var(--spectrum-global-color-gray-500);
   }
 </style>

package/src/FancyForm/FancyButtonRadio.svelte

@@ -15,8 +15,6 @@
 
   const dispatch = createEventDispatcher()
 
-  $: placeholder = !value
-
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
       return value[property]

package/src/Form/Core/CheckboxGroup.svelte

@@ -12,23 +12,24 @@
   export let getOptionValue = option => option
 
   const dispatch = createEventDispatcher()
+
   const onChange = e => {
-    let tempValue = value
-    let isChecked = e.target.checked
-    if (!tempValue.includes(e.target.value) && isChecked) {
-      tempValue.push(e.target.value)
+    const optionValue = e.target.value
+    if (e.target.checked && !value.includes(optionValue)) {
+      dispatch("change", [...value, optionValue])
+    } else {
+      dispatch(
+        "change",
+        value.filter(x => x !== optionValue)
+      )
     }
-    value = tempValue
-    dispatch(
-      "change",
-      tempValue.filter(val => val !== e.target.value || isChecked)
-    )
   }
 </script>
 
 <div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
   {#if options && Array.isArray(options)}
     {#each options as option}
+      {@const optionValue = getOptionValue(option)}
       <div
         title={getOptionLabel(option)}
         class="spectrum-Checkbox spectrum-FieldGroup-item"
@@ -39,11 +40,11 @@
         >
           <input
             on:change={onChange}
-            value={getOptionValue(option)}
             type="checkbox"
             class="spectrum-Checkbox-input"
+            value={optionValue}
+            checked={value.includes(optionValue)}
             {disabled}
-            checked={value.includes(getOptionValue(option))}
           />
           <span class="spectrum-Checkbox-box">
             <svg

package/src/Form/Core/EnvDropdown.svelte

@@ -150,7 +150,7 @@
           </div>
         {:else if variables.length}
           <div style="max-height: 100px">
-            {#each variables as variable, idx}
+            {#each variables as variable}
               <li
                 class="spectrum-Menu-item"
                 role="option"

package/src/IconPicker/IconPicker.svelte

@@ -1,5 +1,4 @@
 <script>
-  //import { createEventDispatcher } from "svelte"
   import "@spectrum-css/popover/dist/index-vars.css"
   import clickOutside from "../Actions/click_outside"
   import { fly } from "svelte/transition"

package/src/Link/Link.svelte

@@ -1,6 +1,7 @@
 <script>
   import "@spectrum-css/link/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
 
   export let href = "#"
   export let size = "M"
@@ -10,18 +11,61 @@
   export let overBackground = false
   export let target
   export let download
+  export let disabled = false
+  export let tooltip = null
 
   const dispatch = createEventDispatcher()
+
+  const onClick = e => {
+    if (!disabled) {
+      dispatch("click")
+      e.stopPropagation()
+    }
+  }
 </script>
 
 <a
-  on:click={e => dispatch("click") && e.stopPropagation()}
+  on:click={onClick}
   {href}
   {target}
   {download}
+  class:disabled
   class:spectrum-Link--primary={primary}
   class:spectrum-Link--secondary={secondary}
   class:spectrum-Link--overBackground={overBackground}
   class:spectrum-Link--quiet={quiet}
-  class="spectrum-Link spectrum-Link--size{size}"><slot /></a
+  class="spectrum-Link spectrum-Link--size{size}"
 >
+  <slot />
+  {#if tooltip}
+    <div class="tooltip">
+      <Tooltip textWrapping direction="bottom" text={tooltip} />
+    </div>
+  {/if}
+</a>
+
+<style>
+  a {
+    position: relative;
+  }
+  a.disabled {
+    color: var(--spectrum-global-color-gray-500);
+  }
+  a.disabled:hover {
+    text-decoration: none;
+    cursor: default;
+  }
+  .tooltip {
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: 130ms ease-out;
+    pointer-events: none;
+    z-index: 100;
+  }
+  a:hover .tooltip {
+    opacity: 1;
+  }
+</style>

package/src/Modal/ModalContent.svelte

@@ -1,3 +1,7 @@
+<script context="module">
+  export const keepOpen = Symbol("keepOpen")
+</script>
+
 <script>
   import "@spectrum-css/dialog/dist/index-vars.css"
   import { getContext } from "svelte"
@@ -30,7 +34,7 @@
 
   async function secondary(e) {
     loading = true
-    if (!secondaryAction || (await secondaryAction(e)) !== false) {
+    if (!secondaryAction || (await secondaryAction(e)) !== keepOpen) {
       hide()
     }
     loading = false
@@ -38,7 +42,7 @@
 
   async function confirm() {
     loading = true
-    if (!onConfirm || (await onConfirm()) !== false) {
+    if (!onConfirm || (await onConfirm()) !== keepOpen) {
       hide()
     }
     loading = false
@@ -46,7 +50,7 @@
 
   async function close() {
     loading = true
-    if (!onCancel || (await onCancel()) !== false) {
+    if (!onCancel || (await onCancel()) !== keepOpen) {
       cancel()
     }
     loading = false

package/src/OptionSelectDnD/OptionSelectDnD.svelte

@@ -0,0 +1,252 @@
+<script>
+  import { flip } from "svelte/animate"
+  import { dndzone } from "svelte-dnd-action"
+  import Icon from "../Icon/Icon.svelte"
+  import Popover from "../Popover/Popover.svelte"
+  import { onMount } from "svelte"
+  const flipDurationMs = 150
+
+  export let constraints
+  export let optionColors = {}
+  let options = []
+
+  let colorPopovers = []
+  let anchors = []
+
+  let colorsArray = [
+    "hsla(0, 90%, 75%, 0.3)",
+    "hsla(50, 80%, 75%, 0.3)",
+    "hsla(120, 90%, 75%, 0.3)",
+    "hsla(200, 90%, 75%, 0.3)",
+    "hsla(240, 90%, 75%, 0.3)",
+    "hsla(320, 90%, 75%, 0.3)",
+  ]
+  $: {
+    if (constraints.inclusion.length) {
+      options = constraints.inclusion.map(value => ({
+        name: value,
+        id: Math.random(),
+      }))
+    }
+  }
+  const removeInput = idx => {
+    delete optionColors[options[idx].name]
+    constraints.inclusion = constraints.inclusion.filter((e, i) => i !== idx)
+    options = options.filter((e, i) => i !== idx)
+    colorPopovers.pop(undefined)
+    anchors.pop(undefined)
+  }
+
+  const addNewInput = () => {
+    options = [
+      ...options,
+      { name: `Option ${constraints.inclusion.length + 1}`, id: Math.random() },
+    ]
+    constraints.inclusion = [
+      ...constraints.inclusion,
+      `Option ${constraints.inclusion.length + 1}`,
+    ]
+
+    colorPopovers.push(undefined)
+    anchors.push(undefined)
+  }
+
+  const handleDndConsider = e => {
+    options = e.detail.items
+  }
+  const handleDndFinalize = e => {
+    options = e.detail.items
+    constraints.inclusion = options.map(option => option.name)
+  }
+
+  const handleColorChange = (optionName, color, idx) => {
+    optionColors[optionName] = color
+    colorPopovers[idx].hide()
+  }
+
+  const handleNameChange = (optionName, idx, value) => {
+    constraints.inclusion[idx] = value
+    options[idx].name = value
+    optionColors[value] = optionColors[optionName]
+    delete optionColors[optionName]
+  }
+
+  const openColorPickerPopover = (optionIdx, target) => {
+    colorPopovers[optionIdx].show()
+    anchors[optionIdx] = target
+  }
+
+  onMount(() => {
+    // Initialize anchor arrays on mount, assuming 'options' is already populated
+    colorPopovers = constraints.inclusion.map(() => undefined)
+    anchors = constraints.inclusion.map(() => undefined)
+  })
+</script>
+
+<div>
+  <div
+    class="actions"
+    use:dndzone={{
+      items: options,
+      flipDurationMs,
+      dropTargetStyle: { outline: "none" },
+    }}
+    on:consider={handleDndConsider}
+    on:finalize={handleDndFinalize}
+  >
+    {#each options as option, idx (option.id)}
+      <div
+        class="no-border action-container"
+        animate:flip={{ duration: flipDurationMs }}
+      >
+        <div class="child drag-handle-spacing">
+          <Icon name="DragHandle" size="L" />
+        </div>
+        <div class="child color-picker">
+          <div
+            id="color-picker"
+            bind:this={anchors[idx]}
+            style="--color:{optionColors?.[option.name] ||
+              'hsla(0, 1%, 50%, 0.3)'}"
+            class="circle"
+            on:click={e => openColorPickerPopover(idx, e.target)}
+          >
+            <Popover
+              bind:this={colorPopovers[idx]}
+              anchor={anchors[idx]}
+              align="left"
+              offset={0}
+              style=""
+              popoverTarget={document.getElementById(`color-picker`)}
+              animate={false}
+            >
+              <div class="colors">
+                {#each colorsArray as color}
+                  <div
+                    on:click={() => handleColorChange(option.name, color, idx)}
+                    style="--color:{color};"
+                    class="circle circle-hover"
+                  />
+                {/each}
+              </div>
+            </Popover>
+          </div>
+        </div>
+        <div class="child">
+          <input
+            class="input-field"
+            type="text"
+            on:change={e => handleNameChange(option.name, idx, e.target.value)}
+            value={option.name}
+            placeholder="Option name"
+          />
+        </div>
+        <div class="child">
+          <Icon name="Close" hoverable size="S" on:click={removeInput(idx)} />
+        </div>
+      </div>
+    {/each}
+  </div>
+  <div on:click={addNewInput} class="add-option">
+    <Icon hoverable name="Add" />
+    <div>Add option</div>
+  </div>
+</div>
+
+<style>
+  .action-container {
+    background-color: var(--spectrum-alias-background-color-primary);
+    border-radius: 0px;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
+      border-color 130ms ease-in-out;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .no-border {
+    border-bottom: none;
+  }
+
+  .action-container:last-child {
+    border-bottom: 1px solid var(--spectrum-global-color-gray-300) !important;
+  }
+
+  .child {
+    height: 30px;
+  }
+  .child:hover,
+  .child:focus {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  .add-option {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--spacing-m);
+    gap: var(--spacing-m);
+    cursor: pointer;
+  }
+
+  .input-field {
+    border: none;
+    outline: none;
+    background-color: transparent;
+    width: 100%;
+    color: var(--text);
+  }
+
+  .child input[type="text"] {
+    padding-left: 10px;
+  }
+
+  .input-field:hover,
+  .input-field:focus {
+    background: var(--spectrum-global-color-gray-200);
+  }
+
+  .action-container > :nth-child(1) {
+    flex-grow: 1;
+    justify-content: center;
+    display: flex;
+  }
+
+  .action-container > :nth-child(2) {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .action-container > :nth-child(3) {
+    flex-grow: 4;
+    display: flex;
+  }
+  .action-container > :nth-child(4) {
+    flex-grow: 1;
+    justify-content: center;
+    display: flex;
+  }
+
+  .circle {
+    height: 20px;
+    width: 20px;
+    background-color: var(--color);
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+  }
+
+  .circle-hover:hover {
+    border: 1px solid var(--spectrum-global-color-blue-400);
+    cursor: pointer;
+  }
+
+  .colors {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: var(--spacing-xl);
+    justify-items: center;
+    margin: var(--spacing-m);
+  }
+</style>

package/src/Popover/Popover.svelte

@@ -21,6 +21,7 @@
   export let offset = 5
   export let customHeight
   export let animate = true
+  export let customZindex
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -77,8 +78,9 @@
       }}
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
+      class:customZindex
       role="presentation"
-      style="height: {customHeight}"
+      style="height: {customHeight}; --customZindex: {customZindex};"
       transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
     >
       <slot />
@@ -92,4 +94,8 @@
     border-color: var(--spectrum-global-color-gray-300);
     overflow: auto;
   }
+
+  .customZindex {
+    z-index: var(--customZindex) !important;
+  }
 </style>

package/src/Table/CellRenderer.svelte

@@ -29,7 +29,6 @@
   $: type = getType(schema)
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
-  $: width = schema?.width || "150px"
   $: cellValue = getCellValue(value, schema.template)
 
   const getType = schema => {

package/src/Table/Table.svelte

@@ -379,7 +379,7 @@
           </div>
         {/if}
         {#if sortedRows?.length}
-          {#each sortedRows as row, idx}
+          {#each sortedRows as row}
             <div class="spectrum-Table-row" class:clickable={allowClickRows}>
               {#if showEditColumn}
                 <div