Merge branch 'spectrum-bbui' into spectrum/kevins-bits-and-bobs
This commit is contained in:
Keviin Åberg Kultalahti
commit
51c7114bef
|
|
@ -46,9 +46,11 @@
|
|||
"@spectrum-css/checkbox": "^3.0.2",
|
||||
"@spectrum-css/dialog": "^3.0.1",
|
||||
"@spectrum-css/divider": "^1.0.1",
|
||||
"@spectrum-css/dropzone": "^3.0.2",
|
||||
"@spectrum-css/fieldgroup": "^3.0.2",
|
||||
"@spectrum-css/fieldlabel": "^3.0.1",
|
||||
"@spectrum-css/icon": "^3.0.1",
|
||||
"@spectrum-css/illustratedmessage": "^3.0.2",
|
||||
"@spectrum-css/inputgroup": "^3.0.2",
|
||||
"@spectrum-css/label": "^2.0.9",
|
||||
"@spectrum-css/link": "^3.1.1",
|
||||
|
|
|
|||
|
|
@ -1,295 +0,0 @@
|
|||
<script>
|
||||
import { Heading, Body, Button } from "../"
|
||||
import { FILE_TYPES } from "./fileTypes"
|
||||
|
||||
const BYTES_IN_KB = 1000
|
||||
const BYTES_IN_MB = 1000000
|
||||
|
||||
export let icons = {
|
||||
image: "fas fa-file-image",
|
||||
code: "fas fa-file-code",
|
||||
file: "fas fa-file",
|
||||
fileUpload: "fas fa-upload",
|
||||
}
|
||||
|
||||
export let files = []
|
||||
export let fileSizeLimit = BYTES_IN_MB * 20
|
||||
export let processFiles
|
||||
export let handleFileTooLarge
|
||||
|
||||
let selectedImageIdx = 0
|
||||
let fileDragged = false
|
||||
// Generate a random ID so that multiple dropzones on the page don't conflict
|
||||
let id = Math.random()
|
||||
.toString(36)
|
||||
.substring(7)
|
||||
|
||||
$: selectedImage = files ? files[selectedImageIdx] : null
|
||||
|
||||
function determineFileIcon(extension) {
|
||||
const ext = extension.toLowerCase()
|
||||
|
||||
if (FILE_TYPES.IMAGE.includes(ext)) return icons.image
|
||||
if (FILE_TYPES.CODE.includes(ext)) return icons.code
|
||||
|
||||
return icons.file
|
||||
}
|
||||
|
||||
async function processFileList(fileList) {
|
||||
if (Array.from(fileList).some(file => file.size >= fileSizeLimit)) {
|
||||
handleFileTooLarge(fileSizeLimit, file)
|
||||
return
|
||||
}
|
||||
|
||||
const processedFiles = await processFiles(fileList)
|
||||
|
||||
files = [...processedFiles, ...files]
|
||||
selectedImageIdx = 0
|
||||
}
|
||||
|
||||
async function removeFile() {
|
||||
files.splice(selectedImageIdx, 1)
|
||||
files = files
|
||||
selectedImageIdx = 0
|
||||
}
|
||||
|
||||
function navigateLeft() {
|
||||
selectedImageIdx -= 1
|
||||
}
|
||||
|
||||
function navigateRight() {
|
||||
selectedImageIdx += 1
|
||||
}
|
||||
|
||||
function handleFile(evt) {
|
||||
processFileList(evt.target.files)
|
||||
}
|
||||
|
||||
function handleDragOver(evt) {
|
||||
evt.preventDefault()
|
||||
fileDragged = true
|
||||
}
|
||||
|
||||
function handleDragLeave(evt) {
|
||||
evt.preventDefault()
|
||||
fileDragged = false
|
||||
}
|
||||
|
||||
function handleDrop(evt) {
|
||||
evt.preventDefault()
|
||||
processFileList(evt.dataTransfer.files)
|
||||
fileDragged = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="dropzone"
|
||||
on:dragover={handleDragOver}
|
||||
on:dragleave={handleDragLeave}
|
||||
on:dragenter={handleDragOver}
|
||||
on:drop={handleDrop}
|
||||
class:fileDragged>
|
||||
{#if selectedImage}
|
||||
<ul>
|
||||
<li>
|
||||
<header>
|
||||
<div>
|
||||
<i class={determineFileIcon(selectedImage.extension)} />
|
||||
<span class="filename">{selectedImage.name}</span>
|
||||
</div>
|
||||
<p>
|
||||
{#if selectedImage.size <= BYTES_IN_MB}
|
||||
{selectedImage.size / BYTES_IN_KB}KB
|
||||
{:else}{selectedImage.size / BYTES_IN_MB}MB{/if}
|
||||
</p>
|
||||
</header>
|
||||
<div class="delete-button" on:click={removeFile}>
|
||||
<i class="ri-close-circle-fill" />
|
||||
</div>
|
||||
{#if selectedImageIdx !== 0}
|
||||
<div class="nav left" on:click={navigateLeft}>
|
||||
<i class="ri-arrow-left-circle-fill" />
|
||||
</div>
|
||||
{/if}
|
||||
<img alt="preview" src={selectedImage.url} />
|
||||
{#if selectedImageIdx !== files.length - 1}
|
||||
<div class="nav right" on:click={navigateRight}>
|
||||
<i class="ri-arrow-right-circle-fill" />
|
||||
</div>
|
||||
{/if}
|
||||
</li>
|
||||
</ul>
|
||||
{/if}
|
||||
<i class={icons.fileUpload} />
|
||||
<input {id} type="file" multiple on:change={handleFile} {...$$restProps} />
|
||||
<i class="ri-upload-cloud-line" />
|
||||
<p class="drop">Drop your files here</p>
|
||||
<label for={id}>Select a file from your computer</label>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dropzone {
|
||||
padding: var(--spacing-l);
|
||||
border: 2px dashed var(--grey-4);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fileDragged {
|
||||
border: 2px dashed var(--grey-7);
|
||||
background: var(--blue-light);
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-s);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
color: var(--grey-7);
|
||||
text-rendering: optimizeLegibility;
|
||||
min-width: auto;
|
||||
outline: none;
|
||||
font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
|
||||
-webkit-box-align: center;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.drop {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--font-size-s);
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
div.nav {
|
||||
padding: var(--spacing-xs);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: var(--spacing-s);
|
||||
border-radius: 5px;
|
||||
transition: 0.2s transform;
|
||||
}
|
||||
|
||||
.nav:hover {
|
||||
cursor: pointer;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.left {
|
||||
left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.right {
|
||||
right: var(--spacing-s);
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
background: var(--grey-7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
box-shadow: 0 var(--spacing-s) 12px rgba(0, 0, 0, 0.15);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
i:hover {
|
||||
cursor: pointer;
|
||||
color: var(--background);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
color: var(--background);
|
||||
font-size: 2em;
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-s);
|
||||
list-style-type: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(255, 255, 255),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
width: 100%;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
header > div {
|
||||
color: var(--ink);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
margin-left: var(--spacing-m);
|
||||
width: 60%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.filename {
|
||||
overflow: hidden;
|
||||
margin-left: 5px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
header > p {
|
||||
color: var(--grey-5);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
position: absolute;
|
||||
top: var(--spacing-s);
|
||||
right: var(--spacing-s);
|
||||
padding: var(--spacing-s);
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.delete-button i {
|
||||
font-size: 2em;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.delete-button:hover {
|
||||
cursor: pointer;
|
||||
color: var(--red);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script>
|
||||
import { View } from "svench";
|
||||
import Dropzone from "./Dropzone.svelte";
|
||||
|
||||
async function processFiles(files) {
|
||||
console.log("Processing", files);
|
||||
return files;
|
||||
}
|
||||
|
||||
function handleFileTooLarge() {
|
||||
alert("File too large.");
|
||||
}
|
||||
</script>
|
||||
|
||||
<View name="dropzone">
|
||||
<Dropzone {processFiles} {handleFileTooLarge} />
|
||||
</View>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export const FILE_TYPES = {
|
||||
IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg", "svg"],
|
||||
CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
|
||||
DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
|
||||
}
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<script>
|
||||
import "@spectrum-css/dropzone/dist/index-vars.css"
|
||||
import "@spectrum-css/typography/dist/index-vars.css"
|
||||
import "@spectrum-css/illustratedmessage/dist/index-vars.css"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { generateID } from "../../utils/helpers"
|
||||
import Icon from "../../Icon/Icon.svelte"
|
||||
|
||||
const BYTES_IN_KB = 1000
|
||||
const BYTES_IN_MB = 1000000
|
||||
|
||||
export let value = []
|
||||
export let id = null
|
||||
export let disabled = false
|
||||
export let fileSizeLimit = BYTES_IN_MB * 20
|
||||
export let processFiles = null
|
||||
export let handleFileTooLarge = null
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const imageExtensions = [
|
||||
"png",
|
||||
"tiff",
|
||||
"gif",
|
||||
"raw",
|
||||
"jpg",
|
||||
"jpeg",
|
||||
"svg",
|
||||
"bmp",
|
||||
"jfif",
|
||||
]
|
||||
const onChange = event => {
|
||||
dispatch("change", event.target.checked)
|
||||
}
|
||||
|
||||
const fieldId = id || generateID()
|
||||
let selectedImageIdx = 0
|
||||
let fileDragged = false
|
||||
$: selectedImage = value?.[selectedImageIdx] ?? null
|
||||
$: fileCount = value?.length ?? 0
|
||||
$: isImage = imageExtensions.includes(selectedImage?.extension?.toLowerCase())
|
||||
|
||||
async function processFileList(fileList) {
|
||||
if (
|
||||
handleFileTooLarge &&
|
||||
Array.from(fileList).some(file => file.size >= fileSizeLimit)
|
||||
) {
|
||||
handleFileTooLarge(fileSizeLimit, value)
|
||||
return
|
||||
}
|
||||
if (processFiles) {
|
||||
const processedFiles = await processFiles(fileList)
|
||||
const newValue = [...value, ...processedFiles]
|
||||
dispatch("change", newValue)
|
||||
selectedImageIdx = newValue.length - 1
|
||||
}
|
||||
}
|
||||
|
||||
async function removeFile() {
|
||||
dispatch(
|
||||
"change",
|
||||
value.filter((x, idx) => idx !== selectedImageIdx)
|
||||
)
|
||||
selectedImageIdx = 0
|
||||
}
|
||||
|
||||
function navigateLeft() {
|
||||
selectedImageIdx -= 1
|
||||
}
|
||||
|
||||
function navigateRight() {
|
||||
selectedImageIdx += 1
|
||||
}
|
||||
|
||||
function handleFile(evt) {
|
||||
processFileList(evt.target.files)
|
||||
}
|
||||
|
||||
function handleDragOver(evt) {
|
||||
evt.preventDefault()
|
||||
fileDragged = true
|
||||
}
|
||||
|
||||
function handleDragLeave(evt) {
|
||||
evt.preventDefault()
|
||||
fileDragged = false
|
||||
}
|
||||
|
||||
function handleDrop(evt) {
|
||||
evt.preventDefault()
|
||||
processFileList(evt.dataTransfer.files)
|
||||
fileDragged = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
{#if selectedImage}
|
||||
<div class="gallery">
|
||||
<div class="title">
|
||||
<div class="filename">{selectedImage.name}</div>
|
||||
<div class="filesize">
|
||||
{#if selectedImage.size <= BYTES_IN_MB}
|
||||
{`${selectedImage.size / BYTES_IN_KB} KB`}
|
||||
{:else}{`${selectedImage.size / BYTES_IN_MB} MB`}{/if}
|
||||
</div>
|
||||
{#if !disabled}
|
||||
<div class="delete-button" on:click={removeFile}>
|
||||
<Icon name="Close" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isImage}
|
||||
<img alt="preview" src={selectedImage.url} />
|
||||
{:else}
|
||||
<div class="placeholder">
|
||||
<div class="extension">{selectedImage.extension}</div>
|
||||
<div>Preview not supported</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="nav left"
|
||||
class:visible={selectedImageIdx > 0}
|
||||
on:click={navigateLeft}>
|
||||
<Icon name="ChevronLeft" />
|
||||
</div>
|
||||
<div
|
||||
class="nav right"
|
||||
class:visible={selectedImageIdx < fileCount - 1}
|
||||
on:click={navigateRight}>
|
||||
<Icon name="ChevronRight" />
|
||||
</div>
|
||||
<div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class="spectrum-Dropzone"
|
||||
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" />
|
||||
<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">
|
||||
<label for={fieldId} class="spectrum-Link">Select a file to upload</label>
|
||||
<br />
|
||||
from your computer
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
--spectrum-dropzone-padding: var(--spectrum-global-dimension-size-400);
|
||||
--spectrum-heading-l-text-size: var(
|
||||
--spectrum-global-dimension-font-size-400
|
||||
);
|
||||
}
|
||||
.container * {
|
||||
font-family: "Inter", sans-serif !important;
|
||||
}
|
||||
|
||||
.gallery,
|
||||
.spectrum-Dropzone {
|
||||
user-select: none;
|
||||
}
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
color: var(--spectrum-alias-text-color);
|
||||
font-size: var(--spectrum-alias-item-text-size-m);
|
||||
box-sizing: border-box;
|
||||
border: var(--spectrum-alias-border-size-thin)
|
||||
var(--spectrum-alias-border-color) solid;
|
||||
border-radius: var(--spectrum-alias-border-radius-regular);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.placeholder,
|
||||
img {
|
||||
height: 120px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
margin: 20px 30px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
.filename {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.extension {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: var(--spacing-xs);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border-radius: 5px;
|
||||
display: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.nav.visible {
|
||||
display: block;
|
||||
}
|
||||
.nav:hover {
|
||||
cursor: pointer;
|
||||
color: var(--blue);
|
||||
}
|
||||
.left {
|
||||
left: 5px;
|
||||
}
|
||||
.right {
|
||||
right: 5px;
|
||||
}
|
||||
i {
|
||||
font-size: 2rem;
|
||||
color: var(--ink);
|
||||
}
|
||||
i:hover {
|
||||
cursor: pointer;
|
||||
color: var(--background);
|
||||
}
|
||||
.delete-button {
|
||||
transition: all 0.3s;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.delete-button i {
|
||||
font-size: 2em;
|
||||
}
|
||||
.delete-button:hover {
|
||||
cursor: pointer;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.spectrum-Dropzone.disabled {
|
||||
pointer-events: none;
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
}
|
||||
.disabled .spectrum-Heading--sizeL {
|
||||
color: var(--spectrum-alias-text-color-disabled);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,3 +8,4 @@ export { default as CoreCombobox } from "./Combobox.svelte"
|
|||
export { default as CoreSwitch } from "./Switch.svelte"
|
||||
export { default as CoreSearch } from "./Search.svelte"
|
||||
export { default as CoreDatePicker } from "./DatePicker.svelte"
|
||||
export { default as CoreDropzone } from "./Dropzone.svelte"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<script>
|
||||
import Field from "./Field.svelte"
|
||||
import CoreDropzone from "./Core/Dropzone.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let value = []
|
||||
export let label = null
|
||||
export let labelPosition = "above"
|
||||
export let disabled = false
|
||||
export let error = null
|
||||
export let fileSizeLimit = undefined
|
||||
export let processFiles = undefined
|
||||
export let handleFileTooLarge = undefined
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
const onChange = e => {
|
||||
value = e.detail
|
||||
dispatch("change", e.detail)
|
||||
}
|
||||
</script>
|
||||
|
||||
<Field {label} {labelPosition} {disabled} {error}>
|
||||
<CoreDropzone
|
||||
{error}
|
||||
{disabled}
|
||||
{value}
|
||||
{fileSizeLimit}
|
||||
{processFiles}
|
||||
{handleFileTooLarge}
|
||||
on:change={onChange} />
|
||||
</Field>
|
||||
|
|
@ -10,6 +10,8 @@
|
|||
export let m = false
|
||||
export let l = false
|
||||
export let xl = false
|
||||
export let hoverable = false
|
||||
export let disabled = false
|
||||
|
||||
$: rotation = directions.indexOf(direction) * 45
|
||||
$: useDefault = ![s, m, l, xl].includes(true)
|
||||
|
|
@ -17,6 +19,8 @@
|
|||
|
||||
<svg
|
||||
on:click
|
||||
class:hoverable
|
||||
class:disabled
|
||||
class:spectrum-Icon--sizeS={s}
|
||||
class:spectrum-Icon--sizeM={m || useDefault}
|
||||
class:spectrum-Icon--sizeL={l}
|
||||
|
|
@ -28,3 +32,19 @@
|
|||
style={`transform: rotate(${rotation}deg)`}>
|
||||
<use xlink:href="#spectrum-icon-18-{name}" />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg.hoverable {
|
||||
pointer-events: all;
|
||||
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
||||
}
|
||||
svg.hoverable:hover {
|
||||
color: var(--spectrum-alias-icon-color-selected);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg.disabled {
|
||||
color: var(--spectrum-global-color-gray-500) !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export { default as Input } from "./Form/Input.svelte"
|
|||
export { default as TextArea } from "./Form/TextArea.svelte"
|
||||
export { default as Select } from "./Form/Select.svelte"
|
||||
export { default as Combobox } from "./Form/Combobox.svelte"
|
||||
export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
|
||||
export { default as Dropzone } from "./Form/Dropzone.svelte"
|
||||
export { default as Drawer } from "./Drawer/Drawer.svelte"
|
||||
export { default as Avatar } from "./Avatar/Avatar.svelte"
|
||||
export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
|
||||
|
|
|
|||
|
|
@ -111,6 +111,11 @@
|
|||
dependencies:
|
||||
"@spectrum-css/vars" "^3.0.2"
|
||||
|
||||
"@spectrum-css/dropzone@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/dropzone/-/dropzone-3.0.2.tgz#34f137851054442b219fed7f32006b93fc5e0bcf"
|
||||
integrity sha512-BuBBzm5re6lM0AWgd6V+mI5eEGnnmFEtcFiJBEn9jYNEQYgflFhvnERUt89jMX5WmspiecwI2JBWJFrtFsOzug==
|
||||
|
||||
"@spectrum-css/fieldgroup@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.2.tgz#1c1afd3c444d8650fefac275dc66a7a913933846"
|
||||
|
|
@ -126,6 +131,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.2.tgz#327dcb95ab86368a00eb5a6d898c2c02e4ae04b3"
|
||||
integrity sha512-BdHoO2ttrbsj1+IfHmSCGNS0oEf8i2UW3agfOVtSlYOD+iGykupWwy8ANLB6p4GvjlR7YjPRGzDRGgmDwVqR0Q==
|
||||
|
||||
"@spectrum-css/illustratedmessage@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/illustratedmessage/-/illustratedmessage-3.0.2.tgz#6a480be98b027e050b086e7899e40d87adb0a8c0"
|
||||
integrity sha512-dqnE8X27bGcO0HN8+dYx8O4o0dNNIAqeivOzDHhe2El+V4dTzMrNIerF6G0NLm3GjVf6XliwmitsZK+K6FmbtA==
|
||||
|
||||
"@spectrum-css/inputgroup@^3.0.2":
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.2.tgz#f1b13603832cbd22394f3d898af13203961f8691"
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@
|
|||
border-radius: var(--border-radius-m);
|
||||
transition: 0.3s all ease;
|
||||
box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
|
||||
background-color: var(--ink);
|
||||
font-size: 16px;
|
||||
color: var(--background);
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
color: var(--grey-9);
|
||||
}
|
||||
.block.selected,
|
||||
.block:hover {
|
||||
|
|
@ -77,9 +77,9 @@
|
|||
header .label {
|
||||
font-size: 14px;
|
||||
padding: var(--spacing-s);
|
||||
color: var(--grey-8);
|
||||
border-radius: var(--border-radius-m);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-color: var(--grey-2);
|
||||
color: var(--grey-8);
|
||||
}
|
||||
header i {
|
||||
font-size: 20px;
|
||||
|
|
@ -93,22 +93,12 @@
|
|||
}
|
||||
|
||||
.ACTION {
|
||||
background-color: var(--background);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.TRIGGER {
|
||||
background-color: var(--ink);
|
||||
color: var(--background);
|
||||
}
|
||||
.TRIGGER header .label {
|
||||
background-color: var(--grey-9);
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
.LOGIC {
|
||||
background-color: var(--background);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -29,14 +29,13 @@
|
|||
onConfirm={createAutomation}
|
||||
disabled={!valid}>
|
||||
<Input bind:value={name} label="Name" />
|
||||
<div slot="footer">
|
||||
<a
|
||||
slot="footer"
|
||||
target="_blank"
|
||||
href="https://docs.budibase.com/automate/introduction-to-automate">
|
||||
<i class="ri-information-line" />
|
||||
<span>Learn about automations</span>
|
||||
</a>
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -49,26 +49,22 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="block-label">{block.name}</div>
|
||||
{#each inputs as [key, value]}
|
||||
<div class="fields">
|
||||
<div class="block-label">{block.name}</div>
|
||||
{#each inputs as [key, value]}
|
||||
<div class="block-field">
|
||||
<Label extraSmall grey>{value.title}</Label>
|
||||
<Label>{value.title}</Label>
|
||||
{#if value.type === 'string' && value.enum}
|
||||
<Select bind:value={block.inputs[key]} extraThin secondary>
|
||||
<option value="">Choose an option</option>
|
||||
{#each value.enum as option, idx}
|
||||
<option value={option}>
|
||||
{value.pretty ? value.pretty[idx] : option}
|
||||
</option>
|
||||
{/each}
|
||||
</Select>
|
||||
<Select
|
||||
bind:value={block.inputs[key]}
|
||||
options={value.enum}
|
||||
getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)} />
|
||||
{:else if value.customType === 'password'}
|
||||
<Input type="password" extraThin bind:value={block.inputs[key]} />
|
||||
<Input type="password" bind:value={block.inputs[key]} />
|
||||
{:else if value.customType === 'email'}
|
||||
<DrawerBindableInput
|
||||
panel={AutomationBindingPanel}
|
||||
type={'email'}
|
||||
extraThin
|
||||
value={block.inputs[key]}
|
||||
on:change={e => (block.inputs[key] = e.detail)}
|
||||
{bindings} />
|
||||
|
|
@ -84,27 +80,33 @@
|
|||
<DrawerBindableInput
|
||||
panel={AutomationBindingPanel}
|
||||
type={value.customType}
|
||||
extraThin
|
||||
value={block.inputs[key]}
|
||||
on:change={e => (block.inputs[key] = e.detail)}
|
||||
{bindings} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{#if stepId === 'WEBHOOK'}
|
||||
<Button secondary on:click={() => webhookModal.show()}>
|
||||
Set Up Webhook
|
||||
</Button>
|
||||
<Button secondary on:click={() => webhookModal.show()}>Set Up Webhook</Button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
|
||||
.block-field {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.block-label {
|
||||
font-weight: 500;
|
||||
font-size: var(--font-size-xs);
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,30 +19,24 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="block-field">
|
||||
<Select bind:value={value.tableId} extraThin secondary>
|
||||
<option value="">Choose an option</option>
|
||||
{#each $tables.list as table}
|
||||
<option value={table._id}>{table.name}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</div>
|
||||
<Select
|
||||
bind:value={value.tableId}
|
||||
options={$tables.list}
|
||||
getOptionLabel={table => table.name}
|
||||
getOptionValue={table => table._id} />
|
||||
|
||||
{#if schemaFields.length}
|
||||
<div class="schema-fields">
|
||||
{#each schemaFields as [field, schema]}
|
||||
{#if !schema.autocolumn}
|
||||
{#if schemaHasOptions(schema)}
|
||||
<Select label={field} extraThin secondary bind:value={value[field]}>
|
||||
<option value="">Choose an option</option>
|
||||
{#each schema.constraints.inclusion as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
<Select
|
||||
label={field}
|
||||
bind:value={value[field]}
|
||||
options={schema.constraints.inclusion} />
|
||||
{:else if schema.type === 'string' || schema.type === 'number'}
|
||||
<DrawerBindableInput
|
||||
panel={AutomationBindingPanel}
|
||||
extraThin
|
||||
value={value[field]}
|
||||
on:change={e => (value[field] = e.detail)}
|
||||
label={field}
|
||||
|
|
@ -57,8 +51,8 @@
|
|||
<style>
|
||||
.schema-fields {
|
||||
display: grid;
|
||||
grid-gap: var(--spacing-xl);
|
||||
margin-top: var(--spacing-xl);
|
||||
grid-gap: var(--spacing-s);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
.schema-fields :global(label) {
|
||||
text-transform: capitalize;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,24 @@
|
|||
name,
|
||||
type,
|
||||
}))
|
||||
const typeOptions = [
|
||||
{
|
||||
label: "Text",
|
||||
value: "string",
|
||||
},
|
||||
{
|
||||
label: "Number",
|
||||
value: "number",
|
||||
},
|
||||
{
|
||||
label: "Boolean",
|
||||
value: "boolean",
|
||||
},
|
||||
{
|
||||
label: "DateTime",
|
||||
value: "datetime",
|
||||
},
|
||||
]
|
||||
|
||||
function addField() {
|
||||
const newValue = { ...value }
|
||||
|
|
@ -22,7 +40,7 @@
|
|||
const fieldNameChanged = originalName => e => {
|
||||
// reconstruct using fieldsArray, so field order is preserved
|
||||
let entries = [...fieldsArray]
|
||||
const newName = e.target.value
|
||||
const newName = e.detail
|
||||
if (newName) {
|
||||
entries.find(f => f.name === originalName).name = newName
|
||||
} else {
|
||||
|
|
@ -46,16 +64,9 @@
|
|||
placeholder="Enter field name"
|
||||
on:change={fieldNameChanged(field.name)} />
|
||||
<Select
|
||||
secondary
|
||||
extraThin
|
||||
value={field.type}
|
||||
on:blur={e => (value[field.name] = e.target.value)}>
|
||||
<option>string</option>
|
||||
<option>number</option>
|
||||
<option>boolean</option>
|
||||
<option>datetime</option>
|
||||
</Select>
|
||||
|
||||
on:change={e => (value[field.name] = e.target.value)}
|
||||
options={typeOptions} />
|
||||
<i
|
||||
class="remove-field ri-delete-bin-line"
|
||||
on:click={() => removeField(field.name)} />
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<script>
|
||||
import { automationStore } from "builderStore"
|
||||
import { database } from "stores/backend"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { notifications, Icon, Button, Modal } from "@budibase/bbui"
|
||||
import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
|
||||
import { Button, Modal } from "@budibase/bbui"
|
||||
import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"
|
||||
|
||||
let webhookModal
|
||||
|
|
@ -30,7 +29,9 @@
|
|||
automation: $automationStore.selectedAutomation.automation,
|
||||
})
|
||||
if (result.status === 200) {
|
||||
notifications.success(`Automation ${automation.name} triggered successfully.`)
|
||||
notifications.success(
|
||||
`Automation ${automation.name} triggered successfully.`
|
||||
)
|
||||
} else {
|
||||
notifications.error(`Failed to trigger automation ${automation.name}.`)
|
||||
}
|
||||
|
|
@ -47,17 +48,19 @@
|
|||
|
||||
<div class="title">
|
||||
<h1>Setup</h1>
|
||||
<i
|
||||
class:highlighted={automationLive}
|
||||
class:hoverable={automationLive}
|
||||
on:click={() => setAutomationLive(false)}
|
||||
class="ri-stop-circle-fill" />
|
||||
<i
|
||||
class:highlighted={!automationLive}
|
||||
class:hoverable={!automationLive}
|
||||
<Icon
|
||||
l
|
||||
disabled={!automationLive}
|
||||
hoverable={automationLive}
|
||||
name="PauseCircle"
|
||||
on:click={() => setAutomationLive(false)} />
|
||||
<Icon
|
||||
l
|
||||
name="PlayCircle"
|
||||
disabled={automationLive}
|
||||
hoverable={!automationLive}
|
||||
data-cy="activate-automation"
|
||||
on:click={() => setAutomationLive(true)}
|
||||
class="ri-play-circle-fill" />
|
||||
on:click={() => setAutomationLive(true)} />
|
||||
</div>
|
||||
{#if $automationStore.selectedBlock}
|
||||
<AutomationBlockSetup
|
||||
|
|
@ -92,29 +95,10 @@
|
|||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.title i {
|
||||
font-size: 20px;
|
||||
color: var(--grey-5);
|
||||
}
|
||||
.title i.highlighted {
|
||||
color: var(--ink);
|
||||
}
|
||||
.title i.hoverable:hover {
|
||||
cursor: pointer;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.block-label {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: stretch;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,8 @@
|
|||
export let value
|
||||
</script>
|
||||
|
||||
<div class="block-field">
|
||||
<Select bind:value secondary extraThin>
|
||||
<option value="">Choose an option</option>
|
||||
{#each $tables.list as table}
|
||||
<option value={table._id}>{table.name}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</div>
|
||||
<Select
|
||||
bind:value
|
||||
options={$tables.list}
|
||||
getOptionLabel={table => table.name}
|
||||
getOptionValue={table => table._id} />
|
||||
|
|
|
|||
|
|
@ -58,12 +58,13 @@
|
|||
bindable value{propCount > 1 ? 's' : ''}.
|
||||
</p>
|
||||
{/if}
|
||||
<div slot="footer">
|
||||
<a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
|
||||
<a
|
||||
slot="footer"
|
||||
target="_blank"
|
||||
href="https://docs.budibase.com/automate/steps/triggers">
|
||||
<i class="ri-information-line" />
|
||||
<span>Learn about webhooks</span>
|
||||
</a>
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script>
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { Input } from "@budibase/bbui"
|
||||
import { Input, Icon, notifications } from "@budibase/bbui"
|
||||
import { store, hostingStore } from "builderStore"
|
||||
|
||||
export let value
|
||||
|
|
@ -29,10 +28,10 @@
|
|||
</script>
|
||||
|
||||
<div>
|
||||
<Input disabled="true" thin value={fullWebhookURL(value)} />
|
||||
<span on:click={() => copyToClipboard()}>
|
||||
<i class="ri-clipboard-line copy-icon" />
|
||||
</span>
|
||||
<Input readonly value={fullWebhookURL(value)} />
|
||||
<div class="icon" on:click={() => copyToClipboard()}>
|
||||
<Icon s name="Copy" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
@ -40,26 +39,31 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
div :global(input:disabled) {
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
span {
|
||||
.icon {
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
position: absolute;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: var(--background);
|
||||
right: var(--spacing-s);
|
||||
bottom: 9px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid var(--spectrum-alias-border-color);
|
||||
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
|
||||
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
|
||||
width: 31px;
|
||||
color: var(--spectrum-alias-text-color);
|
||||
background-color: var(--spectrum-global-color-gray-75);
|
||||
transition: background-color
|
||||
var(--spectrum-global-animation-duration-100, 130ms),
|
||||
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
|
||||
border-color var(--spectrum-global-animation-duration-100, 130ms);
|
||||
height: calc(var(--spectrum-alias-item-height-m) - 2px);
|
||||
}
|
||||
|
||||
span:hover {
|
||||
background-color: var(--grey-3);
|
||||
.icon:hover {
|
||||
cursor: pointer;
|
||||
color: var(--spectrum-alias-text-color-hover);
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
border-color: var(--spectrum-alias-border-color-hover);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
<script>
|
||||
import {
|
||||
Input,
|
||||
Select,
|
||||
Label,
|
||||
DatePicker,
|
||||
Toggle,
|
||||
TextArea,
|
||||
} from "@budibase/bbui"
|
||||
import { Input, Select, DatePicker, Toggle, TextArea } from "@budibase/bbui"
|
||||
import Dropzone from "components/common/Dropzone.svelte"
|
||||
import { capitalise } from "../../../helpers"
|
||||
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
||||
|
|
@ -29,16 +22,11 @@
|
|||
{:else if type === 'datetime'}
|
||||
<DatePicker {label} bind:value />
|
||||
{:else if type === 'attachment'}
|
||||
<div>
|
||||
<Label extraSmall grey forAttr={'dropzone-label'}>{label}</Label>
|
||||
<Dropzone bind:files={value} />
|
||||
</div>
|
||||
<Dropzone {label} bind:value />
|
||||
{:else if type === 'boolean'}
|
||||
<Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
|
||||
{:else if type === 'link'}
|
||||
<div>
|
||||
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
|
||||
</div>
|
||||
{:else if type === 'longform'}
|
||||
<TextArea {label} bind:value />
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
} from "builderStore/dataBinding"
|
||||
import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let panel = BindingPanel
|
||||
export let value = ""
|
||||
|
|
@ -14,9 +13,10 @@
|
|||
export let thin = true
|
||||
export let title = "Bindings"
|
||||
export let placeholder
|
||||
export let label
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
let bindingDrawer
|
||||
|
||||
$: tempValue = value
|
||||
$: readableValue = runtimeToReadableBinding(bindings, value)
|
||||
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
|
||||
<div class="control">
|
||||
<Input
|
||||
{label}
|
||||
value={readableValue}
|
||||
on:change={event => onChange(event.detail)}
|
||||
{placeholder} />
|
||||
|
|
@ -66,7 +67,6 @@
|
|||
|
||||
.icon {
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
|
|
@ -84,6 +84,7 @@
|
|||
var(--spectrum-global-animation-duration-100, 130ms),
|
||||
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
|
||||
border-color var(--spectrum-global-animation-duration-100, 130ms);
|
||||
height: calc(var(--spectrum-alias-item-height-m) - 2px);
|
||||
}
|
||||
.icon:hover {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import { Dropzone } from "@budibase/bbui"
|
||||
import { Dropzone, notifications } from "@budibase/bbui"
|
||||
import api from "builderStore/api"
|
||||
|
||||
export let files = []
|
||||
export let value = []
|
||||
export let label
|
||||
|
||||
const BYTES_IN_MB = 1000000
|
||||
|
||||
|
|
@ -24,4 +24,9 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Dropzone bind:files {processFiles} {handleFileTooLarge} />
|
||||
<Dropzone
|
||||
bind:value
|
||||
{label}
|
||||
{...$$restProps}
|
||||
{processFiles}
|
||||
{handleFileTooLarge} />
|
||||
|
|
|
|||
|
|
@ -37,12 +37,13 @@
|
|||
{#if webhookUrls.length === 0}
|
||||
<h5>No webhooks found.</h5>
|
||||
{/if}
|
||||
<div slot="footer">
|
||||
<a target="_blank" href="https://docs.budibase.com/automate/steps/triggers">
|
||||
<a
|
||||
slot="footer"
|
||||
target="_blank"
|
||||
href="https://docs.budibase.com/automate/steps/triggers">
|
||||
<i class="ri-information-line" />
|
||||
<span>Learn about webhooks</span>
|
||||
</a>
|
||||
</div>
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<slot />
|
||||
</div>
|
||||
{#if $automationStore.selectedAutomation}
|
||||
<div class="nav setup">
|
||||
<div class="setup">
|
||||
<SetupPanel />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -45,4 +45,14 @@
|
|||
gap: var(--spacing-l);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setup {
|
||||
padding: var(--spectrum-global-dimension-size-200);
|
||||
border-left: var(--border-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-l);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,127 +0,0 @@
|
|||
<script>
|
||||
import { Modal, ModalContent } from "@budibase/bbui"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
import { FILE_TYPES } from "./fileTypes"
|
||||
|
||||
export let files = []
|
||||
export let height = "70"
|
||||
export let width = "70"
|
||||
|
||||
let modal
|
||||
let currentFile
|
||||
|
||||
const openModal = file => {
|
||||
currentFile = file
|
||||
modal.show()
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
dispatch("delete", currentFile)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="file-list">
|
||||
{#each files as file}
|
||||
<div class="file-container">
|
||||
<a href={file.url} target="_blank" class="file">
|
||||
{#if FILE_TYPES.IMAGE.includes(file.extension.toLowerCase())}
|
||||
<img {width} {height} src={file.url} alt="preview of {file.name}" />
|
||||
{:else}<i class="far fa-file" />{/if}
|
||||
</a>
|
||||
<span>{file.name}</span>
|
||||
<div class="button-placement">
|
||||
<button primary on:click|stopPropagation={() => openModal(file)}>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<Modal bind:this={modal}>
|
||||
<ModalContent
|
||||
title="Confirm File Deletion"
|
||||
confirmText="Delete"
|
||||
onConfirm={handleConfirm}>
|
||||
<span>Are you sure you want to delete this attachment?</span>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.file-list {
|
||||
display: grid;
|
||||
justify-content: start;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: var(--spacing-m);
|
||||
grid-template-columns: repeat(auto-fill, 1fr);
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.file-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
font-size: var(--font-size-m);
|
||||
line-height: 110%;
|
||||
z-index: 1000;
|
||||
top: 4px;
|
||||
left: 50px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border: 0;
|
||||
color: white;
|
||||
border-radius: var(--border-radius-xl);
|
||||
background: black;
|
||||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--grey-8);
|
||||
cursor: pointer;
|
||||
}
|
||||
button:active {
|
||||
background-color: var(--grey-9);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file {
|
||||
position: relative;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
border: 2px dashed var(--grey-7);
|
||||
padding: var(--spacing-xs);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<script>
|
||||
import { Dropzone } from "@budibase/bbui"
|
||||
import { getContext } from "svelte"
|
||||
|
||||
const { API } = getContext("sdk")
|
||||
const BYTES_IN_MB = 1000000
|
||||
|
||||
export let files = []
|
||||
|
||||
function handleFileTooLarge(fileSizeLimit) {
|
||||
alert(
|
||||
`Files cannot exceed ${fileSizeLimit /
|
||||
BYTES_IN_MB}MB. Please try again with smaller files.`
|
||||
)
|
||||
}
|
||||
|
||||
async function processFiles(fileList) {
|
||||
let data = new FormData()
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
data.append("file", fileList[i])
|
||||
}
|
||||
return await API.uploadAttachment(data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dropzone bind:files {processFiles} {handleFileTooLarge} />
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export const FILE_TYPES = {
|
||||
IMAGE: ["png", "tiff", "gif", "raw", "jpg", "jpeg"],
|
||||
CODE: ["js", "rs", "py", "java", "rb", "hs", "yml"],
|
||||
DOCUMENT: ["odf", "docx", "doc", "pdf", "csv"],
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
import Field from "./Field.svelte"
|
||||
import Dropzone from "../attachments/Dropzone.svelte"
|
||||
import { onMount } from "svelte"
|
||||
import { CoreDropzone } from "@budibase/bbui"
|
||||
import { getContext } from "svelte"
|
||||
|
||||
export let field
|
||||
export let label
|
||||
|
|
@ -10,16 +10,25 @@
|
|||
let fieldState
|
||||
let fieldApi
|
||||
|
||||
// Update form value from bound value after we've mounted
|
||||
let value
|
||||
let mounted = false
|
||||
$: mounted && fieldApi?.setValue(value)
|
||||
const { API, notifications } = getContext("sdk")
|
||||
const BYTES_IN_MB = 1000000
|
||||
|
||||
// Get the fields initial value after initialising
|
||||
onMount(() => {
|
||||
value = $fieldState?.value
|
||||
mounted = true
|
||||
})
|
||||
export let files = []
|
||||
|
||||
const handleFileTooLarge = fileSizeLimit => {
|
||||
notifications.warning(
|
||||
`Files cannot exceed ${fileSizeLimit /
|
||||
BYTES_IN_MB} MB. Please try again with smaller files.`
|
||||
)
|
||||
}
|
||||
|
||||
const processFiles = async fileList => {
|
||||
let data = new FormData()
|
||||
for (let i = 0; i < fileList.length; i++) {
|
||||
data.append("file", fileList[i])
|
||||
}
|
||||
return await API.uploadAttachment(data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<Field
|
||||
|
|
@ -30,16 +39,12 @@
|
|||
bind:fieldState
|
||||
bind:fieldApi
|
||||
defaultValue={[]}>
|
||||
{#if mounted}
|
||||
<div class:disabled={$fieldState.disabled}>
|
||||
<Dropzone bind:files={value} />
|
||||
</div>
|
||||
{#if $fieldState}
|
||||
<CoreDropzone
|
||||
value={$fieldState.value}
|
||||
disabled={$fieldState.disabled}
|
||||
on:change={e => fieldApi.setValue(e.detail)}
|
||||
{processFiles}
|
||||
{handleFileTooLarge} />
|
||||
{/if}
|
||||
</Field>
|
||||
|
||||
<style>
|
||||
div.disabled :global(> *) {
|
||||
background-color: var(--spectrum-global-color-gray-200) !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue