@grail-ui/svelte/dist/progress/progress.js

[](https://www.npmjs.com/package/@grail-ui/svelte) [](https://bundlephobia.com/package/@grail-ui/svelte) [![minified + zipped](https:

import { derived, writable } from 'svelte/store';
import { clamp } from '../util/number.js';
export const createProgress = ({ minValue = 0, maxValue = 100, value = 0, formatValueLabel, } = {}) => {
    const value$ = writable(value);
    const clampedValue$ = derived([value$], ([$value]) => $value === null ? null : clamp($value, minValue, maxValue));
    const percentage = derived([clampedValue$], ([$value]) => $value === null ? 0 : ($value - minValue) / (maxValue - minValue));
    if (!formatValueLabel) {
        const option = {
            style: 'percent',
        };
        const formatter = new Intl.NumberFormat('en-US', option);
        formatValueLabel = ({ percentage }) => {
            return formatter.format(percentage);
        };
    }
    const valueLabel = derived([clampedValue$, percentage], ([$value, $percentage]) => {
        if ($value === null || !formatValueLabel)
            return '';
        return formatValueLabel({
            value: $value,
            percentage: $percentage,
            minValue,
            maxValue,
        });
    });
    const progressAttrs = derived([clampedValue$, valueLabel], ([$value, $valueLabel]) => {
        return {
            ...($value !== null ? { 'aria-valuenow': `${$value}` } : {}),
            'aria-valuemin': `${minValue}`,
            'aria-valuemax': `${maxValue}`,
            ...($valueLabel ? { 'aria-valuetext': $valueLabel } : {}),
            role: 'progressbar',
        };
    });
    return {
        value: value$,
        valueLabel,
        percentage,
        progressAttrs,
    };
};