@budibase/bbui 1.0.14 → 1.0.15-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.14",
+  "version": "1.0.15-alpha.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -82,5 +82,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "56dd4bfe612f4a78d219dace459da5836898825f"
+  "gitHead": "35b66edf0243601c7b11fbe22b6d39a4f9f768a9"
 }

package/src/Form/Core/Dropzone.svelte

@@ -6,6 +6,8 @@
   import { generateID } from "../../utils/helpers"
   import Icon from "../../Icon/Icon.svelte"
   import Link from "../../Link/Link.svelte"
+  import Tag from "../../Tags/Tag.svelte"
+  import Tags from "../../Tags/Tags.svelte"
 
   const BYTES_IN_KB = 1000
   const BYTES_IN_MB = 1000000
@@ -18,6 +20,8 @@
   export let handleFileTooLarge = null
   export let gallery = true
   export let error = null
+  export let fileTags = []
+  export let maximum = null
 
   const dispatch = createEventDispatcher()
   const imageExtensions = [
@@ -184,103 +188,118 @@
       {/each}
     {/if}
   {/if}
-  <div
-    class="spectrum-Dropzone"
-    class:is-invalid={!!error}
-    class:disabled
-    role="region"
-    tabindex="0"
-    on:dragover={handleDragOver}
-    on:dragleave={handleDragLeave}
-    on:dragenter={handleDragOver}
-    on:drop={handleDrop}
-    class:is-dragged={fileDragged}
-  >
-    <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
-      <input
-        id={fieldId}
-        {disabled}
-        type="file"
-        multiple
-        on:change={handleFile}
-      />
-      <svg
-        class="spectrum-IllustratedMessage-illustration"
-        width="125"
-        height="60"
-        viewBox="0 0 199 97.7"
-      >
-        <defs>
-          <style>
-            .cls-1,
-            .cls-2 {
-              fill: none;
-              stroke-linecap: round;
-              stroke-linejoin: round;
-            }
-            .cls-1 {
-              stroke-width: 3px;
-            }
-            .cls-2 {
-              stroke-width: 2px;
-            }
-          </style>
-        </defs>
-        <path
-          class="cls-1"
-          d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+  {#if !maximum || (maximum && value?.length < maximum)}
+    <div
+      class="spectrum-Dropzone"
+      class:is-invalid={!!error}
+      class:disabled
+      role="region"
+      tabindex="0"
+      on:dragover={handleDragOver}
+      on:dragleave={handleDragLeave}
+      on:dragenter={handleDragOver}
+      on:drop={handleDrop}
+      class:is-dragged={fileDragged}
+    >
+      <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
+        <input
+          id={fieldId}
+          {disabled}
+          type="file"
+          multiple
+          on:change={handleFile}
         />
-        <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
-        <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
-        <path
-          class="cls-1"
-          d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
-        />
-        <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
-        <path
-          class="cls-2"
-          d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
-        />
-        <path
-          class="cls-2"
-          d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
-        />
-        <path
-          class="cls-2"
-          d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
-        />
-        <path
-          class="cls-1"
-          d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
-        />
-        <rect
-          class="cls-1"
-          x="1.5"
-          y="34.5"
-          width="58"
-          height="39"
-          rx="2"
-          ry="2"
-        />
-      </svg>
-      <h2
-        class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
-      >
-        Drag and drop your file
-      </h2>
-      {#if !disabled}
-        <p
-          class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
+        <svg
+          class="spectrum-IllustratedMessage-illustration"
+          width="125"
+          height="60"
+          viewBox="0 0 199 97.7"
+        >
+          <defs>
+            <style>
+              .cls-1,
+              .cls-2 {
+                fill: none;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+              }
+              .cls-1 {
+                stroke-width: 3px;
+              }
+              .cls-2 {
+                stroke-width: 2px;
+              }
+            </style>
+          </defs>
+          <path
+            class="cls-1"
+            d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+          />
+          <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
+          <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
+          <path
+            class="cls-1"
+            d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
+          />
+          <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
+          <path
+            class="cls-2"
+            d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
+          />
+          <path
+            class="cls-2"
+            d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
+          />
+          <path
+            class="cls-2"
+            d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
+          />
+          <path
+            class="cls-1"
+            d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
+          />
+          <rect
+            class="cls-1"
+            x="1.5"
+            y="34.5"
+            width="58"
+            height="39"
+            rx="2"
+            ry="2"
+          />
+        </svg>
+        <h2
+          class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
         >
-          <label for={fieldId} class="spectrum-Link">
-            Select a file to upload
-          </label>
-          <br />
-          from your computer
-        </p>
-      {/if}
+          Drag and drop your file
+        </h2>
+        {#if !disabled}
+          <p
+            class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
+          >
+            <label for={fieldId} class="spectrum-Link">
+              Select a file to upload
+            </label>
+            <br />
+            from your computer
+          </p>
+          {#if fileTags.length}
+            <Tags>
+              <div class="tags">
+                {#each fileTags as tag}
+                  <div class="tag">
+                    <Tag>
+                      {tag}
+                    </Tag>
+                  </div>
+                {/each}
+              </div>
+            </Tags>
+          {/if}
+        {/if}
+      </div>
     </div>
-  </div>
+  {/if}
 </div>
 
 <style>
@@ -390,4 +409,15 @@
   .disabled .spectrum-Heading--sizeL {
     color: var(--spectrum-alias-text-color-disabled);
   }
+
+  .tags {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .tag {
+    margin-top: 8px;
+  }
 </style>

package/src/Form/Dropzone.svelte

@@ -12,6 +12,8 @@
   export let processFiles = undefined
   export let handleFileTooLarge = undefined
   export let gallery = true
+  export let fileTags = []
+  export let maximum = undefined
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -29,6 +31,8 @@
     {processFiles}
     {handleFileTooLarge}
     {gallery}
+    {fileTags}
+    {maximum}
     on:change={onChange}
   />
 </Field>

package/src/Modal/ModalContent.svelte

@@ -18,10 +18,22 @@
   export let disabled = false
   export let showDivider = true
 
+  export let showSecondaryButton = false
+  export let secondaryButtonText = undefined
+  export let secondaryAction = undefined
+
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
   $: confirmDisabled = disabled || loading
 
+  async function secondary() {
+    loading = true
+    if (!secondaryAction || (await secondaryAction()) !== false) {
+      hide()
+    }
+    loading = false
+  }
+
   async function confirm() {
     loading = true
     if (!onConfirm || (await onConfirm()) !== false) {
@@ -73,6 +85,15 @@
         class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
       >
         <slot name="footer" />
+
+        {#if showSecondaryButton && secondaryButtonText && secondaryAction}
+          <div class="secondary-action">
+            <Button group secondary on:click={secondary}
+              >{secondaryButtonText}</Button
+            >
+          </div>
+        {/if}
+
         {#if showCancelButton}
           <Button group secondary on:click={close}>{cancelText}</Button>
         {/if}
@@ -136,4 +157,8 @@
     display: flex;
     justify-content: space-between;
   }
+
+  .secondary-action {
+    margin-right: auto;
+  }
 </style>