diff --git a/.gitignore b/.gitignore index a84d25d46d..111263f9f1 100644 --- a/.gitignore +++ b/.gitignore @@ -63,6 +63,7 @@ typings/ # dotenv environment variables file .env !hosting/.env +hosting/.generated-envoy.dev.yaml # parcel-bundler cache (https://parceljs.org/) .cache diff --git a/README.md b/README.md index 04bb71fb50..4691265f50 100644 --- a/README.md +++ b/README.md @@ -31,14 +31,14 @@ GitHub release (latest by date) - Discord + Discord Follow @budibase Code of conduct - +

@@ -58,9 +58,9 @@ ## ✨ Features -When other platforms chose the closed source route, we decided to go open source. When other platforms chose cloud builders, we decided a local builder offered the better developer experience. We like to do things differently at Budibase. +When other platforms chose the closed source route, we decided to go open source. When other platforms chose cloud builders, we decided a local builder offered the better developer experience. We like to do things differently at Budibase. -- **Build and ship real software.** Unlike other platforms, with Budibase you build and ship single page applications. Budibase applications have performance baked in and can be designed responsively, providing your users with a great experience. +- **Build and ship real software.** Unlike other platforms, with Budibase you build and ship single page applications. Budibase applications have performance baked in and can be designed responsively, providing your users with a great experience. - **Open source and extensable.** Budibase is open-source. The builder is licensed AGPL v3, the server is GPL v3, and the client is MPL. This should fill you with confidence that Budibase will always be around. You can also code against Budibase or fork it and make changes as you please, providing a developer-friendly experience. @@ -83,7 +83,7 @@ When other platforms chose the closed source route, we decided to go open source - [x] Public Beta: Anyone can [sign-up and use Budibase](https://portal.budi.live/signup). - [ ] Official Launch -Watch "releases" of this repo to get notified of major updates, and give the star button a click whilst you're there. +Watch "releases" of this repo to get notified of major updates, and give the star button a click whilst you're there.

