@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/ui/popper/Popper.demo.svelte

@@ -1,92 +1,92 @@
-<script lang="ts">
-	import Popper from './Popper.svelte';
-	import Button from '../../controls/button/Button.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 { uiPresets } from '../../utils/engine/presets.js';
-	/* demo */
-
-	let parametersSlot: any = {
-		autoClose: {
-			type: 'boolean',
-			values: [true, false]
-		},
-		stickToHookWidth: {
-			type: 'boolean',
-			values: [true, false]
-		},
-		position: {
-			type: 'string',
-			values: uiPresets.stickyPosition
-		}
-	};
-
-	let componentArgsSlot = defaultsArgs(parametersSlot);
-
-	let codeSlot = `
-<Popper bind:isOpen position="BC" autoClose class="w-large">
-	{#snippet popperHolder()}
-		<Button
-			onclick={() => (isOpen = !isOpen)} 
-			class="border text-center pointer {isOpen ? 'theme-bg-paper shad-3' : ''}"
-			>
-			popper
-		</Button>
-	{/snippet}
-	<div class="pad-4">Popper content</div>
-</Popper>`;
-
-	let codeProps = `
-<Loader
-    status={"loading"}
-    messages={{
-        loading: 'Loading dataset',
-        error  : 'An error occurred',
-        empty  : 'Empty results',
-        success: 'Success !'
-      }}
-    emptyIcon="mdi:database-search-outline"
-    errorIcon="mdi:alert-circle-outline"
-    loadingIcon="mdi:loading"
-    successIcon="clarity:success-standard-line" />`;
-
-	let isOpen = false;
-</script>
-
-<ComponentDemo component="Popper" cite="This Popper is the base of all the flyout stuff: it pops">
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="Popper">
-			<Demoer componentArgs={componentArgsSlot} parameters={parametersSlot}>
-				{#snippet children({ activeParams })}
-					<div class="pos-rel">
-						<Popper
-							bind:isOpen
-							position="BC"
-							anchor="popper"
-							{...activeParams}
-							class="w-large marg-t-1"
-						>
-							{#snippet popperHolder()}
-								<Button
-									anchor-for="popper"
-									onclick={() => (isOpen = !isOpen)}
-									style="cursor:pointer"
-									class="border text-center pointer {isOpen ? 'theme-bg-paper shad-3' : ''}"
-								>
-									popper
-								</Button>
-							{/snippet}
-							<div class="pad-4">Popper content</div>
-							{#snippet popperRight()}
-								cdscdscd
-							{/snippet}
-						</Popper>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Popper from './Popper.svelte';
+	import Button from '../../controls/button/Button.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 { uiPresets } from '../../utils/engine/presets.js';
+	/* demo */
+
+	let parametersSlot: any = {
+		autoClose: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		stickToHookWidth: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		position: {
+			type: 'string',
+			values: uiPresets.stickyPosition
+		}
+	};
+
+	let componentArgsSlot = defaultsArgs(parametersSlot);
+
+	let codeSlot = `
+<Popper bind:isOpen position="BC" autoClose class="w-large">
+	{#snippet popperHolder()}
+		<Button
+			onclick={() => (isOpen = !isOpen)} 
+			class="border text-center pointer {isOpen ? 'theme-bg-paper shad-3' : ''}"
+			>
+			popper
+		</Button>
+	{/snippet}
+	<div class="pad-4">Popper content</div>
+</Popper>`;
+
+	let codeProps = `
+<Loader
+    status={"loading"}
+    messages={{
+        loading: 'Loading dataset',
+        error  : 'An error occurred',
+        empty  : 'Empty results',
+        success: 'Success !'
+      }}
+    emptyIcon="mdi:database-search-outline"
+    errorIcon="mdi:alert-circle-outline"
+    loadingIcon="mdi:loading"
+    successIcon="clarity:success-standard-line" />`;
+
+	let isOpen = false;
+</script>
+
+<ComponentDemo component="Popper" cite="This Popper is the base of all the flyout stuff: it pops">
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Popper">
+			<Demoer componentArgs={componentArgsSlot} parameters={parametersSlot}>
+				{#snippet children({ activeParams })}
+					<div class="pos-rel">
+						<Popper
+							bind:isOpen
+							position="BC"
+							anchor="popper"
+							{...activeParams}
+							class="w-large marg-t-1"
+						>
+							{#snippet popperHolder()}
+								<Button
+									anchor-for="popper"
+									onclick={() => (isOpen = !isOpen)}
+									style="cursor:pointer"
+									class="border text-center pointer {isOpen ? 'theme-bg-paper shad-3' : ''}"
+								>
+									popper
+								</Button>
+							{/snippet}
+							<div class="pad-4">Popper content</div>
+							{#snippet popperRight()}
+								cdscdscd
+							{/snippet}
+						</Popper>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/ui/popper/Popper.svelte

@@ -1,162 +1,162 @@
-<script lang="ts">
-	import { stickTo } from '../../utils/uses/stickTo/stickTo.js';
-	import { clickAway } from '../../utils/uses/clickAway/clickAway.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { PopperProps } from './types.js';
-	import Button from '../../controls/button/Button.svelte';
-
-	export const toggle = function () {};
-	export const hide = function () {
-		console.log('hide');
-	};
-	export const show = function () {
-		console.log('show');
-	};
-
-	/** actions for the popper */
-	export const actions = {
-		toggle: () => {
-			console.log('toggle');
-		},
-		show: () => {
-			console.log('show');
-		},
-		hide: () => {
-			console.log('hide');
-		}
-	};
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		code = crypto.randomUUID(),
-		parentNode,
-		stickToHookWidth = false,
-		component,
-		componentProps = {},
-		position = 'BC',
-		content,
-		autoClose = $bindable(),
-		isOpen = $bindable(),
-		buttonProps,
-		anchor,
-		children,
-		popperHolder,
-		popperLeft,
-		popperRight,
-		...rest
-	}: PopperProps = $props();
-
-	export const clickedAway = function () {
-		const event = new CustomEvent('clickAway', { bubbles: true });
-		parentNode?.dispatchEvent(event);
-		if (autoClose) isOpen = false;
-	};
-
-	export const useStickTo = (node: HTMLElement) => {
-		if (position && parentNode) {
-			stickTo(node, { parentNode, position, stickToHookWidth });
-		}
-	};
-
-	let holderSlotRef: HTMLElement = $state<HTMLElement>() as HTMLElement;
-	let zIndex = $state(0);
-	let mounted: boolean = $state(false);
-
-	$effect(() => {
-		parentNode;
-		anchor;
-		if (!anchor) {
-			// who is the parent for stickTo ??
-			if (parentNode) {
-			} else if (popperHolder) {
-				// if holderSlot, then make it the stickTo parentNode
-				parentNode = holderSlotRef.firstElementChild ?? document.body;
-			} else {
-				// if no props parentNode, use element.parentNode
-				parentNode = element?.parentElement ?? document.body;
-			}
-		}
-		if (anchor) {
-			parentNode =
-				typeof anchor == 'string'
-					? document.querySelector<HTMLElement>(`[anchor-for="${anchor}"]`)
-					: anchor;
-		}
-		mounted = true;
-	});
-
-	$effect(() => {
-		let siblings = Array.prototype.slice.call(element?.parentElement?.children ?? []) ?? [];
-		zIndex = siblings?.reduce((prev, val) => {
-			return val?.style?.zIndex >= prev ? val?.style?.zIndex + 1 : prev;
-		}, 0);
-	});
-
-	$effect(() => {
-		isOpen;
-		if (!isOpen) {
-			if (element.matches(':popover-open')) {
-				element.hidePopover();
-			}
-		}
-	});
-
-	let hidden = $derived(!(parentNode && ((isOpen && autoClose) || !autoClose)));
-</script>
-
-{#if popperHolder}
-	<div bind:this={holderSlotRef} style="position:relative;display:contents">
-		{@render popperHolder()}
-	</div>
-{/if}
-{#if buttonProps}
-	<!-- @ts-ignore -->
-	<Button bind:element={holderSlotRef} onclick={() => (isOpen = true)} {...buttonProps} />
-{/if}
-<!-- {#if parentNode && ((isOpen && autoClose) || !autoClose)} -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- @ts-ignore -->
-<dialog
-	open={isOpen}
-	bind:this={element}
-	class="popper {className}"
-	use:stickTo={{ parentNode, position, stickToHookWidth }}
-	use:clickAway={{ action: clickedAway }}
-	{...rest}
-	style={rest.style}
-	style:contentVisibility={!isOpen ? 'hidden' : 'auto'}
-	style:display={!isOpen ? 'none' : ''}
->
-	<div style="display:flex;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden">
-		{#if popperLeft}
-			<div style="height:100%;max-height:100%;overflow:hidden;" class="popper-left">
-				{@render popperLeft()}
-			</div>
-		{/if}
-		{#if children || component || content}
-			<div style="flex:1">
-				<Slotted child={children}>
-					{#if mounted}
-						{#if component}
-							<svelte:component this={component} {...componentProps} />
-						{/if}
-						{#if content}
-							{content}
-						{/if}
-					{/if}
-				</Slotted>
-			</div>
-		{/if}
-		{#if popperRight}
-			<div class="popper-right">{@render popperRight()}</div>
-		{/if}
-	</div>
-</dialog>
-
-<!-- {/if} -->
-
+<script lang="ts">
+	import { stickTo } from '../../utils/uses/stickTo/stickTo.js';
+	import { clickAway } from '../../utils/uses/clickAway/clickAway.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { PopperProps } from './types.js';
+	import Button from '../../controls/button/Button.svelte';
+
+	export const toggle = function () {};
+	export const hide = function () {
+		console.log('hide');
+	};
+	export const show = function () {
+		console.log('show');
+	};
+
+	/** actions for the popper */
+	export const actions = {
+		toggle: () => {
+			console.log('toggle');
+		},
+		show: () => {
+			console.log('show');
+		},
+		hide: () => {
+			console.log('hide');
+		}
+	};
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		code = crypto.randomUUID(),
+		parentNode,
+		stickToHookWidth = false,
+		component,
+		componentProps = {},
+		position = 'BC',
+		content,
+		autoClose = $bindable(),
+		isOpen = $bindable(),
+		buttonProps,
+		anchor,
+		children,
+		popperHolder,
+		popperLeft,
+		popperRight,
+		...rest
+	}: PopperProps = $props();
+
+	export const clickedAway = function () {
+		const event = new CustomEvent('clickAway', { bubbles: true });
+		parentNode?.dispatchEvent(event);
+		if (autoClose) isOpen = false;
+	};
+
+	export const useStickTo = (node: HTMLElement) => {
+		if (position && parentNode) {
+			stickTo(node, { parentNode, position, stickToHookWidth });
+		}
+	};
+
+	let holderSlotRef: HTMLElement = $state<HTMLElement>() as HTMLElement;
+	let zIndex = $state(0);
+	let mounted: boolean = $state(false);
+
+	$effect(() => {
+		parentNode;
+		anchor;
+		if (!anchor) {
+			// who is the parent for stickTo ??
+			if (parentNode) {
+			} else if (popperHolder) {
+				// if holderSlot, then make it the stickTo parentNode
+				parentNode = holderSlotRef.firstElementChild ?? document.body;
+			} else {
+				// if no props parentNode, use element.parentNode
+				parentNode = element?.parentElement ?? document.body;
+			}
+		}
+		if (anchor) {
+			parentNode =
+				typeof anchor == 'string'
+					? document.querySelector<HTMLElement>(`[anchor-for="${anchor}"]`)
+					: anchor;
+		}
+		mounted = true;
+	});
+
+	$effect(() => {
+		let siblings = Array.prototype.slice.call(element?.parentElement?.children ?? []) ?? [];
+		zIndex = siblings?.reduce((prev, val) => {
+			return val?.style?.zIndex >= prev ? val?.style?.zIndex + 1 : prev;
+		}, 0);
+	});
+
+	$effect(() => {
+		isOpen;
+		if (!isOpen) {
+			if (element.matches(':popover-open')) {
+				element.hidePopover();
+			}
+		}
+	});
+
+	let hidden = $derived(!(parentNode && ((isOpen && autoClose) || !autoClose)));
+</script>
+
+{#if popperHolder}
+	<div bind:this={holderSlotRef} style="position:relative;display:contents">
+		{@render popperHolder()}
+	</div>
+{/if}
+{#if buttonProps}
+	<!-- @ts-ignore -->
+	<Button bind:element={holderSlotRef} onclick={() => (isOpen = true)} {...buttonProps} />
+{/if}
+<!-- {#if parentNode && ((isOpen && autoClose) || !autoClose)} -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- @ts-ignore -->
+<dialog
+	open={isOpen}
+	bind:this={element}
+	class="popper {className}"
+	use:stickTo={{ parentNode, position, stickToHookWidth }}
+	use:clickAway={{ action: clickedAway }}
+	{...rest}
+	style={rest.style}
+	style:contentVisibility={!isOpen ? 'hidden' : 'auto'}
+	style:display={!isOpen ? 'none' : ''}
+>
+	<div style="display:flex;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden">
+		{#if popperLeft}
+			<div style="height:100%;max-height:100%;overflow:hidden;" class="popper-left">
+				{@render popperLeft()}
+			</div>
+		{/if}
+		{#if children || component || content}
+			<div style="flex:1">
+				<Slotted child={children}>
+					{#if mounted}
+						{#if component}
+							<svelte:component this={component} {...componentProps} />
+						{/if}
+						{#if content}
+							{content}
+						{/if}
+					{/if}
+				</Slotted>
+			</div>
+		{/if}
+		{#if popperRight}
+			<div class="popper-right">{@render popperRight()}</div>
+		{/if}
+	</div>
+</dialog>
+
+<!-- {/if} -->
+
 <style global>:root {
   --popper-border-radius: var(--sld-radius-tiny);
   --popper-box-shadow: var(--sld-elevation-4);
@@ -241,4 +241,4 @@
 :global(dialog.popper) {
   padding-block: 0;
   padding-inline: 0;
-}</style>
+}</style>