@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/tree/Tree.preview.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import Tree from "./Tree.svelte";
+let pathsData = [
+  { name: "", path: "About/Svelte", other: "item" },
+  { name: "", path: "About", other: "item" },
+  { name: "", path: "Categories/Demo/Svelte", other: "item" },
+  { name: "", path: "Categories/Demo/Svelte/Demo" },
+  { name: "", path: "Categories/Index" },
+  { name: "", path: "Categories/About" },
+  { name: "", path: "Categories/Demo" }
+];
+let selectedData = [];
+</script>
+
+<div class="flex-v gap-medium h-large-min">
+	<Tree pathField="path" paths={pathsData} bind:selectedData />
+</div>

package/dist/ui/tree/Tree.preview.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TreeProps = typeof __propDef.props;
+export type TreeEvents = typeof __propDef.events;
+export type TreeSlots = typeof __propDef.slots;
+export default class Tree extends SvelteComponent<TreeProps, TreeEvents, TreeSlots> {
+}
+export {};

package/dist/ui/tree/Tree.svelte

@@ -0,0 +1,184 @@
+<svelte:options />
+
+<script lang="ts" generics="T = Data">import { trans2Tree } from "./tree.utils.js";
+import Icon from "../../base/icon/Icon.svelte";
+import { dataOp } from "../../utils/engine/utils.js";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+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
+} = $props();
+let visibleChildChild = $state({});
+let finalPaths = $state([]);
+$effect(() => {
+  finalPaths = trans2Tree(paths, pathField);
+  selectedData = selectedDataKeys.map((dataKey) => {
+    return dataOp.filterListFirst(paths, dataKey, pathField);
+  });
+  selectedPathes = selectedDataKeys;
+});
+function handleCheck(dataObj, act) {
+  if (act) {
+    selectedDataKeys = [...selectedDataKeys, dataObj.path].filter((x) => x);
+  } else {
+    delete selectedDataKeys[selectedDataKeys?.indexOf(dataObj.path)];
+    selectedDataKeys = [...selectedDataKeys].filter((x) => x);
+  }
+  setChildrenState(dataObj.children, act);
+  setParentState(dataObj, act);
+}
+function setParentState(dataObj, act) {
+  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, act) {
+  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, visibility) {
+  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}
+				data-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);
+  --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;
+}
+
+.tree-cell-arrow {
+  width: var(--tree-cell-arrow-width);
+  text-align: center;
+}
+
+.tree-cell-title-gutter {
+  display: flex;
+  align-items: center;
+  gap: var(--tree-cell-title-gutter-gap);
+}
+
+.tree-cell:hover {
+  border-color: var(--sld-hover-border-color);
+  background-color: var(--sld-background-disabled);
+}
+
+.tree-cell.selected, .tree-cell[aria-selected=true], .tree-cell[data-selected=true] {
+  border-color: none;
+  background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
+  box-shadow: var(--sld-selected-shadow);
+}
+
+.tree-cell.selected .listItemChip,
+.tree-cell.selected .menuItemChip, .tree-cell[aria-selected=true] .listItemChip,
+.tree-cell[aria-selected=true] .menuItemChip, .tree-cell[data-selected=true] .listItemChip,
+.tree-cell[data-selected=true] .menuItemChip {
+  position: absolute;
+  min-height: 16px;
+  height: 50%;
+  width: 3px;
+  background-color: var(--sld-color-primary);
+  border-radius: var(--sld-radius-med);
+  left: 0;
+  border: 1px solid var(--sld-color-primary-alpha-mid);
+}</style>

package/dist/ui/tree/Tree.svelte.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
+import type { TreeItemType } from './types.js';
+import type { CommonProps, Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): CommonProps & {
+        /** data to be displayed in the tree */
+        data?: T[] | undefined;
+        /** 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[] | undefined;
+        /** 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;
+        }]> | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type TreeProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type TreeEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type TreeSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Tree<T = Data> extends SvelteComponent<TreeProps_<T>, TreeEvents<T>, TreeSlots<T>> {
+}
+export {};

package/dist/ui/tree/tree.scss

@@ -0,0 +1,38 @@
+@import "../../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 data-hover;
+        @include data-selected;
+    }
+}

package/dist/ui/tree/tree.utils.d.ts

@@ -0,0 +1,2 @@
+import type { PathDataType, PathsType, TreeItemType } from './types.js';
+export declare const trans2Tree: (paths: PathsType, pathKey?: keyof PathDataType, splitter?: string) => TreeItemType[];

package/dist/ui/tree/tree.utils.js

@@ -0,0 +1,29 @@
+export const trans2Tree = (paths, pathKey = 'path', splitter = '/') => {
+    const tree = [];
+    // sort path alphabetically
+    const sortedPaths = paths.sort((a, b) => (a[pathKey] > b[pathKey] ? 1 : -1));
+    for (let i = 0; i < sortedPaths.length; i++) {
+        const path = sortedPaths[i][pathKey];
+        const pathSplice = path.split(splitter);
+        let currentLevel = tree;
+        for (let j = 0; j < pathSplice.length; j++) {
+            const part = pathSplice[j];
+            const existingPath = currentLevel.find((k) => k.name === part); //findWhere(currentLevel, 'name', part);
+            if (existingPath) {
+                currentLevel = existingPath.children;
+            }
+            else {
+                const newPart = {
+                    name: part,
+                    path: pathSplice.slice(0, j + 1).join(splitter),
+                    data: {},
+                    children: []
+                };
+                //
+                currentLevel.push(newPart);
+                currentLevel = newPart.children;
+            }
+        }
+    }
+    return tree;
+};

package/dist/ui/tree/types.d.ts

@@ -0,0 +1,15 @@
+export type PathDataType = {
+    name: string;
+    path: string;
+    data: Record<string, any>;
+};
+/**
+ * accepts array of string or array of path with linked data */
+export type PathsType = PathDataType[];
+export interface TreeItemType<T = Record<string, any>> {
+    name: string;
+    path: string;
+    checked?: boolean;
+    data?: T;
+    children: TreeItemType<T>[];
+}

package/dist/ui/tree/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,103 @@
+<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";
+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";
+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>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WindowProps = typeof __propDef.props;
+export type WindowEvents = typeof __propDef.events;
+export type WindowSlots = typeof __propDef.slots;
+export default class Window extends SvelteComponent<WindowProps, WindowEvents, WindowSlots> {
+}
+export {};