CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-27 02:20:35 +12:00
Code Issues Projects Releases Wiki Activity

adds progressBar

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-15 15:39:14 +02:00
parent 61e1529ea8
commit 7c115149ba
4 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/bbui/package.json
View file

@ -56,6 +56,7 @@
"@spectrum-css/menu": "^3.0.1",
"@spectrum-css/modal": "^3.0.1",
"@spectrum-css/popover": "^3.0.1",
"@spectrum-css/progressbar": "^1.0.2",
"@spectrum-css/table": "^3.0.1",
"@spectrum-css/tabs": "^3.0.1",
"@spectrum-css/toast": "^3.0.1",

38
packages/bbui/src/ProgressBar/ProgressBar.svelte Normal file
View file

@ -0,0 +1,38 @@
<script>
import "@spectrum-css/progressbar/dist/index-vars.css"
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
export let value = false
export let easing = cubicOut
export let duration = 1000;
export let width = false;
export let sideLabel = false
export let overBackground = false
export let s = false;
export let m = false;
export let l = false;
export let xl = false;
const progress = tweened(0, {
duration: duration,
easing: easing
});
$: if (value) $progress = value
</script>
<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressBar--sideLabel={sideLabel} class:spectrum-ProgressBar--sizeS={s} class:spectrum-ProgressBar--sizeM={m} class:spectrum-ProgressBar--sizeL={l} class:spectrum-ProgressBar--sizeXL={xl} class="spectrum-ProgressBar" value={$progress} role="progressbar" aria-valuenow={$progress} aria-valuemin="0" aria-valuemax="100" style={width ? `width: ${width}px;` : ''}>
{#if $$slots}
<div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-label"><slot /></div>
{/if}
{#if value}
<div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-percentage">{Math.round($progress)}%</div>
{/if}
<div class="spectrum-ProgressBar-track">
<div class="spectrum-ProgressBar-fill" style={value ? `width: ${$progress}%` : ''}></div>
</div>
<div class="spectrum-ProgressBar-label" hidden=""></div>
</div>

1
packages/bbui/src/index.js
View file

@ -21,6 +21,7 @@ export { default as DetailSummary } from "./List/Items/DetailSummary.svelte"
export { default as Switcher } from "./Switcher/Switcher.svelte"
export { default as DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte"
export { default as Popover } from "./Popover/Popover.svelte"
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
export { default as Label } from "./Styleguide/Label.svelte"
export { default as Link } from "./Link/Link.svelte"
export { default as Close } from "./Button/Close.svelte"

5
packages/bbui/yarn.lock
View file

@ -475,6 +475,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc"
integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q==
"@spectrum-css/progressbar@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/progressbar/-/progressbar-1.0.2.tgz#b5a59432517f9ae6dad49d9504691bc5ac42b424"
integrity sha512-+jExeBLtVCqo3BqtFq5WCtZ028Dzk+oUnX6y4z6ZamKPqOyOELOtFnhYnyhyRndQOqYwKUTXx9zsaWA/lpJOHw==
"@spectrum-css/table@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"