@budibase/bbui 2.4.42 → 2.4.44-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bbui.es.js +3 -3
- package/dist/bbui.es.js.map +1 -1
- package/package.json +4 -4
- package/src/ActionButton/ActionButton.svelte +3 -0
- package/src/Actions/position_dropdown.js +1 -0
- package/src/Drawer/Drawer.svelte +1 -1
- package/src/Form/Core/File.svelte +115 -0
- package/src/Form/Core/index.js +1 -0
- package/src/Form/File.svelte +37 -0
- package/src/Input/CopyInput.svelte +59 -0
- package/src/Modal/Modal.svelte +9 -1
- package/src/index.js +2 -1
- package/src/Skeleton/Skeleton.svelte +0 -56
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@budibase/bbui",
|
|
3
3
|
"description": "A UI solution used in the different Budibase projects.",
|
|
4
|
-
"version": "2.4.
|
|
4
|
+
"version": "2.4.44-alpha.0",
|
|
5
5
|
"license": "MPL-2.0",
|
|
6
6
|
"svelte": "src/index.js",
|
|
7
7
|
"module": "dist/bbui.es.js",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@adobe/spectrum-css-workflow-icons": "1.2.1",
|
|
41
|
-
"@budibase/shared-core": "
|
|
42
|
-
"@budibase/string-templates": "
|
|
41
|
+
"@budibase/shared-core": "2.4.44-alpha.0",
|
|
42
|
+
"@budibase/string-templates": "2.4.44-alpha.0",
|
|
43
43
|
"@spectrum-css/accordion": "3.0.24",
|
|
44
44
|
"@spectrum-css/actionbutton": "1.0.1",
|
|
45
45
|
"@spectrum-css/actiongroup": "1.0.1",
|
|
@@ -90,5 +90,5 @@
|
|
|
90
90
|
"resolutions": {
|
|
91
91
|
"loader-utils": "1.4.1"
|
|
92
92
|
},
|
|
93
|
-
"gitHead": "
|
|
93
|
+
"gitHead": "0d86661d011b4ab8d0999712e10ae0a45c2ab64c"
|
|
94
94
|
}
|
|
@@ -113,6 +113,9 @@
|
|
|
113
113
|
.spectrum-ActionButton--quiet {
|
|
114
114
|
padding: 0 8px;
|
|
115
115
|
}
|
|
116
|
+
.spectrum-ActionButton--quiet.is-selected {
|
|
117
|
+
color: var(--spectrum-global-color-gray-900);
|
|
118
|
+
}
|
|
116
119
|
.is-selected:not(.emphasized) .spectrum-Icon {
|
|
117
120
|
color: var(--spectrum-global-color-gray-900);
|
|
118
121
|
}
|
|
@@ -31,6 +31,7 @@ export default function positionDropdown(element, opts) {
|
|
|
31
31
|
styles.top = anchorBounds.top
|
|
32
32
|
} else if (window.innerHeight - anchorBounds.bottom < 100) {
|
|
33
33
|
styles.top = anchorBounds.top - elementBounds.height - offset
|
|
34
|
+
styles.maxHeight = 240
|
|
34
35
|
} else {
|
|
35
36
|
styles.top = anchorBounds.bottom + offset
|
|
36
37
|
styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
|
package/src/Drawer/Drawer.svelte
CHANGED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import ActionButton from "../../ActionButton/ActionButton.svelte"
|
|
3
|
+
import { uuid } from "../../helpers"
|
|
4
|
+
import Icon from "../../Icon/Icon.svelte"
|
|
5
|
+
import { createEventDispatcher } from "svelte"
|
|
6
|
+
|
|
7
|
+
export let value = null
|
|
8
|
+
export let title = "Upload file"
|
|
9
|
+
export let disabled = false
|
|
10
|
+
export let allowClear = null
|
|
11
|
+
export let extensions = null
|
|
12
|
+
export let handleFileTooLarge = null
|
|
13
|
+
export let fileSizeLimit = BYTES_IN_MB * 20
|
|
14
|
+
export let id = null
|
|
15
|
+
export let previewUrl = null
|
|
16
|
+
|
|
17
|
+
const fieldId = id || uuid()
|
|
18
|
+
const BYTES_IN_KB = 1000
|
|
19
|
+
const BYTES_IN_MB = 1000000
|
|
20
|
+
|
|
21
|
+
const dispatch = createEventDispatcher()
|
|
22
|
+
|
|
23
|
+
let fileInput
|
|
24
|
+
|
|
25
|
+
$: inputAccept = Array.isArray(extensions) ? extensions.join(",") : "*"
|
|
26
|
+
|
|
27
|
+
async function processFile(targetFile) {
|
|
28
|
+
if (handleFileTooLarge && targetFile?.size >= fileSizeLimit) {
|
|
29
|
+
handleFileTooLarge(targetFile)
|
|
30
|
+
return
|
|
31
|
+
}
|
|
32
|
+
dispatch("change", targetFile)
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function handleFile(evt) {
|
|
36
|
+
processFile(evt.target.files[0])
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function clearFile() {
|
|
40
|
+
dispatch("change", null)
|
|
41
|
+
}
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<input
|
|
45
|
+
id={fieldId}
|
|
46
|
+
{disabled}
|
|
47
|
+
type="file"
|
|
48
|
+
accept={inputAccept}
|
|
49
|
+
bind:this={fileInput}
|
|
50
|
+
on:change={handleFile}
|
|
51
|
+
/>
|
|
52
|
+
|
|
53
|
+
<div class="field">
|
|
54
|
+
{#if value}
|
|
55
|
+
<div class="file-view">
|
|
56
|
+
{#if previewUrl}
|
|
57
|
+
<img class="preview" alt="" src={previewUrl} />
|
|
58
|
+
{/if}
|
|
59
|
+
<div class="filename">{value.name}</div>
|
|
60
|
+
{#if value.size}
|
|
61
|
+
<div class="filesize">
|
|
62
|
+
{#if value.size <= BYTES_IN_MB}
|
|
63
|
+
{`${value.size / BYTES_IN_KB} KB`}
|
|
64
|
+
{:else}
|
|
65
|
+
{`${value.size / BYTES_IN_MB} MB`}
|
|
66
|
+
{/if}
|
|
67
|
+
</div>
|
|
68
|
+
{/if}
|
|
69
|
+
{#if !disabled || (allowClear === true && disabled)}
|
|
70
|
+
<div class="delete-button" on:click={clearFile}>
|
|
71
|
+
<Icon name="Close" size="XS" />
|
|
72
|
+
</div>
|
|
73
|
+
{/if}
|
|
74
|
+
</div>
|
|
75
|
+
{/if}
|
|
76
|
+
<ActionButton {disabled} on:click={fileInput.click()}>{title}</ActionButton>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<style>
|
|
80
|
+
.field {
|
|
81
|
+
display: flex;
|
|
82
|
+
gap: var(--spacing-m);
|
|
83
|
+
}
|
|
84
|
+
.file-view {
|
|
85
|
+
display: flex;
|
|
86
|
+
gap: var(--spacing-l);
|
|
87
|
+
align-items: center;
|
|
88
|
+
border: 1px solid var(--spectrum-alias-border-color);
|
|
89
|
+
border-radius: var(--spectrum-global-dimension-size-50);
|
|
90
|
+
padding: 0px var(--spectrum-alias-item-padding-m);
|
|
91
|
+
}
|
|
92
|
+
input[type="file"] {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
.delete-button {
|
|
96
|
+
transition: all 0.3s;
|
|
97
|
+
margin-left: 10px;
|
|
98
|
+
display: flex;
|
|
99
|
+
}
|
|
100
|
+
.delete-button:hover {
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
color: var(--red);
|
|
103
|
+
}
|
|
104
|
+
.filesize {
|
|
105
|
+
white-space: nowrap;
|
|
106
|
+
}
|
|
107
|
+
.filename {
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
white-space: nowrap;
|
|
110
|
+
text-overflow: ellipsis;
|
|
111
|
+
}
|
|
112
|
+
.preview {
|
|
113
|
+
height: 1.5em;
|
|
114
|
+
}
|
|
115
|
+
</style>
|
package/src/Form/Core/index.js
CHANGED
|
@@ -13,3 +13,4 @@ export { default as CoreDropzone } from "./Dropzone.svelte"
|
|
|
13
13
|
export { default as CoreStepper } from "./Stepper.svelte"
|
|
14
14
|
export { default as CoreRichTextField } from "./RichTextField.svelte"
|
|
15
15
|
export { default as CoreSlider } from "./Slider.svelte"
|
|
16
|
+
export { default as CoreFile } from "./File.svelte"
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import Field from "./Field.svelte"
|
|
3
|
+
import { CoreFile } from "./Core"
|
|
4
|
+
import { createEventDispatcher } from "svelte"
|
|
5
|
+
|
|
6
|
+
export let label = null
|
|
7
|
+
export let labelPosition = "above"
|
|
8
|
+
export let disabled = false
|
|
9
|
+
export let allowClear = null
|
|
10
|
+
export let handleFileTooLarge = () => {}
|
|
11
|
+
export let previewUrl = null
|
|
12
|
+
export let extensions = null
|
|
13
|
+
export let error = null
|
|
14
|
+
export let title = null
|
|
15
|
+
export let value = null
|
|
16
|
+
export let tooltip = null
|
|
17
|
+
|
|
18
|
+
const dispatch = createEventDispatcher()
|
|
19
|
+
const onChange = e => {
|
|
20
|
+
value = e.detail
|
|
21
|
+
dispatch("change", e.detail)
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<Field {label} {labelPosition} {error} {tooltip}>
|
|
26
|
+
<CoreFile
|
|
27
|
+
{error}
|
|
28
|
+
{disabled}
|
|
29
|
+
{allowClear}
|
|
30
|
+
{title}
|
|
31
|
+
{value}
|
|
32
|
+
{previewUrl}
|
|
33
|
+
{handleFileTooLarge}
|
|
34
|
+
{extensions}
|
|
35
|
+
on:change={onChange}
|
|
36
|
+
/>
|
|
37
|
+
</Field>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import Input from "../Form/Input.svelte"
|
|
3
|
+
import Icon from "../Icon/Icon.svelte"
|
|
4
|
+
import { notifications } from "../Stores/notifications"
|
|
5
|
+
|
|
6
|
+
export let label = null
|
|
7
|
+
export let value
|
|
8
|
+
|
|
9
|
+
const copyToClipboard = val => {
|
|
10
|
+
const dummy = document.createElement("textarea")
|
|
11
|
+
document.body.appendChild(dummy)
|
|
12
|
+
dummy.value = val
|
|
13
|
+
dummy.select()
|
|
14
|
+
document.execCommand("copy")
|
|
15
|
+
document.body.removeChild(dummy)
|
|
16
|
+
notifications.success(`Copied to clipboard`)
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<div>
|
|
21
|
+
<Input readonly {value} {label} />
|
|
22
|
+
<div class="icon" on:click={() => copyToClipboard(value)}>
|
|
23
|
+
<Icon size="S" name="Copy" />
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
div {
|
|
29
|
+
position: relative;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.icon {
|
|
33
|
+
right: 1px;
|
|
34
|
+
bottom: 1px;
|
|
35
|
+
position: absolute;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
align-items: center;
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: row;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
border-left: 1px solid var(--spectrum-alias-border-color);
|
|
42
|
+
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
|
|
43
|
+
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
|
|
44
|
+
width: 31px;
|
|
45
|
+
color: var(--spectrum-alias-text-color);
|
|
46
|
+
background-color: var(--spectrum-global-color-gray-75);
|
|
47
|
+
transition: background-color
|
|
48
|
+
var(--spectrum-global-animation-duration-100, 130ms),
|
|
49
|
+
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
|
|
50
|
+
border-color var(--spectrum-global-animation-duration-100, 130ms);
|
|
51
|
+
height: calc(var(--spectrum-alias-item-height-m) - 2px);
|
|
52
|
+
}
|
|
53
|
+
.icon:hover {
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
color: var(--spectrum-alias-text-color-hover);
|
|
56
|
+
background-color: var(--spectrum-global-color-gray-50);
|
|
57
|
+
border-color: var(--spectrum-alias-border-color-hover);
|
|
58
|
+
}
|
|
59
|
+
</style>
|
package/src/Modal/Modal.svelte
CHANGED
|
@@ -29,6 +29,14 @@
|
|
|
29
29
|
visible = false
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
export function toggle() {
|
|
33
|
+
if (visible) {
|
|
34
|
+
hide()
|
|
35
|
+
} else {
|
|
36
|
+
show()
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
32
40
|
export function cancel() {
|
|
33
41
|
if (!visible) {
|
|
34
42
|
return
|
|
@@ -61,7 +69,7 @@
|
|
|
61
69
|
}
|
|
62
70
|
}
|
|
63
71
|
|
|
64
|
-
setContext(Context.Modal, { show, hide, cancel })
|
|
72
|
+
setContext(Context.Modal, { show, hide, toggle, cancel })
|
|
65
73
|
|
|
66
74
|
onMount(() => {
|
|
67
75
|
document.addEventListener("keydown", handleKey)
|
package/src/index.js
CHANGED
|
@@ -4,7 +4,6 @@ import "./bbui.css"
|
|
|
4
4
|
import "@spectrum-css/icon/dist/index-vars.css"
|
|
5
5
|
|
|
6
6
|
// Components
|
|
7
|
-
export { default as Skeleton } from "./Skeleton/Skeleton.svelte"
|
|
8
7
|
export { default as Input } from "./Form/Input.svelte"
|
|
9
8
|
export { default as Stepper } from "./Form/Stepper.svelte"
|
|
10
9
|
export { default as TextArea } from "./Form/TextArea.svelte"
|
|
@@ -67,6 +66,7 @@ export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
|
|
|
67
66
|
export { default as IconPicker } from "./IconPicker/IconPicker.svelte"
|
|
68
67
|
export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
|
|
69
68
|
export { default as Banner } from "./Banner/Banner.svelte"
|
|
69
|
+
export { default as CopyInput } from "./Input/CopyInput.svelte"
|
|
70
70
|
export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
|
|
71
71
|
export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
|
|
72
72
|
export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
|
|
@@ -77,6 +77,7 @@ export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
|
|
|
77
77
|
export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
|
|
78
78
|
export { default as Slider } from "./Form/Slider.svelte"
|
|
79
79
|
export { default as Accordion } from "./Accordion/Accordion.svelte"
|
|
80
|
+
export { default as File } from "./Form/File.svelte"
|
|
80
81
|
|
|
81
82
|
// Renderers
|
|
82
83
|
export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
<div class="skeleton">
|
|
2
|
-
<div class="children">
|
|
3
|
-
<slot />
|
|
4
|
-
</div>
|
|
5
|
-
</div>
|
|
6
|
-
|
|
7
|
-
<style>
|
|
8
|
-
.skeleton {
|
|
9
|
-
height: 100%;
|
|
10
|
-
width: 100%;
|
|
11
|
-
opacity: 0;
|
|
12
|
-
background-color: var(--spectrum-global-color-gray-200) !important;
|
|
13
|
-
border-radius: 7px;
|
|
14
|
-
overflow: hidden;
|
|
15
|
-
position: relative;
|
|
16
|
-
animation: fadeIn 130ms ease 0s 1 normal forwards;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.children {
|
|
20
|
-
pointer-events: none;
|
|
21
|
-
opacity: 0;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.skeleton::after {
|
|
25
|
-
position: absolute;
|
|
26
|
-
top: 0;
|
|
27
|
-
right: 0;
|
|
28
|
-
bottom: 0;
|
|
29
|
-
left: 0;
|
|
30
|
-
transform: translateX(-100%);
|
|
31
|
-
background-image: linear-gradient(
|
|
32
|
-
90deg,
|
|
33
|
-
rgba(255, 255, 255, 0) 0,
|
|
34
|
-
rgba(255, 255, 255, 0.15) 20%,
|
|
35
|
-
rgba(255, 255, 255, 0.3) 60%,
|
|
36
|
-
rgba(255, 255, 255, 0)
|
|
37
|
-
);
|
|
38
|
-
animation: shimmer 2s infinite;
|
|
39
|
-
content: "";
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
@keyframes fadeIn {
|
|
43
|
-
0% {
|
|
44
|
-
opacity: 0;
|
|
45
|
-
}
|
|
46
|
-
100% {
|
|
47
|
-
opacity: 0.75;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
@keyframes shimmer {
|
|
52
|
-
100% {
|
|
53
|
-
transform: translateX(100%);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
</style>
|