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

Declare free value data attrs in morfos

Browse Source
active-uix
dev 5 months ago
parent 3c7984c239
commit caf208ade9
23 changed files with 87 additions and 9 deletions
Show Stats Download Patch File Download Diff File

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

@ -198,6 +198,7 @@ export const calendarMorfo = {
role: 'gridcell',
optional: false,
data: [
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' },
{ attr: 'data-unavailable', severity: 'optional' },
@ -220,6 +221,7 @@ export const calendarMorfo = {
role: 'button',
optional: false,
data: [
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' },
{ attr: 'data-unavailable', severity: 'optional' },

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

@ -133,6 +133,7 @@ export const comboboxMorfo = {
states: ['checked', 'unchecked'],
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'] },
{ attr: 'data-value' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [

4
src/uix/morfo/components/command.ts
Unescape View File

@ -80,6 +80,7 @@ export const commandMorfo = {
role: 'option',
optional: false,
data: [
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
@ -105,6 +106,7 @@ export const commandMorfo = {
role: 'option',
optional: true,
data: [
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
@ -178,7 +180,7 @@ export const commandMorfo = {
defaultElement: 'div',
role: 'progressbar',
optional: true,
data: [],
data: [{ attr: 'data-value' }],
aria: [
{ attr: 'aria-valuemin', value: v.literal('0') },
{ attr: 'aria-valuemax', value: v.literal('100') },

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

@ -24,6 +24,7 @@ export const dragDropMorfo = {
role: 'button',
optional: false,
data: [
{ attr: 'data-value' },
{ attr: 'data-dragging', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],

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

@ -168,7 +168,7 @@ export const fileUploadMorfo = {
defaultElement: 'div',
role: 'progressbar',
optional: true,
data: [],
data: [{ attr: 'data-value' }],
aria: [
{ attr: 'aria-valuenow', value: v.propRef('percent') },
{ attr: 'aria-valuemin', value: v.literal('0') },

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

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

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

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

1
src/uix/morfo/components/radio-group.ts
Unescape View File

@ -80,6 +80,7 @@ export const radioGroupMorfo = {
states: ['checked', 'unchecked'],
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'], value: v.stateRef('checked') },
{ attr: 'data-value' },
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
{
attr: 'data-orientation',

2
src/uix/morfo/components/range-calendar.ts
Unescape View File

@ -183,6 +183,7 @@ export const rangeCalendarMorfo = {
role: 'gridcell',
optional: false,
data: [
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-range-start', severity: 'optional' },
{ attr: 'data-range-end', severity: 'optional' },
@ -211,6 +212,7 @@ export const rangeCalendarMorfo = {
role: 'button',
optional: false,
data: [
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-range-start', severity: 'optional' },
{ attr: 'data-range-end', severity: 'optional' },

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

@ -123,6 +123,7 @@ export const selectMorfo = {
states: ['checked', 'unchecked'],
data: [
{ attr: 'data-state', values: ['checked', 'unchecked'] },
{ attr: 'data-value' },
{ attr: 'data-disabled', severity: 'optional' }
],
aria: [

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

@ -82,6 +82,7 @@ export const sliderMorfo = {
defaultElement: 'div',
optional: true,
data: [
{ attr: 'data-value' },
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
{ attr: 'data-active', severity: 'optional' }
],

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

@ -64,6 +64,7 @@ export const tabsMorfo = {
states: ['active', 'inactive'],
data: [
{ attr: 'data-state', values: ['active', 'inactive'], value: v.stateRef('active') },
{ attr: 'data-value' },
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
{
attr: 'data-orientation',

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

@ -76,6 +76,7 @@ export const tagGroupMorfo = {
states: ['selected', 'unselected'],
data: [
{ attr: 'data-state', values: ['selected', 'unselected'] },
{ attr: 'data-value' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
@ -98,6 +99,7 @@ export const tagGroupMorfo = {
role: 'row',
optional: true,
data: [
{ attr: 'data-value' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],

1
src/uix/morfo/components/tags-input.ts
Unescape View File

@ -77,6 +77,7 @@ export const tagsInputMorfo = {
states: ['active', 'inactive'],
data: [
{ attr: 'data-state', values: ['active', 'inactive'] },
{ attr: 'data-value' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],

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

@ -44,6 +44,57 @@ export const timeRangePickerMorfo = {
severity: 'recommended'
}
]
},
{
name: 'HourSlider',
kebab: 'hour-slider',
archetype: 'input',
kind: 'public',
defaultElement: 'div',
optional: true,
data: [{ attr: 'data-endpoint', values: ['start', 'end'] }],
aria: []
},
{
name: 'MinuteSlider',
kebab: 'minute-slider',
archetype: 'input',
kind: 'public',
defaultElement: 'div',
optional: true,
data: [{ attr: 'data-endpoint', values: ['start', 'end'] }],
aria: []
},
{
name: 'SecondSlider',
kebab: 'second-slider',
archetype: 'input',
kind: 'public',
defaultElement: 'div',
optional: true,
data: [{ attr: 'data-endpoint', values: ['start', 'end'] }],
aria: []
},
{
name: 'DayPeriodToggle',
kebab: 'day-period-toggle',
archetype: 'input',
kind: 'public',
defaultElement: 'div',
role: 'radiogroup',
optional: true,
data: [{ attr: 'data-endpoint', values: ['start', 'end'] }],
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;

1
src/uix/morfo/components/toggle-group.ts
Unescape View File

@ -35,6 +35,7 @@ export const toggleGroupMorfo = {
states: ['on', 'off'],
data: [
{ attr: 'data-state', values: ['on', 'off'], value: v.stateRef('on') },
{ attr: 'data-value' },
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
{
attr: 'data-orientation',

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

@ -100,6 +100,7 @@ export const toolbarMorfo = {
states: ['on', 'off'],
data: [
{ attr: 'data-state', values: ['on', 'off'], value: v.stateRef('on') },
{ attr: 'data-value' },
{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
{
attr: 'data-orientation',

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

@ -93,6 +93,7 @@ export const treeGridMorfo = {
states: ['selected', 'unselected'],
data: [
{ attr: 'data-state', values: ['selected', 'unselected'] },
{ attr: 'data-value' },
{ attr: 'data-expanded', values: ['true', 'false'], severity: 'optional' },
{ attr: 'data-highlighted', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' },

3
src/uix/morfo/components/tree-view.ts
Unescape View File

@ -51,6 +51,7 @@ export const treeViewMorfo = {
states: ['open', 'closed'],
data: [
{ attr: 'data-state', values: ['open', 'closed'] },
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' },
{ attr: 'data-depth' }
@ -81,6 +82,7 @@ export const treeViewMorfo = {
states: ['open', 'closed'],
data: [
{ attr: 'data-state', values: ['open', 'closed'] },
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }
],
@ -127,6 +129,7 @@ export const treeViewMorfo = {
role: 'treeitem',
optional: false,
data: [
{ attr: 'data-value' },
{ attr: 'data-selected', severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' },
{ attr: 'data-depth' }

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

@ -1,7 +1,7 @@
<script lang="ts">
import { mergeProps } from '../../../props';
import { createId } from '../../../id';
import { TimeRangePickerProvider } from '../time-range-picker-provider.svelte';
import { TimeRangePickerProvider, timeRangePickerAttrs } from '../time-range-picker-provider.svelte';
import { TIME_RANGE_PICKER_LANGS } from '../langs';
import type { TimeRangePickerDayPeriodToggleProps } from '../types';
@ -29,6 +29,7 @@
const mergedProps = $derived(
mergeProps(restProps, {
[timeRangePickerAttrs['day-period-toggle']]: '',
role: 'radiogroup',
'aria-label': 'AM/PM',
'aria-disabled': disabled || undefined,
@ -41,9 +42,9 @@
{#if child}
{@render child({ props: mergedProps })}
{:else}
<div {...mergedProps} data-time-range-picker-day-period>
<div {...mergedProps}>
<label
data-time-range-picker-day-period-item
{...{ [timeRangePickerAttrs['day-period-item']]: '' }}
data-checked={provider.getDayPeriod(type) === 'AM' ? '' : undefined}
>
<input
@ -60,7 +61,7 @@
<span>{amLabel}</span>
</label>
<label
data-time-range-picker-day-period-item
{...{ [timeRangePickerAttrs['day-period-item']]: '' }}
data-checked={provider.getDayPeriod(type) === 'PM' ? '' : undefined}
>
<input

3
src/uix/soma/components/time-range-picker/components/time-range-picker-hour-slider.svelte
Unescape View File

@ -6,7 +6,7 @@
import { mergeProps } from '../../../props';
import { createId } from '../../../id';
import { SliderProvider } from '../../slider/slider-provider.svelte';
import { TimeRangePickerProvider } from '../time-range-picker-provider.svelte';
import { TimeRangePickerProvider, timeRangePickerAttrs } from '../time-range-picker-provider.svelte';
import { TIME_RANGE_PICKER_LANGS } from '../langs';
import type { TimeRangePickerSliderProps } from '../types';
@ -66,6 +66,7 @@
const mergedProps = $derived(
mergeProps(restProps, state.props, {
[timeRangePickerAttrs['hour-slider']]: '',
'aria-label': label,
'data-endpoint': type
} as Record<string, unknown>)

3
src/uix/soma/components/time-range-picker/components/time-range-picker-minute-slider.svelte
Unescape View File

@ -6,7 +6,7 @@
import { mergeProps } from '../../../props';
import { createId } from '../../../id';
import { SliderProvider } from '../../slider/slider-provider.svelte';
import { TimeRangePickerProvider } from '../time-range-picker-provider.svelte';
import { TimeRangePickerProvider, timeRangePickerAttrs } from '../time-range-picker-provider.svelte';
import { TIME_RANGE_PICKER_LANGS } from '../langs';
import type { TimeRangePickerSliderProps } from '../types';
@ -66,6 +66,7 @@
const mergedProps = $derived(
mergeProps(restProps, state.props, {
[timeRangePickerAttrs['minute-slider']]: '',
'aria-label': label,
'data-endpoint': type
} as Record<string, unknown>)

3
src/uix/soma/components/time-range-picker/components/time-range-picker-second-slider.svelte
Unescape View File

@ -6,7 +6,7 @@
import { mergeProps } from '../../../props';
import { createId } from '../../../id';
import { SliderProvider } from '../../slider/slider-provider.svelte';
import { TimeRangePickerProvider } from '../time-range-picker-provider.svelte';
import { TimeRangePickerProvider, timeRangePickerAttrs } from '../time-range-picker-provider.svelte';
import { TIME_RANGE_PICKER_LANGS } from '../langs';
import type { TimeRangePickerSliderProps } from '../types';
@ -66,6 +66,7 @@
const mergedProps = $derived(
mergeProps(restProps, state.props, {
[timeRangePickerAttrs['second-slider']]: '',
'aria-label': label,
'data-endpoint': type
} as Record<string, unknown>)

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.