@budibase/bbui 1.4.0 → 1.4.2

package/src/Branding/Budibase-logo.svelte

@@ -1,68 +0,0 @@
-<svg
-  version="1.1"
-  id="Layer_1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  x="0px"
-  y="0px"
-  viewBox="0 0 115 40"
-  style="enable-background:new 0 0 115 40;"
-  xml:space="preserve">
-  <path
-    class="st0"
-    d="M111.16,40H3.91c-2.15,0-3.89-1.74-3.89-3.89V4.04c0-2.15,1.74-3.89,3.89-3.89h107.25
-    c2.15,0,3.89,1.74,3.89,3.89v32.07C115.05,38.26,113.31,40,111.16,40z" />
-  <path
-    class="st1"
-    d="M10.37,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
-    c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39H6.63V10.03H10.37z
-    M10.97,20.98
-    c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
-    c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C12.26,20.14,11.56,20.37,10.97,20.98z" />
-  <path
-    class="st1"
-    d="M25.08,17.35v6.32c0,0.51,0.05,1.31,0.64,1.85c0.26,0.23,0.72,0.54,1.54,0.54c0.69,0,1.23-0.23,1.56-0.54
-    c0.54-0.51,0.62-1.28,0.62-1.85v-6.32h3.74v6.68c0,1.31-0.13,2.54-1.28,3.67c-1.31,1.28-3.23,1.49-4.59,1.49
-    c-1.41,0-3.31-0.21-4.62-1.49c-1.05-1.03-1.26-2.18-1.26-3.44v-6.91H25.08z" />
-  <path
-    class="st1"
-    d="M47.88,28.79h-3.74V27.4c-0.57,0.82-1.61,1.78-3.66,1.78c-1.71,0-2.96-0.54-3.97-1.57
-    c-1.19-1.18-1.82-2.83-1.82-4.61c0-1.9,0.7-3.47,1.82-4.53c1.01-0.95,2.44-1.54,4.02-1.54c1.27,0,2.67,0.41,3.61,1.67v-8.57h3.74
-    V28.79z
-    M39.53,20.91c-0.54,0.51-0.9,1.26-0.9,2.18c0,0.85,0.36,1.59,0.9,2.11c0.57,0.54,1.28,0.8,1.93,0.8
-    c0.69,0,1.52-0.28,2.11-0.85c0.44-0.41,0.85-1.1,0.85-2.05c0-0.98-0.39-1.64-0.82-2.11c-0.59-0.62-1.28-0.85-2.08-0.85
-    C40.77,20.14,40.12,20.34,39.53,20.91z" />
-  <path
-    class="st1"
-    d="M52.32,10.3c1.21,0,2.16,0.95,2.16,2.16c0,1.21-0.95,2.16-2.16,2.16c-1.21,0-2.16-0.95-2.16-2.16
-    C50.17,11.25,51.12,10.3,52.32,10.3z M54.19,17.35v11.44h-3.74V17.35H54.19z" />
-  <path
-    class="st1"
-    d="M60.49,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
-    c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39h-3.74V10.03H60.49z
-    M61.06,20.98
-    c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
-    c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C62.34,20.14,61.65,20.37,61.06,20.98z" />
-  <path
-    class="st1"
-    d="M80.26,17.35H84v11.44h-3.74v-1.39c-1.01,1.54-2.46,1.77-3.42,1.77c-1.66,0-3.06-0.41-4.33-1.74
-    c-1.22-1.28-1.69-2.77-1.69-4.28c0-1.92,0.73-3.57,1.79-4.62c1.01-1,2.41-1.56,4.02-1.56c0.99,0,2.57,0.23,3.63,1.67V17.35z
-    M75.57,20.96c-0.39,0.39-0.85,1.05-0.85,2.08c0,1.03,0.44,1.7,0.77,2.05c0.51,0.54,1.31,0.9,2.18,0.9c0.74,0,1.44-0.31,1.93-0.8
-    c0.49-0.46,0.9-1.18,0.9-2.16c0-0.82-0.31-1.59-0.85-2.11c-0.57-0.54-1.39-0.8-2.05-0.8C76.8,20.14,76.06,20.47,75.57,20.96z" />
-  <path
-    class="st1"
-    d="M93.21,20.26c-0.57-0.33-1.31-0.64-2.03-0.64c-0.39,0-0.82,0.1-1.05,0.33c-0.13,0.13-0.23,0.33-0.23,0.51
-    c0,0.26,0.18,0.41,0.36,0.51c0.26,0.15,0.64,0.23,1.1,0.39l0.98,0.31c0.64,0.21,1.31,0.46,1.9,1c0.67,0.62,0.9,1.31,0.9,2.18
-    c0,1.52-0.67,2.49-1.18,3.01c-1.13,1.13-2.52,1.31-3.72,1.31c-1.54,0-3.21-0.33-4.7-1.64l1.57-2.49c0.36,0.31,0.87,0.67,1.26,0.85
-    c0.51,0.26,1.05,0.36,1.54,0.36c0.23,0,0.82,0,1.16-0.26c0.23-0.18,0.39-0.46,0.39-0.74c0-0.21-0.08-0.46-0.41-0.67
-    c-0.26-0.15-0.59-0.26-1.13-0.41l-0.92-0.28c-0.67-0.21-1.36-0.57-1.85-1.05c-0.54-0.57-0.82-1.21-0.82-2.08
-    c0-1.1,0.44-2.03,1.1-2.65c1.03-0.95,2.41-1.16,3.47-1.16c1.7,0,2.88,0.44,3.8,0.98L93.21,20.26z" />
-  <path
-    class="st1"
-    d="M108.43,23.73h-8.55c0,0.62,0.23,1.44,0.69,1.95c0.57,0.62,1.34,0.72,1.9,0.72c0.54,0,1.1-0.1,1.49-0.33
-    c0.05-0.03,0.49-0.31,0.8-0.95l3.49,0.36c-0.51,1.62-1.54,2.47-2.21,2.88c-1.1,0.67-2.34,0.85-3.62,0.85
-    c-1.72,0-3.24-0.31-4.57-1.64c-1-1-1.72-2.52-1.72-4.42c0-1.64,0.59-3.34,1.75-4.52c1.39-1.39,3.11-1.64,4.39-1.64
-    c1.28,0,3.13,0.23,4.55,1.72c1.36,1.44,1.62,3.24,1.62,4.65V23.73z
-    M105.03,21.48c-0.03-0.1-0.21-0.82-0.74-1.34
-    c-0.41-0.39-1-0.64-1.75-0.64c-0.95,0-1.52,0.39-1.87,0.74c-0.28,0.31-0.54,0.72-0.64,1.23H105.03z" />
-</svg>

