inviton-powerduck 0.0.212 → 0.0.214

package/common/utils/vue-utils.ts

@@ -0,0 +1,5 @@
+export default class VueUtils {
+	static isVNode(item: any): boolean {
+		return item?.__v_isVNode;
+	}
+}

package/components/card/card-header.tsx

@@ -1,6 +1,7 @@
 import type { VNode } from 'vue';
 import { Prop, toNative } from 'vue-facing-decorator';
 import TsxComponent, { Component } from '../../app/vuetsx';
+import VueUtils from '../../common/utils/vue-utils';
 
 interface CardHeaderArgs {
 	title?: string | VNode;
@@ -15,11 +16,15 @@ class CardHeaderComponent extends TsxComponent<CardHeaderArgs> implements CardHe
 	@Prop() smallTitle?: string;
 
 	render(h) {
+		const titleIsVnode = VueUtils.isVNode(this.title);
+
 		return (
 			<div class="card-header ">
 				{this.smallTitle && <h6 class="card-small-title">{this.smallTitle}</h6>}
+				{titleIsVnode && this.title
+				&& <div class="card-title card-title-vnode">{this.title}</div>}
 
-				{this.title && (
+				{!titleIsVnode && this.title && (
 					<h5 class="card-title">
 						{this.title}
 

package/components/dropdown/index.tsx

@@ -10,6 +10,7 @@ import { remove } from '../../common/extensions/array-extensions';
 import { capitalize } from '../../common/extensions/string-extensions';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
 import { PortalUtils } from '../../common/utils/utils';
+import VueUtils from '../../common/utils/vue-utils';
 import FormItemWrapper from '../form/form-item-wrapper';
 import LoadingIndicator from '../loading-indicator';
 import FilterableSelect from './mobile/legacy_fdd';
@@ -509,7 +510,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				item?.dataRow ?? item,
 				originator,
 			);
-			if (result?.__v_isVNode) {
+			if (VueUtils.isVNode(result)) {
 				const container = document.createElement('span');
 				// vue render accepts VNodeChild
 				render(result as any, container);
@@ -1075,7 +1076,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 					if (tagsTemplate == null && this.tagsShouldPrependContent != false && this.customRenderSelectionResult == null) {
 						validTagsButtons = true;
 						tagsTemplate
-							= '<li class="select2-selection__choice select2-selection__choice-with-button"><span class="select2-selection__choice__remove" role="presentation"><i class="fas fa-times"></i></span></li>';
+                            = '<li class="select2-selection__choice select2-selection__choice-with-button"><span class="select2-selection__choice__remove" role="presentation"><i class="fas fa-times"></i></span></li>';
 						s2Args.templateSelection = (state): string | JQuery => {
 							if (!state) { return ''; }
 
@@ -1091,10 +1092,10 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 							}
 
 							let builder
-								= `<span class="ddl-dropdown-resultroot"><span class="ddl-dropdown-resultwrap"><span class="ddl-result-text">${PortalUtils.htmlEscape(state.text || dataItem.text)}</span>`;
+                                = `<span class="ddl-dropdown-resultroot"><span class="ddl-dropdown-resultwrap"><span class="ddl-result-text">${PortalUtils.htmlEscape(state.text || dataItem.text)}</span>`;
 							(self.tagsButtons(dataItem) || ([] as DropdownListButton[])).forEach((button, i) => {
 								builder
-									+= `<span class="ddl-result-button dll-clickable-button ${button.cssClass
+                                    += `<span class="ddl-result-button dll-clickable-button ${button.cssClass
 									}" data-index="${i
 									}" role="presentation"><i class="${button.iconCss
 									}"></i></span>`;

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

@@ -5,6 +5,7 @@ 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 VueUtils from '../../common/utils/vue-utils';
 import FormItemWrapper from '../form/form-item-wrapper';
 import HtmlLiteral from '../html-literal/html-literal';
 import './css/radio-button-group.css';
@@ -146,7 +147,7 @@ class RadioButtonGroupComponent extends TsxComponent<RadioButtonGroupArgs> imple
 			return '';
 		}
 
-		if (renderResult?.__v_isVNode) {
+		if (VueUtils.isVNode(renderResult)) {
 			const container = document.createElement('div');
 			render(renderResult as any, container);
 			return container.innerHTML;

package/components/tabs/css/tabs.css

@@ -0,0 +1,14 @@
+/* Tabs */
+.nav-caption-short {
+    display: none;
+}
+
+@media (max-width: 767.98px) {
+    .nav-caption-short {
+        display: unset;
+    }
+
+    .nav-caption-long {
+        display: none;
+    }
+}

package/components/tabs/tabs.tsx

@@ -9,6 +9,7 @@ import Card from '../card/card';
 import CardBody from '../card/card-body';
 import CardHeader from '../card/card-header';
 import HtmlLiteral from '../html-literal/html-literal';
+import './css/tabs.css';
 
 export enum TabsRenderMode {
 	Normal = 0,
@@ -198,21 +199,21 @@ class TabsComponent extends TsxComponent<TabsArgs> implements TabsArgs {
 										<i class={tab.icon}></i>
 										{tab.escapeCaption != false
 											? (
-													<span>
-														<span class="nav-caption-long">{tab.navCaption}</span>
-														<span class="nav-caption-short">{tab.navCaptionShort || tab.navCaption}</span>
-													</span>
-												)
+												<span>
+													<span class="nav-caption-long">{tab.navCaption}</span>
+													<span class="nav-caption-short">{tab.navCaptionShort || tab.navCaption}</span>
+												</span>
+											)
 											: (
-													<span>
-														<span class="nav-caption-long">
-															<HtmlLiteral innerHTML={tab.navCaption} />
-														</span>
-														<span class="nav-caption-short">
-															<HtmlLiteral innerHTML={tab.navCaptionShort || tab.navCaption} />
-														</span>
+												<span>
+													<span class="nav-caption-long">
+														<HtmlLiteral innerHTML={tab.navCaption} />
+													</span>
+													<span class="nav-caption-short">
+														<HtmlLiteral innerHTML={tab.navCaptionShort || tab.navCaption} />
 													</span>
-												)}
+												</span>
+											)}
 									</a>
 								</li>
 							))}
@@ -257,21 +258,21 @@ class TabsComponent extends TsxComponent<TabsArgs> implements TabsArgs {
 
 										{tab.escapeCaption != false
 											? (
-													<span>
-														<span class="nav-caption-long">{tab.navCaption}</span>
-														<span class="nav-caption-short">{tab.navCaptionShort || tab.navCaption}</span>
-													</span>
-												)
+												<span>
+													<span class="nav-caption-long">{tab.navCaption}</span>
+													<span class="nav-caption-short">{tab.navCaptionShort || tab.navCaption}</span>
+												</span>
+											)
 											: (
-													<span>
-														<span class="nav-caption-long">
-															<HtmlLiteral innerHTML={tab.navCaption} />
-														</span>
-														<span class="nav-caption-short">
-															<HtmlLiteral innerHTML={tab.navCaptionShort || tab.navCaption} />
-														</span>
+												<span>
+													<span class="nav-caption-long">
+														<HtmlLiteral innerHTML={tab.navCaption} />
+													</span>
+													<span class="nav-caption-short">
+														<HtmlLiteral innerHTML={tab.navCaptionShort || tab.navCaption} />
 													</span>
-												)}
+												</span>
+											)}
 									</a>
 								</li>
 							))}

package/package.json

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