@thinkpixellab-public/px-vue 3.0.7 → 3.0.9

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/PxPortal.vue

@@ -27,7 +27,7 @@ export default {
         disabled: {
             immediate: true,
             handler(disabled) {
-                if (!process.server) {
+                if (isBrowser) {
                     if (disabled) {
                         this.unmount();
                     } else {
@@ -126,12 +126,12 @@ export default {
         },
     },
     render(h) {
-        if (!isBrowser) return;
         if (this.disabled) {
             const nodes = this.$scopedSlots && this.$scopedSlots.default();
             if (!nodes) return h();
             return nodes.length < 2 && !nodes[0].text ? nodes : h(this.tag, nodes);
         }
+        if (!isBrowser) return;
         return h();
     },
 };

package/package.json

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