@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/chromeFrame/ChromeFrameList.svelte

@@ -0,0 +1,67 @@
+<svelte:options />
+
+<script lang="ts">import { chromeFrameListRef, chromeFrameStore } from "./chromeFrame.store.js";
+import ChromeFrame from "./ChromeFrame.svelte";
+import { browser } from "$app/environment";
+let {
+  className = "",
+  style = "",
+  element,
+  chromeListConfig = {}
+} = $props();
+let defaultConfig = chromeFrameStore.defaultConfigStore;
+$effect(() => {
+  if (chromeListConfig) {
+    chromeFrameStore.defaultConfigStore.set(chromeListConfig);
+  }
+});
+$effect(() => {
+  if (browser && element && $defaultConfig.parent) {
+    const parent = typeof $defaultConfig.parent === "string" ? document.querySelector($defaultConfig.parent) : $defaultConfig.parent;
+    try {
+      parent.appendChild(element);
+    } catch (e) {
+      throw new Error("parent does not seems to exist for ChromeFrameList");
+    }
+  }
+});
+$effect(() => {
+  Boolean(browser) && Object.keys(chromeFrameListRef).forEach((frameId) => {
+    if (!$chromeFrameStore.get(frameId)) {
+      console.log("destroy !");
+      chromeFrameListRef[frameId].$destroy();
+      delete chromeFrameListRef[frameId];
+    }
+  });
+});
+$effect(() => {
+  Boolean(browser) && $chromeFrameStore.forEach((args, frameId) => {
+    if (!args.noFrameListButton && !chromeFrameListRef[frameId]) {
+      chromeFrameListRef[frameId] = new ChromeFrame({
+        target: element,
+        props: {
+          title: frameId,
+          ...chromeListConfig,
+          ...args,
+          frameId
+        }
+      });
+    }
+  });
+});
+$effect(() => {
+  if (browser && element) {
+    if (!$chromeFrameStore.size) {
+      element.style.display = "none";
+    } else {
+      element.style.display = "";
+    }
+  }
+});
+</script>
+
+<div
+	bind:this={element}
+	class="pos-abs h-full w-full top-0 {className}"
+	style="z-index:9000;display:none;{style}"
+></div>

