@umbra.ui/core 0.1.0

package/dist/components/navigation/adaptive/useViewAnimation.js

@@ -0,0 +1,591 @@
+import { nextTick, ref } from "vue";
+import { Flip } from "gsap/Flip";
+import gsap from "gsap";
+gsap.registerPlugin(Flip);
+const animationInProgress = ref(false);
+/*
+# FLIP Order of Operations
+Step 1: Get State
+Step 3: Manipulate DOM
+Step 4: Animate
+Step 5: Update Data (vue reactive state)
+*/
+export const useViewAnimation = (views, instanceKey, containerDimensions, padding, gap) => {
+    /*
+     * Basic animation function
+     */
+    const animate = async (targets, manipulateDOMFn, updateDataFn) => {
+        if (animationInProgress.value) {
+            console.warn("Animation already in progress");
+            return;
+        }
+        animationInProgress.value = true;
+        // Step 1: Get State
+        const state = Flip.getState(targets);
+        // Step 2: Manipulate DOM
+        manipulateDOMFn();
+        // Step 3: Animate
+        return Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+            onComplete: () => {
+                animationInProgress.value = false;
+            },
+        }).then(() => {
+            // Step 5: Update Data
+            updateDataFn();
+        });
+    };
+    /*
+    Utility Functions
+    */
+    // Helper functions to get unique element IDs
+    const getOffscreenLeadingId = () => `${instanceKey}-offscreen-leading`;
+    const getOffscreenTrailingId = () => `${instanceKey}-offscreen-trailing`;
+    const getOnscreenId = () => `${instanceKey}-onscreen`;
+    const getViewId = (view) => `${instanceKey}-view-${view.id}`;
+    const getDarkenId = () => `${instanceKey}-darken`;
+    const getOverlayId = () => `${instanceKey}-overlay`;
+    const getViewElements = () => {
+        return views.value
+            .map((view) => document.getElementById(getViewId(view)))
+            .filter((element) => element !== null);
+    };
+    const getAllViewsBefore = (id) => {
+        const targetIndex = views.value.findIndex((view) => view.id === id);
+        return views.value.slice(0, targetIndex);
+    };
+    const getAllViewsBeforeIndex = (index) => {
+        return views.value.slice(0, index);
+    };
+    const getAllViewsAfterIndex = (index) => {
+        return views.value.slice(index + 1);
+    };
+    const getAllViewsAfter = (id) => {
+        const targetIndex = views.value.findIndex((view) => view.id === id);
+        if (targetIndex === -1) {
+            return []; // View not found
+        }
+        return views.value.slice(targetIndex + 1);
+    };
+    const getAllViewsAfterWithLocation = (id, location) => {
+        const viewsAfter = getAllViewsAfter(id);
+        return viewsAfter.filter((view) => view.location === location);
+    };
+    const getAllViewElementsAfterWithLocation = (id, location) => {
+        const viewsAfter = getAllViewsAfterWithLocation(id, location);
+        // Map to HTMLElements and filter out null values
+        return viewsAfter
+            .map((view) => document.getElementById(getViewId(view)))
+            .filter((element) => element !== null);
+    };
+    const getAllViewElementsBefore = (id) => {
+        const targetIndex = views.value.findIndex((view) => view.id === id);
+        if (targetIndex === -1) {
+            return []; // View not found
+        }
+        // Get all views before the target index
+        const precedingViews = views.value.slice(0, targetIndex);
+        // Map to HTMLElements and filter out null values
+        return precedingViews
+            .map((view) => document.getElementById(getViewId(view)))
+            .filter((element) => element !== null);
+    };
+    const getSingleViewBefore = (id) => {
+        const targetIndex = views.value.findIndex((view) => view.id === id);
+        if (targetIndex === -1 || targetIndex === 0) {
+            return null; // View not found or is first view
+        }
+        return views.value[targetIndex - 1];
+    };
+    const getSingleViewAfter = (id) => {
+        const targetIndex = views.value.findIndex((view) => view.id === id);
+        if (targetIndex === -1 || targetIndex === views.value.length - 1) {
+            return null; // View not found or is last view
+        }
+        return views.value[targetIndex + 1];
+    };
+    const getSingleViewElementBefore = (id) => {
+        const precedingView = getSingleViewBefore(id);
+        if (!precedingView) {
+            return null;
+        }
+        return document.getElementById(getViewId(precedingView));
+    };
+    const isOnscreen = (view) => {
+        return view.location === "onscreen";
+    };
+    const hasPrecedingViews = (id, location) => {
+        const targetIndex = views.value.findIndex((view) => view.id === id);
+        if (targetIndex === -1) {
+            return false; // View not found
+        }
+        // Check if ANY preceding view has the specified location
+        return views.value
+            .slice(0, targetIndex)
+            .some((view) => view.location === location);
+    };
+    const calculateContentWidth = (containerWidth, paddingString) => {
+        // Handle empty or invalid padding
+        if (!paddingString || paddingString === "0") {
+            return containerWidth;
+        }
+        // Split padding string by spaces and filter out empty strings
+        const values = paddingString
+            .trim()
+            .split(/\s+/)
+            .map((v) => parseFloat(v));
+        // Determine horizontal padding based on number of values
+        let horizontalPadding = 0;
+        switch (values.length) {
+            case 1:
+                // padding: 10px (all sides)
+                horizontalPadding = values[0] * 2;
+                break;
+            case 2:
+                // padding: 10px 20px (vertical horizontal)
+                horizontalPadding = values[1] * 2;
+                break;
+            case 3:
+                // padding: 10px 20px 15px (top horizontal bottom)
+                horizontalPadding = values[1] * 2;
+                break;
+            case 4:
+                // padding: 10px 20px 15px 25px (top right bottom left)
+                horizontalPadding = values[1] + values[3];
+                break;
+        }
+        return containerWidth - horizontalPadding;
+    };
+    const getFirstViewInOnscreen = () => {
+        return views.value.find((v) => v.location === "onscreen");
+    };
+    const getFirstViewInOverlay = () => {
+        return views.value.find((v) => v.location === "overlay");
+    };
+    const splitViewShow = async (id) => {
+        const view = views.value.find((v) => v.id === id);
+        if (view?.location === "onscreen")
+            return;
+        await splitViewNavigate(id, "show");
+    };
+    const splitViewHide = async (id) => {
+        // Prevent hiding the last view (would result in nothing being shown)
+        const viewIndex = views.value.findIndex((view) => view.id === id);
+        if (viewIndex === views.value.length - 1) {
+            return;
+        }
+        await splitViewNavigate(id, "hide");
+    };
+    const splitViewPush = async (id = null) => {
+        // if id is provided, push from that id
+        if (id) {
+            await splitViewNavigate(id, "push");
+            return;
+        }
+        else {
+            const firstInOnscreen = getFirstViewInOnscreen()?.id;
+            if (!firstInOnscreen) {
+                console.error("No view to push from");
+                return;
+            }
+            await splitViewNavigate(firstInOnscreen, "push");
+            return;
+        }
+    };
+    const splitViewPop = async (id = null) => {
+        // if id is provided, pop from that id
+        if (id) {
+            await splitViewNavigate(id, "pop");
+            return;
+        }
+        // if id is not provided, pop from the view to the right of the first view in onscreen (yes, I know it's a little weird)
+        else {
+            const firstInOnscreen = getFirstViewInOnscreen()?.id;
+            if (!firstInOnscreen)
+                return;
+            const nextInOnscreen = getSingleViewAfter(firstInOnscreen)?.id;
+            if (!nextInOnscreen) {
+                console.warn("nothing left to pop from");
+                return;
+            }
+            await splitViewNavigate(nextInOnscreen, "pop");
+            return;
+        }
+    };
+    const splitViewNavigate = async (id, type) => {
+        const elements = getViewElements();
+        // Get the appropriate view elements based on type
+        let viewElements = [];
+        switch (type) {
+            case "push":
+                viewElements = [getSingleViewElementBefore(id)];
+                break;
+            case "pop":
+                viewElements = getAllViewElementsBefore(id);
+                break;
+            case "show":
+                // Get the view with the given id AND all views after it that have location "leading"
+                const currentView = document.getElementById(getViewId(views.value.find((v) => v.id === id)));
+                const viewsAfterWithLeading = getAllViewElementsAfterWithLocation(id, "leading");
+                viewElements = [currentView, ...viewsAfterWithLeading];
+                break;
+            case "hide":
+                // Get the current view AND all views before it
+                const hideCurrentView = document.getElementById(getViewId(views.value.find((v) => v.id === id)));
+                viewElements = [hideCurrentView, ...getAllViewElementsBefore(id)];
+                break;
+        }
+        // Early return for push if no element found
+        if (type === "push" && !viewElements[0])
+            return;
+        const manipulateDOM = () => {
+            switch (type) {
+                case "push": {
+                    const onscreen = document.getElementById(getOnscreenId());
+                    if (!onscreen)
+                        return;
+                    const viewElement = viewElements[0];
+                    if (viewElement) {
+                        viewElement.parentNode?.removeChild(viewElement);
+                        viewElement.style.order = "";
+                        onscreen.insertBefore(viewElement, onscreen.children[0] || null);
+                    }
+                    break;
+                }
+                case "pop": {
+                    const offscreenLeading = document.getElementById(getOffscreenLeadingId());
+                    if (!offscreenLeading)
+                        return;
+                    viewElements.forEach((view) => {
+                        if (view) {
+                            view.parentNode?.removeChild(view);
+                            offscreenLeading.appendChild(view);
+                        }
+                    });
+                    break;
+                }
+                case "show": {
+                    const onscreen = document.getElementById(getOnscreenId());
+                    if (!onscreen)
+                        return;
+                    // Show the view with the given id and all views after it that have location "leading"
+                    // Add them at the beginning of onscreen in reverse order to maintain correct sequence
+                    viewElements.reverse().forEach((view) => {
+                        if (view) {
+                            view.parentNode?.removeChild(view);
+                            view.style.order = "";
+                            onscreen.insertBefore(view, onscreen.children[0] || null);
+                        }
+                    });
+                    break;
+                }
+                case "hide": {
+                    const offscreenLeading = document.getElementById(getOffscreenLeadingId());
+                    if (!offscreenLeading)
+                        return;
+                    // Hide the current view and all views before it
+                    viewElements.forEach((view) => {
+                        if (view) {
+                            view.parentNode?.removeChild(view);
+                            offscreenLeading.appendChild(view);
+                        }
+                    });
+                    break;
+                }
+            }
+        };
+        const updateData = async () => {
+            switch (type) {
+                case "push": {
+                    const prevIndex = views.value.findIndex((view) => view.id === getSingleViewBefore(id)?.id);
+                    views.value[prevIndex].location = "onscreen";
+                    break;
+                }
+                case "pop": {
+                    const beforeViews = getAllViewsBefore(id);
+                    beforeViews.forEach((view) => {
+                        view.location = "leading";
+                    });
+                    break;
+                }
+                case "show": {
+                    // Update the view with the given id to be onscreen
+                    const currentViewIndex = views.value.findIndex((v) => v.id === id);
+                    if (currentViewIndex !== -1) {
+                        views.value[currentViewIndex].location = "onscreen";
+                    }
+                    // Update all views after the given id that have location "leading" to be onscreen
+                    const viewsAfterWithLeading = getAllViewsAfterWithLocation(id, "leading");
+                    viewsAfterWithLeading.forEach((view) => {
+                        view.location = "onscreen";
+                    });
+                    break;
+                }
+                case "hide": {
+                    // Update the current view and all views before it to be leading/offscreen
+                    const currentViewIndex = views.value.findIndex((v) => v.id === id);
+                    if (currentViewIndex !== -1) {
+                        views.value[currentViewIndex].location = "leading";
+                    }
+                    const beforeViews = getAllViewsBefore(id);
+                    beforeViews.forEach((view) => {
+                        view.location = "leading";
+                    });
+                    break;
+                }
+            }
+        };
+        await animate(elements, manipulateDOM, updateData);
+    };
+    /*
+     * Internal Functions: Slideover
+     For Slideover:
+    - show presents the overlay and the view(s) from the left.
+    - hide dismisses the overlay and its views.
+    - push presents another view to the overlay from the left.
+    - pop dismisses a view from the overlay to the left.
+     */
+    const slideoverShow = async (id) => {
+        // Get the view with the given id AND all views after it that have location "leading"
+        const currentView = views.value.find((v) => v.id === id);
+        if (currentView?.location === "onscreen") {
+            console.warn("This view is already onscreen.");
+            return;
+        }
+        const viewsAfterWithLeading = getAllViewsAfterWithLocation(id, "leading");
+        const viewsToShow = [currentView, ...viewsAfterWithLeading];
+        for (const view of viewsToShow) {
+            if (view) {
+                view.location = "overlay";
+            }
+        }
+        await nextTick();
+        const overlay = document.getElementById(getOverlayId());
+        if (!overlay)
+            return;
+        isOverlayOpen.value = true;
+        overlay.style.pointerEvents = "auto";
+        overlay.style.transform = "translateX(0)";
+    };
+    const slideoverHide = async () => {
+        const overlay = document.getElementById(getOverlayId());
+        if (!overlay)
+            return;
+        isOverlayOpen.value = false;
+        overlay.style.pointerEvents = "none";
+        overlay.style.transform = "translateX(calc((110% + 10px) * -1))";
+        setTimeout(() => {
+            for (const view of views.value) {
+                if (!view)
+                    return;
+                if (view.location === "overlay") {
+                    view.location = "leading";
+                }
+            }
+        }, 330);
+    };
+    const slideoverPush = async (id = null) => {
+        let viewId = id;
+        if (!viewId) {
+            const firstInOnscreen = getFirstViewInOnscreen()?.id;
+            if (!firstInOnscreen)
+                return;
+            const prevView = getSingleViewBefore(firstInOnscreen);
+            if (!prevView) {
+                console.warn("no more views to push to");
+                return;
+            }
+            viewId = prevView.id;
+        }
+        // exit and show the overlay if it's not open
+        if (!isOverlayOpen.value) {
+            slideoverShow(viewId);
+            return;
+        }
+        // get the elements
+        const overlay = document.getElementById(getOverlayId());
+        if (!overlay)
+            return;
+        const leadingViews = views.value
+            .filter((view) => view.location === "leading")
+            .map((view) => document.getElementById(getViewId(view)))
+            .filter((el) => el !== null);
+        const overlayViews = views.value
+            .filter((view) => view.location === "overlay")
+            .map((view) => document.getElementById(getViewId(view)))
+            .filter((el) => el !== null);
+        const targets = [...leadingViews, ...overlayViews, overlay];
+        // manupulate the DOM
+        const manipulateDOM = () => {
+            const view = getSingleViewElementBefore(viewId);
+            if (!view)
+                return;
+            view.parentNode?.removeChild(view);
+            view.style.order = "";
+            overlay.insertBefore(view, overlay.children[0] || null);
+        };
+        // update the data
+        const updateData = () => {
+            const data = getSingleViewBefore(viewId);
+            if (!data)
+                return;
+            data.location = "overlay";
+        };
+        animate(targets, manipulateDOM, updateData);
+    };
+    const slideoverPop = async (id = null) => {
+        // exit if the overlay is not open
+        if (!isOverlayOpen.value) {
+            console.warn("No views to pop from");
+            return;
+        }
+        // if id is provided, pop from that id
+        let viewId = id;
+        // if id is not provided, pop from the view to the right of the first view in overlay
+        if (!viewId) {
+            const firstInOverlay = getFirstViewInOverlay()?.id;
+            if (!firstInOverlay)
+                return;
+            const nextView = getSingleViewAfter(firstInOverlay);
+            if (!nextView) {
+                console.warn("nothing left to pop from");
+                return;
+            }
+            // if the next view is not in overlay, dismiss the overlay (since we are at the end)
+            if (nextView.location !== "overlay") {
+                console.warn("No more views in overlay... dismissing");
+                slideoverHide();
+                return;
+            }
+            viewId = nextView.id;
+        }
+        const leading = document.getElementById(getOffscreenLeadingId());
+        const overlay = document.getElementById(getOverlayId());
+        if (!leading || !overlay) {
+            console.error("Elements are null");
+            return;
+        }
+        const elements = getViewElements();
+        const before = getAllViewElementsBefore(viewId);
+        const targets = [...elements, overlay];
+        const manipulateDOM = () => {
+            const offscreenLeading = document.getElementById(getOffscreenLeadingId());
+            if (!offscreenLeading)
+                return;
+            leading.style.zIndex = "10";
+            before.forEach((view) => {
+                view.parentNode?.removeChild(view);
+                offscreenLeading.appendChild(view);
+            });
+        };
+        const updateData = () => {
+            const beforeViews = getAllViewsBefore(viewId);
+            beforeViews.forEach((view) => {
+                view.location = "leading";
+            });
+            leading.style.zIndex = "";
+        };
+        await animate(targets, manipulateDOM, updateData);
+    };
+    /*
+     * Internal Functions: Navstack
+     For Navstack:
+    - show presents any view fullscreen from either the left or the right depending on location in the stack
+    - push presents next view fullscreen from the right, and dismisses current view to the left.
+    - pop dismisses current view to the right, and pushes preceeding view fullscreen from the left.
+     */
+    const navstackShow = async (id) => {
+        const index = views.value.findIndex((view) => view.id === id);
+        navstackNavigateTo(index);
+    };
+    const navstackPush = async () => {
+        const currentIndex = views.value.findIndex((view) => view.location === "onscreen");
+        navstackNavigateTo(currentIndex + 1);
+    };
+    const navstackPop = async (id) => {
+        const currentIndex = views.value.findIndex((view) => view.location === "onscreen");
+        navstackNavigateTo(currentIndex - 1);
+    };
+    const navstackNavigateTo = async (index) => {
+        const onscreen = document.getElementById(getOnscreenId());
+        const offscreenLeading = document.getElementById(getOffscreenLeadingId());
+        const offscreenTrailing = document.getElementById(getOffscreenTrailingId());
+        if (!onscreen || !offscreenLeading || !offscreenTrailing)
+            return;
+        const currentIndex = views.value.findIndex((view) => view.location === "onscreen");
+        if (currentIndex === -1)
+            return;
+        const oldView = views.value[currentIndex];
+        const newView = views.value[index];
+        // Ensure index is within bounds
+        if (index < 0 || index >= views.value.length) {
+            console.warn(`Navigation index ${index} out of bounds`);
+            return;
+        }
+        const currentView = document.getElementById(getViewId(oldView));
+        if (!currentView)
+            return;
+        const nextView = document.getElementById(getViewId(newView));
+        if (!nextView)
+            return;
+        // determine which offscreen container to use
+        const offscreenContainerOutflow = index > currentIndex ? offscreenLeading : offscreenTrailing;
+        const targets = [currentView, nextView];
+        const manipulateDOM = () => {
+            currentView.style.width = `${calculateContentWidth(containerDimensions.value.width, padding)}px`;
+            nextView.style.width = `${calculateContentWidth(containerDimensions.value.width, padding)}px`;
+            currentView.parentNode?.removeChild(currentView);
+            offscreenContainerOutflow.appendChild(currentView);
+            nextView.parentNode?.removeChild(nextView);
+            onscreen.appendChild(nextView);
+        };
+        const updateData = () => {
+            // set up all views before the new view to leading
+            const prevViews = getAllViewsBeforeIndex(index);
+            prevViews.forEach((view) => {
+                view.location = "leading";
+            });
+            // set up all views after the new view to trailing
+            const nextViews = getAllViewsAfterIndex(index);
+            nextViews.forEach((view) => {
+                view.location = "trailing";
+            });
+            // set up the new view to onscreen
+            newView.location = "onscreen";
+            currentView.style.width = "";
+            nextView.style.width = "";
+        };
+        await animate(targets, manipulateDOM, updateData);
+    };
+    /*
+    State
+    */
+    const isOverlayOpen = ref(false);
+    return {
+        splitViewShow,
+        splitViewHide,
+        splitViewPush,
+        splitViewPop,
+        slideoverShow,
+        slideoverHide,
+        slideoverPush,
+        slideoverPop,
+        navstackShow,
+        navstackPush,
+        navstackPop,
+        getOffscreenLeadingId,
+        getOffscreenTrailingId,
+        getOnscreenId,
+        getViewId,
+        getDarkenId,
+        getOverlayId,
+        getViewElements,
+        isOnscreen,
+        hasPrecedingViews,
+        isOverlayOpen,
+        getSingleViewBefore,
+        getSingleViewAfter,
+    };
+};

