wave-ui 3.16.2 → 3.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.16.2",
+  "version": "3.16.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",
@@ -42,15 +42,6 @@
     "vue framework",
     "ui"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build --base /wave-ui/",
-    "build-types": "tsc -p ./tsconfig.json",
-    "build-bundle": "BUNDLE=true vite build && npm run build-types && mv ./dist/style.css ./dist/wave-ui.css",
-    "preview": "vite preview --base /wave-ui/",
-    "lint": "vite lint",
-    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
-  },
   "devDependencies": {
     "@eslint/js": "^9.10.0",
     "@faker-js/faker": "^8.4.1",
@@ -89,5 +80,14 @@
   },
   "peerDependencies": {
     "vue": "^3.2.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --base /wave-ui/",
+    "build-types": "tsc -p ./tsconfig.json",
+    "build-bundle": "BUNDLE=true vite build && npm run build-types && mv ./dist/style.css ./dist/wave-ui.css",
+    "preview": "vite preview --base /wave-ui/",
+    "lint": "vite lint",
+    "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   }
-}
+}

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

@@ -10,7 +10,7 @@
       @focus="$emit('focus', getOriginalItem(item))"
       @keypress.enter="!item._disabled && toggleItem(item, $event)"
       :tabindex="!item._disabled && 0"
-      :class="titleClass")
+      :class="titleClasses")
       //- Expand icon on left.
       w-button.w-accordion__expand-icon(
         v-if="expandIcon && !expandIconRight"
@@ -45,7 +45,7 @@
       :duration="duration")
       .w-accordion__item-content(
         v-if="item._expanded"
-        :class="contentClass")
+        :class="contentClasses")
         slot(
           v-if="$slots[`item-content.${item.id || i + 1}`]"
           :name="`item-content.${item.id || i + 1}`"
@@ -62,6 +62,8 @@
 </template>
 
 <script>
+import { objectifyClasses } from '../utils/index'
+
 export default {
   name: 'w-accordion',
 
@@ -73,9 +75,9 @@ export default {
     itemColorKey: { type: String, default: 'color' }, // Support a different color per item.
     itemTitleKey: { type: String, default: 'title' },
     itemContentKey: { type: String, default: 'content' },
-    itemClass: { type: String },
-    titleClass: { type: String },
-    contentClass: { type: String },
+    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 },
@@ -106,6 +108,14 @@ export default {
         'w-accordion--icon-right': this.expandIcon && this.expandIconRight,
         'w-accordion--rotate-icon': this.expandIcon && !this.collapseIcon
       }
+    },
+
+    titleClasses () {
+      return objectifyClasses(this.titleClass)
+    },
+
+    contentClasses () {
+      return objectifyClasses(this.contentClass)
     }
   },
 
@@ -133,10 +143,10 @@ export default {
     },
     itemClasses (item) {
       return {
-        [this.itemClass]: this.itemClass || null,
         'w-accordion__item--expanded': item._expanded,
         'w-accordion__item--disabled': item._disabled,
-        [item[this.itemColorKey]]: item[this.itemColorKey]
+        [item[this.itemColorKey]]: item[this.itemColorKey],
+        ...objectifyClasses(this.itemClass)
       }
     },
     updateItems () {

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

@@ -35,7 +35,7 @@
         :key="tab._uid"
         :item="tab"
         v-show="tab._uid === activeTab._uid"
-        :class="contentClass")
+        :class="contentClasses")
         slot(
           v-if="$slots[`item-content.${tab._index + 1}`]"
           :name="`item-content.${tab._index + 1}`"
@@ -71,6 +71,7 @@
 </template>
 
 <script>
+import { objectifyClasses } from '../../utils/index'
 import TabContent from './tab-content.vue'
 
 let uid = 0
@@ -86,12 +87,12 @@ export default {
     itemIdKey: { type: String, default: 'id' },
     itemTitleKey: { type: String, default: 'title' },
     itemContentKey: { type: String, default: 'content' },
-    titleClass: { type: String },
-    activeClass: { type: String, default: 'primary' },
+    titleClass: { type: [String, Array, Object] },
+    activeClass: { type: [String, Array, Object], default: 'primary' },
     noSlider: { type: Boolean },
     pillSlider: { type: Boolean },
     sliderColor: { type: String, default: 'primary' },
-    contentClass: { type: String },
+    contentClass: { type: [String, Array, Object] },
     transition: { type: [String, Boolean], default: '' },
     fillBar: { type: Boolean },
     center: { type: Boolean },
@@ -121,6 +122,10 @@ export default {
   }),
 
   computed: {
+    contentClasses () {
+      return objectifyClasses(this.contentClass)
+    },
+
     transitionName () {
       if (this.transition === false) return ''
       return this.transition || `w-tabs-slide-${this.direction}`
@@ -229,9 +234,10 @@ export default {
       return {
         [`${this.bgColor}--bg`]: this.bgColor,
         [this.color]: this.color && !item._disabled && !(this.activeClass && isActive),
-        [`w-tabs__bar-item--active ${this.activeClass}`]: isActive,
+        'w-tabs__bar-item--active': isActive,
         'w-tabs__bar-item--disabled': item._disabled,
-        [this.titleClass]: this.titleClass
+        ...objectifyClasses(this.titleClass),
+        ...(isActive ? objectifyClasses(this.activeClass) : {})
       }
     },