wave-ui 3.17.2 → 3.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.17.2",
+  "version": "3.17.3",
   "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/w-accordion/index.vue

@@ -4,18 +4,21 @@
   slot(v-if="accordionItemsProvided")
 
   //- Else, when providing the items array or number through the items prop.
-  template(v-else-if="!isNaN(items) || (items || []).length")
+  template(v-else-if="(items || []).length")
     w-accordion-item(
-      v-for="(accordionItem, i) in state.accordionItems"
+      v-for="(item, i) in (items.length ? items : accordionItems)"
       :key="i"
-      :class="itemClass"
-      :item="accordionItem"
+      :class="itemClasses"
+      :title="item.title"
+      :content="item.content"
+      :expanded="item.expanded || item._expanded"
+      :disabled="item.disabled || item._disabled"
       @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)}`"
+          v-if="$slots[`item-title.${item.id || index}`]"
+          :name="`item-title.${item.id || index}`"
           :item="item"
           :expanded="expanded"
           :index="index")
@@ -28,8 +31,8 @@
       //- 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)}`"
+          v-if="$slots[`item-content.${item.id || index}`]"
+          :name="`item-content.${item.id || index}`"
           :item="item"
           :expanded="expanded"
           :index="index")
@@ -43,6 +46,7 @@
 
 <script>
 import { objectifyClasses } from '../../utils/index'
