@thinkpixellab-public/px-vue 3.0.76 → 3.0.77

package/components/PxFloat.vue

@@ -171,6 +171,15 @@ export default {
         // like flip but for the start/end direction
         shift: { default: true },
 
+        /**
+         * When true, the popup will be sized to the reference elemement, allowed values are:
+         *  - "width" - size the width to the width of the reference element
+         *  - "minWidth" - size the minWidth to the width of the reference element
+         *  - "height" - (not implemented) size the height to the height of the reference element
+         *  - "minHeight" - (not implemented) size the height to the height of the reference element
+         */
+        sizeToReference: { type: String, default: null },
+
         // uses the size middleware to keep the float on screen, resizing when necessary
         sizeToView: { default: false },
         sizeToViewPadding: { type: Number, default: 10 },
@@ -489,6 +498,21 @@ export default {
                 );
             }
 
+            if (this.sizeToReference) {
+                const elementProp = this.sizeToReference;
+                const referenceProp = 'width';
+
+                middleware.push(
+                    size({
+                        apply({ rects, elements }) {
+                            const assignValue = {};
+                            assignValue[elementProp] = `${rects.reference[referenceProp]}px`;
+                            Object.assign(elements.floating.style, assignValue);
+                        },
+                    })
+                );
+            }
+
             if (this.placement && this.$refs.popup && reference) {
                 computePosition(reference, this.$refs.popup, {
                     placement: this.placement,

package/package.json

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

package/utils/textWidth.js

@@ -36,3 +36,4 @@ const getFontFromElement = element => {
 };
 
 export default textWidth;
+export { getFontFromElement };