wave-ui 1.66.0 → 1.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.66.0",
+  "version": "1.67.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",
@@ -46,12 +46,14 @@
     "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.20.5",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.22.10",
+    "@babel/eslint-parser": "^7.22.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@faker-js/faker": "^8.0.2",
     "@mdi/font": "^6.9.96",
     "@vitejs/plugin-vue": "^1.10.2",
     "autoprefixer": "^10.4.13",
@@ -68,7 +70,7 @@
     "gsap": "^3.11.3",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.27",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
     "sass": "^1.56.1",

package/src/wave-ui/components/index.js

@@ -28,7 +28,7 @@ export { default as WProgress } from './w-progress.vue'
 export { default as WRadio } from './w-radio.vue'
 export { default as WRadios } from './w-radios.vue'
 export { default as WRating } from './w-rating.vue'
-export { default as WScrollbar } from './w-scrollbar.vue'
+export { default as WScrollable } from './w-scrollable.vue'
 export { default as WSelect } from './w-select.vue'
 export { default as WSlider } from './w-slider.vue'
 export { default as WSpinner } from './w-spinner.vue'

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

@@ -163,7 +163,7 @@ $spinner-size: 40;
   z-index: 1;
   // Background-color must not transition to not affect the hover & focus states
   // in :before & :after.
-  transition: $transition-duration, background-color 0s, padding 0s;
+  transition: all $transition-duration, background-color 0s, padding 0s;
   -webkit-tap-highlight-color: transparent;
 
   // In w-flex wrapper, allow overriding the default `align-self: center`.
@@ -252,10 +252,10 @@ $spinner-size: 40;
   // Button states.
   // ------------------------------------------------------
   // Hover & focus states - inside button.
-  &:hover:before, &:focus:before {opacity: 0.08;}
-  &--dark:hover:before, &--dark:focus:before {opacity: 0.2;}
-  &--outline:hover:before, &--outline:focus:before,
-  &--text:hover:before, &--text:focus:before {opacity: 0.12;}
+  &:hover:before, &:focus-visible:before {opacity: 0.2;}
+  &--dark:hover:before, &--dark:focus-visible:before {opacity: 0.4;}
+  &--outline:hover:before, &--outline:focus-visible:before,
+  &--text:hover:before, &--text:focus-visible:before {opacity: 0.12;}
 
   // Focus state - outside button.
   &:after {
@@ -272,22 +272,25 @@ $spinner-size: 40;
     transition: opacity 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), transform 0.25s ease-in;
     transform: scale(0.85, 0.7);
   }
-  &:focus:after {
+  &:focus-visible:after {
     opacity: 0.4;
     transform: scale(1);
     transition: opacity 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), transform 0.25s ease-out;
   }
-  &--dark:focus:after {opacity: 0.2;}
+  &--dark:focus-visible:after {opacity: 0.2;}
 
   // Active state.
-  &:active:before {opacity: 0.2;}
-  &--dark:active:before, &.primary--bg:active:before {opacity: 0.25;}
+  &:active {transform: scale(1.02);}
+  &:active:before {opacity: 0.3;}
+  &--dark:active:before, &.primary--bg:active:before {opacity: 0.35;}
 
   // Disable visual feedback on loading and disabled buttons.
   &--loading:hover:before,
-  &--loading:focus:before,
+  &--loading:focus-visible:before,
   &--loading:active:before,
   &[disabled]:before {opacity: 0;}
+  &--loading:active,
+  &[disabled] {transform: none;}
   // ------------------------------------------------------
 
   // Disable events binding on nested content.
@@ -303,6 +306,7 @@ $spinner-size: 40;
     align-items: center;
     justify-content: center;
     background: inherit;
+    border-radius: inherit;
 
     svg {height: 75%;}
     circle {

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

@@ -2,9 +2,12 @@
 .w-card(:class="classes")
   .w-card__title(
     v-if="$slots.title"
-    :class="{ 'w-card__title--has-toolbar': titleHasToolbar, ...titleClasses }")
+    :class="{ 'w-card__title--has-toolbar': $slots.title && titleHasToolbar, ...titleClasses }")
     slot(name="title")
-  .w-card__title(v-else-if="title" :class="titleClasses" v-html="title")
+  .w-card__title(
+    v-else-if="title"
+    v-html="title"
+    :class="{ 'w-card__title--has-toolbar': title && titleHasToolbar, ...titleClasses }")
   w-image.w-card__image(v-if="image" :src="image" v-bind="imgProps")
     slot(name="image-content")
   .w-card__content(:class="contentClasses")
@@ -94,12 +97,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-confirm.vue

@@ -128,7 +128,13 @@ export default {
         icon: this.icon,
         tooltip: label,
         tooltipProps,
-        ...this.mainButton
+        ...this.mainButton,
+        ...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.$vnode.data.staticClass, this.$vnode.data.class]
       }
     }
   },

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

