@thinkpixellab-public/px-vue 3.0.5 → 3.0.6

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,15 @@ 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 },
+
         // the horizontal positioning when there is leftover space
         alignX: { default: 0.5 }, // number | 'start' | 'center' | 'end'
 
@@ -53,7 +60,7 @@ 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 },
@@ -125,38 +132,104 @@ export default {
     },
     methods: {
         resize() {
+            let p = this.toBoxModelObject(this.padding);
+
+            let b = this.toBoxModelObject(this.border);
             let outer = this.$el.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),
+            };
+
+            let r;
+
+            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,
+                };
+            }
 
-            this.contain = {
+            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' })"
+                :style="{ zIndex: zStart + currentLayerIndex }"
                 v-show="visibleValueNext"
             >
                 <!-- overlay element -->
@@ -273,7 +273,6 @@ export default {
                     }
                 } else {
                     if (this.cleanup) {
-                        console.log('cleanup');
                         this.cleanup();
                         this.cleanup = null;
                     }

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.6",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",