@medyll/idae-slotui-svelte 0.122.1 → 0.124.0

package/dist/data/sorter/Sorter.demo.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-	import Divider from '../../base/divider/Divider.svelte';
-	import List from '../list/List.svelte';
-	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
-	import Sorter from './Sorter.svelte';
-	import Sorterer from './Sorterer.svelte';
-
-	const data = [...Array(5)].map((r, i) => {
-		return {
-			id: i,
-			name: 'surname ' + i,
-			directory: ((prop: any) => 'dir-' + (i % 4) + prop)(i),
-			nestedData: {
-				uuid: crypto?.randomUUID() ?? i
-			}
-		};
-	});
-
-	let sortedData: any[] = [];
-	let activeCommonSortField = '';
-</script>
-
-<ComponentDemo
-	component="Sorter"
-	cite="Then, what was before became the after.<br /> R. Hakran, 824"
->
-	<h5>Button mode</h5>
-	<div class="flex-h gap-small">
-		<div>
-			<div class="flex-h gap-small">
-				<Sorter
-					sortByOrder="asc"
-					sortByField="id"
-					bind:sortedData
-					bind:activeCommonSortField
-					{data}
-				/>
-				<Sorter sortByField="name" bind:sortedData bind:activeCommonSortField {data} />
-				<Sorter sortByField="directory" bind:sortedData bind:activeCommonSortField {data} />
-				<Sorter sortByField="nestedData.uuid" bind:sortedData bind:activeCommonSortField {data} />
-			</div>
-			<Divider shadowed />
-			<List selectorField="id" data={[...sortedData]} />
-		</div>
-		<div class="flex-h gap-small">
-			<div class="pad">
-				<h6>Code</h6>
-				single field<br />
-				mutiple field <br />
-				nested field <br />
-			</div>
-		</div>
-	</div>
-	<h5>{'<Sorterer />'}</h5>
-	<div>
-		<Sorterer
-			bind:sortedData
-			fields={[{ sortByField: 'name' }, { sortByField: 'directory' }]}
-			{data}>With a title :</Sorterer
-		>
-	</div>
-</ComponentDemo>
+<script lang="ts">
+	import Divider from '../../base/divider/Divider.svelte';
+	import List from '../list/List.svelte';
+	import ComponentDemo from '../../base/demoer/DemoerComponent.svelte';
+	import Sorter from './Sorter.svelte';
+	import Sorterer from './Sorterer.svelte';
+
+	const data = [...Array(5)].map((r, i) => {
+		return {
+			id: i,
+			name: 'surname ' + i,
+			directory: ((prop: any) => 'dir-' + (i % 4) + prop)(i),
+			nestedData: {
+				uuid: crypto?.randomUUID() ?? i
+			}
+		};
+	});
+
+	let sortedData: any[] = [];
+	let activeCommonSortField = '';
+</script>
+
+<ComponentDemo
+	component="Sorter"
+	cite="Then, what was before became the after.<br /> R. Hakran, 824"
+>
+	<h5>Button mode</h5>
+	<div class="flex-h gap-small">
+		<div>
+			<div class="flex-h gap-small">
+				<Sorter
+					sortByOrder="asc"
+					sortByField="id"
+					bind:sortedData
+					bind:activeCommonSortField
+					{data}
+				/>
+				<Sorter sortByField="name" bind:sortedData bind:activeCommonSortField {data} />
+				<Sorter sortByField="directory" bind:sortedData bind:activeCommonSortField {data} />
+				<Sorter sortByField="nestedData.uuid" bind:sortedData bind:activeCommonSortField {data} />
+			</div>
+			<Divider shadowed />
+			<List selectorField="id" data={[...sortedData]} />
+		</div>
+		<div class="flex-h gap-small">
+			<div class="pad">
+				<h6>Code</h6>
+				single field<br />
+				mutiple field <br />
+				nested field <br />
+			</div>
+		</div>
+	</div>
+	<h5>{'<Sorterer />'}</h5>
+	<div>
+		<Sorterer
+			bind:sortedData
+			fields={[{ sortByField: 'name' }, { sortByField: 'directory' }]}
+			{data}>With a title :</Sorterer
+		>
+	</div>
+</ComponentDemo>

