@functionalcms/svelte-components 5.3.6 → 5.4.0

package/dist/components/form/SmartForm.svelte

@@ -10,7 +10,10 @@
 		type TimePickerField,
 		SubmitResult,
 		type ButtonConfig,
-		type HiddenField
+		type HiddenField,
+
+		DatePickerField
+
 	} from './form.js';
 	import {
 		Button,
@@ -23,7 +26,8 @@
 		Input,
 		FloatingLabelInput,
 		Timepicker,
-		PhoneInput
+		PhoneInput,
+		Datepicker
 	} from 'flowbite-svelte';
 	import { fade } from 'svelte/transition';
 
@@ -95,6 +99,7 @@
 			type={field.type}
 			variant={field.floatVariant}
 			placeholder={field.placeholder}
+			bind:value={field.value}
 		>
 			{field.label}
 		</FloatingLabelInput>
@@ -110,6 +115,7 @@
 			size={field.size}
 			type={field.type}
 			placeholder={field.placeholder}
+			bind:value={field.value}
 		/>
 	{/if}
 {/snippet}
@@ -123,10 +129,10 @@
 		readonly={field.readonly}
 		disabled={field.disabled}
 		class={field.class}
-		label={field.label}
 		rows={field.rows}
 		cols={field.cols}
 		placeholder={field.placeholder}
+		bind:value={field.value}
 	/>
 {/snippet}
 
@@ -197,8 +203,14 @@
 	<Timepicker id={field.id} required={field.required} disabled={field.disabled} />
 {/snippet}
 
+{#snippet renderDatePicker(field: DatePickerField)}
+	<Label for={field.id} class={field.labelClass}>{field.label}</Label>
+	<Datepicker required={field.required} bind:value={field.value} />
+	<input type="hidden" name={field.id} bind:value={field.value} />
+{/snippet}
+
 {#snippet renderHidden(field: HiddenField)}
-	<input type="hidden" id={field.id} name={field.id} value={field.value} />
+	<input type="hidden" id={field.id} name={field.id} bind:value={field.value} />
 {/snippet}
 
 {#if showMessage}
@@ -225,6 +237,8 @@
 					{@render renderTimePicker(field)}
 				{:else if field.typeOfField === 'hidden'}
 					{@render renderHidden(field)}
+				{:else if field.typeOfField === 'date'}
+					{@render renderDatePicker(field)}
 				{/if}
 			{/each}
 

package/dist/components/form/form.d.ts

@@ -19,7 +19,7 @@ export type FieldDef = {
     label: string;
     class?: string;
     labelClass?: string;
-    typeOfField: "input" | "textarea" | "select" | "collection" | "phoneInput" | "file" | "timepicker" | "hidden";
+    typeOfField: "input" | "textarea" | "select" | "collection" | "phoneInput" | "file" | "timepicker" | "date" | "hidden";
     disabled?: boolean;
     readonly?: boolean;
     required?: boolean;
@@ -46,7 +46,15 @@ export type FilePickerField = FieldDef & {
     typeOfField: "file";
     size: "md" | "sm" | "lg";
     multiple?: boolean;
+    filter?: string;
 };
+export type DatePickerField = FieldDef & {
+    typeOfField: "date";
+    inline?: boolean;
+    rangeFrom?: Date | undefined;
+    rangeTo?: Date | undefined;
+};
+export type DropzoneField = FieldDef & {};
 export type CollectionField = FieldDef & {
     items: Array<{
         name: string;
@@ -74,7 +82,7 @@ export type PhoneInputField = FieldDef & {
     size: "md" | "sm" | "lg";
     placeholder?: string;
 };
-export type Field = InputField | TextareaField | CollectionField | SelectField | FilePickerField | TimePickerField | PhoneInputField | HiddenField;
+export type Field = InputField | TextareaField | CollectionField | SelectField | FilePickerField | DatePickerField | DropzoneField | TimePickerField | PhoneInputField | HiddenField;
 export declare enum SubmitResult {
     Success = "success",
     Error = "error"
@@ -87,6 +95,7 @@ export type HiddenField = {
 export declare function createInputField(id: string, label: string, type?: InputType, value?: any, options?: Partial<Omit<InputField, "id" | "label" | "typeOfField" | "type">>): InputField;
 export declare function createTextareaField(id: string, label: string, value?: any, rows?: number, cols?: number, options?: Partial<Omit<TextareaField, "id" | "label" | "typeOfField" | "rows" | "cols">>): TextareaField;
 export declare function createFilePickerField(id: string, label: string, value?: any, options?: Partial<Omit<FilePickerField, "id" | "label" | "typeOfField">>): FilePickerField;
+export declare function createDatePickerField(id: string, label: string, value?: any, options?: Partial<Omit<DatePickerField, "id" | "label" | "typeOfField">>): DatePickerField;
 export declare function createCollectionField(id: string, label: string, items: Array<{
     name: string;
     checked: boolean;

package/dist/components/form/form.js

@@ -1,3 +1,4 @@
+import { Dropzone } from "flowbite-svelte";
 export var InputType;
 (function (InputType) {
     InputType["Text"] = "text";
@@ -54,6 +55,15 @@ export function createFilePickerField(id, label, value = null, options = {}) {
         ...options
     };
 }
+export function createDatePickerField(id, label, value = null, options = {}) {
+    return {
+        id,
+        label,
+        value,
+        typeOfField: "date",
+        ...options
+    };
+}
 export function createCollectionField(id, label, items, groupName, type = "checkbox", value = [], options = {}) {
     return {
         id,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.3.6",
+	"version": "5.4.0",
 	"license": "MIT",
 	"watch": {
 		"build": {