wave-ui 3.3.0 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "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/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-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-tabs/index.vue

@@ -2,57 +2,79 @@
 .w-tabs(:class="tabsClasses")
   .w-tabs__bar(ref="tabs-bar" :class="tabsBarClasses")
     .w-tabs__bar-item(
-      v-for="(item, i) in tabsItems"
+      v-for="(item, i) in tabs"
       :key="i"
       :class="barItemClasses(item)"
-      @click="!item._disabled && openTab(item)"
+      @click="!item._disabled && item._uid !== activeTabUid && openTab(item._uid)"
       @focus="$emit('focus', getOriginalItem(item))"
       :tabindex="!item._disabled && 0"
-      @keypress.enter="!item._disabled && openTab(item)"
-      :aria-selected="item._index === activeTabIndex ? 'true' : 'false'"
+      @keypress.enter="!item._disabled && openTab(item._uid)"
+      :aria-selected="item._uid === activeTabUid ? 'true' : 'false'"
       role="tab")
         slot(
           v-if="$slots[`item-title.${item.id || i + 1}`]"
           :name="`item-title.${item.id || i + 1}`"
           :item="getOriginalItem(item)"
           :index="i + 1"
-          :active="item._index === activeTabIndex")
+          :active="item._uid === activeTabUid")
         slot(
           v-else
           name="item-title"
           :item="getOriginalItem(item)"
           :index="i + 1"
-          :active="item._index === activeTabIndex")
+          :active="item._uid === activeTabUid")
           div(v-html="item[itemTitleKey]")
     .w-tabs__bar-extra(v-if="$slots['tabs-bar-extra']")
       slot(name="tabs-bar-extra")
     .w-tabs__slider(v-if="!noSlider && !card" :class="sliderColor" :style="sliderStyles")
 
-  .w-tabs__content-wrap(v-if="tabsItems.length")
-    transition(:name="transitionName" :mode="transitionMode")
-      keep-alive
+  .w-tabs__content-wrap(v-if="tabs.length")
+    transition-group(v-if="keepInDom" :name="transitionName")
+      tab-content(
+        v-for="(tab, i) in tabs"
+        :key="tab._uid"
+        :item="tab"
+        v-show="tab._uid === activeTab._uid"
+        :class="contentClass")
+        slot(
+          v-if="$slots[`item-content.${tab._index + 1}`]"
+          :name="`item-content.${tab._index + 1}`"
+          :item="getOriginalItem(tab)"
+          :index="tab._index + 1"
+          :active="tab._index === activeTab._index")
+        slot(
+          v-else
+          name="item-content"
+          :item="getOriginalItem(tab)"
+          :index="tab._index + 1"
+          :active="tab._index === activeTab._index")
+          div(v-if="tab[itemContentKey]" v-html="tab[itemContentKey]")
+    transition(v-else :name="transitionName" :mode="transitionMode")
+      keep-alive(:exclude="keepAlive ? '' : 'tab-content'")
         //- Keep-alive only works with components, not with DOM nodes.
