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

refactor(soma): de-dup spin-field triggers + scrubbers via renderProps

Browse Source 
Finishes the spin-field family. The 4 triggers + 2 scrubbers (number-field +
css-field) now spread renderProps() and add only soma-specific extras.

- Scrubbers: role + aria-hidden + data-spin-field-scrubber now morfo-sourced;
  soma keeps data-scrubbing/disabled, cursor style, pointer handlers.
- Triggers: type + aria-label + data-spin-field + aria-disabled now morfo-
  sourced. The trigger morfos' aria-disabled moves from literal-'true'+condition
  to propRef('disabled') + ariaBoolean (the de-facto always-emit shape); each
  trigger registers its own `disabled` source (includes atMax/atMin) so
  renderProps resolves it. aria-label resolves from the morfo's
  commonRef('buttons.increment/decrement') — the SAME idlangref the provider
  used, so the string is unchanged ("Aumentar"/"Disminuir" in es).
- Dropped the now-orphaned NUMBER_FIELD_LANGS + boolToStr imports.

Verified in browser for all parts (type/aria-label/aria-disabled/role/aria-hidden
identical) + soma/morfo tests 95/95 (2 pre-existing palabras contract failures
only). The entire spin-field family is now morfo-sourced — zero re-declared attrs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 75e50becf7
commit c44a259916
4 changed files with 34 additions and 43 deletions
Show Stats Download Patch File Download Diff File

8
src/uix/morfo/components/css-field.ts
Unescape View File

@ -158,9 +158,9 @@ export const cssFieldMorfo = {
}, },
{ {
attr: 'aria-disabled', attr: 'aria-disabled',
value: v.literal('true'), value: v.propRef('disabled'),
severity: 'optional', severity: 'optional',
condition: { when: 'prop-truthy', prop: 'disabled' } ariaBoolean: true
} }
] ]
}, },
@ -185,9 +185,9 @@ export const cssFieldMorfo = {
}, },
{ {
attr: 'aria-disabled', attr: 'aria-disabled',
value: v.literal('true'), value: v.propRef('disabled'),
severity: 'optional', severity: 'optional',
condition: { when: 'prop-truthy', prop: 'disabled' } ariaBoolean: true
} }
] ]
}, },

8
src/uix/morfo/components/number-field.ts
Unescape View File

@ -150,9 +150,9 @@ export const numberFieldMorfo = {
}, },
{ {
attr: 'aria-disabled', attr: 'aria-disabled',
value: v.literal('true'), value: v.propRef('disabled'),
severity: 'optional', severity: 'optional',
condition: { when: 'prop-truthy', prop: 'disabled' } ariaBoolean: true
} }
] ]
}, },
@ -177,9 +177,9 @@ export const numberFieldMorfo = {
}, },
{ {
attr: 'aria-disabled', attr: 'aria-disabled',
value: v.literal('true'), value: v.propRef('disabled'),
severity: 'optional', severity: 'optional',
condition: { when: 'prop-truthy', prop: 'disabled' } ariaBoolean: true
} }
] ]
}, },

30
src/uix/soma/components/css-field/css-field-provider.svelte.ts
Unescape View File

