@thinkpixellab-public/px-vue 3.0.70 → 3.0.71

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