@medyll/idae-slotui-svelte 0.3.0

package/dist/data/sorter/Sorter.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">import Button from "../../controls/button/Button.svelte";
+import { dataOp } from "../../utils/engine/utils.js";
+import Slotted from "../../utils/slotted/Slotted.svelte";
+const sortState = ["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
+} = $props();
+$effect(() => {
+  if (Boolean(activeCommonSortField) && activeCommonSortField !== sortByField) {
+    sortByOrder = "none";
+  }
+});
+function doSort(field, order) {
+  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/Sorter.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data: import("../../types/index.js").Data[];
+        sortedData?: import("../../types/index.js").Data[];
+        sortByField: string;
+        sortByTitleField?: string;
+        sortListItems?: string[];
+        sortByOrder?: "asc" | "desc" | "none" | string;
+        activeCommonSortField?: string;
+        sorterMode?: "button" | "menu" | "free";
+        children?: import("svelte").Snippet<[import("../../index.js").ButtonProps]>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SorterProps_ = typeof __propDef.props;
+export { SorterProps_ as SorterProps };
+export type SorterEvents = typeof __propDef.events;
+export type SorterSlots = typeof __propDef.slots;
+export default class Sorter extends SvelteComponent<SorterProps_, SorterEvents, SorterSlots> {
+}

package/dist/data/sorter/Sorterer.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">import Slotted from "../../utils/slotted/Slotted.svelte";
+import Sorter from "./Sorter.svelte";
+let {
+  class: className = "",
+  element = $bindable(),
+  style = "",
+  data = [],
+  sortedData = $bindable(data),
+  onSort = () => {
+  },
+  fields = [],
+  activeCommonSortField = "",
+  children,
+  ...rest
+} = $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);
+}
+
+.sorterer {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--sorterer-gap);
+}</style>

