windmill-components 1.89.0 → 1.103.0

package/dist/components/apps/svelte-grid/Grid.svelte

@@ -1,179 +0,0 @@
-<script>import { getContainerHeight } from './utils/container';
-import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
-import { onMount, createEventDispatcher } from 'svelte';
-import { getColumn, throttle } from './utils/other';
-import MoveResize from './MoveResize.svelte';
-import { sortGridItemsPosition } from '../editor/appUtils';
-const dispatch = createEventDispatcher();
-export let items;
-export let rowHeight;
-export let cols;
-export let gap = [10, 10];
-export let fastStart = false;
-export let throttleUpdate = 100;
-export let throttleResize = 100;
-export let selectedIds;
-export let allIdsInPath;
-export let containerWidth = undefined;
-export let scroller = undefined;
-export let sensor = 20;
-export let parentWidth = undefined;
-let getComputedCols;
-let container;
-$: [gapX, gapY] = gap;
-let xPerPx = 0;
-let yPerPx = rowHeight;
-$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols);
-const onResize = throttle(() => {
-    items = specifyUndefinedColumns(items, getComputedCols, cols);
-    dispatch('resize', {
-        cols: getComputedCols,
-        xPerPx,
-        yPerPx,
-        width: containerWidth
-    });
-}, throttleUpdate);
-onMount(() => {
-    const sizeObserver = new ResizeObserver((entries) => {
-        requestAnimationFrame(() => {
-            let width = entries[0].contentRect.width;
-            if (width === containerWidth)
-                return;
-            getComputedCols = getColumn(parentWidth ?? width, cols);
-            xPerPx = width / getComputedCols;
-            if (!containerWidth) {
-                items = specifyUndefinedColumns(items, getComputedCols, cols);
-                dispatch('mount', {
-                    cols: getComputedCols,
-                    xPerPx,
-                    yPerPx // same as rowHeight
-                });
-            }
-            else {
-                onResize();
-            }
-            containerWidth = width;
-        });
-    });
-    sizeObserver.observe(container);
-    return () => sizeObserver.disconnect();
-});
-let sortedItems = [];
-$: sortedItems = JSON.parse(JSON.stringify(items)).sort((a, b) => a.id.localeCompare(b.id));
-let initItems = undefined;
-const updateMatrix = ({ detail }) => {
-    let isPointerUp = detail.isPointerUp;
-    let citems;
-    if (isPointerUp) {
-        try {
-            citems = JSON.parse(JSON.stringify(initItems));
-        }
-        catch (e) {
-            citems = JSON.parse(JSON.stringify(sortedItems));
-        }
-        initItems = undefined;
-    }
-    else {
-        if (initItems == undefined) {
-            initItems = JSON.parse(JSON.stringify(sortedItems));
-        }
-        citems = JSON.parse(JSON.stringify(initItems));
-    }
-    let nselectedIds = selectedIds ?? [];
-    if (detail.id && !selectedIds?.includes(detail.id)) {
-        nselectedIds = [detail.id, ...(selectedIds ?? [])];
-    }
-    sortedItems = citems;
-    for (let id of nselectedIds) {
-        let activeItem = getItemById(id, sortedItems);
-        if (activeItem) {
-            activeItem = {
-                ...activeItem,
-                [getComputedCols]: {
-                    ...activeItem[getComputedCols],
-                    ...shadows[id]
-                }
-            };
-            sortedItems = moveItem(activeItem, sortedItems, getComputedCols, getItemById(id, sortedItems));
-        }
-    }
-    for (let id of nselectedIds ?? []) {
-        if (detail.activate) {
-            moveResizes?.[id]?.inActivate();
-        }
-    }
-    if (isPointerUp) {
-        dispatch('redraw', sortGridItemsPosition(JSON.parse(JSON.stringify(sortedItems)), getComputedCols));
-    }
-};
-const throttleMatrix = throttle(updateMatrix, throttleResize);
-const handleRepaint = ({ detail }) => {
-    if (!detail.isPointerUp) {
-        throttleMatrix({ detail });
-    }
-    else {
-        updateMatrix({ detail });
-    }
-};
-let moveResizes = {};
-let shadows = {};
-export function handleMove({ detail }) {
-    Object.entries(moveResizes).forEach(([id, moveResize]) => {
-        if (selectedIds?.includes(id)) {
-            moveResize?.updateMove(JSON.parse(JSON.stringify(detail.cordDiff)), detail.eventY);
-        }
-    });
-    throttleMatrix({ detail: { isPointerUp: false, activate: false } });
-}
-export function handleInitMove({ detail }) {
-    Object.entries(moveResizes).forEach(([id, moveResize]) => {
-        if (selectedIds?.includes(id)) {
-            moveResize?.initmove();
-        }
-    });
-}
-</script>
-
-<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
-	{#if xPerPx || !fastStart}
-		{#each sortedItems as item (item.id)}
-			<MoveResize
-				on:initmove={handleInitMove}
-				on:move={handleMove}
-				bind:shadow={shadows[item.id]}
-				bind:this={moveResizes[item.id]}
-				on:repaint={handleRepaint}
-				onTop={Boolean(allIdsInPath?.includes(item.id))}
-				id={item.id}
-				{xPerPx}
-				{yPerPx}
-				width={Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) *
-					xPerPx -
-					gapX * 2}
-				height={(item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
-				top={(item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
-				left={(item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
-				item={item[getComputedCols]}
-				cols={getComputedCols}
-				{gapX}
-				{gapY}
-				{sensor}
-				container={scroller}
-				nativeContainer={container}
-			>
-				{#if item[getComputedCols]}
-					<slot dataItem={item} item={item[getComputedCols]} />
-				{/if}
-			</MoveResize>
-		{/each}
-	{/if}
-</div>
-
-<style>
-	.svlt-grid-container {
-		position: relative;
-		width: 100%;
-		-webkit-user-select: none;
-		   -moz-user-select: none;
-		        user-select: none;
-	}</style>

package/dist/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -1,50 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { FilledItem } from './types';
-declare class __sveltets_Render<T> {
-    props(): {
-        items: FilledItem<T>[];
-        rowHeight: number;
-        cols: [number, number][];
-        gap?: number[] | undefined;
-        fastStart?: boolean | undefined;
-        throttleUpdate?: number | undefined;
-        throttleResize?: number | undefined;
-        selectedIds: string[] | undefined;
-        allIdsInPath: string[] | undefined;
-        containerWidth?: number | undefined;
-        scroller?: HTMLElement | undefined;
-        sensor?: number | undefined;
-        parentWidth?: number | undefined;
-        handleMove?: (({ detail }: {
-            detail: any;
-        }) => void) | undefined;
-        handleInitMove?: (({ detail }: {
-            detail: any;
-        }) => void) | undefined;
-    };
-    events(): {
-        resize: CustomEvent<any>;
-        mount: CustomEvent<any>;
-        redraw: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {
-            dataItem: FilledItem<T>;
-            item: Required<import("./types").ItemLayout>;
-        };
-    };
-}
-export type GridProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type GridEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type GridSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class Grid<T> extends SvelteComponentTyped<GridProps<T>, GridEvents<T>, GridSlots<T>> {
-    get handleMove(): ({ detail }: {
-        detail: any;
-    }) => void;
-    get handleInitMove(): ({ detail }: {
-        detail: any;
-    }) => void;
-}
-export {};

package/dist/components/apps/svelte-grid/LICENSE

@@ -1,23 +0,0 @@
-Anything under this repo was initially forked from svelte-grid whose LICENSE is below
-
-MIT License
-
-Copyright (c) 2019 Vahe
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/components/apps/svelte-grid/MoveResize.svelte

@@ -1,343 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-const dispatch = createEventDispatcher();
-export let sensor;
-export let width;
-export let height;
-export let left;
-export let top;
-export let id;
-export let container;
-export let xPerPx;
-export let yPerPx;
-export let gapX;
-export let gapY;
-export let item;
-export let cols;
-export let nativeContainer;
-export let onTop;
-export let shadow = undefined;
-const divId = `component-${id}`;
-let shadowElement;
-let active = false;
-let initX, initY;
-let capturePos = {
-    x: 0,
-    y: 0
-};
-let cordDiff = { x: 0, y: 0 };
-let newSize = { width, height };
-let trans = false;
-let anima;
-export function inActivate() {
-    if (shadowElement && shadow != undefined) {
-        let subgrid = shadowElement.closest('.subgrid');
-        let irect = shadowElement.getBoundingClientRect();
-        let shadowBound;
-        if (subgrid) {
-            let subGridParent = subgrid.parentElement;
-            let subGridParentRect = subGridParent.getBoundingClientRect();
-            let prect = subgrid.getBoundingClientRect();
-            const subGridOffset = {
-                x: subGridParentRect.x - prect.x,
-                y: subGridParentRect.y - prect.y
-            };
-            shadowBound = {
-                x: irect.x - prect.left - subGridOffset.x,
-                y: irect.y - prect.top - subGridOffset.y
-            };
-        }
-        else {
-            shadowBound = irect;
-        }
-        const xdragBound = rect.left + cordDiff.x;
-        const ydragBound = rect.top + cordDiff.y;
-        cordDiff.x = shadow.x * xPerPx + gapX - (shadowBound.x - xdragBound);
-        cordDiff.y = shadow.y * yPerPx + gapY - (shadowBound.y - ydragBound);
-        active = false;
-        trans = true;
-        clearTimeout(anima);
-        anima = setTimeout(() => {
-            trans = false;
-        }, 50);
-    }
-}
-let repaint = (activate, isPointerUp) => {
-    dispatch('repaint', {
-        id,
-        isPointerUp,
-        activate
-    });
-};
-// Autoscroll
-let _scrollTop = 0;
-let containerFrame;
-let rect;
-let scrollElement;
-const getContainerFrame = (element) => {
-    if (element === document.documentElement || !element) {
-        const { top, bottom } = nativeContainer.getBoundingClientRect();
-        return {
-            top: Math.max(0, top),
-            bottom: Math.min(window.innerHeight, bottom)
-        };
-    }
-    return element.getBoundingClientRect();
-};
-const getScroller = (element) => (!element ? document.documentElement : element);
-function computeRect() {
-    let gridItem = document.getElementById(divId);
-    if (!gridItem)
-        return;
-    let subgrid = gridItem.closest('.subgrid');
-    let irect = gridItem.getBoundingClientRect();
-    if (subgrid && subgrid.parentElement) {
-        let subGridParent = subgrid.parentElement;
-        let subGridParentRect = subGridParent.getBoundingClientRect();
-        let prect = subgrid.getBoundingClientRect();
-        const subGridOffset = {
-            x: subGridParentRect.x - prect.x,
-            y: subGridParentRect.y - prect.y
-        };
-        rect = {
-            top: irect.top - prect.top - subGridOffset.y,
-            left: irect.left - prect.left - subGridOffset.x
-        };
-    }
-    else {
-        rect = irect;
-    }
-}
-let dragClosure = undefined;
-const pointerdown = ({ clientX, clientY }) => {
-    dragClosure = () => {
-        dragClosure = undefined;
-        initX = clientX;
-        initY = clientY;
-        dispatch('initmove');
-    };
-    window.addEventListener('pointermove', pointermove);
-    window.addEventListener('pointerup', pointerup);
-};
-export function initmove() {
-    computeRect();
-    newSize = { width, height };
-    capturePos = { x: left, y: top };
-    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
-    cordDiff = { x: 0, y: 0 };
-    active = true;
-    trans = false;
-    containerFrame = getContainerFrame(container);
-    scrollElement = getScroller(container);
-    _scrollTop = scrollElement.scrollTop;
-}
-let sign = { x: 0, y: 0 };
-let vel = { x: 0, y: 0 };
-let intervalId = undefined;
-const stopAutoscroll = () => {
-    intervalId && clearInterval(intervalId);
-    intervalId = undefined;
-    sign = { x: 0, y: 0 };
-    vel = { x: 0, y: 0 };
-};
-const update = () => {
-    const boundX = capturePos.x + cordDiff.x;
-    const _newScrollTop = (scrollElement?.scrollTop ?? 0) - (_scrollTop ?? 0);
-    const boundY = capturePos.y + (cordDiff.y + _newScrollTop);
-    let gridX = Math.round(boundX / xPerPx);
-    let gridY = Math.round(boundY / yPerPx);
-    if (shadow) {
-        shadow.x = Math.max(Math.min(gridX, cols - shadow.w), 0);
-        shadow.y = Math.max(gridY, 0);
-    }
-};
-const pointermove = (event) => {
-    dragClosure && dragClosure();
-    event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-    const { clientX, clientY } = event;
-    const cordDiff = { x: clientX - initX, y: clientY - initY };
-    dispatch('move', { cordDiff, clientY });
-};
-export function updateMove(newCoordDiff, clientY) {
-    if (!active) {
-        active = true;
-    }
-    if (trans) {
-        trans = false;
-    }
-    cordDiff = newCoordDiff;
-    // console.log(cordDiff, id, 'B')
-    const Y_SENSOR = sensor;
-    if (containerFrame) {
-        let velocityTop = Math.max(0, (containerFrame.top + Y_SENSOR - clientY) / Y_SENSOR);
-        let velocityBottom = Math.max(0, (clientY - (containerFrame.bottom - Y_SENSOR)) / Y_SENSOR);
-        const topSensor = velocityTop > 0 && velocityBottom === 0;
-        const bottomSensor = velocityBottom > 0 && velocityTop === 0;
-        sign.y = topSensor ? -1 : bottomSensor ? 1 : 0;
-        vel.y = sign.y === -1 ? velocityTop : velocityBottom;
-        if (vel.y > 0) {
-            if (!intervalId) {
-                // Start scrolling
-                // TODO Use requestAnimationFrame
-                intervalId = setInterval(() => {
-                    scrollElement.scrollTop += 2 * (vel.y + Math.sign(vel.y)) * sign.y;
-                    update();
-                }, 10);
-            }
-        }
-        else if (intervalId) {
-            stopAutoscroll();
-        }
-        else {
-            update();
-        }
-    }
-    else {
-        update();
-    }
-}
-const pointerup = (e) => {
-    stopAutoscroll();
-    window.removeEventListener('pointerdown', pointerdown);
-    window.removeEventListener('pointermove', pointermove);
-    window.removeEventListener('pointerup', pointerup);
-    if (!dragClosure) {
-        repaint(true, true);
-    }
-    else {
-        dragClosure = undefined;
-    }
-};
-let resizeInitPos = { x: 0, y: 0 };
-let initSize = { width: 0, height: 0 };
-const resizePointerDown = (e) => {
-    e.stopPropagation();
-    const { pageX, pageY } = e;
-    resizeInitPos = { x: pageX, y: pageY };
-    initSize = { width, height };
-    cordDiff = { x: 0, y: 0 };
-    computeRect();
-    newSize = { width, height };
-    active = true;
-    trans = false;
-    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
-    containerFrame = getContainerFrame(container);
-    scrollElement = getScroller(container);
-    window.addEventListener('pointermove', resizePointerMove);
-    window.addEventListener('pointerup', resizePointerUp);
-};
-const resizePointerMove = ({ pageX, pageY }) => {
-    if (shadow) {
-        newSize.width = initSize.width + pageX - resizeInitPos.x;
-        newSize.height = initSize.height + pageY - resizeInitPos.y;
-        // Get max col number
-        let maxWidth = cols - shadow.x;
-        maxWidth = maxWidth;
-        // Limit bound
-        newSize.width = Math.min(newSize.width, maxWidth * xPerPx - gapX * 2);
-        // Limit col & row
-        shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx);
-        shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx);
-        repaint(false, false);
-    }
-};
-const resizePointerUp = (e) => {
-    e.stopPropagation();
-    repaint(true, true);
-    window.removeEventListener('pointermove', resizePointerMove);
-    window.removeEventListener('pointerup', resizePointerUp);
-};
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-	draggable="false"
-	on:pointerdown|stopPropagation|preventDefault={pointerdown}
-	id={divId}
-	class="svlt-grid-item"
-	class:svlt-grid-active={active || (trans && rect)}
-	style="width: {active ? newSize.width : width}px; height:{active
-		? newSize.height
-		: height}px; {onTop ? 'z-index: 1000;' : ''}
-  {active && rect
-		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
-		: trans
-		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
-		: `transition: transform 0.1s, opacity 0.1s; transform: translate(${left}px, ${top}px); `} "
->
-	<slot />
-	<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
-</div>
-
-{#if (active || trans) && shadow}
-	<div
-		class="svlt-grid-shadow shadow-active"
-		style="width: {shadow.w * xPerPx - gapX * 2}px; height: {shadow.h * yPerPx -
-			gapY * 2}px; transform: translate({shadow.x * xPerPx + gapX}px, {shadow.y * yPerPx +
-			gapY}px); "
-		bind:this={shadowElement}
-	/>
-{/if}
-
-<style>
-	.svlt-grid-item {
-		touch-action: none;
-		position: absolute;
-		will-change: auto;
-		backface-visibility: hidden;
-		-webkit-backface-visibility: hidden;
-	}
-
-	.svlt-grid-resizer {
-		-webkit-user-select: none;
-		   -moz-user-select: none;
-		        user-select: none;
-		width: 20px;
-		height: 20px;
-		position: absolute;
-		right: 0;
-		bottom: 0;
-		cursor: se-resize;
-	}
-	.svlt-grid-resizer::after {
-		content: '';
-		position: absolute;
-		right: 3px;
-		bottom: 3px;
-		width: 5px;
-		height: 5px;
-		border-right: 2px solid rgba(0, 0, 0, 0.4);
-		border-bottom: 2px solid rgba(0, 0, 0, 0.4);
-	}
-
-	.svlt-grid-active {
-		z-index: 3;
-		cursor: grabbing;
-		position: fixed;
-		opacity: 0.5;
-
-		/*No user*/
-		backface-visibility: hidden;
-		-webkit-backface-visibility: hidden;
-		-moz-backface-visibility: hidden;
-		-o-backface-visibility: hidden;
-		-ms-backface-visibility: hidden;
-		-webkit-user-select: none;
-		   -moz-user-select: none;
-		        user-select: none;
-	}
-
-	.shadow-active {
-		z-index: 2;
-		transition: all 0.2s;
-	}
-
-	.svlt-grid-shadow {
-		position: absolute;
-		background: red;
-		will-change: transform;
-		background: pink;
-		backface-visibility: hidden;
-		-webkit-backface-visibility: hidden;
-	}</style>

package/dist/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -1,48 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        sensor: any;
-        width: any;
-        height: any;
-        left: any;
-        top: any;
-        id: any;
-        container: any;
-        xPerPx: any;
-        yPerPx: any;
-        gapX: any;
-        gapY: any;
-        item: any;
-        cols: any;
-        nativeContainer: any;
-        onTop: any;
-        shadow?: {
-            x: number;
-            y: number;
-            w: number;
-            h: number;
-        } | undefined;
-        inActivate?: (() => void) | undefined;
-        initmove?: (() => void) | undefined;
-        updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;
-    };
-    events: {
-        repaint: CustomEvent<any>;
-        initmove: CustomEvent<any>;
-        move: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type MoveResizeProps = typeof __propDef.props;
-export type MoveResizeEvents = typeof __propDef.events;
-export type MoveResizeSlots = typeof __propDef.slots;
-export default class MoveResize extends SvelteComponentTyped<MoveResizeProps, MoveResizeEvents, MoveResizeSlots> {
-    get inActivate(): () => void;
-    get initmove(): () => void;
-    get updateMove(): (newCoordDiff: any, clientY: any) => void;
-}
-export {};

package/dist/components/apps/svelte-grid/types.d.ts

@@ -1,15 +0,0 @@
-export interface Size {
-	w: number
-	h: number
-}
-
-export interface Positon {
-	x: number
-	y: number
-}
-
-interface ItemLayout extends Size, Positon {
-	fixed: boolean
-}
-
-export type FilledItem<T> = { [width: number]: Required<ItemLayout>; data: T; id: string }

package/dist/components/apps/svelte-grid/utils/container.d.ts

@@ -1 +0,0 @@
-export declare function getContainerHeight(items: any, yPerPx: any, cols: any): number;

package/dist/components/apps/svelte-grid/utils/container.js

@@ -1,4 +0,0 @@
-import { getRowsCount } from "./other";
-export function getContainerHeight(items, yPerPx, cols) {
-    return getRowsCount(items, cols) * yPerPx;
-}

package/dist/components/apps/svelte-grid/utils/helper.d.ts

@@ -1,9 +0,0 @@
-declare const gridHelp: {
-    adjust(items: any, col: any): import("../types").FilledItem<unknown>[];
-    item(obj: any): any;
-    findSpace(item: any, items: any, cols: any): {
-        x: number;
-        y: number;
-    };
-};
-export default gridHelp;