@simonbackx/vue-app-navigation 1.23.0 → 1.23.4

package/package.json

@@ -2,7 +2,7 @@
     "name": "@simonbackx/vue-app-navigation",
     "main": "./dist/main.js",
     "types": "./dist/index.d.ts",
-    "version": "1.23.0",
+    "version": "1.23.4",
     "sideEffects": [
         "*.vue",
         "*.css"
@@ -15,31 +15,32 @@
         "dist"
     ],
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^2.28.0",
-        "@typescript-eslint/parser": "^2.28.0",
+        "@typescript-eslint/eslint-plugin": "^5.8.1",
+        "@typescript-eslint/parser": "^5.8.1",
         "clean-webpack-plugin": "^3.0.0",
-        "css-loader": "^5.0.1",
+        "css-loader": "^6.5.1",
         "eslint": "^7.32.0",
         "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": "^1.3.4",
+        "mini-css-extract-plugin": "^2.4.5",
         "sass": "^1.32.4",
         "sass-loader": "^10.1.1",
-        "ts-loader": "^8.0.14",
-        "typescript": "^4.1.3",
-        "vue": "^2.6.12",
+        "ts-loader": "^9.2.6",
+        "typescript": "^4.5.4",
+        "vue": "^2.6.14",
         "vue-class-component": "^7.2.6",
-        "vue-loader": "^15.9.6",
+        "vue-loader": "15.9.8",
         "vue-property-decorator": "^9.1.2",
-        "vue-template-compiler": "^2.6.12",
-        "webpack": "^5.15.0",
-        "webpack-cli": "^4.3.1"
+        "vue-template-compiler": "^2.6.14",
+        "webpack": "^5.65.0",
+        "webpack-cli": "^4.9.1"
     },
     "peerDependencies": {
-        "vue": "^2.6.12",
-        "vue-class-component": "^7.0.2",
+        "vue": "^2.6.14",
+        "vue-class-component": "^7.2.6",
         "vue-property-decorator": "^9.1.2"
     }
 }

package/dist/index.d.ts

@@ -1,14 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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(): 0 | 1 | 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

@@ -1,41 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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(): 0 | 1 | 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

@@ -1,24 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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;
-}