@thinkpixellab-public/px-vue 3.0.1

package/components/PxSideDrawer.vue

@@ -0,0 +1,164 @@
+<!--
+    <px-side-drawer toggle-class="my-trigger"  >
+
+        <template #toggle="{isMenuVisible}">
+            // this content will be placed in an otherwise invisible button
+        </template>
+
+        <template>
+            // this will be rendered into the drawer which is a basic styled container by default.
+            // For control over the drawer-class, set the drawer-class property.
+        </template>
+
+    </px-side-drawer>
+-->
+<template>
+    <div>
+        <px-toggle-button :class="toggleButtonClass" variant="icon" :checked.sync="visibleValue">
+            <px-icon :src="toggleIcon" />
+        </px-toggle-button>
+
+        <px-modal
+            :visible.sync="visibleValue"
+            :overlayClass="[bem('overlay-base'), overlayClass].join(' ')"
+            v-bind="modalProps"
+            transition-name="px-side-drawer__tr"
+        >
+            <div :class="bem()">
+                <div :class="drawerClass">
+                    <div :class="bem('top')">
+                        <div :class="bem('close')">
+                            <button :class="closeButtonClass" @click="visibleValue = false">
+                                <px-icon :src="closeIcon" />
+                            </button>
+                        </div>
+                        <slot name="default" />
+                    </div>
+                    <div :class="bem('bottom')">
+                        <slot name="bottom" />
+                    </div>
+                </div>
+            </div>
+        </px-modal>
+    </div>
+</template>
+
+<script>
+import PxBaseVisibleVue from './PxBaseVisible.vue';
+import PxIcon from './PxIcon.vue';
+import PxModal from './PxModal.vue';
+import PxToggleButton from './PxToggleButton.vue';
+
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+export default {
+    name: 'px-side-drawer',
+    components: { PxModal, PxToggleButton, PxIcon },
+    mixins: [PxBaseVisibleVue],
+    props: {
+        dockTo: { type: String, default: 'screen' }, // screen | parent
+
+        // default icon used for the toggle (only shown in default toggle slot)
+        toggleIcon: { type: String, default: require('../assets/icons/menu.svg') },
+        toggleIconSize: { default: null },
+
+        // icon shown in the drawer by default (set to null to hide)
+        closeIcon: { type: String, default: require('../assets/icons/close-sm.svg') },
+        closeIconSize: { default: null },
+
+        // custom classes
+        toggleButtonClass: { type: String, default: 'px-side-drawer__icon-button' },
+        closeButtonClass: { type: String, default: 'px-side-drawer__icon-button' },
+        overlayClass: { type: String, default: 'px-side-drawer__overlay' },
+        drawerClass: { type: String, default: 'px-side-drawer__drawer' },
+
+        // PxModal (see PxModal for details)
+        modalProps: { type: Object },
+    },
+    // data() { return { b: 0 }; },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+// @include vue-transition-fade('px-side-drawer__tr', $dur: 3000ms);
+
+$dur: 400ms;
+
+@include vue-transition('px-side-drawer__tr') {
+    @include vt-transition {
+        @include transition(color, $dur: $dur);
+        .px-side-drawer__overlay-base {
+            @include transition(opacity, $dur: $dur);
+        }
+        .px-side-drawer__drawer {
+            @include transition(transform, $dur: $dur);
+        }
+    }
+
+    @include vt-hidden() {
+        .px-side-drawer__overlay-base {
+            opacity: 0;
+        }
+        .px-side-drawer__drawer {
+            transform: translateX(100%);
+        }
+    }
+}
+
+.px-side-drawer {
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 100%;
+    min-width: 10px;
+
+    &__overlay {
+        background-color: clr(accent, -6, 0.2);
+        backdrop-filter: blur(10px);
+    }
+
+    &__drawer,
+    &__top,
+    &__bottom {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1em;
+        > section {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    &__drawer {
+        justify-content: space-between;
+        width: 320px;
+        max-width: 100vw;
+        height: 100%;
+        background-color: clr(page-bg);
+        box-shadow: depth-shadow(15, 0.1);
+    }
+
+    &__close {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    &__icon-button {
+        @include button-icon(
+            (
+                padding: 0.5em,
+                min-height: 0,
+                min-width: 0,
+            )
+        );
+    }
+}
+</style>

package/components/PxSlideTransition.vue

@@ -0,0 +1,116 @@
+<!--
+    Handle transitions between slides in PxSlide. Uses a hybrid css/javascript transition where
+    fades are in css and the drag movement is done with gsap.
+-->
+<template>
+    <!--
+before-enter
+before-leave
+before-appear
+enter
+leave
+appear
+after-enter
+after-leave
+after-appear
+enter-cancelled
+leave-cancelled (v-show only)
+appear-cancelled
+-->
+
+    <transition
+        @before-enter="beforeEnter"
+        @enter="enter"
+        @leave="leave"
+        v-on="$listeners"
+        name="px-slide-transition-fade"
+    >
+        <slot />
+    </transition>
+</template>
+
+<script>
+import gsap from 'gsap';
+
+export default {
+    name: 'px-slide-transition',
+    props: {
+        // selector used to find children of the element that should slide during the transition
+        dragSelector: { type: String, default: '[data-drag]' },
+
+        // if true, slide the parent element if no slideSelect children are found (false will result just fading)
+        dragElementFallback: { type: Boolean, default: true },
+
+        // 1 moves to the right, -1 moves to the left
+        direction: { type: Number, default: 1 },
+        // TODO rtlAdjust: {type: Boolean, default: false }
+
+        duration: { type: Number, default: 1 },
+        ease: { type: String, default: 'power3.out' },
+        slideAmount: { default: '40vw' },
+    },
+    computed: {
+        tweenShared() {
+            return {
+                duration: this.duration,
+                ease: this.ease,
+            };
+        },
+    },
+    methods: {
+        directionAmount(direction, addEquals = false) {
+            let dir;
+            if (addEquals) {
+                dir = direction < 0 ? '-=' : '+=';
+            } else {
+                dir = direction < 0 ? '-' : '';
+            }
+
+            return dir + this.slideAmount;
+        },
+        slideElements(element) {
+            if (!element) {
+                return [];
+            }
+            return element.querySelectorAll(this.dragSelector);
+        },
+
+        beforeEnter() {},
+
+        enter(element, done) {
+            let slideElements = this.slideElements(element);
+            if (slideElements?.length) {
+                // slide elements
+                gsap.fromTo(
+                    slideElements,
+                    //{ x: this.slideAmount * this.direction * -1 },
+                    { x: this.directionAmount(this.direction * -1) },
+                    { x: 0, ...this.tweenShared, onComplete: done }
+                );
+            }
+        },
+        leave(element, done) {
+            // slide elements
+            let slideElements = this.slideElements(element);
+            if (slideElements?.length) {
+                gsap.to(slideElements, {
+                    x: this.directionAmount(this.direction, true),
+                    ...this.tweenShared,
+                    onComplete: done,
+                });
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/helpers.scss' as *;
+@use '../styles/px.scss' as *;
+
+@include vue-transition-fade(px-slide-transition-fade, $dur: 1s);
+
+.slide-transition {
+    // add styles here
+}
+</style>

package/components/PxSlides.vue

@@ -0,0 +1,217 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <div
+            v-for="(item, index) in items"
+            :key="getItemKey(item)"
+            ref="slide"
+            :class="bem('slide-wrapper', { selected: isItemSelected(item) })"
+        >
+            <px-slide-transition
+                :direction="direction"
+                @before-leave="transitionStart"
+                @after-leave="transitionEnd"
+                @leave-cancelled="transitionEnd"
+            >
+                <div :class="bem('slide')" v-show="isItemSelected(item)">
+                    <slot
+                        name="slide"
+                        :selected="isItemSelected(item)"
+                        :item="item"
+                        :index="index"
+                    ></slot>
+                </div>
+            </px-slide-transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import PxBaseItemsSelect from './PxBaseItemsSelect.vue';
+import PxSlideTransition from './PxSlideTransition.vue';
+import gsap from 'gsap';
+import Drag from '../utils/drag.js';
+
+export default {
+    name: 'px-slides',
+    mixins: [PxBaseItemsSelect],
+    components: { PxSlideTransition },
+
+    props: {
+        // whether drag interaction is enabled
+        dragEnabled: { type: Boolean, default: true },
+
+        // if true, slides loop to the first slide once last slide is reached
+        loop: { type: Boolean, default: true },
+
+        // selector used to find drag elements in the dom
+        dragSelector: { type: String, default: '[data-drag]' },
+
+        // exclude from drag
+        dragExcludeSelector: { type: String, default: 'input, button, [data-no-drag]' },
+
+        // override default
+        autoSelectFirst: { type: Boolean, default: true },
+    },
+
+    data() {
+        return {
+            direction: 1,
+            activeTransitions: 0,
+        };
+    },
+    computed: {},
+    watch: {
+        syncSelected(nv, ov) {
+            let newIndex = this.itemKeys.indexOf(nv);
+            let oldIndex = this.itemKeys.indexOf(ov);
+
+            this.$emit('slide-change', {
+                key: nv,
+                oldKey: ov,
+                index: newIndex,
+                previousIndex: oldIndex,
+            });
+
+            newIndex = this.selectedRelativeIndex(newIndex);
+            oldIndex = this.selectedRelativeIndex(oldIndex);
+
+            this.direction = oldIndex > newIndex ? 1 : -1;
+        },
+        dragEnabled(nv) {
+            if (!this.drag) {
+                return;
+            }
+            if (!nv) {
+                this.drag.disable();
+            } else {
+                this.drag.enable();
+            }
+        },
+    },
+    mounted() {
+        this.drag = new Drag(this.$el, {
+            lock: 'x',
+            onStart: this.onDragStart,
+            onDrag: this.onDrag,
+            onEnd: this.onDragEnd,
+            excludeSelector: this.dragExcludeSelector,
+            disabled: !this.dragEnabled,
+        });
+    },
+    beforeDestroy() {
+        if (this.drag) {
+            this.drag.destroy();
+        }
+    },
+    methods: {
+        transitionStart() {
+            if (!this.activeTransitions) {
+                this.$emit('transitions-start');
+            }
+            this.activeTransitions++;
+        },
+
+        transitionEnd() {
+            this.activeTransitions--;
+            if (!this.activeTransitions) {
+                this.$emit('transitions-end', {
+                    toIndex: this.itemKeys.indexOf(this.syncSelected),
+                });
+            }
+        },
+
+        onDragStart() {
+            // get drag elements
+            let slide = this.$refs.slide[this.selectedIndex];
+
+            if (slide) {
+                this.dragElements = [...slide.querySelectorAll(this.dragSelector)];
+            }
+        },
+
+        onDrag(ev) {
+            if (this.dragElements?.length) {
+                if (gsap.isTweening(this.dragElements[0])) {
+                    gsap.killTweensOf(this.dragElements);
+                }
+                gsap.set(this.dragElements, { x: ev.startDelta.x });
+            }
+        },
+
+        onDragEnd(ev) {
+            if (Math.abs(ev.delta.x) < 10) {
+                gsap.to(this.dragElements, { x: 0 });
+            } else {
+                if (ev.delta.x > 0) {
+                    this.previous();
+                } else {
+                    this.next();
+                }
+            }
+        },
+
+        next() {
+            this.selectOffsetSafe(1, this.loop);
+        },
+
+        previous() {
+            this.selectOffsetSafe(-1, this.loop);
+        },
+
+        // returns the index of the item relative to the selected item, if looped
+        // then half of the items will be before and half after
+        selectedRelativeIndex(idx) {
+            if (this.selectedIndex == -1) {
+                return 0;
+            }
+
+            idx = idx - this.selectedIndex;
+
+            if (this.loop) {
+                let half = Math.floor(this.items.length / 2);
+
+                if (idx >= half) {
+                    idx = idx - this.items.length;
+                }
+
+                if (idx < -half) {
+                    idx = idx + this.items.length;
+                }
+            }
+
+            return idx;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/helpers.scss' as *;
+@use '../styles/px.scss' as *;
+
+.px-slides {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
+    grid-template-areas: 'content';
+    -webkit-transform-style: preserve-3d;
+
+    &__slide-wrapper {
+        grid-area: content;
+        width: 100%;
+        height: 100%;
+        &--selected {
+            z-index: 1;
+            pointer-events: initial;
+        }
+    }
+
+    &__slide {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

package/components/PxStylesPreview.vue

@@ -0,0 +1,129 @@
+<!--
+    All in one component for previewing a px-styles configuration.
+-->
+<template>
+    <div :class="bem()">
+        <div :class="bem('section', { color: true })">
+            <h3 class="h3">Color</h3>
+
+            <div :class="bem('colors-list')">
+                <div :class="bem('color-item')" v-for="clr in paletteColors" :key="clr.name">
+                    {{ clr.name }}: {{ clr.color }}
+                    <div :class="bem('color', { color: clr.name })"></div>
+
+                    <div :class="bem('color-shades')">
+                        <div
+                            v-for="i in 21"
+                            :key="i"
+                            :class="bem('color', { sm: true, color: `${clr.name}-${i - 11}` })"
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+export default {
+    name: 'px-styles-preview',
+    // components: { Component },
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    data() {
+        return { config: null };
+    },
+    computed: {
+        paletteColors() {
+            if (!this.config?.colors) {
+                return [];
+            }
+            let f = Object.keys(this.config?.colors).filter(c => {
+                return ![
+                    'contrast-dark',
+                    'contrast-light',
+                    'page-bg',
+                    'page-fg',
+                    'selection-bg',
+                    'selection-fg',
+                ].includes(c);
+            });
+
+            console.log(`f: 👉 ${JSON.stringify(f, null, 4)}`);
+
+            return f.map(colorName => {
+                return {
+                    name: colorName,
+                    color: this.config.colors[colorName],
+                };
+            });
+        },
+    },
+    // watch: {},
+    mounted() {
+        let configStr = getComputedStyle(this.$el)
+            .getPropertyValue('--px-styles-config')
+            .trim()
+            .slice(1, -1);
+
+        try {
+            this.config = JSON.parse(configStr);
+        } catch {
+            console.error('Could not parse px-styles config string.');
+        }
+
+        console.log(configStr);
+    },
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-styles-preview {
+    $config-json: encode(get-config-map());
+    --px-styles-config: (#{$config-json});
+
+    &__section {
+        margin: 0 auto;
+        width: 90vw;
+        max-width: 1200px;
+    }
+
+    &__color-item {
+        width: 100%;
+    }
+
+    &__color {
+        height: 60px;
+        width: 100%;
+        border-radius: 4px;
+
+        &--sm {
+            width: 24px;
+            height: 24px;
+        }
+
+        @each $name, $color in get(colors) {
+            &--color-#{$name} {
+                background-color: clr($name);
+            }
+            @for $i from -10 to 10 {
+                &--color-#{$name}-#{$i} {
+                    background-color: clr($name, $i);
+                }
+            }
+        }
+    }
+
+    &__color-shades {
+        margin-top: 1px;
+        display: flex;
+        gap: 1px;
+    }
+}
+</style>