@thinkpixellab-public/px-vue 3.0.1

package/components/PxModal.vue

@@ -0,0 +1,365 @@
+<!--
+
+    Usage:
+
+        <px-modal :visible.sync="modalVisible" labelled-by="#dlg-msg">
+            <div class="my-dialog">
+                <p id="dlg-msg">This is a message</p>
+                <button @click="modalVisible = false">Hide</button>
+            </div>
+        </px-modal>
+
+        <style>
+            // up to you to style the dialog element
+            .my-dialog { ... }
+        </style>
+
+    Resources:
+
+        - https://www.w3.org/TR/wai-aria-practices/#dialog_modal
+        - http://web-accessibility.carnegiemuseums.org/code/dialogs/
+        - https://github.com/GoogleChrome/dialog-polyfill
+        - https://vuejs.org/v2/examples/modal.html
+        - https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element
+        - https://github.com/edenspiekermann/a11y-dialog/blob/master/a11y-dialog.js
+        - https://github.com/willmcpo/body-scroll-lock
+
+    Check list (of what this component does):
+
+        [x] Add accessible properties (role="dialog", aria-modal, aria-labelledby)
+        [x] Place focus on first focusable element within the modal on opening
+        [x] Trap keyboard focus (e.g. focus cycles within the modal)
+        [x] Track element that was used to show the dialog and return focus when closing
+        [x] Support the "autofocus" attribute
+        [x] Escape key closes
+        [x] Disable scrolling on the body when the dialog is shown (uses body-scroll-lock)
+
+    Todo:
+
+        [ ] Add element attributes that can automatically wire up labelledby and describedby
+        [ ] Fix issue with returning focus to previous focused element in Firefox
+        [ ] Should we add some way to return a value when closing?
+
+    Implementation notes:
+
+        - We use v-show instead of v-if so that the dialog element is always in the
+          element tree, making it possible to keep references to the dialog element
+          from the  parent component.
+
+
+
+-->
+
+<template>
+    <px-portal :disabled="!portalEnabled">
+        <transition :name="transitionName">
+            <div
+                v-show="visibleSync"
+                :class="['px-modal', modalClass]"
+                ref="modal"
+                :style="{ zIndex: zStart + currentLayerIndex }"
+            >
+                <div
+                    v-if="hasOverlay"
+                    ref="overlay"
+                    :class="['px-modal__overlay', overlayClass]"
+                    @click="onOverlayClick"
+                    role="region"
+                >
+                    <slot name="overlay-content" />
+                </div>
+                <div
+                    ref="dialog"
+                    :class="['px-modal__dialog', dialogClass]"
+                    :aria-labelledby="labelledBy"
+                    aria-modal="true"
+                    role="dialog"
+                >
+                    <slot />
+                </div>
+            </div>
+        </transition>
+    </px-portal>
+</template>
+
+<script>
+import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import PxPortal from './PxPortal.vue';
+
+const TABABLE_ELEMENTS = [
+    'button',
+    '[href]:not(.disabled)',
+    'input',
+    'select',
+    'textarea',
+    '[tabindex]',
+    '[contenteditable]',
+];
+
+// // Query the DOM for nodes matching the given selector, scoped to context (or
+// // the whole document)
+// function $$(selector, context) {
+//     if (!process.server) {
+//         return Array.prototype.slice.call((context || document).querySelectorAll(selector));
+//     }
+// }
+
+let globalLayerIndex = 0;
+
+export default {
+    name: 'PxModal',
+    components: {
+        PxPortal,
+    },
+    props: {
+        // Controls whether the dialog is visible
+        visible: { type: Boolean, default: false },
+
+        // A class set on the popup itself (equivalent to just class on most components)
+        modalClass: { type: String, default: '' },
+
+        // A class set on the dialog element
+        dialogClass: { type: String, default: '' },
+
+        // A class set on the overlay element
+        overlayClass: { type: String, default: '' },
+
+        // Whether to enable the portal (foces element end of DOM)
+        portalEnabled: { type: Boolean, default: true },
+
+        // sets the aria-labelledby property on the dialog element
+        labelledBy: { type: String, default: '' },
+
+        // Controls whether the dialog is visible
+        hasOverlay: { type: Boolean, default: true },
+
+        // When true, click the overlay will close the popup
+        overlayClose: { type: Boolean, default: true },
+
+        // Name for a transition on the dialog element (the use of the portal
+        // means that the transition element needs to be internal to the component)
+        transitionName: { type: String, default: null },
+
+        // Selector to find the first element that gets focus when focus is set on the dialog
+        autoFocusSelector: { type: String, default: '[autofocus]' },
+
+        // automatically move focus to the contents of the modal when opened
+        autoFocusEnabled: { type: Boolean, default: true },
+
+        // automatically restore focus with then modal closes
+        restoreFocusEnabled: { type: Boolean, default: true },
+
+        // whether to disable scrolling when the modal is open
+        disablesScroll: { type: Boolean, default: true },
+
+        // if ture, esc key will close the popup
+        escCloses: { type: Boolean, default: true },
+
+        // The starting point for the z-index (note: incremented as more layers of popups are opened
+        // to ensure that the last opened from the same starting z will be on top of each other)
+        zStart: { type: Number, default: 999999 },
+    },
+
+    data() {
+        return {
+            visibleSync: false,
+            hideSource: null,
+            currentLayerIndex: 0,
+        };
+    },
+
+    watch: {
+        visible: {
+            immediate: true,
+            handler(nv) {
+                this.visibleSync = nv;
+            },
+        },
+
+        visibleSync: {
+            immediate: true,
+            handler(nv, ov) {
+                if (!process.server) {
+                    // show
+                    if (ov === false && nv === true) {
+                        globalLayerIndex++;
+                        this.currentLayerIndex = globalLayerIndex;
+                    }
+
+                    // hide
+                    if (ov === true && nv === false) {
+                        setTimeout(() => {
+                            globalLayerIndex--;
+                        }, 30);
+                    }
+
+                    if (this.visibleTimeout) {
+                        clearTimeout(this.visibleTimeout);
+                    }
+
+                    if (nv) {
+                        this.visibleTimeout = setTimeout(() => {
+                            // disable scrolling on the body
+                            if (this.disablesScroll) {
+                                disableBodyScroll(this.$refs.modal, { reserveScrollBarGap: true });
+                            }
+
+                            // handle key events at the document level
+                            document.addEventListener('keydown', this.onKey);
+
+                            // track the element that was focused before the modal became visible
+                            this.previousActiveElement = document.activeElement;
+
+                            // focus the first focusable element (or autofocus element if set)
+                            if (this.autoFocusEnabled) {
+                                let focusables = this.getFocusableChildren();
+                                let dialogFocusable = this.$refs.modal
+                                    ? this.$refs.modal.querySelector(this.autoFocusSelector)
+                                    : null;
+                                let focused = dialogFocusable || focusables[0];
+                                if (focused) {
+                                    focused.focus();
+                                }
+                            }
+
+                            clearTimeout(this.visibleTimeout);
+                            this.$emit('show');
+                        }, 0);
+
+                        // event
+                        this.$emit('update:visible', true);
+                    } else {
+                        // restore previous state
+                        this.restoreNonModalState();
+
+                        // event
+                        this.$emit('update:visible', false);
+                    }
+                }
+
+                if (!nv) {
+                    this.$emit('hide', this.hideSource);
+                }
+            },
+        },
+    },
+
+    beforeDestroy() {
+        this.restoreNonModalState();
+    },
+
+    methods: {
+        restoreNonModalState() {
+            if (this.visibleTimeout) {
+                clearTimeout(this.visibleTimeout);
+            }
+
+            // reenable body scrolling
+            setTimeout(() => {
+                // TODO should we do this based on currentLayer?
+                clearAllBodyScrollLocks();
+            }, 0);
+
+            // remove the event handler
+            document.removeEventListener('keydown', this.onKey);
+
+            // restore focus
+            if (this.previousActiveElement && this.restoreFocusEnabled) {
+                this.previousActiveElement.focus();
+                this.previousActiveElement = null;
+            }
+        },
+        getFocusableChildren(onlyVisible) {
+            let f = [...this.$refs.modal.querySelectorAll(TABABLE_ELEMENTS.join(','))];
+            ///let f = $$(TABABLE_ELEMENTS.join(','), this.$refs.modal);
+
+            if (onlyVisible) {
+                f = f.filter(child => {
+                    return (
+                        child.tabIndex >= 0 &&
+                        !!(child.offsetWidth || child.offsetHeight || child.getClientRects().length)
+                    );
+                });
+            }
+
+            return f.sort((a, b) => {
+                if (a.tabIndex > b.tabIndex) {
+                    return 1;
+                }
+                if (a.tabIndex < b.tabIndex) {
+                    return -1;
+                }
+                return 0;
+            });
+        },
+        onKey(e) {
+            if (this.visibleSync) {
+                if (e.keyCode === 27 && this.escCloses) {
+                    this.onEsc(e);
+                } else if (e.keyCode === 9) {
+                    this.onTab(e);
+                }
+            }
+        },
+
+        onTab(e) {
+            // Refresh this on every tab press in case visibility of something has changed
+            let focusables = this.getFocusableChildren();
+            let focusedIndex = focusables.indexOf(document.activeElement);
+
+            // Trap tab focus
+            if (e.shiftKey && focusedIndex <= 0) {
+                focusables[focusables.length - 1].focus();
+                e.preventDefault();
+            } else if (!e.shiftKey && focusedIndex === focusables.length - 1) {
+                focusables[0].focus();
+                event.preventDefault();
+            }
+        },
+        onOverlayClick() {
+            if (this.overlayClose) {
+                this.hide('overlay');
+                this.$emit('overlay-click');
+            }
+        },
+        onEsc() {
+            if (this.currentLayerIndex == globalLayerIndex) {
+                this.hide('esc');
+                this.$emit('cancel');
+            }
+        },
+        show() {
+            this.hideSource = null;
+            this.visibleSync = true;
+        },
+        hide(hideSource) {
+            this.hideSource = hideSource;
+            this.visibleSync = false;
+        },
+
+        getDialogElement() {
+            return this.$refs.dialog;
+        },
+    },
+};
+</script>
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-modal {
+    position: relative;
+
+    //z-index: 9999999;
+
+    // default overlay
+    &__overlay {
+        z-index: 1;
+        @include fixed;
+    }
+
+    &__dialog {
+        z-index: 2;
+        position: relative;
+    }
+}
+</style>

