feat(Grid): add new wrap prop

gitsindonesia · Sep 18, 2023 · 995fb7a · 995fb7a
1 parent 6e4e541
commit 995fb7a
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 13 deletions.
diff --git a/packages/layouts/src/Grid.stories.ts b/packages/layouts/src/Grid.stories.ts
@@ -1,10 +1,10 @@
 import {VSelect} from '@morpheme/select';
-import {alignItems, justifyContent} from './grid';
+import {alignItems, flexWrap, justifyContent} from './grid';
 import {VCard} from '@morpheme/card';
 import {StoryFn} from '@storybook/vue3';
 import VRow from './VRow.vue';
 import VCol from './VCol.vue';
-import {reactive} from 'vue';
+import {reactive, ref} from 'vue';
 
 export default {
   title: 'Components/Grid',
@@ -31,7 +31,7 @@ export const Cols: StoryFn = (args) => ({
     return {args};
   },
   template: `
-  <VRow gap="0">
+  <VRow gap="4">
     <VCol cols="1" class="bg-red-300 text-center">
       1
     </VCol>
@@ -51,7 +51,7 @@ export const Offset: StoryFn = (args) => ({
     return {args};
   },
   template: `
-  <VRow gap="0">
+  <VRow gap="4">
     <VCol cols="3" class="bg-red-100 text-center">
       1
     </VCol>
@@ -71,7 +71,41 @@ export const Order: StoryFn = (args) => ({
     return {args};
   },
   template: `
-  <VRow gap="0">
+  <VRow gap="4">
+    <VCol cols="4" order="2" class="bg-red-100 text-center">
+      1
+    </VCol>
+    <VCol cols="4" order="3" class="bg-green-100 text-center">
+      2
+    </VCol>
+    <VCol cols="4" order="1" class="bg-blue-100 text-center">
+      3
+    </VCol>
+  </VRow>
+  `,
+});
+
+function toItems(obj: any) {
+  return Object.keys(obj).map((key) => ({
+    text: obj[key],
+    value: key,
+  }));
+}
+
+export const Wrap: StoryFn = (args) => ({
+  components: {VRow, VCol, VSelect},
+  setup() {
+    const wrap = ref('');
+    return {
+      args,
+      wrap,
+      wrapItems: toItems(flexWrap),
+    };
+  },
+  template: `
+  <VSelect wrapper-class="mb-4" v-model="wrap" label="Wrap" :items="wrapItems" />
+  
+  <VRow gap="4" :wrap="wrap">
     <VCol cols="4" order="2" class="bg-red-100 text-center">
       1
     </VCol>
@@ -93,12 +127,6 @@ export const Alignment: StoryFn = (args) => ({
       alignContent: 'center',
       justifyContent: 'center',
     });
-    function toItems(obj: any) {
-      return Object.keys(obj).map((key) => ({
-        text: obj[key],
-        value: key,
-      }));
-    }
 
     return {
       args,
@@ -165,3 +193,45 @@ export const Responsive: StoryFn = (args) => ({
   </VRow>
   `,
 });
+
+export const LayoutExample: StoryFn = (args) => ({
+  components: {VRow, VCol, VCard},
+  setup() {
+    const stats = [
+      {
+        title: 'Total Subscribers',
+        value: '71,897',
+        color: '',
+      },
+      {
+        title: 'Avg. Open Rate',
+        value: '58.16%',
+      },
+      {
+        title: 'Avg. Click Rate',
+        value: '24.57%',
+      },
+      {
+        title: 'Avg. Bounce Rate',
+        value: '4.24%',
+      },
+    ];
+    return {args, stats};
+  },
+  template: `
+  <VRow gap="4">
+    <VCol
+      cols="12"
+      sm="3"
+      v-for="stat in stats"
+      :key="stat.title"
+    >
+      <VCard :title="stat.title">
+        <div class="text-xl font-bold">
+          {{ stat.value }}
+        </div>
+      </VCard>
+    </VCol>
+  </VRow>
+  `,
+});
diff --git a/packages/layouts/src/VRow.vue b/packages/layouts/src/VRow.vue
@@ -21,8 +21,13 @@ withDefaults(
     alignXl?: string;
     alignContentXl?: string;
     justifyContentXl?: string;
+    wrap?: string;
+    wrapSm?: string;
+    wrapMd?: string;
+    wrapLg?: string;
+    wrapXl?: string;
   }>(),
-  {}
+  {},
 );
 </script>
 
@@ -51,6 +56,11 @@ withDefaults(
         [`v-row--align-xl-${alignXl}`]: !!alignXl,
         [`v-row--align-content-xl-${alignContentXl}`]: !!alignContentXl,
         [`v-row--justify-xl-${justifyContentXl}`]: !!justifyContentXl,
+        [`v-row--wrap-${wrap}`]: !!wrap,
+        [`v-row--wrap-sm-${wrapSm}`]: !!wrapSm,
+        [`v-row--wrap-md-${wrapMd}`]: !!wrapMd,
+        [`v-row--wrap-lg-${wrapLg}`]: !!wrapLg,
+        [`v-row--wrap-xl-${wrapXl}`]: !!wrapXl,
       },
     ]"
   >

diff --git a/packages/layouts/src/grid.ts b/packages/layouts/src/grid.ts
@@ -23,3 +23,9 @@ export const justifyContent = {
   'space-around': 'space-around',
   'space-evenly': 'space-evenly',
 };
+
+export const flexWrap = {
+  nowrap: 'nowrap',
+  wrap: 'wrap',
+  'wrap-reverse': 'wrap-reverse',
+};
diff --git a/packages/themes/src/morpheme/_grid.scss b/packages/themes/src/morpheme/_grid.scss
@@ -36,6 +36,11 @@ $justifyContent: (
   space-around: space-around,
   space-evenly: space-evenly,
 );
+$flexWrap: (
+  wrap: wrap,
+  'wrap-reverse': wrap-reverse,
+  nowrap: nowrap,
+);
 
 @mixin breakpoint($name) {
   $maxWidth: map-get($breakpoints, $name);
@@ -80,9 +85,14 @@ $justifyContent: (
 
 .v-row {
   display: flex;
-  flex-wrap: wrap;
   flex: 1 1 auto;
 
+  @each $name, $value in $flexWrap {
+    &--wrap-#{$name} {
+      @include alignment-justification('wrap', 'flex-wrap', $value);
+    }
+  }
+
   @each $name, $value in $alignItems {
     &--align-#{$name} {
       @include alignment-justification('align', 'align-items', $value);
@@ -121,6 +131,13 @@ $justifyContent: (
 
   @each $name, $maxWidth in $breakpoints {
     @for $i from 1 through $v-col-max-cols {
+      &-#{$name}-auto {
+        @media (min-width: $maxWidth) {
+          flex: 0 0 auto;
+          width: auto;
+          max-width: none;
+        }
+      }
       &-#{$name}-#{$i} {
         @media (min-width: $maxWidth) {
           @include v-col-width($i);