@budibase/bbui 1.0.0 → 1.0.1

package/src/Layout/Layout.svelte

@@ -0,0 +1,75 @@
+<script>
+  export let horizontal = false
+  export let paddingX = "M"
+  export let paddingY = "M"
+  export let noPadding = false
+  export let gap = "M"
+  export let noGap = false
+  export let alignContent = "normal"
+  export let justifyItems = "stretch"
+</script>
+
+<div
+  style="align-content:{alignContent};justify-items:{justifyItems};"
+  class:horizontal
+  class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
+    paddingY} gap-{!noGap && gap}"
+>
+  <slot />
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr;
+    position: relative;
+  }
+  .paddingX-S {
+    padding-left: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+  .paddingX-M {
+    padding-left: var(--spacing-m);
+    padding-right: var(--spacing-m);
+  }
+  .paddingX-L {
+    padding-left: var(--spacing-l);
+    padding-right: var(--spacing-l);
+  }
+  .paddingY-S {
+    padding-top: var(--spacing-s);
+    padding-bottom: var(--spacing-s);
+  }
+  .paddingY-M {
+    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-m);
+  }
+  .paddingY-L {
+    padding-top: var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  .gap-XXS {
+    grid-gap: var(--spacing-xs);
+  }
+  .gap-XS {
+    grid-gap: var(--spacing-s);
+  }
+  .gap-S {
+    grid-gap: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .gap-M {
+    grid-gap: var(--spectrum-alias-grid-gutter-small);
+  }
+  .gap-L {
+    grid-gap: var(--spectrum-alias-grid-gutter-medium);
+  }
+  .horizontal.gap-S :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .horizontal.gap-M :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-small);
+  }
+  .horizontal.gap-L :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-medium);
+  }
+</style>

package/src/Layout/Page.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let wide = false
+</script>
+
+<div class:wide>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    max-width: 80ch;
+    margin: 0 auto;
+    padding: calc(var(--spacing-xl) * 2);
+    min-height: calc(100% - var(--spacing-xl) * 4);
+  }
+
+  .wide {
+    max-width: none;
+    margin: 0;
+  }
+</style>

package/src/Link/Link.svelte

@@ -0,0 +1,22 @@
+<script>
+  import "@spectrum-css/link/dist/index-vars.css"
+
+  export let href = "#"
+  export let size = "M"
+  export let quiet = false
+  export let primary = false
+  export let secondary = false
+  export let overBackground = false
+  export let target
+</script>
+
+<a
+  on:click
+  {href}
+  {target}
+  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
+>

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/Menu/Item.svelte

@@ -0,0 +1,45 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  const actionMenu = getContext("actionMenu")
+
+  export let dataCy
+  export let icon = undefined
+  export let disabled = undefined
+  export let noClose = false
+
+  const onClick = () => {
+    if (actionMenu && !noClose) {
+      actionMenu.hide()
+    }
+    dispatch("click")
+  }
+</script>
+
+<li
+  data-cy={dataCy}
+  on:click|preventDefault={disabled ? null : onClick}
+  class="spectrum-Menu-item"
+  class:is-disabled={disabled}
+  role="menuitem"
+  tabindex="0"
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Menu-itemLabel"><slot /></span>
+</li>
+
+<style>
+  .spectrum-Menu-itemIcon {
+    align-self: center;
+  }
+</style>

package/src/Menu/Menu.svelte

@@ -0,0 +1,7 @@
+<script>
+  import "@spectrum-css/menu/dist/index-vars.css"
+</script>
+
+<ul class="spectrum-Menu" role="menu">
+  <slot />
+</ul>

package/src/Menu/Menu.svench

@@ -0,0 +1,19 @@
+<script>
+    import Menu from './Menu.svelte'
+    import Separator from './Separator.svelte'
+    import Section from './Section.svelte'
+    import Item from './Item.svelte'
+</script>
+
+<Menu>
+    <Section heading="Section heading">
+        <Item>Some Item 1</Item>
+        <Item>Some Item 2</Item>
+        <Item>Some Item 3</Item>
+    </Section>
+    <Separator />
+    <Section heading="Section heading">
+        <Item icon="SaveFloppy">Save</Item>
+        <Item disabled icon="DataDownload">Download</Item>
+    </Section>
+</Menu>

