Merge pull request #2556 from smeup/fix/tree-buttons

LS25000928: feat: handle `displayMode` and `showText` properties
smeup · Mar 4, 2025 · bbda108 · bbda108
2 parents 42446ef + 7ad39a6
commit bbda108
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx b/packages/ketchup/src/components/kup-button-list/kup-button-list.tsx
@@ -110,6 +110,10 @@ export class KupButtonList {
      * @default FButtonStyling.RAISED
      */
     @Prop({ reflect: true }) styling: FButtonStyling = FButtonStyling.RAISED;
+    /**
+     * When set to false buttons don't show the text, only the icon if it is present.
+     */
+    @Prop() showText: boolean = true;
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -231,7 +235,7 @@ export class KupButtonList {
             iconOff: data.iconOff,
             placeholderIcon: data.placeholderIcon,
             id: data.id,
-            label: data.label,
+            label: this.showText ? data.label : undefined,
             large: data.large,
             neutral: this.rootElement.classList.contains('kup-neutral')
                 ? true
@@ -323,7 +327,7 @@ export class KupButtonList {
             data.placeholderIcon = node.placeholderIcon;
         }
         if (data.label == null) {
-            data.label = node.value;
+            data.label = node.value ? node.value : node.obj?.k;
         }
         data.fullHeight = this.rootElement.classList.contains('kup-full-height')
             ? true

diff --git a/packages/ketchup/src/components/kup-tree/kup-tree.tsx b/packages/ketchup/src/components/kup-tree/kup-tree.tsx
@@ -59,7 +59,10 @@ import {
     ValueDisplayedValue,
 } from '../../utils/filters/filters-declarations';
 import { FiltersTreeItems } from '../../utils/filters/filters-tree-items';
-import { KupListNode } from '../kup-list/kup-list-declarations';
+import {
+    ItemsDisplayMode,
+    KupListNode,
+} from '../kup-list/kup-list-declarations';
 import {
     GenericObject,
     KupComponent,
@@ -361,6 +364,8 @@ export class KupTree {
      */
     @Prop({ mutable: true }) totals: TotalsMap;
 
+    @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.CODE_AND_DESC;
+
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -1690,6 +1695,20 @@ export class KupTree {
         }
 
         let treeNodeCell = null;
+        let nodeValue: string;
+        switch (this.displayMode) {
+            case ItemsDisplayMode.CODE:
+                nodeValue = treeNodeData.obj?.k ?? '';
+                break;
+            case ItemsDisplayMode.DESCRIPTION:
+                nodeValue = treeNodeData.value ?? '';
+                break;
+            default:
+                nodeValue = `${treeNodeData.obj?.k ?? ''}: ${
+                    treeNodeData.value ?? ''
+                }`;
+                break;
+        }
         if (this.isTreeColumnVisible()) {
             let content = '';
             if (KupGlobalFilterMode.HIGHLIGHT === this.globalFilterMode) {
@@ -1705,7 +1724,7 @@ export class KupTree {
                         class="cell-content"
                         title={this.preventXScroll ? treeNodeData.value : null}
                     >
-                        {treeNodeData.value}
+                        {nodeValue}
                     </span>
                 );
             }