wave-ui 3.0.5 → 3.1.0

package/package.json

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

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

@@ -119,7 +119,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'
@@ -581,6 +583,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="$slots.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="$slots.selection ? '' : selectionString"
+          :contenteditable="isDisabled || isReadonly ? 'false' : 'true'"
           @focus="!isDisabled && !isReadonly && onFocus($event)"
           @blur="onBlur"
           @keydown="!isDisabled && !isReadonly && onKeydown($event)"
           :id="`w-select--${_.uid}`"
-          :placeholder="(!$slots.selection && placeholder) || null"
+          :class="{ 'w-select__selection--placeholder': !$slots.selection && !selectionString && placeholder }"
           :disabled="isDisabled || null"
           readonly
           aria-readonly="true"
-          :required="required || null"
           :tabindex="tabindex || null"
-          autocomplete="off")
+          v-html="$slots.selection ? '' : selectionString || placeholder")
         //- For standard HTML form submission.
         input(
           v-for="(val, i) in (inputValue.length ? inputValue : [{}])"
@@ -149,7 +147,8 @@ export default {
     noUnselect: { type: Boolean },
     menuProps: { type: Object }, // Allow passing down an object of props to the w-menu component.
     dark: { type: Boolean },
-    light: { type: Boolean }
+    light: { type: Boolean },
+    fitToContent: { type: Boolean }
     // Props from mixin: name, disabled, readonly, required, tabindex, validators.
     // Computed from mixin: inputName, isDisabled & isReadonly.
   },
@@ -200,6 +199,7 @@ export default {
         'w-select--dark': this.dark,
         'w-select--light': this.light,
         '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,
@@ -230,6 +230,7 @@ export default {
     onFocus (e) {
       this.isFocused = true
       this.$emit('focus', e)
+      return false
     },
 
     onBlur (e) {
@@ -238,6 +239,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.
@@ -300,7 +306,6 @@ export default {
     // Also accept objects if returnObject is true.
     // In any case, always end up with an array.
     checkSelection (items) {
-      console.log(items)
       items = Array.isArray(items) ? items : (items !== undefined ? [items] : [])
       // `selectItems` items always have a value.
       const allValues = this.selectItems.map(item => item.value)
@@ -368,6 +373,11 @@ export default {
     -webkit-tap-highlight-color: transparent;
   }
 
+  &--fit-to-content {
+    display: inline-flex;
+    flex-grow: 0;
+  }
+
   // Selection wrapper.
   // ------------------------------------------------------
   &__selection-wrap {
@@ -423,21 +433,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;
@@ -463,9 +473,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 {
@@ -529,6 +539,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

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