@medyll/idae-slotui-svelte 0.3.0

package/dist/utils/uses/draggabler.js

@@ -0,0 +1,35 @@
+export function draggebler(node, props) {
+    let parentNode = document.body;
+    let left = node.offsetLeft;
+    let top = node.offsetTop;
+    let moving = false;
+    let target = node.querySelector('.bar') ?? node;
+    target.style.userSelect = 'none';
+    target.addEventListener('mousedown', onMouseDown, true);
+    window.addEventListener('mouseup', onMouseUp, true);
+    window.addEventListener('mousemove', onMouseMove, true);
+    function onMouseDown() {
+        moving = true;
+    }
+    function onMouseMove(e) {
+        if (moving) {
+            left += e.movementX;
+            top += e.movementY;
+            node.style.top = `${top}px`;
+            node.style.left = `${left}px`;
+            // node.style.transform= `translate(${left}px,${top + 'px'})`
+        }
+    }
+    function onMouseUp() {
+        moving = false;
+    }
+    function setPosition() { }
+    return {
+        update(props) { },
+        destroy() {
+            target.removeEventListener('mousedown', onMouseDown, true);
+            window.removeEventListener('mouseup', onMouseUp, true);
+            window.removeEventListener('mousemove', onMouseMove, true);
+        }
+    };
+}

package/dist/utils/uses/event.d.ts

@@ -0,0 +1,10 @@
+interface UseEventProps {
+    event: string;
+    action: (event?: any) => void;
+    options?: boolean | AddEventListenerOptions;
+}
+export declare function onEvent(node: HTMLElement, props: UseEventProps): {
+    update(): void;
+    destroy(): void;
+};
+export {};

package/dist/utils/uses/event.js

@@ -0,0 +1,10 @@
+import { onDestroy } from 'svelte';
+export function onEvent(node, props) {
+    node.addEventListener(props.event, props.action, props.options ?? true);
+    return {
+        update() { },
+        destroy() {
+            node.removeEventListener(props.event, props.action, true);
+        }
+    };
+}

package/dist/utils/uses/makeOnTop.d.ts

@@ -0,0 +1,4 @@
+interface DraggableProps {
+}
+export declare function makeOnTop(node: HTMLElement, props?: DraggableProps): () => void;
+export {};

package/dist/utils/uses/makeOnTop.js

@@ -0,0 +1,11 @@
+export function makeOnTop(node, props) {
+    node.addEventListener('mousedown', onMouseDown, true);
+    function onMouseDown() {
+        let max = Math.max(...Array.from(document.querySelectorAll('body *'), (el) => parseFloat(window.getComputedStyle(el).zIndex)).filter((zIndex) => !Number.isNaN(zIndex)), 0);
+        if (node.style.zIndex != `${max}`)
+            node.style.zIndex = `${max + 2}`;
+    }
+    return () => {
+        node.removeEventListener('mousedown', onMouseDown, true);
+    };
+}

package/dist/utils/uses/navigation.d.ts

@@ -0,0 +1,8 @@
+export type Props = {
+    className: string;
+    selectedIndex: number;
+};
+export declare function navigation(node: HTMLElement, props: Props): {
+    update(): void;
+    destroy(): void;
+};

package/dist/utils/uses/navigation.js

