wave-ui 3.24.0 → 3.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.24.0",
+  "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/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)