@medyll/idae-slotui-svelte 0.122.1 → 0.123.0

package/dist/controls/autocomplete/AutoComplete.svelte

@@ -1,152 +1,152 @@
-<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}
-<Popper
-	bind:isOpen={popperOpen}
-	bind:element={popperHTML}
-	position="BC"
-	stickToHookWidth={true}
-	autoClose
-	class="auto-complete"
->
-	{#snippet popperHolder()}
-		<TextField
-			bind:value={searchString}
-			bind:element
-			type="search"
-			inputType="search"
-			class={className}
-			onclick={() => (popperOpen = true)}
-			onfocus={() => {
-				setTimeout(() => (popperOpen = true), 125);
-			}}
-			onkeydown={(e: Event) => menuRef.actions.navigate(e, filteredData)}
-			{...rest}
-			aria-haspopup="menu"
-			aria-controls="menu"
-			tabindex="0"
-		/>
-	{/snippet}
-
-	<MenuList
-		bind:this={menuRef}
-		style="max-height:350px;overflow:auto;width:100%;"
-		data={filteredData}
-		bind:element={menuHTML}
-		bind:selectedIndex
-		id="menu"
-		role="menu"
-		tabindex="-1"
-		aria-expanded={popperOpen}
-	>
-		{#snippet children(prop)}
-			<Slotted child={childs} slotArgs={prop.item}>
-				<MenuListItem
-					text={getFieldName(prop.item, dataFieldName)}
-					data={prop.item}
-					onclick={(event) => {
-						onSelect(event.detail ?? (event as T), prop.itemIndex);
-						popperOpen = false;
-						menuRef.actions.gotoIndex(prop.itemIndex);
-					}}
-				/>
-			</Slotted>
-		{/snippet}
-	</MenuList>
-	{#if !filteredData.length && !searchString}
-		<Slotted child={autoCompleteEmpty}>
-			<div class="auto-complete-boot">
-				<Icon iconSize="large" icon="fa-regular:keyboard" />
-				perform search
-			</div>
-		</Slotted>
-	{:else if !filteredData.length}
-		<Slotted child={autoCompleteNoResults}>
-			<div class="auto-complete-no-results">
-				<Icon class="dsp-inline" iconSize="large" icon="material-symbols:no-sim-outline" />
-				no results
-			</div>
-		</Slotted>
-	{/if}
-</Popper>
+<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}
+<Popper
+	bind:isOpen={popperOpen}
+	bind:element={popperHTML}
+	position="BC"
+	stickToHookWidth={true}
+	autoClose
+	class="auto-complete"
+>
+	{#snippet popperHolder()}
+		<TextField
+			bind:value={searchString}
+			bind:element
+			type="search"
+			inputType="search"
+			class={className}
+			onclick={() => (popperOpen = true)}
+			onfocus={() => {
+				setTimeout(() => (popperOpen = true), 125);
+			}}
+			onkeydown={(e: Event) => menuRef.actions.navigate(e, filteredData)}
+			{...rest}
+			aria-haspopup="menu"
+			aria-controls="menu"
+			tabindex="0"
+		/>
+	{/snippet}
+
+	<MenuList
+		bind:this={menuRef}
+		style="max-height:350px;overflow:auto;width:100%;"
+		data={filteredData}
+		bind:element={menuHTML}
+		bind:selectedIndex
+		id="menu"
+		role="menu"
+		tabindex="-1"
+		aria-expanded={popperOpen}
+	>
+		{#snippet children(prop)}
+			<Slotted child={childs} slotArgs={prop.item}>
+				<MenuListItem
+					text={getFieldName(prop.item, dataFieldName)}
+					data={prop.item}
+					onclick={(event) => {
+						onSelect(event.detail ?? (event as T), prop.itemIndex);
+						popperOpen = false;
+						menuRef.actions.gotoIndex(prop.itemIndex);
+					}}
+				/>
+			</Slotted>
+		{/snippet}
+	</MenuList>
+	{#if !filteredData.length && !searchString}
+		<Slotted child={autoCompleteEmpty}>
+			<div class="auto-complete-boot">
+				<Icon iconSize="large" icon="fa-regular:keyboard" />
+				perform search
+			</div>
+		</Slotted>
+	{:else if !filteredData.length}
+		<Slotted child={autoCompleteNoResults}>
+			<div class="auto-complete-no-results">
+				<Icon class="dsp-inline" iconSize="large" icon="material-symbols:no-sim-outline" />
+				no results
+			</div>
+		</Slotted>
+	{/if}
+</Popper>

package/dist/controls/autocomplete/auto-complete.scss

@@ -1,15 +1,15 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --auto-complete-pad: var(--sld-pad-medium);
-    --auto-complete-gap: var(--sld-gap-small);
-}
-
-.auto-complete {
-    &-no-results,
-    &-boot {
-        padding: var(--auto-complete-pad);
-        gap: var(--auto-complete-gap);
-        @include slotui-mixins.flex(row, center);
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --auto-complete-pad: var(--sld-pad-medium);
+    --auto-complete-gap: var(--sld-gap-small);
+}
+
+.auto-complete {
+    &-no-results,
+    &-boot {
+        padding: var(--auto-complete-pad);
+        gap: var(--auto-complete-gap);
+        @include slotui-mixins.flex(row, center);
+    }
+}

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

@@ -1,165 +1,165 @@
-<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()}
-		<Icon icon="user" />
-	{/snippet}
-	{#snippet buttonEnd()}
-		<Icon icon="user" />
-	{/snippet}
-</Button>`;
-</script>
-
-<Button variant="contained" value="red" icon="material-symbols-light:post-add-sharp"></Button>
-<ButtonAction
-	>test et essai
-	{#snippet popperContent()}
-		<div class="pad-4">content</div>
-	{/snippet}
-</ButtonAction>
-<ButtonMenu
-	>menu
-	{#snippet menuItem()}
-		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"
->
-	<div class="flex-v gap-medium">
-		<DemoPage {code} component="Button">
-			<Demoer {parameters} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Button {...activeParams}
-						>Using snippets scscs dsvdvd
-						<!-- {#snippet buttonStart()}
-							<Icon icon="user" /> 
-						{/snippet} -->
-
-						{#snippet buttonLoadingIcon()}
-							<Icon icon="loading" rotate />
-						{/snippet}
-					</Button>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage title="" subTitle="Styling props" component="Button">
-			<Demoer parameters={styleParameters} {multiple} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Button {...activeParams}
-						>Using snippets
-						{#snippet buttonStart()}
-							<Icon icon="user" />
-						{/snippet}
-						{#snippet buttonLoadingIcon()}
-							<Icon icon="loading" rotate />
-						{/snippet}
-					</Button>
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-		<DemoPage title="" subTitle="Menu buttons" component="Button">
-			<Demoer parameters={parametersMenu} {componentArgs}>
-				<Button>
-					default action
-					{#snippet buttonPopper()}
-						<MenuList style="max-height:350px;overflow:auto" density="default">
-							<MenuListItem divider={true} text="strict">menu</MenuListItem>
-							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
-							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
-							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
-						</MenuList>
-					{/snippet}
-				</Button>
-			</Demoer>
-		</DemoPage>
-		<!-- <DemoPage title="Using props" code={code2} component="Button">
-			<Demoer parameters={parametersProps} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Button {...activeParams}>Using props</Button>
-				{/snippet}
-			</Demoer>
-		</DemoPage> -->
-		<!-- <DemoPage title="" subTitle="Menu buttons" code={code3} component="Button">
-			<Demoer parameters={parametersMenu} {componentArgs}>
-				{#snippet children({ activeParams })}
-					<Button
-					size="medium"
-					usePopper={{ ...usePopper, position: activeParams?.position }}
-					primary="Menu {activeParams?.position ?? ''}"
-				/>
-				{/snippet}
-			</Demoer>
-		</DemoPage> -->
-	</div>
-</ComponentDemo>
+<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()}
+		<Icon icon="user" />
+	{/snippet}
+	{#snippet buttonEnd()}
+		<Icon icon="user" />
+	{/snippet}
+</Button>`;
+</script>
+
+<Button variant="contained" value="red" icon="material-symbols-light:post-add-sharp"></Button>
+<ButtonAction
+	>test et essai
+	{#snippet popperContent()}
+		<div class="pad-4">content</div>
+	{/snippet}
+</ButtonAction>
+<ButtonMenu
+	>menu
+	{#snippet menuItem()}
+		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"
+>
+	<div class="flex-v gap-medium">
+		<DemoPage {code} component="Button">
+			<Demoer {parameters} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Button {...activeParams}
+						>Using snippets scscs dsvdvd
+						<!-- {#snippet buttonStart()}
+							<Icon icon="user" /> 
+						{/snippet} -->
+
+						{#snippet buttonLoadingIcon()}
+							<Icon icon="loading" rotate />
+						{/snippet}
+					</Button>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="" subTitle="Styling props" component="Button">
+			<Demoer parameters={styleParameters} {multiple} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Button {...activeParams}
+						>Using snippets
+						{#snippet buttonStart()}
+							<Icon icon="user" />
+						{/snippet}
+						{#snippet buttonLoadingIcon()}
+							<Icon icon="loading" rotate />
+						{/snippet}
+					</Button>
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+		<DemoPage title="" subTitle="Menu buttons" component="Button">
+			<Demoer parameters={parametersMenu} {componentArgs}>
+				<Button>
+					default action
+					{#snippet buttonPopper()}
+						<MenuList style="max-height:350px;overflow:auto" density="default">
+							<MenuListItem divider={true} text="strict">menu</MenuListItem>
+							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
+							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
+							<MenuListItem data={{ some: 'data' }} text="strict">item</MenuListItem>
+						</MenuList>
+					{/snippet}
+				</Button>
+			</Demoer>
+		</DemoPage>
+		<!-- <DemoPage title="Using props" code={code2} component="Button">
+			<Demoer parameters={parametersProps} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Button {...activeParams}>Using props</Button>
+				{/snippet}
+			</Demoer>
+		</DemoPage> -->
+		<!-- <DemoPage title="" subTitle="Menu buttons" code={code3} component="Button">
+			<Demoer parameters={parametersMenu} {componentArgs}>
+				{#snippet children({ activeParams })}
+					<Button
+					size="medium"
+					usePopper={{ ...usePopper, position: activeParams?.position }}
+					primary="Menu {activeParams?.position ?? ''}"
+				/>
+				{/snippet}
+			</Demoer>
+		</DemoPage> -->
+	</div>
+</ComponentDemo>