@thinkpixellab-public/px-vue 3.0.9 → 3.0.11

package/components/PxFloat.vue

@@ -600,7 +600,8 @@ $d: 0.4s;
     }
 
     &--container {
-        max-width: min(94vw, get('container:width'));
+        $container-width: get('container:width');
+        max-width: 'min(94vw, #{$container-width})';
     }
 
     // overlays

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.9",
+    "version": "3.0.11",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",

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 };