@thinkpixellab-public/px-vue 3.0.26 → 3.0.28

package/components/PxCardGrid.vue

@@ -230,7 +230,7 @@ export default {
 
             return {
                 // prettier-ignore
-                gridTemplateColumns: `repeat(${colCount}, 1fr)`,
+                gridTemplateColumns: `repeat(${colCount}, minmax(0, ${1 / colCount}fr))`,
                 maxWidth: this.cssPx(maxGridWidth),
                 '--gap': this.cssPx(this.gap),
                 '--aspect': defAspect,
@@ -487,8 +487,10 @@ export default {
         justify-content: stretch;
         position: relative;
         flex: 1;
+        grid-template-columns: 100%;
+        grid-template-rows: auto;
         > * {
-            @include abs();
+            width: 100%;
         }
     }
 

package/components/PxFloat.vue

@@ -66,7 +66,7 @@
 import PxBaseVariants from './PxBaseVariants.vue';
 import PxPortal from './PxPortal.vue';
 
-import { computePosition, autoUpdate, flip, shift, offset } from '@floating-ui/dom';
+import { computePosition, autoUpdate, flip, shift, offset, size } from '@floating-ui/dom';
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
 
 const FOCUS_ELEMENTS = [
@@ -171,6 +171,10 @@ export default {
         // like flip but for the start/end direction
         shift: { default: true },
 
+        // uses the size middleware to keep the float on screen, resizing when necessary
+        sizeToView: { default: false },
+        sizeToViewPadding: { type: Number, default: 10 },
+
         // NOT IMPLEMENTED
         // hiddenClass: { type: String, default: null },
 
@@ -461,6 +465,18 @@ export default {
                 middleware.push(flip(this.flip));
             }
 
+            let maxHeight = null;
+            if (this.sizeToView) {
+                let padding = this.sizeToViewPadding || 0;
+                middleware.push(
+                    size({
+                        apply({ availableHeight }) {
+                            maxHeight = availableHeight - padding;
+                        },
+                    })
+                );
+            }
+
             if (this.placement && this.$refs.popup && reference) {
                 computePosition(reference, this.$refs.popup, {
                     placement: this.placement,
@@ -470,11 +486,13 @@ export default {
                     if (this.useTranslate) {
                         this.positionCss = {
                             transform: `translate(${this.cssPx(x)},${this.cssPx(y)})`,
+                            maxHeight: this.cssPx(maxHeight),
                         };
                     } else {
                         this.positionCss = {
                             left: this.cssPx(x),
                             top: this.cssPx(y),
+                            maxHeight: this.cssPx(maxHeight),
                         };
                     }
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.26",
+    "version": "3.0.28",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",

package/plugins/filters/striphtml.js

@@ -1,8 +1,15 @@
 export default val => {
     if (!process.server) {
-        var div = document.createElement('div');
+        val = val.replace(/<\/p>/g, '</p> ');
+        val = val.replace(/<\/li>/g, '</li> ');
+        val = val.replace(/<\/div>/g, '</div> ');
+
+        let div = document.createElement('div');
         div.innerHTML = val;
-        var text = div.textContent || div.innerText || '';
+
+        let text = div.innerText || '';
+        text = text.replace(/(\n)+/g, ' ');
+
         return text;
     } else {
         return '';