package/components/PxNineGrid.vue

@@ -0,0 +1,94 @@
+<template>
+    <div :class="bem({ debug: debug })" :style="borderStyle">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'nine-grid',
+    props: {
+        // the image source for the ninegrid border
+        src: { type: String, default: null },
+
+        // original width and height of the source
+        srcWidth: { type: Number, default: 100 },
+        srcHeight: { type: Number, default: 100 },
+
+        // a number, an array of 1-4 (top,right,bottom,left) numbers or a space separated string of 1-4
+        // numbers that represent the border-image-slices values expressed in px
+        slice: { default: () => [20] },
+
+        // scale for border image (does not affect the slot content)
+        scale: { type: Number, default: 1 },
+
+        // when true, the ninegrid image will behave like a background instead of a border (this is
+        // accomplished by creating an additional element behind the content)
+        backgroundMode: { type: Boolean, default: true },
+
+        // flag to indicate debug features are active
+        debug: { type: Boolean, default: false },
+    },
+    computed: {
+        sliceArray() {
+            if (!isNaN(this.slice)) {
+                return [this.slice, this.slice, this.slice, this.slice];
+            }
+
+            let arr = Array.isArray(this.slice)
+                ? this.slice
+                : this.slice.split(' ').map(v => parseInt(v));
+
+            if (arr.length == 1) {
+                return [arr[0], arr[0], arr[0], arr[0]];
+            }
+
+            if (arr.length == 2) {
+                return [arr[0], arr[1], arr[0], arr[1]];
+            }
+
+            if (arr.length == 3) {
+                return [arr[0], arr[1], arr[2], arr[1]];
+            }
+
+            return arr;
+        },
+
+        borderStyle() {
+            //console.log(`this.slice: 👉 ${JSON.stringify(this.slice, null, 4)}`);
+
+            let borderImageSlice = this.sliceArray
+                .map((v, idx) => {
+                    return (v / (idx % 2 ? this.srcWidth : this.srcHeight)) * 100 + '%';
+                })
+                .join(' ');
+
+            return {
+                borderStyle: 'solid',
+                borderWidth: this.sliceArray.map(v => v * this.scale + 'px').join(' '),
+                borderImageSource: `url('${this.src}')`,
+                borderImageSlice: borderImageSlice + 'fill',
+            };
+        },
+    },
+    methods: {},
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.nine-grid {
+    position: relative;
+    box-sizing: border-box;
+    border: 2px solid white;
+
+    &--debug {
+        @include after() {
+            @include abs();
+            border: 2px dashed red;
+            pointer-events: none;
+        }
+    }
+}
+</style>

