go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Declare interactive data attrs in morfos

Browse Source
active-uix
dev 5 months ago
parent caf208ade9
commit 37de27fcf2
14 changed files with 67 additions and 10 deletions
Show Stats Download Patch File Download Diff File

2
src/uix/morfo/components/combobox.ts
Unescape View File

@ -134,6 +134,8 @@ export const comboboxMorfo = {
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'] },
{ attr: 'data-value' },
{ attr: 'data-label', severity: 'optional' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [

8
src/uix/morfo/components/context-menu.ts
Unescape View File

@ -82,7 +82,10 @@ export const contextMenuMorfo = {
defaultElement: 'div',
role: 'menuitem',
optional: false,
data: [{ attr: 'data-disabled', severity: 'optional' }],
data: [
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [
{
attr: 'aria-disabled',
@ -103,6 +106,7 @@ export const contextMenuMorfo = {
states: ['checked', 'unchecked'],
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'] },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [
@ -137,6 +141,7 @@ export const contextMenuMorfo = {
states: ['checked', 'unchecked'],
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'] },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [
@ -169,6 +174,7 @@ export const contextMenuMorfo = {
states: ['open', 'closed'],
data: [
{ attr: 'data-state', values: ['open', 'closed'] },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [

3
src/uix/morfo/components/drag-drop.ts
Unescape View File

@ -25,6 +25,8 @@ export const dragDropMorfo = {
optional: false,
data: [
{ attr: 'data-value' },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-drag-handle', severity: 'optional' },
{ attr: 'data-dragging', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
@ -68,6 +70,7 @@ export const dragDropMorfo = {
data: [
{ attr: 'data-dragover', severity: 'optional' },
{ attr: 'data-accepting', severity: 'optional' },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [

9
src/uix/morfo/components/drawer.ts
Unescape View File

@ -200,7 +200,10 @@ export const drawerMorfo = {
role: 'button',
optional: false,
states: ['open', 'closed'],
data: [{ attr: 'data-state', values: ['open', 'closed'] }],
data: [
{ attr: 'data-state', values: ['open', 'closed'] },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [
{ attr: 'type', value: v.literal('button') },
{ attr: 'aria-haspopup', value: v.literal('dialog') },
@ -231,6 +234,8 @@ export const drawerMorfo = {
{ attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') },
{ attr: 'data-side', values: ['top', 'bottom', 'left', 'right'] },
{ attr: 'data-dragging', severity: 'optional' },
{ attr: 'data-nested', severity: 'optional' },
{ attr: 'data-nested-open', severity: 'optional' },
{
// Mirrors `data-variant` on the provider so recipe selectors
// can scope by variant directly on Content (`[data-drawer-content]
@ -286,6 +291,8 @@ export const drawerMorfo = {
states: ['open', 'closed'],
data: [
{ attr: 'data-state', values: ['open', 'closed'], value: v.stateRef('open') },
{ attr: 'data-nested', severity: 'optional' },
{ attr: 'data-nested-open', severity: 'optional' },
{
// Overlay mirrors the provider's variant so the recipe can
// hide the backdrop in `'inline'` and `'persistent'` modes

8
src/uix/morfo/components/dropdown-menu.ts
Unescape View File

@ -89,7 +89,10 @@ export const dropdownMenuMorfo = {
defaultElement: 'div',
role: 'menuitem',
optional: false,
data: [{ attr: 'data-disabled', severity: 'optional' }],
data: [
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [
{
attr: 'aria-disabled',
@ -110,6 +113,7 @@ export const dropdownMenuMorfo = {
states: ['checked', 'unchecked'],
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'] },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [
@ -144,6 +148,7 @@ export const dropdownMenuMorfo = {
states: ['checked', 'unchecked'],
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'] },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [
@ -176,6 +181,7 @@ export const dropdownMenuMorfo = {
states: ['open', 'closed'],
data: [
{ attr: 'data-state', values: ['open', 'closed'] },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [

5
src/uix/morfo/components/file-upload.ts
Unescape View File

@ -109,7 +109,10 @@ export const fileUploadMorfo = {
defaultElement: 'li',
role: 'listitem',
optional: true,
data: [],
data: [
{ attr: 'data-file-name' },
{ attr: 'data-file-type', severity: 'optional' }
],
aria: []
},
{

1
src/uix/morfo/components/grid-list.ts
Unescape View File

@ -81,6 +81,7 @@ export const gridListMorfo = {
data: [
{ attr: 'data-state', values: ['selected', 'unselected'] },
{ attr: 'data-value' },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],

1
src/uix/morfo/components/listbox.ts
Unescape View File

@ -83,6 +83,7 @@ export const listboxMorfo = {
data: [
{ attr: 'data-state', values: ['selected', 'unselected'] },
{ attr: 'data-value' },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' },
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }

2
src/uix/morfo/components/select.ts
Unescape View File

@ -124,6 +124,8 @@ export const selectMorfo = {
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'] },
{ attr: 'data-value' },
{ attr: 'data-label', severity: 'optional' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [

2
src/uix/morfo/components/tag-group.ts
Unescape View File

@ -77,6 +77,7 @@ export const tagGroupMorfo = {
data: [
{ attr: 'data-state', values: ['selected', 'unselected'] },
{ attr: 'data-value' },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
@ -100,6 +101,7 @@ export const tagGroupMorfo = {
optional: true,
data: [
{ attr: 'data-value' },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],

21
src/uix/morfo/components/time-picker.ts
Unescape View File

@ -62,6 +62,27 @@ export const timePickerMorfo = {
states: ['open', 'closed'],
data: [{ attr: 'data-state', values: ['open', 'closed'] }],
aria: []
},
{
name: 'DayPeriodToggle',
kebab: 'day-period-toggle',
archetype: 'input',
kind: 'public',
defaultElement: 'div',
role: 'radiogroup',
optional: true,
data: [],
aria: []
},
{
name: 'DayPeriodItem',
kebab: 'day-period-item',
archetype: 'item',
kind: 'public',
defaultElement: 'label',
optional: true,
data: [{ attr: 'data-checked', severity: 'optional' }],
aria: []
}
]
} as const satisfies Morfo;

2
src/uix/morfo/components/tree-grid.ts
Unescape View File

@ -94,7 +94,9 @@ export const treeGridMorfo = {
data: [
{ attr: 'data-state', values: ['selected', 'unselected'] },
{ attr: 'data-value' },
{ attr: 'data-text-value', severity: 'optional' },
{ attr: 'data-expanded', values: ['true', 'false'], severity: 'optional' },
{ attr: 'data-has-children', values: ['true', 'false'], severity: 'optional' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' },
{ attr: 'data-level' }

4
src/uix/soma/components/drawer/drawer-provider.svelte.ts
Unescape View File

@ -96,8 +96,8 @@ interface DrawerOpts extends StateProps<DrawerStateFields>, ActiveProps<DrawerAc
* a Handle part, side-resolution against Soma's `dir`. The morfo runtime
* fires the prewrite → semantic.emit → handler cadence; component-specific
* data-attrs (`data-side`, `data-dragging`, `data-nested*`) stay as inline
* overrides in each part's `props` derived because they're not declared
* with a `value:` source in the morfo today.
* overrides in each part's `props` derived; morfo declares them as contract,
* while the component owns their gesture/nesting calculations.
*/
export class DrawerProvider {
static readonly ctx = context<DrawerProvider>('Drawer');

9
src/uix/soma/components/time-picker/components/time-picker-day-period-toggle.svelte
Unescape View File

@ -1,7 +1,7 @@
<script lang="ts">
import { mergeProps } from '../../../props';
import { createId } from '../../../id';
import { TimePickerProvider } from '../time-picker-provider.svelte';
import { TimePickerProvider, timePickerAttrs } from '../time-picker-provider.svelte';
import { TIME_PICKER_LANGS } from '../langs';
import type { WithChild, Without } from '../../../types';
import type { PrimitiveDivAttributes } from '../../../types';
@ -34,6 +34,7 @@
const mergedProps = $derived(
mergeProps(restProps, {
[timePickerAttrs['day-period-toggle']]: '',
role: 'radiogroup',
'aria-label': 'AM/PM',
'aria-disabled': disabled || undefined
@ -45,9 +46,9 @@
{#if child}
{@render child({ props: mergedProps })}
{:else}
<div {...mergedProps} data-time-picker-day-period>
<div {...mergedProps}>
<label
data-time-picker-day-period-item
{...{ [timePickerAttrs['day-period-item']]: '' }}
data-checked={provider.dayPeriod === 'AM' ? '' : undefined}
>
<input
@ -61,7 +62,7 @@
<span>{amLabel}</span>
</label>
<label
data-time-picker-day-period-item
{...{ [timePickerAttrs['day-period-item']]: '' }}
data-checked={provider.dayPeriod === 'PM' ? '' : undefined}
>
<input

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.