inviton-powerduck 0.0.104 → 0.0.106

package/components/datatable/datatable-static.tsx

@@ -1,6 +1,6 @@
 import { toNative, Prop } from "vue-facing-decorator";
 import TsxComponent, { Component } from "../../app/vuetsx";
-import DataTable, { TableColumn, RowIndexMode, DataTableFilterMode, DataTableOnSortedArgs } from "./datatable";
+import DataTable, { TableColumn, RowIndexMode, DataTableFilterMode, DataTableOnSortedArgs, DataTableMobileBehavior } from "./datatable";
 import { IWebApiClient, WebClientApiMethod } from "../../common/IWebClient";
 
 interface DataTableStaticArgs {
@@ -19,6 +19,7 @@ interface DataTableStaticArgs {
 	preserveFilter?: boolean
 	checkboxButtonsVisible?: boolean;
 	sortableRows?: boolean;
+	mobileBehavior?: DataTableMobileBehavior;
 	rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
 	sortComplete?: (args: DataTableOnSortedArgs) => void;
 }
@@ -41,6 +42,7 @@ export class DataTableStaticComponent extends TsxComponent<DataTableStaticArgs>
 	@Prop() checkboxesTitle!: string;
 	@Prop() checkboxButtonsVisible!: boolean;
 	@Prop() sortableRows!: boolean;
+	@Prop() mobileBehavior!: DataTableMobileBehavior;
 	@Prop() rowCheckstateChanged?: (row: any, checked: boolean, selectedRows: any[]) => void;
 	@Prop() sortComplete?: (args: DataTableOnSortedArgs) => void;
 
@@ -119,6 +121,7 @@ export class DataTableStaticComponent extends TsxComponent<DataTableStaticArgs>
 				sortComplete={this.sortComplete}
 				preserveOrderBy={this.preserveOrderBy}
 				fullSizeHasButtonBelow={this.fullSizeTable}
+				mobileBehavior={this.mobileBehavior}
 			/>
 		);
 	}

package/components/input/checkbox.tsx

@@ -1,4 +1,4 @@
-import { toNative, Prop, Watch } from "vue-facing-decorator";
+import { toNative, Prop } from "vue-facing-decorator";
 import TsxComponent, { Component } from "../../app/vuetsx";
 import FormItemWrapper, { FormItemWrapperArgs, MarginType } from "../form/form-item-wrapper";
 import HtmlLiteral from "../html-literal/html-literal";
@@ -9,13 +9,20 @@ interface CheckBoxArgs extends FormItemWrapperArgs {
     value: boolean;
     checkboxLabelHtml?: string;
     skin?: CheckBoxSkin;
+    size?: CheckBoxSize;
     disabled?: boolean;
     changed?: (newValue: boolean) => void;
 }
 
 export enum CheckBoxSkin {
     NowUi = 0,
-    Material = 1,
+    Material = 1, // default
+    MinusVariant = 2,
+}
+
+export enum CheckBoxSize {
+    Small = "sm",
+    Medium = "md",
 }
 
 @Component
@@ -30,6 +37,7 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
     @Prop() wrap!: boolean;
     @Prop() maxWidth?: number;
     @Prop() skin!: CheckBoxSkin;
+    @Prop() size?: CheckBoxSize;
     @Prop() disabled?: boolean;
     @Prop() marginType?: MarginType;
     @Prop() hint: string;
