@simonbackx/vue-app-navigation 1.23.4 → 1.23.5

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export * from "./src/ComponentWithProperties";
+export { default as ComponentWithPropertiesInstance } from "./src/ComponentWithPropertiesInstance";
+export { default as FramedComponent } from "./src/FramedComponent.vue";
+export { default as ModalStackComponent } from "./src/ModalStackComponent.vue";
+export { default as NavigationController } from "./src/NavigationController.vue";
+export * from "./src/NavigationMixin";
+export { default as Popup } from "./src/Popup.vue";
+export { default as Sheet } from "./src/Sheet.vue";
+export { default as SideView } from "./src/SideView.vue";
+export { default as SplitViewController } from "./src/SplitViewController.vue";
+export { default as StackComponent } from "./src/StackComponent.vue";
+export * from "./src/HistoryManager";
+export * from "./src/PopOptions";
+export * from "./src/PushOptions";

package/dist/src/ComponentWithProperties.d.ts

@@ -0,0 +1,37 @@
+import { VNode } from "vue";
+export declare type ModalDisplayStyle = "cover" | "popup" | "overlay" | "sheet" | "side-view";
+export declare class ComponentWithProperties {
+    component: any;
+    properties: Record<string, any>;
+    key: number | null;
+    type: string | null;
+    hide: boolean;
+    vnode: VNode | null;
+    keepAlive: boolean;
+    isKeptAlive: boolean;
+    isMounted: boolean;
+    static keepAliveCounter: number;
+    static keyCounter: number;
+    static debug: boolean;
+    modalDisplayStyle: ModalDisplayStyle;
+    animated: boolean;
+    historyIndex: number | null;
+    isContainerView: boolean;
+    private static ignoreActivate;
+    constructor(component: any, properties?: Record<string, any>);
+    beforeMount(): void;
+    getHistoryIndex(): number | null | undefined;
+    mounted(): void;
+    onMountedChildComponent(child: ComponentWithProperties): void;
+    onActivatedChildComponent(child: ComponentWithProperties): void;
+    /**
+     * Call this method to assign a history index to this component (you should only call this when you want to assign a history index to this component that will not get mounted already)
+     */
+    assignHistoryIndex(): void;
+    activated(): void;
+    componentInstance(): Vue | undefined;
+    shouldNavigateAway(): Promise<boolean>;
+    destroy(): void;
+    setDisplayStyle(style: ModalDisplayStyle): ComponentWithProperties;
+    setAnimated(animated: boolean): ComponentWithProperties;
+}

package/dist/src/ComponentWithPropertiesInstance.d.ts

@@ -0,0 +1,6 @@
+import Vue from "vue";
+import { ComponentWithProperties } from "./ComponentWithProperties";
+declare const ComponentWithPropertiesInstance: import("vue/types/vue").ExtendedVue<Vue, unknown, unknown, unknown, {
+    component: ComponentWithProperties;
+}>;
+export default ComponentWithPropertiesInstance;

package/dist/src/FramedComponent.vue.d.ts

@@ -0,0 +1,8 @@
+import { Vue } from "vue-property-decorator";
+import { ComponentWithProperties } from "./ComponentWithProperties";
+export default class FramedComponent extends Vue {
+    root: ComponentWithProperties;
+    scrollContainer: HTMLElement;
+    pop(data: any): void;
+    push(data: any): void;
+}

package/dist/src/HistoryManager.d.ts

@@ -0,0 +1,31 @@
+declare type HistoryState = {
+    url?: string;
+    index: number;
+    adjustHistory: boolean;
+    undoAction?: (animate: boolean) => void;
+};
+declare class HistoryManagerStatic {
+    states: HistoryState[];
+    counter: number;
+    active: boolean;
+    animateHistoryPop: boolean;
+    isAdjustingState: boolean;
+    manualStateAction: boolean;
+    /**
+     * Sometimes we need to set an URL when the history api is already popping the state (async!). Then it is not possible
+     * to set the URL. To fix this, we need to delay the replaceState until after the state is popped.
+     */
+    delayedUrlSetting: {
+        url: string;
+        counter: number;
+    } | null;
+    setUrl(url: string): void;
+    pushState(url: string | undefined, undoAction: (animate: boolean) => void, adjustHistory: boolean): void;
+    /**
+     * Return to a given history point in time, if needed
+     */
+    returnToHistoryIndex(counter: number): number;
+    activate(): void;
+}
+export declare const HistoryManager: HistoryManagerStatic;
+export {};

package/dist/src/ModalMixin.d.ts

