fuma 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/Meta.svelte

@@ -0,0 +1,55 @@
+<script>import {} from "svelte";
+import { Card, Table } from "./index.js";
+export let name = "";
+export let description = "";
+export let component;
+let props = [];
+$:
+  initMeta(component);
+function initMeta(c) {
+  if (!c)
+    return;
+  updateComponentMeta(c);
+  component.$$.after_update.push(() => updateComponentMeta(c));
+}
+function updateComponentMeta(c) {
+  const ctx = c.$$.ctx;
+  const propsIndex = Object.entries(c.$$.props);
+  props = propsIndex.map(([id, index]) => ({
+    id,
+    value: ctx[index]
+  }));
+}
+</script>
+
+<Card class="mx-auto mt-6 max-w-4xl">
+	<svelte:fragment slot="title">{name}</svelte:fragment>
+	<svelte:fragment slot="subtitle">{description}</svelte:fragment>
+
+	<slot />
+
+	<div class="my-10" />
+
+	<Table
+		items={props}
+		fields={[
+			{
+				key: 'name',
+				label: 'Prop',
+				getCell: (p) => p.id,
+				locked: true
+			},
+			{
+				key: 'type',
+				label: 'Type',
+				getCell: (p) => typeof p.value
+			},
+			{
+				key: 'value',
+				label: 'Value',
+				getCell: (p) => p.value,
+				visible: true
+			}
+		]}
+	></Table>
+</Card>

package/dist/Meta.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        description?: string | undefined;
+        component: SvelteComponent;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MetaProps = typeof __propDef.props;
+export type MetaEvents = typeof __propDef.events;
+export type MetaSlots = typeof __propDef.slots;
+export default class Meta extends SvelteComponent<MetaProps, MetaEvents, MetaSlots> {
+}
+export {};

package/dist/action/index.d.ts

@@ -0,0 +1,4 @@
+export * from './selector.js';
+export * from './tip.js';
+export * from './portal.js';
+export * from './list/index.js';

package/dist/action/index.js

@@ -0,0 +1,4 @@
+export * from './selector.js';
+export * from './tip.js';
+export * from './portal.js';
+export * from './list/index.js';

package/dist/action/list/handlers.d.ts

@@ -0,0 +1,16 @@
+import './index.css';
+import { type ListEditableOptions } from './index.js';
+export type Position = {
+    clientX: number;
+    clientY: number;
+};
+export type DragHandler = ReturnType<typeof createDragHandler>;
+export declare function createDragHandler<Type = unknown>(listElement: HTMLDivElement, itemElement: HTMLElement, options: ListEditableOptions<Type>): {
+    on: (event: "dragStart" | "dragMove" | "dragEnd", callback: Callback) => void;
+    off: (event: "dragStart" | "dragMove" | "dragEnd", callback: Callback) => void;
+    start(position: Position): void;
+    move(position?: Position): void;
+    end(): void;
+};
+type Callback = () => void;
+export {};

package/dist/action/list/handlers.js

