@thinkpixellab-public/px-vue 3.0.5 → 3.0.7

package/components/PxContain.vue

@@ -1,7 +1,7 @@
 <!--
     Keeps a child element contained within boundaries.
 
-    <px-contain #default="{width, height, left: }" :aspect="16/9" :round="true" :px="true">
+    <px-contain #default="{width, height, left: }" :aspect="16/9" :round="true" :to-px="true">
         <div :style="{position: 'absolute', left: left top: top  width: width height: height}"  />
     </px-contain>
 
@@ -18,9 +18,7 @@
             :width="contain.width"
             :height="contain.height"
             :scale="contain.scale"
-        >
-            <!-- fallback -->
-        </slot>
+        ></slot>
     </div>
 </template>
 
@@ -46,6 +44,19 @@ export default {
         naturalWidth: { type: Number, default: null },
         naturalHeight: { type: Number, default: null },
 
+        // these are adjustments to the available area inside of the container rectangle; the
+        // difference between padding and border is that padding values will also affect the final
+        // top/left values but border does not (to visualize this, imagine that you use border if
+        // the content has a visible border around and the final values reflect that where padding
+        // is empty space so palcement gets shfited); specify as either a number or an arry of up to
+        // 4 numbers that follow the css box-model pattern
+        padding: { default: null },
+        border: { default: null },
+
+        // max limits fo width/height of the contain rectangle
+        maxWidth: { type: Number, default: null },
+        maxHeight: { type: Number, default: null },
+
         // the horizontal positioning when there is leftover space
         alignX: { default: 0.5 }, // number | 'start' | 'center' | 'end'
 
@@ -53,13 +64,16 @@ export default {
         alignY: { default: 0.5 }, // number | 'start' | 'center' | 'end'
 
         // whether slot values should be returned as strings with 'px'
-        px: { type: Boolean, default: true },
+        toPx: { type: Boolean, default: true },
 
         // whether slot values should be rounded to screen pixels
         round: { type: Boolean, default: true },
     },
     data() {
         return {
+            // use setContainer to use a container source other than this.$el
+            container: null,
+
             contain: {
                 current: false,
                 width: 0,
@@ -116,6 +130,9 @@ export default {
             // no width or height or aspect
             return null;
         },
+        containerValue() {
+            return this.container || this.$el;
+        },
     },
 
     watch: {
@@ -124,39 +141,127 @@ export default {
         },
     },
     methods: {
+        // Use a source for the outer container size other than this.$el. The container argument can
+        // be an element or any object that implements getBoundingClientRect; setting a custom
+        // container may also require a direct call to resize when the container size updates (since
+        // the default resize observer behavior only observes this.$el)
+        setContainer(container) {
+            this.container = container;
+            this.resize();
+        },
         resize() {
-            let outer = this.$el.getBoundingClientRect();
+            let p = this.toBoxModelObject(this.padding);
+            let b = this.toBoxModelObject(this.border);
+
+            let outer = this.containerValue.getBoundingClientRect();
             let inner = this.aspectRect || outer;
 
-            const c = contain(
-                inner,
-                outer,
-                this.alignToDecimal(this.alignX),
-                this.alignToDecimal(this.alignY)
-            );
+            outer = {
+                width: outer.width - (b.w + p.w),
+                height: outer.height - (b.h + p.h),
+            };
+
+            // max width/height
+
+            if (this.maxHeight && outer.height > this.maxHeight) {
+                outer.y = (outer.height - this.maxHeight) * this.alignToDecimal(this.alignY);
+                outer.height = this.maxHeight;
+            }
+
+            if (this.maxWidth && outer.width > this.maxWidth) {
+                outer.x = (outer.width - this.maxWidth) * this.alignToDecimal(this.alignX);
+                outer.width = this.maxWidth;
+            }
+
+            // get contain
+
+            let r;
 
-            this.contain = {
+            if (this.aspect) {
+                r = contain(
+                    inner,
+                    outer,
+                    this.alignToDecimal(this.alignX),
+                    this.alignToDecimal(this.alignY)
+                );
+            } else {
+                r = {
+                    x: 0,
+                    y: 0,
+                    width: outer.width,
+                    height: outer.height,
+                };
+            }
+
+            let c = {
                 current: true,
-                width: this.prepValue(c.width),
-                height: this.prepValue(c.height),
-                top: this.prepValue(c.y),
-                right: this.prepValue(c.width - c.x),
-                bottom: this.prepValue((c.height = c.y)),
-                left: this.prepValue(c.x),
-                scale: this.naturalWidth || this.naturalHeight ? c.scale : 1,
+                width: r.width + b.w,
+                height: r.height + b.h,
+                top: r.y + p.top,
+                left: r.x + p.left,
+                right: r.width - (r.x + b.w),
+                bottom: r.height - (r.y + b.h),
+                scale: this.naturalWidth || this.naturalHeight ? r.scale : 1,
             };
+
+            this.$emit('update', c);
+
+            c.width = this.prepValue(c.width);
+            c.height = this.prepValue(c.height);
+            c.left = this.prepValue(c.left);
+            c.top = this.prepValue(c.top);
+            c.right = this.prepValue(c.right);
+            c.bottom = this.prepValue(c.bottom);
+
+            this.contain = c;
         },
 
         prepValue(n) {
             if (this.round && typeof window != 'undefined') {
                 n = Math.round(n * window.devicePixelRatio) / window.devicePixelRatio;
             }
-            if (this.px) {
+            if (this.toPx) {
                 n = this.cssPx(n);
             }
             return n;
         },
 
+        toBoxModelObject(val) {
+            const arr = this.toBoxModelArray(val);
+            return {
+                top: arr[0],
+                right: arr[1],
+                bottom: arr[2],
+                left: arr[3],
+                w: arr[1] + arr[3],
+                h: arr[0] + arr[2],
+            };
+        },
+
+        toBoxModelArray(val) {
+            if (!val) {
+                return [0, 0, 0, 0];
+            }
+
+            if (Array.isArray(val)) {
+                if (val.length == 0) {
+                    return [0, 0, 0, 0];
+                }
+                if (val.length == 1) {
+                    return [val[0], val[0], val[0], val[0]];
+                }
+                if (val.length == 2) {
+                    return [val[0], val[1], val[0], val[1]];
+                }
+                if (val.length == 3) {
+                    return [val[0], val[1], val[2], val[1]];
+                }
+                return [val[0], val[1], val[2], val[3]];
+            }
+
+            return [val, val, val, val];
+        },
+
         alignToDecimal(align) {
             if (typeof align == 'number') {
                 return align;

package/components/PxFloat.vue

@@ -22,10 +22,10 @@
             :name="calcTransitionName"
             @before-enter="transitionVisible = true"
             @after-leave="transitionVisible = false"
-            :style="{ zIndex: zStart + currentLayerIndex }"
         >
             <div
-                :class="bem({ ...variantsMap, absolute: strategy == 'absolute' })"
+                :class="[rootClass, bem({ ...variantsMap, absolute: strategy == 'absolute' })]"
+                :style="{ ...(rootStyle || {}), zIndex: zStart + currentLayerIndex }"
                 v-show="visibleValueNext"
             >
                 <!-- overlay element -->
@@ -34,6 +34,7 @@
                         :class="[bem('overlay'), overlayClass]"
                         @click="overlayClick"
                         v-bind="overlayAttributes"
+                        ref="overlay"
                         :style="{
                             pointerEvents: visibleValue ? null : 'none',
                             userSelect: visibleValue ? null : 'none',
@@ -113,11 +114,17 @@ export default {
         // to ensure that the last opened from the same starting z will be on top of each other)
         zStart: { type: Number, default: 999999 },
 
+        // class set on the root element (equivalent of setting class if not using a portal)
+        rootClass: { type: String, default: null },
+
+        // style set on the root element (equivalent of setting style if not using a portal)
+        rootStyle: { default: null },
+
         // An additional class set on the popup element
         popupClass: { type: String, default: '' },
 
         // Style object that gets merged onto the popup
-        popupStyle: { type: Object, default: null },
+        popupStyle: { default: null },
 
         // Whether to render an overlay element
         overlayEnabled: { type: Boolean, default: true },
@@ -222,6 +229,13 @@ export default {
             // emit update when visibleValue changes (enables .sync on parent)
             this.$emit('update:visible', nv);
 
+            if (nv) {
+                this.$emit('beforeshow');
+            }
+            if (!nv) {
+                this.$emit('beforehide');
+            }
+
             if (this.isServer) {
                 return;
             }
@@ -273,7 +287,6 @@ export default {
                     }
                 } else {
                     if (this.cleanup) {
-                        console.log('cleanup');
                         this.cleanup();
                         this.cleanup = null;
                     }
@@ -312,6 +325,15 @@ export default {
                         globalClearLayerIndex = 0;
                     }
                 }
+
+                // show and hide events (also see beforeshow/beforehide in visibleValue watcher)
+
+                if (nv) {
+                    this.$emit('show');
+                }
+                if (!nv) {
+                    this.$emit('hide');
+                }
             });
         },
     },
@@ -481,6 +503,15 @@ export default {
 
             return reference;
         },
+
+        // returns the default overlay element (will be null if the overlay slot has been overriden)
+        getOverlayElement() {
+            return this.$refs.overlay;
+        },
+
+        getPopupElement() {
+            return this.$refs.popup;
+        },
     },
 };
 </script>

package/dev/demos/Demo-PxContain.vue

@@ -22,7 +22,7 @@
             </px-test>
 
             <px-test name="Width / Height" testId="pxcontain-wh" :size="{ h: 600 }">
-                <px-contain :naturalWidth="1600" :naturalHeight="900" :px="true">
+                <px-contain :naturalWidth="1600" :naturalHeight="900">
                     <template #default="{ top, left, width, height }">
                         <div
                             :style="{
@@ -39,7 +39,7 @@
             </px-test>
 
             <px-test name="Scale" testId="pxcontain-scale" :size="{ h: 600 }">
-                <px-contain :naturalWidth="1600" :naturalHeight="900" :px="true">
+                <px-contain :naturalWidth="1600" :naturalHeight="900">
                     <template #default="{ top, left, scale }">
                         <div
                             :style="{

package/package.json

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

package/utils/fit.js

@@ -50,14 +50,14 @@ export function contain(inner, outer, posX = 0.5, posY = 0.5) {
     if (aspectInner > aspectOuter) {
         width = outer.width;
         height = outer.width / aspectInner;
-        x = 0;
+        x = outer.x;
         y = outer.height * posY - height * posY;
         scale = height / inner.height;
     } else {
         width = outer.height * aspectInner;
         height = outer.height;
         x = outer.width * posX - width * posX;
-        y = 0;
+        y = outer.y;
         scale = width / inner.width;
     }