@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/base/chipper/chipper.scss

@@ -1,65 +1,65 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --chipper-gap: var(--sld-gap-tiny);
-    --chipper-radius: var(--sld-radius-large);
-    --chipper-chip-color: var(--css-button-chip-color, var(--sld-color-primary));
-}
-
-.chipper {
-    position: relative;
-    gap: var(--chipper-gap);
-
-    .chipper-content {
-        padding: 0.5rem;
-    }
-
-    .chipper-chip {
-        display: block;
-        position: absolute;
-        z-index: 2;
-        border-radius: var(--chipper-radius);
-        transition: all 0.25s;
-        max-height: 100%;
-        background-color: var(--chipper-chip-color);
-
-        &[data-position="left"] {
-            top: 2px;
-            left: 2px;
-            height: 100%;
-            width: 3px;
-        }
-
-        &[data-position="right"] {
-            top: 2px;
-            right: 2px;
-            height: 130px;
-            width: 3px;
-        }
-
-        &[data-position="top"] {
-            height: 4px;
-            top: 2px;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 50%;
-        }
-
-        &[data-position="bottom"] {
-            height: 4px;
-            bottom: 2px;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 50%;
-        }
-
-        .defaultChip,
-        [slot="chipperChip"] {
-            display: block;
-            height: 100%;
-            width: 100%;
-            min-height: 3px;
-            background-color: var(--chipper-chip-color);
-        }
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --chipper-gap: var(--sld-gap-tiny);
+    --chipper-radius: var(--sld-radius-large);
+    --chipper-chip-color: var(--css-button-chip-color, var(--sld-color-primary));
+}
+
+.chipper {
+    position: relative;
+    gap: var(--chipper-gap);
+
+    .chipper-content {
+        padding: 0.5rem;
+    }
+
+    .chipper-chip {
+        display: block;
+        position: absolute;
+        z-index: 2;
+        border-radius: var(--chipper-radius);
+        transition: all 0.25s;
+        max-height: 100%;
+        background-color: var(--chipper-chip-color);
+
+        &[data-position="left"] {
+            top: 2px;
+            left: 2px;
+            height: 100%;
+            width: 3px;
+        }
+
+        &[data-position="right"] {
+            top: 2px;
+            right: 2px;
+            height: 130px;
+            width: 3px;
+        }
+
+        &[data-position="top"] {
+            height: 4px;
+            top: 2px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 50%;
+        }
+
+        &[data-position="bottom"] {
+            height: 4px;
+            bottom: 2px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 50%;
+        }
+
+        .defaultChip,
+        [slot="chipperChip"] {
+            display: block;
+            height: 100%;
+            width: 100%;
+            min-height: 3px;
+            background-color: var(--chipper-chip-color);
+        }
+    }
+}

package/dist/base/columner/Column.svelte

@@ -1,64 +1,64 @@
-<script lang="ts">
-	import { getContext, tick } from 'svelte';
-	import type { ColumnProps, ColumnerStoreType } from './types.js';
-	import { resizer } from '../../utils/uses/resizer/resizer.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import { onEvent } from '../../utils/uses/event.js';
-
-	let columner = getContext<ColumnerStoreType>('columner');
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		columnId = crypto.randomUUID() as string,
-		bottomSlot,
-		drawerTop,
-		children,
-		...rest
-	}: ColumnProps = $props();
-
-	if (!$columner[columnId]) {
-		$columner[columnId] = {
-			columnId: Object.keys($columner).length,
-			state: 'default',
-			defaultStyle: {}
-		};
-	}
-
-	let width: string;
-
-	function resizeStart() {}
-
-	async function resizeOn(data: CustomEvent<{ width: any }>) {
-		await tick();
-		width = data.detail.width + 'px';
-		// $dataListContext.columns[field].width = data.detail.width + 'px';
-	}
-
-	function resizeEnd() {}
-</script>
-
-<div
-	bind:this={element}
-	id={columnId}
-	class="column {className}"
-	use:resizer
-	use:onEvent={{ event: 'on:resizer:start', action: resizeStart }}
-	use:onEvent={{ event: 'on:resizer:resize', action: resizeOn }}
-	use:onEvent={{ event: 'on:resizer:end', action: resizeEnd }}
-	style:width
-	{...rest}
->
-	<Slotted child={drawerTop}></Slotted>
-	<div class="content">
-		{width}
-
-		<Slotted child={children}></Slotted>
-	</div>
-	<Slotted child={bottomSlot}></Slotted>
-</div>
-
+<script lang="ts">
+	import { getContext, tick } from 'svelte';
+	import type { ColumnProps, ColumnerStoreType } from './types.js';
+	import { resizer } from '../../utils/uses/resizer/resizer.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import { onEvent } from '../../utils/uses/event.js';
+
+	let columner = getContext<ColumnerStoreType>('columner');
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		columnId = crypto.randomUUID() as string,
+		bottomSlot,
+		drawerTop,
+		children,
+		...rest
+	}: ColumnProps = $props();
+
+	if (!$columner[columnId]) {
+		$columner[columnId] = {
+			columnId: Object.keys($columner).length,
+			state: 'default',
+			defaultStyle: {}
+		};
+	}
+
+	let width: string;
+
+	function resizeStart() {}
+
+	async function resizeOn(data: CustomEvent<{ width: any }>) {
+		await tick();
+		width = data.detail.width + 'px';
+		// $dataListContext.columns[field].width = data.detail.width + 'px';
+	}
+
+	function resizeEnd() {}
+</script>
+
+<div
+	bind:this={element}
+	id={columnId}
+	class="column {className}"
+	use:resizer
+	use:onEvent={{ event: 'on:resizer:start', action: resizeStart }}
+	use:onEvent={{ event: 'on:resizer:resize', action: resizeOn }}
+	use:onEvent={{ event: 'on:resizer:end', action: resizeEnd }}
+	style:width
+	{...rest}
+>
+	<Slotted child={drawerTop}></Slotted>
+	<div class="content">
+		{width}
+
+		<Slotted child={children}></Slotted>
+	</div>
+	<Slotted child={bottomSlot}></Slotted>
+</div>
+
 <style>.column {
   height: 100%;
   width: 100%;
@@ -80,4 +80,4 @@
 .column .commandBar {
   position: sticky;
   top: 0;
-}</style>
+}</style>