package/dist/components/navigation/adaptive/useViewResize.d.ts

@@ -0,0 +1,52 @@
+import { type Ref } from "vue";
+export interface ResizeState {
+    viewId: string;
+    startX: number;
+    startWidth: number;
+}
+export interface ResizeTooltip {
+    visible: boolean;
+    x: number;
+    y: number;
+    width: number;
+}
+export interface ResizeConfig {
+    defaultMinWidth: number;
+    gap: number;
+    padding: number;
+}
+export interface ResizableView {
+    id: string;
+    minWidth?: number;
+    maxWidth?: number;
+    currentWidth?: number;
+}
+export declare const useViewResize: (onScreenViews: Ref<ResizableView[]>, config: ResizeConfig, props: {
+    gap: string;
+    padding: string;
+}, getViewId: (view: ResizableView) => string, // Changed from (index: number) => string
+getOnscreenId: () => string) => {
+    resizing: Ref<{
+        viewId: string;
+        startX: number;
+        startWidth: number;
+    } | null, ResizeState | {
+        viewId: string;
+        startX: number;
+        startWidth: number;
+    } | null>;
+    resizeTooltip: Ref<{
+        visible: boolean;
+        x: number;
+        y: number;
+        width: number;
+    }, ResizeTooltip | {
+        visible: boolean;
+        x: number;
+        y: number;
+        width: number;
+    }>;
+    startResize: (viewId: string, event: MouseEvent) => void;
+    updateViewWidth: (viewId: string, width: number) => void;
+};
+//# sourceMappingURL=useViewResize.d.ts.map

package/dist/components/navigation/adaptive/useViewResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewResize.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/adaptive/useViewResize.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAExD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,GACxB,eAAe,GAAG,CAAC,aAAa,EAAE,CAAC,EACnC,QAAQ,YAAY,EACpB,OAAO;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EACvC,WAAW,CAAC,IAAI,EAAE,aAAa,KAAK,MAAM,EAAE,yCAAyC;AACrF,eAAe,MAAM,MAAM;;gBA9BnB,MAAM;gBACN,MAAM;oBACF,MAAM;;gBAFV,MAAM;gBACN,MAAM;oBACF,MAAM;;;iBAIT,OAAO;WACb,MAAM;WACN,MAAM;eACF,MAAM;;iBAHJ,OAAO;WACb,MAAM;WACN,MAAM;eACF,MAAM;;0BAwFgB,MAAM,SAAS,UAAU;8BAzDrB,MAAM,SAAS,MAAM;CAsKvD,CAAC"}