wave-ui 1.42.1 → 1.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.42.1",
+  "version": "1.44.0",
   "description": "An emerging UI framework for Vue.js & Vue 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

@@ -5,9 +5,10 @@ export { default as WApp } from './w-app.vue'
 export { default as WBadge } from './w-badge.vue'
 export { default as WBreadcrumbs } from './w-breadcrumbs.vue'
 export { default as WButton } from './w-button.vue'
+export { default as WCard } from './w-card.vue'
 export { default as WCheckbox } from './w-checkbox.vue'
 export { default as WCheckboxes } from './w-checkboxes.vue'
-export { default as WCard } from './w-card.vue'
+export { default as WConfirm } from './w-confirm.vue'
 export { default as WDatePicker } from './w-date-picker.vue'
 export { default as WDialog } from './w-dialog.vue'
 export { default as WDivider } from './w-divider.vue'

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-app(:class="{ 'theme--dark': dark, 'd-block': block }")
+.w-app(:class="classes")
   slot
   notification-manager
 </template>
@@ -16,7 +16,17 @@ export default {
   name: 'w-app',
   props: {
     dark: { type: Boolean },
-    block: { type: Boolean }
+    block: { type: Boolean },
+    row: { type: Boolean },
+    alignCenter: { type: Boolean },
+    alignEnd: { type: Boolean },
+    justifyCenter: { type: Boolean },
+    justifyEnd: { type: Boolean },
+    justifySpaceBetween: { type: Boolean },
+    justifySpaceAround: { type: Boolean },
+    justifySpaceEvenly: { type: Boolean },
+    textCenter: { type: Boolean },
+    textRight: { type: Boolean }
   },
 
   components: { NotificationManager },
@@ -26,6 +36,25 @@ export default {
     notifManager: null
   }),
 
