You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.3 KiB
93 lines
2.3 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const sliderMorfo = {
|
|
name: 'Slider',
|
|
kebab: 'slider',
|
|
scope: ['soma'],
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/slider/',
|
|
parts: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'provider',
|
|
archetype: 'provider',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'group',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Range',
|
|
kebab: 'range',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Thumb',
|
|
kebab: 'thumb',
|
|
archetype: 'thumb',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'slider',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-valuemin', value: v.propRef('min') },
|
|
{ attr: 'aria-valuemax', value: v.propRef('max') },
|
|
{ attr: 'aria-valuenow', value: v.propRef('value') },
|
|
{ attr: 'aria-orientation', value: v.propRef('orientation') },
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.propRef('thumbLabels'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'thumbLabels' }
|
|
},
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'ArrowUp', action: 'increment' },
|
|
{ key: 'ArrowDown', action: 'decrement' },
|
|
{ key: 'ArrowRight', action: 'increment' },
|
|
{ key: 'ArrowLeft', action: 'decrement' },
|
|
{ key: 'PageUp', action: 'increment-large' },
|
|
{ key: 'PageDown', action: 'decrement-large' },
|
|
{ key: 'Home', action: 'first-item' },
|
|
{ key: 'End', action: 'last-item' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Tick',
|
|
kebab: 'tick',
|
|
archetype: 'indicator',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [
|
|
{ attr: 'data-value' },
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
|
|
{ attr: 'data-active', severity: 'optional' }
|
|
],
|
|
aria: []
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|