feat(VsContainer): add grid-size prop (chromatic-build) (#267)

pubg · Aug 19, 2024 · 9206dfa · 9206dfa
1 parent 92e04af
commit 9206dfa
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/packages/vlossom/src/components/vs-container/VsContainer.scss b/packages/vlossom/src/components/vs-container/VsContainer.scss
@@ -7,6 +7,6 @@
     &.vs-grid {
         // for grid css
         display: grid;
-        grid-template-columns: repeat(12, minmax(0, 1fr));
+        grid-template-columns: repeat(var(--vs-grid-size, 12), minmax(0, 1fr));
     }
 }
diff --git a/packages/vlossom/src/components/vs-container/VsContainer.vue b/packages/vlossom/src/components/vs-container/VsContainer.vue
@@ -18,14 +18,15 @@ export default defineComponent({
         tag: { type: String, default: 'div' },
     },
     setup(props) {
-        const { columnGap, grid, rowGap } = toRefs(props);
+        const { columnGap, grid, gridSize, rowGap } = toRefs(props);
 
         const gridStyles = computed(() => {
             if (!grid.value) {
                 return {};
             }
 
             return {
+                '--vs-grid-size': String(gridSize.value),
                 rowGap: utils.string.convertToStringSize(rowGap.value),
                 columnGap: utils.string.convertToStringSize(columnGap.value),
             };

diff --git a/packages/vlossom/src/components/vs-container/__tests__/vs-container.test.ts b/packages/vlossom/src/components/vs-container/__tests__/vs-container.test.ts
@@ -29,7 +29,7 @@ describe('vs-container', () => {
             });
 
             // then
-            expect(wrapper.vm.gridStyles).toEqual({ rowGap: '2rem', columnGap: '0px' });
+            expect(wrapper.vm.gridStyles).toMatchObject({ rowGap: '2rem', columnGap: '0px' });
         });
 
         it('rowGap을 숫자로만 입력하면 px단위로 rowGap style을 적용한다', () => {
@@ -39,7 +39,7 @@ describe('vs-container', () => {
             });
 
             // then
-            expect(wrapper.vm.gridStyles).toEqual({ rowGap: '20px', columnGap: '0px' });
+            expect(wrapper.vm.gridStyles).toMatchObject({ rowGap: '20px', columnGap: '0px' });
         });
 
         it('columnGap을 단위와 함께 입력하면 columnGap style을 적용한다', () => {
@@ -49,7 +49,7 @@ describe('vs-container', () => {
             });
 
             // then
-            expect(wrapper.vm.gridStyles).toEqual({ rowGap: '0px', columnGap: '2rem' });
+            expect(wrapper.vm.gridStyles).toMatchObject({ rowGap: '0px', columnGap: '2rem' });
         });
 
         it('columnGap을 숫자로만 입력하면 px단위로 columnGap style을 적용한다', () => {
@@ -59,7 +59,7 @@ describe('vs-container', () => {
             });
 
             // then
-            expect(wrapper.vm.gridStyles).toEqual({ rowGap: '0px', columnGap: '20px' });
+            expect(wrapper.vm.gridStyles).toMatchObject({ rowGap: '0px', columnGap: '20px' });
         });
     });
 

diff --git a/packages/vlossom/src/components/vs-form/VsForm.vue b/packages/vlossom/src/components/vs-form/VsForm.vue
@@ -3,6 +3,7 @@
         tag="form"
         class="vs-form"
         :grid="grid"
+        :grid-size="gridSize"
         :column-gap="columnGap"
         :row-gap="rowGap"
         :autocomplete="autocomplete ? 'on' : 'off'"

diff --git a/packages/vlossom/src/composables/responsive-composable.ts b/packages/vlossom/src/composables/responsive-composable.ts
@@ -28,6 +28,7 @@ export function getGridProps(name: string) {
             },
         },
         grid: { type: Boolean, default: false },
+        gridSize: { type: [String, Number], default: 12 },
         rowGap: {
             type: [Number, String],
             default: 0,