CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-05 12:34:50 +13:00
Code Issues Projects Releases Wiki Activity

update progressbar to use new API

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-27 16:41:43 +02:00
parent 6a424c7fe0
commit c97fc61f77
2 changed files with 54 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
packages/bbui/src/ProgressBar/ProgressBar.svelte
View file

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

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

@ -21,7 +21,6 @@ export { default as Icon, directions } from "./Icon/Icon.svelte"
export { default as Toggle } from "./Form/Toggle.svelte" export { default as Toggle } from "./Form/Toggle.svelte"
export { default as RadioGroup } from "./Form/RadioGroup.svelte" export { default as RadioGroup } from "./Form/RadioGroup.svelte"
export { default as Checkbox } from "./Form/Checkbox.svelte" export { default as Checkbox } from "./Form/Checkbox.svelte"
export { default as Home } from "./Links/Home.svelte"
export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte" export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
export { default as Popover } from "./Popover/Popover.svelte" export { default as Popover } from "./Popover/Popover.svelte"
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte" export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"