@medyll/idae-slotui-svelte 0.26.0 → 0.28.0

package/dist/controls/textfield/TextField.demo.svelte

@@ -1,25 +1,29 @@
-<script lang="ts">import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import TextField from "./TextField.svelte";
-import { componentArgs, parameters } from "./types.js";
-let parametersProps = {
-  icon: {
-    type: "icon",
-    values: ["search", void 0]
-  },
-  endIcon: {
-    type: "endIcon",
-    values: ["search", void 0]
-  },
-  height: {
-    type: "tall",
-    values: ["small", "tiny", "small", "large"]
-  },
-  ...parameters
-};
-let code = `
+<script lang="ts">
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+
+	import TextField from './TextField.svelte';
+	import { componentArgs, parameters } from './types.js';
+
+	let parametersProps: any = {
+		icon: {
+			type: 'icon',
+			values: ['search', undefined]
+		},
+		endIcon: {
+			type: 'endIcon',
+			values: ['search', undefined]
+		},
+		height: {
+			type: 'tall',
+			values: ['small', 'tiny', 'small', 'large']
+		},
+		...parameters
+	};
+
+	let code = `
 <TextField >
 	{#snippet inputFirst()}
 		<Icon icon="close" />
@@ -28,7 +32,8 @@ let code = `
 		<Icon icon="close" />
 	{/snippet}
 </TextField>`;
-let codeSlotProps = `
+
+	let codeSlotProps = `
 <Input icon={icon} endIcon={icon} />`;
 </script>
 

package/dist/controls/textfield/TextField.svelte

@@ -1,39 +1,47 @@
 <svelte:options />
 
-<script lang="ts">import { popper } from "../../ui/popper/usePopper.js";
-import Button from "../button/Button.svelte";
-import Icon from "../../base/icon/Icon.svelte";
-import Slotted from "../../utils/slotted/Slotted.svelte";
-let inputType = "text";
-export { inputType as type };
-let {
-  class: className = "",
-  element = $bindable(),
-  style,
-  icon,
-  iconColor = "#666",
-  endIcon,
-  endIconColor = "#666",
-  usePopper,
-  width = $bindable(),
-  tall = "default",
-  borderless = false,
-  transparent = false,
-  value = $bindable(),
-  children,
-  inputFirst,
-  inputLast,
-  ...rest
-} = $props();
-let niceIconStyle = $state("");
-niceIconStyle += icon || inputFirst ? "padding-left:2.2rem;" : "";
-niceIconStyle += endIcon || inputLast ? "padding-right:2.2rem;" : "";
-if (usePopper) {
-  usePopper.disabled = false;
-  usePopper.parentNode = element;
-} else {
-  usePopper = { disabled: true };
-}
+<script lang="ts">
+	import { popper } from '../../ui/popper/usePopper.js';
+	import Button from '../button/Button.svelte';
+	import Icon from '../../base/icon/Icon.svelte';
+	import type { TextFieldProps } from './types.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+
+	let inputType = 'text';
+	export { inputType as type };
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style,
+		icon,
+		iconColor = '#666',
+		endIcon,
+		endIconColor = '#666',
+		usePopper,
+		width = $bindable(),
+		tall = 'default',
+		borderless = false,
+		transparent = false,
+		value = $bindable(),
+		children,
+		inputFirst,
+		inputLast,
+		...rest
+	}: ExpandProps<TextFieldProps> & Partial<HTMLInputElement> = $props();
+
+	let niceIconStyle = $state('');
+
+	niceIconStyle += icon || inputFirst ? 'padding-left:2.2rem;' : '';
+	niceIconStyle += endIcon || inputLast ? 'padding-right:2.2rem;' : '';
+
+	if (usePopper) {
+		usePopper.disabled = false;
+		usePopper.parentNode = element;
+	} else {
+		usePopper = { disabled: true };
+	}
 </script>
 
 <div class="textfield-container">

package/dist/data/dataList/DataList.demo.svelte

@@ -1,40 +1,47 @@
-<script lang="ts">import DataList from "./DataList.svelte";
-import DataListRow from "./DataListRow.svelte";
-import DataListCell from "./DataListCell.svelte";
-import DataListHead from "./DataListHead.svelte";
-import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
-import Demoer from "../../base/demoer/Demoer.svelte";
-import { parameters, componentArgs } from "./types.js";
-import DemoPage from "../../base/demoer/DemoPage.svelte";
-let data = [...Array(50)].map((caches, index) => {
-  return {
-    id: index,
-    index,
-    name: "name " + index,
-    lastName: "lastName " + index,
-    group: "group-" + getRandomInt(7),
-    groupByArrayObjectKey: [
-      { name: "nested" + getRandomInt(4) },
-      { name: "nested" + getRandomInt(4) }
-    ],
-    groupByObjectKey: { group: "group-" + getRandomInt(4) }
-  };
-});
-let columns = {
-  index: { field: "index" },
-  name: { field: "name", width: "90px" },
-  group: { field: "group" },
-  lastName: {
-    field: "lastName",
-    getter: (data2) => {
-      return data2.lastName + " - getter";
-    }
-  }
-};
-function getRandomInt(max) {
-  return Math.floor(Math.random() * max);
-}
-let isOpen = false;
+<script lang="ts">
+	import DataList from './DataList.svelte';
+	import DataListRow from './DataListRow.svelte';
+	import DataListCell from './DataListCell.svelte';
+	import DataListHead from './DataListHead.svelte';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import type { DataCellType, DataListProps } from './types.js';
+	import Demoer from '../../base/demoer/Demoer.svelte';
+
+	import { parameters, componentArgs } from './types.js';
+	import DemoPage from '../../base/demoer/DemoPage.svelte';
+
+	let data = [...Array(50)].map((caches, index: number) => {
+		return {
+			id: index,
+			index,
+			name: 'name ' + index,
+			lastName: 'lastName ' + index,
+			group: 'group-' + getRandomInt(7),
+			groupByArrayObjectKey: [
+				{ name: 'nested' + getRandomInt(4) },
+				{ name: 'nested' + getRandomInt(4) }
+			],
+			groupByObjectKey: { group: 'group-' + getRandomInt(4) }
+		};
+	});
+
+	let columns: Record<string, Partial<DataCellType>> = {
+		index: { field: 'index' },
+		name: { field: 'name', width: '90px' },
+		group: { field: 'group' },
+		lastName: {
+			field: 'lastName',
+			getter: (data: any) => {
+				return data.lastName + ' - getter';
+			}
+		}
+	};
+
+	function getRandomInt(max: number) {
+		return Math.floor(Math.random() * max);
+	}
+
+	let isOpen = false;
 </script>
 
 <ComponentDemo

package/dist/data/dataList/DataList.preview.svelte

@@ -1,9 +1,11 @@
-<script lang="ts">import DataList from "./DataList.svelte";
-import DataListCell from "./DataListCell.svelte";
-import DataListHead from "./DataListHead.svelte";
-let data = [...Array(200)].map((caches, index) => {
-  return { index, name: "name " + index, otherName: "otherName " + index };
-});
+<script lang="ts">
+	import DataList from './DataList.svelte';
+	import DataListCell from './DataListCell.svelte';
+	import DataListHead from './DataListHead.svelte';
+
+	let data = [...Array(200)].map((caches, index: number) => {
+		return { index, name: 'name ' + index, otherName: 'otherName ' + index };
+	});
 </script>
 
 <div style="height:350px;width:450px;" class="what pos-rel overflow-hidden pad-1">

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/DataList.svelte.d.ts

@@ -1,5 +1,4 @@
-import { type Snippet } from 'svelte';
-import type { DataCellType, groupByOptions } from './types.js';
+import type { DataCellType } from './types.js';
 import type { Data } from '../../types/index.js';
 declare class __sveltets_Render<T = Data> {
     props(): {
@@ -10,7 +9,7 @@ declare class __sveltets_Render<T = Data> {
         isSortable?: boolean | undefined;
         sortByOrder?: ("asc" | "desc" | "none" | string) | undefined;
         groupByField?: (string | string[]) | undefined;
-        groupByOptions?: groupByOptions | undefined;
+        groupByOptions?: import("./types.js").dataListGroupByOptions | undefined;
         selectorField?: string | undefined;
         fieldValue?: any;
         selectorFieldValue?: any;
@@ -23,18 +22,18 @@ declare class __sveltets_Render<T = Data> {
         columns?: Record<string, DataCellType> | undefined;
         virtualizer?: boolean | undefined;
         isLoadingDrawerProps?: boolean | undefined;
-        dataListHead?: Snippet | undefined;
-        dataListFooter?: Snippet | undefined;
-        dataListRow?: Snippet<[{
+        dataListHead?: import("svelte").Snippet | undefined;
+        dataListFooter?: import("svelte").Snippet | undefined;
+        dataListRow?: import("svelte").Snippet<[{
             rawData: Data;
             item: Data;
         }]> | undefined;
-        dataListCell?: Snippet<[{
+        dataListCell?: import("svelte").Snippet<[{
             fieldType: string;
             fieldName: string;
             fieldValue: any;
         }]> | undefined;
-        groupTitleSlot?: Snippet<[{
+        groupTitleSlot?: import("svelte").Snippet<[{
             item: Data;
         }]> | undefined;
     };