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.
126 lines
3.5 KiB
126 lines
3.5 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const ratingGroupMorfo = {
|
|
name: 'RatingGroup',
|
|
kebab: 'rating-group',
|
|
scope: ['soma', 'sema', 'eidos'],
|
|
expression: 'pack',
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/radio/',
|
|
texts: {
|
|
label: '#?components.rating-group.label|Rating'
|
|
},
|
|
events: [
|
|
{
|
|
name: 'commit-set',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'set',
|
|
target: v.partRef('provider'),
|
|
intent: 'neutral',
|
|
sequence: 'post'
|
|
}
|
|
}
|
|
],
|
|
parts: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'provider',
|
|
archetype: 'provider',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'slider',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
|
|
{ attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' },
|
|
{ attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
|
|
{ attr: 'data-required', value: v.propRef('required'), severity: 'optional' },
|
|
{ attr: 'data-focused', value: v.propRef('focused'), severity: 'optional' },
|
|
{
|
|
attr: 'data-orientation',
|
|
values: ['horizontal', 'vertical'],
|
|
value: v.propRef('orientation')
|
|
}
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-valuenow', value: v.propRef('value') },
|
|
{ attr: 'aria-valuemin', value: v.propRef('min') },
|
|
{ attr: 'aria-valuemax', value: v.propRef('max') },
|
|
{ attr: 'aria-valuetext', value: v.propRef('valueText'), severity: 'recommended' },
|
|
{ attr: 'aria-orientation', value: v.propRef('orientation') },
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.propRef('ariaLabel'),
|
|
severity: 'recommended',
|
|
condition: { when: 'prop-truthy', prop: 'ariaLabel' }
|
|
},
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.propRef('ariaLabelledby'),
|
|
severity: 'recommended',
|
|
condition: { when: 'prop-truthy', prop: 'ariaLabelledby' }
|
|
},
|
|
{
|
|
attr: 'aria-required',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'required' }
|
|
},
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
},
|
|
{
|
|
attr: 'aria-readonly',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'readonly' }
|
|
},
|
|
{
|
|
attr: 'aria-invalid',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'invalid' }
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'ArrowRight', action: 'increment' },
|
|
{ key: 'ArrowUp', action: 'increment' },
|
|
{ key: 'ArrowLeft', action: 'decrement' },
|
|
{ key: 'ArrowDown', action: 'decrement' },
|
|
{ key: 'Home', action: 'first-item' },
|
|
{ key: 'End', action: 'last-item' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Item',
|
|
kebab: 'item',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'presentation',
|
|
optional: false,
|
|
states: ['active', 'partial', 'inactive'],
|
|
data: [
|
|
{
|
|
attr: 'data-state',
|
|
values: ['active', 'partial', 'inactive'],
|
|
value: v.propRef('state')
|
|
},
|
|
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
|
|
{ attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' },
|
|
{
|
|
attr: 'data-orientation',
|
|
values: ['horizontal', 'vertical'],
|
|
value: v.propRef('orientation')
|
|
},
|
|
{ attr: 'data-value', value: v.propRef('value'), emit: 'value' }
|
|
],
|
|
aria: []
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|