package/dist/base/columner/Columner.demo.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import Column from './Column.svelte';
-	import Columner from './Columner.svelte';
-</script>
-
-todo
-<ComponentDemo component="Column" cite="What else, cells ? We are columns <br /> D. Viesas, 1964">
-	<Columner style="height:350px">
-		<Column style="width:150px">1</Column>
-		<Column style="width:150px">2</Column>
-		<Column style="width:150px">2</Column>
-		<Column style="width:150px;right:0">3</Column>
-	</Columner>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import Column from './Column.svelte';
+	import Columner from './Columner.svelte';
+</script>
+
+todo
+<ComponentDemo component="Column" cite="What else, cells ? We are columns <br /> D. Viesas, 1964">
+	<Columner style="height:350px">
+		<Column style="width:150px">1</Column>
+		<Column style="width:150px">2</Column>
+		<Column style="width:150px">2</Column>
+		<Column style="width:150px;right:0">3</Column>
+	</Columner>
+</ComponentDemo>

package/dist/base/columner/Columner.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-	import type { ExpandProps } from '../../types/index.js';
-	import type { ColumnerStoreType } from './types.js';
-	import { setContext, type Snippet } from 'svelte';
-	import { writable } from 'svelte/store';
-
-	const columner = writable<ColumnerStoreType>({});
-	setContext('columner', columner);
-	type Props = {
-		children: Snippet;
-	};
-	let { children, ...restProps }: ExpandProps<Props> = $props();
-</script>
-
-<div class="columner" {...restProps}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import type { ColumnerStoreType } from './types.js';
+	import { setContext, type Snippet } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const columner = writable<ColumnerStoreType>({});
+	setContext('columner', columner);
+	type Props = {
+		children: Snippet;
+	};
+	let { children, ...restProps }: ExpandProps<Props> = $props();
+</script>
+
+<div class="columner" {...restProps}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
 <style>.columner {
   display: flex;
   height: 100%;
   position: relative;
-}</style>
+}</style>

package/dist/base/contentSwitcher/ContentSwitcher.demo.svelte

