wave-ui 3.14.3 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.14.3",
+  "version": "3.16.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",
@@ -43,39 +43,38 @@
     "ui"
   ],
   "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.10.0",
     "@faker-js/faker": "^8.4.1",
-    "@mdi/font": "^6.9.96",
-    "@tsconfig/recommended": "^1.0.6",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/compiler-sfc": "3.4.26",
-    "autoprefixer": "^10.4.19",
-    "axios": "^1.7.2",
-    "eslint": "^9.8.0",
+    "@mdi/font": "^7.4.47",
+    "@tsconfig/recommended": "^1.0.7",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "autoprefixer": "^10.4.20",
+    "axios": "^1.7.7",
+    "eslint": "^9.10.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.10.1",
-    "eslint-plugin-promise": "^7.0.0",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-n": "^17.10.2",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-vue": "^9.28.0",
     "font-awesome": "^4.7.0",
     "globals": "^15.9.0",
     "gsap": "^3.12.5",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.45",
     "pug": "^3.0.3",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.77.6",
-    "simple-syntax-highlighter": "^3.0.5",
+    "sass": "^1.78.0",
+    "simple-syntax-highlighter": "^3.0.10",
     "splitpanes": "^3.1.5",
-    "typescript": "^5.5.2",
-    "typescript-eslint": "^8.0.0",
-    "vite": "^5.3.1",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.4.0",
+    "vite": "^5.4.3",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.30",
-    "vue-router": "^4.4.0",
+    "vue": "^3.5.3",
+    "vue-router": "^4.4.3",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"
   },
@@ -87,7 +86,7 @@
     "build": "vite build --base /wave-ui/",
     "build-types": "tsc -p ./tsconfig.json",
     "build-bundle": "BUNDLE=true vite build && npm run build-types && mv ./dist/style.css ./dist/wave-ui.css",
-    "serve": "vite preview --base /wave-ui/",
+    "preview": "vite preview --base /wave-ui/",
     "lint": "vite lint",
     "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
   }

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

@@ -2,7 +2,7 @@
 .w-alert(v-if="show" :class="classes")
   //- Add a wrapper around the content when needed.
   template(v-if="type || icon || dismiss")
