feat: export input HTMLInputElement in form components

src/lib/forms/Checkbox.svelte

@@ -13,6 +13,7 @@
   export let value: string | number = 'on';
   export let checked: boolean | undefined = undefined;
   export let spacing: string = 'me-2';
+  export let element: HTMLInputElement | undefined = undefined;
 
   // tinted if put in component having its own background
   let background: boolean = getContext('background');
@@ -52,7 +53,7 @@
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input use:init={group} type="checkbox" bind:checked on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change={onChange} on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
+  <input use:init={group} type="checkbox" bind:checked bind:this={element} on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste on:change={onChange} on:change {value} {...$$restProps} class={inputClass(custom, color, true, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 
@@ -67,4 +68,5 @@
 @prop export let value: string | number = 'on';
 @prop export let checked: boolean | undefined = undefined;
 @prop export let spacing: string = 'me-2';
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/lib/forms/CheckboxButton.svelte

@@ -14,6 +14,7 @@
   export let size: SizeType | undefined = undefined;
   export let color: ButtonColorType | undefined = undefined;
   export let shadow: boolean = false;
+  export let element: HTMLInputElement | undefined = undefined;
 
   // react on external group changes
   function init(_: HTMLElement, _group: (string | number)[]) {
@@ -57,6 +58,7 @@
     use:init={group}
     type="checkbox"
     bind:checked
+    bind:this={element}
     {value}
     {...$$restProps}
     class="sr-only"
@@ -88,4 +90,5 @@
 @prop export let size: SizeType | undefined = undefined;
 @prop export let color: ButtonColorType | undefined = undefined;
 @prop export let shadow: boolean = false;
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/lib/forms/Dropzone.svelte

@@ -4,27 +4,26 @@
   export let value: string = '';
   export let files: FileList | undefined = undefined;
   export let defaultClass: string = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
-
-  let input: HTMLInputElement;
+  export let element: HTMLInputElement | undefined = undefined;
 
   function keydown(ev: KeyboardEvent) {
     if ([' ', 'Enter'].includes(ev.key)) {
       ev.preventDefault();
-      input.click();
+      element!.click();
     }
   }
 
   function onClick(event: MouseEvent) {
     event.preventDefault();
-    input.click();
+    element!.click();
   }
 </script>
 
 <button class={twMerge(defaultClass, $$props.class)} on:keydown={keydown} on:click={onClick} on:focus on:blur on:mouseenter on:mouseleave on:mouseover on:dragenter on:dragleave on:dragover on:drop type="button">
   <slot />
 </button>
 <label class="hidden">
-  <input {...$$restProps} bind:value bind:files bind:this={input} on:change on:click type="file" />
+  <input {...$$restProps} bind:value bind:files bind:this={element} on:change on:click type="file" />
 </label>
 
 <!--
@@ -34,4 +33,5 @@
 @prop export let value: string = '';
 @prop export let files: FileList | undefined = undefined;
 @prop export let defaultClass: string = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/lib/forms/Fileupload.svelte

@@ -5,10 +5,12 @@
   export let value: string = '';
   export let files: FileList | undefined = undefined;
   export let inputClass: string = 'border !p-0 dark:text-gray-400';
+  export let element: HTMLInputElement | undefined = undefined;
+
 </script>
 
 <Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
-  <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:value bind:files {...props} />
+  <input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:value bind:files bind:this={element} {...props} />
 </Input>
 
 <!--
@@ -18,4 +20,5 @@
 @prop export let value: string = '';
 @prop export let files: FileList | undefined = undefined;
 @prop export let inputClass: string = 'border !p-0 dark:text-gray-400';
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/lib/forms/Input.svelte

@@ -17,6 +17,7 @@
   export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
   export let color: 'base' | 'green' | 'red' = 'base';
   export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
+  export let element: HTMLInputElement | undefined = undefined;
 
   const borderClasses = {
     base: 'border-gray-300 dark:border-gray-600',
@@ -63,7 +64,7 @@
     </div>
   {/if}
   <slot props={{ ...$$restProps, class: inputClass }}>
-    <input {...$$restProps} bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
+    <input {...$$restProps} bind:value bind:this={element} on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...{ type }} class={inputClass} />
   </slot>
   {#if $$slots.right}
     <div class="{twMerge(floatClass, $$props.classRight)} end-0 pe-2.5"><slot name="right" /></div>
@@ -80,4 +81,5 @@
 @prop export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right';
 @prop export let color: 'base' | 'green' | 'red' = 'base';
 @prop export let floatClass: string = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400';
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/lib/forms/NumberInput.svelte

@@ -2,15 +2,17 @@
   import Input from './Input.svelte';
 
   export let value: number = 0;
+  export let element: HTMLInputElement | undefined = undefined;
 </script>
 
 <Input let:props {...$$restProps}>
-  <input {...props} type="number" bind:value on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input />
+  <input {...props} type="number" bind:value bind:this={element} on:blur on:change on:click on:contextmenu on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input />
 </Input>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let value: number = 0;
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/lib/forms/Radio.svelte

@@ -17,6 +17,8 @@
   export const labelClass = (inline: boolean, extraClass: string) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
 
   export const inputClass = (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, spacing: string, extraClass: string) => twMerge('w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2', spacing, tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
+
+  export let element: HTMLInputElement | undefined = undefined;
 </script>
 
 <script lang="ts">
@@ -36,14 +38,15 @@
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
-  <input type="radio" bind:group on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
+  <input type="radio" bind:group bind:this={element} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {value} {...$$restProps} class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)} />
   <slot />
 </Label>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
+@prop export let element: HTMLInputElement | undefined = undefined;
 @prop export let color: FormColorType = 'primary';
 @prop export let custom: boolean = false;
 @prop export let inline: boolean = false;

src/lib/forms/RadioButton.svelte

@@ -6,6 +6,7 @@
   export let group: string | number = '';
   export let value: string | number = '';
   export let inline: boolean = true;
+  export let element: HTMLInputElement | undefined = undefined;
 
   // Button properties forwarding
   export let pill: boolean = false;
@@ -22,6 +23,7 @@
   <input
     type="radio"
     bind:group
+    bind:this={element}
     {value}
     {...$$restProps}
     class="sr-only"
@@ -46,6 +48,7 @@
 @prop export let group: string | number = '';
 @prop export let value: string | number = '';
 @prop export let inline: boolean = true;
+@prop export let element: HTMLInputElement | undefined = undefined;
 @prop export let pill: boolean = false;
 @prop export let outline: boolean = false;
 @prop export let size: SizeType | undefined = undefined;

src/lib/forms/Range.svelte

@@ -3,6 +3,7 @@
 
   export let value: number;
   export let size: 'sm' | 'md' | 'lg' = 'md';
+  export let element: HTMLInputElement | undefined = undefined;
 
   const sizes = {
     sm: 'h-1 range-sm',
@@ -13,12 +14,13 @@
   $: inputClass = twMerge('w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700', sizes[size] ?? sizes.md, $$props.class);
 </script>
 
-<input type="range" bind:value {...$$restProps} class={inputClass} on:change on:click on:keydown on:keypress on:keyup />
+<input type="range" bind:value bind:this={element} {...$$restProps} class={inputClass} on:change on:click on:keydown on:keypress on:keyup />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let value: number;
 @prop export let size: 'sm' | 'md' | 'lg' = 'md';
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/lib/forms/Search.svelte

@@ -6,6 +6,7 @@
   export let size: FormSizeType = 'lg';
   export let placeholder: string = 'Search';
   export let value: any = undefined;
+  export let element: HTMLInputElement | undefined = undefined;
 
   const sizes = {
     sm: 'w-3.5 h-3.5',
@@ -15,7 +16,7 @@
 </script>
 
 <Wrapper class="relative w-full" show={$$slots.default}>
-  <Input bind:value on:blur on:change on:input on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste type="search" {placeholder} {size} {...$$restProps} class={$$props.class}>
+  <Input bind:value bind:element on:blur on:change on:input on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste type="search" {placeholder} {size} {...$$restProps} class={$$props.class}>
     <svg slot="left" class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
       <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
     </svg>
@@ -41,4 +42,5 @@
 @prop export let size: FormSizeType = 'lg';
 @prop export let placeholder: string = 'Search';
 @prop export let value: any = undefined;
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/lib/forms/Select.svelte

@@ -11,6 +11,8 @@
   export let defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
 
   export let underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+
+  export let element: HTMLSelectElement | undefined = undefined;
 
   const common = 'block w-full';
   const sizes = {
@@ -23,7 +25,7 @@
   $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$props.class);
 </script>
 
-<select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
+<select {...$$restProps} bind:value bind:this={element} class={selectClass} on:change on:contextmenu on:input>
   {#if placeholder}
     <option disabled selected value="">{placeholder}</option>
   {/if}
@@ -46,4 +48,5 @@
 @prop export let size: 'sm' | 'md' | 'lg' = 'md';
 @prop export let defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
 @prop export let underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+@prop export let element: HTMLSelectElement | undefined = undefined;
 -->

src/lib/forms/Textarea.svelte

@@ -9,6 +9,8 @@
   export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
   export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
   export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
+  export let element: HTMLTextAreaElement | undefined = undefined;
+
   let wrapped: boolean;
   $: wrapped = $$slots.header || $$slots.footer;
 
@@ -31,7 +33,7 @@
     </div>
   {/if}
   <Wrapper show={wrapped} class={innerWrapperClass}>
-    <textarea bind:value on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...$$restProps} class={textareaClass} />
+    <textarea bind:value bind:this={element} on:blur on:change on:click on:contextmenu on:focus on:input on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover on:paste {...$$restProps} class={textareaClass} />
   </Wrapper>
   {#if $$slots.footer}
     <div class={headerClass(false)}>
@@ -48,4 +50,5 @@
 @prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
 @prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
 @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
+@prop export let element: HTMLTextAreaElement | undefined = undefined;
 -->

src/lib/forms/Toggle.svelte

@@ -9,6 +9,7 @@
   export let value: string | number = '';
   export let checked: boolean | undefined = undefined;
   export let customSize: string = '';
+  export let element: HTMLInputElement | undefined = undefined;
 
   // tinted if put in component having its own background
   let background: boolean = getContext('background');
@@ -39,7 +40,7 @@
   $: divClass = twMerge(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[($$restProps.color as FormColorType) ?? 'primary'], sizes[size], 'relative', $$props.classDiv);
 </script>
 
-<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group bind:element on:click on:change>
   <span class={divClass} />
   <slot />
 </Checkbox>
@@ -53,4 +54,5 @@
 @prop export let value: string | number = '';
 @prop export let checked: boolean | undefined = undefined;
 @prop export let customSize: string = '';
+@prop export let element: HTMLInputElement | undefined = undefined;
 -->

src/routes/component-data/Checkbox.json

@@ -1 +1 @@
-{"name":"Checkbox","slots":[],"events":["on:keyup","on:keydown","on:keypress","on:focus","on:blur","on:click","on:mouseover","on:mouseenter","on:mouseleave","on:paste","on:change"],"props":[["color","FormColorType","'primary'"],["custom","boolean","false"],["inline","boolean","false"],["group","(string | number)[]","[]"],["value","string | number","'on'"],["checked","boolean | undefined","undefined"],["spacing","string","'me-2'"]]}
+{"name":"Checkbox","slots":[],"events":["on:keyup","on:keydown","on:keypress","on:focus","on:blur","on:click","on:mouseover","on:mouseenter","on:mouseleave","on:paste","on:change"],"props":[["color","FormColorType","'primary'"],["custom","boolean","false"],["inline","boolean","false"],["group","(string | number)[]","[]"],["value","string | number","'on'"],["checked","boolean | undefined","undefined"],["spacing","string","'me-2'"],["element","HTMLInputElement | undefined","undefined"]]}

src/routes/component-data/CheckboxButton.json

@@ -1 +1 @@
-{"name":"CheckboxButton","slots":[],"events":["on:keyup","on:keydown","on:keypress","on:focus","on:blur","on:click","on:mouseover","on:mouseenter","on:mouseleave","on:paste","on:change"],"props":[["group","(string | number)[]","[]"],["value","string | number","'on'"],["checked","boolean | undefined","undefined"],["inline","boolean","true"],["pill","boolean","false"],["outline","boolean","false"],["size","SizeType | undefined","undefined"],["color","ButtonColorType | undefined","undefined"],["shadow","boolean","false"]]}
+{"name":"CheckboxButton","slots":[],"events":["on:keyup","on:keydown","on:keypress","on:focus","on:blur","on:click","on:mouseover","on:mouseenter","on:mouseleave","on:paste","on:change"],"props":[["group","(string | number)[]","[]"],["value","string | number","'on'"],["checked","boolean | undefined","undefined"],["inline","boolean","true"],["pill","boolean","false"],["outline","boolean","false"],["size","SizeType | undefined","undefined"],["color","ButtonColorType | undefined","undefined"],["shadow","boolean","false"],["element","HTMLInputElement | undefined","undefined"]]}

src/routes/component-data/Dropzone.json

@@ -1 +1 @@
-{"name":"Dropzone","slots":[],"events":["on:focus","on:blur","on:mouseenter","on:mouseleave","on:mouseover","on:dragenter","on:dragleave","on:dragover","on:drop","on:change","on:click"],"props":[["value","string","''"],["files","FileList | undefined","undefined"],["defaultClass","string","'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600'"]]}
+{"name":"Dropzone","slots":[],"events":["on:focus","on:blur","on:mouseenter","on:mouseleave","on:mouseover","on:dragenter","on:dragleave","on:dragover","on:drop","on:change","on:click"],"props":[["value","string","''"],["files","FileList | undefined","undefined"],["defaultClass","string","'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600'"],["element","HTMLInputElement | undefined","undefined"]]}