the fixing part 2

Author: mProjectsCode

exampleVault/Input Fields/Date and Time.md

@@ -1,6 +1,6 @@
 ---
 time: 14:12
-date2: 
+date2: 2023-10-21
 date1: 2023-06-08
 ---
 

exampleVault/Input Fields/Select and Multi Select.md

@@ -1,10 +1,17 @@
 ---
 select: 1
+select2: false
+select3: 3
 multiSelect:
   - option 1
   - option 3
-select2: false
-select3: 3
+multiSelect2:
+  - option 3
+  - option 1
+multiSelect3:
+  - 
+  - false
+  - 1
 ---
 
 ### Select
@@ -38,12 +45,32 @@ showcase
 ```
 
 ### Multi Select
+
 ```meta-bind
 INPUT[multi_select(
 option(option 1), 
 option(option 2), 
 option(option 3), 
 showcase
 ):multiSelect]
+```
+
+```meta-bind
+INPUT[multiSelect(
+option(option 1), 
+option(option 2), 
+option(option 3), 
+option(option 3), 
+option(option 2), 
+showcase
+):multiSelect2]
+```
 
+```meta-bind
+INPUT[multiSelect(
+option(1, option 1), 
+option(false, option 2), 
+option(null, option 3), 
+showcase
+):multiSelect3]
 ```

src/inputFields/_new/NewAbstractInputField.ts

@@ -68,10 +68,39 @@ export abstract class NewAbstractInputField<MetadataValueType, ComponentValueTyp
 		return this.rawMapValue(value);
 	}
 
-	private getValue(): MetadataValueType {
+	/**
+	 * Get the metadata value that the input field currently has.
+	 */
+	public getValue(): MetadataValueType {
 		return this.signal.get();
 	}
 
+	/**
+	 * Get the internal representation of the metadata value that the input field currently has.
+	 */
+	public getInternalValue(): ComponentValueType {
+		return this.reverseMapValue(this.getValue());
+	}
+
+	/**
+	 * Set the value of this input field as if the user updated the field.
+	 *
+	 * @param value
+	 */
+	public setValue(value: MetadataValueType): void {
+		this.signal.set(value);
+		this.notifyListeners(value);
+	}
+
+	/**
+	 * Set the value of this input field as if the user updated the field.
+	 *
+	 * @param value
+	 */
+	public setInternalValue(value: ComponentValueType): void {
+		this.setValue(this.mapValue(value));
+	}
+
 	private getDefaultValue(): MetadataValueType {
 		const defaultValueArgument = this.renderChild.getArgument(InputFieldArgumentType.DEFAULT_VALUE) as DefaultValueInputFieldArgument | undefined;
 		if (!defaultValueArgument) {

src/inputFields/_new/NewInputFieldFactory.ts

@@ -7,8 +7,10 @@ import { Text } from './fields/Text/Text';
 import { Slider } from './fields/Slider/Slider';
 import { TextArea } from './fields/TextArea/TextArea';
 import { Select } from './fields/Select/Select';
+import { MultiSelect } from './fields/MultiSelect/MultiSelect';
+import { DatePicker } from './fields/DatePicker/DatePicker';
 
-export type NewInputField = Toggle | Slider | Text | TextArea | Select;
+export type NewInputField = Toggle | Slider | Text | TextArea | Select | MultiSelect | DatePicker;
 
 export class NewInputFieldFactory {
 	plugin: IPlugin;
@@ -22,6 +24,8 @@ export class NewInputFieldFactory {
 			this.checkRenderChildTypeAllowed(type, renderChildType);
 		}
 
+		// Skipped: Date, Time
+
 		if (type === InputFieldType.TOGGLE) {
 			return new Toggle(renderChild);
 		} else if (type === InputFieldType.SLIDER) {
@@ -34,6 +38,14 @@ export class NewInputFieldFactory {
 			return new TextArea(renderChild);
 		} else if (type === InputFieldType.SELECT) {
 			return new Select(renderChild);
+		} else if (type === InputFieldType.MULTI_SELECT) {
+			return new MultiSelect(renderChild);
+		} else if (type === InputFieldType.MULTI_SELECT_DEPRECATED) {
+			return new MultiSelect(renderChild);
+		} else if (type === InputFieldType.DATE_PICKER) {
+			return new DatePicker(renderChild);
+		} else if (type === InputFieldType.DATE_PICKER_DEPRECATED) {
+			return new DatePicker(renderChild);
 		}
 
 		return undefined;

src/inputFields/_new/fields/DatePicker/DatePicker.ts

@@ -0,0 +1,70 @@
+import { NewAbstractInputField } from '../../NewAbstractInputField';
+import { OptionInputFieldArgument } from '../../../../inputFieldArguments/arguments/OptionInputFieldArgument';
+import { InputFieldMDRC } from '../../../../renderChildren/InputFieldMDRC';
+import { InputFieldArgumentType } from '../../../InputFieldConfigs';
+import { SvelteComponent } from 'svelte';
+import { moment } from 'obsidian';
+import DatePickerComponent from './DatePickerComponent.svelte';
+import { DateParser } from '../../../../parsers/DateParser';
+import { DatePickerInputModal } from './DatePickerInputModal';
+
+export class DatePicker extends NewAbstractInputField<string | null, moment.Moment | null> {
+	options: OptionInputFieldArgument[];
+
+	constructor(renderChild: InputFieldMDRC) {
+		super(renderChild);
+
+		this.options = this.renderChild.getArguments(InputFieldArgumentType.OPTION) as OptionInputFieldArgument[];
+	}
+
+	protected filterValue(value: any): string | null | undefined {
+		if (value === null) {
+			return null;
+		}
+		if (value === undefined || typeof value !== 'string') {
+			return undefined;
+		}
+		const date = DateParser.parse(value);
+		if (date.isValid()) {
+			return DateParser.stringify(date);
+		} else {
+			return undefined;
+		}
+	}
+
+	protected getFallbackDefaultValue(): moment.Moment {
+		return DateParser.getDefaultDate();
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		return DatePickerComponent;
+	}
+
+	protected rawMapValue(value: moment.Moment | null): string | null {
+		if (value === null) {
+			return null;
+		}
+		return DateParser.stringify(value);
+	}
+
+	protected rawReverseMapValue(value: string | null): moment.Moment | null | undefined {
+		if (value === null) {
+			return null;
+		}
+		const date = DateParser.parse(value);
+		if (date.isValid()) {
+			return date;
+		} else {
+			return undefined;
+		}
+	}
+
+	protected getMountArgs(): Record<string, any> {
+		return {
+			dateFormat: this.renderChild.plugin.settings.preferredDateFormat,
+			showDatePicker: (): void => {
+				new DatePickerInputModal(this.renderChild.plugin.app, this).open();
+			},
+		};
+	}
+}

src/inputFields/_new/fields/DatePicker/DatePickerComponent.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type {Moment} from 'moment';
+	import Icon from '../../../../utils/Icon.svelte';
+
+	export let value: Moment | null;
+	export let dateFormat: string;
+	export let showDatePicker: () => void;
+	export let onValueChange: (value: Moment | null) => void;
+
+	export function setValue(v: Moment | null): void {
+		value = v;
+	}
+
+	function datePicker(event: MouseEvent) {
+		showDatePicker();
+	}
+
+	function datePickerKey(event: KeyboardEvent) {
+		if (event.key === ' ') {
+			showDatePicker();
+		}
+	}
+</script>
+
+<style>
+    .date-picker-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;
+    }
+
+    .date-picker-text {
+        display: inline-block;
+    }
+</style>
+
+<div
+	class="date-picker-input"
+	on:click={datePicker}
+	on:keydown={datePickerKey}
+	role='button'
+	tabindex='0'
+>
+	<div class="date-picker-text">
+		<span>{value ? value.format(dateFormat) : "none"}</span>
+	</div>
+	<Icon iconName="calendar"/>
+</div>

src/inputFields/_new/fields/DatePicker/DatePickerInputModal.ts

@@ -0,0 +1,31 @@
+import { App, Modal } from 'obsidian';
+import DatePickerInput from '../../../fields/DatePicker/DatePicker.svelte';
+import { DatePicker } from './DatePicker';
+import { Moment } from 'moment/moment';
+
+export class DatePickerInputModal extends Modal {
+	datePickerInput: DatePickerInput | undefined;
+	datePicker: DatePicker;
+
+	constructor(app: App, datePicker: DatePicker) {
+		super(app);
+		this.datePicker = datePicker;
+	}
+
+	public onOpen(): void {
+		this.datePickerInput = new DatePickerInput({
+			target: this.contentEl,
+			props: {
+				selectedDate: this.datePicker.getInternalValue(),
+				dateChangeCallback: (value: Moment | null) => {
+					this.datePicker.setInternalValue(value);
+					this.close();
+				},
+			},
+		});
+	}
+
+	public onClose(): void {
+		this.datePickerInput?.$destroy();
+	}
+}

src/inputFields/_new/fields/MultiSelect/MultiSelect.ts

@@ -0,0 +1,49 @@
+import { NewAbstractInputField } from '../../NewAbstractInputField';
+import { isLiteral, MBLiteral } from '../../../../utils/Utils';
+import { OptionInputFieldArgument } from '../../../../inputFieldArguments/arguments/OptionInputFieldArgument';
+import { InputFieldMDRC } from '../../../../renderChildren/InputFieldMDRC';
+import { InputFieldArgumentType } from '../../../InputFieldConfigs';
+import { SvelteComponent } from 'svelte';
+import MultiSelectComponent from './MultiSelectComponent.svelte';
+
+export class MultiSelect extends NewAbstractInputField<MBLiteral[], MBLiteral[]> {
+	options: OptionInputFieldArgument[];
+
+	constructor(renderChild: InputFieldMDRC) {
+		super(renderChild);
+
+		this.options = this.renderChild.getArguments(InputFieldArgumentType.OPTION) as OptionInputFieldArgument[];
+	}
+
+	protected filterValue(value: any): MBLiteral[] | undefined {
+		if (value === null || value === undefined) {
+			return undefined;
+		} else if (Array.isArray(value)) {
+			return value;
+		} else {
+			return [value];
+		}
+	}
+
+	protected getFallbackDefaultValue(): MBLiteral[] {
+		return [];
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		return MultiSelectComponent;
+	}
+
+	protected rawMapValue(value: MBLiteral[]): MBLiteral[] {
+		return value;
+	}
+
+	protected rawReverseMapValue(value: MBLiteral[]): MBLiteral[] | undefined {
+		return value;
+	}
+
+	protected getMountArgs(): Record<string, any> {
+		return {
+			options: this.options,
+		};
+	}
+}

src/inputFields/_new/fields/MultiSelect/MultiSelectComponent.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import {MBLiteral, stringifyLiteral} from '../../../../utils/Utils';
+	import {OptionInputFieldArgument} from '../../../../inputFieldArguments/arguments/OptionInputFieldArgument';
+
+	export let value: MBLiteral[];
+	export let options: OptionInputFieldArgument[];
+	export let onValueChange: (value: MBLiteral[]) => void;
+
+	export function setValue(v: MBLiteral[]): void {
+		value = v;
+	}
+
+	function selectOption(option: MBLiteral) {
+		if (value.includes(option)) {
+			value = value.filter(x => x !== option);
+		} else {
+			value.push(option);
+			value = value;
+		}
+
+		onValueChange(value);
+	}
+
+	function selectOptionOnKey(event: KeyboardEvent, option: MBLiteral) {
+		if (event.key === ' ') {
+			selectOption(option);
+		}
+	}
+</script>
+
+{#each options as option}
+	<div
+		class="mb-select-input-element"
+		class:is-selected={value.includes(option.value)}
+		role="button"
+		tabindex="0"
+		on:click={() => selectOption(option.value)}
+		on:keypress={(event) => selectOptionOnKey(event, option.value)}
+	>
+		{option.name}
+	</div>
+{/each}