wave-ui 3.4.2 → 3.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "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",
@@ -46,7 +46,8 @@
     "build": "vite build --base /wave-ui/",
     "build-bundle": "BUNDLE=true vite build && mv ./dist/style.css ./dist/wave-ui.css",
     "serve": "vite preview --base /wave-ui/",
-    "lint": "vite lint"
+    "lint": "vite lint",
+    "publish": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag && npm publish --tag latest"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",

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

@@ -103,12 +103,17 @@ export default {
     padding: (2 * $base-increment) (3 * $base-increment);
     font-size: 1.3em;
     border-bottom: $border;
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
 
     &--has-toolbar {padding: 0;border-bottom: none;}
   }
 
+  // When there is no title apply the border radius to the image.
+  &__image:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    overflow: hidden;
+  }
+
   &__content {
     padding: 3 * $base-increment;
     flex-grow: 1;

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-tree.vue

@@ -28,15 +28,19 @@ ul.w-tree(:class="classes")
         :depth="depth"
         :path="item.path"
         :open="item.open")
-        w-icon(v-if="itemIcon(item)" class="w-tree__item-icon" :color="item.originalItem[itemIconColorKey] || iconColor") {{ itemIcon(item) }}
+        w-icon(
+          v-if="itemIcon(item)"
+          class="w-tree__item-icon"
+          :color="item.originalItem[itemIconColorKey] || iconColor").
+          {{ itemIcon(item) }}
         span(v-html="item.label")
         span.ml1(v-if="counts && (item.children || item.branch)").
           ({{ item.originalItem.children?.length || 0 }})
     component(
       :is="noTransition ? 'div' : 'w-transition-expand'"
       :y="!noTransition || null"
-      @after-enter="$emit('open', { item: item.originalItem, open: item.open, depth, path: getTreeItemPathForOutput(item) })"
-      @after-leave="$emit('close', { item: item.originalItem, open: item.open, depth, path: getTreeItemPathForOutput(item) })")
+      @after-enter="$emit('open', emitPayload(item))"
+      @after-leave="$emit('close', emitPayload(item))")
       w-tree(
         v-if="item.children && item.open"
         v-bind="$props"
@@ -104,6 +108,7 @@ export default {
       return {
         [`w-tree--depth${this.depth}`]: true,
         'w-tree--expand-icon': this.expandIcon && !this.depth,
+        'w-tree--selectable': this.selectable,
         'w-tree--disabled': this.disabled && !this.depth,
         'w-tree--no-expand-button': !this.expandIcon
       }
@@ -130,6 +135,7 @@ export default {
           branch: item.branch,
           route: item[this.itemRouteKey],
           disabled: item[this.itemDisabledKey],
+          selected: oldItems[i]?.selected || false,
           depth: this.depth,
           open: !!(oldItems[i]?.open || this.expandAll || item[this.itemOpenKey]),
           parent: this.parent || null,
@@ -183,17 +189,12 @@ export default {
       if (typeof open === 'boolean') item.open = open
       else item.open = !item.open
 
-      const emitParams = {
-        item: item.originalItem,
-        open: item.open,
-        depth: this.depth,
-        path: this.getTreeItemPathForOutput(item)
-      }
+      const emitPayload = this.emitPayload(item)
 
-      this.$emit(item.open ? 'before-open' : 'before-close', emitParams)
+      this.$emit(item.open ? 'before-open' : 'before-close', emitPayload)
 
       if (!this.unexpandableEmpty && !item.children) {
-        this.$emit(item.open ? 'open' : 'close', emitParams)
+        this.$emit(item.open ? 'open' : 'close', emitPayload)
       }
 
       return true // Just to chain instructions.
@@ -203,29 +204,12 @@ export default {
       const route = item[this.itemRouteKey]
       if (route && this.$router && !this.hasExternalLink(item)) e.preventDefault()
 
-      this.$emit('click', {
-        item: item.originalItem,
-        depth: this.depth,
-        path: this.getTreeItemPathForOutput(item),
-        e
-      })
       if (item.children || (item.branch && !this.unexpandableEmpty)) this.expandDepth(item)
+      if (this.selectable) item.selected = !item.selected
 
-      if (this.selectable) this.emitItemSelection(item, e)
-    },
-
-    emitItemSelection (item, e) {
-      const emitParams = {
-        item: item.originalItem,
-        depth: this.depth,
-        path: this.getTreeItemPathForOutput(item),
-        e
-      }
-      if (item.children || (item.branch && !this.unexpandableEmpty)) {
-        emitParams.open = item.open
-      }
-      this.$emit('update:model-value', emitParams)
-      this.$emit('select', emitParams)
+      const emitPayload = this.emitPayload(item, e)
+      this.$emit('click', emitPayload)
+      this.emitItemSelection(item, e) // Always emitting on click, but different event for selection.
     },
 
     onLabelKeydown (item, e) {
@@ -254,7 +238,32 @@ export default {
         }
       }
 
-      if (this.selectable) this.emitItemSelection(item, e)
+      if (e.which === 13) {
+        if (this.selectable) item.selected = !item.selected
+        // Always emitting on enter keydown, but different event for selection.
+        this.emitItemSelection(item, e)
+      }
+    },
+
+    emitItemSelection (item, e) {
+      const emitPayload = this.emitPayload(item, e)
+
+      this.$emit('update:model-value', emitPayload)
+      if (this.selectable) this.$emit('select', emitPayload)
+    },
+
+    emitPayload (item, e) {
+      const emitPayload = {
+        item: item.originalItem,
+        depth: this.depth,
+        path: this.getTreeItemPathForOutput(item)
+      }
+
+      if (e) emitPayload.e = e
+      if (item.children || (item.branch && !this.unexpandableEmpty)) emitPayload.open = item.open
+      if (this.selectable) emitPayload.selected = item.selected
+
+      return emitPayload
     },
 
     /**
@@ -305,6 +314,7 @@ export default {
       return {
         [item.children || item.branch ? 'w-tree__item--branch' : 'w-tree__item--leaf']: true,
         'w-tree__item--disabled': item[this.itemDisabledKey],
+        'w-tree__item--selected': item.selected,
         'w-tree__item--empty': item.branch && !item.children,
         'w-tree__item--unexpandable': item.branch && !item.children && this.unexpandableEmpty
       }
@@ -359,12 +369,18 @@ $expand-icon-size: 20px;
       border-radius: $border-radius;
     }
     &:hover:before {background-color: $primary;opacity: 0.1;}
-    &:focus:before {background-color: $primary;opacity: 0.2;}
+    &:focus-visible:before {background-color: $primary;opacity: 0.15;}
   }
+  &.w-tree--selectable &__item-label {cursor: pointer;}
+  &.w-tree--selectable &__item--disabled &__item-label {cursor: auto;}
   &__item--leaf &__item-label:before {
     left: - $base-increment;
     right: - $base-increment;
   }
+  &__item--selected > &__item-label:before {
+    background-color: $primary;
+    opacity: 0.25;
+  }
   &__item--disabled &__item-label {opacity: 0.5;}
   &__item--disabled &__item-label:before {display: none;}