@@ -0,0 +1,79 @@
+export function navigation(node, props) {
+    const { className } = props;
+    let selectedIndex = props.selectedIndex ?? -1;
+    node.addEventListener('keydown', preNavigate);
+    node.addEventListener('click', () => {
+        node.focus();
+    });
+    node.addEventListener('menu:navigate', ((e) => {
+        preNavigate(e.detail);
+    }));
+    node?.addEventListener('menu:gotoIndex', ((e) => {
+        let menuItems = Array.from(node.querySelectorAll('.' + className));
+        if (menuItems[e.detail.selectedIndex]) {
+            scrollToElement(menuItems[e.detail.selectedIndex]);
+        }
+        node.focus();
+    }));
+    function preNavigate(e) {
+        if (e.keyCode === 13)
+            return;
+        if (![38, 40].includes(e.keyCode))
+            return false;
+        if ([38, 40].includes(e.keyCode))
+            e.preventDefault();
+        const dir = e.keyCode === 38 ? 'prev' : 'next';
+        let menuItems = Array.from(node.querySelectorAll('.' + className));
+        let navElement = navigateToItem(selectedIndex, dir);
+        if (navElement)
+            selectedIndex = menuItems.indexOf(navElement);
+        scrollToElement(navElement);
+        node.dispatchEvent(new CustomEvent('menu:onnavigate', { detail: { selectedIndex } }));
+    }
+    function navigateToItem(currentIndex, dir) {
+        if (currentIndex == -1)
+            currentIndex = 0;
+        let menuItems = Array.from(node.querySelectorAll('.' + className));
+        let navElement;
+        if (dir === 'next') {
+            navElement = nextItem(menuItems[currentIndex], className);
+        }
+        else {
+            navElement = previousItem(menuItems[currentIndex], className);
+        }
+        return navElement;
+    }
+    function nextItem(node, className) {
+        let sibling = node.nextElementSibling;
+        while (sibling) {
+            if (sibling.classList.contains(className)) {
+                return sibling;
+            }
+            sibling = sibling.nextElementSibling;
+        }
+        return node.parentElement.querySelector('.menuListItem');
+    }
+    function previousItem(node, className) {
+        let sibling = node.previousElementSibling;
+        while (sibling) {
+            if (sibling.classList.contains(className)) {
+                return sibling;
+            }
+            sibling = sibling.previousElementSibling;
+        }
+        node.parentElement.querySelector('.menuListItem');
+    }
+    function scrollToElement(target) {
+        if (target) {
+            const tD = target.getBoundingClientRect();
+            const sD = node.getBoundingClientRect();
+            if (tD.top - 10 <= sD.top || tD.bottom >= sD.bottom) {
+                target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }
+    }
+    return {
+        update() { },
+        destroy() { }
+    };
+}

package/dist/utils/uses/positioner.d.ts

@@ -0,0 +1,7 @@
+interface Positioner {
+    disabled?: false;
+    position: 'center' | 'cascade' | 'overlap' | undefined;
+    siblings?: string;
+}
+export declare const positioner: (node: Element, opts: Positioner) => void;
+export {};

package/dist/utils/uses/positioner.js

@@ -0,0 +1,18 @@
+// center, cascade, overlap
+export const positioner = (node, opts) => {
+    const wBody = document.body.getBoundingClientRect();
+    const wElement = node.getBoundingClientRect();
+    let top, left;
+    switch (opts.position) {
+        case 'center':
+            top = document.body.clientHeight / 2 - wElement.height / 2;
+            left = wBody.width / 2 - wElement.width / 2;
+            break;
+        case 'cascade':
+            top = document.body.clientHeight / 2 - wElement.height / 2;
+            left = wBody.width / 2 - wElement.width / 2;
+            break;
+    }
+    node.style.top = top + 'px';
+    node.style.left = left + 'px';
+};

package/dist/utils/uses/resizer/resizer.d.ts

@@ -0,0 +1,7 @@
+interface ResizerProps {
+    direction?: 'horizontal' | 'vertical' | 'multiple';
+}
+export declare const resizer: (node: HTMLElement, props?: ResizerProps) => {
+    destroy(): void;
+};
+export {};

package/dist/utils/uses/resizer/resizer.js

@@ -0,0 +1,76 @@
+export const resizer = (node, props = {}) => {
+    let handle;
+    let width = eval(node.style.width.replace('px', '')) ?? node.offsetWidth;
+    let x = 0;
+    const { direction = 'horizontal' } = props;
+    let expanding = null;
+    let start = null, initial = null;
+    const eventStart = new CustomEvent('resizer:start', { bubbles: true });
+    const eventEnd = new CustomEvent('resizer:end', { bubbles: true });
+    const arrPool = [];
+    let timer = null;
+    if (node.parentNode) {
+        node.parentNode.addEventListener('mousemove', expand);
+        node.parentNode.addEventListener('mouseup', stopExpand);
+    }
+    if (!node.querySelector('data-resizer')) {
+        handle = document.createElement('div');
+        handle.setAttribute('data-resizer', 'true');
+        handle.setAttribute('style', 'position:absolute;height:100%;right:0;cursor:col-resize;width:8px;background-color:transparent;z-index:10');
+        handle.innerHTML = '';
+        node.appendChild(handle);
+    }
+    else {
+        handle = node.querySelector('data-resizer') ?? node;
+    }
+    if (handle)
+        handle.addEventListener('mousedown', startExpand);
+    async function expand(event) {
+        if (!expanding)
+            return;
+        if (direction == 'horizontal') {
+            if (start) {
+                clearTimeout(timer);
+                timer = setTimeout(() => {
+                    const delta = event.pageX - start;
+                    if (initial?.width) {
+                        width = initial.width + delta;
+                        node.style.width = width + 'px';
+                    }
+                    const eventResize = new CustomEvent('resizer:resize', {
+                        detail: { width },
+                        bubbles: true
+                    });
+                    node.dispatchEvent(eventResize);
+                }, 10);
+            }
+        }
+    }
+    function startExpand(event) {
+        // event.stopPropagation();
+        // event.preventDefault();
+        if (!expanding) {
+            expanding = true;
+            start = event.pageX;
+            width = eval(node.style.width.replace('px', '')) ?? node.offsetWidth;
+            initial = { x, width };
+            node.dispatchEvent(eventStart);
+        }
+    }
+    function stopExpand() {
+        expanding = null;
+        start = null;
+        initial = null;
+        node.dispatchEvent(eventEnd);
+    }
+    return {
+        destroy() {
+            if (handle)
+                handle.removeEventListener('mousedown', startExpand);
+            if (node.parentNode) {
+                node.parentNode.removeEventListener('mousemove', expand);
+                node.parentNode.removeEventListener('mouseup', stopExpand);
+            }
+        }
+    };
+};

package/dist/utils/uses/stickTo/stickTo.d.ts

@@ -0,0 +1,26 @@
+declare enum Position {
+    TC = "TC",// Top Center
+    TL = "TL",// Top Left
+    TR = "TR",// Top Right
+    BC = "BC",// Bottom Center
+    BL = "BL",// Bottom Left
+    BR = "BR",// Bottom Right
+    T = "T",// align on Top
+    R = "R",// align on Right
+    B = "B",// align on Bottom
+    L = "L",// align on Left
+    C = "C"
+}
+export type StickToPositionType = keyof typeof Position;
+type StickToProps = {
+    parentNode: HTMLElement;
+    position?: StickToPositionType;
+    disabled?: boolean;
+    stickToHookWidth?: boolean;
+};
+/** @type {import('svelte/action').Action<HTMLElement, StickToProps>}  */
+export declare function stickTo(node: HTMLElement, props: StickToProps): {
+    update(props: StickToProps): void;
+    destroy(): void;
+};
+export {};

package/dist/utils/uses/stickTo/stickTo.js

@@ -0,0 +1,138 @@
+// import { Position } from '../../../engine/presets.js';
+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"; // align on Center
+})(Position || (Position = {}));
+/** @type {import('svelte/action').Action<HTMLElement, StickToProps>}  */
+export function stickTo(node, props) {
+    let { parentNode, position, stickToHookWidth } = props;
+    let nodeObserver;
+    let parentObserver;
+    if (node && parentNode) {
+        init(props);
+    }
+    function init(props) {
+        parentNode = props.parentNode;
+        position = props.position;
+        stickToHookWidth = props.stickToHookWidth;
+        if (node && props.parentNode) {
+            document.body.appendChild(node);
+            setPosition(node, props.position, props.parentNode);
+            scrollObserver();
+            nodeObserver = new ResizeObserver(() => {
+                setPosition(node, props.position, props.parentNode);
+            });
+            nodeObserver.observe(node);
+            parentObserver = new ResizeObserver(() => {
+                setPosition(node, props.position, props.parentNode);
+            });
+            parentObserver.observe(props.parentNode);
+        }
+    }
+    function scrollObserver() {
+        const scrollableContainers = getScrollParent(node);
+        scrollableContainers.forEach((el) => {
+            el.addEventListener('scroll', () => {
+                setPosition(node, position, parentNode);
+            });
+        });
+    }
+    function getScrollParent(node) {
+        let scrollableContainers = [];
+        let el = parentNode;
+        while (el && el !== document.body) {
+            let computedStyle = getComputedStyle(el);
+            if (computedStyle.overflowY === 'auto' || computedStyle.overflowY === 'scroll') {
+                if (!scrollableContainers.includes(el))
+                    scrollableContainers.push(el);
+            }
+            el = el.parentElement ?? window.document.body; // Passez au parent
+        }
+        return scrollableContainers;
+    }
+    function checkBoundaries(node, parentNode, position) {
+        const nodePos = node.getBoundingClientRect();
+        let newPos = position;
+        window.requestAnimationFrame(() => { });
+        const threshold = 32;
+        //node.style.transition = 'all 0.05s ease-in-out';
+        if (nodePos.bottom >= window.innerHeight - threshold) {
+            newPos = newPos.replace('B', 'T');
+        }
+        else if (nodePos.top - threshold <= 0) {
+            newPos = newPos.replace('T', 'B');
+        }
+        if (nodePos.right > window.innerWidth - threshold) {
+            newPos = newPos.replace('R', 'L');
+        }
+        else if (nodePos.left - threshold <= 0) {
+            newPos = newPos.replace('L', 'R');
+        }
+        return newPos;
+    }
+    function setMaxDimensions(node, parentNode) {
+        const nodePos = node.getBoundingClientRect();
+        const docWidth = document.documentElement.clientWidth;
+        const docHeight = document.documentElement.clientHeight;
+        const maxWidth = docWidth - nodePos.left;
+        const maxHeight = docHeight - nodePos.top;
+        node.style.maxWidth = maxWidth + 'px';
+        node.style.maxHeight = maxHeight + 'px';
+    }
+    function setPosition(node, position, parentNode) {
+        setMaxDimensions(node, parentNode);
+        const parentPos = parentNode.getBoundingClientRect();
+        const newPosition = checkBoundaries(node, parentNode, position);
+        //window.requestAnimationFrame(() => {
+        if (stickToHookWidth)
+            node.style.minWidth = String(parentPos.width) + 'px';
+        if (newPosition.includes(Position.T)) {
+            node.style.top = String(parentPos.top - node.offsetHeight) + 'px';
+        }
+        if (newPosition.includes(Position.R)) {
+            node.style.left = String(parentPos.right - node.offsetWidth) + 'px';
+        }
+        if (newPosition.includes(Position.B)) {
+            node.style.top = String(parentPos.bottom) + 'px';
+        }
+        if (newPosition.includes(Position.L)) {
+            node.style.left = String(parentPos.left) + 'px';
+        }
+        if (newPosition.includes(Position.C)) {
+            node.style.left = String(parentPos.left + parentPos.width / 2 - node.offsetWidth / 2) + 'px';
+        }
+        //});
+    }
+    return {
+        update(props) {
+            if (nodeObserver)
+                nodeObserver.disconnect();
+            if (parentObserver)
+                parentObserver.disconnect();
+            window.removeEventListener('scroll', () => {
+                setPosition(node, position, parentNode);
+            });
+            init(props);
+        },
+        destroy() {
+            if (nodeObserver)
+                nodeObserver.disconnect();
+            if (parentObserver)
+                parentObserver.disconnect();
+            window.removeEventListener('scroll', () => {
+                setPosition(node, position, parentNode);
+            });
+            node.remove();
+        }
+    };
+}

