wave-ui 3.23.1 → 3.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.23.1",
+  "version": "3.25.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",

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

@@ -1,5 +1,10 @@
 <template lang="pug">
-component.w-image(:is="wrapperTag" :class="wrapperClasses" :style="wrapperStyles")
+component.w-image(
+  :is="wrapperTag"
+  ref="imageWrap"
+  :class="wrapperClasses"
+  :style="wrapperStyles"
+  @error="error = true")
   transition(:name="transition" appear)
     component.w-image__image(
       v-if="loaded"
@@ -60,6 +65,7 @@ export default {
     return {
       loading: false,
       loaded: false,
+      error: false,
       // The computed image source, and real image dimensions.
       computedImg: {
         src: '',
@@ -92,7 +98,8 @@ export default {
       return {
         'w-image--absolute': this.absolute,
         'w-image--fixed': this.fixed,
-        'w-image--has-ratio': this.normalized.ratio
+        'w-image--has-ratio': this.normalized.ratio,
+        'w-image--error': this.error
       }
     },
 
@@ -160,7 +167,8 @@ export default {
           return resolve(img)
         }
         img.onerror = error => {
-          this.$emit('error', error)
+          this.error = true
+          this.$emit('error', error, this.$refs.imageWrap)
           // If a fallback is provided & not already trying to load it, load the fallback src.
           if (this.fallback && !loadFallback) {
             this.loading = false

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

@@ -59,6 +59,11 @@
     .ovv {overflow: visible;}
     .ova {overflow: auto;}
 
+    .por {position: relative;}
+    .poa {position: absolute;}
+    .pof {position: fixed;}
+    .pos {position: sticky;}
+
     .op05 {opacity: 0.05;}
     @for $i from 0 through 9 {
       .op#{$i} {opacity: $i * 0.1;}

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

@@ -10,6 +10,7 @@ const config = reactive({
     xl: 9999 // Xl only needs a greater value than lg but starts from lg and goes to infinity.
   },
   css: {
+    prepend: false, // Prepend the CSS to the head instead of appending it.
     // Generate shades for custom colors and status colors.
     // Note: the color palette shades are always generated separately from SCSS.
     colorShades: true,

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

@@ -156,6 +156,10 @@ const genBreakpointLayoutClasses = breakpoints => {
     'd-iflex{display:inline-flex}',
     'd-block{display:block}',
     'd-iblock{display:inline-block}',
+    'por{position:relative}',
+    'poa{position:absolute}',
+    'pof{position:fixed}',
+    'pos{position:sticky}',
     'text-left{text-align:left}',
     'text-center{text-align:center}',
     'text-right{text-align:right}',
@@ -171,6 +175,8 @@ const genBreakpointLayoutClasses = breakpoints => {
     'no-wrap{flex-wrap: nowrap}',
     'fill-width{width:100%}',
     'fill-height{height:100%}',
+    'h-auto{height:auto}',
+    'h-screen{height:100vh}',
     'basis-zero{flex-basis:0}',
     'align-start{align-items:flex-start}',
     'align-center{align-items:center}',
@@ -265,9 +271,18 @@ export const injectCSSInDOM = $waveui => {
     css.id = 'wave-ui-styles'
     css.innerHTML = doDynamicCSS(config)
 
-    const firstStyle = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0]
-    if (firstStyle) firstStyle.before(css)
-    else document.head.appendChild(css)
+    // Prepend or append the CSS to the head based on the config.css.prependCss option.
+    const stylesheets = document.head.querySelectorAll('style,link[rel="stylesheet"]')
+    if (config.css.prependCss) {
+      const firstStyle = stylesheets[0]
+      if (firstStyle) firstStyle.before(css)
+      else document.head.prepend(css)
+    }
+    else {
+      const lastStyle = stylesheets[stylesheets.length - 1]
+      if (lastStyle) lastStyle.after(css)
+      else document.head.appendChild(css)
+    }
   }
 
   getBreakpoint($waveui)