diff --git a/src/uix/morfo/components/tags-input.ts b/src/uix/morfo/components/tags-input.ts index ae98d011e..a36964c01 100644 --- a/src/uix/morfo/components/tags-input.ts +++ b/src/uix/morfo/components/tags-input.ts @@ -19,10 +19,10 @@ export const tagsInputMorfo = { role: 'listbox', optional: false, data: [ - { attr: 'data-empty', severity: 'optional' }, - { attr: 'data-disabled', severity: 'optional' }, - { attr: 'data-readonly', severity: 'optional' }, - { attr: 'data-invalid', severity: 'optional' } + { attr: 'data-empty', value: v.propRef('empty'), severity: 'optional' }, + { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }, + { attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' }, + { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' } ], aria: [{ attr: 'aria-orientation', value: v.literal('horizontal') }] }, @@ -31,14 +31,15 @@ export const tagsInputMorfo = { kebab: 'control', kind: 'public', defaultElement: 'div', + role: 'listbox', optional: false, data: [ - { attr: 'data-disabled', severity: 'optional' }, - { attr: 'data-readonly', severity: 'optional' }, - { attr: 'data-invalid', severity: 'optional' }, - { attr: 'data-focus', severity: 'optional' } + { attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }, + { attr: 'data-readonly', value: v.propRef('readonly'), severity: 'optional' }, + { attr: 'data-invalid', value: v.propRef('invalid'), severity: 'optional' }, + { attr: 'data-focus', value: v.propRef('focus'), severity: 'optional' } ], - aria: [] + aria: [{ attr: 'aria-orientation', value: v.literal('horizontal') }] }, { name: 'Input', diff --git a/src/uix/soma/components/tags-input/tags-input-provider.svelte.ts b/src/uix/soma/components/tags-input/tags-input-provider.svelte.ts index a38d4e8ac..addc69a4a 100644 --- a/src/uix/soma/components/tags-input/tags-input-provider.svelte.ts +++ b/src/uix/soma/components/tags-input/tags-input-provider.svelte.ts @@ -61,12 +61,21 @@ export class TagsInputProvider { private constructor(opts: TagsInputOpts) { this.opts = opts; this.soma = Soma.require(); - this.runtime = this.soma.runtime(tagsInputMorfo, {}); + this.runtime = this.soma.runtime(tagsInputMorfo, { + props: { + empty: () => this.isEmpty, + disabled: () => this.opts.disabled.current, + readonly: () => this.opts.readonly.current, + invalid: () => this.opts.invalid.current, + focus: () => this.highlightedIndex === -1 + } + }); this.runtimePart = this.runtime.part('provider', { id: opts.id, ref: opts.ref, owner: this, - context: TagsInputProvider.ctx + context: TagsInputProvider.ctx, + syncAttrs: true }); } @@ -200,11 +209,7 @@ export class TagsInputProvider { readonly props = $derived.by(() => this.runtimePart.assert({ - ...this.runtimePart.props, - 'data-empty': boolToEmptyStrOrUndef(this.isEmpty), - 'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current), - 'data-readonly': boolToEmptyStrOrUndef(this.opts.readonly.current), - 'data-invalid': boolToEmptyStrOrUndef(this.opts.invalid.current) + ...this.runtimePart.props } as const) ); } @@ -228,7 +233,8 @@ export class TagsInputControlProvider { this.runtimePart = this.provider.runtime.part('control', { id: opts.id, ref: opts.ref, - owner: this + owner: this, + syncAttrs: true }); } @@ -240,12 +246,6 @@ export class TagsInputControlProvider { readonly props = $derived.by(() => this.runtimePart.assert({ ...this.runtimePart.props, - role: 'listbox' as const, - 'aria-orientation': 'horizontal' as const, - 'data-disabled': boolToEmptyStrOrUndef(this.provider.opts.disabled.current), - 'data-readonly': boolToEmptyStrOrUndef(this.provider.opts.readonly.current), - 'data-invalid': boolToEmptyStrOrUndef(this.provider.opts.invalid.current), - 'data-focus': boolToEmptyStrOrUndef(this.provider.highlightedIndex === -1), onclick: this.onclick } as const) );