[flowbite] Use Datepicker for date input type

Author: x0k

.changeset/strange-buses-tell.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/flowbite-theme": minor
+---
+
+Use `Datepicker` for `date` input type

packages/flowbite-theme/package.json

@@ -68,7 +68,7 @@
 		"eslint-config-prettier": "catalog:",
 		"eslint-plugin-svelte": "catalog:",
 		"flowbite": "^2.5.2",
-		"flowbite-svelte": "^0.47.1",
+		"flowbite-svelte": "^0.47.3",
 		"globals": "catalog:",
 		"postcss": "catalog:",
 		"prettier": "catalog:",

packages/flowbite-theme/src/lib/widgets/text-widget.svelte

@@ -1,8 +1,36 @@
 <script lang="ts">
 	import { type WidgetProps } from '@sjsf/form';
 	import Input, { type InputProps } from 'flowbite-svelte/Input.svelte';
+	import Datepicker, { type DatepickerProps } from 'flowbite-svelte/Datepicker.svelte';
 
 	let { value = $bindable(), attributes }: WidgetProps<'text'> = $props();
+
+	const date = {
+		get value() {
+			return value ? new Date(value) : null;
+		},
+		set value(v) {
+			if (attributes.readonly) {
+				return;
+			}
+			if (!v) {
+				value = undefined;
+				return;
+			}
+			value = v.toLocaleDateString('en-CA');
+		}
+	};
 </script>
 
-<Input type="text" bind:value {...attributes as InputProps} />
+{#if attributes.type === 'date'}
+	<div class="w-full">
+		<Datepicker
+			bind:value={date.value}
+			showActionButtons
+			autohide={false}
+			{...attributes as DatepickerProps}
+		/>
+	</div>
+{:else}
+	<Input type="text" bind:value {...attributes as InputProps} />
+{/if}

packages/testing/src/demo/widgets.ts

@@ -1,5 +1,4 @@
 import { SvelteMap } from "svelte/reactivity";
-
 import type {
   Schema,
   UiSchema,
@@ -11,6 +10,7 @@ export const states = (schema: Schema): Schema => ({
   type: "object",
   properties: {
     default: schema,
+    readonly: schema,
     disabled: schema,
     error: schema,
   },
@@ -61,11 +61,29 @@ export const schema: Schema = {
     multiSelect: states(uniqueArray),
     text: states(text),
     textarea: states(text),
+    date: states(text)
   },
 };
 
 export const uiStates = (uiSchema: UiSchema): UiSchema => ({
-  default: uiSchema,
+  default: {
+    ...uiSchema,
+    "ui:options": {
+      ...uiSchema["ui:options"],
+      input: {
+        placeholder: "placeholder",
+      },
+    }
+  },
+  readonly: {
+    ...uiSchema,
+    "ui:options": {
+      input: {
+        ...uiSchema["ui:options"]?.input,
+        readonly: true,
+      }
+    }
+  },
   disabled: {
     ...uiSchema,
     "ui:options": {
@@ -103,6 +121,13 @@ export const uiSchema: UiSchemaRoot = {
   textarea: uiStates({
     "ui:widget": "textarea",
   }),
+  date: uiStates({
+    "ui:options": {
+      input: {
+        type: "date",
+      }
+    }
+  })
 };
 
 export const errors = new SvelteMap(