wave-ui 3.14.3 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.14.3",
+  "version": "3.15.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",
@@ -42,53 +42,53 @@
     "vue framework",
     "ui"
   ],
+  "scripts": {
+    "dev": "vite",
+    "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",
+    "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"
+  },
   "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.9.1",
     "@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",
+    "@vue/compiler-sfc": "3.4.38",
+    "autoprefixer": "^10.4.20",
+    "axios": "^1.7.7",
+    "eslint": "^9.9.1",
     "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.44",
     "pug": "^3.0.3",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.77.6",
-    "simple-syntax-highlighter": "^3.0.5",
+    "sass": "^1.77.8",
+    "simple-syntax-highlighter": "^3.0.8",
     "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.2",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.30",
-    "vue-router": "^4.4.0",
+    "vue": "^3.4.38",
+    "vue-router": "^4.4.3",
     "vueperslides": "^3.5.1",
     "vuex": "^4.1.0"
   },
   "peerDependencies": {
     "vue": "^3.2.0"
-  },
-  "scripts": {
-    "dev": "vite",
-    "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/",
-    "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-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>