@@ -1,45 +1,45 @@
-<script lang="ts">
-	import ComponentDemo from '../demoer/DemoerComponent.svelte';
-	import { Demoer } from '../../../sitedata/slotuiComponents.js';
-	import Icon from '../icon/Icon.svelte';
-	import DemoPage from '../demoer/DemoPage.svelte';
-	import ContentSwitcher from './ContentSwitcher.svelte';
-	import { contentSwitcherDemoValues } from './types.js';
-
-	import { parameters, componentArgs } from './types.js';
-
-	const code = `
-<ContentSwitcher {...activeParams} class="marg-tb-1">
-    {#snippet contentSwitcherTogglerIcon()}
-        <Icon icon="mdi:tree" />
-    {/snippet}
-    {#snippet contentSwitcherBackIcon()}
-        <span>Switch</span>
-    {/snippet}
-    {#snippet contentSwitcherReveal()}
-        <div class="pad-2 border-t">Some <br />switched <br />content</div>
-    {/snippet}
-</ContentSwitcher>`;
-</script>
-
-<ComponentDemo component="ContentSwitcher">
-	<div class="flex-v gap-large">
-		<DemoPage component="ContentSwitcher" {code}>
-			<Demoer title="A simple contentSwitcher" {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<ContentSwitcher {...activeParams} class="marg-tb-1">
-						{#snippet contentSwitcherTogglerIcon()}
-							<Icon icon="mdi:tree" />
-						{/snippet}
-						{#snippet contentSwitcherBackIcon()}
-							<span>Switch</span>
-						{/snippet}
-						{#snippet contentSwitcherReveal()}
-							<div class="pad-2 border-t">Some <br />switched <br />content</div>
-						{/snippet}
-					</ContentSwitcher>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import { Demoer } from '../../../sitedata/slotuiComponents.js';
+	import Icon from '../icon/Icon.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import ContentSwitcher from './ContentSwitcher.svelte';
+	import { contentSwitcherDemoValues } from './types.js';
+
+	import { parameters, componentArgs } from './types.js';
+
+	const code = `
+<ContentSwitcher {...activeParams} class="marg-tb-1">
+    {#snippet contentSwitcherTogglerIcon()}
+        <Icon icon="mdi:tree" />
+    {/snippet}
+    {#snippet contentSwitcherBackIcon()}
+        <span>Switch</span>
+    {/snippet}
+    {#snippet contentSwitcherReveal()}
+        <div class="pad-2 border-t">Some <br />switched <br />content</div>
+    {/snippet}
+</ContentSwitcher>`;
+</script>
+
+<ComponentDemo component="ContentSwitcher">
+	<div class="flex-v gap-large">
+		<DemoPage component="ContentSwitcher" {code}>
+			<Demoer title="A simple contentSwitcher" {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<ContentSwitcher {...activeParams} class="marg-tb-1">
+						{#snippet contentSwitcherTogglerIcon()}
+							<Icon icon="mdi:tree" />
+						{/snippet}
+						{#snippet contentSwitcherBackIcon()}
+							<span>Switch</span>
+						{/snippet}
+						{#snippet contentSwitcherReveal()}
+							<div class="pad-2 border-t">Some <br />switched <br />content</div>
+						{/snippet}
+					</ContentSwitcher>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/base/contentSwitcher/ContentSwitcher.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-	import IconButton from '../../controls/button/IconButton.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ContentSwitcherProps } from './types.js';
-	import type { ExpandProps } from '../../types/index.js';
-
-	let {
-		class: className = '',
-		element = undefined,
-		style,
-		icon = 'toggle',
-		iconback = 'chevron-left',
-		parent = undefined,
-		contentSwitcherTogglerIcon: togglerIcon,
-		contentSwitcherBackIcon: backIcon,
-		contentSwitcherReveal
-	}: ExpandProps<ContentSwitcherProps> = $props();
-
-	let visibleSate: boolean = $state(false);
-	let thisRef: any;
-	let realParent: HTMLElement | null = $derived(parent ?? element?.parentElement ?? null);
-
-	function handleClick(event: MouseEvent) {
-		visibleSate = !visibleSate;
-		if (!element || !realParent) return false;
-		const children: HTMLCollection = realParent?.children;
-
-		// iterate over all child nodes
-		Array.from(children).forEach((li: any) => {
-			//li.style.transform = visibleSate ? 'scale(0,0)' : '';
-			li.style.display = visibleSate ? 'none' : '';
-		});
-
-		if (visibleSate) {
-			realParent.appendChild(thisRef);
-		} else {
-			element.appendChild(thisRef);
-		}
-	}
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class={className} {style} onclick={handleClick}>
-	<Slotted child={togglerIcon}>
-		<IconButton style="aspect-ratio:1/1" {icon} iconFontSize="small" />
-	</Slotted>
-</div>
-<div bind:this={element} style="display:none">
-	<div bind:this={thisRef} class="content-switcher">
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div onclick={handleClick}>
-			<Slotted child={backIcon}>
-				<Button ratio="1/1" icon={iconback} />
-			</Slotted>
-		</div>
-		<Slotted child={contentSwitcherReveal} />
-	</div>
-</div>
-
+<script lang="ts">
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ContentSwitcherProps } from './types.js';
+	import type { ExpandProps } from '../../types/index.js';
+
+	let {
+		class: className = '',
+		element = undefined,
+		style,
+		icon = 'toggle',
+		iconback = 'chevron-left',
+		parent = undefined,
+		contentSwitcherTogglerIcon: togglerIcon,
+		contentSwitcherBackIcon: backIcon,
+		contentSwitcherReveal
+	}: ExpandProps<ContentSwitcherProps> = $props();
+
+	let visibleSate: boolean = $state(false);
+	let thisRef: any;
+	let realParent: HTMLElement | null = $derived(parent ?? element?.parentElement ?? null);
+
+	function handleClick(event: MouseEvent) {
+		visibleSate = !visibleSate;
+		if (!element || !realParent) return false;
+		const children: HTMLCollection = realParent?.children;
+
+		// iterate over all child nodes
+		Array.from(children).forEach((li: any) => {
+			//li.style.transform = visibleSate ? 'scale(0,0)' : '';
+			li.style.display = visibleSate ? 'none' : '';
+		});
+
+		if (visibleSate) {
+			realParent.appendChild(thisRef);
+		} else {
+			element.appendChild(thisRef);
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class={className} {style} onclick={handleClick}>
+	<Slotted child={togglerIcon}>
+		<IconButton style="aspect-ratio:1/1" {icon} iconFontSize="small" />
+	</Slotted>
+</div>
+<div bind:this={element} style="display:none">
+	<div bind:this={thisRef} class="content-switcher">
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div onclick={handleClick}>
+			<Slotted child={backIcon}>
+				<Button ratio="1/1" icon={iconback} />
+			</Slotted>
+		</div>
+		<Slotted child={contentSwitcherReveal} />
+	</div>
+</div>
+
 <style>:root {
   --sld-content-switcher-overflow: hidden;
 }
@@ -80,4 +80,4 @@
   overflow: var(--sld-content-switcher-overflow);
   min-width: auto;
   flex: 1 1 auto;
-}</style>
+}</style>

package/dist/base/contentSwitcher/content-switcher.scss

@@ -1,22 +1,22 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --sld-content-switcher-overflow: hidden;
-}
-.content-switcher {
-    min-width: auto;
-    max-width: 100%;
-    width: 100%;
-    gap: 0.5rem;
-    overflow: var(--sld-content-switcher-overflow);
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex: 1;
-    .content {
-        position: relative;
-        overflow: var(--sld-content-switcher-overflow);
-        min-width: auto;
-        flex: 1 1 auto;
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --sld-content-switcher-overflow: hidden;
+}
+.content-switcher {
+    min-width: auto;
+    max-width: 100%;
+    width: 100%;
+    gap: 0.5rem;
+    overflow: var(--sld-content-switcher-overflow);
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    .content {
+        position: relative;
+        overflow: var(--sld-content-switcher-overflow);
+        min-width: auto;
+        flex: 1 1 auto;
+    }
+}

package/dist/base/debug/Debug.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import Cartouche from '../cartouche/Cartouche.svelte';
-	import type TabsItemsProps from '../../navigation/tabs/Tabs.svelte';
-
-	const items: TabsItemsProps = [
-		{ label: 'theTitle', code: 'theTitle1' },
-		{ label: 'theTitle bis', code: 'theTitle2' },
-		{
-			label: 'theTitle ter',
-			code: 'theTitle3',
-			component: Cartouche,
-			componentProps: { label: 'dynamic' }
-		}
-	];
-</script>
-
-<div style="padding:0.5rem">
-	<Cartouche isOpen={true} primary="debug zone here">
-		<pre>{JSON.stringify($$props, null, ' ')}</pre>
-	</Cartouche>
-</div>
+<script lang="ts">
+	import Cartouche from '../cartouche/Cartouche.svelte';
+	import type TabsItemsProps from '../../navigation/tabs/Tabs.svelte';
+
+	const items: TabsItemsProps = [
+		{ label: 'theTitle', code: 'theTitle1' },
+		{ label: 'theTitle bis', code: 'theTitle2' },
+		{
+			label: 'theTitle ter',
+			code: 'theTitle3',
+			component: Cartouche,
+			componentProps: { label: 'dynamic' }
+		}
+	];
+</script>
+
+<div style="padding:0.5rem">
+	<Cartouche isOpen={true} primary="debug zone here">
+		<pre>{JSON.stringify($$props, null, ' ')}</pre>
+	</Cartouche>
+</div>