@@ -0,0 +1,15 @@
+import { Vue } from "vue-property-decorator";
+import ModalStackComponent from "./ModalStackComponent.vue";
+import { PopOptions } from "./PopOptions";
+export declare class ModalMixin extends Vue {
+    get modalStackComponent(): ModalStackComponent | null;
+    /**
+     * Call one of the pop listeners of a parent or grandparent. E.g. to go back in a navigation controller.
+     * @param options Options that should get applied to the pop of the first parent that listens for the pop event
+     */
+    pop(options?: PopOptions): void;
+    /**
+     * Return the first child of a parent that listens for the pop event
+     */
+    getPoppableParent(): any | null;
+}

package/dist/src/ModalStackComponent.vue.d.ts

@@ -0,0 +1,13 @@
+import { Vue } from "vue-property-decorator";
+import { ComponentWithProperties } from "./ComponentWithProperties";
+import StackComponent from "./StackComponent.vue";
+import { PushOptions } from "./PushOptions";
+export default class ModalStackComponent extends Vue {
+    readonly root: ComponentWithProperties;
+    stackComponent: StackComponent;
+    present(options: PushOptions): void;
+    /**
+     * @deprecated
+     */
+    replace(component: ComponentWithProperties, animated?: boolean): void;
+}

package/dist/src/NavigationController.vue.d.ts

@@ -0,0 +1,52 @@
+import { Vue } from "vue-property-decorator";
+import { ComponentWithProperties } from "./ComponentWithProperties";
+import FramedComponent from "./FramedComponent.vue";
+import { PopOptions } from "./PopOptions";
+import { PushOptions } from "./PushOptions";
+export default class NavigationController extends Vue {
+    components: ComponentWithProperties[];
+    mainComponent: ComponentWithProperties | null;
+    transitionName: string;
+    savedScrollPositions: number[];
+    nextScrollPosition: number;
+    previousScrollPosition: number;
+    nextInternalScrollPosition: number;
+    savedInternalScrollPositions: number[];
+    root: ComponentWithProperties;
+    initialComponents: ComponentWithProperties[] | null;
+    animationType: string;
+    child: FramedComponent;
+    beforeMount(): void;
+    freezeSize(): void;
+    growSize(width: number, height: number): void;
+    unfreezeSize(): void;
+    getInternalScrollElement(element?: HTMLElement | null): HTMLElement | null;
+    getScrollElement(element?: HTMLElement | null): HTMLElement;
+    shouldAnimate(): boolean;
+    /**
+     * popOptions = how to handle the pop of replace. animated and count are ignored
+     * -> should get moved to separate configurations in the future
+     */
+    push(options: PushOptions): Promise<void>;
+    /**
+     * Whether user interaction might prevent destructive navigation away from components.
+     */
+    shouldNavigateAway(): Promise<boolean>;
+    popToRoot(options?: PopOptions): Promise<ComponentWithProperties[] | undefined>;
+    getPoppableParent(): any | null;
+    /**
+     * force: whether "shouldNavigateAway" of child components is ignored
+     */
+    pop(options?: PopOptions): Promise<ComponentWithProperties[] | undefined>;
+    beforeEnter(insertedElement: HTMLElement): void;
+    beforeLeave(_element: HTMLElement): void;
+    beforeBeforeEnterAnimation(): void;
+    finishedEnterAnimation(): void;
+    enter(element: HTMLElement, done: any): void;
+    getScrollOuterHeight(scrollElement: HTMLElement): number;
+    leave(element: HTMLElement, done: any): void;
+    afterLeave(element: HTMLElement): void;
+    afterEnter(element: HTMLElement): void;
+    enterCancelled(_element: HTMLElement): void;
+    destroyed(): void;
+}

package/dist/src/NavigationMixin.d.ts

