add last missing input fields

Author: mProjectsCode

exampleVault/Input Fields/Date and Time.md

@@ -1,7 +1,7 @@
 ---
-time: 14:12
+time: 21:03
 date2: 2023-10-21
-date1: 2023-06-08
+date1: 2023-01-01
 ---
 
 ### Date

exampleVault/Input Fields/Progress Bar.md

@@ -1,10 +1,16 @@
 ---
-progress1: -6
+progress1: -4
+progress2: 0.2
 ---
 
 ```meta-bind
 INPUT[progressBar(showcase, minValue(-10), maxValue(3)):progress1]
 ```
 
 
+```meta-bind
+INPUT[progressBar(showcase, minValue(0), maxValue(1), stepSize(0.1)):progress2]
+```
+
+
 

src/inputFields/_new/NewInputFieldFactory.ts

@@ -17,6 +17,8 @@ import { InlineSelectIPF } from './fields/InlineSelect/InlineSelectIPF';
 import { ImageSuggesterIPF } from './fields/ImageSuggester/ImageSuggesterIPF';
 import { ListIPF } from './fields/List/ListIPF';
 import { ListSuggesterIPF } from './fields/ListSuggester/ListSuggesterIPF';
+import { DateIPF } from './fields/Date/DateIPF';
+import { TimeIPF } from './fields/Time/TimeIPF';
 
 export type NewInputField =
 	| ToggleIPF
@@ -33,7 +35,9 @@ export type NewInputField =
 	| InlineSelectIPF
 	| ImageSuggesterIPF
 	| ListIPF
