@medyll/idae-slotui-svelte 0.67.0 → 0.69.0

package/dist/base/divider/Divider.svelte

@@ -1,44 +1,61 @@
-<script lang="ts">import { uiPresets } from "../../utils/engine/presets.js";
-let {
-  class: className = "",
-  style,
-  element = null,
-  dense: density = "default",
-  orientation: direction = "horizontal",
-  expansion = "full",
-  shadowed: shadow = false,
-  color
-} = $props();
-let extensionClass = {
-  horizontal: {
-    full: "",
-    padded: "marg-ii-12",
-    centered: "marg-ii-6"
-  },
-  vertical: {
-    full: "",
-    padded: "marg-ii-12",
-    centered: "marg-ii-6"
-  }
-};
-let addStyle = style ?? "";
-const shadowClass = $derived(shadow ? "shad-3" : "");
-if (color) addStyle += `--sld-color-border:${color};`;
-if (direction === "vertical" && (element?.nextElementSibling ?? element?.previousElementSibling)) {
-  let maxHeight = (element?.previousElementSibling ?? element?.nextElementSibling)?.getBoundingClientRect()?.height;
-  addStyle += `height:calc(${maxHeight}px - ${getDensity(density)});`;
-}
-function getDensity(density2) {
-  return uiPresets.density?.[density2];
-}
-switch (direction) {
-  case "horizontal":
-    addStyle += `margin-top:${getDensity(density)};margin-bottom:${getDensity(density)};`;
-    break;
-  case "vertical":
-    addStyle += `margin-left:${getDensity(density)};margin-right:${getDensity(density)};`;
-    break;
-}
+<script lang="ts">
+	/** extends button */
+	import type { ElementProps, ExpandProps } from '../../types/index.js';
+	import { uiPresets } from '../../utils/engine/presets.js';
+	import type { DividerProps } from './types.js';
+	let {
+		class: className = '',
+		style,
+		element = null,
+		dense: density = 'default',
+		orientation: direction = 'horizontal',
+		expansion = 'full',
+		shadowed: shadow = false,
+		color
+	}: ExpandProps<DividerProps> = $props();
+
+	let extensionClass = {
+		horizontal: {
+			full: '',
+			padded: 'marg-ii-12',
+			centered: 'marg-ii-6'
+		},
+		vertical: {
+			full: '',
+			padded: 'marg-ii-12',
+			centered: 'marg-ii-6'
+		}
+	};
+	let addStyle: string = (style as unknown as string) ?? ('' as unknown as string);
+
+	const shadowClass = $derived(shadow ? 'shad-3' : '');
+
+	if (color) addStyle += `--sld-color-border:${color};`;
+
+	// set height od divider when direction === vertical in a flex env
+	if (
+		direction === 'vertical' &&
+		(element?.nextElementSibling ?? element?.previousElementSibling)
+	) {
+		let maxHeight = (
+			element?.previousElementSibling ?? element?.nextElementSibling
+		)?.getBoundingClientRect()?.height;
+
+		addStyle += `height:calc(${maxHeight}px - ${getDensity(density)});`;
+	}
+
+	function getDensity(density: ElementProps['density']) {
+		return uiPresets.density?.[density];
+	}
+
+	switch (direction) {
+		case 'horizontal':
+			addStyle += `margin-top:${getDensity(density)};margin-bottom:${getDensity(density)};`;
+			break;
+		case 'vertical':
+			addStyle += `margin-left:${getDensity(density)};margin-right:${getDensity(density)};`;
+			break;
+	}
 </script>
 
 <hr

package/dist/base/icon/Icon.demo.svelte