@@ -0,0 +1,46 @@
+import { Vue } from "vue-property-decorator";
+import { ComponentWithProperties } from "..";
+import NavigationController from "./NavigationController.vue";
+import { PopOptions } from './PopOptions';
+import Popup from "./Popup.vue";
+import { PushOptions } from "./PushOptions";
+import Sheet from "./Sheet.vue";
+import SideView from "./SideView.vue";
+import SplitViewController from "./SplitViewController.vue";
+export declare class NavigationMixin extends Vue {
+    emitParents(event: string, data: any): void;
+    show(options: PushOptions | ComponentWithProperties): void;
+    present(options: PushOptions | ComponentWithProperties): void;
+    showDetail(options: PushOptions | ComponentWithProperties): void;
+    /**
+     * Call one of the pop listeners of a parent or grandparent. E.g. to go back in a navigation controller.
+     * @param options Options that should get applied to the pop of the first parent that listens for the pop event
+     */
+    pop(options?: PopOptions): void;
+    /**
+     * Same as pop, but instead dismisses the first parent that was displayed as a modal
+     * @param options Options that should get applied to the pop of the first modal navigation controller or popup that listens for the pop event
+     */
+    dismiss(options?: PopOptions): void;
+    get navigationController(): NavigationController | null;
+    get modalOrPopup(): NavigationController | Popup | Sheet | SideView | null;
+    get modalNavigationController(): NavigationController | null;
+    get splitViewController(): SplitViewController | null;
+    /**
+     * Return the first child of a parent that listens for the pop event
+     */
+    getPoppableParent(): any | null;
+    /**
+     * Whether the current navivation controller above this component can pop (it has more than one child). Excluding modal view controllers
+     */
+    canPop: boolean;
+    canDismiss: boolean;
+    activated(): void;
+    /**
+     * Return the first navigation controller that can get popped, excluding the modal navigation controller and the stack component
+     */
+    private get poppableNavigationController();
+    isFocused(): boolean;
+    calculateCanPop(): boolean;
+    calculateCanDismiss(): boolean;
+}

package/dist/src/PopOptions.d.ts

@@ -0,0 +1,25 @@
+export interface PopOptions {
+    /**
+     * Use animations if possible. Default to true.
+     */
+    animated?: boolean;
+    /**
+     * Whether the "shouldNavigateAway" popped components will get called and respected. Set force to true to ignore
+     * shouldNavigateAway. Most of the time you'll need to set this to true for programmatic navigation (e.g. as a result of an API call).
+     * Set to false (= default) for user interaction (e.g. when he pressed the close button, when he tapped outside a popup, pressed the ESC key)
+     */
+    force?: boolean;
+    /**
+     * Default behaviour should be 'true'. Set to true to indicate that the popped component(s) should get removed from the
+     * vdom. If you set this to false, they will be kept in memory. This will set keepAlive to 'true' for the removed
+     * components, making it possible to move them around in the DOM.
+     */
+    destroy?: boolean;
+    /**
+     * How many components you need to pop on the same level. E.g. to pop multiple components from a navigation controller.
+     * This doesn't work across modal controllers, specifying 2 will only pop 1 component if the parent navigation controller
+     * only has one child component.
+     * Default to 1.
+     */
+    count?: number;
+}

package/dist/src/Popup.vue.d.ts

@@ -0,0 +1,16 @@
+import { ComponentWithProperties } from "./ComponentWithProperties";
+import { PopOptions } from './PopOptions';
+import { ModalMixin } from './ModalMixin';
+export default class Popup extends ModalMixin {
+    root: ComponentWithProperties;
+    sticky: boolean;
+    get shouldAppear(): boolean;
+    get pushDown(): 1 | 0 | 2;
+    get isFocused(): boolean;
+    activated(): void;
+    deactivated(): void;
+    dismiss(options?: PopOptions): Promise<false | undefined>;
+    resize(): void;
+    onKey(event: any): void;
+    shouldNavigateAway(): Promise<boolean>;
+}

package/dist/src/PushOptions.d.ts

@@ -0,0 +1,41 @@
+import { ComponentWithProperties, ModalDisplayStyle } from "./ComponentWithProperties";
+export interface PushOptions {
+    /**
+     * Insert one or multiple components. Only the last one is animated if animations are required
+     */
+    components: ComponentWithProperties[];
+    /**
+     * The url for this new route.
+     */
+    url?: string;
+    /**
+     * Whether we should push a new real state in the browser history
+     */
+    adjustHistory?: boolean;
+    /**
+     * Use animations if possible. Default value is the animated property of ComponentWithProperties.
+     * In the future, we might remove the animated property of ComponentWithProperties and enable animations by default here.
+     */
+    animated?: boolean;
+    /**
+     * Whether the "shouldNavigateAway" popped components will get called and respected. Set force to true to ignore
+     * shouldNavigateAway. Most of the time you'll need to set this to true for programmatic navigation (e.g. as a result of an API call).
+     * Set to false (= default) for user interaction (e.g. when he pressed the close button, when he tapped outside a popup, pressed the ESC key)
+     */
+    force?: boolean;
+    /**
+     * Default behaviour should be 'true'. Set to true to indicate that the popped component(s) should get removed from the
+     * vdom. If you set this to false, they will be kept in memory. This will set keepAlive to 'true' for the removed
+     * components, making it possible to move them around in the DOM.
+     */
+    destroy?: boolean;
+    /**
+     * How many components that need to be popped first (in the same animations, so the pop is invisible). Defaults to 0
+     */
+    replace?: number;
+    /**
+     * Reverse the animation if possible. Defaults to false
+     */
+    reverse?: boolean;
+    modalDisplayStyle?: ModalDisplayStyle;
+}

