inviton-powerduck 0.0.94 → 0.0.96

package/app/powerduck-system-resources.ts

@@ -1,79 +1,86 @@
 export interface IPowerduckSystemResources {
-    requestTimeout: string
-    yes: string
-    no: string;
-    all: string
-    add: string
-    error: string
-    errorFetchingData: string
-    allTogether: string;
-    edit: string
-    remove: string
-    warning: string
-    cancel: string
-    negationBase: string
-    continue: string
-    back: string
-    submit: string
-    close: string
-    save: string
-    search: string
-    searchedValue: string
-    image: string
-    noResultsFound: string
-    colVisLabel: string
-    deletePromptSingular: string
-    dtMassOperationWarningText: string
-    dtLayoutMobile: string
-    dtLayoutTable: string
-    dtLayoutCompact: string
-    recordsDtLabel: string
-    dtCountText: string
-    dtCountFilteredOutOf: string
-    dtNoMobileFilter: string
-    dtOnlyExclusive: string
-    itemsOutOfArray: string
-    fileDownloadTitle: string
-    imageCrop: string
-    uploadImage: string
-    copyToClipboard: string
-    copyToClipboardSuccess: string
-    loginExpired: string
-    gpsLabel: string
-    gpsSubtitle: string
-    gpsLatitudeCaption: string
-    gpsLongitudeCaption: string
-    currencyCode: string
-    photosErrorMessage: string
-    photosInitialMessage: string
-    photosInvalidFileMessage: string
-    quickEdit: string
-    quickEditItemsCount: string
-    quickEditErrorNamed: string
+	requestTimeout: string
+	yes: string
+	no: string;
+	all: string
+	add: string
+	error: string
+	errorFetchingData: string
+	allTogether: string;
+	edit: string
+	remove: string
+	warning: string
+	cancel: string
+	negationBase: string
+	continue: string
+	back: string
+	submit: string
+	close: string
+	save: string
+	search: string
+	searchedValue: string
+	image: string
+	noResultsFound: string
+	colVisLabel: string
+	deletePromptSingular: string
+	dtMassOperationWarningText: string
+	dtLayoutMobile: string
+	dtLayoutTable: string
+	dtLayoutCompact: string
+	recordsDtLabel: string
+	dtCountText: string
+	dtCountFilteredOutOf: string
+	dtNoMobileFilter: string
+	dtOnlyExclusive: string
+	itemsOutOfArray: string
+	fileDownloadTitle: string
+	imageCrop: string
+	uploadImage: string
+	copyToClipboard: string
+	copyToClipboardSuccess: string
+	loginExpired: string
+	gpsLabel: string
+	gpsSubtitle: string
+	gpsLatitudeCaption: string
+	gpsLongitudeCaption: string
+	currencyCode: string
+	photosErrorMessage: string
+	photosInitialMessage: string
+	photosInvalidFileMessage: string
+	quickEdit: string
+	quickEditItemsCount: string
+	quickEditErrorNamed: string
 
-    languageSK: string;
-    languageEN: string;
-    languageCS: string;
-    languageDE: string;
-    languagePL: string;
-    languageIT: string;
-    languageHU: string;
+	languageSK: string;
+	languageEN: string;
+	languageCS: string;
+	languageDE: string;
+	languagePL: string;
+	languageIT: string;
+	languageHU: string;
 
-    errorsOnForm: string;
-    validationErrorRequired: string;
+	errorsOnForm: string;
+	validationErrorRequired: string;
 	validationErrorNumeric: string;
 	validationErrorInteger: string;
 	validationErrorDecimal: string;
-    validationErrorMinValue: string;
-    validationErrorMaxValue: string;
-    validationErrorMinLength: string;
-    validationErrorMaxLength: string;
-    validationErrorBetween: string;
-    validationErrorEmail: string;
-    validationErrorAlpha: string;
-    validationErrorAlphaNum: string;
+	validationErrorMinValue: string;
+	validationErrorMaxValue: string;
+	validationErrorMinLength: string;
+	validationErrorMaxLength: string;
+	validationErrorBetween: string;
+	validationErrorEmail: string;
+	validationErrorAlpha: string;
+	validationErrorAlphaNum: string;
 	validationErrorUrl: string;
 	validationErrorIpAddress: string;
 	validationErrorMacAddress: string;
-    validationErrorGeneric: string;
+	validationErrorGeneric: string;
+
+	signInGoogle: string;
+	signInFacebook: string;
+	signInApple: string;
+	signInX: string;
+	signInFigma: string;
+	signInDribble: string;
 }

