wave-ui 2.28.1 → 2.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.28.1",
+  "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,24 +43,24 @@
     "*.vue"
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.3",
-    "@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.9.4",
+    "@vitejs/plugin-vue": "^1.10.2",
     "@vue/compiler-sfc": "3.1.5",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.1",
     "axios": "^0.21.4",
     "eslint": "^7.32.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.8.0",
+    "gsap": "^3.9.1",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.43.4",
+    "sass": "^1.45.1",
     "simple-syntax-highlighter": "^2.2.0",
     "splitpanes": "^3.0.6",
-    "vite": "^2.6.14",
+    "vite": "^2.7.9",
     "vite-plugin-pug": "^0.3.0",
     "vue": "^3.2.26",
     "vue-cal": "^4.2.0",

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

@@ -40,7 +40,7 @@ export default {
     classes () {
       return {
         'd-block': this.block,
-        'row': this.row,
+        row: this.row,
         'align-center': this.alignCenter,
         'align-end': this.alignEnd,
         'justify-center': this.justifyCenter,

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-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
     }
   }
 }

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

@@ -117,25 +117,29 @@ export default {
     },
 
     // DOM element to attach menu to.
+    // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     detachToTarget () {
-      let target = this.detachTo || '.w-app'
-      if (target === true) target = '.w-app'
-      else if (target && !['object', 'string'].includes(typeof target)) target = '.w-app'
+      const defaultTarget = '.w-app'
+
+      let target = this.detachTo || defaultTarget
+      if (target === true) target = defaultTarget
+      else if (target && !['object', 'string'].includes(typeof target)) target = defaultTarget
       else if (typeof target === 'object' && !target.nodeType) {
-        target = '.w-app'
+        target = defaultTarget
         consoleWarn('Invalid node provided in w-menu `detach-to`. Falling back to .w-app.', this)
       }
       if (typeof target === 'string') target = document.querySelector(target)
 
       if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : '.w-app'}`, this)
-        target = document.querySelector('.w-app')
+        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`, this)
+        target = document.querySelector(defaultTarget)
       }
 
       return target
     },
 
     // DOM element that will receive the menu.
+    // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     menuParentEl () {
       return this.detachToTarget
     },
@@ -197,7 +201,7 @@ export default {
       }
     },
 
-    // The floatting menu styles.
+    // The floating menu styles.
     styles () {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || (this.overlay && !this.zIndex && 200) || null,
@@ -227,8 +231,10 @@ export default {
             }, 10)
           }
         }
-
-        if ('ontouchstart' in window) handlers.click = this.toggleMenu
+        // Check the window exists: SSR-proof.
+        if (typeof window !== 'undefined' && 'ontouchstart' in window) {
+          handlers.click = this.toggleMenu
+        }
       }
       else handlers = { click: this.toggleMenu }
       return handlers
