fix(grid): make styles overridable via CSS (#321) (#323)

fix #321
globalbrain · Jul 31, 2023 · 843dd2b · 843dd2b
1 parent 4f111b1
commit 843dd2b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/lib/components/SGrid.vue b/lib/components/SGrid.vue
@@ -8,8 +8,8 @@ const props = defineProps<{
 
 const styles = computed(() => {
   return {
-    gridTemplateColumns: `repeat(${props.cols ?? 1}, minmax(0, 1fr))`,
-    gap: `${props.gap ?? 0}px`
+    '--grid-template-columns': `repeat(${props.cols ?? 1}, minmax(0, 1fr))`,
+    '--gap': `${props.gap ?? 0}px`
   }
 })
 </script>
@@ -23,5 +23,7 @@ const styles = computed(() => {
 <style scoped lang="postcss">
 .SGrid {
   display: grid;
+  grid-template-columns: var(--grid-template-columns);
+  gap: var(--gap);
 }
 </style>
diff --git a/tests/components/SGrid.spec.ts b/tests/components/SGrid.spec.ts
@@ -8,6 +8,17 @@ describe('components/SGrid', () => {
       const wrapper = mount(SGrid)
       expect(wrapper.find('.SGrid').exists()).toBe(true)
     })
+
+    test('adds proper grid-template-columns and gap styles', () => {
+      const wrapper = mount(SGrid, {
+        propsData: {
+          cols: 3,
+          gap: 10
+        }
+      })
+      expect(wrapper.html()).toContain('--grid-template-columns: repeat(3, minmax(0, 1fr));')
+      expect(wrapper.html()).toContain('--gap: 10px;')
+    })
   })
 
   describe('SGridItem', () => {