-        tab-content(:key="activeTab._index" :item="activeTab" :class="contentClass")
+        tab-content(:key="activeTabUid" :item="activeTab" :class="contentClass")
           template(#default="{ item }")
-            slot(
-              v-if="$slots[`item-content.${item._index + 1}`]"
-              :name="`item-content.${item._index + 1}`"
-              :item="getOriginalItem(item)"
-              :index="item._index + 1"
-              :active="item._index === activeTab._index")
-            slot(
-              v-else
-              name="item-content"
-              :item="getOriginalItem(item)"
-              :index="item._index + 1"
-              :active="item._index === activeTab._index")
-              div(v-if="item[itemContentKey]" v-html="item[itemContentKey]")
+            template(v-if="item")
+              slot(
+                v-if="$slots[`item-content.${item._index + 1}`]"
+                :name="`item-content.${item._index + 1}`"
+                :item="getOriginalItem(item)"
+                :index="item._index + 1"
+                :active="item._uid === activeTabUid")
+              slot(
+                v-else
+                name="item-content"
+                :item="getOriginalItem(item)"
+                :index="item._index + 1"
+                :active="item._uid === activeTabUid")
+                div(v-if="item[itemContentKey]" v-html="item[itemContentKey]")
 </template>
 
 <script>
-import { reactive } from 'vue'
 import TabContent from './tab-content.vue'
 
+let uid = 0
+
 export default {
   name: 'w-tabs',
 
@@ -61,6 +83,7 @@ export default {
     color: { type: String },
     bgColor: { type: String },
     items: { type: [Array, Number] },
+    itemIdKey: { type: String, default: 'id' },
     itemTitleKey: { type: String, default: 'title' },
     itemContentKey: { type: String, default: 'content' },
     titleClass: { type: String },
@@ -75,7 +98,9 @@ export default {
     right: { type: Boolean },
     card: { type: Boolean },
     dark: { type: Boolean },
-    light: { type: Boolean }
+    light: { type: Boolean },
+    keepAlive: { type: Boolean, default: true },
+    keepInDom: { type: Boolean, default: false }
   },
 
   components: { TabContent },
@@ -83,7 +108,9 @@ export default {
   emits: ['input', 'update:modelValue', 'focus'],
 
   data: () => ({
+    tabs: [],
     activeTabEl: null,
+    activeTabUid: null,
     activeTabIndex: 0,
     prevTabIndex: -1, // To detect transition direction.
     slider: {
@@ -107,18 +134,13 @@ export default {
       return this.activeTab._index < this.prevTabIndex ? 'right' : 'left'
     },
 
-    tabsItems () {
-      const items = typeof this.items === 'number' ? Array(this.items).fill({}) : this.items
-
-      return items.map((item, _index) => reactive({
-        ...item,
-        _index,
-        _disabled: !!item.disabled
-      }))
+    activeTab () {
+      return this.tabsByUid[this.activeTabUid] || this.tabs[0] || {}
     },
 
-    activeTab () {
-      return this.tabsItems[this.activeTabIndex] || this.tabsItems[0] || {}
+    // An object indexing the tabs by their uid.
+    tabsByUid () {
+      return this.tabs.reduce((obj, tab) => ((obj[tab._uid] = tab) && obj), {})
     },
 
     tabsClasses () {
@@ -149,6 +171,54 @@ export default {
   },
 
   methods: {
+    // Adding a tab in the list.
+    addTab (item) {
+      // If there is no unique ID provided, inject one in each tab.
+      // This will cause a single other update from watching the tabs items and stop there.
+      if (!(item[this.itemIdKey] ?? item._uid ?? false)) item._uid = +`${this._.uid}${++uid}`
+
+      this.tabs.push({
+        _uid: item[this.itemIdKey] ?? item._uid,
+        _index: this.tabs.length,
+        ...item,
+        _disabled: !!item.disabled
+      })
+    },
+
+    refreshTabs () {
+      let items = this.items
+      if (typeof items === 'number') items = Array(items).fill().map((_, i) => this.tabs[i] || {})
+
+      this.tabs = items.map((item, _index) => {
+        // If there is no unique ID provided, inject one in each tab.
+        // This will cause a single other update from watching the tabs items and stop there.
+        if (!(item[this.itemIdKey] ?? item._uid ?? false)) item._uid = +`${this._.uid}${++uid}`
+
+        return {
+          ...item,
+          _uid: item[this.itemIdKey] ?? item._uid,
+          _index,
+          _disabled: !!item.disabled
+        }
+      })
+    },
+
+    reopenTheActiveTab () {
+      // If there is only 1 tab left open it.
+      if (this.tabs.length === 1) return this.openTab(this.tabs[0]._uid)
+
+      // First try to find the same uid in remaining tabs.
+      let uid = this.tabsByUid[this.activeTabUid]?._uid
+
+      // If not found, try to open the tab with the same index.
+      if (!uid) uid = this.tabs[this.activeTabIndex]?._uid
+
+      // If not found (no  tab to the right), try to open the next tab to the left.
+      if (!uid) uid = this.tabs[Math.max(this.activeTabIndex - 1, this.tabs.length - 1)]?._uid
+
+      if (uid) this.openTab(uid)
+    },
+
     onResize () {
       this.updateSlider(false)
     },
@@ -165,11 +235,14 @@ export default {
       }
     },
 
-    openTab (item) {
+    // Switching tabs.
+    openTab (uid) {
       this.prevTabIndex = this.activeTabIndex // To resolve the transition direction.
-      this.activeTabIndex = item._index
-      this.$emit('update:modelValue', item._index)
-      this.$emit('input', item._index)
+      const tab = this.tabsByUid[uid]
+      this.activeTabIndex = tab._index
+      this.activeTabUid = tab._uid
+      this.$emit('update:modelValue', tab._index)
+      this.$emit('input', tab._index)
 
       if (!this.noSlider) this.$nextTick(this.updateSlider)
     },
@@ -190,34 +263,42 @@ export default {
         this.slider.width = `${width}px`
       }
       else {
-        this.slider.left = `${this.activeTab._index * 100 / this.tabsItems.length}%`
-        this.slider.width = `${100 / this.tabsItems.length}%`
+        this.slider.left = `${this.activeTab._index * 100 / this.tabs.length}%`
+        this.slider.width = `${100 / this.tabs.length}%`
       }
     },
 
     updateActiveTab (index) {
       if (typeof index === 'string') index = ~~index
       else if (isNaN(index) || index < 0) index = 0
-      this.activeTabIndex = index
 
-      // Scroll the new active tab item title into view if needed.
-      this.$nextTick(() => {
-        const ref = this.$refs['tabs-bar']
-        this.activeTabEl = ref && ref.querySelector(`.w-tabs__bar-item:nth-child(${index + 1})`)
-        if (this.activeTabEl) {
-          this.activeTabEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
-        }
-      })
+      // Only open the tab if it is found.
+      if (this.tabs[index]?._uid) {
+        this.openTab(this.tabs[index]?._uid)
+
+        // Scroll the new active tab item title into view if needed.
+        this.$nextTick(() => {
+          const ref = this.$refs['tabs-bar']
+          this.activeTabEl = ref && ref.querySelector(`.w-tabs__bar-item:nth-child(${index + 1})`)
+          if (this.activeTabEl) {
+            this.activeTabEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+          }
+        })
+      }
     },
 
     // Return the original item (so there is no `_index`, etc.).
     getOriginalItem (item) {
-      return this.items[item._index]
+      return this.items[item._index] || {}
     }
   },
 
   beforeMount () {
-    this.updateActiveTab(this.modelValue)
+    this.tabs = [] // Reset for hot-reloading.
+    const items = typeof this.items === 'number' ? Array(this.items).fill().map(Object) : this.items
+    items.forEach(this.addTab)
+
+    if (this.modelValue ?? false) this.updateActiveTab(this.modelValue)
 
     this.$nextTick(() => {
       this.updateSlider()
@@ -234,13 +315,17 @@ export default {
 
   watch: {
     modelValue (index) {
-      this.updateActiveTab(index)
+      if (index !== this.activeTabIndex) this.updateActiveTab(index)
     },
-    items () {
-      // When deleting a tab, activate the previous one.
-      while (this.activeTabIndex > 0 && !this.tabsItems[this.activeTabIndex]) this.activeTabIndex--
+    items: {
+      handler () {
+        this.refreshTabs()
 
-      if (!this.noSlider) this.$nextTick(this.updateSlider)
+        if (this.tabs.length) this.reopenTheActiveTab()
+
+        if (!this.noSlider) this.$nextTick(this.updateSlider)
+      },
+      deep: true
     },
     fillBar () {
       if (!this.noSlider) this.$nextTick(this.updateSlider)
@@ -381,8 +466,10 @@ export default {
 .w-tabs-slide-left-leave-active,
 .w-tabs-slide-right-leave-active {
   position: absolute;
+  top: 0;
   left: 0;
   right: 0;
+  overflow: hidden;
 }
 
 .w-tabs-slide-left-enter-active {animation: w-tabs-slide-left-enter $transition-duration + 0.15s;}

package/src/wave-ui/components/w-tabs/tab-content.vue

@@ -5,7 +5,14 @@
 
 <script>
 // Keep-alive only works with components, not with DOM nodes.
+
 export default {
-  props: { item: Object }
+  name: 'tab-content', // Keep-alive include/exclude mechanism is component-name-based.
+
+  props: { item: Object },
+
+  mounted () {
+    console.log('mounted!', this.item._uid)
+  }
 }
 </script>

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

@@ -1,24 +0,0 @@
-<template lang="pug">
-.w-scrollbar
-</template>
-
-<script>
-export default {
-  name: 'w-scrollbar',
-  props: {
-
-  },
-
-  emits: [],
-
-  data: () => ({
-
-  })
-}
-</script>
-
-<style lang="scss">
-.w-scrollbar {
-
-}
-</style>