wave-ui 2.26.0 → 2.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.26.0",
+  "version": "2.29.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,29 +43,29 @@
     "*.vue"
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/core": "^7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
     "@mdi/font": "^5.9.55",
-    "@vitejs/plugin-vue": "^1.2.2",
+    "@vitejs/plugin-vue": "^1.10.2",
     "@vue/compiler-sfc": "3.1.5",
-    "autoprefixer": "^10.2.5",
-    "axios": "^0.21.1",
-    "eslint": "^7.28.0",
+    "autoprefixer": "^10.4.1",
+    "axios": "^0.21.4",
+    "eslint": "^7.32.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.6.1",
+    "gsap": "^3.9.1",
     "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.45.1",
+    "simple-syntax-highlighter": "^2.2.0",
+    "splitpanes": "^3.0.6",
+    "vite": "^2.7.9",
     "vite-plugin-pug": "^0.3.0",
-    "vue": "^3.2.16",
+    "vue": "^3.2.26",
     "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'

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

@@ -19,7 +19,8 @@
         :tabindex="-1"
         text
         @keypress.stop
-        @click.stop="!item._disabled && toggleItem(item, $event)")
+        @click.stop="!item._disabled && toggleItem(item, $event)"
+        :class="{ 'w-accordion__expand-icon--expanded': item._expanded }")
       //- Title.
       slot(
         v-if="$slots[`item-title.${item.id || i + 1}`]"
@@ -34,7 +35,8 @@
         :icon="(item._expanded && collapseIcon) || expandIcon"
         text
         @keypress.stop
-        @click.stop="!item._disabled && toggleItem(item, $event)")
+        @click.stop="!item._disabled && toggleItem(item, $event)"
+        :class="{ 'w-accordion__expand-icon--expanded': item._expanded }")
     //- Content.
     w-transition-expand(y)
       .w-accordion__item-content(v-if="item._expanded" :class="contentClass")
@@ -148,8 +150,8 @@ export default {
     margin-right: $base-increment;
 
     .w-accordion--rotate-icon & {@include default-transition;}
-    .w-accordion--rotate-icon .w-accordion__item--expanded & {transform: rotate(-180deg);}
-    .w-accordion--rotate-icon.w-accordion--icon-right .w-accordion__item--expanded & {transform: rotate(180deg);}
+    &--expanded {transform: rotate(-180deg);}
+    .w-accordion--icon-right &--expanded {transform: rotate(180deg);}
 
     .w-icon:before {font-size: 1.1em;}
   }

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.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-flex.vue

@@ -26,6 +26,7 @@ export default {
     justifyEnd: { type: Boolean },
     justifySpaceBetween: { type: Boolean },
     justifySpaceAround: { type: Boolean },
+    justifySpaceEvenly: { type: Boolean },
     basisZero: { type: Boolean },
     gap: { type: Number, default: 0 }
   },
@@ -48,6 +49,7 @@ export default {
         'justify-end': this.justifyEnd,
         'justify-space-between': this.justifySpaceBetween,
         'justify-space-around': this.justifySpaceAround,
+        'justify-space-evenly': this.justifySpaceEvenly,
         'basis-zero': this.basisZero,
         [`w-flex--gap${this.gap}`]: this.gap
       }

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

@@ -111,9 +111,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-input.vue

@@ -23,8 +23,10 @@ component(
         tag="label"
         :for="`w-input--${_.uid}`"
         @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
+      //- All types of input except file.
       input.w-input__input(
         v-if="type !== 'file'"
+        ref="input"
         v-model="inputValue"
         v-on="listeners"
         @input="onInput"
@@ -45,8 +47,10 @@ component(
         :required="required || null"
         :tabindex="tabindex || null"
         v-bind="attrs")
-      template(v-if="type === 'file'")
+      //- Input type file.
+      template(v-else)
         input(
+          ref="input"
           :id="`w-input--${_.uid}`"
           type="file"
           :name="name || null"
@@ -160,7 +164,8 @@ export default {
       inputNumberError: false,
       isFocused: false,
       inputFiles: [], // For input type file.
-      fileReader: null // For input type file.
+      fileReader: null, // For input type file.
+      isAutofilled: false
     }
   },
 
@@ -186,6 +191,7 @@ export default {
     hasValue () {
       return (
         this.inputValue ||
+        this.inputValue === 0 ||
         ['date', 'time'].includes(this.type) ||
         (this.type === 'number' && this.inputNumberError) ||
         (this.type === 'file' && this.inputFiles.length)
@@ -206,7 +212,7 @@ export default {
         'w-input--file': this.type === 'file',
         'w-input--disabled': this.isDisabled,
         'w-input--readonly': this.isReadonly,
-        [`w-input--${this.hasValue ? 'filled' : 'empty'}`]: true,
+        [`w-input--${this.hasValue || this.isAutofilled ? 'filled' : 'empty'}`]: true,
         'w-input--focused': this.isFocused && !this.isReadonly,
         'w-input--dark': this.dark,
         'w-input--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
@@ -293,9 +299,19 @@ export default {
     }
   },
 
+  mounted () {
+    // On page load, check if the field is autofilled by the browser.
+    // 20211229. Only a problem on Chrome. Firefox ok, Safari always prompts before filling up.
+    setTimeout(() => {
+      if (this.$refs.input.matches(':-webkit-autofill')) this.isAutofilled = true
+    }, 400) // Can't be less than 350: time for the browser to autofill.
+  },
+
   watch: {
     modelValue (value) {
       this.inputValue = value
+      // When clearing the field value, also reset the isAutofilled var for the CSS class.
+      if (!value && value !== 0) this.isAutofilled = false
     }
   }
 }