@medyll/idae-slotui-svelte 0.3.0

package/dist/data/dataList/DataList.svelte

@@ -0,0 +1,366 @@
+<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>
+
+{#snippet listCell(item, inItem)}
+	{@render dataListCell?.({
+		fieldName: $dataListContext.columns[inItem]?.field,
+		fieldType: $dataListContext.columns[inItem]?.fieldType,
+		fieldValue: sanitizeHtml(checkGetter({ ...$dataListContext.columns }, inItem, item)),
+		fieldRawValue: sanitizeHtml(checkGetter({ ...$dataListContext.columns }, inItem, item))
+	})}
+{/snippet}
+
+<ContextRooter bind:contextRoot={dataListContext} contextKey="dataListContext" />
+{#if groupByField}
+	{#if groupByOptions?.showMainHeader}
+		<DataListHead />
+	{/if}
+	<div bind:this={element} class="datalist-group-wrapper">
+		{#each Object.keys(groups) as red}
+			{@const groupProps = getGroupProps({ data: groups[red] })}
+			{@const item = groups[red]}
+			<div class="datalist-group">
+				<header>
+					<Slotted child={groupTitleSlot} slotArgs={{ item }}>
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="datalist-group-head"
+							onclick={() => {
+								hidedGroups[red] = !hidedGroups[red];
+							}}
+						>
+							<div class="datalist-group-head-icon">
+								<Icon class="datalist-group-head-icon" icon="cil:object-group" />
+							</div>
+							<div>{groupByField} : <span class="text-bold">{red}</span></div>
+							<div class="datalist-group-head-divider" />
+							<div>{groups[red]?.length}</div>
+							<div class="datalist-group-head-icon">
+								<Button
+									onclick={() => {
+										hidedGroups[red] = !hidedGroups[red];
+									}}
+									icon={hidedGroups[red] ? 'chevron-up' : 'chevron-down'}
+									variant="naked"
+								/>
+							</div>
+						</div>
+					</Slotted>
+				</header>
+				<div class="datalist-group-body">
+					{#if !hidedGroups[red]}
+						<svelte:self {...groupProps}>
+							<Slotted child={dataListCell} slotArgs={{ fieldType, fieldName, fieldValue }} />
+							<Slotted child={groupTitleSlot} slotArgs={{ item: {} }} />
+						</svelte:self>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+{:else}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<table bind:this={element} class="datalist {className}" {style} tabindex="0">
+		{#if element}
+			{#if showHeader}
+				<Slotted child={dataListHead}><DataListHead /></Slotted>
+			{/if}
+			{#each sortedData as item}
+				<Slotted child={dataListRow} slotArgs={{ rawData: item, item }}>
+					<DataListRow
+						class={item[selectorField] === selectorFieldValue ? 'theme-bg-paper' : ''}
+						data={item}
+					>
+						{#if $dataListContext.hasColumnsProps}
+							{#each Object.keys($dataListContext.columns) as inItem}
+								{@render listCell(item, inItem)}
+							{/each}
+						{:else}
+							{#each Object.keys(item) as inItem}
+								{@render listCell(item, inItem)}
+							{/each}
+						{/if}
+					</DataListRow>
+				</Slotted>
+			{/each}
+		{/if}
+
+		<Slotted child={dataListFooter} />
+	</table>
+{/if}
+
+<style global>: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;
+}
+
+.datalist-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.datalist-group-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 100%;
+}
+
+.datalist-group-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--datalist-pad);
+  gap: var(--datalist-gap);
+  cursor: pointer;
+}
+
+.datalist-group-head-icon {
+  color: var(--datalist-icon-color);
+}
+
+.datalist-group-head-divider {
+  border-bottom: 1px solid var(--datalist-divider-border);
+}
+
+.datalist-group-head:hover-icon {
+  color: var(--datalist-icon-color-hover);
+}
+
+.datalist-group-head:hover-divider {
+  flex: 1;
+  border-bottom-width: 1px;
+  border-color: var(--datalist-divider-border-hover);
+  cursor: pointer;
+}
+
+.datalist-group-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);
+}
+
+.datalist-group-head .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;
+}
+
+.datalist-group-head .dataListCell:last-of-type {
+  border-right: 1px solid transparent;
+}
+
+.datalist-group-head .dataListCell[data-sortable=true] {
+  cursor: pointer;
+}
+
+.datalist-group-head .dataListCell[data-sortable=true]:hover {
+  background-color: var(--datalist-cell-border-hover);
+}
+
+.datalist-group-head .dataListCell .cellHeader {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+}
+
+.datalist-group-head .dataListCell .cellHeader .cellHeaderContent {
+  flex: 1;
+  overflow: hidden;
+  padding: 0 8px;
+}
+
+:global(.dataListRow) {
+  border-bottom: 1px solid var(--datalist-row-border);
+  --webkit-content-visibility: auto;
+  webkit-content-visibility: auto;
+}
+
+:global(.dataListRow):last-of-type {
+  border-bottom: 1px solid transparent;
+}
+
+:global(.dataListRow):hover {
+  background-color: var(--datalist-row-background-color-hover);
+}
+
+:global(.dataListRow)[data-selected=true] {
+  background-color: var(--datalist-cell-background-color-selected);
+}
+
+:global(.dataListRow)[data-selected=true] .dataListCell {
+  color: var(--datalist-cell-color-selected);
+}
+
+:global(.dataListRow) .dataListCell {
+  padding: 0.5rem 0.5rem;
+  color: var(--datalist-cell-color);
+  border-right: 1px solid var(--datalist-cell-border);
+}
+
+:global(.dataListRow) .dataListCell:last-of-type {
+  border-right: 1px solid transparent;
+}
+
+:global(.dataListRow) .dataListCell[data-noWrap=true] {
+  display: box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}</style>

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

@@ -0,0 +1,61 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
+import type { DataCellType, groupByOptions } from './types.js';
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): {
+        class?: string;
+        style?: string;
+        element?: HTMLDivElement | null;
+        showHeader?: boolean;
+        isSortable?: boolean;
+        sortByOrder?: "asc" | "desc" | "none" | string;
+        groupByField?: string | string[];
+        groupByOptions?: groupByOptions;
+        selectorField?: string;
+        fieldValue?: any;
+        selectorFieldValue?: any;
+        activeCommonSortField?: string;
+        noWrap?: boolean;
+        noWrapHeader?: boolean;
+        dataTypes?: Record<string, any>;
+        data?: T[] | undefined;
+        idField?: string;
+        columns?: Record<string, DataCellType>;
+        virtualizer?: boolean;
+        isLoadingDrawerProps?: boolean;
+        dataListHead?: Snippet;
+        dataListFooter?: Snippet;
+        dataListRow?: Snippet<[{
+            rawData: Data;
+            item: Data;
+        }]>;
+        dataListCell?: Snippet<[{
+            fieldType: string;
+            fieldName: string;
+            fieldValue: any;
+        }]>;
+        groupTitleSlot?: Snippet<[{
+            item: Data;
+        }]>;
+    } & {
+        sortingIcons?: {
+            default: string[];
+            numeric: string[];
+        } | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type DataListProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type DataListEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type DataListSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class DataList<T = Data> extends SvelteComponent<DataListProps_<T>, DataListEvents<T>, DataListSlots<T>> {
+    get sortingIcons(): {
+        default: string[];
+        numeric: string[];
+    };
+}
+export {};

package/dist/data/dataList/DataListCell.svelte

@@ -0,0 +1,161 @@
+<svelte:options />
+
+<script lang="ts" generics="T=Data">import { getContext, onMount, 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>
+
+{#if inHeader}
+	<td
+		bind:this={element}
+		use:onEvent={{ event: 'resizer:start', action: resizeStart }}
+		use:onEvent={{ event: 'resizer:resize', action: resizeOn }}
+		use:onEvent={{ event: 'resizer:end', action: resizeEnd }}
+		data-sortable={true}
+		data-column-id={columnId}
+		data-noWrap={noWrap}
+		class="dataListCell cellDimensions {className}"
+		use:useResizer
+		style="{style ??
+			$dataListContext.columns[field]?.headerStyle ??
+			$dataListContext.columns[field]?.style};}"
+		style:width={$dataListContext.columns[field]?.width ?? minWidth}
+		style:minWidth={$dataListContext.columns[field]?.width ?? minWidth}
+		style:maxWidth={$dataListContext.columns[field]?.width ?? minWidth}
+		{...rest}
+	>
+		<div onclick={() => onSort(field)} class="cellHeader">
+			<div class="cellHeaderContent">
+				<Slotted child={children} />
+			</div>
+			{#if field && $dataListContext?.config?.isSortable}
+				<div class="cellHeaderSorter" title={sorticon}>
+					<Chipper
+						class="pad"
+						{showChip}
+						position={showChip && $dataListContext.sortBy?.activeSortByOrder === 'desc'
+							? 'top'
+							: 'bottom'}
+					>
+						<Icon icon={sorticon} />
+					</Chipper>
+				</div>
+			{/if}
+		</div>
+	</td>
+{:else}
+	<td
+		bind:this={element}
+		data-column-id={columnId}
+		data-noWrap={noWrap}
+		class="dataListCell cellDimensions {className}"
+		{style}
+		{...rest}
+		style:width={$dataListContext.columns[field]?.width ?? minWidth}
+		style:minWidth={$dataListContext.columns[field]?.width ?? minWidth}
+		style:maxWidth={$dataListContext.columns[field]?.width ?? minWidth}
+		{title}
+	>
+		<Slotted
+			child={children}
+			slotArgs={{
+				fieldData: $rowContext?.data?.[field] ?? {}
+			}}
+		/>
+	</td>
+{/if}
+
+<style></style>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
+import type { Data } from '../../types/index.js';
+declare class __sveltets_Render<T = Data> {
+    props(): {
+        element?: HTMLElement;
+        field?: string;
+        style?: string;
+        fieldType?: string;
+        columnId?: string | number;
+        noWrap?: boolean;
+        title?: string;
+        children?: Snippet<[{
+            fieldData: T;
+        }]> | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type DataListCellProps_<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type DataListCellEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type DataListCellSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class DataListCell<T = Data> extends SvelteComponent<DataListCellProps_<T>, DataListCellEvents<T>, DataListCellSlots<T>> {
+}
+export {};

package/dist/data/dataList/DataListHead.svelte

@@ -0,0 +1,62 @@
+<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>
+
+<thead
+	bind:this={element}
+	use:onEvent={{ event: 'datalist:sort:clicked', action: doSort }}
+	class:pos-sticky={stickyHeader}
+	class="datalist-head"
+	style="{style};{cssVars}"
+>
+	<tr>
+		<Slotted child={children}>
+			{#if $dataListContext.hasColumnsProps}
+				{#each Object.values($dataListContext.columns) as column}
+					<DataListCell noWrap={true} field={column.field}>
+						{column.fieldTitle ?? column.field}
+					</DataListCell>
+				{/each}
+			{/if}
+		</Slotted>
+	</tr>
+</thead>
+
+<style>.datalist-head {
+  /* grid-template-columns: var(--template-columns) auto; grid-auto-columns: min-content;
+  grid-auto-columns: min-content; */
+}</style>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        style?: string;
+        element?: HTMLDivElement;
+        stickyHeader?: boolean;
+        onSort?: Function;
+        children?: import("svelte").Snippet;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DataListHeadProps_ = typeof __propDef.props;
+export { DataListHeadProps_ as DataListHeadProps };
+export type DataListHeadEvents = typeof __propDef.events;
+export type DataListHeadSlots = typeof __propDef.slots;
+export default class DataListHead extends SvelteComponent<DataListHeadProps_, DataListHeadEvents, DataListHeadSlots> {
+}