@thinkpixellab-public/px-vue 3.0.1

package/utils/bem.js

@@ -0,0 +1,99 @@
+const bemOptions = {
+    separators: {
+        element: '__',
+        modifier: '--',
+        value: '-',
+    },
+    hyphenate: {
+        block: true,
+        element: true,
+        modifier: true,
+        state: true,
+    },
+};
+
+// Convert to kebab case (flag makes syntax easier with options)
+function hyphenate(str, shouldHyphenate = true) {
+    if (str) {
+        if (typeof str !== 'string') {
+            str = String(str);
+        }
+        return shouldHyphenate
+            ? str
+                  .toString()
+                  .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+                  .toLowerCase()
+            : str;
+    } else {
+        return str;
+    }
+}
+
+// Get block name
+function getBlockName(component) {
+    if (!component.$options._blockName) {
+        let block = component.$options.name || component.$options._componentTag;
+        if (block && block.indexOf('/') > -1) {
+            block = block.split('/').pop().split('.')[0];
+        }
+        component.$options._blockName = block;
+    }
+
+    return component.$options._blockName;
+}
+
+// Calcualte the bem classes for a given block, element and set of modifiers
+function getBemClasses(blockName, elementName, modifiers, options) {
+    const block = hyphenate(blockName, options.hyphenate.block);
+    const element = elementName
+        ? options.separators.element + hyphenate(elementName, options.hyphenate.element)
+        : '';
+    const bem = block + element;
+
+    if (!modifiers) {
+        return bem;
+    }
+
+    let modClasses = Object.keys(modifiers)
+        .map(key => {
+            const val = modifiers[key];
+            const mod = hyphenate(key, options.hyphenate.modifier);
+
+            // toggle boolean modifiers
+            if (typeof val === 'boolean') {
+                return val ? bem + options.separators.modifier + mod : null;
+            }
+
+            // concatenate non-boolean modifiers if not falsy
+            else {
+                return val
+                    ? bem +
+                          options.separators.modifier +
+                          mod +
+                          options.separators.value +
+                          hyphenate(val, options.hyphenate.state)
+                    : null;
+            }
+        })
+        .filter(val => !!val);
+
+    // add bem class to beginning of list
+    modClasses.unshift(bem);
+    return modClasses.join(' ');
+}
+
+/*
+Generates classes using BEM methodology.
+    :class="bem()" ->  class="my-component"
+    :class="bem('element')" ->  class="my-component__element"
+    :class="bem({dark: true})" -> class="my-component my-component--dark"
+    :class="bem({theme: 'dark'})" -> class="my-component--theme-dark"
+    :class="bem('el', {dark: true})" -> class="my-component__el my-component__el--dark"
+*/
+function bem(arg1, arg2) {
+    let element = typeof arg1 == 'string' ? arg1 : null;
+    let modifiers = typeof arg1 == 'string' ? arg2 : arg1;
+    return getBemClasses(getBlockName(this), element, modifiers, bemOptions);
+}
+
+export default bem;

package/utils/cardGrid.js

