@thinkpixellab-public/px-vue 3.0.6 → 3.0.8

package/components/PxBaseMobileAware.vue

@@ -0,0 +1,72 @@
+<!--
+    Use for global mobile awareness in javascript. This doesn't actually handle mobile detection
+    but provides a consistent interface for communicating between a single component that does
+    the detection and other components that subscribe to an eventbus and update a property called
+    isMobile.
+
+    Sample usage using a css variable for detecting mobile (this keeps css and js in sync):
+
+    ### MyLayout.vue (or other global component)
+
+        // add PxBaseMobileAware as a mixin
+        import PxBaseMobileAware from '@thinkpixellab-public/px-vue/components/PxBaseMobileAware.vue';
+        mixins: [PxBaseMobileAware],
+
+        // add a resize handler and call setGlobalIsMobile
+        resize() {
+            if (this.$el) {
+                const cssMobile = getComputedStyle(this.$el).getPropertyValue('--is-mobile');
+                this.setGlobalIsMobile(cssMobile.toLowerCase().trim() == 'true');
+            }
+        },
+
+        // add a css variable that changes with the viewport
+
+        .my-layout {
+            --is-mobile: false;
+            @include media-until-mobile() {
+                --is-mobile: true;
+            }
+        }
+
+    ### MyComponent.vue
+
+        // use PxBaseMobileAware as a mixin
+        import PxBaseMobileAware from '@thinkpixellab-public/px-vue/components/PxBaseMobileAware.vue';
+        mixins: [PxBaseMobileAware]
+
+        // use the isMobile property as needed in a template
+        <div> This is mobile: {{isMobile ? 'yup' : 'nope' }} </div>
+
+        // or in code
+        watch: {
+            isMobile(nv) {
+                // do something when isMobile changes
+            }
+        }
+
+
+-->
+
+<script>
+export default {
+    data() {
+        return { isMobile: null };
+    },
+    mounted() {
+        if (this.$globalOn) {
+            this.$globalOn('mobile-changed', isMobile => {
+                this.isMobile = isMobile;
+            });
+        }
+    },
+    methods: {
+        setGlobalIsMobile(isMobile) {
+            if (this.$globalEmit) {
+                this.$globalEmit('mobile-changed', isMobile);
+                this.isMobile = isMobile;
+            }
+        },
+    },
+};
+</script>

package/components/PxContain.vue

@@ -53,6 +53,10 @@ export default {
         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'
 
@@ -67,6 +71,9 @@ export default {
     },
     data() {
         return {
+            // use setContainer to use a container source other than this.$el
+            container: null,
+
             contain: {
                 current: false,
                 width: 0,
@@ -123,6 +130,9 @@ export default {
             // no width or height or aspect
             return null;
         },
+        containerValue() {
+            return this.container || this.$el;
+        },
     },
 
     watch: {
@@ -131,11 +141,19 @@ 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 p = this.toBoxModelObject(this.padding);
-
             let b = this.toBoxModelObject(this.border);
-            let outer = this.$el.getBoundingClientRect();
+
+            let outer = this.containerValue.getBoundingClientRect();
             let inner = this.aspectRect || outer;
 
             outer = {
@@ -143,6 +161,20 @@ export default {
                 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;
 
             if (this.aspect) {

package/components/PxFloat.vue

@@ -24,8 +24,8 @@
             @after-leave="transitionVisible = false"
         >
             <div
-                :class="bem({ ...variantsMap, absolute: strategy == 'absolute' })"
-                :style="{ zIndex: zStart + currentLayerIndex }"
+                :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;
             }
@@ -311,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');
+                }
             });
         },
     },
@@ -480,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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.6",
+    "version": "3.0.8",
     "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;
     }