wave-ui 3.23.1 → 3.25.0

package/dist/wave-ui.es.js

@@ -18,6 +18,8 @@ const st = ae({
     // Xl only needs a greater value than lg but starts from lg and goes to infinity.
   },
   css: {
+    prepend: !1,
+    // 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: !0,
@@ -534,6 +536,10 @@ const pt = (e, t) => {
     "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}",
@@ -549,6 +555,8 @@ const pt = (e, t) => {
     "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}",
@@ -592,8 +600,14 @@ const pt = (e, t) => {
   if (pe = { keys: Object.keys(t.breakpoints), values: Object.values(t.breakpoints) }, !document.getElementById("wave-ui-styles")) {
     const i = document.createElement("style");
     i.id = "wave-ui-styles", i.innerHTML = yt(t);
-    const s = document.head.querySelectorAll('style,link[rel="stylesheet"]')[0];
-    s ? s.before(i) : document.head.appendChild(i);
+    const s = document.head.querySelectorAll('style,link[rel="stylesheet"]');
+    if (t.css.prependCss) {
+      const n = s[0];
+      n ? n.before(i) : document.head.prepend(i);
+    } else {
+      const n = s[s.length - 1];
+      n ? n.after(i) : document.head.appendChild(i);
+    }
   }
   Ve(e), window.addEventListener("resize", () => Ve(e));
 }, bt = (e, t, i) => {
@@ -3314,7 +3328,9 @@ function pl(e, t, i, s, n, l) {
   const a = V("w-progress");
   return o(), b(R(l.wrapperTag), {
     class: f(["w-image", l.wrapperClasses]),
-    style: x(l.wrapperStyles)
+    ref: "imageWrap",
+    style: x(l.wrapperStyles),
+    onError: t[0] || (t[0] = (r) => n.error = !0)
   }, {
     default: m(() => [
       L(P, {
@@ -3359,7 +3375,7 @@ function pl(e, t, i, s, n, l) {
       }, null, 10, cl)) : p("", !0)
     ]),
     _: 3
-  }, 8, ["class", "style"]);
+  }, 40, ["class", "style"]);
 }
 const fl = {
   name: "w-image",
@@ -3389,6 +3405,7 @@ const fl = {
     return {
       loading: !1,
       loaded: !1,
+      error: !1,
       // The computed image source, and real image dimensions.
       computedImg: {
         src: "",
@@ -3417,7 +3434,8 @@ const fl = {
       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
       };
     },
     wrapperStyles() {
@@ -3451,7 +3469,7 @@ const fl = {
         return this.loading = !0, this.loaded = !1, this.$emit("loading", e ? this.fallback : this.src), new Promise((t) => {
           const i = new Image();
           i.onload = (s) => (this.computedImg.width = s.target.width, this.computedImg.height = s.target.height, this.computedImg.ratio = s.target.height / s.target.width, this.loading = !1, this.loaded = !0, this.computedImg.src = e ? this.fallback : this.src, this.$emit("loaded", this.computedImg.src), t(i)), i.onerror = (s) => {
-            this.$emit("error", s), this.fallback && !e ? (this.loading = !1, this.loadImage(!0)) : (this.loading = !1, this.loaded = !1);
+            this.error = !0, this.$emit("error", s, this.$refs.imageWrap), this.fallback && !e ? (this.loading = !1, this.loadImage(!0)) : (this.loading = !1, this.loaded = !1);
           }, i.src = e ? this.fallback : this.src;
         });
     }