@medyll/idae-slotui-svelte 0.122.0 → 0.123.0

package/dist/navigation/drawer/Drawer.svelte

@@ -1,165 +1,165 @@
-<script lang="ts" generics="T">
-	import IconButton from '../../controls/button/IconButton.svelte';
-	import Button from '../../controls/button/Button.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import type { DrawerProps } from './types.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-
-	/** @deprecated use actions.toggle */
-	export const actions = {
-		toggle: (visibleSate?: boolean) => {
-			isOpen = visibleSate !== undefined ? visibleSate : !isOpen;
-		}
-	};
-	export function toggle(visibleSate?: boolean) {
-		isOpen = visibleSate !== undefined ? visibleSate : !isOpen;
-	}
-
-	let {
-		class: className = '',
-		style,
-		primary = undefined,
-		secondary = undefined,
-		icon,
-		hideCloseIcon = $bindable(false),
-		showOpenerIcon = false,
-		element = $bindable(),
-		isOpen = $bindable(true),
-		flow = $bindable('fixed'),
-		stickTo = $bindable('left'),
-		defaultWidth = '288px',
-		defaultVisibleArea = '0px',
-		defaultHeight = '288px',
-		drawerContent,
-		drawerIcon,
-		drawerTitle,
-		drawerPrimary,
-		drawerSecondary,
-		drawerTop,
-		drawerFooter,
-		children,
-		...rest
-	}: ExpandProps<DrawerProps<T>> = $props();
-
-	let dspStyle: string;
-
-	const stickToStyle = {
-		right: 'right:0;top:0;height:100%;height:100%;',
-		left: 'left:0;top:0;bottom:0;height:100%;height:100%;',
-		top: `left:0;right:0;top:0;height:${defaultHeight};`,
-		bottom: `left:0;right:0;bottom:0;height:${defaultHeight};`
-	};
-
-	const openerIconStyle = {
-		right: 'left:-16px;top:8px;',
-		left: 'right:-16px;top:8px;',
-		top: 'bottom:-16px;right:8px;',
-		bottom: 'top:-16px;right:8px;'
-	};
-
-	let sensSuffix = '';
-	let dimKeyVary: string;
-	let widthStyle: string;
-	let finalStyle: string = $state('');
-	let sens: number = 0;
-	$effect(() => {
-		dimKeyVary = ['top', 'bottom'].includes(stickTo) ? 'height' : 'width';
-		switch (stickTo) {
-			case 'top':
-				sensSuffix = isOpen ? 'up' : 'down';
-				sens = isOpen ? 180 : 0;
-				break;
-			case 'right':
-				sensSuffix = isOpen ? 'right' : 'left';
-				sens = isOpen ? 180 : 0;
-				break;
-			case 'bottom':
-				sensSuffix = isOpen ? 'down' : 'up';
-				sens = isOpen ? 180 : 0;
-				break;
-			case 'left':
-				sensSuffix = isOpen ? 'left' : 'right';
-				sens = isOpen ? 180 : 0;
-				break;
-		}
-	});
-
-	$effect(() => {
-		dspStyle = isOpen ? 'flex' : 'flex';
-		widthStyle = isOpen ? defaultWidth : defaultVisibleArea;
-		finalStyle = `display:${dspStyle};position:${flow};${stickToStyle[stickTo]};${dimKeyVary}:${widthStyle};${style};`;
-	});
-</script>
-
-<div
-	bind:this={element}
-	class="drawer {className}"
-	style={finalStyle}
-	aria-expanded={isOpen}
-	aria-orientation="vertical"
-	{...rest}
->
-	{#if showOpenerIcon}
-		<div class="drawer-opener" style={openerIconStyle[stickTo]}>
-			<IconButton
-				--sld-button-radius="50%"
-				icon={'chevron-right'}
-				rotation={sens}
-				style="cursor:pointer;"
-				onclick={() => actions.toggle()}
-			/>
-		</div>
-	{/if}
-	{#if isOpen}
-		{#if drawerTop || drawerIcon || Boolean(primary) || Boolean(icon)}
-			<header class="drawer-header">
-				{#if Boolean(icon) || drawerIcon}
-					<div class="drawer-icon">
-						<Slotted child={drawerIcon}>
-							<Icon {icon} />
-						</Slotted>
-					</div>
-				{/if}
-				<div class="drawer-header-bar">
-					<div class="drawer-header-bar-title">
-						<Slotted child={drawerTitle}>
-							<Slotted child={drawerPrimary}>
-								{#if primary}
-									<div style="font-size:18px;">{primary}</div>
-								{/if}
-							</Slotted>
-							<Slotted child={drawerSecondary}>
-								{#if secondary}
-									<div>{secondary}</div>
-								{/if}
-							</Slotted>
-						</Slotted>
-					</div>
-					<Slotted child={drawerTop}></Slotted>
-				</div>
-				{#if !hideCloseIcon && !showOpenerIcon}
-					<Button
-						onclick={() => {
-							toggle();
-						}}
-						icon="window-close"
-						variant="naked"
-					/>
-				{/if}
-			</header>
-		{/if}
-		<div class="drawer-content">
-			<Slotted child={drawerContent}>
-				<Slotted child={children}></Slotted>
-			</Slotted>
-		</div>
-		<footer>
-			<Slotted child={drawerFooter}></Slotted>
-		</footer>
-	{/if}
-</div>
-
+<script lang="ts" generics="T">
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { DrawerProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	/** @deprecated use actions.toggle */
+	export const actions = {
+		toggle: (visibleSate?: boolean) => {
+			isOpen = visibleSate !== undefined ? visibleSate : !isOpen;
+		}
+	};
+	export function toggle(visibleSate?: boolean) {
+		isOpen = visibleSate !== undefined ? visibleSate : !isOpen;
+	}
+
+	let {
+		class: className = '',
+		style,
+		primary = undefined,
+		secondary = undefined,
+		icon,
+		hideCloseIcon = $bindable(false),
+		showOpenerIcon = false,
+		element = $bindable(),
+		isOpen = $bindable(true),
+		flow = $bindable('fixed'),
+		stickTo = $bindable('left'),
+		defaultWidth = '288px',
+		defaultVisibleArea = '0px',
+		defaultHeight = '288px',
+		drawerContent,
+		drawerIcon,
+		drawerTitle,
+		drawerPrimary,
+		drawerSecondary,
+		drawerTop,
+		drawerFooter,
+		children,
+		...rest
+	}: ExpandProps<DrawerProps<T>> = $props();
+
+	let dspStyle: string;
+
+	const stickToStyle = {
+		right: 'right:0;top:0;height:100%;height:100%;',
+		left: 'left:0;top:0;bottom:0;height:100%;height:100%;',
+		top: `left:0;right:0;top:0;height:${defaultHeight};`,
+		bottom: `left:0;right:0;bottom:0;height:${defaultHeight};`
+	};
+
+	const openerIconStyle = {
+		right: 'left:-16px;top:8px;',
+		left: 'right:-16px;top:8px;',
+		top: 'bottom:-16px;right:8px;',
+		bottom: 'top:-16px;right:8px;'
+	};
+
+	let sensSuffix = '';
+	let dimKeyVary: string;
+	let widthStyle: string;
+	let finalStyle: string = $state('');
+	let sens: number = 0;
+	$effect(() => {
+		dimKeyVary = ['top', 'bottom'].includes(stickTo) ? 'height' : 'width';
+		switch (stickTo) {
+			case 'top':
+				sensSuffix = isOpen ? 'up' : 'down';
+				sens = isOpen ? 180 : 0;
+				break;
+			case 'right':
+				sensSuffix = isOpen ? 'right' : 'left';
+				sens = isOpen ? 180 : 0;
+				break;
+			case 'bottom':
+				sensSuffix = isOpen ? 'down' : 'up';
+				sens = isOpen ? 180 : 0;
+				break;
+			case 'left':
+				sensSuffix = isOpen ? 'left' : 'right';
+				sens = isOpen ? 180 : 0;
+				break;
+		}
+	});
+
+	$effect(() => {
+		dspStyle = isOpen ? 'flex' : 'flex';
+		widthStyle = isOpen ? defaultWidth : defaultVisibleArea;
+		finalStyle = `display:${dspStyle};position:${flow};${stickToStyle[stickTo]};${dimKeyVary}:${widthStyle};${style};`;
+	});
+</script>
+
+<div
+	bind:this={element}
+	class="drawer {className}"
+	style={finalStyle}
+	aria-expanded={isOpen}
+	aria-orientation="vertical"
+	{...rest}
+>
+	{#if showOpenerIcon}
+		<div class="drawer-opener" style={openerIconStyle[stickTo]}>
+			<IconButton
+				--sld-button-radius="50%"
+				icon={'chevron-right'}
+				rotation={sens}
+				style="cursor:pointer;"
+				onclick={() => actions.toggle()}
+			/>
+		</div>
+	{/if}
+	{#if isOpen}
+		{#if drawerTop || drawerIcon || Boolean(primary) || Boolean(icon)}
+			<header class="drawer-header">
+				{#if Boolean(icon) || drawerIcon}
+					<div class="drawer-icon">
+						<Slotted child={drawerIcon}>
+							<Icon {icon} />
+						</Slotted>
+					</div>
+				{/if}
+				<div class="drawer-header-bar">
+					<div class="drawer-header-bar-title">
+						<Slotted child={drawerTitle}>
+							<Slotted child={drawerPrimary}>
+								{#if primary}
+									<div style="font-size:18px;">{primary}</div>
+								{/if}
+							</Slotted>
+							<Slotted child={drawerSecondary}>
+								{#if secondary}
+									<div>{secondary}</div>
+								{/if}
+							</Slotted>
+						</Slotted>
+					</div>
+					<Slotted child={drawerTop}></Slotted>
+				</div>
+				{#if !hideCloseIcon && !showOpenerIcon}
+					<Button
+						onclick={() => {
+							toggle();
+						}}
+						icon="window-close"
+						variant="naked"
+					/>
+				{/if}
+			</header>
+		{/if}
+		<div class="drawer-content">
+			<Slotted child={drawerContent}>
+				<Slotted child={children}></Slotted>
+			</Slotted>
+		</div>
+		<footer>
+			<Slotted child={drawerFooter}></Slotted>
+		</footer>
+	{/if}
+</div>
+
 <style global>:root {
   --drawer-color: inherit;
   --drawer-background-color: var(--sld-color-paper-alpha-low);
@@ -247,4 +247,4 @@
   position: relative;
   overflow: hidden;
   width: 100%;
-}</style>
+}</style>

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>