@medyll/idae-slotui-svelte 0.3.0

package/dist/data/finder/Finder.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">import Button from "../../controls/button/Button.svelte";
+import TextField from "../../controls/textfield/TextField.svelte";
+import { dataOp } from "../../utils/engine/utils.js";
+import Popper from "../../ui/popper/Popper.svelte";
+import MenuList from "../../ui/menuList/MenuList.svelte";
+import MenuListItem from "../../ui/menuList/MenuListItem.svelte";
+import { widthPreset } from "../../types/index.js";
+import { onEvent } from "../../utils/uses/event.js";
+let {
+  class: className = "",
+  styleRoot = "",
+  classRoot = "",
+  style = "",
+  element,
+  data = [],
+  defaultField = "*",
+  showSortMenu = false,
+  mode = "partial",
+  filteredData = $bindable(filit()),
+  sizeRoot = widthPreset.auto,
+  width = "full",
+  tall = "default",
+  ...restProps
+} = $props();
+let searchString = $state(void 0);
+let container;
+function filit() {
+  let red = $derived(!searchString ? data : doFind(data, searchString, defaultField));
+  return red;
+}
+function doFind(list, kw, field) {
+  let results;
+  if (!kw) {
+    results = data;
+  } else {
+    let kwEx = kw.replace("*", ".*.");
+    results = mode === "exact" ? dataOp.filterList(list, kwEx, field) : dataOp.searchList(list, kwEx, field);
+  }
+  return results;
+}
+let popperOpen;
+let dataKeys = $derived(
+  Object.keys(data[0] || {}).filter((r) => ["string", "number"].includes(typeof data?.[0]?.[r])).sort((a, b) => {
+    return a > b ? 1 : a < b ? -1 : 0;
+  })
+);
+</script>
+
+<div
+	class="finder-container {classRoot}"
+	data-width={sizeRoot}
+	bind:this={container}
+	use:onEvent={{
+		event: 'on:click:away',
+		action: () => {
+			popperOpen = false;
+		}
+	}}
+	style={styleRoot}
+>
+	<div style:flex="1">
+		<TextField
+			bind:value={searchString}
+			bind:element
+			placeholder="find by {defaultField} {mode}"
+			type="search"
+			inputType="search"
+			{width}
+			class={className}
+			{...restProps}
+		/>
+	</div>
+	{#if showSortMenu}
+		<Button
+			onclick={(event) => {
+				event.preventDefault();
+				popperOpen = !popperOpen;
+			}}
+			variant="naked"
+			width="tiny"
+			icon={{ icon: `chevron-${popperOpen ? 'up' : 'down'}`, iconSize: 'tiny' }}
+		/>
+	{/if}
+</div>
+{#if popperOpen}
+	<Popper code="ui" parentNode={container} position="BC" stickToHookWidth={true}>
+		<MenuList style="max-height:350px;overflow:auto;width:100%;" density="default">
+			<MenuListItem
+				divider={true}
+				text="strict"
+				onclick={() => {
+					if (mode === 'exact') {
+						mode = 'partial';
+					} else {
+						mode = 'exact';
+					}
+				}}
+			>
+				{#snippet menuItemLast()}
+					<div class="pad-r-1">
+						<input type="checkbox" checked={mode === 'exact'} style="display:block;margin:0" />
+					</div>
+				{/snippet}
+				strict
+			</MenuListItem>
+			<MenuListItem
+				text="strict"
+				onclick={() => {
+					defaultField = '*';
+				}}
+				>{#snippet menuItemLast()}
+					<div class="pad-r-1">
+						{#if defaultField === '*'}
+							<input
+								type="checkbox"
+								checked={defaultField === '*'}
+								style="display:block;margin:0"
+							/>
+						{/if}
+					</div>
+				{/snippet}
+				{'* All fields'}
+			</MenuListItem>
+			{#each dataKeys as kk}
+				<MenuListItem
+					text="strict"
+					onclick={() => {
+						defaultField = kk;
+					}}
+					>{#snippet menuItemLast()}
+						<div class="pad-r-1">
+							{#if defaultField === kk}
+								<input
+									type="checkbox"
+									checked={defaultField === kk}
+									style="display:block;margin:0"
+								/>
+							{/if}
+						</div>
+					{/snippet}
+					{kk}
+				</MenuListItem>
+			{/each}
+		</MenuList>
+	</Popper>
+{/if}
+
+<style>:root {
+  --finder-gap: var(--sld-gap-tiny);
+}
+
+.finder-container {
+  display: inline-flex;
+  gap: var(--finder-gap);
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+}
+
+.finder-container {
+  --preset-width: var(--sld-width-small);
+  width: var(--preset-width-small);
+  min-width: var(--preset-width-small);
+}
+
+.finder-container[width=tiny], .finder-container.width-tiny {
+  --preset-width: var(--sld-width-tiny);
+  width: var(--sld-width-tiny) !important;
+}
+
+.finder-container[width=mini], .finder-container.width-mini {
+  --preset-width: var(--sld-width-mini);
+  width: var(--sld-width-mini) !important;
+}
+
+.finder-container[width=small], .finder-container.width-small {
+  --preset-width: var(--sld-width-small);
+  width: var(--sld-width-small) !important;
+}
+
+.finder-container[width=med], .finder-container.width-med {
+  --preset-width: var(--sld-width-med);
+  width: var(--sld-width-med) !important;
+}
+
+.finder-container[width=kind], .finder-container.width-kind {
+  --preset-width: var(--sld-width-kind);
+  width: var(--sld-width-kind) !important;
+}
+
+.finder-container[width=full], .finder-container.width-full {
+  --preset-width: var(--sld-width-full);
+  width: var(--sld-width-full) !important;
+}
+
+.finder-container[width=auto], .finder-container.width-auto {
+  --preset-width: var(--sld-width-auto);
+  width: var(--sld-width-auto) !important;
+}
+
+.finder-container[width=default], .finder-container.width-default {
+  --preset-width: var(--sld-width-default);
+  width: var(--sld-width-default) !important;
+}
+
+.finder-container {
+  --preset-tall: var(--sld-tall-small);
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+
+.finder-container[tall=tiny], .finder-container.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+
+.finder-container[tall=mini], .finder-container.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+
+.finder-container[tall=small], .finder-container.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+
+.finder-container[tall=med], .finder-container.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+
+.finder-container[tall=kind], .finder-container.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+
+.finder-container[tall=auto], .finder-container.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+
+.finder-container[tall=default], .finder-container.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}</style>

package/dist/data/finder/Finder.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        classRoot?: string;
+        styleRoot?: string;
+        style?: string;
+        element?: HTMLDivElement | null;
+        data: import("../../types/index.js").Data[];
+        defaultField: string;
+        showSortMenu?: boolean;
+        mode?: "exact" | "partial";
+        filteredData?: import("../../types/index.js").Data[] | undefined;
+        sizeRoot?: import("../../types/index.js").ElementProps["width"];
+        width?: import("../../types/index.js").ElementProps["width"];
+        tall?: import("../../types/index.js").ElementProps["tall"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type FinderProps_ = typeof __propDef.props;
+export { FinderProps_ as FinderProps };
+export type FinderEvents = typeof __propDef.events;
+export type FinderSlots = typeof __propDef.slots;
+export default class Finder extends SvelteComponent<FinderProps_, FinderEvents, FinderSlots> {
+}

package/dist/data/finder/finder.scss

@@ -0,0 +1,14 @@
+@import "../../styles/slotui-mixins.scss";
+
+:root {
+    --finder-gap: var(--sld-gap-tiny);
+}
+
+.finder {
+    &-container {
+        display: inline-flex;
+        gap: var(--finder-gap);
+        @include ui-width-presets;
+        @include ui-tall-presets;
+    }
+}

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

@@ -0,0 +1,29 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import { type Data, type ElementProps } from '../../types/index.js';
+export type FinderProps<T = Data> = {
+    /** className off the root component */
+    class?: string;
+    classRoot?: string;
+    styleRoot?: string;
+    /** css style off the root component */
+    style?: string;
+    /** element root HTMLDivElement props */
+    element?: HTMLDivElement | null;
+    /** initial data to look in */
+    data: T[];
+    /** default field to be used, can be * */
+    defaultField: string;
+    /** show the opener button for the choice of fields */
+    showSortMenu?: boolean;
+    /** search mode : exact or partial match*/
+    mode?: 'exact' | 'partial';
+    /** external bind use, to read filtered data */
+    filteredData?: T[];
+    /** with of the root element using  presets */
+    sizeRoot?: ElementProps['width'];
+    /** with of the input using  presets */
+    width?: ElementProps['width'];
+    /** with of the input using  presets */
+    tall?: ElementProps['tall'];
+};
+export declare let parameters: DemoerStoryProps<FinderProps<Data>>, componentArgs: FinderProps<Data>;

package/dist/data/finder/types.js

@@ -0,0 +1,23 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+import { tallPreset, widthPreset } from '../../types/index.js';
+const FinderPropsDemoValues = {
+    data: {
+        type: 'data',
+        values: [[{ name: 'name1' }, { name: 'name2' }]],
+        private: true
+    },
+    defaultField: {
+        type: 'string',
+        values: ['name'],
+        default: 'name'
+    },
+    width: {
+        type: 'width',
+        default: widthPreset.default
+    },
+    tall: {
+        type: 'tall',
+        default: tallPreset.default
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(FinderPropsDemoValues);

package/dist/data/grouper/Grouper.demo.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import Grouper from "./Grouper.svelte";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import { parameters, componentArgs } from "./types.js";
+let code = `<Grouper 
+	bind:groupedData
+	bind:activeGroupField 
+	{data}
+	/>`;
+let groupedData;
+let activeGroupField;
+</script>
+
+<ComponentDemo component="Grouper">
+	<div class="flex-v gap-large">
+		<DemoPage {code} component="Popper">
+			<Demoer {componentArgs} {parameters}>
+				{#snippet children({ activeParams })}
+					<div class="flex-h flex-align-middle gap-tiny">
+						<Grouper bind:groupedData bind:activeGroupField {...activeParams} />
+						{activeGroupField}
+					</div>
+					{JSON.stringify(groupedData)}
+					{JSON.stringify(activeGroupField)}
+				{/snippet}
+			</Demoer>
+		</DemoPage>
+	</div>
+</ComponentDemo>

package/dist/data/grouper/Grouper.demo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GrouperProps = typeof __propDef.props;
+export type GrouperEvents = typeof __propDef.events;
+export type GrouperSlots = typeof __propDef.slots;
+export default class Grouper extends SvelteComponent<GrouperProps, GrouperEvents, GrouperSlots> {
+}
+export {};

package/dist/data/grouper/Grouper.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" generics="T extends object">import Button from "../../controls/button/Button.svelte";
+import ButtonMenu from "../../controls/button/ButtonMenu.svelte";
+import { dataOp } from "@medyll/idae-engine";
+import Looper from "../../utils/looper/Looper.svelte";
+let {
+  class: className = "",
+  element,
+  elementButton,
+  style = "",
+  groupBy,
+  grouperMode = "menu",
+  groupListItems,
+  data,
+  buttonProps,
+  groupByField,
+  groupByTitleField,
+  groupByOrder = "asc",
+  showUnGrouped = false,
+  ungroupedTitle = "ungrouped",
+  activeGroupField = $bindable(),
+  groupedData = $bindable(),
+  children,
+  ...rest
+} = $props();
+let groupedFieldList = $derived(dataOp.getDataKeys(data ?? []) ?? []);
+let menuProps = $derived.by(() => {
+  let menuListItems = groupedFieldList.map((dtaK) => {
+    return { text: dtaK, data: dtaK };
+  });
+  menuListItems.push({ text: "un-group", icon: "cancel", data: [] });
+  return {
+    menuListItems,
+    onclick: (field) => {
+      activeGroupField = field;
+      groupedData = dataOp.groupBy({
+        dataList: data ?? [],
+        groupBy: field ?? "undefined"
+      });
+    }
+  };
+});
+function buttonSelect(field) {
+  if (field) {
+    activeGroupField = field;
+    groupedData = dataOp.groupBy({
+      dataList: data ?? [],
+      groupBy: field ?? "undefined"
+    });
+  }
+}
+</script>
+
+<div bind:this={element} class="grouper {className}" {style} {...rest}>
+	{#if grouperMode === 'menu'}
+		<ButtonMenu bind:element={elementButton} {...buttonProps} {menuProps}>
+			{activeGroupField ?? 'group by'}
+		</ButtonMenu>
+	{/if}
+	{#if grouperMode === 'button'}
+		<Looper style="display:flex;gap:0.2rem;" class="flex-h" data={groupedFieldList}>
+			{#snippet children({ item })}
+				<Button
+					onclick={() => {
+						buttonSelect(item);
+					}}
+					{...buttonProps}
+					title={item}
+					width="mini">{item}</Button
+				>
+			{/snippet}
+		</Looper>
+	{/if}
+</div>

package/dist/data/grouper/Grouper.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponent } from "svelte";
+import { dataOp } from '@medyll/idae-engine';
+declare class __sveltets_Render<T extends object> {
+    props(): {
+        'anchor-for'?: string;
+        element?: HTMLElement;
+        class?: string;
+        style?: string;
+        container?: `inline` | `size` | `normal`;
+        hideMaxWidth?: string;
+        hideMaxHeight?: string;
+        hideMinWidth?: string;
+        hideMinHeight?: string;
+        children?: (import("svelte").Snippet<[any]> & import("svelte").Snippet<[]>) | undefined;
+        grouperMode?: "button" | "menu";
+        groupedData?: any;
+        groupListItems: string[];
+        data: T[];
+        groupBy: dataOp<T_1>;
+        groupByField: string;
+        groupByTitleField?: string;
+        groupByOrder?: "asc" | "desc";
+        showUnGrouped?: boolean;
+        ungroupedTitle?: string;
+        activeGroupField?: string;
+        buttonProps?: import("../../index.js").ButtonProps;
+        elementButton?: HTMLElement;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type GrouperProps_<T extends object> = ReturnType<__sveltets_Render<T>['props']>;
+export type GrouperEvents<T extends object> = ReturnType<__sveltets_Render<T>['events']>;
+export type GrouperSlots<T extends object> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Grouper<T extends object> extends SvelteComponent<GrouperProps_<T>, GrouperEvents<T>, GrouperSlots<T>> {
+}
+export {};

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

@@ -0,0 +1,48 @@
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { CommonProps, Data } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import { type DataOpGroupByOptions, type DataOpGroupResult } from '@medyll/idae-engine';
+import type { ButtonProps } from '../../controls/button/types.js';
+export type GroupItemType<T = Data> = {
+    primary: string;
+    secondary: string;
+    icon?: string;
+    data?: T;
+};
+export type GroupTitleType<T = Data> = {
+    isGroup: boolean;
+    code: string;
+    primary: string;
+    data?: T;
+};
+export type GroupedDataType<T = Data> = [GroupTitleType, T[]][];
+export type GrouperProps<T extends object> = CommonProps & {
+    /** Grouper mode */
+    grouperMode?: 'button' | 'menu';
+    /** Final grouped data as raw object */
+    groupedData?: DataOpGroupResult<T>;
+    /** List of available groups shown to user instead of auto-discovery */
+    groupListItems: string[];
+    /** Data to group */
+    data: T[];
+    /** groupBy options Field from data to group by */
+    groupBy: DataOpGroupByOptions<T>;
+    /** @deprecated Field from data to group by */
+    groupByField: string;
+    /** Presented field from data to group by */
+    groupByTitleField?: string;
+    /** Order on which the grouped list is sorted */
+    groupByOrder?: 'asc' | 'desc';
+    /** Show ungrouped data */
+    showUnGrouped?: boolean;
+    /** Ungrouped title when show ungrouped data props is set to true */
+    ungroupedTitle?: string;
+    /** Active group field, useful when several */
+    activeGroupField?: string;
+    buttonProps?: ButtonProps;
+    elementButton?: HTMLElement;
+    /** Children snippet for the default content */
+    children?: Snippet;
+};
+export declare const grouperDemoValues: DemoerStoryProps<GrouperProps>;
+export declare const parameters: DemoerStoryProps<Record<string, any>>, componentArgs: Record<string, any>;

package/dist/data/grouper/types.js

@@ -0,0 +1,115 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+import {} from '@medyll/idae-engine';
+let data = [
+    {
+        id: 1,
+        name: 'Jean',
+        lastname: 'paul',
+        job: 'developer',
+        situation: { age: 21, city: 'london' }
+    },
+    {
+        id: 2,
+        name: 'Alice',
+        lastname: 'Smith',
+        job: 'designer',
+        situation: { age: 22, city: 'paris' }
+    },
+    {
+        id: 3,
+        name: 'John',
+        lastname: 'Doe',
+        job: 'manager',
+        situation: { age: 23, city: 'berlin' }
+    },
+    {
+        id: 4,
+        name: 'Emily',
+        lastname: 'Johnson',
+        job: 'engineer',
+        situation: { age: 24, city: 'madrid' }
+    },
+    {
+        id: 5,
+        name: 'Michael',
+        lastname: 'Williams',
+        job: 'developer',
+        situation: { age: 25, city: 'rome' }
+    },
+    {
+        id: 6,
+        name: 'Sophia',
+        lastname: 'Brown',
+        job: 'designer',
+        situation: { age: 26, city: 'lisbon' }
+    },
+    {
+        id: 7,
+        name: 'Daniel',
+        lastname: 'Miller',
+        job: 'manager',
+        situation: { age: 27, city: 'amsterdam' }
+    },
+    {
+        id: 8,
+        name: 'Olivia',
+        lastname: 'Davis',
+        job: 'engineer',
+        situation: { age: 28, city: 'brussels' }
+    },
+    {
+        id: 9,
+        name: 'Matthew',
+        lastname: 'Wilson',
+        job: 'developer',
+        situation: { age: 29, city: 'dublin' }
+    },
+    {
+        id: 10,
+        name: 'Ava',
+        lastname: 'Taylor',
+        job: 'designer',
+        situation: { age: 30, city: 'athens' }
+    },
+    {
+        id: 11,
+        name: 'David',
+        lastname: 'Anderson',
+        job: 'manager',
+        situation: { age: 31, city: 'stockholm' }
+    },
+    {
+        id: 12,
+        name: 'Emma',
+        lastname: 'Thomas',
+        job: 'engineer',
+        situation: { age: 32, city: 'helsinki' }
+    }
+];
+export const grouperDemoValues = {
+    data: {
+        type: 'data',
+        private: true,
+        values: [data]
+    },
+    groupBy: {
+        type: 'string',
+        values: ['group']
+    },
+    grouperMode: {
+        type: 'string',
+        values: ['menu', 'button']
+    },
+    showUnGrouped: {
+        type: 'boolean'
+    },
+    groupByField: {
+        type: 'string',
+        values: [undefined, 'subgroup']
+    },
+    groupListItems: {
+        type: 'string',
+        values: [undefined, ['group', 'subgroup']]
+    }
+};
+export const { parameters, componentArgs } = demoerArgs(grouperDemoValues);

package/dist/data/jsoner/Jsoner.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">let { class: className = "", element, data = [], mode = "array" } = $props();
+if (Array.isArray(data)) {
+  mode = "array";
+} else if (typeof data === "object") {
+  mode = "object";
+} else if (typeof data === "string") {
+  mode = "string";
+} else if (typeof data === "number") {
+  mode = "number";
+}
+</script>
+
+{#if data}
+	{#if mode === 'array'}
+		<div class="flex-h w-large flex-wrap gap-small">
+			{#each data as kdta, index}
+				<div class="border-l"><svelte:self data={kdta} /></div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if mode === 'object'}
+		<div class="flex-v gap-small">
+			{#each Object.keys(data) as kdta}
+				<div class="flex-h gap-small flex-align-top marg-l">
+					<div class="w-medium pad-1 border-b">- {kdta}</div>
+					<div style="margin-left:4rem;"><svelte:self data={data[kdta]} /></div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if ['string', 'number'].includes(mode)}
+		<div class="pad-1">{data}</div>
+	{/if}
+{/if}