@simonbackx/vue-app-navigation 1.27.0 → 1.28.0
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/index.d.ts +1 -0
- package/dist/main.css +2 -2
- package/dist/main.css.map +1 -1
- package/dist/main.js +1 -1
- package/dist/main.js.map +1 -1
- package/dist/src/ModalMixin.d.ts +13 -0
- package/dist/src/ModalStackComponentFinderMixin.d.ts +5 -0
- package/dist/src/NavigationMixin.d.ts +0 -2
- package/dist/src/Popup.vue.d.ts +3 -3
- package/dist/src/Sheet.vue.d.ts +3 -3
- package/dist/src/SideView.vue.d.ts +3 -3
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export { default as Sheet } from "./src/Sheet.vue";
|
|
|
9
9
|
export { default as SideView } from "./src/SideView.vue";
|
|
10
10
|
export { default as SplitViewController } from "./src/SplitViewController.vue";
|
|
11
11
|
export { default as StackComponent } from "./src/StackComponent.vue";
|
|
12
|
+
export * from "./src/ModalStackComponentFinderMixin";
|
|
12
13
|
export * from "./src/HistoryManager";
|
|
13
14
|
export * from "./src/PopOptions";
|
|
14
15
|
export * from "./src/PushOptions";
|
package/dist/main.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.navigation-controller{overflow:visible;position:relative}.navigation-controller>.modal-push-enter,.navigation-controller>.modal-push-enter-active{position:relative;z-index:100}.navigation-controller>.modal-push-enter>div,.navigation-controller>.modal-push-enter-active>div{min-height:100vh;min-height:calc(var(--vh, 1vh) * 100);background:#fff;background:var(--color-white, white);will-change:transform;transition:transform .3s cubic-bezier(0, 0, 0.2, 1);transform:translateY(100vh)}.navigation-controller>.modal-push-leave,.navigation-controller>.modal-push-leave-active{position:absolute;pointer-events:none;top:0px;left:0px;right:0px;bottom:0px;contain:strict;transition:filter .3s}.navigation-controller>.modal-push-leave>div,.navigation-controller>.modal-push-leave-active>div{width:100%;height:100%}.navigation-controller>.modal-push-enter-to>div{transform:translateY(0)}.navigation-controller>.modal-push-leave-to{filter:brightness(80%)}.navigation-controller>.modal-pop-leave-active>div{transition:transform .25s cubic-bezier(0.4, 0, 1, 1)}.navigation-controller>.modal-pop-leave,.navigation-controller>.modal-pop-leave-active{position:absolute;z-index:10000;pointer-events:none;top:0px;left:0px;right:0px;bottom:0px}.navigation-controller>.modal-pop-leave>div,.navigation-controller>.modal-pop-leave-active>div{background:#fff;background:var(--color-white, white);width:100%;height:100%}.navigation-controller>.modal-pop-enter,.navigation-controller>.modal-pop-enter-active{position:relative}.navigation-controller>.modal-pop-leave-to>div{transform:translateY(100vh)}.navigation-controller>.push-enter-active{user-select:none}.navigation-controller>.push-enter-active>div{transition:transform .3s}.navigation-controller>.push-leave-active{user-select:none;transition:filter .3s}.navigation-controller>.push-leave-active>div{transition:transform .3s}.navigation-controller>.push-enter,.navigation-controller>.push-enter-active{position:relative;z-index:1000}.navigation-controller>.push-enter>div,.navigation-controller>.push-enter-active>div{will-change:transform}.navigation-controller>.push-leave,.navigation-controller>.push-leave-active{position:absolute;pointer-events:none;top:0px;left:0px;right:0px;bottom:0px;will-change:filter;contain:strict}.navigation-controller>.push-leave>div,.navigation-controller>.push-leave-active>div{width:100%;height:100%;contain:strict;will-change:transform}.navigation-controller>.push-leave-to{filter:brightness(80%)}.navigation-controller>.push-enter>div{transform:translateX(100%);transform:translateX(calc(100% * var(--direction-scale-x, 1)))}.navigation-controller>.push-leave-to>div{transform:translateX(-40%);transform:translateX(calc(-40% * var(--direction-scale-x, 1)))}.navigation-controller>.pop-enter-active{user-select:none;transition:filter .25s}.navigation-controller>.pop-enter-active>div{transition:transform .25s}.navigation-controller>.pop-leave-active{user-select:none}.navigation-controller>.pop-leave-active>div{transition:transform .25s}.navigation-controller>.pop-enter,.navigation-controller>.pop-enter-active{position:relative}.navigation-controller>.pop-enter>div,.navigation-controller>.pop-enter-active>div{will-change:transform}.navigation-controller>.pop-leave,.navigation-controller>.pop-leave-active{position:absolute;pointer-events:none;top:0px;left:0px;right:0px;bottom:0px;z-index:1000;contain:strict}.navigation-controller>.pop-leave>div,.navigation-controller>.pop-leave-active>div{width:100%;height:100%;will-change:transform;contain:strict}.navigation-controller>.pop-enter{filter:brightness(80%)}.navigation-controller>.pop-enter>div{transform:translateX(-40%);transform:translateX(calc(-40% * var(--direction-scale-x, 1)))}.navigation-controller>.pop-leave-to>div{transform:translateX(100%);transform:translateX(calc(100% * var(--direction-scale-x, 1)))}
|
|
2
|
-
.
|
|
2
|
+
.popup-old{position:fixed;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:10000;contain:size layout style paint}.popup-old:after{background:rgba(0,0,0,.7);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:1;contain:size layout style paint;will-change:opacity;transition:opacity .3s;z-index:0}.popup-old~.popup:after{display:none}.popup-old>div{max-width:800px;flex-basis:100%;background:#fff;background:var(--color-white, white);border-radius:5px;overflow:hidden;max-height:100vh;max-height:calc(var(--vh, 1vh) * 100);height:calc(var(--vh, 1vh) * 100 - 80px);-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;contain:size layout style paint;will-change:transform,opacity;--saved-vh: var(--vh, 1vh);transform:translate3d(0, 0, 0);transform-origin:50% 0%;visibility:visible;transition:transform .3s,opacity .3s,visibility step-start .3s;z-index:1;position:relative}.popup-old>div>.scrollable-container{overflow:hidden;overflow-y:auto;--vh: calc(var(--saved-vh, 1vh) - 0.8px);height:100%;will-change:scroll-position}.popup-old>div:after{background:rgba(0,0,0,.4);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:0;contain:size layout style paint;will-change:opacity,visibility;visibility:hidden;z-index:20000;transition:opacity .3s,visibility step-end .3s}.popup-old.push-down-full>div{transition:transform .3s,opacity .3s,visibility step-end .3s;visibility:hidden;opacity:0;transform:scale(0.9, 0.9) translate3d(0, -15px, 0)}.popup-old.push-down-full>div:after{opacity:1;visibility:visible;transition:opacity .3s,visibility step-start .3s}.popup-old.push-down>div{transform:scale(0.95, 0.95) translate3d(0, -10px, 0)}.popup-old.push-down>div:after{opacity:1;visibility:visible;transition:opacity .3s,visibility step-start .3s}.popup-old.fade-enter-active:after{transition:opacity .3s}.popup-old.fade-enter-active>div{transition:transform .3s cubic-bezier(0, 0, 0.2, 1),opacity .3s}.popup-old.fade-leave-active:after{transition:opacity .3s}.popup-old.fade-leave-active>div{transition:transform .3s cubic-bezier(0.4, 0, 1, 1),opacity .3s}.popup-old.fade-enter:after,.popup-old.fade-leave-to:after{opacity:0}.popup-old.fade-enter>div,.popup-old.fade-leave-to>div{transform:translate(0, 50vh);opacity:0}
|
|
3
3
|
.side-view{background:rgba(0,0,0,.7);position:fixed;left:0;top:0;bottom:0;right:0;z-index:10000;visibility:visible;opacity:1;transition:background-color .3s,opacity .3s,visibility step-start .3s}.side-view~.side-view{background-color:rgba(0,0,0,.4)}.side-view>div{position:fixed;right:0;top:0;bottom:0;width:100%;max-width:800px;background:#fff;background:var(--color-white, white);border-radius:0px;overflow:hidden;height:100%;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;transform:translate3d(0, 0, 0);transition:transform .3s,border-radius .3s;transform-origin:0% 50%}.side-view.push-down-full{transition:background-color .3s,opacity .3s,visibility step-end .3s;visibility:hidden;opacity:0;background-color:rgba(0,0,0,.6)}.side-view.push-down-full>div{transform:scale(0.9, 0.9) translate3d(-15px, 0, 0);border-radius:5px}.side-view.push-down{background-color:rgba(0,0,0,.6)}.side-view.push-down>div{transform:scale(0.95, 0.95) translate3d(-10px, 0, 0);border-radius:5px}.side-view.fade-enter-active,.side-view.fade-leave-active,.side-view[data-extended-enter=true]{position:fixed}.side-view.fade-enter-active>div,.side-view.fade-leave-active>div,.side-view[data-extended-enter=true]>div{transition:transform .3s}.side-view.fade-enter,.side-view.fade-leave-to{background-color:rgba(0,0,0,0)}.side-view.fade-enter>div,.side-view.fade-leave-to>div{transform:translate(100%, 0)}.side-view.fade-enter-active,.side-view.fade-leave-active{z-index:10000}
|
|
4
|
+
.sheet-old{position:fixed;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;contain:size layout style paint}.sheet-old .navigation-controller{transition:height .25s cubic-bezier(0.4, 0, 0.2, 1);will-change:height}.sheet-old:after{background:rgba(0,0,0,.7);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:1;contain:size layout style paint;will-change:opacity;transition:opacity .3s;z-index:0}.sheet-old~.sheet:after{display:none}.sheet-old>div{max-width:800px;background:#fff;background:var(--color-white, white);border-radius:5px;overflow:hidden;max-height:100vh;max-height:calc(100vh - 80px);max-height:calc(var(--vh, 1vh) * 100 - 80px);overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;--saved-vh: var(--vh, 1vh);transform:translate3d(0, 0, 0);transform-origin:50% 50%;z-index:1;contain:layout style paint;will-change:transform,opacity,scroll-position;transition:transform .3s,opacity .3s}.sheet-old>div>*{--vh: calc(var(--saved-vh, 1vh) - 0.8px)}.sheet-old.fade-enter-active:after{transition:opacity .3s}.sheet-old.fade-enter-active>div{transition:transform .3s cubic-bezier(0, 0, 0.2, 1),opacity .3s}.sheet-old.fade-leave-active:after{transition:opacity .3s}.sheet-old.fade-leave-active>div{transition:transform .3s cubic-bezier(0.4, 0, 1, 1),opacity .3s}.sheet-old.fade-enter:after,.sheet-old.fade-leave-to:after{opacity:0}.sheet-old.fade-enter>div,.sheet-old.fade-leave-to>div{transform:translate(0, 30vh);opacity:0}
|
|
4
5
|
.split-view-controller{position:relative;width:100%;box-sizing:border-box;min-height:100vh;min-height:calc(var(--vh, 1vh) * 100)}.split-view-controller>.master{flex-shrink:0;flex-grow:0;position:sticky;left:0;top:0;height:100vh;height:calc(var(--vh, 1vh) * 100);overflow:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.split-view-controller>.master:last-child{position:relative;overflow:visible;width:100%;height:auto}.split-view-controller[data-has-detail=true]{display:grid;grid-template-columns:320px 1fr;grid-template-columns:var(--split-view-width, 320px) 1fr}.split-view-controller[data-has-detail=true]>.master{min-width:0}.split-view-controller[data-has-detail=true]>.detail{min-width:0;min-height:100vh;min-height:calc(var(--vh, 1vh) * 100)}
|
|
5
|
-
.popup-old{position:fixed;left:0;top:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:10000;contain:size layout style paint}.popup-old:after{background:rgba(0,0,0,.7);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:1;contain:size layout style paint;will-change:opacity;transition:opacity .3s;z-index:0}.popup-old~.popup:after{display:none}.popup-old>div{max-width:800px;flex-basis:100%;background:#fff;background:var(--color-white, white);border-radius:5px;overflow:hidden;max-height:100vh;max-height:calc(var(--vh, 1vh) * 100);height:calc(var(--vh, 1vh) * 100 - 80px);-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;box-sizing:border-box;contain:size layout style paint;will-change:transform,opacity;--saved-vh: var(--vh, 1vh);transform:translate3d(0, 0, 0);transform-origin:50% 0%;visibility:visible;transition:transform .3s,opacity .3s,visibility step-start .3s;z-index:1;position:relative}.popup-old>div>.scrollable-container{overflow:hidden;overflow-y:auto;--vh: calc(var(--saved-vh, 1vh) - 0.8px);height:100%;will-change:scroll-position}.popup-old>div:after{background:rgba(0,0,0,.4);content:"";position:absolute;left:0;top:0;bottom:0;right:0;opacity:0;contain:size layout style paint;will-change:opacity,visibility;visibility:hidden;z-index:20000;transition:opacity .3s,visibility step-end .3s}.popup-old.push-down-full>div{transition:transform .3s,opacity .3s,visibility step-end .3s;visibility:hidden;opacity:0;transform:scale(0.9, 0.9) translate3d(0, -15px, 0)}.popup-old.push-down-full>div:after{opacity:1;visibility:visible;transition:opacity .3s,visibility step-start .3s}.popup-old.push-down>div{transform:scale(0.95, 0.95) translate3d(0, -10px, 0)}.popup-old.push-down>div:after{opacity:1;visibility:visible;transition:opacity .3s,visibility step-start .3s}.popup-old.fade-enter-active:after{transition:opacity .3s}.popup-old.fade-enter-active>div{transition:transform .3s cubic-bezier(0, 0, 0.2, 1),opacity .3s}.popup-old.fade-leave-active:after{transition:opacity .3s}.popup-old.fade-leave-active>div{transition:transform .3s cubic-bezier(0.4, 0, 1, 1),opacity .3s}.popup-old.fade-enter:after,.popup-old.fade-leave-to:after{opacity:0}.popup-old.fade-enter>div,.popup-old.fade-leave-to>div{transform:translate(0, 50vh);opacity:0}
|
|
6
6
|
|
|
7
7
|
/*# sourceMappingURL=main.css.map*/
|
package/dist/main.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.css","mappings":"AAsoBA,uBAEI,iBACA,kBAIQ,yFAEI,kBACA,YAEA,iGACI,iBACA,sCACA,gBACA,qCAEA,sBAEA,oDACA,4BAIR,yFAEI,kBACA,oBAKA,QACA,SACA,UACA,WACA,eAGA,sBAEA,iGAEI,WACA,YAKJ,gDACI,wBAIR,4CACI,uBAMA,mDACI,qDAIR,uFAEI,kBACA,cACA,oBAKA,QACA,SACA,UACA,WAEA,+FAEI,gBACA,qCACA,WACA,YAIR,uFAEI,kBAIA,+CACI,4BAOZ,0CACI,iBAEA,8CACI,yBAIR,0CACI,iBAGA,sBAEA,8CACI,yBAIR,6EAEI,kBACA,aAEA,qFACI,sBAIR,6EAEI,kBACA,oBAKA,QACA,SACA,UACA,WACA,mBACA,eAIA,qFAEI,WACA,YACA,eACA,sBAIR,sCACI,uBAQA,uCACI,2BAGA,+DAKJ,0CACI,2BAGA,+DAMP,yCACG,iBAGA,uBAEA,6CACI,0BAIR,yCACI,iBAEA,6CACI,0BAIR,2EAEI,kBAEA,mFACI,sBAIR,2EAEI,kBACA,oBAEA,QACA,SACA,UACA,WACA,aAEA,eAEA,mFAEI,WACA,YACA,sBACA,eAIR,kCACI,uBAIA,sCACI,2BAGA,+DAKJ,yCACI,2BAGA,+D;ACjyBhB,WAGI,eACA,OACA,MACA,SACA,QACA,aACA,mBACA,uBACA,cACA,aACA,gCAEA,kCACI,oDACA,mBAGJ,iBACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,oBACA,uBACA,UAGJ,wBACI,aAKJ,eACI,gBACA,gBACA,qCACA,kBAGA,gBAEA,iBACA,8BACA,6CAEA,gBACA,gBACA,iCACA,8BAEA,sBAEA,2BAGA,+BACA,yBACA,UACA,2BACA,8CACA,qCAEA,iBACI,yCAKJ,mCACI,uBAGJ,iCAEI,gEAKJ,mCACI,uBAGJ,iCAEI,gEAKJ,2DACI,UAGJ,uDACI,6BACA,U;ACtFZ,WAEI,0BACA,eACA,OACA,MACA,SACA,QACA,cACA,mBACA,UACA,sEAEA,sBACI,gCAKJ,eACI,eACA,QACA,MACA,SACA,WACA,gBACA,gBACA,qCACA,kBAGA,gBAEA,YAEA,gBACA,gBACA,iCACA,8BAEA,sBAGA,+BAGA,2CACA,wBAGJ,0BACI,oEACA,kBACA,UACA,gCAEA,8BACI,mDACA,kBAIR,qBACI,gCAEA,yBACI,qDACA,kBAIR,+FAGI,eAEA,2GACI,yBAGR,+CACI,+BAEA,uDACI,6BAIR,0DAEI,c;ACIR,uBAEI,kBACA,WACA,sBAwCA,iBACA,sCAvCA,+BACI,cACA,YACA,gBACA,OACA,MACA,aACA,kCAEA,gBACA,kBACA,iCAIA,8BAEA,0CACI,kBACA,iBACA,WACA,YAoBR,6CACI,aACA,gCACA,yDAEA,qDACI,YAGJ,qDACI,YACA,iBACA,sC;ACtJZ,WAGI,eACA,OACA,MACA,SACA,QACA,aACA,mBACA,uBACA,cACA,gCAEA,iBACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,oBACA,uBACA,UAGJ,wBACI,aAKJ,eACI,gBACA,gBACA,gBACA,qCACA,kBAGA,gBAEA,iBACA,sCACA,yCAEA,iCACA,8BAEA,sBAEA,gCACA,8BAEA,2BAGA,+BACA,wBAEA,mBACA,+DACA,UACA,kBAEA,qCACI,gBACA,gBAEA,yCACA,YACA,4BAGJ,qBACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,+BACA,kBACA,cACA,+CAKJ,8BACI,6DACA,kBACA,UACA,mDAEA,oCACI,UACA,mBACA,iDAMR,yBACI,qDAEA,+BACI,UACA,mBACA,iDAMR,mCACI,uBAGJ,iCAEI,gEAKJ,mCACI,uBAGJ,iCAEI,gEAKJ,2DACI,UAGJ,uDACI,6BACA,U","sources":["webpack://@simonbackx/vue-app-navigation/./src/NavigationController.vue","webpack://@simonbackx/vue-app-navigation/./src/Sheet.vue","webpack://@simonbackx/vue-app-navigation/./src/SideView.vue","webpack://@simonbackx/vue-app-navigation/./src/SplitViewController.vue","webpack://@simonbackx/vue-app-navigation/./src/Popup.vue"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.navigation-controller {\n // Scrolling should happen inside the children!\n overflow: visible;\n position: relative;\n\n > .modal {\n &-push {\n &-enter,\n &-enter-active {\n position: relative;\n z-index: 100;\n \n & > div {\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n background: white;\n background: var(--color-white, white);\n\n will-change: transform;\n\n transition: transform 0.30s cubic-bezier(0.0, 0.0, 0.2, 1);\n transform: translateY(100vh);\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n pointer-events: none;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n contain: strict;\n\n // Darkness in sync with enter animation\n transition: filter 0.30s;\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter-to {\n & > div {\n transform: translateY(0);\n }\n }\n\n &-leave-to {\n filter: brightness(80%);\n }\n }\n\n &-pop {\n &-leave-active {\n & > div {\n transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1);\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n z-index: 10000;\n pointer-events: none;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n\n & > div {\n //overflow: hidden !important;\n background: white;\n background: var(--color-white, white);\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n }\n\n &-leave-to {\n & > div {\n transform: translateY(100vh);\n }\n }\n }\n }\n\n > .push {\n &-enter-active {\n user-select: none;\n\n & > div {\n transition: transform 0.30s;\n }\n }\n\n &-leave-active {\n user-select: none;\n\n // Darkness in sync with enter animation\n transition: filter 0.30s;\n\n & > div {\n transition: transform 0.30s;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n z-index: 1000;\n\n & > div {\n will-change: transform;\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n pointer-events: none;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n will-change: filter;\n contain: strict;\n\n // Top, left and bottom will get adjusted\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n contain: strict;\n will-change: transform;\n }\n }\n\n &-leave-to /* .fade-leave-active below version 2.1.8 */ {\n filter: brightness(80%);\n }\n\n /*&-enter, &-leave-to {\n opacity: 0;\n }*/\n\n &-enter {\n & > div {\n transform: translateX(100%);\n\n // RTL support\n transform: translateX(calc(100% * var(--direction-scale-x, 1)));\n }\n }\n\n &-leave-to {\n & > div {\n transform: translateX(-40%);\n\n // RTL support\n transform: translateX(calc(-40% * var(--direction-scale-x, 1)));\n }\n }\n }\n\n > .pop {\n &-enter-active {\n user-select: none;\n\n // Opacity in sync with leave\n transition: filter 0.25s;\n\n & > div {\n transition: transform 0.25s;\n }\n }\n\n &-leave-active {\n user-select: none;\n\n & > div {\n transition: transform 0.25s;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n\n & > div {\n will-change: transform;\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n pointer-events: none;\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n z-index: 1000;\n\n contain: strict;\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n will-change: transform;\n contain: strict;\n }\n }\n\n &-enter/*, &-leave-to *//* .fade-leave-active below version 2.1.8 */ {\n filter: brightness(80%);\n }\n\n &-enter {\n & > div {\n transform: translateX(-40%);\n\n // RTL support\n transform: translateX(calc(-40% * var(--direction-scale-x, 1)));\n }\n }\n\n &-leave-to {\n & > div {\n transform: translateX(100%);\n\n // RTL support\n transform: translateX(calc(100% * var(--direction-scale-x, 1)));\n }\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sheet-old {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n // background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 20px;\n contain: size layout style paint;\n\n .navigation-controller {\n transition: height 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);\n will-change: height;\n }\n\n &:after {\n background: rgba(black, 0.7);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n contain: size layout style paint;\n will-change: opacity;\n transition: opacity 0.3s;\n z-index: 0;\n }\n\n ~.sheet:after {\n display: none;\n }\n\n // Improve performance\n\n & > div {\n max-width: 800px;\n background: white;\n background: var(--color-white, white);\n border-radius: 5px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n max-height: 100vh;\n max-height: calc(100vh - 80px);\n max-height: calc(var(--vh, 1vh) * 100 - 80px);\n\n overflow: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n --saved-vh: var(--vh, 1vh);\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n transform-origin: 50% 50%;\n z-index: 1;\n contain: layout style paint;\n will-change: transform, opacity, scroll-position;\n transition: transform 0.3s, opacity 0.3s;\n\n > * {\n --vh: calc(var(--saved-vh, 1vh) - 0.8px);\n }\n }\n\n &.fade-enter-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Decelerated easing\n transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s;\n }\n }\n\n &.fade-leave-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Accelerated easing\n transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.3s;\n }\n }\n\n &.fade-enter, &.fade-leave-to {\n &:after {\n opacity: 0;\n }\n\n & > div {\n transform: translate(0, 30vh);\n opacity: 0;\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.side-view {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n z-index: 10000;\n visibility: visible;\n opacity: 1;\n transition: background-color 0.3s, opacity 0.3s, visibility step-start 0.3s;\n\n ~.side-view {\n background-color: rgba(black, 0.4);\n }\n\n // Improve performance\n\n & > div {\n position: fixed;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n max-width: 800px;\n background: white;\n background: var(--color-white, white);\n border-radius: 0px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n height: 100%;\n\n overflow: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n\n // Push down\n transition: transform 0.3s, border-radius 0.3s;\n transform-origin: 0% 50%;\n }\n\n &.push-down-full {\n transition: background-color 0.3s, opacity 0.3s, visibility step-end 0.3s;\n visibility: hidden;\n opacity: 0;\n background-color: rgba(black, 0.6);\n\n & > div {\n transform: scale(0.9, 0.9) translate3d(-15px, 0, 0);\n border-radius: 5px;\n }\n }\n\n &.push-down {\n background-color: rgba(black, 0.6);\n\n & > div {\n transform: scale(0.95, 0.95) translate3d(-10px, 0, 0);\n border-radius: 5px;\n }\n }\n\n &.fade-enter-active,\n &.fade-leave-active,\n &[data-extended-enter=\"true\"] {\n position: fixed;\n\n & > div {\n transition: transform 0.3s;\n }\n }\n &.fade-enter, &.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\n background-color: rgba(black, 0);\n\n & > div {\n transform: translate(100%, 0);\n }\n }\n\n &.fade-enter-active,\n &.fade-leave-active {\n z-index: 10000;\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.split-view-controller {\n //background: $color-white-shade;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n\n & > .master {\n flex-shrink: 0;\n flex-grow: 0;\n position: sticky;\n left: 0;\n top: 0;\n height: 100vh;\n height: calc(var(--vh, 1vh) * 100);\n\n overflow: hidden;\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n\n // do not start scrolling parents if we reached the edge of this view\n // we'll need to add a polyfill for Safari in JS to disable overscroll (currently not available)\n overscroll-behavior-y: contain;\n\n &:last-child {\n position: relative;\n overflow: visible;\n width: 100%;\n height: auto;\n }\n }\n\n & > .detail {\n /*background: $color-white;\n border-top-left-radius: $border-radius;\n border-bottom-left-radius: $border-radius;*/\n\n // Clip contents (during animations)\n // Sometimes not working on iOS (need to fix)\n // clip-path: inset(0px 0px);\n\n // @extend .style-side-view-shadow;\n }\n\n // Make sure our background color etc fills the whole view\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n\n &[data-has-detail=\"true\"] {\n display: grid;\n grid-template-columns: 320px 1fr;\n grid-template-columns: var(--split-view-width, 320px) 1fr;\n\n & > .master {\n min-width: 0;\n }\n\n & > .detail {\n min-width: 0;\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.popup-old {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n //background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n contain: size layout style paint;\n\n &:after {\n background: rgba(black, 0.7);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n contain: size layout style paint;\n will-change: opacity;\n transition: opacity 0.3s;\n z-index: 0;\n }\n\n ~.popup:after {\n display: none;\n }\n\n // Improve performance\n\n & > div {\n max-width: 800px;\n flex-basis: 100%;\n background: white;\n background: var(--color-white, white);\n border-radius: 5px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n max-height: 100vh;\n max-height: calc(var(--vh, 1vh) * 100);\n height: calc(var(--vh, 1vh) * 100 - 80px);\n\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n contain: size layout style paint;\n will-change: transform, opacity;\n\n --saved-vh: var(--vh, 1vh);\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n transform-origin: 50% 0%;\n\n visibility: visible;\n transition: transform 0.3s, opacity 0.3s, visibility step-start 0.3s;\n z-index: 1;\n position: relative;\n\n > .scrollable-container {\n overflow: hidden;\n overflow-y: auto;\n // Pass updated vh to children\n --vh: calc(var(--saved-vh, 1vh) - 0.8px);\n height: 100%;\n will-change: scroll-position;\n }\n\n &:after {\n background: rgba(black, 0.4);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n contain: size layout style paint;\n will-change: opacity, visibility;\n visibility: hidden;\n z-index: 20000;\n transition: opacity 0.3s, visibility step-end 0.3s;\n }\n }\n\n &.push-down-full {\n & > div {\n transition: transform 0.3s, opacity 0.3s, visibility step-end 0.3s;\n visibility: hidden;\n opacity: 0;\n transform: scale(0.9, 0.9) translate3d(0, -15px, 0);\n\n &:after {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.3s, visibility step-start 0.3s;\n }\n }\n }\n\n &.push-down {\n & > div {\n transform: scale(0.95, 0.95) translate3d(0, -10px, 0);\n\n &:after {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.3s, visibility step-start 0.3s;\n }\n }\n }\n\n &.fade-enter-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Decelerated easing\n transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s;\n }\n }\n\n &.fade-leave-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Accelerated easing\n transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.3s;\n }\n }\n\n &.fade-enter, &.fade-leave-to {\n &:after {\n opacity: 0;\n }\n\n & > div {\n transform: translate(0, 50vh);\n opacity: 0;\n }\n }\n}\n"],"names":[],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"main.css","mappings":"AAsoBA,uBAEI,iBACA,kBAIQ,yFAEI,kBACA,YAEA,iGACI,iBACA,sCACA,gBACA,qCAEA,sBAEA,oDACA,4BAIR,yFAEI,kBACA,oBAKA,QACA,SACA,UACA,WACA,eAGA,sBAEA,iGAEI,WACA,YAKJ,gDACI,wBAIR,4CACI,uBAMA,mDACI,qDAIR,uFAEI,kBACA,cACA,oBAKA,QACA,SACA,UACA,WAEA,+FAEI,gBACA,qCACA,WACA,YAIR,uFAEI,kBAIA,+CACI,4BAOZ,0CACI,iBAEA,8CACI,yBAIR,0CACI,iBAGA,sBAEA,8CACI,yBAIR,6EAEI,kBACA,aAEA,qFACI,sBAIR,6EAEI,kBACA,oBAKA,QACA,SACA,UACA,WACA,mBACA,eAIA,qFAEI,WACA,YACA,eACA,sBAIR,sCACI,uBAQA,uCACI,2BAGA,+DAKJ,0CACI,2BAGA,+DAMP,yCACG,iBAGA,uBAEA,6CACI,0BAIR,yCACI,iBAEA,6CACI,0BAIR,2EAEI,kBAEA,mFACI,sBAIR,2EAEI,kBACA,oBAEA,QACA,SACA,UACA,WACA,aAEA,eAEA,mFAEI,WACA,YACA,sBACA,eAIR,kCACI,uBAIA,sCACI,2BAGA,+DAKJ,yCACI,2BAGA,+D;AC3wBhB,WAGI,eACA,OACA,MACA,SACA,QACA,aACA,mBACA,uBACA,cACA,gCAEA,iBACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,oBACA,uBACA,UAGJ,wBACI,aAKJ,eACI,gBACA,gBACA,gBACA,qCACA,kBAGA,gBAEA,iBACA,sCACA,yCAEA,iCACA,8BAEA,sBAEA,gCACA,8BAEA,2BAGA,+BACA,wBAEA,mBACA,+DACA,UACA,kBAEA,qCACI,gBACA,gBAEA,yCACA,YACA,4BAGJ,qBACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,+BACA,kBACA,cACA,+CAKJ,8BACI,6DACA,kBACA,UACA,mDAEA,oCACI,UACA,mBACA,iDAMR,yBACI,qDAEA,+BACI,UACA,mBACA,iDAMR,mCACI,uBAGJ,iCAEI,gEAKJ,mCACI,uBAGJ,iCAEI,gEAKJ,2DACI,UAGJ,uDACI,6BACA,U;ACzJZ,WAEI,0BACA,eACA,OACA,MACA,SACA,QACA,cACA,mBACA,UACA,sEAEA,sBACI,gCAKJ,eACI,eACA,QACA,MACA,SACA,WACA,gBACA,gBACA,qCACA,kBAGA,gBAEA,YAEA,gBACA,gBACA,iCACA,8BAEA,sBAGA,+BAGA,2CACA,wBAGJ,0BACI,oEACA,kBACA,UACA,gCAEA,8BACI,mDACA,kBAIR,qBACI,gCAEA,yBACI,qDACA,kBAIR,+FAGI,eAEA,2GACI,yBAGR,+CACI,+BAEA,uDACI,6BAIR,0DAEI,c;AC7GR,WAGI,eACA,OACA,MACA,SACA,QACA,aACA,mBACA,uBACA,cACA,aACA,gCAEA,kCACI,oDACA,mBAGJ,iBACI,0BACA,WACA,kBACA,OACA,MACA,SACA,QACA,UACA,gCACA,oBACA,uBACA,UAGJ,wBACI,aAKJ,eACI,gBACA,gBACA,qCACA,kBAGA,gBAEA,iBACA,8BACA,6CAEA,gBACA,gBACA,iCACA,8BAEA,sBAEA,2BAGA,+BACA,yBACA,UACA,2BACA,8CACA,qCAEA,iBACI,yCAKJ,mCACI,uBAGJ,iCAEI,gEAKJ,mCACI,uBAGJ,iCAEI,gEAKJ,2DACI,UAGJ,uDACI,6BACA,U;ACQZ,uBAEI,kBACA,WACA,sBAwCA,iBACA,sCAvCA,+BACI,cACA,YACA,gBACA,OACA,MACA,aACA,kCAEA,gBACA,kBACA,iCAIA,8BAEA,0CACI,kBACA,iBACA,WACA,YAoBR,6CACI,aACA,gCACA,yDAEA,qDACI,YAGJ,qDACI,YACA,iBACA,sC","sources":["webpack://@simonbackx/vue-app-navigation/./src/NavigationController.vue","webpack://@simonbackx/vue-app-navigation/./src/Popup.vue","webpack://@simonbackx/vue-app-navigation/./src/SideView.vue","webpack://@simonbackx/vue-app-navigation/./src/Sheet.vue","webpack://@simonbackx/vue-app-navigation/./src/SplitViewController.vue"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.navigation-controller {\n // Scrolling should happen inside the children!\n overflow: visible;\n position: relative;\n\n > .modal {\n &-push {\n &-enter,\n &-enter-active {\n position: relative;\n z-index: 100;\n \n & > div {\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n background: white;\n background: var(--color-white, white);\n\n will-change: transform;\n\n transition: transform 0.30s cubic-bezier(0.0, 0.0, 0.2, 1);\n transform: translateY(100vh);\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n pointer-events: none;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n contain: strict;\n\n // Darkness in sync with enter animation\n transition: filter 0.30s;\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter-to {\n & > div {\n transform: translateY(0);\n }\n }\n\n &-leave-to {\n filter: brightness(80%);\n }\n }\n\n &-pop {\n &-leave-active {\n & > div {\n transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1);\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n z-index: 10000;\n pointer-events: none;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n\n & > div {\n //overflow: hidden !important;\n background: white;\n background: var(--color-white, white);\n width: 100%;\n height: 100%;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n }\n\n &-leave-to {\n & > div {\n transform: translateY(100vh);\n }\n }\n }\n }\n\n > .push {\n &-enter-active {\n user-select: none;\n\n & > div {\n transition: transform 0.30s;\n }\n }\n\n &-leave-active {\n user-select: none;\n\n // Darkness in sync with enter animation\n transition: filter 0.30s;\n\n & > div {\n transition: transform 0.30s;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n z-index: 1000;\n\n & > div {\n will-change: transform;\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n pointer-events: none;\n\n // During leave animation, the div inside this container will transition to the left, causing scroll offsets\n // We'll need to ignore these\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n will-change: filter;\n contain: strict;\n\n // Top, left and bottom will get adjusted\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n contain: strict;\n will-change: transform;\n }\n }\n\n &-leave-to /* .fade-leave-active below version 2.1.8 */ {\n filter: brightness(80%);\n }\n\n /*&-enter, &-leave-to {\n opacity: 0;\n }*/\n\n &-enter {\n & > div {\n transform: translateX(100%);\n\n // RTL support\n transform: translateX(calc(100% * var(--direction-scale-x, 1)));\n }\n }\n\n &-leave-to {\n & > div {\n transform: translateX(-40%);\n\n // RTL support\n transform: translateX(calc(-40% * var(--direction-scale-x, 1)));\n }\n }\n }\n\n > .pop {\n &-enter-active {\n user-select: none;\n\n // Opacity in sync with leave\n transition: filter 0.25s;\n\n & > div {\n transition: transform 0.25s;\n }\n }\n\n &-leave-active {\n user-select: none;\n\n & > div {\n transition: transform 0.25s;\n }\n }\n\n &-enter,\n &-enter-active {\n position: relative;\n\n & > div {\n will-change: transform;\n }\n }\n\n &-leave,\n &-leave-active {\n position: absolute;\n pointer-events: none;\n //overflow: hidden !important;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n z-index: 1000;\n\n contain: strict;\n\n & > div {\n //overflow: hidden !important;\n width: 100%;\n height: 100%;\n will-change: transform;\n contain: strict;\n }\n }\n\n &-enter/*, &-leave-to *//* .fade-leave-active below version 2.1.8 */ {\n filter: brightness(80%);\n }\n\n &-enter {\n & > div {\n transform: translateX(-40%);\n\n // RTL support\n transform: translateX(calc(-40% * var(--direction-scale-x, 1)));\n }\n }\n\n &-leave-to {\n & > div {\n transform: translateX(100%);\n\n // RTL support\n transform: translateX(calc(100% * var(--direction-scale-x, 1)));\n }\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.popup-old {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n //background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n contain: size layout style paint;\n\n &:after {\n background: rgba(black, 0.7);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n contain: size layout style paint;\n will-change: opacity;\n transition: opacity 0.3s;\n z-index: 0;\n }\n\n ~.popup:after {\n display: none;\n }\n\n // Improve performance\n\n & > div {\n max-width: 800px;\n flex-basis: 100%;\n background: white;\n background: var(--color-white, white);\n border-radius: 5px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n max-height: 100vh;\n max-height: calc(var(--vh, 1vh) * 100);\n height: calc(var(--vh, 1vh) * 100 - 80px);\n\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n contain: size layout style paint;\n will-change: transform, opacity;\n\n --saved-vh: var(--vh, 1vh);\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n transform-origin: 50% 0%;\n\n visibility: visible;\n transition: transform 0.3s, opacity 0.3s, visibility step-start 0.3s;\n z-index: 1;\n position: relative;\n\n > .scrollable-container {\n overflow: hidden;\n overflow-y: auto;\n // Pass updated vh to children\n --vh: calc(var(--saved-vh, 1vh) - 0.8px);\n height: 100%;\n will-change: scroll-position;\n }\n\n &:after {\n background: rgba(black, 0.4);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 0;\n contain: size layout style paint;\n will-change: opacity, visibility;\n visibility: hidden;\n z-index: 20000;\n transition: opacity 0.3s, visibility step-end 0.3s;\n }\n }\n\n &.push-down-full {\n & > div {\n transition: transform 0.3s, opacity 0.3s, visibility step-end 0.3s;\n visibility: hidden;\n opacity: 0;\n transform: scale(0.9, 0.9) translate3d(0, -15px, 0);\n\n &:after {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.3s, visibility step-start 0.3s;\n }\n }\n }\n\n &.push-down {\n & > div {\n transform: scale(0.95, 0.95) translate3d(0, -10px, 0);\n\n &:after {\n opacity: 1;\n visibility: visible;\n transition: opacity 0.3s, visibility step-start 0.3s;\n }\n }\n }\n\n &.fade-enter-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Decelerated easing\n transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s;\n }\n }\n\n &.fade-leave-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Accelerated easing\n transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.3s;\n }\n }\n\n &.fade-enter, &.fade-leave-to {\n &:after {\n opacity: 0;\n }\n\n & > div {\n transform: translate(0, 50vh);\n opacity: 0;\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.side-view {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n z-index: 10000;\n visibility: visible;\n opacity: 1;\n transition: background-color 0.3s, opacity 0.3s, visibility step-start 0.3s;\n\n ~.side-view {\n background-color: rgba(black, 0.4);\n }\n\n // Improve performance\n\n & > div {\n position: fixed;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n max-width: 800px;\n background: white;\n background: var(--color-white, white);\n border-radius: 0px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n height: 100%;\n\n overflow: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n\n // Push down\n transition: transform 0.3s, border-radius 0.3s;\n transform-origin: 0% 50%;\n }\n\n &.push-down-full {\n transition: background-color 0.3s, opacity 0.3s, visibility step-end 0.3s;\n visibility: hidden;\n opacity: 0;\n background-color: rgba(black, 0.6);\n\n & > div {\n transform: scale(0.9, 0.9) translate3d(-15px, 0, 0);\n border-radius: 5px;\n }\n }\n\n &.push-down {\n background-color: rgba(black, 0.6);\n\n & > div {\n transform: scale(0.95, 0.95) translate3d(-10px, 0, 0);\n border-radius: 5px;\n }\n }\n\n &.fade-enter-active,\n &.fade-leave-active,\n &[data-extended-enter=\"true\"] {\n position: fixed;\n\n & > div {\n transition: transform 0.3s;\n }\n }\n &.fade-enter, &.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {\n background-color: rgba(black, 0);\n\n & > div {\n transform: translate(100%, 0);\n }\n }\n\n &.fade-enter-active,\n &.fade-leave-active {\n z-index: 10000;\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sheet-old {\n // DO NOT ADD MAX HEIGHT HERE! Always add it to the children of the navigation controllers!\n // background: rgba(black, 0.7);\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n padding: 20px;\n contain: size layout style paint;\n\n .navigation-controller {\n transition: height 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);\n will-change: height;\n }\n\n &:after {\n background: rgba(black, 0.7);\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n opacity: 1;\n contain: size layout style paint;\n will-change: opacity;\n transition: opacity 0.3s;\n z-index: 0;\n }\n\n ~.sheet:after {\n display: none;\n }\n\n // Improve performance\n\n & > div {\n max-width: 800px;\n background: white;\n background: var(--color-white, white);\n border-radius: 5px;\n\n // Rounded corners need overflow hidden on scroll\n overflow: hidden;\n\n max-height: 100vh;\n max-height: calc(100vh - 80px);\n max-height: calc(var(--vh, 1vh) * 100 - 80px);\n\n overflow: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n overscroll-behavior-y: contain;\n\n box-sizing: border-box;\n\n --saved-vh: var(--vh, 1vh);\n\n // Fix chrome bug that scrollbars are not visible anymore\n transform: translate3d(0, 0, 0);\n transform-origin: 50% 50%;\n z-index: 1;\n contain: layout style paint;\n will-change: transform, opacity, scroll-position;\n transition: transform 0.3s, opacity 0.3s;\n\n > * {\n --vh: calc(var(--saved-vh, 1vh) - 0.8px);\n }\n }\n\n &.fade-enter-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Decelerated easing\n transition: transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.3s;\n }\n }\n\n &.fade-leave-active {\n &:after {\n transition: opacity 0.3s;\n }\n\n & > div {\n // Accelerated easing\n transition: transform 0.3s cubic-bezier(0.4, 0.0, 1, 1), opacity 0.3s;\n }\n }\n\n &.fade-enter, &.fade-leave-to {\n &:after {\n opacity: 0;\n }\n\n & > div {\n transform: translate(0, 30vh);\n opacity: 0;\n }\n }\n}\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.split-view-controller {\n //background: $color-white-shade;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n\n & > .master {\n flex-shrink: 0;\n flex-grow: 0;\n position: sticky;\n left: 0;\n top: 0;\n height: 100vh;\n height: calc(var(--vh, 1vh) * 100);\n\n overflow: hidden;\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n\n // do not start scrolling parents if we reached the edge of this view\n // we'll need to add a polyfill for Safari in JS to disable overscroll (currently not available)\n overscroll-behavior-y: contain;\n\n &:last-child {\n position: relative;\n overflow: visible;\n width: 100%;\n height: auto;\n }\n }\n\n & > .detail {\n /*background: $color-white;\n border-top-left-radius: $border-radius;\n border-bottom-left-radius: $border-radius;*/\n\n // Clip contents (during animations)\n // Sometimes not working on iOS (need to fix)\n // clip-path: inset(0px 0px);\n\n // @extend .style-side-view-shadow;\n }\n\n // Make sure our background color etc fills the whole view\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n\n &[data-has-detail=\"true\"] {\n display: grid;\n grid-template-columns: 320px 1fr;\n grid-template-columns: var(--split-view-width, 320px) 1fr;\n\n & > .master {\n min-width: 0;\n }\n\n & > .detail {\n min-width: 0;\n min-height: 100vh;\n min-height: calc(var(--vh, 1vh) * 100);\n }\n }\n}\n"],"names":[],"sourceRoot":""}
|
package/dist/main.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"vue";import*as e from"vue-class-component";var n={d:(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},o={};n.d(o,{T3:()=>ComponentWithProperties,mL:()=>a,qT:()=>y,EO:()=>i,_f:()=>J,J4:()=>S,mU:()=>L,GI:()=>b,yo:()=>W,i_:()=>F,Vl:()=>V,aA:()=>U});const i=new class HistoryManagerStatic{constructor(){this.states=[],this.counter=0,this.active=!1,this.animateHistoryPop=!0,this.isAdjustingState=!1,this.manualStateAction=!1,this.historyQueue=[],this.isQueueRunning=!1}addToQueue(t){this.historyQueue.push(t),this.isQueueRunning||this.runQueue()}runQueue(){this.isQueueRunning=!0;const t=this.historyQueue.shift();t?t().finally((()=>this.runQueue())):this.isQueueRunning=!1}go(t){this.addToQueue((async()=>new Promise((e=>{let n;this.manualStateAction=!0,history.go(t);let o=()=>{clearTimeout(n),e(),window.removeEventListener("popstate",o)};window.addEventListener("popstate",o),n=setTimeout((()=>{console.warn("Timeout while waiting for history.go"),o()}),200)}))))}setUrl(t){if(!this.active)return;ComponentWithProperties.debug&&this.counter;const e=this.states[this.states.length-1].index;this.addToQueue((async()=>{ComponentWithProperties.debug,history.replaceState({counter:e},"",t)})),this.states[this.states.length-1].url=t}pushState(t,e,n){if(!this.active)return;this.counter++,this.states.push({url:t,index:this.counter,adjustHistory:n,undoAction:e});const o=this.counter;n?this.addToQueue((async()=>{ComponentWithProperties.debug,history.pushState({counter:o},"",t)})):this.addToQueue((async()=>{ComponentWithProperties.debug,history.replaceState({counter:o},"",t)})),ComponentWithProperties.debug&&this.states[this.states.length-1]}returnToHistoryIndex(t){if(ComponentWithProperties.debug&&this.counter,t<this.counter){this.counter=t;const e=this.states.splice(this.counter+1).filter((t=>t.adjustHistory)).length;e>0&&(ComponentWithProperties.debug,this.go(-e)),!this.states[this.counter].adjustHistory&&this.states[this.counter].url&&(ComponentWithProperties.debug&&this.states[this.counter].url,this.setUrl(this.states[this.counter].url))}return this.counter}activate(){window.addEventListener("popstate",(t=>{var e;if(ComponentWithProperties.debug,this.isAdjustingState)return void console.warn("Duplicate popstate");if(this.manualStateAction)return void(this.manualStateAction=!1);this.isAdjustingState=!0;const n=null===(e=t.state)||void 0===e?void 0:e.counter;if(void 0!==n)if(n>this.counter){const t=n-this.counter;this.go(-t),ComponentWithProperties.debug}else{const t=this.counter-n==1&&this.animateHistoryPop;this.counter=n;const e=this.states.splice(this.counter+1);for(const n of e.reverse())n.undoAction&&(ComponentWithProperties.debug,n.undoAction(t))}this.isAdjustingState=!1})),this.active=!0,history.replaceState({counter:this.counter},""),this.states.push({index:this.counter,adjustHistory:!1,url:"/"})}};class ComponentWithProperties{constructor(t,e={}){this.key=null,this.type=null,this.hide=!1,this.vnode=null,this.keepAlive=!1,this.isKeptAlive=!1,this.isMounted=!1,this.modalDisplayStyle="cover",this.animated=!0,this.historyIndex=null,this.isContainerView=!1,this.component=t,this.properties=e,this.key=ComponentWithProperties.keyCounter++}clone(){return new ComponentWithProperties(this.component,this.properties)}beforeMount(){ComponentWithProperties.debug&&this.component.name,this.vnode&&(this.isKeptAlive?(this.isKeptAlive=!1,ComponentWithProperties.keepAliveCounter--,ComponentWithProperties.debug&&ComponentWithProperties.keepAliveCounter):(ComponentWithProperties.debug&&console.warn("About to mount a component that was not destroyed properly "+this.component.name),this.destroy(this.vnode))),this.isContainerView?null===this.historyIndex&&(this.historyIndex=i.counter):"overlay"!=this.modalDisplayStyle&&this.assignHistoryIndex()}getHistoryIndex(){if(this.component)return this.historyIndex}mounted(){ComponentWithProperties.debug&&this.component.name,this.isMounted=!0,ComponentWithProperties.ignoreActivate=this}onMountedChildComponent(t){this.isContainerView=!0,ComponentWithProperties.debug&&(this.component.name,t.component.name)}onActivatedChildComponent(t){this.isContainerView=!0,ComponentWithProperties.debug&&(this.component.name,t.component.name)}assignHistoryIndex(){null==this.historyIndex?(ComponentWithProperties.debug&&(this.component.name,i.counter),this.historyIndex=i.counter):this.historyIndex=i.returnToHistoryIndex(this.historyIndex)}activated(){if(ComponentWithProperties.debug&&this.component.name,ComponentWithProperties.ignoreActivate===this)return ComponentWithProperties.debug&&this.component.name,void(ComponentWithProperties.ignoreActivate=null);ComponentWithProperties.ignoreActivate=null,this.isContainerView||"overlay"!=this.modalDisplayStyle&&null!==this.historyIndex&&(this.historyIndex=i.returnToHistoryIndex(this.historyIndex))}componentInstance(){var t;return null===(t=this.vnode)||void 0===t?void 0:t.componentInstance}async shouldNavigateAway(){const t=this.componentInstance();if(t&&t.shouldNavigateAway){const e=t.shouldNavigateAway();if("boolean"==typeof e){if(!e)return!1}else if(e.then&&e.catch){if(!await e)return!1}}return!0}destroy(t){var e;if(this.isMounted=!1,this.vnode){if(t!==this.vnode)return void console.warn("Received destroy event from old/different vnode",this.vnode,t);if(this.keepAlive)return this.keepAlive=!1,void(this.isKeptAlive||(this.isKeptAlive=!0,ComponentWithProperties.keepAliveCounter++,ComponentWithProperties.debug&&this.component.name,ComponentWithProperties.debug&&ComponentWithProperties.keepAliveCounter));this.isKeptAlive&&(this.isKeptAlive=!1,ComponentWithProperties.keepAliveCounter--,ComponentWithProperties.debug&&this.component.name,ComponentWithProperties.debug&&ComponentWithProperties.keepAliveCounter),ComponentWithProperties.debug&&(this.component.name,this.vnode),null===(e=this.vnode.componentInstance)||void 0===e||e.$destroy(),this.vnode=null}}setDisplayStyle(t){return this.modalDisplayStyle=t,this}setAnimated(t){return this.animated=t,this}}ComponentWithProperties.keepAliveCounter=0,ComponentWithProperties.keyCounter=0,ComponentWithProperties.debug=!1,ComponentWithProperties.ignoreActivate=null;const s=(t=>{var e={};return n.d(e,t),e})({default:()=>t.default}),r=s.default.extend({props:{component:ComponentWithProperties},watch:{component(t){throw new Error("Changing component during life is not yet supported")}},created(){this.destroy=!0},beforeMount(){this.component.beforeMount()},activated(){this.component.activated();let t=this.$parent;for(;t;)t instanceof r&&t.component.onActivatedChildComponent(this.component),t=t.$parent},mounted(){this.component.mounted();let t=this.$parent;for(;t;)t instanceof r&&t.component.onMountedChildComponent(this.component),t=t.$parent},destroyed(){var t;this.component.destroy(null===(t=this.$children[0])||void 0===t?void 0:t.$vnode)},render(t){var e,n;if(this.component.vnode)return this.component.component.name,this.component.vnode.componentInstance.$parent=this,this.$children=[this.component.vnode.componentInstance],this.component.vnode;let o={};if(null===(n=null===(e=this.component.component)||void 0===e?void 0:e.options)||void 0===n?void 0:n.props)for(const t in this.component.properties)Object.prototype.hasOwnProperty.call(this.component.properties,t)&&(Object.prototype.hasOwnProperty.call(this.component.component.options.props,t)||(o[t]=this.component.properties[t]));else o=this.component.properties;return this.component.component.options.inheritAttrs=!1,this.component.vnode=t(this.component.component,{props:this.component.properties,attrs:o,key:"component-instance-"+ComponentWithProperties.keyCounter++}),this.component.component.name,this.component.vnode,this.component.vnode.data.keepAlive=!0,this.component.vnode}}),a=r;var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{ref:"scrollContainer"},[n("ComponentWithPropertiesInstance",{attrs:{component:t.root}})],1)])};l._withStripped=!0;function p(t,e,n,o){var i,s=arguments.length,r=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,o);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(r=(s<3?i(r):s>3?i(e,n,r):i(e,n))||r);return s>3&&r&&Object.defineProperty(e,n,r),r}const h=(t=>{var e={};return n.d(e,t),e})({createDecorator:()=>e.createDecorator,default:()=>e.default});var c="undefined"!=typeof Reflect&&void 0!==Reflect.getMetadata;function d(t){return void 0===t&&(t={}),function(e,n){!function(t,e,n){if(c&&!Array.isArray(t)&&"function"!=typeof t&&!t.hasOwnProperty("type")&&void 0===t.type){var o=Reflect.getMetadata("design:type",e,n);o!==Object&&(t.type=o)}}(t,e,n),(0,h.createDecorator)((function(e,n){(e.props||(e.props={}))[n]=t}))(e,n)}}function u(t){return(0,h.createDecorator)((function(e,n){e.computed=e.computed||{},e.computed[n]={cache:!1,get:function(){return this.$refs[t||n]}}}))}let m=class FramedComponent extends s.default{pop(t){this.$emit("pop",t)}push(t){this.$emit("push",t)}};p([d()],m.prototype,"root",void 0),p([u()],m.prototype,"scrollContainer",void 0),m=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],m);function v(t,e,n,o,i,s,r,a){var l,p="function"==typeof t?t.options:t;if(e&&(p.render=e,p.staticRenderFns=n,p._compiled=!0),o&&(p.functional=!0),s&&(p._scopeId="data-v-"+s),r?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},p._ssrRegister=l):i&&(l=a?function(){i.call(this,(p.functional?this.parent:this).$root.$options.shadowRoot)}:i),l)if(p.functional){p._injectStyles=l;var h=p.render;p.render=function(t,e){return l.call(e),h(t,e)}}else{var c=p.beforeCreate;p.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:p}}var f=v(m,l,[],!1,null,null,null);f.options.__file="src/FramedComponent.vue";const y=f.exports;var C=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("NavigationController",{ref:"navigationController",attrs:{"animation-type":"modal",root:t.root,initialComponents:t.initialComponents},on:{present:t.present}}),t._v(" "),n("StackComponent",{ref:"stackComponent",on:{present:t.present}})],1)};C._withStripped=!0;var g=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"navigation-controller"},[t.mainComponent?n("transition",{attrs:{css:!1},on:{"before-enter":t.beforeEnter,"before-leave":t.beforeLeave,enter:t.enter,leave:t.leave,"after-leave":t.afterLeave,"after-enter":t.afterEnter,"enter-cancelled":t.enterCancelled}},[n("FramedComponent",{key:t.mainComponent.key,ref:"child",attrs:{root:t.mainComponent},on:{push:t.push,show:t.push,pop:t.pop}})],1):t._e()],1)};g._withStripped=!0;let w=class NavigationController extends s.default{constructor(){super(...arguments),this.components=[],this.mainComponent=null,this.transitionName="none",this.savedScrollPositions=[],this.nextScrollPosition=0,this.previousScrollPosition=0,this.nextInternalScrollPosition=0,this.savedInternalScrollPositions=[]}beforeMount(){this.initialComponents&&this.initialComponents.length>0?(this.mainComponent=this.initialComponents[this.initialComponents.length-1],this.components=this.initialComponents.slice(0),this.initialComponents.splice(0,this.initialComponents.length)):(this.mainComponent=this.root,this.components=[this.root])}freezeSize(){const t=this.$el,e=t.offsetWidth,n=t.offsetHeight;t.style.width=e+"px",t.style.height=n+"px"}growSize(t,e){const n=this.$el;n.style.height=e+"px",n.style.width=t+"px"}unfreezeSize(){const t=this.$el;t.style.width="",t.style.height=""}getInternalScrollElement(t=null){const e=(null!=t?t:this.$el).querySelector("main");return e||null}getScrollElement(t=null){return document.documentElement}shouldAnimate(){return this.$el.offsetWidth<=1e3&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches}async push(t){var e,n,o,s,r,a;if(0==t.components.length)return void console.error("Missing component when pushing");null===(e=document.activeElement)||void 0===e||e.blur();const l=t.components,p=l[l.length-1],h=null===(n=t.destroy)||void 0===n||n,c=null!==(o=t.force)&&void 0!==o&&o,d=!!this.shouldAnimate()&&(void 0===t.animated?p.animated:t.animated);let u=null!==(s=t.replace)&&void 0!==s?s:0;if(u>this.components.length&&(u=this.components.length),ComponentWithProperties.debug&&p.component.name,u>0&&h&&!c)for(let t=this.components.length-1;t>=this.components.length-u;t--){const e=this.components[t];if(!await e.shouldNavigateAway())return}this.transitionName=d?"modal"==this.animationType?"modal-push":t.reverse?"pop":"push":"none";const m=this.getInternalScrollElement(),v=this.getScrollElement(),f=window;let y=v.clientHeight;v===document.documentElement&&f.visualViewport&&(y=f.visualViewport.height);let C=null==m?void 0:m.clientHeight;if(this.previousScrollPosition=0,this.savedScrollPositions.push(this.previousScrollPosition+y),this.savedInternalScrollPositions.push((null!==(r=null==m?void 0:m.scrollTop)&&void 0!==r?r:0)+(null!=C?C:0)),this.nextScrollPosition=0,this.nextInternalScrollPosition=0,d&&this.freezeSize(),u>0){const t=this.components.splice(this.components.length-u,u,...l);if(!h)for(const e of t)e.keepAlive=!0}else this.components.push(...l);if(this.mainComponent&&(this.mainComponent.keepAlive=!u),this.mainComponent=p,this.$emit("didPush"),0==u&&this)for(let e=0;e<l.length;e++)i.pushState(null==t?void 0:t.url,(t=>{this.pop({animated:d&&t})}),null===(a=null==t?void 0:t.adjustHistory)||void 0===a||a),e<l.length-1&&l[e].assignHistoryIndex()}async shouldNavigateAway(){for(let t=this.components.length-1;t>=0;t--){const e=this.components[t];if(!await e.shouldNavigateAway())return!1}return!0}popToRoot(t={}){return t.count=this.components.length-1,this.pop(t)}getPoppableParent(){let t=this,e=this.$parent;for(;e;){if(t.$listeners.pop)return t;t=e,e=e.$parent}return null}async pop(t={}){var e,n,o,i,s,r;null===(e=document.activeElement)||void 0===e||e.blur();const a=!!this.shouldAnimate()&&(null===(n=t.animated)||void 0===n||n),l=null===(o=t.destroy)||void 0===o||o,p=null!==(i=t.count)&&void 0!==i?i:1,h=null!==(s=t.force)&&void 0!==s&&s;if(this.components.length<=p){const e=this.getPoppableParent();return t.count=1,e?void e.$emit("pop",t):(console.error("Tried to pop an empty navigation controller, but couldn't find a parent to pop"),void this.$emit("pop",t))}if(0===p)return;if(l&&!h)for(let t=this.components.length-1;t>=this.components.length-p;t--){const e=this.components[t];if(!await e.shouldNavigateAway())return}this.previousScrollPosition=0,a?(this.transitionName="modal"==this.animationType?"modal-pop":"pop",this.freezeSize()):this.transitionName="none";const c=this.components.splice(this.components.length-p,p);if(!l)for(const t of c)t.keepAlive=!0;return this.nextScrollPosition=0,this.nextInternalScrollPosition=Math.max(0,null!==(r=this.savedInternalScrollPositions.pop())&&void 0!==r?r:0),this.mainComponent=this.components[this.components.length-1],this.$emit("didPop"),c}beforeEnter(t){"none"!=this.transitionName&&(t.className=this.transitionName+"-enter-active "+this.transitionName+"-enter")}beforeLeave(t){this.transitionName}beforeBeforeEnterAnimation(){if(this.mainComponent){const t=this.mainComponent.componentInstance();t&&t.beforeBeforeEnterAnimation&&t.beforeBeforeEnterAnimation()}}finishedEnterAnimation(){if(this.mainComponent){const t=this.mainComponent.componentInstance();t&&t.finishedEnterAnimation&&t.finishedEnterAnimation()}}enter(t,e){if("none"==this.transitionName){this.getScrollElement().scrollTop=this.nextScrollPosition;const n=this.getInternalScrollElement(t);return n&&(n.scrollTop=Math.max(0,this.nextInternalScrollPosition-n.clientHeight)),void e()}requestAnimationFrame((()=>{const n=t.firstElementChild.firstElementChild.offsetWidth,o=t.firstElementChild.offsetHeight,i=this.getInternalScrollElement(t);let s=this.nextInternalScrollPosition;if(i){s=Math.max(0,this.nextInternalScrollPosition-i.clientHeight);const t=this.getScrollOuterHeight(i),e=i.scrollHeight;s>e-t&&(s=Math.max(0,e-t))}const r=t.firstElementChild;let a=300;"pop"!==this.transitionName&&"modal-pop"!=this.transitionName||(a=250),"push"!=this.transitionName&&"pop"!=this.transitionName&&"modal-push"!=this.transitionName||(r.style.willChange="transform"),i&&(i.style.willChange="scroll-position"),this.growSize(n,o),requestAnimationFrame((()=>{i&&(i.scrollTop=s),t.className=this.transitionName+"-enter-active "+this.transitionName+"-enter-to",setTimeout((()=>{t.style.willChange="",r.style.willChange="",i&&(i.style.willChange=""),e()}),a+25)}))}))}getScrollOuterHeight(t){let e=t.clientHeight;if(t===document.documentElement){const t=window;t.visualViewport&&(e=t.visualViewport.height)}return e}leave(t,e){if("none"==this.transitionName)return void e();const n=t.firstElementChild;n.style.willChange="transform";let o=300;"pop"!==this.transitionName&&"modal-pop"!=this.transitionName||(o=250),requestAnimationFrame((()=>{const i=this.$el.offsetHeight+"px",s=this.$el.offsetWidth+"px";t.className=this.transitionName+"-leave-active "+this.transitionName+"-leave",t.style.top="0px",t.style.height=i,t.style.width=s,t.style.bottom="auto",t.style.overflow="hidden",n.style.overflow="hidden",n.style.height=i,n.style.width=s,requestAnimationFrame((()=>{t.className=this.transitionName+"-leave-active "+this.transitionName+"-leave-to",setTimeout((()=>{t.style.overflow="",t.style.top="",t.style.height="",t.style.bottom="",n.style.overflow="",n.style.willChange="",e()}),o+25)}))}))}afterLeave(t){"none"!=this.transitionName&&(t.className="")}afterEnter(t){"none"!=this.transitionName&&(this.unfreezeSize(),t.className="")}enterCancelled(t){this.unfreezeSize()}destroyed(){for(const t of this.components)t.isKeptAlive&&t.destroy(t.vnode);this.components=[],this.mainComponent=null}};p([d()],w.prototype,"root",void 0),p([d({default:null})],w.prototype,"initialComponents",void 0),p([d({default:"default"})],w.prototype,"animationType",void 0),p([u()],w.prototype,"child",void 0),w=p([(0,h.default)({components:{FramedComponent:y}})],w);var P=v(w,g,[],!1,null,null,null);P.options.__file="src/NavigationController.vue";const S=P.exports;var k,A=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{appear:t.shouldAppear,name:"fade",duration:300}},[n("div",{class:t.buildClass,on:{click:t.onClick}},[n("div",{ref:"mainContent"},[n("div",{staticClass:"scrollable-container"},[n("ComponentWithPropertiesInstance",{key:t.root.key,attrs:{component:t.root},on:{pop:t.dismiss}})],1)])])])};A._withStripped=!0;let x=k=class Popup extends L{get buildClass(){const t={"push-down":1==this.pushDown,"push-down-full":this.pushDown>1},e=Object.keys(t).filter((e=>!!t[e])).join(" ");return e+(e?" ":"")+(this.className?this.className:"popup")}get shouldAppear(){return this.root.animated}get pushDown(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components.filter((t=>{var e,n;return t.component===k&&(null!==(e=t.properties.className)&&void 0!==e?e:"popup")===(null!==(n=this.className)&&void 0!==n?n:"popup")})))&&void 0!==n?n:[];return o.length>0&&o[o.length-1].componentInstance()!==this?o.length>1&&o[o.length-2].componentInstance()===this?1:2:0}isFocused(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components)&&void 0!==n?n:[];return!(o.length>0&&o[o.length-1].componentInstance()!==this)&&super.isFocused()}onClick(t){const e=this.$refs.mainContent;e&&!e.contains(t.target)&&document.body.contains(t.target)&&(this.dismiss(),t.preventDefault())}activated(){document.addEventListener("keydown",this.onKey)}deactivated(){document.removeEventListener("keydown",this.onKey)}async dismiss(t){var e,n,o;if(!(null==t?void 0:t.force)){if(!await this.shouldNavigateAway())return!1}const s=null!==(o=null===(n=null===(e=this.modalStackComponent)||void 0===e?void 0:e.stackComponent)||void 0===n?void 0:n.components.filter((t=>"overlay"!==t.modalDisplayStyle)))&&void 0!==o?o:[];if(0===s.length||s[s.length-1].componentInstance()===this){const t=this.root.getHistoryIndex();null!=t&&i.returnToHistoryIndex(t-1)}this.pop(t)}onKey(t){if(t.defaultPrevented||t.repeat)return;if(!this.isFocused())return;const e=t.key||t.keyCode;"Escape"!==e&&"Esc"!==e&&27!==e||(this.dismiss(),t.preventDefault())}shouldNavigateAway(){return this.root.shouldNavigateAway()}};p([d({required:!0})],x.prototype,"root",void 0),p([d({required:!1,default:"popup"})],x.prototype,"className",void 0),x=k=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],x);var I=v(x,A,[],!1,null,null,null);I.options.__file="src/Popup.vue";const b=I.exports;var N=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{appear:t.shouldAppear,name:"fade",duration:300}},[n("div",{staticClass:"sheet",on:{click:t.onClick}},[n("div",{ref:"mainContent"},[n("ComponentWithPropertiesInstance",{key:t.root.key,attrs:{component:t.root},on:{pop:t.dismiss}})],1)])])};N._withStripped=!0;let $=class Sheet extends L{get shouldAppear(){return this.root.animated}onClick(t){const e=this.$refs.mainContent;e&&!e.contains(t.target)&&document.body.contains(t.target)&&(this.dismiss(),t.preventDefault())}activated(){document.addEventListener("keydown",this.onKey)}deactivated(){document.removeEventListener("keydown",this.onKey)}isFocused(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components)&&void 0!==n?n:[];return!(o.length>0&&o[o.length-1].componentInstance()!==this)&&super.isFocused()}async dismiss(t){var e,n,o;if(!(null==t?void 0:t.force)){if(!await this.shouldNavigateAway())return!1}const s=null!==(o=null===(n=null===(e=this.modalStackComponent)||void 0===e?void 0:e.stackComponent)||void 0===n?void 0:n.components.filter((t=>"overlay"!==t.modalDisplayStyle)))&&void 0!==o?o:[];if(0===s.length||s[s.length-1].componentInstance()===this){const t=this.root.getHistoryIndex();null!=t&&i.returnToHistoryIndex(t-1)}this.pop(t)}onKey(t){if(t.defaultPrevented||t.repeat)return;if(!this.isFocused())return;const e=t.key||t.keyCode;"Escape"!==e&&"Esc"!==e&&27!==e||(this.dismiss(),t.preventDefault())}shouldNavigateAway(){return this.root.shouldNavigateAway()}};p([d({required:!0})],$.prototype,"root",void 0),$=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],$);var E=v($,N,[],!1,null,null,null);E.options.__file="src/Sheet.vue";const W=E.exports;var _,D=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{appear:t.shouldAppear,name:"fade"}},[n("div",{staticClass:"side-view",class:{"push-down":1==t.pushDown,"push-down-full":t.pushDown>1},on:{mousedown:t.dismiss,touchdown:t.dismiss}},[n("div",{on:{mousedown:function(t){t.stopPropagation()},touchdown:function(t){t.stopPropagation()}}},[n("ComponentWithPropertiesInstance",{key:t.root.key,attrs:{component:t.root},on:{pop:t.dismiss}})],1)])])};D._withStripped=!0;const T=window.visualViewport;let H=_=class SideView extends L{get shouldAppear(){return this.root.animated}get pushDown(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components.filter((t=>t.component===_)))&&void 0!==n?n:[];return o.length>0&&o[o.length-1].componentInstance()!==this?o.length>1&&o[o.length-2].componentInstance()===this?1:2:0}isFocused(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components)&&void 0!==n?n:[];return!(o.length>0&&o[o.length-1].componentInstance()!==this)&&super.isFocused()}activated(){document.addEventListener("keydown",this.onKey),this.resize(),T&&T.addEventListener("resize",this.resize)}deactivated(){document.removeEventListener("keydown",this.onKey),T&&T.removeEventListener("resize",this.resize)}async dismiss(t){var e,n,o;if(!(null==t?void 0:t.force)){if(!await this.shouldNavigateAway())return!1}const s=null!==(o=null===(n=null===(e=this.modalStackComponent)||void 0===e?void 0:e.stackComponent)||void 0===n?void 0:n.components.filter((t=>"overlay"!==t.modalDisplayStyle)))&&void 0!==o?o:[];if(0===s.length||s[s.length-1].componentInstance()===this){const t=this.root.getHistoryIndex();null!=t&&i.returnToHistoryIndex(t-1)}this.pop(t)}resize(){}onKey(t){if(t.defaultPrevented||t.repeat)return;if(!this.isFocused())return;const e=t.key||t.keyCode;"Escape"!==e&&"Esc"!==e&&27!==e||(this.dismiss(),t.preventDefault())}shouldNavigateAway(){return this.root.shouldNavigateAway()}};p([d({required:!0})],H.prototype,"root",void 0),H=_=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],H);var z=v(H,D,[],!1,null,null,null);z.options.__file="src/SideView.vue";const F=z.exports;var M=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"split-view-controller",attrs:{"data-has-detail":t.detail?"true":"false"}},[n("div",{ref:"masterElement",staticClass:"master"},[n("NavigationController",{ref:"navigationController",attrs:{root:t.root},on:{showDetail:t.showDetail}})],1),t._v(" "),t.detail?n("div",{staticClass:"detail"},[n("FramedComponent",{key:t.detail.key,ref:"detailFrame",attrs:{root:t.detail}})],1):t._e()])};M._withStripped=!0;const O=(t,e)=>{let n,o;return function(){const i=this,s=arguments;o?(clearTimeout(n),n=setTimeout((function(){Date.now()-o>=e&&(t.apply(i,s),o=Date.now())}),e-(Date.now()-o))):(t.apply(i,s),o=Date.now())}};let j=class SplitViewController extends s.default{constructor(){super(...arguments),this.detail=null,this.detailKey=null}activated(){this.listener=O(this.onResize,100),window.addEventListener("resize",this.listener,{passive:!0}),this.onResize()}mounted(){this.detailWidth&&this.$el.style.setProperty("--split-view-width",this.detailWidth)}deactivated(){window.removeEventListener("resize",this.listener,{passive:!0})}beforeDestroy(){window.removeEventListener("resize",this.listener,{passive:!0})}onResize(){this.shouldCollapse()?this.detail&&this.collapse():this.lastIsDetail&&!this.detail&&this.expand()}get lastIsDetail(){var t,e;return null!=this.detailKey&&(null===(e=null===(t=this.$refs.navigationController)||void 0===t?void 0:t.mainComponent)||void 0===e?void 0:e.key)==this.detailKey}getScrollElement(t=null){t||(t=this.$el);const e=window.getComputedStyle(t);return"scroll"==e.overflowY||"scroll"==e.overflow||"auto"==e.overflow||"auto"==e.overflowY?t:t.parentElement?this.getScrollElement(t.parentElement):document.documentElement}async shouldNavigateAway(){if(this.detail){if(!await this.detail.shouldNavigateAway())return!1}return!this.navigationController||await this.navigationController.shouldNavigateAway()}async showDetail(t){const e=t.components[t.components.length-1];if(this.detailKey=e.key,this.shouldCollapse()){if(this.lastIsDetail||this.detail)return console.error("Pusing a detail when a detail is already presented is not allowed"),!1;this.navigationController.push(t)}else{if(this.detail){if(!await this.detail.shouldNavigateAway())return!1}this.getScrollElement().scrollTop=0,this.detail=e}return!0}shouldCollapse(){return this.$el.offsetWidth<850}collapse(){if(!this.navigationController)return void console.error("Cannot collapse without navigation controller");if(this.lastIsDetail)return void console.error("Cannot collapse when the detail is already collaped");if(!this.detail)return void console.error("Cannot collapse without detail");this.detail.keepAlive=!0;const t=this.detail;this.detail=null,this.navigationController.push({components:[t],animated:!1})}async expand(){if(!this.navigationController)return void console.error("Cannot expand without navigation controller");if(this.detail)return void console.error("Cannot expand when detail is already visible");if(!this.lastIsDetail)return void console.error("Cannot expand when there is no detail");const t=await this.navigationController.pop({animated:!1,destroy:!1});t&&0!=t.length&&this.$nextTick((()=>{this.detail=t[0]}))}};p([d()],j.prototype,"root",void 0),p([d()],j.prototype,"detailWidth",void 0),p([u()],j.prototype,"navigationController",void 0),p([u()],j.prototype,"masterElement",void 0),j=p([(0,h.default)({components:{NavigationController:S,FramedComponent:y}})],j);var K=v(j,M,[],!1,null,null,null);K.options.__file="src/SplitViewController.vue";const V=K.exports;let L=class NavigationMixin extends s.default{constructor(){super(...arguments),this.canPop=!1,this.canDismiss=!1}emitParents(t,e){let n=this.$parent;for(;n;){if(n.$listeners[t])return void n.$emit(t,e);n=n.$parent}console.warn("No handlers found for event "+t)}show(t){t.components?this.emitParents("show",t):this.emitParents("show",{components:[t]})}present(t){t.components?this.emitParents("present",t):this.emitParents("present",{components:[t]})}showDetail(t){t.components?this.emitParents("showDetail",t):this.emitParents("showDetail",{components:[t]})}pop(t={}){const e=this.getPoppableParent();e?e.$listeners.pop?e.$emit("pop",t):console.error("Couldn't pop. Failed"):console.warn("No navigation controller to pop")}dismiss(t={}){const e=this.modalOrPopup;if(e){if(e instanceof W||e instanceof b||e instanceof F)return void e.dismiss(t);e.pop(t)}else console.warn("Tried to dismiss without being displayed as a modal. Use pop instead"),this.pop(t)}get navigationController(){let t=this.$parent;for(;t;){if(t instanceof S)return t;t=t.$parent}return null}get modalOrPopup(){let t=this.$parent;for(;t;){if(t instanceof S&&"modal"==t.animationType)return t;if(t instanceof W)return t;if(t instanceof b)return t;if(t instanceof F)return t;t=t.$parent}return null}get modalNavigationController(){let t=this.$parent;for(;t;){if(t instanceof S&&"modal"==t.animationType)return t;t=t.$parent}return null}get splitViewController(){let t=this.$parent;for(;t;){if(t instanceof V)return t;t=t.$parent}return null}get modalStackComponent(){let t=this.$parent;for(;t;){if(t instanceof J)return t;t=t.$parent}return null}getPoppableParent(){let t=this,e=this.$parent;for(;e;){if(t.$listeners.pop)return t;t=e,e=e.$parent}return null}activated(){s.default.set(this,"canPop",this.calculateCanPop()),s.default.set(this,"canDismiss",this.calculateCanDismiss())}beforeMount(){s.default.set(this,"canPop",this.calculateCanPop()),s.default.set(this,"canDismiss",this.calculateCanDismiss())}getPoppableNavigationController(){let t=this.$parent;for(;t;){if(t instanceof S){if("modal"==t.animationType)return null;if(t.components.length>1)return t}t=t.$parent}return null}isFocused(){const t=this.modalOrPopup;return!(t instanceof b||t instanceof W||t instanceof F)||!!t.isFocused}calculateCanPop(){return null!=this.getPoppableNavigationController()}calculateCanDismiss(){const t=this.modalOrPopup;return null!==t&&!(t instanceof S&&t.components.length<=1)}};L=p([h.default],L);var R=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.components,(function(e,o){return n("ComponentWithPropertiesInstance",{key:e.key,ref:"children",refInFor:!0,attrs:{component:e},on:{pop:function(n){return t.removeAt(o,e.key)}}})})),1)};R._withStripped=!0;let Q=class StackComponent extends s.default{constructor(){super(...arguments),this.components=[]}show(t){this.components.push(t)}removeAt(t,e){if(!this.components[t])for(const[n,o]of this.components.entries())if(o.key===e){console.warn("Corrected index from "+t+" to "+n),t=n;break}void 0!==this.components[t]&&this.components[t].key===e?this.components.splice(t,1):console.warn("Expected component with key "+e+" at index"+t)}beforeDestroy(){this.components=[]}};Q=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],Q);var q=v(Q,R,[],!1,null,null,null);q.options.__file="src/StackComponent.vue";const U=q.exports;let B=class ModalStackComponent extends L{present(t){var e,n,o,s,r;const a=t.components[t.components.length-1];void 0!==t.animated&&(a.animated=t.animated);const l=null!==(n=null!==(e=t.modalDisplayStyle)&&void 0!==e?e:a.modalDisplayStyle)&&void 0!==n?n:"cover";if(a.setDisplayStyle(l),("popup"===l||"sheet"===l)&&this.$el.offsetWidth>800||"sheet"===l&&this.$el.offsetWidth>700){const e=new ComponentWithProperties(b,{root:a,className:null!==(o=t.modalClass)&&void 0!==o?o:l});return i.pushState(null==t?void 0:t.url,(t=>{var n;null===(n=e.componentInstance())||void 0===n||n.pop({animated:t})}),null===(s=null==t?void 0:t.adjustHistory)||void 0===s||s),void this.stackComponent.show(e)}if("side-view"===l&&this.$el.offsetWidth>800){const e=new ComponentWithProperties(F,{root:a,className:t.modalClass});return i.pushState(null==t?void 0:t.url,(t=>{var n;null===(n=e.componentInstance())||void 0===n||n.pop({animated:t})}),null===(r=null==t?void 0:t.adjustHistory)||void 0===r||r),void this.stackComponent.show(e)}"overlay"!==l?this.$refs.navigationController.push(t):this.stackComponent.show(a)}replace(t,e=!0){const n=this.$refs.navigationController;n.push({components:[t],animated:e,replace:n.components.length})}};p([d()],B.prototype,"root",void 0),p([d({default:null})],B.prototype,"initialComponents",void 0),p([u()],B.prototype,"stackComponent",void 0),B=p([(0,h.default)({components:{NavigationController:S,StackComponent:U}})],B);var G=v(B,C,[],!1,null,null,null);G.options.__file="src/ModalStackComponent.vue";const J=G.exports;var X=o.T3,Y=o.mL,Z=o.qT,tt=o.EO,et=o._f,nt=o.J4,ot=o.mU,it=o.GI,st=o.yo,rt=o.i_,at=o.Vl,lt=o.aA;export{X as ComponentWithProperties,Y as ComponentWithPropertiesInstance,Z as FramedComponent,tt as HistoryManager,et as ModalStackComponent,nt as NavigationController,ot as NavigationMixin,it as Popup,st as Sheet,rt as SideView,at as SplitViewController,lt as StackComponent};
|
|
1
|
+
import*as t from"vue";import*as e from"vue-class-component";var n={d:(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},o={};n.d(o,{T3:()=>ComponentWithProperties,mL:()=>a,qT:()=>y,EO:()=>i,_f:()=>Y,dA:()=>A,J4:()=>S,mU:()=>Q,GI:()=>N,yo:()=>D,i_:()=>O,Vl:()=>R,aA:()=>G});const i=new class HistoryManagerStatic{constructor(){this.states=[],this.counter=0,this.active=!1,this.animateHistoryPop=!0,this.isAdjustingState=!1,this.manualStateAction=!1,this.historyQueue=[],this.isQueueRunning=!1}addToQueue(t){this.historyQueue.push(t),this.isQueueRunning||this.runQueue()}runQueue(){this.isQueueRunning=!0;const t=this.historyQueue.shift();t?t().finally((()=>this.runQueue())):this.isQueueRunning=!1}go(t){this.addToQueue((async()=>new Promise((e=>{let n;this.manualStateAction=!0,history.go(t);let o=()=>{clearTimeout(n),e(),window.removeEventListener("popstate",o)};window.addEventListener("popstate",o),n=setTimeout((()=>{console.warn("Timeout while waiting for history.go"),o()}),200)}))))}setUrl(t){if(!this.active)return;ComponentWithProperties.debug&&this.counter;const e=this.states[this.states.length-1].index;this.addToQueue((async()=>{ComponentWithProperties.debug,history.replaceState({counter:e},"",t)})),this.states[this.states.length-1].url=t}pushState(t,e,n){if(!this.active)return;this.counter++,this.states.push({url:t,index:this.counter,adjustHistory:n,undoAction:e});const o=this.counter;n?this.addToQueue((async()=>{ComponentWithProperties.debug,history.pushState({counter:o},"",t)})):this.addToQueue((async()=>{ComponentWithProperties.debug,history.replaceState({counter:o},"",t)})),ComponentWithProperties.debug&&this.states[this.states.length-1]}returnToHistoryIndex(t){if(ComponentWithProperties.debug&&this.counter,t<this.counter){this.counter=t;const e=this.states.splice(this.counter+1).filter((t=>t.adjustHistory)).length;e>0&&(ComponentWithProperties.debug,this.go(-e)),!this.states[this.counter].adjustHistory&&this.states[this.counter].url&&(ComponentWithProperties.debug&&this.states[this.counter].url,this.setUrl(this.states[this.counter].url))}return this.counter}activate(){window.addEventListener("popstate",(t=>{var e;if(ComponentWithProperties.debug,this.isAdjustingState)return void console.warn("Duplicate popstate");if(this.manualStateAction)return void(this.manualStateAction=!1);this.isAdjustingState=!0;const n=null===(e=t.state)||void 0===e?void 0:e.counter;if(void 0!==n)if(n>this.counter){const t=n-this.counter;this.go(-t),ComponentWithProperties.debug}else{const t=this.counter-n==1&&this.animateHistoryPop;this.counter=n;const e=this.states.splice(this.counter+1);for(const n of e.reverse())n.undoAction&&(ComponentWithProperties.debug,n.undoAction(t))}this.isAdjustingState=!1})),this.active=!0,history.replaceState({counter:this.counter},""),this.states.push({index:this.counter,adjustHistory:!1,url:"/"})}};class ComponentWithProperties{constructor(t,e={}){this.key=null,this.type=null,this.hide=!1,this.vnode=null,this.keepAlive=!1,this.isKeptAlive=!1,this.isMounted=!1,this.modalDisplayStyle="cover",this.animated=!0,this.historyIndex=null,this.isContainerView=!1,this.component=t,this.properties=e,this.key=ComponentWithProperties.keyCounter++}clone(){return new ComponentWithProperties(this.component,this.properties)}beforeMount(){ComponentWithProperties.debug&&this.component.name,this.vnode&&(this.isKeptAlive?(this.isKeptAlive=!1,ComponentWithProperties.keepAliveCounter--,ComponentWithProperties.debug&&ComponentWithProperties.keepAliveCounter):(ComponentWithProperties.debug&&console.warn("About to mount a component that was not destroyed properly "+this.component.name),this.destroy(this.vnode))),this.isContainerView?null===this.historyIndex&&(this.historyIndex=i.counter):"overlay"!=this.modalDisplayStyle&&this.assignHistoryIndex()}getHistoryIndex(){if(this.component)return this.historyIndex}mounted(){ComponentWithProperties.debug&&this.component.name,this.isMounted=!0,ComponentWithProperties.ignoreActivate=this}onMountedChildComponent(t){this.isContainerView=!0,ComponentWithProperties.debug&&(this.component.name,t.component.name)}onActivatedChildComponent(t){this.isContainerView=!0,ComponentWithProperties.debug&&(this.component.name,t.component.name)}assignHistoryIndex(){null==this.historyIndex?(ComponentWithProperties.debug&&(this.component.name,i.counter),this.historyIndex=i.counter):this.historyIndex=i.returnToHistoryIndex(this.historyIndex)}activated(){if(ComponentWithProperties.debug&&this.component.name,ComponentWithProperties.ignoreActivate===this)return ComponentWithProperties.debug&&this.component.name,void(ComponentWithProperties.ignoreActivate=null);ComponentWithProperties.ignoreActivate=null,this.isContainerView||"overlay"!=this.modalDisplayStyle&&null!==this.historyIndex&&(this.historyIndex=i.returnToHistoryIndex(this.historyIndex))}componentInstance(){var t;return null===(t=this.vnode)||void 0===t?void 0:t.componentInstance}async shouldNavigateAway(){const t=this.componentInstance();if(t&&t.shouldNavigateAway){const e=t.shouldNavigateAway();if("boolean"==typeof e){if(!e)return!1}else if(e.then&&e.catch){if(!await e)return!1}}return!0}destroy(t){var e;if(this.isMounted=!1,this.vnode){if(t!==this.vnode)return void console.warn("Received destroy event from old/different vnode",this.vnode,t);if(this.keepAlive)return this.keepAlive=!1,void(this.isKeptAlive||(this.isKeptAlive=!0,ComponentWithProperties.keepAliveCounter++,ComponentWithProperties.debug&&this.component.name,ComponentWithProperties.debug&&ComponentWithProperties.keepAliveCounter));this.isKeptAlive&&(this.isKeptAlive=!1,ComponentWithProperties.keepAliveCounter--,ComponentWithProperties.debug&&this.component.name,ComponentWithProperties.debug&&ComponentWithProperties.keepAliveCounter),ComponentWithProperties.debug&&(this.component.name,this.vnode),null===(e=this.vnode.componentInstance)||void 0===e||e.$destroy(),this.vnode=null}}setDisplayStyle(t){return this.modalDisplayStyle=t,this}setAnimated(t){return this.animated=t,this}}ComponentWithProperties.keepAliveCounter=0,ComponentWithProperties.keyCounter=0,ComponentWithProperties.debug=!1,ComponentWithProperties.ignoreActivate=null;const s=(t=>{var e={};return n.d(e,t),e})({default:()=>t.default}),r=s.default.extend({props:{component:ComponentWithProperties},watch:{component(t){throw new Error("Changing component during life is not yet supported")}},created(){this.destroy=!0},beforeMount(){this.component.beforeMount()},activated(){this.component.activated();let t=this.$parent;for(;t;)t instanceof r&&t.component.onActivatedChildComponent(this.component),t=t.$parent},mounted(){this.component.mounted();let t=this.$parent;for(;t;)t instanceof r&&t.component.onMountedChildComponent(this.component),t=t.$parent},destroyed(){var t;this.component.destroy(null===(t=this.$children[0])||void 0===t?void 0:t.$vnode)},render(t){var e,n;if(this.component.vnode)return this.component.component.name,this.component.vnode.componentInstance.$parent=this,this.$children=[this.component.vnode.componentInstance],this.component.vnode;let o={};if(null===(n=null===(e=this.component.component)||void 0===e?void 0:e.options)||void 0===n?void 0:n.props)for(const t in this.component.properties)Object.prototype.hasOwnProperty.call(this.component.properties,t)&&(Object.prototype.hasOwnProperty.call(this.component.component.options.props,t)||(o[t]=this.component.properties[t]));else o=this.component.properties;return this.component.component.options.inheritAttrs=!1,this.component.vnode=t(this.component.component,{props:this.component.properties,attrs:o,key:"component-instance-"+ComponentWithProperties.keyCounter++}),this.component.component.name,this.component.vnode,this.component.vnode.data.keepAlive=!0,this.component.vnode}}),a=r;var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{ref:"scrollContainer"},[n("ComponentWithPropertiesInstance",{attrs:{component:t.root}})],1)])};l._withStripped=!0;function p(t,e,n,o){var i,s=arguments.length,r=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,o);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(r=(s<3?i(r):s>3?i(e,n,r):i(e,n))||r);return s>3&&r&&Object.defineProperty(e,n,r),r}const h=(t=>{var e={};return n.d(e,t),e})({createDecorator:()=>e.createDecorator,default:()=>e.default});var c="undefined"!=typeof Reflect&&void 0!==Reflect.getMetadata;function d(t){return void 0===t&&(t={}),function(e,n){!function(t,e,n){if(c&&!Array.isArray(t)&&"function"!=typeof t&&!t.hasOwnProperty("type")&&void 0===t.type){var o=Reflect.getMetadata("design:type",e,n);o!==Object&&(t.type=o)}}(t,e,n),(0,h.createDecorator)((function(e,n){(e.props||(e.props={}))[n]=t}))(e,n)}}function u(t){return(0,h.createDecorator)((function(e,n){e.computed=e.computed||{},e.computed[n]={cache:!1,get:function(){return this.$refs[t||n]}}}))}let m=class FramedComponent extends s.default{pop(t){this.$emit("pop",t)}push(t){this.$emit("push",t)}};p([d()],m.prototype,"root",void 0),p([u()],m.prototype,"scrollContainer",void 0),m=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],m);function v(t,e,n,o,i,s,r,a){var l,p="function"==typeof t?t.options:t;if(e&&(p.render=e,p.staticRenderFns=n,p._compiled=!0),o&&(p.functional=!0),s&&(p._scopeId="data-v-"+s),r?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},p._ssrRegister=l):i&&(l=a?function(){i.call(this,(p.functional?this.parent:this).$root.$options.shadowRoot)}:i),l)if(p.functional){p._injectStyles=l;var h=p.render;p.render=function(t,e){return l.call(e),h(t,e)}}else{var c=p.beforeCreate;p.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:p}}var f=v(m,l,[],!1,null,null,null);f.options.__file="src/FramedComponent.vue";const y=f.exports;var g=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("NavigationController",{ref:"navigationController",attrs:{"animation-type":"modal",root:t.root,initialComponents:t.initialComponents},on:{present:t.present}}),t._v(" "),n("StackComponent",{ref:"stackComponent",on:{present:t.present}})],1)};g._withStripped=!0;var C=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"navigation-controller"},[t.mainComponent?n("transition",{attrs:{css:!1},on:{"before-enter":t.beforeEnter,"before-leave":t.beforeLeave,enter:t.enter,leave:t.leave,"after-leave":t.afterLeave,"after-enter":t.afterEnter,"enter-cancelled":t.enterCancelled}},[n("FramedComponent",{key:t.mainComponent.key,ref:"child",attrs:{root:t.mainComponent},on:{push:t.push,show:t.push,pop:t.pop}})],1):t._e()],1)};C._withStripped=!0;let w=class NavigationController extends s.default{constructor(){super(...arguments),this.components=[],this.mainComponent=null,this.transitionName="none",this.savedScrollPositions=[],this.nextScrollPosition=0,this.previousScrollPosition=0,this.nextInternalScrollPosition=0,this.savedInternalScrollPositions=[]}beforeMount(){this.initialComponents&&this.initialComponents.length>0?(this.mainComponent=this.initialComponents[this.initialComponents.length-1],this.components=this.initialComponents.slice(0),this.initialComponents.splice(0,this.initialComponents.length)):(this.mainComponent=this.root,this.components=[this.root])}freezeSize(){const t=this.$el,e=t.offsetWidth,n=t.offsetHeight;t.style.width=e+"px",t.style.height=n+"px"}growSize(t,e){const n=this.$el;n.style.height=e+"px",n.style.width=t+"px"}unfreezeSize(){const t=this.$el;t.style.width="",t.style.height=""}getInternalScrollElement(t=null){const e=(null!=t?t:this.$el).querySelector("main");return e||null}getScrollElement(t=null){return document.documentElement}shouldAnimate(){return this.$el.offsetWidth<=1e3&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches}async push(t){var e,n,o,s,r,a;if(0==t.components.length)return void console.error("Missing component when pushing");null===(e=document.activeElement)||void 0===e||e.blur();const l=t.components,p=l[l.length-1],h=null===(n=t.destroy)||void 0===n||n,c=null!==(o=t.force)&&void 0!==o&&o,d=!!this.shouldAnimate()&&(void 0===t.animated?p.animated:t.animated);let u=null!==(s=t.replace)&&void 0!==s?s:0;if(u>this.components.length&&(u=this.components.length),ComponentWithProperties.debug&&p.component.name,u>0&&h&&!c)for(let t=this.components.length-1;t>=this.components.length-u;t--){const e=this.components[t];if(!await e.shouldNavigateAway())return}this.transitionName=d?"modal"==this.animationType?"modal-push":t.reverse?"pop":"push":"none";const m=this.getInternalScrollElement(),v=this.getScrollElement(),f=window;let y=v.clientHeight;v===document.documentElement&&f.visualViewport&&(y=f.visualViewport.height);let g=null==m?void 0:m.clientHeight;if(this.previousScrollPosition=0,this.savedScrollPositions.push(this.previousScrollPosition+y),this.savedInternalScrollPositions.push((null!==(r=null==m?void 0:m.scrollTop)&&void 0!==r?r:0)+(null!=g?g:0)),this.nextScrollPosition=0,this.nextInternalScrollPosition=0,d&&this.freezeSize(),u>0){const t=this.components.splice(this.components.length-u,u,...l);if(!h)for(const e of t)e.keepAlive=!0}else this.components.push(...l);if(this.mainComponent&&(this.mainComponent.keepAlive=!u),this.mainComponent=p,this.$emit("didPush"),0==u&&this)for(let e=0;e<l.length;e++)i.pushState(null==t?void 0:t.url,(t=>{this.pop({animated:d&&t})}),null===(a=null==t?void 0:t.adjustHistory)||void 0===a||a),e<l.length-1&&l[e].assignHistoryIndex()}async shouldNavigateAway(){for(let t=this.components.length-1;t>=0;t--){const e=this.components[t];if(!await e.shouldNavigateAway())return!1}return!0}popToRoot(t={}){return t.count=this.components.length-1,this.pop(t)}getPoppableParent(){let t=this,e=this.$parent;for(;e;){if(t.$listeners.pop)return t;t=e,e=e.$parent}return null}async pop(t={}){var e,n,o,i,s,r;null===(e=document.activeElement)||void 0===e||e.blur();const a=!!this.shouldAnimate()&&(null===(n=t.animated)||void 0===n||n),l=null===(o=t.destroy)||void 0===o||o,p=null!==(i=t.count)&&void 0!==i?i:1,h=null!==(s=t.force)&&void 0!==s&&s;if(this.components.length<=p){const e=this.getPoppableParent();return t.count=1,e?void e.$emit("pop",t):(console.error("Tried to pop an empty navigation controller, but couldn't find a parent to pop"),void this.$emit("pop",t))}if(0===p)return;if(l&&!h)for(let t=this.components.length-1;t>=this.components.length-p;t--){const e=this.components[t];if(!await e.shouldNavigateAway())return}this.previousScrollPosition=0,a?(this.transitionName="modal"==this.animationType?"modal-pop":"pop",this.freezeSize()):this.transitionName="none";const c=this.components.splice(this.components.length-p,p);if(!l)for(const t of c)t.keepAlive=!0;return this.nextScrollPosition=0,this.nextInternalScrollPosition=Math.max(0,null!==(r=this.savedInternalScrollPositions.pop())&&void 0!==r?r:0),this.mainComponent=this.components[this.components.length-1],this.$emit("didPop"),c}beforeEnter(t){"none"!=this.transitionName&&(t.className=this.transitionName+"-enter-active "+this.transitionName+"-enter")}beforeLeave(t){this.transitionName}beforeBeforeEnterAnimation(){if(this.mainComponent){const t=this.mainComponent.componentInstance();t&&t.beforeBeforeEnterAnimation&&t.beforeBeforeEnterAnimation()}}finishedEnterAnimation(){if(this.mainComponent){const t=this.mainComponent.componentInstance();t&&t.finishedEnterAnimation&&t.finishedEnterAnimation()}}enter(t,e){if("none"==this.transitionName){this.getScrollElement().scrollTop=this.nextScrollPosition;const n=this.getInternalScrollElement(t);return n&&(n.scrollTop=Math.max(0,this.nextInternalScrollPosition-n.clientHeight)),void e()}requestAnimationFrame((()=>{const n=t.firstElementChild.firstElementChild.offsetWidth,o=t.firstElementChild.offsetHeight,i=this.getInternalScrollElement(t);let s=this.nextInternalScrollPosition;if(i){s=Math.max(0,this.nextInternalScrollPosition-i.clientHeight);const t=this.getScrollOuterHeight(i),e=i.scrollHeight;s>e-t&&(s=Math.max(0,e-t))}const r=t.firstElementChild;let a=300;"pop"!==this.transitionName&&"modal-pop"!=this.transitionName||(a=250),"push"!=this.transitionName&&"pop"!=this.transitionName&&"modal-push"!=this.transitionName||(r.style.willChange="transform"),i&&(i.style.willChange="scroll-position"),this.growSize(n,o),requestAnimationFrame((()=>{i&&(i.scrollTop=s),t.className=this.transitionName+"-enter-active "+this.transitionName+"-enter-to",setTimeout((()=>{t.style.willChange="",r.style.willChange="",i&&(i.style.willChange=""),e()}),a+25)}))}))}getScrollOuterHeight(t){let e=t.clientHeight;if(t===document.documentElement){const t=window;t.visualViewport&&(e=t.visualViewport.height)}return e}leave(t,e){if("none"==this.transitionName)return void e();const n=t.firstElementChild;n.style.willChange="transform";let o=300;"pop"!==this.transitionName&&"modal-pop"!=this.transitionName||(o=250),requestAnimationFrame((()=>{const i=this.$el.offsetHeight+"px",s=this.$el.offsetWidth+"px";t.className=this.transitionName+"-leave-active "+this.transitionName+"-leave",t.style.top="0px",t.style.height=i,t.style.width=s,t.style.bottom="auto",t.style.overflow="hidden",n.style.overflow="hidden",n.style.height=i,n.style.width=s,requestAnimationFrame((()=>{t.className=this.transitionName+"-leave-active "+this.transitionName+"-leave-to",setTimeout((()=>{t.style.overflow="",t.style.top="",t.style.height="",t.style.bottom="",n.style.overflow="",n.style.willChange="",e()}),o+25)}))}))}afterLeave(t){"none"!=this.transitionName&&(t.className="")}afterEnter(t){"none"!=this.transitionName&&(this.unfreezeSize(),t.className="")}enterCancelled(t){this.unfreezeSize()}destroyed(){for(const t of this.components)t.isKeptAlive&&t.destroy(t.vnode);this.components=[],this.mainComponent=null}};p([d()],w.prototype,"root",void 0),p([d({default:null})],w.prototype,"initialComponents",void 0),p([d({default:"default"})],w.prototype,"animationType",void 0),p([u()],w.prototype,"child",void 0),w=p([(0,h.default)({components:{FramedComponent:y}})],w);var P=v(w,C,[],!1,null,null,null);P.options.__file="src/NavigationController.vue";const S=P.exports;var k=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{appear:t.shouldAppear,name:"fade",duration:300}},[n("div",{class:t.buildClass,on:{click:t.onClick}},[n("div",{ref:"mainContent"},[n("div",{staticClass:"scrollable-container"},[n("ComponentWithPropertiesInstance",{key:t.root.key,attrs:{component:t.root},on:{pop:t.dismiss}})],1)])])])};k._withStripped=!0;let A=class ModalStackComponentFinderMixin extends s.default{get modalStackComponent(){let t=this.$parent;for(;t;){if(t instanceof Y)return t;t=t.$parent}return null}};A=p([h.default],A);let x=class ModalMixin extends A{pop(t={}){const e=this.getPoppableParent();e?e.$listeners.pop?e.$emit("pop",t):console.error("Couldn't pop. Failed"):console.warn("No navigation controller to pop")}getPoppableParent(){let t=this,e=this.$parent;for(;e;){if(t.$listeners.pop)return t;t=e,e=e.$parent}return null}};var b;x=p([h.default],x);let $=b=class Popup extends x{get buildClass(){const t={"push-down":1==this.pushDown,"push-down-full":this.pushDown>1},e=Object.keys(t).filter((e=>!!t[e])).join(" ");return e+(e?" ":"")+(this.className?this.className:"popup")}get shouldAppear(){return this.root.animated}get pushDown(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components.filter((t=>{var e,n;return t.component===b&&(null!==(e=t.properties.className)&&void 0!==e?e:"popup")===(null!==(n=this.className)&&void 0!==n?n:"popup")})))&&void 0!==n?n:[];return o.length>0&&o[o.length-1].componentInstance()!==this?o.length>1&&o[o.length-2].componentInstance()===this?1:2:0}get isFocused(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components)&&void 0!==n?n:[];return!(o.length>0&&o[o.length-1].componentInstance()!==this)}onClick(t){const e=this.$refs.mainContent;e&&!e.contains(t.target)&&document.body.contains(t.target)&&(this.dismiss(),t.preventDefault())}activated(){document.addEventListener("keydown",this.onKey)}deactivated(){document.removeEventListener("keydown",this.onKey)}async dismiss(t){var e,n,o;if(!(null==t?void 0:t.force)){if(!await this.shouldNavigateAway())return!1}const s=null!==(o=null===(n=null===(e=this.modalStackComponent)||void 0===e?void 0:e.stackComponent)||void 0===n?void 0:n.components.filter((t=>"overlay"!==t.modalDisplayStyle)))&&void 0!==o?o:[];if(0===s.length||s[s.length-1].componentInstance()===this){const t=this.root.getHistoryIndex();null!=t&&i.returnToHistoryIndex(t-1)}this.pop(t)}onKey(t){if(t.defaultPrevented||t.repeat)return;if(!this.isFocused)return;const e=t.key||t.keyCode;"Escape"!==e&&"Esc"!==e&&27!==e||(this.dismiss(),t.preventDefault())}shouldNavigateAway(){return this.root.shouldNavigateAway()}};p([d({required:!0})],$.prototype,"root",void 0),p([d({required:!1,default:"popup"})],$.prototype,"className",void 0),$=b=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],$);var I=v($,k,[],!1,null,null,null);I.options.__file="src/Popup.vue";const N=I.exports;var E=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{appear:t.shouldAppear,name:"fade",duration:300}},[n("div",{staticClass:"sheet",on:{click:t.onClick}},[n("div",{ref:"mainContent"},[n("ComponentWithPropertiesInstance",{key:t.root.key,attrs:{component:t.root},on:{pop:t.dismiss}})],1)])])};E._withStripped=!0;let W=class Sheet extends x{get shouldAppear(){return this.root.animated}onClick(t){const e=this.$refs.mainContent;e&&!e.contains(t.target)&&document.body.contains(t.target)&&(this.dismiss(),t.preventDefault())}activated(){document.addEventListener("keydown",this.onKey)}deactivated(){document.removeEventListener("keydown",this.onKey)}get isFocused(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components)&&void 0!==n?n:[];return!(o.length>0&&o[o.length-1].componentInstance()!==this)}async dismiss(t){var e,n,o;if(!(null==t?void 0:t.force)){if(!await this.shouldNavigateAway())return!1}const s=null!==(o=null===(n=null===(e=this.modalStackComponent)||void 0===e?void 0:e.stackComponent)||void 0===n?void 0:n.components.filter((t=>"overlay"!==t.modalDisplayStyle)))&&void 0!==o?o:[];if(0===s.length||s[s.length-1].componentInstance()===this){const t=this.root.getHistoryIndex();null!=t&&i.returnToHistoryIndex(t-1)}this.pop(t)}onKey(t){if(t.defaultPrevented||t.repeat)return;if(!this.isFocused)return;const e=t.key||t.keyCode;"Escape"!==e&&"Esc"!==e&&27!==e||(this.dismiss(),t.preventDefault())}shouldNavigateAway(){return this.root.shouldNavigateAway()}};p([d({required:!0})],W.prototype,"root",void 0),W=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],W);var _=v(W,E,[],!1,null,null,null);_.options.__file="src/Sheet.vue";const D=_.exports;var T,H=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{appear:t.shouldAppear,name:"fade"}},[n("div",{staticClass:"side-view",class:{"push-down":1==t.pushDown,"push-down-full":t.pushDown>1},on:{mousedown:t.dismiss,touchdown:t.dismiss}},[n("div",{on:{mousedown:function(t){t.stopPropagation()},touchdown:function(t){t.stopPropagation()}}},[n("ComponentWithPropertiesInstance",{key:t.root.key,attrs:{component:t.root},on:{pop:t.dismiss}})],1)])])};H._withStripped=!0;const M=window.visualViewport;let z=T=class SideView extends x{get shouldAppear(){return this.root.animated}get pushDown(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components.filter((t=>t.component===T)))&&void 0!==n?n:[];return o.length>0&&o[o.length-1].componentInstance()!==this?o.length>1&&o[o.length-2].componentInstance()===this?1:2:0}get isFocused(){var t,e,n;const o=null!==(n=null===(e=null===(t=this.modalStackComponent)||void 0===t?void 0:t.stackComponent)||void 0===e?void 0:e.components)&&void 0!==n?n:[];return!(o.length>0&&o[o.length-1].componentInstance()!==this)}activated(){document.addEventListener("keydown",this.onKey),this.resize(),M&&M.addEventListener("resize",this.resize)}deactivated(){document.removeEventListener("keydown",this.onKey),M&&M.removeEventListener("resize",this.resize)}async dismiss(t){var e,n,o;if(!(null==t?void 0:t.force)){if(!await this.shouldNavigateAway())return!1}const s=null!==(o=null===(n=null===(e=this.modalStackComponent)||void 0===e?void 0:e.stackComponent)||void 0===n?void 0:n.components.filter((t=>"overlay"!==t.modalDisplayStyle)))&&void 0!==o?o:[];if(0===s.length||s[s.length-1].componentInstance()===this){const t=this.root.getHistoryIndex();null!=t&&i.returnToHistoryIndex(t-1)}this.pop(t)}resize(){}onKey(t){if(t.defaultPrevented||t.repeat)return;if(!this.isFocused)return;const e=t.key||t.keyCode;"Escape"!==e&&"Esc"!==e&&27!==e||(this.dismiss(),t.preventDefault())}shouldNavigateAway(){return this.root.shouldNavigateAway()}};p([d({required:!0})],z.prototype,"root",void 0),z=T=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],z);var F=v(z,H,[],!1,null,null,null);F.options.__file="src/SideView.vue";const O=F.exports;var j=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"split-view-controller",attrs:{"data-has-detail":t.detail?"true":"false"}},[n("div",{ref:"masterElement",staticClass:"master"},[n("NavigationController",{ref:"navigationController",attrs:{root:t.root},on:{showDetail:t.showDetail}})],1),t._v(" "),t.detail?n("div",{staticClass:"detail"},[n("FramedComponent",{key:t.detail.key,ref:"detailFrame",attrs:{root:t.detail}})],1):t._e()])};j._withStripped=!0;const K=(t,e)=>{let n,o;return function(){const i=this,s=arguments;o?(clearTimeout(n),n=setTimeout((function(){Date.now()-o>=e&&(t.apply(i,s),o=Date.now())}),e-(Date.now()-o))):(t.apply(i,s),o=Date.now())}};let V=class SplitViewController extends s.default{constructor(){super(...arguments),this.detail=null,this.detailKey=null}activated(){this.listener=K(this.onResize,100),window.addEventListener("resize",this.listener,{passive:!0}),this.onResize()}mounted(){this.detailWidth&&this.$el.style.setProperty("--split-view-width",this.detailWidth)}deactivated(){window.removeEventListener("resize",this.listener,{passive:!0})}beforeDestroy(){window.removeEventListener("resize",this.listener,{passive:!0})}onResize(){this.shouldCollapse()?this.detail&&this.collapse():this.lastIsDetail&&!this.detail&&this.expand()}get lastIsDetail(){var t,e;return null!=this.detailKey&&(null===(e=null===(t=this.$refs.navigationController)||void 0===t?void 0:t.mainComponent)||void 0===e?void 0:e.key)==this.detailKey}getScrollElement(t=null){t||(t=this.$el);const e=window.getComputedStyle(t);return"scroll"==e.overflowY||"scroll"==e.overflow||"auto"==e.overflow||"auto"==e.overflowY?t:t.parentElement?this.getScrollElement(t.parentElement):document.documentElement}async shouldNavigateAway(){if(this.detail){if(!await this.detail.shouldNavigateAway())return!1}return!this.navigationController||await this.navigationController.shouldNavigateAway()}async showDetail(t){const e=t.components[t.components.length-1];if(this.detailKey=e.key,this.shouldCollapse()){if(this.lastIsDetail||this.detail)return console.error("Pusing a detail when a detail is already presented is not allowed"),!1;this.navigationController.push(t)}else{if(this.detail){if(!await this.detail.shouldNavigateAway())return!1}this.getScrollElement().scrollTop=0,this.detail=e}return!0}shouldCollapse(){return this.$el.offsetWidth<850}collapse(){if(!this.navigationController)return void console.error("Cannot collapse without navigation controller");if(this.lastIsDetail)return void console.error("Cannot collapse when the detail is already collaped");if(!this.detail)return void console.error("Cannot collapse without detail");this.detail.keepAlive=!0;const t=this.detail;this.detail=null,this.navigationController.push({components:[t],animated:!1})}async expand(){if(!this.navigationController)return void console.error("Cannot expand without navigation controller");if(this.detail)return void console.error("Cannot expand when detail is already visible");if(!this.lastIsDetail)return void console.error("Cannot expand when there is no detail");const t=await this.navigationController.pop({animated:!1,destroy:!1});t&&0!=t.length&&this.$nextTick((()=>{this.detail=t[0]}))}};p([d()],V.prototype,"root",void 0),p([d()],V.prototype,"detailWidth",void 0),p([u()],V.prototype,"navigationController",void 0),p([u()],V.prototype,"masterElement",void 0),V=p([(0,h.default)({components:{NavigationController:S,FramedComponent:y}})],V);var L=v(V,j,[],!1,null,null,null);L.options.__file="src/SplitViewController.vue";const R=L.exports;let Q=class NavigationMixin extends s.default{constructor(){super(...arguments),this.canPop=!1,this.canDismiss=!1}emitParents(t,e){let n=this.$parent;for(;n;){if(n.$listeners[t])return void n.$emit(t,e);n=n.$parent}console.warn("No handlers found for event "+t)}show(t){t.components?this.emitParents("show",t):this.emitParents("show",{components:[t]})}present(t){t.components?this.emitParents("present",t):this.emitParents("present",{components:[t]})}showDetail(t){t.components?this.emitParents("showDetail",t):this.emitParents("showDetail",{components:[t]})}pop(t={}){const e=this.getPoppableParent();e?e.$listeners.pop?e.$emit("pop",t):console.error("Couldn't pop. Failed"):console.warn("No navigation controller to pop")}dismiss(t={}){const e=this.modalOrPopup;if(e){if(e instanceof D||e instanceof N||e instanceof O)return void e.dismiss(t);e.pop(t)}else console.warn("Tried to dismiss without being displayed as a modal. Use pop instead"),this.pop(t)}get navigationController(){let t=this.$parent;for(;t;){if(t instanceof S)return t;t=t.$parent}return null}get modalOrPopup(){let t=this.$parent;for(;t;){if(t instanceof S&&"modal"==t.animationType)return t;if(t instanceof D)return t;if(t instanceof N)return t;if(t instanceof O)return t;t=t.$parent}return null}get modalNavigationController(){let t=this.$parent;for(;t;){if(t instanceof S&&"modal"==t.animationType)return t;t=t.$parent}return null}get splitViewController(){let t=this.$parent;for(;t;){if(t instanceof R)return t;t=t.$parent}return null}getPoppableParent(){let t=this,e=this.$parent;for(;e;){if(t.$listeners.pop)return t;t=e,e=e.$parent}return null}activated(){s.default.set(this,"canPop",this.calculateCanPop()),s.default.set(this,"canDismiss",this.calculateCanDismiss())}beforeMount(){s.default.set(this,"canPop",this.calculateCanPop()),s.default.set(this,"canDismiss",this.calculateCanDismiss())}getPoppableNavigationController(){let t=this.$parent;for(;t;){if(t instanceof S){if("modal"==t.animationType)return null;if(t.components.length>1)return t}t=t.$parent}return null}isFocused(){const t=this.modalOrPopup;return!(t instanceof N||t instanceof D||t instanceof O)||!!t.isFocused}calculateCanPop(){return null!=this.getPoppableNavigationController()}calculateCanDismiss(){const t=this.modalOrPopup;return null!==t&&!(t instanceof S&&t.components.length<=1)}};Q=p([h.default],Q);var q=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.components,(function(e,o){return n("ComponentWithPropertiesInstance",{key:e.key,ref:"children",refInFor:!0,attrs:{component:e},on:{pop:function(n){return t.removeAt(o,e.key)}}})})),1)};q._withStripped=!0;let U=class StackComponent extends s.default{constructor(){super(...arguments),this.components=[]}show(t){this.components.push(t)}removeAt(t,e){if(!this.components[t])for(const[n,o]of this.components.entries())if(o.key===e){console.warn("Corrected index from "+t+" to "+n),t=n;break}void 0!==this.components[t]&&this.components[t].key===e?this.components.splice(t,1):console.warn("Expected component with key "+e+" at index"+t)}beforeDestroy(){this.components=[]}};U=p([(0,h.default)({components:{ComponentWithPropertiesInstance:a}})],U);var B=v(U,q,[],!1,null,null,null);B.options.__file="src/StackComponent.vue";const G=B.exports;let J=class ModalStackComponent extends Q{present(t){var e,n,o,s,r;const a=t.components[t.components.length-1];void 0!==t.animated&&(a.animated=t.animated);const l=null!==(n=null!==(e=t.modalDisplayStyle)&&void 0!==e?e:a.modalDisplayStyle)&&void 0!==n?n:"cover";if(a.setDisplayStyle(l),("popup"===l||"sheet"===l)&&this.$el.offsetWidth>800||"sheet"===l&&this.$el.offsetWidth>700){const e=new ComponentWithProperties(N,{root:a,className:null!==(o=t.modalClass)&&void 0!==o?o:l});return i.pushState(null==t?void 0:t.url,(t=>{var n;null===(n=e.componentInstance())||void 0===n||n.pop({animated:t})}),null===(s=null==t?void 0:t.adjustHistory)||void 0===s||s),void this.stackComponent.show(e)}if("side-view"===l&&this.$el.offsetWidth>800){const e=new ComponentWithProperties(O,{root:a,className:t.modalClass});return i.pushState(null==t?void 0:t.url,(t=>{var n;null===(n=e.componentInstance())||void 0===n||n.pop({animated:t})}),null===(r=null==t?void 0:t.adjustHistory)||void 0===r||r),void this.stackComponent.show(e)}"overlay"!==l?this.$refs.navigationController.push(t):this.stackComponent.show(a)}replace(t,e=!0){const n=this.$refs.navigationController;n.push({components:[t],animated:e,replace:n.components.length})}};p([d()],J.prototype,"root",void 0),p([d({default:null})],J.prototype,"initialComponents",void 0),p([u()],J.prototype,"stackComponent",void 0),J=p([(0,h.default)({components:{NavigationController:S,StackComponent:G}})],J);var X=v(J,g,[],!1,null,null,null);X.options.__file="src/ModalStackComponent.vue";const Y=X.exports;var Z=o.T3,tt=o.mL,et=o.qT,nt=o.EO,ot=o._f,it=o.dA,st=o.J4,rt=o.mU,at=o.GI,lt=o.yo,pt=o.i_,ht=o.Vl,ct=o.aA;export{Z as ComponentWithProperties,tt as ComponentWithPropertiesInstance,et as FramedComponent,nt as HistoryManager,ot as ModalStackComponent,it as ModalStackComponentFinderMixin,st as NavigationController,rt as NavigationMixin,at as Popup,lt as Sheet,pt as SideView,ht as SplitViewController,ct as StackComponent};
|
|
2
2
|
//# sourceMappingURL=main.js.map
|