@thinkpixellab-public/px-vue 3.0.71 → 3.0.73

package/components/PxArrowScroller.vue

@@ -17,14 +17,14 @@ ar
 <template>
     <div :class="bem()">
         <button
-            v-if="!disabled"
+            v-if="!disabled && !arrowsHidden"
             :class="[bem('button', { start: true, visible: arrowStartVisible }), buttonClass]"
             @click="scrollPages(-1)"
             aria-label="Scroll to previous"
             :disabled="!arrowStartVisible"
         >
             <slot name="button" :location="'start'">
-                <span :class="bem('arrow-icon')">
+                <span :class="[bem('arrow-icon'), iconClass]">
                     <px-icon :src="arrowStartSrc" size="0.8em" />
                 </span>
             </slot>
@@ -35,14 +35,14 @@ ar
         </div>
 
         <button
-            v-if="!disabled"
+            v-if="!disabled && !arrowsHidden"
             :class="[bem('button', { end: true, visible: arrowEndVisible }), buttonClass]"
             @click="scrollPages(1)"
             aria-label="Scroll to next"
             :disabled="!arrowEndVisible"
         >
             <slot name="button" :location="'end'">
-                <span :class="bem('arrow-icon')">
+                <span :class="[bem('arrow-icon'), iconClass]">
                     <px-icon :src="arrowEndSrc" size="0.8em" />
                 </span>
             </slot>
@@ -65,7 +65,9 @@ export default {
         arrowStartSrc: { type: String, default: require('../assets/icons/nav-prev.svg') },
         arrowEndSrc: { type: String, default: require('../assets/icons/nav-next.svg') },
         buttonClass: { type: String, default: null },
+        iconClass: { type: String, default: null },
         disabled: { type: Boolean, default: false },
+        arrowsHidden: { type: Boolean, default: false },
     },
     data() {
         return {
@@ -112,6 +114,16 @@ export default {
                 });
             }
         },
+
+        scrollToElement(el) {
+            if (this.$refs.scroller) {
+                const left = el.offsetLeft - this.$refs.scroller.offsetWidth / 2;
+                this.$refs.scroller.scrollTo({
+                    left: left,
+                    behavior: 'smooth',
+                });
+            }
+        },
     },
 };
 </script>
@@ -122,10 +134,13 @@ export default {
 .px-arrow-scroller {
     // prettier-ignore
     @include grid-art((
-        'auto       | 1fr      | auto |',
+        'auto        | 1fr      | auto |',
         'arrow-start | scroller | arrow-end | auto'
     ));
 
+    align-items: center;
+    align-content: center;
+
     &__button {
         position: relative;
         align-self: center;
@@ -150,13 +165,19 @@ export default {
         .px-arrow-scroller__arrow-icon {
             @include button-icon(
                 (
-                    padding: 0.1em 1em 0.25em,
+                    padding: 0.1em 1em,
                     cursor: pointer,
-                    display: block,
-                    alignItems: center,
-                    min-height: null,
+                    display: flex,
+                    align-items: center,
+                    justify-content: center,
                 )
             );
+
+            @include media-until-mobile {
+                min-width: 1em;
+                padding-left: 0;
+                padding-right: 0;
+            }
         }
     }
 

package/components/PxBaseMobileAware.vue

@@ -1,78 +1,20 @@
 <!--
-    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
-            }
-        }
-
-
+    Must be used in conjuction with PxBaseMobileProvide. See notes in that file for details.
 -->
 
 <script>
-import utils from '../utils/utils.js';
-
 export default {
-    data() {
-        return { isMobile: null };
-    },
-    mounted() {
-        if (utils.getQueryBool('alwaysMobile')) {
-            this.isMobile = true;
-            return;
-        }
-
-        if (this.$globalOn) {
-            this.$globalOn('mobile-changed', isMobile => {
-                this.isMobile = isMobile;
-            });
-        }
+    inject: {
+        mediaQuery: {
+            default: { isMobile: null, currentBreakpoint: null },
+        },
     },
-    methods: {
-        setGlobalIsMobile(isMobile) {
-            if (this.$globalEmit) {
-                this.$globalEmit('mobile-changed', isMobile);
-                this.isMobile = isMobile;
-            }
+    computed: {
+        isMobile() {
+            return this.mediaQuery.isMobile;
+        },
+        currentBreakpoint() {
+            return this.mediaQuery.currentBreakpoint;
         },
     },
 };

package/components/PxBaseMobileProvide.vue

@@ -0,0 +1,50 @@
+<!--
+
+    Use for global mobile / media query awareness in javascript. Provides values for isMobile and
+    currentBreakpoint that can be used in any component.
+
+    Use this in parent component or layout to provide the values to child components. Use
+    PxBaseMobileAware in child components to inject the values.
+
+    In many cases you can just add this as a mixin but if that component also has a resize method
+    then be sure to call this.updateMediaQuery() from the resize method.
+
+-->
+
+<script>
+import PxBaseResize from './PxBaseResize.vue';
+export default {
+    provide() {
+        return {
+            mediaQuery: this.mediaQuery,
+        };
+    },
+    mixins: [PxBaseResize],
+    data() {
+        return { mediaQuery: { isMobile: null, currentBreakpoint: null } };
+    },
+
+    methods: {
+        updateMediaQuery() {
+            this.mediaQuery.isMobile =
+                getComputedStyle(document.documentElement).getPropertyValue('--is-mobile').trim() ==
+                'true';
+
+            this.mediaQuery.currentBreakpoint = getComputedStyle(document.documentElement)
+                .getPropertyValue('--breakpoint')
+                .trim();
+        },
+        resize() {
+            this.updateMediaQuery();
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '@/px-styles.config.scss' as *;
+@use '@thinkpixellab/px-edge-shared/styles/px-styles-fluent.scss' as fluent;
+@include fluent.fluent() {
+    @include media-breakpoint-vars;
+}
+</style>

package/package.json

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