@medyll/idae-slotui-svelte 0.67.0 → 0.69.0

package/dist/data/dataList/DataList.svelte

@@ -1,118 +1,142 @@
-<script lang="ts" generics="T=Data">import { getContext, hasContext, setContext } from "svelte";
-import { writable } from "svelte/store";
-import DataListRow from "./DataListRow.svelte";
-import { dataOp } from "../../utils/engine/utils.js";
-import DataListHead from "./DataListHead.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Button from "../../controls/button/Button.svelte";
-import ContextRooter from "../../utils/contextRooter/ContextRooter.svelte";
-import sanitizeHtml from "sanitize-html";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-export const sortingIcons = {
-  default: ["mdi:dots-horizontal", "mdi:sort-bool-ascending", "mdi:sort-bool-descending"],
-  numeric: ["mdi:dots-horizontal", "mdi:sort-bool-ascending", "mdi:sort-bool-descending"]
-};
-let {
-  class: className = "",
-  style = "",
-  element = null,
-  showHeader = true,
-  isSortable = true,
-  sortByOrder = "none",
-  groupByField = void 0,
-  groupByOptions = {
-    showMainHeader: true,
-    showSubGroupsHeader: true,
-    showEmptyGroup: false
-  },
-  selectorField = "id",
-  selectorFieldValue = void 0,
-  activeCommonSortField = "",
-  noWrap = true,
-  noWrapHeader = true,
-  dataTypes = void 0,
-  data = [],
-  idField = void 0,
-  columns = {},
-  virtualizer = false,
-  isLoading = false,
-  fieldValue,
-  dataListRow,
-  dataListHead,
-  dataListCell,
-  dataListFooter,
-  groupTitleSlot
-} = $props();
-let hidedGroups = {};
-let sortedData = $derived(data?.filter((x) => x));
-let groups = $derived(
-  groupByField ? dataOp.groupBy(data, groupByField, {
-    keepUngroupedData: Boolean(groupByOptions.showEmptyGroup)
-  }) : {}
-);
-let dataListContext;
-if (hasContext("dataListContext")) {
-  getContext("dataListContext");
-} else {
-  let dataListStore = writable({
-    config: {
-      isSortable,
-      defaultSortByField: void 0,
-      defaultSortByOrder: sortByOrder,
-      sortingIcons,
-      noWrap,
-      dataTypes
-    },
-    sortBy: {
-      activeSortByField: void 0,
-      activeSortByOrder: "none"
-    },
-    groupBy: {
-      groupByField,
-      groupByOptions
-    },
-    idField,
-    columns,
-    hasColumnsProps: Boolean(Object.keys(columns).length),
-    data
-  });
-  setContext("dataListContext", dataListStore);
-}
-function doSort(e) {
-  if (e.detail.field) {
-    activeCommonSortField = e.detail.field;
-    sortByOrder = e.detail.order;
-    if (e.detail.order === "none") {
-    } else {
-    }
-  }
-}
-function doSelect(e) {
-  const selectedItem = e.detail;
-  selectorFieldValue = selectedItem?.[selectorField];
-}
-function getGroupProps(content) {
-  return {
-    ...content,
-    columns,
-    style,
-    groupByField: void 0,
-    groupByOptions,
-    showHeader: groupByOptions.showSubGroupsHeader,
-    selectorField,
-    selectorFieldValue,
-    virtualizer,
-    isLoading
-  };
-}
-function checkGetter(columns2, field, data2) {
-  const ret = columns2[field]?.getter ? columns2[field]?.getter(data2) : dataOp.resolveDotPath(data2, field);
-  return sanitizeHtml(ret);
-}
-$effect(() => {
-  element?.addEventListener("datalist:sorted", doSort);
-  element?.addEventListener("datalist:select", doSelect);
-});
+<script lang="ts" generics="T=Data">
+	import { getContext, hasContext, setContext } from 'svelte';
+	import { writable, type Writable } from 'svelte/store';
+	import DataListRow from './DataListRow.svelte';
+	import type { DataCellType, DataListProps, DataListStoreType } from './types.js';
+	import { dataOp } from '../../utils/engine/utils.js';
+	import DataListHead from './DataListHead.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Button from '../../controls/button/Button.svelte';
+	import type { Data, ExpandProps } from '../../types/index.js';
+	import ContextRooter from '../../utils/contextRooter/ContextRooter.svelte';
+	import sanitizeHtml from 'sanitize-html';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+
+	export const sortingIcons = {
+		default: ['mdi:dots-horizontal', 'mdi:sort-bool-ascending', 'mdi:sort-bool-descending'],
+		numeric: ['mdi:dots-horizontal', 'mdi:sort-bool-ascending', 'mdi:sort-bool-descending']
+	};
+
+	let {
+		class: className = '',
+		style = '',
+		element = null,
+		showHeader = true,
+		isSortable = true,
+		sortByOrder = 'none',
+		groupByField = undefined,
+		groupByOptions = {
+			showMainHeader: true,
+			showSubGroupsHeader: true,
+			showEmptyGroup: false
+		},
+		selectorField = 'id',
+		selectorFieldValue = undefined,
+		activeCommonSortField = '',
+		noWrap = true,
+		noWrapHeader = true,
+		dataTypes = undefined,
+		data = [],
+		idField = undefined,
+		columns = {},
+		virtualizer = false,
+		isLoading = false,
+		fieldValue,
+		dataListRow,
+		dataListHead,
+		dataListCell,
+		dataListFooter,
+		groupTitleSlot
+	}: ExpandProps<DataListProps<T>> = $props();
+
+	let hidedGroups: Data = {};
+
+	let sortedData: any[] = $derived(data?.filter((x) => x));
+
+	let groups = $derived(
+		groupByField
+			? dataOp.groupBy(data, groupByField, {
+					keepUngroupedData: Boolean(groupByOptions.showEmptyGroup)
+				})
+			: {}
+	);
+
+	let dataListContext: Writable<DataListStoreType>;
+
+	if (hasContext('dataListContext')) {
+		getContext<Writable<DataListStoreType>>('dataListContext');
+	} else {
+		/** context store for dataList config and state */
+		let dataListStore = writable<DataListStoreType>({
+			config: {
+				isSortable,
+				defaultSortByField: undefined,
+				defaultSortByOrder: sortByOrder,
+				sortingIcons,
+				noWrap,
+				dataTypes
+			},
+			sortBy: {
+				activeSortByField: undefined,
+				activeSortByOrder: 'none'
+			},
+			groupBy: {
+				groupByField,
+				groupByOptions
+			},
+			idField,
+			columns,
+			hasColumnsProps: Boolean(Object.keys(columns).length),
+			data
+		});
+
+		setContext<Writable<DataListStoreType>>('dataListContext', dataListStore);
+	}
+
+	function doSort(e: CustomEvent<{ field: string; order: string }>) {
+		if (e.detail.field) {
+			activeCommonSortField = e.detail.field;
+			sortByOrder = e.detail.order;
+
+			if (e.detail.order === 'none') {
+				//sortedData = data;
+			} else {
+				//sortedData = dataOp.sortBy(data, e.detail.field, e.detail.order);
+			}
+		}
+	}
+
+	function doSelect(e: CustomEvent<Data>) {
+		const selectedItem = e.detail;
+		selectorFieldValue = selectedItem?.[selectorField];
+	}
+
+	function getGroupProps(content: any) {
+		return {
+			...content,
+			columns,
+			style,
+			groupByField: undefined,
+			groupByOptions,
+			showHeader: groupByOptions.showSubGroupsHeader,
+			selectorField,
+			selectorFieldValue,
+			virtualizer,
+			isLoading
+		};
+	}
+
+	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);
+	}
+
+	$effect(() => {
+		element?.addEventListener('datalist:sorted', doSort);
+		element?.addEventListener('datalist:select', doSelect);
+	});
 </script>
 
 {#snippet listCell(item, inItem)}

package/dist/data/dataList/DataListCell.svelte

@@ -1,102 +1,152 @@
 <svelte:options />
 
 <!-- trigger action on datalist -->
-<script lang="ts" generics="T=Data">import { getContext, tick } from "svelte";
-import { resizer } from "../../utils/uses/resizer/resizer.js";
-import Icon from "../../base/icon/Icon.svelte";
-import Chipper from "../../base/chipper/Chipper.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import { onEvent } from "../../utils/uses/event.js";
-const dataListContext = getContext("dataListContext");
-const inHeader = getContext("dataListHead");
-const rowContext = getContext("dataListRow");
-let className = "";
-export { className as class };
-let {
-  element = $bindable(),
-  field,
-  style,
-  fieldType,
-  columnId = field ?? crypto.randomUUID(),
-  noWrap = true,
-  title,
-  children,
-  ...rest
-} = $props();
-let colIndex;
-let minWidth = "80px";
-$effect(() => {
-  if (inHeader) {
-    colIndex = element ? [...element.parentElement?.children ?? []].indexOf(element) : -1;
-    if ($dataListContext.hasColumnsProps && field) {
-      if (!$dataListContext.columns[field]) {
-        tick();
-        createColumnsDef(element, field, colIndex);
-      }
-      if (!$dataListContext.columns[field]?.width) {
-        tick();
-        $dataListContext.columns[field].width = element.offsetWidth + "px";
-      }
-    } else if ($dataListContext.hasColumnsProps) {
-      tick();
-      field = getAutoFields($dataListContext.data)[colIndex];
-    } else if (field) {
-      createColumnsDef(element, field, colIndex);
-    } else {
-      createColumnsDef(element, crypto.randomUUID(), colIndex);
-    }
-  }
-  return () => {
-    columnId = void 0;
-  };
-});
-const createColumnsDef = async (element, field, index) => {
-  if (!element) return;
-  await tick();
-  $dataListContext.columns[field] = {
-    field,
-    style: element.getAttribute("style") ?? "",
-    width: element.offsetWidth + "px",
-    order: Boolean(element.style?.order) ? eval(element.style.order) : index,
-    index,
-    columnId: field
-  };
-  $dataListContext.hasColumnsProps = true;
-};
-const updateColumnsDef = async (field2, payload) => {
-  await tick();
-  $dataListContext.columns[field2] = {
-    ...$dataListContext.columns[field2],
-    ...payload
-  };
-};
-const getAutoFields = (data) => {
-  return Object.keys(data[0]);
-};
-const onSort = (field2) => {
-  const event = new CustomEvent("datalist:sort:clicked", { detail: { field: field2 }, bubbles: true });
-  if (element) element.dispatchEvent(event);
-};
-const useResizer = (node, opt) => {
-  if (inHeader) resizer(node, opt);
-};
-function resizeStart() {
-}
-async function resizeOn(data) {
-  await tick();
-  $dataListContext.columns[field].width = data.detail.width + "px";
-}
-function resizeEnd() {
-}
-const sortState = ["none", "asc", "desc"];
-let sorticon;
-let showChip;
-let timerWidth;
-let finalWidthStyle = "";
-$effect(() => {
-  sorticon = $dataListContext.sortBy.activeSortByField === field ? $dataListContext?.config?.sortingIcons?.default[sortState.indexOf($dataListContext?.sortBy?.activeSortByOrder)] : "mdi:dots-horizontal";
-  showChip = $dataListContext.sortBy.activeSortByField === field;
-});
+<script lang="ts" generics="T=Data">
+	import type { DataCellType, DataListCellProps, DataListStoreType, RowType } from './types.js';
+	import { getContext, tick } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import { resizer } from '../../utils/uses/resizer/resizer.js';
+	import type { Data, ExpandProps } from '../../types/index.js';
+	import Icon from '../../base/icon/Icon.svelte';
+	import Chipper from '../../base/chipper/Chipper.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import { onEvent } from '../../utils/uses/event.js';
+
+	const dataListContext = getContext<Writable<DataListStoreType>>('dataListContext');
+	const inHeader = getContext<Writable<DataCellType[]>>('dataListHead');
+	const rowContext = getContext<Writable<RowType>>('dataListRow');
+
+	let className = '';
+	export { className as class };
+
+	let {
+		element = $bindable(),
+		field,
+		style,
+		fieldType,
+		columnId = field ?? (crypto.randomUUID() as string),
+		noWrap = true,
+		title,
+		children,
+		...rest
+	}: ExpandProps<DataListCellProps<T>> = $props();
+
+	let colIndex: number;
+
+	let minWidth = '80px';
+
+	$effect(() => {
+		// if inHeader take the width from
+		// - the columns and dataField :  set it to the element
+		// - the columns and element index :  set it to the element
+		// - the element with : don't do nothing, but should ! throw error ?
+
+		if (inHeader) {
+			colIndex = element ? [...(element.parentElement?.children ?? [])].indexOf(element) : -1;
+			if ($dataListContext.hasColumnsProps && field) {
+				// console.log('hasColumnsProps && field');
+				if (!$dataListContext.columns[field]) {
+					tick();
+					// console.log(0);
+					createColumnsDef(element, field, colIndex);
+				}
+				if (!$dataListContext.columns[field]?.width) {
+					tick();
+					// console.log(field, element.offsetWidth);
+					$dataListContext.columns[field].width = element.offsetWidth + 'px';
+				}
+			} else if ($dataListContext.hasColumnsProps) {
+				tick();
+				// console.log(2);
+				// grab and declare field from data
+				field = getAutoFields($dataListContext.data)[colIndex];
+			} else if (field) {
+				// console.log(3);
+
+				// throw new Error('props.field found without column declaration : '+field);
+				createColumnsDef(element, field, colIndex);
+			} else {
+				// console.log(4);
+				// create a dummy field for reference
+				createColumnsDef(element, crypto.randomUUID(), colIndex);
+			}
+		}
+
+		return () => {
+			columnId = undefined;
+		};
+	});
+
+	const createColumnsDef = async (element: HTMLElement, field: string, index: number) => {
+		if (!element) return;
+		await tick();
+		$dataListContext.columns[field] = {
+			field,
+			style: element.getAttribute('style') ?? '',
+			width: element.offsetWidth + 'px',
+			order: Boolean(element.style?.order) ? eval(element.style.order) : index,
+			index: index,
+			columnId: field
+		};
+		$dataListContext.hasColumnsProps = true;
+	};
+
+	const updateColumnsDef = async (field: string, payload: Record<string, any>) => {
+		await tick();
+		$dataListContext.columns[field] = {
+			...$dataListContext.columns[field],
+			...payload
+		};
+	};
+
+	/**
+	 * used if no columns and no props.field
+	 * @param data
+	 */
+	const getAutoFields = (data: Record<string, any>[]): string[] => {
+		return Object.keys(data[0]);
+	};
+
+	const onSort = (field: string) => {
+		const event = new CustomEvent('datalist:sort:clicked', { detail: { field }, bubbles: true });
+		if (element) element.dispatchEvent(event);
+	};
+
+	// not pure
+	const useResizer = (node: HTMLElement, opt?: any) => {
+		if (inHeader) resizer(node, opt);
+	};
+
+	function resizeStart() {}
+
+	async function resizeOn(data: CustomEvent<{ width: any }>) {
+		await tick();
+		$dataListContext.columns[field].width = data.detail.width + 'px';
+	}
+	function resizeEnd() {}
+
+	const sortState: string[] = ['none', 'asc', 'desc'];
+	let sorticon: string;
+	let showChip: boolean;
+
+	let timerWidth: any;
+	let finalWidthStyle: string = '';
+
+	$effect(() => {
+		sorticon =
+			$dataListContext.sortBy.activeSortByField === field
+				? $dataListContext?.config?.sortingIcons?.default[
+						sortState.indexOf($dataListContext?.sortBy?.activeSortByOrder)
+					]
+				: 'mdi:dots-horizontal';
+
+		showChip = $dataListContext.sortBy.activeSortByField === field;
+	});
+
+	/* $: if ($dataListContext.columns[field].width) {
+    const w = $dataListContext.columns[field].width;
+    finalWidthStyle = `min-width:${w};width:max-width:${w};`;
+  } */
 </script>
 
 {#if inHeader}

package/dist/data/dataList/DataListHead.svelte

@@ -1,39 +1,55 @@
-<script lang="ts">import { getContext, setContext } from "svelte";
-import { writable } from "svelte/store";
-import DataListCell from "./DataListCell.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-import { onEvent } from "../../utils/uses/event.js";
-let {
-  style,
-  element,
-  stickyHeader = true,
-  onSort = () => {
-  },
-  children
-} = $props();
-const dataListContext = getContext("dataListContext");
-const headerer = writable([]);
-setContext("dataListHead", headerer);
-function doSort(e) {
-  let activeSortByOrder = $dataListContext.sortBy.activeSortByOrder;
-  const sortByOrder = activeSortByOrder === "none" ? "desc" : activeSortByOrder === "asc" ? "desc" : "asc";
-  $dataListContext.sortBy.activeSortByField = e.detail.field;
-  $dataListContext.sortBy.activeSortByOrder = sortByOrder;
-  const event = new CustomEvent("datalist:sorted", {
-    detail: { field: e.detail.field, order: sortByOrder },
-    bubbles: true
-  });
-  if (element) element.dispatchEvent(event);
-}
-function setCssGrid(columns) {
-  if (Object.values(columns ?? []).every((e) => e.width)) {
-    return Object.values(columns ?? []).reduce((previous, current, currentIndex) => {
-      const witdh = current?.width ?? "auto";
-      return `${previous} minmax(${witdh},${witdh})`;
-    }, "--template-columns:");
-  }
-}
-let cssVars = setCssGrid($dataListContext.columns ?? []);
+<script lang="ts">
+	import type { DataListHeadProps, DataListStoreType } from './types.js';
+	import { getContext, setContext } from 'svelte';
+	import { writable, type Writable } from 'svelte/store';
+	import type { DataCellType } from './types.js';
+	import DataListCell from './DataListCell.svelte';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import { onEvent } from '../../utils/uses/event.js';
+	import type { ExpandProps } from '../../types/index.js';
+
+	let {
+		style,
+		element,
+		stickyHeader = true,
+		onSort = () => {},
+		children
+	}: ExpandProps<DataListHeadProps> = $props();
+
+	const dataListContext = getContext<Writable<DataListStoreType>>('dataListContext');
+	// this head is a head
+	// cells give width for the whole dataList
+	const headerer = writable<DataCellType[]>([]);
+
+	setContext('dataListHead', headerer);
+
+	function doSort(e: CustomEvent<{ field: string }>) {
+		let activeSortByOrder = $dataListContext.sortBy.activeSortByOrder;
+		const sortByOrder =
+			activeSortByOrder === 'none' ? 'desc' : activeSortByOrder === 'asc' ? 'desc' : 'asc';
+
+		$dataListContext.sortBy.activeSortByField = e.detail.field;
+		$dataListContext.sortBy.activeSortByOrder = sortByOrder;
+
+		// fire event
+		const event = new CustomEvent('datalist:sorted', {
+			detail: { field: e.detail.field, order: sortByOrder },
+			bubbles: true
+		});
+
+		if (element) element.dispatchEvent(event);
+	}
+
+	function setCssGrid(columns: DataCellType[]) {
+		if (Object.values(columns ?? []).every((e) => e.width)) {
+			return Object.values(columns ?? []).reduce((previous, current, currentIndex) => {
+				const witdh = current?.width ?? 'auto';
+				return `${previous} minmax(${witdh},${witdh})`;
+			}, '--template-columns:');
+		}
+	}
+
+	let cssVars = setCssGrid($dataListContext.columns ?? []);
 </script>
 
 <thead