wave-ui 3.17.0 → 3.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "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

@@ -6,7 +6,7 @@
   //- 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"
+      v-for="(accordionItem, i) in state.accordionItems"
       :key="i"
       :class="itemClass"
       :item="accordionItem"
@@ -81,17 +81,19 @@ export default {
       itemClasses: objectifyClasses(this.itemClasses),
       titleClasses: this.titleClasses,
       contentClasses: this.contentClasses,
-      toggleItem: this.toggleItem,
+      onItemToggle: this.onItemToggle,
       onEndOfCollapse: this.onEndOfCollapse,
       getOriginalItem: this.getOriginalItem,
       options: this.$props,
-      registerItem: this.registerItem
+      registerItem: this.registerItem,
+      state: this.state
     }
   },
 
   data: () => ({
-    accordionItems: [],
-    registeredAccordionItems: [] // When using w-accordion-item component and not items prop.
+    state: {
+      accordionItems: []
+    }
   }),
 
   computed: {
@@ -127,21 +129,13 @@ export default {
   },
 
   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)
+    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)
+      console.log('toggling item', expandedItems)
       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) {
@@ -150,18 +144,19 @@ export default {
 
     // Return the original accordion item (so there is no `_index`, etc.).
     getOriginalItem (item) {
-      return (this.registeredAccordionItems.length ? this.registeredAccordionItems : this.items)[item._index]
+      return 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) || []
+      let items = this.state.accordionItems
+      if (!this.accordionItemsProvided && this.items) {
+        items = (typeof this.items === 'number' ? Array(this.items).fill({}) : this.items) || []
+      }
 
-      this.accordionItems = items.map((item, _index) => ({
+      this.state.accordionItems = items.map((item, _index) => ({
         ...item,
         _index,
-        _expanded: this.modelValue && this.modelValue[_index],
+        _expanded: this.modelValue?.[_index] ?? false,
         _disabled: !!item.disabled
       }))
     },
@@ -169,18 +164,20 @@ export default {
     // 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
+      if (this.accordionItemsProvided) {
+        item._index = this.state.accordionItems.length
+        item._expanded = this.modelValue?.[item._index] ?? false
+        item._disabled = !!item.disabled
 
-        this.registeredAccordionItems.push(item)
-        this.updateItems()
+        this.state.accordionItems.push(item)
       }
+
+      return item._index
     }
   },
 
   created () {
-    this.updateItems()
+    if (!this.accordionItemsProvided && this.items) this.updateItems()
   },
 
   watch: {
@@ -188,7 +185,7 @@ export default {
       this.updateItems()
     },
     items () {
-      this.updateItems()
+      // this.updateItems()
     }
   }
 }

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

@@ -2,7 +2,7 @@
 .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))"
+    @focus="$emit('focus', (accordionItem))"
     @keypress.enter="!accordionItem._disabled && toggleItem(accordionItem, $event)"
     :tabindex="!accordionItem._disabled && 0"
     :class="titleClasses")
@@ -20,7 +20,7 @@
     //- Title.
     slot(
       name="title"
-      :item="getOriginalItem(accordionItem)"
+      :item="(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="getOriginalItem(accordionItem)"
+        :item="(accordionItem)"
         :expanded="accordionItem._expanded"
         :index="accordionItem._index + 1")
         div(v-html="accordionItem[options.itemContentKey]")
@@ -56,26 +56,30 @@ export default {
     'itemClasses',
     'titleClasses',
     'contentClasses',
-    'toggleItem',
+    'onItemToggle',
     'onEndOfCollapse',
     'getOriginalItem',
-    'registerItem'
+    'registerItem',
+    'state'
   ],
 
   emits: ['focus'],
 
   data () {
     return {
-      accordionItem: {
-        ...(this.item || {}),
-        _index: this.item?._index ?? 0,
-        _expanded: this.item?._expanded || false,
-        _disabled: this.item?._disabled || false
-      }
+      accordionItemIndex: this.item?._index
     }
   },
 
   computed: {
+    accordionItem: {
+      get () {
+        return this.state.accordionItems[this.accordionItemIndex] || {}
+      },
+      set () {
+
+      }
+    },
     itemClass () {
       return {
         'w-accordion__item--expanded': this.accordionItem._expanded,
@@ -86,27 +90,46 @@ export default {
     }
   },
 
+  methods: {
+    toggleItem (item, e) {
+      item._expanded = !item._expanded
+
+      this.onItemToggle(item)
+
+      // 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. Issue #3.
+      e.target.blur()
+      setTimeout(() => e.target.focus(), 300)
+    }
+  },
+
   created () {
     // Register this item to the w-accordion component.
-    this.registerItem(this.accordionItem)
+    this.accordionItemIndex = this.registerItem({
+      _index: 0,
+      _expanded: false,
+      _disabled: false,
+      ...(this.item || {})
+    })
   }
 }
 </script>
 
 <style lang="scss">
-  .w-accordion__item {position: relative;}
+.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;
+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-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-icon:before {font-size: 1.1em;}
+}
 
 .w-accordion__item-title {
   position: relative;
@@ -145,5 +168,4 @@ export default {
 .w-accordion__item-content {
   padding: (2 * $base-increment) (3 * $base-increment);
 }
-
 </style>