package/src/Branding/Logo.svelte

@@ -1,16 +0,0 @@
-<script>
-  import BudibaseLogo from "./Budibase-logo.svelte";
-</script>
-
-<style>
-  .home-logo {
-    cursor: pointer;
-    height: 40px;
-    width: 100px;
-    margin-bottom: 20px;
-  }
-</style>
-
-<div class="home-logo">
-  <BudibaseLogo />
-</div>

package/src/Branding/Logo.svench

@@ -1,8 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Logo from "./Logo.svelte";
-</script>
-
-<View name="default">
-  <Logo />
-</View>

package/src/Form/Button.svelte

@@ -1,131 +0,0 @@
-<script>
-  export let 
-    primary = false,
-    secondary = false,
-    attention = false,
-    disabled = false,
-    error = false,
-    warning = false,
-    small = false,
-    medium = false,
-    wide = false,
-    large = false;
-</script>
-
-<style>
-  button {
-    cursor: pointer;
-    font-weight: 500;
-    font-size: 14px;
-    box-sizing: border-box;
-    overflow: hidden;
-    border-radius: 3px;
-    color: var(--white);
-    padding: 0px 24px;
-    height: 32px;
-    transition: all 0.2s ease 0s;
-    display: inline-block;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    min-width: auto;
-    outline: none;
-    font-feature-settings: "case" 1,"rlig" 1,"calt" 0;
-    -webkit-box-align: center;
-    user-select: none;
-    flex-shrink: 0;
-  }
-
-  .primary {
-    border: solid 1px var(--ink);
-    background-color: var(--ink);
-  }
-  button.primary:hover:not([disabled]) {
-    border: solid 1px var(--grey);
-    background-color: var(--white);
-    color: var(--ink);
-  }
-  .secondary {
-    border: solid 1px var(--grey);
-    background-color: white;
-    color: var(--ink);
-  }
-  button.secondary:hover:not([disabled]) {
-    border: solid 1px var(--ink);
-    background-color: var(--ink);
-    color: white;
-  }
-  .attention {
-    background-color: var(--blue);
-    border: solid 1px var(--blue);
-  }
-  button.attention:hover:not([disabled]) {
-    border: solid 1px var(--blue);
-    background-color: var(--white);
-    color: var(--blue);
-  }
-  .error {
-    border: solid 1px var(--red);
-    background-color: var(--red);
-    color: white;
-  }
-  button.error:hover:not([disabled]) {
-    border: solid 1px var(--red);
-    background-color: white;
-    color: var(--red);
-  }
-  .warning {
-    border: solid 1px var(--yellow);
-    background-color: var(--yellow);
-    color: white;
-  }
-  button.warning:hover:not([disabled]) {
-    border: solid 1px var(--yellow);
-    background-color: white;
-    color: var(--yellow);
-  }
-  .small {
-    width: 100px;
-    height: 24px;
-    line-height: 22px;
-    padding: 0px 10px;
-    font-weight: 500;
-  }
-  .medium {
-    width: 200px;
-    height: 40px;
-  }
-  .large {
-    width: 200px;
-    height: 50px;
-    font-weight: 500;
-    font-size: 18px;
-  }
-  .wide {
-    width: 100%;
-    max-width: 260px;
-    height: 32px;
-    line-height: 22px;
-    padding: 0px 10px;
-    font-weight: 500;
-  }
-  button:disabled {
-    background-color: var(--grey-dark);
-    cursor: not-allowed;
-    border: solid 1px var(--grey-dark);
-  }
-</style>
-
-<button
-  class:primary
-  class:secondary
-  class:attention
-  class:error
-  class:warning
-  class:small
-  class:medium
-  class:wide
-  class:large
-  {disabled}
-  on:click|preventDefault>
-  <slot />
-</button>

