wave-ui 2.31.3 → 2.32.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.31.3",
+  "version": "2.32.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",

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

@@ -48,7 +48,7 @@ export default {
     ligature () {
       if (!config.iconsLigature) return false
 
-      const [fontName, icon] = this.$slots.default()[0].children
+      const [fontName, icon] = this.icon.split(' ')
       return fontName === config.iconsLigature && { fontName, icon }
     },
     forcedSize () {
@@ -66,7 +66,7 @@ export default {
     },
     classes () {
       return {
-        [this.$slots.default()[0].children]: true,
+        [this.icon]: true,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -87,6 +87,16 @@ export default {
     styles () {
       return this.forcedSize && `font-size: ${this.forcedSize}`
     }
+  },
+
+  created () {
+    this.icon = this.$slots.default && this.$slots.default()[0].children
+  },
+
+  // Using the slot content directly in the classes computed is not always reacting to changes.
+  // https://github.com/antoniandre/wave-ui/issues/81
+  updated () {
+    this.icon = this.$slots.default && this.$slots.default()[0].children
   }
 }
 </script>

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

@@ -19,92 +19,6 @@ ul.w-list(:class="classes")
       :is="checklist ? 'w-checkbox' : (nav && !li.disabled && li.route ? (hasRouter ? 'router-link' : 'a') : 'div')"
       v-bind="liLabelProps(li, i, li._selected)")
 
-    //- Vue 2.x only. Keep this comment to simplify the master branch merge into next.
-    //-----------------------------------------------------
-    //- When there are slots.
-    //- template(v-if="$slots[`item.${i + 1}`] || $slots.item || $slots.default")
-      //- Checklist items. (separated case cz it needs a @click.native, can't be in v-on)
-      w-checkbox.w-list__item-label(
-        v-if="checklist"
-        v-bind="liLabelProps(li, i, li._selected)"
-        v-on="liLabelEvents(li)"
-        @click.native="onCheckboxWrapperClick")
-        slot(
-          v-if="$slots[`item.${i + 1}`] && $slots[`item.${i + 1}`]()"
-          :name="`item.${i + 1}`"
-          :item="cleanLi(li)"
-          :index="i + 1"
-          :selected="li._selected")
-        slot(
-          v-else-if="$slots.item"
-          name="item"
-          :item="cleanLi(li)"
-          :index="i + 1"
-          :selected="li._selected")
-        slot(v-else :item="cleanLi(li)" :index="i + 1" :selected="li._selected") {{ li._label }}
-      //- Router link list items. (separated case cz it needs a @click.native, can't be in v-on)
-      router-link.w-list__item-label(
-        v-else-if="nav && !li.disabled && li[itemRouteKey] && hasRouter"
-        v-bind="liLabelProps(li, i, li._selected)"
-        v-on="liLabelEvents(li)"
-        @click.native="$emit('item-select', cleanLi(li))")
-        slot(
-          v-if="$slots[`item.${i + 1}`] && $slots[`item.${i + 1}`]()"
-          :name="`item.${i + 1}`"
-          :item="cleanLi(li)"
-          :index="i + 1"
-          :selected="li._selected")
-        slot(
-          v-else-if="$slots.item"
-          name="item"
-          :item="cleanLi(li)"
-          :index="i + 1"
-          :selected="li._selected")
-        slot(v-else :item="cleanLi(li)" :index="i + 1" :selected="li._selected") {{ li._label }}
-      //- Nav & simple list items.
-      component.w-list__item-label(
-        v-else
-        :is="nav && !li.disabled && li[itemRouteKey] ? 'a' : 'div'"
-        v-bind="liLabelProps(li, i, li._selected)"
-        v-on="liLabelEvents(li)")
-        slot(
-          v-if="$slots[`item.${i + 1}`] && $slots[`item.${i + 1}`]()"
-          :name="`item.${i + 1}`"
-          :item="cleanLi(li)"
-          :index="i + 1"
-          :selected="li._selected")
-        slot(
-          v-else-if="$slots.item"
-          name="item"
-          :item="cleanLi(li)"
-          :index="i + 1"
-          :selected="li._selected")
-        slot(v-else :item="cleanLi(li)" :index="i + 1" :selected="li._selected") {{ li._label }}
-
-    //- When there are no slots.
-    //- template(v-else)
-      //- Checklist items. (separated case cz it needs a @click.native, can't be in v-on)
-      w-checkbox.w-list__item-label(
-        v-if="checklist"
-        v-bind="liLabelProps(li, i, li._selected)"
-        v-on="liLabelEvents(li)"
-        @click.native="onCheckboxWrapperClick")
-      //- Router link list items. (separated case cz it needs a @click.native, can't be in v-on)
-      router-link.w-list__item-label(
-        v-else-if="nav && !li.disabled && li[itemRouteKey] && hasRouter"
-        v-bind="liLabelProps(li, i, li._selected)"
-        v-on="liLabelEvents(li)"
-        @click.native="$emit('item-select', cleanLi(li))"
-        v-html="li._label")
-      //- Nav & simple list items.
-      component.w-list__item-label(
-        v-else
-        :is="nav && !li.disabled && li[itemRouteKey] ? 'a' : 'div'"
-        v-bind="liLabelProps(li, i, li._selected)"
-        v-on="liLabelEvents(li)"
-        v-html="li._label")
-    //-----------------------------------------------------
-
     //- Children lists.
     w-list(
       v-if="(li.children || []).length"

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