wave-ui 1.49.2 → 1.50.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wave-ui",
-  "version": "1.49.2",
-  "description": "An emerging UI framework for Vue.js & Vue 3 with only the bright side. :sunny:",
+  "version": "1.50.1",
+  "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",
   "unpkg": "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-dialog.vue

@@ -9,7 +9,7 @@ w-overlay.w-dialog(
   :class="classes")
   transition(:name="transition" appear @after-leave="onClose")
     w-card.w-dialog__content(
-      v-if="showContent"
+      v-show="showContent"
       no-border
       :color="color"
       :bg-color="bgColor"

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/components/w-progress.vue

@@ -1,7 +1,10 @@
 <template lang="pug">
 .w-progress(:class="classes" :style="styles")
   //- Linear progress.
-  .w-progress__progress(v-if="!circle" :class="{ full: progressValue === 100 }" :style="`width: ${progressValue}%`")
+  .w-progress__progress(
+    v-if="!circle"
+    :class="{ full: progressValue === 100 }"
+    :style="`width: ${progressValue}%`")
 
   //- Circular progress.
   template(v-else)

package/src/wave-ui/core.js

@@ -79,14 +79,6 @@ export default class WaveUI {
       // Merge user options into the default config.
       mergeConfig(options)
 
-      // @todo: remove this warning in version 1.40+.
-      if (config.disableColorShades) {
-        consoleWarn(
-          'WARNING - Since version 1.30, the option `disableColorShades` is replaced with `css.colorShades`.\n' +
-          'https://antoniandre.github.io/wave-ui/release-notes'
-        )
-      }
-
       // Add color shades for each custom color given in options.
       if (config.css.colorShades) {
         config.colorShades = {}

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/scss/_mixins.scss

@@ -6,14 +6,11 @@
   transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
 }
 
-/**
- * Generates a triangle arrow on the edge of an element.
- *
- * @param $color: the color to apply to the triangle.
- * @param $selector: the element selector that receives the modifiers (--top, --left, etc.).
- * @param $size: the triangle size at the base.
- * @param $thickness: the border thickness, 0 to remove the border.
- */
+// Generates a triangle arrow on the edge of an element.
+// @param $color: the color to apply to the triangle.
+// @param $selector: the element selector that receives the modifiers (--top, --left, etc.).
+// @param $size: the triangle size at the base.
+// @param $thickness: the border thickness, 0 to remove the border.
 @mixin triangle($color: white, $selector: '', $size: 7px, $thickness: 1px) {
   @if ($thickness > 0) {
     // The underneath border triangle.

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}` +
         '}'
     }
   })