@@ -0,0 +1,92 @@
+import './index.css';
+import { CLASSNAME_DRAG_ACTIVE } from './index.js';
+import { initDragStyle, resetDragStyle } from './style.js';
+import { createPlaceholder, computeLimits, getNewOrderIndex, getListItemIndex, } from './utils.js';
+import { scroll } from './store.js';
+export function createDragHandler(listElement, itemElement, options) {
+    let originMouseY = 0;
+    let limits = null;
+    let placeholder = null;
+    let indexFrom = 0;
+    let indexTo = 0;
+    let currentPosition = { clientX: 0, clientY: 0 };
+    const events = createEventEmitter({
+        dragStart: options.onDragStart ? [options.onDragStart] : [],
+        dragMove: options.onDragMove ? [options.onDragMove] : [],
+        dragEnd: options.onDragEnd ? [options.onDragEnd] : [],
+    });
+    return {
+        on: events.on,
+        off: events.off,
+        start(position) {
+            events.emit('dragStart');
+            currentPosition = position;
+            limits = computeLimits(listElement, itemElement);
+            if (!limits)
+                return;
+            originMouseY = position.clientY + scroll.top;
+            listElement.classList.add(CLASSNAME_DRAG_ACTIVE);
+            itemElement.classList.add(CLASSNAME_DRAG_ACTIVE);
+            initDragStyle(itemElement);
+            indexFrom = getListItemIndex(listElement, itemElement);
+            indexTo = indexFrom;
+            placeholder = createPlaceholder({ listElement, itemElement, indexFrom });
+        },
+        move(position = currentPosition) {
+            events.emit('dragMove');
+            currentPosition = position;
+            if (!itemElement || !limits || !originMouseY)
+                return;
+            let deltaMouseY = position.clientY - originMouseY + scroll.top;
+            if (deltaMouseY < limits.top)
+                deltaMouseY = limits.top;
+            if (deltaMouseY > limits.bottom)
+                deltaMouseY = limits.bottom;
+            itemElement.style.transform = `translateY(${deltaMouseY}px)`;
+            const newIndex = limits.items.findIndex((center) => deltaMouseY <= center);
+            if (newIndex !== indexTo) {
+                indexTo = newIndex;
+                placeholder?.moveTo(indexTo);
+            }
+        },
+        end() {
+            events.emit('dragEnd');
+            resetDragStyle(itemElement);
+            placeholder?.remove();
+            listElement.classList.remove(CLASSNAME_DRAG_ACTIVE);
+            itemElement.classList.remove(CLASSNAME_DRAG_ACTIVE);
+            if (indexFrom === indexTo)
+                return;
+            if (!limits?.items)
+                return;
+            const len = limits.items.length;
+            const newOrderIndex = getNewOrderIndex(len, indexFrom, indexTo);
+            if (options.onReindex)
+                options.onReindex(newOrderIndex);
+            if (options.onChange) {
+                if (!options.items) {
+                    console.error('WARNING', 'The option "onChange" require "items"');
+                    return;
+                }
+                const newOrderItems = newOrderIndex.map((index) => options.items[index]);
+                options.onChange(newOrderItems);
+                options.items = newOrderItems;
+            }
+        },
+    };
+}
+function createEventEmitter(initialEvents) {
+    const events = { ...initialEvents };
+    return {
+        on(event, callback) {
+            events[event].push(callback);
+        },
+        off(event, callback) {
+            const index = events[event].indexOf(callback);
+            events[event].splice(index, 1);
+        },
+        emit(event) {
+            events[event].forEach((callback) => callback());
+        },
+    };
+}

package/dist/action/list/index.css

