wave-ui 3.0.4 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "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",
@@ -23,6 +23,7 @@
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",
     "./src/wave-ui": "./src/wave-ui/index.js",
+    "./src/wave-ui/components": "./src/wave-ui/components/index.js",
     "./src/wave-ui/*": "./src/wave-ui/*"
   },
   "type": "module",
@@ -48,7 +49,7 @@
     "lint": "vite lint"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.21.0",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@mdi/font": "^5.9.55",
@@ -57,21 +58,21 @@
     "autoprefixer": "^10.4.13",
     "axios": "^0.25.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^9.8.0",
+    "eslint-plugin-vue": "^9.9.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.11.3",
+    "gsap": "^3.11.4",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.21",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.3",
     "simple-syntax-highlighter": "^2.2.5",
     "splitpanes": "^3.1.5",
     "standard": "^17.0.0",
     "vite": "^3.2.5",
     "vite-svg-loader": "^4.0.0",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"

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

@@ -348,7 +348,10 @@ export default {
       if (!this.isMultipleSelect) this.listItems.forEach(item => (item._selected = false))
 
       this.checkSelection(selection) // Create an array with the selected values.
-        .forEach(val => (this.listItems.find(item => item._value === val)._selected = true))
+        .forEach(val => {
+          const foundItem = this.listItems.find(item => item._value === val)
+          if (foundItem) foundItem._selected = true
+        })
     }
   },
 

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

@@ -78,6 +78,7 @@ export default {
     counts: { type: Boolean },
     itemIconKey: { type: String, default: 'icon' }, // Support a different icon per item.
     iconColor: { type: String }, // Applies a color on all the label item icons.
+    itemLabelKey: { type: String, default: 'label' }, // Specify a different key for the item label.
     itemIconColorKey: { type: String, default: 'iconColor' }, // Applies a specific color on each label item icons.
     itemRouteKey: { type: String, default: 'route' }, // Uses a router link if the item has the `route` key.
     itemDisabledKey: { type: String, default: 'disabled' }, // Disables the item click and selection.
@@ -117,7 +118,7 @@ export default {
         this.currentDepthItems.push({
           originalItem: item, // Store the original item to return it on event emits.
           _uid: this.depth.toString() + (i + 1),
-          label: item.label,
+          label: item[this.itemLabelKey],
           children: !!item.children, // The children tree remains available in originalItem.
           branch: item.branch,
           route: item[this.itemRouteKey],

package/src/wave-ui/core.js

@@ -103,7 +103,6 @@ export default class WaveUI {
           const wApp = document.querySelector(config.on) || document.body
           wApp.classList.add('w-app')
 
-          let themeColors = config.colors[config.theme]
           if (config.theme === 'auto') detectOSDarkMode($waveui) // Also switches the theme.
           else $waveui.switchTheme(config.theme, true)
 

package/src/wave-ui/scss/_base.scss

@@ -15,6 +15,7 @@
   --w-base-color-rgb: #{map.get($theme-light, 'base-color-rgb')};
   --w-contrast-bg-color-rgb: #{map.get($theme-light, 'contrast-bg-color-rgb')};
   --w-contrast-color-rgb: #{map.get($theme-light, 'contrast-color-rgb')};
+  --w-caption-color-rgb: #{map.get($theme-light, 'caption-color-rgb')};
   --w-disabled-color-rgb: #{map.get($theme-light, 'disabled-color-rgb')};
 }
 
@@ -23,6 +24,7 @@
   --w-base-color-rgb: #{map.get($theme-dark, 'base-color-rgb')};
   --w-contrast-bg-color-rgb: #{map.get($theme-dark, 'contrast-bg-color-rgb')};
   --w-contrast-color-rgb: #{map.get($theme-dark, 'contrast-color-rgb')};
+  --w-caption-color-rgb: #{map.get($theme-dark, 'caption-color-rgb')};
   --w-disabled-color-rgb: #{map.get($theme-dark, 'disabled-color-rgb')};
 }
 

package/src/wave-ui/scss/_typography.scss

@@ -33,7 +33,7 @@
   .caption {
     font-size: round(0.85 * $base-font-size);
     font-style: italic;
-    color: rgba(80, 80, 80, 0.7);
+    color: $caption-color;
   }
 
   .text-upper {text-transform: uppercase;}

package/src/wave-ui/scss/_variables.scss

@@ -14,6 +14,7 @@ $theme-light: (
   base-color-rgb: (0, 0, 0), // #000.
   contrast-bg-color-rgb: (0, 0, 0), // #000.
   contrast-color-rgb: (255, 255, 255), // #fff.
+  caption-color-rgb: (80, 80, 80, 0.7), // #505050.
   disabled-color-rgb: (204, 204, 204), // #ccc.
 ) !default;
 
@@ -22,6 +23,7 @@ $theme-dark: (
   base-color-rgb: (255, 255, 255), // #fff.
   contrast-bg-color-rgb: (255, 255, 255), // #fff.
   contrast-color-rgb: (0, 0, 0), // #000.
+  caption-color-rgb: (175, 175, 175, 0.7), // #afafaf.
   disabled-color-rgb: (74, 74, 74), // #4a4a4a.
 ) !default;
 
@@ -32,6 +34,7 @@ $base-bg-color: rgb(var(--w-base-bg-color-rgb));
 $base-color: rgb(var(--w-base-color-rgb));
 $contrast-bg-color: rgb(var(--w-contrast-bg-color-rgb));
 $contrast-color: rgb(var(--w-contrast-color-rgb));
+$caption-color: rgb(var(--w-caption-color-rgb));
 // When a form element is disabled (checkbox, radio, input, select list).
 $disabled-color: rgb(var(--w-disabled-color-rgb));