From c501ccbdf02064bab6a53fd05990e6d903c36800 Mon Sep 17 00:00:00 2001 From: dev Date: Fri, 15 May 2026 19:43:35 +0200 Subject: [PATCH] Drive range field attrs from Soma runtime --- src/uix/morfo/components/date-range-field.ts | 12 ++++----- src/uix/morfo/components/time-range-field.ts | 12 ++++----- .../date-range-field-provider.svelte.ts | 27 +++++++++++-------- .../time-range-field-provider.svelte.ts | 27 +++++++++++-------- 4 files changed, 44 insertions(+), 34 deletions(-) diff --git a/src/uix/morfo/components/date-range-field.ts b/src/uix/morfo/components/date-range-field.ts index 1639c44d7..8d68a0300 100644 --- a/src/uix/morfo/components/date-range-field.ts +++ b/src/uix/morfo/components/date-range-field.ts @@ -20,10 +20,10 @@ export const dateRangeFieldMorfo = { role: 'group', optional: false, data: [ - { attr: 'data-invalid', severity: 'optional' }, - { attr: 'data-disabled', severity: 'optional' }, - { attr: 'data-readonly', severity: 'optional' }, - { attr: 'data-required', severity: 'optional' } + { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' }, + { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }, + { attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' }, + { attr: 'data-required', value: v.propRef('required'), severity: 'optional' } ], aria: [ { attr: 'aria-label', value: v.propRef('ariaLabel'), severity: 'optional' }, @@ -44,8 +44,8 @@ export const dateRangeFieldMorfo = { defaultElement: 'label', optional: true, data: [ - { attr: 'data-invalid', severity: 'optional' }, - { attr: 'data-disabled', severity: 'optional' } + { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' }, + { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' } ], aria: [] }, diff --git a/src/uix/morfo/components/time-range-field.ts b/src/uix/morfo/components/time-range-field.ts index ec9860045..544ece02c 100644 --- a/src/uix/morfo/components/time-range-field.ts +++ b/src/uix/morfo/components/time-range-field.ts @@ -19,10 +19,10 @@ export const timeRangeFieldMorfo = { role: 'group', optional: false, data: [ - { attr: 'data-invalid', severity: 'optional' }, - { attr: 'data-disabled', severity: 'optional' }, - { attr: 'data-readonly', severity: 'optional' }, - { attr: 'data-required', severity: 'optional' } + { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' }, + { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }, + { attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' }, + { attr: 'data-required', value: v.propRef('required'), severity: 'optional' } ], aria: [ { attr: 'aria-label', value: v.propRef('ariaLabel'), severity: 'optional' }, @@ -43,8 +43,8 @@ export const timeRangeFieldMorfo = { defaultElement: 'label', optional: true, data: [ - { attr: 'data-invalid', severity: 'optional' }, - { attr: 'data-disabled', severity: 'optional' } + { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' }, + { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' } ], aria: [] }, diff --git a/src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts b/src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts index 3f4278d9e..ba9a20c04 100644 --- a/src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts +++ b/src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts @@ -1,6 +1,5 @@ import { context, type WithRefOpts } from '../../provider'; import { createAttrs } from '$uix/morfo'; -import { boolToEmptyStrOrUndef } from '$adom'; import { readableActive, state, @@ -86,12 +85,23 @@ export class DateRangeFieldProvider { private constructor(opts: DateRangeFieldOpts) { this.opts = opts; this.soma = Soma.require(); - this.runtime = this.soma.runtime(dateRangeFieldMorfo, {}); + this.runtime = this.soma.runtime(dateRangeFieldMorfo, { + props: { + disabled: () => this.isDisabled, + readonly: () => this.isReadonly, + required: () => this.isRequired, + invalid: () => this.isInvalid + }, + parts: { + label: () => this.labelNode?.id || undefined + } + }); this.runtimePart = this.runtime.part('provider', { id: opts.id, ref: opts.ref, owner: this, - context: DateRangeFieldProvider.ctx + context: DateRangeFieldProvider.ctx, + syncAttrs: true }); } @@ -147,11 +157,7 @@ export class DateRangeFieldProvider { this.runtimePart.assert({ ...this.runtimePart.props, dir: this.opts.dir.current, - 'aria-invalid': this.isInvalid || undefined, - 'data-invalid': boolToEmptyStrOrUndef(this.isInvalid), - 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled), - 'data-readonly': boolToEmptyStrOrUndef(this.isReadonly), - 'data-required': boolToEmptyStrOrUndef(this.isRequired) + 'aria-invalid': this.isInvalid || undefined } as const) ); } @@ -178,7 +184,8 @@ export class DateRangeFieldLabelProvider { owner: this, onRefChange: (v) => { this.provider.labelNode = v; - } + }, + syncAttrs: true }); } @@ -195,8 +202,6 @@ export class DateRangeFieldLabelProvider { readonly props = $derived.by(() => this.runtimePart.assert({ ...this.runtimePart.props, - 'data-invalid': boolToEmptyStrOrUndef(this.provider.isInvalid), - 'data-disabled': boolToEmptyStrOrUndef(this.provider.isDisabled), onclick: this.onclick } as const) ); diff --git a/src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts b/src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts index 4ffcd74d0..6ed06e900 100644 --- a/src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts +++ b/src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts @@ -1,6 +1,5 @@ import { context, type WithRefOpts } from '../../provider'; import { createAttrs } from '$uix/morfo'; -import { boolToEmptyStrOrUndef } from '$adom'; import { state, type ActiveProps, type StateProps } from '$libs/reactive'; import type { Direction } from '../../types'; import { Soma } from '../../core/soma.svelte'; @@ -81,12 +80,23 @@ export class TimeRangeFieldProvider { private constructor(opts: TimeRangeFieldOpts) { this.opts = opts; this.soma = Soma.require(); - this.runtime = this.soma.runtime(timeRangeFieldMorfo, {}); + this.runtime = this.soma.runtime(timeRangeFieldMorfo, { + props: { + disabled: () => this.isDisabled, + readonly: () => this.isReadonly, + required: () => this.isRequired, + invalid: () => this.isInvalid + }, + parts: { + label: () => this.labelNode?.id || undefined + } + }); this.runtimePart = this.runtime.part('provider', { id: opts.id, ref: opts.ref, owner: this, - context: TimeRangeFieldProvider.ctx + context: TimeRangeFieldProvider.ctx, + syncAttrs: true }); } @@ -155,11 +165,7 @@ export class TimeRangeFieldProvider { this.runtimePart.assert({ ...this.runtimePart.props, dir: this.opts.dir.current, - 'aria-invalid': this.isInvalid || undefined, - 'data-invalid': boolToEmptyStrOrUndef(this.isInvalid), - 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled), - 'data-readonly': boolToEmptyStrOrUndef(this.isReadonly), - 'data-required': boolToEmptyStrOrUndef(this.isRequired) + 'aria-invalid': this.isInvalid || undefined } as const) ); } @@ -186,7 +192,8 @@ export class TimeRangeFieldLabelProvider { owner: this, onRefChange: (v) => { this.provider.labelNode = v; - } + }, + syncAttrs: true }); } @@ -203,8 +210,6 @@ export class TimeRangeFieldLabelProvider { readonly props = $derived.by(() => this.runtimePart.assert({ ...this.runtimePart.props, - 'data-invalid': boolToEmptyStrOrUndef(this.provider.isInvalid), - 'data-disabled': boolToEmptyStrOrUndef(this.provider.isDisabled), onclick: this.onclick } as const) );