@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/utils/contextRooter/ContextRooter.demo.svelte

@@ -1,33 +1,33 @@
-<script lang="ts">
-	/* demo */
-	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import DemoerCode from '../../base/demoer/DemoerCode.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 '../engine/presets.js';
-	/* demo */
-
-	let codeSlot = `
-<script>
-    /** read and set svelte context from component root */
-    import ContextRooter  from "./ContextRooter.svelte";
-    let myContextRef;
-    setContext("myContext", {some:"data"});
-
-    $: myContext = myContextRef
-
-    $myContext.some = "other data"
-<\/script>
-
-<ContextRooter
-    contextKey="Read and set svelte context from component root"
-    bind:this={myContextRef} />`;
-</script>
-
-<ComponentDemo component="ContextRoot">
-	<div class="flex-v gap-large">
-		<DemoerCode title="myContext" code={codeSlot} />
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	/* demo */
+	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import DemoerCode from '../../base/demoer/DemoerCode.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 '../engine/presets.js';
+	/* demo */
+
+	let codeSlot = `
+<script>
+    /** read and set svelte context from component root */
+    import ContextRooter  from "./ContextRooter.svelte";
+    let myContextRef;
+    setContext("myContext", {some:"data"});
+
+    $: myContext = myContextRef
+
+    $myContext.some = "other data"
+<\/script>
+
+<ContextRooter
+    contextKey="Read and set svelte context from component root"
+    bind:this={myContextRef} />`;
+</script>
+
+<ComponentDemo component="ContextRoot">
+	<div class="flex-v gap-large">
+		<DemoerCode title="myContext" code={codeSlot} />
+	</div>
+</ComponentDemo>

package/dist/utils/contextRooter/ContextRooter.svelte

@@ -1,6 +1,6 @@
-<script lang="ts" generics="T">
-	import { getContext } from 'svelte';
-	let { contextKey = 'red', contextRoot = $bindable() } = $props();
-
-	contextRoot = getContext<T>(contextKey);
-</script>
+<script lang="ts" generics="T">
+	import { getContext } from 'svelte';
+	let { contextKey = 'red', contextRoot = $bindable() } = $props();
+
+	contextRoot = getContext<T>(contextKey);
+</script>

package/dist/utils/css/Css.demo.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-	import Css from './Css.svelte';
-</script>
-
-<Css />
+<script lang="ts">
+	import Css from './Css.svelte';
+</script>
+
+<Css />

package/dist/utils/css/Css.svelte