@@ -1,8 +1,11 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import { DemoPage, Demoer } from "../../index.js";
-import Icon from "./Icon.svelte";
-import { parameters, componentArgs } from "./types.js";
-let code = `
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import { DemoPage, Demoer } from '../../index.js';
+	import Icon from './Icon.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code = `
 <Icon>
     mdi:tree
 </Icon>`;

package/dist/base/icon/Icon.svelte

@@ -1,30 +1,39 @@
-<script lang="ts">import { iconFontSize } from "../../types/index.js";
-import Iconify from "@iconify/svelte";
-let {
-  icon = $bindable("question"),
-  class: className,
-  style,
-  element = $bindable(),
-  iconSize = $bindable(),
-  rotate = false,
-  color = $bindable(),
-  rotation = 0,
-  ico,
-  ...rest
-} = $props();
-iconSize = iconSize || "small";
-const sizes = iconFontSize;
-let finalI = $derived(ico?.icon ?? (typeof icon === "object" ? icon.icon : icon));
-let finRot = $derived(ico?.rotate ?? (typeof icon === "object" ? icon.rotate : rotate));
-let finRotation = $derived(
-  ico?.rotation ?? (typeof icon === "object" ? icon.rotation : rotation)
-);
-let finCol = $derived(ico?.color ?? (typeof icon === "object" ? icon.color : color));
-let finSize = $derived(ico?.iconSize ?? (typeof icon === "object" ? iconSize : iconSize));
-let iconName = $derived(finalI.includes(":") ? finalI : `mdi:${finalI}`);
-let finalStyle = $derived(
-  `display:block;font-size:${sizes[finSize]};color:${finCol};transform: rotate(${finRotation}deg);${style};`
-);
+<script lang="ts">
+	import { iconFontSize, type ElementProps, type ExpandProps } from '../../types/index.js';
+	import type { IconAppProps } from './types.js';
+	import Iconify from '@iconify/svelte';
+
+	let {
+		icon = $bindable('question'),
+		class: className,
+		style,
+		element = $bindable<HTMLDivElement>(),
+		iconSize = $bindable(),
+		rotate = false,
+		color = $bindable(),
+		rotation = 0,
+		ico,
+		display = 'inline-block',
+		...rest
+	}: ExpandProps<IconAppProps> = $props();
+
+	iconSize = iconSize || 'small';
+
+	const sizes: Record<ElementProps['iconSize'], string> = iconFontSize;
+
+	let finalI = $derived(ico?.icon ?? (typeof icon === 'object' ? icon.icon : icon));
+	let finRot = $derived(ico?.rotate ?? (typeof icon === 'object' ? icon.rotate : rotate));
+	let finRotation = $derived(
+		ico?.rotation ?? (typeof icon === 'object' ? icon.rotation : rotation)
+	);
+	let finCol = $derived(ico?.color ?? (typeof icon === 'object' ? icon.color : color));
+	let finSize = $derived(ico?.iconSize ?? (typeof icon === 'object' ? iconSize : iconSize));
+	let iconName = $derived(finalI.includes(':') ? finalI : `mdi:${finalI}`);
+
+	let finalStyle = $derived(
+		`display:${display};font-size:${sizes[finSize]};color:${finCol};transform: rotate(${finRotation}deg);${style};`
+	);
+ 
 </script>
 
 {#key [icon, iconName, color, finalStyle]}

package/dist/base/icon/Icon.svelte.d.ts

@@ -9,6 +9,7 @@ declare const Icon: import("svelte").Component<{
     rotate?: boolean | undefined;
     color?: string | undefined;
     rotation?: number | undefined;
+    display: "block" | "inline-block" | "inline";
 }, {}, "icon" | "iconSize" | "element" | "color">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/base/icon/types.d.ts

@@ -1,24 +1,59 @@
 import type { ElementProps, IconObj } from "../../types/index.js";
 import type { DemoerStoryProps } from "../demoer/types.js";
+/**
+ * Properties for the IconApp component.
+ */
 export type IconAppProps = {
-    /** icon name for iconify  */
+    /**
+     * Icon name for Iconify.
+     * @param icon
+     */
     icon?: ElementProps["icon"];
-    /** className off the root component */
+    /**
+     * Class name of the root component.
+     * @param class
+     */
     class?: string;
-    /** css style off the root component */
+    /**
+     * CSS style of the root component.
+     * @param style
+     */
     style?: string;
-    /** element root HTMLDivElement props */
+    /**
+     * Root HTMLDivElement properties.
+     * @param element
+     */
     element?: HTMLDivElement | null | any;
-    /** icon object for iconify, replace and invalidate props.icon  */
+    /**
+     * Icon object for Iconify, replaces and invalidates `icon` prop.
+     * @param ico
+     */
     ico?: IconObj;
-    /**  icon size 	 */
+    /**
+     * Icon size.
+     * @param iconSize
+     */
     iconSize?: ElementProps["iconSize"];
-    /** rotate icon */
+    /**
+     * Rotate icon.
+     * @param rotate
+     */
     rotate?: boolean;
-    /** icon color */
+    /**
+     * Icon color.
+     * @param color
+     */
     color?: string;
-    /** icon rotation */
+    /**
+     * Icon rotation.
+     * @param rotation
+     */
     rotation?: number;
+    /**
+     * Display property for the icon.
+     * @param display
+     */
+    display: "block" | "inline-block" | "inline";
 };
 export declare const iconAppDemoValues: DemoerStoryProps<IconAppProps>;
 export declare let parameters: DemoerStoryProps<IconAppProps>, componentArgs: IconAppProps;

package/dist/base/paper/Paper.demo.svelte

@@ -1,12 +1,15 @@
-<script lang="ts">import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import { defaultsArgs } from "../demoer/demoer.utils.js";
-import Paper from "./Paper.svelte";
-import { paperDemoValues } from "./type.js";
-let parameters = paperDemoValues;
-let componentArgs = defaultsArgs(parameters);
-let code = `
+<script lang="ts">
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import Paper from './Paper.svelte';
+	import { paperDemoValues, type PaperProps } from './type.js';
+
+	let parameters = paperDemoValues;
+	let componentArgs = defaultsArgs(parameters);
+
+	let code = `
 <Paper elevation="2" style="height:350px;width:250px" >
     paper content
 </Paper>`;

