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',
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: []
},

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

@ -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: []
},

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 { 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)
);

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 { 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)
);

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.