wave-ui 2.24.0 → 2.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.24.0",
+  "version": "2.28.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.8",
-    "@babel/eslint-parser": "^7.14.7",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@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.2.13",
+    "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'
@@ -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-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);}

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

@@ -55,10 +55,13 @@ component(
           @change="onFileChange"
           :multiple="multiple || null"
           v-bind="attrs")
-        label.w-input__input(:for="`w-input--${_.uid}`")
-          template(v-for="(file, i) in inputFiles")
+        transition-group.w-input__input.w-input__input--file(tag="label" name="fade" :for="`w-input--${_.uid}`")
+          span.w-input__no-file(v-if="!inputFiles.length && isFocused" key="no-file")
+            slot(name="no-file")
+              template(v-if="$slots['no-file'] === undefined") No file
+          span(v-for="(file, i) in inputFiles" :key="file.lastModified")
             | {{ i ? ', ': '' }}
-            span {{ file.base }}
+            span.filename(:key="`${i}b`") {{ file.base }}
             | {{ file.extension }}
 
       template(v-if="labelPosition === 'inside' && showLabelInside")
@@ -78,7 +81,18 @@ component(
         :for="`w-input--${_.uid}`"
         @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
-    img.w-input__file-preview(v-for="(file, i) in inputFiles" :key="i" :src="file.preview")
+    //- Files preview.
+    label.d-flex(v-if="type === 'file' && inputFiles.length" :for="`w-input--${_.uid}`")
+      template(v-for="(file, i) in inputFiles")
+        i.w-icon.wi-spinner.w-icon--spin.size--sm.w-input__file-preview.primary(
+          v-if="file.progress < 100"
+          :key="`${i}a`")
+        img.w-input__file-preview(
+          v-else-if="file.preview"
+          :key="`${i}b`"
+          :src="file.preview"
+          alt="")
+        i.w-icon.wi-file.w-input__file-preview.primary(v-else :key="`${i}c`")
 
     //- Right label.
     template(v-if="labelPosition === 'right'")
@@ -189,6 +203,7 @@ export default {
     classes () {
       return {
         'w-input': true,
+        'w-input--file': this.type === 'file',
         'w-input--disabled': this.isDisabled,
         'w-input--readonly': this.isReadonly,
         [`w-input--${this.hasValue ? 'filled' : 'empty'}`]: true,
@@ -206,6 +221,7 @@ export default {
       return {
         [this.valid === false ? 'error' : this.color]: this.color || this.valid === false,
         [`${this.bgColor}--bg`]: this.bgColor,
+        'w-input__input-wrap--file': this.type === 'file',
         'w-input__input-wrap--round': this.round,
         'w-input__input-wrap--tile': this.tile,
         // Box adds a padding on input. If there is a bgColor or shadow, a padding is needed.
@@ -235,16 +251,8 @@ export default {
       this.$emit('blur', e)
     },
 
+    // For file input.
     onFileChange (e) {
-      // [...e.target.files].forEach((file, i) => {
-      //   this.inputFiles[i] = Object.assign({}, file)
-      //   this.filePreview(file)
-      // })
-
-      // this.inputFiles = [...e.target.files].map(file => {
-      //   this.filePreview(file)
-      //   return file
-      // })
       this.inputFiles = [...e.target.files].map(original => {
         const [, base, extension] = original.name.match(/^(.*)(\..*?)$/)
         const file = reactive({
@@ -254,7 +262,8 @@ export default {
           type: original.type,
           size: original.size,
           lastModified: original.lastModified,
-          preview: ''
+          preview: null,
+          progress: 0
         })
 
         this.filePreview(original, file)
@@ -264,14 +273,22 @@ export default {
       this.$emit('update:modelValue', this.inputFiles)
     },
 
+    // For file input.
     filePreview (original, file) {
-      // Check if the file is an image.
-      if (original.type && !original.type.startsWith('image/')) return
-
       const reader = new FileReader()
-      reader.addEventListener('load', e => {
-        file.preview = e.target.result
+
+      // Check if the file is an image and set a preview image.
+      if (original.type && original.type.startsWith('image/')) {
+        reader.addEventListener('load', e => {
+          file.preview = e.target.result
+        })
+      }
+
+      // Used to display a spinner while the file is loading.
+      reader.addEventListener('progress', e => {
+        if (e.loaded && e.total) file.progress = e.loaded * 100 / e.total
       })
+
       reader.readAsDataURL(original)
     }
   },
@@ -295,6 +312,11 @@ $inactive-color: #777;
   align-items: center;
   font-size: $base-font-size;
 
+  &--file {
+    flex-wrap: nowrap;
+    align-items: flex-end;
+  }
+
   // Input field wrapper.
   // ------------------------------------------------------
   &__input-wrap {
@@ -310,6 +332,9 @@ $inactive-color: #777;
     .w-input--floating-label & {margin-top: 3 * $base-increment;}
     .w-input[class^="bdrs"] &, .w-input[class*=" bdrs"] & {border-radius: inherit;}
 
+    // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+    &--file {min-width: 0;}
+
     &--underline {
       border-bottom-left-radius: initial;
       border-bottom-right-radius: initial;
@@ -409,6 +434,32 @@ $inactive-color: #777;
     opacity: 0;
   }
 
+  &__input--file {
+    > span {
+      display: inline-flex;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .filename {
+      margin-left: 0.2em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    > span:first-child .filename {margin-left: 0;}
+  }
+
+  &__no-file {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    color: $disabled-color;
+  }
+
   &__file-preview {
     margin-left: 4px;
     max-height: 2em;
@@ -474,6 +525,7 @@ $inactive-color: #777;
     .w-input--floating-label & {
       transform-origin: 0 0;
       transition: $transition-duration ease;
+      will-change: transform;
     }
 
     // move label with underline style.