@thinkpixellab-public/px-vue 3.0.10 → 3.0.12

package/components/PxFloat.vue

@@ -549,11 +549,20 @@ $d: 0.4s;
     // styles
 
     &--none {
-        // reset
+        // reset (do nothing)
     }
 
-    &--dialog &,
     &--default & {
+        // default does natural center spacing and that's it
+        &__popup {
+            top: 40%;
+            left: 50%;
+            transform: translate(-50%, -40%);
+        }
+    }
+
+    &--dialog & {
+        // dialog adds basic popup styling
         &__popup {
             @include css-map(
                 popup(
@@ -565,14 +574,6 @@ $d: 0.4s;
         }
     }
 
-    &--dialog & {
-        &__popup {
-            top: 40%;
-            left: 50%;
-            transform: translate(-50%, -40%);
-        }
-    }
-
     // sizes
 
     &--sm & {
@@ -625,7 +626,7 @@ $d: 0.4s;
 // default 'fade' transition
 // ----------------------------------------------------------------------------
 
-@include vue-transition-fade(px-float-fade, $dur: $d);
+@include vue-transition-fade(px-float-fade, $dur: $d, $leave-pointer-events: none);
 
 // ----------------------------------------------------------------------------
 // blur variant transition (uses filter for opacity and animates backdrop-filter)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.10",
+    "version": "3.0.12",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -14,7 +14,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "^2.11.5",
-        "@thinkpixellab-public/px-styles": "^3.7.1",
+        "@thinkpixellab-public/px-styles": "^3.7.2",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^3.1.5",

package/plugins/common.js

@@ -45,5 +45,15 @@ export default {
         Vue.prototype.hasSlot = function (slotName) {
             return this.$slots && slotName in this.$slots;
         };
+
+        /*
+        Get a unique id derived from vue's unique component identifier (this._uid) for use when an
+        id is required for an inputs, labels, etc.
+            uniqueId('label') => 'label-0003'
+        */
+        Vue.prototype.uniqueId = function (prefix = null) {
+            let id = ('000000' + Number(this._uid).toString(16).toLowerCase()).slice(-4);
+            return prefix ? prefix + '-' + id : id;
+        };
     },
 };

package/utils/cardGridLayoutHelper.js

@@ -0,0 +1,370 @@
+// prettier-ignore
+const baseTemplates = [
+
+    // TWO column layouts
+
+    // 2x1
+
+    [
+        '-----'
+    ],
+    [
+        '--'
+    ],
+
+    // 2x2
+
+    [
+        '-----',
+        '-----'
+    ],
+    [
+        '-- --'
+    ],
+
+    // 2x3
+
+    [
+        '-----',
+        '-- --'
+    ],
+    [
+        '-----',
+        '-- --'
+    ],
+    [
+        '-- =='
+    ],
+
+    // 2x4
+
+    [
+        '-- --',
+        '-- --'
+    ],
+    [
+        '-----',
+        '-- =='
+    ],
+
+    // 2x5
+
+    [
+        '-----',
+        '-- --',
+        '-- --'
+    ],
+    [
+        '-----',
+        '-----',
+        '-- =='
+    ],
+    [
+        '-- --',
+        '-- =='
+    ],
+
+    // 2x6
+
+    [
+        '-- --',
+        '-- --',
+        '-- --'
+    ],
+    [
+        '-----',
+        '-- --',
+        '-- =='
+    ],
+    [
+        '-- --',
+        '== =='
+    ],
+
+    // 2x7
+
+    [
+        '-----',
+        '-- --',
+        '-- --',
+        '-- --'
+    ],
+    [
+        '-- --',
+        '-- --',
+        '-- =='
+    ],
+    [
+        '-----',
+        '-- --',
+        '== =='
+    ],
+
+    // 2x8
+
+    [
+        '-- --',
+        '-- --',
+        '-- --',
+        '-- --'
+    ],
+    [
+        '-----',
+        '-- --',
+        '-----',
+        '-- --',
+        '-- --'
+    ],
+    [
+        '-----',
+        '-- --',
+        '-----',
+        '== =='
+    ]
+
+    // THREE column layouts
+
+    // 3x1
+
+    [
+        '-----'
+    ],
+    [
+        '--'
+    ],
+
+    // 3x2
+
+    [
+        '----- --'
+    ],
+    [
+        '-- --'
+    ],
+
+    // 3x3
+
+    [
+        '-- -- --'
+    ],
+    [
+        '----- =='
+    ],
+
+    // 3x4
+
+    [
+        '----- --',
+        '-- -----'
+    ],
+    [
+        '-- -- =='
+    ],
+
+    // 3x5
+
+    [
+        '----- --',
+        '-- -- --'
+    ],
+    [
+        '----- --',
+        '----- =='
+    ],
+    [
+        '-- == =='
+    ],
+
+    // 3x6
+
+    [
+        '-- -- --',
+        '-- -- --'
+    ],
+    [
+        '----- --',
+        '-- -- =='
+    ],
+    [
+        '----- ==',
+        '-- -- --'
+    ],
+
+    // 3x7
+
+    [
+        '----- --',
+        '----- --',
+        '-- -- --'
+    ],
+    [
+        '-- -- ==',
+        '-- -- --'
+    ],
+    [
+        '----- ==',
+        '-- -- =='
+    ],
+
+    // 3x8
+
+    [
+        '----- --',
+        '-- -- --',
+        '-- -- --'
+    ],
+    [
+        '----- --',
+        '-- -----',
+        '-- -- =='
+    ],
+    [
+        '----- --',
+        '== == =='
+    ],
+
+    // 3x9
+
+    [
+        '----- --',
+        '-- -----',
+        '----- --',
+        '-- -- --'
+    ],
+    [
+        '-- -- --',
+        '-- -- --',
+        '-- -- --'
+    ],
+    [
+        '----- --',
+        '-- -- --',
+        '-- -- =='
+    ],
+
+    // 3x10
+
+    [
+        '----- --',
+        '-- -----',
+        '-- -- --',
+        '-- -- --'
+    ],
+    [
+        '----- --',
+        '-- -- ==',
+        '== -- --'
+    ],
+    [
+        '----- ==',
+        '-- -- --',
+        '== -- --'
+    ]
+
+];
+
+// returns the reversed version of a string
+// fastest according to https://jsbench.me/4bkfflcm2z
+const reverseString = str => {
+    return str.split('').reduce((reversed, character) => character + reversed, '');
+};
+
+// returns the reversed version of a layout template
+const reverseTemplate = template => {
+    return template.map(str => reverseString(str));
+};
+
+// merge two templates horizontally
+// e.g. mergeH(['-- -----'], ['==']) => ['-- ----- ==']
+const mergeH = (a, b) => {
+    if (!a || !a.length || !b || b.length || a.length !== b.length) {
+        console.warn(
+            'Cannot horizontally merge empty templates or templates of different lengths.'
+        );
+        return [];
+    }
+    return a.map((val, idx) => {
+        return a[idx] + ' ' + b[idx];
+    });
+};
+
+// merge two templates vertically
+const mergeV = (a, b) => {
+    if (!a || !a.length || !b || b.length || a[0].length !== b[0].length) {
+        console.warn('Cannot vertical merge empty templates or templates of different widths.');
+        return [];
+    }
+    return [...a, ...b];
+};
+
+// get cell counts for a template
+const getCounts = t => {
+    if (!t || !t.length) {
+        return { cols: 0, cellCount: 0 };
+    }
+
+    const spaces = t
+        .join(' ')
+        .split(' ')
+        .map(s => s.trim());
+
+    // (cols, totalCells, wideCells, stackedCells)
+    const defaults = spaces.filter(s => s == '--').length;
+    const wides = spaces.filter(s => s == '-----').length;
+    const stacks = spaces.filter(s => s == '==').length;
+
+    return {
+        cols: (t[0].length + 1) / 3,
+        cells: defaults + wides + stacks * 2,
+        defaults,
+        wides,
+        stacks,
+    };
+};
+
+const templates = {};
+
+// organize base templates by column and cell count
+
+// TODO make this an on-demand generated things
+baseTemplates.forEach(t => {
+    const counts = getCounts(t);
+
+    if (counts.cols && counts.cells) {
+        // by column count
+        if (!templates[counts.cols]) {
+            templates[counts.cols] = {};
+        }
+        const byCols = templates[counts.cols];
+
+        // by cell count
+        if (!byCols[counts.cells]) {
+            byCols[counts.cells] = [];
+        }
+        const cellsList = byCols[counts.cells];
+
+        // add to the list of templates
+        cellsList.push({ template: t, ...counts });
+    }
+});
+
+const getLayouts = (cols, cells) => {
+    if (!templates[cols]) {
+        // TODO: support undefined sizes by merging if needed
+        // generate usine mergeH
+        console.log(`No templates for ${cols} columns.`);
+        return [];
+    }
+    if (!templates[cols][cells]) {
+        // TODO: support undefined sizes by merging if needed
+        // generate using mergeV
+        console.log(`No templates for ${cols} columns and ${cells} items.`);
+        return [];
+    }
+
+    // find templates that have the correct number of columns and cells
+    return templates[cols][cells];
+};
+
+export default { getLayouts };
+export { mergeH, mergeV, reverseString, reverseTemplate };