@budibase/bbui 2.4.27-alpha.7 → 2.4.27-alpha.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.4.27-alpha.7",
+  "version": "2.4.27-alpha.9",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,8 +38,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.4.27-alpha.7",
-    "@budibase/string-templates": "2.4.27-alpha.7",
+    "@budibase/shared-core": "2.4.27-alpha.9",
+    "@budibase/string-templates": "2.4.27-alpha.9",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -90,5 +90,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "61f576f16a2ed0cbf79e85a3a33893611026ac7f"
+  "gitHead": "b48f6ecdc939ed804ef5645c7e0869ccfbf2ec74"
 }

package/src/Form/Core/File.svelte

@@ -0,0 +1,115 @@
+<script>
+  import ActionButton from "../../ActionButton/ActionButton.svelte"
+  import { uuid } from "../../helpers"
+  import Icon from "../../Icon/Icon.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let title = "Upload file"
+  export let disabled = false
+  export let allowClear = null
+  export let extensions = null
+  export let handleFileTooLarge = null
+  export let fileSizeLimit = BYTES_IN_MB * 20
+  export let id = null
+  export let previewUrl = null
+
+  const fieldId = id || uuid()
+  const BYTES_IN_KB = 1000
+  const BYTES_IN_MB = 1000000
+
+  const dispatch = createEventDispatcher()
+
+  let fileInput
+
+  $: inputAccept = Array.isArray(extensions) ? extensions.join(",") : "*"
+
+  async function processFile(targetFile) {
+    if (handleFileTooLarge && targetFile?.size >= fileSizeLimit) {
+      handleFileTooLarge(targetFile)
+      return
+    }
+    dispatch("change", targetFile)
+  }
+
+  function handleFile(evt) {
+    processFile(evt.target.files[0])
+  }
+
+  function clearFile() {
+    dispatch("change", null)
+  }
+</script>
+
+<input
+  id={fieldId}
+  {disabled}
+  type="file"
+  accept={inputAccept}
+  bind:this={fileInput}
+  on:change={handleFile}
+/>
+
+<div class="field">
+  {#if value}
+    <div class="file-view">
+      {#if previewUrl}
+        <img class="preview" alt="" src={previewUrl} />
+      {/if}
+      <div class="filename">{value.name}</div>
+      {#if value.size}
+        <div class="filesize">
+          {#if value.size <= BYTES_IN_MB}
+            {`${value.size / BYTES_IN_KB} KB`}
+          {:else}
+            {`${value.size / BYTES_IN_MB} MB`}
+          {/if}
+        </div>
+      {/if}
+      {#if !disabled || (allowClear === true && disabled)}
+        <div class="delete-button" on:click={clearFile}>
+          <Icon name="Close" size="XS" />
+        </div>
+      {/if}
+    </div>
+  {/if}
+  <ActionButton {disabled} on:click={fileInput.click()}>{title}</ActionButton>
+</div>
+
+<style>
+  .field {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+  .file-view {
+    display: flex;
+    gap: var(--spacing-l);
+    align-items: center;
+    border: 1px solid var(--spectrum-alias-border-color);
+    border-radius: var(--spectrum-global-dimension-size-50);
+    padding: 0px var(--spectrum-alias-item-padding-m);
+  }
+  input[type="file"] {
+    display: none;
+  }
+  .delete-button {
+    transition: all 0.3s;
+    margin-left: 10px;
+    display: flex;
+  }
+  .delete-button:hover {
+    cursor: pointer;
+    color: var(--red);
+  }
+  .filesize {
+    white-space: nowrap;
+  }
+  .filename {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .preview {
+    height: 1.5em;
+  }
+</style>

package/src/Form/Core/index.js

@@ -13,3 +13,4 @@ export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
 export { default as CoreRichTextField } from "./RichTextField.svelte"
 export { default as CoreSlider } from "./Slider.svelte"
+export { default as CoreFile } from "./File.svelte"

package/src/Form/File.svelte

@@ -0,0 +1,37 @@
+<script>
+  import Field from "./Field.svelte"
+  import { CoreFile } from "./Core"
+  import { createEventDispatcher } from "svelte"
+
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let allowClear = null
+  export let handleFileTooLarge = () => {}
+  export let previewUrl = null
+  export let extensions = null
+  export let error = null
+  export let title = null
+  export let value = null
+  export let tooltip = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error} {tooltip}>
+  <CoreFile
+    {error}
+    {disabled}
+    {allowClear}
+    {title}
+    {value}
+    {previewUrl}
+    {handleFileTooLarge}
+    {extensions}
+    on:change={onChange}
+  />
+</Field>

package/src/index.js

@@ -77,6 +77,7 @@ export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
+export { default as File } from "./Form/File.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"