package/dist/utils/uses/sx4u/sx4u.d.ts

@@ -0,0 +1,34 @@
+export interface Sx4uProps extends Partial<CSSStyleDeclaration> {
+    p?: number[];
+    px?: number;
+    py?: number;
+    m?: number[];
+    mx?: number;
+    my?: number;
+    w?: number;
+    h?: number;
+    debug?: boolean;
+    radius?: number;
+    brd?: number;
+    brdb?: number;
+    brdt?: number;
+    brdr?: number;
+    brdl?: number;
+    brdx?: number;
+    brdy?: number;
+    alignCenter?: boolean;
+    shad?: boolean;
+    rot?: number;
+    dsp?: CSSStyleDeclaration['display'];
+    sm?: Sx4uProps;
+    md?: Sx4uProps;
+    lg?: Sx4uProps;
+}
+/**
+ *
+ * @param {HTMLElement} node
+ * @param {Sx4uProps} sxArgs
+ */
+export declare function sx4u(node: HTMLElement, sxArgs: Sx4uProps): {
+    'data-action': string;
+} | undefined;

package/dist/utils/uses/sx4u/sx4u.js

@@ -0,0 +1,148 @@
+/**
+ *
+ * @param {HTMLElement} node
+ * @param {Sx4uProps} sxArgs
+ */
+export function sx4u(node, sxArgs) {
+    let sxTransformRules = {};
+    const sx4uClassPrefix = node.classList[0] ?? 'random-letter-number';
+    const sx4uClassName = 'sx4u-' + node.tagName.toLowerCase() + '-' + sx4uClassPrefix;
+    const test = node.className.includes('sx4u-');
+    if (test)
+        return;
+    // add sx4uClassName
+    node.classList.add(sx4uClassName);
+    const transformKeys = {
+        p: 'padding',
+        px: ['paddingLeft', 'paddingRight'],
+        py: ['paddingTop', 'paddingBottom'],
+        m: 'margin',
+        mx: ['marginLeft', 'marginRight'],
+        my: ['marginTop', 'marginBottom'],
+        brd: ['border'],
+        brdt: ['borderTop'],
+        brdr: ['borderRight'],
+        brdb: ['borderBottom'],
+        brdl: ['borderLeft'],
+        brdx: ['borderLeft', 'borderRight'],
+        brdy: ['borderTop', 'borderBottom'],
+        sm: '(max-width: 1250px)'
+    };
+    // dimensions
+    sxTransformRules = {
+        p: (p) => transDimensions(p, transformKeys['p']),
+        px: (px) => transNumericProps(px, transformKeys['px']),
+        py: (py) => transNumericProps(py, transformKeys['py']),
+        m: (m) => transDimensions(m, transformKeys['m']),
+        mx: (mx) => transNumericProps(mx, transformKeys['mx']),
+        my: (my) => transNumericProps(my, transformKeys['my']),
+        w: (w) => transNumericProps(w, ['width']),
+        h: (h) => transNumericProps(h, ['height'])
+    };
+    // add borders
+    sxTransformRules = {
+        ...sxTransformRules,
+        brd: (brd) => transBorderProps(brd, transformKeys['brd']),
+        brdt: (brdt) => transBorderProps(brdt, transformKeys['brdt']),
+        brdr: (brdr) => transBorderProps(brdr, transformKeys['brdr']),
+        brdb: (brdb) => transBorderProps(brdb, transformKeys['brdb']),
+        brdl: (brdl) => transBorderProps(brdl, transformKeys['brdl']),
+        brdx: (brdx) => transBorderProps(brdx, transformKeys['brdx']),
+        brdy: (brdy) => transBorderProps(brdy, transformKeys['brdy'])
+    };
+    // add media queries
+    sxTransformRules = {
+        ...sxTransformRules,
+        sm: (sm) => doMediaQuy('sm', sm),
+        md: (md) => doMediaQuy('md', md),
+        lg: (lg) => doMediaQuy('lg', lg)
+    };
+    // add helpers
+    sxTransformRules = {
+        ...sxTransformRules,
+        rot: (rotate) => {
+            return { transform: `rotate(${rotate}deg)` };
+        },
+        radius: (radius) => {
+            return { borderRadius: typeof radius === 'number' ? `${radius}px` : radius };
+        },
+        shad: (shadow) => {
+            return { boxShadow: `0px 0px ${shadow}px rgba(196, 211, 241, 0.85)` };
+        }
+    };
+    const diff = sx4uTransform(sxArgs);
+    insertSxStyleSheet(diff);
+    function sx4uTransform(sxArgs) {
+        return Object.keys(sxArgs).reduce(function (previousValue, sx4uKey, index) {
+            let newVal;
+            if (sxTransformRules[sx4uKey]) {
+                newVal = { ...previousValue, ...sxTransformRules[sx4uKey](sxArgs[sx4uKey]) };
+            }
+            else {
+                // common CSSStyleDeclaration
+                newVal = { ...previousValue, [sx4uKey]: sxArgs[sx4uKey] };
+            }
+            return newVal;
+        }, {});
+    }
+    function doMediaQuy(mqy, qyargs) {
+        return { [`@media ${transformKeys[mqy]}`]: sx4uTransform(qyargs) };
+    }
+    function transDimensions(values, arg) {
+        if (Array.isArray(values)) {
+            const res = values
+                .map((val, index) => {
+                return transNumericProps(val);
+            }, [])
+                .join(' ');
+            return arg ? { [arg]: res } : res;
+        }
+        else {
+            return arg ? { [arg]: transNumericProps(values) } : transNumericProps(values);
+        }
+    }
+    function transNumericProps(val, prop) {
+        if (prop && prop.length) {
+            return prop.reduce((prev, arg, index) => {
+                return { ...prev, [arg]: transNumericProps(val) };
+            }, {});
+        }
+        else {
+            return val / 2 + 'rem';
+        }
+    }
+    function transBorderProps(val, prop) {
+        return prop.reduce((prev, arg, index) => {
+            return { ...prev, [arg]: `${val}px solid red` };
+        }, {});
+    }
+    function camelCaseToDash(str) {
+        return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
+    }
+    function insertSxStyleSheet(diff) {
+        let str = doLoop(diff);
+        // create style fragment
+        const styleEl = document.createElement('style', { is: 'new' });
+        styleEl.setAttribute('type', 'text/css');
+        document.head.appendChild(styleEl);
+        // take sheet
+        let styleSheet = styleEl.sheet;
+        // styleSheet.insertRule('.daRule {'+str+'}',styleSheet.cssRules.length); // , styleSheet.cssRules.length
+        styleEl.innerText = `.${sx4uClassName}{${str}}.${sx4uClassName}{} `; // , styleSheet.cssRules.length
+        function doLoop(diff) {
+            let ret = '';
+            for (const red of Object.keys(diff)) {
+                if (typeof diff[red] === 'object') {
+                    ret += camelCaseToDash(red) + '{' + doLoop(diff[red]) + '};';
+                }
+                if (typeof diff[red] === 'string') {
+                    ret += camelCaseToDash(red) + ': ' + diff[red] + ';';
+                }
+            }
+            return ret;
+        }
+    }
+    return {
+        'data-action': 'res'
+    };
+}

