@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/ui/menu/menu.scss

@@ -1,61 +1,61 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --menu-min-width: 150px;
-  --menu-padding: 0.25rem;
-  --menu-color: var(--sld-color-foreground);
-  --menu-item-border-radius: var(--sld-radius-small);
-  --menu-item-icon-width: 16px;
-  --menu-item-text-padding-left: 0.25rem;
-}
-
-ul.menu {
-  & {
-    margin: 0;
-    min-width: var(--menu-min-width);
-    padding: var(--menu-padding);
-    cursor: pointer;
-    display: block;
-    color: var(--menu-color);
-  }
-
-  li.menuTitle {
-    position: sticky;
-    margin-top: 0px !important;
-    top: 0px;
-    z-index: 1;
-  }
-}
-
-li.menuItem {
-  @include slotui-mixins.data-hover;
-  @include slotui-mixins.data-selected;
-  @include slotui-mixins.ui-tall-presets;
-
-  & {
-    border-radius: var(--menu-item-border-radius);
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    border: 1px solid transparent;
-  }
-
-  .menuListItemIcon {
-    width: var(--menu-item-icon-width);
-    max-width: var(--menu-item-icon-width);
-    text-align: center;
-    overflow: hidden;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-  }
-
-  .menu-list-item-text {
-    flex: 1;
-    padding-left: var(--menu-item-text-padding-left);
-  }
-
-  .menu-list-item-action {
-    display: block;
-  }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --menu-min-width: 150px;
+  --menu-padding: 0.25rem;
+  --menu-color: var(--sld-color-foreground);
+  --menu-item-border-radius: var(--sld-radius-small);
+  --menu-item-icon-width: 16px;
+  --menu-item-text-padding-left: 0.25rem;
+}
+
+ul.menu {
+  & {
+    margin: 0;
+    min-width: var(--menu-min-width);
+    padding: var(--menu-padding);
+    cursor: pointer;
+    display: block;
+    color: var(--menu-color);
+  }
+
+  li.menuTitle {
+    position: sticky;
+    margin-top: 0px !important;
+    top: 0px;
+    z-index: 1;
+  }
+}
+
+li.menuItem {
+  @include slotui-mixins.data-hover;
+  @include slotui-mixins.data-selected;
+  @include slotui-mixins.ui-tall-presets;
+
+  & {
+    border-radius: var(--menu-item-border-radius);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    border: 1px solid transparent;
+  }
+
+  .menuListItemIcon {
+    width: var(--menu-item-icon-width);
+    max-width: var(--menu-item-icon-width);
+    text-align: center;
+    overflow: hidden;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  .menu-list-item-text {
+    flex: 1;
+    padding-left: var(--menu-item-text-padding-left);
+  }
+
+  .menu-list-item-action {
+    display: block;
+  }
+}

package/dist/ui/menuList/MenuList.demo.svelte

@@ -1,73 +1,73 @@
-<script lang="ts">
-	import MenuList from './MenuList.svelte';
-	import MenuItem from './MenuListItem.svelte';
-	/* demo */
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	import { uiPresets } from '../../utils/engine/presets.js';
-	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
-	/* demo */
-
-	import { parameters, componentArgs } from './types.js';
-
-	let codeSlot = `
-<Menu>
-	<MenuItem divider={true}>menu item</MenuItem>
-	<MenuItem icon="home" selected={true}>menu item</MenuItem>
-	<MenuItem icon="close">menu item</MenuItem>
-	<MenuItem divider={true}>menu item</MenuItem>
-	<MenuItem>menu item</MenuItem>
-</Menu>`;
-</script>
-
-<ComponentDemo
-	component="Menu"
-	cite="A menu is not a list, it's just like a list but more and less"
->
-	<div class="flex-v gap-large">
-		<DemoPage code={codeSlot} component="Popper">
-			<Demoer {componentArgs} {parameters}>
-				{#snippet children({ activeParams })}
-					<div class="flex-h flex-align-bottom gap-small">
-						<div class="pad-tiny">
-							<MenuList {...activeParams}>
-								<MenuItem>menu item</MenuItem>
-								<MenuItem>menu item</MenuItem>
-								<MenuItem>menu item</MenuItem>
-								<MenuItem>menu item</MenuItem>
-								<MenuItem>menu item</MenuItem>
-							</MenuList>
-							<h6 class="pad">A menu</h6>
-						</div>
-						<div class="pad">
-							<MenuList {...activeParams}>
-								<MenuItem>menu item</MenuItem>
-								<MenuItem icon="home" selected={true}>menu item</MenuItem>
-								<MenuItem icon="close">menu item</MenuItem>
-								<MenuItem>menu item</MenuItem>
-								<MenuItem>menu item</MenuItem>
-							</MenuList>
-							<h6 class="pad">A menu with icons</h6>
-						</div>
-						<div class="pad">
-							<MenuList {...activeParams}>
-								<MenuItem divider={true}>menu item</MenuItem>
-								<MenuItem icon="home" selected={true}>menu item</MenuItem>
-								<MenuItem icon="close">menu item</MenuItem>
-								<MenuItem divider={true}>menu item</MenuItem>
-								<MenuItem>menu item</MenuItem>
-							</MenuList>
-							<h6 class="pad">A menu with some dividers</h6>
-						</div>
-					</div>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div></ComponentDemo
->
-<br />
-<br />
-<br />
-<br />
-<ComponentDemo component="MenuItem" cite="A MenuItem gets one place to stay" />
+<script lang="ts">
+	import MenuList from './MenuList.svelte';
+	import MenuItem from './MenuListItem.svelte';
+	/* demo */
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import { uiPresets } from '../../utils/engine/presets.js';
+	import { defaultsArgs, defaultsArgsFromProps } from '../../base/demoer/demoer.utils.js';
+	/* demo */
+
+	import { parameters, componentArgs } from './types.js';
+
+	let codeSlot = `
+<Menu>
+	<MenuItem divider={true}>menu item</MenuItem>
+	<MenuItem icon="home" selected={true}>menu item</MenuItem>
+	<MenuItem icon="close">menu item</MenuItem>
+	<MenuItem divider={true}>menu item</MenuItem>
+	<MenuItem>menu item</MenuItem>
+</Menu>`;
+</script>
+
+<ComponentDemo
+	component="Menu"
+	cite="A menu is not a list, it's just like a list but more and less"
+>
+	<div class="flex-v gap-large">
+		<DemoPage code={codeSlot} component="Popper">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="flex-h flex-align-bottom gap-small">
+						<div class="pad-tiny">
+							<MenuList {...activeParams}>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+							</MenuList>
+							<h6 class="pad">A menu</h6>
+						</div>
+						<div class="pad">
+							<MenuList {...activeParams}>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem icon="home" selected={true}>menu item</MenuItem>
+								<MenuItem icon="close">menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+							</MenuList>
+							<h6 class="pad">A menu with icons</h6>
+						</div>
+						<div class="pad">
+							<MenuList {...activeParams}>
+								<MenuItem divider={true}>menu item</MenuItem>
+								<MenuItem icon="home" selected={true}>menu item</MenuItem>
+								<MenuItem icon="close">menu item</MenuItem>
+								<MenuItem divider={true}>menu item</MenuItem>
+								<MenuItem>menu item</MenuItem>
+							</MenuList>
+							<h6 class="pad">A menu with some dividers</h6>
+						</div>
+					</div>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div></ComponentDemo
+>
+<br />
+<br />
+<br />
+<br />
+<ComponentDemo component="MenuItem" cite="A MenuItem gets one place to stay" />

package/dist/ui/menuList/MenuList.svelte

@@ -1,145 +1,145 @@
-<script lang="ts" generics="T= Data">
-	import { navigation } from '../../utils/uses/navigation.js';
-
-	import { setContext } from 'svelte';
-	import type { MenuListProps } from './types.js';
-	import MenuListItem from './MenuListItem.svelte';
-	import { tallPreset, widthPreset, type Data, type ExpandProps } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import Looper from '../../utils/looper/Looper.svelte';
-
-	export const actions = {
-		navigate(e: KeyboardEvent) {
-			element?.dispatchEvent(new CustomEvent('menu:navigate', { detail: e }));
-		},
-		gotoIndex: (idx: number) => {
-			if (element && idx > -1) {
-				element.dispatchEvent(new CustomEvent('menu:gotoIndex', { detail: { index: idx } }));
-				selectedIndex = idx;
-				if (menuStore) menuStore.selectedIndex = idx;
-				const target = element.querySelector('[aria-selected=true]');
-				if (target) {
-					scrollToElement(target as HTMLElement);
-				}
-			}
-		}
-	};
-	let {
-		class: className = '',
-		tall = tallPreset.small,
-		width = widthPreset.full,
-		style,
-		selectorField,
-		role = 'menu',
-		grid,
-		showLastOnSelected = true,
-		presentationField,
-		onclick,
-		data = $bindable(),
-		selectedData = $bindable(),
-		selectedIndex = $bindable(),
-		element = $bindable(),
-		menuListItems = $bindable(),
-		menuListItemProps = $bindable(),
-		children,
-		menuListItem,
-		listItemBottom,
-		...rest
-	}: MenuListProps = $props();
-
-	menuListItemProps = {
-		tall,
-		width,
-		selectorField,
-		presentationField,
-		...menuListItemProps
-	};
-
-	let defaultStoreValues = {
-		menuListItems,
-		menuItemsInstances: [],
-		tall,
-		width,
-		data,
-		selectorField,
-		selectedIndex,
-		actions,
-		presentationField,
-		...menuListItemProps
-	};
-
-	let menuStore = $state(defaultStoreValues);
-	setContext('menuStateContext', menuStore);
-
-	$effect(() => {
-		menuStore.selectedIndex = selectedIndex;
-	});
-	$effect(() => {
-		menuStore.tall = tall;
-	});
-	$effect(() => {
-		if (element) {
-			element.addEventListener<any>('menu:item:clicked', onMenuItemClick);
-
-			element.addEventListener('click', () => {
-				element?.focus();
-			});
-			element.addEventListener('menu:onnavigate', ((
-				event: CustomEvent<{ selectedIndex: number }>
-			) => {
-				if (event?.detail?.selectedIndex) selectedIndex = event.detail.selectedIndex;
-			}) as EventListener);
-		}
-	});
-
-	function onMenuItemClick(e: CustomEvent<any>) {
-		if (onclick) onclick(e.detail, 2);
-	}
-
-	function scrollToElement(target: HTMLElement) {
-		if (target) {
-			const tD = target.getBoundingClientRect();
-			const sD = element?.getBoundingClientRect();
-			if (sD) {
-				if (tD.top - 10 <= sD.top || tD.bottom >= sD.bottom) {
-					target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-				}
-			}
-		}
-	}
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<ul
-	bind:this={element}
-	class:showLastOnSelected
-	class="slotui-menulist {className} {grid ? 'grid' : ''}"
-	tabindex="0"
-	style={`${style};var(--menulist-grid-items-count):${grid ? grid : '0'}`}
-	{role}
-	use:navigation={{ className: 'menulist-item', selectedIndex: -1 }}
-	{...rest}
->
-	{#if menuListItems}
-		{#each menuListItems ?? [] as menuItem, itemIndex}
-			<Slotted child={children} slotArgs={{ item: menuItem, itemIndex, menuItem }}>
-				<MenuListItem {...menuListItemProps} {...menuItem} {itemIndex} />
-			</Slotted>
-		{/each}
-	{:else if data}
-		{#each data as dta, itemIndex}
-			<Slotted child={children} slotArgs={{ item: dta, itemIndex, menuItem: dta }}>
-				<MenuListItem {...menuListItemProps} data={dta} {itemIndex}>
-					{@render menuListItem?.({ item: dta, itemIndex })}
-				</MenuListItem>
-			</Slotted>
-		{/each}
-	{:else}
-		<Slotted child={children} />
-	{/if}
-	{@render listItemBottom?.({ item: {}, itemIndex: -1 })}
-</ul>
-
+<script lang="ts" generics="T= Data">
+	import { navigation } from '../../utils/uses/navigation.js';
+
+	import { setContext } from 'svelte';
+	import type { MenuListProps } from './types.js';
+	import MenuListItem from './MenuListItem.svelte';
+	import { tallPreset, widthPreset, type Data, type ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import Looper from '../../utils/looper/Looper.svelte';
+
+	export const actions = {
+		navigate(e: KeyboardEvent) {
+			element?.dispatchEvent(new CustomEvent('menu:navigate', { detail: e }));
+		},
+		gotoIndex: (idx: number) => {
+			if (element && idx > -1) {
+				element.dispatchEvent(new CustomEvent('menu:gotoIndex', { detail: { index: idx } }));
+				selectedIndex = idx;
+				if (menuStore) menuStore.selectedIndex = idx;
+				const target = element.querySelector('[aria-selected=true]');
+				if (target) {
+					scrollToElement(target as HTMLElement);
+				}
+			}
+		}
+	};
+	let {
+		class: className = '',
+		tall = tallPreset.small,
+		width = widthPreset.full,
+		style,
+		selectorField,
+		role = 'menu',
+		grid,
+		showLastOnSelected = true,
+		presentationField,
+		onclick,
+		data = $bindable(),
+		selectedData = $bindable(),
+		selectedIndex = $bindable(),
+		element = $bindable(),
+		menuListItems = $bindable(),
+		menuListItemProps = $bindable(),
+		children,
+		menuListItem,
+		listItemBottom,
+		...rest
+	}: MenuListProps = $props();
+
+	menuListItemProps = {
+		tall,
+		width,
+		selectorField,
+		presentationField,
+		...menuListItemProps
+	};
+
+	let defaultStoreValues = {
+		menuListItems,
+		menuItemsInstances: [],
+		tall,
+		width,
+		data,
+		selectorField,
+		selectedIndex,
+		actions,
+		presentationField,
+		...menuListItemProps
+	};
+
+	let menuStore = $state(defaultStoreValues);
+	setContext('menuStateContext', menuStore);
+
+	$effect(() => {
+		menuStore.selectedIndex = selectedIndex;
+	});
+	$effect(() => {
+		menuStore.tall = tall;
+	});
+	$effect(() => {
+		if (element) {
+			element.addEventListener<any>('menu:item:clicked', onMenuItemClick);
+
+			element.addEventListener('click', () => {
+				element?.focus();
+			});
+			element.addEventListener('menu:onnavigate', ((
+				event: CustomEvent<{ selectedIndex: number }>
+			) => {
+				if (event?.detail?.selectedIndex) selectedIndex = event.detail.selectedIndex;
+			}) as EventListener);
+		}
+	});
+
+	function onMenuItemClick(e: CustomEvent<any>) {
+		if (onclick) onclick(e.detail, 2);
+	}
+
+	function scrollToElement(target: HTMLElement) {
+		if (target) {
+			const tD = target.getBoundingClientRect();
+			const sD = element?.getBoundingClientRect();
+			if (sD) {
+				if (tD.top - 10 <= sD.top || tD.bottom >= sD.bottom) {
+					target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+				}
+			}
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<ul
+	bind:this={element}
+	class:showLastOnSelected
+	class="slotui-menulist {className} {grid ? 'grid' : ''}"
+	tabindex="0"
+	style={`${style};var(--menulist-grid-items-count):${grid ? grid : '0'}`}
+	{role}
+	use:navigation={{ className: 'menulist-item', selectedIndex: -1 }}
+	{...rest}
+>
+	{#if menuListItems}
+		{#each menuListItems ?? [] as menuItem, itemIndex}
+			<Slotted child={children} slotArgs={{ item: menuItem, itemIndex, menuItem }}>
+				<MenuListItem {...menuListItemProps} {...menuItem} {itemIndex} />
+			</Slotted>
+		{/each}
+	{:else if data}
+		{#each data as dta, itemIndex}
+			<Slotted child={children} slotArgs={{ item: dta, itemIndex, menuItem: dta }}>
+				<MenuListItem {...menuListItemProps} data={dta} {itemIndex}>
+					{@render menuListItem?.({ item: dta, itemIndex })}
+				</MenuListItem>
+			</Slotted>
+		{/each}
+	{:else}
+		<Slotted child={children} />
+	{/if}
+	{@render listItemBottom?.({ item: {}, itemIndex: -1 })}
+</ul>
+
 <style  global>:root {
   --menulist-padding: var(--sld-pad-tiny);
   --menulist-item-padding: 0;
@@ -356,4 +356,4 @@
 }
 :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
   visibility: hidden;
-}</style>
+}</style>