@budibase/bbui 1.58.13 → 2.0.1

package/src/Form/Multiselect.svench

@@ -1,63 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Multiselect from "./Multiselect.svelte";
-
-  const options = ["Red", "Blue", "Yellow", "Green", "Pink", "Very long color name to show text wrapping"];
-</script>
-
-<View name="default">
-  <Multiselect name="Test" label="Colours" placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="right aligned">
-<div class="max-width">
-  <Multiselect align="right" name="Test" label="Colours" placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</div>
-</View>
-
-<View name="secondary">
-  <Multiselect name="Test" label="Colours" secondary placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="outline">
-  <Multiselect name="Test" label="Colours" outline placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="disabled">
-  <Multiselect name="Test" label="Colours" disabled placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<View name="extraThin">
-  <Multiselect name="Test" label="Colours" extraThin placeholder="Choose some colours">
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Multiselect>
-</View>
-
-<style>
-  .max-width {
-    align-self: flex-end;
-    max-width: 150px;
-  }
-</style>

package/src/Form/Radio.svelte

@@ -1,133 +0,0 @@
-<script>
-    import { createEventDispatcher } from "svelte"
-  
-    const dispatch = createEventDispatcher()
-  
-    export let value;
-    export let group;
-    export let name
-    export let disabled = false
-  
-    function handleChange() {
-      if (disabled) return
-      group = value
-      dispatch("change", group)
-    }
-  </script>
-  
-  <div class="container">
-    <input {disabled} on:change={handleChange} {value} bind:group type="radio" {name} class="checkbox" id={value} />
-    <div class="checkbox-container" on:click={handleChange}>
-      <div class:disabled class="check-div" class:checked={group === value}>
-        <div class="tick_mark" />
-      </div>
-    </div>
-    <slot />
-  </div>
-  
-  <style>
-    .container {
-      display: flex;
-      gap: var(--spacing-s);   
-    }
-    .checkbox-container {
-      position: relative;
-      z-index: 0;
-    }
-  
-    .checkbox {
-      display: none;
-    }
-  
-    .check-div {
-      position: relative;
-      width: 20px;
-      height: 20px;
-      background-color: var(--grey-2);
-      cursor: pointer;
-      transition: 0.2s ease transform, 0.2s ease background-color,
-        0.2s ease box-shadow;
-      overflow: hidden;
-      border-radius: 4px;
-    }
-  
-    .check-div:before {
-      content: "";
-      position: absolute;
-      top: 50%;
-      right: 0;
-      left: 0;
-      width: 12px;
-      height: 12px;
-      margin: 0 auto;
-      background-color: var(--background);
-      transform: translateY(-50%);
-      transition: 0.2s ease width, 0.2s ease height;
-      border-radius: 2px;
-    }
-  
-    .check-div:active {
-      transform: translateY(-50%) scale(0.9);
-    }
-  
-    .tick_mark {
-      position: absolute;
-      top: 50%;
-      left: 6px;
-      width: 5px;
-      height: 4px;
-      margin: 0 auto;
-      transform: rotateZ(-40deg);
-    }
-  
-    .tick_mark:before,
-    .tick_mark:after {
-      content: "";
-      position: absolute;
-      background-color: var(--ink);
-      border-radius: 2px;
-      opacity: 0;
-      transition: 0.2s ease transform, 0.2s ease opacity;
-    }
-  
-    .tick_mark:before {
-      left: 0;
-      bottom: 0;
-      width: 2px;
-      height: 6px;
-      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-      transform: translateY(-68px);
-    }
-  
-    .tick_mark:after {
-      left: 0;
-      bottom: 0;
-      width: 12px;
-      height: 2px;
-      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-      transform: translateX(78px);
-    }
-
-    .check-div.disabled:active {
-      transform: none;
-    }
-  
-    .checked {
-      background-color: var(--grey-2);
-    }
-    .checked.disabled {
-      background-color: var(--grey-5);
-    }
-  
-    .checked:before {
-      width: 0;
-      height: 0;
-    }
-  
-    .checked .tick_mark:before,
-    .checked .tick_mark:after {
-      transform: translate(0);
-      opacity: 1;
-    }
-  </style>
-  

package/src/Form/Radio.svench.svx

