@thinkpixellab-public/px-vue 3.0.1

package/dev/demos/DemoPicker.vue

@@ -0,0 +1,79 @@
+<!--
+    <demo-picker :demos="['PxDatePicker', 'PxDropdown']">
+        <template #default="{ demoComponent }">
+            <component :is="demoComponent" />
+        </template>
+    </demo-picker>
+-->
+<template>
+    <div :class="bem()">
+        <div :class="bem('main')">
+            <slot name="default" :demoComponent="demoComponent"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+
+export default {
+    name: 'demo-picker',
+    // mixins: [],
+    // components: {
+    //     MyComponent
+    // },
+    props: {
+        demos: { type: Array, default: null },
+        storageKey: { type: String, default: 'demo' },
+    },
+    data() {
+        return {
+            demoComponent: null,
+            dropdownVisible: false,
+        };
+    },
+    mounted() {
+        const demo = this.getDemoSelection();
+        if (demo && demo.trim()) {
+            this.setDemoSelection(demo);
+        }
+
+        this.demoComponent = demo;
+        console.log(this.demoComponent);
+
+        document.addEventListener('keydown', e => {
+            if (e.key == 'F1') {
+                this.dropdownVisible = !this.dropdownVisible;
+            }
+        });
+    },
+    // watch: {},
+    // computed: {}
+    methods: {
+        setDemoSelection(demo) {
+            if (window?.localStorage) {
+                window.localStorage.setItem(this.storageKey, demo);
+            }
+        },
+        getDemoSelection() {
+            return utils.getQueryParam('demo') || window?.localStorage?.getItem(this.storageKey);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+// @import '@/styles/include.scss';
+// @import '@/styles/site-utils.scss';
+.demo-picker {
+    &__main {
+        display: grid;
+        min-width: 100vw;
+        min-height: 100vh;
+    }
+
+    &__toolbar {
+        background-color: #23272e;
+    }
+}
+</style>

package/dev/dev.vue

@@ -0,0 +1,56 @@
+<template>
+    <div id="app">
+        <component :is="componentToRender" v-if="componentToRender" />
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+
+import PxVueTest from '../components/PxVueTest.vue';
+import DemoPxSlides from './demos/Demo-PxSlides.vue';
+import DemoPxSideDrawer from './demos/Demo-PxSideDrawer.vue';
+import DemoPxCardGrid from './demos/Demo-PxCardGrid.vue';
+import DemoPxSlideTransition from './demos/Demo-PxSlideTransition.vue';
+import DemoPxSwiper from './demos/Demo-PxSwiper.vue';
+import DemoPxBaseDrag from './demos/Demo-PxBaseDrag.vue';
+import DemoPxStylesPreview from './demos/Demo-PxStylesPreview.vue';
+import DemoPxPivot from './demos/Demo-PxPivot.vue';
+
+export default Vue.extend({
+    components: {
+        PxVueTest,
+        DemoPxSlides,
+        DemoPxSideDrawer,
+        DemoPxCardGrid,
+        DemoPxSlideTransition,
+        DemoPxSwiper,
+        DemoPxBaseDrag,
+        DemoPxStylesPreview,
+        DemoPxPivot,
+    },
+    name: 'ServeDev',
+    data() {
+        return {
+            componentToRender: null,
+        };
+    },
+    computed: {},
+    mounted() {
+        const params = new Proxy(new URLSearchParams(window.location.search), {
+            get: (searchParams, prop) => searchParams.get(prop),
+        });
+        this.componentToRender = params.component || 'PxVueTest';
+        console.log(`this.componentToRender: ${this.componentToRender}`);
+    },
+});
+</script>
+<style>
+html,
+body {
+    margin: 0;
+    padding: 0;
+    min-width: 100vw;
+    min-height: 100vh;
+}
+</style>

package/dev/serve.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import dev from './dev.vue';
+
+import common from '../plugins/common.js';
+Vue.use(common);
+
+import commonLib from '../plugins/common-lib.js';
+Vue.use(commonLib);
+
+import commonClient from '../plugins/common-client.js';
+Vue.use(commonClient);
+
+Vue.config.productionTip = false;
+
+new Vue({
+    render: h => h(dev),
+}).$mount('#app');

package/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "@thinkpixellab-public/px-vue",
+    "version": "3.0.1",
+    "description": "General purpose Vue components and helpers that can be used across projects.",
+    "author": "Pixel Lab",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/thinkpixellab/px-vue.git"
+    },
+    "scripts": {
+        "serve": "vue-cli-service serve dev/serve.js"
+    },
+    "dependencies": {
+        "@popperjs/core": "^2.11.5",
+        "@thinkpixellab-public/px-styles": "^3.6.2",
+        "@thinkpixellab-public/px-vue-tester": "^2.0.0",
+        "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
+        "body-scroll-lock": "^3.1.5",
+        "chrono-node": "^2.3.8",
+        "dateformat": "^5.0.3",
+        "debounce": "^1.2.1",
+        "gsap": "^3.10.4",
+        "tiny-date-picker": "^3.2.8",
+        "tiny-swiper": "^2.2.0",
+        "vue-inline-svg": "^2.1.0"
+    },
+    "devDependencies": {
+        "@vue/babel-preset-app": "^5.0.1",
+        "@vue/cli-plugin-babel": "~4.5.0",
+        "@vue/cli-plugin-eslint": "~4.5.0",
+        "@vue/cli-service": "~4.5.0",
+        "@vue/eslint-config-prettier": "^6.0.0",
+        "babel-eslint": "^10.1.0",
+        "core-js": "^3.21.1",
+        "eslint": "^6.7.2",
+        "eslint-plugin-prettier": "^3.3.1",
+        "eslint-plugin-vue": "^6.2.2",
+        "prettier": "^2.2.1",
+        "sass": "^1.49.9",
+        "sass-loader": "^8.0.2",
+        "vue": "^2.6.14",
+        "vue-template-compiler": "^2.6.14"
+    }
+}

package/plugins/common-client.js

@@ -0,0 +1,13 @@
+/**
+ * Installs common third-party Vue plugins, directives, filters, etc. Single point of entry for
+ * anything that can be "expected" to be there in most projects. This file is specifically for
+ * anything that only be loaded on the client (no ssr).
+ */
+
+import resize from '@thinkpixellab-public/vue-resize-directive';
+
+export default {
+    install(Vue) {
+        Vue.directive('resize', resize);
+    },
+};

package/plugins/common-lib.js

@@ -0,0 +1,4 @@
+/**
+ * Installs common third-party Vue plugins, directives, filters, etc. Single point of entry for
+ * anything that can be "expected" to be there in most projects.
+ */

package/plugins/common.js

@@ -0,0 +1,39 @@
+/**
+ * Installs common custom plugins, directives, filters, etc. Single point of entry for anything that
+ * can be "expected" to be there in most projects.
+ */
+
+import bem from '../utils/bem';
+import { cssPx, cssEm, cssPcnt, cssUrl } from '../utils/cssStr.js';
+import aspect from './filters/aspect.js';
+import kebab from './filters/kebab.js';
+import slug from './filters/slug.js';
+import spacenator from './filters/spacenator.js';
+import date from './filters/date.js';
+import eventBus from './mixins/eventBus.js';
+
+export default {
+    install(Vue) {
+        //  imported methods
+        Vue.prototype.bem = bem;
+        Vue.prototype.cssPx = cssPx;
+        Vue.prototype.cssEm = cssEm;
+        Vue.prototype.cssPcnt = cssPcnt;
+        Vue.prototype.cssUrl = cssUrl;
+
+        // filters
+        Vue.filter('aspect', aspect);
+        Vue.filter('kebab', kebab);
+        Vue.filter('slug', slug);
+        Vue.filter('spacenator', spacenator);
+        Vue.filter('date', date);
+
+        // event bus
+        eventBus.install(Vue);
+
+        // other
+        Vue.prototype.hasSlot = function (slotName) {
+            return this.$slots && slotName in this.$slots;
+        };
+    },
+};

package/plugins/filters/aspect.js

@@ -0,0 +1,14 @@
+// Converts an aspect string like '16:9' to it's numeric equivalent (e.g. '16:9' => 16/9  =>
+// 1.77778). If val is not a string, it returns val (so it's safe to pass numbers in because you'll
+// just get the number out).
+
+export default val => {
+    if (val && typeof val == 'string') {
+        let parts = val.split(':');
+        if (parts.length == 2) {
+            return parseFloat(parts[0]) / parseFloat(parts[1]);
+        }
+        return parseFloat(val);
+    }
+    return val;
+};

package/plugins/filters/date.js

@@ -0,0 +1,26 @@
+// Converts a date value or a date string to a date string using toLocaleDateString
+// Options reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+//
+// Example: {{ new Date() | date({ month: 'short', day: '2-digit' }) }} => May 18
+
+export default (date, options, locale) => {
+    if (!date) {
+        return '';
+    }
+
+    if (typeof date == 'string') {
+        try {
+            date = new Date(date);
+        } catch {
+            return date;
+        }
+    }
+
+    // needs to specically be undefined for it to infer correctly
+    locale = locale ? locale : undefined;
+
+    // no options?
+    options = options ? options : {};
+
+    return date.toLocaleDateString(locale, options);
+};

package/plugins/filters/kebab.js

@@ -0,0 +1,9 @@
+// Convert to camel case to kebab (i.e. hyphenated) case. For example: MyCoolComponent becomes
+// my-cool-component.
+
+export default val => {
+    if (val) {
+        return val.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+    return val;
+};

package/plugins/filters/phone.js

@@ -0,0 +1,7 @@
+// format as a standardized us phone number
+export default phone => {
+    if (phone) {
+        return phone.replace(/[^0-9]/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '$1.$2.$3');
+    }
+    return null;
+};

package/plugins/filters/slug.js

@@ -0,0 +1,26 @@
+// Converts a string to it's "slugified" equivalent (replaces spaces and punctuation with dashes,
+// removes weird characters, etc.)
+
+export default str => {
+    if (!str) {
+        return str;
+    }
+
+    str = str.replace(/^\s+|\s+$/g, ''); // trim
+    str = str.toLowerCase();
+
+    // remove accents, swap ñ for n, etc
+    var from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
+    var to = 'aaaaeeeeiiiioooouuuunc------';
+
+    for (var i = 0, l = from.length; i < l; i++) {
+        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
+    }
+
+    str = str
+        .replace(/[^a-z0-9 -]/g, '') // remove invalid chars
+        .replace(/\s+/g, '-') // collapse whitespace and replace by -
+        .replace(/-+/g, '-'); // collapse dashes
+
+    return str;
+};

package/plugins/filters/spacenator.js

@@ -0,0 +1,11 @@
+// Adds non-breaking space character to the end of a string to prevent typographical widows and
+// orphans.
+
+export default (str, spaceLength = 8, ignoreLength = 12, nbsp = '\xA0') => {
+    if (str.length <= ignoreLength || !spaceLength) {
+        return str;
+    }
+    let sp = Math.max(spaceLength, str.length - str.lastIndexOf(' ') + 1);
+    let rep = str.slice(sp * -1).replace(/ /g, nbsp);
+    return str.substring(0, str.length - sp) + rep;
+};

package/plugins/filters/stringToItems.js

@@ -0,0 +1,28 @@
+/*
+    Converts a simple array of strings to an array of string objects that can easily be used with
+    PxBaseItems or PxBaseItemsSelect.
+
+        <px-drop-down :items="['One', 'Two', 'Three'] | stringToItems" />
+
+    It will also parse a string by commas (and trim the results)...
+
+        <px-drop-down :items="'apple, orange, strawberry' | stringToItems" />
+
+    Keys are generated using the slug function, and no attempt is made to prevent duplicates.
+
+*/
+import slug from './slug.js';
+
+export default (value, delimiter = ',') => {
+    if (typeof value == 'string') {
+        value = value.split(delimiter).map(s => s.trim());
+    }
+
+    return value.map(str => {
+        return {
+            id: slug(str),
+            value: str,
+            label: str,
+        };
+    });
+};

package/plugins/filters/striphtml.js

@@ -0,0 +1,10 @@
+export default val => {
+    if (!process.server) {
+        var div = document.createElement('div');
+        div.innerHTML = val;
+        var text = div.textContent || div.innerText || '';
+        return text;
+    } else {
+        return '';
+    }
+};

package/plugins/mixins/eventBus.js

@@ -0,0 +1,23 @@
+export default {
+    install(Vue) {
+        if (process.server || Vue.prototype.$eventBus) {
+            return;
+        }
+
+        Vue.prototype.$eventBus = new Vue();
+
+        Vue.prototype.$globalEmit = function (eventName, values) {
+            if (!this.$eventBus) {
+                return;
+            }
+            this.$eventBus.$emit(eventName, values);
+        };
+
+        Vue.prototype.$globalOn = function (eventName, fn) {
+            if (!this.$eventBus) {
+                return;
+            }
+            this.$eventBus.$on(eventName, fn);
+        };
+    },
+};

package/px-styles.config.scss

@@ -0,0 +1,12 @@
+// forward the library (this has to come first per scss)
+@forward '@thinkpixellab-public/px-styles';
+
+// import the library (so we can configure it)
+@use '@thinkpixellab-public/px-styles' as *;
+
+// add configuration as needed (this is optional)
+@include config('colors:accent', #5157bd);
+@include config('controls:border-radius', 6px);
+
+// initialize
+@include init();

package/styles/helpers.scss

@@ -0,0 +1,14 @@
+/*
+    This file contains style helpers that support px-vue components. The file relies on px-styles
+    and does emit any css so it can be safely included in any component or other scss file.
+
+    To import include the following at the top of any scss file:
+
+        // import px-vue helpers
+        @use '@thinkpixellab/px-vue/styles/helpers.scss' as pxvue;
+
+    And then access mixins from the prefix pxvue (or import as * if you're feeling dangerous).
+
+*/
+
+@use '../styles/px.scss' as *;

package/styles/px.scss

@@ -0,0 +1,6 @@
+/*
+    px.scss
+*/
+
+// forward the library (this has to come first per scss)
+@forward '/px-styles.config.scss';

package/utils/balanceText.js

@@ -0,0 +1,123 @@
+/*
+    Modified / componentized version of this library: https://github.com/nytimes/text-balancer
+
+    Changes:
+
+    1.  Use ES6 exports
+
+    2.  Old version was designed to run on it's own (maintain a list of elements to be
+        updated and then update them on window resize). We removed all of the resize
+        events and collection stuff. Instead, we just export the core function that
+        balances a single element.
+
+    3.  Add the "adjust" amount to the final max width to give the text layout a more
+        natural look.
+
+    Usage:
+
+        import balanceText from '~/utils/balanceText.js';
+        balanceText(element);
+
+*/
+
+// HELPER FUNCTION -- initializes recursive binary search
+var balanceText = function (element) {
+    if (textElementIsMultipleLines(element)) {
+        element.style.maxWidth = '';
+        squeezeContainer(element, element.clientHeight, 0, element.clientWidth);
+    }
+};
+
+// Adjust the final maxwidth by this amount to give a more natural
+// look to the balanced text.
+const ADJUST = 1.15;
+
+// Make the headline element as narrow as possible while maintaining
+// its current height (number of lines). Binary search.
+function squeezeContainer(headline, originalHeight, bottomRange, topRange) {
+    var mid;
+    if (bottomRange >= topRange) {
+        headline.style.maxWidth = topRange * ADJUST + 'px';
+        return;
+    }
+    mid = (bottomRange + topRange) / 2;
+    headline.style.maxWidth = mid + 'px';
+
+    if (headline.clientHeight > originalHeight) {
+        // we've squoze too far and headline has spilled onto an additional line; recurse on wider range
+        squeezeContainer(headline, originalHeight, mid + 1, topRange);
+    } else {
+        // headline has not wrapped to another line; keep squeezing!
+        squeezeContainer(headline, originalHeight, bottomRange + 1, mid);
+    }
+}
+
+// Function to see if a headline is multiple lines we only want to break if the headline is multiple
+// lines. We achieve this by turning the first word into a span and then we compare the height of
+// that span to the height of the entire headline. If the headline is bigger than the span by 10px
+// we balance the headline.
+function textElementIsMultipleLines(element) {
+    if (!element) {
+        console.warn('textElementIsMultipleLines called with no element');
+        return false;
+    }
+
+    // try to move deeper into the element
+
+    try {
+        if (element.nodeType == 1) {
+            while (element.firstChild && element.firstChild.nodeType == 1) {
+                element = element.firstChild;
+            }
+        }
+    } catch {
+        return false;
+    }
+
+    var firstWordHeight;
+    var elementHeight;
+    var HEIGHT_OFFSET;
+    var elementWords;
+    var firstWord;
+    var ORIGINAL_ELEMENT_TEXT;
+
+    ORIGINAL_ELEMENT_TEXT = element.innerHTML;
+
+    // Usually there is around a 5px discrepency between the first word and the height of the whole
+    // headline so subtract the height of the headline by 10 px and we should be good
+    HEIGHT_OFFSET = 10;
+
+    // Get all the words in the headline as an array -- will include punctuatio. This is used to put
+    // the headline back together
+    elementWords = element.innerHTML.split(' ');
+
+    // Make span for first word and give it an id so we can access it in le dom
+    firstWord = document.createElement('span');
+    firstWord.id = 'element-first-word';
+    firstWord.innerHTML = elementWords[0];
+
+    // This is the entire headline as an array except for first word. We will append it to the
+    // headline after the span
+    elementWords = elementWords.slice(1);
+
+    // Empty the headline and append the span to it
+    element.innerHTML = '';
+    element.appendChild(firstWord);
+
+    // Add the rest of the element back to it
+    element.innerHTML += ' ' + elementWords.join(' ');
+
+    // Update the first word variable in the dom
+    firstWord = document.getElementById('element-first-word');
+
+    firstWordHeight = firstWord.offsetHeight;
+    elementHeight = element.offsetHeight;
+
+    // Restore the original element text
+    element.innerHTML = ORIGINAL_ELEMENT_TEXT;
+
+    // Compare the height of the element and the height of the first word
+    return elementHeight - HEIGHT_OFFSET > firstWordHeight;
+}
+
+export default balanceText;