better data labels

Author: mProjectsCode

packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterComponent.svelte

@@ -3,6 +3,7 @@
 	import type { InputFieldSvelteProps } from 'packages/core/src/fields/inputFields/InputFieldSvelteWrapper';
 	import Button from 'packages/core/src/utils/components/Button.svelte';
 	import type { ContextMenuItemDefinition } from 'packages/core/src/utils/IContextMenu';
+	import { stringifyLiteral } from 'packages/core/src/utils/Literal';
 
 	const props: InputFieldSvelteProps<string[]> & {
 		showSuggester: () => void;
@@ -84,7 +85,7 @@
 
 <div class="mb-image-card-grid">
 	{#each value as image, i}
-		<div class="mb-image-card" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem">
+		<div class="mb-image-card" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem"  data-value={stringifyLiteral(image)}>
 			<img
 				class="mb-image-card-image"
 				src={props.plugin.internal.imagePathToUri(image)}

packages/core/src/fields/inputFields/fields/InlineList/InlineListComponent.svelte

@@ -92,7 +92,7 @@
 
 <div class="mb-inline-list">
 	{#each value as entry, i}
-		<div class="mb-inline-list-item" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem">
+		<div class="mb-inline-list-item" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem" data-value={stringifyLiteral(entry)}>
 			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
 		</div>
 	{/each}

packages/core/src/fields/inputFields/fields/InlineListSuggester/InlineListSuggesterComponent.svelte

@@ -3,7 +3,7 @@
 	import Icon from 'packages/core/src/utils/components/Icon.svelte';
 	import LiteralRenderComponent from 'packages/core/src/utils/components/LiteralRenderComponent.svelte';
 	import type { ContextMenuItemDefinition } from 'packages/core/src/utils/IContextMenu';
-	import type { MBLiteral } from 'packages/core/src/utils/Literal';
+	import { stringifyLiteral, type MBLiteral } from 'packages/core/src/utils/Literal';
 
 	const props: InputFieldSvelteProps<MBLiteral[]> & {
 		showSuggester: () => void;
@@ -95,7 +95,7 @@
 
 <div class="mb-inline-list">
 	{#each value as entry, i}
-		<div class="mb-inline-list-item" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem">
+		<div class="mb-inline-list-item" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem" data-value={stringifyLiteral(entry)}>
 			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
 		</div>
 	{/each}

packages/core/src/fields/inputFields/fields/List/ListComponent.svelte

@@ -99,7 +99,7 @@
 
 <div class="mb-list-items">
 	{#each value as entry, i}
-		<div class="mb-list-item" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem">
+		<div class="mb-list-item" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem" data-value={stringifyLiteral(entry)}>
 			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
 		</div>
 	{:else}

packages/core/src/fields/inputFields/fields/ListSuggester/ListSuggesterComponent.svelte

@@ -4,7 +4,7 @@
 	import Button from 'packages/core/src/utils/components/Button.svelte';
 	import LiteralRenderComponent from 'packages/core/src/utils/components/LiteralRenderComponent.svelte';
 	import type { ContextMenuItemDefinition } from 'packages/core/src/utils/IContextMenu';
-	import type { MBLiteral } from 'packages/core/src/utils/Literal';
+	import { stringifyLiteral, type MBLiteral } from 'packages/core/src/utils/Literal';
 
 	const props: InputFieldSvelteProps<MBLiteral[]> & {
 		showSuggester: () => void;
@@ -70,7 +70,7 @@
 
 <div class="mb-list-items">
 	{#each value as entry, i}
-		<div class="mb-list-item" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem">
+		<div class="mb-list-item" oncontextmenu={e => openContextMenuForElement(e, i)} role="listitem" data-value={stringifyLiteral(entry)}>
 			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
 		</div>
 	{:else}

packages/core/src/fields/inputFields/fields/MultiSelect/MultiSelectComponent.svelte

@@ -2,7 +2,7 @@
 	import type { OptionInputFieldArgument } from 'packages/core/src/fields/fieldArguments/inputFieldArguments/arguments/OptionInputFieldArgument';
 	import type { InputFieldSvelteProps } from 'packages/core/src/fields/inputFields/InputFieldSvelteWrapper';
 	import LiteralRenderComponent from 'packages/core/src/utils/components/LiteralRenderComponent.svelte';
-	import type { MBLiteral } from 'packages/core/src/utils/Literal';
+	import { stringifyLiteral, type MBLiteral } from 'packages/core/src/utils/Literal';
 
 	const props: InputFieldSvelteProps<MBLiteral[]> & {
 		options: OptionInputFieldArgument[];
@@ -44,6 +44,7 @@
 			selectOption(option.value);
 		}}
 		onkeypress={event => selectOptionOnKey(event, option.value)}
+		data-value={stringifyLiteral(option.value)}
 	>
 		<input type="checkbox" checked={value.includes(option.value)} oninput={() => selectOption(option.value)} />
 		<LiteralRenderComponent value={option.name}></LiteralRenderComponent>

packages/core/src/fields/inputFields/fields/Select/SelectComponent.svelte

@@ -2,7 +2,7 @@
 	import type { OptionInputFieldArgument } from 'packages/core/src/fields/fieldArguments/inputFieldArguments/arguments/OptionInputFieldArgument';
 	import type { InputFieldSvelteProps } from 'packages/core/src/fields/inputFields/InputFieldSvelteWrapper';
 	import LiteralRenderComponent from 'packages/core/src/utils/components/LiteralRenderComponent.svelte';
-	import type { MBLiteral } from 'packages/core/src/utils/Literal';
+	import { stringifyLiteral, type MBLiteral } from 'packages/core/src/utils/Literal';
 
 	const props: InputFieldSvelteProps<MBLiteral> & {
 		options: OptionInputFieldArgument[];
@@ -43,6 +43,7 @@
 			selectOption(option.value);
 		}}
 		onkeypress={event => selectOptionOnKey(event, option.value)}
+		data-value={stringifyLiteral(option.value)}
 	>
 		<input type="checkbox" checked={option.value === value} oninput={() => selectOption(option.value)} />
 		<LiteralRenderComponent value={option.name}></LiteralRenderComponent>

packages/core/src/utils/components/LiteralRenderComponent.svelte

@@ -12,13 +12,13 @@
 </script>
 
 {#if typeof parsedValue === 'string'}
-	<span data-value={parsedValue} class="mb-whitespace-pre">{parsedValue}</span>
+	<span class="mb-whitespace-pre">{parsedValue}</span>
 {:else if Array.isArray(parsedValue)}
 	<span>
 		<ListWrapper elements={parsedValue}>
 			{#snippet children(element)}
 				{#if typeof element === 'string'}
-					<span data-value={element}>{element}</span>
+					<span>{element}</span>
 				{:else}
 					<LinkComponent mdLink={element}></LinkComponent>
 				{/if}