@@ -1,64 +0,0 @@
-<script>
-    import { View } from "svench";
-    import Radio from "./Radio.svelte";
-  
-    let selected = 'Cookies and cream'
-    let selected2 = 'Mint choc chip'
-  
-    let menu = [
-		'Cookies and cream',
-		'Mint choc chip',
-		'Raspberry ripple'
-	];
-  </script>
-  
-  ## Multiple checkboxes
-  Use an array and an each block to use the radio button.
-```svelte
-<script>
-    let selected = 'Cookies and cream'
-    let selected2 = 'Cookies and cream'
-
-    let menu = [
-        'Cookies and cream',
-        'Mint choc chip',
-        'Raspberry ripple'
-    ];
-</script>
-
-{#each menu as flavour}
-    <Radio name="Ice Cream Flavour" value={flavour} bind:group={selected} label={flavour} showLabel/>
-{/each}
-```
-  
-  
-  <View name="Multiple radio buttons">
-    <div class="container">
-        {#each menu as flavour}
-            <Radio name="Ice Cream Flavour"  value={flavour} bind:group={selected}>
-              <label for={flavour}>{flavour}</label>
-            </Radio>
-        {/each}
-    </div>
-  </View>
-
-  <View name="Disabled Radio inputs">
-    <div class="container">
-        {#each menu as flavour}
-            <Radio disabled name="Ice Cream Flavour"  value={flavour} bind:group={selected2}>
-              <label for={flavour}>{flavour}</label>
-            </Radio>
-        {/each}
-    </div>
-  </View>
-  
-  <style>
-    label {
-      display: grid;
-      place-items: center;
-    }
-    .container {
-      display: grid;
-      grid-gap: 10px;
-    }
-  </style>

package/src/Form/RichText.svelte

@@ -1,61 +0,0 @@
-<script>
-  import Quill from "quill";
-  import MarkdownIt from "markdown-it";
-  import TurndownService from "turndown";
-  import { onMount } from "svelte";
-  import "quill/dist/quill.snow.css";
-
-  const convertMarkdown = new MarkdownIt();
-  convertMarkdown.set({
-    html: true,
-  });
-  const turndownService = new TurndownService();
-
-  export let value = "";
-  export let options = null;
-  export let width = 400;
-
-  let quill;
-  let container;
-  let defaultOptions = {
-    modules: {
-      toolbar: [
-        [{ header: [1, 2, 3, false] }],
-        ["bold", "italic", "underline", "strike"],
-      ],
-    },
-    placeholder: "Type something...",
-    theme: "snow", // or 'bubble'
-  };
-
-  let mergedOptions = { ...defaultOptions, ...options };
-
-  const updateContent = () => {
-    value = turndownService.turndown(quill.container.firstChild.innerHTML);
-  };
-
-  onMount(() => {
-    quill = new Quill(container, mergedOptions);
-    if (value)
-      quill.clipboard.dangerouslyPasteHTML(
-        convertMarkdown.render(value + "\n")
-      );
-
-    quill.on("text-change", updateContent);
-    return () => {
-      quill.off("text-change", updateContent);
-    };
-  });
-</script>
-
-<svelte:head>
-  {#if mergedOptions.theme !== 'snow'}
-    <link
-      rel="stylesheet"
-      href="//cdn.quilljs.com/1.3.6/quill.{mergedOptions.theme}.css" />
-  {/if}
-</svelte:head>
-
-<div style="width: {width}px">
-  <div bind:this={container} />
-</div>

package/src/Form/RichText.svench.svx

@@ -1,40 +0,0 @@
-<script>
-  import { View } from "svench";
-  import RichText from "./RichText.svelte";
-
-  const options = { placeholder: "this is not the default value!" };
-  let value;
-</script>
-
-### Rich Text Component
-
-This component uses the QuillJS library to add Rich Text editing functionality.
-
-It exposes a <code>content</code> variable that you can bind to in order to get Markdown out of the component.
-
-As well as the content you can also pass in an option object that looks like so:
-
-```js
-let options = {
-  modules: {
-   toolbar: [
-     [{ header: [1, 2, 3, false] }],
-     ['bold', 'italic', 'underline', 'strike']
-   ]
- },
-  placeholder: 'Type something...',
-  theme: 'snow'
-}
-```
-
-<View name="default">
-  <RichText bind:value />
-</View>
-
-<View name="passing in Markdown">
-  <RichText value="# This is an h1 heading!" />
-</View>
-
-<View name="passing in custom options">
-  <RichText {options} />
-</View>

package/src/Form/Select.svench

@@ -1,62 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Select from "./Select.svelte";
-  import Spacer from "../Spacer/Spacer.svelte"
-
-  const options = ["Chocolate", "Vanilla", "Strawberry Cheesecake"];
-</script>
-
-<View name="default">
-  <Select name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="secondary">
-  <Select secondary name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="outline">
-  <Select outline name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="disabled">
-  <Select disabled name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="thin">
-  <Select thin name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-
-<View name="extraThin">
-  <Select extraThin name="Test" label="Flavour">
-    <option value="">Choose an option</option>
-    {#each options as option}
-      <option value={option}>{option}</option>
-    {/each}
-  </Select>
-</View>
-

package/src/Form/Slider.svench

@@ -1,26 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Slider from "./Slider.svelte";
-</script>
-
-<View name="default">
-  <Slider label=Quantity value="50" />
-</View>
-
-<View name="show value">
-  <Slider label="Quantity" value="50" showValue />
-</View>
-
-<View name="show range">
-  <Slider label="Quantity" value="25" showValue showRange min="0" max="100" />
-</View>
-
-<View name="custom min and max">
-  <Slider label="Quantity" value="350" showValue showRange min="50" max="500" />
-</View>
-
-<View name="custom step">
-  <Slider label="Quantity" value="25" step="25" showValue showRange min="0" max="100" />
-</View>
-
-

package/src/Form/TextArea.svench

@@ -1,30 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextArea from "./TextArea.svelte";
-
-  import Button from "../Button/Button.svelte";
-</script>
-
-<View name="default">
-  <TextArea placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="disabled">
-  <TextArea disabled placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="no label">
-  <TextArea placeholder="Enter your email text" />
-</View>
-
-<View name="thin">
-  <TextArea thin placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="extraThin">
-  <TextArea extraThin placeholder="Enter your email text" label="Email Body" />
-</View>
-
-<View name="with buttons">
-  <TextArea edit placeholder="Enter your email text" label="Email Body" />
-</View>

package/src/Form/Toggle.svench

@@ -1,21 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Toggle from "./Toggle.svelte";
-</script>
-
-<View name="default">
-  <Toggle />
-</View>
-
-<View name="checked with text">
-  <Toggle text="Display on mobile?" />
-</View>
-
-<View name="thin">
-  <Toggle text="Display on mobile?" thin />
-</View>
-
-<View name="disabled">
-  <Toggle disabled={true} />
-</View>
-

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/Icons/Icon.svelte

@@ -1,36 +0,0 @@
-<script context="module">
-  import pathsByName from "./icon-paths";
-  export const iconOptions = Object.keys(pathsByName);
-  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
-</script>
-
-<script>
-  export let name = "arrow";
-  export let direction = "n";
-
-  $: paths = pathsByName[name] || [];
-  $: rotation = directions.indexOf(direction) * 45;
-</script>
-
-<style>
-  .c {
-    width: 1.25em;
-    height: 1.25em;
-    fill: currentColor;
-    overflow: visible;
-    margin-right: var(--spacing-xs);
-  }
-</style>
-
-
-<svg
-  class="c"
-  viewBox="0 0 24 24"
-  fill-rule="evenodd"
-  clip-rule="evenodd"
-  style={`transform: rotate(${rotation}deg)`}>
-  {#each paths as path}
-    <path d={path} />
-  {/each}
-</svg>
-

package/src/Icons/Icon.svench

@@ -1,109 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Icon from "./Icon.svelte";
-</script>
-
-<View name="add icon">
-  <Icon name="add" />
-</View>
-
-<View name="Add Row icon">
-  <Icon name="addrow" />
-</View>
-
-<View name="Add Column icon">
-  <Icon name="addcolumn" />
-</View>
-
-<View name="View icon">
-  <Icon name="view" />
-</View>
-
-<View name="Table icon">
-  <Icon name="table" />
-</View>
-
-<View name="Edit icon">
-  <Icon name="edit" />
-</View>
-
-<View name="Delete icon">
-  <Icon name="delete" />
-</View>
-
-<View name="Close icon">
-  <Icon name="close" />
-</View>
-
-<View name="Arrow Up icon">
-  <Icon name="arrowup" />
-</View>
-
-<View name="Arrow Right icon">
-  <Icon name="arrowright" />
-</View>
-
-<View name="Arrow Down icon">
-  <Icon name="arrowdown" />
-</View>
-
-<View name="Arrow Left icon">
-  <Icon name="arrowleft" />
-</View>
-
-<View name="Search icon">
-  <Icon name="search" />
-</View>
-
-<View name="Preview icon">
-  <Icon name="preview" />
-</View>
-
-<View name="Settings icon">
-  <Icon name="settings" />
-</View>
-
-<View name="Add User icon">
-  <Icon name="adduser" />
-</View>
-
-<View name="Plugin icon">
-  <Icon name="plugin" />
-</View>
-
-<View name="Help icon">
-  <Icon name="help" />
-</View>
-
-<View name="Sort Ascending icon">
-  <Icon name="sortascending" />
-</View>
-
-<View name="Sort Descending icon">
-  <Icon name="sortdescending" />
-</View>
-
-<View name="Calculate icon">
-  <Icon name="calculate" />
-</View>
-
-<View name="Filter icon">
-  <Icon name="filter" />
-</View>
-
-<View name="Add Fill">
-  <Icon name="addfill" />
-</View>
-
-<View name="Group">
-  <Icon name="group" />
-</View>
-
-<View name="Lightning">
-  <Icon name="lightning" />
-</View>
-
-<View name="Download">
-  <Icon name="download" />
-</View>
-