diff --git a/packages/bbui/.gitignore b/packages/bbui/.gitignore new file mode 100644 index 0000000000..f0a5039c33 --- /dev/null +++ b/packages/bbui/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +node_modules +/dist/ +/public/svench/ +.idea \ No newline at end of file diff --git a/packages/bbui/.svench/svench.css b/packages/bbui/.svench/svench.css new file mode 100644 index 0000000000..ba3147cd5d --- /dev/null +++ b/packages/bbui/.svench/svench.css @@ -0,0 +1,193 @@ +.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; + + --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-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", + "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; +} + +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; +} diff --git a/packages/bbui/.svench/svench.js b/packages/bbui/.svench/svench.js new file mode 100644 index 0000000000..b761b7ddba --- /dev/null +++ b/packages/bbui/.svench/svench.js @@ -0,0 +1,14 @@ +import { start } from 'svench' + +// svench's theme +import 'svench/themes/default.css' +import 'svench/themes/default-markdown.css' + +// your own style +import './svench.css' + +start({ + // backgrounds: ['red', 'green', 'blue'], + // canvasBackground: 'red', + // background: 'blue', +}) diff --git a/packages/bbui/README.md b/packages/bbui/README.md new file mode 100644 index 0000000000..9b71a86cab --- /dev/null +++ b/packages/bbui/README.md @@ -0,0 +1,42 @@ +# Budibase bbui + +A package that handles all common components across the Budibase organisation. You can find the current live version [Here](http://bbui.budibase.com). + +## Install + +1. Clone +2. `npm install` +3. `npm run svench` + +(Note: yarn won't work!) + +## Example workflow to create a component + +1. Create a file: `Headline.svelte` +2. Create a Svench file: `Headline.svench` +3. Build component and add variants to the Svench file. +4. Once done, re-export the file in `src/index.js`. +5. Publish, update the package in the main project and profit. + +## Guidelines +### Making components + +1. Think about re-usability +2. Use the css custom properties (variables) that are in the css stylesheet. This makes it easy to tweak things later down the line. +3. Opt to forward events (` +``` \ No newline at end of file diff --git a/packages/bbui/src/Actions/PositionDropdown.svench.svx b/packages/bbui/src/Actions/PositionDropdown.svench.svx new file mode 100644 index 0000000000..695232535c --- /dev/null +++ b/packages/bbui/src/Actions/PositionDropdown.svench.svx @@ -0,0 +1,81 @@ + + +### Position Dropdown Action + +This action positions an element close to it's anchor, either above or below it, depending on the amount of space that exists. There's also an option to align the dropdown to the right instead of the left of the anchor. An example of how to use it follows: + +```html + + + + +{#if visible} + +
+ Some content here. +
+ +{/if} +``` + +Here are some components that currently use this action: + + + + {#each options as option} + + {/each} + + + + +
+ +
+ alert('Closed!')} + bind:this={dropdownLeft} + width="175px" + borderColor="#d1d1d1ff" + anchor={anchorLeft} + align="left"> + + + diff --git a/packages/bbui/src/Actions/autoresize_textarea.js b/packages/bbui/src/Actions/autoresize_textarea.js new file mode 100644 index 0000000000..227519dd20 --- /dev/null +++ b/packages/bbui/src/Actions/autoresize_textarea.js @@ -0,0 +1,14 @@ +function resize({ target }) { + target.style.height = "1px" + target.style.height = +target.scrollHeight + "px" +} + +export default function text_area_resize(el) { + resize({ target: el }) + el.style.overflow = "hidden" + el.addEventListener("input", resize) + + return { + destroy: () => el.removeEventListener("input", resize), + } +} diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js new file mode 100644 index 0000000000..9257af5f5b --- /dev/null +++ b/packages/bbui/src/Actions/click_outside.js @@ -0,0 +1,18 @@ +export default function clickOutside(element, callbackFunction) { + function onClick(event) { + if (!element.contains(event.target)) { + callbackFunction() + } + } + + document.body.addEventListener("click", onClick, true) + + return { + update(newCallbackFunction) { + callbackFunction = newCallbackFunction + }, + destroy() { + document.body.removeEventListener("click", onClick, true) + }, + } +} diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js new file mode 100644 index 0000000000..01d0ec4553 --- /dev/null +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -0,0 +1,66 @@ +export default function positionDropdown(element, { anchor, align }) { + let positionSide = "top" + let maxHeight = 0 + let dimensions = getDimensions(anchor) + + function getDimensions() { + const { + bottom, + top: spaceAbove, + left, + width, + } = anchor.getBoundingClientRect() + const spaceBelow = window.innerHeight - bottom + const containerRect = element.getBoundingClientRect() + + let y + + if (spaceAbove > spaceBelow) { + positionSide = "bottom" + maxHeight = spaceAbove - 20 + y = window.innerHeight - spaceAbove + } else { + positionSide = "top" + y = bottom + maxHeight = spaceBelow - 20 + } + + return { + [positionSide]: y, + left, + width, + containerWidth: containerRect.width, + } + } + + function calcLeftPosition() { + return align === "right" + ? dimensions.left + dimensions.width - dimensions.containerWidth + : dimensions.left + } + + element.style.position = "absolute" + element.style.zIndex = "9999" + element.style.minWidth = `${dimensions.width}px` + element.style.maxHeight = `${maxHeight.toFixed(0)}px` + element.style.transformOrigin = `center ${positionSide}` + element.style[positionSide] = `${dimensions[positionSide]}px` + element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` + + const resizeObserver = new ResizeObserver(entries => { + for (let entry of entries) { + dimensions = getDimensions() + element.style[positionSide] = `${dimensions[positionSide]}px` + element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px` + } + }) + + resizeObserver.observe(anchor) + resizeObserver.observe(element) + + return { + destroy() { + resizeObserver.disconnect() + }, + } +} diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte new file mode 100644 index 0000000000..5e403287e1 --- /dev/null +++ b/packages/bbui/src/Button/Button.svelte @@ -0,0 +1,212 @@ + + +{#if href} + + + +{:else} + +{/if} + + diff --git a/packages/bbui/src/Button/Button.svench b/packages/bbui/src/Button/Button.svench new file mode 100644 index 0000000000..9149f76944 --- /dev/null +++ b/packages/bbui/src/Button/Button.svench @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bbui/src/Button/Close.svelte b/packages/bbui/src/Button/Close.svelte new file mode 100644 index 0000000000..f2b76cdb38 --- /dev/null +++ b/packages/bbui/src/Button/Close.svelte @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/bbui/src/Button/Close.svench b/packages/bbui/src/Button/Close.svench new file mode 100644 index 0000000000..5bb7542b11 --- /dev/null +++ b/packages/bbui/src/Button/Close.svench @@ -0,0 +1,36 @@ + + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ diff --git a/packages/bbui/src/Button/TextButton.svelte b/packages/bbui/src/Button/TextButton.svelte new file mode 100644 index 0000000000..351a2c45bf --- /dev/null +++ b/packages/bbui/src/Button/TextButton.svelte @@ -0,0 +1,128 @@ + + +{#if href} + +{:else} + +{/if} + + diff --git a/packages/bbui/src/Button/TextButton.svench b/packages/bbui/src/Button/TextButton.svench new file mode 100644 index 0000000000..e3c3477805 --- /dev/null +++ b/packages/bbui/src/Button/TextButton.svench @@ -0,0 +1,69 @@ + + + + + +
+ alert('Clicked!')}> + + Add View + + alert('Clicked!')}> + + Add Column + + alert('Clicked!')}> + + Add Row + + alert('Clicked!')}> + + Disabled Text Button + + alert('Clicked!')}> + + Active Calculation + +
+ + + +
+ alert('Clicked!')}> + + Add View + + alert('Clicked!')}> + + Add Column + + alert('Clicked!')}> + + Add Row + + alert('Clicked!')}> + + Delete + + alert('Clicked!')}> + + Calculate + +
+ + + +
+ This is a link +
+ diff --git a/packages/bbui/src/DatePicker/DatePicker.svelte b/packages/bbui/src/DatePicker/DatePicker.svelte new file mode 100644 index 0000000000..2f87a48a43 --- /dev/null +++ b/packages/bbui/src/DatePicker/DatePicker.svelte @@ -0,0 +1,45 @@ + + +
+ {#if label} + + {/if} + +
+ + diff --git a/packages/bbui/src/DatePicker/DatePicker.svench b/packages/bbui/src/DatePicker/DatePicker.svench new file mode 100644 index 0000000000..ed0d480a6f --- /dev/null +++ b/packages/bbui/src/DatePicker/DatePicker.svench @@ -0,0 +1,17 @@ + + + + + + + + + \ No newline at end of file diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte new file mode 100644 index 0000000000..2f0cc1b4f3 --- /dev/null +++ b/packages/bbui/src/Drawer/Drawer.svelte @@ -0,0 +1,88 @@ + + + + +{#if visible} + +
+
+
+
{title}
+ +
+
+ + +
+
+ +
+ +{/if} + + diff --git a/packages/bbui/src/Drawer/Drawer.svench b/packages/bbui/src/Drawer/Drawer.svench new file mode 100644 index 0000000000..9d652e06ff --- /dev/null +++ b/packages/bbui/src/Drawer/Drawer.svench @@ -0,0 +1,42 @@ + + + + + + + alert('You closed the drawer!')}> +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, + architecto assumenda! Quia harum hic numquam, soluta maiores facere + explicabo vero obcaecati voluptas, qui placeat ad, dolorem recusandae + labore quos? Nisi! +

+ + + + + alert('You closed the drawer!')}> + + + +
This describes the drawer!
+
Some content here
+ + diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svelte b/packages/bbui/src/DropdownMenu/DropdownMenu.svelte new file mode 100644 index 0000000000..decc5bb4e2 --- /dev/null +++ b/packages/bbui/src/DropdownMenu/DropdownMenu.svelte @@ -0,0 +1,77 @@ + + +{#if open} + +
+ +
+ +{/if} + + diff --git a/packages/bbui/src/DropdownMenu/DropdownMenu.svench b/packages/bbui/src/DropdownMenu/DropdownMenu.svench new file mode 100644 index 0000000000..af4e32db2e --- /dev/null +++ b/packages/bbui/src/DropdownMenu/DropdownMenu.svench @@ -0,0 +1,161 @@ + + + + + +
+ +
+ +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + +
+ +
+ +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + +
+ +
+ +
    +
  • + + Edit +
    • +
  • + + Delete +
    • +
  • + + Sort A - Z +
    • +
  • + + Sort Z - A +
    • +
+ + + +
+ +
+ +
    +
  • + + Edit +
    • +
  • + + Delete +
    • +
  • + + Sort A - Z +
    • +
  • + + Sort Z - A +
    • +
+ + + +
+ +
+ alert('Closed!')} + bind:this={dropdownLeft} + width="175px" + borderColor="#d1d1d1ff" + anchor={anchorLeft} + align="left"> +
    +
  • + + Edit +
    • +
  • + + Delete +
    • +
  • + + Sort A - Z +
    • +
  • + + Sort Z - A +
    • +
+ + \ No newline at end of file diff --git a/packages/bbui/src/Dropzone/Dropzone.svelte b/packages/bbui/src/Dropzone/Dropzone.svelte new file mode 100644 index 0000000000..d025b9e14d --- /dev/null +++ b/packages/bbui/src/Dropzone/Dropzone.svelte @@ -0,0 +1,295 @@ + + +
+ {#if selectedImage} +
    +
  • +
    +
    + + {selectedImage.name} +
    +

    + {#if selectedImage.size <= BYTES_IN_MB} + {selectedImage.size / BYTES_IN_KB}KB + {:else}{selectedImage.size / BYTES_IN_MB}MB{/if} +

    +
    +
    + +
    + {#if selectedImageIdx !== 0} +
    + +
    + {/if} + + {#if selectedImageIdx !== files.length - 1} +
    + +
    + {/if} +
    • +
+ {/if} + + + +

Drop your files here

+ +
+ + diff --git a/packages/bbui/src/Dropzone/Dropzone.svench b/packages/bbui/src/Dropzone/Dropzone.svench new file mode 100644 index 0000000000..110195ab5a --- /dev/null +++ b/packages/bbui/src/Dropzone/Dropzone.svench @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/bbui/src/Dropzone/fileTypes.js b/packages/bbui/src/Dropzone/fileTypes.js new file mode 100644 index 0000000000..1ebd85070b --- /dev/null +++ b/packages/bbui/src/Dropzone/fileTypes.js @@ -0,0 +1,5 @@ +export const FILE_TYPES = { + IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg", "svg"], + CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"], + DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"], +} diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte new file mode 100644 index 0000000000..21d5450123 --- /dev/null +++ b/packages/bbui/src/Form/Checkbox.svelte @@ -0,0 +1,140 @@ + + +
+ +
+
+
+
+
+ +
+ + diff --git a/packages/bbui/src/Form/Checkbox.svench.svx b/packages/bbui/src/Form/Checkbox.svench.svx new file mode 100644 index 0000000000..b3246ec9d2 --- /dev/null +++ b/packages/bbui/src/Form/Checkbox.svench.svx @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + +## Multiple checkboxes +Use an array and an each block to use multiple checkboxes +```svelte + + +{#each menu as {text, checked}} + + + +{/each} +``` + + +
+ {#each menu as {text, checked}} + + + + {/each} +
+ + + \ No newline at end of file diff --git a/packages/bbui/src/Form/DataList.svelte b/packages/bbui/src/Form/DataList.svelte new file mode 100644 index 0000000000..6f5855d86a --- /dev/null +++ b/packages/bbui/src/Form/DataList.svelte @@ -0,0 +1,158 @@ + + +{#if label} + +{/if} +
+ + + { + updateValue(e) + handleBlur(e) + }} + value={value || ''} + type="text" /> +
+ +
+
+ + diff --git a/packages/bbui/src/Form/DataList.svench b/packages/bbui/src/Form/DataList.svench new file mode 100644 index 0000000000..eea8294dea --- /dev/null +++ b/packages/bbui/src/Form/DataList.svench @@ -0,0 +1,57 @@ + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte new file mode 100644 index 0000000000..e8afcffd36 --- /dev/null +++ b/packages/bbui/src/Form/Input.svelte @@ -0,0 +1,190 @@ + + +
+ {#if label || edit} +
+ {#if label} + + {/if} + {#if edit} +
+ + +
+ {/if} +
+ {/if} + + {#if error} +
{error}
+ {/if} +
+ + diff --git a/packages/bbui/src/Form/Input.svench b/packages/bbui/src/Form/Input.svench new file mode 100644 index 0000000000..1b95727a1a --- /dev/null +++ b/packages/bbui/src/Form/Input.svench @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bbui/src/Form/Multiselect.svelte b/packages/bbui/src/Form/Multiselect.svelte new file mode 100644 index 0000000000..924fd4b2b5 --- /dev/null +++ b/packages/bbui/src/Form/Multiselect.svelte @@ -0,0 +1,324 @@ + + +{#if label} + +{/if} +
+
+
+ {#each selectedOptions as option} +
+ {option.name} +
remove(option.value)}> + + + +
+
+ {/each} + {#if !value || !value.length} + {#if placeholder && placeholder.length} +
{placeholder}
+ {:else} +
 
+ {/if} + {/if} +
+
+ + + + {#if optionsVisible} + +
    showOptions(false)} + transition:fly={{ duration: 200, y: 5 }} + on:mousedown|preventDefault={handleOptionMousedown}> + {#each options as option} +
  • + {option.name} +
    • + {/each} + {#if !options.length} +
  • No results
    • + {/if} +
+ + {/if} +
+ + diff --git a/packages/bbui/src/Form/Multiselect.svench b/packages/bbui/src/Form/Multiselect.svench new file mode 100644 index 0000000000..86ad0de529 --- /dev/null +++ b/packages/bbui/src/Form/Multiselect.svench @@ -0,0 +1,63 @@ + + + + + {#each options as option} + + {/each} + + + + +
+ + {#each options as option} + + {/each} + +
+ + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + + + {#each options as option} + + {/each} + + + + diff --git a/packages/bbui/src/Form/Radio.svelte b/packages/bbui/src/Form/Radio.svelte new file mode 100644 index 0000000000..b4a2637803 --- /dev/null +++ b/packages/bbui/src/Form/Radio.svelte @@ -0,0 +1,140 @@ + + +
+ +
+
+
+
+
+ +
+ + diff --git a/packages/bbui/src/Form/Radio.svench.svx b/packages/bbui/src/Form/Radio.svench.svx new file mode 100644 index 0000000000..20d3c58c99 --- /dev/null +++ b/packages/bbui/src/Form/Radio.svench.svx @@ -0,0 +1,64 @@ + + + ## Multiple checkboxes + Use an array and an each block to use the radio button. +```svelte + + +{#each menu as flavour} + +{/each} +``` + + + +
+ {#each menu as flavour} + + + + {/each} +
+ + + +
+ {#each menu as flavour} + + + + {/each} +
+ + + \ No newline at end of file diff --git a/packages/bbui/src/Form/RichText.svelte b/packages/bbui/src/Form/RichText.svelte new file mode 100644 index 0000000000..9552823389 --- /dev/null +++ b/packages/bbui/src/Form/RichText.svelte @@ -0,0 +1,59 @@ + + + + {#if mergedOptions.theme !== 'snow'} + + {/if} + + +
+
+
diff --git a/packages/bbui/src/Form/RichText.svench.svx b/packages/bbui/src/Form/RichText.svench.svx new file mode 100644 index 0000000000..0a0a858866 --- /dev/null +++ b/packages/bbui/src/Form/RichText.svench.svx @@ -0,0 +1,40 @@ + + +### Rich Text Component + +This component uses the QuillJS library to add Rich Text editing functionality. + +It exposes a content 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' +} +``` + + + + + + + + + + + + diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte new file mode 100644 index 0000000000..c245abd245 --- /dev/null +++ b/packages/bbui/src/Form/Select.svelte @@ -0,0 +1,95 @@ + + +
+ {#if label} + + {/if} +
+ +
+ +
+
+
+ + diff --git a/packages/bbui/src/Form/Select.svench b/packages/bbui/src/Form/Select.svench new file mode 100644 index 0000000000..750d7224ca --- /dev/null +++ b/packages/bbui/src/Form/Select.svench @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bbui/src/Form/Slider.svelte b/packages/bbui/src/Form/Slider.svelte new file mode 100644 index 0000000000..c8a4c0122e --- /dev/null +++ b/packages/bbui/src/Form/Slider.svelte @@ -0,0 +1,88 @@ + + +
+ {#if label} + + {/if} +
+ {#if showRange && min != null}{min}{/if} + + {#if showRange && max != null}{max}{/if} +
+
+ + diff --git a/packages/bbui/src/Form/Slider.svench b/packages/bbui/src/Form/Slider.svench new file mode 100644 index 0000000000..7ed59f78b8 --- /dev/null +++ b/packages/bbui/src/Form/Slider.svench @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte new file mode 100644 index 0000000000..1133a99127 --- /dev/null +++ b/packages/bbui/src/Form/TextArea.svelte @@ -0,0 +1,132 @@ + + +
+ {#if label || edit} +
+ {#if label} + + {/if} + {#if edit} +
+ + +
+ {/if} +
+ {/if} +