@@ -236,6 +242,7 @@ export default {
   },
 
   methods: {
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggleMenu (e) {
       let shouldShowMenu = this.menuVisible
       if ('ontouchstart' in window && this.showOnHover && e.type === 'click') {
@@ -263,6 +270,7 @@ export default {
       else this.closeMenu()
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     async openMenu (e) {
       this.menuVisible = true
       await this.insertMenu()
@@ -289,6 +297,7 @@ export default {
      * - click of activator
      * - hover outside if showOnHover
      * - click inside menu if hideOnMenuClick.
+     * / ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
      *
      * @param {Boolean} force when showOnHover is set to true, hovering menu should keep it open.
      *                        But if hideOnMenuClick is also set to true, this should force close
@@ -312,6 +321,7 @@ export default {
       window.removeEventListener('resize', this.onResize)
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     onOutsideMousedown (e) {
       if (!this.menuEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
         this.$emit('update:modelValue', (this.menuVisible = false))
@@ -327,6 +337,7 @@ export default {
       this.computeMenuPosition()
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     getCoordinates (e) {
       // Get the activator coordinates relative to window.
       const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect()
@@ -346,6 +357,7 @@ export default {
       return coords
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     computeMenuPosition (e) {
       // Get the activator coordinates.
       let { top, left, width, height } = this.getCoordinates(e)

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

@@ -116,7 +116,7 @@ export default {
       return listeners
     },
     hasValue () {
-      return this.inputValue
+      return this.inputValue || this.inputValue === 0
     },
     hasLabel () {
       return this.label || this.$slots.default

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-tooltip-wrap(ref="wrapper" :class="{ 'w-tooltip-wrap--attached': !detachTo }")
+.w-tooltip-wrap(:class="{ 'w-tooltip-wrap--attached': !detachTo }")
   slot(name="activator" :on="eventHandlers")
   transition(:name="transitionName" appear)
     //- In Vue 3, a ref in a transition doesn't stay in $refs, it must be set as a function.
@@ -9,11 +9,7 @@
       v-show="showTooltip"
       :class="classes"
       :style="styles")
-      //- When there is a bg color, another div wrapper is needed for the triangle
-      //- to inherit the current color.
-      div(v-if="bgColor" :class="color")
-        slot
-      slot(v-else)
+      slot
 </template>
 
 <script>
@@ -81,27 +77,32 @@ export default {
       return this.transition || `w-tooltip-slide-fade-${direction}`
     },
 
+    // DOM element to attach tooltip to.
+    // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     detachToTarget () {
-      let target = this.detachTo || '.w-app'
-      if (target === true) target = '.w-app'
-      else if (target && !['object', 'string'].includes(typeof target)) target = '.w-app'
+      const defaultTarget = '.w-app'
+
+      let target = this.detachTo || defaultTarget
+      if (target === true) target = defaultTarget
+      else if (target && !['object', 'string'].includes(typeof target)) target = defaultTarget
       else if (typeof target === 'object' && !target.nodeType) {
-        target = '.w-app'
+        target = defaultTarget
         consoleWarn('Invalid node provided in w-tooltip `attach-to`. Falling back to .w-app.', this)
       }
       if (typeof target === 'string') target = document.querySelector(target)
 
       if (!target) {
-        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : '.w-app'}`, this)
-        target = document.querySelector('.w-app')
+        consoleWarn(`Unable to locate ${this.detachTo ? `target ${this.detachTo}` : defaultTarget}`, this)
+        target = document.querySelector(defaultTarget)
       }
 
       return target
     },
 
     // DOM element that will receive the tooltip.
+    // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     tooltipParentEl () {
-      return this.detachTo ? this.detachToTarget : this.$refs.wrapper
+      return this.detachTo ? this.detachToTarget : this.$el
     },
 
     position () {
@@ -146,8 +147,8 @@ export default {
 
     classes () {
       return {
-        [this.color]: !this.bgColor,
-        [`${this.bgColor} ${this.bgColor}--bg`]: this.bgColor,
+        [this.color]: this.color,
+        [`${this.bgColor}--bg`]: this.bgColor,
         ...this.tooltipClasses,
         [`w-tooltip--${this.position}`]: true,
         'w-tooltip--tile': this.tile,
@@ -160,11 +161,13 @@ export default {
       }
     },
 
+    // The tooltip styles.
     styles () {
       return {
         zIndex: this.zIndex || this.zIndex === 0 || null,
-        top: `${~~this.tooltipCoordinates.top}px`,
-        left: `${~~this.tooltipCoordinates.left}px`
+        top: (this.tooltipCoordinates.top && `${~~this.tooltipCoordinates.top}px`) || null,
+        left: (this.tooltipCoordinates.left && `${~~this.tooltipCoordinates.left}px`) || null,
+        '--w-tooltip-bg-color': this.$waveui.colors[this.bgColor || 'white']
       }
     },
 
@@ -179,16 +182,18 @@ export default {
           mouseleave: this.toggle
         }
 
-        if ('ontouchstart' in window) handlers.click = this.toggle
+        // Check the window exists: SSR-proof.
+        if (typeof window !== 'undefined' && 'ontouchstart' in window) handlers.click = this.toggle
       }
       return handlers
     }
   },
 
   methods: {
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     toggle (e) {
       let shouldShowTooltip = this.showTooltip
-      if ('ontouchstart' in window) {
+      if (typeof window !== 'undefined' && 'ontouchstart' in window) {
         if (e.type === 'click') shouldShowTooltip = !shouldShowTooltip
       }
       else if (e.type === 'click' && this.showOnClick) shouldShowTooltip = !shouldShowTooltip
@@ -216,6 +221,7 @@ export default {
       }
     },
 
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     getCoordinates () {
       const { top, left, width, height } = this.activatorEl.getBoundingClientRect()
       let coords = { top, left, width, height }
@@ -273,7 +279,7 @@ export default {
     },
 
     insertTooltip () {
-      const wrapper = this.$refs.wrapper
+      const wrapper = this.$el
 
       // Unwrap the activator element.
       wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
@@ -290,7 +296,7 @@ export default {
   },
 
   mounted () {
-    this.activatorEl = this.$refs.wrapper.firstElementChild
+    this.activatorEl = this.$el.firstElementChild
     if (this.detachTo) this.insertTooltip()
 
     if (this.modelValue) this.toggle({ type: 'click', target: this.activatorEl })
@@ -366,94 +372,17 @@ export default {
 
   &--custom-transition {transform: none;}
 
-  &:after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 6px solid transparent;
-  }
-  &--top:after {
-    top: 100%;
-    left: 50%;
-    border-top-color: $tooltip-bg-color;
-    transform: translateX(-50%);
-    margin-top: 1px;
-  }
-  &--bottom:after {
-    bottom: 100%;
-    left: 50%;
-    border-bottom-color: $tooltip-bg-color;
-    transform: translateX(-50%);
-    margin-bottom: 1px;
-  }
-  &--left:after {
-    left: 100%;
-    top: 50%;
-    border-left-color: $tooltip-bg-color;
-    transform: translateY(-50%);
-    margin-left: 1px;
-  }
-  &--right:after {
-    right: 100%;
-    top: 50%;
-    border-right-color: $tooltip-bg-color;
-    transform: translateY(-50%);
-    margin-right: 1px;
-  }
-
   // Tooltip without border.
   // --------------------------------------------------------
-  &--no-border.w-tooltip--top:after {margin-top: -1px;border-top-color: inherit;}
-  &--no-border.w-tooltip--bottom:after {margin-bottom: -1px;border-bottom-color: inherit;}
-  &--no-border.w-tooltip--left:after {margin-left: -1px;border-left-color: inherit;}
-  &--no-border.w-tooltip--right:after {margin-right: -1px;border-right-color: inherit;}
+  &--no-border {
+    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px, 0);
+  }
 
   // Tooltip with border.
   // --------------------------------------------------------
-  &:not(&--no-border).w-tooltip--top:after {margin-top: -1px;}
-  &:not(&--no-border).w-tooltip--bottom:after {margin-bottom: -1px;}
-  &:not(&--no-border).w-tooltip--left:after {margin-left: -1px;}
-  &:not(&--no-border).w-tooltip--right:after {margin-right: -1px;}
-
   &:not(&--no-border) {
-    &:before {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      border: 7px solid transparent;
-    }
-    &.w-tooltip--top:before {
-      top: 100%;
-      left: 50%;
-      border-top-color: inherit;
-      transform: translateX(-50%);
-      margin-top: 0;
-    }
-    &.w-tooltip--bottom:before {
-      bottom: 100%;
-      left: 50%;
-      border-bottom-color: inherit;
-      transform: translateX(-50%);
-      margin-bottom: 0;
-    }
-    &.w-tooltip--left:before {
-      left: 100%;
-      top: 50%;
-      border-left-color: inherit;
-      transform: translateY(-50%);
-      margin-left: 0;
-    }
-    &.w-tooltip--right:before {
-      right: 100%;
-      top: 50%;
-      border-right-color: inherit;
-      transform: translateY(-50%);
-      margin-right: 0;
-    }
+    @include triangle(var(--w-tooltip-bg-color), '.w-tooltip', 7px);
   }
-  // --------------------------------------------------------
 }
 
 // Transitions.

package/src/wave-ui/utils/index.js

@@ -6,6 +6,6 @@
  */
 export const objectifyClasses = (classes = {}) => {
   if (typeof classes === 'string') classes = { [classes]: true }
-  else if (typeof classes === 'array') classes = { [classes.join(' ')]: true }
+  else if (Array.isArray(classes)) classes = { [classes.join(' ')]: true }
   return classes
 }