@medyll/idae-slotui-svelte 0.3.0

package/dist/utils/engine/presets.js

@@ -0,0 +1,15 @@
+export { uiPresets } from '../../types/index.js';
+export var Position;
+(function (Position) {
+    Position["TC"] = "TC";
+    Position["TL"] = "TL";
+    Position["TR"] = "TR";
+    Position["BC"] = "BC";
+    Position["BL"] = "BL";
+    Position["BR"] = "BR";
+    Position["T"] = "T";
+    Position["R"] = "R";
+    Position["B"] = "B";
+    Position["L"] = "L";
+    Position["C"] = "C"; // Center
+})(Position || (Position = {}));

package/dist/utils/engine/site.utils.d.ts

@@ -0,0 +1,10 @@
+export declare const sitePaths: {
+    component: (args: {
+        code: string;
+        group?: string;
+    }) => string;
+    api: (args: {
+        code: string;
+        group?: string;
+    }) => string;
+};

package/dist/utils/engine/site.utils.js

@@ -0,0 +1,4 @@
+export const sitePaths = {
+    component: (args) => `./svelte-components/${args.code}`,
+    api: (args) => `./svelte-components/${args.code}/api`
+};

package/dist/utils/engine/stator.d.ts

@@ -0,0 +1,9 @@
+type Primitive = string | number | boolean;
+type State<T> = T extends Primitive ? {
+    value: T;
+} : T;
+type StateChangeHandler<T> = (oldValue: T, newValue: T) => void;
+export declare function stator<T>(initialState: T): State<T> & {
+    onchange?: StateChangeHandler<State<T>>;
+};
+export {};

package/dist/utils/engine/stator.js

@@ -0,0 +1,47 @@
+export function stator(initialState) {
+    let objState = !isPrimitive(initialState) && initialState !== null
+        ? initialState
+        : { value: initialState };
+    function isPrimitive(val) {
+        return typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean';
+    }
+    let onchange = () => {
+        console.log('change unset');
+    };
+    const handler = {
+        get(target, property, receiver) {
+            // console.log({ target, property, receiver });
+            if (isPrimitive(initialState)) {
+                return Reflect.get(target, 'value', receiver);
+            }
+            else {
+                return Reflect.get(target, property, receiver);
+            }
+        },
+        set(target, property, value, receiver) {
+            if (property === 'onchange' && typeof value === 'function') {
+                onchange = value;
+                return true;
+            }
+            const result = Reflect.set(target, property, value, receiver);
+            const oldValue = target[property];
+            if (onchange && oldValue !== value) {
+                //onchange(oldValue as State<T>, value);
+                onchange(oldValue, value);
+            }
+            //console.log({ target, property, value, receiver });
+            return result;
+        },
+        has(target, property) {
+            if (property === 'onchange') {
+                return true;
+            }
+            return Reflect.has(target, property);
+        },
+        ownKeys(target) {
+            const keys = Reflect.ownKeys(target);
+            return keys.filter((key) => key !== 'onchange');
+        }
+    };
+    return new Proxy(objState, handler);
+}

package/dist/utils/engine/utils.d.ts

@@ -0,0 +1,29 @@
+import type { Data } from '../../types/index.js';
+export type PropsProxyProps<T = any, B = any> = [string: keyof T, string: keyof B | (() => void)][];
+export declare const propsProxy: <T = any, B = any, C = any>(props: PropsProxyProps<T, B>, data: any[]) => Record<keyof B, any>[];
+export type ResolverPathType<T> = T extends object ? {
+    [K in keyof T]: T[K] extends null | undefined ? K & string : `${K & string}${'' extends ResolverPathType<T[K]> ? '' : '.'}${ResolverPathType<T[K]>}`;
+}[keyof T] : '';
+/** data manipulation class */
+export declare class dataOp {
+    /** sorting  */
+    static sortBy<T = Data>(arr: T[], by: string, sortDir?: string): T[];
+    /** search an object in an array */
+    static filterList<T = any>(arr: T[], kw: number | string, fieldname?: string | '*'): T[];
+    /** resolve first founded object in array */
+    static filterListFirst<T = any>(arr: T[], kw: number | string, fieldname?: string): T;
+    static searchList<T = Record<string, any>>(arr: T[], kw: number | string, fieldname: string | '*'): T[];
+    static groupBy<T = Data>(dataList: T[], groupField: ResolverPathType<T> | ResolverPathType<T>[], opt?: {
+        keepUngroupedData: boolean;
+        fieldTitle?: string;
+    }): {};
+    static resolveDotPath<T = Data>(object: T, path: ResolverPathType<T>, defaultValue?: any): string;
+    /**
+     *
+     * @param arr array to find in
+     * @param value value to seek for
+     * @param key  object key to match with
+     * @returns number
+     */
+    static findObjectIndex<T = Record<string, any>>(arr: T[], value: any, key?: string): number;
+}

