wave-ui 2.23.0 → 2.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.23.0",
+  "version": "2.27.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",
@@ -43,28 +43,29 @@
     "*.vue"
   ],
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/eslint-parser": "^7.14.4",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
     "@mdi/font": "^5.9.55",
-    "@vitejs/plugin-vue": "^1.2.2",
+    "@vitejs/plugin-vue": "^1.9.4",
     "@vue/compiler-sfc": "3.1.5",
-    "autoprefixer": "^10.2.5",
-    "axios": "^0.21.1",
-    "eslint": "^7.28.0",
+    "autoprefixer": "^10.4.0",
+    "axios": "^0.21.4",
+    "eslint": "^7.32.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.6.1",
+    "gsap": "^3.8.0",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.34.0",
-    "simple-syntax-highlighter": "^2.0.6",
-    "splitpanes": "^3.0.4",
-    "vite": "^2.3.3",
+    "sass": "^1.43.4",
+    "simple-syntax-highlighter": "^2.2.0",
+    "splitpanes": "^3.0.6",
+    "vite": "^2.6.14",
     "vite-plugin-pug": "^0.3.0",
-    "vue": "^3.1.5",
+    "vue": "^3.2.22",
     "vue-cal": "^4.2.0",
-    "vue-router": "^4.0.8",
-    "vueperslides": "^3.3.0"
+    "vue-router": "^4.0.12",
+    "vueperslides": "^3.3.2",
+    "vuex": "^4.0.2"
   }
 }

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'
@@ -32,7 +33,7 @@ export { default as WSlider } from './w-slider.vue'
 export { default as WSpinner } from './w-spinner.vue'
 export { default as WSteps } from './w-steps.vue'
 export { default as WSwitch } from './w-switch.vue'
-export { default as WTabs } from './w-tabs.vue'
+export { default as WTabs } from './w-tabs/index.vue'
 export { default as WTable } from './w-table.vue'
 export { default as WTag } from './w-tag.vue'
 export { default as WTextarea } from './w-textarea.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-badge.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-badge-wrap
+.w-badge-wrap(v-on="$attrs")
   slot
   transition(:name="`${transition}`")
     .w-badge(
@@ -104,6 +104,7 @@ export default {
   border-radius: 99em;
   // Always get an even number for better text vertical align.
   height: round(1.1 * divide($base-font-size, 2)) * 2;
+  line-height: round(1.1 * divide($base-font-size, 2)) * 2;
   min-width: round(1.1 * divide($base-font-size, 2)) * 2;
   z-index: 1;
   padding: 0 $base-increment;
@@ -121,29 +122,38 @@ export default {
     $height: round(divide($base-font-size, 2)) * 2;
     font-size: round(0.67 * divide($base-font-size, 2)) * 2;
     height: $height;
+    line-height: $height;
     min-width: $height;
 
     &--round {width: $height;padding: 0 round(divide($height, 2));}
   }
   &.size--sm {
+    $height: round(1.1 * divide($base-font-size, 2)) * 2;
     font-size: round(0.75 * divide($base-font-size, 2)) * 2;
-    height: round(1.1 * divide($base-font-size, 2)) * 2;
-    min-width: round(1.1 * divide($base-font-size, 2)) * 2;
+    height: $height;
+    line-height: $height;
+    min-width: $height;
   }
   &.size--md {
+    $height: round(1.3 * divide($base-font-size, 2)) * 2;
     font-size: round(0.9 * divide($base-font-size, 2)) * 2;
-    height: round(1.3 * divide($base-font-size, 2)) * 2;
-    min-width: round(1.3 * divide($base-font-size, 2)) * 2;
+    height: $height;
+    line-height: $height;
+    min-width: $height;
   }
   &.size--lg {
+    $height: round(1.5 * divide($base-font-size, 2)) * 2;
     font-size: round(1.05 * divide($base-font-size, 2)) * 2;
-    height: round(1.5 * divide($base-font-size, 2)) * 2;
-    min-width: round(1.5 * divide($base-font-size, 2)) * 2;
+    height: $height;
+    line-height: $height;
+    min-width: $height;
   }
   &.size--xl {
+    $height: round(1.8 * divide($base-font-size, 2)) * 2;
     font-size: round(1.2 * divide($base-font-size, 2)) * 2;
-    height: round(1.8 * divide($base-font-size, 2)) * 2;
-    min-width: round(1.8 * divide($base-font-size, 2)) * 2;
+    height: $height;
+    line-height: $height;
+    min-width: $height;
   }
 
   // Position.

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

@@ -6,6 +6,7 @@ component.w-button(
   :class="classes"
   :disabled="!!disabled || null"
   v-on="listeners"
+  v-bind="$attrs"
   :style="styles")
   w-icon(v-if="icon") {{ icon }}
   slot(v-else)

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.type.name).join('').includes('w-toolbar')
     },
+
     actionsHasToolbar () {
       const { actions } = this.$slots
       return actions && actions().map(vnode => vnode.type.name).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

@@ -48,7 +48,7 @@ export default {
     ligature () {
       if (!config.iconsLigature) return false
 
-      const [fontName, icon] = this.icon.split(' ')
+      const [fontName, icon] = this.$slots.default()[0].children
       return fontName === config.iconsLigature && { fontName, icon }
     },
     forcedSize () {
@@ -66,7 +66,7 @@ export default {
     },
     classes () {
       return {
-        [this.icon]: true,
+        [this.$slots.default()[0].children]: true,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -87,16 +87,6 @@ export default {
     styles () {
       return this.forcedSize && `font-size: ${this.forcedSize}`
     }
-  },
-
-  created () {
-    const { default: slotContent } = this.$slots
-    this.icon = slotContent ? (slotContent()[0].children || '').trim() : ''
-  },
-
-  beforeUpdate () {
-    const { default: slotContent } = this.$slots
-    this.icon = slotContent ? (slotContent()[0].children || '').trim() : ''
   }
 }
 </script>
@@ -121,9 +111,7 @@ export default {
   &.size--lg {font-size: round(1.7 * $base-font-size);}
   &.size--xl {font-size: 2 * $base-font-size;}
 
-  // In w-button and w-alert.
-  // .w-button &, .w-alert & {font-size: round(1.4 * $base-font-size);}
-  // 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);}