-	| ListSuggesterIPF;
+	| ListSuggesterIPF
+	| DateIPF
+	| TimeIPF;
 
 export class NewInputFieldFactory {
 	plugin: IPlugin;
@@ -47,7 +51,7 @@ export class NewInputFieldFactory {
 			this.checkRenderChildTypeAllowed(type, renderChildType);
 		}
 
-		// Skipped: Date, Time, List Suggester
+		// Skipped: Date, Time
 
 		if (type === InputFieldType.TOGGLE) {
 			return new ToggleIPF(renderChild);
@@ -85,6 +89,10 @@ export class NewInputFieldFactory {
 			return new ListIPF(renderChild);
 		} else if (type === InputFieldType.LIST_SUGGESTER) {
 			return new ListSuggesterIPF(renderChild);
+		} else if (type === InputFieldType.DATE) {
+			return new DateIPF(renderChild);
+		} else if (type === InputFieldType.TIME) {
+			return new TimeIPF(renderChild);
 		}
 
 		return undefined;

src/inputFields/_new/fields/Date/DateComponent.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import type { moment } from 'obsidian';
+	import { onMount } from 'svelte';
+	import { DateParser } from '../../../../parsers/DateParser';
+
+	export let value: moment.Moment;
+	export let useUsInputOrder: boolean;
+	export let onValueChange: (value: moment.Moment) => void;
+
+	let months: Record<string, string> = {};
+	let days: Record<string, string> = {};
+
+	let year: string;
+	let month: string;
+	let day: string;
+
+	onMount(() => {
+		months = {
+			'0': 'January',
+			'1': 'February',
+			'2': 'March',
+			'3': 'April',
+			'4': 'May',
+			'5': 'June',
+			'6': 'July',
+			'7': 'August',
+			'8': 'September',
+			'9': 'October',
+			'10': 'November',
+			'11': 'December',
+		}
+
+		for (let i = 1; i <= 31; i++) {
+			days[i.toString()] = i.toString();
+		}
+
+		year = value.year().toString();
+		month = value.month().toString();
+		day = value.date().toString();
+	})
+
+	export function setValue(v: moment.Moment): void {
+		value = v;
+
+		year = value.year().toString();
+		month = value.month().toString();
+		day = value.date().toString();
+	}
+
+	function onYearChange(): void {
+		const parseRes = Number.parseInt(year);
+		const yearNumber = Number.isNaN(parseRes) ? DateParser.getDefaultYear() : parseRes;
+
+		value.year(yearNumber);
+		// year = yearNumber.toString();
+
+		onValueChange(value);
+	}
+
+	function onMonthChange(): void {
+		value.month(month);
+
+		const clampedDay = clampDay(value.date());
+
+		value.date(clampedDay);
+		day = clampedDay.toString();
+
+		onValueChange(value);
+	}
+
+	function onDayChange(): void {
+		const parseRes = Number.parseInt(day);
+		const clampedDay = clampDay(parseRes);
+
+		value.date(clampedDay);
+		day = clampedDay.toString();
+
+		onValueChange(value);
+	}
+
+	function clampDay(day: number): number {
+		if (Number.isNaN(day)) {
+			return DateParser.getDefaultDay();
+		} else if (day < 1) {
+			return 1;
+		} else if (day > value.daysInMonth()) {
+			return value.daysInMonth();
+		}
+		return day;
+	}
+</script>
+
+<div class='mb-input-element-group'>
+	{#if useUsInputOrder}
+		<select class='dropdown mb-input-element-group-element' bind:value={month} on:change={() => onMonthChange()}>
+			{#each Object.entries(months) as [_month, _monthName]}
+				<option value={_month}>{_monthName}</option>
+			{/each}
+		</select>
+
+		<select class='dropdown mb-input-element-group-element' bind:value={day} on:change={() => onDayChange()}>
+			{#each Object.values(days) as _day}
+				<option value={_day}>{_day}</option>
+			{/each}
+		</select>
+	{:else}
+		<select class='dropdown mb-input-element-group-element' bind:value={day} on:change={() => onDayChange()}>
+			{#each Object.values(days) as _day}
+				<option value={_day}>{_day}</option>
+			{/each}
+		</select>
+
+		<select class='dropdown mb-input-element-group-element' bind:value={month} on:change={() => onMonthChange()}>
+			{#each Object.entries(months) as [_month, _monthName]}
+				<option value={_month}>{_monthName}</option>
+			{/each}
+		</select>
+	{/if}
+
+	<select class='dropdown mb-input-element-group-element' bind:value={day} on:change={() => onDayChange()}>
+		{#each Object.values(days) as _day}
+			<option value={_day}>{_day}</option>
+		{/each}
+	</select>
+
+	<select class='dropdown mb-input-element-group-element' bind:value={month} on:change={() => onMonthChange()}>
+		{#each Object.entries(months) as [_month, _monthName]}
+			<option value={_month}>{_monthName}</option>
+		{/each}
+	</select>
+
+	<input class='mb-date-input-year-input mb-input-element-group-element' type='number' tabindex='0' bind:value={year} on:input={() => onYearChange()} max=9999 min=0>
+</div>
+
+

src/inputFields/_new/fields/Date/DateIPF.ts

@@ -0,0 +1,39 @@
+import { NewAbstractInputField } from '../../NewAbstractInputField';
+import { type moment } from 'obsidian';
+import { type SvelteComponent } from 'svelte';
+import { type InputFieldMDRC } from '../../../../renderChildren/InputFieldMDRC';
+import { parseUnknownToString } from '../../../../utils/Utils';
+import { DateParser } from '../../../../parsers/DateParser';
+import DateComponent from './DateComponent.svelte';
+
+export class DateIPF extends NewAbstractInputField<string, moment.Moment> {
+	constructor(renderChild: InputFieldMDRC) {
+		super(renderChild);
+	}
+
+	protected filterValue(value: unknown): string | undefined {
+		return parseUnknownToString(value);
+	}
+
+	protected getFallbackDefaultValue(): moment.Moment {
+		return DateParser.getDefaultDate();
+	}
+
+	protected getSvelteComponent(): typeof SvelteComponent {
+		return DateComponent;
+	}
+
+	protected rawMapValue(value: moment.Moment): string {
+		return DateParser.stringify(value);
+	}
+
+	protected rawReverseMapValue(value: string): moment.Moment | undefined {
+		return DateParser.parse(value);
+	}
+
+	protected getMountArgs(): Record<string, unknown> {
+		return {
+			useUsInputOrder: this.renderChild.plugin.settings.useUsDateInputOrder,
+		};
+	}
+}

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

@@ -1,13 +1,13 @@
 <script lang='ts'>
-	import type { Moment } from 'moment';
+	import type { moment } from 'obsidian';
 	import Icon from '../../../../utils/Icon.svelte';
 
-	export let value: Moment | null;
+	export let value: moment.Moment | null;
 	export let dateFormat: string;
 	export let showDatePicker: () => void;
-	export let onValueChange: (value: Moment | null) => void;
+	export let onValueChange: (value: moment.Moment | null) => void;
 
-	export function setValue(v: Moment | null): void {
+	export function setValue(v: moment.Moment | null): void {
 		value = v;
 	}
 

src/inputFields/_new/fields/ProgressBar/ProgressBarComponent.svelte

@@ -5,6 +5,7 @@
 	export let value: number;
 	export let minValue: number;
 	export let maxValue: number;
+	export let stepSize: number;
 
 
 	let drag: boolean = false;
@@ -64,13 +65,21 @@
 		clientX = clamp(clientX, boundingRect.left, boundingRect.right);
 
 		let value = remapRange(clientX, boundingRect.left, boundingRect.right, minValue, maxValue);
-		value = Math.round(value);
+		value = round(value, stepSize);
 
 		setValueInternal(value);
 	}
 
+	function round(number: number, increment: number) {
+		// the parsing is done to fix floating point errors
+		return Number.parseFloat((Math.round(number / increment ) * increment).toFixed(15));
+	}
+
 	function onKeyPress(e: KeyboardEvent) {
-		if (keydownAcceleration < 50) keydownAcceleration++;
+		if (keydownAcceleration < 50) {
+			keydownAcceleration += 1;
+		}
+
 		let throttled = Math.ceil(keydownAcceleration / 5);
 
 		if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {

src/inputFields/_new/fields/ProgressBar/ProgressBarIPF.ts

@@ -4,16 +4,27 @@ import { InputFieldArgumentType } from '../../../../parsers/inputFieldParser/Inp
 import { optClamp, parseUnknownToFloat } from '../../../../utils/Utils';
 import { type SvelteComponent } from 'svelte';
 import ProgressBarComponent from './ProgressBarComponent.svelte';
+import { ErrorLevel, MetaBindArgumentError } from '../../../../utils/errors/MetaBindErrors';
 
 export class ProgressBarIPF extends NewAbstractInputField<number, number> {
 	minValue: number;
 	maxValue: number;
+	stepSize: number;
 
 	constructor(renderChild: InputFieldMDRC) {
 		super(renderChild);
 
 		this.minValue = this.renderChild.getArgument(InputFieldArgumentType.MIN_VALUE)?.value ?? 0;
 		this.maxValue = this.renderChild.getArgument(InputFieldArgumentType.MAX_VALUE)?.value ?? 100;
+		this.stepSize = this.renderChild.getArgument(InputFieldArgumentType.STEP_SIZE)?.value ?? 1;
+
+		if (this.minValue >= this.maxValue) {
+			throw new MetaBindArgumentError(
+				ErrorLevel.ERROR,
+				'can not create progress bar input field',
+				`minValue (${this.maxValue}) must be less than maxValue (${this.maxValue})`,
+			);
+		}
 	}
 
 	protected filterValue(value: unknown): number | undefined {
@@ -40,6 +51,7 @@ export class ProgressBarIPF extends NewAbstractInputField<number, number> {
 		return {
 			minValue: this.minValue,
 			maxValue: this.maxValue,
+			stepSize: this.stepSize,
 		};
 	}
 }

src/inputFields/_new/fields/Slider/SliderIPF.ts

@@ -4,6 +4,7 @@ import { type InputFieldMDRC } from '../../../../renderChildren/InputFieldMDRC';
 import { type SvelteComponent } from 'svelte';
 import SliderComponent from './SliderComponent.svelte';
 import { InputFieldArgumentType } from '../../../../parsers/inputFieldParser/InputFieldConfigs';
+import { ErrorLevel, MetaBindArgumentError } from '../../../../utils/errors/MetaBindErrors';
 
 export class SliderIPF extends NewAbstractInputField<number, number> {
 	minValue: number;
@@ -17,6 +18,14 @@ export class SliderIPF extends NewAbstractInputField<number, number> {
 		this.minValue = this.renderChild.getArgument(InputFieldArgumentType.MIN_VALUE)?.value ?? 0;
 		this.maxValue = this.renderChild.getArgument(InputFieldArgumentType.MAX_VALUE)?.value ?? 100;
 		this.stepSize = this.renderChild.getArgument(InputFieldArgumentType.STEP_SIZE)?.value ?? 1;
+
+		if (this.minValue >= this.maxValue) {
+			throw new MetaBindArgumentError(
+				ErrorLevel.ERROR,
+				'can not create slider input field',
+				`minValue (${this.maxValue}) must be less than maxValue (${this.maxValue})`,
+			);
+		}
 	}
 
 	protected filterValue(value: unknown): number | undefined {