@thinkpixellab-public/px-vue 3.0.70 → 3.0.72

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,20 @@ export default {
                 });
             }
         },
+
+        scrollToElement(el) {
+            if (this.$refs.scroller) {
+                console.log(`el.offsetLeft: ${el.offsetLeft}`);
+
+                //const left = el.offsetLeft - this.$refs.scroller.offsetWidth;
+                const left = el.offsetLeft - this.$refs.scroller.offsetWidth / 2;
+
+                this.$refs.scroller.scrollTo({
+                    left: left,
+                    behavior: 'smooth',
+                });
+            }
+        },
     },
 };
 </script>
@@ -122,10 +138,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 +169,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/PxBalancedText.vue

@@ -111,10 +111,16 @@ export default {
                 this.resize();
             });
         },
+        html() {
+            this.balance();
+        },
     },
 
     methods: {
         resize() {
+            this.balance();
+        },
+        balance() {
             if (isServer()) {
                 return;
             }
@@ -126,11 +132,13 @@ export default {
 
             if (this.enabled) {
                 try {
+                    this.$emit('start');
                     this.balanceFailed = false;
                     if (this.$refs.text && this.$refs.text.offsetWidth > 0) {
                         balanceText(this.$refs.text);
                     }
                     this.balanced = true;
+                    this.$emit('complete');
                 } catch (error) {
                     console.error('balanceText failed');
                     console.error(error);

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/components/PxFlip.vue

@@ -14,60 +14,77 @@
 <template>
     <div :class="bem()">
         <!-- in the component -->
-        <slot name="default" :state="currentStateValue">
+        <slot name="default" :state="currentValue">
             <!-- fallback -->
         </slot>
     </div>
 </template>
 
 <script>
-// import { mapState } from 'vuex';
-// import Component from '~/components/Component.vue';
 import { gsap } from 'gsap';
 import { Flip } from 'gsap/Flip';
 
 export default {
     name: 'px-flip',
-    // components: { Component },
-    // mixins: [ Mixin ],
     props: {
         states: { type: Array, default: null },
         current: { type: String, default: null },
+        autoSelectFirstState: { type: Boolean, default: true },
         otherProps: { type: String, default: 'opacity,color,backgroundColor' },
         selector: { type: String, default: '[data-flip]' },
         targets: { default: null },
+        duration: { type: Number, default: 0.5 },
+        ease: { type: String, default: 'circ.out' },
+        absolute: { type: Boolean, default: false },
     },
     data() {
-        return { currentStateValue: this.current };
+        return { currentValue: this.current };
     },
-    // computed: {},
     watch: {
+        currentValue(nv) {
+            this.$emit('update:current', nv);
+        },
+
         async current(nv) {
             const targetElements = this.targets || this.$el.querySelectorAll(this.selector);
 
-            console.log(targetElements);
-
             // save initial state
             const state = Flip.getState(targetElements, { props: this.otherProps, absolute: true });
 
             // make state changes
-            this.currentStateValue = nv;
+            this.currentValue = nv;
 
             await this.$nextTick();
             // animate from the old state to the new one
             // animate from the previous state to the current one:
 
             Flip.from(state, {
-                duration: 1,
-                ease: 'power1.inOut',
-                absolute: true,
+                duration: this.duration,
+                ease: this.ease,
+                absolute: this.absolute,
             });
         },
     },
     mounted() {
         gsap.registerPlugin(Flip);
+
+        if (!this.currentValue && this.autoSelectFirstState && this.states.length) {
+            this.currentValue = this.states[0];
+        }
+    },
+    methods: {
+        nextState() {
+            if (this.states) {
+                const index = this.states.indexOf(this.currentValue);
+                if (index >= 0) {
+                    this.currentValue = this.states[(index + 1) % this.states.length];
+                }
+            }
+        },
+        toggle() {
+            this.nextState();
+        },
     },
-    // methods: {},
 };
 </script>
 

package/dev/demos/Demo-PxFlip.vue

@@ -1,18 +1,19 @@
+'one | two | 50%'
 <!--
     Describe this component...
 -->
 <template>
     <div :class="bem()">
-        <PxFlip :states="['open', 'close']" :current="currentState">
+        <PxFlip ref="flip" :states="['one', 'two']" :current="currentState">
             <template #default="{ state }">
                 {{ state }}
                 <br />
                 <br />
-                <span :class="bem('container', { state })">
-                    <span data-flip />
-                    <span data-flip />
-                    <span data-flip />
-                </span>
+                <div :class="bem('container', { state })">
+                    <div :class="bem('red')" data-flip />
+                    <div :class="bem('gold')" data-flip />
+                    <div :class="bem('blue')" data-flip />
+                </div>
             </template>
         </PxFlip>
         <button @click="toggleState">Toggle</button>
@@ -34,7 +35,7 @@ export default {
     // props: { a: { type: Boolean, default: false } },
     data() {
         return {
-            currentState: 'open',
+            currentState: 'one',
         };
     },
     // computed: {},
@@ -42,10 +43,10 @@ export default {
     // mounted() {},
     methods: {
         toggleState() {
-            if (this.currentState == 'open') {
-                this.currentState = 'close';
+            if (this.currentState == 'one') {
+                this.currentState = 'two';
             } else {
-                this.currentState = 'open';
+                this.currentState = 'one';
             }
         },
     },
@@ -57,12 +58,18 @@ export default {
 .demo-px-flip {
     padding: 5em;
     &__container {
-        width: 4em;
-        height: 4em;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        position: relative;
+        width: 200px;
+        height: 200px;
+        border: 1px solid black;
+
+        // prettier-ignore
+        @include grid-art(
+            (
+                '50%  | 50%  | ',
+                'red  | gold | 50%',
+                'blue | blue | 50%'
+            )
+        );
 
         span {
             width: 100%;
@@ -70,18 +77,32 @@ export default {
             background-color: currentColor;
         }
 
-        &--state-open {
-            span {
-                transform: rotate(0deg) scale(1);
-            }
+        &--state-one {
         }
 
-        &--state-close {
-            span {
-                transform: scale(0.5);
-                opacity: 0.5;
-            }
+        &--state-two {
+            // prettier-ignore
+            @include grid-art(
+                (
+                    '33%  | 67%  | ',
+                    'blue | red  | 50%',
+                    'gold | gold | 50%'
+                )
+            );
         }
     }
+
+    &__red {
+        background-color: tomato;
+        grid-area: red;
+    }
+    &__gold {
+        background-color: gold;
+        grid-area: gold;
+    }
+    &__blue {
+        background-color: lightblue;
+        grid-area: blue;
+    }
 }
 </style>

package/package.json

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