readd list suggester ipf

Author: mProjectsCode

CHANGELOG.md

@@ -1,30 +1,30 @@
 # Obsidian Meta Bind Changelog
 
-
 # Unreleased
 
 Breaking Changes
 
-- Renamed all CSS variables to start with `mb-` for consistency
+-   Renamed all CSS variables to start with `mb-` for consistency
 
 New Features
 
-- View Fields can now render as plain text or as markdown e.g.
-  - `VIEW[{a} * {b}]` or `VIEW[{a} * {b}][math]` this does math as before 
-  - `VIEW[this is plain text][text]` this renders as plain text
-  - `VIEW[this is **markdown**][text(renderMarkdown)]` this renders as markdown
-  - `VIEW[this is hidden][text(hidden)]` this does not render
-- View Fields can now save their computed value to another frontmatter property
-  - `VIEW[{a} * {b}][math:c]` will save `a * b` in `c`
-- Meta Bind Table, a way to build an expandable table from an array of objects where each cell is an input or view field
-  - currently only accessible via the JavaScript API
-- New Input Field type `listSuggester` a list where new items are added with a suggester
-- New argument for `suggester`, `useLinks(true | false)` that can be used to turn off the usage of links
-- New `stepSize` argument for `slider` and `progressBar`, thanks @dbarenholz
-- New `limit` argument for `text` and `textArea`, thanks @dbarenholz
+-   View Fields can now render as plain text or as markdown e.g.
+    -   `VIEW[{a} * {b}]` or `VIEW[{a} * {b}][math]` this does math as before
+    -   `VIEW[this is plain text][text]` this renders as plain text
+    -   `VIEW[this is **markdown**][text(renderMarkdown)]` this renders as markdown
+    -   `VIEW[this is hidden][text(hidden)]` this does not render
+-   View Fields can now save their computed value to another frontmatter property
+    -   `VIEW[{a} * {b}][math:c]` will save `a * b` in `c`
+-   Meta Bind Table, a way to build an expandable table from an array of objects where each cell is an input or view field
+    -   currently only accessible via the JavaScript API
+-   New Input Field type `listSuggester` a list where new items are added with a suggester
+-   New argument for `suggester`, `useLinks(true | false)` that can be used to turn off the usage of links
+-   New `stepSize` argument for `slider` and `progressBar`, thanks @dbarenholz
+-   New `limit` argument for `text` and `textArea`, thanks @dbarenholz
 
 Changes
-- Rewrote all Input Fields to fix Input Fields sometimes overriding frontmatter when changing the frontmatter manually in edit mode
+
+-   Rewrote all Input Fields to fix Input Fields sometimes overriding frontmatter when changing the frontmatter manually in edit mode
 
 # 0.6.3
 

exampleVault/Input Fields/List.md

@@ -5,8 +5,8 @@ list:
   - berries
 list2:
   - "[[Other/Example Notes/Example Note with Image.md|Example Note with Image]]"
-  - something
   - "[[Other/Example Notes/Example Note with Callouts.md|Example Note with Callouts]]"
+  - something
 list3:
   - Example Note with Image
   - Example Note with Callouts

src/inputFields/_new/NewInputFieldFactory.ts

@@ -16,6 +16,7 @@ import { ProgressBarIPF } from './fields/ProgressBar/ProgressBarIPF';
 import { InlineSelectIPF } from './fields/InlineSelect/InlineSelectIPF';
 import { ImageSuggesterIPF } from './fields/ImageSuggester/ImageSuggesterIPF';
 import { ListIPF } from './fields/List/ListIPF';
+import { ListSuggesterIPF } from './fields/ListSuggester/ListSuggesterIPF';
 
 export type NewInputField =
 	| ToggleIPF
@@ -31,7 +32,8 @@ export type NewInputField =
 	| ProgressBarIPF
 	| InlineSelectIPF
 	| ImageSuggesterIPF
