@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/ui/window/Window.svelte

@@ -1,179 +1,179 @@
-<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 type { WindowProps } from './types.js';
-	import type { ExpandProps } from '../../types/index.js';
-	import IconButton from '../../controls/button/IconButton.svelte';
-
-	let {
-		class: className = '',
-		style = '',
-		element = $bindable(),
-		component = undefined,
-		componentProps = undefined,
-		contentHTML = undefined,
-		parentNode = undefined,
-		icon = 'bx:window-alt',
-		iconClose = 'codicon:close',
-		iconValidate = 'el:ok-circle',
-		flow = 'absolute',
-		startPosition = undefined,
-		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
-	}: ExpandProps<WindowProps> = $props();
-
-	// used to link to form present in svelte:component
-	let formRef: any;
-
-	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: any) {
-		if (onCancel) onCancel(args);
-	}
-
-	async function handleValidate(args: any) {
-		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} -->
-
+<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 type { WindowProps } from './types.js';
+	import type { ExpandProps } from '../../types/index.js';
+	import IconButton from '../../controls/button/IconButton.svelte';
+
+	let {
+		class: className = '',
+		style = '',
+		element = $bindable(),
+		component = undefined,
+		componentProps = undefined,
+		contentHTML = undefined,
+		parentNode = undefined,
+		icon = 'bx:window-alt',
+		iconClose = 'codicon:close',
+		iconValidate = 'el:ok-circle',
+		flow = 'absolute',
+		startPosition = undefined,
+		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
+	}: ExpandProps<WindowProps> = $props();
+
+	// used to link to form present in svelte:component
+	let formRef: any;
+
+	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: any) {
+		if (onCancel) onCancel(args);
+	}
+
+	async function handleValidate(args: any) {
+		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);
@@ -233,4 +233,4 @@ dialog.window footer.buttonZone {
 }
 dialog.window .ctrlZone {
   display: flex;
-}</style>
+}</style>

package/dist/ui/window/window.scss

@@ -1,66 +1,66 @@
-@use "../../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;
-    }
-}
+@use "../../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;
+    }
+}

package/dist/utils/content/Content.svelte

@@ -1,80 +1,80 @@
-<!--
- @component Content
-	@ Adds css properties for width, height, offsetHeight, and offsetWidth to the style of the element.
-	@ var(--${cssPrefix}-height)
-	@ var(--${cssPrefix}-width)
-	@ var(--${cssPrefix}-offset-height)
-	@ var(--${cssPrefix}-offset-width)
-	@ EThe content element will fire a custom 'dom:resize' event when the bindable properties change. 
--->
-<script lang="ts">
-	import type { BindableEvent, ContentProps } from './types.js';
-
-	let {
-		element = $bindable(),
-		dimensions = $bindable({
-			clientHeight: element?.clientHeight,
-			clientWidth: element?.clientWidth,
-			offsetHeight: element?.offsetHeight,
-			offsetWidth: element?.offsetWidth
-		}),
-		cssVar,
-		cssPrefix = 'bind',
-		tag = 'div',
-		style = $bindable(''),
-		solid = false,
-		implementation = 'inline',
-		onresize = (event: BindableEvent) => {},
-		children,
-		...rest
-	}: ContentProps = $props();
-
-	cssVar = `--${cssPrefix}-height: ${dimensions.clientHeight}px; 
-            --${cssPrefix}-width: ${dimensions.clientWidth}px; 
-            --${cssPrefix}-offset-height: ${dimensions.offsetHeight}px; 
-            --${cssPrefix}-offset-width: ${dimensions.offsetWidth}px;`;
-
-	$effect(() => {
-		if (element && dimensions)
-			element.dispatchEvent(
-				new CustomEvent('dom:resize', {
-					detail: { dimensions, element }
-				})
-			);
-	});
-
-	function transformToObj(dimensions: ContentProps['dimensions']) {
-		let result = {} as any;
-		for (let key in dimensions) {
-			result[`--${cssPrefix}-${key}`] = `${dimensions[key as keyof ContentProps['dimensions']]}px`;
-		}
-		return result;
-	}
-
-	function applyStyle() {
-		switch (implementation) {
-			case 'inline':
-				return `${cssVar};display:contents;${style ?? ''}`;
-			case 'style':
-				return `${cssVar};display:block;${style ?? ''}`;
-		}
-	}
-</script>
-
-<svelte:element
-	this={tag}
-	bind:this={element}
-	bind:clientHeight={dimensions.clientHeight}
-	bind:clientWidth={dimensions.clientWidth}
-	bind:offsetHeight={dimensions.offsetHeight}
-	bind:offsetWidth={dimensions.offsetWidth}
-	style={`${cssVar};${style}`}
-	class={'content ' + rest?.class}
-	{...rest}
->
-	{@render children?.()}
-</svelte:element>
-
+<!--
+ @component Content
+	@ Adds css properties for width, height, offsetHeight, and offsetWidth to the style of the element.
+	@ var(--${cssPrefix}-height)
+	@ var(--${cssPrefix}-width)
+	@ var(--${cssPrefix}-offset-height)
+	@ var(--${cssPrefix}-offset-width)
+	@ EThe content element will fire a custom 'dom:resize' event when the bindable properties change. 
+-->
+<script lang="ts">
+	import type { BindableEvent, ContentProps } from './types.js';
+
+	let {
+		element = $bindable(),
+		dimensions = $bindable({
+			clientHeight: element?.clientHeight,
+			clientWidth: element?.clientWidth,
+			offsetHeight: element?.offsetHeight,
+			offsetWidth: element?.offsetWidth
+		}),
+		cssVar,
+		cssPrefix = 'bind',
+		tag = 'div',
+		style = $bindable(''),
+		solid = false,
+		implementation = 'inline',
+		onresize = (event: BindableEvent) => {},
+		children,
+		...rest
+	}: ContentProps = $props();
+
+	cssVar = `--${cssPrefix}-height: ${dimensions.clientHeight}px; 
+            --${cssPrefix}-width: ${dimensions.clientWidth}px; 
+            --${cssPrefix}-offset-height: ${dimensions.offsetHeight}px; 
+            --${cssPrefix}-offset-width: ${dimensions.offsetWidth}px;`;
+
+	$effect(() => {
+		if (element && dimensions)
+			element.dispatchEvent(
+				new CustomEvent('dom:resize', {
+					detail: { dimensions, element }
+				})
+			);
+	});
+
+	function transformToObj(dimensions: ContentProps['dimensions']) {
+		let result = {} as any;
+		for (let key in dimensions) {
+			result[`--${cssPrefix}-${key}`] = `${dimensions[key as keyof ContentProps['dimensions']]}px`;
+		}
+		return result;
+	}
+
+	function applyStyle() {
+		switch (implementation) {
+			case 'inline':
+				return `${cssVar};display:contents;${style ?? ''}`;
+			case 'style':
+				return `${cssVar};display:block;${style ?? ''}`;
+		}
+	}
+</script>
+
+<svelte:element
+	this={tag}
+	bind:this={element}
+	bind:clientHeight={dimensions.clientHeight}
+	bind:clientWidth={dimensions.clientWidth}
+	bind:offsetHeight={dimensions.offsetHeight}
+	bind:offsetWidth={dimensions.offsetWidth}
+	style={`${cssVar};${style}`}
+	class={'content ' + rest?.class}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
 <style>.content {
   width: var(--sld-width-small);
 }
@@ -182,4 +182,4 @@
 }
 .content.elevation-5, .content[elevation-5] {
   box-shadow: var(--sld-elevation-5);
-}</style>
+}</style>