package/dist/utils/uses/sx4u/sx4uPreprocess.d.ts

@@ -0,0 +1,5 @@
+export namespace sx4uPreprocess {
+    function render(args: any): {
+        code: any;
+    };
+}

package/dist/utils/uses/sx4u/sx4uPreprocess.js

@@ -0,0 +1,34 @@
+export const sx4uPreprocess = {
+	render: (args) => {
+		// console.log(args);
+		const { content } = args;
+		//  console.log(content);
+		// split css by line
+		// console.log(parseCSSText(content));
+		let css_rows = content.split('\n');
+		// filter out empty elements and strip ';'
+		css_rows = css_rows
+			.filter(function (x) {
+				return x != '';
+			})
+			.map(function (x) {
+				return x.trim().replace(';', '');
+			});
+
+		let json_name = css_rows[0].trim().replace(/[\.\{\ \#]/g, '');
+
+		return { code: args.content };
+
+		function parseCSSText(cssText) {
+			var cssTxt = cssText.replace(/\/\*(.|\s)*?\*\//g, ' ').replace(/\s+/g, ' ');
+
+			var style = {},
+				[, ruleName, rule] = cssTxt.match(/ ?(.*?) ?{([^}]*)}/) || [, , cssTxt];
+
+			var cssToJs = (s) => s.replace(/\W+\w/g, (match) => match.slice(-1).toUpperCase());
+			var properties = rule.split(';').map((o) => o.split(':').map((x) => x && x.trim()));
+			for (var [property, value] of properties) style[cssToJs(property)] = value;
+			return { cssText, ruleName, style };
+		} /* updated 2017-09-28 */
+	}
+};