@simonbackx/vue-app-navigation 2.17.4 → 2.18.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/classes.js +1 -4
- package/dist/index.js +45 -71
- package/dist/main.css +9 -7
- package/dist/src/ComponentWithProperties.d.ts +1 -1
- package/dist/src/ModalStackComponent.vue.d.ts +1 -1
- package/dist/src/NavigationController.vue.d.ts +6 -6
- package/dist/src/NavigationMixin.d.ts +6 -6
- package/dist/src/Plugin.d.ts +1 -1
- package/dist/src/Popup.vue.d.ts +1 -1
- package/dist/src/PushOptions.d.ts +13 -13
- package/dist/src/SplitViewController.vue.d.ts +10 -10
- package/dist/src/StackComponent.vue.d.ts +1 -1
- package/dist/src/useNavigationController.d.ts +1 -1
- package/dist/src/useSplitViewController.d.ts +1 -1
- package/dist/src/utils/navigationHooks.d.ts +5 -5
- package/dist/src/utils/useModalStackComponent.d.ts +1 -1
- package/package.json +50 -47
package/dist/classes.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) =>
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
7
4
|
import "vue";
|
|
8
5
|
class VueComponent {
|
|
9
6
|
// This will allow us to pass the vue proxy inside the component
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) =>
|
|
4
|
-
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
|
-
import { inject, proxyRefs, markRaw, ref, reactive, defineComponent, getCurrentInstance, provide, computed, unref, onActivated, onMounted, queuePostFlushCb, onBeforeUnmount, onBeforeMount, onUpdated, warn, h, setTransitionHooks, callWithAsyncErrorHandling, ErrorCodes, shallowRef, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, mergeProps, Transition, withCtx, createBlock, createCommentVNode, customRef, onScopeDispose, TransitionGroup, Fragment, renderList, isRef, onDeactivated, normalizeClass, normalizeStyle } from "vue";
|
|
3
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
+
import { ref, reactive, markRaw, proxyRefs, inject, defineComponent, getCurrentInstance, provide, computed, unref, onActivated, onMounted, queuePostFlushCb, onBeforeUnmount, onBeforeMount, onUpdated, warn, h, setTransitionHooks, shallowRef, callWithAsyncErrorHandling, ErrorCodes, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, mergeProps, Transition, withCtx, createBlock, createCommentVNode, onScopeDispose, customRef, TransitionGroup, Fragment, renderList, isRef, onDeactivated, normalizeStyle, normalizeClass } from "vue";
|
|
8
5
|
const _UrlHelper = class _UrlHelper {
|
|
9
6
|
constructor(url, localFixedPrefix) {
|
|
10
7
|
__publicField(this, "url");
|
|
@@ -247,6 +244,9 @@ class HistoryManagerStatic {
|
|
|
247
244
|
this.isQueueRunning = true;
|
|
248
245
|
const action = this.historyQueue.shift();
|
|
249
246
|
if (action) {
|
|
247
|
+
if (this.debug) {
|
|
248
|
+
console.log("Running history queue action");
|
|
249
|
+
}
|
|
250
250
|
const p = action();
|
|
251
251
|
if (p) {
|
|
252
252
|
p.finally(() => this.runQueue()).catch(console.error);
|
|
@@ -254,6 +254,9 @@ class HistoryManagerStatic {
|
|
|
254
254
|
this.runQueue();
|
|
255
255
|
}
|
|
256
256
|
} else {
|
|
257
|
+
if (this.debug) {
|
|
258
|
+
console.log("History queue done");
|
|
259
|
+
}
|
|
257
260
|
this.isQueueRunning = false;
|
|
258
261
|
this.callListeners();
|
|
259
262
|
}
|
|
@@ -265,12 +268,17 @@ class HistoryManagerStatic {
|
|
|
265
268
|
history.go(delta);
|
|
266
269
|
let timer = void 0;
|
|
267
270
|
let called = false;
|
|
271
|
+
const startTime = /* @__PURE__ */ new Date();
|
|
268
272
|
const listener = () => {
|
|
269
|
-
if (called)
|
|
270
|
-
return;
|
|
273
|
+
if (called) return;
|
|
271
274
|
called = true;
|
|
272
275
|
clearTimeout(timer);
|
|
273
276
|
window.removeEventListener("popstate", listener);
|
|
277
|
+
const end = /* @__PURE__ */ new Date();
|
|
278
|
+
if (this.debug) {
|
|
279
|
+
const ms = end.getTime() - startTime.getTime();
|
|
280
|
+
console.log("Waiting for popstate event took " + ms + "ms");
|
|
281
|
+
}
|
|
274
282
|
setTimeout(() => {
|
|
275
283
|
this.manualStateAction = false;
|
|
276
284
|
resolve();
|
|
@@ -280,7 +288,7 @@ class HistoryManagerStatic {
|
|
|
280
288
|
timer = setTimeout(() => {
|
|
281
289
|
console.warn("Timeout while waiting for history.go");
|
|
282
290
|
listener();
|
|
283
|
-
},
|
|
291
|
+
}, 400);
|
|
284
292
|
});
|
|
285
293
|
});
|
|
286
294
|
}
|
|
@@ -527,9 +535,9 @@ class HistoryManagerStatic {
|
|
|
527
535
|
activate() {
|
|
528
536
|
history.scrollRestoration = "manual";
|
|
529
537
|
async function onPopState(event) {
|
|
530
|
-
var _a;
|
|
538
|
+
var _a, _b;
|
|
531
539
|
if (this.debug) {
|
|
532
|
-
console.log("HistoryManager popstate");
|
|
540
|
+
console.log("HistoryManager popstate", (_a = event.state) == null ? void 0 : _a.counter);
|
|
533
541
|
}
|
|
534
542
|
if (this.isAdjustingState) {
|
|
535
543
|
console.warn("Duplicate popstate");
|
|
@@ -538,8 +546,8 @@ class HistoryManagerStatic {
|
|
|
538
546
|
if (this.manualStateAction) {
|
|
539
547
|
return;
|
|
540
548
|
}
|
|
549
|
+
const newCounter = (_b = event.state) == null ? void 0 : _b.counter;
|
|
541
550
|
this.isAdjustingState = true;
|
|
542
|
-
const newCounter = (_a = event.state) == null ? void 0 : _a.counter;
|
|
543
551
|
if (newCounter !== void 0) {
|
|
544
552
|
if (newCounter > this.counter) {
|
|
545
553
|
if (this.debug) {
|
|
@@ -733,18 +741,15 @@ const _ComponentWithProperties = class _ComponentWithProperties {
|
|
|
733
741
|
if (this.isKeptAlive) {
|
|
734
742
|
this.isKeptAlive = false;
|
|
735
743
|
_ComponentWithProperties.keepAliveCounter--;
|
|
736
|
-
if (_ComponentWithProperties.debug)
|
|
737
|
-
console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
|
|
744
|
+
if (_ComponentWithProperties.debug) console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
|
|
738
745
|
} else {
|
|
739
|
-
if (_ComponentWithProperties.debug)
|
|
740
|
-
console.warn("About to mount a component that was not destroyed properly " + this.component.name);
|
|
746
|
+
if (_ComponentWithProperties.debug) console.warn("About to mount a component that was not destroyed properly " + this.component.name);
|
|
741
747
|
this.destroy(this.vnode);
|
|
742
748
|
}
|
|
743
749
|
}
|
|
744
750
|
}
|
|
745
751
|
getHistoryIndex() {
|
|
746
|
-
if (this.component)
|
|
747
|
-
return this.historyIndex;
|
|
752
|
+
if (this.component) return this.historyIndex;
|
|
748
753
|
}
|
|
749
754
|
deleteHistoryIndex() {
|
|
750
755
|
this.historyIndex = null;
|
|
@@ -784,8 +789,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
|
|
|
784
789
|
}
|
|
785
790
|
setUrl(url, title) {
|
|
786
791
|
if (this.historyIndex === null) {
|
|
787
|
-
if (_ComponentWithProperties.debug)
|
|
788
|
-
console.warn("Tried calling .setUrl on a component that was never assigned a history index. Check if you displayed this component using .show or .present");
|
|
792
|
+
if (_ComponentWithProperties.debug) console.warn("Tried calling .setUrl on a component that was never assigned a history index. Check if you displayed this component using .show or .present");
|
|
789
793
|
return;
|
|
790
794
|
}
|
|
791
795
|
if (!HistoryManager.active) {
|
|
@@ -801,8 +805,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
|
|
|
801
805
|
return;
|
|
802
806
|
}
|
|
803
807
|
if (this.historyIndex === null) {
|
|
804
|
-
if (_ComponentWithProperties.debug)
|
|
805
|
-
console.warn("Tried calling .setTitle on a component that was never assigned a history index. Check if you displayed this component using .show or .present");
|
|
808
|
+
if (_ComponentWithProperties.debug) console.warn("Tried calling .setTitle on a component that was never assigned a history index. Check if you displayed this component using .show or .present");
|
|
806
809
|
return;
|
|
807
810
|
}
|
|
808
811
|
if (!HistoryManager.active) {
|
|
@@ -820,15 +823,13 @@ const _ComponentWithProperties = class _ComponentWithProperties {
|
|
|
820
823
|
const instance = this.componentInstance();
|
|
821
824
|
if (instance == null ? void 0 : instance.returnToHistoryIndex) {
|
|
822
825
|
const worked = instance == null ? void 0 : instance.returnToHistoryIndex();
|
|
823
|
-
if (_ComponentWithProperties.debug)
|
|
824
|
-
console.log("returning to instance that has an instance with custom returnToHistoryIndex method", this.component.name, worked);
|
|
826
|
+
if (_ComponentWithProperties.debug) console.log("returning to instance that has an instance with custom returnToHistoryIndex method", this.component.name, worked);
|
|
825
827
|
if (worked === true) {
|
|
826
828
|
return true;
|
|
827
829
|
}
|
|
828
830
|
}
|
|
829
831
|
if (this.historyIndex === null) {
|
|
830
|
-
if (_ComponentWithProperties.debug)
|
|
831
|
-
console.warn("Returning to a component that has no history index assigned. Has this component been pushed to a navigation controller properly before returning to it?", this.component.name);
|
|
832
|
+
if (_ComponentWithProperties.debug) console.warn("Returning to a component that has no history index assigned. Has this component been pushed to a navigation controller properly before returning to it?", this.component.name);
|
|
832
833
|
return false;
|
|
833
834
|
}
|
|
834
835
|
HistoryManager.returnToHistoryIndex(this.historyIndex);
|
|
@@ -861,8 +862,7 @@ const _ComponentWithProperties = class _ComponentWithProperties {
|
|
|
861
862
|
destroy(vnode) {
|
|
862
863
|
if (this.vnode) {
|
|
863
864
|
if (vnode !== this.vnode) {
|
|
864
|
-
if (_ComponentWithProperties.debug)
|
|
865
|
-
console.warn("Received destroy event from old/different vnode", this.vnode, vnode);
|
|
865
|
+
if (_ComponentWithProperties.debug) console.warn("Received destroy event from old/different vnode", this.vnode, vnode);
|
|
866
866
|
return;
|
|
867
867
|
}
|
|
868
868
|
if (this.keepAlive) {
|
|
@@ -870,23 +870,18 @@ const _ComponentWithProperties = class _ComponentWithProperties {
|
|
|
870
870
|
if (!this.isKeptAlive) {
|
|
871
871
|
this.isKeptAlive = true;
|
|
872
872
|
_ComponentWithProperties.keepAliveCounter++;
|
|
873
|
-
if (_ComponentWithProperties.debug)
|
|
874
|
-
|
|
875
|
-
if (_ComponentWithProperties.debug)
|
|
876
|
-
console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
|
|
873
|
+
if (_ComponentWithProperties.debug) console.log("Kept component alive " + this.component.name);
|
|
874
|
+
if (_ComponentWithProperties.debug) console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
|
|
877
875
|
}
|
|
878
876
|
return;
|
|
879
877
|
}
|
|
880
878
|
if (this.isKeptAlive) {
|
|
881
879
|
this.isKeptAlive = false;
|
|
882
880
|
_ComponentWithProperties.keepAliveCounter--;
|
|
883
|
-
if (_ComponentWithProperties.debug)
|
|
884
|
-
|
|
885
|
-
if (_ComponentWithProperties.debug)
|
|
886
|
-
console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
|
|
881
|
+
if (_ComponentWithProperties.debug) console.log("Freed component from alive stack " + this.component.name);
|
|
882
|
+
if (_ComponentWithProperties.debug) console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
|
|
887
883
|
}
|
|
888
|
-
if (_ComponentWithProperties.debug)
|
|
889
|
-
console.log("Destroyed component " + this.component.name, this.vnode);
|
|
884
|
+
if (_ComponentWithProperties.debug) console.log("Destroyed component " + this.component.name, this.vnode);
|
|
890
885
|
if (this.unmount) {
|
|
891
886
|
this.unmount(this.vnode);
|
|
892
887
|
this.unmount = null;
|
|
@@ -919,7 +914,7 @@ __publicField(_ComponentWithProperties, "debug", false);
|
|
|
919
914
|
__publicField(_ComponentWithProperties, "historyIndexOwners", /* @__PURE__ */ new Map());
|
|
920
915
|
let ComponentWithProperties = _ComponentWithProperties;
|
|
921
916
|
/**
|
|
922
|
-
* @vue/shared v3.5.
|
|
917
|
+
* @vue/shared v3.5.30
|
|
923
918
|
* (c) 2018-present Yuxi (Evan) You and Vue contributors
|
|
924
919
|
* @license MIT
|
|
925
920
|
**/
|
|
@@ -931,28 +926,9 @@ const invokeArrayFns = (fns, ...arg) => {
|
|
|
931
926
|
}
|
|
932
927
|
};
|
|
933
928
|
const ShapeFlags = {
|
|
934
|
-
"ELEMENT": 1,
|
|
935
|
-
"1": "ELEMENT",
|
|
936
|
-
"FUNCTIONAL_COMPONENT": 2,
|
|
937
|
-
"2": "FUNCTIONAL_COMPONENT",
|
|
938
|
-
"STATEFUL_COMPONENT": 4,
|
|
939
|
-
"4": "STATEFUL_COMPONENT",
|
|
940
|
-
"TEXT_CHILDREN": 8,
|
|
941
|
-
"8": "TEXT_CHILDREN",
|
|
942
|
-
"ARRAY_CHILDREN": 16,
|
|
943
|
-
"16": "ARRAY_CHILDREN",
|
|
944
|
-
"SLOTS_CHILDREN": 32,
|
|
945
|
-
"32": "SLOTS_CHILDREN",
|
|
946
|
-
"TELEPORT": 64,
|
|
947
|
-
"64": "TELEPORT",
|
|
948
929
|
"SUSPENSE": 128,
|
|
949
|
-
"128": "SUSPENSE",
|
|
950
930
|
"COMPONENT_SHOULD_KEEP_ALIVE": 256,
|
|
951
|
-
"
|
|
952
|
-
"COMPONENT_KEPT_ALIVE": 512,
|
|
953
|
-
"512": "COMPONENT_KEPT_ALIVE",
|
|
954
|
-
"COMPONENT": 6,
|
|
955
|
-
"6": "COMPONENT"
|
|
931
|
+
"COMPONENT_KEPT_ALIVE": 512
|
|
956
932
|
};
|
|
957
933
|
function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
|
|
958
934
|
callWithAsyncErrorHandling(hook, instance, ErrorCodes.VNODE_HOOK, [
|
|
@@ -964,8 +940,8 @@ function getInnerChild(vnode) {
|
|
|
964
940
|
return vnode.shapeFlag & ShapeFlags.SUSPENSE ? vnode.ssContent : vnode;
|
|
965
941
|
}
|
|
966
942
|
function resetShapeFlag(vnode) {
|
|
967
|
-
vnode.shapeFlag &=
|
|
968
|
-
vnode.shapeFlag &=
|
|
943
|
+
vnode.shapeFlag &= -257;
|
|
944
|
+
vnode.shapeFlag &= -513;
|
|
969
945
|
}
|
|
970
946
|
function makeProvidesParentReactive(instance) {
|
|
971
947
|
var _a;
|
|
@@ -986,7 +962,7 @@ function makeProvidesParentReactive(instance) {
|
|
|
986
962
|
});
|
|
987
963
|
},
|
|
988
964
|
// Vue valides keys using 'a' in obj, so we need to handle this correctly
|
|
989
|
-
has(
|
|
965
|
+
has() {
|
|
990
966
|
return true;
|
|
991
967
|
}
|
|
992
968
|
});
|
|
@@ -1405,7 +1381,7 @@ const _sfc_main$4 = defineComponent({
|
|
|
1405
1381
|
const mightBe = (_a = element ?? this.$el) == null ? void 0 : _a.querySelector("main");
|
|
1406
1382
|
return mightBe ? mightBe : null;
|
|
1407
1383
|
},
|
|
1408
|
-
getScrollElement(
|
|
1384
|
+
getScrollElement(_ = null) {
|
|
1409
1385
|
return document.documentElement;
|
|
1410
1386
|
},
|
|
1411
1387
|
shouldAnimate() {
|
|
@@ -1435,8 +1411,7 @@ const _sfc_main$4 = defineComponent({
|
|
|
1435
1411
|
if (replace > this.components.length) {
|
|
1436
1412
|
replace = this.components.length;
|
|
1437
1413
|
}
|
|
1438
|
-
if (ComponentWithProperties.debug)
|
|
1439
|
-
console.log("Pushing new component on navigation controller: " + component.component.name);
|
|
1414
|
+
if (ComponentWithProperties.debug) console.log("Pushing new component on navigation controller: " + component.component.name);
|
|
1440
1415
|
if (replace > 0) {
|
|
1441
1416
|
if (destroy && !force) {
|
|
1442
1417
|
for (let index = this.components.length - 1; index >= this.components.length - replace; index--) {
|
|
@@ -2512,8 +2487,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
2512
2487
|
ref_key: "navigationController",
|
|
2513
2488
|
ref: navigationController,
|
|
2514
2489
|
"animation-type": "modal",
|
|
2515
|
-
root:
|
|
2516
|
-
"initial-components":
|
|
2490
|
+
root: __props.root,
|
|
2491
|
+
"initial-components": __props.initialComponents,
|
|
2517
2492
|
"custom-provide": customProvide.value
|
|
2518
2493
|
}, null, 8, ["root", "initial-components", "custom-provide"]),
|
|
2519
2494
|
createVNode(_sfc_main$3, {
|
|
@@ -2578,8 +2553,7 @@ const navigationMethods = {
|
|
|
2578
2553
|
setTitle() {
|
|
2579
2554
|
var _a;
|
|
2580
2555
|
const navigationOptions = (_a = this.$options) == null ? void 0 : _a.navigation;
|
|
2581
|
-
if (!navigationOptions)
|
|
2582
|
-
return;
|
|
2556
|
+
if (!navigationOptions) return;
|
|
2583
2557
|
const title = navigationOptions.title;
|
|
2584
2558
|
if (typeof title === "function") {
|
|
2585
2559
|
this.$url.setTitle(title.call(this));
|
|
@@ -2719,7 +2693,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
2719
2693
|
return (_ctx, _cache) => {
|
|
2720
2694
|
return openBlock(), createElementBlock("div", {
|
|
2721
2695
|
class: normalizeClass(buildClass.value),
|
|
2722
|
-
style: normalizeStyle(
|
|
2696
|
+
style: normalizeStyle(__props.style),
|
|
2723
2697
|
onClick
|
|
2724
2698
|
}, [
|
|
2725
2699
|
createElementVNode("div", {
|
|
@@ -2728,8 +2702,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
2728
2702
|
}, [
|
|
2729
2703
|
createElementVNode("div", _hoisted_1$1, [
|
|
2730
2704
|
(openBlock(), createBlock(unref(ComponentWithPropertiesInstance), {
|
|
2731
|
-
key:
|
|
2732
|
-
component:
|
|
2705
|
+
key: __props.root.key,
|
|
2706
|
+
component: __props.root
|
|
2733
2707
|
}, null, 8, ["component"]))
|
|
2734
2708
|
])
|
|
2735
2709
|
], 512),
|
package/dist/main.css
CHANGED
|
@@ -59,11 +59,6 @@
|
|
|
59
59
|
.navigation-controller > .modal-pop-leave-to > div {
|
|
60
60
|
transform: translateY(100vh);
|
|
61
61
|
}
|
|
62
|
-
.navigation-controller > .push {
|
|
63
|
-
/*&-enter-from, &-leave-to {
|
|
64
|
-
opacity: 0;
|
|
65
|
-
}*/
|
|
66
|
-
}
|
|
67
62
|
.navigation-controller > .push-enter-active {
|
|
68
63
|
user-select: none;
|
|
69
64
|
}
|
|
@@ -103,6 +98,11 @@
|
|
|
103
98
|
.navigation-controller > .push-leave-to {
|
|
104
99
|
filter: brightness(80%);
|
|
105
100
|
}
|
|
101
|
+
.navigation-controller > .push {
|
|
102
|
+
/*&-enter-from, &-leave-to {
|
|
103
|
+
opacity: 0;
|
|
104
|
+
}*/
|
|
105
|
+
}
|
|
106
106
|
.navigation-controller > .push-enter-from > div {
|
|
107
107
|
transform: translateX(100%);
|
|
108
108
|
transform: translateX(calc(100% * var(--direction-scale-x, 1)));
|
|
@@ -160,8 +160,6 @@
|
|
|
160
160
|
position: relative;
|
|
161
161
|
width: 100%;
|
|
162
162
|
box-sizing: border-box;
|
|
163
|
-
min-height: 100vh;
|
|
164
|
-
min-height: calc(var(--vh, 1vh) * 100);
|
|
165
163
|
}
|
|
166
164
|
.split-view-controller > .master {
|
|
167
165
|
flex-shrink: 0;
|
|
@@ -187,6 +185,10 @@
|
|
|
187
185
|
border-top-left-radius: $border-radius;
|
|
188
186
|
border-bottom-left-radius: $border-radius;*/
|
|
189
187
|
}
|
|
188
|
+
.split-view-controller {
|
|
189
|
+
min-height: 100vh;
|
|
190
|
+
min-height: calc(var(--vh, 1vh) * 100);
|
|
191
|
+
}
|
|
190
192
|
.split-view-controller[data-has-detail=true] {
|
|
191
193
|
display: grid;
|
|
192
194
|
grid-template-columns: 320px 1fr;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { HistoryUrl } from './HistoryManager';
|
|
2
1
|
import { ComponentInternalInstance, ComponentPublicInstance, Raw, VNode } from 'vue';
|
|
2
|
+
import { HistoryUrl } from './HistoryManager';
|
|
3
3
|
|
|
4
4
|
export type ModalDisplayStyle = 'cover' | 'popup' | 'overlay' | 'sheet' | 'side-view';
|
|
5
5
|
export declare function useCurrentComponent(): ComponentWithPropertiesType | null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { PushOptions } from './PushOptions';
|
|
2
1
|
import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
|
|
2
|
+
import { PushOptions } from './PushOptions';
|
|
3
3
|
|
|
4
4
|
declare function present(options: PushOptions): Promise<void>;
|
|
5
5
|
declare function replace(component: ComponentWithPropertiesType, animated?: boolean): void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { PushOptions } from './PushOptions';
|
|
2
|
-
import { PopOptions } from './PopOptions';
|
|
3
|
-
import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
|
|
4
1
|
import { PropType } from 'vue';
|
|
2
|
+
import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
|
|
3
|
+
import { PopOptions } from './PopOptions';
|
|
4
|
+
import { PushOptions } from './PushOptions';
|
|
5
5
|
|
|
6
6
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
7
7
|
root: {
|
|
@@ -38,7 +38,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
38
38
|
growSize(width: number, height: number): void;
|
|
39
39
|
unfreezeSize(): void;
|
|
40
40
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
41
|
-
getScrollElement(
|
|
41
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
42
42
|
shouldAnimate(): any;
|
|
43
43
|
returnToHistoryIndex(): boolean;
|
|
44
44
|
push(options: PushOptions): Promise<void>;
|
|
@@ -144,7 +144,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
144
144
|
growSize(width: number, height: number): void;
|
|
145
145
|
unfreezeSize(): void;
|
|
146
146
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
147
|
-
getScrollElement(
|
|
147
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
148
148
|
shouldAnimate(): any;
|
|
149
149
|
returnToHistoryIndex(): boolean;
|
|
150
150
|
push(options: PushOptions): Promise<void>;
|
|
@@ -244,7 +244,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
244
244
|
growSize(width: number, height: number): void;
|
|
245
245
|
unfreezeSize(): void;
|
|
246
246
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
247
|
-
getScrollElement(
|
|
247
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
248
248
|
shouldAnimate(): any;
|
|
249
249
|
returnToHistoryIndex(): boolean;
|
|
250
250
|
push(options: PushOptions): Promise<void>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { useNavigationController } from './useNavigationController';
|
|
2
|
-
import { useModalStackComponent } from './utils/useModalStackComponent';
|
|
3
|
-
import { NavigationOptions, useCanDismiss, useCanPop, useDismiss, useFocused, useNavigate, usePop, usePresent, useShow, useShowDetail, useUrl } from './utils/navigationHooks';
|
|
4
|
-
import { useSplitViewController } from './useSplitViewController';
|
|
5
|
-
import { default as Popup } from './Popup.vue';
|
|
6
|
-
import { default as NavigationController } from './NavigationController.vue';
|
|
7
1
|
import { DefineComponent, Ref } from 'vue';
|
|
2
|
+
import { default as NavigationController } from './NavigationController.vue';
|
|
3
|
+
import { default as Popup } from './Popup.vue';
|
|
4
|
+
import { useSplitViewController } from './useSplitViewController';
|
|
5
|
+
import { NavigationOptions, useCanDismiss, useCanPop, useDismiss, useFocused, useNavigate, usePop, usePresent, useShow, useShowDetail, useUrl } from './utils/navigationHooks';
|
|
6
|
+
import { useModalStackComponent } from './utils/useModalStackComponent';
|
|
7
|
+
import { useNavigationController } from './useNavigationController';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* @returns To detect whether you are in a popup
|
package/dist/src/Plugin.d.ts
CHANGED
package/dist/src/Popup.vue.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { PopOptions } from './PopOptions';
|
|
2
1
|
import { ComponentWithProperties } from './ComponentWithProperties';
|
|
2
|
+
import { PopOptions } from './PopOptions';
|
|
3
3
|
|
|
4
4
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
5
5
|
root: ComponentWithProperties;
|
|
@@ -9,50 +9,50 @@ export interface PushOptions {
|
|
|
9
9
|
* The url for this new route.
|
|
10
10
|
* Set to null to specifically ignore or extending url (displayed view will copy the previous url - which is not the same as the url of the previous view)
|
|
11
11
|
*/
|
|
12
|
-
url?: string | null;
|
|
12
|
+
url?: string | null | undefined;
|
|
13
13
|
/**
|
|
14
14
|
* Whether we should push a new real state in the browser history
|
|
15
15
|
*/
|
|
16
|
-
adjustHistory?: boolean;
|
|
16
|
+
adjustHistory?: boolean | undefined;
|
|
17
17
|
/**
|
|
18
18
|
* When the user will click back, the page will reload if this set is true, instead of doing js based navigation
|
|
19
19
|
*/
|
|
20
|
-
invalidHistory?: boolean;
|
|
20
|
+
invalidHistory?: boolean | undefined;
|
|
21
21
|
/**
|
|
22
22
|
* Whether this component was pushed as result of a url reconstruction.
|
|
23
23
|
* Setting this will allow the component to build further on the url reconstruction
|
|
24
24
|
*/
|
|
25
|
-
checkRoutes?: boolean;
|
|
25
|
+
checkRoutes?: boolean | undefined;
|
|
26
26
|
/**
|
|
27
27
|
* Use animations if possible. Default value is the animated property of ComponentWithProperties.
|
|
28
28
|
* In the future, we might remove the animated property of ComponentWithProperties and enable animations by default here.
|
|
29
29
|
*/
|
|
30
|
-
animated?: boolean;
|
|
30
|
+
animated?: boolean | undefined;
|
|
31
31
|
/**
|
|
32
32
|
* Whether the "shouldNavigateAway" popped components will get called and respected. Set force to true to ignore
|
|
33
33
|
* 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).
|
|
34
34
|
* 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)
|
|
35
35
|
*/
|
|
36
|
-
force?: boolean;
|
|
36
|
+
force?: boolean | undefined;
|
|
37
37
|
/**
|
|
38
38
|
* Default behaviour should be 'true'. Set to true to indicate that the popped component(s) should get removed from the
|
|
39
39
|
* vdom. If you set this to false, they will be kept in memory. This will set keepAlive to 'true' for the removed
|
|
40
40
|
* components, making it possible to move them around in the DOM.
|
|
41
41
|
*/
|
|
42
|
-
destroy?: boolean;
|
|
42
|
+
destroy?: boolean | undefined;
|
|
43
43
|
/**
|
|
44
44
|
* How many components that need to be popped first (in the same animations, so the pop is invisible). Defaults to 0
|
|
45
45
|
*/
|
|
46
|
-
replace?: number;
|
|
46
|
+
replace?: number | undefined;
|
|
47
47
|
/**
|
|
48
48
|
* Reverse the animation if possible. Defaults to false
|
|
49
49
|
*/
|
|
50
|
-
reverse?: boolean;
|
|
50
|
+
reverse?: boolean | undefined;
|
|
51
51
|
/**
|
|
52
52
|
* Ignore client width checks, always display as modal, also on mobile devices.
|
|
53
53
|
*/
|
|
54
|
-
forceModalDisplay?: boolean;
|
|
55
|
-
modalDisplayStyle?: ModalDisplayStyle;
|
|
56
|
-
modalClass?: string;
|
|
57
|
-
modalCssStyle?: string;
|
|
54
|
+
forceModalDisplay?: boolean | undefined;
|
|
55
|
+
modalDisplayStyle?: ModalDisplayStyle | undefined;
|
|
56
|
+
modalClass?: string | undefined;
|
|
57
|
+
modalCssStyle?: string | undefined;
|
|
58
58
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { DefaultRouteHandler } from './utils/navigationHooks';
|
|
2
|
-
import { PushOptions } from './PushOptions';
|
|
3
|
-
import { default as NavigationController } from './NavigationController.vue';
|
|
4
|
-
import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
|
|
5
1
|
import { PropType } from 'vue';
|
|
2
|
+
import { ComponentWithProperties, ComponentWithPropertiesType } from './ComponentWithProperties';
|
|
3
|
+
import { default as NavigationController } from './NavigationController.vue';
|
|
4
|
+
import { PushOptions } from './PushOptions';
|
|
5
|
+
import { DefaultRouteHandler } from './utils/navigationHooks';
|
|
6
6
|
|
|
7
7
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
8
8
|
root: {
|
|
@@ -83,7 +83,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
83
83
|
growSize(width: number, height: number): void;
|
|
84
84
|
unfreezeSize(): void;
|
|
85
85
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
86
|
-
getScrollElement(
|
|
86
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
87
87
|
shouldAnimate(): any;
|
|
88
88
|
returnToHistoryIndex(): boolean;
|
|
89
89
|
push(options: PushOptions): Promise<void>;
|
|
@@ -189,7 +189,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
189
189
|
growSize(width: number, height: number): void;
|
|
190
190
|
unfreezeSize(): void;
|
|
191
191
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
192
|
-
getScrollElement(
|
|
192
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
193
193
|
shouldAnimate(): any;
|
|
194
194
|
returnToHistoryIndex(): boolean;
|
|
195
195
|
push(options: PushOptions): Promise<void>;
|
|
@@ -289,7 +289,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
289
289
|
growSize(width: number, height: number): void;
|
|
290
290
|
unfreezeSize(): void;
|
|
291
291
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
292
|
-
getScrollElement(
|
|
292
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
293
293
|
shouldAnimate(): any;
|
|
294
294
|
returnToHistoryIndex(): boolean;
|
|
295
295
|
push(options: PushOptions): Promise<void>;
|
|
@@ -409,7 +409,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
409
409
|
growSize(width: number, height: number): void;
|
|
410
410
|
unfreezeSize(): void;
|
|
411
411
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
412
|
-
getScrollElement(
|
|
412
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
413
413
|
shouldAnimate(): any;
|
|
414
414
|
returnToHistoryIndex(): boolean;
|
|
415
415
|
push(options: PushOptions): Promise<void>;
|
|
@@ -515,7 +515,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
515
515
|
growSize(width: number, height: number): void;
|
|
516
516
|
unfreezeSize(): void;
|
|
517
517
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
518
|
-
getScrollElement(
|
|
518
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
519
519
|
shouldAnimate(): any;
|
|
520
520
|
returnToHistoryIndex(): boolean;
|
|
521
521
|
push(options: PushOptions): Promise<void>;
|
|
@@ -615,7 +615,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
615
615
|
growSize(width: number, height: number): void;
|
|
616
616
|
unfreezeSize(): void;
|
|
617
617
|
getInternalScrollElement(element?: Element | null): HTMLElement | null;
|
|
618
|
-
getScrollElement(
|
|
618
|
+
getScrollElement(_?: HTMLElement | null): HTMLElement;
|
|
619
619
|
shouldAnimate(): any;
|
|
620
620
|
returnToHistoryIndex(): boolean;
|
|
621
621
|
push(options: PushOptions): Promise<void>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ComponentWithProperties } from './ComponentWithProperties';
|
|
2
1
|
import { Ref } from 'vue';
|
|
2
|
+
import { ComponentWithProperties } from './ComponentWithProperties';
|
|
3
3
|
|
|
4
4
|
declare function removeAt(index: number, key: number): void;
|
|
5
5
|
declare function getFocusedComponent(): ComponentWithProperties | null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as NavigationController } from './NavigationController.vue';
|
|
2
1
|
import { Ref } from 'vue';
|
|
2
|
+
import { default as NavigationController } from './NavigationController.vue';
|
|
3
3
|
|
|
4
4
|
export declare function useNavigationController(): Ref<InstanceType<typeof NavigationController>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as SplitViewController } from './SplitViewController.vue';
|
|
2
1
|
import { Ref } from 'vue';
|
|
2
|
+
import { default as SplitViewController } from './SplitViewController.vue';
|
|
3
3
|
|
|
4
4
|
export declare function useSplitViewController(): Ref<InstanceType<typeof SplitViewController>>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { UrlMatchResult, UrlParamsConstructors } from './UrlHelper';
|
|
2
|
-
import { PushOptions } from '../PushOptions';
|
|
3
|
-
import { PopOptions } from '../PopOptions';
|
|
4
|
-
import { HistoryUrl } from '../HistoryManager';
|
|
5
|
-
import { ComponentWithProperties, ModalDisplayStyle } from '../ComponentWithProperties';
|
|
6
1
|
import { Component, Ref } from 'vue';
|
|
2
|
+
import { ComponentWithProperties, ModalDisplayStyle } from '../ComponentWithProperties';
|
|
3
|
+
import { HistoryUrl } from '../HistoryManager';
|
|
4
|
+
import { PopOptions } from '../PopOptions';
|
|
5
|
+
import { PushOptions } from '../PushOptions';
|
|
6
|
+
import { UrlMatchResult, UrlParamsConstructors } from './UrlHelper';
|
|
7
7
|
|
|
8
8
|
export type Route<Params> = {
|
|
9
9
|
name?: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { default as ModalStackComponent } from '../ModalStackComponent.vue';
|
|
2
1
|
import { Ref } from 'vue';
|
|
2
|
+
import { default as ModalStackComponent } from '../ModalStackComponent.vue';
|
|
3
3
|
|
|
4
4
|
export declare function useModalStackComponent(): Ref<InstanceType<typeof ModalStackComponent> | null>;
|
package/package.json
CHANGED
|
@@ -1,51 +1,54 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
},
|
|
11
|
-
"./classes": {
|
|
12
|
-
"import": "./dist/classes.js",
|
|
13
|
-
"types": "./dist/src/classes.d.ts"
|
|
14
|
-
},
|
|
15
|
-
"./dist/main.css": {
|
|
16
|
-
"import": "./dist/main.css"
|
|
17
|
-
}
|
|
2
|
+
"name": "@simonbackx/vue-app-navigation",
|
|
3
|
+
"main": "./dist/index.js",
|
|
4
|
+
"types": "./dist/index.d.ts",
|
|
5
|
+
"version": "2.18.1",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"import": "./dist/index.js",
|
|
9
|
+
"types": "./dist/index.d.ts"
|
|
18
10
|
},
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
],
|
|
23
|
-
"scripts": {
|
|
24
|
-
"build": "vite build",
|
|
25
|
-
"dev": "vite serve test --mode development",
|
|
26
|
-
"build:dev": "vite build --mode development",
|
|
27
|
-
"lint": "eslint"
|
|
11
|
+
"./classes": {
|
|
12
|
+
"import": "./dist/classes.js",
|
|
13
|
+
"types": "./dist/src/classes.d.ts"
|
|
28
14
|
},
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
],
|
|
32
|
-
"type": "module",
|
|
33
|
-
"devDependencies": {
|
|
34
|
-
"@types/node": "^20.12.7",
|
|
35
|
-
"@vitejs/plugin-vue": "^5.0.4",
|
|
36
|
-
"@vue/runtime-core": "^3.5.12",
|
|
37
|
-
"eslint-plugin-stamhoofd": "^2.74.0",
|
|
38
|
-
"sass": "^1.32.4",
|
|
39
|
-
"tslib": "^2.8.1",
|
|
40
|
-
"typescript": "^5.6.2",
|
|
41
|
-
"vite": "^5.2.10",
|
|
42
|
-
"vite-plugin-dts": "^3.9.0",
|
|
43
|
-
"vue": "^3.5.12"
|
|
44
|
-
},
|
|
45
|
-
"peerDependencies": {
|
|
46
|
-
"vue": "^3.5.12"
|
|
47
|
-
},
|
|
48
|
-
"dependencies": {
|
|
49
|
-
"@vue/shared": "^3.5.12"
|
|
15
|
+
"./dist/main.css": {
|
|
16
|
+
"import": "./dist/main.css"
|
|
50
17
|
}
|
|
51
|
-
}
|
|
18
|
+
},
|
|
19
|
+
"sideEffects": [
|
|
20
|
+
"*.vue",
|
|
21
|
+
"*.css"
|
|
22
|
+
],
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"type": "module",
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"@types/node": "^20.12.7",
|
|
29
|
+
"@vitejs/plugin-vue": "^5.0.4",
|
|
30
|
+
"@vue/runtime-core": "^3.5.12",
|
|
31
|
+
"eslint-plugin-stamhoofd": "^2.74.0",
|
|
32
|
+
"sass": "^1.32.4",
|
|
33
|
+
"tslib": "^2.8.1",
|
|
34
|
+
"typescript": "^6.0.3",
|
|
35
|
+
"vite": "^5.2.10",
|
|
36
|
+
"vite-plugin-dts": "^3.9.0",
|
|
37
|
+
"vue": "^3.5.12",
|
|
38
|
+
"vue-tsc": "^3.2.6"
|
|
39
|
+
},
|
|
40
|
+
"peerDependencies": {
|
|
41
|
+
"tslib": "^2.8.1",
|
|
42
|
+
"vue": "^3.5.12"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@vue/shared": "^3.5.12"
|
|
46
|
+
},
|
|
47
|
+
"scripts": {
|
|
48
|
+
"build": "vite build",
|
|
49
|
+
"dev": "vite serve test --mode development",
|
|
50
|
+
"build:dev": "vite build --mode development",
|
|
51
|
+
"lint": "eslint",
|
|
52
|
+
"typecheck": "vue-tsc --noEmit"
|
|
53
|
+
}
|
|
54
|
+
}
|