package/dist/ui/chromeFrame/ChromeFrameList.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { IChromeOptionsArgs } from './types.js';
+declare const __propDef: {
+    props: {
+        /** The class name of the component */
+        className: string;
+        /** The style of the component */
+        style: string;
+        /** The HTML element of the component */
+        element: HTMLDivElement | null;
+        /** The configuration for the chrome list */
+        chromeListConfig: IChromeOptionsArgs;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ChromeFrameListProps_ = typeof __propDef.props;
+export { ChromeFrameListProps_ as ChromeFrameListProps };
+export type ChromeFrameListEvents = typeof __propDef.events;
+export type ChromeFrameListSlots = typeof __propDef.slots;
+export default class ChromeFrameList extends SvelteComponent<ChromeFrameListProps_, ChromeFrameListEvents, ChromeFrameListSlots> {
+}

package/dist/ui/chromeFrame/chrome-frame.scss

@@ -0,0 +1,34 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --chrome-frame-color: var(--sld-color-foreground);
+    --chrome-frame-background-color: var(--sld-color-background);
+    --chrome-frame-bar-gap: var(--sld-gap-med);
+    --chrome-frame-bar-padding: var(--sld-pad-medium);
+    --chrome-frame-bar-border-bottom: var(--sld-color-border);
+    --chrome-frame-content-flex: 1;
+}
+
+.chrome-frame {
+    @include flex("column");
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    color: var(--chrome-frame-color);
+    background-color: var(--chrome-frame-background-color);
+    overflow: hidden;
+
+    &-bar {
+        @include flex("row", center);
+        gap: var(--chrome-frame-bar-gap);
+        padding: var(--chrome-frame-bar-padding);
+        border-bottom: 1px solid var(--chrome-frame-bar-border-bottom);
+    }
+
+    &-content {
+        flex: var(--chrome-frame-content-flex);
+        overflow: hidden;
+        position: relative;
+    }
+}

package/dist/ui/chromeFrame/chromeFrame.store.js

@@ -0,0 +1,122 @@
+import { writable } from 'svelte/store';
+import { tick } from 'svelte';
+/** used as a reference */
+export const windowListObjects = new Map([]);
+/** active frameId */
+export const activeFrame = writable('');
+/** host the generic configuration */
+export const chromeFrameConfigStore = writable({ showCommandBar: true });
+/** host the chromeFrame list */
+export const chromeFrameListStore = writable(windowListObjects);
+/*chromeFrameConfigStore.set()
+ $chromeFrameConfigStore.onClose = ()=>{}*/
+function createChromeFrameStore() {
+    const { subscribe, set, update } = chromeFrameListStore;
+    let currentStore = new Map([]);
+    chromeFrameListStore.subscribe((value) => {
+        currentStore = value;
+    });
+    let currentConf = {};
+    chromeFrameConfigStore.subscribe((conf) => {
+        currentConf = conf;
+    });
+    // active means on top too
+    // set as active, inactivate others
+    async function setActive(frameId) {
+        const currentChromeFrame = currentStore.get(frameId);
+        console.log('setActive ', frameId);
+        if (currentChromeFrame) {
+            currentStore.forEach((frame, frameKey) => {
+                currentStore.set(frameKey, { ...frame, active: false });
+            });
+            // await tick();
+            //
+            const values = Array.from(currentStore);
+            const zIndex = values.reduce((prev, val) => {
+                // @ts-ignore
+                return val[1]?.zIndex >= prev ? val[1]?.zIndex + values.length : prev;
+            }, 0);
+            currentStore.set(frameId, { ...currentChromeFrame, zIndex, active: true, minimized: true });
+            activeFrame.set(frameId);
+            console.log('setActive (activated) ', frameId);
+        }
+    }
+    return {
+        subscribe,
+        activeFrame,
+        defaultConfigStore: chromeFrameConfigStore,
+        create: (payload) => update((n) => {
+            setActive(payload.frameId);
+            // test global conf
+            return n.set(payload.frameId, { ...currentConf, ...payload });
+        }),
+        open: (payload) => update((n) => {
+            if (!payload.frameId)
+                return n;
+            console.log('open chromeFrame from chromeFrameStore ', payload.frameId);
+            activeFrame.set(payload.frameId);
+            setActive(payload.frameId);
+            const obj = n.get(payload.frameId) ?? {};
+            // global injection
+            return n.set(payload.frameId, {
+                ...obj,
+                ...currentConf,
+                ...payload,
+                open: true,
+                maximized: true,
+                minimized: false
+            });
+        }),
+        close: (frameId) => update((n) => {
+            const payload = n.get(frameId);
+            // execute onClose parameter
+            if (payload && payload.onClose) {
+                payload.onClose(payload);
+            }
+            return n.set(frameId, { ...payload, frameId, open: false });
+        }),
+        minimize: (frameId) => update((n) => {
+            const payload = n.get(frameId);
+            return n.set(frameId, { ...payload, frameId, minimized: true });
+        }),
+        toggle: (frameId) => update((n) => {
+            const payload = n.get(frameId);
+            // set as active, if visible
+            if (!payload?.minimized)
+                setActive(frameId);
+            return n.set(frameId, { ...payload, frameId, minimized: !payload?.minimized });
+        }),
+        remove: (frameId) => update((n) => {
+            const payload = n.get(frameId);
+            // execute onClose parameter
+            if (payload && payload.onClose) {
+                payload.onClose(payload);
+            }
+            n.delete(frameId);
+            return n;
+        }),
+        updatePos: (frameId, position) => update((n) => {
+            const payload = n.get(frameId);
+            n.set(frameId, { ...payload, frameId, position: position });
+            return n;
+        }),
+        makeOnTop: (frameId) => update((n) => {
+            const values = Array.from(n);
+            const payload = n.get(frameId);
+            const z = values.reduce((prev, val) => {
+                // @ts-ignore
+                return val[1]?.zIndex >= prev ? val[1]?.zIndex + 1 : prev;
+            }, 0);
+            // set as active, inactivate others
+            setActive(frameId);
+            /*n.forEach((frame, frameKey) => {
+   n.set(frameKey, {...frame, active: false});
+   });*/
+            n.set(frameId, { ...payload, frameId, zIndex: z, active: true });
+            return n;
+        }),
+        reset: () => set(new Map([]))
+    };
+}
+export const chromeFrameStore = createChromeFrameStore();
+export const chromeFrameListRef = {};

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

@@ -0,0 +1,12 @@
+import type { ChromeFrameArgs } from './types.js';
+export declare function getChromeFrame(frameId: string | number): {
+    subscribe: (this: void, run: (value: ChromeFrameArgs<Record<string, any>> | undefined) => void, invalidate?: () => void) => () => void;
+    updatePos: (position: ChromeFrameArgs["position"]) => void;
+    remove: () => void;
+    makeOnTop: () => void;
+    minimize: () => void;
+    toggle: () => void;
+};
+/** open a chrome frame in DOM and add it to the store **/
+export declare function openChromeFrame(frameId: string, args?: Partial<ChromeFrameArgs>): void;
+export declare function removeChromeFrame(frameId: string, args?: Partial<ChromeFrameArgs>): void;

package/dist/ui/chromeFrame/chromeFrame.utils.js

@@ -0,0 +1,29 @@
+import { derived, get } from 'svelte/store';
+import { chromeFrameStore } from './chromeFrame.store.js';
+export function getChromeFrame(frameId) {
+    const { subscribe } = derived([chromeFrameStore], ([$windowsStore]) => {
+        return $windowsStore.get(frameId);
+    });
+    return {
+        subscribe,
+        updatePos: (position) => chromeFrameStore.updatePos(frameId, position),
+        remove: () => chromeFrameStore.remove(frameId),
+        makeOnTop: () => chromeFrameStore.makeOnTop(frameId),
+        minimize: () => chromeFrameStore.minimize(frameId),
+        toggle: () => chromeFrameStore.toggle(frameId)
+    };
+}
+/** open a chrome frame in DOM and add it to the store **/
+export function openChromeFrame(frameId, args = {}) {
+    console.log('openChromeFrame from utils :', frameId);
+    chromeFrameStore.open({
+        title: frameId,
+        defaultPosition: { x: 960, y: 650 },
+        component: args.component,
+        ...args,
+        frameId: frameId // cannot overwrite+
+    });
+}
+export function removeChromeFrame(frameId, args = {}) {
+    chromeFrameStore.remove(frameId);
+}

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

@@ -0,0 +1,40 @@
+/** @deprecated use IChromeOptionsFrameArgs instead */
+export type IChromeOptionsArgs<T = Record<string, any>> = {};
+export type IChromeOptionsFrameArgs<T = Record<string, any>> = {
+    /** fires event on:chromeframe:close */
+    onClose?: (chromeFrame?: ChromeFrameArgs) => void;
+    /** fires event on:chromeframe:hide */
+    onCancel?: (chromeFrame?: ChromeFrameArgs) => void;
+    /** fires event on:chromeframe:validate */
+    onValidate?: (chromeFrame?: ChromeFrameArgs) => void;
+    showCommandBar?: boolean;
+    parent?: string;
+};
+/** @deprecated use IChromeFrameArgs instead */
+export interface IChromeArgs<T = Record<string, any>> extends IChromeOptionsFrameArgs {
+}
+export interface ChromeFrameArgs<T = Record<string, any>> extends IChromeOptionsFrameArgs {
+    frameId: string | number;
+    title?: string;
+    open?: boolean;
+    minimized?: boolean;
+    maximized?: boolean;
+    noFrameListButton?: boolean;
+    active?: boolean;
+    secondaryTitle?: string;
+    description?: string;
+    path?: string;
+    component?: any;
+    componentProps?: any;
+    parent?: string;
+    zIndex?: number;
+    data?: T;
+    position?: {
+        x: number;
+        y: number;
+    };
+    defaultPosition?: {
+        x: number;
+        y: number;
+    };
+}

package/dist/ui/chromeFrame/types.js

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

package/dist/ui/frame/Frame.demo.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import MenuList from "../menuList/MenuList.svelte";
+import MenuListItem from "../menuList/MenuListItem.svelte";
+import Frame from "./Frame.svelte";
+</script>
+
+<ComponentDemo component="Frame">
+	<div class="flex-h gap-medium border overflow-hidden">
+		<Frame style="height:350px;width:80%">
+			{#snippet drawerTop()}
+				<div class="pad">
+					<h4>Menu header</h4>
+				</div>
+			{/snippet}
+			{#snippet drawerContent()}
+				<h5>A menu</h5>
+				<MenuList style="width:100%">
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+				</MenuList>
+				<h5>A menu again</h5>
+				<MenuList style="width:100%">
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+					<MenuListItem>menu item</MenuListItem>
+				</MenuList>
+			{/snippet}
+			{#snippet frameTop()}
+				<h4>Frame title</h4>
+			{/snippet}
+			{#snippet frameContent()}
+				<div class="pad">
+					<h5>Frame content</h5>
+				</div>
+			{/snippet}
+			{#snippet frameBottom()}
+				<div class="pad">bottom zone</div>
+			{/snippet}
+		</Frame>
+	</div>
+</ComponentDemo>

package/dist/ui/frame/Frame.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 FrameProps = typeof __propDef.props;
+export type FrameEvents = typeof __propDef.events;
+export type FrameSlots = typeof __propDef.slots;
+export default class Frame extends SvelteComponent<FrameProps, FrameEvents, FrameSlots> {
+}
+export {};

package/dist/ui/frame/Frame.svelte

@@ -0,0 +1,135 @@
+<svelte:options />
+
+<script lang="ts">import Drawer from "../../navigation/drawer/Drawer.svelte";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+const defaultDrawerProps = {
+  isOpen: false,
+  hideCloseIcon: true,
+  showOpenerIcon: true,
+  stickTo: "left",
+  flow: "relative",
+  defaultWidth: "200px"
+};
+let {
+  class: className = "",
+  element = $bindable(),
+  frameDrawerRef,
+  elementNav,
+  style = "",
+  drawerWidth = "200px",
+  drawerProps = { ...defaultDrawerProps },
+  children,
+  frameNavHeader,
+  drawerTop,
+  drawerContent,
+  drawerFooter,
+  drawerTitle,
+  drawerIcon,
+  drawerPrimary,
+  drawerSecondary,
+  frameTop,
+  frameContent,
+  frameBottom,
+  ...rest
+} = $props();
+let menuOpen = $state(true);
+export const actions = {
+  openNavLeft: () => {
+    menuOpen = true;
+  },
+  toggleNavLeft: () => {
+    menuOpen = !menuOpen;
+  },
+  closeNavLeft: () => {
+    menuOpen = !menuOpen;
+  }
+};
+</script>
+
+<div bind:this={element} class="frame {className}" {style} {...rest}>
+	<div class="frame-container">
+		<div bind:this={elementNav} class="frame-container-nav">
+			{#if frameDrawerRef?.isOpen}
+				<Slotted child={frameNavHeader}></Slotted>
+			{/if}
+			<Drawer
+				bind:this={frameDrawerRef}
+				bind:isOpen={menuOpen}
+				style="flex:1;position:relative;"
+				defaultWidth={drawerWidth}
+				{...defaultDrawerProps}
+				{...drawerProps}
+			>
+				<Slotted child={drawerProps?.drawerIcon ?? drawerIcon} />
+				<Slotted child={drawerProps?.drawerFooter ?? drawerFooter} />
+				<Slotted child={drawerProps?.drawerTitle ?? drawerTitle} />
+				<Slotted child={drawerProps?.drawerPrimary ?? drawerPrimary} />
+				<Slotted child={drawerProps?.drawerSecondary ?? drawerSecondary} />
+				<Slotted child={drawerProps?.drawerTop ?? drawerTop} />
+				<Slotted child={drawerContent} />
+			</Drawer>
+		</div>
+		<div class="frame-container-main">
+			<Slotted child={frameTop}></Slotted>
+
+			<div class="frame-container-main-content">
+				<Slotted child={frameContent}></Slotted>
+			</div>
+			<Slotted child={frameBottom}></Slotted>
+		</div>
+	</div>
+</div>
+
+<style global>:root {
+  --frame-background-color: var(--sld-color-paper);
+  --frame-backdrop-filter: blur(30px);
+  --frame-container-border-right: var(--sld-color-primary);
+}
+
+.frame {
+  z-index: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: "column";
+  align-items: flex-start;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--frame-background-color);
+  --moz-backdrop-filter: var(--frame-backdrop-filter);
+  backdrop-filter: var(--frame-backdrop-filter);
+  overflow: hidden;
+}
+
+.frame-container {
+  display: flex;
+  flex-direction: "row";
+  align-items: flex-start;
+  flex: 1 1 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.frame-container-nav {
+  display: flex;
+  flex-direction: "column";
+  align-items: flex-start;
+  flex: 1 1 0;
+  z-index: 1;
+  border-right: 1px solid var(--frame-container-border-right);
+  position: relative;
+}
+
+.frame-container-main {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: "column";
+  align-items: flex-start;
+}
+
+.frame-container-main-content {
+  flex: 1 1 0;
+  overflow: hidden;
+  position: relative;
+}</style>

package/dist/ui/frame/Frame.svelte.d.ts

@@ -0,0 +1,44 @@
+import { SvelteComponent } from "svelte";
+import Drawer from '../../navigation/drawer/Drawer.svelte';
+import type { DrawerProps } from '../../navigation/drawer/types.js';
+declare const __propDef: {
+    props: import("../../types/index.js").CommonProps & {
+        drawerWidth?: string;
+        drawerProps?: DrawerProps;
+        frameDrawerRef?: typeof Drawer;
+        elementNav?: HTMLDivElement;
+        children?: import("svelte").Snippet;
+        frameContent?: import("svelte").Snippet;
+        frameNavHeader?: import("svelte").Snippet;
+        frameTop?: import("svelte").Snippet;
+        frameBottom?: import("svelte").Snippet;
+        drawerTop?: import("svelte").Snippet;
+        drawerContent?: import("svelte").Snippet;
+        drawerIcon?: import("svelte").Snippet;
+        drawerTitle?: import("svelte").Snippet;
+        drawerPrimary?: import("svelte").Snippet;
+        drawerSecondary?: import("svelte").Snippet;
+        drawerFooter?: import("svelte").Snippet;
+    } & {
+        actions?: {
+            openNavLeft: () => void;
+            toggleNavLeft: () => void;
+            closeNavLeft: () => void;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type FrameProps_ = typeof __propDef.props;
+export { FrameProps_ as FrameProps };
+export type FrameEvents = typeof __propDef.events;
+export type FrameSlots = typeof __propDef.slots;
+export default class Frame extends SvelteComponent<FrameProps_, FrameEvents, FrameSlots> {
+    get actions(): {
+        openNavLeft: () => void;
+        toggleNavLeft: () => void;
+        closeNavLeft: () => void;
+    };
+}

package/dist/ui/frame/frame.scss

@@ -0,0 +1,46 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --frame-background-color: var(--sld-color-paper);
+    --frame-backdrop-filter: blur(30px);
+    --frame-container-border-right: var(--sld-color-primary);
+}
+
+.frame {
+    z-index: 1;
+    height: 100%;
+    @include flex("column");
+    overflow: hidden;
+    position: relative;
+    background-color: var(--frame-background-color);
+    --moz-backdrop-filter: var(--frame-backdrop-filter);
+    backdrop-filter: var(--frame-backdrop-filter);
+    overflow: hidden;
+
+    &-container {
+        @include flex("row");
+        @include flex-main();
+        position: relative;
+        overflow: hidden;
+        &-nav {
+            @include flex("column");
+            @include flex-main();
+            z-index: 1;
+            border-right: 1px solid var(--frame-container-border-right);
+            position: relative;
+        }
+
+        &-main {
+            flex: 1;
+            height: 100%;
+            overflow: hidden;
+            @include flex("column");
+
+            &-content {
+                @include flex-main();
+                overflow: hidden;
+                position: relative;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,31 @@
+import { type DemoerStoryProps, type Drawer } from '../../index.js';
+import type { DrawerProps } from '../../navigation/drawer/types.js';
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type FrameProps = CommonProps & {
+    /** Width of the drawer */
+    drawerWidth?: string;
+    /** Props for the drawer */
+    drawerProps?: DrawerProps;
+    frameDrawerRef?: typeof Drawer;
+    elementNav?: HTMLDivElement;
+    /** Children snippet for the default content */
+    children?: Snippet;
+    frameContent?: Snippet;
+    /** Slot for the nav left header frame */
+    frameNavHeader?: Snippet;
+    /** Slot for the frame top */
+    frameTop?: Snippet;
+    /** Slot for the frame bottom */
+    frameBottom?: Snippet;
+    /** Slot for the drawer top */
+    drawerTop?: Snippet;
+    /** Slot for the drawer content */
+    drawerContent?: Snippet;
+    drawerIcon?: Snippet;
+    drawerTitle?: Snippet;
+    drawerPrimary?: Snippet;
+    drawerSecondary?: Snippet;
+    drawerFooter?: Snippet;
+};
+export declare let parameters: DemoerStoryProps<FrameProps>, componentArgs: FrameProps;

package/dist/ui/frame/types.js

@@ -0,0 +1,9 @@
+import { demoerArgs } from '../../index.js';
+const frameDemoValues = {
+    drawerWidth: {
+        type: 'string',
+        values: ['200px', '300px', '400px'],
+        default: '200px'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(frameDemoValues);