@thinkpixellab-public/px-vue 3.0.1

package/components/PxCardGrid.vue

@@ -0,0 +1,386 @@
+<!--
+
+The grid will be created to contain cells (like a spreadsheet). A space represents an area that
+spans a certain number of cells and can contain a certain number of cards. Keeping all of this
+straight can get a little confusing because the terms are highly related but different, so here
+is the breakdown in some detail:
+
+## Cell
+A single unit in the grid that spans 1 row and 1 column.
+
+## Space
+An area that spans a certain number of cells and contains a certain number of cards. As implemented
+spaces can only span columns (not rows). We support three kinds of spaces:
+
+- **default** space ('--') This is a normal looking card. It contains 1 card and is 1x1.
+- **stacked** space ('==') This space is also (1x1) but contains two cards stacked vertically.
+- **wide** space ('-----') This space is 2x1 cells and contains one card.
+
+## Card
+Cards are areas within a space. Default and wide spaces contain a single card. Stacked spaces
+contain two cards.
+
+## Space Notation
+In order to simplify the definition of spaces, they can be represented with the notation above and
+converted to and from objects with the functions below.
+
+## Templates
+
+You can define a template using space notation like this:
+
+    '== -- -----',
+    '-- == -- --',
+    '----- -- ==',
+    '-- -- == --',
+
+
+## Basic Example
+
+    <px-card-grid
+        :items="fruits"
+        :gap="30"
+        :maxColumns="4"
+        :debug="true",
+        :templates="{
+            4: ['== -- -----', '-- == -- --', '----- -- ==', '-- -- == --'],
+            3: ['== -- --', '-- -- ==', '-- == --'],
+            2: ['-- --', '-----', '== --'],
+        }"
+    >
+        <template #default="{ item }">{{ item.name }}</template>
+    </px-card-grid>
+
+-->
+
+<template>
+    <div :class="bem({ debug: debug })">
+        <div :class="bem('grid', { cols: String(columnCount) })" :style="gridStyle">
+            <div :class="bem('row')" v-for="(row, rowIndex) in rows" :key="rowIndex">
+                <div
+                    :class="bem('space', { layout: space.name })"
+                    v-for="(space, spaceIndex) in row"
+                    :key="spaceIndex"
+                >
+                    <div
+                        :class="bem('card')"
+                        v-for="(item, cardIndex) in space.cards"
+                        :key="cardIndex"
+                    >
+                        <slot
+                            name="default"
+                            :index="items.indexOf(item)"
+                            :item="item || {}"
+                            :size="space.name"
+                        >
+                            {{ items.indexOf(item) }}:{{ space.name }}
+                        </slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import aspect from '../plugins/filters/aspect.js';
+import PxBaseItems from './PxBaseItems.vue';
+
+// prettier-ignore
+const defaultTemplates = {
+    5: [
+        '== -- == -- ==',
+        '-- == -- == --'
+    ],
+    4:[
+        '== -- -----',
+        '-- == -- --',
+        '----- -- ==',
+        '-- -- == --',
+    ],
+    3: [
+        '== -- --',
+        '-- -- ==',
+        '-- == --',
+    ],
+    2: [
+        '-- --',
+        '-- ==',
+        '== --',
+    ]
+
+};
+
+// prettier-ignore
+const spaces = [
+     { name: 'default', notation: '--',    cards: 1, colspan: 1, },
+     { name: 'wide',    notation: '-----', cards: 1, colspan: 2, },
+     { name: 'stacked', notation: '==',    cards: 2, colspan: 1  },
+];
+
+const spaceNotationToObject = symbol => {
+    return spaces.find(s => s.notation == symbol);
+};
+
+// converts a template in space notation into an array of rows containing space objects
+const spaceTemplateToSpaceRows = rows => {
+    let spaces = [];
+    rows.forEach(row => {
+        row = row.trim().split(/[\s\r\n]+/);
+        spaces.push(row.map(symbol => spaceNotationToObject(symbol)));
+    });
+    return spaces;
+};
+
+export default {
+    name: 'px-card-grid',
+    // components: { Component },
+    mixins: [PxBaseItems],
+    props: {
+        templates: { type: Object, default: () => defaultTemplates },
+        maxColumns: { type: Number, default: 6 },
+        maxRows: { type: Number, default: null },
+        allowOrphans: { type: Boolean, default: true },
+        padOrphans: { type: Boolean, default: false },
+        cardMinWidth: { type: Number, default: 240 },
+        cardMaxWidth: { type: Number, default: 320 },
+        cardAspect: { default: 3 / 4 },
+        gap: { type: Number, default: 24 },
+        debug: { type: Boolean, default: false },
+    },
+
+    data() {
+        return {
+            columnCount: 0,
+            rowTemplates: null,
+        };
+    },
+    computed: {
+        gridStyle() {
+            const defAspect = aspect(this.cardAspect);
+            const wideAspect = (this.cardMinWidth * 2 + this.gap) / (this.cardMinWidth / defAspect);
+            const maxGridWidth =
+                this.cardMaxWidth * this.columnCount + this.gap * (this.columnCount - 1);
+
+            return {
+                // prettier-ignore
+                gridTemplateColumns: `repeat(${this.columnCount}, 1fr)`,
+                maxWidth: this.cssPx(maxGridWidth),
+                '--gap': this.cssPx(this.gap),
+                '--aspect': defAspect,
+                '--aspect-wide': wideAspect,
+            };
+        },
+
+        rows() {
+            // Returns an array of rows, each of which contains an array of spaces each
+            // of which contains 1 or more items that can be used to create cards.
+
+            if (!this.rowTemplates || !this.items || !this.items.length || this.columnCount == 0) {
+                return [];
+            }
+
+            // get relevant row templates based on the number of columns
+            let templates = this.rowTemplates[this.columnCount];
+
+            if (!templates) {
+                console.error(`Could not create grid for ${this.columnCount} columns.`);
+                return [];
+            }
+
+            let rows = [];
+            let rowIndex = 0;
+            let itemIndex = 0;
+
+            while (itemIndex < this.items.length) {
+                let template = templates[rowIndex % templates.length];
+
+                let row = template.map(spaceTemplate => {
+                    let cards = Array(spaceTemplate.cards).fill(0);
+
+                    cards = cards.map(() => {
+                        const item = this.getItemForSpace(itemIndex);
+                        itemIndex++;
+                        return item;
+                    });
+
+                    return {
+                        name: spaceTemplate.name,
+                        cardCount: spaceTemplate.cards,
+                        cards: cards,
+                    };
+                });
+                rows.push(row);
+                rowIndex++;
+            }
+
+            let hasOrphans = itemIndex > this.items.length;
+
+            if (hasOrphans && !this.allowOrphans) {
+                rows.pop();
+            } else {
+                if (!this.padOrphans) {
+                    rows[rows.length - 1] = rows[rows.length - 1].filter(sp => {
+                        sp.cards = sp.cards.filter(card => !!card);
+                        return sp.cards.length;
+                    });
+                }
+            }
+
+            return rows;
+        },
+    },
+    watch: {
+        templates() {
+            this.updateRowTemplates();
+        },
+    },
+    mounted() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.resize();
+        });
+        this.resizeObserver.observe(this.$el);
+
+        this.resize();
+        this.updateRowTemplates();
+    },
+    beforeDestroy() {
+        this.resizeObserver.disconnect();
+        delete this.resizeObserver;
+    },
+    methods: {
+        getItemForSpace(index) {
+            if (this.items && index < this.items.length) {
+                return this.items[index];
+            }
+
+            if (index > 100) {
+                debugger;
+            }
+            return null;
+        },
+
+        updateRowTemplates() {
+            // get a single card (needed to fill missing templates)
+            const single = spaceNotationToObject('--');
+
+            let rowTemplates = {};
+
+            for (let i = this.maxColumns; i > 0; i--) {
+                // if we have a template for this count, parse it and use it
+                if (i in this.templates) {
+                    rowTemplates[i] = spaceTemplateToSpaceRows(this.templates[i]);
+                }
+
+                // otherwise create one with all singles
+                else {
+                    rowTemplates[i] = [Array(i).fill(single)];
+                }
+            }
+
+            this.rowTemplates = rowTemplates;
+        },
+        resize() {
+            let count = 1;
+            let availableWidth = this.$el.offsetWidth;
+
+            if (!availableWidth || this.availableWidth == availableWidth) {
+                return;
+            }
+
+            this.availableWidth = availableWidth;
+
+            for (let i = this.maxColumns; i > 0; i--) {
+                let neededWidth = this.cardMinWidth * i + this.gap * (i - 1);
+                if (neededWidth <= availableWidth) {
+                    count = i;
+                    break;
+                }
+            }
+            this.columnCount = count;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+.px-card-grid {
+    width: 100%;
+    max-width: 100%;
+
+    &__grid {
+        display: grid;
+        grid-gap: var(--gap);
+        justify-content: center;
+        margin: 0 auto;
+    }
+
+    &__row {
+        display: contents;
+    }
+
+    &__space {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: stretch;
+        align-items: stretch;
+        grid-gap: var(--gap);
+        gap: var(--gap);
+
+        &--layout-stacked {
+            grid-column: span 1 / auto;
+            aspect-ratio: var(--aspect);
+            // prettier-ignore
+            @include grid(
+                '100%   | ',
+                'top    | #(0, 1fr)',
+                'bottom | #(0, 1fr)'
+            );
+        }
+
+        &--layout-default {
+            grid-column: span 1;
+            aspect-ratio: var(--aspect);
+            @include grid('100%   | ', 'card   | #(0, 1fr)');
+        }
+        &--layout-wide {
+            grid-column: span 2;
+            //aspect-ratio: var(--aspect-wide);
+
+            @include grid('100%   | ', 'card   | #(0, 1fr)');
+        }
+    }
+
+    &__card {
+        display: grid;
+        align-items: stretch;
+        justify-content: stretch;
+        position: relative;
+        flex: 1;
+        > * {
+            @include abs();
+        }
+    }
+
+    // special case : wide columns in two columns need an aspect ration
+    &__grid--cols-2 & {
+        &__space--layout-wide {
+            aspect-ratio: var(--aspect-wide);
+        }
+    }
+
+    &--debug & {
+        &__card {
+            @include after() {
+                @include abs;
+                background-color: rgba(red, 0.05);
+                border-radius: 5px;
+                border: 2px dashed rgba(red, 0.2);
+                pointer-events: none;
+            }
+        }
+    }
+}
+</style>