wave-ui 2.33.0 → 2.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.33.0",
+  "version": "2.36.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,32 +43,30 @@
     "*.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",
     "@mdi/font": "^5.9.55",
     "@vitejs/plugin-vue": "^1.10.2",
     "@vue/compiler-sfc": "3.1.5",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.4",
     "axios": "^0.25.0",
     "eslint": "^7.32.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.9.1",
+    "gsap": "^3.10.3",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
+    "postcss": "^8.4.12",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.49.7",
+    "sass": "^1.50.0",
     "simple-syntax-highlighter": "^2.2.0",
-    "splitpanes": "^3.0.6",
-    "vite": "^2.7.13",
-    "vite-plugin-pug": "^0.3.0",
-    "vue": "^3.2.31",
+    "splitpanes": "^3.1.1",
+    "vite": "^2.9.5",
+    "vite-plugin-pug": "^0.3.1",
+    "vue": "^3.2.33",
     "vue-cal": "^4.2.0",
-    "vue-router": "^4.0.12",
+    "vue-router": "^4.0.14",
     "vueperslides": "^3.3.2",
     "vuex": "^4.0.2"
-  },
-  "dependencies": {
-    "postcss": "^8.4.6"
   }
 }

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="$slots[`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 { reactive } from 'vue'
-
 export default {
   name: 'w-accordion',
 
@@ -70,22 +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:modelValue', 'focus', 'item-expand', 'item-collapsed'],
 
-  computed: {
-    accordionItems () {
-      const items = typeof this.items === 'number' ? Array(this.items).fill({}) : this.items || []
-      return items.map((item, _index) => reactive({
-        ...item,
-        _index,
-        _expanded: this.modelValue && this.modelValue[_index],
-        _disabled: !!item.disabled
-      }))
-    },
+  data: () => ({
+    accordionItems: []
+  }),
 
+  computed: {
     accordionClasses () {
       return {
         [this.color]: this.color,
@@ -113,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]
@@ -124,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.accordionItems = items.map((item, _index) => ({
+        ...item,
+        _index,
+        _expanded: this.modelValue && this.modelValue[_index],
+        _disabled: !!item.disabled
+      }))
+    }
+  },
+
+  created () {
+    this.updateItems()
+  },
+
+  watch: {
+    modelValue () {
+      this.updateItems()
+    },
+    items: {
+      handler () {
+        this.updateItems()
+      },
+      deep: true
     }
   }
 }

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

@@ -1,10 +1,9 @@
 <template lang="pug">
 .w-card(:class="classes")
   .w-card__title(
-    v-if="$slots.title"
-    :class="{ 'w-card__title--has-toolbar': titleHasToolbar, ...titleClasses }")
-    slot(name="title")
-  .w-card__title(v-else-if="title" :class="titleClasses" v-html="title")
+    v-if="$slots.title || title"
+    :class="{ 'w-card__title--has-toolbar': $slots.title && titleHasToolbar, ...titleClasses }")
+    slot(name="title") {{ title }}
   w-image.w-card__image(v-if="image" :src="image" v-bind="imgProps")
     slot(name="image-content")
   .w-card__content(:class="contentClasses")

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>
@@ -53,6 +57,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

@@ -12,26 +12,16 @@ component(
     v-for="(item, i) in checkboxItems"
     :key="i"
     :model-value="item._isChecked"
-    :name="`${name || `w-checkboxes--${_.uid}`}[]`"
-    :label="item.label"
-    :label-on-left="labelOnLeft"
-    :color="item.color"
-    :round="round"
     @update:model-value="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"
-    @focus="$emit('focus', $event)"
     :class="{ mt1: !inline && i }")
     slot(
-      v-if="$slots[`item.${i + 1}`]"
-      :name="`item.${i + 1}`"
-      :item="getOriginalItem(item)"
-      :checked="!!item._isChecked"
-      :index="i + 1"
-      v-html="item.label")
-    slot(
-      v-else-if="$slots.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"
@@ -56,7 +46,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: {
     modelValue (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

@@ -9,11 +9,19 @@
         @click="onOutsideClick"
         :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="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)
@@ -25,8 +33,17 @@
       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="onBeforeClose"
+      @after-leave="onClose")
+      component.w-drawer(
+        v-if="showDrawer"
+        ref="drawer"
+        :is="tag || 'aside'"
+        :class="drawerClasses"
+        :style="styles")
         slot
 </template>
 
@@ -62,7 +79,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 +138,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,18 +158,19 @@ export default {
   },
 
   methods: {
-    close () {
+    onBeforeClose () {
+      this.$emit('before-close')
+    },
+    onClose () {
       this.showWrapper = false
       this.$emit('update:modelValue', false)
       this.$emit('input', false)
-      this.$emit('close', false)
+      this.$emit('close')
     },
     onOutsideClick () {
       if (!this.persistent) {
-        // The close method is called on animation end, except with pushContent
-        // (not using the same transition).
+        // The close method is called on animation end.
         this.showDrawer = false
-        if (this.pushContent) this.close()
       }
       else if (!this.persistentNoAnimation) {
         this.persistentAnimate = true

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

@@ -6,15 +6,25 @@ 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")
-        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(:class="formProps.validationColor")
+        slot(name="error-message" :message="Validation.message") {{ Validation.message }}
 </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 +33,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: {
+    modelValue: {},
+    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: {
-    modelValue: {},
-    allowSubmit: { type: Boolean },
-    noKeyupValidation: { type: Boolean },
-    noBlurValidation: { type: Boolean },
-    errorPlaceholders: { type: Boolean },
-    disabled: { type: Boolean },
-    readonly: { type: Boolean }
-  },
-
   emits: [
     'submit',
     'before-validate',