@thinkpixellab-public/px-vue 3.0.1

package/components/PxPopup.vue

@@ -0,0 +1,230 @@
+<!--
+
+    Simple popup attached to a reference element. Most common scenarios would be tooltips or menus.
+    Uses popper.js for placement and PxModal for the popup itself. Has built in support for click
+    and hover triggers.
+
+    Usage as a menu:
+
+    <px-popup tag="button" trigger="click">
+
+        Button Label
+
+        <template #popup>
+            <div class="popup-menu">
+                <button>Menu Option 1</button>
+                <button>Menu Option 2</button>
+            </div>
+        </template>
+    </px-popup>
+
+    Usage as a tooltip:
+
+    <px-popup trigger="hover" tag="a" href="https://thinkpixellab.com">
+        Pixel Lab
+        <template #popup>
+            <div class="tooltip">
+                Best website ever!
+            </div>
+        </template>
+    </px-popup>
+
+-->
+<template>
+    <component
+        :is="tag"
+        :class="bem()"
+        @click="onClick"
+        @contextmenu.stop="onContextMenu"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+    >
+        <slot name="default" />
+        <px-modal v-if="calcUseModal" :visible.sync="syncPopupVisible" v-bind="modalAttrs">
+            <div
+                ref="popup"
+                :class="[bem('popup'), popupClass]"
+                :style="{
+                    minWidth: cssPx(popupMinWidth),
+                    maxWidth: setPopupMaxWidth ? cssPx(popupMinWidth) : null,
+                }"
+            >
+                <slot name="popup" />
+            </div>
+        </px-modal>
+        <div v-else>
+            <div
+                ref="popup"
+                :class="[bem('popup', { nonModal: true }), popupClass]"
+                :style="{
+                    minWidth: cssPx(popupMinWidth),
+                    maxWidth: setPopupMaxWidth ? cssPx(popupMinWidth) : null,
+                }"
+                v-show="syncPopupVisible"
+            >
+                <slot name="popup" />
+            </div>
+        </div>
+    </component>
+</template>
+
+<script>
+import PxBase from './PxBase.vue';
+import PxModal from './PxModal.vue';
+import { createPopper } from '@popperjs/core';
+export default {
+    name: 'px-popup',
+    components: { PxModal },
+    mixins: [PxBase],
+    props: {
+        // the tag to use for the primary / root / reference element
+        tag: { type: String, default: 'button' },
+
+        // automatically toggle popup visibility on click or hover, possible values: click, hover, contextmenu
+        trigger: { type: String, default: 'click' },
+
+        // whether the popup is visible (syncable)
+        popupVisible: { type: Boolean, default: false },
+
+        // the placement strategy to use with popper.js, possible values: fixed, absolute
+        strategy: { type: String, default: 'fixed' },
+
+        // the placement of the popup (proxy for popper.js placement), possible values are: auto,
+        // auto-start, auto-end, top, top-start, top-end, bottom, bottom-start, bottom-end, right,
+        // right-start, right-end, left, left-start, left-end
+        placement: { type: String, default: 'bottom' },
+
+        // the number of pixels to shift the popup in the direction perpendicular to it's alignment,
+        // e.g. if placement is bottom-start then a value of -10 would shift the popup 10px to the
+        // left (in non-rtl layouts)
+        skidding: { type: Number, default: 0 },
+
+        // additional spacing between the main element and popup in px
+        distance: { type: Number, default: 0 },
+
+        // whether to use PxModal for the popup, leave as null for auto based on trigger (click =>
+        // true, hover => false)
+        useModal: { type: Boolean, default: null },
+
+        // properties that get passed to the modal element (see PxModal for details)
+        modalAttrs: { default: null },
+
+        // class that gets set on the popup element
+        popupClass: { default: null },
+
+        // for the popup to be at least as wide as the reference element
+        setPopupMinWidth: { type: Boolean, default: true },
+
+        // for the popup to never be wider than the reference element
+        setPopupMaxWidth: { type: Boolean, default: false },
+    },
+
+    data() {
+        return { syncPopupVisible: this.popupVisible, popupMinWidth: null };
+    },
+
+    watch: {
+        popupVisible(nv) {
+            // update syncPopupVisible when visible changes
+            this.syncPopupVisible = nv;
+        },
+
+        async syncPopupVisible(nv) {
+            // emit update when syncPopupVisible changes (enables .sync on parent)
+            this.$emit('update:popupVisible', nv);
+
+            if (nv) {
+                if (this.setPopupMinWidth) {
+                    this.popupMinWidth = this.$el.getBoundingClientRect().width;
+                } else {
+                    this.popupMinWidth = null;
+                }
+
+                let popperOptions = {
+                    placement: this.placement,
+                    strategy: this.strategy,
+                    modifiers: [
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [this.skidding, this.distance],
+                            },
+                        },
+                    ],
+                };
+
+                if (this.calcUseModal) {
+                    // if we're using a modal we need to delay the creation of the popper so that
+                    // we have the popup element in the right place in the DOM
+                    await this.$nextTick();
+                    await this.$nextTick();
+                    this.popper = createPopper(this.$el, this.$refs.popup, popperOptions);
+                } else {
+                    // but if we don't have a modal, we want to create it immediately to avoid
+                    // layout flashes
+                    this.popper = createPopper(this.$el, this.$refs.popup, popperOptions);
+                }
+            } else {
+                if (this.popper) {
+                    await this.$nextTick();
+                    this.popper.destroy();
+                }
+            }
+        },
+    },
+    computed: {
+        calcUseModal() {
+            if (this.useModal === null) {
+                return this.trigger != 'hover';
+            }
+            return this.useModal;
+        },
+    },
+    methods: {
+        openPopup() {
+            this.syncPopupVisible = true;
+        },
+        closePopup() {
+            this.syncPopupVisible = false;
+        },
+        togglePopup() {
+            this.syncPopupVisible = !this.syncPopupVisible;
+        },
+        onClick() {
+            if (this.trigger == 'click') {
+                this.syncPopupVisible = !this.syncPopupVisible;
+            }
+        },
+        onContextMenu(e) {
+            if (this.trigger == 'contextmenu') {
+                e.stopPropagation();
+                e.preventDefault();
+                this.syncPopupVisible = !this.syncPopupVisible;
+            }
+        },
+        onMouseEnter() {
+            if (this.trigger == 'hover') {
+                this.syncPopupVisible = true;
+            }
+        },
+        onMouseLeave() {
+            if (this.trigger == 'hover') {
+                this.syncPopupVisible = false;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-popup {
+    display: inline-block;
+
+    @include bem('popup', 'non-modal') {
+        position: absolute;
+        z-index: 1;
+    }
+}
+</style>

package/components/PxPortal.vue

@@ -0,0 +1,138 @@
+<script>
+// Based on this: https://github.com/LinusBorg/vue-simple-portal
+// The npm version used a conflicting version of Vue and had an issue that prevented proper render
+
+import PxPortalTarget from './PxPortalTarget';
+
+let uniqueIdIterator = 1000;
+let isBrowser = !process.server && typeof window !== 'undefined' && typeof document !== undefined;
+
+export default {
+    name: 'PxPortal',
+    props: {
+        disabled: { type: Boolean },
+        prepend: { type: Boolean },
+        selectorPrefix: { type: String, default: 'px-portal-' },
+        selector: { type: String, default: null },
+        tag: { type: String, default: 'DIV' },
+    },
+    computed: {
+        computedSelector() {
+            return this.selector
+                ? this.selector
+                : `#${this.selectorPrefix}${(uniqueIdIterator++ + '').padStart(4, '0')}`;
+        },
+    },
+    watch: {
+        disabled: {
+            immediate: true,
+            handler(disabled) {
+                if (!process.server) {
+                    if (disabled) {
+                        this.unmount();
+                    } else {
+                        this.$nextTick(this.mount);
+                    }
+                }
+            },
+        },
+    },
+    mounted() {
+        if (!this.getTargetEl()) {
+            this.insertTargetEl();
+        }
+    },
+    updated() {
+        // We only update the target container component if the scoped slot function is a fresh one
+        // The new slot syntax (since Vue 2.6) can cache unchanged slot functions and we want to
+        // respect that here.
+
+        this.$nextTick(() => {
+            if (!this.disabled && this.slotFn !== this.$scopedSlots.default) {
+                this.container.updatedNodes = this.$scopedSlots.default;
+            }
+            this.slotFn = this.$scopedSlots.default;
+        });
+    },
+    beforeDestroy() {
+        this.unmount();
+    },
+    methods: {
+        // This returns the element into which the content should be mounted.
+        getTargetEl() {
+            if (!isBrowser) return;
+            return document.querySelector(this.computedSelector);
+        },
+        insertTargetEl() {
+            if (!isBrowser) return;
+            const parent = document.body;
+            const child = document.createElement(this.tag);
+            if (parent && child) {
+                child.id = this.computedSelector.substring(1);
+                try {
+                    parent.appendChild(child);
+                } catch (error) {
+                    console.error('PxPortal: insertTargetEl failure');
+                    console.error(error);
+                    console.log(parent);
+                    console.log(child);
+                    throw error;
+                }
+            }
+        },
+        mount() {
+            if (!isBrowser) return;
+
+            const targetEl = this.getTargetEl();
+            if (targetEl) {
+                this.portal = document.createElement('DIV');
+                if (this.prepend && targetEl.firstChild) {
+                    targetEl.insertBefore(this.portal, targetEl.firstChild);
+                } else {
+                    try {
+                        targetEl.appendChild(this.portal);
+                    } catch (error) {
+                        console.error('PxPortal: mount failure');
+                        console.error(error);
+                        console.log(targetEl);
+                        console.log(this.portal);
+                        throw error;
+                    }
+                }
+
+                this.container = new PxPortalTarget({
+                    el: this.portal,
+                    parent: this,
+                    propsData: {
+                        tag: this.tag,
+                        nodes: this.$scopedSlots.default,
+                    },
+                });
+            }
+        },
+        unmount() {
+            if (this.container) {
+                this.container.$destroy();
+                delete this.container;
+            }
+
+            // clean up auto-created target el
+            if (!this.selector) {
+                let targetElement = this.getTargetEl();
+                if (targetElement) {
+                    targetElement.remove();
+                }
+            }
+        },
+    },
+    render(h) {
+        if (!isBrowser) return;
+        if (this.disabled) {
+            const nodes = this.$scopedSlots && this.$scopedSlots.default();
+            if (!nodes) return h();
+            return nodes.length < 2 && !nodes[0].text ? nodes : h(this.tag, nodes);
+        }
+        return h();
+    },
+};
+</script>

package/components/PxPortalTarget.vue

@@ -0,0 +1,25 @@
+<script>
+import Vue from 'vue';
+export default Vue.extend({
+    // as an abstract component, it doesn't appear in the $parent chain of components. which means
+    // the next parent of any component rendered inside of this oen will be the parent from which is
+    // was portal'd
+    abstract: true,
+    name: 'PxPortalTarget',
+
+    // eslint-disable-next-line vue/require-prop-types
+    props: ['nodes', 'tag'],
+    data: vm => ({
+        updatedNodes: vm.nodes,
+    }),
+    destroyed() {
+        const { $el: el } = this;
+        el.parentNode.removeChild(el);
+    },
+    render(h) {
+        const nodes = this.updatedNodes && this.updatedNodes();
+        if (!nodes) return h();
+        return nodes.length < 2 && !nodes[0].text ? nodes : h(this.tag || 'DIV', nodes);
+    },
+});
+</script>

package/components/PxProgressCircle.vue

@@ -0,0 +1,73 @@
+<!--
+    Basic circular progress bar that uses SVG and stroke offset to produce the effect. Stroke
+    color is derived from currentColor. Sizes to container and maintains a 1:1 aspect.
+
+    <px-progress-circle stroke-width="4" progress=".5" :style="{color: green}" />
+
+-->
+<template>
+    <div :class="bem()" v-resize="resize">
+        <svg
+            width="100%"
+            height="100%"
+            :viewBox="`0 0 ${width} ${width}`"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+            <circle
+                stroke="currentColor"
+                :stroke-width="strokeWidth"
+                :stroke-dasharray="strokeDashArray"
+                fill="transparent"
+                :cx="width ? width / 2 : 0"
+                :cy="width ? width / 2 : 0"
+                :r="width ? Math.max(0, width / 2 - strokeWidth / 2) : 0"
+            ></circle>
+        </svg>
+    </div>
+</template>
+
+<script>
+import PxBase from './PxBase.vue';
+
+export default {
+    name: 'progress-circle',
+    mixins: [PxBase],
+    props: {
+        strokeWidth: { type: Number, default: 10 },
+        progress: { type: Number, default: 0 },
+    },
+    data() {
+        return { width: 0, p: 0 };
+    },
+    computed: {
+        strokeDashArray() {
+            let c = (this.width - this.strokeWidth) * Math.PI;
+            return `${c * Math.max(0, Math.min(1, this.progress))},${c}`;
+        },
+    },
+    mounted() {
+        this.resize();
+    },
+    methods: {
+        resize() {
+            this.width = this.$el.getBoundingClientRect()?.width;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.progress-circle {
+    aspect-ratio: 1;
+    font-size: 0;
+    svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+        transform: rotate(-90deg);
+    }
+}
+</style>

package/components/PxRadioButton.vue

@@ -0,0 +1,83 @@
+<!--
+    Creates a toggle button (a control with the appearance of a normal button that can be toggle
+    between an on/off state).
+
+    <px-radio-button v-model="checked" />
+-->
+
+<template>
+    <button
+        :class="[
+            bem({ checked: syncChecked, ...variantsMap }),
+            checkedClass && syncChecked ? checkedClass : null,
+        ]"
+        :aria-checked="syncChecked"
+        role="radio"
+        v-on="$listeners"
+        @click="toggleChecked"
+    >
+        <div :class="bem('check', { checked: syncChecked })"></div>
+        <slot />
+    </button>
+</template>
+
+<script>
+import PxBaseToggle from './PxBaseToggle.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+
+export default {
+    name: 'px-radio-button',
+    mixins: [PxBaseToggle, PxBaseVariants],
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-radio-button {
+    @include control-reset();
+    background: transparent;
+
+    &--default {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            @include bem(check) {
+                &:after {
+                    opacity: 0.5;
+                }
+            }
+        }
+
+        @include bem(check) {
+            width: 1.2em;
+            height: 1.2em;
+            border-radius: 50%;
+            border: 1px solid currentColor;
+            margin-right: 0.5em;
+            position: relative;
+            padding: 0.25em;
+            box-sizing: border-box;
+            flex: none;
+            @include after() {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                background-color: accent();
+                opacity: 0;
+            }
+
+            &--checked {
+                &:after {
+                    opacity: 1 !important;
+                }
+            }
+        }
+    }
+}
+
+@include block(px-radio-button, 'default') {
+}
+</style>