package/dist/src/Sheet.vue.d.ts

@@ -0,0 +1,13 @@
+import { ComponentWithProperties } from "./ComponentWithProperties";
+import { PopOptions } from './PopOptions';
+import { ModalMixin } from './ModalMixin';
+export default class Sheet extends ModalMixin {
+    root: ComponentWithProperties;
+    get shouldAppear(): boolean;
+    activated(): void;
+    deactivated(): void;
+    get isFocused(): boolean;
+    dismiss(options?: PopOptions): Promise<false | undefined>;
+    onKey(event: any): void;
+    shouldNavigateAway(): Promise<boolean>;
+}

package/dist/src/SideView.vue.d.ts

@@ -0,0 +1,15 @@
+import { ComponentWithProperties } from "./ComponentWithProperties";
+import { PopOptions } from './PopOptions';
+import { ModalMixin } from './ModalMixin';
+export default class SideView extends ModalMixin {
+    root: ComponentWithProperties;
+    get shouldAppear(): boolean;
+    get pushDown(): 1 | 0 | 2;
+    get isFocused(): boolean;
+    activated(): void;
+    deactivated(): void;
+    dismiss(options?: PopOptions): Promise<false | undefined>;
+    resize(): void;
+    onKey(event: any): void;
+    shouldNavigateAway(): Promise<boolean>;
+}

package/dist/src/SplitViewController.vue.d.ts

@@ -0,0 +1,24 @@
+import { Vue } from "vue-property-decorator";
+import { ComponentWithProperties } from "./ComponentWithProperties";
+import NavigationController from "./NavigationController.vue";
+import { PushOptions } from "./PushOptions";
+export default class SplitViewController extends Vue {
+    root: ComponentWithProperties;
+    detail: ComponentWithProperties | null;
+    detailWidth?: string;
+    navigationController: NavigationController;
+    detailKeepAlive: Vue;
+    masterElement: HTMLElement;
+    detailKey: number | null;
+    activated(): void;
+    mounted(): void;
+    deactivated(): void;
+    onResize(): void;
+    get lastIsDetail(): boolean;
+    getScrollElement(element?: HTMLElement | null): HTMLElement;
+    shouldNavigateAway(): Promise<boolean>;
+    showDetail(options: PushOptions): Promise<boolean>;
+    shouldCollapse(): boolean;
+    collapse(): void;
+    expand(): Promise<void>;
+}

package/dist/src/StackComponent.vue.d.ts

@@ -0,0 +1,8 @@
+import { Vue } from "vue-property-decorator";
+import { ComponentWithProperties } from "./ComponentWithProperties";
+export default class StackComponent extends Vue {
+    components: ComponentWithProperties[];
+    show(component: ComponentWithProperties): void;
+    removeAt(index: any, key: any): void;
+    beforeDestroy(): void;
+}

package/package.json

@@ -2,7 +2,7 @@
     "name": "@simonbackx/vue-app-navigation",
     "main": "./dist/main.js",
     "types": "./dist/index.d.ts",
-    "version": "1.23.4",
+    "version": "1.23.5",
     "sideEffects": [
         "*.vue",
         "*.css"
@@ -23,16 +23,15 @@
         "eslint-plugin-jest": "^24.3",
         "eslint-plugin-simple-import-sort": "^7.0.0",
         "eslint-plugin-vue": "^7.16.0",
-        "fork-ts-checker-webpack-plugin": "^6.5.0",
         "friendly-errors-webpack-plugin": "^1.7.0",
         "mini-css-extract-plugin": "^2.4.5",
         "sass": "^1.32.4",
         "sass-loader": "^10.1.1",
-        "ts-loader": "^9.2.6",
+        "ts-loader": "^8",
         "typescript": "^4.5.4",
         "vue": "^2.6.14",
         "vue-class-component": "^7.2.6",
-        "vue-loader": "15.9.8",
+        "vue-loader": "^15.9.8",
         "vue-property-decorator": "^9.1.2",
         "vue-template-compiler": "^2.6.14",
         "webpack": "^5.65.0",