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

Drive range field attrs from Soma runtime

Browse Source
active-uix
dev 5 months ago
parent 95905c209b
commit c501ccbdf0
4 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File

12
src/uix/morfo/components/date-range-field.ts
Unescape View File

@ -20,10 +20,10 @@ export const dateRangeFieldMorfo = {
role: 'group', role: 'group',
optional: false, optional: false,
data: [ data: [
{ attr: 'data-invalid', severity: 'optional' }, { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }, { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
{ attr: 'data-readonly', severity: 'optional' }, { attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' },
{ attr: 'data-required', severity: 'optional' } { attr: 'data-required', value: v.propRef('required'), severity: 'optional' }
], ],
aria: [ aria: [
{ attr: 'aria-label', value: v.propRef('ariaLabel'), severity: 'optional' }, { attr: 'aria-label', value: v.propRef('ariaLabel'), severity: 'optional' },
@ -44,8 +44,8 @@ export const dateRangeFieldMorfo = {
defaultElement: 'label', defaultElement: 'label',
optional: true, optional: true,
data: [ data: [
{ attr: 'data-invalid', severity: 'optional' }, { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' } { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }
], ],
aria: [] aria: []
}, },

12
src/uix/morfo/components/time-range-field.ts
Unescape View File

@ -19,10 +19,10 @@ export const timeRangeFieldMorfo = {
role: 'group', role: 'group',
optional: false, optional: false,
data: [ data: [
{ attr: 'data-invalid', severity: 'optional' }, { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' }, { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' },
{ attr: 'data-readonly', severity: 'optional' }, { attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' },
{ attr: 'data-required', severity: 'optional' } { attr: 'data-required', value: v.propRef('required'), severity: 'optional' }
], ],
aria: [ aria: [
{ attr: 'aria-label', value: v.propRef('ariaLabel'), severity: 'optional' }, { attr: 'aria-label', value: v.propRef('ariaLabel'), severity: 'optional' },
@ -43,8 +43,8 @@ export const timeRangeFieldMorfo = {
defaultElement: 'label', defaultElement: 'label',
optional: true, optional: true,
data: [ data: [
{ attr: 'data-invalid', severity: 'optional' }, { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' },
{ attr: 'data-disabled', severity: 'optional' } { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }
], ],
aria: [] aria: []
}, },

27
src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts
Unescape View File

@ -1,6 +1,5 @@
import { context, type WithRefOpts } from '../../provider'; import { context, type WithRefOpts } from '../../provider';
import { createAttrs } from '$uix/morfo'; import { createAttrs } from '$uix/morfo';
import { boolToEmptyStrOrUndef } from '$adom';
import { import {
readableActive, readableActive,
state, state,
@ -86,12 +85,23 @@ export class DateRangeFieldProvider {
private constructor(opts: DateRangeFieldOpts) { private constructor(opts: DateRangeFieldOpts) {
this.opts = opts; this.opts = opts;
this.soma = Soma.require(); 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', { this.runtimePart = this.runtime.part('provider', {
id: opts.id, id: opts.id,
ref: opts.ref, ref: opts.ref,
owner: this, owner: this,
context: DateRangeFieldProvider.ctx context: DateRangeFieldProvider.ctx,
syncAttrs: true
}); });
} }
@ -147,11 +157,7 @@ export class DateRangeFieldProvider {
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, ...this.runtimePart.props,
dir: this.opts.dir.current, dir: this.opts.dir.current,
'aria-invalid': this.isInvalid || undefined, '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)
} as const) } as const)
); );
} }
@ -178,7 +184,8 @@ export class DateRangeFieldLabelProvider {
owner: this, owner: this,
onRefChange: (v) => { onRefChange: (v) => {
this.provider.labelNode = v; this.provider.labelNode = v;
} },
syncAttrs: true
}); });
} }
@ -195,8 +202,6 @@ export class DateRangeFieldLabelProvider {
readonly props = $derived.by(() => readonly props = $derived.by(() =>
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, ...this.runtimePart.props,
'data-invalid': boolToEmptyStrOrUndef(this.provider.isInvalid),
'data-disabled': boolToEmptyStrOrUndef(this.provider.isDisabled),
onclick: this.onclick onclick: this.onclick
} as const) } as const)
); );

27
src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts
Unescape View File

@ -1,6 +1,5 @@
import { context, type WithRefOpts } from '../../provider'; import { context, type WithRefOpts } from '../../provider';
import { createAttrs } from '$uix/morfo'; import { createAttrs } from '$uix/morfo';
import { boolToEmptyStrOrUndef } from '$adom';
import { state, type ActiveProps, type StateProps } from '$libs/reactive'; import { state, type ActiveProps, type StateProps } from '$libs/reactive';
import type { Direction } from '../../types'; import type { Direction } from '../../types';
import { Soma } from '../../core/soma.svelte'; import { Soma } from '../../core/soma.svelte';
@ -81,12 +80,23 @@ export class TimeRangeFieldProvider {
private constructor(opts: TimeRangeFieldOpts) { private constructor(opts: TimeRangeFieldOpts) {
this.opts = opts; this.opts = opts;
this.soma = Soma.require(); 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', { this.runtimePart = this.runtime.part('provider', {
id: opts.id, id: opts.id,
ref: opts.ref, ref: opts.ref,
owner: this, owner: this,
context: TimeRangeFieldProvider.ctx context: TimeRangeFieldProvider.ctx,
syncAttrs: true
}); });
} }
@ -155,11 +165,7 @@ export class TimeRangeFieldProvider {
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, ...this.runtimePart.props,
dir: this.opts.dir.current, dir: this.opts.dir.current,
'aria-invalid': this.isInvalid || undefined, '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)
} as const) } as const)
); );
} }
@ -186,7 +192,8 @@ export class TimeRangeFieldLabelProvider {
owner: this, owner: this,
onRefChange: (v) => { onRefChange: (v) => {
this.provider.labelNode = v; this.provider.labelNode = v;
} },
syncAttrs: true
}); });
} }
@ -203,8 +210,6 @@ export class TimeRangeFieldLabelProvider {
readonly props = $derived.by(() => readonly props = $derived.by(() =>
this.runtimePart.assert({ this.runtimePart.assert({
...this.runtimePart.props, ...this.runtimePart.props,
'data-invalid': boolToEmptyStrOrUndef(this.provider.isInvalid),
'data-disabled': boolToEmptyStrOrUndef(this.provider.isDisabled),
onclick: this.onclick onclick: this.onclick
} as const) } as const)
); );

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.