package/components/button/button-layout.ts

@@ -9,9 +9,10 @@
 }
 
 export enum ButtonSize {
-    Regular = "",
-    Small = "btn-sm",
-    Large = "btn-lg",
+	Regular = "",
+	Small = "btn-sm",
+	Large = "btn-lg",
+	ExtraLarge = "btn-xl",
 }
 
 export enum ButtonIframeHandling {
@@ -36,3 +37,19 @@ export interface _ButtonArgsBase {
     tooltip?: string;
     pulsate?: boolean;
 }
+
+export enum ButtonSocialType {
+	Google = "google",
+	Facebook = "facebook",
+	Apple = "apple",
+	X = "x",
+	Figma = "figma",
+	Dribble = "dribble",
+}
+
+export enum ButtonMobileAppStoreType {
+	GooglePlay = "google-play",
+	AppStore = "app-store",
+	GalaxyStore = "galaxy-store",
+	HuaweiAppGallery = "huawei-app-gallery",
+}

package/components/button/social-button.tsx

@@ -0,0 +1,91 @@
+import { toNative, Prop } from "vue-facing-decorator";
+import TsxComponent, { Component } from "../../app/vuetsx";
+import { _ButtonArgsBase, ButtonLayout, ButtonSize, ButtonSocialType } from "./button-layout";
+import Button from "./button";
+import PowerduckState from "../../app/powerduck-state";
+
+interface SocialButtonArgs extends Omit<_ButtonArgsBase, 'size' | 'layout' | 'icon' | 'text'> {
+	type: ButtonSocialType;
+	clicked: (e: any) => void;
+}
+
+@Component
+class SocialButtonComponent extends TsxComponent<SocialButtonArgs> implements SocialButtonArgs {
+	@Prop() cssClass!: string;
+	@Prop() tooltip!: string;
+	@Prop() round!: boolean;
+	@Prop() outlined!: boolean;
+	@Prop() iconButton!: boolean;
+	@Prop() iconOnRight!: boolean;
+	@Prop() disabled!: boolean;
+	@Prop() pulsate!: boolean;
+	@Prop() type!: ButtonSocialType;
+	@Prop() clicked: (e: any) => void;
+
+	getSocialIcon (): string {
+		switch (this.type) {
+			case ButtonSocialType.Google:
+				return "fab fa-google";
+			case ButtonSocialType.Facebook:
+				return "fab fa-facebook";
+			case ButtonSocialType.Apple:
+				return "fab fa-apple";
+			case ButtonSocialType.X:
+				return "fab fa-twitter";
+			case ButtonSocialType.Figma:
+				return "fab fa-figma";
+			case ButtonSocialType.Dribble:
+				return "fas fa-basketball-ball";
+			default:
+				return "";
+		}
+	}
+
+	getText (): string {
+		switch (this.type) {
+			case ButtonSocialType.Google:
+				return PowerduckState.getResourceValue("signInGoogle");
+			case ButtonSocialType.Facebook:
+				return PowerduckState.getResourceValue("signInFacebook");
+			case ButtonSocialType.Apple:
+				return PowerduckState.getResourceValue("signInApple");
+			case ButtonSocialType.X:
+				return PowerduckState.getResourceValue("signInX");
+			case ButtonSocialType.Figma:
+				return PowerduckState.getResourceValue("signInFigma");
+			case ButtonSocialType.Dribble:
+				return PowerduckState.getResourceValue("signInDribble");
+			default:
+				return "";
+		}
+	}
+
+	getCssClass (): string {
+		return `btn-social btn-social-${this.type}${(this.cssClass != null ? " " + this.cssClass : "")}`;
+	}
+
+	render (h) {
+		return (
+			<Button
+				clicked={(e) => {
+					this.clicked(e);
+				}}
+				cssClass={this.getCssClass()}
+				layout={ButtonLayout.Primary}
+				text={!this.iconButton ? this.getText() : null}
+				size={ButtonSize.Regular}
+				round={this.round}
+				outlined={this.outlined}
+				icon={this.getSocialIcon()}
+				iconButton={this.iconButton}
+				iconOnRight={this.iconOnRight}
+				tooltip={this.tooltip}
+				disabled={this.disabled}
+				pulsate={this.pulsate}
+			/>
+		);
+	}
+}
+
+const SocialButton = toNative(SocialButtonComponent)
+export default SocialButton

package/components/input/css/checkbox-without-label.css

@@ -4,8 +4,9 @@
 
 .cb-without-label small {
     padding-left: 30px;
-    margin-top: -12px;
+    margin-top: 0px;
     font-size: 0.8em;
+    display: block;
 }
 
 .cb-without-label .col-md-9 {

package/components/progress-bar/index.tsx

@@ -4,8 +4,10 @@ import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
 import "./css/progress-bar.css";
 
 export enum ProgressBarTextPlacement {
-    Above = 0,
-    Below = 1,
+	Above = 0,
+	Below = 1,
+	Rigth = 2,
+	Left = 3
 }
 
 interface ProgressBarArgs {
@@ -17,6 +19,7 @@ interface ProgressBarArgs {
     textPlacement?: ProgressBarTextPlacement
 	showSteps?: boolean
 	hideText?: boolean
+	renderText?: (h: any, currentCount: number, maxCount: number) => void
 	renderStep?: (h: any, index: number) => void
 	renderStepContent?: (h: any, index: number, currentPercentage: number) => void
 }
@@ -31,16 +34,21 @@ class ProgressBarComponent extends TsxComponent<ProgressBarArgs> implements Prog
     @Prop() textPlacement!: ProgressBarTextPlacement
 	@Prop() showSteps!: boolean
 	@Prop() hideText!: boolean
+	@Prop() renderText!: (h: any, currentCount: number, maxCount: number) => void
 	@Prop() renderStep!: (h: any, index: number) => void
 	@Prop() renderStepContent!: (h: any, index: number, currentPercentage: number) => void
 
-    getTextPlacementSuffix(): string {
-        if (this.textPlacement == null || this.textPlacement == ProgressBarTextPlacement.Above) {
-            return 'above';
-        } else {
-            return 'below';
-        }
-    }
+	getTextPlacementSuffix (): string {
+		if (this.textPlacement == null || this.textPlacement == ProgressBarTextPlacement.Above) {
+			return 'above';
+		} else if (this.textPlacement == ProgressBarTextPlacement.Rigth) {
+			return 'rigth';
+		} else if (this.textPlacement == ProgressBarTextPlacement.Left) {
+			return 'left';
+		} else {
+			return 'below';
+		}
+	}
 
 	getStepPercentages(): number[] {
 		const stepPercentages = [];
@@ -90,12 +98,13 @@ class ProgressBarComponent extends TsxComponent<ProgressBarArgs> implements Prog
 
         return (
             <div ref={'percentageWrap'} class={'percentage-fm-wrap percentage-fm-text' + this.getTextPlacementSuffix() + (!isNullOrEmpty(this.cssClass) ? ' ' + this.cssClass : '')} style={(this.fullWidth != true ? '' : 'width:100%;')}>
-               {!this.hideText &&
+				{!this.hideText && (this.renderText != null ?
+					this.renderText(h, currentCount, maxCount) :
 					<div class="percentage-fm-text">
 						{currentCount.toString() + ' / ' + maxCount.toString()}
 					</div>
-				}
-
+				)}
+				
 				<div class="percentage-fm-pbwrap">
 					<div class="percentage-fm-pbinner" style={'width:' + percentage + '%'}></div>
                 </div>

package/package.json

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