-    w-icon.w-alert__icon.mr2(v-if="type || icon") {{ type ? typeIcon : icon }}
+    w-icon.w-alert__icon(v-if="type || icon") {{ type ? typeIcon : icon }}
     .w-alert__content
       slot
     w-button.w-alert__dismiss(
@@ -31,6 +31,7 @@ export default {
     iconOutside: { type: Boolean },
     plain: { type: Boolean },
     dismiss: { type: Boolean },
+    bold: { type: Boolean },
     // Types (with icon).
     success: { type: Boolean },
     info: { type: Boolean },
@@ -43,14 +44,12 @@ export default {
     lg: { type: Boolean },
     xl: { type: Boolean },
     // Borders.
-    noBorder: { type: Boolean },
+    border: { type: Boolean },
     borderLeft: { type: Boolean },
     borderRight: { type: Boolean },
     borderTop: { type: Boolean },
     borderBottom: { type: Boolean },
-    outline: { type: Boolean },
-    dark: { type: Boolean },
-    light: { type: Boolean }
+    outline: { type: Boolean }
   },
 
   emits: ['input', 'update:modelValue', 'close'],
@@ -93,14 +92,16 @@ export default {
     },
 
     hasSingleBorder () {
-      return this.borderLeft || this.borderRight ||
-        this.borderTop || this.borderBottom
+      return this.borderLeft || this.borderRight || this.borderTop || this.borderBottom
     },
 
     classes () {
+      const bgColor = this.bgColor || (this.plain && this.type)
+      const color = this.color || (!this.plain && this.type) || (!bgColor && 'primary')
+
       return {
-        [`${this.bgColor || (this.plain && this.type)}--bg w-alert--bg`]: this.bgColor || (this.plain && this.type),
-        [this.color || (!this.plain && this.type)]: this.color || (!this.plain && this.type),
+        [`${bgColor}--bg w-alert--bg`]: bgColor,
+        [color]: color,
         [`size--${this.presetSize}`]: this.presetSize,
         [`w-alert--${this.type}`]: this.type,
         'w-alert--has-icon': this.type || this.icon || this.dismiss,
@@ -109,15 +110,14 @@ export default {
         'w-alert--outline': this.outline,
         'w-alert--tile': this.tile,
         'w-alert--round': this.round,
-        'w-alert--no-border': this.noBorder || (this.plain && this.type),
         'w-alert--one-border': this.hasSingleBorder || this.iconOutside,
         'w-alert--border-left': (!this.noBorder && this.borderLeft) || this.iconOutside,
         'w-alert--border-right': !this.noBorder && this.borderRight,
         'w-alert--border-top': !this.noBorder && this.borderTop,
         'w-alert--border-bottom': !this.noBorder && this.borderBottom,
+        'w-alert--border': this.border && !this.hasSingleBorder,
         'w-alert--shadow': this.shadow,
-        'w-alert--dark': this.dark,
-        'w-alert--light': this.light
+        'w-alert--bold': this.bold
       }
     }
   },
@@ -136,19 +136,19 @@ export default {
   margin-top: 4 * $base-increment;
   margin-bottom: 4 * $base-increment;
   padding: 2 * $base-increment;
-  font-size: round(1.1 * $base-font-size);
-  font-weight: 700;
+  font-size: $base-font-size;
   border-radius: $border-radius;
-  border: 1px solid currentColor;
+  border: 0 solid currentColor;
 
   @include themeable;
 
+  &--bold {font-weight: 700;}
   &--has-icon {
     display: flex;
     align-items: center;
   }
 
-  &--outline {border-color: currentColor;}
+  &--border, &--outline {border-width: 1px;}
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
@@ -156,7 +156,7 @@ export default {
     padding-right: 3 * $base-increment;
   }
   &--shadow {box-shadow: $box-shadow;}
-  &--no-border, &--one-border, &--plain {border: transparent;}
+  &--one-border, &--plain {border: transparent;}
 
   // Before for the border, after for the background color.
   // ------------------------------------------------------
@@ -224,7 +224,7 @@ export default {
     margin-right: 2 * $base-increment;
     font-size: 1.3em;
   }
-  &--has-icon &__content {flex-grow: 1;align-self: flex-start;}
+  &--has-icon &__content {flex-grow: 1;}
   @-moz-document url-prefix() {
     &--has-icon &__content {margin-top: 0.18em;}
   }

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

@@ -1,17 +1,20 @@
 <template lang="pug">
-component.w-image-wrap(:is="wrapperTag" :class="wrapperClasses" :style="wrapperStyles")
+component.w-image(:is="wrapperTag" :class="wrapperClasses" :style="wrapperStyles")
   transition(:name="transition" appear)
-    component.w-image(
+    component.w-image__image(
       v-if="loaded"
-      :is="tag"
+      :is="normalized.tag"
       :class="imageClasses"
       :style="imageStyles"
-      :src="tag === 'img' ? imgSrc : null")
-  .w-image__loader(v-if="!noSpinner && loading")
+      :src="normalized.tag === 'img' ? computedImg.src : null")
+  span.w-image__loader(v-if="!noSpinner && loading")
     slot(v-if="$slots.loading" name="loading")
     w-progress(v-else circle indeterminate v-bind="spinnerColor ? { color: spinnerColor } : {}")
   component.w-image__content(v-if="$slots.default" :is="wrapperTag" :class="contentClass")
     slot
+  figcaption.w-image__caption.caption(v-if="$slots.caption" :class="captionClass")
+    slot(name="caption")
+  figcaption.w-image__caption.caption(v-else-if="caption" :class="captionClass" v-html="caption")
 </template>
 
 <script>
@@ -23,7 +26,7 @@ component.w-image-wrap(:is="wrapperTag" :class="wrapperClasses" :style="wrapperS
  * - adaptive size: given ratio + height 100% (use bg)
  * - adaptive & locked size: given width or height and using <img>
  *
- * @todo handle figure, captions, srcset, webp.
+ * @todo handle srcset.
  **/
 
 import { consoleWarn } from '../utils/console'
@@ -31,10 +34,12 @@ import { consoleWarn } from '../utils/console'
 export default {
   name: 'w-image',
   props: {
-    tag: { type: String, default: 'span' },
+    tag: { type: String, default: 'span' }, // span, div, figure, img.
     src: { type: String },
     width: { type: [Number, String] },
     height: { type: [Number, String] },
+    maxWidth: { type: [Number, String] },
+    maxHeight: { type: [Number, String] },
     ratio: { type: [Number, String] },
     lazy: { type: Boolean },
     absolute: { type: Boolean },
@@ -44,7 +49,9 @@ export default {
     spinnerColor: { type: String },
     fallback: { type: String },
     transition: { type: String, default: 'fade' },
-    contentClass: { type: [String, Array, Object] }
+    contentClass: { type: [String, Array, Object] },
+    caption: { type: String },
+    captionClass: { type: String }
   },
 
   emits: ['loading', 'loaded', 'error'],
@@ -53,49 +60,78 @@ export default {
     return {
       loading: false,
       loaded: false,
-      imgSrc: '',
-      imgWidth: this.width || 0,
-      imgHeight: this.height || 0,
-      imgComputedRatio: 0
+      // The computed image source, and real image dimensions.
+      computedImg: {
+        src: '',
+        width: 0,
+        height: 0,
+        ratio: 0
+      }
     }
   },
 
   computed: {
-    imgGivenRatio () {
-      return parseFloat(this.ratio)
+    // Normalized props.
+    normalized () {
+      return {
+        width: (!isNaN(this.width) ? `${this.width}px` : this.width) || null,
+        height: (!isNaN(this.height) ? `${this.height}px` : this.height) || null,
+        maxWidth: (!isNaN(this.maxWidth) ? `${this.maxWidth}px` : this.maxWidth) || null,
+        maxHeight: (!isNaN(this.maxHeight) ? `${this.maxHeight}px` : this.maxHeight) || null,
+        ratio: parseFloat(this.ratio) || undefined,
+        tag: this.tag === 'img' || this.tag === 'figure' || this.caption ? 'img' : 'span'
+      }
     },
 
     wrapperTag () {
+      if (this.caption || this.tag === 'figure') return 'figure'
       return ['span', 'div'].includes(this.tag) ? this.tag : 'span'
     },
 
     wrapperClasses () {
       return {
-        'w-image-wrap--absolute': this.absolute,
-        'w-image-wrap--fixed': this.fixed,
-        'w-image-wrap--has-ratio': this.imgGivenRatio
+        'w-image--absolute': this.absolute,
+        'w-image--fixed': this.fixed,
+        'w-image--has-ratio': this.normalized.ratio
       }
     },
 
     wrapperStyles () {
+      let width = this.normalized.width
+      const height = this.normalized.height
+      let maxWidth = this.normalized.maxWidth
+      let aspectRatio = this.normalized.ratio
+
+      if (aspectRatio && !width && !height) width = '100%'
+      else if (!width && !height) {
+        width = '100%'
+        maxWidth = this.normalized.maxWidth || `${this.computedImg.width}px`
+        aspectRatio = aspectRatio || (this.computedImg.width / this.computedImg.height)
+      }
+      else if ((width && !height) || (height && !width)) {
+        aspectRatio = aspectRatio || (this.computedImg.width / this.computedImg.height)
+      }
+
       return {
-        width: this.imgGivenRatio ? null : ((!isNaN(this.imgWidth) ? `${this.imgWidth}px` : this.imgWidth) || null),
-        height: this.imgGivenRatio || this.tag === 'img' ? null : ((!isNaN(this.imgHeight) ? `${this.imgHeight}px` : this.imgHeight) || null),
-        'padding-bottom': this.imgGivenRatio && `${this.imgGivenRatio * 100}%`
+        width,
+        height,
+        maxWidth,
+        maxHeight: this.normalized.maxHeight,
+        aspectRatio
       }
     },
 
     imageClasses () {
       return {
-        'w-image--loading': this.loading,
-        'w-image--loaded': this.loaded,
-        'w-image--contain': this.contain
+        'w-image__image--loading': this.loading,
+        'w-image__image--loaded': this.loaded,
+        'w-image__image--contain': this.contain
       }
     },
 
     imageStyles () {
       return {
-        'background-image': this.tag !== 'img' && this.loaded ? `url('${this.imgSrc}')` : null
+        'background-image': this.normalized.tag !== 'img' && this.loaded ? `url('${this.computedImg.src}')` : null
       }
     }
   },
@@ -112,16 +148,14 @@ export default {
       return new Promise(resolve => {
         const img = new Image()
         img.onload = e => {
-          if (!this.width && !this.height && !this.imgGivenRatio) {
-            this.imgWidth = e.target.width
-            this.imgHeight = e.target.height
-          }
-          this.imgComputedRatio = e.target.height / e.target.width
+          this.computedImg.width = e.target.width
+          this.computedImg.height = e.target.height
+          this.computedImg.ratio = e.target.height / e.target.width
 
           this.loading = false
           this.loaded = true
-          this.imgSrc = loadFallback ? this.fallback : this.src
-          this.$emit('loaded', this.imgSrc)
+          this.computedImg.src = loadFallback ? this.fallback : this.src
+          this.$emit('loaded', this.computedImg.src)
 
           return resolve(img)
         }
@@ -162,43 +196,28 @@ export default {
   watch: {
     src () {
       this.loadImage()
-    },
-    width (value) {
-      this.imgWidth = value
-    },
-    height (value) {
-      this.imgHeight = value
     }
   }
 }
 </script>
 
 <style lang="scss">
-.w-image-wrap {
+.w-image {
   position: relative;
   display: inline-flex;
+  flex-direction: column;
   flex-grow: 0;
   flex-shrink: 0;
-  width: 4em;
 
   &--has-ratio {width: 100%;}
-  &[class^="bdrs"], &[class*=" bdrs"] {overflow: hidden;}
+  &--has-ratio, &[class^="bdrs"], &[class*=" bdrs"] {overflow: hidden;}
 
   img {
     width: 100%;
-    height: auto;
+    height: 100%; // Allow stretching by design.
+    overflow: hidden; // Should be contained in the parent.
     position: static;
   }
-}
-
-.w-image {
-  background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); // 1x1 blank gif.
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: absolute;
-  inset: 0;
-
-  &--contain {background-size: contain;}
 
   &__loader, &__content {
     position: absolute;
@@ -208,5 +227,20 @@ export default {
     align-items: center;
     z-index: 1;
   }
+
+  &__image {
+    background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); // 1x1 blank gif.
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: absolute;
+    inset: 0;
+
+    &--contain {background-size: contain;}
+  }
+
+  &__caption {
+    padding-top: $base-increment;
+    text-align: right;
+  }
 }
 </style>

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

@@ -168,11 +168,11 @@
     // In all the sizes below, round(x / 2) * 2 to always have even numbers.
     // Different heights with a mix of odd and even numbers will misalign
     // when vertically centering (vertical-align or align-items center).
-    .size--xs {font-size: round(0.85 * $base-font-size);}
-    .size--sm {font-size: round(1 * $base-font-size);}
-    .size--md {font-size: round(1.1 * $base-font-size);}
-    .size--lg {font-size: round(1.4 * $base-font-size);}
-    .size--xl {font-size: round(1.65 * $base-font-size);}
+    .size--xs {font-size: round(0.8 * $base-font-size);}
+    .size--sm {font-size: round(0.9 * $base-font-size);}
+    .size--md {font-size: round(1 * $base-font-size);}
+    .size--lg {font-size: round(1.2 * $base-font-size);}
+    .size--xl {font-size: round(1.4 * $base-font-size);}
     // ----------------------------------------------
 
     // Grid system.

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

@@ -2,7 +2,6 @@
   .headline, .title1 {
     font-size: round(2.2 * $base-font-size);
     font-weight: 100;
-    letter-spacing: 1px;
   }
 
   .title2 {