wave-ui 3.12.0 → 3.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.12.0",
+  "version": "3.13.1",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -52,35 +52,35 @@
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.10",
+    "@babel/core": "^7.24.5",
+    "@babel/eslint-parser": "^7.24.5",
     "@faker-js/faker": "^8.4.1",
     "@mdi/font": "^6.9.96",
-    "@tsconfig/recommended": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@tsconfig/recommended": "^1.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "3.4.18",
-    "autoprefixer": "^10.4.17",
-    "axios": "^1.6.7",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.21.1",
+    "@vue/compiler-sfc": "3.4.26",
+    "autoprefixer": "^10.4.19",
+    "axios": "^1.6.8",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.25.0",
     "font-awesome": "^4.7.0",
     "gsap": "^3.12.5",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.70.0",
+    "sass": "^1.76.0",
     "simple-syntax-highlighter": "^3.0.2",
     "splitpanes": "^3.1.5",
     "standard": "^17.1.0",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.18",
-    "vue-router": "^4.2.5",
+    "vue": "^3.4.26",
+    "vue-router": "^4.3.2",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"
   },

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-alert(v-if="show" v-on="$attrs" :class="classes")
+.w-alert(v-if="show" :class="classes")
   //- Add a wrapper around the content when needed.
   template(v-if="type || icon || dismiss")
     w-icon.w-alert__icon.mr2(v-if="type || icon") {{ type ? typeIcon : icon }}

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-badge-wrap(v-on="$attrs")
+.w-badge-wrap
   slot
   transition(:name="`${transition}`")
     .w-badge(

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

@@ -71,20 +71,24 @@ export default {
       return this.hasRouter ? this.$router.resolve(this.route).href : this.route
     },
     listeners () {
+      // Extract the potential class & style from v-on listeners. It will still be added from the
+      // built-in attributes fallthrough (implicit v-bind="$attrs" when single root node).
+      const { class: classes, style, ...attrs } = this.$attrs
+
       // If the button is a router-link, we can't apply events on it since vue-router needs the .native
       // modifier but it's not available with the v-on directive.
       // So do a manual router.push if $router is present.
       // eslint-disable-next-line multiline-ternary
       return this.route && this.hasRouter && !this.forceLink && !this.externalLink ? {
-        ...this.$attrs,
+        ...attrs,
         click: e => {
-          if (this.$attrs.click) this.$attrs.click(e)
+          if (attrs.click) attrs.click(e)
 
-          this.$router.push(this.route)
+          router.push(this.route)
           e.stopPropagation() // If going to a route, no need to bubble up the event.
           e.preventDefault()
         }
-      } : this.$attrs
+      } : attrs
     },
     size () {
       return (

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

@@ -1,7 +1,6 @@
 <template lang="pug">
 component.w-icon(
   :is="tag || 'i'"
-  v-on="$attrs"
   :class="classes"
   role="icon"
   aria-hidden="true"

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

@@ -196,8 +196,9 @@ export default {
 
     listeners () {
       // Remove the events that are fired separately, so they don't fire twice.
+      // Also remove class and style which are meant to stay on the wrapper.
       // eslint-disable-next-line no-unused-vars
-      const { input, focus, blur, ...listeners } = this.$attrs
+      const { input, focus, blur, class: classes, style, ...listeners } = this.$attrs
       return listeners
     },
 

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

@@ -29,7 +29,7 @@ component(
       slot {{ label }}
   .w-switch__input(
     @click="$refs.input.focus();$refs.input.click()"
-    v-on="$attrs"
+    v-on="listeners"
     :class="inputClasses")
     .w-switch__track(v-if="$slots.track")
       slot(name="track")
@@ -84,6 +84,13 @@ export default {
   },
 
   computed: {
+    listeners () {
+      // Remove the events that are fired separately, so they don't fire twice.
+      // Also remove class and style which are meant to stay on the wrapper.
+      // eslint-disable-next-line no-unused-vars
+      const { click, class: classes, style, ...listeners } = this.$attrs
+      return listeners
+    },
     hasLabel () {
       return this.label || this.$slots.default
     },

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

@@ -1,6 +1,5 @@
 <template lang="pug">
 span.w-tag(
-  v-on="$attrs"
   @click="$emit('update:modelValue', !modelValue);$emit('input', !modelValue)"
   @keypress.enter="$emit('update:modelValue', !modelValue);$emit('input', !modelValue)"
   :class="classes"

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

@@ -113,8 +113,9 @@ export default {
   computed: {
     listeners () {
       // Remove the events that are fired separately, so they don't fire twice.
+      // Also remove class and style which are meant to stay on the wrapper.
       // eslint-disable-next-line no-unused-vars
-      const { input, focus, blur, ...listeners } = this.$attrs
+      const { input, focus, blur, class: classes, style, ...listeners } = this.$attrs
       return listeners
     },
     hasValue () {

package/src/wave-ui/core.js

@@ -85,7 +85,7 @@ export default class WaveUI {
       document.documentElement.setAttribute('data-theme', theme)
       document.head.querySelector('#wave-ui-colors')?.remove?.()
       const themeColors = this.config.colors[this.theme]
-      injectColorsCSSInDOM(themeColors)
+      injectColorsCSSInDOM(themeColors, this.config.css.colorShadeCssVariables)
       this.colors = flattenColors(themeColors, colorPalette)
     }
   }

package/src/wave-ui/utils/config.js

@@ -14,6 +14,10 @@ const config = reactive({
     // Note: the color palette shades are always generated separately from SCSS.
     colorShades: true,
 
+    // Generate CSS variables for color shades.
+    // Note: colorShades must be enabled for this to work.
+    colorShadeCssVariables: false,
+
     // Generate palette colors and palette color shades.
     // Can't have this option: color palette is generated via SCSS in colors.scss.
     // colorPalette: true,

package/src/wave-ui/utils/dynamic-css.js

@@ -13,7 +13,7 @@ let currentBreakpoint = null
 // :root {[color1-variable], [color2-variable]}
 // .color1--bg {background-color: [color1-variable]}
 // .color1 {color: [color1-variable]}
-const generateColors = themeColors => {
+const generateColors = (themeColors, generateShadeCssVariables) => {
   let styles = ''
   const cssVariables = {}
 
@@ -42,6 +42,9 @@ const generateColors = themeColors => {
   // That only makes sense when there are 2 colors on the same element: e.g. `span.primary.error`.
   const allColors = { ...colors, info, warning, success, error }
   for (const colorName in allColors) cssVariables[colorName] = allColors[colorName]
+  if (generateShadeCssVariables) {
+    for (const colorName in shades) cssVariables[colorName] = shades[colorName]
+  }
   let cssVariablesString = ''
   Object.entries(cssVariables).forEach(([colorName, colorHex]) => {
     cssVariablesString += `--w-${colorName}-color: ${colorHex};`
@@ -269,12 +272,12 @@ export const injectCSSInDOM = $waveui => {
   window.addEventListener('resize', () => getBreakpoint($waveui))
 }
 
-export const injectColorsCSSInDOM = themeColors => {
+export const injectColorsCSSInDOM = (themeColors, generateShadeCssVariables) => {
   // Inject global dynamic CSS classes in document head.
   if (!document.getElementById('wave-ui-colors')) {
     const css = document.createElement('style')
     css.id = 'wave-ui-colors'
-    css.innerHTML = generateColors(themeColors)
+    css.innerHTML = generateColors(themeColors, generateShadeCssVariables)
 
     const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
     if (firstStyle) firstStyle.before(css)