wave-ui 1.46.0 → 1.49.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.46.0",
+  "version": "1.49.1",
   "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",
@@ -46,7 +46,6 @@
     "@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.10.1",
     "autoprefixer": "^10.4.0",
     "axios": "^0.21.4",
@@ -75,5 +74,8 @@
     "vue-template-compiler": "^2.6.14",
     "vueperslides": "^2.15.2",
     "vuex": "^3.6.2"
+  },
+  "dependencies": {
+    "@mdi/font": "^6.5.95"
   }
 }

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

@@ -2,23 +2,23 @@
 .w-confirm
   w-menu(v-model="showPopup" v-bind="wMenuProps")
     template(#activator="{ on }")
-      w-button.w-confirm__button(v-on="on" v-bind="buttonProps")
+      w-button.w-confirm__button(v-on="{ ...$listeners, ...on }" v-bind="buttonProps")
         slot
     w-flex(:column="!inline" align-center)
       div
-        slot(name="question") Are you sure?
+        slot(name="question") {{ question }}
       .w-flex.justify-end(:class="inline ? 'ml2' : 'mt2'")
         w-button.mr2(
-          v-if="!noCancel"
-          v-bind="cancelButton"
+          v-if="cancel !== false"
+          v-bind="cancelButtonProps"
           :bg-color="(cancelButton || {}).bgColor || 'error'"
           @click="onCancel")
-          slot(name="cancel") Cancel
+          slot(name="cancel") {{ cancelButton.label }}
         w-button(
-          v-bind="confirmButton"
+          v-bind="confirmButtonProps"
           :bg-color="(confirmButton || {}).bgColor || 'success'"
           @click="onConfirm")
-          slot(name="confirm") Confirm
+          slot(name="confirm") {{ confirmButton.label }}
 </template>
 
 <script>
@@ -30,11 +30,16 @@ export default {
     color: { type: String },
     icon: { type: String },
     mainButton: { type: Object }, // Allow passing down an object of props to the w-button component.
+    question: { type: String, default: 'Are you sure?' },
 
     // 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.
+    // Allow passing down an object of props to the w-button component.
+    // If a string is given, that will be the label of the button.
+    // If false, no cancel button.
+    cancel: { type: [Boolean, Object, String], default: undefined },
+    // Allow passing down an object of props to the w-button component.
+    // If a string is given, that will be the label of the button.
+    confirm: { type: [Object, String] },
 
     // global menu props.
     inline: { type: Boolean }, // The layout inside the menu.
@@ -63,6 +68,26 @@ export default {
   }),
 
   computed: {
+    cancelButton () {
+      let button = { label: typeof this.cancel === 'string' ? this.cancel : 'Cancel' }
+      if (typeof this.cancel === 'object') button = Object.assign({}, button, this.cancel)
+      return button
+    },
+    // Props to pass down to the w-button component.
+    cancelButtonProps () {
+      const { label, ...props } = this.cancelButton // Everything except label.
+      return props
+    },
+    confirmButton () {
+      let button = { label: typeof this.confirm === 'string' ? this.confirm : 'Confirm' }
+      if (typeof this.confirm === 'object') button = Object.assign({}, button, this.confirm)
+      return button
+    },
+    // Props to pass down to the w-button component.
+    confirmButtonProps () {
+      const { label, ...props } = this.confirmButton // Everything except label.
+      return props
+    },
     wMenuProps () {
       return {
         top: this.top,

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

@@ -12,9 +12,16 @@ component(
   template(v-else)
     //- Left label.
     template(v-if="labelPosition === 'left'")
-      label.w-input__label.w-input__label--left.w-form-el-shakable(v-if="$slots.default" :for="`w-input--${_uid}`")
+      label.w-input__label.w-input__label--left.w-form-el-shakable(
+        v-if="$slots.default"
+        :for="`w-input--${_uid}`"
+        :class="validationClasses")
         slot
-      label.w-input__label.w-input__label--left.w-form-el-shakable(v-else-if="label" :for="`w-input--${_uid}`" v-html="label")
+      label.w-input__label.w-input__label--left.w-form-el-shakable(
+        v-else-if="label"
+        :for="`w-input--${_uid}`"
+        :class="validationClasses"
+        v-html="label")
 
     //- Input wrapper.
     .w-input__input-wrap(:class="inputWrapClasses")
@@ -58,47 +65,67 @@ component(
           @blur="onBlur"
           @change="onFileChange"
           :multiple="multiple || null"
-          v-bind="attrs")
-        transition-group.w-input__input.w-input__input--file(tag="label" name="fade" :for="`w-input--${_uid}`")
+          v-bind="attrs"
+          :data-progress="overallFilesProgress /* Needed to emit the overallProgress. */")
+        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.filename(:key="`${i}b`") {{ file.base }}
-            | {{ file.extension }}
+            | {{ file.extension ? `.${file.extension}` : '' }}
 
       template(v-if="labelPosition === 'inside' && showLabelInside")
         label.w-input__label.w-input__label--inside.w-form-el-shakable(
           v-if="$slots.default"
           :for="`w-input--${_uid}`"
-          :class="isFocused && { [valid === false ? 'error' : color]: color || valid === false }")
+          :class="validationClasses")
           slot
         label.w-input__label.w-input__label--inside.w-form-el-shakable(
           v-else-if="label"
           :for="`w-input--${_uid}`"
           v-html="label"
-          :class="isFocused && { [valid === false ? 'error' : color]: color || valid === false }")
+          :class="validationClasses")
       w-icon.w-input__icon.w-input__icon--inner-right(
         v-if="innerIconRight"
         tag="label"
         :for="`w-input--${_uid}`"
         @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
+      w-progress.fill-width(
+        v-if="hasLoading || (showProgress && (uploadInProgress || uploadComplete))"
+        size="2"
+        :color="progressColor || color"
+        :value="showProgress ? (uploadInProgress || uploadComplete) && overallFilesProgress : loadingValue")
+
     //- Files preview.
-    label.d-flex(v-if="type === 'file' && inputFiles.length" :for="`w-input--${_uid}`")
+    label.d-flex(v-if="type === 'file' && preview && 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")
+        i.w-icon.wi-spinner.w-icon--spin.size--sm.w-input__file-preview.primary(
+          v-if="file.progress < 100"
+          :key="i")
         img.w-input__file-preview(v-else-if="file.preview" :key="i" :src="file.preview" alt="")
-        i.w-icon.wi-file.w-input__file-preview.primary(v-else :key="i")
+        i.w-icon.w-input__file-preview.primary.size--md(
+          v-else
+          :key="i"
+          :class="preview && typeof preview === 'string' ? preview : 'wi-file'")
 
     //- Right label.
     template(v-if="labelPosition === 'right'")
-      label.w-input__label.w-input__label--right.w-form-el-shakable(v-if="$slots.default" :for="`w-input--${_uid}`")
+      label.w-input__label.w-input__label--right.w-form-el-shakable(
+        v-if="$slots.default"
+        :for="`w-input--${_uid}`"
+        :class="validationClasses")
         slot
-      label.w-input__label.w-input__label--right.w-form-el-shakable(v-else-if="label" :for="`w-input--${_uid}`" v-html="label")
-
-    w-progress.fill-width(v-if="loading" size="2" :color="progressColor || color")
+      label.w-input__label.w-input__label--right.w-form-el-shakable(
+        v-else-if="label"
+        :for="`w-input--${_uid}`"
+        :class="validationClasses"
+        v-html="label")
 </template>
 
 <script>
@@ -136,13 +163,17 @@ export default {
     shadow: { type: Boolean },
     tile: { type: Boolean },
     multiple: { type: Boolean }, // Only for file uploads.
-    preview: { type: Boolean }, // Only for file uploads.
-    loading: { type: Boolean }
+    preview: { type: [Boolean, String], default: true }, // Only for file uploads.
+    loading: { type: [Boolean, Number], default: false }, // If a number is given, it will be the value of the progress.
+    showProgress: { type: [Boolean] }, // Only for file uploads.
+    // Allow syncing the files 1 way: prefilling a file is not possible.
+    // https://stackoverflow.com/questions/16365668/pre-populate-html-form-file-input
+    files: { type: Array }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
 
-  emits: ['input', 'update:modelValue', 'focus', 'blur', 'click:inner-icon-left', 'click:inner-icon-right'],
+  emits: ['input', 'update:modelValue', 'focus', 'blur', 'click:inner-icon-left', 'click:inner-icon-right', 'update:overallProgress'],
 
   data () {
     return {
@@ -173,23 +204,54 @@ 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)
-      )
+      switch (this.type) {
+        case 'file': return !!this.inputFiles.length
+        case 'number': return this.inputNumberError
+        case 'date':
+        case 'time':
+          return true
+        default:
+          return this.inputValue || this.inputValue === 0
+      }
     },
 
     hasLabel () {
       return this.label || this.$slots.default
     },
 
+    hasLoading () {
+      return ![undefined, false].includes(this.loading)
+    },
+
+    loadingValue () {
+      let value
+      if (typeof this.loading === 'number') value = this.loading
+      else if (this.loading) {
+        value = this.type === 'file' && this.overallFilesProgress ? this.overallFilesProgress : undefined
+      }
+      return value
+    },
+
     showLabelInside () {
       return !this.staticLabel || (!this.hasValue && !this.placeholder)
     },
 
+    overallFilesProgress () {
+      const progress = this.inputFiles.reduce((total, file) => total + file.progress, 0)
+      const total = progress / this.inputFiles.length
+      this.$emit('update:overallProgress', this.inputFiles.length ? total : undefined)
+
+      return total
+    },
+
+    uploadInProgress () {
+      return this.overallFilesProgress > 0 && this.overallFilesProgress < 100
+    },
+
+    uploadComplete () {
+      return this.overallFilesProgress === 100
+    },
+
     classes () {
       return {
         'w-input': true,
@@ -207,6 +269,12 @@ export default {
       }
     },
 
+    validationClasses () {
+      return this.isFocused && {
+        [this.valid === false ? 'error' : this.color]: this.color || this.valid === false
+      }
+    },
+
     inputWrapClasses () {
       return {
         [this.valid === false ? 'error' : this.color]: this.color || this.valid === false,
@@ -219,7 +287,8 @@ export default {
         'w-input__input-wrap--underline': !this.outline,
         'w-input__input-wrap--shadow': this.shadow,
         'w-input__input-wrap--no-padding': !this.outline && !this.bgColor && !this.shadow && !this.round,
-        'w-input__input-wrap--loading': this.loading
+        'w-input__input-wrap--loading': this.loading || (this.showProgress && this.uploadInProgress),
+        'w-input__input-wrap--upload-complete': this.uploadComplete
       }
     }
   },
@@ -244,37 +313,43 @@ export default {
     // For file input.
     onFileChange (e) {
       this.$set(this, 'inputFiles', [...e.target.files].map(original => {
-        const [, base, extension] = original.name.match(/^(.*)(\..*?)$/)
+        // `full` if there is no filename but only an extension.
+        const [, base = '', extension = '', full = ''] = original.name.match(/^(.*?)\.([^.]*)$|(.*)/)
         const file = Object.assign({}, {
           name: original.name,
-          base,
+          base: base || full,
           extension,
           type: original.type,
           size: original.size,
           lastModified: original.lastModified,
           preview: null,
-          progress: 0
+          progress: 0,
+          file: original
         })
 
-        this.filePreview(original, file)
+        this.readFile(original, file)
 
         return file
       }))
       this.$emit('update:modelValue', this.inputFiles)
       this.$emit('input', this.inputFiles)
-      this.$emit('change', this.inputFiles)
     },
 
     // For file input.
-    filePreview (original, file) {
+    readFile (original, file) {
       const reader = new FileReader()
 
+      // If the preview prop is a string, the user is setting the  preview to an icon and
+      // don't need the actual file preview.
+      const isPreviewAnIcon = typeof this.preview === 'string'
+      const isFileAnImage = original.type && original.type.startsWith('image/')
       // Check if the file is an image and set a preview image.
-      if (original.type && original.type.startsWith('image/')) {
+      if (this.preview && !isPreviewAnIcon && isFileAnImage) {
         reader.addEventListener('load', e => {
           this.$set(file, 'preview', e.target.result)
         })
       }
+      else delete file.preview
 
       // Used to display a spinner while the file is loading.
       reader.addEventListener('progress', event => {
@@ -319,6 +394,8 @@ $inactive-color: #777;
   &--file {
     flex-wrap: nowrap;
     align-items: flex-end;
+
+    span.fade-leave-to {position: absolute;}
   }
 
   // Input field wrapper.
@@ -348,7 +425,10 @@ $inactive-color: #777;
     &--round {border-radius: 99em;}
     &--tile {border-radius: initial;}
     &--shadow {box-shadow: $box-shadow;}
-    &--loading {border-bottom-color: transparent;}
+    &--loading, &--upload-complete {
+      border-bottom-color: transparent;
+      flex-wrap: wrap;
+    }
     &--loading ~ .w-progress {
       height: 2px;
       position: absolute;
@@ -357,7 +437,8 @@ $inactive-color: #777;
     }
 
     .w-input--focused & {border-color: currentColor;}
-    .w-input--focused &--loading {border-bottom-color: transparent;}
+    .w-input--focused &--loading,
+    .w-input--focused &--upload-complete {border-bottom-color: transparent;}
 
     // Underline.
     &--underline:after {
@@ -468,6 +549,8 @@ $inactive-color: #777;
     margin-left: 4px;
     max-height: 2em;
     align-self: flex-end;
+
+    &.w-icon {margin-bottom: 4px;}
   }
 
   // Icons inside.

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

@@ -74,26 +74,16 @@ export default {
     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], deprecated: true },
-    appendTo: { type: [String, Boolean, Object] },
-    fixed: { type: Boolean },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
-    left: { type: Boolean },
-    right: { type: Boolean },
-    alignTop: { type: Boolean },
-    alignBottom: { type: Boolean },
-    alignLeft: { type: Boolean },
-    alignRight: { type: Boolean },
-    zIndex: { type: [Number, String, Boolean] },
     minWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
     overlay: { type: Boolean },
     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 }
+    delay: { type: Number }
+    // Other props in the detachable mixin:
+    // detachTo, appendTo, fixed, top, bottom, left, right, alignTop, alignBottom, alignLeft,
+    // alignRight, noPosition, zIndex, activator.
   },
 
   emits: ['input', 'update:modelValue', 'open', 'close'],
@@ -107,7 +97,6 @@ export default {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     activatorWidth: 0,
     detachableEl: null,
     timeoutId: null
@@ -118,32 +107,15 @@ export default {
      * Other computed in the detachable mixin:
      * - `appendToTarget`
      * - `detachableParentEl`
+     * - `activatorEl`
+     * - `position`
+     * - `alignment`
      **/
 
     transitionName () {
       return this.transition || 'scale-fade'
     },
 
-    position () {
-      return (
-        (this.top && 'top') ||
-        (this.bottom && 'bottom') ||
-        (this.left && 'left') ||
-        (this.right && 'right') ||
-        'bottom'
-      )
-    },
-
-    alignment () {
-      return (
-        (['top', 'bottom'].includes(this.position) && this.alignLeft && 'left') ||
-        (['top', 'bottom'].includes(this.position) && this.alignRight && 'right') ||
-        (['left', 'right'].includes(this.position) && this.alignTop && 'top') ||
-        (['left', 'right'].includes(this.position) && this.alignBottom && 'bottom') ||
-        ''
-      )
-    },
-
     menuMinWidth () {
       if (this.minWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
       else return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
@@ -197,8 +169,8 @@ export default {
 
       if (this.showOnHover) {
         handlers = {
-          focus: this.toggleMenu,
-          blur: this.toggleMenu,
+          focus: this.toggle,
+          blur: this.toggle,
           mouseenter: e => {
             this.hoveringActivator = true
             this.open(e)
@@ -213,10 +185,10 @@ export default {
         }
         // Check the window exists: SSR-proof.
         if (typeof window !== 'undefined' && 'ontouchstart' in window) {
-          handlers.click = this.toggleMenu
+          handlers.click = this.toggle
         }
       }
-      else handlers = { click: this.toggleMenu }
+      else handlers = { click: this.toggle }
       return handlers
     }
   },
@@ -233,7 +205,7 @@ export default {
      **/
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    toggleMenu (e) {
+    toggle (e) {
       let shouldShowMenu = this.detachableVisible
       if ('ontouchstart' in window && this.showOnHover && e.type === 'click') {
         shouldShowMenu = !shouldShowMenu
@@ -250,19 +222,22 @@ export default {
 
       this.timeoutId = clearTimeout(this.timeoutId)
 
-      if (shouldShowMenu) {
-        this.$emit('update:modelValue', (this.detachableVisible = true))
-        this.$emit('input', true)
-        this.$emit('open')
-
-        this.open(e)
-      }
+      if (shouldShowMenu) this.open(e)
       else this.close()
     },
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     async open (e) {
+      // A tiny delay may help positioning the detachable correctly in case of multiple activators
+      // with different menu contents.
+      if (this.delay) await new Promise(resolve => setTimeout(resolve, this.delay))
+
       this.detachableVisible = true
+
+      // If the activator is external, there might be multiple,
+      // so on open, the activator will be set to the event target.
+      if (this.activator) this.activatorEl = e.target
+
       await this.insertInDOM()
 
       if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
@@ -310,43 +285,9 @@ export default {
       document.removeEventListener('mousedown', this.onOutsideMousedown)
       window.removeEventListener('resize', this.onResize)
     }
-  },
-
-  mounted () {
-    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.removeFromDOM()
-    if (this.overlay && this.overlayEl.parentNode) this.overlayEl.remove()
-    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.remove()
-  },
-
-  watch: {
-    value (bool) {
-      if (!!bool !== this.detachableVisible) this.toggleMenu({ type: 'click', target: this.activatorEl })
-    },
-    detachTo () {
-      this.removeFromDOM()
-      this.insertInDOM()
-    },
-    appendTo () {
-      this.removeFromDOM()
-      this.insertInDOM()
-    }
   }
+
+  // watch, mounted & beforeDestroy hooks are set in the detachable.js mixin.
 }
 </script>
 

package/src/wave-ui/components/w-notification-manager.vue

@@ -11,8 +11,8 @@ transition-group(
       :key="notif._uid"
       v-model="notif._value"
       @close="notifManager.dismiss(notif._uid)"
-      v-bind="notif")
-      | {{ notif.message }}
+      v-bind="notifProps(notif)")
+      div(v-html="notif.message")
 </template>
 
 <script>
@@ -42,6 +42,13 @@ export default {
     }
   },
 
+  methods: {
+    notifProps (notif) {
+      const { _value, _uid, message, timeout, ...props } = notif
+      return props
+    }
+  },
+
   created () {
     this.notifManager = new NotificationManager()
   },

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

@@ -330,7 +330,7 @@ export default {
       setTimeout(() => {
         const itemIndex = this.inputValue.length ? this.inputValue[0].index : 0 // Real index starts at 0.
         // User visible index starts at 1.
-        this.$refs['w-list'].$el.querySelector(`#w-select-menu--${this._uid}_item-${itemIndex + 1}`).focus()
+        this.$refs['w-list'].$el.querySelector(`#w-select-menu--${this._uid}_item-${itemIndex + 1}`)?.focus()
       }, 100)
     },