wave-ui 3.4.3 → 3.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.4.3",
+  "version": "3.4.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",
@@ -47,35 +47,35 @@
     "build-bundle": "BUNDLE=true vite build && mv ./dist/style.css ./dist/wave-ui.css",
     "serve": "vite preview --base /wave-ui/",
     "lint": "vite lint",
-    "publish": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push tags && npm publish --tag latest"
+    "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.21.3",
-    "@babel/eslint-parser": "^7.21.3",
+    "@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",
     "@mdi/font": "^5.9.55",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "3.2.45",
-    "autoprefixer": "^10.4.14",
-    "axios": "^1.3.4",
-    "eslint": "^8.36.0",
-    "eslint-plugin-vue": "^9.10.0",
+    "autoprefixer": "^10.4.15",
+    "axios": "^1.4.0",
+    "eslint": "^8.47.0",
+    "eslint-plugin-vue": "^9.17.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.11.5",
+    "gsap": "^3.12.2",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.27",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.60.0",
+    "sass": "^1.65.1",
     "simple-syntax-highlighter": "^2.2.5",
     "splitpanes": "^3.1.5",
-    "standard": "^17.0.0",
-    "vite": "^3.2.5",
+    "standard": "^17.1.0",
+    "vite": "^3.2.7",
     "vite-svg-loader": "^4.0.0",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"
   },

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

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: selectionString, disabled: isDisabled, readonly: isReadonly }"
+  v-bind="formRegister && { validators, inputValue: selectionString, disabled: isDisabled, readonly: isReadonly, isFocused }"
   v-model:valid="valid"
   @reset="onReset"
   :wrap="hasLabel && labelPosition !== 'inside'"
@@ -16,6 +16,7 @@ component(
 
   w-menu(
     v-model="showMenu"
+    @close="!$event && closeMenu()"
     :menu-class="`w-select__menu ${menuClass || ''}`"
     transition="slide-fade-down"
     :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : undefined"
@@ -26,7 +27,7 @@ component(
     template(#activator="{ on }")
       //- Input wrapper.
       .w-select__selection-wrap(
-        @click="!isDisabled && !isReadonly && (showMenu ? closeMenu : openMenu)()"
+        @click="!isDisabled && !isReadonly && onInputFieldClick()"
         role="button"
         aria-haspopup="listbox"
         :aria-expanded="showMenu ? 'true' : 'false'"
@@ -76,8 +77,8 @@ component(
       @update:model-value="onInput"
       @item-click="$emit('item-click', $event)"
       @item-select="onListItemSelect"
-      @keydown:enter="noUnselect && !multiple && closeMenu()"
-      @keydown:escape="closeMenu"
+      @keydown:enter="noUnselect && !multiple && closeMenu('la3')"
+      @keydown:escape="showMenu && (this.showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
       :items="selectItems"
       :multiple="multiple"
       arrows-navigation
@@ -228,12 +229,18 @@ export default {
 
   methods: {
     onFocus (e) {
+      if (this.isFocused) return
+
       this.isFocused = true
       this.$emit('focus', e)
       return false
     },
 
     onBlur (e) {
+      // As long as the menu is open the focus is still on.
+      // When closing the menu, the focus is given back to the input (not blur yet).
+      if (this.showMenu) return
+
       this.isFocused = false
       this.$emit('blur', e)
     },
@@ -242,11 +249,10 @@ export default {
       // Forbid typing in contenteditable element.
       // Note: using contenteditable rather than input in order to be able to fit the select list
       // to its content with CSS. Only contenteditable divs/non-interactive elements can react to focus/blur ).
-      e.preventDefault()
+      // still allow meta key & ctrl key combinations and the tab key (9).
+      if (!e.metaKey && !e.ctrlKey && e.keyCode !== 9) e.preventDefault()
 
-      if ([13, 27, 38, 40].includes(e.keyCode)) e.preventDefault()
-
-      if (e.keyCode === 27) this.closeMenu() // Escape.
+      if (e.keyCode === 27 && this.showMenu) this.closeMenu('la5') // Escape.
       else if (e.keyCode === 13) this.openMenu() // Enter.
 
       // Up & down arrows.
@@ -285,12 +291,16 @@ export default {
       this.$emit('update:modelValue', selection)
       this.$emit('input', selection)
     },
+    onInputFieldClick () {
+      if (this.showMenu) this.showMenu = false // Will call `closeMenu()` from w-menu(@close).
+      else this.openMenu()
+    },
 
     // Called on item selection: on click & `enter` keydown.
     onListItemSelect (e) {
       this.$emit('item-select', e)
       // Close menu after selection on single select, but keep open if multiple.
-      if (!this.multiple) this.closeMenu()
+      if (!this.multiple) this.showMenu = false // Will call `closeMenu()` from w-menu(@close).
     },
 
     onReset () {
@@ -333,7 +343,7 @@ export default {
 
     // Close the dropdown selection list.
     closeMenu () {
-      if ((this.menuProps || {}).hideOnMenuClick === false) return
+      if (this.menuProps?.hideOnMenuClick === false) return
 
       this.showMenu = false
       // Set the focus back on the main w-select input.

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

@@ -285,7 +285,14 @@ export default {
       columnEl: null,
       nextColumnEl: null
     },
-    paginationConfig: {}
+    paginationConfig: {
+      itemsPerPage: 0,
+      itemsPerPageOptions: {},
+      start: undefined,
+      end: undefined,
+      page: 1,
+      total: 0
+    }
   }),
 
   computed: {
@@ -925,6 +932,8 @@ $tr-border-top: 1px;
     .pages-wrap {
       margin-left: 3 * $base-increment;
       margin-right: 3 * $base-increment;
+      padding-left: 1px; // Prevent overflow causing scrollbar.
+      padding-right: 1px;
       overflow: auto;
       max-height: 4.5em;
     }
@@ -961,6 +970,8 @@ $tr-border-top: 1px;
       margin-left: $base-increment;
       margin-right: $base-increment;
       white-space: nowrap;
+      min-width: 90px;
+      text-align: right;
     }
   }
 }