package/dist/data/sorter/Sorterer.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { SortererProps } from './types.js';
+declare const __propDef: {
+    props: SortererProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SortererProps_ = typeof __propDef.props;
+export { SortererProps_ as SortererProps };
+export type SortererEvents = typeof __propDef.events;
+export type SortererSlots = typeof __propDef.slots;
+export default class Sorterer extends SvelteComponent<SortererProps_, SortererEvents, SortererSlots> {
+}

package/dist/data/sorter/sorterer.scss

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

package/dist/data/sorter/types.d.ts

@@ -0,0 +1,39 @@
+import type { ButtonProps } from '../../controls/button/types.js';
+import type { CommonProps, Data } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+export type SorterFieldType = {
+    sortByField: string;
+    sortByTitleField?: string;
+    sortByOrder?: 'asc' | 'desc' | 'none';
+    order?: number;
+};
+export type SortItem = {};
+export type SortererProps = CommonProps & {
+    /** Data to be sorted */
+    data: Data[];
+    /** binding : final sorted data as raw object  */
+    sortedData?: Data[];
+    fields: SorterFieldType[];
+    activeCommonSortField?: string;
+    /** Function to call when the data is sorted */
+    onSort?: (sortedData: any[]) => void;
+};
+export type SorterProps = {
+    /** The data to sort */
+    data: Data[];
+    /** binding : final sorted data as raw object  */
+    sortedData?: Data[];
+    /** The field to sort by */
+    sortByField: string;
+    /** The title of the field to sort by */
+    sortByTitleField?: string;
+    /** list of available sorts shown to user */
+    sortListItems?: string[];
+    /** The order to sort by */
+    sortByOrder?: 'asc' | 'desc' | 'none' | string;
+    /** The active field to sort by */
+    activeCommonSortField?: string;
+    /** Sorter mode */
+    sorterMode?: 'button' | 'menu' | 'free';
+    children?: Snippet<[ButtonProps]>;
+};

package/dist/data/sorter/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,285 @@
+export * from './_css/alert.css';
+export * from './_css/alert.min.css';
+export * from './_css/auto-complete.css';
+export * from './_css/auto-complete.min.css';
+export * from './_css/avatar.css';
+export * from './_css/avatar.min.css';
+export * from './_css/backdrop.css';
+export * from './_css/backdrop.min.css';
+export * from './_css/badge.css';
+export * from './_css/badge.min.css';
+export * from './_css/boot-menu.css';
+export * from './_css/boot-menu.min.css';
+export * from './_css/box.css';
+export * from './_css/box.min.css';
+export * from './_css/breadCrumb.css';
+export * from './_css/breadCrumb.min.css';
+export * from './_css/button-action.css';
+export * from './_css/button-action.min.css';
+export * from './_css/button-menu.css';
+export * from './_css/button-menu.min.css';
+export * from './_css/button.css';
+export * from './_css/button.min.css';
+export * from './_css/buttonMenu.css';
+export * from './_css/buttonMenu.min.css';
+export * from './_css/cartouche.css';
+export * from './_css/cartouche.min.css';
+export * from './_css/checkbox.css';
+export * from './_css/checkbox.min.css';
+export * from './_css/chipper.css';
+export * from './_css/chipper.min.css';
+export * from './_css/chrome-frame.css';
+export * from './_css/chrome-frame.min.css';
+export * from './_css/confirm.css';
+export * from './_css/confirm.min.css';
+export * from './_css/content-switcher.css';
+export * from './_css/content-switcher.min.css';
+export * from './_css/csss.css';
+export * from './_css/csss.min.css';
+export * from './_css/dataList.css';
+export * from './_css/dataList.min.css';
+export * from './_css/divider.css';
+export * from './_css/divider.min.css';
+export * from './_css/drawer.css';
+export * from './_css/drawer.min.css';
+export * from './_css/finder.css';
+export * from './_css/finder.min.css';
+export * from './_css/frame.css';
+export * from './_css/frame.min.css';
+export * from './_css/icon.css';
+export * from './_css/icon.min.css';
+export * from './_css/loader.css';
+export * from './_css/loader.min.css';
+export * from './_css/marquee.css';
+export * from './_css/marquee.min.css';
+export * from './_css/menu-list.css';
+export * from './_css/menu-list.min.css';
+export * from './_css/menu.css';
+export * from './_css/menu.min.css';
+export * from './_css/panel.css';
+export * from './_css/panel.min.css';
+export * from './_css/paper.css';
+export * from './_css/paper.min.css';
+export * from './_css/popper.css';
+export * from './_css/popper.min.css';
+export * from './_css/progress.css';
+export * from './_css/progress.min.css';
+export * from './_css/rating.css';
+export * from './_css/rating.min.css';
+export * from './_css/select.css';
+export * from './_css/select.min.css';
+export * from './_css/slider.css';
+export * from './_css/slider.min.css';
+export * from './_css/slotui-combined.css';
+export * from './_css/slotui-mixins.css';
+export * from './_css/slotui-mixins.min.css';
+export * from './_css/slotui-presets.css';
+export * from './_css/slotui-presets.min.css';
+export * from './_css/slotui-sheet.css';
+export * from './_css/slotui-sheet.min.css';
+export * from './_css/sorterer.css';
+export * from './_css/sorterer.min.css';
+export * from './_css/stepper.css';
+export * from './_css/stepper.min.css';
+export * from './_css/stylesheet-container.css';
+export * from './_css/stylesheet-container.min.css';
+export * from './_css/stylesheet.css';
+export * from './_css/stylesheet.min.css';
+export * from './_css/switch.css';
+export * from './_css/switch.min.css';
+export * from './_css/tabs.css';
+export * from './_css/tabs.min.css';
+export * from './_css/taskbar.css';
+export * from './_css/taskbar.min.css';
+export * from './_css/textfield.css';
+export * from './_css/textfield.min.css';
+export * from './_css/title-bar.css';
+export * from './_css/title-bar.min.css';
+export * from './_css/toggle-bar.css';
+export * from './_css/toggle-bar.min.css';
+export * from './_css/toolbar.css';
+export * from './_css/toolbar.min.css';
+export * from './_css/tree.css';
+export * from './_css/tree.min.css';
+export * from './_css/window.css';
+export * from './_css/window.min.css';
+export { default as Alert } from './base/alert/Alert.svelte';
+export * from './base/alert/types.js';
+export { default as Avatar } from './base/avatar/Avatar.svelte';
+export * from './base/avatar/types.js';
+export { default as Backdrop } from './base/backdrop/Backdrop.svelte';
+export * from './base/backdrop/types.js';
+export * from './base/backdrop/useBackDrop.js';
+export { default as Badge } from './base/badge/Badge.svelte';
+export * from './base/badge/types.js';
+export { default as Box } from './base/box/Box.svelte';
+export * from './base/box/types.js';
+export { default as BreadCrumb } from './base/breadCrumb/BreadCrumb.svelte';
+export * from './base/breadCrumb/types.js';
+export { default as Cartouche } from './base/cartouche/Cartouche.svelte';
+export * from './base/cartouche/types.js';
+export { default as Chipper } from './base/chipper/Chipper.svelte';
+export * from './base/chipper/types.js';
+export { default as Column } from './base/columner/Column.svelte';
+export { default as Columner } from './base/columner/Columner.svelte';
+export * from './base/columner/types.js';
+export { default as ContentSwitcher } from './base/contentSwitcher/ContentSwitcher.svelte';
+export * from './base/contentSwitcher/types.js';
+export * from './base/contentSwitcher/useContentSwitcher.js';
+export { default as Debug } from './base/debug/Debug.svelte';
+export { default as Demoer } from './base/demoer/Demoer.svelte';
+export * from './base/demoer/demoer.utils.js';
+export { default as DemoerCode } from './base/demoer/DemoerCode.svelte';
+export { default as DemoerComponent } from './base/demoer/DemoerComponent.svelte';
+export { default as DemoPage } from './base/demoer/DemoPage.svelte';
+export * from './base/demoer/types.js';
+export { default as Divider } from './base/divider/Divider.svelte';
+export * from './base/divider/types.js';
+export { default as Icon } from './base/icon/Icon.svelte';
+export * from './base/icon/types.js';
+export { default as Paper } from './base/paper/Paper.svelte';
+export * from './base/paper/type.js';
+export { default as TitleBar } from './base/titleBar/TitleBar.svelte';
+export * from './base/titleBar/types.js';
+export * from './componentCite.js';
+export { default as AutoComplete } from './controls/autocomplete/AutoComplete.svelte';
+export * from './controls/autocomplete/types.js';
+export { default as Button } from './controls/button/Button.svelte';
+export { default as ButtonAction } from './controls/button/ButtonAction.svelte';
+export { default as ButtonMenu } from './controls/button/ButtonMenu.svelte';
+export { default as IconButton } from './controls/button/IconButton.svelte';
+export * from './controls/button/types.js';
+export { default as Checkbox } from './controls/checkbox/Checkbox.svelte';
+export * from './controls/checkbox/types.js';
+export { default as Confirm } from './controls/confirm/Confirm.svelte';
+export * from './controls/confirm/types.js';
+export { default as InPlaceEdit } from './controls/inplaceedit/InPlaceEdit.svelte';
+export * from './controls/inplaceedit/types.js';
+export { default as Progress } from './controls/progress/Progress.svelte';
+export * from './controls/progress/types.js';
+export { default as Rating } from './controls/rating/Rating.svelte';
+export * from './controls/rating/types.js';
+export { default as Select } from './controls/select/Select.svelte';
+export { default as Slider } from './controls/slider/Slider.svelte';
+export * from './controls/slider/types.js';
+export { default as Stepper } from './controls/stepper/Stepper.svelte';
+export * from './controls/stepper/types.js';
+export { default as Switch } from './controls/switch/Switch.svelte';
+export * from './controls/switch/types.js';
+export { default as TextField } from './controls/textfield/TextField.svelte';
+export * from './controls/textfield/types.js';
+export * from './csss/csss.js';
+export { default as DataList } from './data/dataList/DataList.svelte';
+export { default as DataListCell } from './data/dataList/DataListCell.svelte';
+export { default as DataListHead } from './data/dataList/DataListHead.svelte';
+export { default as DataListRow } from './data/dataList/DataListRow.svelte';
+export * from './data/dataList/types.js';
+export { default as Finder } from './data/finder/Finder.svelte';
+export * from './data/finder/types.js';
+export { default as Grouper } from './data/grouper/Grouper.svelte';
+export * from './data/grouper/types.js';
+export { default as Jsoner } from './data/jsoner/Jsoner.svelte';
+export * from './data/jsoner/types.js';
+export { default as List } from './data/list/List.svelte';
+export { default as ListItem } from './data/list/ListItem.svelte';
+export { default as ListTitle } from './data/list/ListTitle.svelte';
+export { default as Loader } from './data/loader/Loader.svelte';
+export * from './data/loader/types.js';
+export { default as Sorter } from './data/sorter/Sorter.svelte';
+export { default as Sorterer } from './data/sorter/Sorterer.svelte';
+export * from './data/sorter/types.js';
+export { default as Drawer } from './navigation/drawer/Drawer.svelte';
+export * from './navigation/drawer/types.js';
+export { default as Tabs } from './navigation/tabs/Tabs.svelte';
+export * from './navigation/tabs/types.js';
+export * from './styles/slotuisheet/containerConfig.css';
+export { default as SlotuiSheet } from './styles/slotuisheet/SlotuiSheet.svelte';
+export * from './styles/slotuisheet/types.js';
+export * from './styles/slotuisheet/utils.js';
+export * from './types/slotui-ambient.d.js';
+export { default as BootStrApp } from './ui/bootstrapp/BootStrApp.svelte';
+export * from './ui/chromeFrame/chromeFrame.store.js';
+export { default as ChromeFrame } from './ui/chromeFrame/ChromeFrame.svelte';
+export * from './ui/chromeFrame/chromeFrame.utils.js';
+export { default as ChromeFrameButtonList } from './ui/chromeFrame/ChromeFrameButtonList.svelte';
+export { default as ChromeFrameList } from './ui/chromeFrame/ChromeFrameList.svelte';
+export * from './ui/chromeFrame/types.js';
+export { default as Frame } from './ui/frame/Frame.svelte';
+export * from './ui/frame/types.js';
+export { default as Login } from './ui/login/Login.svelte';
+export * from './ui/login/store.js';
+export * from './ui/login/types.js';
+export { default as Marquee } from './ui/marquee/Marquee.svelte';
+export * from './ui/marquee/types.js';
+export { default as Menu } from './ui/menu/Menu.svelte';
+export { default as MenuItem } from './ui/menu/MenuItem.svelte';
+export { default as MenuTitle } from './ui/menu/MenuTitle.svelte';
+export * from './ui/menu/types.js';
+export { default as MenuList } from './ui/menuList/MenuList.svelte';
+export { default as MenuListItem } from './ui/menuList/MenuListItem.svelte';
+export { default as MenuListTitle } from './ui/menuList/MenuListTitle.svelte';
+export * from './ui/menuList/types.js';
+export { default as Panel } from './ui/panel/Panel.svelte';
+export { default as Paneler } from './ui/panel/Paneler.svelte';
+export { default as PanelGrid } from './ui/panel/PanelGrid.svelte';
+export { default as PanelSlide } from './ui/panel/PanelSlide.svelte';
+export * from './ui/panel/types.js';
+export * from './ui/popper/actions.js';
+export { default as Popper } from './ui/popper/Popper.svelte';
+export * from './ui/popper/types.js';
+export * from './ui/popper/usePopper.js';
+export { default as Preview } from './ui/preview/Preview.svelte';
+export * from './ui/preview/Preview.svelte.demo';
+export * from './ui/preview/types.js';
+export { default as ServiceBox } from './ui/serviceBox/ServiceBox.svelte';
+export { default as BootMenu } from './ui/startMenu/BootMenu.svelte';
+export { default as Taskbar } from './ui/taskbar/Taskbar.svelte';
+export { default as TaskBarContent } from './ui/taskbar/TaskBarContent.svelte';
+export * from './ui/taskbar/types.js';
+export { default as ThemeSwitcher } from './ui/themeswitcher/ThemeSwitcher.svelte';
+export * from './ui/toast/store.js';
+export { default as Toast } from './ui/toast/Toast.svelte';
+export { default as Toaster } from './ui/toast/Toaster.svelte';
+export * from './ui/toast/types.js';
+export { default as ToggleBar } from './ui/toggleBar/ToggleBar.svelte';
+export * from './ui/toggleBar/types.js';
+export { default as ToolBar } from './ui/toolBar/ToolBar.svelte';
+export * from './ui/toolBar/types.js';
+export { default as Tree } from './ui/tree/Tree.svelte';
+export * from './ui/tree/tree.utils.js';
+export * from './ui/tree/types.js';
+export * from './ui/window/actions.svelte.js';
+export * from './ui/window/store.js';
+export * from './ui/window/types.js';
+export { default as Window } from './ui/window/Window.svelte';
+export { default as Content } from './utils/content/Content.svelte';
+export * from './utils/content/types.js';
+export { default as ContextRooter } from './utils/contextRooter/ContextRooter.svelte';
+export { default as Css } from './utils/css/Css.svelte';
+export * from './utils/effects/transitions.js';
+export * from './utils/engine/elem.js';
+export * from './utils/engine/engine.js';
+export * from './utils/engine/presets.js';
+export * from './utils/engine/site.utils.js';
+export * from './utils/engine/stator.js';
+export * from './utils/engine/utils.js';
+export * from './utils/engine/wactions.utils.js';
+export { default as Looper } from './utils/looper/Looper.svelte';
+export * from './utils/looper/types.js';
+export { default as Slotted } from './utils/slotted/Slotted.svelte';
+export * from './utils/stylesheet/containerConfig.css';
+export { default as StyleSheet } from './utils/stylesheet/StyleSheet.svelte';
+export * from './utils/stylesheet/types.js';
+export * from './utils/stylesheet/utils.js';
+export * from './utils/uses/autofocus/autofocus.js';
+export * from './utils/uses/clickAway/clickAway.js';
+export * from './utils/uses/draggabler.js';
+export * from './utils/uses/event.js';
+export * from './utils/uses/makeOnTop.js';
+export * from './utils/uses/navigation.js';
+export * from './utils/uses/positioner.js';
+export * from './utils/uses/resizer/resizer.js';
+export * from './utils/uses/stickTo/stickTo.js';
+export * from './utils/uses/sx4u/sx4u.js';
+export * from './utils/uses/sx4u/sx4uPreprocess.js';
+export * from './utils/uses/toggler.js';