wave-ui 2.31.4 → 2.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.31.4",
+  "version": "2.32.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",

package/src/wave-ui/components/index.js

@@ -16,6 +16,7 @@ export { default as WDrawer } from './w-drawer.vue'
 export { default as WFlex } from './w-flex.vue'
 export { default as WForm } from './w-form.vue'
 export { default as WFormElement } from './w-form-element.vue'
+export { default as WGrid } from './w-grid.vue'
 export { default as WIcon } from './w-icon.vue'
 export { default as WImage } from './w-image.vue'
 export { default as WInput } from './w-input.vue'

package/src/wave-ui/components/w-flex.vue

@@ -1,8 +1,5 @@
 <template lang="pug">
-component.w-flex-wrap(v-if="gap" :is="tag")
-  .w-flex(:class="classes")
-    slot
-component.w-flex(v-else :class="classes" :is="tag")
+component.w-flex(:class="classes" :is="tag")
   slot
 </template>
 
@@ -28,7 +25,7 @@ export default {
     justifySpaceAround: { type: Boolean },
     justifySpaceEvenly: { type: Boolean },
     basisZero: { type: Boolean },
-    gap: { type: Number, default: 0 }
+    gap: { type: [Number, String], default: 0 }
   },
 
   computed: {
@@ -51,7 +48,7 @@ export default {
         'justify-space-around': this.justifySpaceAround,
         'justify-space-evenly': this.justifySpaceEvenly,
         'basis-zero': this.basisZero,
-        [`w-flex--gap${this.gap}`]: this.gap
+        [`gap${this.gap}`]: ~~this.gap
       }
     }
   }
@@ -68,12 +65,5 @@ export default {
   &.wrap {flex-wrap: wrap;}
   &.basis-zero > * {flex-basis: 0;flex-grow: 1;}
   &.basis-zero > .no-grow, &.basis-zero > .shrink {flex-grow: 0;}
-
-  @for $i from 1 through 12 {
-    // Divide by 2 as there are 2 elements having this space.
-    $space: round($base-increment * divide($i, 2));
-    &--gap#{$i} {margin: -$space;}
-    &--gap#{$i} > * {margin: $space;}
-  }
 }
 </style>

package/src/wave-ui/components/w-grid.vue

@@ -0,0 +1,82 @@
+<template lang="pug">
+component.w-grid(:class="classes" :is="tag")
+  slot
+</template>
+
+<script>
+export default {
+  name: 'w-grid',
+  props: {
+    tag: { type: String, default: 'div' },
+    columns: { type: [Number, Object, String] },
+    gap: { type: [Number, Object, String], default: 0 }
+  },
+
+  computed: {
+    breakpointsColumns () {
+      let columns = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 }
+      switch (typeof this.columns) {
+        case 'object':
+          columns = Object.assign(columns, this.columns)
+          break
+        case 'number':
+        case 'string':
+          columns = Object.keys(columns).reduce((obj, breakpoint) => (obj[breakpoint] = ~~this.columns), {})
+          break
+        default:
+          break
+      }
+      return columns
+    },
+
+    breakpointsGap () {
+      let gap = { xs: 0, sm: 0, md: 0, lg: 0, xl: 0 }
+      switch (typeof this.gap) {
+        case 'object':
+          gap = Object.assign(gap, this.gap)
+          break
+        case 'number':
+        case 'string':
+          gap = Object.keys(gap).reduce((obj, breakpoint) => (obj[breakpoint] = ~~this.gap), {})
+          break
+        default:
+          break
+      }
+      return gap
+    },
+
+    classes () {
+      let breakpointsColumns = null
+      if (typeof this.columns === 'object') {
+        breakpointsColumns = Object.entries(this.breakpointsColumns).reduce((obj, [breakpoint, columns]) => {
+          obj[`${breakpoint}-columns${columns}`] = true
+          return obj
+        }, {})
+      }
+
+      let breakpointsGap = null
+      if (typeof this.gap === 'object') {
+        breakpointsGap = Object.entries(this.breakpointsGap).reduce((obj, [breakpoint, gap]) => {
+          obj[`${breakpoint}-gap${gap}`] = true
+          return obj
+        }, {})
+      }
+
+      return {
+        ...(breakpointsColumns || { [`columns${this.columns}`]: this.columns }),
+        ...(breakpointsGap || { [`gap${this.gap}`]: this.gap })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.w-grid {
+  display: grid;
+
+  @for $i from 1 through 12 {
+    &.columns#{$i} {grid-template-columns: repeat($i, 1fr);}
+  }
+}
+</style>

package/src/wave-ui/scss/_layout.scss

@@ -212,3 +212,8 @@
     // ----------------------------------------------
   }
 }
+
+@for $i from 1 through 12 {
+  .w-flex.gap#{$i}, .w-grid.gap#{$i} {gap: round($base-increment * $i);}
+}
+.w-flex.gap0, .w-grid.gap0 {gap: 0;}

package/src/wave-ui/utils/dynamic-css.js

@@ -150,7 +150,7 @@ const generateBreakpointSpaces = () => {
 
 const genBreakpointLayoutClasses = () => {
   let styles = ''
-  const { cssScope } = cssVars
+  const { cssScope, baseIncrement } = cssVars
   const layoutClasses = [
     'show{display:block}',
     'hide{display:none}',
@@ -185,6 +185,7 @@ const genBreakpointLayoutClasses = () => {
     'justify-space-around{justify-content:space-around}',
     'justify-space-evenly{justify-content:space-evenly}'
   ]
+  const array12 = Array(12).fill()
 
   // Define media queries for each breakpoint: xs, sm, md, lg, xl.
 
@@ -194,6 +195,10 @@ const genBreakpointLayoutClasses = () => {
       styles +=
         `@media(min-width:${min}px){` +
         layoutClasses.map(rule => `${cssScope} .${label}u-${rule}`).join('') +
+        // w-grid columns and gap.
+        array12.map((item, i) => `.w-grid.${label}u-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+        array12.map((item, i) => `.w-flex.${label}u-gap${i + 1},.w-grid.${label}u-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+        `.w-flex.${label}u-gap0,.w-flex.${label}u-gap0{gap:0}` +
         '}'
     }
   })
@@ -202,6 +207,10 @@ const genBreakpointLayoutClasses = () => {
     styles +=
       `@media (min-width:${min}px) and (max-width:${max}px){` +
       layoutClasses.map(rule => `${cssScope} .${label}-${rule}`).join('') +
+      // w-grid columns and gap.
+      array12.map((item, i) => `.w-grid.${label}-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+      array12.map((item, i) => `.w-flex.${label}-gap${i + 1},.w-grid.${label}-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+      `.w-flex.${label}-gap0,.w-flex.${label}-gap0{gap:0}` +
       '}'
   })
 
@@ -210,6 +219,10 @@ const genBreakpointLayoutClasses = () => {
       styles +=
         `@media (max-width:${max}px){` +
         layoutClasses.map(rule => `${cssScope} .${label}d-${rule}`).join('') +
+        // w-grid columns and gap.
+        array12.map((item, i) => `.w-grid.${label}d-columns${i + 1}{grid-template-columns:repeat(${i + 1},1fr);}`).join('') +
+        array12.map((item, i) => `.w-flex.${label}d-gap${i + 1},.w-grid.${label}d-gap${i + 1}{gap:${(i + 1) * baseIncrement}px;}`).join('') +
+        `.w-flex.${label}d-gap0,.w-flex.${label}d-gap0{gap:0}` +
         '}'
     }
   })