@thinkpixellab-public/px-vue 3.0.1

package/components/PxSvg.vue

@@ -0,0 +1,157 @@
+<!--
+    A component that uses vue-inline-svg to load svg files inline. In addition to the functionality
+    provided by vue-inline-svg, this component will ensure a consistent approach to sizing and
+    perform basic string replacements.
+
+    @import PxSvg from '@thinkpixellab/px-vue/components/PxSvg.vue';
+
+    // show the icon at it's natural size
+    <px-svg src="require('~assets/icons/arrow.svg')" />
+
+    // show the icon with a height of 0.5em (notice no units on the size -- we default to ems)
+    <px-svg src="require('~assets/icons/arrow.svg')" size="0.5" />
+
+    // show the icon with a width 48px
+    <px-svg src="require('~assets/icons/arrow.svg')" size="48px" size-bias="width" />
+
+    // replace fonts
+    <px-svg src="require('~assets/icons/next.svg')" :replacements="{'Circular Bold': 'web-circular'}" />
+
+-->
+
+<template>
+    <inline-svg
+        class="px-svg"
+        :transformSource="transform"
+        :src="src"
+        :viewBox="svgViewBox"
+        :height="calcHeight"
+        :width="calcWidth"
+        v-on="$listeners"
+    />
+</template>
+
+<script>
+import PxBase from './PxBase.vue';
+import InlineSvg from 'vue-inline-svg';
+
+/**
+ *
+ *  @emits loaded - (from vue-inline-svg)
+ *  @emits unloaded - (from vue-inline-svg)
+ *  @emits error - (from vue-inline-svg)
+ *  @emits sized - the size of the svg has been determined
+ **/
+
+export default {
+    name: 'PxSvg',
+    components: { InlineSvg },
+    mixins: [PxBase],
+    props: {
+        src: { type: String, default: '' },
+
+        // if non-null, overrides the size of the svg (assumes 'em' as a unit unless one is specified)
+        size: { default: null },
+
+        // the size will be applied directly to one dimension (the one specified here) and the other
+        // will be computed to maintain the aspect (as determined by the viewBox or size/width)
+        sizeBias: { type: String, default: 'height' },
+
+        // string replacements to be made on the svg (we replace black with currentColor by default)
+        replacements: { type: Object, default: null },
+    },
+    data() {
+        return { svgWidth: null, svgHeight: null, svgViewBox: null };
+    },
+    computed: {
+        calcHeight() {
+            if (!this.size) {
+                return this.svgHeight;
+            }
+            let s = 1;
+            if (this.svgWidth && this.svgHeight && this.sizeBias != 'height') {
+                s = this.svgHeight / this.svgWidth;
+            }
+
+            return s * this.calcSize + this.calcUnit;
+        },
+        calcWidth() {
+            if (!this.size) {
+                return this.svgWidth;
+            }
+            let s = 1;
+            if (this.svgWidth && this.svgHeight && this.sizeBias != 'width') {
+                s = this.svgWidth / this.svgHeight;
+            }
+            return s * this.calcSize + this.calcUnit;
+        },
+        calcSize() {
+            if (typeof this.size == 'number') {
+                return this.size;
+            }
+            return parseFloat(this.size);
+        },
+        calcUnit() {
+            if (typeof this.size == 'number') {
+                return 'px';
+            }
+            return this.size.replace(this.calcSize, '') || 'px';
+        },
+    },
+    methods: {
+        transform(svg) {
+            if (!svg) {
+                return;
+            }
+            // only a valid viewbox if it has both width/height
+            let viewBox =
+                svg.viewBox.baseVal.width && svg.viewBox.baseVal.height
+                    ? svg.viewBox.baseVal
+                    : null;
+
+            // we only support width/height set in px (unitType = 1 or 5)
+            let width =
+                svg.width.baseVal.unitType == 1 || svg.width.baseVal.unitType == 5
+                    ? parseFloat(svg.width.baseVal.value)
+                    : viewBox.width;
+            let height =
+                svg.height.baseVal.unitType == 1 || svg.height.baseVal.unitType == 5
+                    ? parseFloat(svg.height.baseVal.value)
+                    : viewBox.height;
+
+            // save as data values
+            this.svgViewBox = viewBox
+                ? `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`
+                : `0 0 ${width} ${height}`;
+            this.svgWidth = width;
+            this.svgHeight = height;
+
+            // string replace
+            if (this.replacements) {
+                let inner = svg.innerHTML;
+                for (let str in this.replacements) {
+                    inner = inner.replaceAll(str, this.replacements[str]);
+                }
+                svg.innerHTML = inner;
+            }
+
+            this.$emit('sized', {
+                svgWidth: this.svgWidth,
+                svgHeight: this.svgHeight,
+                calcWidth: this.calcWidth,
+                calcHeight: this.calcHeight,
+            });
+
+            return svg;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.px-svg {
+    color: inherit;
+    display: inline-block;
+    line-height: 1;
+}
+</style>

package/components/PxSwiper.vue

@@ -0,0 +1,271 @@
+<!--
+    Wraps tiny-swiper js (https://tiny-swiper.js.org/docs/api)
+-->
+<template>
+    <div :class="bem()" v-resize:debounce.50="resize">
+        <div
+            :class="bem('outer')"
+            :style="{
+                paddingLeft: cssPx(slidePadding),
+                paddingRight: cssPx(slidePadding),
+            }"
+        >
+            <div :class="['swiper-container', containerClass]" ref="swiperContainer">
+                <div :class="['swiper-wrapper', wrapperClass]">
+                    <slot />
+                </div>
+            </div>
+            <button
+                v-if="navigationEnabled"
+                ref="navPrev"
+                :class="[navButtonClass, navPrevButtonClass]"
+            >
+                <px-icon :src="prevIcon" />
+            </button>
+            <button
+                v-if="navigationEnabled"
+                ref="navNext"
+                :class="[navButtonClass, navNextButtonClass]"
+            >
+                <px-icon :src="nextIcon" />
+            </button>
+        </div>
+
+        <div
+            v-if="paginationEnabled"
+            :class="[bem('pagination'), paginationClass]"
+            ref="pagination"
+        ></div>
+    </div>
+</template>
+
+<script>
+import PxBase from './PxBase.vue';
+import PxIcon from './PxIcon.vue';
+
+export default {
+    components: { PxIcon },
+    name: 'px-swiper',
+    mixins: [PxBase],
+    model: {
+        prop: 'slideIndex',
+        event: 'update:slideIndex',
+    },
+    props: {
+        // the selected slide index
+        slideIndex: { type: Number, default: 0 },
+
+        // the space between slides
+        spaceBetween: { type: Number, default: 50 },
+
+        // the number of slides show in each view
+        slidesPerView: { type: Number, default: 1 },
+
+        // other initialization options that get passed to the swiper
+        options: { type: Object, default: null },
+
+        // class that gets set on the outer swiper-container
+        containerClass: { type: String, default: null },
+
+        // class that gets set on the inner swiper-wrapper
+        wrapperClass: { type: String, default: null },
+
+        // pagination
+
+        // whether or not to use the built-in pagination
+        paginationEnabled: { type: Boolean, default: true },
+
+        // class that gets set on the inner swiper-wrapper
+        paginationClass: { type: String, default: null },
+
+        // class that gets set on the inner swiper-wrapper
+        bulletClass: { type: String, default: 'px-swiper__bullet' },
+
+        // exclude element selector (only evaluated during mounted)
+        noSwiping: { type: String, default: null },
+
+        // navigation
+
+        // whether or not to use the built-in navigation (arrows)
+        navigationEnabled: { type: Boolean, default: true },
+
+        // extra horizontal padding on the outside of the slide (can be used to ensure that
+        // navigation buttons don't overlap with the content)
+        slidePadding: { type: Number, default: 60 },
+
+        // next and previous navigation icons
+        nextIcon: { type: String, default: require('../assets/icons/nav-next.svg') },
+        prevIcon: { type: String, default: require('../assets/icons/nav-prev.svg') },
+
+        // nav button classes
+        navButtonClass: { type: String, default: 'px-swiper__nav' },
+        navPrevButtonClass: { type: String, default: 'px-swiper__nav--prev' },
+        navNextButtonClass: { type: String, default: 'px-swiper__nav--next' },
+    },
+
+    data() {
+        return {
+            // create a data field that will mirror slideIndex
+            slideIndexData: this.slideIndex,
+        };
+    },
+
+    watch: {
+        slideIndex(nv) {
+            // update slideIndexData when slideIndex changes
+            this.slideIndexData = Math.max(0, nv);
+        },
+
+        slideIndexData(nv) {
+            // emit update when slideIndexData changes (enables .sync on parent)
+            this.$emit('update:slideIndex', Math.max(0, nv));
+
+            if (this.swiper) {
+                this.swiper.slideTo(Math.max(0, nv));
+            }
+        },
+    },
+    mounted() {
+        const pagination = this.paginationEnabled
+            ? {
+                  el: this.$refs.pagination,
+                  clickable: true,
+                  bulletClass: this.bulletClass,
+                  bulletActiveClass: this.bulletClass + '--active',
+              }
+            : null;
+
+        const navigation = this.navigationEnabled
+            ? {
+                  prevEl: this.$refs.navPrev,
+                  nextEl: this.$refs.navNext,
+              }
+            : null;
+
+        let excludeElements = [];
+        if (this.noSwiping) {
+            excludeElements = [...this.$el.querySelectorAll(this.noSwiping)];
+        }
+
+        const params = {
+            initialSlide: this.slideIndex,
+            spaceBetween: this.slidePadding + this.spaceBetween,
+            slidesPerView: this.slidesPerView,
+            pagination: pagination,
+            navigation: navigation,
+            touchRatio: 0.8,
+            excludeElements: excludeElements,
+            ...this.options,
+        };
+
+        const Swiper = require('tiny-swiper/lib/index.full.js');
+        this.swiper = new Swiper(this.$refs.swiperContainer, params);
+
+        this.swiper.on('before-slide', (oldIndex, state, newIndex) => {
+            this.slideIndexData = newIndex;
+            this.$emit('slide-change', newIndex, oldIndex);
+        });
+
+        this.swiper.on('after-slide', newIndex => {
+            this.$emit('slide-change-complete', newIndex);
+        });
+
+        this.resize();
+    },
+    beforeDestroy() {
+        if (this.swiper) {
+            this.swiper.destroy();
+        }
+    },
+    methods: {
+        resize() {
+            this.$nextTick(() => {
+                if (this.swiper) {
+                    this.swiper.updateSize();
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-swiper {
+    position: relative;
+
+    .swiper-container,
+    .swiper-wrapper {
+        height: 100%;
+    }
+
+    @include bem(outer) {
+        position: relative;
+        height: 100%;
+    }
+
+    @include bem(pagination) {
+        margin-top: sp(1);
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    @include bem(bullet) {
+        position: relative;
+        width: sp(2.5);
+        height: sp(3);
+        cursor: pointer;
+        color: clr(page-fg);
+        @include after() {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: currentColor;
+            opacity: 0.33;
+            @include transition(opacity);
+            @include center();
+        }
+        &:hover {
+            &:after {
+                opacity: 0.66;
+            }
+        }
+        &--active,
+        &--active:hover {
+            &:after {
+                opacity: 1;
+            }
+        }
+    }
+
+    @include bem(nav) {
+        @include button-icon(
+            (
+                position: absolute,
+                top: 50%,
+                transform: translateY(-50%),
+                padding: sp(1.5),
+                'hover:transform': translateY(calc(-50% - 1px)),
+                'active:transform': translateY(calc(-50% + 1px)),
+            )
+        );
+
+        &.swiper-button-disabled {
+            opacity: 0.25;
+            cursor: not-allowed;
+            transform: translateY(-50%);
+        }
+
+        &--prev {
+            left: sp(0);
+        }
+
+        &--next {
+            right: sp(0);
+        }
+    }
+}
+</style>

package/components/PxSwiperSlide.vue

@@ -0,0 +1,42 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="[bem(), 'swiper-slide']">
+        <div :class="bem('content')">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+import PxBase from './PxBase.vue';
+
+export default {
+    name: 'px-swiper-slide',
+    // components: { Component },
+    mixins: [PxBase],
+    // props: { a: { type: Boolean, default: false } },
+    // data() { return { b: 0 }; },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+.px-swiper-slide {
+    flex: none;
+    cursor: grab;
+    // overflow: hidden;
+    //border: 1px solid black;
+    &__content {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

package/components/PxSyncHeight.vue

@@ -0,0 +1,137 @@
+<template>
+    <component
+        v-bind:is="tag"
+        class="sync-height__outer"
+        :style="{ minHeight: groupHeight + 'px' }"
+        v-resize:initial="resize"
+    >
+        <component v-bind:is="innerTag" ref="inner" class="sync-height__inner">
+            <slot />
+        </component>
+    </component>
+</template>
+
+<script>
+class HeightGroup {
+    constructor(name) {
+        this.name = name; // only needed for debugging
+        this.valid = true;
+        this.elements = [];
+    }
+    syncOnNext() {
+        if (this.valid) {
+            this.valid = false;
+            setTimeout(() => {
+                let maxHeight = this.getMaxHeight();
+                this.elements.forEach(element => {
+                    element.groupHeight = maxHeight;
+                });
+                this.valid = true;
+            }, 100);
+        }
+    }
+    addElement(element) {
+        this.elements.push(element);
+    }
+    removeElement(element) {
+        this.elements = this.elements.filter(el => el !== element);
+    }
+    getMaxHeight() {
+        let maxHeight = 0;
+        this.elements.forEach(item => {
+            maxHeight = Math.max(maxHeight, item.innerHeight);
+        });
+        return maxHeight;
+    }
+}
+
+let GroupManager = {
+    groups: [],
+    getGroup(groupName) {
+        let group = this.groups[groupName];
+        if (!group) {
+            group = new HeightGroup(groupName);
+            this.groups[groupName] = group;
+        }
+        return group;
+    },
+
+    addToGroup(element, groupName) {
+        this.getGroup(groupName).addElement(element);
+        this.syncGroupOnNext(groupName);
+    },
+
+    removeFromGroup(element, groupName) {
+        this.getGroup(groupName).removeElement(element);
+        this.syncGroupOnNext(groupName);
+    },
+
+    syncGroupOnNext(groupName) {
+        this.getGroup(groupName).syncOnNext();
+    },
+};
+
+export default {
+    props: {
+        tag: { type: String, default: 'div' },
+        innerTag: { type: String, default: 'span' },
+        group: { type: String, default: '' },
+        innerClass: { type: String, default: 'sync-height__inner' },
+    },
+    data() {
+        return {
+            innerHeight: 0,
+            groupHeight: 0,
+            // note: its important not use GroupManager on the server because it has shared state
+            isMounted: false,
+        };
+    },
+    watch: {
+        group(newValue, oldValue) {
+            if (this.isMounted) {
+                if (oldValue) {
+                    GroupManager.removeFromGroup(this, oldValue);
+                }
+                if (newValue) {
+                    GroupManager.addToGroup(this, newValue);
+                }
+            }
+        },
+    },
+    methods: {
+        resize() {
+            if (this.group && this.isMounted) {
+                this.innerHeight = this.$refs.inner.getBoundingClientRect().height;
+                GroupManager.syncGroupOnNext(this.group);
+            }
+        },
+    },
+    mounted() {
+        this.isMounted = true;
+        if (this.group) {
+            GroupManager.addToGroup(this, this.group);
+        } else if (process.env.NODE_ENV === 'development') {
+            console.warn(
+                '[SyncHeight] Must specify a value for "group" in order to sync height between elements.'
+            );
+        }
+    },
+    beforeDestroy() {
+        if (this.group && this.isMounted) {
+            GroupManager.removeFromGroup(this, this.group);
+        }
+    },
+};
+</script>
+
+<style lang="scss">
+.sync-height {
+    &__inner {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        display: inline;
+    }
+}
+</style>