@medyll/idae-slotui-svelte 0.122.0 → 0.123.0

package/dist/ui/menuList/MenuListItem.svelte

@@ -1,136 +1,136 @@
-<script lang="ts" generics="T= Data">
-	import { getContext } from 'svelte';
-
-	import Divider from '../../base/divider/Divider.svelte';
-	import Icon from '../../base/icon/Icon.svelte';
-	import type { MenuListItemProps, MenuListProps } from './types.js';
-	import type { Data, IconObj } from '../../types/index.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-
-	let menuStateContext = getContext<MenuListProps>('menuStateContext');
-
-	let {
-		class: className = '',
-		text,
-		action = undefined,
-		iconFirst = {} as IconObj,
-		iconLast = {} as IconObj,
-		icon,
-		iconColor = undefined,
-		iconSize = 'small',
-		divider = false,
-		dividerBefore = false,
-		presentationField,
-		href,
-		selectable = true,
-		data = $bindable(),
-		selected = $bindable(),
-		element = $bindable(),
-		onMenuItemClick,
-		onclick,
-		itemIndex = undefined,
-		tall = menuStateContext?.tall,
-		width = menuStateContext?.width,
-		children,
-		menuItemFirst,
-		menuItemLast,
-		wrap,
-		role = 'menuitem',
-		tag = 'li',
-		...rest
-	}: MenuListItemProps = $props();
-
-	$effect(() => {
-		if (icon ?? iconFirst?.icon ?? menuItemFirst) {
-			menuStateContext.hasIcon = true;
-		}
-	});
-
-	$effect(() => {
-		if (selected) {
-			menuStateContext.selectedIndex = itemIndex;
-		}
-		element?.addEventListener('click', handleClick);
-	});
-
-	$effect(() => {
-		if (itemIndex === undefined && element?.parentElement) {
-			itemIndex = [
-				...element?.parentElement?.querySelectorAll('.menulist-item:not(.menulist-title)')
-			].indexOf(element);
-		}
-	});
-
-	const handleClick = (event: Event) => {
-		event.stopPropagation();
-		event.stopImmediatePropagation;
-
-		const cevent = new CustomEvent('menu:item:clicked', { detail: data, bubbles: true });
-		if (element) element.dispatchEvent(cevent);
-		// set selectedIndex if we have index
-		// set selected style
-		if (selectable) setSelected();
-		if (onMenuItemClick) onMenuItemClick(data);
-
-		if (onclick) {
-			onclick(data, itemIndex);
-		} else if (menuStateContext?.onclick) {
-			menuStateContext?.onclick(data, itemIndex);
-		}
-	};
-
-	const setSelected = () => {
-		menuStateContext.selectedIndex = itemIndex;
-		menuStateContext.selectedData = data;
-	};
-</script>
-
-{#if dividerBefore}
-	<li role="separator">
-		<Divider tall="small" expansion="centered" />
-	</li>
-{/if}
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<svelte:element
-	this={href ? 'a' : tag}
-	class="menulist-item {className}" 
-	aria-selected={selectable ? menuStateContext?.selectedIndex === itemIndex : false}
-	bind:this={element}
-	tabindex="-1"
-	{...rest}
-	{role}
-	tall={menuStateContext?.tall ?? tall}
-	width={menuStateContext?.width ?? width}
-	{href}
->{menuStateContext.hasIcon}
-	{#if icon && iconFirst && menuStateContext?.hasIcon}
-		<div class="menulist-item-icon">
-			<Slotted child={menuItemFirst}>
-				<Icon {icon} ico={iconFirst} color={iconColor} {iconSize} />
-			</Slotted>
-		</div>
-	{/if}
-	<div class="menulist-item-text" class:wrap>
-		<Slotted child={children} slotArgs={data}>
-			{data?.[presentationField] ?? text}
-		</Slotted>
-	</div>
-	{#if menuItemLast || action || iconLast}
-		<div class="menulist-item-action">
-			<Slotted child={menuItemLast}>
-				<Icon ico={iconLast} />
-				{action}
-			</Slotted>
-		</div>
-	{/if}
-</svelte:element>
-{#if divider}
-	<li role="separator">
-		<Divider expansion="padded" />
-	</li>
-{/if}
-
+<script lang="ts" generics="T= Data">
+	import { getContext } from 'svelte';
+
+	import Divider from '../../base/divider/Divider.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { MenuListItemProps, MenuListProps } from './types.js';
+	import type { Data, IconObj } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	let menuStateContext = getContext<MenuListProps>('menuStateContext');
+
+	let {
+		class: className = '',
+		text,
+		action = undefined,
+		iconFirst = {} as IconObj,
+		iconLast = {} as IconObj,
+		icon,
+		iconColor = undefined,
+		iconSize = 'small',
+		divider = false,
+		dividerBefore = false,
+		presentationField,
+		href,
+		selectable = true,
+		data = $bindable(),
+		selected = $bindable(),
+		element = $bindable(),
+		onMenuItemClick,
+		onclick,
+		itemIndex = undefined,
+		tall = menuStateContext?.tall,
+		width = menuStateContext?.width,
+		children,
+		menuItemFirst,
+		menuItemLast,
+		wrap,
+		role = 'menuitem',
+		tag = 'li',
+		...rest
+	}: MenuListItemProps = $props();
+
+	$effect(() => {
+		if (icon ?? iconFirst?.icon ?? menuItemFirst) {
+			menuStateContext.hasIcon = true;
+		}
+	});
+
+	$effect(() => {
+		if (selected) {
+			menuStateContext.selectedIndex = itemIndex;
+		}
+		element?.addEventListener('click', handleClick);
+	});
+
+	$effect(() => {
+		if (itemIndex === undefined && element?.parentElement) {
+			itemIndex = [
+				...element?.parentElement?.querySelectorAll('.menulist-item:not(.menulist-title)')
+			].indexOf(element);
+		}
+	});
+
+	const handleClick = (event: Event) => {
+		event.stopPropagation();
+		event.stopImmediatePropagation;
+
+		const cevent = new CustomEvent('menu:item:clicked', { detail: data, bubbles: true });
+		if (element) element.dispatchEvent(cevent);
+		// set selectedIndex if we have index
+		// set selected style
+		if (selectable) setSelected();
+		if (onMenuItemClick) onMenuItemClick(data);
+
+		if (onclick) {
+			onclick(data, itemIndex);
+		} else if (menuStateContext?.onclick) {
+			menuStateContext?.onclick(data, itemIndex);
+		}
+	};
+
+	const setSelected = () => {
+		menuStateContext.selectedIndex = itemIndex;
+		menuStateContext.selectedData = data;
+	};
+</script>
+
+{#if dividerBefore}
+	<li role="separator">
+		<Divider tall="small" expansion="centered" />
+	</li>
+{/if}
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<svelte:element
+	this={href ? 'a' : tag}
+	class="menulist-item {className}" 
+	aria-selected={selectable ? menuStateContext?.selectedIndex === itemIndex : false}
+	bind:this={element}
+	tabindex="-1"
+	{...rest}
+	{role}
+	tall={menuStateContext?.tall ?? tall}
+	width={menuStateContext?.width ?? width}
+	{href}
+>{menuStateContext.hasIcon}
+	{#if icon && iconFirst && menuStateContext?.hasIcon}
+		<div class="menulist-item-icon">
+			<Slotted child={menuItemFirst}>
+				<Icon {icon} ico={iconFirst} color={iconColor} {iconSize} />
+			</Slotted>
+		</div>
+	{/if}
+	<div class="menulist-item-text" class:wrap>
+		<Slotted child={children} slotArgs={data}>
+			{data?.[presentationField] ?? text}
+		</Slotted>
+	</div>
+	{#if menuItemLast || action || iconLast}
+		<div class="menulist-item-action">
+			<Slotted child={menuItemLast}>
+				<Icon ico={iconLast} />
+				{action}
+			</Slotted>
+		</div>
+	{/if}
+</svelte:element>
+{#if divider}
+	<li role="separator">
+		<Divider expansion="padded" />
+	</li>
+{/if}
+
 <style global>:root {
   --menulist-padding: var(--sld-pad-tiny);
   --menulist-item-padding: 0;
@@ -347,4 +347,4 @@
 }
 :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
   visibility: hidden;
-}</style>
+}</style>

package/dist/ui/menuList/MenuListTitle.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-	import MenuListItem from './MenuListItem.svelte';
-	import type { MenuListItemProps } from './types.js';
-
-	let { class: className, ...rest }: MenuListItemProps = $props();
-</script>
-
-<MenuListItem {...rest} selectable={false} class="slotui-menulist-title {className}" />
-
+<script lang="ts">
+	import MenuListItem from './MenuListItem.svelte';
+	import type { MenuListItemProps } from './types.js';
+
+	let { class: className, ...rest }: MenuListItemProps = $props();
+</script>
+
+<MenuListItem {...rest} selectable={false} class="slotui-menulist-title {className}" />
+
 <style>:root {
   --menulist-padding: var(--sld-pad-tiny);
   --menulist-item-padding: 0;
@@ -223,4 +223,4 @@
 }
 :global(ul.menuList.showLastOnSelected) :global(a.menulist-item .menulist-item-action) {
   visibility: hidden;
-}</style>
+}</style>

package/dist/ui/menuList/menu-list.scss

@@ -1,120 +1,120 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-  --menulist-padding: var(--sld-pad-tiny);
-  --menulist-item-padding: 0;
-  --menulist-item-radius: var(--sld-radius-small);
-  --menulist-item-selected-background: var(--sld-selected-background-color);
-  --menulist-item-action-display: flex;
-  --menulist-item-action-justify-content: center;
-  --menulist-grid-items-count: 0;
-}
-
-:global(.slotui-menulist) {
-  & {
-    margin: 0;
-    cursor: pointer;
-
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-    padding: var(--menulist-padding);
-  }
-
-  &.grid {
-    display: grid;
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr)
-    );
-  }
-
-  li,
-  a {
-    &.menulist-title {
-      font-weight: bold;
-    }
-  }
-}
-
-:global(.menulist-item) {
-  @include slotui-mixins.ui-variants;
-  @include slotui-mixins.ui-width-presets;
-  @include slotui-mixins.ui-tall-presets;
-  @include slotui-mixins.ui-gutter-presets;
-  @include slotui-mixins.data-hover;
-  @include slotui-mixins.data-selected;
-
-  & {
-    text-decoration: none;
-    overflow: hidden;
-
-    display: flex;
-    align-items: center;
-    position: relative;
-    width: 100%;
-    max-width: 100%;
-
-    border: 1px solid transparent;
-    border-radius: var(--menulist-item-radius);
-    align-self: flex-start;
-  }
-  //
-
-  &::before {
-    position: absolute;
-    min-height: 16px;
-    height: 45%;
-    width: 2px;
-    overflow: hidden;
-    max-width: 3px;
-    background-color: transparent;
-    border-radius: var(--sld-radius-med);
-    left: 0px;
-    border: 1px solid transparent;
-    content: " ";
-  }
-
-  .menulist-item-icon {
-    width: 16px;
-    max-width: 16px;
-    text-align: center;
-    overflow: hidden;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    padding: 0 0.2rem;
-  }
-
-  .menulist-item-text {
-    flex: 1;
-    &.wrap {
-      text-wrap: ellipsis;
-      white-space: normal;
-      overflow: hidden;
-    }
-    svg {
-      display: inline-block;
-    }
-  }
-
-  .menulist-item-action {
-    display: var(--menulist-item-action-display);
-    justify-content: var(--menulist-item-action-justify-content);
-  }
-}
-
-:global(ul.menuList.showLastOnSelected) {
-  :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
-    visibility: visible;
-  }
-  :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
-    visibility: visible;
-  }
-  :global(li.menulist-item .menulist-item-action) {
-    visibility: hidden;
-  }
-  :global(a.menulist-item .menulist-item-action) {
-    visibility: hidden;
-  }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+  --menulist-padding: var(--sld-pad-tiny);
+  --menulist-item-padding: 0;
+  --menulist-item-radius: var(--sld-radius-small);
+  --menulist-item-selected-background: var(--sld-selected-background-color);
+  --menulist-item-action-display: flex;
+  --menulist-item-action-justify-content: center;
+  --menulist-grid-items-count: 0;
+}
+
+:global(.slotui-menulist) {
+  & {
+    margin: 0;
+    cursor: pointer;
+
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    padding: var(--menulist-padding);
+  }
+
+  &.grid {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(max(var(--grid-item-min-width), 100% / var(--grid-items-count)), 1fr)
+    );
+  }
+
+  li,
+  a {
+    &.menulist-title {
+      font-weight: bold;
+    }
+  }
+}
+
+:global(.menulist-item) {
+  @include slotui-mixins.ui-variants;
+  @include slotui-mixins.ui-width-presets;
+  @include slotui-mixins.ui-tall-presets;
+  @include slotui-mixins.ui-gutter-presets;
+  @include slotui-mixins.data-hover;
+  @include slotui-mixins.data-selected;
+
+  & {
+    text-decoration: none;
+    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+
+    border: 1px solid transparent;
+    border-radius: var(--menulist-item-radius);
+    align-self: flex-start;
+  }
+  //
+
+  &::before {
+    position: absolute;
+    min-height: 16px;
+    height: 45%;
+    width: 2px;
+    overflow: hidden;
+    max-width: 3px;
+    background-color: transparent;
+    border-radius: var(--sld-radius-med);
+    left: 0px;
+    border: 1px solid transparent;
+    content: " ";
+  }
+
+  .menulist-item-icon {
+    width: 16px;
+    max-width: 16px;
+    text-align: center;
+    overflow: hidden;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    padding: 0 0.2rem;
+  }
+
+  .menulist-item-text {
+    flex: 1;
+    &.wrap {
+      text-wrap: ellipsis;
+      white-space: normal;
+      overflow: hidden;
+    }
+    svg {
+      display: inline-block;
+    }
+  }
+
+  .menulist-item-action {
+    display: var(--menulist-item-action-display);
+    justify-content: var(--menulist-item-action-justify-content);
+  }
+}
+
+:global(ul.menuList.showLastOnSelected) {
+  :global(li.menulist-item[aria-selected="true"] .menulist-item-action) {
+    visibility: visible;
+  }
+  :global(a.menulist-item[aria-selected="true"] .menulist-item-action) {
+    visibility: visible;
+  }
+  :global(li.menulist-item .menulist-item-action) {
+    visibility: hidden;
+  }
+  :global(a.menulist-item .menulist-item-action) {
+    visibility: hidden;
+  }
+}