wave-ui 3.16.3 → 3.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.16.3",
+  "version": "3.17.0",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

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

@@ -1,4 +1,5 @@
-export { default as WAccordion } from './w-accordion.vue'
+export { default as WAccordion } from './w-accordion/index.vue'
+export { default as WAccordionItem } from './w-accordion/item.vue'
 export { default as WAlert } from './w-alert.vue'
 export { default as WAutocomplete } from './w-autocomplete.vue'
 export { default as WApp } from './w-app.vue'

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

@@ -0,0 +1,205 @@
+<template lang="pug">
+.w-accordion(:class="accordionClasses")
+  //- When externally using the WAccordionItem component.
+  slot(v-if="accordionItemsProvided")
+
+  //- Else, when providing the items array or number through the items prop.
+  template(v-else-if="!isNaN(items) || (items || []).length")
+    w-accordion-item(
+      v-for="(accordionItem, i) in accordionItems"
+      :key="i"
+      :class="itemClass"
+      :item="accordionItem"
+      @focus="$emit('focus', $event)")
+      //- Title.
+      template(#title="{ item, expanded, index }")
+        slot(
+          v-if="$slots[`item-title.${accordionItem.id || (accordionItem._index + 1)}`]"
+          :name="`item-title.${accordionItem.id || (accordionItem._index + 1)}`"
+          :item="item"
+          :expanded="expanded"
+          :index="index")
+        slot(
+          v-else
+          name="item-title"
+          :item="item"
+          :expanded="expanded"
+          :index="index")
+      //- Content.
+      template(#content="{ item, expanded, index }")
+        slot(
+          v-if="$slots[`item-content.${accordionItem.id || (accordionItem._index + 1)}`]"
+          :name="`item-content.${accordionItem.id || (accordionItem._index + 1)}`"
+          :item="item"
+          :expanded="expanded"
+          :index="index")
+        slot(
+          v-else
+          name="item-content"
+          :item="item"
+          :expanded="expanded"
+          :index="index")
+</template>
+
+<script>
+import { objectifyClasses } from '../../utils/index'
+import WAccordionItem from './item.vue'
+
+export default {
+  name: 'w-accordion',
+
+  props: {
+    modelValue: { type: Array },
+    color: { type: String },
+    bgColor: { type: String },
+    items: { type: [Array, Number] }, // Required unless externally using WAccordionItem.
+    itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
+    itemTitleKey: { type: String, default: 'title' },
+    itemContentKey: { type: String, default: 'content' },
+    itemClass: { type: [String, Array, Object] },
+    titleClass: { type: [String, Array, Object] },
+    contentClass: { type: [String, Array, Object] },
+    expandIcon: { type: [String, Boolean], default: 'wi-triangle-down' },
+    expandIconRight: { type: Boolean },
+    expandIconRotate90: { type: Boolean },
+    expandIconProps: { type: Object, default: () => ({}) },
+    expandSingle: { type: Boolean },
+    collapseIcon: { type: String },
+    shadow: { type: Boolean },
+    duration: { type: Number, default: 250 },
+    dark: { type: Boolean },
+    light: { type: Boolean }
+  },
+
+  components: { WAccordionItem },
+
+  emits: ['input', 'update:modelValue', 'focus', 'item-expand', 'item-collapsed'],
+
+  // All provided to the WAccordionItem, not passed as prop since it could be used externally.
+  provide () {
+    return {
+      itemClasses: objectifyClasses(this.itemClasses),
+      titleClasses: this.titleClasses,
+      contentClasses: this.contentClasses,
+      toggleItem: this.toggleItem,
+      onEndOfCollapse: this.onEndOfCollapse,
+      getOriginalItem: this.getOriginalItem,
+      options: this.$props,
+      registerItem: this.registerItem
+    }
+  },
+
+  data: () => ({
+    accordionItems: [],
+    registeredAccordionItems: [] // When using w-accordion-item component and not items prop.
+  }),
+
+  computed: {
+    // Detect if the accordion items are directly provided through slot using WAccordionItem.
+    accordionItemsProvided () {
+      return this.$slots.default?.()?.some(item => item?.type?.name)
+    },
+
+    accordionClasses () {
+      return {
+        [this.color]: this.color,
+        [`${this.bgColor}--bg`]: this.bgColor,
+        'w-accordion--dark': this.dark,
+        'w-accordion--light': this.light,
+        'w-accordion--shadow': this.shadow,
+        'w-accordion--no-icon': !this.expandIcon && !this.collapseIcon,
+        'w-accordion--icon-right': this.expandIcon && this.expandIconRight,
+        'w-accordion--rotate-icon': this.expandIcon && !this.collapseIcon
+      }
+    },
+
+    itemClasses () {
+      return objectifyClasses(this.itemClass)
+    },
+
+    titleClasses () {
+      return objectifyClasses(this.titleClass)
+    },
+
+    contentClasses () {
+      return objectifyClasses(this.contentClass)
+    }
+  },
+
+  methods: {
+    toggleItem (item, e) {
+      item._expanded = !item._expanded
+
+      const items = this.registeredAccordionItems.length ? this.registeredAccordionItems : this.accordionItems
+      if (this.expandSingle) items.forEach(obj => obj._index !== item._index && (obj._expanded = false))
+      const expandedItems = items.map(item => item._expanded || false)
+      this.$emit('update:modelValue', expandedItems)
+      this.$emit('input', expandedItems)
+      this.$emit('item-expand', { item, expanded: item._expanded })
+
+      // When a focused item moves in the page, the scrollTop is naturally updated by the browser.
+      // So if expandSingle is set to true, clicking on the next title of an open pane would shift the
+      // scrollTop unless unfocused while transitioning. #3.
+      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.registeredAccordionItems.length ? this.registeredAccordionItems : this.items)[item._index]
+    },
+
+    updateItems () {
+      let items = []
+      if (this.registeredAccordionItems.length) items = this.registeredAccordionItems
+      else 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
+      }))
+    },
+
+    // Provide-injected in and used from w-accordion-item.
+    // Only when w-accordion-item is directly used outside of Wave UI.
+    registerItem (item) {
+      if (!this.items) {
+        item._index = this.registeredAccordionItems.length
+        item._expanded = this.modelValue?.[item._index] || false
+
+        this.registeredAccordionItems.push(item)
+        this.updateItems()
+      }
+    }
+  },
+
+  created () {
+    this.updateItems()
+  },
+
+  watch: {
+    modelValue () {
+      this.updateItems()
+    },
+    items () {
+      this.updateItems()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.w-accordion {
+  z-index: 1;
+
+  @include themeable;
+
+  &--shadow {box-shadow: $box-shadow;}
+}
+</style>

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

@@ -0,0 +1,149 @@
+<template lang="pug">
+.w-accordion__item(:class="itemClasses" :aria-expanded="accordionItem._expanded ? 'true' : 'false'")
+  .w-accordion__item-title(
+    @click="!accordionItem._disabled && toggleItem(accordionItem, $event)"
+    @focus="$emit('focus', getOriginalItem(accordionItem))"
+    @keypress.enter="!accordionItem._disabled && toggleItem(accordionItem, $event)"
+    :tabindex="!accordionItem._disabled && 0"
+    :class="titleClasses")
+    //- Expand icon on left.
+    w-button.w-accordion__expand-icon(
+      v-if="options.expandIcon && !options.expandIconRight"
+      :icon="(accordionItem._expanded && options.collapseIcon) || options.expandIcon"
+      :icon-props="options.expandIconProps"
+      :disabled="accordionItem._disabled || null"
+      :tabindex="-1"
+      text
+      @keypress.stop
+      @click.stop="!accordionItem._disabled && toggleItem(accordionItem, $event)"
+      :class="{ 'w-accordion__expand-icon--expanded': accordionItem._expanded, 'w-accordion__expand-icon--rotate90': options.expandIconRotate90 }")
+    //- Title.
+    slot(
+      name="title"
+      :item="getOriginalItem(accordionItem)"
+      :expanded="accordionItem._expanded"
+      :index="accordionItem._index + 1")
+      .grow(v-html="accordionItem[options.itemTitleKey]")
+    //- Expand icon on right.
+    w-button.w-accordion__expand-icon(
+      v-if="options.expandIcon && options.expandIconRight"
+      :icon="(accordionItem._expanded && options.collapseIcon) || options.expandIcon"
+      text
+      @keypress.stop
+      @click.stop="!accordionItem._disabled && toggleItem(accordionItem, $event)"
+      :class="{ 'w-accordion__expand-icon--expanded': accordionItem._expanded, 'w-accordion__expand-icon--rotate90': options.expandIconRotate90 }")
+  //- Content.
+  w-transition-expand(y @after-leave="onEndOfCollapse(accordionItem)" :duration="options.duration")
+    .w-accordion__item-content(v-if="accordionItem._expanded" :class="contentClasses")
+      slot(
+        name="content"
+        :item="getOriginalItem(accordionItem)"
+        :expanded="accordionItem._expanded"
+        :index="accordionItem._index + 1")
+        div(v-html="accordionItem[options.itemContentKey]")
+</template>
+
+<script>
+export default {
+  name: 'w-accordion-item',
+
+  props: {
+    item: { type: Object }
+  },
+
+  inject: [
+    'options',
+    'itemClasses',
+    'titleClasses',
+    'contentClasses',
+    'toggleItem',
+    'onEndOfCollapse',
+    'getOriginalItem',
+    'registerItem'
+  ],
+
+  emits: ['focus'],
+
+  data () {
+    return {
+      accordionItem: {
+        ...(this.item || {}),
+        _index: this.item?._index ?? 0,
+        _expanded: this.item?._expanded || false,
+        _disabled: this.item?._disabled || false
+      }
+    }
+  },
+
+  computed: {
+    itemClass () {
+      return {
+        'w-accordion__item--expanded': this.accordionItem._expanded,
+        'w-accordion__item--disabled': this.accordionItem._disabled,
+        [this.accordionItem[this.options.itemColorKey]]: this.accordionItem[this.options.itemColorKey],
+        ...this.accordionItemClasses
+      }
+    }
+  },
+
+  created () {
+    // Register this item to the w-accordion component.
+    this.registerItem(this.accordionItem)
+  }
+}
+</script>
+
+<style lang="scss">
+  .w-accordion__item {position: relative;}
+
+  button.w-accordion__expand-icon {color: rgba(var(--w-base-color-rgb), 0.4);}
+  .w-accordion__expand-icon {
+    margin-right: $base-increment;
+
+    .w-accordion--rotate-icon & {@include default-transition;}
+    &--rotate90 {transform: rotate(-90deg);}
+    &--expanded {transform: rotate(-180deg);}
+    &--expanded.w-accordion__expand-icon--rotate90 {transform: rotate(0deg);}
+
+    .w-icon:before {font-size: 1.1em;}
+  }
+
+.w-accordion__item-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: round(1.2 * $base-font-size);
+  padding: 1 * $base-increment;
+  user-select: none;
+  cursor: pointer;
+  border-top: $border;
+  -webkit-tap-highlight-color: transparent;
+
+  .w-accordion__item--disabled & {
+    cursor: not-allowed;
+    opacity: 0.6;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .w-accordion--no-icon &, .w-accordion--icon-right & {padding-left: 3 * $base-increment;}
+
+  .w-accordion__item:first-child & {border-top-color: transparent;}
+
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: currentColor;
+    opacity: 0;
+    transition: $fast-transition-duration;
+  }
+
+  &:focus:before, &:hover:before {opacity: 0.03;}
+  &:active:before {opacity: 0.05;}
+  .w-accordion__item--disabled &:before {display: none;}
+}
+
+.w-accordion__item-content {
+  padding: (2 * $base-increment) (3 * $base-increment);
+}
+
+</style>

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

@@ -53,6 +53,8 @@ export default {
     light: { type: Boolean }
   },
 
+  emits: ['input', 'update:modelValue', 'before-close', 'close'],
+
   provide () {
     return {
       // If a detachable is used inside a w-drawer without an appendTo, default to the drawer element
@@ -61,8 +63,6 @@ export default {
     }
   },
 
-  emits: ['input', 'update:modelValue', 'before-close', 'close'],
-
   data () {
     return {
       showWrapper: this.modelValue,

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

@@ -82,6 +82,8 @@ export default {
     light: { type: Boolean }
   },
 
+  emits: ['input', 'update:modelValue', 'before-close', 'close'],
+
   provide () {
     return {
       // If a detachable is used inside a w-drawer without an appendTo, default to the drawer element
@@ -90,8 +92,6 @@ export default {
     }
   },
 
-  emits: ['input', 'update:modelValue', 'before-close', 'close'],
-
   data () {
     return {
       showWrapper: this.modelValue,

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

@@ -31,17 +31,6 @@ export default {
     readonly: { type: Boolean }
   },
 
-  provide () {
-    return {
-      formRegister: this.register,
-      formUnregister: this.unregister,
-      validateElement: this.validateElement,
-      // Give access to the form params (like disabled) to all the form components.
-      // To keep it reactive, we need an object not a list of props (by design in Vue).
-      formProps: this.$props
-    }
-  },
-
   emits: [
     'submit',
     'before-validate',
@@ -54,6 +43,17 @@ export default {
     'update:errorsCount'
   ],
 
+  provide () {
+    return {
+      formRegister: this.register,
+      formUnregister: this.unregister,
+      validateElement: this.validateElement,
+      // Give access to the form params (like disabled) to all the form components.
+      // To keep it reactive, we need an object not a list of props (by design in Vue).
+      formProps: this.$props
+    }
+  },
+
   data: () => ({
     formElements: [],
     status: null, // null = pristine, false = error, true = success.

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

@@ -82,6 +82,8 @@ export default {
     // alignRight, noPosition, zIndex, activator.
   },
 
+  emits: ['input', 'update:modelValue', 'open', 'close'],
+
   provide () {
     return {
       // If a detachable is used inside a w-menu without an appendTo, default to the menu element
@@ -90,8 +92,6 @@ export default {
     }
   },
 
-  emits: ['input', 'update:modelValue', 'open', 'close'],
-
   data: () => ({
     detachableVisible: false,
     hoveringActivator: false,

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

@@ -27,6 +27,8 @@ export default {
     persistentNoAnimation: { type: Boolean }
   },
 
+  emits: ['input', 'update:modelValue', 'click', 'before-close', 'close'],
+
   provide () {
     return {
       // If a detachable is used inside a w-overlay without an appendTo, default to the overlay element
@@ -35,8 +37,6 @@ export default {
     }
   },
 
-  emits: ['input', 'update:modelValue', 'click', 'before-close', 'close'],
-
   data: () => ({
     persistentAnimate: false,
     showOverlay: false