+  computed: {
+    classes () {
+      return {
+        'd-block': this.block,
+        'row': this.row,
+        'align-center': this.alignCenter,
+        'align-end': this.alignEnd,
+        'justify-center': this.justifyCenter,
+        'justify-end': this.justifyEnd,
+        'justify-space-between': this.justifySpaceBetween,
+        'justify-space-around': this.justifySpaceAround,
+        'justify-space-evenly': this.justifySpaceEvenly,
+        'text-center': this.textCenter,
+        'text-right': this.textRight,
+        'theme--dark': this.dark
+      }
+    }
+  },
+
   methods: {
     getBreakpoint () {
       const width = window.innerWidth
@@ -85,6 +114,17 @@ export default {
   flex-direction: column;
   min-height: 100vh;
 
+  &.row {flex-direction: row;}
   &.d-block {display: block;}
+  &.align-center {align-items: center;}
+  &.align-end {align-items: flex-end;}
+  &.justify-center {justify-content: center;}
+  &.justify-end {justify-content: flex-end;}
+  &.justify-space-between {justify-content: space-between;}
+  &.justify-space-around {justify-content: space-around;}
+  &.justify-space-evenly {justify-content: space-evenly;}
+  &.text-center {text-align: center;}
+  &.text-right {text-align: right;}
+
 }
 </style>

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

@@ -2,12 +2,12 @@
 .w-card(:class="classes" :style="styles")
   .w-card__title(
     v-if="$slots.title"
-    :class="{ 'w-card__title--has-toolbar': titleHasToolbar, [titleClass]: titleClass || false }")
+    :class="{ 'w-card__title--has-toolbar': titleHasToolbar, ...titleClasses }")
     slot(name="title")
-  .w-card__title(v-else-if="title" :class="titleClass || false" v-html="title")
+  .w-card__title(v-else-if="title" :class="titleClasses" v-html="title")
   w-image.w-card__image(v-if="image" :src="image" v-bind="imgProps")
     slot(name="image-content")
-  .w-card__content(:class="contentClass || false")
+  .w-card__content(:class="contentClasses")
     slot
   .w-card__actions(
     v-if="$slots.actions"
@@ -16,6 +16,8 @@
 </template>
 
 <script>
+import { objectifyClasses } from '../utils/index'
+
 export default {
   name: 'w-card',
 
@@ -28,21 +30,31 @@ export default {
     title: { type: String },
     image: { type: String },
     imageProps: { type: Object },
-    titleClass: { type: String },
-    contentClass: { type: String }
+    titleClass: { type: [String, Object, Array] },
+    contentClass: { type: [String, Object, Array] }
   },
 
   emits: [],
 
   computed: {
+    titleClasses () {
+      return objectifyClasses(this.titleClass)
+    },
+
+    contentClasses () {
+      return objectifyClasses(this.contentClass)
+    },
+
     titleHasToolbar () {
       const { title } = this.$slots
       return title && title.map(vnode => vnode.tag).join('').includes('w-toolbar')
     },
+
     actionsHasToolbar () {
       const { actions } = this.$slots
       return actions && actions.map(vnode => vnode.tag).join('').includes('w-toolbar')
     },
+
     imgProps () {
       return {
         tag: 'div',
@@ -50,6 +62,7 @@ export default {
         ...this.imageProps
       }
     },
+
     classes () {
       return {
         [this.color]: this.color,
@@ -59,6 +72,7 @@ export default {
         'w-card--shadow': this.shadow
       }
     },
+
     styles () {
       return false
     }

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

@@ -0,0 +1,103 @@
+<template lang="pug">
+.w-confirm
+  w-menu(v-model="showPopup" v-bind="wMenuProps")
+    template(#activator="{ on }")
+      w-button.w-confirm__button(v-on="on" v-bind="buttonProps")
+        slot
+    w-flex(:column="!inline" align-center)
+      div
+        slot(name="question") Are you sure?
+      .w-flex.justify-end(:class="inline ? 'ml2' : 'mt2'")
+        w-button.mr2(
+          v-if="!noCancel"
+          v-bind="cancelButton"
+          :bg-color="(cancelButton || {}).bgColor || 'error'"
+          @click="onCancel")
+          slot(name="cancel") Cancel
+        w-button(
+          v-bind="confirmButton"
+          :bg-color="(confirmButton || {}).bgColor || 'success'"
+          @click="onConfirm")
+          slot(name="confirm") Confirm
+</template>
+
+<script>
+export default {
+  name: 'w-confirm',
+  props: {
+    // Main button props.
+    bgColor: { type: String },
+    color: { type: String },
+    icon: { type: String },
+    mainButton: { type: Object }, // Allow passing down an object of props to the w-button component.
+
+    // Cancel & confirm buttons props.
+    noCancel: { type: Boolean }, // Removes the cancel button.
+    cancelButton: { type: [Boolean, Object] }, // Allow passing down an object of props to the w-button component.
+    confirmButton: { type: Object }, // Allow passing down an object of props to the w-button component.
+
+    // global menu props.
+    inline: { type: Boolean }, // The layout inside the menu.
+
+    // W-menu props.
+    menu: { type: Object }, // Allow passing down an object of props to the w-menu component.
+    // All the menu props shorthands, as long as they don't conflict with the button props.
+    noArrow: { type: Boolean }, // Adds a directional triangle to the edge of the menu, like a tooltip.
+    top: { type: Boolean },
+    bottom: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    alignTop: { type: Boolean },
+    alignBottom: { type: Boolean },
+    alignLeft: { type: Boolean },
+    alignRight: { type: Boolean },
+    persistent: { type: Boolean },
+    transition: { type: String }
+  },
+
+  emits: ['cancel', 'confirm'],
+
+  data: () => ({
+    showPopup: false,
+    props: []
+  }),
+
+  computed: {
+    wMenuProps () {
+      return {
+        top: this.top,
+        bottom: this.bottom,
+        left: this.left,
+        right: this.right,
+        arrow: !this.noArrow,
+        alignTop: this.alignTop,
+        alignBottom: this.alignBottom,
+        alignLeft: this.alignLeft,
+        alignRight: this.alignRight,
+        persistent: this.persistent,
+        transition: this.transition,
+        ...this.menu
+      }
+    },
+    buttonProps () {
+      return {
+        bgColor: this.bgColor,
+        color: this.color,
+        icon: this.icon,
+        ...this.mainButton
+      }
+    }
+  },
+
+  methods: {
+    onCancel () {
+      this.$emit('cancel')
+      this.showPopup = false
+    },
+    onConfirm () {
+      this.$emit('confirm')
+      this.showPopup = false
+    }
+  }
+}
+</script>

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

@@ -119,9 +119,7 @@ export default {
   &.size--lg {font-size: round(1.7 * $base-font-size);}
   &.size--xl {font-size: 2 * $base-font-size;}
 
-  // Icon's vertical alignment in button.
-  .w-button &, .w-button &:before {line-height: inherit;}
-  // Always an even number to vertical align well in button.
+  // Always an even number to align well vertically in a button.
   .w-button.size--xs & {font-size: round(0.95 * divide($base-font-size, 2)) * 2;}
   .w-alert.size--xs & {font-size: $base-font-size;}
   .w-button.size--sm &, .w-alert.size--sm & {font-size: round(1.15 * $base-font-size);}

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

@@ -1,11 +1,10 @@
 <template lang="pug">
-.w-menu-wrap(ref="wrapper")
+.w-menu-wrap
   slot(name="activator" :on="activatorEventHandlers")
-  transition(:name="transitionName")
+  transition(:name="transitionName" appear)
     .w-menu(
-      v-if="custom"
+      v-if="custom && menuVisible"
       ref="menu"
-      v-show="showMenu"
       @click="hideOnMenuClick && closeMenu(true)"
       @mouseenter="showOnHover && (hoveringMenu = true)"
       @mouseleave="showOnHover && ((hoveringMenu = false), closeMenu())"
@@ -13,15 +12,14 @@
       :style="styles")
       slot
     w-card.w-menu(
-      v-else
+      v-else-if="menuVisible"
       ref="menu"
-      v-show="showMenu"
       @click.native="hideOnMenuClick && closeMenu(true)"
       @mouseenter.native="showOnHover && (hoveringMenu = true)"
       @mouseleave.native="showOnHover && ((hoveringMenu = false), closeMenu())"
       :tile="tile"
-      :title-class="titleClass"
-      :content-class="contentClass"
+      :title-class="titleClasses"
+      :content-class="contentClasses"
       :shadow="shadow"
       :no-border="noBorder"
       :class="classes"
@@ -34,12 +32,12 @@
   w-overlay(
     v-if="overlay"
     ref="overlay"
-    :value="showMenu"
+    :value="menuVisible"
     :persistent="persistent"
-    :class="overlayClass || null"
+    :class="overlayClasses"
     v-bind="overlayProps"
     :z-index="(zIndex || 200) - 1"
-    @input="showMenu = false")
+    @input="menuVisible = false")
 </template>
 
 <script>
@@ -52,6 +50,7 @@
  * and move the menu elsewhere in the DOM.
  */
 
+import { objectifyClasses } from '../utils/index'
 import { consoleWarn } from '../utils/console'
 
 // const marginFromWindowSide = 4 // Amount of px from a window side, instead of overflowing.
@@ -71,10 +70,11 @@ export default {
     round: { type: Boolean },
     noBorder: { type: Boolean },
     transition: { type: String },
-    menuClass: { type: String },
-    titleClass: { type: String },
-    contentClass: { type: String },
+    menuClass: { type: [String, Object, Array] },
+    titleClass: { type: [String, Object, Array] },
+    contentClass: { type: [String, Object, Array] },
     // Position.
+    arrow: { type: Boolean }, // The small triangle pointing toward the activator.
     detachTo: { type: [String, Boolean, Object] },
     fixed: { type: Boolean },
     top: { type: Boolean },
@@ -88,7 +88,7 @@ export default {
     zIndex: { type: [Number, String, Boolean] },
     minWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
     overlay: { type: Boolean },
-    overlayClass: { type: String },
+    overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object }, // Allow passing down an object of props to the w-overlay component.
     persistent: { type: Boolean },
     noPosition: { type: Boolean }
@@ -97,7 +97,7 @@ export default {
   emits: ['input', 'update:modelValue', 'open', 'close'],
 
   data: () => ({
-    showMenu: false,
+    menuVisible: false,
     hoveringActivator: false,
     hoveringMenu: false,
     // The menu computed top & left coordinates.
@@ -165,27 +165,46 @@ export default {
       )
     },
 
+    menuClasses () {
+      return objectifyClasses(this.menuClass)
+    },
+
+    titleClasses () {
+      return objectifyClasses(this.titleClass)
+    },
+
+    contentClasses () {
+      return objectifyClasses(this.contentClass)
+    },
+
+    overlayClasses () {
+      return objectifyClasses(this.overlayClass)
+    },
+
     classes () {
       return {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
-        [this.menuClass]: this.menuClass,
-        [`w-menu--${this.position}`]: true,
-        [`w-menu--align-${this.alignment}`]: this.alignment,
+        ...this.menuClasses,
+        [`w-menu--${this.position}`]: !this.noPosition,
+        [`w-menu--align-${this.alignment}`]: !this.noPosition && this.alignment,
         'w-menu--tile': this.tile,
         'w-menu--card': !this.custom,
         'w-menu--round': this.round,
+        'w-menu--arrow': this.arrow,
         'w-menu--shadow': this.shadow,
         'w-menu--fixed': this.fixed
       }
     },
 
+    // The floatting menu styles.
     styles () {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || (this.overlay && !this.zIndex && 200) || null,
         top: (this.menuCoordinates.top && `${~~this.menuCoordinates.top}px`) || null,
         left: (this.menuCoordinates.left && `${~~this.menuCoordinates.left}px`) || null,
-        minWidth: (this.minWidth && this.menuMinWidth) || null
+        minWidth: (this.minWidth && this.menuMinWidth) || null,
+        '--w-menu-bg-color': this.arrow && this.$waveui.colors[this.bgColor || 'white']
       }
     },
 
@@ -218,7 +237,7 @@ export default {
 
   methods: {
     toggleMenu (e) {
-      let shouldShowMenu = this.showMenu
+      let shouldShowMenu = this.menuVisible
       if ('ontouchstart' in window && this.showOnHover && e.type === 'click') {
         shouldShowMenu = !shouldShowMenu
       }
@@ -234,11 +253,20 @@ export default {
 
       this.timeoutId = clearTimeout(this.timeoutId)
 
-      if (shouldShowMenu) this.openMenu(e)
+      if (shouldShowMenu) {
+        this.$emit('update:modelValue', (this.menuVisible = true))
+        this.$emit('input', true)
+        this.$emit('open')
+
+        this.openMenu(e)
+      }
       else this.closeMenu()
     },
 
-    openMenu (e) {
+    async openMenu (e) {
+      this.menuVisible = true
+      await this.insertMenu()
+
       if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
 
       if (!this.noPosition) this.computeMenuPosition(e)
@@ -247,10 +275,10 @@ export default {
       // if we don't postpone the Menu apparition it will start transition from a visible menu and
       // thus will not transition.
       this.timeoutId = setTimeout(() => {
-        this.$emit('update:modelValue', (this.showMenu = true))
+        this.$emit('update:modelValue', true)
         this.$emit('input', true)
         this.$emit('open')
-      }, 10)
+      }, 0)
 
       if (!this.persistent) document.addEventListener('mousedown', this.onOutsideMousedown)
       if (!this.noPosition) window.addEventListener('resize', this.onResize)
@@ -269,14 +297,14 @@ export default {
     async closeMenu (force = false) {
       // Might be already closed.
       // E.g. showOnHover & hideOnMenuClick: on click, force hide then mouseleave is also firing.
-      if (!this.showMenu) return
+      if (!this.menuVisible) return
 
       if (this.showOnHover && !force) {
         await new Promise(resolve => setTimeout(resolve, 10))
         if (this.showOnHover && (this.hoveringMenu || this.hoveringActivator)) return
       }
 
-      this.$emit('update:modelValue', (this.showMenu = false))
+      this.$emit('update:modelValue', (this.menuVisible = false))
       this.$emit('input', false)
       this.$emit('close')
       // Remove the mousedown listener if the menu got closed without a mousedown outside of the menu.
@@ -286,7 +314,7 @@ export default {
 
     onOutsideMousedown (e) {
       if (!this.menuEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
-        this.$emit('update:modelValue', (this.showMenu = false))
+        this.$emit('update:modelValue', (this.menuVisible = false))
         this.$emit('input', false)
         this.$emit('close')
         document.removeEventListener('mousedown', this.onOutsideMousedown)
@@ -401,49 +429,53 @@ export default {
       this.menuEl.style.visibility = null
 
       // The menu coordinates are also recalculated while resizing window with open menu: keep the menu visible.
-      if (!this.showMenu) this.menuEl.style.display = 'none'
+      if (!this.menuVisible) this.menuEl.style.display = 'none'
 
       this.menuCoordinates = { top, left }
     },
 
     insertMenu () {
-      const wrapper = this.$refs.wrapper
-      this.menuEl = this.$refs.menu.$el || this.$refs.menu
-      // Unwrap the activator element.
-      wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
-
-      // Unwrap the overlay.
-      if (this.overlay) wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
-
-      // Move the menu elsewhere in the DOM.
-      // wrapper.parentNode.insertBefore(this.menuEl, wrapper)
-      this.detachToTarget.appendChild(this.menuEl)
+      return new Promise(resolve => {
+        this.$nextTick(() => {
+          this.menuEl = this.$refs.menu?.$el || this.$refs.menu
+
+          // Move the menu elsewhere in the DOM.
+          // wrapper.parentNode.insertBefore(this.menuEl, wrapper)
+          this.detachToTarget.appendChild(this.menuEl)
+          resolve()
+        })
+      })
     },
 
     removeMenu () {
-      // el.remove() doesn't work on IE11.
-      if (this.menuEl && this.menuEl.parentNode) this.menuEl.parentNode.removeChild(this.menuEl)
+      if (this.menuEl && this.menuEl.parentNode) this.menuEl.remove()
     }
   },
 
   mounted () {
-    this.activatorEl = this.$refs.wrapper.firstElementChild
-    this.overlayEl = this.overlay ? this.$refs.overlay.$el : null
-    this.insertMenu()
+    const wrapper = this.$el
+    this.activatorEl = wrapper.firstElementChild
+    // Unwrap the activator element.
+    wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
+
+    // Unwrap the overlay.
+    if (this.overlay) {
+      this.overlayEl = this.$refs.overlay?.$el
+      wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
+    }
 
     if (this.value) this.toggleMenu({ type: 'click', target: this.activatorEl })
   },
 
   beforeDestroy () {
     this.removeMenu()
-    // el.remove() doesn't work on IE11.
-    if (this.overlay && this.overlayEl.parentNode) this.overlayEl.parentNode.removeChild(this.overlayEl)
-    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.parentNode.removeChild(this.activatorEl)
+    if (this.overlay && this.overlayEl.parentNode) this.overlayEl.remove()
+    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.remove()
   },
 
   watch: {
     value (bool) {
-      if (!!bool !== this.showMenu) this.toggleMenu({ type: 'click', target: this.activatorEl })
+      if (!!bool !== this.menuVisible) this.toggleMenu({ type: 'click', target: this.activatorEl })
     },
     detachTo () {
       this.removeMenu()
@@ -473,5 +505,14 @@ export default {
   &--bottom {margin-top: 3 * $base-increment;}
   &--left {margin-left: -3 * $base-increment;}
   &--right {margin-left: 3 * $base-increment;}
+
+  &--arrow {
+    &.w-menu--top {margin-top: -4 * $base-increment;}
+    &.w-menu--bottom {margin-top: 4 * $base-increment;}
+    &.w-menu--left {margin-left: -4 * $base-increment;}
+    &.w-menu--right {margin-left: 4 * $base-increment;}
+
+    @include triangle(var(--w-menu-bg-color), '.w-menu', 9px);
+  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 .w-tooltip-wrap(ref="wrapper" :class="{ 'w-tooltip-wrap--attached': !detachTo }")
   slot(name="activator" :on="eventHandlers")
-  transition(:name="transitionName")
+  transition(:name="transitionName" appear)
     .w-tooltip(ref="tooltip" v-show="showTooltip" :class="classes" :style="styles")
       //- When there is a bg color, another div wrapper is needed for the triangle
       //- to inherit the current color.
@@ -20,6 +20,7 @@
  * and move the tooltip elsewhere in the DOM.
  */
 
+import { objectifyClasses } from '../utils/index'
 import { consoleWarn } from '../utils/console'
 
 const marginFromWindowSide = 4 // Amount of px from a window side, instead of overflowing.
@@ -36,8 +37,8 @@ export default {
     shadow: { type: Boolean },
     tile: { type: Boolean },
     round: { type: Boolean },
-    transition: { type: String, default: '' },
-    tooltipClass: { type: String },
+    transition: { type: String },
+    tooltipClass: { type: [String, Object, Array] },
     // Position.
     detachTo: {},
     fixed: { type: Boolean },
@@ -65,6 +66,10 @@ export default {
   }),
 
   computed: {
+    tooltipClasses () {
+      return objectifyClasses(this.tooltipClass)
+    },
+
     transitionName () {
       const direction = this.position.replace(/top|bottom/, m => ({ top: 'up', bottom: 'down' }[m]))
       return this.transition || `w-tooltip-slide-fade-${direction}`
@@ -137,7 +142,7 @@ export default {
       return {
         [this.color]: !this.bgColor,
         [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor,
-        [this.tooltipClass]: this.tooltipClass,
+        ...this.tooltipClasses,
         [`w-tooltip--${this.position}`]: true,
         'w-tooltip--tile': this.tile,
         'w-tooltip--round': this.round,
@@ -274,8 +279,7 @@ export default {
     },
 
     removeTooltip () {
-      // el.remove() doesn't work on IE11.
-      if (this.tooltipEl && this.tooltipEl.parentNode) this.tooltipEl.parentNode.removeChild(this.tooltipEl)
+      if (this.tooltipEl && this.tooltipEl.parentNode) this.tooltipEl.remove()
     }
 
   },
@@ -290,8 +294,7 @@ export default {
   beforeDestroy () {
     this.removeTooltip()
 
-    // el.remove() doesn't work on IE11.
-    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.parentNode.removeChild(this.activatorEl)
+    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.remove()
   },
 
   watch: {