package/src/Menu/Section.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let heading
+</script>
+
+<li role="presentation">
+  <span class="spectrum-Menu-sectionHeading">{heading}</span>
+  <ul class="spectrum-Menu" role="group">
+    <slot />
+  </ul>
+</li>

package/src/Menu/Separator.svelte

@@ -0,0 +1 @@
+<li class="spectrum-Menu-divider" role="separator" />

package/src/Modal/Content.svelte

@@ -0,0 +1,6 @@
+<script>
+  import Input from "../Form/Input.svelte"
+  let value = ""
+</script>
+
+<Input label="Your Name" bind:value />

package/src/Modal/CustomContent.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { getContext } from "svelte"
+  import Context from "../context"
+
+  const { hide } = getContext(Context.Modal)
+
+  let count = 0
+  const clicks = 5
+  $: if (count === clicks) hide()
+  $: remaining = clicks - count
+
+  function increment() {
+    count++
+  }
+</script>
+
+<div on:click={increment}>
+  Click me
+  {remaining}
+  more time{remaining === 1 ? "" : "s"}
+  to close this modal!
+</div>
+
+<style>
+  div {
+    padding: 40px;
+    background-color: var(--purple);
+    color: white;
+    font-family: var(--font-sans);
+    font-weight: bold;
+    text-align: center;
+    user-select: none;
+    font-size: 20px;
+  }
+  div:hover {
+    cursor: pointer;
+  }
+</style>

package/src/Modal/Modal.svelte

@@ -0,0 +1,133 @@
+<script>
+  import "@spectrum-css/modal/dist/index-vars.css"
+  import "@spectrum-css/underlay/dist/index-vars.css"
+  import { createEventDispatcher, setContext, tick } from "svelte"
+  import { fade, fly } from "svelte/transition"
+  import Portal from "svelte-portal"
+  import Context from "../context"
+
+  export let fixed = false
+  export let inline = false
+
+  const dispatch = createEventDispatcher()
+  let visible = fixed || inline
+  $: dispatch(visible ? "show" : "hide")
+
+  export function show() {
+    if (visible) {
+      return
+    }
+    visible = true
+  }
+
+  export function hide() {
+    if (!visible || fixed || inline) {
+      return
+    }
+    visible = false
+  }
+
+  export function cancel() {
+    if (!visible) {
+      return
+    }
+    dispatch("cancel")
+    hide()
+  }
+
+  function handleKey(e) {
+    if (visible && e.key === "Escape") {
+      cancel()
+    }
+  }
+
+  async function focusFirstInput(node) {
+    const inputs = node.querySelectorAll("input")
+    if (inputs?.length) {
+      await tick()
+      inputs[0].focus()
+    }
+  }
+
+  setContext(Context.Modal, { show, hide, cancel })
+</script>
+
+<svelte:window on:keydown={handleKey} />
+
+<!-- These svelte if statements need to be defined like this. -->
+<!-- The modal transitions do not work if nested inside more than one "if" -->
+{#if visible && inline}
+  <div use:focusFirstInput class="spectrum-Modal inline is-open">
+    <slot />
+  </div>
+{:else if visible}
+  <Portal target=".modal-container">
+    <div
+      class="spectrum-Underlay is-open"
+      in:fade={{ duration: 200 }}
+      out:fade|local={{ duration: 200 }}
+      on:mousedown|self={cancel}
+    >
+      <div class="modal-wrapper" on:mousedown|self={cancel}>
+        <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
+          <slot name="outside" />
+          <div
+            use:focusFirstInput
+            class="spectrum-Modal is-open"
+            in:fly={{ y: 30, duration: 200 }}
+            out:fly|local={{ y: 30, duration: 200 }}
+          >
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Portal>
+{/if}
+
+<style>
+  .spectrum-Underlay {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+    overflow: auto;
+    overflow-x: hidden;
+    background: rgba(0, 0, 0, 0.75);
+  }
+
+  .modal-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    -moz-box-pack: center;
+    justify-content: center;
+    align-items: flex-start;
+    max-height: 100%;
+  }
+  .modal-inner-wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+    -moz-box-pack: center;
+    justify-content: center;
+    align-items: flex-start;
+    width: 0;
+    position: relative;
+  }
+
+  .spectrum-Modal {
+    overflow: visible;
+    max-height: none;
+    margin: 40px 0;
+    transform: none;
+    --spectrum-dialog-confirm-border-radius: var(
+      --spectrum-global-dimension-size-100
+    );
+    max-width: 100%;
+  }
+  :global(.spectrum--lightest .spectrum-Modal.inline) {
+    border: var(--border-light);
+  }
+</style>

