firstly 0.0.13 → 0.0.15

package/esm/ui/internals/Input.svelte

@@ -1,79 +1,113 @@
-<script>import { createEventDispatcher, tick } from "svelte";
-import { tw } from "../../utils/tailwind";
-export let value = void 0;
-const dispatch = createEventDispatcher();
-export let focus = false;
-const focusNow = (node) => {
-  if (focus) {
-    tick().then(() => {
-      node.focus();
-    });
-  }
-};
-export let withDedounce = false;
-let timer = null;
-const debounce = (fn) => {
-  clearTimeout(timer);
-  timer = setTimeout(() => {
-    fn();
-  }, 444);
-};
-function dispatchInput(value2) {
-  if ($$restProps.type === "date") {
-    if (value2 || value2 === null) {
-      dispatch("input", { value: transformDate(value2) });
-    }
-  } else {
-    dispatch("input", { value: value2 });
-  }
-}
-let className = void 0;
-export { className as class };
-const handleInput = (e) => {
-  const target = e.target;
-  if ($$restProps.type === "number") {
-    if (e.data === "." || e.data === ",") {
-      value = target.value.toString().replaceAll(",", ".");
-    } else if (target.value === "") {
-      value = null;
-    } else {
-      value = target.value.toString().replaceAll(",", ".");
-    }
-  } else if ($$restProps.type === "date") {
-    if (target.value === "") {
-      value = null;
-    } else {
-      value = target.value;
-    }
-  } else {
-    value = target.value;
-  }
-  if (withDedounce) {
-    return debounce(() => {
-      dispatchInput(value);
-    });
-  } else {
-    dispatchInput(value);
-  }
-};
-const transformDate = (input) => {
-  if (input === null) {
-    return null;
-  }
-  const rawDateSplited = input.split("-");
-  if (rawDateSplited.length === 3) {
-    const yearSplited = rawDateSplited[0].split("");
-    if (yearSplited.length === 4 && yearSplited[0] === "0" && yearSplited[1] === "0" && yearSplited[2] !== "0") {
-      return `20${yearSplited[2]}${yearSplited[3]}-${rawDateSplited[1]}-${rawDateSplited[2]}`;
-    }
-  }
-  return input;
-};
-const handleKeyup = (event) => {
-  if ($$restProps.type === "date") {
-    value = transformDate(event.target.value);
-  }
-};
+<script lang="ts">
+	import { createEventDispatcher, tick } from 'svelte'
+	import type { HTMLInputAttributes } from 'svelte/elements'
+
+	import { tw } from '../../utils/tailwind'
+
+	export let value: HTMLInputAttributes['value'] = undefined
+
+	const dispatch = createEventDispatcher()
+
+	export let focus: boolean = false
+	const focusNow = (node: any) => {
+		if (focus) {
+			tick().then(() => {
+				node.focus()
+			})
+		}
+	}
+
+	// OPTION Dedounce
+	export let withDedounce: boolean = false
+	let timer: any = null
+	const debounce = (fn: () => void) => {
+		clearTimeout(timer)
+		timer = setTimeout(() => {
+			fn()
+		}, 444)
+	}
+	function dispatchInput(value: any) {
+		if ($$restProps.type === 'date') {
+			if (value || value === null) {
+				dispatch('input', { value: transformDate(value) })
+			}
+		} else {
+			dispatch('input', { value })
+		}
+	}
+
+	let className: string | undefined | null = undefined
+	export { className as class }
+
+	const handleInput = (e: any) => {
+		const target: HTMLInputElement = e.target as HTMLInputElement
+
+		if ($$restProps.type === 'number') {
+			// If we see a `.` or a `,` don't continue and wait for the next input !
+			if (e.data === '.' || e.data === ',') {
+				// e.preventDefault()
+				value = target.value.toString().replaceAll(',', '.')
+			} else if (target.value === '') {
+				// Could be good one day ?
+				// if (target.min) {
+				//   value = target.min
+				// } else {
+				//   value = null
+				// }
+				value = null
+			} else {
+				// This convert well the input into a valid number... But "12,0" will be converted into "12" so we can't write "12,01" for example!
+				// value = +target.value
+
+				// For now, let's always put a "." as a separator.
+				value = target.value.toString().replaceAll(',', '.')
+			}
+		} else if ($$restProps.type === 'date') {
+			if (target.value === '') {
+				value = null!
+			} else {
+				value = target.value
+			}
+		} else {
+			value = target.value
+		}
+
+		if (withDedounce) {
+			return debounce(() => {
+				dispatchInput(value)
+			})
+		} else {
+			dispatchInput(value)
+		}
+	}
+
+	const transformDate = (input: string | null) => {
+		if (input === null) {
+			return null
+		}
+		const rawDateSplited = input.split('-')
+
+		if (rawDateSplited.length === 3) {
+			const yearSplited = rawDateSplited[0].split('')
+			if (
+				yearSplited.length === 4 &&
+				yearSplited[0] === '0' &&
+				yearSplited[1] === '0' &&
+				yearSplited[2] !== '0'
+			) {
+				return `20${yearSplited[2]}${yearSplited[3]}-${rawDateSplited[1]}-${rawDateSplited[2]}`
+			}
+		}
+
+		return input
+	}
+
+	const handleKeyup = (event: KeyboardEvent) => {
+		if ($$restProps.type === 'date') {
+			// @ts-ignore
+			value = transformDate(event.target.value)
+		}
+	}
 </script>
 
 <input