package/src/Form/Button.svench

@@ -1,49 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Button from "./Button.svelte";
-</script>
-
-<View name="Primary">
-  <Button primary small on:click={() => alert('Clicked!')}>Small</Button>
-  <Button primary on:click={() => alert('Clicked!')}>Default</Button>
-  <Button primary medium on:click={() => alert('Clicked!')}>Large</Button>
-  <Button primary large on:click={() => alert('Clicked!')}>Large</Button>
-  <Button primary wide on:click={() => alert('Clicked!')}>Wide</Button>
-</View>
-<View name="Secondary">
-  <Button secondary small on:click={() => alert('Clicked!')}>Small</Button>
-  <Button secondary on:click={() => alert('Clicked!')}>Default</Button>
-  <Button secondary medium on:click={() => alert('Clicked!')}>Medium</Button>
-  <Button secondary large on:click={() => alert('Clicked!')}>Large</Button>
-  <Button secondary wide on:click={() => alert('Clicked!')}>Wide</Button>
-</View>
-<View name="Attention / Success">
-  <Button attention small on:click={() => alert('Clicked!')}>Small</Button>
-  <Button attention on:click={() => alert('Clicked!')}>Default</Button>
-  <Button attention medium on:click={() => alert('Clicked!')}>Medium</Button>
-  <Button attention large on:click={() => alert('Clicked!')}>Large</Button>
-  <Button attention wide on:click={() => alert('Clicked!')}>Wide</Button>
-</View>
-<View name="Error">
-  <Button error small on:click={() => alert('Clicked!')}>Small</Button>
-  <Button error on:click={() => alert('Clicked!')}>Default</Button>
-  <Button error medium on:click={() => alert('Clicked!')}>Medium</Button>
-  <Button error large on:click={() => alert('Clicked!')}>Large</Button>
-  <Button error wide on:click={() => alert('Clicked!')}>Wide</Button>
-</View>
-<View name="Warning">
-  <Button warning small on:click={() => alert('Clicked!')}>Small</Button>
-  <Button warning on:click={() => alert('Clicked!')}>Default</Button>
-  <Button warning medium on:click={() => alert('Clicked!')}>Medium</Button>
-  <Button warning large on:click={() => alert('Clicked!')}>Large</Button>
-  <Button warning wide on:click={() => alert('Clicked!')}>Wide</Button>
-</View>
-<View name="Disabled">
-  <Button primary disabled on:click={() => alert('Clicked!')}>Disabled</Button>
-</View>
-<View
-  name="use Knobs"
-  knobs={{ primary: true, secondary: false, attention: false, error: false, disabled: false, small: false, medium: false, large: false, wide: false }}
-  let:knobs>
-  <Button {...knobs} on:click={() => alert('Clicked!')}>Knooby</Button>
-</View>

