proof of concept #475

Author: mProjectsCode

exampleVault/Input Fields/Inline Select.md

@@ -2,7 +2,7 @@
 select: b
 select2: 1
 select3: 2 hours
-select4: 
+select4:
 ---
 
 ```meta-bind

packages/core/src/fields/inputFields/AbstractInputField.ts

@@ -18,6 +18,7 @@ export abstract class AbstractInputField<
 	readonly inputSignal: MappedSignal<unknown, MetadataValueType>;
 
 	private metadataSubscription?: MetadataSubscription;
+	private mountTarget?: HTMLElement;
 
 	constructor(mountable: InputFieldMountable) {
 		super();
@@ -27,7 +28,11 @@ export abstract class AbstractInputField<
 		this.svelteWrapper = new InputFieldSvelteWrapper<ComponentValueType, SvelteExports>(
 			this.plugin,
 			this.getSvelteComponent(),
-			value => this.notifySubscription(this.mapValue(value)),
+			value => {
+				const mappedValue = this.mapValue(value);
+				this.updateDataAttributes(value, mappedValue);
+				this.notifySubscription(mappedValue);
+			},
 		);
 
 		this.inputSignal = new MappedSignal<unknown, MetadataValueType>(
@@ -129,15 +134,32 @@ export abstract class AbstractInputField<
 		}
 	}
 
+	private updateDataAttributes(internalValue: ComponentValueType, metadataValue: MetadataValueType): void {
+		if (this.mountTarget) {
+			this.mountTarget.dataset.internalValue = JSON.stringify(internalValue);
+			this.mountTarget.dataset.metadataValue = JSON.stringify(metadataValue);
+		}
+	}
+
 	protected getMountArgs(): Record<string, unknown> {
 		return {};
 	}
 
 	protected onMount(targetEl: HTMLElement): void {
+		this.mountTarget = targetEl;
+
+		// listener to update the svelte component
 		this.inputSignal.registerListener({
 			callback: value => this.svelteWrapper.setValue(this.reverseMapValue(value)),
 		});
 
+		// listener to update data attributes on the target element
+		this.inputSignal.registerListener({
+			callback: value => {
+				this.updateDataAttributes(this.reverseMapValue(value), value);
+			},
+		});
+
 		const bindTarget = this.mountable.getBindTarget();
 
 		if (bindTarget) {
@@ -153,6 +175,8 @@ export abstract class AbstractInputField<
 	}
 
 	protected onUnmount(): void {
+		this.mountTarget = undefined;
+
 		this.inputSignal.unregisterAllListeners();
 		this.metadataSubscription?.unsubscribe();
 

packages/core/src/fields/inputFields/fields/ProgressBar/ProgressBarComponent.svelte

@@ -125,12 +125,12 @@
 		aria-valuemin={props.minValue}
 		aria-valuemax={props.maxValue}
 		aria-valuenow={value}
-		aria-label={value}
+		aria-label={value.toString()}
 		tabindex="0"
 	></div>
-{#if props.addLabels}
-	<span class="mb-progress-bar-value">{value}</span>
-	<span class="mb-progress-bar-label-left">{props.minValue}</span>
-	<span class="mb-progress-bar-label-right">{props.maxValue}</span>
-{/if}
+	{#if props.addLabels}
+		<span class="mb-progress-bar-value">{value}</span>
+		<span class="mb-progress-bar-label-left">{props.minValue}</span>
+		<span class="mb-progress-bar-label-right">{props.maxValue}</span>
+	{/if}
 </div>

packages/core/src/fields/inputFields/fields/ProgressBar/ProgressBarIPF.ts

@@ -54,7 +54,7 @@ export class ProgressBarIPF extends AbstractInputField<number, number> {
 			minValue: this.minValue,
 			maxValue: this.maxValue,
 			stepSize: this.stepSize,
-			addLabels: (this.mountable.getArgument(InputFieldArgumentType.ADD_LABELS)?.value ?? true) === true ,
+			addLabels: (this.mountable.getArgument(InputFieldArgumentType.ADD_LABELS)?.value ?? true) === true,
 		};
 	}
 }