+import { consoleError } from '../../utils/console'
 import WAccordionItem from './item.vue'
 
 export default {
@@ -52,7 +56,9 @@ export default {
     modelValue: { type: Array },
     color: { type: String },
     bgColor: { type: String },
-    items: { type: [Array, Number] }, // Required unless externally using WAccordionItem.
+    // Required unless externally using WAccordionItem.
+    // Number deprecated: use WAccordionItem.
+    items: { type: [Array, Number] },
     itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
     itemTitleKey: { type: String, default: 'title' },
     itemContentKey: { type: String, default: 'content' },
@@ -78,7 +84,6 @@ export default {
   // 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,
       onItemToggle: this.onItemToggle,
@@ -86,17 +91,23 @@ export default {
       getOriginalItem: this.getOriginalItem,
       options: this.$props,
       registerItem: this.registerItem,
-      state: this.state
+      unregisterItem: this.unregisterItem,
+      getAccordionItem: this.getAccordionItem
     }
   },
 
   data: () => ({
-    state: {
-      accordionItems: []
-    }
+    accordionItems: []
   }),
 
   computed: {
+    accordionItemsById () {
+      return this.accordionItems.reduce((obj, item) => {
+        obj[item._cuid] = item
+        return obj
+      }, {})
+    },
+
     // Detect if the accordion items are directly provided through slot using WAccordionItem.
     accordionItemsProvided () {
       return this.$slots.default?.()?.some(item => item?.type?.name)
@@ -129,9 +140,13 @@ export default {
   },
 
   methods: {
+    getAccordionItem (cuid) {
+      return this.accordionItemsById[cuid]
+    },
+
     onItemToggle (item) {
-      if (this.expandSingle) this.state.accordionItems.forEach(obj => obj._index !== item._index && (obj._expanded = false))
-      const expandedItems = this.state.accordionItems.map(item => item._expanded || false)
+      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('input', expandedItems)
       this.$emit('item-expand', { item, expanded: item._expanded })
@@ -143,48 +158,48 @@ export default {
 
     // Return the original accordion item (so there is no `_index`, etc.).
     getOriginalItem (item) {
-      return this.items[item._index]
-    },
-
-    updateItems () {
-      let items = this.state.accordionItems
-      if (!this.accordionItemsProvided && this.items) {
-        items = (typeof this.items === 'number' ? Array(this.items).fill({}) : this.items) || []
-      }
-
-      this.state.accordionItems = items.map((item, _index) => ({
-        ...item,
-        _index,
-        _expanded: this.modelValue?.[_index] ?? false,
-        _disabled: !!item.disabled
-      }))
+      return this.items?.[item._index] || item
     },
 
-    // Provide-injected in and used from w-accordion-item.
+    // Provide-injected and used from w-accordion-item.
     // Only when w-accordion-item is directly used outside of Wave UI.
     registerItem (item) {
-      if (this.accordionItemsProvided) {
-        item._index = this.state.accordionItems.length
-        item._expanded = this.modelValue?.[item._index] ?? false
-        item._disabled = !!item.disabled
+      item._index = this.accordionItems.length
+      item = Object.assign(item, this.items?.[item._index])
+      item._expanded = this.modelValue?.[item._index] ?? false
+      item._disabled = !!item._disabled
 
-        this.state.accordionItems.push(item)
-      }
+      this.accordionItems.push(item)
+    },
 
-      return item._index
+    // Provide-injected and used from w-accordion-item.
+    unregisterItem (cuid) {
+      const index = this.getAccordionItem(cuid)?._index
+      if (index !== undefined) this.accordionItems.splice(index, 1)
     }
   },
 
   created () {
-    if (!this.accordionItemsProvided && this.items) this.updateItems()
+    if (!isNaN(this.items)) {
+      consoleError(
+        `Since version 3.17.3, the w-accordion \`items\` prop can no longer be a Number.
+        Please use the w-accordion-item component instead for advanced custom rendering.
+        https://antoniandre.github.io/wave-ui/w-accordion#w-accordion-item`
+      )
+    }
+  },
+
+  unmounted () {
+    this.accordionItems = []
   },
 
   watch: {
-    modelValue () {
-      this.updateItems()
-    },
-    items () {
-      // this.updateItems()
+    modelValue (array) {
+      if (this.expandSingle) {
+        const firstExpandedIndex = array.findIndex(bool => !!bool)
+        if (firstExpandedIndex > -1) array = array.fill(false, firstExpandedIndex + 1)
+      }
+      array.forEach((bool, i) => ((this.accordionItems[i] || {})._expanded = bool))
     }
   }
 }

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

@@ -20,7 +20,7 @@
     //- Title.
     slot(
       name="title"
-      :item="(accordionItem)"
+      :item="getOriginalItem(accordionItem)"
       :expanded="accordionItem._expanded"
       :index="accordionItem._index + 1")
       .grow(v-html="accordionItem[options.itemTitleKey]")
@@ -37,7 +37,7 @@
     .w-accordion__item-content(v-if="accordionItem._expanded" :class="contentClasses")
       slot(
         name="content"
-        :item="(accordionItem)"
+        :item="getOriginalItem(accordionItem)"
         :expanded="accordionItem._expanded"
         :index="accordionItem._index + 1")
         div(v-html="accordionItem[options.itemContentKey]")
@@ -48,44 +48,38 @@ export default {
   name: 'w-accordion-item',
 
   props: {
-    item: { type: Object }
+    title: { type: String },
+    content: { type: String },
+    expanded: { type: Boolean },
+    disabled: { type: Boolean }
   },
 
   inject: [
     'options',
-    'itemClasses',
     'titleClasses',
     'contentClasses',
     'onItemToggle',
     'onEndOfCollapse',
     'getOriginalItem',
+    'getAccordionItem',
     'registerItem',
-    'state'
+    'unregisterItem'
   ],
 
   emits: ['focus'],
 
-  data () {
-    return {
-      accordionItemIndex: this.item?._index
-    }
-  },
-
   computed: {
     accordionItem: {
       get () {
-        return this.state.accordionItems[this.accordionItemIndex] || {}
+        return this.getAccordionItem(this._.uid)
       },
-      set () {
-
-      }
+      set () {}
     },
-    itemClass () {
+    itemClasses () {
       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
+        [this.accordionItem[this.options.itemColorKey]]: this.accordionItem[this.options.itemColorKey]
       }
     }
   },
@@ -106,12 +100,18 @@ export default {
 
   created () {
     // Register this item to the w-accordion component.
-    this.accordionItemIndex = this.registerItem({
+    this.registerItem({
+      _cuid: this._.uid,
       _index: 0,
-      _expanded: false,
-      _disabled: false,
-      ...(this.item || {})
+      _expanded: this.expanded,
+      _disabled: this.disabled,
+      title: this.title,
+      content: this.content
     })
+  },
+
+  beforeUnmount () {
+    this.unregisterItem(this._.uid)
   }
 }
 </script>