wave-ui 1.63.0 → 1.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.63.0",
+  "version": "1.64.0",
   "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",

package/src/wave-ui/components/w-button/index.vue

@@ -61,7 +61,15 @@ export default {
   computed: {
     buttonProps () {
       const { tooltip, tooltipProps, ...props } = this.$props
-      return { ...props, ...this.$attrs }
+      return {
+        ...props,
+        ...this.$attrs,
+        // Vue 2 specific:
+        // The classes and styles are not in $attrs. Add them from $vnode.data.staticClass, so
+        // the button gets these classes wen used with tooltip.
+        // https://v2.vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance
+        class: this.tooltip && this.$vnode.data.staticClass
+      }
     }
   }
 }

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

@@ -115,7 +115,9 @@ component(
 
 <script>
 /**
- * @todo Share the common parts between w-input, w-textarea & w-select.
+ * @todo
+ * - Share the common parts between w-input, w-textarea & w-select.
+ * - option to fit to the content using contenteditable div
  **/
 
 import FormElementMixin from '../mixins/form-elements'
@@ -575,6 +577,7 @@ $inactive-color: #777;
     top: 50%;
     left: 0;
     padding-left: 2 * $base-increment;
+    white-space: nowrap;
     transform: translateY(-50%);
     pointer-events: none;
 

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

@@ -40,21 +40,19 @@ component(
         .w-select__selection-slot(v-if="$scopedSlots.selection")
           //- inputValue is always an array.
           slot(name="selection" :item="multiple ? inputValue : inputValue[0]")
-        input.w-select__selection(
+        .w-select__selection(
           ref="selection-input"
-          type="text"
-          :value="$scopedSlots.selection ? '' : selectionString"
+          :contenteditable="isDisabled || isReadonly ? 'false' : 'true'"
           @focus="!isDisabled && !isReadonly && onFocus($event)"
           @blur="onBlur"
           @keydown="!isDisabled && !isReadonly && onKeydown($event)"
           :id="`w-select--${_uid}`"
-          :placeholder="(!$scopedSlots.selection && placeholder) || null"
+          :class="{ 'w-select__selection--placeholder': !$scopedSlots.selection && !selectionString && placeholder }"
           :disabled="isDisabled || null"
           readonly
           aria-readonly="true"
-          :required="required || null"
           :tabindex="tabindex || null"
-          autocomplete="off")
+          v-html="($scopedSlots.selection ? '' : selectionString) || placeholder")
         //- For standard HTML form submission.
         input(
           v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
@@ -149,7 +147,8 @@ export default {
     // By default you can unselect a list item by re-selecting it.
     // Allow preventing that on single selection lists only.
     noUnselect: { type: Boolean },
-    menuProps: { type: Object } // Allow passing down an object of props to the w-menu component.
+    menuProps: { type: Object }, // Allow passing down an object of props to the w-menu component.
+    fitToContent: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -198,6 +197,7 @@ export default {
       return {
         'w-select': true,
         'w-select--disabled': this.isDisabled,
+        'w-select--fit-to-content': this.fitToContent,
         'w-select--readonly': this.isReadonly,
         [`w-select--${this.hasValue ? 'filled' : 'empty'}`]: true,
         'w-select--focused': (this.isFocused || this.showMenu) && !this.isReadonly,
@@ -229,6 +229,7 @@ export default {
     onFocus (e) {
       this.isFocused = true
       this.$emit('focus', e)
+      return false
     },
 
     onBlur (e) {
@@ -237,6 +238,11 @@ export default {
     },
 
     onKeydown (e) {
+      // 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()
+
       if ([13, 27, 38, 40].includes(e.keyCode)) e.preventDefault()
 
       if (e.keyCode === 27) this.closeMenu() // Escape.
@@ -364,6 +370,11 @@ export default {
     -webkit-tap-highlight-color: transparent;
   }
 
+  &--fit-to-content {
+    display: inline-flex;
+    flex-grow: 0;
+  }
+
   // Selection wrapper.
   // ------------------------------------------------------
   &__selection-wrap {
@@ -419,21 +430,21 @@ export default {
     }
   }
 
-  // selection (input) field.
+  // Selection (contenteditable) field.
+  // Using contenteditable instead of readonly input in order to be able to fit to content.
+  // Then disable typing and hide caret.
   // ------------------------------------------------------
   &__selection {
     width: 100%;
     height: 100%;
     min-height: inherit;
-    font: inherit;
-    color: inherit;
-    text-align: inherit;
-    background: none;
-    border: none;
     outline: none;
     padding-left: 2 * $base-increment;
     padding-right: 2 * $base-increment;
+    display: flex;
+    align-items: center;
     cursor: pointer;
+    caret-color: transparent;
 
     .w-select__selection-slot + & {
       position: absolute;
@@ -459,9 +470,9 @@ export default {
       -webkit-tap-highlight-color: transparent;
     }
 
-    .w-select--disabled input::placeholder {color: inherit;}
-
     .w-select--readonly & {cursor: auto;}
+
+    &--placeholder {color: #888;}
   }
 
   &__selection-slot {
@@ -525,6 +536,7 @@ export default {
     top: 50%;
     left: 0;
     right: 0;
+    white-space: nowrap;
     // Use margin instead of padding as the scale transformation below decreases the real padding
     // size and misaligns the label.
     margin-left: 2 * $base-increment;

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

@@ -351,6 +351,7 @@ $inactive-color: #777;
     top: $base-increment;
     left: 0;
     padding-left: 2 * $base-increment;
+    white-space: nowrap;
     transform: translateY(0%);
     pointer-events: none;
 

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],