readd list input and start of changelog

Author: mProjectsCode

CHANGELOG.md

@@ -1,5 +1,31 @@
 # Obsidian Meta Bind Changelog
 
+
+# Unreleased
+
+Breaking Changes
+
+- 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
+
+Changes
+- Rewrote all Input Fields to fix Input Fields sometimes overriding frontmatter when changing the frontmatter manually in edit mode
+
 # 0.6.3
 
 Bug Fixes

src/inputFields/_new/NewInputFieldFactory.ts

@@ -15,6 +15,7 @@ import { EditorIPF } from './fields/Editor/EditorIPF';
 import { ProgressBarIPF } from './fields/ProgressBar/ProgressBarIPF';
 import { InlineSelectIPF } from './fields/InlineSelect/InlineSelectIPF';
 import { ImageSuggesterIPF } from './fields/ImageSuggester/ImageSuggesterIPF';
+import { ListIPF } from './fields/List/ListIPF';
 
 export type NewInputField =
 	| ToggleIPF
@@ -29,7 +30,8 @@ export type NewInputField =
 	| EditorIPF
 	| ProgressBarIPF
 	| InlineSelectIPF
-	| ImageSuggesterIPF;
+	| ImageSuggesterIPF
+	| ListIPF;
 
 export class NewInputFieldFactory {
 	plugin: IPlugin;
@@ -77,6 +79,8 @@ export class NewInputFieldFactory {
 			return new InlineSelectIPF(renderChild);
 		} else if (type === InputFieldType.IMAGE_SUGGESTER) {
 			return new ImageSuggesterIPF(renderChild);
+		} else if (type === InputFieldType.LIST) {
+			return new ListIPF(renderChild);
 		}
 
 		return undefined;

src/inputFields/_new/fields/List/ListComponent.svelte

@@ -0,0 +1,65 @@
+<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';
+
+	export let value: MBLiteral[];
+	export let limit: number | undefined;
+	export let placeholder: string;
+	export let onValueChange: (value: MBLiteral[]) => void;
+
+	let addValue: string = '';
+
+	export function setValue(v: MBLiteral[]): void {
+		value = v;
+	}
+
+	function add() {
+		value.push(addValue);
+		// call with copy of array
+		onValueChange(value);
+		addValue = '';
+		// tell svelte to update
+		value = value;
+	}
+
+	function remove(i: number) {
+		value.splice(i, 1);
+		// call with copy of array
+		onValueChange(value);
+		// tell svelte to update
+		value = value;
+	}
+
+	function getLimitString(length: number, limit: number) {
+		const limitStr = limit.toString();
+		const lengthStr = length.toString().padStart(limitStr.length, '0');
+		return `${lengthStr}/${limitStr}`;
+	}
+</script>
+
+<div class='mb-list-items'>
+	{#each value as entry, i}
+		<div class='mb-list-item'>
+			<span>{entry}</span>
+			<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'>
+	<input type='text' tabindex='0' placeholder={placeholder} bind:value={addValue} maxlength={limit}>
+	{#if limit !== undefined}
+		<span class={`mb-content-limit-indicator ${value.length > limit ? 'mb-content-limit-indicator-overflow' : ''}`} >{getLimitString(value.length, limit)}</span>
+	{/if}
+	<Button on:click={() => add()} disabled={!addValue}>
+		<Icon iconName='plus' />
+	</Button>
+</div>
+

src/inputFields/_new/fields/List/ListIPF.ts

@@ -0,0 +1,39 @@
+import { NewAbstractInputField } from '../../NewAbstractInputField';
+import { type MBLiteral, parseUnknownToLiteralArray } from '../../../../utils/Utils';
+import { type InputFieldMDRC } from '../../../../renderChildren/InputFieldMDRC';
+import { InputFieldArgumentType } from '../../../../parsers/inputFieldParser/InputFieldConfigs';
+import { type SvelteComponent } from 'svelte';
+import ListComponent from './ListComponent.svelte';
+
+export class ListIPF 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 ListComponent;
+	}
+
+	protected rawMapValue(value: MBLiteral[]): MBLiteral[] {
+		return value;
+	}
+
+	protected rawReverseMapValue(value: MBLiteral[]): MBLiteral[] | undefined {
+		return value;
+	}
+
+	protected getMountArgs(): Record<string, unknown> {
+		return {
+			placeholder: this.renderChild.getArgument(InputFieldArgumentType.PLACEHOLDER)?.value ?? 'New Entry...',
+			limit: this.renderChild.getArgument(InputFieldArgumentType.LIMIT)?.value,
+		};
+	}
+}