@rkosafo/cai.components 0.0.61 → 0.0.62

package/dist/forms/FormSelect/FormSelect.svelte

@@ -28,9 +28,9 @@
 	function handleChange(e: any) {
 		if (!e) return;
 		if (!multiple) {
-			setData({ ...$data, [name]: e.value });
+			setData({ ...$data, [name]: e.value || e.id });
 		} else {
-			const d = e.map((a: any) => a.value);
+			const d = e.map((a: any) => a.value || a.id);
 			// console.log({ d });
 			setData({ ...$data, [name]: d });
 		}
@@ -65,6 +65,7 @@
 		{hasError}
 		minHeight={40}
 		hasSuccess={isSuccess}
+		{placeholder}
 		{...otherProps}
 	/>
 	<!-- {/key} -->

package/dist/layout/ComponentCanvas/index.d.ts

@@ -1,3 +1,2 @@
-import Canvas from './Canvas.svelte';
-import { addMapper, removeMapper } from './ComponentRenderer.svelte';
-export { Canvas as ComponentCanvas, addMapper as addComponentMapper, removeMapper as removeComponentMapper };
+export { default as ComponentCanvas } from './Canvas.svelte';
+export { addMapper as addComponentMapper, removeMapper as removeComponentMapper } from './ComponentRenderer.svelte';

package/dist/layout/ComponentCanvas/index.js

@@ -1,3 +1,2 @@
-import Canvas from './Canvas.svelte';
-import { addMapper, removeMapper } from './ComponentRenderer.svelte';
-export { Canvas as ComponentCanvas, addMapper as addComponentMapper, removeMapper as removeComponentMapper };
+export { default as ComponentCanvas } from './Canvas.svelte';
+export { addMapper as addComponentMapper, removeMapper as removeComponentMapper } from './ComponentRenderer.svelte';

package/dist/ui/datatable/Datatable.svelte

@@ -1,13 +1,3 @@
-<script lang="ts" module>
-	export function refetchDatatable(params?: TableFilter) {
-		window.dispatchEvent(
-			new CustomEvent('reFetchTableData', {
-				detail: params
-			})
-		);
-	}
-</script>
-
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';

package/dist/ui/datatable/Datatable.svelte.d.ts

@@ -1,5 +1,4 @@
-export declare function refetchDatatable(params?: TableFilter): void;
-import { type DatatableProps, type TableFilter } from '../../index.js';
+import { type DatatableProps } from '../../index.js';
 declare const Datatable: import("svelte").Component<DatatableProps<any>, {}, "read" | "query">;
 type Datatable = ReturnType<typeof Datatable>;
 export default Datatable;

package/dist/ui/datatable/index.d.ts

@@ -1,2 +1,3 @@
-import Datatable, { refetchDatatable } from './Datatable.svelte';
-export { Datatable, refetchDatatable };
+import type { TableFilter } from '../../index.js';
+export { default as Datatable } from './Datatable.svelte';
+export declare function refetchDatatable(params?: TableFilter): void;

package/dist/ui/datatable/index.js

@@ -1,2 +1,6 @@
-import Datatable, { refetchDatatable } from './Datatable.svelte';
-export { Datatable, refetchDatatable };
+export { default as Datatable } from './Datatable.svelte';
+export function refetchDatatable(params) {
+    window.dispatchEvent(new CustomEvent('reFetchTableData', {
+        detail: params
+    }));
+}

package/dist/utils/index.d.ts

@@ -2,6 +2,7 @@ import { type ClassValue } from 'clsx';
 export { default as Popper } from './Popper.svelte';
 export * from './closeButton/index.js';
 export { trapFocus } from './action.js';
+export * from './tableHeightUtils.js';
 import type { ICaseCategory } from '../index.js';
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function saveToLocalStorage<T>(key: string, data: T): void;

package/dist/utils/index.js

@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 export { default as Popper } from './Popper.svelte';
 export * from './closeButton/index.js';
 export { trapFocus } from './action.js';
+export * from './tableHeightUtils.js';
 import dayjs from 'dayjs';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));

package/dist/utils/tableHeightUtils.d.ts

@@ -0,0 +1,26 @@
+export interface TableHeightConfig {
+    headerOffset?: number;
+    footerOffset?: number;
+    additionalOffset?: number;
+}
+/**
+ * Calculate table height based on window dimensions and offsets
+ */
+export declare function calculateTableHeight(config?: TableHeightConfig): number;
+/**
+ * Create a reactive table height store that updates on window resize
+ */
+export declare function createTableHeightStore(config?: TableHeightConfig): {
+    readonly height: number;
+    update: () => void;
+    dispose: () => void;
+};
+/**
+ * Get table height for specific use cases with predefined offsets
+ */
+export declare const tableHeightPresets: {
+    default: () => number;
+    compact: () => number;
+    spacious: () => number;
+    custom: (config: TableHeightConfig) => number;
+};

package/dist/utils/tableHeightUtils.js

@@ -0,0 +1,45 @@
+const defaultConfig = {
+    headerOffset: 200,
+    footerOffset: 70,
+    additionalOffset: 0
+};
+/**
+ * Calculate table height based on window dimensions and offsets
+ */
+export function calculateTableHeight(config = {}) {
+    const { headerOffset, footerOffset, additionalOffset } = { ...defaultConfig, ...config };
+    return window.innerHeight - headerOffset - footerOffset - additionalOffset;
+}
+/**
+ * Create a reactive table height store that updates on window resize
+ */
+export function createTableHeightStore(config = {}) {
+    let height = $state(calculateTableHeight(config));
+    const updateHeight = () => {
+        height = calculateTableHeight(config);
+    };
+    // Initialize and set up resize listener
+    if (typeof window !== 'undefined') {
+        window.addEventListener('resize', updateHeight);
+    }
+    return {
+        get height() {
+            return height;
+        },
+        update: updateHeight,
+        dispose: () => {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('resize', updateHeight);
+            }
+        }
+    };
+}
+/**
+ * Get table height for specific use cases with predefined offsets
+ */
+export const tableHeightPresets = {
+    default: () => calculateTableHeight(),
+    compact: () => calculateTableHeight({ headerOffset: 150, footerOffset: 50 }),
+    spacious: () => calculateTableHeight({ headerOffset: 250, footerOffset: 100 }),
+    custom: (config) => calculateTableHeight(config)
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "files": [
     "dist",
     "!dist/**/*.test.*",