@budibase/bbui 1.58.13 → 2.0.0

package/src/Button/Close.svelte

@@ -1,59 +0,0 @@
-<script>
-  export let onClose;
-  export let dark = false;
-  export let small = false;
-</script>
-
-<style>
-  button {
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    font-size: var(--font-size-l);
-    z-index: 1000;
-    top: var(--spacing-l);
-    right: var(--spacing-l);
-    margin: 0;
-    padding: 0;
-    width: 1.5rem;
-    height: 1.5rem;
-    border: 0;
-    color: black;
-    border-radius: var(--border-radius-xl);
-    background: white;
-    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-      background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-    -webkit-appearance: none;
-    outline: none;
-  }
-
-  button:hover {
-    background-color: var(--grey-2);
-    cursor: pointer;
-  }
-
-  button:active {
-    background-color: var(--grey-4);
-    cursor: pointer;
-  }
-  .small {
-    font-size: var(--font-size-m);
-    line-height: 110%;
-    width: 1.3rem;
-    height: 1.3rem;
-  }
-  .dark {
-    color: white;
-    background: black;
-  }
-  .dark:hover {
-    background-color: var(--grey-8);
-    cursor: pointer;
-  }
-  .dark:active {
-    background-color: var(--grey-9);
-    cursor: pointer;
-  }
-</style>
-
-<button class:small class:dark on:click={onClose}>×</button>

package/src/Button/Close.svench

@@ -1,36 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Close from "./Close.svelte";
-</script>
-
-<style>
-  div {
-    display: block;
-    position: relative;
-    min-width: 400px;
-    height: 200px;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-l);
-  }
-</style>
-
-<View name="default">
-  <div>
-    <Close />
-  </div>
-</View>
-<View name="dark color">
-  <div>
-    <Close dark />
-  </div>
-</View>
-<View name="small">
-  <div>
-    <Close small />
-  </div>
-</View>
-<View name="small dark">
-  <div>
-    <Close small dark />
-  </div>
-</View>

package/src/Button/TextButton.svelte