package/dist/utils/engine/utils.js

@@ -0,0 +1,112 @@
+export const propsProxy = (props, data) => {
+    let ret = [];
+    for (const dta of data) {
+        let out = {};
+        for (const prop of props) {
+            const keyListItem = prop[0];
+            const keyData = prop[1];
+            out[keyListItem] = typeof keyData === 'function' ? keyData(dta) : dta[keyData];
+        }
+        // keep original data
+        out['data'] = dta;
+        ret.push(out);
+    }
+    return ret;
+};
+/** data manipulation class */
+export class dataOp {
+    /** sorting  */
+    static sortBy(arr, by, sortDir = 'asc') {
+        const sortD = sortDir === 'asc' ? 1 : -1;
+        return [...arr].sort((a, b) => {
+            return this.resolveDotPath(a, by) > this.resolveDotPath(b, by)
+                ? sortD
+                : this.resolveDotPath(b, by) > this.resolveDotPath(a, by)
+                    ? -sortD
+                    : 0;
+        });
+    }
+    /** search an object in an array */
+    static filterList(arr, kw, fieldname = 'id') {
+        return arr?.filter((item) => {
+            if (fieldname && fieldname !== '*')
+                return this.resolveDotPath(item, fieldname) === kw;
+            if (!fieldname || fieldname === '*')
+                return Object.keys(item).some((key) => {
+                    return ['string', 'number'].includes(typeof item?.[key]) ? item[key] == kw : false;
+                });
+        });
+    }
+    /** resolve first founded object in array */
+    static filterListFirst(arr, kw, fieldname = 'id') {
+        return this.filterList(arr, kw, fieldname)?.[0];
+    }
+    static searchList(arr, kw, fieldname) {
+        let reg;
+        try {
+            reg = new RegExp(`${kw}`, 'i');
+        }
+        catch (e) {
+            return [];
+        }
+        return arr.filter((item) => {
+            if (fieldname !== '*')
+                return this.resolveDotPath(item, fieldname).toString().search(reg) === -1 ? false : true;
+            if (fieldname === '*')
+                return Object.keys(item).some((key) => {
+                    if (typeof item?.[key] === 'object' && !Array.isArray(item?.[key])) {
+                        return false;
+                    }
+                    return ['string', 'number'].includes(typeof item?.[key])
+                        ? `${item?.[key]}`.search(reg) !== -1
+                        : false;
+                });
+        });
+    }
+    static groupBy(dataList, groupField, opt) {
+        const groupKey = typeof groupField === 'string' ? [groupField] : groupField;
+        return dataList.reduce((result, currentValue) => {
+            if (typeof dataOp.resolveDotPath(currentValue, groupField) === 'undefined') {
+                const rootField = groupField.split('.')[0];
+                const restField = groupField.split('.').slice(1).join('.');
+                // check type of root, to be able to traverse arrays
+                switch (typeof currentValue[rootField]) {
+                    case 'object':
+                        if (Array.isArray(currentValue[rootField])) {
+                            for (const red of currentValue[rootField]) {
+                                const arrKey = opt?.keepUngroupedData
+                                    ? dataOp.resolveDotPath(red, restField) ?? '- ungrouped'
+                                    : dataOp.resolveDotPath(red, restField);
+                                if (arrKey)
+                                    (result[arrKey] = result[arrKey] || []).push(currentValue);
+                            }
+                        }
+                        break;
+                }
+            }
+            const key = opt?.keepUngroupedData
+                ? dataOp.resolveDotPath(currentValue, groupField) ?? '- ungrouped'
+                : dataOp.resolveDotPath(currentValue, groupField);
+            if (key !== undefined)
+                (result[key] = result[key] || []).push(currentValue);
+            return result;
+        }, {});
+    }
+    static resolveDotPath(object, path, defaultValue) {
+        return (path
+            .split('.')
+            .reduce((r, s) => (r ? r[s] : defaultValue), object) ?? undefined);
+    }
+    /**
+     *
+     * @param arr array to find in
+     * @param value value to seek for
+     * @param key  object key to match with
+     * @returns number
+     */
+    static findObjectIndex(arr, value, key = 'id') {
+        return arr.findIndex((obj) => {
+            return this.resolveDotPath(obj, key) === value;
+        });
+    }
+}

package/dist/utils/engine/wactions.utils.js