package/components/PxPivot.vue

@@ -0,0 +1,207 @@
+<!--
+    Simple pivot component (basically tabs but uses an underline to show selection). Uses
+    BaseItemsSelect so it can easily be paired with other BaseItemSelect components.
+
+
+-->
+<template>
+    <div :class="bem({ scrolls: scrolls, animated: animated })">
+        <div :class="bem('tabs-align', { justify: justify })">
+            <div ref="tabs" :class="bem('tabs')">
+                <button
+                    :class="[bem('tab-base', { selected: isItemSelected(item) }), tabClass]"
+                    v-for="item in items"
+                    :key="getItemKey(item)"
+                    :disabled="getItemDisabled(item)"
+                    @click="itemClick(item)"
+                >
+                    <span :ref="getTabContentRefName(item)">
+                        <slot :item="item">
+                            {{ getItemLabel(item) }}
+                        </slot>
+                    </span>
+                </button>
+
+                <div
+                    :class="[bem('selector-base'), selectorClass]"
+                    :style="{
+                        left: cssPx(selectorOffset),
+                        width: cssPx(selectorWidth),
+                    }"
+                ></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import PxBaseItemsSelect from './PxBaseItemsSelect.vue';
+import PxBaseResize from './PxBaseResize.vue';
+import utils from '../utils/utils.js';
+
+export default {
+    name: 'px-pivot',
+    components: {},
+    mixins: [PxBaseResize, PxBaseItemsSelect],
+    props: {
+        tabClass: { type: String, default: 'px-pivot__tab' },
+        selectorClass: { type: String, default: 'px-pivot__selector' },
+
+        // if true scrolls horizontally when no more room
+        scrolls: { type: Boolean, default: true },
+
+        // how to justify the tabs within the container (start | center | end)
+        justify: { type: String, default: 'center' },
+
+        // overwrite default
+        autoSelectFirst: { type: Boolean, default: true },
+    },
+    data() {
+        return {
+            selectorVisible: false,
+            selectorOffset: 0,
+            selectorWidth: 0,
+            animated: false,
+        };
+    },
+    // computed: {},
+    watch: {
+        syncSelected(nv) {
+            if (nv) {
+                this.updateSelector();
+            }
+        },
+        items: {
+            deep: true,
+            handler() {
+                this.$nextTick(() => {
+                    this.updateSelector();
+                });
+            },
+        },
+    },
+
+    methods: {
+        resize() {
+            this.updateSelector();
+        },
+        updateSelector() {
+            // don't update if 0 size
+            if (this.$el?.offsetWidth === 0) {
+                return;
+            }
+
+            if (!this.selectedItem) {
+                return;
+            }
+
+            const selected = this.$refs[this.getTabContentRefName(this.selectedItem)][0];
+            const selectedRect = utils.getClientRect(selected, this.$refs.tabs);
+
+            if (selected) {
+                this.selectorVisible = true;
+                this.selectorOffset = selectedRect.left;
+                this.selectorWidth = selectedRect.width;
+            } else {
+                this.selectorVisible = false;
+            }
+
+            if (this.scrolls) {
+                selected.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+            }
+        },
+
+        getTabContentRefName(item) {
+            if (!item) {
+                return null;
+            }
+            return 'tab' + this.getItemKey(item);
+        },
+
+        itemClick(item) {
+            this.animated = true;
+            this.selectItemOnly(item);
+            setTimeout(() => {
+                this.animated = false;
+            }, 100);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-pivot {
+    display: grid;
+    grid-template-columns: minmax(min-content, 100%);
+
+    // disable animation until loaded
+    &--loading {
+        * {
+            transition: none !important;
+        }
+    }
+
+    --px-pivot-tab-padding: 0.5em;
+    --px-pivot-tab-offset: -0.5em;
+
+    &--scrolls {
+        max-width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        @include invisible-scrollbar();
+    }
+
+    &__tabs-align {
+        min-width: 100%;
+        display: flex;
+        position: relative;
+        &--justify-center {
+            justify-content: center;
+        }
+        &--justify-start {
+            justify-content: flex-start;
+            left: var(--px-pivot-tab-offset);
+        }
+
+        &--justify-end {
+            justify-content: flex-end;
+            right: var(--px-pivot-tab-offset);
+        }
+    }
+
+    &__tabs {
+        position: relative;
+        display: flex;
+        flex: none;
+    }
+    &__tab-base {
+        @include control-reset();
+        background-color: transparent;
+    }
+
+    &__tab {
+        flex: none;
+        padding: var(--px-pivot-tab-padding);
+        cursor: pointer;
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+
+    &__selector-base {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        background-color: currentColor;
+    }
+
+    &--animated & {
+        &__selector {
+            @include transition(width left);
+        }
+    }
+}
+</style>