@@ -1,128 +0,0 @@
-<script>
-  export let active = false,
-    text = false,
-    small = false,
-    medium = false,
-    large = false,
-    blue = false,
-    green = false,
-    yellow = false,
-    purple = false,
-    red = false,
-    orange = false,
-    disabled = false,
-    href = false;
-</script>
-
-<style>
-  button,
-  a {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 600;
-    box-sizing: border-box;
-    overflow: hidden;
-    transition: all 0.08s ease 0s;
-    display: inline-flex;
-    align-items: center;
-    text-rendering: optimizeLegibility;
-    text-decoration: none;
-    outline: none;
-    -webkit-box-align: center;
-    user-select: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .text {
-    background-color: transparent;
-    color: var(--grey-7);
-    border: none;
-    font-weight: 500;
-  }
-  button.text:hover:not([disabled]) {
-    color: var(--ink);
-  }
-  button.text:active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text.active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text:disabled {
-    cursor: not-allowed;
-    color: var(--grey-4);
-  }
-
-  .blue {
-    color: var(--blue);
-  }
-
-  .green {
-    color: var(--green);
-  }
-
-  .red {
-    color: var(--red);
-  }
-
-  .purple {
-    color: var(--purple);
-  }
-
-  .yellow {
-    color: var(--yellow);
-  }
-
-  .orange {
-    color: var(--orange);
-  }
-
-  .small {
-    font-size: var(--font-size-xs);
-    margin: 0;
-  }
-
-  .medium {
-    font-size: var(--font-size-s);
-    margin: 0;
-  }
-
-  .large {
-    font-size: var(--font-size-m);
-    margin: 0;
-  }
-</style>
-
-{#if href}
-  <a
-    {href}
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange><slot /></a>
-{:else}
-  <button
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange
-    {disabled}
-    on:click|preventDefault>
-    <slot />
-  </button>
-{/if}

package/src/Button/TextButton.svench

@@ -1,69 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextButton from "./TextButton.svelte";
-  import Icon from "../Icons/Icon.svelte";
-</script>
-
-<style>
-  div {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: var(--spacing-xl);
-  }
-</style>
-
-<View name="Text">
-  <div>
-    <TextButton text small on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text large on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text disabled on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" direction="w" />
-      Disabled Text Button
-    </TextButton>
-    <TextButton active text on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Active Calculation
-    </TextButton>
-  </div>
-</View>
-
-<View name="Colours">
-  <div>
-    <TextButton text medium yellow on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium blue on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text medium purple on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text medium red on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" />
-      Delete
-    </TextButton>
-    <TextButton text medium green on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Calculate
-    </TextButton>
-  </div>
-</View>
-
-<View name="Usage as a link">
-  <div>
-    <TextButton green text href="https://google.com">This is a link</TextButton>
-  </div>
-</View>

package/src/DatePicker/DatePicker.svelte

@@ -1,45 +0,0 @@
-<script>
-  import Flatpickr from "svelte-flatpickr";
-  import { Label, Input } from "../";
-  import "flatpickr/dist/flatpickr.css";
-
-  const PICKER_OPTIONS = {
-    enableTime: true
-  };
-
-  export let label;
-  export let placeholder;
-  export let value;
-  export let thin = false;
-</script>
-
-<style>
-  :global(.flatpickr-input) {
-    width: 100%;
-    min-width: 0;
-    box-sizing: border-box;
-    color: var(--ink);
-    border-radius: 5px;
-    border: none;
-    background-color: var(--grey-2);
-    padding: var(--spacing-m);
-    font-size: var(--font-size-s);
-    margin: 0;
-    outline: none;
-    border: var(--border-transparent);
-  }
-  :global(.flatpickr-input:focus) {
-    border: var(--border-blue);
-  }
-
-  div.thin :global(.flatpickr-input) {
-    font-size: var(--font-size-xs);
-  }
-</style>
-
-<div class:thin>
-  {#if label}
-    <Label extraSmall grey>{label}</Label>
-  {/if}
-  <Flatpickr {placeholder} options={PICKER_OPTIONS} on:change bind:value />
-</div>

package/src/DatePicker/DatePicker.svench

@@ -1,17 +0,0 @@
-<script>
-  import { View } from "svench";
-  import DatePicker from "./DatePicker.svelte";
-
-  function handleChange(event) {
-    const [fullDate, shortDate, instance] = event.detail
-    alert("Date is " + fullDate)
-  }
-</script>
-
-<View name="default">
-  <DatePicker on:change={handleChange} label="Start Date" placeholder="Pick a date" />
-</View>
-
-<View name="thin">
-  <DatePicker on:change={handleChange} label="Start Date" thin placeholder="Pick a date" />
-</View>

package/src/DropdownMenu/DropdownMenu.svelte

@@ -1,77 +0,0 @@
-<script>
-  import Portal from "svelte-portal";
-  import { createEventDispatcher } from "svelte";
-  import buildStyle from "../utils/buildStyle"
-  import positionDropdown from '../Actions/position_dropdown'
-  import clickOutside from '../Actions/click_outside'
-
-  const dispatch = createEventDispatcher();
-
-  export let anchor;
-  export let align = "right";
-  export let borderColor = "";
-
-  export const show = () => {
-    dispatch("open");
-    open = true;
-  };
-
-  export const hide = () => {
-    dispatch("close");
-    open = false;
-  };
-
-  let open = null;
-
-  function handleEscape(e) {
-    if (open && e.key === "Escape") {
-      hide();
-    }
-  }
-
-  $: menuStyle = buildStyle({
-    borderColor,
-  });
-</script>
-
-<style>
-  .menu-container {
-    position: fixed;
-    margin-top: var(--spacing-xs);
-    outline: none;
-    box-sizing: border-box;
-    opacity: 0;
-    min-width: 200px;
-    z-index: 2;
-    color: var(--ink);
-    font-weight: 400;
-    height: fit-content !important;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-m);
-    transform: scale(0);
-    transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
-    overflow-y: auto;
-    background: var(--background);
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  .open {
-    transform: scale(1);
-    opacity: 1;
-  }
-</style>
-
-{#if open}
-  <Portal>
-    <div
-      tabindex="0"
-      class:open
-      use:positionDropdown={{anchor, align}}
-      use:clickOutside={hide}
-      style={menuStyle}
-      on:keydown={handleEscape}
-      class="menu-container">
-      <slot />
-    </div>
-  </Portal>
-{/if}

package/src/DropdownMenu/DropdownMenu.svench

@@ -1,161 +0,0 @@
-<script>
-  import { View } from "svench";
-  import DropdownMenu from "./DropdownMenu.svelte";
-  import Button from "../Button/Button.svelte";
-  import Icon from "../Icons/Icon.svelte";
-
-  let anchorRight;
-  let anchorLeft;
-  let dropdownRight;
-  let dropdownLeft;
-</script>
-
-<style>
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: var(--spacing-s) 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--ink);
-    padding: var(--spacing-s) var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    background-color: var(--grey-2);
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-</style>
-
-<View name="Right Align (default)">
-  <div bind:this={anchorRight}>
-    <Button primary on:click={dropdownRight.show}>Right Align</Button>
-  </div>
-  <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
-    <ul>
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </ul>
-  </DropdownMenu>
-</View>
-
-<View name="Left Align">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>Left Align</Button>
-  </div>
-  <DropdownMenu bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <ul>
-      <li>Item 1</li>
-      <li>Item 2</li>
-      <li>Item 3</li>
-    </ul>
-  </DropdownMenu>
-</View>
-
-<View name="Left Align, TextButton, Small, Icons">
-  <div bind:this={anchorLeft}>
-    <Button text on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>
-<View name="Dropdown menu with slim menu and border color">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu
-    bind:this={dropdownLeft}
-    width="175px"
-    borderColor="#d1d1d1ff"
-    anchor={anchorLeft}
-    align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>
-<View name="Dropdown on close event example">
-  <div bind:this={anchorLeft}>
-    <Button primary on:click={dropdownLeft.show}>
-      Field Name
-      <Icon name="arrowdown" />
-    </Button>
-  </div>
-  <DropdownMenu
-    on:close={() => alert('Closed!')}
-    bind:this={dropdownLeft}
-    width="175px"
-    borderColor="#d1d1d1ff"
-    anchor={anchorLeft}
-    align="left">
-    <ul>
-      <li>
-        <Icon name="edit" />
-        Edit
-      </li>
-      <li>
-        <Icon name="delete" />
-        Delete
-      </li>
-      <li>
-        <Icon name="sortascending" />
-        Sort A - Z
-      </li>
-      <li>
-        <Icon name="sortdescending" />
-        Sort Z - A
-      </li>
-    </ul>
-  </DropdownMenu>
-</View>