wave-ui 2.23.0 → 2.27.0

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

@@ -8,6 +8,7 @@ component(
   :wrap="hasLabel && labelPosition !== 'inside'"
   :class="classes")
   input(v-if="type === 'hidden'" type="hidden" :name="name || null" v-model="inputValue")
+
   template(v-else)
     //- Left label.
     template(v-if="labelPosition === 'left'")
@@ -23,6 +24,7 @@ component(
         :for="`w-input--${_.uid}`"
         @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
       input.w-input__input(
+        v-if="type !== 'file'"
         v-model="inputValue"
         v-on="listeners"
         @input="onInput"
@@ -43,6 +45,25 @@ component(
         :required="required || null"
         :tabindex="tabindex || null"
         v-bind="attrs")
+      template(v-if="type === 'file'")
+        input(
+          :id="`w-input--${_.uid}`"
+          type="file"
+          :name="name || null"
+          @focus="onFocus"
+          @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}`")
+          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 }}
+
       template(v-if="labelPosition === 'inside' && showLabelInside")
         label.w-input__label.w-input__label--inside.w-form-el-shakable(
           v-if="$slots.default"
@@ -60,6 +81,19 @@ component(
         :for="`w-input--${_.uid}`"
         @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
+    //- 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'")
       label.w-input__label.w-input__label--right.w-form-el-shakable(
@@ -80,6 +114,7 @@ component(
  **/
 
 import FormElementMixin from '../mixins/form-elements'
+import { reactive } from 'vue'
 
 export default {
   name: 'w-input',
@@ -108,6 +143,8 @@ export default {
     round: { type: Boolean },
     shadow: { type: Boolean },
     tile: { type: Boolean },
+    multiple: { type: Boolean }, // Only for file uploads.
+    preview: { type: Boolean }, // Only for file uploads.
     loading: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
@@ -121,11 +158,20 @@ export default {
       // In case of incorrect input type="number", the inputValue gets emptied,
       // and the label would come back on top of the input text.
       inputNumberError: false,
-      isFocused: false
+      isFocused: false,
+      inputFiles: [], // For input type file.
+      fileReader: null // For input type file.
     }
   },
 
   computed: {
+    attrs () {
+      // Keep the `class` attribute bound to the wrapper and not the input.
+      // eslint-disable-next-line no-unused-vars
+      const { class: classes, ...attrs } = this.$attrs
+      return attrs
+    },
+
     listeners () {
       // Remove the events that are fired separately, so they don't fire twice.
       // eslint-disable-next-line no-unused-vars
@@ -138,17 +184,26 @@ export default {
       return htmlAttrs
     },
     hasValue () {
-      return this.inputValue || ['date', 'time'].includes(this.type) || (this.type === 'number' && this.inputNumberError)
+      return (
+        this.inputValue ||
+        ['date', 'time'].includes(this.type) ||
+        (this.type === 'number' && this.inputNumberError) ||
+        (this.type === 'file' && this.inputFiles.length)
+      )
     },
+
     hasLabel () {
       return this.label || this.$slots.default
     },
+
     showLabelInside () {
       return !this.staticLabel || (!this.hasValue && !this.placeholder)
     },
+
     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,
@@ -161,10 +216,12 @@ export default {
         'w-input--inner-icon-right': this.innerIconRight
       }
     },
+
     inputWrapClasses () {
       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.
@@ -183,13 +240,56 @@ export default {
       this.$emit('update:modelValue', this.inputValue)
       this.$emit('input', this.inputValue)
     },
+
     onFocus (e) {
       this.isFocused = true
       this.$emit('focus', e)
     },
+
     onBlur (e) {
       this.isFocused = false
       this.$emit('blur', e)
+    },
+
+    // For file input.
+    onFileChange (e) {
+      this.inputFiles = [...e.target.files].map(original => {
+        const [, base, extension] = original.name.match(/^(.*)(\..*?)$/)
+        const file = reactive({
+          name: original.name,
+          base,
+          extension,
+          type: original.type,
+          size: original.size,
+          lastModified: original.lastModified,
+          preview: null,
+          progress: 0
+        })
+
+        this.filePreview(original, file)
+
+        return file
+      })
+      this.$emit('update:modelValue', this.inputFiles)
+    },
+
+    // For file input.
+    filePreview (original, file) {
+      const reader = new FileReader()
+
+      // 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)
     }
   },
 
@@ -212,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 {
@@ -227,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;
@@ -282,6 +390,8 @@ $inactive-color: #777;
     font-size: inherit;
     color: inherit;
     text-align: inherit;
+    display: inline-flex;
+    align-items: center;
     background: none;
     border: none;
     outline: none;
@@ -314,6 +424,48 @@ $inactive-color: #777;
 
   &--disabled input::placeholder {color: inherit;}
 
+  // Upload field.
+  // ------------------------------------------------------
+  // Hides the built-in file input (replaced with a more stylable element).
+  input[type="file"] {
+    position: absolute;
+    z-index: -1;
+    pointer-events: none;
+    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;
+    align-self: flex-end;
+  }
+
   // Icons inside.
   // ------------------------------------------------------
   &__icon {position: absolute;}
@@ -373,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.

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,10 +32,12 @@
   w-overlay(
     v-if="overlay"
     ref="overlay"
-    :model-value="showMenu"
+    :model-value="menuVisible"
     :persistent="persistent"
+    :class="overlayClasses"
+    v-bind="overlayProps"
     :z-index="(zIndex || 200) - 1"
-    @update:model-value="showMenu = false")
+    @update:model-value="menuVisible = false")
 </template>
 
 <script>
@@ -50,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.
@@ -69,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 },
@@ -86,6 +88,8 @@ export default {
     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 }
   },
@@ -93,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.
@@ -161,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']
       }
     },
 
@@ -214,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
       }
@@ -230,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)
@@ -243,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)
@@ -265,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.
@@ -282,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)
@@ -397,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.modelValue) this.toggleMenu({ type: 'click', target: this.activatorEl })
   },
 
   beforeUnmount () {
     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: {
     modelValue (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()
@@ -469,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-notification-manager.vue

@@ -62,7 +62,7 @@ export default {
   z-index: 1000;
   pointer-events: none;
   width: 280px;
-  overflow: auto;
+  overflow-x: hidden;
 
   &--left {right: auto;left: 0;}
 

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

@@ -27,6 +27,7 @@ component(
     label.w-switch__label.w-form-el-shakable(v-else-if="label" :for="`w-switch--${_.uid}`" v-html="label")
   .w-switch__input(
     @click="$refs.input.focus();$refs.input.click()"
+    v-on="$attrs"
     :class="inputClasses")
   template(v-if="hasLabel && !labelOnLeft")
     label.w-switch__label.w-form-el-shakable(v-if="$slots.default" :for="`w-switch--${_.uid}`")