package/dist/base/paper/Paper.svelte

@@ -1,12 +1,16 @@
-<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  class: className = "",
-  style,
-  element = $bindable(),
-  children,
-  elevation = 0,
-  ...rest
-} = $props();
+<script lang="ts">
+	import type { ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { PaperProps } from './type.js';
+
+	let {
+		class: className = '',
+		style,
+		element = $bindable(),
+		children,
+		elevation = 0,
+		...rest
+	}: ExpandProps<PaperProps> = $props();
 </script>
 
 <div bind:this={element} class="paper {className} elevation-{elevation}" {style} {...rest}>

package/dist/base/titleBar/TitleBar.demo.svelte

@@ -1,12 +1,14 @@
-<script lang="ts">import { titleBarDemoValues } from "./types.js";
-import { defaultsArgs } from "../demoer/demoer.utils.js";
-import ComponentDemo from "../demoer/DemoerComponent.svelte";
-import DemoPage from "../demoer/DemoPage.svelte";
-import Demoer from "../demoer/Demoer.svelte";
-import TitleBar from "./TitleBar.svelte";
-let parameters = titleBarDemoValues;
-let componentArgs = defaultsArgs(parameters);
-let code = `
+<script lang="ts">
+	import { titleBarDemoValues } from './types.js';
+	import { defaultsArgs } from '../demoer/demoer.utils.js';
+	import ComponentDemo from '../demoer/DemoerComponent.svelte';
+	import DemoPage from '../demoer/DemoPage.svelte';
+	import Demoer from '../demoer/Demoer.svelte';
+	import TitleBar from './TitleBar.svelte';
+	let parameters = titleBarDemoValues;
+	let componentArgs = defaultsArgs(parameters);
+
+	let code = `
     <TitleBar {...activeParams} class="marg-tb-1">
         {#snippet titleBarIcon()}
             <Icon fontSize="small" icon="circle" />

package/dist/base/titleBar/TitleBar.svelte

@@ -1,15 +1,19 @@
-<script lang="ts">import Icon from "../icon/Icon.svelte";
-import Button from "../../controls/button/Button.svelte";
-import IconButton from "../../controls/button/IconButton.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  onClose,
-  hasMenu = false,
-  icon,
-  title,
-  titleBarIcon,
-  titleBarTitle
-} = $props();
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import IconButton from '../../controls/button/IconButton.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { TitleBarProps } from './types.js';
+
+	let {
+		onClose,
+		hasMenu = false,
+		icon,
+		title,
+		titleBarIcon,
+		titleBarTitle
+	}: ExpandProps<TitleBarProps> = $props();
 </script>
 
 <div class="title-bar">

package/dist/controls/autocomplete/AutoComplete.demo.svelte

@@ -1,18 +1,22 @@
-<script lang="ts">import AutoComplete from "./AutoComplete.svelte";
-import MenuItem from "../../ui/menu/MenuItem.svelte";
-import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-import { parameters, componentArgs } from "./types.js";
-let data = [
-  { id: 1, name: "Wanda", surname: "Wand", lastname: "Groot", age: 23 },
-  { id: 2, name: "John", surname: "Jo", lastname: "Doe", age: 33 },
-  { id: 3, name: "Jane", surname: "Jay", lastname: "Doe", age: 43 },
-  { id: 4, name: "Peter", surname: "Piotr", lastname: "Parker", age: 53 },
-  { id: 5, name: "Mary", surname: "Ma", lastname: "Jane", age: 63 },
-  { id: 6, name: "Bruce", surname: "Banner", lastname: "Wayne", age: 73 }
-];
-let codeSlot = `
+<script lang="ts">
+	import AutoComplete from './AutoComplete.svelte';
+	import MenuItem from '../../ui/menu/MenuItem.svelte';
+
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import { parameters, componentArgs } from './types.js';
+
+	let data = [
+		{ id: 1, name: 'Wanda', surname: 'Wand', lastname: 'Groot', age: 23 },
+		{ id: 2, name: 'John', surname: 'Jo', lastname: 'Doe', age: 33 },
+		{ id: 3, name: 'Jane', surname: 'Jay', lastname: 'Doe', age: 43 },
+		{ id: 4, name: 'Peter', surname: 'Piotr', lastname: 'Parker', age: 53 },
+		{ id: 5, name: 'Mary', surname: 'Ma', lastname: 'Jane', age: 63 },
+		{ id: 6, name: 'Bruce', surname: 'Banner', lastname: 'Wayne', age: 73 }
+	];
+
+	let codeSlot = `
 <AutoComplete 
 	class="marg-b"
 	placeholder="Search in list"
@@ -28,7 +32,8 @@ let codeSlot = `
 		<div class="pad">No results found</div>
 	{/snippet}
 </AutoComplete>`;
-let codeProps = `
+
+	let codeProps = `
 <AutoComplete
   let:menuItemData
   {data}

package/dist/controls/autocomplete/AutoComplete.svelte

@@ -1,65 +1,84 @@
-<script lang="ts" generics="T">import TextField from "../textfield/TextField.svelte";
-import { dataOp } from "../../utils/engine/utils.js";
-import Popper from "../../ui/popper/Popper.svelte";
-import MenuList from "../../ui/menuList/MenuList.svelte";
-import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let {
-  class: className = "",
-  element = $bindable(),
-  data = $bindable([]),
-  searchField = "*",
-  dataFieldName,
-  mode = "partial",
-  filteredData = $bindable(data),
-  selectedIndex = $bindable(-1),
-  onchange = (args) => {
-  },
-  showAllOnEmpty = true,
-  children,
-  autoCompleteEmpty,
-  autoCompleteNoResults,
-  ...rest
-} = $props();
-let searchString = $state(void 0);
-let menuHTML = $state(null);
-let popperHTML = $state(void 0);
-let popperOpen = $state(false);
-let menuRef;
-let childs = children;
-$effect(() => {
-  element?.addEventListener("keypress", (e) => {
-    preNavigate(e);
-  });
-});
-$effect(() => {
-  filteredData = !searchString ? showAllOnEmpty ? data : [] : doFind(data, searchString, searchField);
-});
-const doFind = (list, kw, field) => {
-  let results;
-  if (!kw) {
-    results = data;
-  } else {
-    results = mode === "exact" ? dataOp.filterList(list, kw, field) : dataOp.searchList(list, kw, field);
-  }
-  return results;
-};
-async function preNavigate(e) {
-  if (e.keyCode === 13) {
-    e.preventDefault();
-    onSelect(filteredData[selectedIndex], selectedIndex);
-    return;
-  }
-}
-function onSelect(filteredData2, index) {
-  searchString = getFieldName(filteredData2, dataFieldName);
-  if (onchange) onchange(filteredData2);
-}
-function getFieldName(data2, fieldName) {
-  let field = Array.isArray(fieldName) ? fieldName : [fieldName];
-  return data2 ? field.map((field2) => data2[field2]).join(" ") : "";
-}
+<script lang="ts" generics="T">
+	import type { AutoCompleteProps } from './types.js';
+
+	import TextField from '../textfield/TextField.svelte';
+	import { dataOp } from '../../utils/engine/utils.js';
+	import Popper from '../../ui/popper/Popper.svelte';
+	import MenuList from '../../ui/menuList/MenuList.svelte';
+	import MenuListItem from '../../ui/menuList/MenuListItem.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { Data, ExpandProps } from '../../types/index.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		data = $bindable([]),
+		searchField = '*',
+		dataFieldName,
+		mode = 'partial',
+		filteredData = $bindable<T[]>(data),
+		selectedIndex = $bindable(-1),
+		onchange = (args) => {},
+		showAllOnEmpty = true,
+		children,
+		autoCompleteEmpty,
+		autoCompleteNoResults,
+		...rest
+	}: ExpandProps<AutoCompleteProps<T>> & Partial<Omit<HTMLInputElement, 'style'>> = $props();
+
+	let searchString: string | undefined = $state(undefined);
+	let menuHTML: HTMLElement | null = $state(null);
+	let popperHTML: HTMLElement | undefined = $state(undefined);
+	let popperOpen: boolean = $state(false);
+
+	let menuRef: MenuList<T>;
+
+	let childs = children;
+
+	$effect(() => {
+		element?.addEventListener('keypress', ((e: KeyboardEvent) => {
+			preNavigate(e);
+		}) as EventListener);
+	});
+	$effect(() => {
+		filteredData = !searchString
+			? showAllOnEmpty
+				? data
+				: []
+			: doFind(data, searchString, searchField);
+	});
+
+	const doFind = <T = Record<string, any>,>(list: T[], kw: string, field: string) => {
+		let results: any[];
+
+		if (!kw) {
+			results = data;
+		} else {
+			results =
+				mode === 'exact' ? dataOp.filterList(list, kw, field) : dataOp.searchList(list, kw, field);
+		}
+		return results;
+	};
+
+	async function preNavigate(e: KeyboardEvent) {
+		if (e.keyCode === 13) {
+			e.preventDefault();
+			onSelect(filteredData[selectedIndex], selectedIndex);
+			return;
+		}
+	}
+
+	function onSelect(filteredData: T, index: number) {
+		searchString = getFieldName(filteredData, dataFieldName as keyof T) as string;
+		if (onchange) onchange(filteredData);
+	}
+
+	function getFieldName(data: T, fieldName: keyof T | (keyof T)[]): string {
+		let field = Array.isArray(fieldName) ? fieldName : [fieldName];
+
+		return data ? field.map((field) => data[field]).join(' ') : '';
+	}
 </script>
 
 {popperOpen}