@@ -0,0 +1,8 @@
+import { get, writable } from 'svelte/store';
+export const startMenuStore = writable(true);
+function toggleStartMenu(event) {
+    if (event)
+        event.stopPropagation();
+    startMenuStore.set(!get(startMenuStore));
+}
+export { toggleStartMenu };

package/dist/utils/looper/Looper.demo.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import Looper from "./Looper.svelte";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+import { parameters, componentArgs } from "./types.js";
+let code = `
+<Looper groupBy={"lastname"}  {data}>
+	{#snippet children({ item, idx })}
+		<div>{item.name} {idx}</div>
+		<div>{item.id} {idx}</div>
+	{/snippet}
+</Looper>`;
+</script>
+
+<ComponentDemo
+	component="Looper"
+	cite="A loop is a loop from start to the final reach. Ernest Hamilton, 1954"
+>
+	<DemoPage component="Alert" {code}>
+		<Demoer {parameters} {componentArgs}>
+			{#snippet children({ activeParams })}
+				<Looper {...activeParams} groupBy={'lastname'}>
+					{#snippet children({ item, idx })}
+						<div class="flex">
+							<div>{item.name}</div>
+							<div>{item.id}</div>
+							<div>{item.id}</div>
+						</div>
+					{/snippet}
+				</Looper>
+			{/snippet}
+		</Demoer>
+	</DemoPage>
+</ComponentDemo>

package/dist/utils/looper/Looper.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 LooperProps = typeof __propDef.props;
+export type LooperEvents = typeof __propDef.events;
+export type LooperSlots = typeof __propDef.slots;
+export default class Looper extends SvelteComponent<LooperProps, LooperEvents, LooperSlots> {
+}
+export {};

package/dist/utils/looper/Looper.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" generics="T= Data">import Slotted from "../slotted/Slotted.svelte";
+import { dataOp } from "@medyll/idae-engine";
+let {
+  class: className,
+  data = [],
+  title,
+  groupBy,
+  sortBy,
+  tag,
+  loopTitle,
+  loopGroupTitle,
+  children,
+  ...rest
+} = $props();
+let sortedData = $derived.by(() => {
+  if (!sortBy) return data;
+  return dataOp.sortBy({ arr: data, by: sortBy });
+});
+let groupedData = $derived.by(() => {
+  if (!groupBy) return void 0;
+  return dataOp.groupBy({ dataList: sortedData, groupBy });
+});
+</script>
+
+{#snippet loop(data)}
+	{#each data ?? [] as item, idx}
+		{@render children?.({ item, idx })}
+	{/each}
+{/snippet}
+<div class={className} style={className ? ' ' : ';display:contents;'} {...rest}>
+	{#if groupBy && groupedData}
+		{#each Object.entries(groupedData) as [key, data], idx}
+			<Slotted child={loopGroupTitle} slotArgs={{ key, data, idx }}>
+				{data.title ?? data.code ?? key}
+			</Slotted>
+			{@render loop(data.data)}
+		{/each}
+	{:else}
+		<Slotted child={loopTitle}>{title}</Slotted>
+		{@render loop(data)}
+	{/if}
+</div>

package/dist/utils/looper/Looper.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+import type { Data } from '../../types/index.js';
+import type { LoopProps } from './types.js';
+declare class __sveltets_Render<T = Data> {
+    props(): LoopProps<T>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type LooperProps<T = Data> = ReturnType<__sveltets_Render<T>['props']>;
+export type LooperEvents<T = Data> = ReturnType<__sveltets_Render<T>['events']>;
+export type LooperSlots<T = Data> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class Looper<T = Data> extends SvelteComponent<LooperProps<T>, LooperEvents<T>, LooperSlots<T>> {
+}
+export {};

package/dist/utils/looper/types.d.ts

@@ -0,0 +1,24 @@
+import type { CommonProps } from '../../types/index.js';
+import type { Snippet } from 'svelte';
+import type { DemoerStoryProps } from '../../base/demoer/types.js';
+import type { DataOpGroupByOptions, DataOpSortBy } from '@medyll/idae-engine';
+export type LoopProps<T> = CommonProps & {
+    title?: string;
+    data?: T[];
+    naked?: boolean;
+    groupBy?: DataOpGroupByOptions<T>;
+    sortBy?: DataOpSortBy<T>;
+    tag?: string;
+    children?: Snippet<[{
+        item: T;
+        idx: number;
+    }]>;
+    loopTitle?: Snippet;
+    loopGroupTitle?: Snippet<[{
+        key: any;
+        data: T[];
+        idx: number;
+    }]>;
+};
+export declare const looperDemoValues: DemoerStoryProps<any>;
+export declare let parameters: DemoerStoryProps<any>, componentArgs: any;

package/dist/utils/looper/types.js

@@ -0,0 +1,46 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+let data = [
+    { id: 1, name: 'Jean', lastname: 'paul', job: 'developer' },
+    { id: 2, name: 'Alice', lastname: 'Smith', job: 'designer' },
+    { id: 3, name: 'John', lastname: 'Doe', job: 'manager' },
+    { id: 4, name: 'Emily', lastname: 'Johnson', job: 'engineer' },
+    { id: 5, name: 'Michael', lastname: 'Williams', job: 'developer' },
+    { id: 6, name: 'Sophia', lastname: 'Brown', job: 'designer' },
+    { id: 7, name: 'Daniel', lastname: 'Miller', job: 'manager' },
+    { id: 8, name: 'Olivia', lastname: 'Davis', job: 'engineer' },
+    { id: 9, name: 'Matthew', lastname: 'Wilson', job: 'developer' },
+    { id: 10, name: 'Ava', lastname: 'Taylor', job: 'designer' },
+    { id: 11, name: 'David', lastname: 'Anderson', job: 'manager' },
+    { id: 12, name: 'Emma', lastname: 'Thomas', job: 'engineer' },
+    { id: 13, name: 'Joseph', lastname: 'Jackson', job: 'developer' },
+    { id: 14, name: 'Mia', lastname: 'White', job: 'designer' },
+    { id: 15, name: 'James', lastname: 'Harris', job: 'manager' },
+    { id: 16, name: 'Isabella', lastname: 'Martin', job: 'engineer' },
+    { id: 17, name: 'Benjamin', lastname: 'Clark', job: 'developer' },
+    { id: 18, name: 'Abigail', lastname: 'Lewis', job: 'designer' },
+    { id: 19, name: 'Ethan', lastname: 'Lee', job: 'manager' },
+    { id: 20, name: 'Charlotte', lastname: 'Walker', job: 'engineer' }
+];
+export const looperDemoValues = {
+    data: {
+        type: 'array',
+        values: [data],
+        default: data,
+        private: true
+    },
+    naked: {
+        type: 'boolean',
+        values: [true, false],
+        default: false
+    },
+    title: {
+        type: 'string',
+        values: ['Looping title']
+    },
+    tag: {
+        type: 'string',
+        values: ['div', 'section', 'article'],
+        default: 'div'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(looperDemoValues);

package/dist/utils/slotted/Slotted.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">let { child, children, slotArgs = $bindable({}) } = $props();
+</script>
+
+{#if child !== undefined}
+	{#key slotArgs}
+		{@render child(slotArgs)}
+	{/key}
+{:else if children}
+	{#key slotArgs}
+		{@render children(slotArgs)}
+	{/key}
+{/if}

package/dist/utils/slotted/Slotted.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
+declare const __propDef: {
+    props: {
+        child?: Snippet<[any]>;
+        slotArgs?: any;
+        children?: Snippet<[any]>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SlottedProps = typeof __propDef.props;
+export type SlottedEvents = typeof __propDef.events;
+export type SlottedSlots = typeof __propDef.slots;
+export default class Slotted extends SvelteComponent<SlottedProps, SlottedEvents, SlottedSlots> {
+}
+export {};

package/dist/utils/stylesheet/StyleSheet.demo.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import { be } from "@medyll/idae-be";
+import { cssDom } from "@medyll/dom-events";
+import StyleSheet from "./StyleSheet.svelte";
+import { configCssVars, toContainerQuery } from "./utils.js";
+const tag = "hideMaxWidth";
+cssDom("[hideMaxWidth]").each((element, changes) => {
+  console.log(be(element).attr.get(tag));
+  let tagValue = be(element).attr.get(tag);
+  if (tag && tagValue) {
+    let objTag = toContainerQuery(tag, tagValue);
+    console.log(objTag);
+    be(element).classAdd(objTag.class).setStyle(objTag.style);
+    console.log(element, changes);
+    be(element).up("[container]").setStyle(objTag.style);
+    console.log(be(element).up("[container]").node);
+  }
+});
+</script>
+
+<StyleSheet showSelectors={true} />
+
+<div container="size" class="container-size" style="container:size;width:135px;relative">
+	<div hideMaxWidth="115px">hideMaxWidth</div>
+</div>

package/dist/utils/stylesheet/StyleSheet.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 StyleSheetProps = typeof __propDef.props;
+export type StyleSheetEvents = typeof __propDef.events;
+export type StyleSheetSlots = typeof __propDef.slots;
+export default class StyleSheet extends SvelteComponent<StyleSheetProps, StyleSheetEvents, StyleSheetSlots> {
+}
+export {};