@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/ui/tree/Tree.svelte

@@ -1,184 +1,184 @@
-<svelte:options />
-
-<script lang="ts" generics="T = Data">
-	import type { Snippet } from 'svelte';
-
-	import { trans2Tree } from './tree.utils.js';
-	import type { TreeItemType } from './types.js';
-	import Icon from '../../base/icon/Icon.svelte';
-	import { dataOp } from '../../utils/engine/utils.js';
-	import type { CommonProps, Data } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	type TreeProps = CommonProps & {
-		/** data to be displayed in the tree */
-		data?: T[];
-
-		/** paths to be displayed in the tree */
-		paths: Record<string, any>[];
-
-		/** field to be used for paths */
-		pathField?: string;
-
-		/** private use */
-		pathes?: TreeItemType[];
-
-		/** private use */
-		level?: number;
-
-		/** private use */
-		selectedDataKeys?: string[];
-
-		/** exported data */
-		selectedData?: T[];
-
-		/** exported selected paths */
-		selectedPathes?: string[];
-
-		/** the split we use to build hierarchy */
-		splitter?: string;
-
-		/** show checkbox to select */
-		showCheckBox?: boolean;
-
-		/** selected category */
-		selectedCategory?: string;
-
-		element?: HTMLElement;
-		children?: Snippet<[{ item: TreeItemType; idx: number }]>;
-	};
-
-	let {
-		class: className = '',
-		pathField = 'path',
-		level = 0,
-		splitter = '/',
-		element = $bindable(),
-		data = $bindable([]),
-		paths = $bindable([]),
-		showCheckBox = $bindable(false),
-		selectedCategory = $bindable(''),
-		selectedDataKeys = $bindable([]),
-		selectedData = $bindable([]),
-		selectedPathes = $bindable([]),
-		pathes = trans2Tree(paths, pathField),
-		children
-	}: TreeProps = $props();
-
-	let visibleChildChild: Record<string, boolean> = $state({});
-	let finalPaths: TreeItemType[] = $state([]);
-
-	$effect(() => {
-		finalPaths = trans2Tree(paths, pathField);
-		selectedData = selectedDataKeys.map((dataKey) => {
-			return dataOp.filterListFirst(paths, dataKey, pathField);
-		});
-		selectedPathes = selectedDataKeys;
-	});
-
-	function handleCheck(dataObj: TreeItemType, act: boolean) {
-		if (act) {
-			selectedDataKeys = [...selectedDataKeys, dataObj.path].filter((x) => x);
-		} else {
-			delete selectedDataKeys[selectedDataKeys?.indexOf(dataObj.path)];
-			selectedDataKeys = [...selectedDataKeys].filter((x) => x);
-		}
-		// select all children down
-		setChildrenState(dataObj.children, act);
-		setParentState(dataObj, act);
-	}
-
-	function setParentState(dataObj: TreeItemType, act: boolean) {
-		const arrP = dataObj.path.split(splitter);
-
-		arrP.forEach((path, index) => {
-			let checkPath = arrP.slice(0, index).join(splitter);
-
-			if (act) {
-				selectedDataKeys = [...selectedDataKeys, checkPath].filter((x) => x);
-			} else {
-				delete selectedDataKeys[selectedDataKeys?.indexOf(checkPath)];
-				selectedDataKeys = [...selectedDataKeys].filter((x) => x);
-			}
-		});
-	}
-
-	function setChildrenState(dataObj: TreeItemType[], act: boolean) {
-		if (dataObj.length) {
-			dataObj.forEach((treeItem) => {
-				if (act) {
-					selectedDataKeys = [...selectedDataKeys, treeItem.path].filter((x) => x);
-				} else {
-					delete selectedDataKeys[selectedDataKeys?.indexOf(treeItem.path)];
-					selectedDataKeys = [...selectedDataKeys].filter((x) => x);
-				}
-				setChildrenState(treeItem.children, act);
-			});
-		}
-	}
-
-	function toggle(path: string, visibility?: boolean) {
-		visibleChildChild[path] = visibility ?? !visibleChildChild[path];
-	}
-</script>
-
-<div bind:this={element} class="tree {className}">
-	{#each pathes as pat, k}
-		<div data-category={pat.path}>
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				data-category-title={pat.path}
-				aria-selected={selectedCategory === pat.path}
-				onclick={(event) => {
-					selectedCategory = pat.path;
-					toggle(pat.path);
-				}}
-				title={pat.path}
-				style="--tree-level:{level * 1.5}rem"
-				class="tree-cell"
-			>
-				<div class="tree-cell-arrow">
-					{#if pat?.children?.length}
-						<Icon icon="chevron-{visibleChildChild[pat.path] ? 'down' : 'right'}" />
-					{/if}
-				</div>
-				<div class="tree-cell-title-gutter">
-					{#if showCheckBox}
-						<input
-							onclick={(event) => {
-								event.stopPropagation();
-								handleCheck(pat, event?.currentTarget?.checked);
-							}}
-							type="checkbox"
-							style="display:block;border:1px solid red;"
-							checked={Boolean(selectedDataKeys.includes(pat.path))}
-						/>
-					{/if}
-					<Slotted child={children} slotArgs={{ item: pat, idx: k }}>
-						<div>{pat.name}</div>
-					</Slotted>
-				</div>
-			</div>
-			<div
-				data-category-children={pat.path}
-				style="display:{visibleChildChild[pat.path] ? '' : 'none'};"
-			>
-				{#if pat?.children?.length}
-					<svelte:self
-						level={level + 1}
-						bind:selectedDataKeys
-						bind:data
-						bind:selectedCategory
-						bind:showCheckBox
-						pathes={pat.children}
-					/>
-				{/if}
-			</div>
-		</div>
-	{/each}
-</div>
-
+<svelte:options />
+
+<script lang="ts" generics="T = Data">
+	import type { Snippet } from 'svelte';
+
+	import { trans2Tree } from './tree.utils.js';
+	import type { TreeItemType } from './types.js';
+	import Icon from '../../base/icon/Icon.svelte';
+	import { dataOp } from '../../utils/engine/utils.js';
+	import type { CommonProps, Data } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	type TreeProps = CommonProps & {
+		/** data to be displayed in the tree */
+		data?: T[];
+
+		/** paths to be displayed in the tree */
+		paths: Record<string, any>[];
+
+		/** field to be used for paths */
+		pathField?: string;
+
+		/** private use */
+		pathes?: TreeItemType[];
+
+		/** private use */
+		level?: number;
+
+		/** private use */
+		selectedDataKeys?: string[];
+
+		/** exported data */
+		selectedData?: T[];
+
+		/** exported selected paths */
+		selectedPathes?: string[];
+
+		/** the split we use to build hierarchy */
+		splitter?: string;
+
+		/** show checkbox to select */
+		showCheckBox?: boolean;
+
+		/** selected category */
+		selectedCategory?: string;
+
+		element?: HTMLElement;
+		children?: Snippet<[{ item: TreeItemType; idx: number }]>;
+	};
+
+	let {
+		class: className = '',
+		pathField = 'path',
+		level = 0,
+		splitter = '/',
+		element = $bindable(),
+		data = $bindable([]),
+		paths = $bindable([]),
+		showCheckBox = $bindable(false),
+		selectedCategory = $bindable(''),
+		selectedDataKeys = $bindable([]),
+		selectedData = $bindable([]),
+		selectedPathes = $bindable([]),
+		pathes = trans2Tree(paths, pathField),
+		children
+	}: TreeProps = $props();
+
+	let visibleChildChild: Record<string, boolean> = $state({});
+	let finalPaths: TreeItemType[] = $state([]);
+
+	$effect(() => {
+		finalPaths = trans2Tree(paths, pathField);
+		selectedData = selectedDataKeys.map((dataKey) => {
+			return dataOp.filterListFirst(paths, dataKey, pathField);
+		});
+		selectedPathes = selectedDataKeys;
+	});
+
+	function handleCheck(dataObj: TreeItemType, act: boolean) {
+		if (act) {
+			selectedDataKeys = [...selectedDataKeys, dataObj.path].filter((x) => x);
+		} else {
+			delete selectedDataKeys[selectedDataKeys?.indexOf(dataObj.path)];
+			selectedDataKeys = [...selectedDataKeys].filter((x) => x);
+		}
+		// select all children down
+		setChildrenState(dataObj.children, act);
+		setParentState(dataObj, act);
+	}
+
+	function setParentState(dataObj: TreeItemType, act: boolean) {
+		const arrP = dataObj.path.split(splitter);
+
+		arrP.forEach((path, index) => {
+			let checkPath = arrP.slice(0, index).join(splitter);
+
+			if (act) {
+				selectedDataKeys = [...selectedDataKeys, checkPath].filter((x) => x);
+			} else {
+				delete selectedDataKeys[selectedDataKeys?.indexOf(checkPath)];
+				selectedDataKeys = [...selectedDataKeys].filter((x) => x);
+			}
+		});
+	}
+
+	function setChildrenState(dataObj: TreeItemType[], act: boolean) {
+		if (dataObj.length) {
+			dataObj.forEach((treeItem) => {
+				if (act) {
+					selectedDataKeys = [...selectedDataKeys, treeItem.path].filter((x) => x);
+				} else {
+					delete selectedDataKeys[selectedDataKeys?.indexOf(treeItem.path)];
+					selectedDataKeys = [...selectedDataKeys].filter((x) => x);
+				}
+				setChildrenState(treeItem.children, act);
+			});
+		}
+	}
+
+	function toggle(path: string, visibility?: boolean) {
+		visibleChildChild[path] = visibility ?? !visibleChildChild[path];
+	}
+</script>
+
+<div bind:this={element} class="tree {className}">
+	{#each pathes as pat, k}
+		<div data-category={pat.path}>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				data-category-title={pat.path}
+				aria-selected={selectedCategory === pat.path}
+				onclick={(event) => {
+					selectedCategory = pat.path;
+					toggle(pat.path);
+				}}
+				title={pat.path}
+				style="--tree-level:{level * 1.5}rem"
+				class="tree-cell"
+			>
+				<div class="tree-cell-arrow">
+					{#if pat?.children?.length}
+						<Icon icon="chevron-{visibleChildChild[pat.path] ? 'down' : 'right'}" />
+					{/if}
+				</div>
+				<div class="tree-cell-title-gutter">
+					{#if showCheckBox}
+						<input
+							onclick={(event) => {
+								event.stopPropagation();
+								handleCheck(pat, event?.currentTarget?.checked);
+							}}
+							type="checkbox"
+							style="display:block;border:1px solid red;"
+							checked={Boolean(selectedDataKeys.includes(pat.path))}
+						/>
+					{/if}
+					<Slotted child={children} slotArgs={{ item: pat, idx: k }}>
+						<div>{pat.name}</div>
+					</Slotted>
+				</div>
+			</div>
+			<div
+				data-category-children={pat.path}
+				style="display:{visibleChildChild[pat.path] ? '' : 'none'};"
+			>
+				{#if pat?.children?.length}
+					<svelte:self
+						level={level + 1}
+						bind:selectedDataKeys
+						bind:data
+						bind:selectedCategory
+						bind:showCheckBox
+						pathes={pat.children}
+					/>
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>
+
 <style>:root {
   --tree-cell-border: 1px solid transparent;
   --tree-cell-padding: var(--sld-pad-tiny);
@@ -228,4 +228,4 @@
   border-radius: var(--sld-radius-med);
   left: 0;
   border: 1px solid var(--sld-color-primary-alpha-mid);
-}</style>
+}</style>

package/dist/ui/tree/tree.scss

@@ -1,38 +1,38 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --tree-cell-border: 1px solid transparent;
-    --tree-cell-padding: var(--sld-pad-tiny);
-    --tree-cell-border-radius: var(--sld-radius-small);
-    --tree-cell-gap: var(--sld-gap-tiny);
-    --tree-cell-arrow-width: 16px;
-    --tree-cell-title-gutter-gap: var(--sld-pad-tiny);
-}
-
-.tree {
-    &-cell {
-        border: var(--tree-cell-border);
-        padding: var(--tree-cell-padding);
-        padding-left: var(--tree-level);
-        border-radius: var(--tree-cell-border-radius);
-        gap: var(--tree-cell-gap);
-        display: flex;
-        align-items: center;
-        width: 100%;
-        cursor: pointer;
-
-        &-arrow {
-            width: var(--tree-cell-arrow-width);
-            text-align: center;
-        }
-
-        &-title-gutter {
-            display: flex;
-            align-items: center;
-            gap: var(--tree-cell-title-gutter-gap);
-        }
-
-        @include slotui-mixins.data-hover;
-        @include slotui-mixins.data-selected;
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --tree-cell-border: 1px solid transparent;
+    --tree-cell-padding: var(--sld-pad-tiny);
+    --tree-cell-border-radius: var(--sld-radius-small);
+    --tree-cell-gap: var(--sld-gap-tiny);
+    --tree-cell-arrow-width: 16px;
+    --tree-cell-title-gutter-gap: var(--sld-pad-tiny);
+}
+
+.tree {
+    &-cell {
+        border: var(--tree-cell-border);
+        padding: var(--tree-cell-padding);
+        padding-left: var(--tree-level);
+        border-radius: var(--tree-cell-border-radius);
+        gap: var(--tree-cell-gap);
+        display: flex;
+        align-items: center;
+        width: 100%;
+        cursor: pointer;
+
+        &-arrow {
+            width: var(--tree-cell-arrow-width);
+            text-align: center;
+        }
+
+        &-title-gutter {
+            display: flex;
+            align-items: center;
+            gap: var(--tree-cell-title-gutter-gap);
+        }
+
+        @include slotui-mixins.data-hover;
+        @include slotui-mixins.data-selected;
+    }
+}

package/dist/ui/window/Window.demo.svelte

@@ -1,111 +1,111 @@
-<script lang="ts">
-	import { openWindow } from './actions.svelte.js';
-	import Button from '../../controls/button/Button.svelte';
-	import Debug from '../../base/debug/Debug.svelte';
-	import Window from './Window.svelte';
-
-	/* demo */
-	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import { uiPresets } from '../../utils/engine/presets.js';
-	/* demo */
-
-	import { parameters, componentArgs } from './types.js';
-
-	let multiple = {
-		showHandle: {
-			true: { showHandle: true },
-			false: { showHandle: false }
-		}
-	};
-
-	let code = `
-<Window title="Slotted window" frameId="slotted" >
-	{#snippet windowIcon()}
-		<Icon icon="bx:window-alt" />
-	{/snippet}
-  <div class="pad-4 align-center">
-  some slotted content
-  </div>
-</Window>
-`;
-
-	let codeProps = `
-<Button
-	onclick={() => {
-		openWindow("html", {
-		componentProps: { some: "props", someother: "deprops" },
-		contentHTML:
-			'<div class="pad-4 align-center">some html content</div>',
-		});
-	}}>
-	Window with html content
-</Button>
-
-<Button
-	onclick={() => {
-		openWindow("component", {
-		component: Debug,
-		componentProps: { some: "props", someother: "deprops" },
-		});
-	}}>
-	Window with component
-</Button>`;
-</script>
-
-<ComponentDemo
-	component="Window"
-	cite="Claiming they were not doors, made what they are today : windows <br /> Ch XX, 1320"
->
-	<div class="flex-v gap-large">
-		<DemoPage {code} component="Select">
-			<Demoer {multiple} {parameters} {componentArgs}
-				>{#snippet children({ activeParams })}
-					<div class="pad-2 h-large pos-rel">
-						<Window title="Slotted window" frameId="slotted" {...activeParams}>
-							{#snippet windowIcon()}
-								<Icon icon="bx:window-alt" />
-							{/snippet}
-							<div class="pad-4 align-center">some slotted content</div>
-						</Window>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage code={codeProps} component="Select" title="Using props">
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<div class="flex-h flex-align-middle pos-rel gap-medium">
-						<div>
-							<Button
-								onclick={() => {
-									openWindow('html', {
-										componentProps: { some: 'props', someother: 'deprops' },
-										contentHTML: '<div class="pad-4 align-center">some html content</div>'
-									});
-								}}
-							>
-								Window with html content
-							</Button>
-						</div>
-						<div>
-							<Button
-								onclick={() => {
-									openWindow('component', {
-										component: Debug,
-										componentProps: { some: 'props', someother: 'deprops' }
-									});
-								}}
-							>
-								Window with component
-							</Button>
-						</div>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import { openWindow } from './actions.svelte.js';
+	import Button from '../../controls/button/Button.svelte';
+	import Debug from '../../base/debug/Debug.svelte';
+	import Window from './Window.svelte';
+
+	/* demo */
+	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import { uiPresets } from '../../utils/engine/presets.js';
+	/* demo */
+
+	import { parameters, componentArgs } from './types.js';
+
+	let multiple = {
+		showHandle: {
+			true: { showHandle: true },
+			false: { showHandle: false }
+		}
+	};
+
+	let code = `
+<Window title="Slotted window" frameId="slotted" >
+	{#snippet windowIcon()}
+		<Icon icon="bx:window-alt" />
+	{/snippet}
+  <div class="pad-4 align-center">
+  some slotted content
+  </div>
+</Window>
+`;
+
+	let codeProps = `
+<Button
+	onclick={() => {
+		openWindow("html", {
+		componentProps: { some: "props", someother: "deprops" },
+		contentHTML:
+			'<div class="pad-4 align-center">some html content</div>',
+		});
+	}}>
+	Window with html content
+</Button>
+
+<Button
+	onclick={() => {
+		openWindow("component", {
+		component: Debug,
+		componentProps: { some: "props", someother: "deprops" },
+		});
+	}}>
+	Window with component
+</Button>`;
+</script>
+
+<ComponentDemo
+	component="Window"
+	cite="Claiming they were not doors, made what they are today : windows <br /> Ch XX, 1320"
+>
+	<div class="flex-v gap-large">
+		<DemoPage {code} component="Select">
+			<Demoer {multiple} {parameters} {componentArgs}
+				>{#snippet children({ activeParams })}
+					<div class="pad-2 h-large pos-rel">
+						<Window title="Slotted window" frameId="slotted" {...activeParams}>
+							{#snippet windowIcon()}
+								<Icon icon="bx:window-alt" />
+							{/snippet}
+							<div class="pad-4 align-center">some slotted content</div>
+						</Window>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage code={codeProps} component="Select" title="Using props">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<div class="flex-h flex-align-middle pos-rel gap-medium">
+						<div>
+							<Button
+								onclick={() => {
+									openWindow('html', {
+										componentProps: { some: 'props', someother: 'deprops' },
+										contentHTML: '<div class="pad-4 align-center">some html content</div>'
+									});
+								}}
+							>
+								Window with html content
+							</Button>
+						</div>
+						<div>
+							<Button
+								onclick={() => {
+									openWindow('component', {
+										component: Debug,
+										componentProps: { some: 'props', someother: 'deprops' }
+									});
+								}}
+							>
+								Window with component
+							</Button>
+						</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>