Add required property (#74)

Author: ChromuSx

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Next
+- Add `required` prop (@ChromuSx)
+
 ## 2.9.0 - 2023 Nov 3
 - Add `timePrecision` prop for showing a time picker (@nihanmubashshir)
 

src/lib/DateInput.svelte

@@ -48,6 +48,8 @@
 	export let valid = true
 	/** Disable the input **/
 	export let disabled = false
+	/** Require a value to submit form **/
+	export let required = false
 	/** Pass custom classes */
 	let classes = ''
 	export { classes as class }
@@ -189,6 +191,7 @@
 		value={text}
 		{placeholder}
 		{disabled}
+		{required}
 		on:focus={() => (visible = true)}
 		on:mousedown={() => (visible = true)}
 		on:input={(e) => {

src/routes/DateInput.svelte

@@ -10,6 +10,7 @@
 	let valid: boolean
 	let visible: boolean
 	let disabled: boolean
+	let required: boolean
 	let closeOnSelection: boolean
 	let browseWithoutSelecting: boolean
 	let format: string
@@ -28,6 +29,7 @@
 		bind:format
 		bind:visible
 		bind:disabled
+		bind:required
 		bind:closeOnSelection
 		bind:browseWithoutSelecting
 		bind:dynamicPositioning
@@ -44,6 +46,7 @@
 		<Prop label="format" bind:value={format} />
 		<Prop label="visible" bind:value={visible} />
 		<Prop label="disabled" bind:value={disabled} />
+		<Prop label="required" bind:value={required} />
 		<Prop label="closeOnSelection" bind:value={closeOnSelection} />
 		<Prop label="browseWithoutSelecting" bind:value={browseWithoutSelecting} />
 		<Prop label="dynamicPositioning" bind:value={dynamicPositioning} />

src/routes/docs/+page.md

@@ -40,6 +40,7 @@ The component will not assign a date value until a specific date is selected in
 | `format`                 | string                                        | Format string                                               |
 | `visible`                | bool                                          | Whether the date popup is visible                           |
 | `disabled`               | bool                                          | Disable the input                                           |
+| `required`               | bool                                          | Require a value to submit form                              |
 | `closeOnSelection`       | bool                                          | Close the date popup when a date is selected                |
 | `browseWithoutSelecting` | bool                                          | Wait with updating the date until a value is selected       |
 | `dynamicPositioning`     | bool                                          | Dynamicly postions the date popup to best fit on the screen |