wave-ui 3.11.0 → 3.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.11.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-autocomplete.vue

@@ -81,12 +81,6 @@ export default {
       return this.normalize(this.keywords)
     },
 
-    // Keep the autocomplete matching as fast as possible by caching optimized search strings.
-    // An array of optimized strings.
-    normalizedSelection () {
-      return this.selection.map(item => this.normalize(item?.searchable))
-    },
-
     // Keep the autocomplete matching as fast as possible by caching optimized search strings.
     optimizedItemsForSearch () {
       return this.items.map((item, i) => ({
@@ -98,8 +92,7 @@ export default {
 
     filteredItems () {
       let items = this.optimizedItemsForSearch // Array of objects.
-      const selection = this.normalizedSelection.join(',') // Optimized string of coma separated words.
-      const isItemNotSelected = item => !selection.includes(item.searchable)
+      const isItemNotSelected = item => !this.selection.find(i => i.uid === item.uid)
 
       if (this.keywords) {
         items = items.filter(item => {

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
     },
 
@@ -478,6 +479,7 @@ $inactive-color: #777;
     align-items: center;
     background: none;
     border: none;
+    border-radius: inherit; // Mostly for the browser-autofilled appearance.
     outline: none;
     padding-left: 2 * $base-increment;
     padding-right: 2 * $base-increment;

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

@@ -34,10 +34,11 @@ component(
         :aria-owns="`w-select-menu--${_.uid}`"
         :aria-activedescendant="`w-select-menu--${_.uid}_item-1`"
         :class="inputWrapClasses")
-        w-icon.w-select__icon.w-select__icon--inner-left(
-          v-if="innerIconLeft"
-          tag="label"
-          @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
+        slot(name="icon-left")
+          w-icon.w-select__icon.w-select__icon--inner-left(
+            v-if="innerIconLeft"
+            tag="label"
+            @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
         .w-select__selection-slot(v-if="$slots.selection")
           //- inputValue is always an array.
           slot(name="selection" :item="multiple ? inputValue : inputValue[0]")
@@ -60,10 +61,11 @@ component(
             v-if="$slots.default || label"
             :class="labelClasses")
             slot {{ label }}
-        w-icon.w-select__icon.w-select__icon--inner-right(
-          v-if="innerIconRight"
-          tag="label"
-          @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
+        slot(name="icon-right")
+          w-icon.w-select__icon.w-select__icon--inner-right(
+            v-if="innerIconRight"
+            tag="label"
+            @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
     w-list(
       ref="w-list"
       :model-value="inputValue"

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
     },
@@ -150,6 +157,7 @@ $outline-width: 2px;
   align-items: center;
   vertical-align: middle;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 
   @include themeable;
 
@@ -157,7 +165,6 @@ $outline-width: 2px;
   &--disabled, &--readonly {
     cursor: not-allowed;
     touch-action: initial;
-    -webkit-tap-highlight-color: transparent;
   }
 
   // Hidden checkbox.

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

@@ -609,16 +609,33 @@ export default {
       })
     },
 
+    /**
+     * Updates the pagination object and fills up missing variables to always maintain the paginationConfig
+     * object accurate for external use (read and write).
+     * The following vars will always be up to date and if one changes from outside the rest of them
+     * will update accordingly: itemsPerPage, itemsPerPageOptions, start, end, page, total.
+     *
+     * @param {Object} config The config object defining the pagination.
+     *  This object can have at most itemsPerPage, page, total, and it will define the start, end and
+     *  pagesCount from the given or current itemsPerPage, page and total.
+     *  - If a total is given for update, trust it blindly (could come from a backend), and recompute
+     *    the rest as long as itemsPerPage is defined.
+     *  - If a page is given for update, it will navigate to that page.
+     *  - If an itemsPerPage is given for update, it will navigate to that page.
+     */
     updatePaginationConfig ({ itemsPerPage, page, total }) {
       if (total) this.paginationConfig.total = total
       if (itemsPerPage !== undefined) {
         this.paginationConfig.itemsPerPage = itemsPerPage
         itemsPerPage = itemsPerPage || this.paginationConfig.total // If `0`, take all the results.
         this.paginationConfig.page = page || this.paginationConfig.page || 1
+
         page = this.paginationConfig.page // Shorthand var for next lines.
         total = this.paginationConfig.total // Shorthand var for next lines.
+        const itemsInAllPages = itemsPerPage * page
         this.paginationConfig.start = 1
-        this.paginationConfig.end = total >= (itemsPerPage * page) ? (itemsPerPage * page) : (total % (itemsPerPage * page))
+        this.paginationConfig.end = total >= itemsInAllPages ? itemsInAllPages : (total % itemsInAllPages)
+
         this.paginationConfig.pagesCount = Math.ceil(total / itemsPerPage)
       }
       if (page) this.goToPage(page)

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

@@ -17,11 +17,12 @@ component(
 
   //- Input wrapper.
   .w-textarea__textarea-wrap(:class="inputWrapClasses")
-    w-icon.w-textarea__icon.w-textarea__icon--inner-left(
-      v-if="innerIconLeft"
-      tag="label"
-      :for="`w-textarea--${_.uid}`"
-      @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
+    slot(name="icon-left" :input-id="`w-textarea--${_.uid}`")
+      w-icon.w-textarea__icon.w-textarea__icon--inner-left(
+        v-if="innerIconLeft"
+        tag="label"
+        :for="`w-textarea--${_.uid}`"
+        @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
     textarea.w-textarea__textarea(
       ref="textarea"
       v-model="inputValue"
@@ -44,11 +45,12 @@ component(
         v-if="$slots.default || label"
         :class="labelClasses")
         slot {{ label }}
-    w-icon.w-textarea__icon.w-textarea__icon--inner-right(
-      v-if="innerIconRight"
-      tag="label"
-      :for="`w-textarea--${_.uid}`"
-      @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
+    slot(name="icon-right" :input-id="`w-textarea--${_.uid}`")
+      w-icon.w-textarea__icon.w-textarea__icon--inner-right(
+        v-if="innerIconRight"
+        tag="label"
+        :for="`w-textarea--${_.uid}`"
+        @click="$emit('click:inner-icon-right', $event)") {{ innerIconRight }}
 
   //- Right label.
   template(v-if="labelPosition === 'right'")
@@ -111,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)