@thinkpixellab-public/px-vue 3.0.57 → 3.0.59

package/components/PxCardGrid.vue

@@ -114,6 +114,9 @@ You can define a template using space notation like this:
                         :class="bem('card')"
                         :ref="cardRefFromItem(item)"
                     >
+                        <div v-if="item.id" :id="item.id" :class="bem('scroll-id')">
+                            {{ item.id }}
+                        </div>
                         <slot
                             name="default"
                             :index="items.indexOf(item)"
@@ -512,5 +515,15 @@ export default {
             }
         }
     }
+
+    // element with id set to the section id, placed just outside the top of the section to help
+    // with scroll position
+    &__scroll-id {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        top: -80px;
+        opacity: 0;
+    }
 }
 </style>

package/components/PxTransitionItem.vue

@@ -0,0 +1,97 @@
+<!--
+    Transitions between two items from a collection without the requirement of pre-rendering of all
+    items. It does this by maintaing a dynamic collection of items and using TransitionGroup.
+
+    Example (would crossfade a background image based on the selected item):
+
+        <PxTransitionItem
+            :class="bem('background')"
+            :item="selectedBackgroundImage"
+        >
+            <template #default="{ item }">
+                <div
+                    :class="bem('background-image')"
+                    :style="{ backgroundImage: cssUrl(item) }"
+                />
+            </template>
+        </PxTransitionItem>
+
+
+
+-->
+<template>
+    <transition-group
+        :class="bem()"
+        :name="transitionName ? transitionName : 'px-transition-item__fade'"
+        tag="div"
+    >
+        <div
+            :class="[bem('item'), itemClass]"
+            v-for="item in items"
+            :key="item.id"
+            :style="{
+                transitionDuration: transitionDurationMs ? transitionDurationMs + 'ms' : null,
+            }"
+        >
+            <slot :item="item.item" name="default" />
+        </div>
+    </transition-group>
+</template>
+
+<script>
+export default {
+    name: 'px-transition-item',
+    props: {
+        item: { default: null },
+        itemClass: { default: null },
+        transitionName: { default: null },
+        transitionDurationMs: { type: Number, default: null },
+    },
+    data() {
+        return { items: [], currentId: 0 };
+    },
+    watch: {
+        item: {
+            immediate: true,
+            handler(nv, ov) {
+                // compare similar objects
+
+                if (nv && ov && typeof nv == 'object' && typeof ov == 'object') {
+                    const nvstr = JSON.stringify(nv);
+                    const ovstr = JSON.stringify(ov);
+
+                    if (nvstr == ovstr) {
+                        return;
+                    }
+                }
+
+                if (ov && this.items.length) {
+                    this.items.shift();
+                }
+
+                if (nv) {
+                    this.items.push({ id: this.currentId++, item: nv });
+                }
+            },
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/include.scss';
+
+// background change transition
+@include vue-transition-fade(px-transition-item__fade, $dur: 0.5s);
+
+.px-transition-item {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+
+    &__item {
+        grid-area: 1 / 1;
+    }
+}
+</style>

package/package.json

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