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.
155 lines
3.6 KiB
155 lines
3.6 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const toolbarMorfo = {
|
|
name: 'Toolbar',
|
|
kebab: 'toolbar',
|
|
scope: ['soma', 'sema', 'eidos'],
|
|
expression: 'pack',
|
|
texts: {
|
|
label: '#?components.toolbar.label|Toolbar'
|
|
},
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/',
|
|
events: [
|
|
{
|
|
name: 'commit-toggle',
|
|
semantic: {
|
|
family: 'commit',
|
|
verb: 'toggle',
|
|
target: v.partRef('provider'),
|
|
intent: 'neutral',
|
|
sequence: 'post',
|
|
// The toggled item of a group is a repeated part; the provider
|
|
// hands the one that flipped.
|
|
allowedTargets: [v.partRef('group-item')]
|
|
}
|
|
}
|
|
],
|
|
direction: {},
|
|
parts: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'provider',
|
|
archetype: 'provider',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'toolbar',
|
|
optional: false,
|
|
data: [
|
|
{
|
|
attr: 'data-orientation',
|
|
values: ['horizontal', 'vertical'],
|
|
value: v.propRef('orientation')
|
|
}
|
|
],
|
|
aria: [{ attr: 'aria-orientation', value: v.propRef('orientation') }],
|
|
keyboard: [
|
|
{ key: 'ArrowRight', action: 'next-item' },
|
|
{ key: 'ArrowLeft', action: 'prev-item' },
|
|
{ key: 'ArrowDown', action: 'next-item' },
|
|
{ key: 'ArrowUp', action: 'prev-item' },
|
|
{ key: 'Home', action: 'first-item' },
|
|
{ key: 'End', action: 'last-item' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Button',
|
|
kebab: 'button',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
data: [
|
|
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
|
|
{
|
|
attr: 'data-orientation',
|
|
values: ['horizontal', 'vertical'],
|
|
value: v.propRef('orientation')
|
|
}
|
|
],
|
|
aria: [{ attr: 'type', value: v.literal('button') }]
|
|
},
|
|
{
|
|
name: 'Link',
|
|
kebab: 'link',
|
|
archetype: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'a',
|
|
optional: true,
|
|
data: [
|
|
{
|
|
attr: 'data-orientation',
|
|
values: ['horizontal', 'vertical'],
|
|
value: v.propRef('orientation')
|
|
}
|
|
],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'Group',
|
|
kebab: 'group',
|
|
archetype: 'group',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'group',
|
|
optional: true,
|
|
data: [
|
|
{
|
|
attr: 'data-orientation',
|
|
values: ['horizontal', 'vertical'],
|
|
value: v.propRef('orientation')
|
|
},
|
|
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'GroupItem',
|
|
kebab: 'group-item',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'button',
|
|
optional: true,
|
|
states: ['on', 'off'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['on', 'off'], value: v.stateRef('on') },
|
|
{ attr: 'data-value', value: v.propRef('value'), emit: 'value' },
|
|
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
|
|
{
|
|
attr: 'data-orientation',
|
|
values: ['horizontal', 'vertical'],
|
|
value: v.propRef('orientation')
|
|
}
|
|
],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-pressed', value: v.stateRef('on') }
|
|
]
|
|
},
|
|
{
|
|
name: 'Separator',
|
|
kebab: 'separator',
|
|
archetype: 'separator',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'separator',
|
|
optional: true,
|
|
data: [
|
|
{
|
|
attr: 'data-orientation',
|
|
values: ['horizontal', 'vertical'],
|
|
value: v.propRef('orientation')
|
|
}
|
|
],
|
|
aria: [{ attr: 'aria-orientation', value: v.propRef('orientation') }]
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|