@@ -11,7 +11,7 @@
       //- Background first, in SVG there is no z-index.
       circle.bg(
         v-if="bgColor || this.progressValue > -1"
-        :class="bgColor"
+        :class="bgColor || null"
         :cx="circleCenter"
         :cy="circleCenter"
         :r="circleRadius"

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

@@ -145,7 +145,8 @@ export default {
         'w-rating__button--half': isHalf,
         [this.icon]: true,
         [`size--${this.size}`]: true,
-        [isOn ? this.color : this.bgColor]: true
+        [this.color]: isOn,
+        [this.bgColor]: this.bgColor && !isOn
       }
     }
   },

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

@@ -0,0 +1,243 @@
+<template lang="pug">
+.w-scrollable(
+  ref="scrollable"
+  @mouseenter="onMouseEnter"
+  @mouseleave="onMouseLeave"
+  @mousewheel="onMouseWheel"
+  :class="scrollableClasses"
+  v-bind="$attrs"
+  :style="scrollableStyles")
+  slot
+  .w-scrollbar(ref="track" @mousedown="onTrackMouseDown" :class="scrollbarClasses")
+    .w-scrollbar__thumb(ref="thumb" :style="thumbStyles")
+</template>
+
+<script>
+const domProps = {
+  h: {
+    horizOrVert: 'horizontal',
+    topOrLeft: 'left',
+    widthOrHeight: 'width',
+    offsetWidthOrHeight: 'offsetWidth',
+    maxWidthOrHeight: 'max-width',
+    scrollWidthOrHeight: 'scrollWidth',
+    clientXorY: 'clientX',
+    deltaXorY: 'deltaX',
+    scrollTopOrLeft: 'scrollLeft'
+  },
+  v: {
+    horizOrVert: 'vertical',
+    topOrLeft: 'top',
+    widthOrHeight: 'height',
+    offsetWidthOrHeight: 'offsetHeight',
+    maxWidthOrHeight: 'max-height',
+    scrollWidthOrHeight: 'scrollHeight',
+    clientXorY: 'clientY',
+    deltaXorY: 'deltaY',
+    scrollTopOrLeft: 'scrollTop'
+  }
+}
+
+export default {
+  name: 'w-scrollable',
+  props: {
+    color: { type: String, default: 'primary' },
+    bgColor: { type: String },
+    width: { type: [Number, String] },
+    height: { type: [Number, String] }
+  },
+
+  emits: [],
+
+  data: () => ({
+    mounted: false,
+    scrollable: {
+      top: null,
+      left: null,
+      hovered: false
+    },
+    scrollValuePercent: 0
+  }),
+
+  computed: {
+    isHorizontal () {
+      if (!this.mounted) return false
+      console.log('💂‍♂️', this.$refs.scrollable?.scrollWidth, this.$refs.scrollable?.offsetWidth)
+      return (this.width && !this.height) || (this.$refs.scrollable?.scrollWidth > this.$refs.scrollable?.offsetWidth)
+    },
+
+    m () { // m = shorthand for map of DOM properties.
+      return domProps[this.isHorizontal ? 'h' : 'v']
+    },
+
+    scrollableClasses () {
+      return {
+        [`w-scrollable--${this.m.horizOrVert}`]: true
+      }
+    },
+
+    scrollbarClasses () {
+      return {
+        [`w-scrollbar--${this.m.horizOrVert}`]: true
+      }
+    },
+
+    thumbSizePercent () {
+      if (!this.mounted) return 0
+      console.log('😒', this[this.m.widthOrHeight], this.$refs.scrollable[[this.m.offsetWidthOrHeight]])
+      const widthOrHeight = this[this.m.widthOrHeight] ?? this.$refs.scrollable[[this.m.offsetWidthOrHeight]]
+      // if (widthOrHeight === undefined) widthOrHeight = this.$refs.scrollable.offsetWidthOrHeight
+      return (widthOrHeight * 100 / this.$refs.scrollable?.[this.m.scrollWidthOrHeight]) || 0
+    },
+
+    scrollableStyles () {
+      return {
+        [this.m.maxWidthOrHeight]: `${this[this.m.widthOrHeight]}px`
+      }
+    },
+
+    thumbStyles () {
+      let topOrLeftValue = this.scrollValuePercent
+      topOrLeftValue = Math.max(0, Math.min(topOrLeftValue, 100 - this.thumbSizePercent))
+      return {
+        [this.m.widthOrHeight]: `${this.thumbSizePercent}%`,
+        [this.m.topOrLeft]: `${topOrLeftValue}%`
+      }
+    }
+  },
+
+  methods: {
+    onTrackMouseDown (e) {
+      if (this.isDisabled || this.isReadonly) return
+      // On touch screen don't listen for both touchstart & mousedown.
+      if ('ontouchstart' in window && e.type === 'mousedown') return
+
+      const { top, left, width, height } = this.$refs.track.getBoundingClientRect()
+      if (this.isHorizontal) {
+        this.$refs.track.width = width
+        this.$refs.track.left = left
+      }
+      else {
+        this.$refs.track.height = height
+        this.$refs.track.top = top
+      }
+      this.dragging = true
+
+      this.computeScroll(e.type === 'touchstart' ? e.touches[0][this.m.clientXorY] : e[this.m.clientXorY])
+      this.scroll()
+
+      document.addEventListener(e.type === 'touchstart' ? 'touchmove' : 'mousemove', this.onDrag)
+      document.addEventListener(e.type === 'touchstart' ? 'touchend' : 'mouseup', this.onMouseUp, { once: true })
+    },
+
+    onDrag (e) {
+      this.computeScroll((e.type === 'touchmove' ? e.touches[0][this.m.clientXorY] : e[this.m.clientXorY]))
+      this.scroll()
+    },
+
+    onMouseUp (e) {
+      this.dragging = false
+      document.removeEventListener(e.type === 'touchend' ? 'touchmove' : 'mousemove', this.onDrag)
+      if (this.$refs.thumb) this.$refs.thumb.focus()
+    },
+
+    onMouseEnter () {
+      this.scrollable.hovered = true
+    },
+
+    onMouseLeave () {
+      this.scrollable.hovered = false
+    },
+
+    onMouseWheel (e) {
+      if (!this.scrollable.hovered) return // Only scroll a w-scrollable element that is being hovered.
+
+      // When scrolling beyond limits, release the mousewheel and scroll the parent.
+      if (this.scrollValuePercent <= 0 && e[this.m.deltaXorY] < 0) return
+      else if (this.scrollValuePercent >= 100 - this.thumbSizePercent && e[this.m.deltaXorY] > 0) return
+
+      e.preventDefault() // Hold the scroll in the hovered w-scrollable element.
+
+      this.scrollValuePercent += e[this.m.deltaXorY] * 0.05
+      this.scrollValuePercent = Math.max(0, Math.min(this.scrollValuePercent, 100))
+      this.scroll()
+    },
+
+    computeScroll (cursorPositionXorY) {
+      const { top, left, width, height } = this.$refs.scrollable.getBoundingClientRect()
+      const topOrLeft = this.isHorizontal ? left : top
+      const widthOrHeight = this.isHorizontal ? width : height
+      this.scrollValuePercent = Math.max(0, Math.min(((cursorPositionXorY - topOrLeft) / widthOrHeight) * 100, 100))
+    },
+
+    scroll () {
+      this.$refs.scrollable[this.m.scrollTopOrLeft] = this.scrollValuePercent * this.$refs.scrollable?.[this.m.scrollWidthOrHeight] / 100
+      this.updateThumbPosition()
+    },
+
+    updateThumbPosition () {
+      this.$refs.thumb.style[this.m.topOrLeft] = this.scrollValuePercent
+    }
+  },
+
+  mounted () {
+    this.mounted = true
+    const { top, left } = this.$refs.scrollable.getBoundingClientRect()
+    this.scrollable.top = top
+    this.scrollable.left = left
+
+    this.$el.parentNode.style.position = 'relative'
+    this.$el.parentNode.style[this.m.maxWidthOrHeight] = `${this[this.m.widthOrHeight]}px`
+  }
+}
+</script>
+
+<style lang="scss">
+.w-scrollable {
+  position: relative;
+  overflow: hidden;
+}
+
+.w-scrollbar {
+  position: absolute;
+  background: #000;
+  user-select: none;
+
+  &--horizontal {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 8px;
+  }
+  &--vertical {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 8px;
+  }
+
+  &__thumb {
+    position: absolute;
+    background: #333;
+    border-radius: $border-radius;
+    z-index: 1;
+    will-change: top left;
+
+    &:hover {background: #444;}
+  }
+  &--horizontal &__thumb {
+    height: 6px;
+    left: 0;
+    right: 0;
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+  &--vertical &__thumb {
+    width: 6px;
+    top: 0;
+    bottom: 0;
+    margin-left: 1px;
+    margin-right: 1px;
+  }
+}
+</style>

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 }"
   :valid.sync="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,7 +77,7 @@ component(
       @item-click="$emit('item-click', $event)"
       @item-select="onListItemSelect"
       @keydown:enter="noUnselect && !multiple && closeMenu()"
-      @keydown:escape="closeMenu"
+      @keydown:escape="showMenu && (this.showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
       :value="inputValue"
       :items="selectItems"
       :multiple="multiple"
@@ -190,7 +191,7 @@ export default {
     },
     selectionString () {
       return this.inputValue && this.inputValue.map(
-        item => item[this.itemValueKey] !== undefined ? item[this.itemLabelKey] : (item[this.itemLabelKey] !== undefined ? item[this.itemLabelKey] : item)
+        item => item[this.itemValueKey] !== undefined ? item[this.itemLabelKey] : (item[this.itemLabelKey] ?? item)
       ).join(', ')
     },
     classes () {
@@ -227,12 +228,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)
     },
@@ -241,11 +248,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() // Escape.
       else if (e.keyCode === 13) this.openMenu() // Enter.
 
       // Up & down arrows.
@@ -284,12 +290,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 () {
@@ -332,7 +342,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.