@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/data/finder/Finder.svelte

@@ -1,168 +1,168 @@
-<script lang="ts">
-	import Button from '../../controls/button/Button.svelte';
-	import TextField from '../../controls/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 type { FinderProps } from './types.js';
-	import { widthPreset, type ExpandProps } from '../../types/index.js';
-	import { onEvent } from '../../utils/uses/event.js';
-
-	let {
-		class: className = '',
-		styleRoot = '',
-		classRoot = '',
-		style = '',
-		element,
-		data = [],
-		defaultField = '*',
-		showSortMenu = false,
-		mode = 'partial',
-		filteredData = $bindable(filit()),
-		sizeRoot = widthPreset.auto,
-		width = 'full',
-		tall = 'default',
-		...restProps
-	}: ExpandProps<FinderProps> = $props();
-
-	let searchString: string | undefined = $state(undefined);
-	let container: HTMLDivElement;
-
-	/* export var filteredData = $derived(
-		!searchString ? data : doFind(data, searchString, defaultField)
-	); */
-
-	function filit() {
-		let red = $derived(!searchString ? data : doFind(data, searchString, defaultField));
-		return red;
-	}
-
-	function doFind<T = Record<string, any>>(list: T[], kw: string, field: string) {
-		let results: any[];
-		// if kw empty
-		if (!kw) {
-			results = data;
-		} else {
-			let kwEx = kw.replace('*', '.*.');
-			results =
-				mode === 'exact'
-					? dataOp.filterList(list, kwEx, field)
-					: dataOp.searchList(list, kwEx, field); // filterList(list, kw, field);
-		}
-		return results;
-	}
-
-	let popperOpen: boolean;
-
-	let dataKeys = $derived(
-		Object.keys(data[0] || {})
-			.filter((r) => ['string', 'number'].includes(typeof data?.[0]?.[r]))
-			.sort((a: string, b: string) => {
-				return a > b ? 1 : a < b ? -1 : 0;
-			})
-	);
-</script>
-
-<div
-	class="finder-container {classRoot}"
-	data-width={sizeRoot}
-	bind:this={container}
-	use:onEvent={{
-		event: 'on:click:away',
-		action: () => {
-			popperOpen = false;
-		}
-	}}
-	style={styleRoot}
->
-	<div style:flex="1">
-		<TextField
-			bind:value={searchString}
-			bind:element
-			placeholder="find by {defaultField} {mode}"
-			type="search"
-			inputType="search"
-			{width}
-			class={className}
-			{...restProps}
-		/>
-	</div>
-	{#if showSortMenu}
-		<Button
-			onclick={(event) => {
-				event.preventDefault();
-				popperOpen = !popperOpen;
-			}}
-			variant="naked"
-			width="tiny"
-			icon={{ icon: `chevron-${popperOpen ? 'up' : 'down'}`, iconSize: 'tiny' }}
-		/>
-	{/if}
-</div>
-{#if popperOpen}
-	<Popper code="ui" parentNode={container} position="BC" stickToHookWidth={true}>
-		<MenuList style="max-height:350px;overflow:auto;width:100%;" density="default">
-			<MenuListItem
-				divider={true}
-				text="strict"
-				onclick={() => {
-					if (mode === 'exact') {
-						mode = 'partial';
-					} else {
-						mode = 'exact';
-					}
-				}}
-			>
-				{#snippet menuItemLast()}
-					<div class="pad-r-1">
-						<input type="checkbox" checked={mode === 'exact'} style="display:block;margin:0" />
-					</div>
-				{/snippet}
-				strict
-			</MenuListItem>
-			<MenuListItem
-				text="strict"
-				onclick={() => {
-					defaultField = '*';
-				}}
-				>{#snippet menuItemLast()}
-					<div class="pad-r-1">
-						{#if defaultField === '*'}
-							<input
-								type="checkbox"
-								checked={defaultField === '*'}
-								style="display:block;margin:0"
-							/>
-						{/if}
-					</div>
-				{/snippet}
-				{'* All fields'}
-			</MenuListItem>
-			{#each dataKeys as kk}
-				<MenuListItem
-					text="strict"
-					onclick={() => {
-						defaultField = kk;
-					}}
-					>{#snippet menuItemLast()}
-						<div class="pad-r-1">
-							{#if defaultField === kk}
-								<input
-									type="checkbox"
-									checked={defaultField === kk}
-									style="display:block;margin:0"
-								/>
-							{/if}
-						</div>
-					{/snippet}
-					{kk}
-				</MenuListItem>
-			{/each}
-		</MenuList>
-	</Popper>
-{/if}
-
+<script lang="ts">
+	import Button from '../../controls/button/Button.svelte';
+	import TextField from '../../controls/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 type { FinderProps } from './types.js';
+	import { widthPreset, type ExpandProps } from '../../types/index.js';
+	import { onEvent } from '../../utils/uses/event.js';
+
+	let {
+		class: className = '',
+		styleRoot = '',
+		classRoot = '',
+		style = '',
+		element,
+		data = [],
+		defaultField = '*',
+		showSortMenu = false,
+		mode = 'partial',
+		filteredData = $bindable(filit()),
+		sizeRoot = widthPreset.auto,
+		width = 'full',
+		tall = 'default',
+		...restProps
+	}: ExpandProps<FinderProps> = $props();
+
+	let searchString: string | undefined = $state(undefined);
+	let container: HTMLDivElement;
+
+	/* export var filteredData = $derived(
+		!searchString ? data : doFind(data, searchString, defaultField)
+	); */
+
+	function filit() {
+		let red = $derived(!searchString ? data : doFind(data, searchString, defaultField));
+		return red;
+	}
+
+	function doFind<T = Record<string, any>>(list: T[], kw: string, field: string) {
+		let results: any[];
+		// if kw empty
+		if (!kw) {
+			results = data;
+		} else {
+			let kwEx = kw.replace('*', '.*.');
+			results =
+				mode === 'exact'
+					? dataOp.filterList(list, kwEx, field)
+					: dataOp.searchList(list, kwEx, field); // filterList(list, kw, field);
+		}
+		return results;
+	}
+
+	let popperOpen: boolean;
+
+	let dataKeys = $derived(
+		Object.keys(data[0] || {})
+			.filter((r) => ['string', 'number'].includes(typeof data?.[0]?.[r]))
+			.sort((a: string, b: string) => {
+				return a > b ? 1 : a < b ? -1 : 0;
+			})
+	);
+</script>
+
+<div
+	class="finder-container {classRoot}"
+	data-width={sizeRoot}
+	bind:this={container}
+	use:onEvent={{
+		event: 'on:click:away',
+		action: () => {
+			popperOpen = false;
+		}
+	}}
+	style={styleRoot}
+>
+	<div style:flex="1">
+		<TextField
+			bind:value={searchString}
+			bind:element
+			placeholder="find by {defaultField} {mode}"
+			type="search"
+			inputType="search"
+			{width}
+			class={className}
+			{...restProps}
+		/>
+	</div>
+	{#if showSortMenu}
+		<Button
+			onclick={(event) => {
+				event.preventDefault();
+				popperOpen = !popperOpen;
+			}}
+			variant="naked"
+			width="tiny"
+			icon={{ icon: `chevron-${popperOpen ? 'up' : 'down'}`, iconSize: 'tiny' }}
+		/>
+	{/if}
+</div>
+{#if popperOpen}
+	<Popper code="ui" parentNode={container} position="BC" stickToHookWidth={true}>
+		<MenuList style="max-height:350px;overflow:auto;width:100%;" density="default">
+			<MenuListItem
+				divider={true}
+				text="strict"
+				onclick={() => {
+					if (mode === 'exact') {
+						mode = 'partial';
+					} else {
+						mode = 'exact';
+					}
+				}}
+			>
+				{#snippet menuItemLast()}
+					<div class="pad-r-1">
+						<input type="checkbox" checked={mode === 'exact'} style="display:block;margin:0" />
+					</div>
+				{/snippet}
+				strict
+			</MenuListItem>
+			<MenuListItem
+				text="strict"
+				onclick={() => {
+					defaultField = '*';
+				}}
+				>{#snippet menuItemLast()}
+					<div class="pad-r-1">
+						{#if defaultField === '*'}
+							<input
+								type="checkbox"
+								checked={defaultField === '*'}
+								style="display:block;margin:0"
+							/>
+						{/if}
+					</div>
+				{/snippet}
+				{'* All fields'}
+			</MenuListItem>
+			{#each dataKeys as kk}
+				<MenuListItem
+					text="strict"
+					onclick={() => {
+						defaultField = kk;
+					}}
+					>{#snippet menuItemLast()}
+						<div class="pad-r-1">
+							{#if defaultField === kk}
+								<input
+									type="checkbox"
+									checked={defaultField === kk}
+									style="display:block;margin:0"
+								/>
+							{/if}
+						</div>
+					{/snippet}
+					{kk}
+				</MenuListItem>
+			{/each}
+		</MenuList>
+	</Popper>
+{/if}
+
 <style>:root {
   --finder-gap: var(--sld-gap-tiny);
 }
@@ -236,4 +236,4 @@
 }
 .finder-container[tall=default], .finder-container.tall-default {
   min-height: var(--sld-tall-default) !important;
-}</style>
+}</style>

package/dist/data/finder/finder.scss

@@ -1,14 +1,14 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --finder-gap: var(--sld-gap-tiny);
-}
-
-.finder {
-    &-container {
-        display: inline-flex;
-        gap: var(--finder-gap);
-        @include slotui-mixins.ui-width-presets;
-        @include slotui-mixins.ui-tall-presets;
-    }
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --finder-gap: var(--sld-gap-tiny);
+}
+
+.finder {
+    &-container {
+        display: inline-flex;
+        gap: var(--finder-gap);
+        @include slotui-mixins.ui-width-presets;
+        @include slotui-mixins.ui-tall-presets;
+    }
+}

package/dist/data/grouper/Grouper.demo.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-	import Grouper from './Grouper.svelte';
-
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import DemoPage from '../../base/demoer/DemoPage.svelte';
-	/* demo */
-
-	import { parameters, componentArgs } from './types.js';
-
-	let code = `<Grouper 
-	bind:groupedData
-	bind:activeGroupField 
-	{data}
-	/>`;
-
-	let groupedData: any;
-	let activeGroupField: any;
-</script>
-
-<ComponentDemo component="Grouper">
-	<div class="flex-v gap-large">
-		<DemoPage {code} component="Popper">
-			<Demoer {componentArgs} {parameters}>
-				{#snippet children({ activeParams })}
-					<div class="flex-h flex-align-middle gap-tiny">
-						<Grouper bind:groupedData bind:activeGroupField {...activeParams} />
-						{activeGroupField}
-					</div>
-					{JSON.stringify(groupedData)}
-					{JSON.stringify(activeGroupField)}
-				{/snippet}
-			</Demoer>
-		</DemoPage>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Grouper from './Grouper.svelte';
+
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	/* demo */
+
+	import { parameters, componentArgs } from './types.js';
+
+	let code = `<Grouper 
+	bind:groupedData
+	bind:activeGroupField 
+	{data}
+	/>`;
+
+	let groupedData: any;
+	let activeGroupField: any;
+</script>
+
+<ComponentDemo component="Grouper">
+	<div class="flex-v gap-large">
+		<DemoPage {code} component="Popper">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="flex-h flex-align-middle gap-tiny">
+						<Grouper bind:groupedData bind:activeGroupField {...activeParams} />
+						{activeGroupField}
+					</div>
+					{JSON.stringify(groupedData)}
+					{JSON.stringify(activeGroupField)}
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/data/grouper/Grouper.svelte

@@ -1,85 +1,85 @@
-<script lang="ts" generics="T extends object">
-	import Button from '../../controls/button/Button.svelte';
-	import ButtonMenu from '../../controls/button/ButtonMenu.svelte';
-	import type { Data, ExpandProps } from '../../types/index.js';
-	import { dataOp } from '@medyll/idae-engine';
-
-	import type { GrouperProps } from './types.js';
-	import Looper from '../../utils/looper/Looper.svelte';
-	import type { MenuListItemProps } from '../../ui/menuList/types.js';
-
-	let {
-		class: className = '',
-		element,
-		elementButton,
-		style = '',
-		groupBy,
-		grouperMode = 'menu',
-		groupListItems,
-		data,
-		buttonProps,
-		groupByField,
-		groupByTitleField,
-		groupByOrder = 'asc',
-		showUnGrouped = false,
-		ungroupedTitle = 'ungrouped',
-		activeGroupField = $bindable(),
-		groupedData = $bindable(),
-		children,
-		...rest
-	}: ExpandProps<GrouperProps<T>> = $props();
-
-	let groupedFieldList = $derived(dataOp.getDataKeys(data ?? []) ?? []);
-
-	let menuProps = $derived.by(() => {
-		let menuListItems = groupedFieldList.map((dtaK: any) => {
-			return { text: dtaK, data: dtaK } as MenuListItemProps;
-		});
-
-		menuListItems.push({ text: 'un-group', icon: 'cancel', data: [] });
-		return {
-			menuListItems,
-			onclick: (field: any) => {
-				//if (field) {
-				activeGroupField = field;
-				groupedData = dataOp.groupBy<T>({
-					dataList: data ?? [],
-					groupBy: field ?? 'undefined'
-				});
-				//}
-			}
-		};
-	});
-
-	function buttonSelect(field: any) {
-		if (field) {
-			activeGroupField = field;
-			groupedData = dataOp.groupBy<T>({
-				dataList: data ?? [],
-				groupBy: field ?? 'undefined'
-			});
-		}
-	}
-</script>
-
-<div bind:this={element} class="grouper {className}" {style} {...rest}>
-	{#if grouperMode === 'menu'}
-		<ButtonMenu bind:element={elementButton} {...buttonProps} {menuProps}>
-			{activeGroupField ?? 'group by'}
-		</ButtonMenu>
-	{/if}
-	{#if grouperMode === 'button'}
-		<Looper style="display:flex;gap:0.2rem;" class="flex-h" data={groupedFieldList}>
-			{#snippet children({ item })}
-				<Button
-					onclick={() => {
-						buttonSelect(item);
-					}}
-					{...buttonProps}
-					title={item}
-					width="mini">{item}</Button
-				>
-			{/snippet}
-		</Looper>
-	{/if}
-</div>
+<script lang="ts" generics="T extends object">
+	import Button from '../../controls/button/Button.svelte';
+	import ButtonMenu from '../../controls/button/ButtonMenu.svelte';
+	import type { Data, ExpandProps } from '../../types/index.js';
+	import { dataOp } from '@medyll/idae-engine';
+
+	import type { GrouperProps } from './types.js';
+	import Looper from '../../utils/looper/Looper.svelte';
+	import type { MenuListItemProps } from '../../ui/menuList/types.js';
+
+	let {
+		class: className = '',
+		element,
+		elementButton,
+		style = '',
+		groupBy,
+		grouperMode = 'menu',
+		groupListItems,
+		data,
+		buttonProps,
+		groupByField,
+		groupByTitleField,
+		groupByOrder = 'asc',
+		showUnGrouped = false,
+		ungroupedTitle = 'ungrouped',
+		activeGroupField = $bindable(),
+		groupedData = $bindable(),
+		children,
+		...rest
+	}: ExpandProps<GrouperProps<T>> = $props();
+
+	let groupedFieldList = $derived(dataOp.getDataKeys(data ?? []) ?? []);
+
+	let menuProps = $derived.by(() => {
+		let menuListItems = groupedFieldList.map((dtaK: any) => {
+			return { text: dtaK, data: dtaK } as MenuListItemProps;
+		});
+
+		menuListItems.push({ text: 'un-group', icon: 'cancel', data: [] });
+		return {
+			menuListItems,
+			onclick: (field: any) => {
+				//if (field) {
+				activeGroupField = field;
+				groupedData = dataOp.groupBy<T>({
+					dataList: data ?? [],
+					groupBy: field ?? 'undefined'
+				});
+				//}
+			}
+		};
+	});
+
+	function buttonSelect(field: any) {
+		if (field) {
+			activeGroupField = field;
+			groupedData = dataOp.groupBy<T>({
+				dataList: data ?? [],
+				groupBy: field ?? 'undefined'
+			});
+		}
+	}
+</script>
+
+<div bind:this={element} class="grouper {className}" {style} {...rest}>
+	{#if grouperMode === 'menu'}
+		<ButtonMenu bind:element={elementButton} {...buttonProps} {menuProps}>
+			{activeGroupField ?? 'group by'}
+		</ButtonMenu>
+	{/if}
+	{#if grouperMode === 'button'}
+		<Looper style="display:flex;gap:0.2rem;" class="flex-h" data={groupedFieldList}>
+			{#snippet children({ item })}
+				<Button
+					onclick={() => {
+						buttonSelect(item);
+					}}
+					{...buttonProps}
+					title={item}
+					width="mini">{item}</Button
+				>
+			{/snippet}
+		</Looper>
+	{/if}
+</div>