inviton-powerduck 0.0.105 → 0.0.107

package/components/dropdown/index.tsx

@@ -829,6 +829,43 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			};
 
 			if (!this.useMultiCheckboxes()) {
+				const DIACRITICS = ($ as any).fn.select2.amd.require('select2/diacritics');
+				const normalizeForSearch = (text: string) => {
+					if (text == null) {
+						return null;
+					}
+
+					return stripDiacritics(text).toUpperCase();
+				};
+				const stripDiacritics = (text: string) => {
+					function match(a) {
+						return DIACRITICS[a] || a;
+					}
+
+					return text.replace(/[^\u0000-\u007E]/g, match);
+				};
+				const getMatchingChildren = (term: string, dataSet: any) => {
+					const retVal: any[] = [];
+					for (const item of dataSet) {
+						if (item.children?.length > 0) {
+							const subData = getMatchingChildren(term, item.children);
+							if (subData.length > 0) {
+								retVal.push({
+									...item,
+									children: subData
+								})
+							}
+						} else {
+							const normalized = normalizeForSearch(item.text);
+							if (normalized.indexOf(term) > -1) {
+								retVal.push(item);
+							}
+						}
+					}
+
+					return retVal;
+				};
+
 				s2Args.data = null
 				s2Args.ajax = {
 					transport: function (params, success, failure) {
@@ -840,7 +877,15 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 							resData = opts;
 						}
 
-						success({ results: resData });
+						const data = (params?.data || {});
+						const query = normalizeForSearch(data.q ?? data.term)?.trim();
+
+						if (query == null || query.length == 0) {
+							success({ results: resData });
+							return;
+						}
+
+						success({ results: getMatchingChildren(query, resData) });
 					}
 				};
 			}

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.105",
+  "version": "0.0.107",
   "type": "module",
   "scripts": {
     "build": " vite build && vue-tsc  --declaration --emitDeclarationOnly",