inviton-powerduck 0.0.21 → 0.0.23

package/common/base-component.tsx

@@ -216,8 +216,8 @@ export abstract class PowerduckViewModelBase extends Vue {
     }
 
     unwrapRootElement(): HTMLElement {
-        if ((this.$el as any).$childSlots != null) {
-            return ((this.$el as any).$childSlots[0]?.el || this.$el) as any;
+        if ((this.$el as any).$getChildSlots != null) {
+            return (((this.$el as any).$getChildSlots() || [])[0]?.el || this.$el) as any;
         }
 
         return this.$el as any;

package/components/lightbox/index.tsx

@@ -16,13 +16,17 @@ interface LightboxArgs {
     scrollDisabled?: boolean;
     moveDisabled?: boolean;
     rotateDisabled?: boolean;
-	customPortalContainer?: string;
+    customPortalContainer?: string;
 }
 
 interface LightboxShowArgs {
     index?: number;
 }
 
+export class LightboxConfig {
+    static defaultPortalTarget = 'body'
+}
+
 @Component({
     components: {
         'teleport': Teleport,
@@ -34,7 +38,7 @@ class LightboxComponent extends TsxComponent<LightboxArgs> implements LightboxAr
     @Prop() scrollDisabled: boolean;
     @Prop({ default: true }) moveDisabled: boolean;
     @Prop({ default: true }) rotateDisabled: boolean;
-	@Prop() customPortalContainer: string;
+    @Prop() customPortalContainer: string;
     visible: boolean = false;
     index: number = 0
     everShown: boolean = false;
@@ -69,13 +73,13 @@ class LightboxComponent extends TsxComponent<LightboxArgs> implements LightboxAr
         return this.$refs.lightboxInstance;
     }
 
-	get portalContainer(): string {
-		return this.customPortalContainer || "lightbox-container";
-	}
+    get portalContainer(): string {
+        return this.customPortalContainer || LightboxConfig.defaultPortalTarget;
+    }
 
     render(h) {
         return (
-            <teleport to={"#" + this.portalContainer}>
+            <teleport to={this.portalContainer}>
                 {this.everShown &&
                     <vue-easy-lightbox
                         ref={'lightboxInstance'}

package/components/modal/modal.tsx

@@ -21,7 +21,7 @@ interface ModalArgs {
     mobileFullscreen?: boolean;
     modalLazyMode?: boolean;
     preventHistoryEntry?: boolean;
-    alternativePortal?: boolean;
+    portalTarget?: string;
 }
 
 export enum ModalSize {
@@ -48,6 +48,10 @@ declare global {
     }
 }
 
+export class ModalConfig {
+    static defaultPortalTarget = 'body'
+}
+
 @Component
 class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
     @Prop() title!: string;
@@ -122,7 +126,7 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
         }
 
         return (
-            <Teleport to={"#" + (this.alternativePortal ? "bs-modal-container-alt" : "bs-modal-container")}>
+            <Teleport to={ModalConfig.defaultPortalTarget}>
                 <div
                     id={this.getFullId()}
                     key={this.getFullId()}

package/components/teleport/teleport.tsx

@@ -14,17 +14,25 @@ interface TeleportArgs {
 })
 class TeleportComponent extends TsxComponent<TeleportArgs> implements TeleportArgs {
     @Prop() to!: string;
+    _currentSlots: any = null;
 
 
-    render() {
-        const childSlots = this.$slots.default?.();
-        this.$nextTick(() => {
-            this.$el.$childSlots = childSlots;
-        })
+    beforeUnmount() {
+        this.$el.$getChildSlots = null;
+        this._currentSlots = null;
+    }
 
+    render() {
+        this._currentSlots = this.$slots.default?.();
+        if (this.$el == null || this.$el.$getChildSlots == null) {
+            this.$nextTick(() => {
+                this.$el.$getChildSlots = () => this._currentSlots;
+            })
+        }
+        
         return (
             <teleport to={this.to}>
-                {childSlots}
+                {this._currentSlots}
             </teleport>
         );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inviton-powerduck",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "scripts": {
     "build": " vite build && vue-tsc  --declaration --emitDeclarationOnly",