@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/navigation/drawer/drawer.scss

@@ -1,69 +1,69 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --drawer-color: inherit;
-  --drawer-background-color: var(--sld-color-paper-alpha-low);
-  --drawer-backdrop-filter: blur(0px);
-  --drawer-box-shadow: var(--sld-elevation-3);
-  --drawer-border-left: var(--sld-color-primary-alpha-mid);
-  --drawer-icon-padding: 0 0.5rem;
-  --drawer-header-min-height: 48px;
-  --drawer-header-bar-title-font-size: large;
-  --drawer-content-flex: 1;
-}
-
-.drawer {
-  @include slotui-mixins.flex(column);
-  & {
-    color: var(--drawer-color);
-    background-color: var(--drawer-background-color);
-    --webkit-backdrop-filter: var(--drawer-backdrop-filter);
-    backdrop-filter: var(--drawer-backdrop-filter);
-    z-index: 3000;
-    box-shadow: var(--drawer-box-shadow);
-    border-left: 1px solid var(--drawer-border-left);
-    overflow: visible;
-    height: 100%;
-    transition: all 0.1s;
-  }
-
-  &-icon {
-    padding: var(--drawer-icon-padding);
-    display: flex;
-    align-items: center;
-  }
-
-  &-opener {
-    position: absolute;
-    z-index: 8600;
-  }
-  header,
-  &-header {
-    @include slotui-mixins.ui-tall-presets;
-
-    & {
-      min-height: var(--drawer-header-min-height);
-      display: flex;
-      width: 100%;
-    }
-
-    &-bar {
-      flex: 1;
-      display: flex;
-      align-items: center;
-
-      &-title {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-        font-size: var(--drawer-header-bar-title-font-size);
-      }
-    }
-  }
-  &-content {
-    flex: var(--drawer-content-flex);
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-  }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --drawer-color: inherit;
+  --drawer-background-color: var(--sld-color-paper-alpha-low);
+  --drawer-backdrop-filter: blur(0px);
+  --drawer-box-shadow: var(--sld-elevation-3);
+  --drawer-border-left: var(--sld-color-primary-alpha-mid);
+  --drawer-icon-padding: 0 0.5rem;
+  --drawer-header-min-height: 48px;
+  --drawer-header-bar-title-font-size: large;
+  --drawer-content-flex: 1;
+}
+
+.drawer {
+  @include slotui-mixins.flex(column);
+  & {
+    color: var(--drawer-color);
+    background-color: var(--drawer-background-color);
+    --webkit-backdrop-filter: var(--drawer-backdrop-filter);
+    backdrop-filter: var(--drawer-backdrop-filter);
+    z-index: 3000;
+    box-shadow: var(--drawer-box-shadow);
+    border-left: 1px solid var(--drawer-border-left);
+    overflow: visible;
+    height: 100%;
+    transition: all 0.1s;
+  }
+
+  &-icon {
+    padding: var(--drawer-icon-padding);
+    display: flex;
+    align-items: center;
+  }
+
+  &-opener {
+    position: absolute;
+    z-index: 8600;
+  }
+  header,
+  &-header {
+    @include slotui-mixins.ui-tall-presets;
+
+    & {
+      min-height: var(--drawer-header-min-height);
+      display: flex;
+      width: 100%;
+    }
+
+    &-bar {
+      flex: 1;
+      display: flex;
+      align-items: center;
+
+      &-title {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        font-size: var(--drawer-header-bar-title-font-size);
+      }
+    }
+  }
+  &-content {
+    flex: var(--drawer-content-flex);
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+}

package/dist/navigation/tabs/Tabs.demo.svelte

@@ -1,83 +1,83 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import Tabs from './Tabs.svelte';
-	import Cartouche from '../../base/cartouche/Cartouche.svelte';
-	import type { TabsItemsProps } from './types.js';
-	import Button from '../../controls/button/Button.svelte';
-	import DemoerComponent from '../../base/demoer/DemoerComponent.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	const items: TabsItemsProps = [
-		{ label: 'Tab 1', code: 'tab1', withContent: 'ff' },
-		{ label: 'Tab 2', code: 'tab2' },
-		{
-			label: 'Another tab',
-			code: 'tab3',
-			withComponent: Cartouche,
-			componentProps: { label: 'inner component' }
-		}
-	];
-
-	let code = `
-<Tabs
-	activeTabCode="tab1" 
-	onTabClick={(e) => { 
-	}}
-	class="h-full"
-	style="height:100%;width:350px"
-	{items}>
-		{#snippet children({ activeTabCode })}
-			{#snippet tabTitle()}
-				Some tabs title
-			{/snippet}
-			{#snippet tabButtons()}
-				<Button variant="bordered">button</Button>
-			{/snippet}
-			{#snippet tabsInner()}
-				<div class="h-full">
-					<div class="pad-4 h-full overflow-auto">
-						<!-- selected : {activeTabCode} -->
-					</div>
-				</div>
-			{/snippet}
-		{/snippet}
-</Tabs>`;
-</script>
-
-<DemoerComponent component="Tabs">
-	<DemoPage {code} component="Tabs">
-		<Demoer {componentArgs} {parameters}>
-			{#snippet children({ activeParams })}
-				<div style="height:450px;">
-					<Tabs
-						{...activeParams}
-						onTabClick={(e) => {
-							console.log(e);
-							componentArgs.activeTabCode = e.code;
-						}}
-						class="h-full"
-						style="height:100%;width:350px"
-					>
-						{#snippet tabsTitle()}
-							Some tabs title
-						{/snippet}
-						{#snippet tabsButtonZone()}
-							<Button variant="bordered">button</Button>
-						{/snippet}
-						{#snippet tabsInner({ activeTabCode })}
-							<div class="h-full">
-								<div class="pad-4 h-full overflow-auto">
-									selected : {activeTabCode}
-								</div>
-							</div>
-						{/snippet}
-					</Tabs>
-				</div>
-			{/snippet}
-		</Demoer>
-	</DemoPage>
-</DemoerComponent>
+<svelte:options runes />
+
+<script lang="ts">
+	import Tabs from './Tabs.svelte';
+	import Cartouche from '../../base/cartouche/Cartouche.svelte';
+	import type { TabsItemsProps } from './types.js';
+	import Button from '../../controls/button/Button.svelte';
+	import DemoerComponent from '../../base/demoer/DemoerComponent.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	const items: TabsItemsProps = [
+		{ label: 'Tab 1', code: 'tab1', withContent: 'ff' },
+		{ label: 'Tab 2', code: 'tab2' },
+		{
+			label: 'Another tab',
+			code: 'tab3',
+			withComponent: Cartouche,
+			componentProps: { label: 'inner component' }
+		}
+	];
+
+	let code = `
+<Tabs
+	activeTabCode="tab1" 
+	onTabClick={(e) => { 
+	}}
+	class="h-full"
+	style="height:100%;width:350px"
+	{items}>
+		{#snippet children({ activeTabCode })}
+			{#snippet tabTitle()}
+				Some tabs title
+			{/snippet}
+			{#snippet tabButtons()}
+				<Button variant="bordered">button</Button>
+			{/snippet}
+			{#snippet tabsInner()}
+				<div class="h-full">
+					<div class="pad-4 h-full overflow-auto">
+						<!-- selected : {activeTabCode} -->
+					</div>
+				</div>
+			{/snippet}
+		{/snippet}
+</Tabs>`;
+</script>
+
+<DemoerComponent component="Tabs">
+	<DemoPage {code} component="Tabs">
+		<Demoer {componentArgs} {parameters}>
+			{#snippet children({ activeParams })}
+				<div style="height:450px;">
+					<Tabs
+						{...activeParams}
+						onTabClick={(e) => {
+							console.log(e);
+							componentArgs.activeTabCode = e.code;
+						}}
+						class="h-full"
+						style="height:100%;width:350px"
+					>
+						{#snippet tabsTitle()}
+							Some tabs title
+						{/snippet}
+						{#snippet tabsButtonZone()}
+							<Button variant="bordered">button</Button>
+						{/snippet}
+						{#snippet tabsInner({ activeTabCode })}
+							<div class="h-full">
+								<div class="pad-4 h-full overflow-auto">
+									selected : {activeTabCode}
+								</div>
+							</div>
+						{/snippet}
+					</Tabs>
+				</div>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</DemoerComponent>

package/dist/navigation/tabs/Tabs.preview.svelte

@@ -1,22 +1,22 @@
-<svelte:options />
-
-<script lang="ts">
-	import Tabs from './Tabs.svelte';
-	import type { TabsItemsProps } from './types.js';
-	import Cartouche from '../../base/cartouche/Cartouche.svelte';
-	import Divider from '../../base/divider/Divider.svelte';
-	import Button from '../../controls/button/Button.svelte';
-
-	const items: TabsItemsProps = [
-		{ label: 'Tab 1', code: 'theTitle1', withContent: 'ff', secondary: 'some' },
-		{ label: 'Tab 2', code: 'theTitle2' },
-		{
-			label: 'Another tab',
-			code: 'theTitle3',
-			withComponent: Cartouche,
-			componentProps: { label: 'inner component' }
-		}
-	];
-</script>
-
-<Tabs activeTabCode="theTitle3" {items}>s</Tabs>
+<svelte:options />
+
+<script lang="ts">
+	import Tabs from './Tabs.svelte';
+	import type { TabsItemsProps } from './types.js';
+	import Cartouche from '../../base/cartouche/Cartouche.svelte';
+	import Divider from '../../base/divider/Divider.svelte';
+	import Button from '../../controls/button/Button.svelte';
+
+	const items: TabsItemsProps = [
+		{ label: 'Tab 1', code: 'theTitle1', withContent: 'ff', secondary: 'some' },
+		{ label: 'Tab 2', code: 'theTitle2' },
+		{
+			label: 'Another tab',
+			code: 'theTitle3',
+			withComponent: Cartouche,
+			componentProps: { label: 'inner component' }
+		}
+	];
+</script>
+
+<Tabs activeTabCode="theTitle3" {items}>s</Tabs>

package/dist/navigation/tabs/Tabs.svelte

@@ -1,160 +1,160 @@
-<svelte:options runes />
-
-<script lang="ts" generics="T=Data">
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	import { elem } from '../../utils/engine/elem.js';
-	import Icon from '../../base/icon/Icon.svelte';
-	import type { TabItem, TabsProps } from './types.js';
-	import type { Data, ExpandProps } from '../../types/index.js';
-	import { onEvent } from '../../utils/uses/event.js';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		activeTabCode = $bindable(),
-		items = [],
-		orientation = 'horizontal',
-		onTabClick = (item: TabItem) => {},
-		children,
-		tabsTitleMain,
-		tabsLabel,
-		tabsTitle,
-		tabsButtonZone,
-		tabsInner,
-		...rest
-	}: ExpandProps<TabsProps> = $props();
-
-	let navElementRef: HTMLElement;
-	let tabsElementRef: HTMLElement;
-	let activeCellElementRef: HTMLElement;
-	let boundingClientRect: DOMRect;
-
-	const handleClick = (item: TabItem) => {
-		onTabClick(item);
-		const event = new CustomEvent('on:tabs:click', { detail: item, bubbles: true });
-		element?.dispatchEvent(event);
-	};
-
-	const setChipPos = (code: any) => {
-		if (!elem(navElementRef) || !code) return;
-		const node = elem(navElementRef).find(`[data-code=${code}]`);
-		if (node && activeCellElementRef?.parentElement) {
-			boundingClientRect = node.getBoundingClientRect();
-			if (orientation === 'vertical') {
-				activeCellElementRef.style.left = node?.offsetLeft + 'px';
-				activeCellElementRef.style.width = boundingClientRect.width + 'px';
-			} else {
-				activeCellElementRef.style.top = node?.offsetTop + 'px';
-				activeCellElementRef.style.height = boundingClientRect.height + 'px';
-				activeCellElementRef.style.width = '3px';
-			}
-		}
-	};
-
-	$effect(() => {
-		if (activeTabCode && element && navElementRef) {
-			setChipPos(activeTabCode);
-		}
-	});
-
-	function toggler(node: HTMLElement) {
-		if (element !== undefined && node !== undefined)
-			elem(element)
-				?.findAll('[aria-selected]')
-				?.forEach((node) => {
-					node?.removeAttribute('aria-selected');
-				});
-		node.setAttribute('aria-selected', 'true');
-		if (node.dataset.code) togglerCode(node.dataset.code);
-	}
-
-	function togglerCode(code: string) {
-		activeTabCode = code;
-	}
-</script>
-
-<div bind:this={element} class="tab {className}" aria-orientation={orientation} {style}>
-	<div
-		use:onEvent={{ event: 'dom:close', action: () => {} }}
-		use:onEvent={{ event: 'dom:toggle', action: () => {} }}
-		use:onEvent={{
-			event: 'on:tabs:click',
-			action: () => {}
-		}}
-		bind:this={tabsElementRef}
-		class="tab-nav"
-	>
-		<div>
-			<Slotted child={tabsTitleMain}></Slotted>
-		</div>
-		<nav bind:this={navElementRef} class="tab-nav-rail">
-			{#each items as item}
-				<button
-					data-code={item?.code}
-					data-toggle={item?.code}
-					onclick={(ji) => {
-						if (ji.target) toggler(ji.target as HTMLElement);
-						handleClick(item);
-					}}
-					class={activeTabCode === item?.code ? 'active' : ''}
-				>
-					<Slotted child={tabsLabel} slotArgs={{ item, activeTabCode }}>
-						{item?.label}
-					</Slotted>
-				</button>
-			{/each}
-		</nav>
-		<div>
-			<Slotted child={tabsTitle}></Slotted>
-		</div>
-		<div>
-			<Slotted child={tabsButtonZone}></Slotted>
-		</div>
-	</div>
-	<div class="tab-floating-cell">
-		<div bind:this={activeCellElementRef} class="tab-floating-cell-snip"></div>
-	</div>
-	<div class="tab-content">
-		{#each items as item}
-			{@const display = activeTabCode === item?.code ? 'flex' : 'none'}
-			{#if item && activeTabCode === item?.code}
-				<Slotted child={tabsInner} slotArgs={{ item, activeTabCode }}>
-					<div
-						data-code={item.code}
-						data-toggle-on={item.code}
-						data-activeTabCode={activeTabCode}
-						style="display:{display};height:100%;position:relative;flex-direction:column"
-					>
-						{#if Boolean(item?.secondary)}
-							<div class="tab-content-secondary">
-								<div class="tab-content-secondary-icon">
-									<Icon style="display:block" icon="clarity:help-info-solid" />
-								</div>
-								<div style="flex:1;">{@html item?.secondary}</div>
-							</div>
-						{/if}
-						<Slotted child={tabsInner} slotArgs={{ item, activeTabCode }}>
-							<div data-code={item.code} style="flex:1;overflow:hidden;position:relative;">
-								{#if activeTabCode === item.code}
-									{#if Boolean(item?.withComponent)}
-										<svelte:component this={item.withComponent} {...item.componentProps ?? {}} />
-									{:else if Boolean(item?.withContent)}
-										{item.withContent}
-									{:else if Boolean(item?.withUid)}
-										{item.withUid}
-									{/if}
-								{/if}
-							</div>
-						</Slotted>
-					</div>
-				</Slotted>
-			{/if}
-		{/each}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" generics="T=Data">
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	import { elem } from '../../utils/engine/elem.js';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { TabItem, TabsProps } from './types.js';
+	import type { Data, ExpandProps } from '../../types/index.js';
+	import { onEvent } from '../../utils/uses/event.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		activeTabCode = $bindable(),
+		items = [],
+		orientation = 'horizontal',
+		onTabClick = (item: TabItem) => {},
+		children,
+		tabsTitleMain,
+		tabsLabel,
+		tabsTitle,
+		tabsButtonZone,
+		tabsInner,
+		...rest
+	}: ExpandProps<TabsProps> = $props();
+
+	let navElementRef: HTMLElement;
+	let tabsElementRef: HTMLElement;
+	let activeCellElementRef: HTMLElement;
+	let boundingClientRect: DOMRect;
+
+	const handleClick = (item: TabItem) => {
+		onTabClick(item);
+		const event = new CustomEvent('on:tabs:click', { detail: item, bubbles: true });
+		element?.dispatchEvent(event);
+	};
+
+	const setChipPos = (code: any) => {
+		if (!elem(navElementRef) || !code) return;
+		const node = elem(navElementRef).find(`[data-code=${code}]`);
+		if (node && activeCellElementRef?.parentElement) {
+			boundingClientRect = node.getBoundingClientRect();
+			if (orientation === 'vertical') {
+				activeCellElementRef.style.left = node?.offsetLeft + 'px';
+				activeCellElementRef.style.width = boundingClientRect.width + 'px';
+			} else {
+				activeCellElementRef.style.top = node?.offsetTop + 'px';
+				activeCellElementRef.style.height = boundingClientRect.height + 'px';
+				activeCellElementRef.style.width = '3px';
+			}
+		}
+	};
+
+	$effect(() => {
+		if (activeTabCode && element && navElementRef) {
+			setChipPos(activeTabCode);
+		}
+	});
+
+	function toggler(node: HTMLElement) {
+		if (element !== undefined && node !== undefined)
+			elem(element)
+				?.findAll('[aria-selected]')
+				?.forEach((node) => {
+					node?.removeAttribute('aria-selected');
+				});
+		node.setAttribute('aria-selected', 'true');
+		if (node.dataset.code) togglerCode(node.dataset.code);
+	}
+
+	function togglerCode(code: string) {
+		activeTabCode = code;
+	}
+</script>
+
+<div bind:this={element} class="tab {className}" aria-orientation={orientation} {style}>
+	<div
+		use:onEvent={{ event: 'dom:close', action: () => {} }}
+		use:onEvent={{ event: 'dom:toggle', action: () => {} }}
+		use:onEvent={{
+			event: 'on:tabs:click',
+			action: () => {}
+		}}
+		bind:this={tabsElementRef}
+		class="tab-nav"
+	>
+		<div>
+			<Slotted child={tabsTitleMain}></Slotted>
+		</div>
+		<nav bind:this={navElementRef} class="tab-nav-rail">
+			{#each items as item}
+				<button
+					data-code={item?.code}
+					data-toggle={item?.code}
+					onclick={(ji) => {
+						if (ji.target) toggler(ji.target as HTMLElement);
+						handleClick(item);
+					}}
+					class={activeTabCode === item?.code ? 'active' : ''}
+				>
+					<Slotted child={tabsLabel} slotArgs={{ item, activeTabCode }}>
+						{item?.label}
+					</Slotted>
+				</button>
+			{/each}
+		</nav>
+		<div>
+			<Slotted child={tabsTitle}></Slotted>
+		</div>
+		<div>
+			<Slotted child={tabsButtonZone}></Slotted>
+		</div>
+	</div>
+	<div class="tab-floating-cell">
+		<div bind:this={activeCellElementRef} class="tab-floating-cell-snip"></div>
+	</div>
+	<div class="tab-content">
+		{#each items as item}
+			{@const display = activeTabCode === item?.code ? 'flex' : 'none'}
+			{#if item && activeTabCode === item?.code}
+				<Slotted child={tabsInner} slotArgs={{ item, activeTabCode }}>
+					<div
+						data-code={item.code}
+						data-toggle-on={item.code}
+						data-activeTabCode={activeTabCode}
+						style="display:{display};height:100%;position:relative;flex-direction:column"
+					>
+						{#if Boolean(item?.secondary)}
+							<div class="tab-content-secondary">
+								<div class="tab-content-secondary-icon">
+									<Icon style="display:block" icon="clarity:help-info-solid" />
+								</div>
+								<div style="flex:1;">{@html item?.secondary}</div>
+							</div>
+						{/if}
+						<Slotted child={tabsInner} slotArgs={{ item, activeTabCode }}>
+							<div data-code={item.code} style="flex:1;overflow:hidden;position:relative;">
+								{#if activeTabCode === item.code}
+									{#if Boolean(item?.withComponent)}
+										<svelte:component this={item.withComponent} {...item.componentProps ?? {}} />
+									{:else if Boolean(item?.withContent)}
+										{item.withContent}
+									{:else if Boolean(item?.withUid)}
+										{item.withUid}
+									{/if}
+								{/if}
+							</div>
+						</Slotted>
+					</div>
+				</Slotted>
+			{/if}
+		{/each}
+	</div>
+</div>
+
 <style>:root {
   --tabs-nav-border-color: var(--sld-color-primary-alpha-high);
   --tabs-content-background-color: var(--sld-color-background);
@@ -239,4 +239,4 @@
   position: absolute;
   transition: all 0.25s ease-in;
   z-index: 200;
-}</style>
+}</style>