package/src/Modal/Modal.svench

@@ -0,0 +1,117 @@
+<script>
+  import { View } from "svench";
+  import Modal from "./Modal.svelte";
+  import ModalContent from "./ModalContent.svelte";
+  import Button from "../Button/Button.svelte";
+  import Content from "./Content.svelte";
+  import QuizModal from "./QuizModal.svelte";
+  import CustomContent from "./CustomContent.svelte";
+
+  let modal1
+  let modal2
+  let modal3
+
+  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+  async function longTask() {
+    await sleep(3000)
+  }
+</script>
+
+<style>
+  p, span {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-s);
+  }
+
+  code {
+    display: inline-block;
+    box-sizing: border-box;
+    padding: var(--spacing-xs) var(--spacing-s);
+    background-color: var(--grey-2);
+    color: var(--red-dark);
+    border-radius: var(--spacing-xs);
+  }
+</style>
+
+<h3>Modals</h3>
+<p>
+  Modals provide a means to render content in front of everything else on a page.
+</p>
+<p>
+  The modal module in BBUI exposes two
+  separate components to provide this functionality; a <code>Modal</code> component to control visibility of content,
+  and a <code>ModalContent</code> component to quickly construct the typical content - although this is optional.
+</p>
+<p>
+  One of the common problems with modals and popups is stale state reappearing after hiding and showing the content
+  again, since the state hasn't been garbage collected if a component controls its own visibility. This is handled for
+  you when using the <code>Modal</code> component as it will fully unmount child components, properly resetting state
+  every time it appears.
+</p>
+
+<br/>
+<p>Use ModalContent to render typical modal content.</p>
+<View name="Simple Confirmation Modal">
+  <Button primary on:click={modal1.show}>Delete Record</Button>
+  <Modal bind:this={modal1}>
+    <ModalContent title="Confirm Deletion" confirmText="Delete">
+      <span>Are you sure you want to delete this record?</span>
+    </ModalContent>
+  </Modal>
+</View>
+
+<br/>
+<p>
+  Width can be specified as a prop to a <code>Modal</code>. Any additional <code>ModalContent</code> props provided
+  will be passed to the confirmation button.
+</p>
+<View name="Different Buttons and Width">
+  <Button primary on:click={modal3.show}>Open Modal</Button>
+  <Modal bind:this={modal3} width="250px">
+    <ModalContent
+      title="Confirmation Required"
+      showCancelButton={false}
+      showCloseIcon={false}
+      confirmText="I'm sure!"
+      green
+      large
+      wide
+    >
+      <span>Are you sure you want to do that?</span>
+    </ModalContent>
+  </Modal>
+</View>
+
+<br/>
+<p>Any content can be rendered inside a <code>Modal</code>. Use context to close the modal from your own components.</p>
+<View name="Custom Content">
+  <Button primary on:click={modal1.show}>Open Modal</Button>
+  <Modal bind:this={modal1} padding={false} border={false}>
+    <CustomContent/>
+  </Modal>
+</View>
+
+<br/>
+<p>Async functions passed in as the onConfirm prop will make the modal wait until the callback is completed.</p>
+<View name="Async Callbacks">
+  <Button primary on:click={modal2.show}>Long Task</Button>
+  <Modal bind:this={modal2}>
+    <ModalContent
+      title="Perform Long Task"
+      confirmText="Submit"
+      onConfirm={longTask}
+    >
+      <span>Pressing submit will wait 3 seconds before finishing and disable the confirm button until it's done.</span>
+    </ModalContent>
+  </Modal>
+</View>
+
+<br/>
+<p>Returning false from a onConfirm callback will prevent the modal being closed.</p>
+<View name="Callback Failure Handling">
+  <Button primary on:click={modal3.show}>Open Quiz</Button>
+  <Modal bind:this={modal3}>
+    <QuizModal />
+  </Modal>
+</View>
+

