wave-ui 3.9.0 → 3.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.9.0",
+  "version": "3.9.2",
   "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",
@@ -50,30 +50,30 @@
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
-    "@faker-js/faker": "^8.2.0",
+    "@babel/core": "^7.23.7",
+    "@babel/eslint-parser": "^7.23.3",
+    "@faker-js/faker": "^8.3.1",
     "@mdi/font": "^6.9.96",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vue/compiler-sfc": "3.3.4",
+    "@vitejs/plugin-vue": "^5.0.2",
+    "@vue/compiler-sfc": "3.4.4",
     "autoprefixer": "^10.4.16",
-    "axios": "^1.6.0",
-    "eslint": "^8.52.0",
-    "eslint-plugin-vue": "^9.18.1",
+    "axios": "^1.6.3",
+    "eslint": "^8.56.0",
+    "eslint-plugin-vue": "^9.19.2",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.12.2",
+    "gsap": "^3.12.4",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "pug": "^3.0.2",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.69.5",
+    "sass": "^1.69.7",
     "simple-syntax-highlighter": "^3.0.2",
     "splitpanes": "^3.1.5",
     "standard": "^17.1.0",
-    "vite": "^3.2.7",
-    "vite-svg-loader": "^4.0.0",
-    "vue": "^3.3.7",
+    "vite": "^5.0.10",
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.4.4",
     "vue-router": "^4.2.5",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"

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

@@ -117,6 +117,7 @@ export default {
 
   &--round {
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     padding: 0;
   }
 

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

@@ -203,6 +203,7 @@ $spinner-size: 40;
     aspect-ratio: 1;
     border-radius: 99em;
     padding: 0;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
   }
   &--tile {border-radius: initial;}
   &--shadow {box-shadow: $box-shadow;}

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

@@ -111,7 +111,7 @@ export default {
   line-height: 1;
   font-size: 1.2em;
   width: 1em;
-  // The aspect ratio will not work if the content is the content overflows.
+  // The aspect ratio will not work if the content overflows (needs overflow hidden, but we don't want that in the library).
   height: 1em;
 
   &.size--xs {font-size: round(0.85 * $base-font-size);}

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

@@ -237,7 +237,7 @@ export default {
     overallFilesProgress () {
       const progress = +this.inputFiles.reduce((total, file) => total + file.progress, 0)
       const total = progress / this.inputFiles.length
-      this.$emit('update:overallProgress', this.inputFiles.length ? total : undefined)
+      this.$emit('update:overallProgress', this.inputFiles.length ? total : 0)
 
       return total
     },

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

@@ -15,23 +15,23 @@
 <script>
 const domProps = {
   h: {
-    horizOrVert: 'horizontal',
+    direction: 'horizontal',
     topOrLeft: 'left',
-    widthOrHeight: 'width',
-    offsetWidthOrHeight: 'offsetWidth',
-    maxWidthOrHeight: 'max-width',
-    scrollWidthOrHeight: 'scrollWidth',
+    size: 'width',
+    offsetSize: 'offsetWidth',
+    maxSize: 'max-width',
+    scrollSize: 'scrollWidth',
     clientXorY: 'clientX',
     deltaXorY: 'deltaX',
     scrollTopOrLeft: 'scrollLeft'
   },
   v: {
-    horizOrVert: 'vertical',
+    direction: 'vertical',
     topOrLeft: 'top',
-    widthOrHeight: 'height',
-    offsetWidthOrHeight: 'offsetHeight',
-    maxWidthOrHeight: 'max-height',
-    scrollWidthOrHeight: 'scrollHeight',
+    size: 'height',
+    offsetSize: 'offsetHeight',
+    maxSize: 'max-height',
+    scrollSize: 'scrollHeight',
     clientXorY: 'clientY',
     deltaXorY: 'deltaY',
     scrollTopOrLeft: 'scrollTop'
@@ -72,27 +72,26 @@ export default {
 
     scrollableClasses () {
       return {
-        [`w-scrollable--${this.m.horizOrVert}`]: true
+        [`w-scrollable--${this.m.direction}`]: true
       }
     },
 
     scrollbarClasses () {
       return {
-        [`w-scrollbar--${this.m.horizOrVert}`]: true
+        [`w-scrollbar--${this.m.direction}`]: 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
+      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.maxWidthOrHeight]: `${this[this.m.widthOrHeight]}px`
+        [this.m.maxSize]: `${this[this.m.size]}px`
       }
     },
 
@@ -100,7 +99,7 @@ export default {
       let topOrLeftValue = this.scrollValuePercent
       topOrLeftValue = Math.max(0, Math.min(topOrLeftValue, 100 - this.thumbSizePercent))
       return {
-        [this.m.widthOrHeight]: `${this.thumbSizePercent}%`,
+        [this.m.size]: `${this.thumbSizePercent}%`,
         [this.m.topOrLeft]: `${topOrLeftValue}%`
       }
     }
@@ -149,6 +148,9 @@ export default {
       this.scrollable.hovered = false
     },
 
+    onResize (e) {
+    },
+
     onMouseWheel (e) {
       if (!this.scrollable.hovered) return // Only scroll a w-scrollable element that is being hovered.
 
@@ -166,12 +168,12 @@ export default {
     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))
+      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.scrollWidthOrHeight] / 100
+      this.$refs.scrollable[this.m.scrollTopOrLeft] = this.scrollValuePercent * this.$refs.scrollable?.[this.m.scrollSize] / 100
       this.updateThumbPosition()
     },
 
@@ -187,7 +189,9 @@ export default {
     this.scrollable.left = left
 
     this.$el.parentNode.style.position = 'relative'
-    this.$el.parentNode.style[this.m.maxWidthOrHeight] = `${this[this.m.widthOrHeight]}px`
+    this.$el.parentNode.style.padding = 0
+
+    window.addEventListener('resize', this.onResize)
   }
 }
 </script>
@@ -204,15 +208,11 @@ export default {
   user-select: none;
 
   &--horizontal {
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: auto 0 0;
     height: 8px;
   }
   &--vertical {
-    top: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0 0 0 auto;
     width: 8px;
   }
 

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

@@ -302,6 +302,7 @@ export default {
       top: 0;
       width: $base-increment;
       aspect-ratio: 1;
+      min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
       background-color: $slider-step-label-bg-color;
       border-radius: 99em;
       // box-shadow: 0 0 0 1px #fff;
@@ -365,6 +366,7 @@ export default {
     position: absolute;
     width: 3 * $base-increment;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     left: 100%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -380,6 +382,7 @@ export default {
     top: 0;
     width: 100%;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     border: none;
     border-radius: 99em;
     cursor: pointer;
@@ -456,6 +459,7 @@ export default {
       border-radius: 99em 99em 99em 0;
       width: 2.8em;
       aspect-ratio: 1;
+      min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
 
       & > div {
         position: absolute;

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

@@ -62,6 +62,7 @@ export default {
   font-size: 2rem;
   width: 1em;
   aspect-ratio: 1;
+  min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
 
   &.size--xs {font-size: round(0.9 * divide($base-font-size, 2)) * 2;}
   &.size--sm {font-size: round(1.5 * $base-font-size);}
@@ -74,6 +75,7 @@ export default {
     position: absolute;
     width: 100%;
     aspect-ratio: 1;
+    min-width: 0; // Safari ratio fix (e.g. losing ratio if height is set and side padding are added).
     top: 0;
     left: 0;
     background-color: currentColor;

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

@@ -252,7 +252,7 @@ $outline-width: 2px;
 
   // The focus outline & ripple on switch activation.
   &__input:before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     top: 0;