inviton-powerduck 0.0.142 → 0.0.144

package/components/input/textbox-without-label.tsx

@@ -1,8 +1,7 @@
-import type { TextBoxTextType } from './textbox';
 import { Prop, toNative } from 'vue-facing-decorator';
-import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
-import { PortalUtils } from '../../common/utils/utils';
+import type { TextBoxTextType } from './textbox';
+import TextBox from './textbox';
 
 interface TextBoxWithoutLabelArgs {
 	value: string;
@@ -22,7 +21,6 @@ interface TextBoxWithoutLabelArgs {
 class TextBoxWithoutLabelComponent extends TsxComponent<TextBoxWithoutLabelArgs> implements TextBoxWithoutLabelArgs {
 	@Prop() value: string;
 	@Prop() placeholder!: string;
-	@Prop() cssClass!: string;
 	@Prop() disabled!: boolean;
 	@Prop() nameAttr?: string;
 	@Prop() textType: TextBoxTextType;
@@ -33,78 +31,25 @@ class TextBoxWithoutLabelComponent extends TsxComponent<TextBoxWithoutLabelArgs>
 	@Prop() updateMode?: 'input' | 'change';
 	@Prop() maxLength: number;
 
-	fieldValue: string = null;
-
-	mounted() {
-		this.fieldValue = this.value;
-		if (this.keyDown != null || this.enterPressed != null) {
-			this.$el.addEventListener('keydown', (e) => {
-				(this as any).keyDownHandler(e);
-			});
-		}
-	}
-
-	raiseChangeEvent(e) {
-		this.populateValidationDeclaration();
-
-		if (this.changed != null) {
-			const newValue = e.target.value;
-			this.fieldValue = newValue;
-			this.changed(newValue);
-		}
-	}
-
-	getTypeAttribute(): string {
-		return this.textType || 'text';
-	}
-
-	getAutoCompleteText(): string {
-		if (this.autoCompleteEnabled == false) {
-			if (PortalUtils.isBrowserChrome()) {
-				return 'new-password';
-			} else {
-				return 'off';
-			}
-		}
-
-		return null;
-	}
-
-	keyDownHandler(e: KeyboardEvent) {
-		if (this.keyDown != null) {
-			this.keyDown(e);
-		}
-
-		if (this.enterPressed != null && (e.keyCode == 13 || e.which == 13)) {
-			this.raiseChangeEvent(e);
-			this.enterPressed(e);
-			e.preventDefault();
-			e.stopPropagation();
-			e.stopImmediatePropagation();
-		}
-	}
-
 	render(h) {
 		return (
-			<input
-				type={this.getTypeAttribute()}
-				disabled={(this.disabled as any) != true ? null : 'disabled'}
-				value={this.fieldValue}
-				maxlength={this.maxLength}
-				name={this.nameAttr}
-				onChange={e => this.raiseChangeEvent(e)}
-				onInput={(e) => {
-					if (this.updateMode == 'input') {
-						this.raiseChangeEvent(e);
-					}
-				}}
-				class={`${PowerduckState.getFormControlCssClass()} ${this.cssClass}`}
+			<TextBox
+				wrap={false}
+				value={this.value}
 				placeholder={this.placeholder}
-				autocomplete={this.getAutoCompleteText()}
+				textType={this.textType}
+				disabled={this.disabled}
+				autoCompleteEnabled={this.autoCompleteEnabled}
+				changed={this.changed}
+				maxLength={this.maxLength}
+				updateMode={this.updateMode}
+				nameAttr={this.nameAttr}
+				keyDown={this.keyDown}
+				enterPressed={this.enterPressed}
 			/>
 		);
 	}
 }
 
 const TextBoxWithoutLabel = toNative(TextBoxWithoutLabelComponent);
-export default TextBoxWithoutLabel;
+export default TextBoxWithoutLabel;

package/components/svg/skilift-svg.tsx

@@ -1,6 +1,6 @@
-export const SKILIFT_SVG: string = `
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
-  <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
-    <path d="M3911 4254 l-1153 -354 -40 34 c-77 66 -211 76 -290 20 -57 -40 -107 -107 -114 -153 l-6 -38 -1127 -345 -1126 -345 -3 -103 c-2 -94 -1 -102 15 -98 10 3 529 161 1154 353 l1135 347 43 -28 42 -29 -5 -55 c-2 -30 -21 -279 -42 -552 l-38 -498 -360 0 c-200 0 -390 -5 -426 -11 -173 -27 -319 -153 -371 -320 -18 -56 -19 -99 -19 -594 0 -495 1 -538 19 -594 50 -161 183 -281 350 -317 98 -20 1924 -20 2022 0 167 36 300 156 350 317 18 56 19 99 19 588 0 444 -2 536 -16 586 -44 170 -197 307 -374 335 -36 5 -227 10 -426 10 l-360 0 -38 498 c-21 273 -40 522 -43 552 -5 53 -4 56 25 73 40 23 72 69 93 131 l17 49 153 48 c85 26 309 95 499 153 852 260 1595 488 1598 490 1 2 1 48 0 103 l-3 100 -1154 -353z m-1913 -2666 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z"/>
-  </g>
-</svg>`;
+export const SKILIFT_SVG: string = `
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
+    <path d="M3911 4254 l-1153 -354 -40 34 c-77 66 -211 76 -290 20 -57 -40 -107 -107 -114 -153 l-6 -38 -1127 -345 -1126 -345 -3 -103 c-2 -94 -1 -102 15 -98 10 3 529 161 1154 353 l1135 347 43 -28 42 -29 -5 -55 c-2 -30 -21 -279 -42 -552 l-38 -498 -360 0 c-200 0 -390 -5 -426 -11 -173 -27 -319 -153 -371 -320 -18 -56 -19 -99 -19 -594 0 -495 1 -538 19 -594 50 -161 183 -281 350 -317 98 -20 1924 -20 2022 0 167 36 300 156 350 317 18 56 19 99 19 588 0 444 -2 536 -16 586 -44 170 -197 307 -374 335 -36 5 -227 10 -426 10 l-360 0 -38 498 c-21 273 -40 522 -43 552 -5 53 -4 56 25 73 40 23 72 69 93 131 l17 49 153 48 c85 26 309 95 499 153 852 260 1595 488 1598 490 1 2 1 48 0 103 l-3 100 -1154 -353z m-1913 -2666 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z m820 0 l2 -358 -260 0 -260 0 0 353 c0 195 3 357 7 361 4 3 119 5 257 4 l251 -3 3 -357z"/>
+  </g>
+</svg>`;

package/components/swiper/swiper-gallery.tsx

@@ -13,6 +13,7 @@ interface SwiperGalleryArgs {
 	imageArr: string[];
 	skin: 'none' | 'mobile';
 	showThumbs?: boolean;
+	slidesPerView?: number | "auto";
 	cssClass?: string;
 }
 
@@ -21,9 +22,10 @@ class SwiperGalleryComponent extends TsxComponent<SwiperGalleryArgs> implements
 	@Prop() imageArr: string[];
 	@Prop() skin: 'none' | 'mobile';
 	@Prop() showThumbs?: boolean;
+	@Prop() slidesPerView?: number | "auto";
 	@Prop() cssClass?: string;
 
-	mounted() {
+	mounted () {
 		let swiper: any = null;
 		if (this.shouldShowThumbs()) {
 			swiper = new SwiperCore(this.$refs.galleryThumbs as any, {
@@ -34,7 +36,7 @@ class SwiperGalleryComponent extends TsxComponent<SwiperGalleryArgs> implements
 					Thumbs,
 				],
 				spaceBetween: 10,
-				slidesPerView: 4,
+				slidesPerView: this.getSlidesPerView(),
 				freeMode: true,
 				watchSlidesProgress: true,
 			});
@@ -48,6 +50,7 @@ class SwiperGalleryComponent extends TsxComponent<SwiperGalleryArgs> implements
 				Thumbs,
 			],
 			spaceBetween: 10,
+			slidesPerView: this.getSlidesPerView(),
 			thumbs: this.shouldShowThumbs() ? { swiper } : undefined,
 			navigation: {
 				nextEl: '.swiper-button-next',
@@ -56,15 +59,23 @@ class SwiperGalleryComponent extends TsxComponent<SwiperGalleryArgs> implements
 		});
 	}
 
-	shouldShowThumbs(): boolean {
+	shouldShowThumbs (): boolean {
 		return this.showThumbs != false;
 	}
 
-	getSkinCss(): string {
+	getSlidesPerView (): number | "auto" {
+		if (this.shouldShowThumbs()) {
+			return this.slidesPerView ?? 1;
+		} else {
+			return this.slidesPerView ?? 4;
+		}
+	}
+
+	getSkinCss (): string {
 		return `swiper-gallery-skin-${this.skin || 'none'}`;
 	}
 
-	render(h) {
+	render (h) {
 		return (
 
 			<div class={`swiper-gallery-root ${this.getSkinCss()}${this.cssClass ? ` ${this.cssClass}` : ''}`}>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.142",
+	"version": "0.0.144",
 	"files": [
 		"app/",
 		"common/",