@@ -75,14 +83,20 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
     renderCheckboxBasedOnSkin(h) {
         if (this.skin == CheckBoxSkin.NowUi) {
             return this.renderCheckboxNowUi(h);
-        } else {
-            return this.renderCheckboxMaterial(h);
+        } else if (this.skin == CheckBoxSkin.MinusVariant) {
+            return this.renderCheckboxMaterialMinus(h);
         }
+        // default -> CheckBoxSkin.Material
+        return this.renderCheckboxMaterial(h);
     }
 
     renderCheckboxNowUi(h) {
+        const checkboxClass = "form-check " +
+            (this.wrap ? "ui-checkbox-wrapped" : "ui-checkbox-nonwrapped") +
+            (this.size === CheckBoxSize.Small ? " ui-checkbox-sm" : "");
+
         return (
-            <div class={"form-check " + (this.wrap ? "ui-checkbox-wrapped" : "ui-checkbox-nonwrapped")}>
+            <div class={checkboxClass}>
                 <label class="form-check-label">
                     <input class="form-check-input" type="checkbox" checked={this.value} disabled={this.disabled || undefined} onChange={(e) => this.raiseChangeEvent(e)} />
                     <span class="form-check-sign"></span>
@@ -97,8 +111,32 @@ class CheckBoxComponent extends TsxComponent<CheckBoxArgs> implements CheckBoxAr
             this.uuid = PortalUtils.randomString(12);
         }
 
+        const checkboxClass = "inv-md-checkbox" +
+            (this.size === CheckBoxSize.Small ? " inv-md-checkbox-sm" : "");
+
+        return (
+            <div class={checkboxClass}>
+                <div class="inv-cbrb-inner">
+                    <input class="inv-chckb-clickable" type="checkbox" id={"iei-input-" + this.uuid} checked={this.value} disabled={this.disabled || undefined} onChange={(e) => this.raiseChangeEvent(e)} />
+                    <label class="inv-chckb-clickable form-check-label " for={"iei-input-" + this.uuid}>
+                        <HtmlLiteral innerHTML={this.checkboxLabelHtml} />
+                    </label>
+                </div>
+            </div>
+        );
+    }
+
+    renderCheckboxMaterialMinus(h) {
+        if (this.uuid == null) {
+            this.uuid = PortalUtils.randomString(12);
+        }
+
+        const checkboxClass = "inv-md-checkbox" +
+            (this.size === CheckBoxSize.Small ? " inv-md-checkbox-sm" : "") +
+            (this.skin === CheckBoxSkin.MinusVariant ? " inv-md-checkbox-minus" : "");
+
         return (
-            <div class="inv-md-checkbox">
+            <div class={checkboxClass}>
                 <div class="inv-cbrb-inner">
                     <input class="inv-chckb-clickable" type="checkbox" id={"iei-input-" + this.uuid} checked={this.value} disabled={this.disabled || undefined} onChange={(e) => this.raiseChangeEvent(e)} />
                     <label class="inv-chckb-clickable form-check-label " for={"iei-input-" + this.uuid}>

package/components/input/radio-button-group.tsx

@@ -16,6 +16,12 @@ interface RadioButtonGroupArgs extends FormItemWrapperArgs {
     displayMember?: string | RowToString;
     valueMember?: string | RowToString;
     selected: string | any;
+    radioButtonSize?: RadioButtonSize;
+}
+
+export const enum RadioButtonSize {
+	Small = 'sm',
+	Medium = 'md'
 }
 
 interface RadioDisplayArgs {
@@ -38,6 +44,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
     @Prop() prependIcon: string
     @Prop() appendClicked: () => void
     @Prop() prependClicked: () => void
+    @Prop() radioButtonSize?: RadioButtonSize;
     @Prop() marginType?: MarginType
     @Prop() maxWidth?: number
     @Prop() options!: Array<string> | Array<any>;
@@ -193,31 +200,48 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
     }
 
     renderInput(h) {
-        let nameId = 'iei-group-' + PortalUtils.randomString(6);
-        let selectedItem = this.getSelectedItem();
-
-        return (
-            <div class="radio-group-wrap">
-                {this.getOptions().map((optionItem) => {
-                    const uuid = 'iei-input-' + PortalUtils.randomString(10);
-                    const selected = optionItem.id == selectedItem?.id;
-                    const disabled = optionItem.dataRow?.dataRow?.disabled ?? false;
-
-                    return (
-                        <div class="inv-rbchb form-check inv-mdfw-radio">
-                            <div class="inv-cbrb-inner">
-                                <input class="form-check-input" key={uuid} checked={selected} type="radio" name={nameId} id={uuid} value={optionItem.id} disabled={disabled} onChange={() => this.handleRadioValueChanged()} />
-                                <label class="form-check-label" for={uuid}>
-                                    {/* <span>{optionItem.text}</span> */}
-                                    <HtmlLiteral innerHTML={optionItem.text} />
-                                </label>
-                            </div>
-                        </div>
-                    )
-                })}
-            </div>
-        )
-    }
+		const nameId = 'iei-group-' + PortalUtils.randomString(6);
+		const selectedItem = this.getSelectedItem();
+		const isSmall = this.radioButtonSize === RadioButtonSize.Small;
+
+		return (
+			<div class="radio-group-wrap">
+				{this.getOptions().map((optionItem) => {
+					const uuid = 'iei-input-' + PortalUtils.randomString(10);
+					const selected = optionItem.id == selectedItem?.id;
+					const disabled = optionItem.dataRow?.disabled ?? false;
+
+					const wrapperClass = [
+						"inv-rbchb",
+						"form-check",
+						"inv-mdfw-radio",
+						isSmall ? "inv-md-radio-sm" : ""
+					].join(" ");
+
+					return (
+						<div class={wrapperClass}>
+							<div class="inv-cbrb-inner">
+								<input
+									class="form-check-input"
+									key={uuid}
+									checked={selected}
+									type="radio"
+									name={nameId}
+									id={uuid}
+									value={optionItem.id}
+									disabled={disabled}
+									onChange={() => this.handleRadioValueChanged()}
+								/>
+								<label class="form-check-label" for={uuid}>
+									<HtmlLiteral innerHTML={optionItem.text} />
+								</label>
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		);
+	}
 }
 
 const RadioButtonGroup = toNative(RadioButtonGroupComponent)

package/package.json

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