@rkosafo/cai.components 0.0.31 → 0.0.33

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export * from './ui/tab/index.js';
 export * from './ui/icons/index.js';
 export * from './ui/box/index.js';
 export * from './ui/breadcrumb/index.js';
+export * from './layout/ComponentCanvas/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';

package/dist/index.js

@@ -26,6 +26,7 @@ export * from './ui/tab/index.js';
 export * from './ui/icons/index.js';
 export * from './ui/box/index.js';
 export * from './ui/breadcrumb/index.js';
+export * from './layout/ComponentCanvas/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';

package/dist/layout/ComponentCanvas/Canvas.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { receive, type IComponentDescriptor, type IDocumentCanvasProps } from '../../index.js';
+	import { nanoid } from 'nanoid';
+	import ComponentRenderer from './ComponentRenderer.svelte';
+
+	let {
+		children = [],
+		close,
+		contextKey,
+		toggleCollapse,
+		showBackground
+	}: IDocumentCanvasProps = $props();
+
+	function updateChildren(children: IComponentDescriptor[]) {
+		return children.map((a) => {
+			if (!a.id) a.id = nanoid();
+			return a;
+		});
+	}
+
+	let toRender = $derived(updateChildren(children));
+</script>
+
+<div class="flex flex-grow flex-col gap-5">
+	{#each toRender as child (child.id)}
+		<div
+			class="flex p-3"
+			class:shadow={showBackground}
+			class:bg-white={showBackground}
+			in:receive={{ key: child.id }}
+		>
+			<ComponentRenderer descriptor={child} {contextKey} {close} {toggleCollapse} />
+		</div>
+	{/each}
+	{#if toRender.length === 0}
+		<!-- <Alert>
+      It is lonely here
+    </Alert> -->
+	{/if}
+</div>

package/dist/layout/ComponentCanvas/Canvas.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IDocumentCanvasProps } from '../../index.js';
+declare const Canvas: import("svelte").Component<IDocumentCanvasProps, {}, "">;
+type Canvas = ReturnType<typeof Canvas>;
+export default Canvas;

package/dist/layout/ComponentCanvas/ComponentRenderer.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+	let mappers: ((name: string) => ConstructorOfATypedSvelteComponent)[] = [];
+	function componentNameToType(name: string) {
+		for (let i = 0; i < mappers.length; i++) {
+			let cmp = mappers[i](name);
+			if (cmp != null) return cmp;
+		}
+		return null;
+	}
+
+	export function addMapper(f: (name: string) => ConstructorOfATypedSvelteComponent) {
+		mappers = [f, ...mappers];
+	}
+
+	export function removeMapper(f: (name: string) => ConstructorOfATypedSvelteComponent) {
+		mappers = mappers.filter((x) => x != f);
+	}
+</script>
+
+<script lang="ts">
+	import {
+		IconifyIcon,
+		type IComponentDescriptor,
+		type IDocumentRendererProps
+	} from '../../index.js';
+
+	let {
+		descriptor,
+		showTitle = true,
+		contextKey,
+		toggleCollapse,
+		close
+	}: IDocumentRendererProps = $props();
+
+	function decode(descriptor: IComponentDescriptor) {
+		return {
+			compoent: componentNameToType(descriptor.type),
+			props: descriptor.props || {}
+		};
+	}
+
+	let data = $derived(decode(descriptor));
+</script>
+
+{#if data.compoent}
+	<div class="flex-grow">
+		{#if descriptor.title && showTitle}
+			<div class="flex items-center justify-between border-b border-dotted pb-1">
+				<h3 class="font-bold text-teal-500">
+					{descriptor.title || ''}
+				</h3>
+				<div class="flex items-center gap-2">
+					<button
+						aria-label="collapse"
+						onclick={(_) => toggleCollapse(descriptor.id!)}
+						class="grid place-content-center rounded-full p-1 hover:bg-gray-200"
+						class:hidden={!descriptor.collapsible}
+					>
+						<IconifyIcon
+							icon={descriptor.collapsed
+								? 'iconamoon:arrow-down-2-duotone'
+								: 'iconamoon:arrow-up-2-duotone'}
+							style="font-size: 20px;"
+						/>
+					</button>
+					<button
+						aria-label="close"
+						onclick={(e) => close({ id: descriptor.id!, data: e.detail })}
+						class="grid place-content-center rounded-full p-1 hover:bg-red-200 hover:text-red-400"
+						class:hidden={!descriptor.closable}
+					>
+						<iconify-icon icon="ic:round-close" style="font-size: 20px;"></iconify-icon>
+					</button>
+				</div>
+			</div>
+		{/if}
+		<div class:hidden={descriptor.collapsed}>
+			<data.compoent
+				{...data.props}
+				{contextKey}
+				close={(e: any) => close({ id: descriptor.id!, data: e.detail })}
+			/>
+		</div>
+	</div>
+{/if}

package/dist/layout/ComponentCanvas/ComponentRenderer.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function addMapper(f: (name: string) => ConstructorOfATypedSvelteComponent): void;
+export declare function removeMapper(f: (name: string) => ConstructorOfATypedSvelteComponent): void;
+import { type IDocumentRendererProps } from '../../index.js';
+declare const ComponentRenderer: import("svelte").Component<IDocumentRendererProps, {}, "">;
+type ComponentRenderer = ReturnType<typeof ComponentRenderer>;
+export default ComponentRenderer;

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

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

package/dist/layout/ComponentCanvas/index.js

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

package/dist/types/index.d.ts

@@ -822,4 +822,32 @@ export interface ActionButtonProps {
     href?: string | null;
     kind?: keyof typeof ACTION_BUTTON_KINDS;
     moreShadow?: boolean;
+    onclick?: () => void;
+}
+export interface IComponentDescriptor {
+    type: string;
+    title?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    closable?: boolean;
+    props?: unknown;
+    id?: string;
+}
+export interface IDocumentCanvasClose {
+    id: string;
+    data: any;
+}
+export interface IDocumentRendererProps {
+    descriptor: IComponentDescriptor;
+    showTitle?: boolean;
+    contextKey?: object;
+    toggleCollapse: (id: string) => void;
+    close: (val: IDocumentCanvasClose) => void;
+}
+export interface IDocumentCanvasProps {
+    children: IComponentDescriptor[];
+    showBackground?: boolean;
+    contextKey?: object;
+    close: (val: IDocumentCanvasClose) => void;
+    toggleCollapse: (id: string) => void;
 }

package/dist/ui/buttons/ActionButton.svelte

@@ -129,6 +129,7 @@
 		href = null,
 		kind = 'generic',
 		moreShadow = false,
+		onclick,
 		...rest
 	}: ActionButtonProps = $props();
 
@@ -149,6 +150,7 @@
 </script>
 
 <Button
+	onclick={() => onclick?.()}
 	color="alternative"
 	href={href || ''}
 	class={cn(

package/dist/utils/index.d.ts

@@ -6,3 +6,8 @@ export declare function cn(...inputs: ClassValue[]): string;
 export declare function saveToLocalStorage<T>(key: string, data: T): void;
 export declare function loadFromLocalStorage<T>(key: string): T | undefined;
 export declare function extractQueryParam(queryString: string, index?: string): string;
+export declare const send: (node: any, params: import("svelte/transition").CrossfadeParams & {
+    key: any;
+}) => () => import("svelte/transition").TransitionConfig, receive: (node: any, params: import("svelte/transition").CrossfadeParams & {
+    key: any;
+}) => () => import("svelte/transition").TransitionConfig;

package/dist/utils/index.js

@@ -1,5 +1,7 @@
 import { browser } from '$app/environment';
 import clsx, {} from 'clsx';
+import { quintOut } from 'svelte/easing';
+import { crossfade } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
 export { default as Popper } from './Popper.svelte';
 export * from './closeButton/index.js';
@@ -33,3 +35,18 @@ export function extractQueryParam(queryString, index = 'q') {
     const warehouse = urlParams.get(index);
     return warehouse ?? '';
 }
+export const [send, receive] = crossfade({
+    duration: (d) => Math.sqrt(d * 200),
+    fallback(node, params) {
+        const style = getComputedStyle(node);
+        const transform = style.transform === 'none' ? '' : style.transform;
+        return {
+            duration: 600,
+            easing: quintOut,
+            css: (t) => `
+				        transform: ${transform} translateX(${(1 - t) * 100}%);
+				opacity: ${t}
+			`
+        };
+    }
+});

package/package.json

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