@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/data/dataList/DataListRow.svelte

@@ -1,98 +1,98 @@
-<script lang="ts" generics="T=Data">
-	import sanitizeHtml from 'sanitize-html';
-	import type { Data } from '../../types/index.js';
-	import { writable, type Writable } from 'svelte/store';
-	import DataListCell from './DataListCell.svelte';
-	import type { DataCellType, DataListRowProps, DataListStoreType } from './types.js';
-	import type { RowType } from './types.js';
-	import { dataOp } from '../../utils/engine/utils.js';
-	import { getContext, setContext } from 'svelte';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import { onEvent } from '../../utils/uses/event.js';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		data,
-		children,
-		...rest
-	}: DataListRowProps<T> = $props();
-
-	const dataStore = writable<RowType>({ data });
-	setContext('dataListRow', dataStore);
-
-	const dataListContext = getContext<Writable<DataListStoreType>>('dataListContext');
-
-	function handleClick(item: Data) {
-		const event = new CustomEvent('datalist:click', { detail: item, bubbles: true });
-		if (element) element.dispatchEvent(event);
-	}
-
-	function handleSelect(item: Data) {
-		const event = new CustomEvent('datalist:select', { detail: item, bubbles: true });
-		if (element) element.dispatchEvent(event);
-	}
-
-	function fieldOrFunction(item: Data, field: string, defaultValue?: any): string {
-		const resolved = dataOp.resolveDotPath(item, field);
-		return typeof resolved === 'function' ? resolved(item) : resolved;
-	}
-
-	function checkGetter(columns: Record<string, DataCellType>, field: string, data: Data) {
-		const ret = columns[field]?.getter
-			? columns[field]?.getter(data)
-			: dataOp.resolveDotPath(data, field);
-		return sanitizeHtml(ret);
-	}
-
-	let cssVars = $derived(() => {
-		return Object.values($dataListContext.columns ?? []).reduce(
-			(previous, current, currentIndex) => {
-				const witdh = current?.width ?? 'auto';
-				return `${previous} minmax(${witdh},${witdh})`;
-			},
-			'--template-columns:'
-		);
-	});
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<tr
-	bind:this={element}
-	use:onEvent={{ event: 'datalist:sort:clicked', action: () => {} }}
-	onclick={() => {
-		if (data) handleClick(data);
-		if (data) handleSelect(data);
-	}}
-	class="dataListRow {className}"
-	style="{style};{cssVars}"
-	{...rest}
->
-	{#if children}
-		<Slotted child={children}></Slotted>
-	{:else if $dataListContext.hasColumnsProps}
-		{#each Object.keys($dataListContext.columns) as inItem}
-			{@const field = $dataListContext.columns[inItem].field}
-			{@const final = checkGetter($dataListContext.columns, field, data)}
-			<!--  fieldOrFunction(data?.[field], field) -->
-			<DataListCell title={final} {field}>
-				{@html sanitizeHtml(checkGetter({ ...$dataListContext.columns }, field, data)) ?? ''}
-			</DataListCell>
-		{/each}
-	{:else}
-		{#each Object.keys(data) as inItem}
-			<DataListCell field={inItem}>
-				<Slotted child={children}></Slotted>
-			</DataListCell>
-		{/each}
-	{/if}
-</tr>
-
+<script lang="ts" generics="T=Data">
+	import sanitizeHtml from 'sanitize-html';
+	import type { Data } from '../../types/index.js';
+	import { writable, type Writable } from 'svelte/store';
+	import DataListCell from './DataListCell.svelte';
+	import type { DataCellType, DataListRowProps, DataListStoreType } from './types.js';
+	import type { RowType } from './types.js';
+	import { dataOp } from '../../utils/engine/utils.js';
+	import { getContext, setContext } from 'svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import { onEvent } from '../../utils/uses/event.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		data,
+		children,
+		...rest
+	}: DataListRowProps<T> = $props();
+
+	const dataStore = writable<RowType>({ data });
+	setContext('dataListRow', dataStore);
+
+	const dataListContext = getContext<Writable<DataListStoreType>>('dataListContext');
+
+	function handleClick(item: Data) {
+		const event = new CustomEvent('datalist:click', { detail: item, bubbles: true });
+		if (element) element.dispatchEvent(event);
+	}
+
+	function handleSelect(item: Data) {
+		const event = new CustomEvent('datalist:select', { detail: item, bubbles: true });
+		if (element) element.dispatchEvent(event);
+	}
+
+	function fieldOrFunction(item: Data, field: string, defaultValue?: any): string {
+		const resolved = dataOp.resolveDotPath(item, field);
+		return typeof resolved === 'function' ? resolved(item) : resolved;
+	}
+
+	function checkGetter(columns: Record<string, DataCellType>, field: string, data: Data) {
+		const ret = columns[field]?.getter
+			? columns[field]?.getter(data)
+			: dataOp.resolveDotPath(data, field);
+		return sanitizeHtml(ret);
+	}
+
+	let cssVars = $derived(() => {
+		return Object.values($dataListContext.columns ?? []).reduce(
+			(previous, current, currentIndex) => {
+				const witdh = current?.width ?? 'auto';
+				return `${previous} minmax(${witdh},${witdh})`;
+			},
+			'--template-columns:'
+		);
+	});
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<tr
+	bind:this={element}
+	use:onEvent={{ event: 'datalist:sort:clicked', action: () => {} }}
+	onclick={() => {
+		if (data) handleClick(data);
+		if (data) handleSelect(data);
+	}}
+	class="dataListRow {className}"
+	style="{style};{cssVars}"
+	{...rest}
+>
+	{#if children}
+		<Slotted child={children}></Slotted>
+	{:else if $dataListContext.hasColumnsProps}
+		{#each Object.keys($dataListContext.columns) as inItem}
+			{@const field = $dataListContext.columns[inItem].field}
+			{@const final = checkGetter($dataListContext.columns, field, data)}
+			<!--  fieldOrFunction(data?.[field], field) -->
+			<DataListCell title={final} {field}>
+				{@html sanitizeHtml(checkGetter({ ...$dataListContext.columns }, field, data)) ?? ''}
+			</DataListCell>
+		{/each}
+	{:else}
+		{#each Object.keys(data) as inItem}
+			<DataListCell field={inItem}>
+				<Slotted child={children}></Slotted>
+			</DataListCell>
+		{/each}
+	{/if}
+</tr>
+
 <style>.dataListRow {
   /* grid-template-columns: var(--template-columns);
   grid-auto-columns: min-content; */
   content-visibility: auto;
   contain-intrinsic-size: 30px 500px;
-}</style>
+}</style>

package/dist/data/dataList/datalist.scss

@@ -1,157 +1,157 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-	--datalist-pad: var(--sld-pad-med);
-	--datalist-gap: var(--sld-gap-med);
-	--datalist-icon-color: #999;
-	--datalist-icon-color-hover: var(--sld-color-primary);
-	--datalist-divider-border: transparent;
-	--datalist-divider-border-hover: var(--sld-color-primary, red);
-	--datalist-background-color: var(--sld-color-paper-alpha-low);
-	--datalist-radius: var(--sld-radius-tiny);
-	--datalist-box-shadow: var(--sld-elevation-1);
-	--datalist-border: var(--sld-color-border);
-	--datalist-cell-border: var(--sld-color-border);
-	--datalist-cell-border-hover: var(--sld-color-primary-alpha);
-	--datalist-row-border: var(--sld-color-border);
-	--datalist-row-background-color-hover: var(--sld-color-paper);
-	--datalist-cell-color: var(--sld-color-foreground);
-	--datalist-cell-background-color-selected: var(--sld-color-primary);
-	--datalist-cell-color-selected: white;
-}
-
-.datalist {
-	height: 100%;
-	position: relative;
-
-	&-group {
-		@include slotui-mixins.flex(column);
-		&-wrapper {
-			@include slotui-mixins.flex(column);
-			height: 100%;
-		}
-
-		&-head {
-			@include slotui-mixins.flex(row, center);
-			padding: var(--datalist-pad);
-			gap: var(--datalist-gap);
-			cursor: pointer;
-
-			&-icon {
-				color: var(--datalist-icon-color);
-			}
-
-			&-divider {
-				border-bottom: 1px solid var(--datalist-divider-border);
-			}
-
-			&:hover {
-				&-icon {
-					color: var(--datalist-icon-color-hover);
-				}
-
-				&-divider {
-					flex: 1;
-					border-bottom-width: 1px;
-					border-color: var(--datalist-divider-border-hover);
-					cursor: pointer;
-				}
-			}
-		}
-
-		&-body {
-			flex: 1;
-			position: relative;
-		}
-	}
-}
-
-.datalist-group-head {
-	margin: 0.5rem 0;
-	align-items: stretch;
-	height: 32px;
-	z-index: 100;
-	background-color: var(--datalist-background-color);
-	backdrop-filter: blur(20px);
-	border-radius: var(--datalist-radius);
-	box-shadow: var(--datalist-box-shadow);
-	border: 1px solid var(--datalist-border);
-
-	.dataListCell {
-		display: flex;
-		align-items: stretch;
-		overflow: hidden;
-		border-right: 1px solid var(--datalist-cell-border);
-		position: relative;
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
-
-		&:last-of-type {
-			border-right: 1px solid transparent;
-		}
-
-		&[data-sortable="true"] {
-			cursor: pointer;
-			&:hover {
-				background-color: var(--datalist-cell-border-hover);
-			}
-		}
-
-		.cellHeader {
-			display: flex;
-			align-items: center;
-			min-width: 0;
-			width: 100%;
-
-			.cellHeaderContent {
-				flex: 1;
-				overflow: hidden;
-				padding: 0 8px;
-			}
-
-			.cellHeaderSorter {
-			}
-		}
-	}
-}
-
-:global(.dataListRow) {
-	border-bottom: 1px solid var(--datalist-row-border);
-	--webkit-content-visibility: auto;
-	webkit-content-visibility: auto;
-
-	&:last-of-type {
-		border-bottom: 1px solid transparent;
-	}
-
-	&:hover {
-		background-color: var(--datalist-row-background-color-hover);
-	}
-
-	&[aria-selected="true"] {
-		background-color: var(--datalist-cell-background-color-selected);
-
-		.dataListCell {
-			color: var(--datalist-cell-color-selected);
-		}
-	}
-
-	.dataListCell {
-		padding: 0.5rem 0.5rem;
-		color: var(--datalist-cell-color);
-		border-right: 1px solid var(--datalist-cell-border);
-
-		&:last-of-type {
-			border-right: 1px solid transparent;
-		}
-
-		&[data-noWrap="true"] {
-			display: box;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-	}
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+	--datalist-pad: var(--sld-pad-med);
+	--datalist-gap: var(--sld-gap-med);
+	--datalist-icon-color: #999;
+	--datalist-icon-color-hover: var(--sld-color-primary);
+	--datalist-divider-border: transparent;
+	--datalist-divider-border-hover: var(--sld-color-primary, red);
+	--datalist-background-color: var(--sld-color-paper-alpha-low);
+	--datalist-radius: var(--sld-radius-tiny);
+	--datalist-box-shadow: var(--sld-elevation-1);
+	--datalist-border: var(--sld-color-border);
+	--datalist-cell-border: var(--sld-color-border);
+	--datalist-cell-border-hover: var(--sld-color-primary-alpha);
+	--datalist-row-border: var(--sld-color-border);
+	--datalist-row-background-color-hover: var(--sld-color-paper);
+	--datalist-cell-color: var(--sld-color-foreground);
+	--datalist-cell-background-color-selected: var(--sld-color-primary);
+	--datalist-cell-color-selected: white;
+}
+
+.datalist {
+	height: 100%;
+	position: relative;
+
+	&-group {
+		@include slotui-mixins.flex(column);
+		&-wrapper {
+			@include slotui-mixins.flex(column);
+			height: 100%;
+		}
+
+		&-head {
+			@include slotui-mixins.flex(row, center);
+			padding: var(--datalist-pad);
+			gap: var(--datalist-gap);
+			cursor: pointer;
+
+			&-icon {
+				color: var(--datalist-icon-color);
+			}
+
+			&-divider {
+				border-bottom: 1px solid var(--datalist-divider-border);
+			}
+
+			&:hover {
+				&-icon {
+					color: var(--datalist-icon-color-hover);
+				}
+
+				&-divider {
+					flex: 1;
+					border-bottom-width: 1px;
+					border-color: var(--datalist-divider-border-hover);
+					cursor: pointer;
+				}
+			}
+		}
+
+		&-body {
+			flex: 1;
+			position: relative;
+		}
+	}
+}
+
+.datalist-group-head {
+	margin: 0.5rem 0;
+	align-items: stretch;
+	height: 32px;
+	z-index: 100;
+	background-color: var(--datalist-background-color);
+	backdrop-filter: blur(20px);
+	border-radius: var(--datalist-radius);
+	box-shadow: var(--datalist-box-shadow);
+	border: 1px solid var(--datalist-border);
+
+	.dataListCell {
+		display: flex;
+		align-items: stretch;
+		overflow: hidden;
+		border-right: 1px solid var(--datalist-cell-border);
+		position: relative;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+
+		&:last-of-type {
+			border-right: 1px solid transparent;
+		}
+
+		&[data-sortable="true"] {
+			cursor: pointer;
+			&:hover {
+				background-color: var(--datalist-cell-border-hover);
+			}
+		}
+
+		.cellHeader {
+			display: flex;
+			align-items: center;
+			min-width: 0;
+			width: 100%;
+
+			.cellHeaderContent {
+				flex: 1;
+				overflow: hidden;
+				padding: 0 8px;
+			}
+
+			.cellHeaderSorter {
+			}
+		}
+	}
+}
+
+:global(.dataListRow) {
+	border-bottom: 1px solid var(--datalist-row-border);
+	--webkit-content-visibility: auto;
+	webkit-content-visibility: auto;
+
+	&:last-of-type {
+		border-bottom: 1px solid transparent;
+	}
+
+	&:hover {
+		background-color: var(--datalist-row-background-color-hover);
+	}
+
+	&[aria-selected="true"] {
+		background-color: var(--datalist-cell-background-color-selected);
+
+		.dataListCell {
+			color: var(--datalist-cell-color-selected);
+		}
+	}
+
+	.dataListCell {
+		padding: 0.5rem 0.5rem;
+		color: var(--datalist-cell-color);
+		border-right: 1px solid var(--datalist-cell-border);
+
+		&:last-of-type {
+			border-right: 1px solid transparent;
+		}
+
+		&[data-noWrap="true"] {
+			display: box;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+}

package/dist/data/finder/Finder.demo.svelte

@@ -1,55 +1,55 @@
-<script lang="ts">
-	import Demoer from '../../base/demoer/Demoer.svelte';
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Jsoner from '../jsoner/Jsoner.svelte';
-	import Finder from './Finder.svelte';
-
-	import { parameters, componentArgs } from './types.js';
-
-	let data = [
-		{ id: 1, name: 'i', surname: 'am', lastname: 'groot' },
-		{ id: 2, name: 'he', surname: 'is', lastname: 'groot' },
-		{ id: 3, name: 'you', surname: 'are', lastname: 'groot' }
-	];
-
-	let filteredData: any = [];
-</script>
-
-<ComponentDemo
-	component="Finder"
-	cite="This constant need about knowing what i was looking for, this need, i gave it a name.<br /> H.
-Maifield, 1996"
->
-	<div class="flex-v gap-medium">
-		<Demoer {parameters}>
-			{#snippet children({ activeParams })}
-				<Finder {...activeParams} style="width:200px" bind:filteredData {data} />
-			{/snippet}
-		</Demoer>
-		<h5>Props</h5>
-		<div class="flex-v gap-medium">
-			<h6>Default props</h6>
-			<div>
-				<Finder defaultField="id" class="marg-b" style="width:200px" bind:filteredData {data} />
-			</div>
-			<h6>Automatic fields menu</h6>
-			<div>
-				<Finder
-					defaultField="id"
-					class="marg-b"
-					showSortMenu={true}
-					style="width:200px"
-					bind:filteredData
-					{data}
-				/>
-			</div>
-		</div>
-	</div>
-	<br />
-	<div class="flex-v gap-medium">
-		<h5>Results</h5>
-		<div class="flex-h gap-medium">
-			<div class="w-large flex-main"><Jsoner data={filteredData} /></div>
-		</div>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Jsoner from '../jsoner/Jsoner.svelte';
+	import Finder from './Finder.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+
+	let data = [
+		{ id: 1, name: 'i', surname: 'am', lastname: 'groot' },
+		{ id: 2, name: 'he', surname: 'is', lastname: 'groot' },
+		{ id: 3, name: 'you', surname: 'are', lastname: 'groot' }
+	];
+
+	let filteredData: any = [];
+</script>
+
+<ComponentDemo
+	component="Finder"
+	cite="This constant need about knowing what i was looking for, this need, i gave it a name.<br /> H.
+Maifield, 1996"
+>
+	<div class="flex-v gap-medium">
+		<Demoer {parameters}>
+			{#snippet children({ activeParams })}
+				<Finder {...activeParams} style="width:200px" bind:filteredData {data} />
+			{/snippet}
+		</Demoer>
+		<h5>Props</h5>
+		<div class="flex-v gap-medium">
+			<h6>Default props</h6>
+			<div>
+				<Finder defaultField="id" class="marg-b" style="width:200px" bind:filteredData {data} />
+			</div>
+			<h6>Automatic fields menu</h6>
+			<div>
+				<Finder
+					defaultField="id"
+					class="marg-b"
+					showSortMenu={true}
+					style="width:200px"
+					bind:filteredData
+					{data}
+				/>
+			</div>
+		</div>
+	</div>
+	<br />
+	<div class="flex-v gap-medium">
+		<h5>Results</h5>
+		<div class="flex-h gap-medium">
+			<div class="w-large flex-main"><Jsoner data={filteredData} /></div>
+		</div>
+	</div>
+</ComponentDemo>