Merge pull request smeup#2189 from apuliasoft/feat/inp-dashboard

feat/property for dashboard
apuliasoft · Nov 15, 2024 · a81fad9 · a81fad9
2 parents 794135a + 89b49d7
commit a81fad9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -2813,6 +2813,11 @@ export namespace Components {
           * @see https://smeup.github.io/ketchup/#/customization
          */
         "customStyle": string;
+        /**
+          * Sets verical layout if dashboardMode is true
+          * @default false
+         */
+        "dashboardMode": boolean;
         /**
           * Actual data of the form.
           * @default null
@@ -8251,6 +8256,11 @@ declare namespace LocalJSX {
           * @see https://smeup.github.io/ketchup/#/customization
          */
         "customStyle"?: string;
+        /**
+          * Sets verical layout if dashboardMode is true
+          * @default false
+         */
+        "dashboardMode"?: boolean;
         /**
           * Actual data of the form.
           * @default null

diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx
@@ -145,6 +145,13 @@ export class KupInputPanel {
     @Prop() checkValidValueCallback?: InputPanelCheckValidValueCallback = null;
     //#endregion
 
+    /**
+     * Sets verical layout if dashboardMode is true
+     * @default false
+     */
+    @Prop() dashboardMode: boolean = false;
+    //#endregion
+
     //#region STATES
     /*-------------------------------------------------*/
     /*                   S t a t e s                   */
@@ -351,11 +358,15 @@ export class KupInputPanel {
                                   .join(' ')
                             : `repeat(${layout.sections.length}, 1fr)`;
                     } else {
-                        styleObj.gridTemplateRows = hasDim
-                            ? layout.sections
-                                  .map((sec) => sec.dim || 'auto')
-                                  .join(' ')
-                            : `repeat(${layout.sections.length}, 1fr)`;
+                        console.log('ELSE');
+                        if (this.dashboardMode) {
+                            console.log('ELSE IN');
+                            styleObj.gridTemplateRows = hasDim
+                                ? layout.sections
+                                      .map((sec) => sec.dim || 'auto')
+                                      .join(' ')
+                                : `repeat(${layout.sections.length}, 1fr)`;
+                        }
                     }
                 }
 
@@ -590,7 +601,11 @@ export class KupInputPanel {
                     : `repeat(${section.sections.length}, 1fr)`;
             }
 
-            if (!section.gridRows && !section.horizontal) {
+            if (
+                !section.gridRows &&
+                !section.horizontal &&
+                this.dashboardMode
+            ) {
                 styleObj.gridTemplateRows = hasDim
                     ? section.sections.map((sec) => sec.dim || 'auto').join(' ')
                     : `repeat(${section.sections.length}, 1fr)`;
@@ -601,9 +616,12 @@ export class KupInputPanel {
             );
             styleObj.gridTemplateColumns =
                 +section.gridCols > 0 ? `repeat(${section.gridCols}, 1fr)` : '';
-
-            styleObj.gridTemplateRows =
-                +section.gridRows > 0 ? `repeat(${section.gridRows}, 1fr)` : '';
+            if (this.dashboardMode) {
+                styleObj.gridTemplateRows =
+                    +section.gridRows > 0
+                        ? `repeat(${section.gridRows}, 1fr)`
+                        : '';
+            }
         }
 
         const sectionContent = (