implemented #101

Author: mProjectsCode

exampleVault/Input Fields/Inline Select.md

@@ -1,6 +1,8 @@
 ---
 select: a
+select2: "2"
 ---
 
-`INPUT[inlineSelect(option(a), option(b)):select]`
+`INPUT[inlineSelect(option(a), option(b), showcase):select]`
 
+`INPUT[inlineSelect(option(1, a), option(2, b), showcase):select2]`

exampleVault/Input Fields/Select and Multi Select.md

@@ -1,5 +1,5 @@
 ---
-select: option 2
+select: "1"
 multiSelect:
   - option 1
   - option 3
@@ -8,9 +8,9 @@ multiSelect:
 ### Select
 ```meta-bind
 INPUT[select(
-option(option 1), 
-option(option 2), 
-option(option 3), 
+option(1, option 1), 
+option(2, option 2), 
+option(3, option 3), 
 showcase
 ):select]
 ```

src/inputFieldArguments/arguments/OptionInputFieldArgument.ts

@@ -1,5 +1,6 @@
 import { AbstractInputFieldArgument } from '../AbstractInputFieldArgument';
 import { InputFieldArgumentType, InputFieldType } from '../../parsers/InputFieldDeclarationParser';
+import { ErrorLevel, MetaBindArgumentError } from '../../utils/errors/MetaBindErrors';
 
 export class OptionInputFieldArgument extends AbstractInputFieldArgument {
 	identifier: InputFieldArgumentType = InputFieldArgumentType.OPTION;
@@ -11,10 +12,21 @@ export class OptionInputFieldArgument extends AbstractInputFieldArgument {
 		InputFieldType.INLINE_SELECT,
 	];
 	value: string = '';
+	name: string = '';
 	requiresValue: boolean = true;
 	allowMultiple: boolean = true;
 
 	parseValue(valueStr: string): void {
-		this.value = valueStr;
+		const valueParts: string[] = valueStr.split(',').map(x => x.trim());
+
+		if (valueParts.length === 1) {
+			this.value = valueParts[0];
+			this.name = valueParts[0];
+		} else if (valueParts.length === 2) {
+			this.value = valueParts[0];
+			this.name = valueParts[1];
+		} else {
+			throw new MetaBindArgumentError(ErrorLevel.WARNING, 'failed to parse option argument value', 'expected there to be either one or two comma seperated values');
+		}
 	}
 }

src/inputFields/InlineSelectInputField.ts

@@ -3,16 +3,17 @@ import { DropdownComponent } from 'obsidian';
 import { ErrorLevel, MetaBindInternalError, MetaBindValueError } from '../utils/errors/MetaBindErrors';
 import { InputFieldMDRC } from '../renderChildren/InputFieldMDRC';
 import { InputFieldArgumentType } from '../parsers/InputFieldDeclarationParser';
+import { OptionInputFieldArgument } from '../inputFieldArguments/arguments/OptionInputFieldArgument';
 
 export class InlineSelectInputField extends AbstractInputField {
 	static allowBlock: boolean = false;
 	selectComponent: DropdownComponent | undefined;
-	options: string[];
+	options: OptionInputFieldArgument[];
 
 	constructor(inputFieldMDRC: InputFieldMDRC) {
 		super(inputFieldMDRC);
 
-		this.options = inputFieldMDRC.getArguments(InputFieldArgumentType.OPTION).map(x => x.value) as string[];
+		this.options = inputFieldMDRC.getArguments(InputFieldArgumentType.OPTION) as OptionInputFieldArgument[];
 	}
 
 	getValue(): string | undefined {
@@ -57,7 +58,7 @@ export class InlineSelectInputField extends AbstractInputField {
 
 		const component = new DropdownComponent(container);
 		for (const option of this.options) {
-			component.addOption(option, option);
+			component.addOption(option.value, option.name);
 		}
 		component.setValue(this.renderChild.getInitialValue());
 		component.onChange(this.onValueChange);

src/inputFields/SelectInputField.ts

@@ -5,6 +5,7 @@ import { InputFieldArgumentType } from '../parsers/InputFieldDeclarationParser';
 import { AbstractInputFieldArgument } from '../inputFieldArguments/AbstractInputFieldArgument';
 import { ErrorLevel, MetaBindInternalError } from '../utils/errors/MetaBindErrors';
 import { InputFieldMDRC } from '../renderChildren/InputFieldMDRC';
+import { OptionInputFieldArgument } from '../inputFieldArguments/arguments/OptionInputFieldArgument';
 
 export class SelectInputField extends AbstractInputField {
 	static allowInline: boolean = false;
@@ -59,11 +60,11 @@ export class SelectInputField extends AbstractInputField {
 		console.debug(`meta-bind | SelectInputField >> render ${this.renderChild.uuid}`);
 		this.container = container;
 
-		const elementArguments: AbstractInputFieldArgument[] = this.renderChild.getArguments(InputFieldArgumentType.OPTION);
+		const optionArguments: OptionInputFieldArgument[] = this.renderChild.getArguments(InputFieldArgumentType.OPTION) as OptionInputFieldArgument[];
 
 		let i = 0;
-		for (const elementArgument of elementArguments) {
-			const selectInputFieldElement = new SelectInputFieldElement(elementArgument.value, container, i, this, false);
+		for (const optionArgument of optionArguments) {
+			const selectInputFieldElement = new SelectInputFieldElement(optionArgument.value, optionArgument.name, container, i, this, false);
 
 			this.elements.push(selectInputFieldElement);
 

src/inputFields/SelectInputFieldElement.ts

@@ -2,6 +2,7 @@ import { SelectInputField } from './SelectInputField';
 
 export class SelectInputFieldElement {
 	value: string;
+	name: string;
 	selectInputField: SelectInputField;
 	readonly id: number;
 	element: HTMLDivElement;
@@ -13,8 +14,9 @@ export class SelectInputFieldElement {
 	private active: boolean;
 	private highlighted: boolean;
 
-	constructor(value: string, parentElement: HTMLElement, id: number, multiSelectInputField: SelectInputField, active: boolean = false) {
+	constructor(value: string, name: string, parentElement: HTMLElement, id: number, multiSelectInputField: SelectInputField, active: boolean = false) {
 		this.value = value;
+		this.name = name;
 		this.id = id;
 		this.active = active;
 		this.highlighted = false;
@@ -91,6 +93,6 @@ export class SelectInputFieldElement {
 	}
 
 	render(): void {
-		this.element.createEl('div', { text: this.value });
+		this.element.createEl('div', { text: this.name });
 	}
 }

src/parsers/InputFieldDeclarationParser.ts

@@ -268,7 +268,12 @@ export class InputFieldDeclarationParser {
 						);
 						continue;
 					}
-					inputFieldArgument.parseValue(argument.value);
+					try {
+						inputFieldArgument.parseValue(argument.value);
+					} catch (e) {
+						errorCollection.add(e);
+						continue;
+					}
 				}
 
 				argumentContainer.add(inputFieldArgument);