[WIP] Add option to override base grid configs

MisRob · Sep 19, 2024 · 61e95ea · 61e95ea
1 parent 9bfb21f
commit 61e95ea
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/lib/cards/KCardGrid.vue b/lib/cards/KCardGrid.vue
@@ -38,6 +38,9 @@
       watch(
         currentLevelConfig,
         newValue => {
+          if (!newValue) {
+            return;
+          }
           const { cardsPerRow, columnGap, rowGap } = newValue;
 
           gridStyle.value = {
@@ -85,6 +88,17 @@
           return [LAYOUT_1_1_1, LAYOUT_1_2_2, LAYOUT_1_2_3].includes(value);
         },
       },
+      // eslint-enable-next-line kolibri/vue-no-unused-properties
+      /**
+       * Overrides the base grid `layout` for chosen breakpoints levels
+       */
+      // eslint-disable-next-line kolibri/vue-no-unused-properties
+      layoutOverride: {
+        type: Object,
+        required: false,
+        default: null,
+      },
+      // eslint-enable-next-line kolibri/vue-no-unused-properties
     },
   };
 

diff --git a/lib/cards/useResponsiveGridLayout.js b/lib/cards/useResponsiveGridLayout.js
@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash/cloneDeep';
 import { watch, ref } from '@vue/composition-api';
 
 import useKResponsiveWindow from '../composables/useKResponsiveWindow';
@@ -26,9 +27,29 @@ export default function useResponsiveGridLayout(props) {
     const baseLayoutConfig = LAYOUT_CONFIGS[props.layout];
     const baseLevelConfig = baseLayoutConfig[LEVELS[breakpoint]];
 
-    return { ...baseLevelConfig };
+    // Deep clone to protect mutating LAYOUT_CONFIGS
+    const finalLevelConfig = cloneDeep(baseLevelConfig);
+
+    // Override if `layoutOverride` contains
+    // settings for the current breakpoint level
+    if (
+      props.layoutOverride &&
+      Object.keys(props.layoutOverride).length > 0 &&
+      Object.keys(props.layoutOverride).includes(LEVELS[breakpoint])
+    ) {
+      const levelOverride = props.layoutOverride[LEVELS[breakpoint]];
+
+      for (const key of ['cardsPerRow', 'columnGap', 'rowGap']) {
+        if (levelOverride[key]) {
+          finalLevelConfig[key] = levelOverride[key];
+        }
+      }
+    }
+
+    return finalLevelConfig;
   }
 
+  // TODO: Should levelOverride be reactive?
   watch(
     windowBreakpoint,
     (newBreakpoint, oldBreakpoint) => {