inviton-powerduck 0.0.7 → 0.0.8

package/app/powerduck-system-resources.ts

@@ -35,6 +35,7 @@ export interface IPowerduckSystemResources {
     itemsOutOfArray: string
     fileDownloadTitle: string
     imageCrop: string
+    uploadImage: string
     copyToClipboard: string
     copyToClipboardSuccess: string
     loginExpired: string

package/components/accordion/accordion.tsx

@@ -61,7 +61,7 @@ class Accordion extends TsxComponent<AccordionArgs> implements AccordionArgs {
     }
 
     getSkin(): AccordionSkin {
-        return this.skin || AccordionSkin.Contrasting;
+        return (this.skin === AccordionSkin.Light ? AccordionSkin.Light : AccordionSkin.Contrasting);
     }
 
     getCssClassSkin() {
@@ -81,6 +81,8 @@ class Accordion extends TsxComponent<AccordionArgs> implements AccordionArgs {
                                 <a
                                     data-toggle="collapse"
                                     data-parent={"#" + componentId}
+                                    data-bs-toggle="collapse"
+                                    data-bs-parent={"#" + componentId}
                                     href={"#" + componentId + "-coll-" + i}
                                     aria-expanded="false"
                                     aria-controls={componentId + "-coll-" + i}

package/components/button/button.tsx

@@ -5,6 +5,8 @@ import { Tooltip } from "bootstrap";
 import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
 
 interface ButtonArgs extends _ButtonArgsBase {
+    href?: string
+    hrefTarget?: '_blank' | '_self' | '_parent' | '_top'
     clicked: (e: any) => void;
 }
 
@@ -25,6 +27,8 @@ class Button extends TsxComponent<ButtonArgs> implements ButtonArgs {
     @Prop() disabled!: boolean;
     @Prop() fullWidth!: boolean;
     @Prop() pulsate!: boolean;
+    @Prop() href!: string
+    @Prop() hrefTarget!: '_blank' | '_self' | '_parent' | '_top'
 
     //When update, update Button & DropdownButton :/
     getCssClass(): string {
@@ -36,7 +40,8 @@ class Button extends TsxComponent<ButtonArgs> implements ButtonArgs {
             (this.iconButton ? " btn-icon" : "") +
             (this.cssClass != null ? " " + this.cssClass : "") +
             (this.fullWidth ? " full-width" : "") +
-            (this.pulsate ? " btn-pulsating" : "")
+            (this.pulsate ? " btn-pulsating" : "") + 
+            (this.iconOnRight ? ' btn-icon-on-right' : '')
         );
     }
 
@@ -48,7 +53,7 @@ class Button extends TsxComponent<ButtonArgs> implements ButtonArgs {
         }
     }
 
-    onButtonClicked(e) {
+    handleButtonClicked(e) {
         this.clicked(e);
 
         if (!isNullOrEmpty(this.tooltip)) {
@@ -65,35 +70,55 @@ class Button extends TsxComponent<ButtonArgs> implements ButtonArgs {
     }
 
     render(h) {
-        return (
-            <button
-                type="button"
-                class={this.getCssClass()}
-                disabled={this.disabled == true}
-                data-dismiss={this.dismissModal ? "modal" : null}
-                data-bs-dismiss={this.dismissModal ? "modal" : null}
-                title={this.tooltip}
-                onClick={(e) => {
-                    this.onButtonClicked(e);
-                }}
-            >
-                {this.icon && this.iconOnRight != true && (
-                    <span class="btn-label">
-                        <i class={this.icon}></i>
-                        {this.text && <span>&nbsp;&nbsp;</span>}
-                    </span>
-                )}
+        if (this.href == null) {
+            return (
+                <button type="button" class={this.getCssClass()} disabled={this.disabled == true} data-dismiss={this.dismissModal ? 'modal' : null} data-bs-dismiss={this.dismissModal ? 'modal' : null} title={this.tooltip} onClick={(e) => { this.handleButtonClicked(e) }}>
+                    {this.icon && this.iconOnRight != true &&
+                        <span class="btn-label">
+                            <i class={this.icon}></i>
+                            {this.text &&
+                                <span>&nbsp;&nbsp;</span>
+                            }
+                        </span>
+                    }
 
-                {this.text}
+                    {this.text}
 
-                {this.icon && this.iconOnRight == true && (
-                    <span class="btn-label">
-                        {this.text && <span>&nbsp;&nbsp;</span>}
-                        <i class={this.icon}></i>
-                    </span>
-                )}
-            </button>
-        );
+                    {this.icon && this.iconOnRight == true &&
+                        <span class="btn-label">
+                            {this.text &&
+                                <span>&nbsp;&nbsp;</span>
+                            }
+                            <i class={this.icon}></i>
+                        </span>
+                    }
+                </button>
+            )
+        } else {
+            return (
+                <a href={this.href} target={this.hrefTarget == null ? '_self' : this.hrefTarget} class={this.getCssClass()} disabled={this.disabled == true} data-dismiss={this.dismissModal ? 'modal' : null} data-bs-dismiss={this.dismissModal ? 'modal' : null} title={this.tooltip}>
+                    {this.icon && this.iconOnRight != true &&
+                        <span class="btn-label">
+                            <i class={this.icon}></i>
+                            {this.text &&
+                                <span>&nbsp;&nbsp;</span>
+                            }
+                        </span>
+                    }
+
+                    {this.text}
+
+                    {this.icon && this.iconOnRight == true &&
+                        <span class="btn-label">
+                            {this.text &&
+                                <span>&nbsp;&nbsp;</span>
+                            }
+                            <i class={this.icon}></i>
+                        </span>
+                    }
+                </a>
+            )
+        }
     }
 }
 

package/components/button/excel-upload-button.tsx

@@ -25,7 +25,7 @@ class ExcelUploadButton extends TsxComponent<ExcelUploadButtonArgs> implements E
     @Prop() pulsate!: boolean;
     @Prop() excelLoaded: (excelData: Array<Array<string>>) => void;
 
-    onFileLoaded(buffer) {
+    handleFileLoaded(buffer) {
         if (this.excelLoaded != null) {
             this.excelLoaded(ExcelReader.readFileAsJson(buffer));
         }
@@ -37,7 +37,7 @@ class ExcelUploadButton extends TsxComponent<ExcelUploadButtonArgs> implements E
                 onlyExcel={true}
                 asArrayBuffer={true}
                 changedClientside={(e) => {
-                    this.onFileLoaded(e);
+                    this.handleFileLoaded(e);
                 }}
                 cssClass={this.cssClass}
                 layout={this.layout}

package/components/button/ladda-button.tsx

@@ -23,7 +23,7 @@ class LaddaButton extends TsxComponent<LaddaButtonArgs> implements LaddaButtonAr
     @Prop() pulsate!: boolean;
     @Prop() clicked: (e: any) => Promise<any>;
 
-    onButtonClicked(e) {
+    handleButtonClicked(e) {
         var targetElem = e.target as HTMLElement;
         if (targetElem.nodeName.toLowerCase() != "button") {
             targetElem = $(targetElem).closest("button")[0];
@@ -43,7 +43,7 @@ class LaddaButton extends TsxComponent<LaddaButtonArgs> implements LaddaButtonAr
         return (
             <Button
                 clicked={(e) => {
-                    this.onButtonClicked(e);
+                    this.handleButtonClicked(e);
                 }}
                 cssClass={this.cssClass}
                 layout={this.layout}

package/components/button/text-button.tsx

@@ -10,6 +10,7 @@ interface TextButtonArgs {
     cssClass?: string;
     pulsate?: boolean;
     fontAdjust?: boolean;
+    iconOnRight?: boolean
 }
 
 @Component
@@ -19,6 +20,7 @@ class TextButton extends TsxComponent<TextButtonArgs> implements TextButtonArgs
     @Prop() text!: string;
     @Prop() tooltip!: string;
     @Prop() fontAdjust!: boolean;
+    @Prop() iconOnRight!: boolean;
 
     @Prop() clicked: (e: any) => void;
     @Prop() disabled!: boolean;
@@ -29,7 +31,7 @@ class TextButton extends TsxComponent<TextButtonArgs> implements TextButtonArgs
         return "text-button" + (this.cssClass != null ? " " + this.cssClass : "") + (this.pulsate ? " btn-pulsating" : "") + (this.fontAdjust == true ? " text-button-font" : "");
     }
 
-    onButtonClicked(e) {
+    handleButtonClicked(e) {
         this.clicked(e);
 
         if (!isNullOrEmpty(this.tooltip)) {
@@ -45,15 +47,16 @@ class TextButton extends TsxComponent<TextButtonArgs> implements TextButtonArgs
 
     render(h) {
         return (
-            <span
-                onClick={(e) => {
-                    this.onButtonClicked(e);
-                }}
-                class={this.getCssClass()}
-                title={this.tooltip}
-            >
-                <i class={this.icon}></i>
+            <span onClick={(e) => { this.handleButtonClicked(e) }} class={this.getCssClass()} title={this.tooltip}>
+                {!this.iconOnRight &&
+                    <i class={this.icon}></i>
+                }
+
                 <span>{this.text}</span>
+
+                {this.iconOnRight &&
+                    <i class={this.icon}></i>
+                }
             </span>
         );
     }

package/components/button/upload-button.tsx

@@ -108,7 +108,7 @@ class UploadButton extends TsxComponent<UploadButtonArgs> implements UploadButto
         }
     }
 
-    onClientButtonClicked() {
+    handleClientButtonClicked() {
         this.$refs.clientImageLoader["click"]();
     }
 
@@ -116,14 +116,14 @@ class UploadButton extends TsxComponent<UploadButtonArgs> implements UploadButto
         this.handleClientsideChange(e.target.files[0]);
     }
 
-    onDrop(e) {
+    handleDrop(e) {
         var file = e.dataTransfer.files[0];
         if (file != null) {
             this.handleClientsideChange(file);
         }
     }
 
-    onDummyEvent(e: Event) {
+    handleDummyEvent(e: Event) {
         e.preventDefault();
         e.stopPropagation();
     }
@@ -134,11 +134,11 @@ class UploadButton extends TsxComponent<UploadButtonArgs> implements UploadButto
             if (targetEl["_eventsBound"] == null) {
                 targetEl["_eventsBound"] = true;
                 ["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach((evType) => {
-                    targetEl.addEventListener(evType, this.onDummyEvent);
+                    targetEl.addEventListener(evType, this.handleDummyEvent);
                 });
 
                 targetEl.addEventListener("drop", (e) => {
-                    this.onDrop(e);
+                    this.handleDrop(e);
                 });
             }
         });
@@ -156,7 +156,7 @@ class UploadButton extends TsxComponent<UploadButtonArgs> implements UploadButto
                 <Button
                     ref={"uploadButton"}
                     clicked={(e) => {
-                        this.onClientButtonClicked();
+                        this.handleClientButtonClicked();
                     }}
                     cssClass={this.cssClass}
                     layout={this.layout}

package/components/card/card-header-with-options.tsx

@@ -36,7 +36,7 @@ class CardHeaderWithOptions extends TsxComponent<CardHeaderWithOptionsArgs> impl
                 )}
 
                 <div class="dropdown card-header-options-dropdown">
-                    <button type="button" class="btn btn-default dropdown-toggle no-caret" data-toggle="dropdown">
+                    <button type="button" class="btn btn-default dropdown-toggle no-caret" data-toggle="dropdown" data-bs-toggle="dropdown">
                         <i class="icon icon-settings"></i>
                     </button>
                     <div class="dropdown-menu dropdown-menu-right">

package/components/card/card.tsx

@@ -1,6 +1,7 @@
-import { toNative, Prop } from "vue-facing-decorator";
-import TsxComponent, { Component } from "../../app/vuetsx";
-import PowerduckState from "../../app/powerduck-state";
+import { Prop, toNative } from 'vue-facing-decorator'
+
+import PowerduckState from '../../app/powerduck-state'
+import TsxComponent, { Component } from '../../app/vuetsx'
 
 export enum CardRole {
     Normal = 0,
@@ -8,24 +9,28 @@ export enum CardRole {
 }
 
 interface CardArgs {
-    role?: CardRole;
-    renderMode?: "default" | "inlined";
-    hasShadow?: boolean;
+	role?: CardRole
+	renderMode?: 'default' | 'inlined'
+	hasShadow?: boolean
+	cssClass?: string
+	clicked?: () => void
 }
 
 @Component
 class Card extends TsxComponent<CardArgs> implements CardArgs {
-    @Prop() role!: CardRole;
-    @Prop() hasShadow!: boolean;
-    @Prop() renderMode?: "default" | "inlined";
-
-    render(h) {
-        return (
-            <div class={"card" + (this.role == CardRole.RootCard ? " single-card root-element" : "") + this.getStickyCssClass() + this.getBoxShadowCardCss() + this.getRenderModeCardCss()}>
-                {this.$slots.default?.()}
-            </div>
-        );
-    }
+	@Prop() role!: CardRole
+	@Prop() hasShadow!: boolean
+	@Prop() renderMode?: 'default' | 'inlined'
+	@Prop() cssClass?: string
+	@Prop() clicked?: () => void
+
+	render() {
+		return (
+			<div onClick={this?.clicked} role={this.getRole()} class={`card${this.role == CardRole.RootCard ? ' single-card root-element' : ''}${this.getStickyCssClass()}${this.getBoxShadowCardCss()}${this.getRenderModeCardCss()} ${this.cssClass ?? ''}`}>
+				{this.$slots.default?.()}
+			</div>
+		)
+	}
 
     getStickyCssClass(): string {
         var cssClass = "";
@@ -55,8 +60,16 @@ class Card extends TsxComponent<CardArgs> implements CardArgs {
             return " card-render-inlined";
         }
 
-        return "";
-    }
+		return ''
+	}
+
+	getRole() {
+		if (this.clicked != null) {
+			return 'button'
+		}
+
+		return 'initial'
+	}
 }
 
-export default toNative(Card);
+export default toNative(Card);

package/components/card/image-card.tsx

@@ -1,8 +1,9 @@
-import { toNative, Prop } from "vue-facing-decorator"
-import TsxComponent, { Component } from "../../app/vuetsx"
-import CardBody from "./card-body"
-import Card from "./card"
-import PowerduckState from "../../app/powerduck-state"
+import { Prop, toNative } from 'vue-facing-decorator'
+
+import PowerduckState from '../../app/powerduck-state'
+import TsxComponent, { Component } from '../../app/vuetsx'
+import Card from './card'
+import CardBody from './card-body'
 
 export enum CardRole {
     Normal = 0,
@@ -10,39 +11,43 @@ export enum CardRole {
 }
 
 interface ImageCardArgs {
-    role?: CardRole
-    renderMode?: "default" | "inlined"
-    hasShadow?: boolean
-    imgUrl: string
-    imgAlt?: string
+	role?: CardRole
+	renderMode?: 'default' | 'inlined'
+	hasShadow?: boolean
+	imgUrl: string
+	imgAlt?: string
+	height?: string
+	clicked?: () => void
 }
 
 @Component
 class ImageCard extends TsxComponent<ImageCardArgs> implements ImageCardArgs {
-    @Prop() role!: CardRole
-    @Prop() hasShadow!: boolean
-    @Prop() renderMode?: "default" | "inlined"
-    @Prop() imgUrl: string
-    @Prop() imgAlt?: string
+	@Prop() role!: CardRole
+	@Prop() hasShadow!: boolean
+	@Prop() renderMode?: 'default' | 'inlined'
+	@Prop() imgUrl: string
+	@Prop() height?: string
+	@Prop() imgAlt?: string
+	@Prop() clicked?: () => void
 
-    render(h) {
-        return (
-            <Card renderMode={"inlined"}>
-                <div class="row g-0">
-                    <div class="col-md-4">
-                        <img
-                            src={this.imgUrl}
-                            class="img-fluid rounded-start h-100 object-fit-cover"
-                            alt={this.imgAlt ?? "Image"}
-                        />
-                    </div>
-                    <div class="col-md-8">
-                        <CardBody>{this.$slots.default?.()}</CardBody>
-                    </div>
-                </div>
-            </Card>
-        )
-    }
+	render() {
+		return (
+			<Card clicked={this?.clicked} renderMode="inlined">
+				<div class="row g-0">
+					<div class="col-md-3" style={`height: ${this.height ?? 'auto'}`}>
+						<img
+							src={this.imgUrl}
+							class="img-fluid rounded-start h-100 w-100 object-fit-cover"
+							alt={this.imgAlt ?? 'Image'}
+						/>
+					</div>
+					<div class="col-md-8">
+						<CardBody>{this.$slots.default?.()}</CardBody>
+					</div>
+				</div>
+			</Card>
+		)
+	}
 
     getStickyCssClass(): string {
         var cssClass = ""
@@ -76,4 +81,4 @@ class ImageCard extends TsxComponent<ImageCardArgs> implements ImageCardArgs {
     }
 }
 
-export default toNative(ImageCard)
+export default toNative(ImageCard)

package/components/chart-js/bar-chart.tsx

@@ -1,64 +1,65 @@
-import { toNative, Prop } from "vue-facing-decorator";
-import TsxComponent, { Component } from "../../app/vuetsx";
-import Chart from "chart.js";
-import "chartjs-plugin-zoom";
-import { hexToRGB } from "./ts/utils";
-
-let defaultOptions = {
-    maintainAspectRatio: false,
-    tooltips: {
-        bodySpacing: 4,
-        mode: "nearest",
-        intersect: 0,
-        position: "nearest",
-        xPadding: 10,
-        yPadding: 10,
-        caretPadding: 10,
-    },
-    responsive: 1,
-    scales: {
-        yAxes: [
-            {
-                gridLines: {
-                    zeroLineColor: "transparent",
-                    drawBorder: false,
-                },
-                ticks: {
-                    beginAtZero: true,
-                    userCallback: function (label, index, labels) {
-                        // when the floored value is the same as the value we have a whole number
-                        if (Math.floor(label) === label) {
-                            return label;
-                        }
-                    },
-                },
-            },
-        ],
-        xAxes: [
-            {
-                gridLines: {
-                    zeroLineColor: "transparent",
-                    drawTicks: false,
-                    display: false,
-                    drawBorder: false,
-                },
-            },
-        ],
-    },
-    layout: {
-        padding: { left: 0, right: 0, top: 15, bottom: 15 },
-    },
-    pan: {
-        enabled: true,
-        mode: "x",
-    },
-    zoom: {
-        enabled: true,
-        mode: "x",
-        speed: 75.5,
-        sensitivity: 0,
-    },
-};
+import Chart from 'chart.js'
+import { Prop, toNative } from 'vue-facing-decorator'
+import TsxComponent, { Component } from '../../app/vuetsx'
+
+import { hexToRGB } from './ts/utils'
+import 'chartjs-plugin-zoom'
+
+const defaultOptions = {
+	maintainAspectRatio: false,
+	tooltips: {
+		bodySpacing: 4,
+		mode: 'nearest',
+		intersect: 0,
+		position: 'nearest',
+		xPadding: 10,
+		yPadding: 10,
+		caretPadding: 10,
+	},
+	responsive: 1,
+	scales: {
+		yAxes: [
+			{
+				gridLines: {
+					zeroLineColor: 'transparent',
+					drawBorder: false,
+				},
+				ticks: {
+					beginAtZero: true,
+					userCallback: (label, _index, _labels) => {
+						// when the floored value is the same as the value we have a whole number
+						if (Math.floor(label) === label) {
+							return label
+						}
+					},
+				},
+			},
+		],
+		xAxes: [
+			{
+				gridLines: {
+					zeroLineColor: 'transparent',
+					drawTicks: false,
+					display: false,
+					drawBorder: false,
+				},
+			},
+		],
+	},
+	layout: {
+		padding: { left: 0, right: 0, top: 15, bottom: 15 },
+	},
+	pan: {
+		enabled: true,
+		mode: 'x',
+	},
+	zoom: {
+		enabled: true,
+		mode: 'x',
+		speed: 75.5,
+		sensitivity: 0,
+	},
+}
 
 export enum BarChartBackground {
     gradientSolid = 0,
@@ -205,4 +206,4 @@ class BarChart extends TsxComponent<BarChartArgs> implements BarChartArgs {
     }
 }
 
-export default toNative(BarChart);
+export default toNative(BarChart);

package/components/collapse/index.tsx

@@ -0,0 +1,42 @@
+import { toNative, Prop } from "vue-facing-decorator";
+import TsxComponent, { Component } from "../../app/vuetsx";
+import { PortalUtils } from "../../common/utils/utils";
+interface CollapseArgs {
+    cssClass?: string
+}
+
+@Component
+class Collapse extends TsxComponent<CollapseArgs> implements CollapseArgs {
+    @Prop() cssClass?: string;
+    uuid: string = null;
+
+    mounted() {
+        this.uuid = 'clp-' + PortalUtils.randomString(6);
+    }
+
+    toggle() {
+        $(this.getInnerButton()).trigger('click');
+    }
+
+    isShown(): boolean {
+        return this.getInnerButton().getAttribute('aria-expanded') == 'true'
+    }
+
+    private getInnerButton() {
+        return document.getElementById(this.uuid + '-btn');
+    }
+
+    render(h) {
+        return (
+            <div class={`collapse`} id={this.uuid}>
+                <button style="display:none;" id={this.uuid + '-btn'} type="button" data-bs-toggle="collapse" data-bs-target={`#${this.uuid}`} aria-expanded="false" aria-controls={this.uuid}></button>
+
+                <div class={`collapse-inner${this.cssClass != null ? ' ' + this.cssClass : ''}`}>
+                    {this.$slots.default}
+                </div>
+            </div>
+        )
+    }
+}
+
+export default toNative(Collapse);

package/components/datatable/col-vis-modal.tsx

@@ -29,7 +29,7 @@ class ColVisModal extends TsxComponent<ColVisModalArgs> implements ColVisModalAr
         },
     };
 
-    onColumnChanged(col: TableColumn, visible: boolean): void {
+    handleColumnChanged(col: TableColumn, visible: boolean): void {
         col.visible = visible;
 
         if (col.visible == true) {
@@ -51,7 +51,7 @@ class ColVisModal extends TsxComponent<ColVisModalArgs> implements ColVisModalAr
                         this.columns.map((col) => (
                             <div class="row">
                                 <div class="col-md-12">
-                                    <CheckBox label={null} wrap={false} checkboxLabelHtml={col.caption} value={col.visible != false} changed={(e) => this.onColumnChanged(col, e)} />
+                                    <CheckBox label={null} wrap={false} checkboxLabelHtml={col.caption} value={col.visible != false} changed={(e) => this.handleColumnChanged(col, e)} />
                                 </div>
                             </div>
                         ))}