@budibase/bbui 1.0.49 → 1.0.50-alpha.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.49",
+  "version": "1.0.50-alpha.3",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -79,8 +79,9 @@
     "@spectrum-css/underlay": "^2.0.9",
     "@spectrum-css/vars": "^3.0.1",
     "dayjs": "^1.10.4",
+    "easymde": "^2.16.1",
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "80ae9a30b112c1abf794bdad73da9257ba80d9d5"
+  "gitHead": "1d2fc68b20f8f39a44311f23966e412714e79e61"
 }

package/src/Form/Core/Dropzone.svelte

@@ -22,6 +22,7 @@
   export let error = null
   export let fileTags = []
   export let maximum = null
+  export let extensions = "*"
 
   const dispatch = createEventDispatcher()
   const imageExtensions = [
@@ -146,7 +147,9 @@
           <img alt="preview" src={selectedUrl} />
         {:else}
           <div class="placeholder">
-            <div class="extension">{selectedImage.extension}</div>
+            <div class="extension">
+              {selectedImage.name || "Unknown file"}
+            </div>
             <div>Preview not supported</div>
           </div>
         {/if}
@@ -207,6 +210,7 @@
           {disabled}
           type="file"
           multiple
+          accept={extensions}
           on:change={handleFile}
         />
         <svg
@@ -357,18 +361,21 @@
     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/RichTextField.svelte

@@ -0,0 +1,42 @@
+<script>
+  import MarkdownEditor from "../../Markdown/MarkdownEditor.svelte"
+
+  export let value = ""
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let height = null
+  export let id = null
+  export let fullScreenOffset = null
+  export let easyMDEOptions = null
+</script>
+
+<div class:error>
+  <MarkdownEditor
+    {value}
+    {placeholder}
+    {height}
+    {id}
+    {fullScreenOffset}
+    {disabled}
+    {easyMDEOptions}
+    on:change
+  />
+</div>
+
+<style>
+  .error :global(.EasyMDEContainer .editor-toolbar) {
+    border-top-color: var(--spectrum-semantic-negative-color-default);
+    border-left-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+  .error :global(.EasyMDEContainer .CodeMirror) {
+    border-bottom-color: var(--spectrum-semantic-negative-color-default);
+    border-left-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+  .error :global(.EasyMDEContainer .editor-preview-side) {
+    border-bottom-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+</style>

package/src/Form/Core/TextArea.svelte

@@ -13,6 +13,7 @@
     start: textarea.selectionStart,
     end: textarea.selectionEnd,
   })
+  export let align = null
 
   let focus = false
   let textarea
@@ -21,11 +22,23 @@
     dispatch("change", event.target.value)
     focus = false
   }
+
+  const getStyleString = (attribute, value) => {
+    if (!attribute || value == null) {
+      return ""
+    }
+    if (isNaN(value)) {
+      return `${attribute}:${value};`
+    }
+    return `${attribute}:${value}px;`
+  }
+
+  $: heightString = getStyleString("height", height)
+  $: minHeightString = getStyleString("min-height", minHeight)
 </script>
 
 <div
-  style={(height ? `height: ${height}px;` : "") +
-    (minHeight ? `min-height: ${minHeight}px` : "")}
+  style={`${heightString}${minHeightString}`}
   class="spectrum-Textfield spectrum-Textfield--multiline"
   class:is-invalid={!!error}
   class:is-disabled={disabled}
@@ -46,6 +59,7 @@
     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,6 +12,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let dataCy
+  export let align
 
   const dispatch = createEventDispatcher()
   let focus = false
@@ -92,8 +93,9 @@
     on:input={onInput}
     on:keyup={updateValueOnEnter}
     {type}
-    inputmode={type === "number" ? "decimal" : "text"}
     class="spectrum-Textfield-input"
+    style={align ? `text-align: ${align};` : ""}
+    inputmode={type === "number" ? "decimal" : "text"}
   />
 </div>
 

package/src/Form/Core/index.js

@@ -10,3 +10,4 @@ export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
 export { default as CoreStepper } from "./Stepper.svelte"
+export { default as CoreRichTextField } from "./RichTextField.svelte"

package/src/Form/Field.svelte

@@ -6,11 +6,12 @@
   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} />
+    <FieldLabel forId={id} {label} position={labelPosition} {tooltip} />
   {/if}
   <div class="spectrum-Form-itemField">
     <slot />

package/src/Form/FieldLabel.svelte

@@ -1,19 +1,24 @@
 <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>
 