package/dist/data/sorter/Sorter.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-	import Button from '../../controls/button/Button.svelte';
-	import type { ExpandProps } from '../../types/index.js';
-	import { dataOp } from '../../utils/engine/utils.js';
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import type { SorterProps } from './types.js';
-
-	const sortState: string[] = ['none', 'asc', 'desc'];
-	const icons = {
-		default: ['dots-horizontal', 'sort-bool-ascending', 'sort-bool-descending']
-	};
-
-	let {
-		data = [],
-		sortedData = $bindable(data),
-		sortByField,
-		sortByTitleField,
-		sortByOrder = 'none',
-		activeCommonSortField = $bindable(''),
-		sorterMode = 'button',
-		children,
-		sortListItems,
-		...rest
-	}: ExpandProps<SorterProps> = $props();
-
-	$effect(() => {
-		if (Boolean(activeCommonSortField) && activeCommonSortField !== sortByField) {
-			sortByOrder = 'none';
-		}
-	});
-
-	function doSort(field: string, order: 'asc' | 'desc' | 'none' | string) {
-		activeCommonSortField = field;
-		sortByOrder = order;
-		if (order === 'none') {
-			sortedData = data;
-		} else {
-			sortedData = dataOp.sortBy(data, field, order);
-		}
-	}
-</script>
-
-<div {...rest}>
-	{#if sorterMode === 'button'}
-		<Button
-			onclick={() => {
-				const next = sortState.indexOf(sortByOrder) + 1;
-				let toggleOrder = sortState?.[next] ? sortState[next] : sortState[0];
-				if (sortByField) doSort(sortByField, toggleOrder);
-			}}
-			value={sortByTitleField ?? sortByField}
-			icon={'mdi' + icons.default[sortState.indexOf(sortByOrder)]}
-			variant="naked"
-			selected={sortByOrder !== 'none' && activeCommonSortField === sortByField}
-			width="auto"
-			showChip={sortByOrder !== 'none' && activeCommonSortField === sortByField}
-		/>
-	{/if}
-	{#if sorterMode === 'menu'}
-		<Button
-			onclick={() => {
-				if (sortByField) doSort(sortByField, 'desc');
-			}}
-			icon="mdi:sort-bool-descending"
-		/>
-	{/if}
-	<!-- // button name + asc/desc -->
-	<!-- // button menu with all data minus objects  + asc/desc -->
-	<Slotted
-		child={children}
-		slotArgs={{
-			primary: sortByTitleField ?? sortByField,
-			icon: 'mdi:' + icons.default[sortState.indexOf(sortByOrder)],
-			naked: true,
-			selected: sortByOrder !== 'none' && activeCommonSortField === sortByField,
-			size: 'auto',
-			showChip: sortByOrder !== 'none' && activeCommonSortField === sortByField
-		}}
-	></Slotted>
-</div>
+<script lang="ts">
+	import Button from '../../controls/button/Button.svelte';
+	import type { ExpandProps } from '../../types/index.js';
+	import { dataOp } from '../../utils/engine/utils.js';
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import type { SorterProps } from './types.js';
+
+	const sortState: string[] = ['none', 'asc', 'desc'];
+	const icons = {
+		default: ['dots-horizontal', 'sort-bool-ascending', 'sort-bool-descending']
+	};
+
+	let {
+		data = [],
+		sortedData = $bindable(data),
+		sortByField,
+		sortByTitleField,
+		sortByOrder = 'none',
+		activeCommonSortField = $bindable(''),
+		sorterMode = 'button',
+		children,
+		sortListItems,
+		...rest
+	}: ExpandProps<SorterProps> = $props();
+
+	$effect(() => {
+		if (Boolean(activeCommonSortField) && activeCommonSortField !== sortByField) {
+			sortByOrder = 'none';
+		}
+	});
+
+	function doSort(field: string, order: 'asc' | 'desc' | 'none' | string) {
+		activeCommonSortField = field;
+		sortByOrder = order;
+		if (order === 'none') {
+			sortedData = data;
+		} else {
+			sortedData = dataOp.sortBy(data, field, order);
+		}
+	}
+</script>
+
+<div {...rest}>
+	{#if sorterMode === 'button'}
+		<Button
+			onclick={() => {
+				const next = sortState.indexOf(sortByOrder) + 1;
+				let toggleOrder = sortState?.[next] ? sortState[next] : sortState[0];
+				if (sortByField) doSort(sortByField, toggleOrder);
+			}}
+			value={sortByTitleField ?? sortByField}
+			icon={'mdi' + icons.default[sortState.indexOf(sortByOrder)]}
+			variant="naked"
+			selected={sortByOrder !== 'none' && activeCommonSortField === sortByField}
+			width="auto"
+			showChip={sortByOrder !== 'none' && activeCommonSortField === sortByField}
+		/>
+	{/if}
+	{#if sorterMode === 'menu'}
+		<Button
+			onclick={() => {
+				if (sortByField) doSort(sortByField, 'desc');
+			}}
+			icon="mdi:sort-bool-descending"
+		/>
+	{/if}
+	<!-- // button name + asc/desc -->
+	<!-- // button menu with all data minus objects  + asc/desc -->
+	<Slotted
+		child={children}
+		slotArgs={{
+			primary: sortByTitleField ?? sortByField,
+			icon: 'mdi:' + icons.default[sortState.indexOf(sortByOrder)],
+			naked: true,
+			selected: sortByOrder !== 'none' && activeCommonSortField === sortByField,
+			size: 'auto',
+			showChip: sortByOrder !== 'none' && activeCommonSortField === sortByField
+		}}
+	></Slotted>
+</div>

package/dist/data/sorter/Sorterer.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import Slotted from '../../utils/slotted/Slotted.svelte';
-	import Sorter from './Sorter.svelte';
-	import type { SortererProps } from './types.js';
-
-	let {
-		class: className = '',
-		element = $bindable(),
-		style = '',
-		data = [],
-		sortedData = $bindable(data),
-		onSort = () => {},
-		fields = [],
-		activeCommonSortField = '',
-		children,
-		...rest
-	}: SortererProps = $props();
-</script>
-
-<div bind:this={element} class="sorterer {className}" {...rest}>
-	<Slotted child={children}></Slotted>
-	{#each fields as field}
-		<Sorter {...field} bind:sortedData bind:activeCommonSortField {data} />
-	{/each}
-</div>
-
+<script lang="ts">
+	import Slotted from '../../utils/slotted/Slotted.svelte';
+	import Sorter from './Sorter.svelte';
+	import type { SortererProps } from './types.js';
+
+	let {
+		class: className = '',
+		element = $bindable(),
+		style = '',
+		data = [],
+		sortedData = $bindable(data),
+		onSort = () => {},
+		fields = [],
+		activeCommonSortField = '',
+		children,
+		...rest
+	}: SortererProps = $props();
+</script>
+
+<div bind:this={element} class="sorterer {className}" {...rest}>
+	<Slotted child={children}></Slotted>
+	{#each fields as field}
+		<Sorter {...field} bind:sortedData bind:activeCommonSortField {data} />
+	{/each}
+</div>
+
 <style>:root {
   --sorterer-gap: var(--sld-gap-tiny);
 }
@@ -34,4 +34,4 @@
   flex-direction: row;
   align-items: center;
   gap: var(--sorterer-gap);
-}</style>
+}</style>

package/dist/data/sorter/sorterer.scss

@@ -1,11 +1,11 @@
-@use "../../styles/slotui-mixins.scss";
-
-:root {
-    --sorterer-gap: var(--sld-gap-tiny);
-}
-
-.sorterer {
-    cursor: pointer;
-    @include slotui-mixins.flex(row, center);
-    gap: var(--sorterer-gap);
-}
+@use "../../styles/slotui-mixins.scss";
+
+:root {
+    --sorterer-gap: var(--sld-gap-tiny);
+}
+
+.sorterer {
+    cursor: pointer;
+    @include slotui-mixins.flex(row, center);
+    gap: var(--sorterer-gap);
+}

package/dist/index.d.ts

@@ -117,11 +117,9 @@ export * from './utils/uses/draggabler.js';
 export * from './utils/stylesheet/utils.js';
 export * from './utils/stylesheet/types.js';
 export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
+export { default as Slotted } from './utils/slotted/Slotted.svelte';
 export * from './utils/looper/types.js';
 export { default as Looper } from './utils/looper/Looper.svelte';
-export { default as Css } from './utils/css/Css.svelte';
-export { default as Slotted } from './utils/slotted/Slotted.svelte';
-export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
 export * from './utils/engine/wactions.utils.js';
 export * from './utils/engine/utils.js';
 export * from './utils/engine/stator.js';
@@ -129,62 +127,65 @@ export * from './utils/engine/site.utils.js';
 export * from './utils/engine/presets.js';
 export * from './utils/engine/engine.js';
 export * from './utils/engine/elem.js';
+export * from './utils/effects/transitions.js';
+export { default as Css } from './utils/css/Css.svelte';
+export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
 export * from './utils/content/types.js';
 export { default as Content } from './utils/content/Content.svelte';
-export * from './utils/effects/transitions.js';
-export { default as Window } from './ui/window/Window.svelte';
 export * from './ui/window/types.js';
 export * from './ui/window/store.js';
 export * from './ui/window/actions.svelte.js';
+export { default as Window } from './ui/window/Window.svelte';
+export * from './ui/tree/types.js';
+export * from './ui/tree/tree.utils.js';
+export { default as Tree } from './ui/tree/Tree.svelte';
 export * from './ui/toolBar/types.js';
 export { default as ToolBar } from './ui/toolBar/ToolBar.svelte';
 export * from './ui/toggleBar/types.js';
 export { default as ToggleBar } from './ui/toggleBar/ToggleBar.svelte';
-export * from './ui/tree/types.js';
-export * from './ui/tree/tree.utils.js';
-export { default as Tree } from './ui/tree/Tree.svelte';
 export * from './ui/toast/types.js';
+export * from './ui/toast/store.js';
 export { default as Toaster } from './ui/toast/Toaster.svelte';
 export { default as Toast } from './ui/toast/Toast.svelte';
-export * from './ui/toast/store.js';
 export { default as ThemeSwitcher } from './ui/themeswitcher/ThemeSwitcher.svelte';
+export * from './ui/taskbar/types.js';
+export { default as Taskbar } from './ui/taskbar/Taskbar.svelte';
+export { default as TaskBarContent } from './ui/taskbar/TaskBarContent.svelte';
 export { default as BootMenu } from './ui/startMenu/BootMenu.svelte';
 export { default as ServiceBox } from './ui/serviceBox/ServiceBox.svelte';
 export * from './ui/preview/types.js';
+export { default as Preview } from './ui/preview/Preview.svelte';
+export * from './ui/popper/usePopper.js';
+export * from './ui/popper/types.js';
+export * from './ui/popper/actions.js';
+export { default as Popper } from './ui/popper/Popper.svelte';
 export * from './ui/panel/types.js';
+export { default as Paneler } from './ui/panel/Paneler.svelte';
 export { default as PanelSlide } from './ui/panel/PanelSlide.svelte';
 export { default as PanelGrid } from './ui/panel/PanelGrid.svelte';
-export { default as Paneler } from './ui/panel/Paneler.svelte';
 export { default as Panel } from './ui/panel/Panel.svelte';
 export * from './ui/menuList/types.js';
 export { default as MenuListTitle } from './ui/menuList/MenuListTitle.svelte';
 export { default as MenuListItem } from './ui/menuList/MenuListItem.svelte';
 export { default as MenuList } from './ui/menuList/MenuList.svelte';
-export * from './ui/taskbar/types.js';
-export { default as TaskBarContent } from './ui/taskbar/TaskBarContent.svelte';
-export { default as Taskbar } from './ui/taskbar/Taskbar.svelte';
 export * from './ui/menu/types.js';
 export { default as MenuTitle } from './ui/menu/MenuTitle.svelte';
 export { default as MenuItem } from './ui/menu/MenuItem.svelte';
 export { default as Menu } from './ui/menu/Menu.svelte';
 export * from './ui/marquee/types.js';
 export { default as Marquee } from './ui/marquee/Marquee.svelte';
-export * from './ui/popper/usePopper.js';
-export * from './ui/popper/types.js';
-export { default as Popper } from './ui/popper/Popper.svelte';
-export * from './ui/popper/actions.js';
 export * from './ui/login/types.js';
 export * from './ui/login/store.js';
 export { default as Login } from './ui/login/Login.svelte';
 export * from './ui/frame/types.js';
 export { default as Frame } from './ui/frame/Frame.svelte';
-export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
 export * from './ui/chromeFrame/types.js';
+export * from './ui/chromeFrame/chromeFrame.utils.js';
+export * from './ui/chromeFrame/chromeFrame.store.js';
 export { default as ChromeFrameList } from './ui/chromeFrame/ChromeFrameList.svelte';
 export { default as ChromeFrameButtonList } from './ui/chromeFrame/ChromeFrameButtonList.svelte';
-export * from './ui/chromeFrame/chromeFrame.utils.js';
 export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
-export * from './ui/chromeFrame/chromeFrame.store.js';
+export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
 export * from './styles/slotuisheet/utils.js';
 export * from './styles/slotuisheet/types.js';
 export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
@@ -211,70 +212,70 @@ export { default as DataListRow } from './data/dataList/DataListRow.svelte';
 export { default as DataListHead } from './data/dataList/DataListHead.svelte';
 export { default as DataListCell } from './data/dataList/DataListCell.svelte';
 export { default as DataList } from './data/dataList/DataList.svelte';
+export * from './controls/switch/types.js';
+export { default as Switch } from './controls/switch/Switch.svelte';
+export * from './controls/textfield/types.js';
+export { default as TextField } from './controls/textfield/TextField.svelte';
+export * from './controls/stepper/types.js';
+export { default as Stepper } from './controls/stepper/Stepper.svelte';
+export * from './controls/slider/types.js';
+export { default as Slider } from './controls/slider/Slider.svelte';
+export { default as Select } from './controls/select/Select.svelte';
+export * from './controls/rating/types.js';
+export { default as Rating } from './controls/rating/Rating.svelte';
+export * from './controls/progress/types.js';
+export { default as Progress } from './controls/progress/Progress.svelte';
+export * from './controls/inplaceedit/types.js';
+export { default as InPlaceEdit } from './controls/inplaceedit/InPlaceEdit.svelte';
+export * from './controls/confirm/types.js';
+export { default as Confirm } from './controls/confirm/Confirm.svelte';
+export * from './controls/checkbox/types.js';
+export { default as Checkbox } from './controls/checkbox/Checkbox.svelte';
+export * from './controls/button/types.js';
+export { default as IconButton } from './controls/button/IconButton.svelte';
+export { default as ButtonMenu } from './controls/button/ButtonMenu.svelte';
+export { default as ButtonAction } from './controls/button/ButtonAction.svelte';
+export { default as Button } from './controls/button/Button.svelte';
+export * from './controls/autocomplete/types.js';
+export { default as AutoComplete } from './controls/autocomplete/AutoComplete.svelte';
 export * from './base/titleBar/types.js';
 export { default as TitleBar } from './base/titleBar/TitleBar.svelte';
 export * from './base/paper/type.js';
 export { default as Paper } from './base/paper/Paper.svelte';
 export * from './base/icon/types.js';
 export { default as Icon } from './base/icon/Icon.svelte';
-export { default as Debug } from './base/debug/Debug.svelte';
+export * from './base/divider/types.js';
+export { default as Divider } from './base/divider/Divider.svelte';
 export * from './base/demoer/types.js';
-export { default as DemoPage } from './base/demoer/DemoPage.svelte';
+export * from './base/demoer/demoer.utils.js';
 export { default as DemoerComponent } from './base/demoer/DemoerComponent.svelte';
 export { default as DemoerCode } from './base/demoer/DemoerCode.svelte';
-export * from './base/demoer/demoer.utils.js';
 export { default as Demoer } from './base/demoer/Demoer.svelte';
-export * from './base/divider/types.js';
-export { default as Divider } from './base/divider/Divider.svelte';
+export { default as DemoPage } from './base/demoer/DemoPage.svelte';
+export { default as Debug } from './base/debug/Debug.svelte';
 export * from './base/contentSwitcher/useContentSwitcher.js';
 export * from './base/contentSwitcher/types.js';
 export { default as ContentSwitcher } from './base/contentSwitcher/ContentSwitcher.svelte';
-export * from './base/breadCrumb/types.js';
-export { default as BreadCrumb } from './base/breadCrumb/BreadCrumb.svelte';
-export * from './base/cartouche/types.js';
-export { default as Cartouche } from './base/cartouche/Cartouche.svelte';
 export * from './base/columner/types.js';
 export { default as Columner } from './base/columner/Columner.svelte';
 export { default as Column } from './base/columner/Column.svelte';
 export * from './base/chipper/types.js';
 export { default as Chipper } from './base/chipper/Chipper.svelte';
+export * from './base/cartouche/types.js';
+export { default as Cartouche } from './base/cartouche/Cartouche.svelte';
+export * from './base/breadCrumb/types.js';
+export { default as BreadCrumb } from './base/breadCrumb/BreadCrumb.svelte';
 export * from './base/box/types.js';
 export { default as Box } from './base/box/Box.svelte';
 export * from './base/badge/types.js';
 export { default as Badge } from './base/badge/Badge.svelte';
-export * from './base/avatar/types.js';
-export { default as Avatar } from './base/avatar/Avatar.svelte';
 export * from './base/backdrop/useBackDrop.js';
 export * from './base/backdrop/types.js';
 export { default as Backdrop } from './base/backdrop/Backdrop.svelte';
+export * from './base/avatar/types.js';
+export { default as Avatar } from './base/avatar/Avatar.svelte';
 export * from './base/alert/types.js';
 export { default as Alert } from './base/alert/Alert.svelte';
-export * from './controls/textfield/types.js';
-export { default as TextField } from './controls/textfield/TextField.svelte';
-export * from './controls/switch/types.js';
-export { default as Switch } from './controls/switch/Switch.svelte';
-export * from './controls/stepper/types.js';
-export { default as Stepper } from './controls/stepper/Stepper.svelte';
-export { default as Select } from './controls/select/Select.svelte';
-export * from './controls/slider/types.js';
-export { default as Slider } from './controls/slider/Slider.svelte';
-export * from './controls/inplaceedit/types.js';
-export { default as InPlaceEdit } from './controls/inplaceedit/InPlaceEdit.svelte';
-export * from './controls/confirm/types.js';
-export { default as Confirm } from './controls/confirm/Confirm.svelte';
-export * from './controls/checkbox/types.js';
-export { default as Checkbox } from './controls/checkbox/Checkbox.svelte';
-export * from './controls/rating/types.js';
-export { default as Rating } from './controls/rating/Rating.svelte';
-export * from './controls/button/types.js';
-export { default as IconButton } from './controls/button/IconButton.svelte';
-export { default as ButtonMenu } from './controls/button/ButtonMenu.svelte';
-export { default as ButtonAction } from './controls/button/ButtonAction.svelte';
-export { default as Button } from './controls/button/Button.svelte';
-export * from './controls/autocomplete/types.js';
-export { default as AutoComplete } from './controls/autocomplete/AutoComplete.svelte';
-export * from './controls/progress/types.js';
-export { default as Progress } from './controls/progress/Progress.svelte';
 export * from './utils/uses/sx4u/sx4uPreprocess.js';
 export * from './utils/uses/sx4u/sx4u.js';
 export * from './utils/uses/stickTo/stickTo.js';