-	| ListIPF;
+	| ListIPF
+	| ListSuggesterIPF;
 
 export class NewInputFieldFactory {
 	plugin: IPlugin;
@@ -45,7 +47,7 @@ export class NewInputFieldFactory {
 			this.checkRenderChildTypeAllowed(type, renderChildType);
 		}
 
-		// Skipped: Date, Time, Image Suggester
+		// Skipped: Date, Time, List Suggester
 
 		if (type === InputFieldType.TOGGLE) {
 			return new ToggleIPF(renderChild);
@@ -81,6 +83,8 @@ export class NewInputFieldFactory {
 			return new ImageSuggesterIPF(renderChild);
 		} else if (type === InputFieldType.LIST) {
 			return new ListIPF(renderChild);
+		} else if (type === InputFieldType.LIST_SUGGESTER) {
+			return new ListSuggesterIPF(renderChild);
 		}
 
 		return undefined;

src/inputFields/_new/fields/ImageSuggester/ImageSuggesterComponent.svelte

@@ -23,8 +23,8 @@
 <style>
     .mb-image-suggest-input {
         background:    var(--background-secondary);
-        border-radius: var(--meta-bind-plugin-border-radius);
-        border:        var(--meta-bind-plugin-border-width) solid var(--background-modifier-border);
+        border-radius: var(--mb-border-radius);
+        border:        var(--mb-border-width) solid var(--background-modifier-border);
         padding:       var(--size-4-2);
         width:         100%;
     }

src/inputFields/_new/fields/ListSuggester/ListSuggesterComponent.svelte

@@ -0,0 +1,78 @@
+<script lang='ts'>
+	import { MBLiteral } from '../../../../utils/Utils';
+	import {
+		OptionInputFieldArgument
+	} from '../../../../fieldArguments/inputFieldArguments/arguments/OptionInputFieldArgument';
+	import { Button, TextInput } from 'obsidian-svelte';
+	import Icon from '../../../../utils/Icon.svelte';
+	import { isMdLink, parseMdLink } from '../../../../parsers/MarkdownLinkParser';
+	import LinkComponent from '../../../../utils/LinkComponent.svelte';
+
+	export let value: MBLiteral[];
+	export let showSuggester: () => void;
+	export let onValueChange: (value: MBLiteral[]) => void;
+
+	export function setValue(v: MBLiteral[]): void {
+		value = v;
+	}
+
+	export function addValue(v: MBLiteral): void {
+		value.push(v);
+
+		value = value;
+	}
+
+	function remove(i: number) {
+		value.splice(i, 1);
+		// call with copy of array
+		onValueChange(value);
+		// tell svelte to update
+		value = value;
+	}
+
+	function suggest(event: MouseEvent): void {
+		// don't fire the event if user clicked on the link
+		if (!(event.target instanceof HTMLAnchorElement)) {
+			showSuggester();
+		}
+	}
+
+	function suggestKey(event: KeyboardEvent): void {
+		if (event.key === ' ') {
+			showSuggester();
+		}
+	}
+</script>
+
+<div class='mb-list-items'>
+	{#each value as entry, i}
+		<div class='mb-list-item'>
+			{#if isMdLink(`${entry}`)}
+                <span>
+                    <LinkComponent mdLink={parseMdLink(`${entry}`)}></LinkComponent>
+                </span>
+			{:else}
+				<span>{entry}</span>
+			{/if}
+			<Button on:click={() => remove(i)}>
+				<Icon iconName='x' />
+			</Button>
+		</div>
+	{:else}
+		<span class='mb-list-empty'>Empty</span>
+	{/each}
+</div>
+<div class='mb-list-input'>
+	<div
+		class='mb-suggest-input'
+		on:click={suggest}
+		on:keydown={suggestKey}
+		role='button'
+		tabindex='0'>
+		<div class='mb-suggest-text'>
+			<span>Add Element...</span>
+		</div>
+		<Icon iconName='list' />
+	</div>
+</div>
+

src/inputFields/_new/fields/ListSuggester/ListSuggesterIPF.ts

@@ -0,0 +1,46 @@
+import { NewAbstractInputField } from '../../NewAbstractInputField';
+import { type MBLiteral, parseUnknownToLiteralArray } from '../../../../utils/Utils';
+import { type InputFieldMDRC } from '../../../../renderChildren/InputFieldMDRC';
+import { type SvelteComponent } from 'svelte';
+import ListSuggesterComponent from './ListSuggesterComponent.svelte';
+import { openSuggesterModalForInputField } from '../Suggester/SuggesterHelper';
+
+export class ListSuggesterIPF extends NewAbstractInputField<MBLiteral[], MBLiteral[]> {
+	constructor(renderChild: InputFieldMDRC) {
+		super(renderChild);
+	}
+
+	protected filterValue(value: unknown): MBLiteral[] | undefined {
+		return parseUnknownToLiteralArray(value);
+	}
+
+	protected getFallbackDefaultValue(): MBLiteral[] {
+		return [];
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		return ListSuggesterComponent;
+	}
+
+	protected rawMapValue(value: MBLiteral[]): MBLiteral[] {
+		return value;
+	}
+
+	protected rawReverseMapValue(value: MBLiteral[]): MBLiteral[] | undefined {
+		return value;
+	}
+
+	protected getMountArgs(): Record<string, unknown> {
+		return {
+			showSuggester: () => this.openModal(),
+		};
+	}
+
+	openModal(): void {
+		openSuggesterModalForInputField(this, selected => {
+			const value = this.getInternalValue();
+			value.push(selected.value);
+			this.setInternalValue(value);
+		});
+	}
+}

src/inputFields/_new/fields/Suggester/SuggesterComponent.svelte

@@ -46,32 +46,13 @@
 	}
 </script>
 
-<style>
-    .suggest-input {
-        background:    var(--background-secondary);
-        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;
-    }
-
-    .suggest-text {
-        display: inline-block;
-    }
-</style>
-
 <div
-	class='suggest-input'
+	class='mb-suggest-input'
 	on:click={openSuggester}
 	on:keydown={openSuggesterOnKey}
 	role='button'
 	tabindex='0'>
-	<div class='suggest-text'>
+	<div class='mb-suggest-text'>
 		{#if isLink}
 			<LinkComponent bind:mdLink={mdLink}></LinkComponent>
 		{:else}

src/inputFields/_new/fields/Suggester/SuggesterHelper.ts

@@ -6,6 +6,7 @@ import { Notice } from 'obsidian';
 import { InputFieldArgumentType } from '../../../../parsers/inputFieldParser/InputFieldConfigs';
 import { SuggesterInputModal } from './SuggesterInputModal';
 import { type SuggesterIPF } from './SuggesterIPF';
+import { ListSuggesterIPF } from '../ListSuggester/ListSuggesterIPF';
 
 export class SuggesterOption<T> {
 	value: T;
@@ -64,7 +65,7 @@ export function getSuggesterOptions(
 	return options;
 }
 
-export function getSuggesterOptionsForInputField(inputField: SuggesterIPF): SuggesterOption<MBLiteral>[] {
+export function getSuggesterOptionsForInputField(inputField: SuggesterIPF | ListSuggesterIPF): SuggesterOption<MBLiteral>[] {
 	const app = inputField.renderChild.plugin.app;
 	const dv = getAPI(app);
 	const optionArgs = inputField.renderChild.getArguments(InputFieldArgumentType.OPTION);
@@ -74,6 +75,9 @@ export function getSuggesterOptionsForInputField(inputField: SuggesterIPF): Sugg
 	return getSuggesterOptions(dv, inputField.renderChild.filePath, optionArgs, optionQueryArgs, useLinksArgs === undefined || useLinksArgs.value);
 }
 
-export function openSuggesterModalForInputField(inputField: SuggesterIPF, selectCallback: (selected: SuggesterOption<MBLiteral>) => void): void {
+export function openSuggesterModalForInputField(
+	inputField: SuggesterIPF | ListSuggesterIPF,
+	selectCallback: (selected: SuggesterOption<MBLiteral>) => void,
+): void {
 	new SuggesterInputModal(inputField.renderChild.plugin.app, getSuggesterOptionsForInputField(inputField), selectCallback).open();
 }

src/inputFields/fields/listSuggest/ListSuggestInput.svelte

@@ -1,3 +1,4 @@
+<script src='ListSuggestInputField.ts'></script>
 <script lang='ts'>
 	import Icon from '../../../utils/Icon.svelte';
 	import { Button } from 'obsidian-svelte';

styles.css

@@ -61,7 +61,7 @@ div.mb-view-wrapper {
 /* Text Input */
 .mb-content-limit-indicator {
 	color: var(--text-muted);
-    font-size: var(--font-ui-small);
+	font-size: var(--font-ui-small);
 }
 
 .mb-content-limit-indicator-overflow {
@@ -145,6 +145,24 @@ div.mb-view-wrapper {
 	flex-grow: 1;
 }
 
+/* Suggester Input */
+.mb-suggest-input {
+	background: var(--background-secondary);
+	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;
+}
+
+.mb-suggest-text {
+	display: inline-block;
+}
+
 /* Card */
 .mb-card {
 	padding: var(--size-4-2);