@budibase/bbui 1.1.29-alpha.1 → 1.1.29

package/package.json

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

package/src/ActionButton/ActionButton.svelte

@@ -84,6 +84,7 @@
   }
   :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
     margin-left: 0;
+    transition: color ease-out 130ms;
   }
   .is-selected:not(.spectrum-ActionButton--emphasized) {
     background: var(--spectrum-global-color-gray-300);
@@ -92,4 +93,10 @@
     padding: 0;
     min-width: 0;
   }
+  .spectrum-ActionButton--quiet {
+    padding: 0 8px;
+  }
+  .is-selected:not(.emphasized) .spectrum-Icon {
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>

package/src/Avatar/Avatar.svelte

@@ -4,7 +4,7 @@
     ["XXS", "--spectrum-alias-avatar-size-50"],
     ["XS", "--spectrum-alias-avatar-size-75"],
     ["S", "--spectrum-alias-avatar-size-200"],
-    ["M", "--spectrum-alias-avatar-size-400"],
+    ["M", "--spectrum-alias-avatar-size-300"],
     ["L", "--spectrum-alias-avatar-size-500"],
     ["XL", "--spectrum-alias-avatar-size-600"],
     ["XXL", "--spectrum-alias-avatar-size-700"],
@@ -13,19 +13,6 @@
   export let url = ""
   export let disabled = false
   export let initials = "JD"
-
-  const DefaultColor = "#3aab87"
-
-  $: color = getColor(initials)
-
-  const getColor = initials => {
-    if (!initials?.length) {
-      return DefaultColor
-    }
-    const code = initials[0].toLowerCase().charCodeAt(0)
-    const hue = ((code % 26) / 26) * 360
-    return `hsl(${hue}, 50%, 50%)`
-  }
 </script>
 
 {#if url}
@@ -38,11 +25,10 @@
   />
 {:else}
   <div
-    class="spectrum-Avatar"
     class:is-disabled={disabled}
     style="width: var({sizes.get(size)}); height: var({sizes.get(
       size
-    )}); font-size: calc(var({sizes.get(size)}) / 2); background: {color};"
+    )}); font-size: calc(var({sizes.get(size)}) / 2)"
   >
     {initials || ""}
   </div>
@@ -54,6 +40,7 @@
     display: grid;
     place-items: center;
     font-weight: 600;
+    background: #3aab87;
     border-radius: 50%;
     overflow: hidden;
     user-select: none;

package/src/Form/Core/Multiselect.svelte

@@ -13,7 +13,6 @@
   export let readonly = false
   export let autocomplete = false
   export let sort = false
-  export let autoWidth = false
 
   const dispatch = createEventDispatcher()
   $: selectedLookupMap = getSelectedLookupMap(value)
@@ -86,5 +85,4 @@
   {getOptionValue}
   onSelectOption={toggleOption}
   {sort}
-  {autoWidth}
 />

package/src/Form/Core/Picker.svelte

