inviton-powerduck 0.0.102 → 0.0.104

package/components/dropzone/gallery-dropzone.tsx

@@ -63,6 +63,12 @@ class DropzoneGalleryComponent extends TsxComponent<DropzoneGalleryArgs> impleme
         this.bindScript();
     }
 
+    beforeUnmount() {
+        try {
+            (this.$refs.galleryDropzone as any).dropzone.destroy();
+        } catch (error) { }
+    }
+
     updateSortOrder(itemArr?: DropzoneGalleryItem[]) {
         let applySort = false;
         if (itemArr == null) {

package/components/swiper/css/swiper.css

@@ -0,0 +1,4 @@
+.swiper {
+	width: 100%;
+	overflow: hidden;
+}

package/components/swiper/swiper-slide.tsx

@@ -4,9 +4,9 @@ interface SwiperSlideArgs { }
 
 @Component
 class SwiperSlideComponent extends TsxComponent<SwiperSlideArgs> implements SwiperSlideArgs {
-    render(h) {
-        return (<div class="swiper-slide">{this.$slots.default}</div>)
-    }
+	render(h) {
+		return (<div class="swiper-slide">{this.$slots?.default()}</div>)
+	}
 }
 
 const SwiperSlide = toNative(SwiperSlideComponent)

package/components/swiper/swiper.tsx

@@ -1,134 +1,202 @@
 import { toNative, Prop } from "vue-facing-decorator";
 import TsxComponent, { Component } from "../../app/vuetsx";
 import SwiperCore from 'swiper';
+import type { Vue } from 'vue-facing-decorator';
+import { Navigation, Pagination } from 'swiper/modules';
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
+import './css/swiper.css';
 
+type VueType = typeof Vue.prototype;
+interface IVue extends VueType { }
+SwiperCore.use([Navigation, Pagination]);
 
 interface SwiperArgs {
-    hasPagination?: boolean
-    direction?: 'horizontal' | 'vertical'
-    spaceBetween?: number
-    slideChanged?: (e?: SwiperSlideChangedArgs) => void,
-    zoomChanged?: (scale: number) => void
-    zoom?: boolean | SwiperZoomArgs
+	hasPagination?: boolean
+	direction?: 'horizontal' | 'vertical'
+	slidesPerView?: 'auto' | number
+	slidesPerGroup?: number
+	spaceBetween?: number
+	freeMode?: boolean
+	grabCursor?: boolean
+	speed?: number
+	autoplay?: boolean
+	preventClicks?: boolean
+	navigation?: { nextEl: () => HTMLElement | string | IVue, prevEl: () => HTMLElement | string | IVue }
+	slideChanged?: (e?: SwiperSlideChangedArgs) => void,
+	zoomChanged?: (scale: number) => void
+	zoom?: boolean | SwiperZoomArgs
 
 }
 
 export interface SwiperSlideChangedArgs {
-    activeIndex: number
-    previousIndex: number
-    swiper: any
+	activeIndex: number
+	previousIndex: number
+	swiper: any
 }
 
 export interface SwiperZoomArgs {
-    enabled: boolean
-    maxRatio?: number
-    minRatio?: number
+	enabled: boolean
+	maxRatio?: number
+	minRatio?: number
 }
 
 
 @Component
 class SwiperComponent extends TsxComponent<SwiperArgs> implements SwiperArgs {
-    @Prop() key: string;
-    @Prop() hasPagination?: boolean
-    @Prop() direction?: 'horizontal' | 'vertical'
-    @Prop() spaceBetween?: number
-    @Prop() zoom?: boolean | SwiperZoomArgs
-    @Prop() slideChanged?: (e?: SwiperSlideChangedArgs) => void
-    @Prop() zoomChanged?: (scale: number) => void
-    zoomed: boolean = false;
-
-    mounted() {
-        const rootElem = this.$el;
-        if (rootElem != null) {
-            let existingInstance = (rootElem as any).swiper;
-            if (existingInstance == null) {
-                let args: any = {
-                    zoom: this.getZoomArgs(),
-                    direction: this.direction || 'horizontal',
-                    spaceBetween: this.spaceBetween > 0 ? this.spaceBetween : 0,
-                    pagination: this.shouldRenderPagination() ? {
-                        el: this.$refs.swiperPagination,
-                        type: 'bullets',
-                    } : {
-                        el: null
-                    }
-                };
-
-                if (this.slideChanged != null) {
-                    args.on = {
-                        slideChange: (swiper: any) => {
-                            this.slideChanged({
-                                activeIndex: swiper.activeIndex,
-                                previousIndex: swiper.previousIndex,
-                                swiper: swiper
-                            });
-                        }
-                    }
-                }
-
-                if (this.zoomChanged != null) {
-                    args.on = {
-                        ...args.on,
-                        zoomChange: (swiperEvent: any, scale: number) => {
-                            this.zoomed = scale > 1 ? true : false;
-                            this.zoomChanged(scale)
-                        }
-                    }
-                }
-
-                new SwiperCore(rootElem as any, args);
-            }
-        }
-    }
-
-    getSwiperInstance() {
-        const rootElem = this.$el;
-        if (rootElem != null) {
-            return (rootElem as any).swiper;
-        }
-
-        return null;
-    }
-
-    getZoomArgs(): SwiperZoomArgs {
-        if (this.zoom == true) {
-            return {
-                enabled: true
-            }
-        }
-
-        return this.zoom as SwiperZoomArgs;
-    }
-
-    shouldRenderPagination(): boolean {
-        return this.hasPagination != false;
-    }
-
-
-
-    render(h) {
-        const zoomEnabled = (this.zoom == true || (this.zoom as SwiperZoomArgs)?.enabled == true);
-
-        return (
-
-            <div class="swiper">
-
-                {this.shouldRenderPagination() &&
-                    <div ref="swiperPagination" class={`swiper-pagination swiper-pagination-bullets swiper-pagination-horizontal ${this.zoomed ?
-                        "hide-swiper-pagination-bulets" :
-                        ""}`
-                    }></div>
-                }
-
-                <div class="swiper-wrapper">
-                    {this.$slots.default}
-                </div>
-            </div>
-        )
-    }
+	@Prop() key: string;
+	@Prop() hasPagination?: boolean
+	@Prop() direction?: 'horizontal' | 'vertical'
+	@Prop() slidesPerView?: 'auto' | number
+	@Prop() slidesPerGroup?: number
+	@Prop() spaceBetween?: number
+	@Prop() freeMode?: boolean
+	@Prop() grabCursor?: boolean
+	@Prop() speed: number
+	@Prop() autoplay: boolean
+	@Prop() preventClicks: boolean
+	@Prop() navigation?: { nextEl: () => HTMLElement | string | IVue, prevEl: () => HTMLElement | string | IVue }
+	@Prop() zoom?: boolean | SwiperZoomArgs
+	@Prop() slideChanged?: (e?: SwiperSlideChangedArgs) => void
+	@Prop() zoomChanged?: (scale: number) => void
+	zoomed: boolean = false;
+
+	mounted() {
+		const rootElem = this.$el;
+		if (rootElem != null) {
+			let existingInstance = (rootElem as any).swiper;
+			if (existingInstance == null) {
+				let args: any = {
+					zoom: this.getZoomArgs(),
+					direction: this.direction || 'horizontal',
+					spaceBetween: this.spaceBetween > 0 ? this.spaceBetween : 0,
+					pagination: this.shouldRenderPagination() ? {
+						el: this.$refs.swiperPagination,
+						type: 'bullets',
+					} : {
+						el: null
+					}
+				};
+
+				if (this.slidesPerView != null) {
+					args.slidesPerView = this.slidesPerView;
+				}
+
+				if (this.slidesPerGroup != null) {
+					args.slidesPerGroup = this.slidesPerGroup;
+				}
+
+				if (this.freeMode != null) {
+					args.freeMode = this.freeMode;
+				}
+
+				if (this.grabCursor != null) {
+					args.grabCursor = this.grabCursor;
+				}
+
+				if (this.speed != null) {
+					args.speed = this.speed;
+				}
+
+				if (this.autoplay != null) {
+					args.autoplay = this.autoplay;
+				}
+
+				if (this.preventClicks != null) {
+					args.preventClicks = this.preventClicks;
+				}
+
+				if (this.navigation != null) {
+					const getForProp = (prop) => {
+						if (prop == null) {
+							return null;
+						}
+
+						const propVal = prop();
+						if (propVal == null) {
+							return null;
+						}
+
+						return propVal.$el ?? propVal;
+					}
+
+					args.navigation = {
+						prevEl: getForProp(this.navigation.prevEl),
+						nextEl: getForProp(this.navigation.nextEl),
+					}
+				}
+
+				if (this.slideChanged != null) {
+					args.on = {
+						slideChange: (swiper: any) => {
+							this.slideChanged({
+								activeIndex: swiper.activeIndex,
+								previousIndex: swiper.previousIndex,
+								swiper: swiper
+							});
+						}
+					}
+				}
+
+				if (this.zoomChanged != null) {
+					args.on = {
+						...args.on,
+						zoomChange: (swiperEvent: any, scale: number) => {
+							this.zoomed = scale > 1 ? true : false;
+							this.zoomChanged(scale)
+						}
+					}
+				}
+
+				new SwiperCore(rootElem as any, args);
+			}
+		}
+	}
+
+	getSwiperInstance() {
+		const rootElem = this.$el;
+		if (rootElem != null) {
+			return (rootElem as any).swiper;
+		}
+
+		return null;
+	}
+
+	getZoomArgs(): SwiperZoomArgs {
+		if (this.zoom == true) {
+			return {
+				enabled: true
+			}
+		}
+
+		return this.zoom as SwiperZoomArgs;
+	}
+
+	shouldRenderPagination(): boolean {
+		return this.hasPagination != false;
+	}
+
+
+
+	render(h) {
+		const zoomEnabled = (this.zoom == true || (this.zoom as SwiperZoomArgs)?.enabled == true);
+
+		return (
+			<div class="swiper">
+				{this.shouldRenderPagination() &&
+					<div ref="swiperPagination" class={`swiper-pagination swiper-pagination-bullets swiper-pagination-horizontal ${this.zoomed ?
+						"hide-swiper-pagination-bulets" :
+						""}`
+					}></div>
+				}
+
+				<div class="swiper-wrapper">
+					{this.$slots?.default()}
+				</div>
+			</div>
+		)
+	}
 }
 
 const Swiper = toNative(SwiperComponent)

package/package.json

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