@budibase/bbui 3.5.2 → 3.5.3

package/src/Modal/Modal.svench

@@ -1,116 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Modal from "./Modal.svelte";
-  import ModalContent from "./ModalContent.svelte";
-  import Button from "../Button/Button.svelte";
-  import Content from "./Content.svelte";
-  import QuizModal from "./QuizModal.svelte";
-  import CustomContent from "./CustomContent.svelte";
-
-  let modal1
-  let modal2
-  let modal3
-
-  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
-  async function longTask() {
-    await sleep(3000)
-  }
-</script>
-
-<style>
-  p, span {
-    font-size: var(--font-size-s);
-  }
-
-  code {
-    display: inline-block;
-    box-sizing: border-box;
-    padding: var(--spacing-xs) var(--spacing-s);
-    background-color: var(--grey-2);
-    color: var(--red-dark);
-    border-radius: var(--spacing-xs);
-  }
-</style>
-
-<h3>Modals</h3>
-<p>
-  Modals provide a means to render content in front of everything else on a page.
-</p>
-<p>
-  The modal module in BBUI exposes two
-  separate components to provide this functionality; a <code>Modal</code> component to control visibility of content,
-  and a <code>ModalContent</code> component to quickly construct the typical content - although this is optional.
-</p>
-<p>
-  One of the common problems with modals and popups is stale state reappearing after hiding and showing the content
-  again, since the state hasn't been garbage collected if a component controls its own visibility. This is handled for
-  you when using the <code>Modal</code> component as it will fully unmount child components, properly resetting state
-  every time it appears.
-</p>
-
-<br/>
-<p>Use ModalContent to render typical modal content.</p>
-<View name="Simple Confirmation Modal">
-  <Button primary on:click={modal1.show}>Delete Record</Button>
-  <Modal bind:this={modal1}>
-    <ModalContent title="Confirm Deletion" confirmText="Delete">
-      <span>Are you sure you want to delete this record?</span>
-    </ModalContent>
-  </Modal>
-</View>
-
-<br/>
-<p>
-  Width can be specified as a prop to a <code>Modal</code>. Any additional <code>ModalContent</code> props provided
-  will be passed to the confirmation button.
-</p>
-<View name="Different Buttons and Width">
-  <Button primary on:click={modal3.show}>Open Modal</Button>
-  <Modal bind:this={modal3} width="250px">
-    <ModalContent
-      title="Confirmation Required"
-      showCancelButton={false}
-      showCloseIcon={false}
-      confirmText="I'm sure!"
-      green
-      large
-      wide
-    >
-      <span>Are you sure you want to do that?</span>
-    </ModalContent>
-  </Modal>
-</View>
-
-<br/>
-<p>Any content can be rendered inside a <code>Modal</code>. Use context to close the modal from your own components.</p>
-<View name="Custom Content">
-  <Button primary on:click={modal1.show}>Open Modal</Button>
-  <Modal bind:this={modal1} padding={false} border={false}>
-    <CustomContent/>
-  </Modal>
-</View>
-
-<br/>
-<p>Async functions passed in as the onConfirm prop will make the modal wait until the callback is completed.</p>
-<View name="Async Callbacks">
-  <Button primary on:click={modal2.show}>Long Task</Button>
-  <Modal bind:this={modal2}>
-    <ModalContent
-      title="Perform Long Task"
-      confirmText="Submit"
-      onConfirm={longTask}
-    >
-      <span>Pressing submit will wait 3 seconds before finishing and disable the confirm button until it's done.</span>
-    </ModalContent>
-  </Modal>
-</View>
-
-<br/>
-<p>Returning false from a onConfirm callback will prevent the modal being closed.</p>
-<View name="Callback Failure Handling">
-  <Button primary on:click={modal3.show}>Open Quiz</Button>
-  <Modal bind:this={modal3}>
-    <QuizModal />
-  </Modal>
-</View>
-

package/src/Modal/QuizModal.svelte

@@ -1,53 +0,0 @@
-<script>
-  import ModalContent from "./ModalContent.svelte"
-  import Input from "../Form/Input.svelte"
-
-  let modal
-  let answer
-  let error
-
-  export function show() {
-    modal.show()
-  }
-  export function hide() {
-    modal.hide
-  }
-
-  function resetState() {
-    answer = undefined
-    error = undefined
-  }
-
-  async function answerQuiz() {
-    const correct = answer === "8"
-    error = !correct
-    return correct
-  }
-</script>
-
-<ModalContent
-  title="Quick Maths"
-  bind:this={modal}
-  confirmText="Submit"
-  onConfirm={answerQuiz}
-  on:show={resetState}
->
-  {#if error}
-    <p class="error">Wrong answer! Try again.</p>
-  {/if}
-  <p>What is 4 + 4?</p>
-  <Input label="Answer" bind:value={answer} />
-</ModalContent>
-
-<style>
-  p {
-    margin: 0;
-    font-size: var(--font-size-s);
-  }
-  p.error {
-    color: #e26d69;
-    background-color: #ffe6e6;
-    padding: 8px;
-    border-radius: 4px;
-  }
-</style>

package/src/Stores/Notifications.svench.svx

@@ -1,78 +0,0 @@
-<script>
-    import { flip } from 'svelte/animate';
-    import { fly } from "svelte/transition"
-    import { View } from "svench";
-    import { notifications } from "./notifications";
-
-    export let themes = {
-        danger: "#E26D69",
-        success: "#84C991",
-        warning: "#f0ad4e",
-        info: "#5bc0de",
-        default: "#aaaaaa",
-    }
-</script>
-
-## Notification Store
-
-This custom can be used to display toast messages. It has 5 different methods: `send`, `danger`, `warning`, `success`, `info`.
-
-
-<View name="danger">
-  <button on:click={() => notifications.error('This is a danger!')}>Danger</button>
-</View>
-<View name="warning">
-  <button on:click={() => notifications.warning('This is a warning!')}>Warning</button>
-</View>
-<View name="success">
-  <button on:click={() => notifications.success('This is a success!')}>Success</button>
-</View>
-<View name="info">
-  <button on:click={() => notifications.info('This is an info toast!')}>Info</button>
-</View>
-  
-<div class="notifications">
-    {#each $notifications as notification (notification.id)}
-        <div
-        animate:flip
-        class="toast"
-        style="background: {themes[notification.type]};"
-        transition:fly={{ y: -30 }}>
-        <div class="content">{notification.message}</div>
-        {#if notification.icon}<i class={notification.icon} />{/if}
-        </div>
-    {/each}
-</div>
-
-<style>
-    .notifications {
-        position: fixed;
-        top: 10px;
-        left: 0;
-        right: 0;
-        margin: 0 auto;
-        padding: 0;
-        z-index: 9999;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: center;
-        pointer-events: none;
-    }
-
-    .toast {
-        flex: 0 0 auto;
-        margin-bottom: 10px;
-        border-radius: var(--border-radius-s);
-        /* The toasts now support being auto sized, so this static width could be removed */
-        width: 40vw;
-    }
-
-    .content {
-        padding: 10px;
-        display: block;
-        color: white;
-        font-weight: 500;
-    }
-</style>
-