wave-ui 1.52.0 → 1.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.52.0",
+  "version": "1.53.0",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",
@@ -43,7 +43,7 @@
     "*.vue"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.0",
+    "@babel/core": "^7.17.9",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@vitejs/plugin-vue": "^1.10.2",
@@ -61,6 +61,7 @@
     "gsap": "^3.9.1",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
+    "postcss": "^8.4.12",
     "rollup-plugin-delete": "^2.0.0",
     "sass": "^1.49.7",
     "simple-syntax-highlighter": "^1.5.0",

package/src/wave-ui/components/transitions/w-transition-expand.vue

@@ -2,7 +2,6 @@
 transition(
   name="expand"
   mode="out-in"
-  v-bind="$props"
   :css="false"
   @before-appear="beforeAppear"
   @appear="appear"
@@ -17,15 +16,13 @@ transition(
 </template>
 
 <script>
-// const duration = 250 // ms.
-
 export default {
   name: 'w-transition-expand',
 
   props: {
     x: { type: Boolean },
     y: { type: Boolean },
-    duration: { type: Number, default: 200 }
+    duration: { type: Number, default: 250 }
   },
 
   data: () => ({
@@ -64,56 +61,47 @@ export default {
       // Not when clicking very fast and mixing states order.
       if (this.cleanTransitionCycle) this.saveOriginalStyles(el)
       this.cleanTransitionCycle = false
-      this.$emit('before-appear')
     },
     appear (el, done) {
       this.show(el)
       setTimeout(done, this.duration)
       this.cleanTransitionCycle = false
-      this.$emit('appear')
     },
     afterAppear (el) {
       this.applyOriginalStyles(el)
       // May be transitioning with v-show, if so don't reapply display none.
       el.style.cssText = el.style.cssText.replace('display: none;', '')
       this.cleanTransitionCycle = false
-      this.$emit('after-appear')
     },
     beforeEnter (el) {
       // Only save original state once before a 'clean' transition start.
       // Not when clicking very fast and mixing states order.
       if (this.cleanTransitionCycle) this.saveOriginalStyles(el)
       this.cleanTransitionCycle = false
-      this.$emit('before-enter')
     },
     enter (el, done) {
       this.show(el)
       setTimeout(done, this.duration)
       this.cleanTransitionCycle = false
-      this.$emit('enter')
     },
     afterEnter (el) {
       this.applyOriginalStyles(el)
       // May be transitioning with v-show, if so don't reapply display none.
       el.style.cssText = el.style.cssText.replace('display: none;', '')
       this.cleanTransitionCycle = false
-      this.$emit('after-enter')
     },
     beforeLeave (el) {
       this.beforeHide(el)
       this.cleanTransitionCycle = false
-      this.$emit('before-leave')
     },
     leave (el, done) {
       this.hide(el)
       setTimeout(done, this.duration)
       this.cleanTransitionCycle = false
-      this.$emit('leave')
     },
     afterLeave (el) {
       this.applyOriginalStyles(el)
       this.cleanTransitionCycle = true
-      this.$emit('after-leave')
     },
 
     applyHideStyles (el) {

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

@@ -38,20 +38,29 @@
         @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")
+    w-transition-expand(
+      y
+      @after-leave="onEndOfCollapse(item)"
+      :duration="duration")
+      .w-accordion__item-content(
+        v-if="item._expanded"
+        :class="contentClass")
         slot(
           v-if="$scopedSlots[`item-content.${item.id || i + 1}`]"
           :name="`item-content.${item.id || i + 1}`"
           :item="getOriginalItem(item)"
-          :expanded="item._expanded" :index="i + 1")
-        slot(v-else name="item-content" :item="getOriginalItem(item)" :expanded="item._expanded" :index="i + 1")
+          :expanded="item._expanded"
+          :index="i + 1")
+        slot(
+          v-else
+          name="item-content"
+          :item="getOriginalItem(item)"
+          :expanded="item._expanded"
+          :index="i + 1")
           div(v-html="item[itemContentKey]")
 </template>
 
 <script>
-import Vue from 'vue'
-
 export default {
   name: 'w-accordion',
 
@@ -70,23 +79,17 @@ export default {
     expandIconRight: { type: Boolean },
     expandSingle: { type: Boolean },
     collapseIcon: { type: String },
-    shadow: { type: Boolean }
+    shadow: { type: Boolean },
+    duration: { type: Number, default: 250 }
   },
 
-  emits: ['input', 'update:modelValue', 'focus', 'item-expand'],
+  emits: ['input', 'update:value', 'focus', 'item-expand', 'item-collapsed'],
 
-  computed: {
-    accordionItems () {
-      const items = typeof this.items === 'number' ? Array(this.items).fill({}) : this.items || []
-      // eslint-disable-next-line new-cap
-      return items.map((item, _index) => new Vue.observable({
-        ...item,
-        _index,
-        _expanded: this.value && this.value[_index],
-        _disabled: !!item.disabled
-      }))
-    },
+  data: () => ({
+    accordionItems: []
+  }),
 
+  computed: {
     accordionClasses () {
       return {
         [this.color]: this.color,
@@ -104,7 +107,7 @@ export default {
       item._expanded = !item._expanded
       if (this.expandSingle) this.accordionItems.forEach(obj => obj._index !== item._index && (obj._expanded = false))
       const expandedItems = this.accordionItems.map(item => item._expanded || false)
-      this.$emit('update:modelValue', expandedItems)
+      this.$emit('update:value', expandedItems)
       this.$emit('input', expandedItems)
       this.$emit('item-expand', { item, expanded: item._expanded })
 
@@ -114,6 +117,9 @@ export default {
       e.target.blur()
       setTimeout(() => e.target.focus(), 300)
     },
+    onEndOfCollapse (item) {
+      this.$emit('item-collapsed', { item, expanded: item._expanded })
+    },
     // Return the original accordion item (so there is no `_index`, etc.).
     getOriginalItem (item) {
       return this.items[item._index]
@@ -125,6 +131,31 @@ export default {
         'w-accordion__item--disabled': item._disabled,
         [item[this.itemColorKey]]: item[this.itemColorKey]
       }
+    },
+    updateItems () {
+      const items = typeof this.items === 'number' ? Array(this.items).fill({}) : this.items || []
+      this.$set(this, 'accordionItems', items.map((item, _index) => ({
+        ...item,
+        _index,
+        _expanded: this.value && this.value[_index],
+        _disabled: !!item.disabled
+      })))
+    }
+  },
+
+  created () {
+    this.updateItems()
+  },
+
+  watch: {
+    value () {
+      this.updateItems()
+    },
+    items: {
+      handler () {
+        this.updateItems()
+      },
+      deep: true
     }
   }
 }

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

@@ -22,16 +22,20 @@ component(
     :aria-checked="isChecked || 'false'"
     role="checkbox")
   template(v-if="hasLabel && labelOnLeft")
-    label.w-checkbox__label.w-form-el-shakable.pr2(v-if="$slots.default" :for="`w-checkbox--${_uid}`")
-      slot
-    label.w-checkbox__label.w-form-el-shakable.pr2(v-else-if="label" :for="`w-checkbox--${_uid}`" v-html="label")
+    label.w-checkbox__label.w-form-el-shakable.pr2(
+      v-if="$slots.default || label"
+      :for="`w-checkbox--${_uid}`"
+      :class="labelClasses")
+      slot {{ label }}
   .w-checkbox__input(@click="$refs.input.focus();$refs.input.click()" :class="this.color")
     svg(width="11px" height="9px" viewbox="0 0 12 9")
       polyline(points="1 5 4 8 10 2")
   template(v-if="hasLabel && !labelOnLeft")
-    label.w-checkbox__label.w-form-el-shakable.pl2(v-if="$slots.default" :for="`w-checkbox--${_uid}`")
-      slot
-    label.w-checkbox__label.w-form-el-shakable.pl2(v-else-if="label" :for="`w-checkbox--${_uid}`" v-html="label")
+    label.w-checkbox__label.w-form-el-shakable.pl2(
+      v-if="$slots.default || label"
+      :for="`w-checkbox--${_uid}`"
+      :class="labelClasses")
+      slot {{ label }}
 </template>
 
 <script>
@@ -50,6 +54,7 @@ export default {
     label: { type: String },
     labelOnLeft: { type: Boolean },
     color: { type: String, default: 'primary' },
+    labelColor: { type: String, default: 'primary' },
     noRipple: { type: Boolean },
     indeterminate: { type: Boolean },
     round: { type: Boolean }

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

@@ -11,31 +11,20 @@ component(
   w-checkbox(
     v-for="(item, i) in checkboxItems"
     :key="i"
-    :name="`${name || `w-checkboxes--${_uid}`}[]`"
-    :label="item.label"
-    :label-on-left="labelOnLeft"
     :value="item._isChecked"
-    :color="item.color"
-    :round="round"
-    :disabled="isDisabled || null"
-    :readonly="isReadonly || null"
     @input="toggleCheck(item, $event)"
     @focus="$emit('focus', $event)"
+    :name="`${inputName}[]`"
+    v-bind="{ label: item.label, color: item.color, labelOnLeft, labelColor, round }"
+    :disabled="isDisabled || null"
+    :readonly="isReadonly || null"
     :class="{ mt1: !inline && i }")
     slot(
-      v-if="$scopedSlots[`item.${i + 1}`]"
-      :name="`item.${i + 1}`"
-      :item="getOriginalItem(item)"
-      :checked="!!item._isChecked"
-      :index="i + 1"
-      v-html="item.label")
-    slot(
-      v-else-if="$scopedSlots.item"
-      name="item"
+      v-if="$slots[`item.${i + 1}`] || $slots.item"
+      :name="$slots[`item.${i + 1}`] ? `item.${i + 1}` : 'item'"
       :item="getOriginalItem(item)"
       :checked="!!item._isChecked"
-      :index="i + 1"
-      v-html="item.label")
+      :index="i + 1")
 </template>
 
 <script>
@@ -55,7 +44,8 @@ export default {
     itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
     inline: { type: Boolean },
     round: { type: Boolean },
-    color: { type: String, default: 'primary' }
+    color: { type: String, default: 'primary' },
+    labelColor: { type: String, default: 'primary' }
     // Props from mixin: name, disabled, readonly, required, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },

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

@@ -4,13 +4,14 @@ w-overlay.w-dialog(
   :persistent="persistent"
   :persistent-no-animation="persistentNoAnimation"
   @click="onOutsideClick"
-  @closed="$emit('closed')"
+  @close="onClose"
   :bg-color="overlayColor"
   :opacity="overlayOpacity"
   :class="classes")
-  transition(:name="transition" appear @after-leave="onClose")
+  transition(:name="transition" appear @after-leave="onBeforeClose")
     w-card.w-dialog__content(
       v-show="showContent"
+      ref="dialog"
       no-border
       :color="color"
       :bg-color="bgColor"
@@ -48,7 +49,15 @@ export default {
     overlayOpacity: { type: [Number, String, Boolean] }
   },
 
-  emits: ['input', 'update:modelValue', 'close', 'closed'],
+  provide () {
+    return {
+      // If a detachable is used inside a w-drawer without an appendTo, default to the drawer element
+      // instead of the w-app.
+      detachableDefaultRoot: () => this.$refs.dialog.$el || null
+    }
+  },
+
+  emits: ['input', 'update:modelValue', 'before-close', 'close'],
 
   data () {
     return {
@@ -81,11 +90,14 @@ export default {
         this.showContent = false
         // If fade transition close both dialog and overlay at the same time
         // (don't need to wait for the end of the dialog transition).
-        if (this.transition === 'fade') this.onClose()
+        if (this.transition === 'fade') this.onBeforeClose()
       }
     },
-    onClose () {
+    onBeforeClose () {
       this.showWrapper = false
+      this.$emit('before-close')
+    },
+    onClose () {
       this.$emit('update:modelValue', false)
       this.$emit('input', false)
       this.$emit('close')
@@ -94,10 +106,7 @@ export default {
 
   watch: {
     value (value) {
-      // If value is true, mount the wrapper in DOM and open the dialog.
-      // If value is false, keep the wrapper in DOM and close the dialog;
-      // At the end of the dialog transition the value is updated and wrapper removed from the DOM.
-      if (value) this.showWrapper = value
+      this.showWrapper = value
       this.showContent = value
     }
   }

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

@@ -1,5 +1,8 @@
 <template lang="pug">
-.w-divider(:class="classes")
+.w-divider(
+  :class="classes"
+  role="presentation"
+  :aria-orientation="vertical ? 'vertical' : 'horizontal'")
   slot
 </template>
 

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

@@ -7,13 +7,22 @@
         v-if="!noOverlay"
         v-model="showDrawer"
         @click="onOutsideClick"
+        @before-close="onBeforeClose"
         :persistent="persistent"
         persistent-no-animation
-        :bg-color="overlayColor"
+        :bg-color="overlayColor || 'transparent'"
         :opacity="overlayOpacity")
       slot(name="pushable")
-    transition(name="fade")
-      .w-drawer(v-if="!unmountDrawer" :class="drawerClasses" :style="styles")
+    transition(
+      name="fade"
+      @before-leave="noOverlay && onBeforeClose()"
+      @after-leave="onClose")
+      component.w-drawer(
+        v-if="showDrawer"
+        ref="drawer"
+        :is="tag || 'aside'"
+        :class="drawerClasses"
+        :style="styles")
         slot
   //- Other cases.
   template(v-else)
@@ -21,12 +30,22 @@
       v-if="!noOverlay"
       v-model="showDrawer"
       @click="onOutsideClick"
+      @before-close="onBeforeClose"
       :persistent="persistent"
       persistent-no-animation
       :bg-color="overlayColor"
       :opacity="overlayOpacity")
-    transition(:name="transitionName" appear @after-leave="close")
-      component.w-drawer(v-if="showDrawer" :is="tag || 'aside'" :class="drawerClasses" :style="styles")
+    transition(
+      :name="transitionName"
+      appear
+      @before-leave="noOverlay && onBeforeClose()"
+      @after-leave="onClose")
+      component.w-drawer(
+        v-if="showDrawer"
+        ref="drawer"
+        :is="tag || 'aside'"
+        :class="drawerClasses"
+        :style="styles")
         slot
 </template>
 
@@ -62,7 +81,15 @@ export default {
     tag: { type: String, default: 'aside' }
   },
 
-  emits: ['input', 'update:modelValue', 'close'],
+  provide () {
+    return {
+      // If a detachable is used inside a w-drawer without an appendTo, default to the drawer element
+      // instead of the w-app.
+      detachableDefaultRoot: () => this.$refs.drawer || null
+    }
+  },
+
+  emits: ['input', 'update:modelValue', 'before-close', 'close'],
 
   data () {
     return {
@@ -113,7 +140,7 @@ export default {
     // It moves inside the overflow hidden outer wrap.
     trackStyles () {
       return this.pushContent && this.showDrawer && {
-        transform: `translateX(${this.position === 'left' ? '' : '-'}${this.size})`
+        transform: `translateX(${this.position === 'left' ? '' : '-'}${this.size || '200px'})`
       }
     },
     styles () {
@@ -133,24 +160,22 @@ export default {
   },
 
   methods: {
-    close () {
-      this.showWrapper = false
-      this.$emit('update:modelValue', false)
-      this.$emit('input', false)
-      this.$emit('close', false)
-    },
     onOutsideClick () {
-      if (!this.persistent) {
-        // The close method is called on animation end, except with pushContent
-        // (not using the same transition).
-        this.showDrawer = false
-        if (this.pushContent) this.close()
-      }
-      else if (!this.persistentNoAnimation) {
+      if (this.persistent && !this.persistentNoAnimation) {
         this.persistentAnimate = true
         setTimeout(() => (this.persistentAnimate = false), 200) // Must match CSS animation duration.
       }
-    }
+    },
+    onBeforeClose () {
+      this.$emit('before-close')
+      this.showDrawer = false
+    },
+    onClose () {
+      this.showWrapper = false
+      this.$emit('update:modelValue', false)
+      this.$emit('input', false)
+      this.$emit('close')
+    },
   },
 
   watch: {

package/src/wave-ui/components/w-form-element.vue

@@ -6,15 +6,31 @@ div(:class="classes")
   //- Error message.
   w-transition-expand(y)
     template(v-if="Validation.message")
-      .w-form-el__error.error(v-if="$slots['error-message']" class="w-form-el__error w-form-el__error")
+      .w-form-el__error(
+        v-if="$slots['error-message']"
+        :class="formProps.validationColor")
         slot(name="error-message" :message="Validation.message")
-      .w-form-el__error.error(v-else v-html="Validation.message" class="w-form-el__error w-form-el__error")
+      .w-form-el__error.error(
+        v-else
+        v-html="Validation.message"
+        :class="formProps.validationColor")
 </template>
 
 <script>
 export default {
   name: 'w-form-element',
 
+  props: {
+    valid: { required: true },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    inputValue: { required: true }, // The form element's input value.
+    validators: { type: Array },
+    isFocused: { default: false }, // Watched.
+    column: { default: false }, // Flex direction of the embedded component: column or row by default.
+    wrap: { default: false } // Flex-wrap if needed.
+  },
+
   inject: {
     formRegister: { default: null },
     formUnregister: { default: null },
@@ -23,23 +39,13 @@ export default {
       default: () => ({
         noKeyupValidation: false,
         noBlurValidation: false,
+        validationColor: 'error',
         disabled: false,
         readonly: false
       })
     }
   },
 
-  props: {
-    valid: { required: true },
-    disabled: { type: Boolean },
-    readonly: { type: Boolean },
-    inputValue: { required: true }, // The form element's input value.
-    validators: { type: Array },
-    isFocused: { default: false }, // Watched.
-    column: { default: false }, // Flex direction of the embedded component: column or row by default.
-    wrap: { default: false } // Flex-wrap if needed.
-  },
-
   emits: ['reset', 'update:valid'],
 
   data: () => ({

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

@@ -1,5 +1,9 @@
 <template lang="pug">
-form.w-form(@submit="onSubmit" @reset="reset" novalidate :class="classes")
+form.w-form(
+  @submit="onSubmit"
+  @reset="reset"
+  novalidate
+  :class="classes")
   slot
 </template>
 
@@ -16,6 +20,17 @@ const asyncSome = async (array, predicate) => {
 export default {
   name: 'w-form',
 
+  props: {
+    value: {},
+    allowSubmit: { type: Boolean },
+    noKeyupValidation: { type: Boolean },
+    noBlurValidation: { type: Boolean },
+    errorPlaceholders: { type: Boolean },
+    validationColor: { type: String, default: 'error' },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean }
+  },
+
   provide () {
     return {
       formRegister: this.register,
@@ -27,16 +42,6 @@ export default {
     }
   },
 
-  props: {
-    value: {},
-    allowSubmit: { type: Boolean },
-    noKeyupValidation: { type: Boolean },
-    noBlurValidation: { type: Boolean },
-    errorPlaceholders: { type: Boolean },
-    disabled: { type: Boolean },
-    readonly: { type: Boolean }
-  },
-
   emits: [
     'submit',
     'before-validate',

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

@@ -1,12 +1,12 @@
 <template lang="pug">
 component.w-icon(
   :is="tag || 'i'"
-  :class="classes"
   v-on="$listeners"
+  :class="classes"
   role="icon"
   aria-hidden="true"
-  :style="styles")
-  template(v-if="ligature") {{ ligature.icon }}
+  :style="readIcon() /* Always reacting to slot change when called from template. */ && styles")
+  template(v-if="hasLigature") {{ icon }}
 </template>
 
 <script>
@@ -41,15 +41,13 @@ export default {
   emits: [],
 
   data: () => ({
-    icon: ''
+    icon: '',
+    fontName: ''
   }),
 
   computed: {
-    ligature () {
-      if (!config.iconsLigature) return false
-
-      const [fontName, icon] = this.icon.split(' ')
-      return fontName === config.iconsLigature && { fontName, icon }
+    hasLigature () {
+      return config.iconsLigature === this.fontName
     },
     forcedSize () {
       return this.size && (!isNaN(this.size) ? `${this.size}px` : this.size)
@@ -66,7 +64,8 @@ export default {
     },
     classes () {
       return {
-        [this.icon]: true,
+        [this.fontName]: true,
+        [!this.hasLigature && this.icon]: !this.hasLigature && this.icon,
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: this.presetSize && !this.forcedSize,
@@ -80,8 +79,7 @@ export default {
         'w-icon--rotate-90': this.rotate90a,
         'w-icon--rotate-135': this.rotate135a,
         'w-icon--flip-x': this.flipX,
-        'w-icon--flip-y': this.flipY,
-        [this.ligature && this.ligature.fontName]: this.ligature
+        'w-icon--flip-y': this.flipY
       }
     },
     styles () {
@@ -89,12 +87,15 @@ export default {
     }
   },
 
-  created () {
-    this.icon = this.$slots.default[0].text.trim() || ''
-  },
+  methods: {
+    readIcon () {
+      const { default: slot } = this.$slots
+      const [fontName = '', icon = ''] = slot[0].text.trim().split(' ') || []
+      this.fontName = fontName
+      this.icon = icon
 
-  beforeUpdate () {
-    this.icon = this.$slots.default[0].text.trim()
+      return true // Always return true for styles to be applied (c.f. template styles).
+    }
   }
 }
 </script>
@@ -108,6 +109,7 @@ export default {
   justify-content: center;
   vertical-align: middle;
   user-select: none;
+  speak: never;
   line-height: 1;
   font-size: 1.2em;
   width: 1em;