@medyll/idae-slotui-svelte 0.26.0 → 0.28.0

package/dist/ui/menuList/MenuList.svelte

@@ -1,99 +1,112 @@
-<script lang="ts" generics="T= Data">import { navigation } from "../../utils/uses/navigation.js";
-import { setContext } from "svelte";
-import MenuListItem from "./MenuListItem.svelte";
-import { tallPreset, widthPreset } from "../../types/index.js";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import Looper from "../../utils/looper/Looper.svelte";
-export const actions = {
-  navigate(e) {
-    element?.dispatchEvent(new CustomEvent("menu:navigate", { detail: e }));
-  },
-  gotoIndex: (idx) => {
-    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);
-      }
-    }
-  }
-};
-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
-} = $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("menu:item:clicked", onMenuItemClick);
-    element.addEventListener("click", () => {
-      element?.focus();
-    });
-    element.addEventListener("menu:onnavigate", (event) => {
-      if (event?.detail?.selectedIndex) selectedIndex = event.detail.selectedIndex;
-    });
-  }
-});
-function onMenuItemClick(e) {
-  if (onclick) onclick(e.detail, 2);
-}
-function scrollToElement(target) {
-  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 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 -->

package/dist/ui/menuList/MenuListItem.svelte

@@ -1,73 +1,88 @@
-<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 Slotted from "../../utils/slotted/Slotted.svelte";
-let menuStateContext = getContext("menuStateContext");
-let {
-  class: className = "",
-  text,
-  action = void 0,
-  iconFirst = {},
-  iconLast = {},
-  icon,
-  iconColor = void 0,
-  iconSize = "small",
-  divider = false,
-  dividerBefore = false,
-  presentationField,
-  href,
-  selectable = true,
-  data = $bindable(),
-  selected = $bindable(),
-  element = $bindable(),
-  onMenuItemClick,
-  onclick,
-  itemIndex = void 0,
-  tall = menuStateContext?.tall,
-  width = menuStateContext?.width,
-  children,
-  menuItemFirst,
-  menuItemLast,
-  wrap,
-  role = "menuitem",
-  tag = "li",
-  ...rest
-} = $props();
-$effect(() => {
-  if (icon ?? iconFirst?.icon ?? menuItemFirst) {
-    menuStateContext.hasIcon = true;
-  }
-});
-$effect(() => {
-  if (selected) {
-    menuStateContext.selectedIndex = itemIndex;
-  }
-  element?.addEventListener("click", handleClick);
-});
-$effect(() => {
-  if (itemIndex === void 0 && element?.parentElement) {
-    itemIndex = [
-      ...element?.parentElement?.querySelectorAll(".menu-list-item:not(.menu-list-title)")
-    ].indexOf(element);
-  }
-});
-const handleClick = (event) => {
-  event.stopPropagation();
-  event.stopImmediatePropagation;
-  const cevent = new CustomEvent("menu:item:clicked", { detail: data, bubbles: true });
-  if (element) element.dispatchEvent(cevent);
-  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 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('.menu-list-item:not(.menu-list-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}

package/dist/ui/menuList/MenuListTitle.svelte

@@ -1,5 +1,8 @@
-<script lang="ts">import MenuListItem from "./MenuListItem.svelte";
-let { class: className, ...rest } = $props();
+<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="menu-list-title {className}" />

package/dist/ui/panel/Panel.demo.svelte

@@ -1,30 +1,38 @@
-<script lang="ts">import Paneler from "./Paneler.svelte";
-import PanelSlide from "./PanelSlide.svelte";
-import Panel from "./Panel.svelte";
-import PanelGrid from "./PanelGrid.svelte";
-import { defaultsArgs } from "../../base/demoer/demoer.utils.js";
-import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-let parametersSlot = {
-  isOpen: {
-    type: "boolean",
-    values: [true, false]
-  }
-};
-$: componentArgsSlot = {
-  ...defaultsArgs(parametersSlot),
-  onClose: () => {
-    componentArgsSlot.open = !componentArgsSlot.open;
-  },
-  data: [
-    { id: 1, name: "name" },
-    { id: 2, name: "name" },
-    { id: 3, name: "name" },
-    { id: 4, name: "name" }
-  ]
-};
-let codeSlot = `
+<script lang="ts">
+	import Paneler from './Paneler.svelte';
+	import PanelSlide from './PanelSlide.svelte';
+	import Panel from './Panel.svelte';
+	import PanelGrid from './PanelGrid.svelte';
+
+	/* demo */
+	import { defaultsArgs } from '../../base/demoer/demoer.utils.js';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	/* demo */
+
+	let parametersSlot: any = {
+		isOpen: {
+			type: 'boolean',
+			values: [true, false]
+		}
+	};
+
+	$: componentArgsSlot = {
+		...defaultsArgs(parametersSlot),
+		onClose: () => {
+			componentArgsSlot.open = !componentArgsSlot.open;
+		},
+		data: [
+			{ id: 1, name: 'name' },
+			{ id: 2, name: 'name' },
+			{ id: 3, name: 'name' },
+			{ id: 4, name: 'name' }
+		]
+	};
+
+	//
+	let codeSlot = `
 <script>
   import Paneler from "./Paneler.svelte"; 
   import PanelSlide from "./PanelSlide.svelte"; 
@@ -72,7 +80,8 @@ let codeSlot = `
   </PanelSlide> 
 </Paneler>
 `;
-let codeProps = `
+
+	let codeProps = `
     <Button
         onclick={() => {
             openWindow("html", {

package/dist/ui/panel/Panel.svelte

@@ -1,37 +1,47 @@
-<script lang="ts" generics="T=Data">import { run } from "svelte/legacy";
-import { onMount, getContext } from "svelte";
-import Button from "../../controls/button/Button.svelte";
-let {
-  title = "not set",
-  panelId = crypto.randomUUID(),
-  data = void 0,
-  showNavigation = true,
-  panelButtonPrevious,
-  panelButtonNext,
-  children
-} = $props();
-export const actions = {
-  load: (args) => {
-  }
-};
-let ref = $state(void 0);
-let panelSlideId = getContext("PanelSlide");
-let panelerContext = getContext("Paneler");
-let currentIdx = $state(), hasNext = $state(), hasPrev = $state();
-$effect(() => {
-  if ($panelerContext.panelSlides) {
-    currentIdx = Object.keys($panelerContext.panelSlides).indexOf(panelSlideId);
-    hasNext = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx + 1]);
-    hasPrev = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx - 1]);
-  }
-});
-function prevNextPanel(page) {
-  const event = new CustomEvent("panel:button:clicked", {
-    detail: { panelId, page, data },
-    bubbles: true
-  });
-  ref?.dispatchEvent(event);
-}
+<script lang="ts" generics="T=Data">
+	import { run } from 'svelte/legacy';
+
+	import { onMount, getContext } from 'svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import type { PanelContextType, PanelProps } from './types.js';
+	import type { Data } from '../../types/index.js';
+
+	let {
+		title = 'not set',
+		panelId = crypto.randomUUID() as string,
+		data = undefined,
+		showNavigation = true,
+		panelButtonPrevious,
+		panelButtonNext,
+		children
+	}: PanelProps<T> = $props();
+	export const actions = {
+		load: (args: any) => {}
+	};
+
+	let ref: HTMLDivElement | undefined = $state(undefined);
+	let panelSlideId = getContext<string>('PanelSlide');
+	let panelerContext = getContext<PanelContextType>('Paneler');
+
+	let currentIdx = $state(),
+		hasNext = $state(),
+		hasPrev = $state();
+
+	$effect(() => {
+		if ($panelerContext.panelSlides) {
+			currentIdx = Object.keys($panelerContext.panelSlides).indexOf(panelSlideId);
+			hasNext = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx + 1]);
+			hasPrev = Boolean(Object.keys($panelerContext.panelSlides)[currentIdx - 1]);
+		}
+	});
+
+	function prevNextPanel(page: 'next' | 'prev') {
+		const event = new CustomEvent('panel:button:clicked', {
+			detail: { panelId, page, data },
+			bubbles: true
+		});
+		ref?.dispatchEvent(event);
+	}
 </script>
 
 <div class="panel" bind:this={ref}>

package/dist/ui/panel/PanelGrid.svelte

@@ -1,17 +1,21 @@
-<script lang="ts">import Button from "../../controls/button/Button.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import { fade } from "svelte/transition";
-let {
-  class: className = "",
-  element = $bindable(),
-  style = "",
-  data = [],
-  columns = 3,
-  isExpanded = $bindable(false),
-  children,
-  panelGridZoom,
-  ...rest
-} = $props();
+<script lang="ts">
+	import Button from '../../controls/button/Button.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	import { fade } from 'svelte/transition';
+	import type { PanelGridProps } from './types.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		data = [],
+		columns = 3,
+		isExpanded = $bindable(false),
+		children,
+		panelGridZoom,
+		...rest
+	}: PanelGridProps = $props();
 </script>
 
 {#if data}