@budibase/bbui 1.1.0 → 1.1.3

package/src/Tabs/Tabs.svelte

@@ -0,0 +1,125 @@
+<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 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: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;
+  }
+</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,30 @@
+<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;
+  }
+</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"
+
+  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={true} />
+      </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: 100;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
+  .icon-small {
+    margin-top: -2px;
+    margin-bottom: -5px;
+  }
+</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/src/bbui.css

@@ -0,0 +1,96 @@
+:root {
+  --background: #ffffff;
+  --ink: #000000;
+
+  --grey-1: #fafafa;
+  --grey-2: #f5f5f5;
+  --grey-3: #eeeeee;
+  --grey-4: #e0e0e0;
+  --grey-5: #bdbdbd;
+  --grey-6: #9e9e9e;
+  --grey-7: #757575;
+  --grey-8: #616161;
+  --grey-9: #424242;
+
+  --blue-light: #f1f4fc;
+  --blue: #4285f4;
+  --blue-dark: #2f4c9b;
+
+  --red-light: #ffe6e6;
+  --red: #e26d69;
+  --red-dark: #800400;
+
+  --yellow-light: #fff7e6;
+  --yellow: #ffd26a;
+  --yellow-dark: #805900;
+
+  --orange-light: #fff0e6;
+  --orange: #f0955a;
+  --orange-dark: #803300;
+
+  --green-light: #e6ffeb;
+  --green: #84c991;
+  --green-dark: #008017;
+
+  --purple-light: #e9e6ff;
+  --purple: #806fde;
+  --purple-dark: #130080;
+
+  --rounded-small: 4px;
+  --rounded-medium: 8px;
+  --rounded-large: 16px;
+
+  --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;
+  --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+
+  font-size: 16px;
+  --font-size-xs: 0.75rem;
+  --font-size-s: 0.875rem;
+  --font-size-m: 1rem;
+  --font-size-l: 1.15rem;
+  --font-size-xl: 1.3rem;
+
+  --heading-font-size-xs: 0.875rem;
+  --heading-font-size-s: 1.12rem;
+  --heading-font-size-m: 1.5rem;
+  --heading-font-size-l: 2.6rem;
+  --heading-font-size-xl: 3rem;
+
+  --font-render: optimizeLegibility;
+  --font-smooth: antialiased;
+
+  --spacing-xs: 0.25rem;
+  --spacing-s: 0.5rem;
+  --spacing-m: 0.75rem;
+  --spacing-l: 1rem;
+  --spacing-xl: 1.25rem;
+
+  --layout-xs: 1.25rem;
+  --layout-s: 1.5rem;
+  --layout-m: 2rem;
+  --layout-l: 3rem;
+  --layout-xl: 4rem;
+
+  --border-radius-xs: 0.125rem;
+  --border-radius-s: 0.35rem;
+  --border-radius-m: 0.5rem;
+  --border-radius-l: 1rem;
+  --border-radius-xl: 100rem;
+
+  --border-black: 2px var(--ink) solid;
+  --border-dark: 2px var(--grey-7) solid;
+  --border-grey: 1px var(--grey-4) solid;
+  --border-grey-2: 2px var(--grey-4) solid;
+  --border-light: 1px var(--grey-3) solid;
+  --border-light-2: 2px var(--grey-3) solid;
+  --border-blue: 2px var(--blue) solid;
+  --border-transparent: 2px transparent solid;
+}
+
+a {
+  text-decoration: none;
+}

package/src/context.js

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

package/src/helpers.js

@@ -0,0 +1,134 @@
+/**
+ * Generates a DOM safe UUID.
+ * Starting with a letter is important to make it DOM safe.
+ * @return {string} a random DOM safe UUID
+ */
+export function uuid() {
+  return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, c => {
+    const r = (Math.random() * 16) | 0
+    const v = c === "x" ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
+/**
+ * Capitalises a string
+ * @param string the string to capitalise
+ * @return {string} the capitalised string
+ */
+export const capitalise = string => {
+  if (!string) {
+    return string
+  }
+  return string.substring(0, 1).toUpperCase() + string.substring(1)
+}
+
+/**
+ * Computes a short hash of a string
+ * @param string the string to compute a hash of
+ * @return {string} the hash string
+ */
+export const hashString = string => {
+  if (!string) {
+    return "0"
+  }
+  let hash = 0
+  for (let i = 0; i < string.length; i++) {
+    let char = string.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return hash.toString()
+}
+
+/**
+ * Gets a key within an object. The key supports dot syntax for retrieving deep
+ * fields - e.g. "a.b.c".
+ * Exact matches of keys with dots in them take precedence over nested keys of
+ * the same path - e.g. getting "a.b" from { "a.b": "foo", a: { b: "bar" } }
+ * will return "foo" over "bar".
+ * @param obj the object
+ * @param key the key
+ * @return {*|null} the value or null if a value was not found for this key
+ */
+export const deepGet = (obj, key) => {
+  if (!obj || !key) {
+    return null
+  }
+  if (Object.prototype.hasOwnProperty.call(obj, key)) {
+    return obj[key]
+  }
+  const split = key.split(".")
+  for (let i = 0; i < split.length; i++) {
+    obj = obj?.[split[i]]
+  }
+  return obj
+}
+
+/**
+ * Sets a key within an object. The key supports dot syntax for retrieving deep
+ * fields - e.g. "a.b.c".
+ * Exact matches of keys with dots in them take precedence over nested keys of
+ * the same path - e.g. setting "a.b" of { "a.b": "foo", a: { b: "bar" } }
+ * will override the value "foo" rather than "bar".
+ * If a deep path is specified and the parent keys don't exist then these will
+ * be created.
+ * @param obj the object
+ * @param key the key
+ * @param value the value
+ */
+export const deepSet = (obj, key, value) => {
+  if (!obj || !key) {
+    return
+  }
+  if (Object.prototype.hasOwnProperty.call(obj, key)) {
+    obj[key] = value
+    return
+  }
+  const split = key.split(".")
+  for (let i = 0; i < split.length - 1; i++) {
+    const nextKey = split[i]
+    if (obj && obj[nextKey] == null) {
+      obj[nextKey] = {}
+    }
+    obj = obj?.[nextKey]
+  }
+  if (!obj) {
+    return
+  }
+  obj[split[split.length - 1]] = value
+}
+
+/**
+ * Deeply clones an object. Functions are not supported.
+ * @param obj the object to clone
+ */
+export const cloneDeep = obj => {
+  return JSON.parse(JSON.stringify(obj))
+}
+
+/**
+ * Copies a value to the clipboard
+ * @param value the value to copy
+ */
+export const copyToClipboard = value => {
+  return new Promise(res => {
+    if (navigator.clipboard && window.isSecureContext) {
+      // Try using the clipboard API first
+      navigator.clipboard.writeText(value).then(res)
+    } else {
+      // Fall back to the textarea hack
+      let textArea = document.createElement("textarea")
+      textArea.value = value
+      textArea.style.position = "fixed"
+      textArea.style.left = "-9999px"
+      textArea.style.top = "-9999px"
+      document.body.appendChild(textArea)
+      textArea.focus()
+      textArea.select()
+      document.execCommand("copy")
+      textArea.remove()
+      res()
+    }
+  })
+}