@@ -0,0 +1,383 @@
+// function arrShuffle(array) {
+//     for (let i = array.length - 1; i > 0; i--) {
+//         const j = Math.floor(Math.random() * (i + 1));
+//         [array[i], array[j]] = [array[j], array[i]];
+//     }
+//     return array;
+// }
+
+// const arrSum = array => {
+//     return array.reduce((acc, val) => {
+//         return acc + val;
+//     }, 0);
+// };
+
+// const strFindAll = (str, substr) => {
+//     if (!str || !substr) {
+//         return [];
+//     }
+
+//     let all = [];
+//     let nextIndex = str.indexOf(substr, 0);
+
+//     while (nextIndex > -1) {
+//         all.push(nextIndex);
+//         nextIndex = str.indexOf(substr, nextIndex + 1);
+//     }
+//     return all;
+// };
+
+// const strReplaceAt = (str, index, replacement) => {
+//     return str.substring(0, index) + replacement + str.substring(index + replacement.length);
+// };
+
+// const rowReplace = (rowStr, findStr, replaceStr, num) => {
+//     // convert num to an int (less than one interpreted as odds of being 1)
+//     if (num < 1) {
+//         num = Math.random() <= num ? 1 : 0;
+//     }
+//     num = Math.floor(num);
+
+//     // find possible positions, randomize and cap at num
+//     const positions = arrShuffle(strFindAll(rowStr, findStr)).slice(0, num);
+
+//     positions.forEach(pos => {
+//         rowStr = strReplaceAt(rowStr, pos, replaceStr);
+//     });
+
+//     const balance = arrSum(positions) / (rowStr.length * num) < 0.5 ? 'L' : 'R';
+//     console.log(`- ${rowStr} >>  ${balance} `);
+
+//     return { row: rowStr, balance };
+// };
+
+// const cardGridDefaults = {
+//     columnCount: 4,
+//     rowCount: 4,
+
+//     // number of halfs per row (if less than one, interpeted as chance of 1)
+//     halfsPerRow: 1,
+//     doublesPerRow: 1,
+
+//     // whether to priotize half or double replacements first
+//     prioritize: 'half',
+// };
+
+// const cardGrid = options => {
+//     let op = { ...cardGridDefaults, ...options };
+//     let rows = [];
+
+//     // must have columnCount and rowCount
+//     if (!(op.columnCount && op.rowCount)) {
+//         return rows;
+//     }
+
+//     // create a naive layout with no half or double variants
+//     for (let r = 0; r < op.rowCount; r++) {
+//         rows.push('- '.repeat(op.columnCount).trim());
+//     }
+
+//     // iterate through the layout and replace slots with variants
+//     rows = rows.map(row => {
+//         let result = { row, balance: null };
+
+//         if (op.prioritize == 'half') {
+//             // half then double
+//             result = rowReplace(result.row, '-', ':', op.halfsPerRow);
+//             result = rowReplace(result.row, '- -', '+++', op.doublesPerRow);
+//         } else {
+//             // double then half
+//             result = rowReplace(result.row, '- -', '+++', op.doublesPerRow);
+//             result = rowReplace(result.row, '-', ':', op.halfsPerRow);
+//         }
+
+//         return result;
+//     });
+
+//     console.log(`rows: 👉 ${JSON.stringify(rows, null, 4)}`);
+// };
+
+// export default cardGrid;
+
+/*
+
+Notation:
+
+// cards in determined / final state
+
+fixed card      --
+stacked cards   ==
+double card     -----
+
+// single cards in undermined state
+
+growable        ++
+shrinkable      __
+hidable         ??
+grow/shrink     +_
+grow/hide       +?
+shrink/hide     _?
+grow/shr/hide   **
+
+*/
+
+/*
+
+Notation:
+
+// cards in determined / final state
+
+fixed card      --
+stacked cards   ==
+double card     -----
+
+// single cards in undermined state
+
+growable        ++
+shrinkable      __
+hidable         ??
+grow/shrink     +_
+grow/hide       +?
+shrink/hide     _?
+grow/shr/hide   **
+
+*/
+
+// notation
+
+const layoutNotation = {
+    // cards in determined / final state
+
+    // fixed single card
+    '--': { canGrow: false, canShrink: false, canHide: false, spaces: 1, cards: 1 },
+
+    // fixed stacked cards
+    '==': { canGrow: false, canShrink: false, canHide: false, spaces: 1, cards: 2 },
+
+    // fixed double card
+    '-----': { canGrow: false, canShrink: false, canHide: false, spaces: 2, cards: 1 },
+
+    // cards in an undetermined state
+
+    // growable
+    '++': { canGrow: true, canShrink: false, canHide: false, spaces: 1, cards: 1 },
+
+    // shrinkable
+    __: { canGrow: false, canShrink: true, canHide: false, spaces: 1, cards: 1 },
+
+    // hidable
+    '??': { canGrow: false, canShrink: false, canHide: true, spaces: 1, cards: 1 },
+
+    // grow/shrink
+    '+_': { canGrow: true, canShrink: true, canHide: false, spaces: 1, cards: 1 },
+
+    // grow/hide
+    '+?': { canGrow: true, canShrink: false, canHide: true, spaces: 1, cards: 1 },
+
+    // shrink/hide
+    '_?': { canGrow: false, canShrink: true, canHide: true, spaces: 1, cards: 1 },
+
+    // grow/shrink/hide
+    '**': { canGrow: true, canShrink: true, canHide: false, spaces: 1, cards: 1 },
+};
+
+// returns the number of columns spanned by the given row (array of spaces)
+// const getRowColumnCount = row => {
+//     return row.reduce((cols, sp) => {
+//         return cols + sp.colspan;
+//     }, 0);
+// };
+
+// returns the number of cards contained by the given row
+// const getRowCardCount = row => {
+//     return row.reduce((cards, sp) => {
+//         return cards + sp.cards;
+//     }, 0);
+// };
+
+// returns the number of cards cotnained in the given template (array of rows)
+// const getTemplateCardCount = rows => {
+//     return rows.reduce((cards, row) => {
+//         return cards + getRowCardCount(row);
+//     }, 0);
+// };
+
+// const printRow = row => {
+//     console.log(row.map(sp => sp.notation).join(' '));
+// };
+
+// const printTemplate = rows => {
+//     rows.forEach(r => {
+//         printRow(r);
+//     });
+// };
+
+// const printTemplateCollection = coll => {
+//     coll.forEach(t => {
+//         console.log('');
+//         console.log(`cols: ${t.cols} | cards:${t.cards}`);
+//         printTemplate(t.template);
+//     });
+// };
+
+function layoutStrToObj(layoutStr) {
+    layoutStr = layoutStr.trim();
+    if (layoutStr in layoutNotation) {
+        return layoutNotation[layoutStr];
+    } else {
+        // fallback is a fixed single card
+        console.warn(`'Unable to interpret the layout string "${layoutStr}".`);
+        return layoutNotation['--'];
+    }
+}
+
+// true if all of the key/values in obj1 are present and match in obj2
+function compareObject(obj1, obj2) {
+    for (let prop in obj1) {
+        if (!(prop in obj2) || obj1[prop] !== obj2[prop]) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+// break a flat array of cards into rows
+//function getCardRows(cards, columnCount) {}
+
+function findBestCard(cards, orderedFilters) {
+    for (let i = 0; i < orderedFilters.length; i++) {
+        let filter = orderedFilters[i];
+        let card = cards.find(c => compareObject(filter, c));
+        if (card) {
+            return card;
+        }
+    }
+    return null;
+}
+
+function growCards(cards) {
+    let card = findBestCard(cards, [
+        { spaces: 1, canGrow: false, canShrink: true, canHide: false },
+        { spaces: 1, canGrow: true, canShrink: true, canHide: false },
+        { spaces: 2, canShrink: true },
+        { spaces: 1, canHide: true },
+    ]);
+
+    if (card) {
+        card.spaces = 2;
+        return true;
+    }
+    return false;
+}
+
+function shrinkCards(cards) {
+    // first look for a card that can only grow (so we keep options open)
+    let card = findBestCard(cards, [
+        { spaces: 1, canGrow: true, canShrink: false },
+        { spaces: 1, canGrow: true, canShrink: true },
+    ]);
+
+    if (card) {
+        // TODO
+        return true;
+    }
+    return false;
+}
+
+//function shrinkCards(cards) {}
+
+// choose the best next action for adjust the card layout
+function getCardGridAction(cards, columnCount, bias) {
+    if (!columnCount) {
+        return [];
+    }
+
+    // get the total number of spaces needed by this layout
+    let spacesNeeded = cards.reduce((total, card) => {
+        return total + card.spaces;
+    }, 0);
+
+    // get the number of rows that this layout naturally uses
+    let rowsNeeded = Math.ceil(spacesNeeded / columnCount);
+
+    // get the size of gap that needs to be "filled in" in the final row
+    let emptySpaces = rowsNeeded * columnCount - spacesNeeded;
+
+    // if there is no gap, then we're done
+    if (emptySpaces == 0) {
+        return null;
+    }
+
+    // how much would we need to grow or shink to fill those spaces
+    let growthNeeded = emptySpaces;
+    let shrinkNeeded = columnCount - emptySpaces;
+
+    // get the "grow" power by counting the number of cards that can grow (and limit to 2)
+    let growPower = cards.reduce((total, card) => {
+        return total + (card.canGrow ? 1 : 0);
+    }, 0);
+    growPower = Math.min(growPower, 2);
+
+    // get the "shrink" power by counting the number of cards that can shrink (and then divide by 2)
+    let shrinkPower = cards.reduce((total, card) => {
+        return total + (card.canShrink ? 1 : 0);
+    }, 0);
+    shrinkPower = Math.floor(shrinkPower / 2);
+
+    // decision time? grow or shrink
+
+    let finalGrowGap = Math.max(0, growthNeeded - growPower);
+    let finalShrinkGap = columnCount - (shrinkNeeded - shrinkPower);
+
+    // console.log('===');
+
+    // console.log(`growthNeeded: ${growthNeeded}`);
+    // console.log(`growPower: ${growPower}`);
+    // console.log(`finalGrowGap: ${finalGrowGap}`);
+
+    // console.log('---');
+
+    // console.log(`shrinkNeeded: ${shrinkNeeded}`);
+    // console.log(`shrinkPower: ${shrinkPower}`);
+    // console.log(`finalShrinkGap: ${finalShrinkGap}`);
+
+    // console.log('---');
+
+    // console.log(`action: ${action}`);
+
+    // if we can go either way and there is an expressed bias, use that
+    if (bias && finalGrowGap == finalShrinkGap) {
+        return bias;
+    }
+
+    // otherwise choose whichever action is more needed
+    return finalGrowGap < finalShrinkGap ? 'grow' : 'shrink';
+}
+
+function createCardGrid(cards, columnCount) {
+    // convert string notation to an array of card
+    if (!Array.isArray(cards)) {
+        cards = cards.trim().split(/[\s\r\n]+/);
+
+        // convert layout string notation to an array of objects
+        cards = cards.map(cardStr => layoutStrToObj(cardStr));
+    }
+
+    let action = getCardGridAction(cards, columnCount);
+    if (action == 'grow') {
+        growCards(cards);
+    } else if (action == 'shrink') {
+        shrinkCards(cards);
+    }
+
+    let str = cards
+        .map(c => {
+            return c.spaces == 2 ? '-----' : '--';
+        })
+        .join(' ');
+
+    console.log(`str: ${str}`);
+}
+
+export default createCardGrid;

package/utils/cssStr.js

@@ -0,0 +1,45 @@
+/*
+Converts a number to a px string
+    px(45) => '45px'
+*/
+function cssPx(val, round = true, fallback = null) {
+    if (!isNaN(val) && val !== null) {
+        return (round ? Math.round(val) : val) + 'px';
+    }
+    return fallback;
+}
+
+/*
+Converts a number to a em string
+    px(45) => '45em'
+*/
+function cssEm(val, fallback) {
+    if (val) {
+        return val + 'em';
+    }
+    return fallback;
+}
+
+/*
+    Converts a number to a percentage string
+    percent(0.45) => '45%'
+*/
+function cssPcnt(val) {
+    if (!isNaN(val)) {
+        return val * 100 + '%';
+    }
+    return null;
+}
+
+/*
+Wrap a string in 'url' syntax for CSS
+    url('image.png') => 'url("image.png")'
+*/
+function cssUrl(val) {
+    if (val) {
+        return `url("${val}")`;
+    }
+    return null;
+}
+
+export { cssPx, cssEm, cssPcnt, cssUrl };