@medyll/idae-slotui-svelte 0.122.0 → 0.123.0

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>

package/dist/navigation/tabs/tabs.scss

@@ -1,92 +1,92 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --tabs-nav-border-color: var(--sld-color-primary-alpha-high);
-  --tabs-content-background-color: var(--sld-color-background);
-  --tabs-content-secondary-padding: var(--box-density-preset-small);
-  --tabs-content-secondary-gap: var(--sld-gap-small);
-  --tabs-content-secondary-icon-border-right: var(--sld-color-border);
-  --tabs-content-secondary-icon-border-radius: var(--sld-radius-tiny);
-  --tabs-content-secondary-icon-box-shadow: var(--sld-elevation-3);
-  --tabs-content-secondary-icon-padding: var(--sld-padding-small);
-  --tabs-floating-cell-slot-border-radius: var(--sld-radius-small);
-  --tabs-floating-cell-slot-background-color: var(--sld-color-primary);
-}
-
-.tab {
-  position: relative;
-  display: flex;
-  &[aria-orientation="horizontal"] {
-    ul {
-      flex-direction: column;
-    }
-  }
-  &[aria-orientation="vertical"] {
-    flex-direction: column;
-  }
-
-  &-nav {
-    padding: 0.25rem 0;
-    gap: var(--sld-gap-med);
-    border-bottom: 1px solid var(--tabs-nav-border-color);
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    &[aria-orientation="horizontal"] {
-      flex-direction: column;
-    }
-    &-rail {
-      display: flex;
-      flex: 1;
-      flex-wrap: wrap;
-      padding-left: 0;
-      margin-bottom: 0;
-      > button {
-        padding: var(--box-density-preset-small);
-        min-width: 48px;
-        cursor: pointer;
-        background: none;
-        border: none;
-        &.active,
-        &[aria-selected="true"] {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-  &-content {
-    flex: 1;
-    background-color: var(--tabs-content-background-color);
-    position: relative;
-    width: 100%;
-    &-secondary {
-      display: flex;
-      padding: var(--tabs-content-secondary-padding) unset;
-      gap: var(--tabs-content-secondary-gap);
-      &-icon {
-        border-right: 1px solid var(--tabs-content-secondary-icon-border-right);
-        border-radius: var(--tabs-content-secondary-icon-border-radius);
-        box-shadow: var(--tabs-content-secondary-icon-box-shadow);
-        padding: var(--tabs-content-secondary-icon-padding);
-      }
-    }
-  }
-
-  &-floating-cell {
-    top: auto;
-    position: relative;
-    min-height: 4px;
-    height: 4px;
-    transition: all 0.15;
-    &-snip {
-      border-radius: var(--tabs-floating-cell-slot-border-radius);
-      min-height: 4px;
-      background-color: var(--tabs-floating-cell-slot-background-color);
-      width: 100%;
-      position: absolute;
-      transition: all 0.25s ease-in;
-      z-index: 200;
-    }
-  }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --tabs-nav-border-color: var(--sld-color-primary-alpha-high);
+  --tabs-content-background-color: var(--sld-color-background);
+  --tabs-content-secondary-padding: var(--box-density-preset-small);
+  --tabs-content-secondary-gap: var(--sld-gap-small);
+  --tabs-content-secondary-icon-border-right: var(--sld-color-border);
+  --tabs-content-secondary-icon-border-radius: var(--sld-radius-tiny);
+  --tabs-content-secondary-icon-box-shadow: var(--sld-elevation-3);
+  --tabs-content-secondary-icon-padding: var(--sld-padding-small);
+  --tabs-floating-cell-slot-border-radius: var(--sld-radius-small);
+  --tabs-floating-cell-slot-background-color: var(--sld-color-primary);
+}
+
+.tab {
+  position: relative;
+  display: flex;
+  &[aria-orientation="horizontal"] {
+    ul {
+      flex-direction: column;
+    }
+  }
+  &[aria-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  &-nav {
+    padding: 0.25rem 0;
+    gap: var(--sld-gap-med);
+    border-bottom: 1px solid var(--tabs-nav-border-color);
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    &[aria-orientation="horizontal"] {
+      flex-direction: column;
+    }
+    &-rail {
+      display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      padding-left: 0;
+      margin-bottom: 0;
+      > button {
+        padding: var(--box-density-preset-small);
+        min-width: 48px;
+        cursor: pointer;
+        background: none;
+        border: none;
+        &.active,
+        &[aria-selected="true"] {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  &-content {
+    flex: 1;
+    background-color: var(--tabs-content-background-color);
+    position: relative;
+    width: 100%;
+    &-secondary {
+      display: flex;
+      padding: var(--tabs-content-secondary-padding) unset;
+      gap: var(--tabs-content-secondary-gap);
+      &-icon {
+        border-right: 1px solid var(--tabs-content-secondary-icon-border-right);
+        border-radius: var(--tabs-content-secondary-icon-border-radius);
+        box-shadow: var(--tabs-content-secondary-icon-box-shadow);
+        padding: var(--tabs-content-secondary-icon-padding);
+      }
+    }
+  }
+
+  &-floating-cell {
+    top: auto;
+    position: relative;
+    min-height: 4px;
+    height: 4px;
+    transition: all 0.15;
+    &-snip {
+      border-radius: var(--tabs-floating-cell-slot-border-radius);
+      min-height: 4px;
+      background-color: var(--tabs-floating-cell-slot-background-color);
+      width: 100%;
+      position: absolute;
+      transition: all 0.25s ease-in;
+      z-index: 200;
+    }
+  }
+}