@@ -87,10 +87,15 @@
     on:mousedown={onClick}
   >
     {#if fieldIcon}
-      <span class="option-icon">
+      <span class="option-extra">
         <Icon name={fieldIcon} />
       </span>
     {/if}
+    {#if fieldColour}
+      <span class="option-extra">
+        <StatusLight square color={fieldColour} />
+      </span>
+    {/if}
     <span
       class="spectrum-Picker-label"
       class:is-placeholder={isPlaceholder}
@@ -108,11 +113,6 @@
         <use xlink:href="#spectrum-icon-18-Alert" />
       </svg>
     {/if}
-    {#if fieldColour}
-      <span class="option-colour">
-        <StatusLight size="L" color={fieldColour} />
-      </span>
-    {/if}
     <svg
       class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
       focusable="false"
@@ -166,10 +166,15 @@
               on:click={() => onSelectOption(getOptionValue(option, idx))}
             >
               {#if getOptionIcon(option, idx)}
-                <span class="option-icon">
+                <span class="option-extra">
                   <Icon name={getOptionIcon(option, idx)} />
                 </span>
               {/if}
+              {#if getOptionColour(option, idx)}
+                <span class="option-extra">
+                  <StatusLight square color={getOptionColour(option, idx)} />
+                </span>
+              {/if}
               <span class="spectrum-Menu-itemLabel">
                 {getOptionLabel(option, idx)}
               </span>
@@ -180,11 +185,6 @@
               >
                 <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              {#if getOptionColour(option, idx)}
-                <span class="option-colour">
-                  <StatusLight size="L" color={getOptionColour(option, idx)} />
-                </span>
-              {/if}
             </li>
           {/each}
         {/if}
@@ -209,6 +209,9 @@
     width: 100%;
     box-shadow: none;
   }
+  .spectrum-Picker-label.auto-width {
+    margin-right: var(--spacing-xs);
+  }
   .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -221,16 +224,16 @@
   .spectrum-Picker-label.auto-width.is-placeholder {
     padding-right: 2px;
   }
+  .auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
 
   /* Icon and colour alignment */
   .spectrum-Menu-checkmark {
     align-self: center;
     margin-top: 0;
   }
-  .option-colour {
-    padding-left: 8px;
-  }
-  .option-icon {
+  .option-extra {
     padding-right: 8px;
   }
 

package/src/Form/Core/Select.svelte

@@ -17,6 +17,7 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+
   const dispatch = createEventDispatcher()
   let open = false
   $: fieldText = getFieldText(value, options, placeholder)

package/src/Form/Multiselect.svelte

@@ -14,7 +14,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let sort = false
-  export let autoWidth = false
+
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -33,7 +33,6 @@
     {sort}
     {getOptionLabel}
     {getOptionValue}
-    {autoWidth}
     on:change={onChange}
     on:click
   />

package/src/List/Items/DetailSummary.svench

@@ -0,0 +1,53 @@
+<script>
+  import { View } from "svench";
+  import DetailSummary from "./DetailSummary.svelte";
+</script>
+
+<svelte:head>
+	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+</svelte:head>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
+    width: 120px;
+  }
+</style>
+
+<View name="default">
+  <div>
+    <DetailSummary name="Category 1">
+      <span>1</span>
+      <span>2</span>
+      <span>3</span>
+      <span>4</span>
+    </DetailSummary>
+    <DetailSummary name="Category 2">
+      <span>1</span>
+      <span>2</span>
+      <span>3</span>
+      <span>4</span>
+    </DetailSummary>
+  </div>
+</View>
+
+<View name="thin">
+  <div>
+    <DetailSummary thin name="Category 1">
+      <span>1</span>
+      <span>2</span>
+      <span>3</span>
+      <span>4</span>
+    </DetailSummary>
+    <DetailSummary thin name="Category 2">
+      <span>1</span>
+      <span>2</span>
+      <span>3</span>
+      <span>4</span>
+    </DetailSummary>
+  </div>
+</View>

package/src/StatusLight/StatusLight.svelte

@@ -18,11 +18,16 @@
   export let disabled = false
   export let active = false
   export let color = null
+  export let square = false
+  export let hoverable = false
 </script>
 
 <div
+  on:click
   class="spectrum-StatusLight spectrum-StatusLight--size{size}"
   class:custom={!!color}
+  class:square
+  class:hoverable
   style={`--color: ${color};`}
   class:spectrum-StatusLight--celery={celery}
   class:spectrum-StatusLight--yellow={yellow}
@@ -54,6 +59,7 @@
     min-height: 0;
     padding-top: 0;
     padding-bottom: 0;
+    transition: color ease-out 130ms;
   }
   .spectrum-StatusLight.withText::before {
     margin-right: 10px;
@@ -61,4 +67,14 @@
   .custom::before {
     background: var(--color) !important;
   }
+  .square::before {
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    margin: 0;
+  }
+  .hoverable:hover {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>

package/src/Table/Table.svelte

@@ -37,7 +37,6 @@
   export let autoSortColumns = true
   export let compact = false
   export let customPlaceholder = false
-  export let showHeaderBorder = true
   export let placeholderText = "No rows found"
 
   const dispatch = createEventDispatcher()
@@ -287,7 +286,6 @@
         <div class="spectrum-Table-head">
           {#if showEditColumn}
             <div
-              class:noBorderHeader={!showHeaderBorder}
               class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
             >
               {#if allowSelectRows}
@@ -303,7 +301,6 @@
           {#each fields as field}
             <div
               class="spectrum-Table-headCell"
-              class:noBorderHeader={!showHeaderBorder}
               class:spectrum-Table-headCell--alignCenter={schema[field]
                 .align === "Center"}
               class:spectrum-Table-headCell--alignRight={schema[field].align ===
@@ -351,7 +348,6 @@
           <div class="spectrum-Table-row">
             {#if showEditColumn}
               <div
-                class:noBorderCheckbox={!showHeaderBorder}
                 class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
                 on:click={e => {
                   toggleSelectRow(row)
@@ -485,18 +481,6 @@
   .spectrum-Table-headCell:last-of-type {
     border-right: var(--table-border);
   }
-
-  .noBorderHeader {
-    border-top: none !important;
-    border-right: none !important;
-    border-left: none !important;
-  }
-
-  .noBorderCheckbox {
-    border-top: none !important;
-    border-right: none !important;
-  }
-
   .spectrum-Table-headCell--alignCenter {
     justify-content: center;
   }
@@ -515,7 +499,7 @@
     z-index: 3;
   }
   .spectrum-Table-headCell .title {
-    overflow: visible;
+    overflow: hidden;
     text-overflow: ellipsis;
   }
   .spectrum-Table-headCell:hover .spectrum-Table-editIcon {
@@ -578,7 +562,7 @@
     gap: 4px;
     border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
     background-color: var(--table-bg);
-    z-index: auto;
+    z-index: 1;
   }
   .spectrum-Table-cell--divider {
     padding-right: var(--cell-padding);
@@ -586,7 +570,6 @@
   .spectrum-Table-cell--divider + .spectrum-Table-cell {
     padding-left: var(--cell-padding);
   }
-
   .spectrum-Table-cell--edit {
     position: sticky;
     left: 0;

package/src/index.js

@@ -23,8 +23,6 @@ export { default as Icon, directions } from "./Icon/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
-export { default as InputDropdown } from "./Form/InputDropdown.svelte"
-export { default as PickerDropdown } from "./Form/PickerDropdown.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
@@ -60,15 +58,12 @@ export { default as Pagination } from "./Pagination/Pagination.svelte"
 export { default as Badge } from "./Badge/Badge.svelte"
 export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
-export { default as IconPicker } from "./IconPicker/IconPicker.svelte"
 export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
 export { default as Banner } from "./Banner/Banner.svelte"
 export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
-export { default as List } from "./List/List.svelte"
-export { default as ListItem } from "./List/ListItem.svelte"
 export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
@@ -76,7 +71,6 @@ export { default as Slider } from "./Form/Slider.svelte"
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
 export { default as CodeRenderer } from "./Table/CodeRenderer.svelte"
-export { default as InternalRenderer } from "./Table/InternalRenderer.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"

package/src/Form/Core/InputDropdown.svelte

@@ -1,218 +0,0 @@
-<script>
-  import "@spectrum-css/inputgroup/dist/index-vars.css"
-  import "@spectrum-css/popover/dist/index-vars.css"
-  import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
-  import { createEventDispatcher } from "svelte"
-  import clickOutside from "../../Actions/click_outside"
-
-  export let inputValue
-  export let dropdownValue
-  export let id = null
-  export let inputType = "text"
-  export let placeholder = "Choose an option or type"
-  export let disabled = false
-  export let readonly = false
-  export let updateOnChange = true
-  export let error = null
-  export let options = []
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
-
-  export let isOptionSelected = () => false
-
-  const dispatch = createEventDispatcher()
-  let open = false
-  let focus = false
-
-  $: fieldText = getFieldText(dropdownValue, options, placeholder)
-
-  const getFieldText = (dropdownValue, options, placeholder) => {
-    // Always use placeholder if no value
-    if (dropdownValue == null || dropdownValue === "") {
-      return placeholder || "Choose an option or type"
-    }
-
-    // Wait for options to load if there is a value but no options
-    if (!options?.length) {
-      return ""
-    }
-
-    // Render the label if the selected option is found, otherwise raw value
-    const selected = options.find(
-      option => getOptionValue(option) === dropdownValue
-    )
-    return selected ? getOptionLabel(selected) : dropdownValue
-  }
-
-  const updateValue = newValue => {
-    if (readonly) {
-      return
-    }
-    dispatch("change", newValue)
-  }
-
-  const onFocus = () => {
-    if (readonly) {
-      return
-    }
-    focus = true
-  }
-
-  const onBlur = event => {
-    if (readonly) {
-      return
-    }
-    focus = false
-    updateValue(event.target.value)
-  }
-
-  const onInput = event => {
-    if (readonly || !updateOnChange) {
-      return
-    }
-    updateValue(event.target.value)
-  }
-
-  const updateValueOnEnter = event => {
-    if (readonly) {
-      return
-    }
-    if (event.key === "Enter") {
-      updateValue(event.target.value)
-    }
-  }
-
-  const onClick = () => {
-    dispatch("click")
-    if (readonly) {
-      return
-    }
-    open = true
-  }
-
-  const onPick = newValue => {
-    dispatch("pick", newValue)
-    open = false
-  }
-
-  const extractProperty = (value, property) => {
-    if (value && typeof value === "object") {
-      return value[property]
-    }
-    return value
-  }
-</script>
-
-<div
-  class="spectrum-InputGroup"
-  class:is-invalid={!!error}
-  class:is-disabled={disabled}
->
-  <div
-    class="spectrum-Textfield spectrum-InputGroup-textfield"
-    class:is-invalid={!!error}
-    class:is-disabled={disabled}
-    class:is-focused={focus}
-  >
-    <input
-      {id}
-      on:click
-      on:blur
-      on:focus
-      on:input
-      on:keyup
-      on:blur={onBlur}
-      on:focus={onFocus}
-      on:input={onInput}
-      on:keyup={updateValueOnEnter}
-      value={inputValue || ""}
-      placeholder={placeholder || ""}
-      {disabled}
-      {readonly}
-      {inputType}
-      class="spectrum-Textfield-input spectrum-InputGroup-input"
-    />
-  </div>
-  <div style="width: 30%">
-    <button
-      {id}
-      class="spectrum-Picker spectrum-Picker--sizeM override-borders"
-      {disabled}
-      class:is-open={open}
-      aria-haspopup="listbox"
-      on:mousedown={onClick}
-    >
-      <span class="spectrum-Picker-label">
-        <div>
-          {fieldText}
-        </div></span
-      >
-      <svg
-        class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
-        focusable="false"
-        aria-hidden="true"
-      >
-        <use xlink:href="#spectrum-css-icon-Chevron100" />
-      </svg>
-    </button>
-    {#if open}
-      <div
-        use:clickOutside={() => (open = false)}
-        transition:fly|local={{ y: -20, duration: 200 }}
-        class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-      >
-        <ul class="spectrum-Menu" role="listbox">
-          {#each options as option, idx}
-            <li
-              class="spectrum-Menu-item"
-              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
-              role="option"
-              aria-selected="true"
-              tabindex="0"
-              on:click={() => onPick(getOptionValue(option, idx))}
-            >
-              <span class="spectrum-Menu-itemLabel">
-                {getOptionLabel(option, idx)}
-              </span>
-              <svg
-                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-                focusable="false"
-                aria-hidden="true"
-              >
-                <use xlink:href="#spectrum-css-icon-Checkmark100" />
-              </svg>
-            </li>
-          {/each}
-        </ul>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .spectrum-InputGroup {
-    min-width: 0;
-    width: 100%;
-  }
-
-  .spectrum-InputGroup-input {
-    border-right-width: 1px;
-  }
-  .spectrum-Textfield {
-    width: 100%;
-  }
-  .spectrum-Textfield-input {
-    width: 0;
-  }
-
-  .override-borders {
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-  }
-  .spectrum-Popover {
-    max-height: 240px;
-    z-index: 999;
-    top: 100%;
-  }
-</style>