wave-ui 3.20.0 → 3.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.20.0",
+  "version": "3.21.0",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@biomejs/biome": "^1.9.4",
-    "@faker-js/faker": "^9.6.0",
+    "@faker-js/faker": "^9.7.0",
     "@mdi/font": "^7.4.47",
     "@tsconfig/recommended": "^1.0.8",
     "@vitejs/plugin-vue": "^5.2.3",
@@ -71,11 +71,11 @@
     "postcss": "^8.5.3",
     "pug": "^3.0.3",
     "rollup-plugin-delete": "^3.0.1",
-    "sass": "^1.86.2",
+    "sass": "^1.86.3",
     "simple-syntax-highlighter": "^3.1.1",
     "splitpanes": "^4.0.3",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",

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

@@ -1,18 +1,31 @@
 <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")
+  .w-scrollable__content(ref="scrollableEl")
+    slot
+  .w-scrollable__scrollbar(ref="trackEl" @mousedown="onTrackMouseDown" :class="scrollbarClasses")
+    .w-scrollable__scrollbar-thumb(ref="thumbEl" :style="thumbStyles")
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+
+defineOptions({ name: 'WScrollable' })
+
+const props = defineProps({
+  color: { type: String, default: 'primary' },
+  bgColor: { type: String },
+  width: { type: [Number, String] },
+  height: { type: [Number, String] }
+})
+
+const emit = defineEmits([])
+
 const domProps = {
   h: {
     direction: 'horizontal',
@@ -38,201 +51,198 @@ const domProps = {
   }
 }
 
-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.direction}`]: true
-      }
-    },
-
-    scrollbarClasses () {
-      return {
-        [`w-scrollbar--${this.m.direction}`]: true
-      }
-    },
-
-    thumbSizePercent () {
-      if (!this.mounted) return 0
-      const size = this[this.m.size] ?? this.$refs.scrollable[[this.m.offsetSize]]
-      // if (size === undefined) size = this.$refs.scrollable.offsetSize
-      return (size * 100 / this.$refs.scrollable?.[this.m.scrollSize]) || 0
-    },
-
-    scrollableStyles () {
-      return {
-        [this.m.maxSize]: `${this[this.m.size]}px`
-      }
-    },
-
-    thumbStyles () {
-      let topOrLeftValue = this.scrollValuePercent
-      topOrLeftValue = Math.max(0, Math.min(topOrLeftValue, 100 - this.thumbSizePercent))
-      return {
-        [this.m.size]: `${this.thumbSizePercent}%`,
-        [this.m.topOrLeft]: `${topOrLeftValue}%`
-      }
-    }
-  },
+// Refs used in template and functions.
+const mounted = ref(false)
+const scrollableEl = ref(null)
+const trackEl = ref(null)
+const thumbEl = ref(null)
+const scrollableState = ref({
+  top: null,
+  left: null,
+  hovered: false
+})
+const scrollValuePercent = ref(0)
+const dragging = ref(false)
+
+const isHorizontal = computed(() => {
+  if (!mounted.value) return false
+  console.log('💂‍♂️', scrollableEl.value?.scrollWidth, scrollableEl.value?.offsetWidth)
+  return (props.width && !props.height) || (scrollableEl.value?.scrollWidth > scrollableEl.value?.offsetWidth)
+})
+
+const m = computed(() => domProps[isHorizontal.value ? 'h' : 'v'])
+
+const scrollableClasses = computed(() => ({
+  [`w-scrollable--${m.value.direction}`]: true
+}))
+
+const scrollbarClasses = computed(() => ({
+  [`w-scrollable__scrollbar--${m.value.direction}`]: true
+}))
+
+const refreshThumb = ref(0)
+
+const thumbSizePercent = computed(() => {
+  refreshThumb.value // Dependency to force re-evaluation.
+  if (!mounted.value) return 0
+  const size = props[m.value.size] ?? scrollableEl.value?.[m.value.offsetSize]
+  return (size * 100 / scrollableEl.value?.[m.value.scrollSize]) || 0
+})
+
+function forceRefreshThumb () {
+  refreshThumb.value++
+}
 
-  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
-    },
-
-    onResize () {
-    },
-
-    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
-      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 size = this.isHorizontal ? width : height
-      this.scrollValuePercent = Math.max(0, Math.min(((cursorPositionXorY - topOrLeft) / size) * 100, 100))
-    },
-
-    scroll () {
-      this.$refs.scrollable[this.m.scrollTopOrLeft] = this.scrollValuePercent * this.$refs.scrollable?.[this.m.scrollSize] / 100
-      this.updateThumbPosition()
-    },
-
-    updateThumbPosition () {
-      this.$refs.thumb.style[this.m.topOrLeft] = this.scrollValuePercent
-    }
-  },
+const scrollableStyles = computed(() => ({
+  [m.value.maxSize]: props[m.value.size] ? `${props[m.value.size]}px` : undefined
+}))
 
-  mounted () {
-    this.mounted = true
-    const { top, left } = this.$refs.scrollable.getBoundingClientRect()
-    this.scrollable.top = top
-    this.scrollable.left = left
+const thumbStyles = computed(() => {
+  let topOrLeftValue = scrollValuePercent.value
+  topOrLeftValue = Math.max(0, Math.min(topOrLeftValue, 100 - thumbSizePercent.value))
+  return {
+    [m.value.size]: `${thumbSizePercent.value}%`,
+    [m.value.topOrLeft]: `${topOrLeftValue}%`
+  }
+})
 
-    this.$el.parentNode.style.position = 'relative'
-    this.$el.parentNode.style.padding = 0
+function onTrackMouseDown (e) {
+  if (props.isDisabled || props.isReadonly) return
+  // On touch screen don't listen for both touchstart & mousedown.
+  if ('ontouchstart' in window && e.type === 'mousedown') return
 
-    window.addEventListener('resize', this.onResize)
+  const { top, left, width, height } = trackEl.value.getBoundingClientRect()
+  if (isHorizontal.value) {
+    trackEl.value.width = width
+    trackEl.value.left = left
+  }
+  else {
+    trackEl.value.height = height
+    trackEl.value.top = top
   }
+  dragging.value = true
+
+  computeScroll(e.type === 'touchstart' ? e.touches[0][m.value.clientXorY] : e[m.value.clientXorY])
+  scroll()
+
+  document.addEventListener(e.type === 'touchstart' ? 'touchmove' : 'mousemove', onDrag)
+  document.addEventListener(e.type === 'touchstart' ? 'touchend' : 'mouseup', onMouseUp, { once: true })
+}
+
+function onDrag (e) {
+  computeScroll((e.type === 'touchmove' ? e.touches[0][m.value.clientXorY] : e[m.value.clientXorY]))
+  scroll()
 }
+
+function onMouseUp (e) {
+  dragging.value = false
+  document.removeEventListener(e.type === 'touchend' ? 'touchmove' : 'mousemove', onDrag)
+  if (thumbEl.value) thumbEl.value.focus()
+}
+
+function onMouseEnter () {
+  scrollableState.value.hovered = true
+}
+
+function onMouseLeave () {
+  scrollableState.value.hovered = false
+}
+
+function onMouseWheel (e) {
+  if (!scrollableState.value.hovered) return // Only scroll a w-scrollable element that is being hovered.
+
+  // When scrolling beyond limits, release the mousewheel and scroll the parent.
+  if (scrollValuePercent.value <= 0 && e[m.value.deltaXorY] < 0) return
+  if (scrollValuePercent.value >= 100 - thumbSizePercent.value && e[m.value.deltaXorY] > 0) return
+
+  e.preventDefault() // Hold the scroll in the hovered w-scrollable element.
+
+  scrollValuePercent.value += e[m.value.deltaXorY] * 0.05
+  scrollValuePercent.value = Math.max(0, Math.min(scrollValuePercent.value, 100))
+  scroll()
+}
+
+function computeScroll (cursorPositionXorY) {
+  const { top, left, width, height } = scrollableEl.value.getBoundingClientRect()
+  const topOrLeft = isHorizontal.value ? left : top
+  const size = isHorizontal.value ? width : height
+  scrollValuePercent.value = Math.max(0, Math.min(((cursorPositionXorY - topOrLeft) / size) * 100, 100))
+}
+
+function scroll () {
+  scrollableEl.value[m.value.scrollTopOrLeft] = scrollValuePercent.value * scrollableEl.value?.[m.value.scrollSize] / 100
+  updateThumbPosition()
+}
+
+function updateThumbPosition () {
+  thumbEl.value.style[m.value.topOrLeft] = scrollValuePercent.value
+}
+
+onMounted(() => {
+  mounted.value = true
+  const { top, left } = scrollableEl.value.getBoundingClientRect()
+  scrollableState.value.top = top
+  scrollableState.value.left = left
+
+  window.addEventListener('resize', forceRefreshThumb)
+})
+
+// Clean up event listener.
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', forceRefreshThumb)
+})
+
+defineExpose({ scroll })
 </script>
 
 <style lang="scss">
 .w-scrollable {
-  position: relative;
-  overflow: hidden;
-}
-
-.w-scrollbar {
-  position: absolute;
-  background: #000;
-  user-select: none;
+  display: flex;
+  border-radius: inherit;
 
-  &--horizontal {
-    inset: auto 0 0;
-    height: 8px;
+  &__content {
+    padding: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
   }
-  &--vertical {
-    inset: 0 0 0 auto;
-    width: 8px;
+
+  &__scrollbar {
+    position: relative;
+    flex: 0 0 auto;
+    background: $scrollbar-bg-color;
+    user-select: none;
+
+    &--horizontal {
+      inset: auto 0 0;
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+      height: $scrollbar-size;
+    }
+    &--vertical {
+      inset: 0 0 0 auto;
+      border-top-right-radius: inherit;
+      border-bottom-right-radius: inherit;
+      width: $scrollbar-size;
+    }
   }
 
-  &__thumb {
+  &__scrollbar-thumb {
     position: absolute;
-    background: #333;
+    background: $scrollbar-thumb-color;
     border-radius: $border-radius;
     z-index: 1;
     will-change: top left;
 
-    &:hover {background: #444;}
+    &:hover {background: $scrollbar-thumb-color;}
   }
-  &--horizontal &__thumb {
+  &--horizontal &__scrollbar-thumb {
     height: 6px;
     left: 0;
     right: 0;
     margin-top: 1px;
     margin-bottom: 1px;
   }
-  &--vertical &__thumb {
+  &--vertical &__scrollbar-thumb {
     width: 6px;
     top: 0;
     bottom: 0;

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

@@ -6,6 +6,16 @@
 :root {
   --w-base-increment: #{$base-increment};
   --w-css-scope: #{$css-scope};
+  --w-contrast-bg-o05-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
+  --w-contrast-bg-o1-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 10%, transparent)};
+  --w-contrast-bg-o2-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent)};
+  --w-contrast-bg-o3-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 30%, transparent)};
+  --w-contrast-bg-o4-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 40%, transparent)};
+  --w-contrast-bg-o5-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 50%, transparent)};
+  --w-contrast-bg-o6-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 60%, transparent)};
+  --w-contrast-bg-o7-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 70%, transparent)};
+  --w-contrast-bg-o8-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 80%, transparent)};
+  --w-contrast-bg-o9-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 90%, transparent)};
 
   background-color: var(--w-base-bg-color);
   color: var(--w-base-color);

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

@@ -126,6 +126,13 @@
   .base-color--bg {background-color: var(--w-base-bg-color);}
   .contrast-color {color: color-mix(in srgb, var(--w-contrast-color) 75%, transparent);}
   .contrast-color--bg {background-color: var(--w-contrast-bg-color);}
+
+  .contrast-o05 {color: var(--w-contrast-bg-o05-color);}
+  .contrast-o05--bg {background-color: var(--w-contrast-bg-o05-color);}
+  @for $i from 1 through 9 {
+    .contrast-o#{$i} {color: var(--w-contrast-bg-o#{$i}-color);}
+    .contrast-o#{$i}--bg {background-color: var(--w-contrast-bg-o#{$i}-color);}
+  }
   // ------------------------------------------------------
 
   // Status colors - must stay last and have highest priority.

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

@@ -52,6 +52,15 @@
     .d-iflex {display: inline-flex;}
     .d-block {display: block;}
     .d-iblock {display: inline-block;}
+
+    .ovh {overflow: hidden;}
+    .ovv {overflow: visible;}
+    .ova {overflow: auto;}
+
+    .op05 {opacity: 0.05;}
+    @for $i from 0 through 9 {
+      .op#{$i} {opacity: $i * 0.1;}
+    }
     // ----------------------------------------------
 
     // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).

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

@@ -148,3 +148,10 @@ $tooltip-bg-color: $detachable-bg-color !default;
 $tooltip-color: $detachable-color !default;
 $tooltip-border-color: $border-color !default;
 // --------------------------------------------------------
+
+// w-scrollable.
+// --------------------------------------------------------
+$scrollbar-size: 8px !default;
+$scrollbar-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 8%, var(--w-base-bg-color)) !default;
+$scrollbar-thumb-color: color-mix(in srgb, var(--w-contrast-bg-color) 25%, var(--w-base-bg-color)) !default;
+// --------------------------------------------------------

package/src/wave-ui/utils/colors.js

@@ -205,12 +205,12 @@ export function mixColors (color1, color2, weight = 50) {
   const red = clamp(Math.round(c1.red * c1Weight + c2.red * c2Weight), 0, 255)
   const green = clamp(Math.round(c1.green * c1Weight + c2.green * c2Weight), 0, 255)
   const blue = clamp(Math.round(c1.blue * c1Weight + c2.blue * c2Weight), 0, 255)
-
   const alpha = c1.alpha * percentage + c2.alpha * (1 - percentage)
 
-  return c1.hasAlpha || c2.hasAlpha || alpha !== 1
-    ? hexFromRGB(red, green, blue, alpha)
-    : hexFromRGB(red, green, blue)
+  const channels = [red, green, blue]
+  if (c1.hasAlpha || c2.hasAlpha || alpha !== 1) channels.push(alpha)
+
+  return hexFromRGB(...channels)
 }
 
 /**

package/src/wave-ui/utils/dynamic-css.js

@@ -1,5 +1,5 @@
-// Defaults CSS variables. Will be overridden in the main function of this file (the export default)
-// which fetches the CSS :root variables generated by _layout.scss.
+// Defaults CSS variables. Will be overridden in the doDynamicCSS() function
+// which fetches the CSS :root variables generated by _base.scss.
 const cssVars = {
   cssScope: '.w-app',
   baseIncrement: 4