wave-ui 3.7.1 → 3.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.7.1",
+  "version": "3.7.2",
   "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",
@@ -50,32 +50,31 @@
     "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.22.10",
-    "@babel/eslint-parser": "^7.22.10",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@faker-js/faker": "^7.6.0",
+    "@babel/core": "^7.23.0",
+    "@babel/eslint-parser": "^7.22.15",
+    "@faker-js/faker": "^8.1.0",
     "@mdi/font": "^6.9.96",
     "@vitejs/plugin-vue": "^3.2.0",
-    "@vue/compiler-sfc": "3.2.45",
-    "autoprefixer": "^10.4.15",
-    "axios": "^1.4.0",
-    "eslint": "^8.47.0",
+    "@vue/compiler-sfc": "3.3.4",
+    "autoprefixer": "^10.4.16",
+    "axios": "^1.5.1",
+    "eslint": "^8.51.0",
     "eslint-plugin-vue": "^9.17.0",
     "font-awesome": "^4.7.0",
     "gsap": "^3.12.2",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.31",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.65.1",
-    "simple-syntax-highlighter": "^2.2.5",
+    "sass": "^1.69.0",
+    "simple-syntax-highlighter": "^3.0.2",
     "splitpanes": "^3.1.5",
     "standard": "^17.1.0",
     "vite": "^3.2.7",
     "vite-svg-loader": "^4.0.0",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.2.5",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"
   },

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

@@ -160,8 +160,8 @@ export default {
         'w-list__item-label--focused': item._focused,
         'w-list__item-label--hoverable': this.hover,
         'w-list__item-label--selectable': this.isSelectable,
-        [item.color]: !!item.color,
-        [this.SelectionColor]: item._selected && !item.color && this.SelectionColor,
+        [item[this.itemColorKey]]: !!item[this.itemColorKey],
+        [this.SelectionColor]: item._selected && !item[this.itemColorKey] && this.SelectionColor,
         [item[this.itemClassKey] || this.itemClass]: item[this.itemClassKey] || this.itemClass
       }
     },

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

@@ -10,7 +10,7 @@ component(
   template(v-if="labelPosition === 'left'")
     label.w-select__label.w-select__label--left.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-select--${_.uid}`"
+      @click="$refs['selection-input'].click()"
       :class="labelClasses")
       slot {{ label }}
 
@@ -27,7 +27,6 @@ component(
     template(#activator="{ on }")
       //- Input wrapper.
       .w-select__selection-wrap(
-        v-on="on"
         @click="!isDisabled && !isReadonly && onInputFieldClick()"
         role="button"
         aria-haspopup="listbox"
@@ -48,7 +47,6 @@ component(
           @focus="!isDisabled && !isReadonly && onFocus($event)"
           @blur="onBlur"
           @keydown="!isDisabled && !isReadonly && onKeydown($event)"
-          :id="`w-select--${_.uid}`"
           :class="{ 'w-select__selection--placeholder': !$slots.selection && !selectionString && placeholder }"
           :disabled="isDisabled || null"
           readonly
@@ -65,7 +63,6 @@ component(
         template(v-if="labelPosition === 'inside' && showLabelInside")
           label.w-select__label.w-select__label--inside.w-form-el-shakable(
             v-if="$slots.default || label"
-            :for="`w-select--${_.uid}`"
             :class="labelClasses")
             slot {{ label }}
         w-icon.w-select__icon.w-select__icon--inner-right(
@@ -103,7 +100,7 @@ component(
   template(v-if="labelPosition === 'right'")
     label.w-select__label.w-select__label--right.w-form-el-shakable(
       v-if="$slots.default || label"
-      :for="`w-select--${_.uid}`"
+      @click="$refs['selection-input'].click()"
       :class="labelClasses")
       slot {{ label }}
 </template>
@@ -274,7 +271,25 @@ export default {
             index = (index + items.length + direction) % items.length
           }
 
-          this.onInput(items[index])
+          // If the current item is disabled, find the next one enabled (forward or backward).
+          let allItemsAreDisabled = false
+          if (items[index].disabled) {
+            const direction = e.keyCode === 38 ? -1 : 1 // Prev or next.
+
+            // Modulo to prevent out of range; + items.length to also work with negative values.
+            let newIndex = (index + direction + items.length) % items.length
+            const itemsCount = items.length
+            let loop = 0 // While-safety: will always end at least after 1 full array cycle.
+            while (loop < itemsCount && items[newIndex].disabled) {
+              // Circle through the array of items forward or backward, and reloop when out of range.
+              newIndex = (newIndex + items.length + direction) % items.length
+              loop++
+            }
+            if (loop >= itemsCount) allItemsAreDisabled = true
+            index = newIndex
+          }
+
+          if (!allItemsAreDisabled) this.onInput(items[index])
         }
       }
     },
@@ -512,8 +527,8 @@ export default {
       -webkit-tap-highlight-color: transparent;
     }
 
-    &--inner-left {left: 6px;}
-    &--inner-right {right: 6px;}
+    &--inner-left {left: $base-increment;}
+    &--inner-right {right: $base-increment;}
     .w-select--no-padding &--inner-left {left: 1px;}
     .w-select--no-padding &--inner-right {right: 1px;}
 
@@ -558,7 +573,7 @@ export default {
     transform: translateY(-50%);
     pointer-events: none;
 
-    .w-select--inner-icon-right & {padding-right: 22px;}
+    .w-select--inner-icon-right & {padding-right: 26px;}
 
     .w-select--no-padding & {
       left: 0;
@@ -575,8 +590,7 @@ export default {
       transition: $transition-duration ease;
     }
 
-    // move label with underline style.
-    .w-select--focused.w-select--floating-label &,
+    // Move label with underline style.
     .w-select--open.w-select--floating-label &,
     .w-select--filled.w-select--floating-label &,
     .w-select--has-placeholder.w-select--floating-label & {
@@ -587,13 +601,11 @@ export default {
       transform: translateY(-160%) scale(0.85);
     }
     // Move label with outline style or with shadow.
-    .w-select--focused.w-select--floating-label .w-select__selection-wrap--box &,
     .w-select--open.w-select--floating-label .w-select__selection-wrap--box &,
     .w-select--filled.w-select--floating-label .w-select__selection-wrap--box &,
     .w-select--has-placeholder.w-select--floating-label .w-select__selection-wrap--box & {
       transform: translateY(-180%) scale(0.85);
     }
-    .w-select--focused.w-select--floating-label.w-select--inner-icon-left &,
     .w-select--open.w-select--floating-label.w-select--inner-icon-left &,
     .w-select--filled.w-select--floating-label.w-select--inner-icon-left & {left: 0;}
     // Chrome & Safari - Must remain in a separated rule as Firefox discard the whole rule seeing -webkit-.