@@ -93,7 +93,7 @@ Watch "releases" of this repo to get notified of major updates, and give the sta [![Stargazers over time](https://starchart.cc/Budibase/budibase.svg)](https://starchart.cc/Budibase/budibase) -If you are having issues between updates of the builder, please use the guide [here](https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md#troubleshooting) to clear down your environment. +If you are having issues between updates of the builder, please use the guide [here](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md#troubleshooting) to clear down your environment. ## 🏁 Getting Started with Budibase @@ -131,25 +131,25 @@ Checkout our [Public Roadmap](https://github.com/Budibase/budibase/projects/10). ## ❗ Code of Conduct -Budibase is dedicated to providing a welcoming, diverse, and harrassment-free experience for everyone. We expect everyone in the Budibase community to abide by our [**Code of Conduct**](https://github.com/Budibase/budibase/blob/master/.github/CODE_OF_CONDUCT.md). Please read it. +Budibase is dedicated to providing a welcoming, diverse, and harrassment-free experience for everyone. We expect everyone in the Budibase community to abide by our [**Code of Conduct**](https://github.com/Budibase/budibase/blob/HEAD/.github/CODE_OF_CONDUCT.md). Please read it. ## 🙌 Contributing to Budibase From opening a bug report to creating a pull request: every contribution is appreciated and welcomed. If you're planning to implement a new feature or change the API please create an issue first. This way we can ensure your work is not in vain. ### Not Sure Where to Start? -A good place to start contributing, is the [First time issues project](https://github.com/Budibase/budibase/projects/22). +A good place to start contributing, is the [First time issues project](https://github.com/Budibase/budibase/projects/22). ### How the repository is organized Budibase is a monorepo managed by lerna. Lerna manages the building and publishing of the budibase packages. At a high level, here are the packages that make up Budibase. -- [packages/builder](https://github.com/Budibase/budibase/tree/master/packages/builder) - contains code for the budibase builder client side svelte application. +- [packages/builder](https://github.com/Budibase/budibase/tree/HEAD/packages/builder) - contains code for the budibase builder client side svelte application. -- [packages/client](https://github.com/Budibase/budibase/tree/master/packages/client) - A module that runs in the browser responsible for reading JSON definition and creating living, breathing web apps from it. +- [packages/client](https://github.com/Budibase/budibase/tree/HEAD/packages/client) - A module that runs in the browser responsible for reading JSON definition and creating living, breathing web apps from it. -- [packages/server](https://github.com/Budibase/budibase/tree/master/packages/server) - The budibase server. This Koa app is responsible for serving the JS for the builder and budibase apps, as well as providing the API for interaction with the database and file system. +- [packages/server](https://github.com/Budibase/budibase/tree/HEAD/packages/server) - The budibase server. This Koa app is responsible for serving the JS for the builder and budibase apps, as well as providing the API for interaction with the database and file system. -For more information, see [CONTRIBUTING.md](https://github.com/Budibase/budibase/blob/master/.github/CONTRIBUTING.md) +For more information, see [CONTRIBUTING.md](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md) ## 📝 License diff --git a/hosting/docker-compose.dev.yaml b/hosting/docker-compose.dev.yaml index 8ee1753e11..9b4c353981 100644 --- a/hosting/docker-compose.dev.yaml +++ b/hosting/docker-compose.dev.yaml @@ -27,7 +27,7 @@ services: restart: always image: envoyproxy/envoy:v1.16-latest volumes: - - ./envoy.dev.yaml:/etc/envoy/envoy.yaml + - ./.generated-envoy.dev.yaml:/etc/envoy/envoy.yaml ports: - "${MAIN_PORT}:10000" depends_on: diff --git a/hosting/docker-compose.yaml b/hosting/docker-compose.yaml index 8de5e9fcdd..54f8468c14 100644 --- a/hosting/docker-compose.yaml +++ b/hosting/docker-compose.yaml @@ -22,7 +22,7 @@ services: JWT_SECRET: ${JWT_SECRET} LOG_LEVEL: info SENTRY_DSN: https://a34ae347621946bf8acded18e5b7d4b8@o420233.ingest.sentry.io/5338131 - ENABLE_ANALYTICS: true + ENABLE_ANALYTICS: "true" depends_on: - worker-service diff --git a/hosting/envoy.dev.yaml b/hosting/envoy.dev.yaml.hbs similarity index 66% rename from hosting/envoy.dev.yaml rename to hosting/envoy.dev.yaml.hbs index e12bc2c0e0..f7f642a244 100644 --- a/hosting/envoy.dev.yaml +++ b/hosting/envoy.dev.yaml.hbs @@ -26,6 +26,23 @@ static_resources: cluster: redis-service prefix_rewrite: "/" + - match: { prefix: "/api/" } + route: + cluster: server-dev + + - match: { prefix: "/app_" } + route: + cluster: server-dev + + - match: { prefix: "/builder/" } + route: + cluster: builder-dev + + - match: { prefix: "/builder" } + route: + cluster: builder-dev + prefix_rewrite: "/builder/" + # minio is on the default route because this works # best, minio + AWS SDK doesn't handle path proxy - match: { prefix: "/" } @@ -77,3 +94,32 @@ static_resources: socket_address: address: redis-service port_value: 6379 + + - name: server-dev + connect_timeout: 0.25s + type: strict_dns + lb_policy: round_robin + load_assignment: + cluster_name: server-dev + endpoints: + - lb_endpoints: + - endpoint: + address: + socket_address: + address: {{ address }} + port_value: 4001 + + - name: builder-dev + connect_timeout: 15s + type: strict_dns + lb_policy: round_robin + load_assignment: + cluster_name: builder-dev + endpoints: + - lb_endpoints: + - endpoint: + address: + socket_address: + address: {{ address }} + port_value: 3000 + diff --git a/package.json b/package.json index 037e9c4b1c..b2f572d202 100644 --- a/package.json +++ b/package.json @@ -17,16 +17,19 @@ "svelte": "^3.30.0" }, "scripts": { - "bootstrap": "lerna bootstrap", + "bootstrap": "lerna link && lerna bootstrap", "build": "lerna run build", "initialise": "lerna run initialise", "publishdev": "lerna run publishdev", "publishnpm": "yarn build && lerna publish --force-publish", - "restore": "npm run clean && npm run bootstrap && npm run build", - "nuke": "rimraf ~/.budibase && npm run restore", + "restore": "yarn run clean && yarn run bootstrap && yarn run build", + "nuke": "yarn run nuke:packages && yarn run nuke:docker", + "nuke:packages": "yarn run restore", + "nuke:docker": "lerna run --parallel dev:stack:nuke", "clean": "lerna clean", "kill-port": "kill-port 4001", - "dev": "yarn run kill-port && node ./scripts/symlinkDev.js && lerna run --parallel dev:builder --concurrency 1", + "dev": "yarn run kill-port && lerna link && lerna run --parallel dev:builder --concurrency 1", + "dev:noserver": "lerna link && lerna run --parallel dev:builder --concurrency 1 --ignore @budibase/server", "test": "lerna run test", "lint": "eslint packages", "lint:fix": "eslint --fix packages", 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/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..9bf5a40a67 --- /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 => { + entries.forEach(() => { + 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..4f4f4bc7bf --- /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} + preview + {#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..ab4b9c3d99 --- /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} +