@@ -0,0 +1,40 @@
+.editable-list {
+	position: relative;
+	--border-radius: 5px;
+	--background-hover: rgb(246, 246, 246);
+	--background-active: rgb(235, 235, 235);
+	border-radius: var(--border-radius);
+}
+
+.editable-list .item-delete {
+	transition: opacity 200ms ease;
+	opacity: 1;
+}
+
+.editable-list.drag-active .item-delete {
+	opacity: 0;
+}
+
+.editable-list > div {
+	cursor: pointer;
+	border-radius: var(--border-radius);
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.editable-list > div:hover {
+	background: var(--background-hover);
+}
+
+.editable-list > div.drag-active {
+	background: var(--background-active);
+}
+
+.item-content {
+	flex-grow: 1;
+}
+
+.item-placholder {
+	background: var(--background-hover);
+	border-radius: var(--border-radius);
+}

package/dist/action/list/index.d.ts

@@ -0,0 +1,23 @@
+export declare const CLASSNAME_LIST = "editable-list";
+export declare const CLASSNAME_DRAG_ACTIVE = "drag-active";
+export declare const CLASSNAME_PLACEHOLDER = "item-placholder";
+export interface ListEditableOptions<Type = unknown> {
+    onDragStart?: () => void;
+    onDragMove?: () => void;
+    onDragEnd?: () => void;
+    onHover?: (newOrder: number[]) => void;
+    onMove?: (indexFrom: number, indexTo: number) => void;
+    /** Déclencher quand l'ordre change. newOrder est un tableau d'index */
+    onReindex?: (newOrder: number[]) => void;
+    /** Déclencher quand l'ordre change. newOrder est les items fournit réordonné */
+    onChange?: (newOrder: Type[]) => void;
+    /** Fournir les items pour directement récupérer la liste à jour dans onChange */
+    items?: Type[];
+    onDelete?: (index: number, items?: Type[]) => void;
+    /** Only handle reorder from this elements */
+    dragElementsSelector?: string;
+}
+export declare function listEditable<Type = unknown>(node: HTMLDivElement, options?: ListEditableOptions<Type>): {
+    destroy(): void;
+    update({ items }: ListEditableOptions<Type>): void;
+};

package/dist/action/list/index.js

@@ -0,0 +1,44 @@
+import { createDragHandler } from './handlers.js';
+import { mouseDragTrigger, touchDragTrigger, scrollTrigger } from './trigger.js';
+export const CLASSNAME_LIST = 'editable-list';
+export const CLASSNAME_DRAG_ACTIVE = 'drag-active';
+export const CLASSNAME_PLACEHOLDER = 'item-placholder';
+export function listEditable(node, options = {}) {
+    const { dragElementsSelector } = options;
+    node.classList.add(CLASSNAME_LIST);
+    let mouseListeners = [];
+    let touchListeners = [];
+    let scrollListeners = [];
+    createListeners();
+    function createListeners() {
+        const itemElements = [...node.children];
+        const dragElements = [
+            ...(dragElementsSelector ? node.querySelectorAll(dragElementsSelector) : itemElements)
+        ];
+        const dragHandlers = dragElements.map((d, index) => createDragHandler(node, itemElements[index], options));
+        mouseListeners = dragElements.map((dragElement, index) => mouseDragTrigger(dragElement, dragHandlers[index]));
+        touchListeners = dragElements.map((dragElement, index) => touchDragTrigger(dragElement, dragHandlers[index]));
+        const scrollContainer = node.parentElement;
+        if (scrollContainer) {
+            scrollListeners = dragHandlers.map((handler) => scrollTrigger(handler, scrollContainer));
+        }
+    }
+    function removeListeners() {
+        mouseListeners.forEach((listener) => listener.destroy());
+        touchListeners.forEach((listener) => listener.destroy());
+        scrollListeners.forEach((listener) => listener.destroy());
+    }
+    return {
+        destroy() {
+            node?.classList.remove(CLASSNAME_LIST);
+            removeListeners();
+        },
+        update({ items }) {
+            if (items?.length !== options.items?.length) {
+                removeListeners();
+                createListeners();
+            }
+            options.items = items;
+        }
+    };
+}

package/dist/action/list/store.d.ts

@@ -0,0 +1,3 @@
+export declare const scroll: {
+    top: number;
+};

package/dist/action/list/store.js

@@ -0,0 +1 @@
+export const scroll = { top: 0 };

package/dist/action/list/style.d.ts

@@ -0,0 +1,2 @@
+export declare function initDragStyle(listItemEl: HTMLElement): void;
+export declare function resetDragStyle(listItemEl: HTMLElement): void;

package/dist/action/list/style.js

@@ -0,0 +1,14 @@
+export function initDragStyle(listItemEl) {
+    listItemEl.style.zIndex = `${+listItemEl.style.zIndex + 1}`;
+    listItemEl.style.top = `${listItemEl.offsetTop}px`;
+    listItemEl.style.width = `${listItemEl.offsetWidth}px`;
+    listItemEl.style.height = `${listItemEl.offsetHeight}px`;
+    listItemEl.style.position = 'absolute';
+}
+export function resetDragStyle(listItemEl) {
+    listItemEl.style.position = 'initial';
+    listItemEl.style.zIndex = `${+listItemEl.style.zIndex - 1}`;
+    listItemEl.style.transform = '';
+    listItemEl.style.width = `auto`;
+    listItemEl.style.height = `auto`;
+}

package/dist/action/list/trigger.d.ts

@@ -0,0 +1,12 @@
+import type { DragHandler } from './handlers.js';
+/** Gestion du cycle de vie des évènements de la souris */
+export declare function mouseDragTrigger(element: HTMLElement, handler: DragHandler): {
+    destroy(): void;
+};
+/** Gestion du cycle de vie des évènements de la souris */
+export declare function touchDragTrigger(element: HTMLElement, handler: DragHandler): {
+    destroy(): void;
+};
+export declare function scrollTrigger(handler: DragHandler, scrollContainer: Element): {
+    destroy(): void;
+};

package/dist/action/list/trigger.js

@@ -0,0 +1,124 @@
+import { scroll } from './store.js';
+/** Gestion du cycle de vie des évènements de la souris */
+export function mouseDragTrigger(element, handler) {
+    function startHandler(event) {
+        handler.start(event);
+        document.addEventListener('mousemove', handler.move);
+        document.addEventListener('mouseup', endHandler, { once: true });
+    }
+    function endHandler() {
+        document.removeEventListener('mousemove', handler.move);
+        handler.end();
+    }
+    function stopPropagation(event) {
+        event.stopPropagation();
+    }
+    element.addEventListener('mousedown', startHandler);
+    element.addEventListener('click', stopPropagation);
+    return {
+        destroy() {
+            element?.removeEventListener('mousedown', startHandler);
+            element?.removeEventListener('click', stopPropagation);
+            document.removeEventListener('mousemove', handler.move);
+            document.removeEventListener('mouseup', endHandler);
+        }
+    };
+}
+/** Gestion du cycle de vie des évènements de la souris */
+export function touchDragTrigger(element, handler) {
+    let onDrag = false;
+    function startHandler(event) {
+        onDrag = true;
+        handler.start(event.touches[0]);
+    }
+    function moveHandler(event) {
+        if (!onDrag)
+            return;
+        event.preventDefault();
+        handler.move(event.touches[0]);
+    }
+    function endHandler() {
+        onDrag = false;
+        handler.end();
+    }
+    function stopPropagation(event) {
+        event.stopPropagation();
+    }
+    element.addEventListener('touchstart', startHandler);
+    element.addEventListener('touchmove', moveHandler);
+    element.addEventListener('touchend', endHandler);
+    element.addEventListener('click', stopPropagation);
+    return {
+        destroy() {
+            if (!element)
+                return;
+            element.removeEventListener('touchstart', startHandler);
+            element.removeEventListener('touchmove', moveHandler);
+            element.removeEventListener('touchend', endHandler);
+            element.removeEventListener('click', stopPropagation);
+        }
+    };
+}
+export function scrollTrigger(handler, scrollContainer) {
+    let listeners = [];
+    let mousePosition = { clientX: 0, clientY: 0 };
+    let containerRect = { top: 0, bottom: 0 };
+    function createScrollListener() {
+        const scrollHandler = () => {
+            scroll.top = scrollContainer.scrollTop;
+            handler.move();
+            scrollOnTheEdge();
+        };
+        scrollContainer.addEventListener('scroll', scrollHandler);
+        return {
+            destroy() {
+                scrollContainer.removeEventListener('scroll', scrollHandler);
+            }
+        };
+    }
+    function createMouseListener() {
+        const mouseMoveHandler = ({ clientX, clientY }) => {
+            mousePosition = { clientX, clientY };
+            scrollOnTheEdge();
+        };
+        document.addEventListener('mousemove', mouseMoveHandler);
+        return {
+            destroy() {
+                document.removeEventListener('mousemove', mouseMoveHandler);
+            }
+        };
+    }
+    const EDGE_SCROLL_ZONE = 0;
+    const SCROLL_INCREMENT = 3;
+    function scrollOnTheEdge() {
+        const { top, bottom } = containerRect;
+        const { clientY } = mousePosition;
+        const isOnTop = top + EDGE_SCROLL_ZONE > clientY;
+        const isOnBottom = bottom - EDGE_SCROLL_ZONE < clientY;
+        const { scrollTop, scrollHeight } = scrollContainer;
+        if (isOnTop && scrollTop - SCROLL_INCREMENT > 0) {
+            scrollContainer.scrollTo({ top: scrollTop - SCROLL_INCREMENT });
+        }
+        else if (isOnBottom &&
+            scrollContainer.scrollTop + SCROLL_INCREMENT < scrollTop + scrollHeight) {
+            scrollContainer.scrollTo({ top: scrollTop + SCROLL_INCREMENT });
+        }
+    }
+    function dragStart() {
+        containerRect = scrollContainer.getBoundingClientRect();
+        listeners = [createScrollListener(), createMouseListener()];
+    }
+    function dragEnd() {
+        listeners.forEach(({ destroy }) => destroy());
+        listeners = [];
+    }
+    handler.on('dragStart', dragStart);
+    handler.on('dragEnd', dragEnd);
+    return {
+        destroy() {
+            handler.off('dragStart', dragStart);
+            handler.off('dragEnd', dragEnd);
+            listeners.forEach(({ destroy }) => destroy());
+        }
+    };
+}

package/dist/action/list/utils.d.ts

@@ -0,0 +1,18 @@
+export declare function getListItemIndex(listElement: HTMLElement, itemEl: HTMLElement): number;
+export interface CreatePlaceholderArgs {
+    listElement: HTMLElement;
+    itemElement: HTMLElement;
+    indexFrom: number;
+}
+export declare function createPlaceholder({ listElement, itemElement, indexFrom }: CreatePlaceholderArgs): {
+    moveTo: (index: number) => void;
+    remove(): void;
+};
+export interface Limits {
+    top: number;
+    bottom: number;
+    items: number[];
+}
+/** Calcule les limites de déplacement supérieur, inférieur et les frontières entre deux items */
+export declare function computeLimits(listElement: HTMLElement, listItemEl: HTMLElement): Limits | null;
+export declare function getNewOrderIndex(len: number, indexFrom: number, indexTo: number): number[];

package/dist/action/list/utils.js

@@ -0,0 +1,68 @@
+import { CLASSNAME_PLACEHOLDER } from './index.js';
+export function getListItemIndex(listElement, itemEl) {
+    return [...listElement.children].findIndex((item) => item === itemEl);
+}
+export function createPlaceholder({ listElement, itemElement, indexFrom }) {
+    const itemsEl = [...listElement.children];
+    const placeholderEl = document.createElement('div');
+    placeholderEl.classList.add(CLASSNAME_PLACEHOLDER);
+    placeholderEl.style.height = itemElement.style.height;
+    placeholderEl.style.width = itemElement.style.width;
+    listElement.insertBefore(placeholderEl, itemElement);
+    const moveTo = (index) => {
+        const selectorIndex = index < indexFrom ? index : index + 1;
+        const itemEl = itemsEl[selectorIndex];
+        listElement.insertBefore(placeholderEl, itemEl);
+    };
+    return {
+        moveTo,
+        remove() {
+            const parent = placeholderEl.parentNode;
+            parent?.removeChild(placeholderEl);
+            placeholderEl.remove();
+        }
+    };
+}
+/** Calcule les limites de déplacement supérieur, inférieur et les frontières entre deux items */
+export function computeLimits(listElement, listItemEl) {
+    const rect = listItemEl.getBoundingClientRect();
+    const itemsRect = [...listElement.children]
+        .filter((el) => !el.classList.contains(CLASSNAME_PLACEHOLDER))
+        .map((el) => el.getBoundingClientRect());
+    const tops = itemsRect.map((item) => item.top - rect.top);
+    const bottoms = itemsRect.map((item) => item.bottom - rect.bottom);
+    const items = itemsRect
+        .map((item, index, self) => {
+        if (index === self.length - 1)
+            return false;
+        if (tops[index] < 0)
+            return tops[index] + item.height / 2;
+        return bottoms[index] + self[index + 1].height / 2;
+    })
+        .filter((v) => v !== false);
+    items.push(Infinity);
+    return {
+        top: tops[0],
+        bottom: bottoms[bottoms.length - 1],
+        items
+    };
+}
+export function getNewOrderIndex(len, indexFrom, indexTo) {
+    const [start, end] = [indexFrom, indexTo].sort((a, b) => a - b);
+    const arr = Array(len)
+        .fill(null)
+        .map((_, i) => i);
+    const arrStart = arr.slice(0, start);
+    const arrEnd = arr.slice(end + 1);
+    const arrMove = arr.slice(start, end + 1);
+    if (indexFrom < indexTo) {
+        arrMove.shift();
+        arrMove.push(indexFrom);
+    }
+    else {
+        arrMove.pop();
+        arrMove.unshift(indexFrom);
+    }
+    const newOrder = [...arrStart, ...arrMove, ...arrEnd];
+    return newOrder;
+}

package/dist/action/portal.d.ts

@@ -0,0 +1,3 @@
+export declare function portal(node: HTMLElement, selector: string): {
+    destroy: () => void;
+};

package/dist/action/portal.js

@@ -0,0 +1,9 @@
+export function portal(node, selector) {
+    const target = document.querySelector(selector);
+    if (!target)
+        throw `tagret not found for selector "${selector}"`;
+    target.appendChild(node);
+    return {
+        destroy: () => node.remove(),
+    };
+}

package/dist/action/selector.d.ts

@@ -0,0 +1,15 @@
+type Params = {
+    trigger: HTMLElement | undefined;
+    focusIndex?: number;
+    listQuerySelector?: string;
+    itemsQuerySelector?: string;
+    onSelect?: (index: number) => unknown;
+    onFocus?: (index: number) => unknown;
+    keyDownEvent?: KeyboardEvent | undefined;
+    keyDownPreventDefault?: boolean;
+};
+export declare function selector(node: HTMLElement, { trigger, focusIndex, listQuerySelector, itemsQuerySelector, onSelect, onFocus, keyDownEvent, keyDownPreventDefault, }: Params): {
+    update(props: Partial<Params>): void;
+    destroy(): void;
+};
+export {};