@medyll/idae-slotui-svelte 0.26.0 → 0.28.0

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

@@ -1,8 +1,8 @@
-import type { ElementProps, IconObj } from '../../types/index.js';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import type { ElementProps, IconObj } from "../../types/index.js";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export type IconAppProps = {
     /** icon name for iconify  */
-    icon?: ElementProps['icon'];
+    icon?: ElementProps["icon"];
     /** className off the root component */
     class?: string;
     /** css style off the root component */
@@ -12,7 +12,7 @@ export type IconAppProps = {
     /** icon object for iconify, replace and invalidate props.icon  */
     ico?: IconObj;
     /**  icon size 	 */
-    iconSize?: ElementProps['iconSize'];
+    iconSize?: ElementProps["iconSize"];
     /** rotate icon */
     rotate?: boolean;
     /** icon color */

package/dist/base/icon/types.js

@@ -1,21 +1,21 @@
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const iconAppDemoValues = {
     icon: {
-        type: 'icon',
-        default: 'user'
+        type: "icon",
+        default: "user",
     },
     iconSize: {
-        type: 'iconSize'
+        type: "iconSize",
     },
     color: {
-        type: 'color'
+        type: "color",
     },
     rotation: {
-        type: 'number',
-        values: [0, 45, 90, 180, 270]
+        type: "number",
+        values: [0, 45, 90, 180, 270],
     },
     rotate: {
-        type: 'boolean'
-    }
+        type: "boolean",
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(iconAppDemoValues);

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/paper/type.d.ts

@@ -1,6 +1,6 @@
-import type { CommonProps } from '../../types/index.js';
-import type { Snippet } from 'svelte';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import type { CommonProps } from "../../types/index.js";
+import type { Snippet } from "svelte";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export type PaperProps = {
     /** className off the root component */
     class?: string;

package/dist/base/paper/type.js

@@ -1,8 +1,8 @@
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const paperDemoValues = {
     elevation: {
-        type: 'elevation',
-        default: 0
-    }
+        type: "elevation",
+        default: 0,
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(paperDemoValues);

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/base/titleBar/types.d.ts

@@ -1,6 +1,6 @@
-import type { ElementProps } from '../../types/index.js';
-import type { Snippet } from 'svelte';
-import type { DemoerStoryProps } from '../demoer/types.js';
+import type { ElementProps } from "../../types/index.js";
+import type { Snippet } from "svelte";
+import type { DemoerStoryProps } from "../demoer/types.js";
 export type TitleBarProps = {
     title: string;
     /** Function to be called when the close button is clicked */
@@ -8,7 +8,7 @@ export type TitleBarProps = {
     /** Determines if the title bar has a menu */
     hasMenu?: boolean;
     /** Icon to be displayed in the title bar */
-    icon?: ElementProps['icon'];
+    icon?: ElementProps["icon"];
     titleBarIcon?: Snippet;
     titleBarTitle?: Snippet;
     children?: Snippet;

package/dist/base/titleBar/types.js

@@ -1,18 +1,18 @@
-import { demoerArgs } from '../demoer/demoer.utils.js';
+import { demoerArgs } from "../demoer/demoer.utils.js";
 export const titleBarDemoValues = {
     onClose: {
-        type: 'function',
-        values: [() => console.log('close')]
+        type: "function",
+        values: [() => console.log("close")],
     },
     hasMenu: {
-        type: 'boolean'
+        type: "boolean",
     },
     icon: {
-        type: 'icon'
+        type: "icon",
     },
     title: {
-        type: 'string',
-        values: ['Title', 'Title 2', 'Title 3']
-    }
+        type: "string",
+        values: ["Title", "Title 2", "Title 3"],
+    },
 };
 export let { parameters, componentArgs } = demoerArgs(titleBarDemoValues);

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}

package/dist/controls/button/Button.demo.svelte

@@ -1,47 +1,53 @@
-<script lang="ts">import MenuList from "../../ui/menuList/MenuList.svelte";
-import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
-import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Button from "./Button.svelte";
-import { uiPresets } from "../../utils/engine/presets.js";
-import ButtonAction from "./ButtonAction.svelte";
-import ButtonMenu from "./ButtonMenu.svelte";
-import { parameters, componentArgs } from "./types.js";
-let multiple = {
-  bgTheme: {
-    none: { bgTheme: void 0 },
-    primary: { bgTheme: "primary" },
-    secondary: { bgTheme: "secondary" },
-    tertiary: { bgTheme: "tertiary" }
-  }
-};
-let parametersMenu = {
-  position: {
-    type: "stickyPosition",
-    values: uiPresets.stickyPosition
-  }
-};
-let styleParameters = {
-  color: {
-    type: "color-preset",
-    values: [void 0, "primary", "secondary", "tertiary"]
-  },
-  contained: {
-    type: "boolean",
-    values: [true, false]
-  },
-  bordered: {
-    type: "boolean",
-    values: [true, false]
-  },
-  link: {
-    type: "boolean",
-    values: [true, false]
-  }
-};
-let code = `
+<script lang="ts">
+	import MenuList from '../../ui/menuList/MenuList.svelte';
+	import MenuListItem from '../../ui/menuList/MenuListItem.svelte';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Button from './Button.svelte';
+	import { uiPresets } from '../../utils/engine/presets.js';
+	import ButtonAction from './ButtonAction.svelte';
+	import ButtonMenu from './ButtonMenu.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let multiple = {
+		bgTheme: {
+			none: { bgTheme: undefined },
+			primary: { bgTheme: 'primary' },
+			secondary: { bgTheme: 'secondary' },
+			tertiary: { bgTheme: 'tertiary' }
+		}
+	};
+
+	let parametersMenu: any = {
+		position: {
+			type: 'stickyPosition',
+			values: uiPresets.stickyPosition
+		}
+	};
+	/** */
+	let styleParameters: any = {
+		color: {
+			type: 'color-preset',
+			values: [undefined, 'primary', 'secondary', 'tertiary']
+		},
+		contained: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		bordered: {
+			type: 'boolean',
+			values: [true, false]
+		},
+		link: {
+			type: 'boolean',
+			values: [true, false]
+		}
+	};
+
+	let code = `
 <Button onclick={()=>{}} >
 	My button
 	{#snippet buttonStart()}
@@ -66,6 +72,26 @@ let code = `
 		content
 	{/snippet}
 </ButtonMenu>
+<ButtonMenu
+    tall="small"
+    width="auto"
+    icon="material-symbols-light:post-add-sharp"
+    value={"Some text for the menu with an icon"}
+    popperProps={{ stickToHookWidth: true, position: 'TL', flow: 'fixed', autoClose: true }}
+    variant="naked"
+    menuProps={{
+        data: [],
+        grid: 3, 
+        onclick: (event) => {
+            // chatParams.promptSystem = event;
+        },
+    }}>
+    {#snippet menuItem({ item })}
+        <MenuListItem data={item}>
+            {item?.name}
+        </MenuListItem>
+    {/snippet}
+</ButtonMenu>
 <ComponentDemo
 	component="Button"
 	cite="There were a place where we used to click. You've called it a button, and we clicked yes.<br /> R. Falgt, 1354"
@@ -75,7 +101,7 @@ let code = `
 			<Demoer {parameters} {componentArgs}>
 				{#snippet children({ activeParams })}
 					<Button {...activeParams}
-						>Using snippets
+						>Using snippets scscs dsvdvd
 						<!-- {#snippet buttonStart()}
 							<Icon icon="user" /> 
 						{/snippet} -->