@medyll/idae-slotui-svelte 0.3.0

package/dist/ui/window/Window.svelte

@@ -0,0 +1,232 @@
+<svelte:options />
+
+<script lang="ts">import { wStore } from "./store.js";
+import Button from "../../controls/button/Button.svelte";
+import Icon from "../../base/icon/Icon.svelte";
+import { draggebler } from "../../utils/uses/draggabler.js";
+import { makeOnTop } from "../../utils/uses/makeOnTop.js";
+import { positioner } from "../../utils/uses/positioner.js";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+import IconButton from "../../controls/button/IconButton.svelte";
+let {
+  class: className = "",
+  style = "",
+  element = $bindable(),
+  component = void 0,
+  componentProps = void 0,
+  contentHTML = void 0,
+  parentNode = void 0,
+  icon = "bx:window-alt",
+  iconClose = "codicon:close",
+  iconValidate = "el:ok-circle",
+  flow = "absolute",
+  startPosition = void 0,
+  closeOnValidate = true,
+  removeFromDomOnClose = false,
+  self = $bindable(),
+  componentInstance,
+  outer = true,
+  frameId = crypto.randomUUID(),
+  title = "",
+  open = true,
+  minimized = false,
+  maximized = true,
+  active = true,
+  secondaryTitle = "",
+  description = "",
+  showHandle = true,
+  onClose = () => {
+  },
+  onCancel = () => {
+  },
+  onValidate = () => {
+  },
+  hideAcceptButton = false,
+  hideCloseButton = false,
+  hideCancelButton = true,
+  children,
+  windowIcon,
+  windowButtonZone
+} = $props();
+let formRef;
+export const actions = {
+  close: () => {
+    open = false;
+    if (onClose) onClose();
+    delete $wStore.instances[frameId];
+    if (removeFromDomOnClose && self) self.$destroy();
+  },
+  setActive: () => {
+    if ($wStore.activatedFrame !== frameId) $wStore.activatedFrame = frameId;
+  }
+};
+if (!$wStore?.instances?.[frameId]) {
+  $wStore.instances[frameId] = componentInstance;
+  if (active) $wStore.activatedFrame = frameId;
+}
+$effect(() => {
+  if (element && $wStore.activatedFrame === frameId) {
+    makeOnTop(element);
+  }
+  element?.addEventListener("mousedown", actions.setActive);
+  return () => {
+    if (removeFromDomOnClose) delete $wStore[frameId];
+  };
+});
+function handleCancel(args) {
+  if (onCancel) onCancel(args);
+}
+async function handleValidate(args) {
+  let closable = true;
+  console.log({ formRef });
+  if (formRef && formRef.hasOwnProperty("submit")) {
+    closable = await formRef.submit();
+  }
+  if (onValidate) onValidate(args);
+  if (closeOnValidate && closable) actions.close();
+}
+</script>
+
+{#key startPosition}
+	<dialog
+		bind:this={element}
+		{style}
+		style:position={flow}
+		style:display={open ? '' : 'none'}
+		use:positioner={{ position: startPosition }}
+		use:draggebler={{ disabled: false }}
+		use:makeOnTop
+		class="window {className} "
+		class:active={$wStore.activatedFrame === frameId}
+	>
+		{#if showHandle}
+			<header class="bar">
+				{#if icon || windowIcon}
+					<div class="bar-icon">
+						<Slotted child={windowIcon}>
+							<Icon iconSize="small" {icon} />
+						</Slotted>
+					</div>
+				{/if}
+				<div class="handle">{title ?? ''}</div>
+				<div class="ctrlZone">
+					<div>
+						<IconButton
+							variant="naked"
+							icon={{ icon: iconClose, iconSize: 'small', color: 'red' }}
+							style="aspect-ratio:1/1"
+							onclick={actions.close}
+						/>
+					</div>
+				</div>
+			</header>
+		{/if}
+		<div>
+			<Slotted child={children}>
+				{#key component}
+					{#if component}
+						<svelte:component this={component} {...componentProps} bind:this={formRef} />
+					{/if}
+				{/key}
+				{#if contentHTML}
+					{@html contentHTML}
+				{/if}
+			</Slotted>
+		</div>
+		{#if !hideCloseButton || !hideAcceptButton}
+			<Slotted child={windowButtonZone}>
+				<footer class="buttonZone">
+					{#if !hideCloseButton}
+						<Button width="auto" variant="naked" icon={iconClose} onclick={actions.close}
+							>Close</Button
+						>
+					{/if}
+					{#if !hideCancelButton}
+						<Button
+							width="auto"
+							variant="naked"
+							icon="ant-design:ellipsis-outlined"
+							onclick={handleCancel}
+							>Cancel
+						</Button>
+					{/if}
+					{#if !hideAcceptButton}
+						<Button width="auto" icon={iconValidate} onclick={handleValidate}>Validate</Button>
+					{/if}
+				</footer>
+			</Slotted>
+		{/if}
+	</dialog>
+{/key}
+
+<!-- {#if outer}
+	<svelte:self bind:this={componentInstance} outer={false} />
+{:else}
+{/if} -->
+
+<style>:root {
+  --window-border-radius: var(--sld-radius-small);
+  --window-background-color: var(--sld-color-background);
+  --window-color: var(--sld-color-foreground);
+  --window-border: 1px solid rgba(255, 255, 255, 0.1);
+  --window-min-width: 250px;
+  --window-z-index: 70000;
+  --window-box-shadow: var(--sld-elevation-1);
+  --window-active-border: 1px solid var(--sld-color-primary);
+  --window-active-box-shadow: var(--sld-elevation-3);
+  --window-header-bar-background-color: var(--sld-color-paper);
+  --window-header-bar-padding: var(--sld-pad-tiny) 0;
+  --window-header-bar-icon-padding: unset var(--sld-pad-med);
+  --window-footer-button-zone-padding: var(--sld-pad-tiny);
+  --window-footer-button-zone-gap: var(--sld-gap-small);
+}
+
+dialog.window {
+  display: block;
+  border-radius: var(--window-border-radius);
+  background-color: var(--window-background-color);
+  color: var(--window-color);
+  border: var(--window-border);
+  min-width: var(--window-min-width);
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: var(--window-z-index);
+  max-height: 100%;
+  padding: 0;
+  box-shadow: var(--window-box-shadow);
+}
+
+dialog.window.active {
+  border: var(--window-active-border);
+  box-shadow: var(--window-active-box-shadow);
+}
+
+dialog.window header.bar {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  background-color: var(--window-header-bar-background-color);
+  color: var(--window-color);
+  padding: var(--window-header-bar-padding);
+}
+
+dialog.window header.bar-icon {
+  padding: var(--window-header-bar-icon-padding);
+}
+
+dialog.window header.bar .handle {
+  flex: 1;
+  cursor: pointer;
+}
+
+dialog.window footer.buttonZone {
+  padding: var(--window-footer-button-zone-padding);
+  display: flex;
+  justify-content: end;
+  gap: var(--window-footer-button-zone-gap);
+}
+
+dialog.window .ctrlZone {
+  display: flex;
+}</style>

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

@@ -0,0 +1,66 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        'anchor-for'?: string;
+        element?: HTMLElement;
+        class?: string;
+        style?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+        children?: import("svelte").Snippet<[any]>;
+        component?: any;
+        componentProps?: any;
+        contentHTML?: any;
+        parentNode?: HTMLElement;
+        icon?: string;
+        iconClose?: string;
+        iconValidate?: string;
+        flow?: import("../../types/index.js").ElementProps["flow"];
+        startPosition?: "center" | "cascade" | "overlap";
+        closeOnValidate?: boolean;
+        removeFromDomOnClose?: boolean;
+        self?: SvelteComponent;
+        componentInstance?: any;
+        outer?: boolean;
+        frameId?: string;
+        title?: string;
+        open?: boolean;
+        minimized?: boolean;
+        maximized?: boolean;
+        active?: boolean;
+        secondaryTitle?: string;
+        description?: string;
+        showHandle?: boolean;
+        data?: import("../../types/index.js").Data | undefined;
+        onClose?: (args?: any) => void;
+        onCancel?: (args?: any) => void;
+        onValidate?: (args?: any) => void;
+        hideAcceptButton?: boolean;
+        hideCloseButton?: boolean;
+        hideCancelButton?: boolean;
+        windowIcon?: import("svelte").Snippet;
+        windowButtonZone?: import("svelte").Snippet;
+    } & {
+        actions?: {
+            close: () => void;
+            setActive: () => void;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type WindowProps_ = typeof __propDef.props;
+export { WindowProps_ as WindowProps };
+export type WindowEvents = typeof __propDef.events;
+export type WindowSlots = typeof __propDef.slots;
+export default class Window extends SvelteComponent<WindowProps_, WindowEvents, WindowSlots> {
+    get actions(): {
+        close: () => void;
+        setActive: () => void;
+    };
+}

package/dist/ui/window/actions.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { ElementProps } from '../../types/index.js';
+import { type ComponentConstructorOptions } from 'svelte';
+type OpenWindow = {
+    /** Id of the component's instance */ frameId?: string | undefined;
+    /** the title appears on the handle bar */ title?: string | undefined;
+    /** boolean to show the window */ open?: boolean | undefined;
+    /** state of the window */ minimized?: boolean | undefined;
+    maximized?: boolean | undefined;
+    /** is on top of others*/ active?: boolean | undefined;
+    /** the secondaryTitle appears below the title */ secondaryTitle?: string | undefined;
+    /** the description appears somewhere */ description?: string | undefined;
+    /** shows or hide the handle, if dismissed, then the whole window is draggable */ showHandle?: boolean | undefined;
+    /** actions triggered on click*/ onClose?: ((args?: any) => void) | undefined;
+    onCancel?: ((args?: any) => void) | undefined;
+    onValidate?: ((args?: any) => void) | undefined;
+    /** buttons visible in the bottom bar */ hideAcceptButton?: boolean | undefined;
+    hideCloseButton?: boolean | undefined;
+    hideCancelButton?: boolean | undefined;
+    /** style of the component */ style?: string | undefined;
+    /** can be opened with a component */ component?: any;
+    /** used when props.component is used */ componentProps?: any;
+    /** content can be set from a html string */ contentHTML?: any;
+    /** parent of the window */ parentNode?: HTMLElement | undefined;
+    /** icon used on the left side*/ icon?: string | undefined;
+    iconClose?: string | undefined;
+    iconValidate?: string | undefined;
+    flow?: ElementProps['flow'] | undefined;
+    /** start position */ startPosition?: 'center' | 'cascade' | 'overlap' | undefined;
+    /** close the window on accept */ closeOnValidate?: boolean | undefined;
+    /** destroy the component on close */ removeFromDomOnClose?: boolean | undefined;
+    actions?: {
+        close: () => void;
+        setActive: () => void;
+    } | undefined;
+};
+export declare const openWindow: <T = any>(frameId: string, args?: OpenWindow, opts?: Partial<ComponentConstructorOptions>) => Record<string, any>;
+export {};

package/dist/ui/window/actions.svelte.js

@@ -0,0 +1,31 @@
+import Window from './Window.svelte';
+import { wStore } from './store.js';
+import { get } from 'svelte/store';
+import { mount } from 'svelte';
+export const openWindow = (frameId, args = {}, opts = {}) => {
+    const w = get(wStore).instances[frameId];
+    const target = typeof args?.parentNode === 'string'
+        ? document.querySelector(args.parentNode)
+        : args?.parentNode ?? document.body;
+    if (!w) {
+        let a = mount(Window, {
+            target: target ?? document.body,
+            ...opts,
+            props: {
+                title: frameId,
+                ...args,
+                frameId: frameId,
+                removeFromDomOnClose: true
+            }
+        });
+        //a.self = a;
+        /* a.$set({
+            self: a
+        }); */
+        return a;
+    }
+    else {
+        w.actions.setActive();
+        return w;
+    }
+};

package/dist/ui/window/store.d.ts

@@ -0,0 +1,13 @@
+import { get } from 'svelte/store';
+import type Window from './Window.svelte';
+export interface Wstore {
+    instances: Record<string, Window>;
+    activatedFrame?: string;
+}
+export declare const wStore: {
+    subscribe: (this: void, run: (value: Wstore) => void, invalidate?: () => void) => () => void;
+    set: (this: void, value: Wstore) => void;
+    get: typeof get;
+    create: (payload: any) => void;
+    open: (payload: any) => void;
+};

package/dist/ui/window/store.js

@@ -0,0 +1,14 @@
+import { writable, get } from 'svelte/store';
+function ccWindowStore() {
+    const { subscribe, set, update } = writable({
+        instances: {}
+    });
+    return {
+        subscribe,
+        set,
+        get,
+        create: (payload) => update({ ...payload }),
+        open: (payload) => update({ ...payload })
+    };
+}
+export const wStore = ccWindowStore();

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

@@ -0,0 +1,61 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps, Data, ElementProps } from '../../types/index.js';
+import type { SvelteComponent, Snippet } from 'svelte';
+export type WindowProps<T = Data> = CommonProps & {
+    /** can be opened with a component */
+    component?: any;
+    /** used when props.component is used */
+    componentProps?: any;
+    /** content can be set from a html string */
+    contentHTML?: any;
+    /** reference to the component's DOM container */
+    element?: HTMLElement;
+    /** parent of the window */
+    parentNode?: HTMLElement;
+    /** icon used on the left side*/
+    icon?: string;
+    iconClose?: string;
+    iconValidate?: string;
+    flow?: ElementProps['flow'];
+    /** start position */
+    startPosition?: 'center' | 'cascade' | 'overlap';
+    /** close the window on accept */
+    closeOnValidate?: boolean;
+    /** destroy the component on close */
+    removeFromDomOnClose?: boolean;
+    /** used to destroy component when opened from function.openWindow */
+    self?: SvelteComponent;
+    /** private */
+    componentInstance?: any;
+    /** whether the window is outer */
+    outer?: boolean;
+    /** Id of the component's instance */
+    frameId?: string;
+    /** the title appears on the handle bar */
+    title?: string;
+    /** boolean to show the window */
+    open?: boolean;
+    /** state of the window */
+    minimized?: boolean;
+    maximized?: boolean;
+    /** is on top of others*/
+    active?: boolean;
+    /** the secondaryTitle appears below the title */
+    secondaryTitle?: string;
+    /** the description appears somewhere */
+    description?: string;
+    /** shows or hide the handle, if dismissed, then the whole window is draggable */
+    showHandle?: boolean;
+    data?: T;
+    /** actions triggered on click*/
+    onClose?: (args?: any) => void;
+    onCancel?: (args?: any) => void;
+    onValidate?: (args?: any) => void;
+    /** buttons visible in the bottom bar */
+    hideAcceptButton?: boolean;
+    hideCloseButton?: boolean;
+    hideCancelButton?: boolean;
+    windowIcon?: Snippet;
+    windowButtonZone?: Snippet;
+};
+export declare const parameters: DemoerStoryProps<WindowProps<Data>>, componentArgs: WindowProps<Data>;

package/dist/ui/window/types.js

@@ -0,0 +1,74 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+const windowDemoValues = {
+    title: {
+        type: 'string',
+        values: ['Title'],
+        default: 'Title'
+    },
+    secondaryTitle: {
+        type: 'string',
+        values: ['Secondary Title'],
+        default: 'Secondary Title'
+    },
+    description: {
+        type: 'string',
+        values: ['Description'],
+        default: 'Description'
+    },
+    icon: {
+        type: 'icon',
+        default: 'add'
+    },
+    iconClose: {
+        type: 'icon',
+        default: 'close'
+    },
+    iconValidate: {
+        type: 'icon',
+        default: 'check'
+    },
+    open: {
+        type: 'boolean',
+        default: true
+    },
+    minimized: {
+        type: 'boolean',
+        default: false
+    },
+    maximized: {
+        type: 'boolean',
+        default: false
+    },
+    active: {
+        type: 'boolean',
+        default: false
+    },
+    showHandle: {
+        type: 'boolean',
+        default: true
+    },
+    hideAcceptButton: {
+        type: 'boolean',
+        default: false
+    },
+    hideCloseButton: {
+        type: 'boolean',
+        default: false
+    },
+    hideCancelButton: {
+        type: 'boolean',
+        default: false
+    },
+    data: {
+        type: 'data',
+        values: ['<p>Content</p>'],
+        default: [
+            { id: 1, name: 'name' },
+            { id: 2, name: 'name' },
+            { id: 3, name: 'name' },
+            { id: 4, name: 'name' }
+        ],
+        private: true
+    }
+};
+export const { parameters, componentArgs } = demoerArgs(windowDemoValues);

package/dist/ui/window/window.scss

@@ -0,0 +1,66 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --window-border-radius: var(--sld-radius-small);
+    --window-background-color: var(--sld-color-background);
+    --window-color: var(--sld-color-foreground);
+    --window-border: 1px solid rgba(255, 255, 255, 0.1);
+    --window-min-width: 250px;
+    --window-z-index: 70000;
+    --window-box-shadow: var(--sld-elevation-1);
+    --window-active-border: 1px solid var(--sld-color-primary);
+    --window-active-box-shadow: var(--sld-elevation-3);
+    --window-header-bar-background-color: var(--sld-color-paper);
+    --window-header-bar-padding: var(--sld-pad-tiny) 0;
+    --window-header-bar-icon-padding: unset var(--sld-pad-med);
+    --window-footer-button-zone-padding: var(--sld-pad-tiny);
+    --window-footer-button-zone-gap: var(--sld-gap-small);
+}
+
+dialog.window {
+    display: block;
+    border-radius: var(--window-border-radius);
+    background-color: var(--window-background-color);
+    color: var(--window-color);
+    border: var(--window-border);
+    min-width: var(--window-min-width);
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    z-index: var(--window-z-index);
+    max-height: 100%;
+    padding: 0;
+    box-shadow: var(--window-box-shadow);
+
+    &.active {
+        border: var(--window-active-border);
+        box-shadow: var(--window-active-box-shadow);
+    }
+
+    header.bar {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        background-color: var(--window-header-bar-background-color);
+        color: var(--window-color);
+        padding: var(--window-header-bar-padding);
+
+        &-icon {
+            padding: var(--window-header-bar-icon-padding);
+        }
+        .handle {
+            flex: 1;
+            cursor: pointer;
+        }
+    }
+
+    footer.buttonZone {
+        padding: var(--window-footer-button-zone-padding);
+        display: flex;
+        justify-content: end;
+        gap: var(--window-footer-button-zone-gap);
+    }
+    .ctrlZone {
+        display: flex;
+    }
+}