@budibase/bbui 1.58.13 → 2.0.0

package/src/DetailSummary/DetailSummary.svelte

@@ -0,0 +1,83 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let name
+  export let show = false
+  export let collapsible = true
+
+  const dispatch = createEventDispatcher()
+  const onHeaderClick = () => {
+    if (!collapsible) {
+      return
+    }
+    show = !show
+    if (show) {
+      dispatch("open")
+    }
+  }
+</script>
+
+<div class="property-group-container">
+  <div class="property-group-name" on:click={onHeaderClick}>
+    <div class="name">{name}</div>
+    {#if collapsible}
+      <Icon size="S" name={show ? "Remove" : "Add"} />
+    {/if}
+  </div>
+  <div class="property-panel" class:show={show || !collapsible}>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .property-group-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    border-bottom: var(--border-light);
+  }
+
+  .property-group-name {
+    cursor: pointer;
+    display: flex;
+    flex-flow: row nowrap;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-m) var(--spacing-xl);
+    color: var(--spectrum-global-color-gray-600);
+    transition: color 130ms ease-in-out;
+  }
+  .property-group-name:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
+
+  .name {
+    text-align: left;
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    letter-spacing: 0.14px;
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .property-panel {
+    display: none;
+    padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
+      var(--spacing-xl);
+  }
+
+  .show {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+  }
+</style>

package/src/Divider/Divider.svelte

@@ -0,0 +1,28 @@
+<script>
+  import "@spectrum-css/divider/dist/index-vars.css"
+  export let size = "M"
+
+  export let vertical = false
+  export let noMargin = false
+  export let noGrid = false
+</script>
+
+<hr
+  class:noMargin
+  class:noGrid
+  class="spectrum-Divider spectrum-Divider--{vertical
+    ? 'vertical'
+    : 'horizontal'} spectrum-Dialog-divider spectrum-Divider--size{size}"
+/>
+
+<style>
+  hr {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  hr.noMargin {
+    margin: 0;
+  }
+  hr.noGrid {
+    grid-area: auto;
+  }
+</style>

package/src/Drawer/Drawer.svelte

@@ -1,42 +1,89 @@
 <script>
-  import { slide } from "svelte/transition";
-  import Portal from "svelte-portal";
-  import clickOutside from "../Actions/click_outside";
+  import Portal from "svelte-portal"
+  import Button from "../Button/Button.svelte"
+  import Body from "../Typography/Body.svelte"
+  import Heading from "../Typography/Heading.svelte"
 
-  export let title;
+  export let title
+  export let fillWidth
+  export let left = "314px"
+  export let width = "calc(100% - 576px)"
 
-  let visible = false;
+  let visible = false
 
   export function show() {
     if (visible) {
-      return;
+      return
     }
-    visible = true;
+    visible = true
   }
 
   export function hide() {
     if (!visible) {
-      return;
+      return
     }
-    visible = false;
+    visible = false
   }
 
-  function handleKey(e) {
-    if (visible && e.key === "Escape") {
-      hide();
+  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
+      style={`width: ${width}; left: ${left};`}
+    >
+      <header>
+        <div class="text">
+          <Heading size="XS">{title}</Heading>
+          <Body size="S">
+            <slot name="description" />
+          </Body>
+        </div>
+        <div class="buttons">
+          <Button secondary quiet on:click={hide}>Cancel</Button>
+          <slot name="buttons" />
+        </div>
+      </header>
+      <slot name="body" />
+    </section>
+  </Portal>
+{/if}
+
 <style>
+  .buttons {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+
   .drawer {
     position: absolute;
     bottom: 0;
-    left: 260px;
-    width: calc(100% - 520px);    
     background: var(--background);
-    border: var(--border-light);
-    z-index: 2;
+    border-top: var(--border-light);
+    z-index: 3;
+  }
+
+  .fillWidth {
+    left: 260px !important;
+    width: calc(100% - 260px) !important;
   }
 
   header {
@@ -44,45 +91,23 @@
     justify-content: space-between;
     align-items: center;
     border-bottom: var(--border-light);
-    padding: var(--spacing-m);
+    padding: var(--spacing-l) var(--spacing-xl);
+    gap: var(--spacing-xl);
   }
 
-  .controls {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    align-items: center;
+  .text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
   }
 
-  .close {
-    font-size: var(--font-size-xl);
-    cursor: pointer;
-  }
-  .title {
-    font-weight: bold;
-    margin-right: var(--spacing-m);
-  }
-  .text {
+  .buttons {
     display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
   }
 </style>
-
-<svelte:window on:keydown={handleKey} />
-
-{#if visible}
-  <Portal>
-    <section class="drawer" transition:slide>
-      <header>
-        <div class="text">
-          <div class="title">{title}</div>
-          <slot name="description" />
-        </div>
-        <div class="controls">
-          <slot name="buttons" />
-          <i class="ri-close-fill close" on:click={hide} />
-        </div>
-      </header>
-      <slot name="body" />
-    </section>
-  </Portal>
-{/if}

package/src/Drawer/DrawerContent.svelte

@@ -0,0 +1,46 @@
+<div class="drawer-contents">
+  <div class:no-sidebar={!$$slots.sidebar} class="container">
+    {#if $$slots.sidebar}
+      <div class="sidebar">
+        <slot name="sidebar" />
+      </div>
+    {/if}
+    <div class="main">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
+  .container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: 320px 1fr;
+  }
+  .no-sidebar {
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    border-right: var(--border-light);
+    overflow: auto;
+    padding: var(--spacing-xl);
+    scrollbar-width: none;
+  }
+  .sidebar::-webkit-scrollbar {
+    display: none;
+  }
+  .main {
+    font-family: var(--font-sans);
+    padding: var(--spacing-xl);
+  }
+  .main :global(textarea) {
+    min-height: 200px;
+  }
+  .main :global(p) {
+    margin: 0;
+  }
+</style>

package/src/Form/Checkbox.svelte

@@ -1,134 +1,23 @@
 <script>
-    import { createEventDispatcher } from "svelte"
-  
-    const dispatch = createEventDispatcher()
-  
-    export let checked = false
-    export let value;
-    export let name
-    export let disabled
-  
-    function handleChange() {
-      if (disabled) return
-      checked = !checked
-      dispatch("change", checked)
-    }
-  </script>
-  
-  <div class="container">
-    <input {disabled} on:change={handleChange} {value} bind:checked  type="checkbox" {name} class="checkbox" id={value} />
-    <div class="checkbox-container" on:click={handleChange}>
-      <div class:disabled class="check-div" class:checked>
-        <div class="tick_mark" />
-      </div>
-    </div>
-    <slot />
-  </div>
-  
-  <style>
-    .container {
-      display: flex;
-      gap: var(--spacing-s);   
-    }
-    .checkbox-container {
-      position: relative;
-      z-index: 0;
-    }
-  
-    .checkbox {
-      display: none;
-    }
-  
-    .check-div {
-      position: relative;
-      width: 20px;
-      height: 20px;
-      background-color: var(--grey-2);
-      cursor: pointer;
-      transition: 0.2s ease transform, 0.2s ease background-color,
-        0.2s ease box-shadow;
-      overflow: hidden;
-      border-radius: 4px;
-    }
-  
-    .check-div:before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      right: 0;
-      left: 0;
-      width: 12px;
-      height: 12px;
-      margin: 0 auto;
-      background-color: var(--background);
-      transform: translateY(-50%);
-      transition: 0.2s ease width, 0.2s ease height;
-      border-radius: 2px;
-    }
-  
-    .check-div:active {
-      transform: translateY(-50%) scale(0.9);
-    }
-  
-    .tick_mark {
-      position: absolute;
-      top: 50%;
-      left: 6px;
-      width: 5px;
-      height: 4px;
-      margin: 0 auto;
-      transform: rotateZ(-40deg);
-    }
-  
-    .tick_mark:before,
-    .tick_mark:after {
-      content: "";
-      position: absolute;
-      background-color: var(--ink);
-      border-radius: 2px;
-      opacity: 0;
-      transition: 0.2s ease transform, 0.2s ease opacity;
-    }
-  
-    .tick_mark:before {
-      left: 0;
-      bottom: 0;
-      width: 2px;
-      height: 6px;
-      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-      transform: translateY(-68px);
-    }
-  
-    .tick_mark:after {
-      left: 0;
-      bottom: 0;
-      width: 12px;
-      height: 2px;
-      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-      transform: translateX(78px);
-    }
+  import Field from "./Field.svelte"
+  import Checkbox from "./Core/Checkbox.svelte"
+  import { createEventDispatcher } from "svelte"
 
-    .check-div.disabled:active {
-      transform: none;
-    }
-  
-    .checked {
-      background-color: var(--grey-2);
-    }
-    .checked.disabled {
-      background-color: var(--grey-5);
-    }
-  
-  
-    .checked:before {
-      width: 0;
-      height: 0;
-    }
-  
-    .checked .tick_mark:before,
-    .checked .tick_mark:after {
-      transform: translate(0);
-      opacity: 1;
-    }
-  </style>
-  
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let text = null
+  export let disabled = false
+  export let error = null
+  export let size = "M"
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <Checkbox {error} {disabled} {text} {value} {size} on:change={onChange} />
+</Field>

package/src/Form/Combobox.svelte

@@ -0,0 +1,45 @@
+<script>
+  import Field from "./Field.svelte"
+  import Combobox from "./Core/Combobox.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = undefined
+  export let disabled = false
+  export let readonly = false
+  export let labelPosition = "above"
+  export let error = null
+  export let placeholder = "Choose an option or type"
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <Combobox
+    {error}
+    {disabled}
+    {value}
+    {options}
+    {placeholder}
+    {readonly}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange}
+    on:pick
+    on:type
+    on:blur
+  />
+</Field>

package/src/Form/Core/Checkbox.svelte

@@ -0,0 +1,69 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let error = null
+  export let id = null
+  export let text = null
+  export let disabled = false
+  export let size
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+
+  $: sizeClass = `spectrum-Checkbox--size${size || "M"}`
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
+  class:is-invalid={!!error}
+  class:checked={value}
+>
+  <input
+    checked={value}
+    {disabled}
+    on:change={onChange}
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    {id}
+  />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+  {#if text}
+    <span class="spectrum-Checkbox-label">{text}</span>
+  {/if}
+</label>
+
+<style>
+  .spectrum-Checkbox--sizeL .spectrum-Checkbox-checkmark {
+    transform: scale(1.1);
+    left: 55%;
+    top: 55%;
+  }
+  .spectrum-Checkbox--sizeXL .spectrum-Checkbox-checkmark {
+    transform: scale(1.2);
+    left: 60%;
+    top: 60%;
+  }
+  .spectrum-Checkbox-input {
+    opacity: 0;
+  }
+</style>

package/src/Form/Core/CheckboxGroup.svelte

@@ -0,0 +1,68 @@
+<script>
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import "@spectrum-css/radio/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let direction = "vertical"
+  export let value = []
+  export let options = []
+  export let error = null
+  export let disabled = false
+  export let getOptionLabel = option => option
+  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)
+    }
+    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}
+      <div
+        title={getOptionLabel(option)}
+        class="spectrum-Checkbox spectrum-FieldGroup-item"
+        class:is-invalid={!!error}
+      >
+        <label
+          class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
+        >
+          <input
+            on:change={onChange}
+            value={getOptionValue(option)}
+            type="checkbox"
+            class="spectrum-Checkbox-input"
+            {disabled}
+            checked={value.includes(getOptionValue(option))}
+          />
+          <span class="spectrum-Checkbox-box">
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </span>
+          <span class="spectrum-Checkbox-label">{getOptionLabel(option)}</span>
+        </label>
+      </div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .spectrum-Checkbox-input {
+    opacity: 0;
+  }
+</style>