@medyll/idae-slotui-svelte 0.3.0

package/dist/data/dataList/DataListRow.svelte

@@ -0,0 +1,84 @@
+<script lang="ts" generics="T=Data">import sanitizeHtml from "sanitize-html";
+import { writable } from "svelte/store";
+import DataListCell from "./DataListCell.svelte";
+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
+} = $props();
+const dataStore = writable({ data });
+setContext("dataListRow", dataStore);
+const dataListContext = getContext("dataListContext");
+function handleClick(item) {
+  const event = new CustomEvent("datalist:click", { detail: item, bubbles: true });
+  if (element) element.dispatchEvent(event);
+}
+function handleSelect(item) {
+  const event = new CustomEvent("datalist:select", { detail: item, bubbles: true });
+  if (element) element.dispatchEvent(event);
+}
+function fieldOrFunction(item, field, defaultValue) {
+  const resolved = dataOp.resolveDotPath(item, field);
+  return typeof resolved === "function" ? resolved(item) : resolved;
+}
+function checkGetter(columns, field, data2) {
+  const ret = columns[field]?.getter ? columns[field]?.getter(data2) : dataOp.resolveDotPath(data2, 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>

package/dist/data/dataList/DataListRow.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+import type { Data } from '../../types/index.js';
+import type { DataListRowProps } from './types.js';
+declare class __sveltets_Render<T = Data> {
+    props(): DataListRowProps<T>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type DataListRowProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type DataListRowEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type DataListRowSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class DataListRow<T = Data> extends SvelteComponent<DataListRowProps_<T>, DataListRowEvents<T>, DataListRowSlots<T>> {
+}
+export {};

package/dist/data/dataList/datalist.scss

@@ -0,0 +1,157 @@
+@import "../../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 flex(column);
+		&-wrapper {
+			@include flex(column);
+			height: 100%;
+		}
+
+		&-head {
+			@include 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);
+	}
+
+	&[data-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/dataList/types.d.ts

@@ -0,0 +1,138 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps, Data } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type DataListProps<T = Data> = {
+    /** className off the root component */
+    class?: string;
+    /** css style off the root component */
+    style?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement | null;
+    /** show or hide the dataList header */
+    showHeader?: boolean;
+    /** is the datalist sortable */
+    isSortable?: boolean;
+    /** order on which the sorted list is sorted */
+    sortByOrder?: 'asc' | 'desc' | 'none' | string;
+    /** group field on which data will be grouped, can use dot notation as dot path */
+    groupByField?: string | string[];
+    /** options used when props.groupByField is defined */
+    groupByOptions?: groupByOptions;
+    /** field used for selection */
+    selectorField?: string;
+    fieldValue?: any;
+    /** field value used for selection */
+    selectorFieldValue?: any;
+    /** binding, used when multiple buttons */
+    activeCommonSortField?: string;
+    /** set noWrap = true to have ellipsis on all cells content */
+    noWrap?: boolean;
+    /** set noWrap = true to have ellipsis on all header cells content */
+    noWrapHeader?: boolean;
+    /** represents your data types used to display values */
+    dataTypes?: Record<string, any>;
+    /** data to loop through */
+    data?: T[];
+    /** used only if data is provided */
+    idField?: string;
+    /** columns declaration */
+    columns?: Record<string, DataCellType>;
+    /** Virtualizer instance for the list */
+    virtualizer?: boolean;
+    /** Loading state of the list */
+    isLoadingDrawerProps?: boolean;
+    dataListHead?: Snippet;
+    dataListFooter?: Snippet;
+    dataListRow?: Snippet<[{
+        rawData: Data;
+        item: Data;
+    }]>;
+    dataListCell?: Snippet<[{
+        fieldType: string;
+        fieldName: string;
+        fieldValue: any;
+    }]>;
+    groupTitleSlot?: Snippet<[{
+        item: Data;
+    }]>;
+};
+export declare const DataListDemoValues: DemoerStoryProps<DataListProps<any>>;
+export type DataListHeadProps = {
+    style?: string;
+    element?: HTMLDivElement;
+    stickyHeader?: boolean;
+    onSort?: Function;
+    children?: Snippet;
+};
+export type DataListRowProps<T> = CommonProps & {
+    /** data for the row */
+    data: T;
+    /** children snippet for the default cell content */
+    children?: Snippet;
+};
+export interface DataCellType {
+    /** internal use */
+    index?: number;
+    /** column identifier data.id ?? generated */
+    columnId?: string | number;
+    width: string;
+    /** applied inline css style to header */
+    headerStyle?: string;
+    style?: string;
+    order?: number;
+    /** data field */
+    field?: string;
+    /** data field title shown in header*/
+    fieldTitle?: string;
+    /** use as convenience */
+    fieldType?: string;
+    /** transform data */
+    getter?: (data: Record<string, unknown>) => void;
+    htmlElement?: HTMLElement;
+}
+export type DataListCellProps<T> = {
+    element?: HTMLElement;
+    field?: string;
+    style?: string;
+    fieldType?: string;
+    columnId?: string | number;
+    noWrap?: boolean;
+    title?: string;
+    children?: Snippet<[{
+        fieldData: T;
+    }]>;
+};
+export interface RowType {
+    data?: Data;
+}
+export interface groupByOptions {
+    showMainHeader?: boolean;
+    showSubGroupsHeader?: boolean;
+    showEmptyGroup?: boolean;
+    subPaginationSize?: number;
+}
+export interface DataListStoreType {
+    config: {
+        isSortable?: boolean;
+        defaultSortByField?: string;
+        defaultSortByOrder: 'asc' | 'desc' | 'none' | string;
+        sortingIcons: Record<string, string[]>;
+        noWrap?: boolean;
+        dataTypes?: Record<string, (item: any) => any>;
+    };
+    sortBy: {
+        activeSortByField?: string;
+        activeSortByOrder?: 'asc' | 'desc' | 'none' | string;
+    };
+    groupBy: {
+        groupByField: string | string[];
+        groupByOptions: groupByOptions;
+    };
+    idField?: string;
+    selectedRowId?: string;
+    columns: Record<string, DataCellType>;
+    headerNodes?: Record<string, DataCellType>;
+    hasColumnsProps?: boolean;
+    data: Data[];
+}
+export declare let parameters: DemoerStoryProps<DataListProps<any>>, componentArgs: DataListProps<any>;

package/dist/data/dataList/types.js

@@ -0,0 +1,83 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+export const DataListDemoValues = {
+    data: {
+        type: 'data',
+        values: [[{ name: 'name1' }, { name: 'name2' }]],
+        private: true
+    },
+    isSortable: {
+        type: 'boolean'
+    },
+    sortByOrder: {
+        type: 'string',
+        values: ['asc', 'desc', 'none'],
+        default: 'none'
+    },
+    groupByField: {
+        type: 'string',
+        values: [undefined, 'name']
+    },
+    groupByOptions: {
+        type: 'object',
+        values: [
+            {
+                showMainHeader: true,
+                showSubGroupsHeader: true,
+                showEmptyGroup: true,
+                subPaginationSize: 10
+            }
+        ]
+    },
+    selectorField: {
+        type: 'string',
+        values: ['name']
+    },
+    selectorFieldValue: {
+        type: 'string',
+        values: ['name']
+    },
+    activeCommonSortField: {
+        type: 'string',
+        values: ['name']
+    },
+    noWrap: {
+        type: 'boolean'
+    },
+    noWrapHeader: {
+        type: 'boolean'
+    },
+    columns: {
+        type: 'object',
+        values: [{ name: 'name' }]
+    }
+};
+/* 	let parameters: any = {
+        groupByField: {
+            type: 'string',
+            values: ['group', 'groupByObjectKey', 'groupByArrayObjectKey', undefined]
+        },
+        virtualizer: {
+            type: 'boolean',
+            values: [true, false]
+        },
+        isSortable: {
+            type: 'boolean',
+            values: [true, false]
+        }
+    }; */
+const dataListDemoValues = {
+    data: {
+        type: 'data',
+        values: [[{ name: 'name1' }, { name: 'name2' }]],
+        private: true
+    },
+    isSortable: {
+        type: 'boolean',
+        values: [true, false]
+    },
+    groupByField: {
+        type: 'string',
+        values: [undefined, 'group', 'groupByObjectKey', 'groupByArrayObjectKey']
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(dataListDemoValues);

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

@@ -0,0 +1,51 @@
+<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 = [];
+</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>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FinderProps = typeof __propDef.props;
+export type FinderEvents = typeof __propDef.events;
+export type FinderSlots = typeof __propDef.slots;
+export default class Finder extends SvelteComponent<FinderProps, FinderEvents, FinderSlots> {
+}
+export {};