@budibase/bbui 1.0.49-alpha.9 → 1.0.49

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.49-alpha.9",
+  "version": "1.0.49",
   "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": "797136cabc9f23bbf61bb17736fcf12b0e750dc8"
+  "gitHead": "80ae9a30b112c1abf794bdad73da9257ba80d9d5"
 }

package/src/Form/Core/Dropzone.svelte

@@ -22,7 +22,6 @@
   export let error = null
   export let fileTags = []
   export let maximum = null
-  export let extensions = "*"
 
   const dispatch = createEventDispatcher()
   const imageExtensions = [
@@ -147,9 +146,7 @@
           <img alt="preview" src={selectedUrl} />
         {:else}
           <div class="placeholder">
-            <div class="extension">
-              {selectedImage.name || "Unknown file"}
-            </div>
+            <div class="extension">{selectedImage.extension}</div>
             <div>Preview not supported</div>
           </div>
         {/if}
@@ -210,7 +207,6 @@
           {disabled}
           type="file"
           multiple
-          accept={extensions}
           on:change={handleFile}
         />
         <svg
@@ -361,21 +357,18 @@
     white-space: nowrap;
     width: 0;
     margin-right: 10px;
-    user-select: all;
   }
   .placeholder {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    text-align: center;
   }
   .extension {
     color: var(--spectrum-global-color-gray-600);
     text-transform: uppercase;
     font-weight: 600;
     margin-bottom: 5px;
-    user-select: all;
   }
 
   .nav {

package/src/Form/Core/TextArea.svelte

@@ -13,7 +13,6 @@
     start: textarea.selectionStart,
     end: textarea.selectionEnd,
   })
-  export let align = null
 
   let focus = false
   let textarea
@@ -47,7 +46,6 @@
     bind:this={textarea}
     placeholder={placeholder || ""}
     class="spectrum-Textfield-input"
-    style={align ? `text-align: ${align}` : ""}
     {disabled}
     {id}
     on:focus={() => (focus = true)}

package/src/Form/Core/TextField.svelte

@@ -12,7 +12,6 @@
   export let updateOnChange = true
   export let quiet = false
   export let dataCy
-  export let align
 
   const dispatch = createEventDispatcher()
   let focus = false
@@ -93,9 +92,8 @@
     on:input={onInput}
     on:keyup={updateValueOnEnter}
     {type}
-    class="spectrum-Textfield-input"
-    style={align ? `text-align: ${align};` : ""}
     inputmode={type === "number" ? "decimal" : "text"}
+    class="spectrum-Textfield-input"
   />
 </div>
 

package/src/Form/Field.svelte

@@ -6,12 +6,11 @@
   export let label = null
   export let labelPosition = "above"
   export let error = null
-  export let tooltip = ""
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>
   {#if label}
-    <FieldLabel forId={id} {label} position={labelPosition} {tooltip} />
+    <FieldLabel forId={id} {label} position={labelPosition} />
   {/if}
   <div class="spectrum-Form-itemField">
     <slot />

package/src/Form/FieldLabel.svelte

@@ -1,24 +1,19 @@
 <script>
-  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
-
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
 
   export let forId
   export let label
   export let position = "above"
-  export let tooltip = ""
 
   $: className = position === "above" ? "" : `spectrum-FieldLabel--${position}`
 </script>
 
-<TooltipWrapper {tooltip} size="S">
-  <label
-    for={forId}
-    class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
-  >
-    {label || ""}
-  </label>
-</TooltipWrapper>
+<label
+  for={forId}
+  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
+>
+  {label || ""}
+</label>
 
 <style>
   label {

package/src/Form/Select.svelte

@@ -17,7 +17,6 @@
   export let quiet = false
   export let autoWidth = false
   export let sort = false
-  export let tooltip = ""
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -33,7 +32,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error} {tooltip}>
+<Field {label} {labelPosition} {error}>
   <Select
     {quiet}
     {error}

package/src/Label/Label.svelte

@@ -1,20 +1,73 @@
 <script>
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
-  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import Icon from "../Icon/Icon.svelte"
 
   export let size = "M"
   export let tooltip = ""
+  export let showTooltip = false
 </script>
 
-<TooltipWrapper {tooltip} {size}>
+{#if tooltip}
+  <div class="container">
+    <label
+      for=""
+      class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
+    >
+      <slot />
+    </label>
+    <div class="icon-container">
+      <div
+        class="icon"
+        class:icon-small={size === "M" || size === "S"}
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}
+      >
+        <Icon name="InfoOutline" size="S" disabled={true} />
+      </div>
+      {#if showTooltip}
+        <div class="tooltip">
+          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else}
   <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
     <slot />
   </label>
-</TooltipWrapper>
+{/if}
 
 <style>
   label {
     padding: 0;
     white-space: nowrap;
   }
+  .container {
+    display: flex;
+    align-items: center;
+  }
+  .icon-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: 1px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    top: 15px;
+    z-index: 1;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
+  .icon-small {
+    margin-top: -2px;
+    margin-bottom: -5px;
+  }
 </style>

package/src/Tooltip/TooltipWrapper.svelte

@@ -1,60 +0,0 @@
-<script>
-  import Tooltip from "./Tooltip.svelte"
-  import Icon from "../Icon/Icon.svelte"
-
-  export let tooltip = ""
-  export let size = "M"
-
-  let showTooltip = false
-</script>
-
-<div class:container={!!tooltip}>
-  <slot />
-  {#if tooltip}
-    <div class="icon-container">
-      <div
-        class="icon"
-        class:icon-small={size === "M" || size === "S"}
-        on:mouseover={() => (showTooltip = true)}
-        on:mouseleave={() => (showTooltip = false)}
-      >
-        <Icon name="InfoOutline" size="S" disabled={true} />
-      </div>
-      {#if showTooltip}
-        <div class="tooltip">
-          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .container {
-    display: flex;
-    align-items: center;
-  }
-  .icon-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    margin-top: 1px;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-  .tooltip {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    top: 15px;
-    z-index: 1;
-    width: 160px;
-  }
-  .icon {
-    transform: scale(0.75);
-  }
-  .icon-small {
-    margin-top: -2px;
-    margin-bottom: -5px;
-  }
-</style>