some more input field tweaks

Author: mProjectsCode

exampleVault/Input Fields/Progress Bar.md

@@ -21,3 +21,6 @@ INPUT[progressBar(showcase, minValue(0), maxValue(10), stepSize(-1)):progress3]
 INPUT[progressBar(showcase, minValue(0), maxValue(10), stepSize(0.1)):progress4]
 ```
 
+```meta-bind
+INPUT[progressBar]
+```

exampleVault/Input Fields/Select and Multi Select.md

@@ -1,17 +1,17 @@
 ---
-select: 
-select2: false
+select: 1
 select3: 2
 multiSelect:
   - option 1
   - option 3
 multiSelect2:
-  - option 3
   - option 1
+  - option 3
 multiSelect3:
+  - 1
   - 
   - false
-  - 1
+select2: false
 ---
 
 ### Select

packages/core/src/fields/inputFields/fields/DatePicker/DatePickerComponent.svelte

@@ -28,23 +28,3 @@
 	<span class="date-picker-text">{value ? value.format(dateFormat) : 'none'}</span>
 	<Icon plugin={plugin} iconName="calendar" />
 </div>
-
-<style>
-	.date-picker-input {
-		background: var(--background-modifier-form-field);
-		border-radius: var(--mb-border-radius);
-		border: var(--mb-border-width) solid var(--background-modifier-border);
-		padding: 5px 5px 5px 7px;
-		cursor: pointer;
-		position: relative;
-		color: var(--text-normal);
-		display: inline-flex;
-		align-items: center;
-		gap: 5px;
-		font-size: var(--font-ui-small);
-	}
-
-	.date-picker-text {
-		display: inline-block;
-	}
-</style>

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

@@ -63,6 +63,18 @@
 			});
 		}
 
+		menuActions.push({
+			name: 'Copy image path',
+			icon: 'copy',
+			onclick: () => {
+				const imagePath = value[index];
+
+				navigator.clipboard.writeText(imagePath).then(() => {
+					plugin.internal.showNotice('Image path copied to clipboard');
+				});
+			},
+		});
+
 		menuActions.push({
 			name: 'Remove',
 			icon: 'x',
@@ -76,13 +88,10 @@
 
 <div class="mb-image-card-grid">
 	{#each value as image, i}
-		<div class="mb-image-card">
+		<div class="mb-image-card" on:contextmenu={e => openContextMenuForElement(e, i)}>
 			<img class="mb-image-card-image" src={plugin.internal.imagePathToUri(image)} alt={image} />
 			<div class="mb-image-card-footer">
 				<span>{image}</span>
-				<Button variant={ButtonStyleType.PLAIN} on:click={e => openContextMenuForElement(e, i)}>
-					<Icon iconName="more-vertical" plugin={plugin} />
-				</Button>
 			</div>
 		</div>
 	{/each}

packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterCard.svelte

@@ -20,5 +20,7 @@
 	tabindex="0"
 >
 	<img class="mb-image-card-image" src={plugin.internal.imagePathToUri(image)} alt={image} />
-	<span class="mb-image-card-text">{image}</span>
+	<div class="mb-image-card-footer">
+		<span>{image}</span>
+	</div>
 </div>

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

@@ -96,11 +96,8 @@
 
 <div class="mb-inline-list">
 	{#each value as entry, i}
-		<div class="mb-inline-list-item">
+		<div class="mb-inline-list-item" on:contextmenu={e => openContextMenuForElement(e, i)}>
 			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
-			<Button variant={ButtonStyleType.PLAIN} on:click={e => openContextMenuForElement(e, i)}>
-				<Icon plugin={plugin} iconName="more-vertical" />
-			</Button>
 		</div>
 	{/each}
 	<div class="mb-inline-list-add" on:click={() => showInput()} on:keydown={inputKey} role="button" tabindex="0">

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

@@ -100,11 +100,8 @@
 
 <div class="mb-inline-list">
 	{#each value as entry, i}
-		<div class="mb-inline-list-item">
+		<div class="mb-inline-list-item" on:contextmenu={e => openContextMenuForElement(e, i)}>
 			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
-			<Button variant={ButtonStyleType.PLAIN} on:click={e => openContextMenuForElement(e, i)}>
-				<Icon plugin={plugin} iconName="more-vertical" />
-			</Button>
 		</div>
 	{/each}
 	<div class="mb-inline-list-add" on:click={suggest} on:keydown={suggestKey} role="button" tabindex="0">

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

@@ -104,11 +104,8 @@
 
 <div class="mb-list-items">
 	{#each value as entry, i}
-		<div class="mb-list-item">
+		<div class="mb-list-item" on:contextmenu={e => openContextMenuForElement(e, i)}>
 			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
-			<Button variant={ButtonStyleType.PLAIN} on:click={e => openContextMenuForElement(e, i)}>
-				<Icon plugin={plugin} iconName="more-vertical" />
-			</Button>
 		</div>
 	{:else}
 		<span class="mb-list-empty">Empty</span>
@@ -118,7 +115,18 @@
 	{#if multiLine}
 		<textarea tabindex="0" placeholder={placeholder} bind:value={addValue} maxlength={limit} />
 	{:else}
-		<input type="text" tabindex="0" placeholder={placeholder} bind:value={addValue} maxlength={limit} />
+		<input
+			type="text"
+			tabindex="0"
+			placeholder={placeholder}
+			bind:value={addValue}
+			maxlength={limit}
+			on:keyup={e => {
+				if (e.key === 'Enter' && addValue.length > 0) {
+					add();
+				}
+			}}
+		/>
 	{/if}
 	{#if limit !== undefined}
 		<span class={`mb-content-limit-indicator ${value.length > limit ? 'mb-content-limit-indicator-overflow' : ''}`}

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

@@ -80,11 +80,8 @@
 
 <div class="mb-list-items">
 	{#each value as entry, i}
-		<div class="mb-list-item">
+		<div class="mb-list-item" on:contextmenu={e => openContextMenuForElement(e, i)}>
 			<LiteralRenderComponent value={entry}></LiteralRenderComponent>
-			<Button variant={ButtonStyleType.PLAIN} on:click={e => openContextMenuForElement(e, i)}>
-				<Icon plugin={plugin} iconName="more-vertical" />
-			</Button>
 		</div>
 	{:else}
 		<span class="mb-list-empty">Empty</span>

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

@@ -33,13 +33,19 @@
 
 {#each options as option}
 	<div
-		class="mb-select-input-element"
+		class="mb-select-input-element mb-mod-multi"
 		class:is-selected={value.includes(option.value)}
 		role="button"
 		tabindex="0"
-		on:click={() => selectOption(option.value)}
+		on:click={e => {
+			if (e.target instanceof HTMLInputElement) {
+				return;
+			}
+			selectOption(option.value);
+		}}
 		on:keypress={event => selectOptionOnKey(event, option.value)}
 	>
+		<input type="checkbox" checked={value.includes(option.value)} on:input={() => selectOption(option.value)} />
 		<LiteralRenderComponent value={option.name}></LiteralRenderComponent>
 	</div>
 {/each}