-<label
-  for={forId}
-  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
->
-  {label || ""}
-</label>
+<TooltipWrapper {tooltip} size="S">
+  <label
+    for={forId}
+    class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
+  >
+    {label || ""}
+  </label>
+</TooltipWrapper>
 
 <style>
   label {

package/src/Form/RichTextField.svelte

@@ -0,0 +1,36 @@
+<script>
+  import Field from "./Field.svelte"
+  import RichTextField from "./Core/RichTextField.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let height = null
+  export let id = null
+  export let fullScreenOffset = null
+  export let easyMDEOptions = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <RichTextField
+    {error}
+    {disabled}
+    {value}
+    {placeholder}
+    {height}
+    {id}
+    {fullScreenOffset}
+    {easyMDEOptions}
+    on:change={onChange}
+  />
+</Field>

package/src/Form/Select.svelte

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

package/src/Label/Label.svelte

@@ -1,73 +1,20 @@
 <script>
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
-  import Icon from "../Icon/Icon.svelte"
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
 
   export let size = "M"
   export let tooltip = ""
-  export let showTooltip = false
 </script>
 
-{#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}
+<TooltipWrapper {tooltip} {size}>
   <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
     <slot />
   </label>
-{/if}
+</TooltipWrapper>
 
 <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/Markdown/MarkdownEditor.svelte

@@ -0,0 +1,60 @@
+<script>
+  import SpectrumMDE from "./SpectrumMDE.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let height = null
+  export let placeholder = null
+  export let id = null
+  export let fullScreenOffset = 0
+  export let disabled = false
+  export let easyMDEOptions
+
+  const dispatch = createEventDispatcher()
+
+  let latestValue
+  let mde
+
+  // Ensure the value is updated if the value prop changes outside the editor's
+  // control
+  $: checkValue(value)
+  $: mde?.codemirror.on("change", debouncedUpdate)
+
+  const checkValue = val => {
+    if (mde && val !== latestValue) {
+      mde.value(val)
+    }
+  }
+
+  const debounce = (fn, interval) => {
+    let timeout
+    return () => {
+      clearTimeout(timeout)
+      timeout = setTimeout(fn, interval)
+    }
+  }
+
+  const update = () => {
+    latestValue = mde.value()
+    dispatch("change", latestValue)
+  }
+
+  // Debounce the update function to avoid spamming it constantly
+  const debouncedUpdate = debounce(update, 250)
+</script>
+
+{#key height}
+  <SpectrumMDE
+    bind:mde
+    scroll={true}
+    {height}
+    {id}
+    {fullScreenOffset}
+    {disabled}
+    easyMDEOptions={{
+      initialValue: value,
+      placeholder,
+      ...easyMDEOptions,
+    }}
+  />
+{/key}

package/src/Markdown/MarkdownViewer.svelte

@@ -0,0 +1,70 @@
+<script>
+  import SpectrumMDE from "./SpectrumMDE.svelte"
+
+  export let value
+  export let height
+
+  let mde
+
+  // Keep the value up to date
+  $: mde && mde.value(value || "")
+  $: {
+    if (mde && !mde.isPreviewActive()) {
+      mde.togglePreview()
+    }
+  }
+</script>
+
+<div class="markdown-viewer" style="height:{height};">
+  <SpectrumMDE
+    bind:mde
+    scroll={false}
+    easyMDEOptions={{
+      initialValue: value,
+      toolbar: false,
+    }}
+  />
+</div>
+
+<style>
+  .markdown-viewer {
+    overflow: auto;
+  }
+  /* Remove padding, borders and background colors */
+  .markdown-viewer :global(.editor-preview) {
+    padding: 0;
+    border: none;
+    background: transparent;
+  }
+  .markdown-viewer :global(.CodeMirror) {
+    border: none;
+    background: transparent;
+    padding: 0;
+  }
+  .markdown-viewer :global(.EasyMDEContainer) {
+    background: transparent;
+  }
+  /* Hide the actual code editor */
+  .markdown-viewer :global(.CodeMirror-scroll) {
+    display: none;
+  }
+  /*Hide the scrollbar*/
+  .markdown-viewer :global(.CodeMirror-vscrollbar) {
+    display: none !important;
+  }
+  /*Position relatively so we only consume whatever space we need */
+  .markdown-viewer :global(.editor-preview-full) {
+    position: relative;
+  }
+  /* Remove margin on the first and last components to fully trim the preview */
+  .markdown-viewer :global(.editor-preview-full > :first-child) {
+    margin-top: 0;
+  }
+  .markdown-viewer :global(.editor-preview-full > :last-child) {
+    margin-bottom: 0;
+  }
+  /* Code blocks in preview */
+  .markdown-viewer :global(.editor-preview-full pre) {
+    background: var(--spectrum-global-color-gray-200);
+  }
+</style>

package/src/Markdown/SpectrumMDE.svelte

@@ -0,0 +1,184 @@
+<script>
+  import EasyMDE from "easymde"
+  import "easymde/dist/easymde.min.css"
+  import { onMount } from "svelte"
+
+  export let height = null
+  export let scroll = true
+  export let easyMDEOptions = null
+  export let mde = null
+  export let id = null
+  export let fullScreenOffset = null
+  export let disabled = false
+
+  let element
+
+  onMount(() => {
+    height = height || "200px"
+    mde = new EasyMDE({
+      element,
+      spellChecker: false,
+      status: false,
+      unorderedListStyle: "-",
+      maxHeight: scroll ? height : undefined,
+      minHeight: scroll ? undefined : height,
+      ...easyMDEOptions,
+    })
+
+    // Revert the editor when we unmount
+    return () => {
+      mde.toTextArea()
+    }
+  })
+
+  $: styleString = getStyleString(fullScreenOffset)
+
+  const getStyleString = offset => {
+    let string = ""
+    string += `--fullscreen-offset-x:${offset?.x || "0px"};`
+    string += `--fullscreen-offset-y:${offset?.y || "0px"};`
+    return string
+  }
+</script>
+
+<div class:disabled style={styleString}>
+  <textarea disabled {id} bind:this={element} />
+</div>
+
+<style>
+  /* Disabled styles */
+  .disabled :global(textarea) {
+    display: none;
+  }
+  .disabled :global(.CodeMirror-cursor) {
+    display: none;
+  }
+  .disabled :global(.EasyMDEContainer) {
+    pointer-events: none;
+  }
+  .disabled :global(.editor-toolbar button i) {
+    color: var(--spectrum-global-color-gray-400);
+  }
+  .disabled :global(.CodeMirror) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  /* Toolbar container */
+  :global(.EasyMDEContainer .editor-toolbar) {
+    background: var(--spectrum-global-color-gray-50);
+    border-top: 1px solid var(--spectrum-alias-border-color);
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-right: 1px solid var(--spectrum-alias-border-color);
+  }
+  /* Main code mirror instance and default color */
+  :global(.EasyMDEContainer .CodeMirror) {
+    border: 1px solid var(--spectrum-alias-border-color);
+    background: var(--spectrum-global-color-gray-50);
+    color: var(--spectrum-alias-text-color);
+  }
+  /* Toolbar button active state */
+  :global(.EasyMDEContainer .editor-toolbar button.active) {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  /* Toolbar button hover state */
+  :global(.EasyMDEContainer .editor-toolbar button:hover) {
+    background: var(--spectrum-global-color-gray-200);
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  /* Toolbar button color */
+  :global(.EasyMDEContainer .editor-toolbar button i) {
+    color: var(--spectrum-global-color-gray-800);
+  }
+  /* Separator between toolbar buttons*/
+  :global(.EasyMDEContainer .editor-toolbar i.separator) {
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+  /* Cursor */
+  :global(.EasyMDEContainer .CodeMirror-cursor) {
+    border-color: var(--spectrum-alias-text-color);
+  }
+  /* Text selections */
+  :global(.EasyMDEContainer .CodeMirror-selectedtext) {
+    background: var(--spectrum-global-color-gray-400) !important;
+  }
+  /* Background of lines containing selected text */
+  :global(.EasyMDEContainer .CodeMirror-selected) {
+    background: var(--spectrum-global-color-gray-400) !important;
+  }
+  /* Color of text for images and links */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-link) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  /* Color of URL for images and links */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-url) {
+    color: var(--spectrum-global-color-gray-500);
+  }
+  /* Full preview window */
+  :global(.EasyMDEContainer .editor-preview) {
+    background: var(--spectrum-global-color-gray-50);
+  }
+  /* Side by side preview window */
+  :global(.EasyMDEContainer .editor-preview) {
+    border: 1px solid var(--spectrum-alias-border-color);
+  }
+  /* Code blocks in editor */
+  :global(.EasyMDEContainer .cm-s-easymde .cm-comment) {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  /* Code blocks in preview */
+  :global(.EasyMDEContainer pre) {
+    background: var(--spectrum-global-color-gray-100);
+    padding: 4px;
+    border-radius: 4px;
+  }
+  :global(.EasyMDEContainer code) {
+    color: #e83e8c;
+  }
+  :global(.EasyMDEContainer pre code) {
+    color: var(--spectrum-alias-text-color);
+  }
+  /* Block quotes */
+  :global(.EasyMDEContainer blockquote) {
+    border-left: 4px solid var(--spectrum-global-color-gray-400);
+    color: var(--spectrum-global-color-gray-700);
+    margin-left: 0;
+    padding-left: 20px;
+  }
+  /* HR's */
+  :global(.EasyMDEContainer hr) {
+    background-color: var(--spectrum-global-color-gray-300);
+    border: none;
+    height: 2px;
+  }
+  /*  Tables */
+  :global(.EasyMDEContainer td, .EasyMDEContainer th) {
+    border-color: var(--spectrum-alias-border-color) !important;
+  }
+  /*  Links */
+  :global(.EasyMDEContainer a) {
+    color: var(--primaryColor);
+  }
+  :global(.EasyMDEContainer a:hover) {
+    color: var(--primaryColorHover);
+  }
+  /* Allow full screen offset */
+  :global(.EasyMDEContainer .editor-toolbar.fullscreen) {
+    left: var(--fullscreen-offset-x);
+    top: var(--fullscreen-offset-y);
+  }
+  :global(.EasyMDEContainer .CodeMirror-fullscreen) {
+    left: var(--fullscreen-offset-x);
+    top: calc(50px + var(--fullscreen-offset-y));
+  }
+
+  :global(.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-sided) {
+    width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
+  }
+
+  :global(.EasyMDEContainer .editor-preview-side) {
+    left: calc(50% + (var(--fullscreen-offset-x) / 2));
+    top: calc(50px + var(--fullscreen-offset-y));
+    width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
+  }
+</style>