@functionalcms/svelte-components 5.1.3 → 5.1.5

package/dist/components/form/SmartForm.svelte

@@ -10,7 +10,8 @@
 		type PhoneInputField,
 		type TimePickerField,
 		SubmitResult,
-		type ButtonConfig
+		type ButtonConfig,
+		type HiddenField
 	} from './form.js';
 	import {
 		Button,
@@ -197,6 +198,10 @@
 	<Timepicker id={field.id} required={field.required} disabled={field.disabled} />
 {/snippet}
 
+{#snippet renderHidden(field: HiddenField)}
+	<input type="hidden" id={field.id} name={field.id} value={field.value} />
+{/snippet}
+
 {#if showMessage}
 	<div class="alert alert-success" transition:fade={{ duration: 2000 }}>
 		{successMessage}
@@ -219,6 +224,8 @@
 					{@render renderPhoneInput(field)}
 				{:else if field.typeOfField === 'timepicker'}
 					{@render renderTimePicker(field)}
+				{:else if field.typeOfField === 'hidden'}
+					{@render renderHidden(field)}
 				{/if}
 			{/each}
 

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

@@ -11,7 +11,8 @@ export declare enum FieldType {
     MultiSelect = "multi-select",
     TimePicker = "time-picker",
     Toggle = "toggle",
-    File = "file"
+    File = "file",
+    Hiidden = "hidden"
 }
 export declare enum InputType {
     Text = "text",
@@ -93,6 +94,11 @@ export declare enum SubmitResult {
     Success = "success",
     Error = "error"
 }
+export type HiddenField = {
+    id: string;
+    value: string;
+    typeOfField: "hidden";
+};
 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;
@@ -106,6 +112,7 @@ export declare function createSelectField(id: string, label: string, selectOptio
 }>, type?: "single" | "multiple", value?: any, options?: Partial<Omit<SelectField, "id" | "label" | "typeOfField" | "options" | "type">>): SelectField;
 export declare function createTimePickerField(id: string, label: string, value?: any, options?: Partial<Omit<TimePickerField, "id" | "label" | "typeOfField">>): TimePickerField;
 export declare function createPhoneInputField(id: string, label: string, value?: any, options?: Partial<Omit<PhoneInputField, "id" | "label" | "typeOfField">>): PhoneInputField;
+export declare function createHiddenField(id: string, value: string): HiddenField;
 export type ButtonConfig = {
     label: string;
     type: "submit" | "reset" | "button";

package/dist/components/form/form.js

@@ -13,6 +13,7 @@ export var FieldType;
     FieldType["TimePicker"] = "time-picker";
     FieldType["Toggle"] = "toggle";
     FieldType["File"] = "file";
+    FieldType["Hiidden"] = "hidden";
 })(FieldType || (FieldType = {}));
 export var InputType;
 (function (InputType) {
@@ -108,8 +109,15 @@ export function createPhoneInputField(id, label, value = "", options = {}) {
         id,
         label,
         value,
-        typeOfField: "phone",
+        typeOfField: "phoneInput",
         size: options.size || "md",
         ...options
     };
 }
+export function createHiddenField(id, value) {
+    return {
+        id,
+        value,
+        typeOfField: "hidden",
+    };
+}

package/dist/components/layouts/MenuLayout.svelte

@@ -25,8 +25,13 @@
 		sidebarPosition?: 'fixed' | 'absolute' | 'static';
 	}
 
-	let { children, menuItems = [], logo = undefined, sidebarPosition = 'fixed' }: Partial<TwoColumnLayoutProps> = $props();
-		
+	let {
+		children,
+		menuItems = [],
+		logo = undefined,
+		sidebarPosition = 'fixed'
+	}: Partial<TwoColumnLayoutProps> = $props();
+
 	let container: HTMLElement | undefined = undefined;
 	const helpers = uiHelpers();
 	afterNavigate(() => {
@@ -36,9 +41,7 @@
 
 <main class="" bind:this={container}>
 	<SidebarButton onclick={helpers.toggle} class="mb-2" />
-	{#if logo}
-		<SidebarBrand site={logo} classes={{ img: 'h-6 w-6' }} />
-	{/if}
+
 	<Sidebar
 		backdrop={false}
 		isOpen={helpers.isOpen}
@@ -47,6 +50,9 @@
 		class="z-50 h-full"
 	>
 		<SidebarGroup>
+			{#if logo}
+				<SidebarBrand site={logo} classes={{ img: 'h-6 w-6' }} />
+			{/if}
 			{#each menuItems as item}
 				{#if 'items' in item}
 					<SidebarDropdownWrapper label={item.label}>
@@ -64,7 +70,7 @@
 			{/each}
 		</SidebarGroup>
 	</Sidebar>
-	<div class="content" style:flex="1">
+	<div class="content h-full overflow-auto px-4 md:ml-64" style:flex="1">
 		{@render children?.()}
 	</div>
 </main>

package/package.json

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