wave-ui 3.0.4 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.0.4",
+  "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",
@@ -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",
@@ -48,7 +49,7 @@
     "lint": "vite lint"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.21.0",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@mdi/font": "^5.9.55",
@@ -57,21 +58,21 @@
     "autoprefixer": "^10.4.13",
     "axios": "^0.25.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^9.8.0",
+    "eslint-plugin-vue": "^9.9.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.11.3",
+    "gsap": "^3.11.4",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.21",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.3",
     "simple-syntax-highlighter": "^2.2.5",
     "splitpanes": "^3.1.5",
     "standard": "^17.0.0",
     "vite": "^3.2.5",
     "vite-svg-loader": "^4.0.0",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"

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

@@ -348,7 +348,10 @@ export default {
       if (!this.isMultipleSelect) this.listItems.forEach(item => (item._selected = false))
 
       this.checkSelection(selection) // Create an array with the selected values.
-        .forEach(val => (this.listItems.find(item => item._value === val)._selected = true))
+        .forEach(val => {
+          const foundItem = this.listItems.find(item => item._value === val)
+          if (foundItem) foundItem._selected = true
+        })
     }
   },
 

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;
 

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

package/src/wave-ui/core.js

@@ -103,7 +103,6 @@ export default class WaveUI {
           const wApp = document.querySelector(config.on) || document.body
           wApp.classList.add('w-app')
 
-          let themeColors = config.colors[config.theme]
           if (config.theme === 'auto') detectOSDarkMode($waveui) // Also switches the theme.
           else $waveui.switchTheme(config.theme, true)
 

package/src/wave-ui/scss/_base.scss

@@ -15,6 +15,7 @@
   --w-base-color-rgb: #{map.get($theme-light, 'base-color-rgb')};
   --w-contrast-bg-color-rgb: #{map.get($theme-light, 'contrast-bg-color-rgb')};
   --w-contrast-color-rgb: #{map.get($theme-light, 'contrast-color-rgb')};
+  --w-caption-color-rgb: #{map.get($theme-light, 'caption-color-rgb')};
   --w-disabled-color-rgb: #{map.get($theme-light, 'disabled-color-rgb')};
 }
 
@@ -23,6 +24,7 @@
   --w-base-color-rgb: #{map.get($theme-dark, 'base-color-rgb')};
   --w-contrast-bg-color-rgb: #{map.get($theme-dark, 'contrast-bg-color-rgb')};
   --w-contrast-color-rgb: #{map.get($theme-dark, 'contrast-color-rgb')};
+  --w-caption-color-rgb: #{map.get($theme-dark, 'caption-color-rgb')};
   --w-disabled-color-rgb: #{map.get($theme-dark, 'disabled-color-rgb')};
 }
 

package/src/wave-ui/scss/_typography.scss

@@ -33,7 +33,7 @@
   .caption {
     font-size: round(0.85 * $base-font-size);
     font-style: italic;
-    color: rgba(80, 80, 80, 0.7);
+    color: $caption-color;
   }
 
   .text-upper {text-transform: uppercase;}

package/src/wave-ui/scss/_variables.scss

@@ -14,6 +14,7 @@ $theme-light: (
   base-color-rgb: (0, 0, 0), // #000.
   contrast-bg-color-rgb: (0, 0, 0), // #000.
   contrast-color-rgb: (255, 255, 255), // #fff.
+  caption-color-rgb: (80, 80, 80, 0.7), // #505050.
   disabled-color-rgb: (204, 204, 204), // #ccc.
 ) !default;
 
@@ -22,6 +23,7 @@ $theme-dark: (
   base-color-rgb: (255, 255, 255), // #fff.
   contrast-bg-color-rgb: (255, 255, 255), // #fff.
   contrast-color-rgb: (0, 0, 0), // #000.
+  caption-color-rgb: (175, 175, 175, 0.7), // #afafaf.
   disabled-color-rgb: (74, 74, 74), // #4a4a4a.
 ) !default;
 
@@ -32,6 +34,7 @@ $base-bg-color: rgb(var(--w-base-bg-color-rgb));
 $base-color: rgb(var(--w-base-color-rgb));
 $contrast-bg-color: rgb(var(--w-contrast-bg-color-rgb));
 $contrast-color: rgb(var(--w-contrast-color-rgb));
+$caption-color: rgb(var(--w-caption-color-rgb));
 // When a form element is disabled (checkbox, radio, input, select list).
 $disabled-color: rgb(var(--w-disabled-color-rgb));