package/src/Modal/ModalContent.svelte

@@ -0,0 +1,139 @@
+<script>
+  import "@spectrum-css/dialog/dist/index-vars.css"
+  import { getContext } from "svelte"
+  import Button from "../Button/Button.svelte"
+  import Divider from "../Divider/Divider.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Context from "../context"
+
+  export let title = undefined
+  export let size = "S"
+  export let cancelText = "Cancel"
+  export let confirmText = "Confirm"
+  export let showCancelButton = true
+  export let showConfirmButton = true
+  export let showCloseIcon = true
+  export let onConfirm = undefined
+  export let onCancel = undefined
+  export let disabled = false
+  export let showDivider = true
+
+  const { hide, cancel } = getContext(Context.Modal)
+  let loading = false
+  $: confirmDisabled = disabled || loading
+
+  async function confirm() {
+    loading = true
+    if (!onConfirm || (await onConfirm()) !== false) {
+      hide()
+    }
+    loading = false
+  }
+
+  async function close() {
+    loading = true
+    if (!onCancel || (await onCancel()) !== false) {
+      cancel()
+    }
+    loading = false
+  }
+</script>
+
+<div
+  class="spectrum-Dialog"
+  class:spectrum-Dialog--small={size === "S"}
+  class:spectrum-Dialog--medium={size === "M"}
+  class:spectrum-Dialog--large={size === "L"}
+  class:spectrum-Dialog--extraLarge={size === "XL"}
+  style="position: relative;"
+  role="dialog"
+  tabindex="-1"
+  aria-modal="true"
+>
+  <div class="spectrum-Dialog-grid">
+    {#if title}
+      <h1
+        class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
+        class:noDivider={!showDivider}
+        class:header-spacing={$$slots.header}
+      >
+        {title}
+        <slot name="header" />
+      </h1>
+      {#if showDivider}
+        <Divider size="M" />
+      {/if}
+    {/if}
+    <!-- TODO: Remove content-grid class once Layout components are in bbui -->
+    <section class="spectrum-Dialog-content content-grid">
+      <slot />
+    </section>
+    {#if showCancelButton || showConfirmButton}
+      <div
+        class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
+      >
+        <slot name="footer" />
+        {#if showCancelButton}
+          <Button group secondary on:click={close}>{cancelText}</Button>
+        {/if}
+        {#if showConfirmButton}
+          <Button
+            group
+            cta
+            {...$$restProps}
+            disabled={confirmDisabled}
+            on:click={confirm}
+          >
+            {confirmText}
+          </Button>
+        {/if}
+      </div>
+    {/if}
+    {#if showCloseIcon}
+      <div class="close-icon">
+        <Icon hoverable name="Close" on:click={cancel} />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .spectrum-Dialog--extraLarge {
+    width: 1000px;
+  }
+
+  .content-grid {
+    display: grid;
+    position: relative;
+    gap: var(--spacing-xl);
+  }
+
+  .spectrum-Dialog-content {
+    overflow: visible;
+  }
+  .spectrum-Dialog-heading {
+    font-family: var(--font-sans);
+  }
+  .spectrum-Dialog-heading.noDivider {
+    margin-bottom: 12px;
+  }
+
+  .spectrum-Dialog-buttonGroup {
+    gap: var(--spectrum-global-dimension-static-size-200);
+  }
+
+  .close-icon {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    font-size: var(--font-size-m);
+  }
+  .close-icon :global(svg) {
+    margin-right: 0;
+  }
+
+  .header-spacing {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>