| import { makeElement, createElHelpers, omit, overridable, toWritableStores, } from '../../internal/helpers/index.js'; | |
| import { writable } from 'svelte/store'; | |
| const defaults = { | |
| defaultValue: 0, | |
| max: 100, | |
| }; | |
| const { name } = createElHelpers('progress'); | |
| export const createProgress = (props) => { | |
| const withDefaults = { ...defaults, ...props }; | |
| const options = toWritableStores(omit(withDefaults, 'value')); | |
| const { max } = options; | |
| const valueWritable = withDefaults.value ?? writable(withDefaults.defaultValue); | |
| const value = overridable(valueWritable, withDefaults?.onValueChange); | |
| const root = makeElement(name(), { | |
| stores: [value, max], | |
| returned: ([$value, $max]) => { | |
| return { | |
| value: $value, | |
| max: $max, | |
| role: 'meter', | |
| 'aria-valuemin': 0, | |
| 'aria-valuemax': $max, | |
| 'aria-valuenow': $value, | |
| 'data-value': $value, | |
| 'data-state': $value === null ? 'indeterminate' : $value === $max ? 'complete' : 'loading', | |
| 'data-max': $max, | |
| }; | |
| }, | |
| }); | |
| return { | |
| elements: { | |
| root, | |
| }, | |
| states: { | |
| value, | |
| }, | |
| options, | |
| }; | |
| }; | |