inviton-powerduck 0.0.168 → 0.0.169

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

@@ -1,18 +1,19 @@
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, HintType, MarginType } from '../form/form-item-wrapper';
+import { render } from 'vue';
 import { Prop, toNative } from 'vue-facing-decorator';
 import TsxComponent, { Component } from '../../app/vuetsx';
+import { capitalize } from '../../common/extensions/string-extensions';
 import { PortalUtils } from '../../common/utils/utils';
 import FormItemWrapper from '../form/form-item-wrapper';
 import HtmlLiteral from '../html-literal/html-literal';
 import './css/radio-button-group.css';
-import { capitalize } from '../../common/extensions/string-extensions';
 
 type RowToString = (row) => string;
 interface RadioButtonGroupArgs extends FormItemWrapperArgs {
 	changed: (newValue: string | any) => void;
-	formatResult?: (state: RadioDisplayArgs) => JQuery | string;
-	formatSelection?: (state: RadioDisplayArgs) => JQuery | string;
+	customRenderOption?: (h, state: RadioDisplayArgs) => any;
+	customRenderSelectionResult?: (h, state: RadioDisplayArgs) => any;
 	options: Array<string> | Array<any>;
 	displayMember?: string | RowToString;
 	valueMember?: string | RowToString;
@@ -53,12 +54,12 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 	@Prop() valueMember!: (row) => string | string;
 	@Prop() selected!: string | any;
 	@Prop() changed: (newValue: string | any) => void;
-	@Prop() formatResult!: (state: RadioDisplayArgs) => JQuery | string;
-	@Prop() formatSelection!: (state: RadioDisplayArgs) => JQuery | string;
+	@Prop() customRenderOption?: (h, state: RadioDisplayArgs) => any;
+	@Prop() customRenderSelectionResult?: (h, state: RadioDisplayArgs) => any;
 
-	getFormatedResult(item: RadioDisplayArgs): string {
-		if (this.formatResult != null) {
-			return (this.formatResult(item) as JQuery<HTMLElement>).html();
+	getCustomFormatOptions(h, item: RadioDisplayArgs): string {
+		if (this.customRenderOption != null) {
+			return this.customRenderOption(h, item);
 		}
 	}
 
@@ -116,7 +117,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 		}
 	}
 
-	getOptions(): RadioDisplayArgs[] {
+	getOptions(h): RadioDisplayArgs[] {
 		const retVal: RadioDisplayArgs[] = [];
 		const opts = this.options as any;
 
@@ -130,7 +131,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 				opts.forEach((item) => {
 					retVal.push({
 						id: this.getReflectedRowValue(item, true),
-						text: this.formatResult != null ? this.getFormatedResult(item) : this.getReflectedRowValue(item, false),
+						text: this.customRenderOption != null ? this.handleCustomRenderResult(h, this.customRenderOption(h, item)) : this.getReflectedRowValue(item, false),
 						dataRow: item,
 					});
 				});
@@ -140,8 +141,26 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 		return retVal;
 	}
 
-	getSelectedItem(opts?: RadioDisplayArgs[]): RadioDisplayArgs {
-		opts = opts || this.getOptions();
+	private handleCustomRenderResult(h: any, renderResult: any): string {
+		if (renderResult == null) {
+			return '';
+		}
+
+		if (renderResult?.__v_isVNode) {
+			const container = document.createElement('div');
+			render(renderResult as any, container);
+			return container.innerHTML;
+		}
+
+		if (renderResult instanceof HTMLElement) {
+			return renderResult.outerHTML;
+		}
+
+		return renderResult;
+	}
+
+	getSelectedItem(h, opts?: RadioDisplayArgs[]): RadioDisplayArgs {
+		opts = opts || this.getOptions(h);
 
 		if (this.selected == null || opts.length == 0) {
 			return opts[0];
@@ -189,10 +208,10 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 		);
 	}
 
-	handleRadioValueChanged() {
+	handleRadioValueChanged(h) {
 		const selectedValue = this.$el.querySelector('input[type="radio"]:checked').value;
 		if (selectedValue != null) {
-			const opts = this.getOptions();
+			const opts = this.getOptions(h);
 			for (let i = 0, len = opts.length; i < len; i++) {
 				const optItem = opts[i];
 				if (optItem.id == selectedValue) {
@@ -205,12 +224,12 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 
 	renderInput(h) {
 		const nameId = `iei-group-${PortalUtils.randomString(6)}`;
-		const selectedItem = this.getSelectedItem();
+		const selectedItem = this.getSelectedItem(h);
 		const isSmall = this.radioButtonSize === RadioButtonSize.Small;
 
 		return (
 			<div class="radio-group-wrap">
-				{this.getOptions().map((optionItem) => {
+				{this.getOptions(h).map((optionItem) => {
 					const uuid = `iei-input-${PortalUtils.randomString(10)}`;
 					const selected = optionItem.id == selectedItem?.id;
 					const disabled = optionItem.dataRow?.disabled ?? false;
@@ -234,7 +253,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 									id={uuid}
 									value={optionItem.id}
 									disabled={disabled}
-									onChange={() => this.handleRadioValueChanged()}
+									onChange={() => this.handleRadioValueChanged(h)}
 								/>
 								<label class="form-check-label" for={uuid}>
 									<HtmlLiteral innerHTML={optionItem.text} />

package/package.json

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