package/src/Form/Input.svench

@@ -1,8 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Input from "./Input.svelte";
-</script>
-
-<View name="default">
-  <Input placeholder="Enter your name" label="Name" />
-</View>

package/src/Form/Select.svench

@@ -1,8 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Select from "./Select.svelte";
-</script>
-
-<View name="default">
-  <Select placeholder="Pick a movie" label="Movie" />
-</View>

package/src/Form/TextArea.svench

@@ -1,8 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextArea from "./TextArea.svelte";
-</script>
-
-<View name="default">
-  <TextArea placeholder="Enter your name" label="Name" />
-</View>

package/src/Links/Home.svelte

@@ -1,49 +0,0 @@
-<script>
-  export let href,
-    icon,
-    title,
-    active = false;
-</script>
-
-<style>
-  .nav-item {
-    cursor: pointer;
-    padding: 12px;
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    border-radius: 3px;
-  }
-
-  .nav-item:hover {
-    background-color: var(--grey-light);
-  }
-
-  .nav-item-title {
-    font-size: 14px;
-    color: var(--ink);
-    font-weight: 400;
-    margin-left: 12px;
-  }
-
-  .nav-item-icon {
-    color: var(--ink-light);
-  }
-
-  .active {
-    background-color: var(--blue-light);
-  }
-</style>
-
-<a {href} target="_blank" class="nav-item" class:active>
-  {#if icon}
-    <span class="nav-item-icon">
-      <svelte:component this={icon} />
-    </span>
-  {/if}
-  {#if title}
-    <div class="nav-item-title">{title}</div>
-  {/if}
-</a>

package/src/Links/Home.svench

@@ -1,19 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Home from "./Home.svelte";
-  import Contribution from "../icons/Contribution.svelte";
-</script>
-
-<View name="default">
-  <Home
-    href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-    title="Contribute"
-    icon={Contribution} />
-</View>
-<View name="active">
-  <Home
-    active
-    href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-    title="Contribute"
-    icon={Contribution} />
-</View>

package/src/List/Items/DetailSummary.svelte

@@ -1,66 +0,0 @@
-<script>
-  export let name,
-    show = false;
-
-  const capitalize = name => name[0].toUpperCase() + name.slice(1);
-</script>
-
-<style>
-  .property-group-container {
-    display: flex;
-    flex-direction: column;
-    height: auto;
-    background: var(--grey-light);
-    margin: 0px 0px 4px 0px;
-    padding: 8px 12px;
-    justify-content: center;
-    border-radius: 4px;
-  }
-
-  .property-group-name {
-    cursor: pointer;
-    display: flex;
-    flex-flow: row nowrap;
-  }
-
-  .name {
-    flex: 1;
-    text-align: left;
-    padding-top: 2px;
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: 0.14px;
-    color: var(--ink);
-  }
-
-  .icon {
-    flex: 0 0 20px;
-    text-align: center;
-  }
-
-  .property-panel {
-    /* height: 0px;
-    overflow: hidden; */
-    display: none;
-  }
-
-  .show {
-    /* overflow: auto;
-    height: auto; */
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-</style>
-
-<div class="property-group-container">
-  <div class="property-group-name" on:click={() => (show = !show)}>
-    <div class="icon">
-      <i class={show ? 'ri-arrow-down-s-fill' : 'ri-arrow-right-s-fill'} />
-    </div>
-    <div class="name">{capitalize(name)}</div>
-  </div>
-  <div class="property-panel" class:show>
-    <slot />
-  </div>
-</div>

package/src/List/Items/DetailSummary.svench

@@ -1,15 +0,0 @@
-<script>
-  import { View } from "svench";
-  import DetailSummary from "./DetailSummary.svelte";
-</script>
-
-<View name="default">
-  <DetailSummary name="Layout">
-    <ul>
-      <li>1</li>
-      <li>2</li>
-      <li>3</li>
-      <li>4</li>
-    </ul>
-  </DetailSummary>
-</View>

package/src/Switcher/Switcher.svelte

@@ -1,39 +0,0 @@
-<script>
-  export let headings;
-  export let value;
-</script>
-
-<style>
-  header {
-    display: grid;
-    grid-gap: 20px;
-    grid-auto-flow: column;
-  }
-
-  span {
-    font-size: 18px;
-    font-weight: bold;
-    color: var(--ink-lighter);
-  }
-
-  span:hover {
-    cursor: pointer;
-  }
-
-  .selected {
-    color: var(--ink);
-  }
-</style>
-
-<section>
-  <header>
-    {#each headings as heading}
-      <span
-        class:selected={value === heading.key}
-        on:click={() => (value = heading.key)}>
-        {heading.title}
-      </span>
-    {/each}
-  </header>
-  <slot />
-</section>

package/src/Switcher/Switcher.svench

@@ -1,25 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Switcher from "./Switcher.svelte";
-
-  const items = [
-    {
-      title: "Apps",
-      key: "APPS"
-    },
-    {
-      title: "Deploy",
-      key: "DEPLOY"
-    },
-    {
-      title: "Settings",
-      key: "SETTINGS"
-    }
-  ]
-
-  let value = "APPS"
-</script>
-
-<View name="default">
-  <Switcher headings={items} bind:value={value} />
-</View>

package/src/actions/autoresize_textarea.js

@@ -1,14 +0,0 @@
-function resize({ target }) {
-    target.style.height = "1px";
-    target.style.height = (+target.scrollHeight) + "px";
-}
-
-export function text_area_resize(el) {
-    resize({ target: el });
-    el.style.overflow = 'hidden';
-    el.addEventListener('input', resize);
-
-    return {
-        destroy: () => el.removeEventListener('input', resize)
-    }
-}

package/src/icons/Contribution.svelte

@@ -1,14 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  width="24"
-  height="24">
-  <path fill="none" d="M0 0h24v24H0z" />
-  <path
-    d="M14.121 10.48a1 1 0 0 0-1.414 0l-.707.706a2 2 0 1
-    1-2.828-2.828l5.63-5.632a6.5 6.5 0 0 1 6.377 10.568l-2.108
-    2.135-4.95-4.95zM3.161 4.468a6.503 6.503 0 0 1 8.009-.938L7.757 6.944a4 4 0
-    0 0 5.513 5.794l.144-.137 4.243 4.242-4.243 4.243a2 2 0 0 1-2.828 0L3.16
-    13.66a6.5 6.5 0 0 1 0-9.192z"
-    fill="rgba(128,129,146,1)" />
-</svg>

package/src/index.svench.svx

@@ -1,35 +0,0 @@
-<article>
-  <h1>
-    <span class="icon">🔬</span>
-    Svench
-  </h1>
-
-  ## This is your workbench.
-
-  This is a [Svench](https://github.com/rixo/svench) project, created with [Svench's component template](https://github.com/rixo/svench-component-template).
-
-  Edit <code>index.svench.svx</code> to customize this page.
-
-  Check `example` for inspiration.
-</article>
-
-<style>
-  article > * {
-    text-align: center;
-    margin-top: 3em;
-  }
-  h1 {
-    font-size: 3em;
-    margin-top: 1em;
-    color: var(--gray);
-  }
-  h1 .icon {
-    opacity: 0.5;
-    display: inline-block;
-    transform: rotateY(180deg);
-    margin-left: -0.6em;
-    width: 0.6em;
-    font-weight: normal;
-    font-size: 1.25em;
-  }
-</style>