@budibase/bbui 1.58.13 → 2.0.0

package/src/Tabs/Tab.svelte

@@ -0,0 +1,88 @@
+<script>
+  import { getContext, onMount, createEventDispatcher } from "svelte"
+  import Portal from "svelte-portal"
+  export let title
+  export let icon = ""
+
+  const dispatch = createEventDispatcher()
+  let selected = getContext("tab")
+  let tab_internal
+  let tabInfo
+
+  const setTabInfo = () => {
+    // If the tabs are being rendered inside a component which uses
+    // a svelte transition to enter, then this initial getBoundingClientRect
+    // will return an incorrect position.
+    // We just need to get this off the main thread to fix this, by using
+    // a 0ms timeout.
+    setTimeout(() => {
+      tabInfo = tab_internal?.getBoundingClientRect()
+      if (tabInfo && $selected.title === title) {
+        $selected.info = tabInfo
+      }
+    }, 0)
+  }
+
+  onMount(() => {
+    setTabInfo()
+  })
+
+  //Ensure that the underline is in the correct location
+  $: {
+    if ($selected.title === title && tab_internal) {
+      if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
+        $selected = {
+          ...$selected,
+          info: tab_internal.getBoundingClientRect(),
+        }
+      }
+    }
+  }
+
+  const onClick = () => {
+    $selected = {
+      ...$selected,
+      title,
+      info: tab_internal.getBoundingClientRect(),
+    }
+    dispatch("click")
+  }
+</script>
+
+<div
+  bind:this={tab_internal}
+  on:click={onClick}
+  class:is-selected={$selected.title === title}
+  class="spectrum-Tabs-item"
+  class:emphasized={$selected.title === title && $selected.emphasized}
+  tabindex="0"
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Folder"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tabs-itemLabel">{title}</span>
+</div>
+{#if $selected.title === title}
+  <Portal target=".spectrum-Tabs-content-{$selected.id}">
+    <slot />
+  </Portal>
+{/if}
+
+<style>
+  .emphasized {
+    color: var(--spectrum-global-color-blue-600);
+  }
+  .spectrum-Tabs-item {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .spectrum-Tabs-item.is-selected {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

package/src/Tabs/Tabs.svelte

@@ -0,0 +1,130 @@
+<script>
+  import "@spectrum-css/tabs/dist/index-vars.css"
+  import { writable } from "svelte/store"
+  import { onMount, setContext, createEventDispatcher } from "svelte"
+
+  export let selected
+  export let vertical = false
+  export let noPadding = false
+  // added as a separate option as noPadding is used for vertical padding
+  export let noHorizPadding = false
+  export let quiet = false
+  export let emphasized = false
+  export let onTop = false
+  export let size = "M"
+
+  let thisSelected = undefined
+
+  let _id = id()
+  const tab = writable({ title: selected, id: _id, emphasized })
+  setContext("tab", tab)
+
+  let container
+
+  const dispatch = createEventDispatcher()
+
+  $: {
+    if (thisSelected !== selected) {
+      thisSelected = selected
+      dispatch("select", thisSelected)
+    } else if ($tab.title !== thisSelected) {
+      thisSelected = $tab.title
+      selected = $tab.title
+      dispatch("select", thisSelected)
+    }
+    if ($tab.title !== thisSelected) {
+      tab.update(state => {
+        state.title = thisSelected
+        return state
+      })
+    }
+  }
+
+  let top, left, width, height
+  $: calculateIndicatorLength($tab)
+  $: calculateIndicatorOffset($tab)
+
+  function calculateIndicatorLength() {
+    if (!vertical) {
+      width = $tab.info?.width + "px"
+      height = $tab.info?.height
+    } else {
+      height = $tab.info?.height + 4 + "px"
+      width = $tab.info?.width
+    }
+  }
+
+  function calculateIndicatorOffset() {
+    if (!vertical) {
+      left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
+    } else {
+      top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
+    }
+  }
+
+  onMount(() => {
+    calculateIndicatorLength()
+    calculateIndicatorOffset()
+  })
+
+  function id() {
+    return "_" + Math.random().toString(36).slice(2, 9)
+  }
+</script>
+
+<div
+  bind:this={container}
+  class:spectrum-Tabs--quiet={quiet}
+  class:noHorizPadding
+  class:onTop
+  class:spectrum-Tabs--vertical={vertical}
+  class:spectrum-Tabs--horizontal={!vertical}
+  class="spectrum-Tabs spectrum-Tabs--size{size}"
+>
+  <slot />
+  {#if $tab.info}
+    <div
+      class="spectrum-Tabs-selectionIndicator"
+      class:emphasized
+      style="width: {width}; height: {height}; left: {left}; top: {top};"
+    />
+  {/if}
+</div>
+
+<div
+  class="spectrum-Tabs-content spectrum-Tabs-content-{_id}"
+  class:noPadding
+/>
+
+<style>
+  .spectrum-Tabs--quiet {
+    border-bottom: none !important;
+  }
+  .spectrum-Tabs {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+    position: relative;
+    border-bottom-color: var(--spectrum-global-color-gray-200);
+  }
+  .spectrum-Tabs-content {
+    margin-top: var(--spectrum-global-dimension-static-size-150);
+  }
+  .spectrum-Tabs-selectionIndicator {
+    transition: all 200ms;
+    background-color: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Tabs-selectionIndicator.emphasized {
+    background-color: var(--spectrum-global-color-blue-400);
+  }
+  .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
+  }
+  .noHorizPadding {
+    padding: 0;
+  }
+  .noPadding {
+    margin: 0;
+  }
+  .onTop {
+    z-index: 100;
+  }
+</style>

package/src/Tags/Tag.svelte

@@ -0,0 +1,43 @@
+<script>
+  import "@spectrum-css/tags/dist/index-vars.css"
+  import Avatar from "../Avatar/Avatar.svelte"
+  import ClearButton from "../ClearButton/ClearButton.svelte"
+
+  export let icon = ""
+  export let avatar = ""
+  export let invalid = false
+  export let disabled = false
+  export let closable = false
+</script>
+
+<div
+  class:is-invalid={invalid}
+  class:is-disabled={disabled}
+  class="spectrum-Tags-item"
+  role="listitem"
+>
+  {#if avatar}
+    <Avatar url={avatar} />
+  {/if}
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeS"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Tag"
+    >
+      <use xlink:href="#spectrum-icon-24-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tags-itemLabel"><slot /></span>
+  {#if closable}
+    <ClearButton on:click />
+  {/if}
+</div>
+
+<style>
+  .spectrum-Tags-item {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+</style>

package/src/Tags/Tags.svelte

@@ -0,0 +1,7 @@
+<script>
+  import "@spectrum-css/tags/dist/index-vars.css"
+</script>
+
+<div class="spectrum-Tags" role="list" aria-label="list">
+  <slot />
+</div>

package/src/Tooltip/Tooltip.svelte

@@ -0,0 +1,34 @@
+<script>
+  import "@spectrum-css/tooltip/dist/index-vars.css"
+
+  export let direction = "top"
+  export let text = ""
+  export let textWrapping = false
+</script>
+
+<!-- Showing / Hiding a text wrapped tooltip should be handled outside the component -->
+{#if textWrapping}
+  <span class="spectrum-Tooltip spectrum-Tooltip--{direction} is-open tooltip">
+    <span class="spectrum-Tooltip-label">{text}</span>
+    <span class="spectrum-Tooltip-tip" />
+  </span>
+{:else}
+  <!-- The default show on hover tooltip does not support text wrapping -->
+  <span class="u-tooltip-showOnHover tooltip">
+    <slot />
+    <div class={`spectrum-Tooltip spectrum-Tooltip--${direction}`}>
+      <span class="spectrum-Tooltip-label">{text}</span>
+      <span class="spectrum-Tooltip-tip" />
+    </div>
+  </span>
+{/if}
+
+<style>
+  .tooltip {
+    pointer-events: none;
+    background: var(--spectrum-global-color-gray-500);
+  }
+  .spectrum-Tooltip-tip {
+    border-top-color: var(--spectrum-global-color-gray-500);
+  }
+</style>

package/src/Tooltip/TooltipWrapper.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Tooltip from "./Tooltip.svelte"
+  import Icon from "../Icon/Icon.svelte"
+
+  export let tooltip = ""
+  export let size = "M"
+  export let disabled = true
+
+  let showTooltip = false
+</script>
+
+<div class:container={!!tooltip}>
+  <slot />
+  {#if tooltip}
+    <div class="icon-container">
+      <div
+        class="icon"
+        class:icon-small={size === "M" || size === "S"}
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}
+        on:focus
+      >
+        <Icon name="InfoOutline" size="S" {disabled} />
+      </div>
+      {#if showTooltip}
+        <div class="tooltip">
+          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+  }
+  .icon-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    top: 15px;
+    z-index: 200;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
+  .icon-small {
+    margin-bottom: -2px;
+  }
+</style>

package/src/TreeView/Item.svelte

@@ -0,0 +1,41 @@
+<script>
+  export let selected = false
+  export let open = false
+  export let href = false
+  export let title
+  export let icon
+</script>
+
+<li
+  class:is-selected={selected}
+  class:is-open={open}
+  class="spectrum-TreeView-item"
+>
+  <a on:click class="spectrum-TreeView-itemLink" {href}>
+    {#if $$slots.default}
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    {/if}
+    {#if icon}
+      <svg
+        class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Layers"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-TreeView-itemLabel">{title}</span>
+  </a>
+  {#if $$slots.default}
+    <ul class="spectrum-TreeView">
+      <slot />
+    </ul>
+  {/if}
+</li>

package/src/TreeView/Tree.svelte

@@ -0,0 +1,16 @@
+<script>
+  import "@spectrum-css/treeview/dist/index-vars.css"
+
+  export let quiet = false
+  export let standalone = true
+  export let width = "250px"
+</script>
+
+<ul
+  class:spectrum-TreeView--standalone={standalone}
+  class:spectrum-TreeView--quiet={quiet}
+  class="spectrum-TreeView"
+  style="width: {width}"
+>
+  <slot />
+</ul>

package/src/Typography/Body.svelte

@@ -0,0 +1,21 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  export let size = "M"
+  export let serif = false
+  export let weight = null
+  export let textAlign = null
+  export let color = null
+</script>
+
+<p
+  style={`
+    ${weight ? `font-weight:${weight};` : ""}
+    ${textAlign ? `text-align:${textAlign};` : ""}
+    ${color ? `color:${color};` : ""}
+  `}
+  class="spectrum-Body spectrum-Body--size{size}"
+  class:spectrum-Body--serif={serif}
+>
+  <slot />
+</p>

package/src/Typography/Code.svelte

@@ -0,0 +1,10 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  // Sizes
+  export let size = "M"
+</script>
+
+<code class="spectrum-Code spectrum-Code--size{size}">
+  <slot />
+</code>

package/src/Typography/Detail.svelte

@@ -0,0 +1,19 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  export let size = "M"
+  export let serif = false
+</script>
+
+<p
+  class="spectrum-Detail spectrum-Detail--size{size}"
+  class:spectrum-Detail--serif={serif}
+>
+  <slot />
+</p>
+
+<style>
+  p {
+    font-weight: 600;
+  }
+</style>

package/src/Typography/Heading.svelte

@@ -0,0 +1,17 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  // Sizes
+  export let size = "M"
+  export let textAlign
+  export let noPadding = false
+  export let weight = "default" // light, heavy, default
+</script>
+
+<h1
+  style={textAlign ? `text-align:${textAlign}` : ``}
+  class:noPadding
+  class="spectrum-Heading spectrum-Heading--size{size} spectrum-Heading--{weight}"
+>
+  <slot />
+</h1>

package/{dist → src}/bbui.css

@@ -1,32 +1,3 @@
-.svench-content {
-  color: #666;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Roboto",
-    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-h1.svench-content {
-  font-size: 2em;
-}
-h2.svench-content {
-  font-size: 1.66em;
-}
-h3.svench-content {
-  font-size: 1.33em;
-}
-h4.svench-content {
-  font-size: 1.33em;
-  font-weight: normal;
-}
-h5.svench-content {
-  font-size: 1em;
-  font-weight: bold;
-}
-h6.svench-content {
-  font-size: 1em;
-  font-weight: normal;
-  font-style: italic;
-}
-
 :root {
   --background: #ffffff;
   --ink: #000000;
@@ -69,12 +40,7 @@ h6.svench-content {
   --rounded-medium: 8px;
   --rounded-large: 16px;
 
-  --font-normal: "Inter";
-  --font-black: "Inter Black";
-  --font-bold: "Inter Bold";
-  --font-medium: "Inter Medium";
-  --font-light: "Inter Light";
-  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
@@ -125,69 +91,6 @@ h6.svench-content {
   --border-transparent: 2px transparent solid;
 }
 
-h1 {
-  font-size: 3rem;
-  font-family: var(--font-sans);
-  font-weight: 700;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h2 {
-  font-size: 2.25rem;
-  font-family: var(--font-sans);
-  font-weight: 600;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h3 {
-  font-size: 1.7rem;
-  font-family: var(--font-sans);
-  font-weight: 600;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h4 {
-  font-size: var(--font-size-xl);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h5 {
-  font-size: var(--font-size-l);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-h6 {
-  font-size: var(--font-size-m);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
-p {
-  font-size: var(--font-size);
-  font-family: var(--font-sans);
-  font-weight: 400;
-  text-rendering: var(--text-render);
-  -webkit-font-smoothing: var(--text-smooth);
-  color: var(--ink);
-}
-
 a {
   text-decoration: none;
-}
+}

package/src/context.js

@@ -1,3 +1,3 @@
 export default {
-  Modal: "bbui-modal"
+  Modal: "bbui-modal",
 }