@@ -1,64 +1,64 @@
-<script lang="ts">
-	import Looper from '../looper/Looper.svelte';
-</script>
-
-{#snippet cssBlock(color)}
-	<div>
-		<div class="flex-h gap-small">
-			<div>- {color}</div>
-		</div>
-		<div class="flex-h gap-small" style="background-color:purple">
-			<div style="background-color:var(--sld-color-{color})"></div>
-			{#each ['alpha', 'darken', 'lighten'] as typ}
-				<div style="">
-					<div>{typ}</div>
-					{#each ['low', 'mid', 'high'] as _nope}
-						<div style="background-color:var(--sld-color-{color}-{typ}-{_nope})">{_nope}</div>
-					{/each}
-				</div>
-			{/each}
-		</div>
-	</div>
-{/snippet}
-{#snippet cssElevation(color)}
-	<div style="box-shadow: var(--sld-elevation-{color})" class="flex-h gap-med">
-		<div>elevation-{color}</div>
-		<div></div>
-	</div>
-{/snippet}
-foreground, "background"
-<div class="flex-h gap-small">
-	<Looper data={['foreground', 'background', 'paper']}>
-		{#snippet children(item)}
-			{@render cssBlock(item)}
-		{/snippet}
-	</Looper>
-</div>
-primary, secondary, tertiary;
-<div class="flex-h gap-small">
-	<Looper data={['primary', 'secondary', 'tertiary']}>
-		{#snippet children(item)}
-			{@render cssBlock(item)}
-		{/snippet}
-	</Looper>
-</div>
-discrete, success, info, warning, alert, error
-<div class="flex-h gap-small">
-	<Looper data={['discrete', 'success', 'info', 'warning', 'alert', 'error']}>
-		{#snippet children(item)}
-			{@render cssBlock(item)}
-		{/snippet}
-	</Looper>
-</div>
-elevation 1/5
-<Looper naked={false} class="flex-v gap-small" data={[1, 2, 3, 4, 5]}>
-	{#snippet children(item)}
-		{@render cssElevation(item)}
-	{/snippet}
-</Looper>
-
-<style>
-	div {
-		padding: 1rem;
-	}
-</style>
+<script lang="ts">
+	import Looper from '../looper/Looper.svelte';
+</script>
+
+{#snippet cssBlock(color)}
+	<div>
+		<div class="flex-h gap-small">
+			<div>- {color}</div>
+		</div>
+		<div class="flex-h gap-small" style="background-color:purple">
+			<div style="background-color:var(--sld-color-{color})"></div>
+			{#each ['alpha', 'darken', 'lighten'] as typ}
+				<div style="">
+					<div>{typ}</div>
+					{#each ['low', 'mid', 'high'] as _nope}
+						<div style="background-color:var(--sld-color-{color}-{typ}-{_nope})">{_nope}</div>
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+{/snippet}
+{#snippet cssElevation(color)}
+	<div style="box-shadow: var(--sld-elevation-{color})" class="flex-h gap-med">
+		<div>elevation-{color}</div>
+		<div></div>
+	</div>
+{/snippet}
+foreground, "background"
+<div class="flex-h gap-small">
+	<Looper data={['foreground', 'background', 'paper']}>
+		{#snippet children(item)}
+			{@render cssBlock(item)}
+		{/snippet}
+	</Looper>
+</div>
+primary, secondary, tertiary;
+<div class="flex-h gap-small">
+	<Looper data={['primary', 'secondary', 'tertiary']}>
+		{#snippet children(item)}
+			{@render cssBlock(item)}
+		{/snippet}
+	</Looper>
+</div>
+discrete, success, info, warning, alert, error
+<div class="flex-h gap-small">
+	<Looper data={['discrete', 'success', 'info', 'warning', 'alert', 'error']}>
+		{#snippet children(item)}
+			{@render cssBlock(item)}
+		{/snippet}
+	</Looper>
+</div>
+elevation 1/5
+<Looper naked={false} class="flex-v gap-small" data={[1, 2, 3, 4, 5]}>
+	{#snippet children(item)}
+		{@render cssElevation(item)}
+	{/snippet}
+</Looper>
+
+<style>
+	div {
+		padding: 1rem;
+	}
+</style>

package/dist/utils/effects/transitions.js

@@ -5,7 +5,7 @@ function slideOut(node, { duration, delay }) {
         delay,
         css: (t) => {
             const eased = effects.quadOut(t);
-            return `transform: translate(-${50 - eased * 50}px,0);
+            return `transform: translate(-${50 - eased * 50}px,0);
         opacity: ${t}`;
         }
     };
@@ -16,7 +16,7 @@ function slideOutRt(node, { duration, delay }) {
         delay,
         css: (t) => {
             const eased = effects.quadOut(t);
-            return `transform: translate(${50 - eased * 50}px,0);
+            return `transform: translate(${50 - eased * 50}px,0);
         opacity: ${t}`;
         }
     };
@@ -27,7 +27,7 @@ function slideIn(node, { duration, delay }) {
         delay,
         css: (t) => {
             const eased = effects.quadOut(t);
-            return `transform: translate(${250 - eased * 250}px,0);
+            return `transform: translate(${250 - eased * 250}px,0);
         opacity: ${t}`;
         }
     };
@@ -38,7 +38,7 @@ function slideInRtl(node, { duration, delay }) {
         delay,
         css: (t) => {
             const eased = effects.quadOut(t);
-            return `transform: translate(-${250 - eased * 250}px,0);
+            return `transform: translate(-${250 - eased * 250}px,0);
         opacity: ${t}`;
         }
     };
@@ -50,7 +50,7 @@ function slideInNoName(node, { duration, delay, direction }) {
         delay,
         css: (t) => {
             const eased = effects.quadOut(t);
-            return `transform: translate(${getTranslate(eased)}px,0);
+            return `transform: translate(${getTranslate(eased)}px,0);
         opacity: ${t}`;
         }
     };
@@ -62,7 +62,7 @@ function slideOutNoName(node, { duration, delay, direction }) {
         delay,
         css: (t) => {
             const eased = effects.quadOut(t);
-            return `transform: translate(${getTranslate(eased)}px,0);
+            return `transform: translate(${getTranslate(eased)}px,0);
         opacity: ${t}`;
         }
     };

package/dist/utils/looper/Looper.demo.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import Looper from './Looper.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import { parameters, componentArgs } from './types.js';
-
-	let code = `
-<Looper groupBy={"lastname"}  {data}>
-	{#snippet children({ item, idx })}
-		<div>{item.name} {idx}</div>
-		<div>{item.id} {idx}</div>
-	{/snippet}
-</Looper>`;
-</script>
-
-<ComponentDemo
-	component="Looper"
-	cite="A loop is a loop from start to the final reach. Ernest Hamilton, 1954"
->
-	<DemoPage component="Alert" {code}>
-		<Demoer {parameters} {componentArgs}>
-			{#snippet children({ activeParams })}
-				<Looper {...activeParams} groupBy={'lastname'}>
-					{#snippet children({ item, idx })}
-						<div class="flex">
-							<div>{item.name}</div>
-							<div>{item.id}</div>
-							<div>{item.id}</div>
-						</div>
-					{/snippet}
-				</Looper>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import Looper from './Looper.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	let code = `
+<Looper groupBy={"lastname"}  {data}>
+	{#snippet children({ item, idx })}
+		<div>{item.name} {idx}</div>
+		<div>{item.id} {idx}</div>
+	{/snippet}
+</Looper>`;
+</script>
+
+<ComponentDemo
+	component="Looper"
+	cite="A loop is a loop from start to the final reach. Ernest Hamilton, 1954"
+>
+	<DemoPage component="Alert" {code}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Looper {...activeParams} groupBy={'lastname'}>
+					{#snippet children({ item, idx })}
+						<div class="flex">
+							<div>{item.name}</div>
+							<div>{item.id}</div>
+							<div>{item.id}</div>
+						</div>
+					{/snippet}
+				</Looper>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/utils/looper/Looper.svelte

@@ -1,47 +1,47 @@
-<script lang="ts" generics="T= Data">
-	import type { Data } from '../../types/index.js';
-	import Slotted from '../slotted/Slotted.svelte';
-	import type { LoopProps } from './types.js';
-	import { dataOp } from '@medyll/idae-engine';
-
-	let {
-		class: className,
-		data = [],
-		title,
-		groupBy,
-		sortBy,
-		tag,
-		loopTitle,
-		loopGroupTitle,
-		children,
-		...rest
-	}: LoopProps<T> = $props();
-
-	let sortedData = $derived.by(() => {
-		if (!sortBy) return data;
-		return dataOp.sortBy<T>({ arr: data, by: sortBy });
-	});
-	let groupedData = $derived.by(() => {
-		if (!groupBy) return undefined;
-		return dataOp.groupBy<T>({ dataList: sortedData, groupBy });
-	});
-</script>
-
-{#snippet loop(data)}
-	{#each data ?? [] as item, idx}
-		{@render children?.({ item, idx })}
-	{/each}
-{/snippet}
-<div class={className} style={className ? ' ' : ';display:contents;'} {...rest}>
-	{#if groupBy && groupedData}
-		{#each Object.entries(groupedData) as [key, data], idx}
-			<Slotted child={loopGroupTitle} slotArgs={{ key, data, idx }}>
-				{data.title ?? data.code ?? key}
-			</Slotted>
-			{@render loop(data.data)}
-		{/each}
-	{:else}
-		<Slotted child={loopTitle}>{title}</Slotted>
-		{@render loop(data)}
-	{/if}
-</div>
+<script lang="ts" generics="T= Data">
+	import type { Data } from '../../types/index.js';
+	import Slotted from '../slotted/Slotted.svelte';
+	import type { LoopProps } from './types.js';
+	import { dataOp } from '@medyll/idae-engine';
+
+	let {
+		class: className,
+		data = [],
+		title,
+		groupBy,
+		sortBy,
+		tag,
+		loopTitle,
+		loopGroupTitle,
+		children,
+		...rest
+	}: LoopProps<T> = $props();
+
+	let sortedData = $derived.by(() => {
+		if (!sortBy) return data;
+		return dataOp.sortBy<T>({ arr: data, by: sortBy });
+	});
+	let groupedData = $derived.by(() => {
+		if (!groupBy) return undefined;
+		return dataOp.groupBy<T>({ dataList: sortedData, groupBy });
+	});
+</script>
+
+{#snippet loop(data)}
+	{#each data ?? [] as item, idx}
+		{@render children?.({ item, idx })}
+	{/each}
+{/snippet}
+<div class={className} style={className ? ' ' : ';display:contents;'} {...rest}>
+	{#if groupBy && groupedData}
+		{#each Object.entries(groupedData) as [key, data], idx}
+			<Slotted child={loopGroupTitle} slotArgs={{ key, data, idx }}>
+				{data.title ?? data.code ?? key}
+			</Slotted>
+			{@render loop(data.data)}
+		{/each}
+	{:else}
+		<Slotted child={loopTitle}>{title}</Slotted>
+		{@render loop(data)}
+	{/if}
+</div>

package/dist/utils/slotted/Slotted.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	type Props = {
-		child?: Snippet<[any]>;
-		slotArgs?: any;
-		children?: Snippet<[any]>;
-	};
-
-	let { child, children, slotArgs = $bindable({}) }: Props = $props();
-</script>
-
-{#if child !== undefined}
-	{#key slotArgs}
-		{@render child(slotArgs)}
-	{/key}
-{:else if children}
-	{#key slotArgs}
-		{@render children(slotArgs)}
-	{/key}
-{/if}
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		child?: Snippet<[any]>;
+		slotArgs?: any;
+		children?: Snippet<[any]>;
+	};
+
+	let { child, children, slotArgs = $bindable({}) }: Props = $props();
+</script>
+
+{#if child !== undefined}
+	{#key slotArgs}
+		{@render child(slotArgs)}
+	{/key}
+{:else if children}
+	{#key slotArgs}
+		{@render children(slotArgs)}
+	{/key}
+{/if}

package/dist/utils/stylesheet/StyleSheet.demo.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	import { be } from '@medyll/idae-be';
-	import { cssDom } from '@medyll/idae-dom-events';
-	import StyleSheet from './StyleSheet.svelte';
-	import { configCssVars, toContainerQuery } from './utils.js';
-
-	const tag = 'hideMaxWidth';
-	cssDom('[hideMaxWidth]').each((element, changes) => {
-		console.log(be(element as HTMLElement).attr.get(tag));
-		let tagValue = be(element as HTMLElement).attr.get(tag);
-
-		if (tag && tagValue) {
-			let objTag = toContainerQuery(tag, tagValue);
-			console.log(objTag);
-			be(element).classAdd(objTag.class).setStyle(objTag.style);
-			console.log(element, changes);
-
-			be(element).up('[container]').setStyle(objTag.style);
-			console.log(be(element).up('[container]').node);
-		}
-	});
-</script>
-
-<StyleSheet showSelectors={true} />
-
-<div container="size" class="container-size" style="container:size;width:135px;relative">
-	<div hideMaxWidth="115px">hideMaxWidth</div>
-</div>
+<script lang="ts">
+	import { be } from '@medyll/idae-be';
+	import { cssDom } from '@medyll/idae-dom-events';
+	import StyleSheet from './StyleSheet.svelte';
+	import { configCssVars, toContainerQuery } from './utils.js';
+
+	const tag = 'hideMaxWidth';
+	cssDom('[hideMaxWidth]').each((element, changes) => {
+		console.log(be(element as HTMLElement).attr.get(tag));
+		let tagValue = be(element as HTMLElement).attr.get(tag);
+
+		if (tag && tagValue) {
+			let objTag = toContainerQuery(tag, tagValue);
+			console.log(objTag);
+			be(element).classAdd(objTag.class).setStyle(objTag.style);
+			console.log(element, changes);
+
+			be(element).up('[container]').setStyle(objTag.style);
+			console.log(be(element).up('[container]').node);
+		}
+	});
+</script>
+
+<StyleSheet showSelectors={true} />
+
+<div container="size" class="container-size" style="container:size;width:135px;relative">
+	<div hideMaxWidth="115px">hideMaxWidth</div>
+</div>

package/dist/utils/stylesheet/StyleSheet.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import { type SlotUiStyleSheet, type BreakPoints } from './types.js';
-	import { configCssVars, toContainerQuery } from './utils.js';
-
-	let { breakpoints, showSelectors }: SlotUiStyleSheet = $props();
-
-	function castToCssProps(breakpoints: BreakPoints | undefined) {
-		if (!breakpoints) return '';
-		let cssProps = '';
-		for (let key in breakpoints) {
-			cssProps += `--${key}: ${breakpoints[key]};`;
-		}
-		return cssProps;
-	}
-</script>
-
-<svelte:head>
-	{castToCssProps(breakpoints)}
+<script lang="ts">
+	import { type SlotUiStyleSheet, type BreakPoints } from './types.js';
+	import { configCssVars, toContainerQuery } from './utils.js';
+
+	let { breakpoints, showSelectors }: SlotUiStyleSheet = $props();
+
+	function castToCssProps(breakpoints: BreakPoints | undefined) {
+		if (!breakpoints) return '';
+		let cssProps = '';
+		for (let key in breakpoints) {
+			cssProps += `--${key}: ${breakpoints[key]};`;
+		}
+		return cssProps;
+	}
+</script>
+
+<svelte:head>
+	{castToCssProps(breakpoints)}
 	<style id="idae-slotui-stylesheet">:root {
   --container-item: container-item;
   --on-container: on-container;
@@ -396,15 +396,15 @@
     z-index: -10;
     visibility: hidden;
   }
-}</style>
-</svelte:head>
-
-{#if showSelectors}
-	{castToCssProps(breakpoints)}ss
-	<pre>
-        {JSON.stringify(configCssVars, undefined, ' ')}
-    </pre>
-	<pre>
-        {JSON.stringify(toContainerQuery('hideMaxWidth', '115px'), undefined, ' ')}
-    </pre>
-{/if}
+}</style>
+</svelte:head>
+
+{#if showSelectors}
+	{castToCssProps(breakpoints)}ss
+	<pre>
+        {JSON.stringify(configCssVars, undefined, ' ')}
+    </pre>
+	<pre>
+        {JSON.stringify(toContainerQuery('hideMaxWidth', '115px'), undefined, ' ')}
+    </pre>
+{/if}

package/dist/utils/stylesheet/containerConfig.scss

@@ -1,8 +1,8 @@
- 
- :root {
-  --container-item: container-item;
-  --on-container: on-container;
-  --than: than;
-  --show-selector: show;
-  --hide-selector: hide; 
+ 
+ :root {
+  --container-item: container-item;
+  --on-container: on-container;
+  --than: than;
+  --show-selector: show;
+  --hide-selector: hide; 
 }