package/esm/ui/internals/Input.svelte.d.ts

@@ -1,35 +1,37 @@
-import { SvelteComponent } from "svelte";
 import type { HTMLInputAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: HTMLInputAttributes["value"];
-        focus?: boolean | undefined;
-        withDedounce?: boolean | undefined;
-        class?: string | undefined | null | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        paste: ClipboardEvent;
-        input: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type InputProps = typeof __propDef.props;
-export type InputEvents = typeof __propDef.events;
-export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Input: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    value?: HTMLInputAttributes["value"];
+    focus?: boolean | undefined;
+    withDedounce?: boolean | undefined;
+    class?: string | undefined | null | undefined;
+}, {
+    blur: FocusEvent;
+    change: Event;
+    click: MouseEvent;
+    focus: FocusEvent;
+    keydown: KeyboardEvent;
+    keypress: KeyboardEvent;
+    mouseover: MouseEvent;
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    paste: ClipboardEvent;
+    input: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;

package/esm/ui/internals/Textarea.svelte

@@ -1,34 +1,42 @@
-<script>import { createEventDispatcher, onMount } from "svelte";
-import { scrollbar } from "../../theme";
-export let name = null;
-export let id = "";
-export let rows = 4;
-export let placeholder = "";
-export let focus = false;
-export let value = "";
-export let readonly = false;
-export const error = false;
-export let align = `left`;
-const _tmp = align;
-const dispatch = createEventDispatcher();
-let reference;
-const focusNow = (node) => {
-  if (focus) {
-    node.focus();
-  }
-};
-onMount(() => {
-  if (!reference) {
-    return;
-  }
-  if (!focus) {
-    return;
-  }
-  reference.focus();
-});
-function dispatchInput(value2) {
-  dispatch("input", { value: value2 });
-}
+<script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte'
+
+	import { scrollbar } from '../../theme'
+
+	export let name: string | null = null
+	export let id = ''
+	export let rows = 4
+	export let placeholder = ''
+	export let focus = false
+	export let value = ''
+	export let readonly = false
+	export const error = false
+	// unused but needed to avoid Field error 👇
+	export let align: `left` | `right` = `left`
+	const _tmp = align
+
+	const dispatch = createEventDispatcher()
+
+	let reference: HTMLTextAreaElement
+
+	const focusNow = (node: HTMLTextAreaElement) => {
+		if (focus) {
+			node.focus()
+		}
+	}
+
+	onMount(() => {
+		if (!reference) {
+			return
+		}
+		if (!focus) {
+			return
+		}
+		reference.focus()
+	})
+	function dispatchInput(value: any) {
+		dispatch('input', { value })
+	}
 </script>
 
 {#if readonly}

package/esm/ui/internals/Textarea.svelte.d.ts

@@ -1,30 +1,33 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        name?: string | null | undefined;
-        id?: string | undefined;
-        rows?: number | undefined;
-        placeholder?: string | undefined;
-        focus?: boolean | undefined;
-        value?: string | undefined;
-        readonly?: boolean | undefined;
-        error?: false | undefined;
-        align?: `left` | `right` | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        input: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type TextareaProps = typeof __propDef.props;
-export type TextareaEvents = typeof __propDef.events;
-export type TextareaSlots = typeof __propDef.slots;
-export default class Textarea extends SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
-    get error(): false;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    name?: string | null | undefined;
+    id?: string | undefined;
+    rows?: number | undefined;
+    placeholder?: string | undefined;
+    focus?: boolean | undefined;
+    value?: string | undefined;
+    readonly?: boolean | undefined;
+    error?: false | undefined;
+    align?: `left` | `right` | undefined;
+}, {
+    input: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    error: false;
+}, string>;
+type Textarea = InstanceType<typeof Textarea>;
+export default Textarea;