@ -1,6 +1,6 @@
import { watch } from 'runed'; import { watch } from 'runed';
import { context, type WithRefOpts } from '../../provider'; import { context, type WithRefOpts } from '../../provider';
import { boolToEmptyStrOrUndef, boolToStr, isHTMLElement } from '$adom'; import { boolToEmptyStrOrUndef, isHTMLElement } from '$adom';
import { readableActive, type Active, type ActiveProps, type StateProps } from '$libs/reactive'; import { readableActive, type Active, type ActiveProps, type StateProps } from '$libs/reactive';
import type { import type {
OnChangeFn, OnChangeFn,
@ -586,7 +586,9 @@ export class CssFieldIncrementTriggerProvider {
this.runtimePart = this.provider.runtime.part('increment-trigger', { this.runtimePart = this.provider.runtime.part('increment-trigger', {
id: opts.id, id: opts.id,
ref: opts.ref, ref: opts.ref,
owner: this owner: this,
// trigger-local disabled (includes atMax) → renderProps resolves aria-disabled
props: { disabled: () => this.isDisabled }
}); });
} }
@ -609,13 +611,10 @@ export class CssFieldIncrementTriggerProvider {
readonly props = $derived.by(() => readonly props = $derived.by(() =>
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, // type, aria-label, data-spin-field, aria-disabled are morfo-declared.
type: 'button' as const, ...this.runtimePart.renderProps(),
tabindex: -1, tabindex: -1,
disabled: this.isDisabled || undefined, disabled: this.isDisabled || undefined,
'aria-label': this.provider.soma.langs.ts(CSS_FIELD_LANGS.INCREMENT),
'data-spin-field-increment-trigger': '',
'aria-disabled': boolToStr(this.isDisabled),
'data-disabled': boolToEmptyStrOrUndef(this.isDisabled), 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
onclick: this.handleClick, onclick: this.handleClick,
onpointerdown: this.handlePointerDown, onpointerdown: this.handlePointerDown,
@ -653,7 +652,9 @@ export class CssFieldDecrementTriggerProvider {
this.runtimePart = this.provider.runtime.part('decrement-trigger', { this.runtimePart = this.provider.runtime.part('decrement-trigger', {
id: opts.id, id: opts.id,
ref: opts.ref, ref: opts.ref,
owner: this owner: this,
// trigger-local disabled (includes atMin) → renderProps resolves aria-disabled
props: { disabled: () => this.isDisabled }
}); });
} }
@ -676,13 +677,10 @@ export class CssFieldDecrementTriggerProvider {
readonly props = $derived.by(() => readonly props = $derived.by(() =>
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, // type, aria-label, data-spin-field, aria-disabled are morfo-declared.
type: 'button' as const, ...this.runtimePart.renderProps(),
tabindex: -1, tabindex: -1,
disabled: this.isDisabled || undefined, disabled: this.isDisabled || undefined,
'aria-label': this.provider.soma.langs.ts(CSS_FIELD_LANGS.DECREMENT),
'data-spin-field-decrement-trigger': '',
'aria-disabled': boolToStr(this.isDisabled),
'data-disabled': boolToEmptyStrOrUndef(this.isDisabled), 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
onclick: this.handleClick, onclick: this.handleClick,
onpointerdown: this.handlePointerDown, onpointerdown: this.handlePointerDown,
@ -810,10 +808,8 @@ export class CssFieldScrubberProvider {
readonly props = $derived.by(() => readonly props = $derived.by(() =>
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, // role, aria-hidden, data-spin-field-scrubber are morfo-declared.
role: 'presentation' as const, ...this.runtimePart.renderProps(),
'aria-hidden': true as const,
'data-spin-field-scrubber': '',
'data-scrubbing': boolToEmptyStrOrUndef(this.provider.scrubbing), 'data-scrubbing': boolToEmptyStrOrUndef(this.provider.scrubbing),
'data-disabled': boolToEmptyStrOrUndef(this.isDisabled), 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
style: { style: {

31
src/uix/soma/components/number-field/number-field-provider.svelte.ts
Unescape View File

@ -1,6 +1,6 @@
import { watch } from 'runed'; import { watch } from 'runed';
import { context, type WithRefOpts } from '../../provider'; import { context, type WithRefOpts } from '../../provider';
import { boolToEmptyStrOrUndef, boolToStr, isHTMLElement } from '$adom'; import { boolToEmptyStrOrUndef, isHTMLElement } from '$adom';
import { readableActive, type Active, type ActiveProps, type StateProps } from '$libs/reactive'; import { readableActive, type Active, type ActiveProps, type StateProps } from '$libs/reactive';
import type { import type {
OnChangeFn, OnChangeFn,
@ -11,7 +11,6 @@ import type {
} from '../../types'; } from '../../types';
import { KEYS } from '../../keyboard'; import { KEYS } from '../../keyboard';
import { Soma } from '../../core/soma.svelte'; import { Soma } from '../../core/soma.svelte';
import { NUMBER_FIELD_LANGS } from './langs';
import { FieldProvider } from '../field'; import { FieldProvider } from '../field';
// ── Intl fallback cache ────────────────────────────────────────────────────── // ── Intl fallback cache ──────────────────────────────────────────────────────
@ -660,7 +659,9 @@ export class NumberFieldIncrementTriggerProvider {
this.runtimePart = this.provider.runtime.part('increment-trigger', { this.runtimePart = this.provider.runtime.part('increment-trigger', {
id: opts.id, id: opts.id,
ref: opts.ref, ref: opts.ref,
owner: this owner: this,
// trigger-local disabled (includes atMax) → renderProps resolves aria-disabled
props: { disabled: () => this.isDisabled }
}); });
} }
@ -683,13 +684,10 @@ export class NumberFieldIncrementTriggerProvider {
readonly props = $derived.by(() => readonly props = $derived.by(() =>
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, // type, aria-label, data-spin-field, aria-disabled are morfo-declared.
type: 'button' as const, ...this.runtimePart.renderProps(),
tabindex: -1, tabindex: -1,
disabled: this.isDisabled || undefined, disabled: this.isDisabled || undefined,
'aria-label': this.provider.soma.langs.ts(NUMBER_FIELD_LANGS.INCREMENT),
'data-spin-field-increment-trigger': '',
'aria-disabled': boolToStr(this.isDisabled),
'data-disabled': boolToEmptyStrOrUndef(this.isDisabled), 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
onclick: this.handleClick, onclick: this.handleClick,
onpointerdown: this.handlePointerDown, onpointerdown: this.handlePointerDown,
@ -727,7 +725,9 @@ export class NumberFieldDecrementTriggerProvider {
this.runtimePart = this.provider.runtime.part('decrement-trigger', { this.runtimePart = this.provider.runtime.part('decrement-trigger', {
id: opts.id, id: opts.id,
ref: opts.ref, ref: opts.ref,
owner: this owner: this,
// trigger-local disabled (includes atMin) → renderProps resolves aria-disabled
props: { disabled: () => this.isDisabled }
}); });
} }
@ -750,13 +750,10 @@ export class NumberFieldDecrementTriggerProvider {
readonly props = $derived.by(() => readonly props = $derived.by(() =>
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, // type, aria-label, data-spin-field, aria-disabled are morfo-declared.
type: 'button' as const, ...this.runtimePart.renderProps(),
tabindex: -1, tabindex: -1,
disabled: this.isDisabled || undefined, disabled: this.isDisabled || undefined,
'aria-label': this.provider.soma.langs.ts(NUMBER_FIELD_LANGS.DECREMENT),
'data-spin-field-decrement-trigger': '',
'aria-disabled': boolToStr(this.isDisabled),
'data-disabled': boolToEmptyStrOrUndef(this.isDisabled), 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
onclick: this.handleClick, onclick: this.handleClick,
onpointerdown: this.handlePointerDown, onpointerdown: this.handlePointerDown,
@ -889,10 +886,8 @@ export class NumberFieldScrubberProvider {
readonly props = $derived.by(() => readonly props = $derived.by(() =>
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, // role, aria-hidden, data-spin-field-scrubber are morfo-declared.
role: 'presentation' as const, ...this.runtimePart.renderProps(),
'aria-hidden': true as const,
'data-spin-field-scrubber': '',
'data-scrubbing': boolToEmptyStrOrUndef(this.provider.scrubbing), 'data-scrubbing': boolToEmptyStrOrUndef(this.provider.scrubbing),
'data-disabled': boolToEmptyStrOrUndef(this.isDisabled), 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
style: { style: {

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.