@thinkpixellab-public/px-vue 3.0.1

package/components/PxFit.vue

@@ -0,0 +1,274 @@
+<!--
+
+    <px-fit :fits="['lg', 'md', 'sm']" :debug="true">
+        <template #default="{ fit }">
+            <div :class="`fit fit--${fit}`">
+                <span v-if="fit == 'lg'">LARGE</span>
+                <span v-if="fit == 'md'">MEDIUM</span>
+                <span v-if="fit == 'sm'">SMALL</span>
+                One Two Three Four Five Size Seven Eight Nine Ten
+            </div>
+        </template>
+    </px-fit>
+
+-->
+<template>
+    <div :class="bem({ debug: debug, fitting: fitting })">
+        <div ref="outer" :class="bem('outer')" :style="{ opacity: resizing ? 0 : null }">
+            <slot
+                name="default"
+                v-bind="{
+                    fit: fit,
+                    fitting: fitting,
+                }"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import PxBaseResize from './PxBaseResize.vue';
+
+export default {
+    name: 'px-fit',
+    mixins: [PxBaseResize],
+    props: {
+        // list of "fits" that will be attempted during resize (must be ordered small to large, will
+        // be attempted from large to small)
+        fits: { type: Array, default: () => ['sm', 'md', 'lg'] },
+
+        // by default the last fit attempted will be kept when no fit is found,
+        // but you can set this to specific a different fallback
+        fallback: { type: String, default: null },
+
+        // whether to width, height or both when looking for a fit
+        mode: { type: String, default: 'both' },
+
+        // disables resize events (and fitting) when true
+        disabled: { type: Boolean, default: false },
+
+        // wait this amount of time (in ms) before restoring the sized element after a resize pass
+        // (setting this to something other than 0 can help prventing flickering but comes at the
+        // expense of the element disappearing during resize)
+        restoreDelay: { type: Number, default: 0 },
+
+        // whether to show the debug version of the component
+        debug: { type: Boolean, default: false },
+
+        // override the function that evaluates whether a particular fit is valid (called after the
+        // component has been placed into the "fit" state, takes the current mode, available
+        // outer size and fit being evaluated as parameters and should return true or false)
+        testFitFunction: { default: null },
+    },
+
+    data() {
+        return {
+            fit: null,
+            selectedFit: null,
+            fitting: false,
+            availableSize: { w: 0, h: 0 },
+            outerSize: { w: 0, h: 0 },
+        };
+    },
+
+    computed: {
+        resizeDebounceValue() {
+            return 200;
+        },
+
+        fitMap() {
+            let map = this.fits?.reduce((map, val, idx) => {
+                return (map[val] = idx);
+            }, {});
+            map.fit = this.fits.indexOf(this.fit);
+            map.fitting = this.fitting;
+            return map;
+        },
+    },
+
+    watch: {
+        selectedFit(nv) {
+            this.$emit('fit-changed', nv);
+        },
+    },
+
+    methods: {
+        testFitDefault(mode, available, fit) {
+            const outer = this.$refs.outer;
+
+            if (outer) {
+                const outerSize = {
+                    w: outer.offsetWidth,
+                    h: outer.offsetHeight,
+                };
+
+                let doesFit = true;
+
+                if (mode == 'width' || mode == 'both') {
+                    doesFit = doesFit && available.w >= outerSize.w;
+                }
+                if (mode == 'height' || mode == 'both') {
+                    doesFit = doesFit && available.h >= outerSize.h;
+                }
+
+                if (this.debug) {
+                    console.log(`${fit}: ${doesFit}`);
+                }
+
+                return doesFit;
+            }
+            return false;
+        },
+
+        async tryFit(fit, signal) {
+            if (process.server) {
+                return;
+            }
+
+            const promise = new Promise((resolve, reject) => {
+                // on the next frame, check the size
+                this.fit = fit;
+
+                let timeout;
+
+                const abortListener = () => {
+                    if (timeout) {
+                        clearTimeout(timeout);
+                    }
+                    signal.removeEventListener('abort', abortListener);
+                    reject();
+                };
+
+                signal.addEventListener('abort', abortListener);
+
+                timeout = setTimeout(
+                    () => {
+                        signal.removeEventListener('abort', abortListener);
+
+                        const testFn = this.testFitFunction || this.testFitDefault;
+                        const doesFit = testFn(this.mode, this.availableSize, fit);
+
+                        resolve(doesFit);
+                    },
+                    this.debug ? 1000 : this.restoreDelay
+                );
+            });
+
+            return promise;
+        },
+
+        async tryAllFits() {
+            if (this.aborter) {
+                this.aborter.abort();
+            }
+
+            this.aborter = new AbortController();
+            let signal = this.aborter.signal;
+
+            // get the current size
+            this.availableSize = {
+                w: this.$el.clientWidth,
+                h: this.$el.clientHeight,
+            };
+
+            // places the component into a state where it can be sized independently
+            this.fitting = true;
+
+            let fit;
+
+            for (let i = this.fits.length - 1; i >= 0 && !signal.aborted; i--) {
+                fit = this.fits[i];
+
+                try {
+                    const doesFit = await this.tryFit(fit, signal);
+                    if (doesFit) {
+                        // we found a fit so clean up and return
+                        this.selectedFit = fit;
+                        this.aborter = null;
+                        this.abortSignal = null;
+                        this.fitting = false;
+                        return;
+                    }
+                } catch {
+                    // aborted
+                    return;
+                }
+            }
+
+            // no fit was found
+
+            // set the fallback if specified (otherwise last tested will be maintained)
+            this.fit = this.fallback || this.fit;
+            this.selectedFit = this.fit;
+            this.aborter = null;
+            this.abortSignal = null;
+            this.fitting = false;
+        },
+
+        resizeStarted() {
+            this.$emit('resize-start');
+        },
+        async resize() {
+            if (!this.disabled) {
+                this.outerSize = {
+                    w: this.$el.offsetWidth,
+                    h: this.$el.offsetHeight,
+                };
+
+                await this.tryAllFits();
+
+                this.$emit('resize-end');
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-fit {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
+
+    &__outer {
+        position: absolute;
+        left: 0;
+        width: 0;
+        height: 100%;
+        width: 100%;
+        display: grid;
+        grid-template-columns: 100%;
+        grid-template-rows: 100%;
+        > * {
+            grid-area: 1 / 1;
+        }
+
+        @include transition(opacity, $dur: 100ms);
+    }
+
+    &--fitting & {
+        width: 100vh;
+        &__outer {
+            position: fixed;
+            overflow: visible;
+            top: 0;
+            left: 0;
+            width: auto;
+            height: auto;
+            pointer-events: none;
+            opacity: 0;
+        }
+    }
+
+    &--debug.px-fit--fitting & {
+        &__outer {
+            opacity: 1;
+            background-color: white;
+        }
+    }
+}
+</style>

package/components/PxFlex.vue

@@ -0,0 +1,93 @@
+<!--
+    This is a simple wrapper for flexbox layout. It exists to keep markup simple and remove the need
+    to write custom css when all you need is common flexbox functionality.
+
+    Note: this is no always the right choice. Use regular flex layout if you need fine control or
+    the ability to modify the layout wiht media queries.
+
+    Some additional conveniences:
+
+    - Map common properties (vertical, align, justify, etc.) to props.
+
+    - Convenient item spacing with a "gap" property (specify without units to use as a multiple
+      of the sp(1) function, otherwise specify specific units.)
+-->
+
+<template>
+    <component
+        :is="tag"
+        :class="className"
+        :style="{
+            gap: gapHasUnits ? gap : `calc(var(--gap-sp) * ${gap})`,
+            '--flex-gap-sp': gapHasUnits ? null : gap,
+        }"
+    >
+        <!-- no spacing, so regular slot -->
+        <slot />
+    </component>
+</template>
+
+<script>
+const alignments = ['start', 'center', 'end', 'stretch', 'around', 'between', 'baseline'];
+
+export default {
+    name: 'px-flex',
+    props: {
+        tag: { type: String, default: 'div' },
+        vertical: { type: Boolean, default: false },
+        inline: { type: Boolean, default: false },
+        reverse: { type: Boolean, default: false },
+        wrap: { type: Boolean, default: false },
+        align: { type: String, default: 'stretch', validator: val => alignments.includes(val) },
+        justify: { type: String, default: 'start', validator: val => alignments.includes(val) },
+        gap: { default: null },
+    },
+    // data() { return { b: 0 }; },
+    computed: {
+        className() {
+            let c = 'px-flex';
+
+            if (this.reverse) {
+                c = 'px-flex-row-reverse';
+            }
+
+            if (this.vertical) {
+                c = 'px-flex-column';
+                if (this.reverse) {
+                    c = 'px-flex-column-reverse';
+                }
+            }
+
+            if (this.inline) {
+                c += ' px-flex-inline';
+            }
+
+            if (this.wrap) {
+                c += ' px-flex-wrap';
+            }
+
+            // align-justify
+            c += ` px-flex-items-${this.align} px-flex-justify-${this.justify}`;
+
+            return c;
+        },
+        gapHasUnits() {
+            return this.gap && parseFloat(this.gap) != this.gap;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '/px-styles.config.scss' as *;
+
+// generate the atoms classes with px-flex as a prefix
+@include atoms-flex(px-flex);
+
+.px-flex,
+.px-flex-row-reverse,
+.px-flex-column,
+.px-flex-column-reverse {
+    --gap-sp: #{sp(1)};
+}
+</style>

package/components/PxFloat.vue

@@ -0,0 +1,32 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()"></div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+export default {
+    name: 'px-float'
+    // components: { Component },
+    // mixins: [ Mixin ],
+    props: {
+        a: { type: Boolean, default: false }
+    },
+    // data() { return { b: 0 }; },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/include.scss';
+.px-float {
+    // add styles here
+}
+</style>

package/components/PxIcon.vue

@@ -0,0 +1,43 @@
+<!--
+
+More or less a wrapper for PxSvg with a couple of optimizations for icons:
+
+1. Default replacements will swap the color black (in various forms) to 'currentColor' so black
+   icons will inherit the current test color.
+
+2. If size is specified as a number (i.e. no units), then the default unit is assumed to be ems
+   (instead of pixels).
+
+-->
+
+<script>
+import PxSvg from './PxSvg.vue';
+export default {
+    name: 'px-icon',
+    mixins: [PxSvg],
+    props: {
+        replacements: {
+            type: Object,
+            default: () => {
+                return { '#000000': 'currentColor', '#000': 'currentColor', black: 'currentColor' };
+            },
+        },
+    },
+    computed: {
+        calcUnit() {
+            if (typeof this.size == 'number') {
+                return 'em';
+            }
+            return this.size.replace(this.calcSize, '') || 'em';
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.px-icon {
+    color: inherit;
+    display: inline-block;
+    line-height: 1;
+}
+</style>

package/components/PxIconButton.vue

@@ -0,0 +1,115 @@
+<!--
+    Wraps a simple icon in a button and provides some basic styling options via variants:
+
+    - basic - pointer cursor only (all of the other variants also have a pointer cursor)
+    - default - transform on hover and active
+    - accent - accent colored icon (assumes currentColor usage in the icon)
+    - accent-hover - accent colored icon + subtle color effects for hover / active
+    - white - white colored icon
+
+    For the most part, all variants can be mixed and matched (e.g. 'default white' to get white and
+    transforms for hover and active)
+
+-->
+<template>
+    <button
+        :class="
+            bem({
+                ...variantsMap,
+                checked: toggles && syncChecked,
+                unchecked: toggles && !syncChecked,
+            })
+        "
+        v-on="$listeners"
+        @click="tryToggleChecked"
+    >
+        <inline-svg
+            :transformSource="transform"
+            :src="src"
+            :viewBox="svgViewBox"
+            :height="calcHeight"
+            :width="calcWidth"
+        />
+    </button>
+</template>
+
+<script>
+import PxIcon from './PxIcon.vue';
+import PxBaseVariants from './PxBaseVariants.vue';
+import PxBaseToggle from './PxBaseToggle.vue';
+
+export default {
+    name: 'px-icon-button',
+    mixins: [PxIcon, PxBaseVariants, PxBaseToggle],
+    props: {
+        // set to true for icon to toggle on and off
+        toggles: { type: Boolean, default: false },
+    },
+    methods: {
+        tryToggleChecked() {
+            if (this.toggles) {
+                this.toggleChecked();
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-icon-button {
+    &--unchecked {
+        opacity: 0.5;
+        &:hover {
+            opacity: 0.66;
+        }
+    }
+
+    // VARIANTS
+
+    &--default {
+        @include button-icon(
+            (
+                focus: control-focus-style(outline),
+                padding: 0,
+                min-height: 0,
+            )
+        );
+    }
+
+    &--basic {
+        @include control-reset();
+        background-color: transparent;
+        min-width: 0;
+        min-height: 0;
+        background-color: transparent;
+        padding: 0;
+        border-radius: 0.05em;
+        line-height: 1;
+        @include focus() {
+            outline-offset: 0.1em;
+            outline: 1px dotted currentColor;
+        }
+        cursor: pointer;
+    }
+
+    &--accent {
+        color: accent();
+    }
+
+    &--white {
+        color: white;
+    }
+
+    &--accent-hover {
+        @include transition(transform color);
+        &:hover {
+            color: accent(2);
+        }
+        &:active {
+            color: accent(-2);
+        }
+    }
+}
+</style>

package/components/PxIdUniquer.vue

@@ -0,0 +1,59 @@
+<!-- Makes IDs unique with an SVG -->
+
+<script>
+let _idIncrementer = 0;
+
+export default {
+    data() {
+        return {
+            idSuffix: _idIncrementer++,
+        };
+    },
+    props: {
+        ids: { type: Array, default: () => [] },
+    },
+    computed: {
+        idReferences() {
+            return this.ids.map(id => `#${id}`);
+        },
+    },
+    methods: {
+        replaceIds(vNode) {
+            if (!vNode) {
+                return;
+            }
+
+            const { attrs } = vNode.data ? vNode.data : {};
+            if (attrs) {
+                Object.keys(attrs).forEach(k => {
+                    if (k === 'id') {
+                        // check for an id we are replacing
+                        if (this.ids.includes(attrs[k])) {
+                            attrs[k] += `_${this.idSuffix}`;
+                        }
+                    } else {
+                        const attrVal = attrs[k];
+
+                        this.idReferences.forEach(idRef => {
+                            if (attrVal.indexOf(idRef) > -1) {
+                                attrs[k] = attrVal.replace(idRef, `${idRef}_${this.idSuffix}`);
+                            }
+                        });
+                    }
+                });
+            }
+
+            if (vNode.children && vNode.children.length) {
+                vNode.children.forEach(vNodeChild => {
+                    this.replaceIds(vNodeChild);
+                });
+            }
+        },
+    },
+    render(h) {
+        this.$slots.default.forEach(vNode => this.replaceIds(vNode));
+
+        return h('div', {}, this.$slots.default);
+    },
+};
+</script>