@thinkpixellab-public/px-vue 3.0.4 → 3.0.6

package/components/PxAspect.vue

@@ -18,7 +18,7 @@ export default {
     name: 'px-aspect',
     mixins: [PxBaseResize],
     props: {
-        // the aspect ration (can be express as a number or a ration string like '16:9')
+        // the aspect ration (can be express as a number or a ratio string like '16:9')
         aspect: { default: 16 / 9 },
 
         // the horizontal positioning when there is leftover space

package/components/PxCardGrid.vue

@@ -2,8 +2,8 @@
 
 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:
+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.
@@ -16,6 +16,11 @@ spaces can only span columns (not rows). We support three kinds of spaces:
 - **stacked** space ('==') This space is also (1x1) but contains two cards stacked vertically.
 - **wide** space ('-----') This space is 2x1 cells and contains one card.
 
+You might be wondering why we don't just make space and cell the same thing and the largest cards
+would be 2x2 instead of 1x2. It has to do with the way we're using css grid for layout. Things are a
+lot cleaner if our max card height is a single row in the grid. It also makes it so that the
+notation matches the rows array which keeps things easier to understand.`
+
 ## Card
 Cards are areas within a space. Default and wide spaces contain a single card. Stacked spaces
 contain two cards.
@@ -50,6 +55,48 @@ You can define a template using space notation like this:
         <template #default="{ item }">{{ item.name }}</template>
     </px-card-grid>
 
+
+## Custom Item Selection
+
+    By default items will be placed in the template in sequential order but it's possible to take
+    full control of which item is placed in which slot but providing a callback with the getItemFn
+    property. This function will receive an object with parameters describing the space and expects
+    an item to be returned. The function will be called once for the number of spaces in the layout
+    (include for orphans).
+
+    When using this method it isn't even necessary to set the items property but you also need to
+    provide the getItemCountFn callback. That should be the number of items without orphans (you will
+    still get the callback for orphans).
+
+    <px-card-grid
+        :gap="30"
+        :maxColumns="4"
+        :debug="true",
+        :templates="{
+            4: ['== -- -----', '-- == -- --', '----- -- ==', '-- -- == --'],
+            3: ['== -- --', '-- -- ==', '-- == --'],
+            2: ['-- --', '-----', '== --'],
+        }"
+        :get-item-fn="getItem"
+        :get-item-count="getItemCount"
+    >
+        <template #default="{ item }">{{ item.name }}</template>
+    </px-card-grid>
+
+    getItem(space) {
+        if (space.type == 'stacked') {
+            ...
+        }
+        else {
+            ...
+        }
+    }
+
+    getItemCount() {
+        return ...;
+    }
+
+
 -->
 
 <template>
@@ -131,6 +178,13 @@ const spaceTemplateToSpaceRows = rows => {
     return spaces;
 };
 
+const cardCountInRowTemplate = rowTemplate => {
+    let count = rowTemplate.reduce((total, space) => {
+        return total + space.cards;
+    }, 0);
+    return count;
+};
+
 export default {
     name: 'px-card-grid',
     // components: { Component },
@@ -146,6 +200,8 @@ export default {
         cardAspect: { default: 3 / 4 },
         gap: { type: Number, default: 24 },
         debug: { type: Boolean, default: false },
+        getItemCountFn: { default: null },
+        getItemFn: { default: null },
     },
 
     data() {
@@ -175,7 +231,9 @@ export default {
             // 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) {
+            let itemCount = this.getItemCount();
+
+            if (!this.rowTemplates || !itemCount || this.columnCount == 0) {
                 return [];
             }
 
@@ -191,39 +249,58 @@ export default {
             let rowIndex = 0;
             let itemIndex = 0;
 
-            while (itemIndex < this.items.length) {
+            while (itemIndex < itemCount && rowIndex < 1000) {
                 let template = templates[rowIndex % templates.length];
+                let rowCardCount = cardCountInRowTemplate(template);
+                let isOrphanRow = itemIndex + rowCardCount > itemCount;
+
+                // render if this is not an orphan row or it is and we allow it
+                if (!isOrphanRow || this.allowOrphans) {
+                    let row = template.map(spaceTemplate => {
+                        let cards = Array(spaceTemplate.cards).fill(0);
+
+                        cards = cards.map(() => {
+                            let item = null;
+                            const isOrphanPadding = itemIndex >= itemCount;
+                            const isOrphan = isOrphanRow && !isOrphanPadding;
+
+                            if (!isOrphanPadding || this.padOrphans) {
+                                item = this.getItemForSpace({
+                                    index: itemIndex,
+                                    type: spaceTemplate.name,
+                                    orphan: isOrphan,
+                                    orphanPadding: isOrphanPadding,
+                                });
+                            }
+
+                            itemIndex++;
+                            return item;
+                        });
+
+                        return {
+                            name: spaceTemplate.name,
+                            cardCount: spaceTemplate.cards,
+                            cards: cards,
+                        };
+                    });
 
-                let row = template.map(spaceTemplate => {
-                    let cards = Array(spaceTemplate.cards).fill(0);
+                    rows.push(row);
+                }
 
-                    cards = cards.map(() => {
-                        const item = this.getItemForSpace(itemIndex);
-                        itemIndex++;
-                        return item;
-                    });
+                // get out of the loop
+                else {
+                    itemIndex += rowCardCount;
+                }
 
-                    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;
-                    });
-                }
+            if (!this.padOrphans && itemIndex > itemCount) {
+                // remove empty
+                rows[rows.length - 1] = rows[rows.length - 1].filter(sp => {
+                    sp.cards = sp.cards.filter(card => !!card);
+                    return sp.cards.length;
+                });
             }
 
             return rows;
@@ -248,14 +325,30 @@ export default {
         delete this.resizeObserver;
     },
     methods: {
-        getItemForSpace(index) {
+        getItemCount() {
+            if (this.getItemCountFn) {
+                return this.getItemCountFn();
+            }
+
+            return this.items.length;
+        },
+
+        getItemForSpace(space) {
+            if (this.getItemFn) {
+                return this.getItemFn(space);
+            }
+
+            if (space.orphanPadding) {
+                return space;
+            }
+
+            const index = space.index;
+
             if (this.items && index < this.items.length) {
                 return this.items[index];
             }
 
-            if (index > 100) {
-                debugger;
-            }
+            console.warn(`No item found for space at index ${index}.`);
             return null;
         },
 

package/components/PxContain.vue

@@ -0,0 +1,260 @@
+<!--
+    Keeps a child element contained within boundaries.
+
+    <px-contain #default="{width, height, left: }" :aspect="16/9" :round="true" :to-px="true">
+        <div :style="{position: 'absolute', left: left top: top  width: width height: height}"  />
+    </px-contain>
+
+-->
+
+<template>
+    <div :class="bem()">
+        <slot
+            name="default"
+            :top="contain.top"
+            :right="contain.right"
+            :left="contain.left"
+            :bottom="contain.bottom"
+            :width="contain.width"
+            :height="contain.height"
+            :scale="contain.scale"
+        ></slot>
+    </div>
+</template>
+
+<script>
+import { contain } from '../utils/fit';
+import aspectFilter from '../plugins/filters/aspect.js';
+import PxBaseResize from './PxBaseResize.vue';
+
+export default {
+    name: 'px-contain',
+    mixins: [PxBaseResize],
+
+    props: {
+        // an optional aspect ratio that should be maintained when calculating size and position, if
+        // not provided then width and height will always cover the full outer container (can be a
+        // number or ratio string like '16:9')
+        aspect: { default: null },
+
+        // if either of these is provided, then slot values will also include a value for scale
+        // which is the relative scale of the container compared to the natural size of the object;
+        // note also that aspect/width/height benefits all become available if just 2 of 3
+        // properties have been defined
+        naturalWidth: { type: Number, default: null },
+        naturalHeight: { type: Number, default: null },
+
+        // these are adjustments to the available area inside of the container rectangle; the
+        // difference between padding and border is that padding values will also affect the final
+        // top/left values but border does not (to visualize this, imagine that you use border if
+        // the content has a visible border around and the final values reflect that where padding
+        // is empty space so palcement gets shfited); specify as either a number or an arry of up to
+        // 4 numbers that follow the css box-model pattern
+        padding: { default: null },
+        border: { default: null },
+
+        // the horizontal positioning when there is leftover space
+        alignX: { default: 0.5 }, // number | 'start' | 'center' | 'end'
+
+        // the vertical positioning when there is leftover space
+        alignY: { default: 0.5 }, // number | 'start' | 'center' | 'end'
+
+        // whether slot values should be returned as strings with 'px'
+        toPx: { type: Boolean, default: true },
+
+        // whether slot values should be rounded to screen pixels
+        round: { type: Boolean, default: true },
+    },
+    data() {
+        return {
+            contain: {
+                current: false,
+                width: 0,
+                height: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                scale: 1,
+            },
+        };
+    },
+    computed: {
+        aspectNumber() {
+            return aspectFilter(this.aspect);
+        },
+        aspectRect() {
+            let a = this.aspect ? this.aspectNumber : null;
+            let w = this.naturalWidth;
+            let h = this.naturalHeight;
+
+            // width and height (ignore aspect)
+            if (w && h) {
+                return {
+                    width: w,
+                    height: h,
+                };
+            }
+
+            // just aspect (no width or height)
+            if (!w && !h && a) {
+                return {
+                    width: a,
+                    height: 1,
+                };
+            }
+
+            // width and aspect, infer height
+            if (w && a && !h) {
+                return {
+                    width: w,
+                    height: w * (1 / a),
+                };
+            }
+
+            // height and aspect, infer width
+            if (w && a && !h) {
+                return {
+                    width: h * a,
+                    height: h,
+                };
+            }
+
+            // no width or height or aspect
+            return null;
+        },
+    },
+
+    watch: {
+        aspectNumber() {
+            this.resize();
+        },
+    },
+    methods: {
+        resize() {
+            let p = this.toBoxModelObject(this.padding);
+
+            let b = this.toBoxModelObject(this.border);
+            let outer = this.$el.getBoundingClientRect();
+            let inner = this.aspectRect || outer;
+
+            outer = {
+                width: outer.width - (b.w + p.w),
+                height: outer.height - (b.h + p.h),
+            };
+
+            let r;
+
+            if (this.aspect) {
+                r = contain(
+                    inner,
+                    outer,
+                    this.alignToDecimal(this.alignX),
+                    this.alignToDecimal(this.alignY)
+                );
+            } else {
+                r = {
+                    x: 0,
+                    y: 0,
+                    width: outer.width,
+                    height: outer.height,
+                };
+            }
+
+            let c = {
+                current: true,
+                width: r.width + b.w,
+                height: r.height + b.h,
+                top: r.y + p.top,
+                left: r.x + p.left,
+                right: r.width - (r.x + b.w),
+                bottom: r.height - (r.y + b.h),
+                scale: this.naturalWidth || this.naturalHeight ? r.scale : 1,
+            };
+
+            this.$emit('update', c);
+
+            c.width = this.prepValue(c.width);
+            c.height = this.prepValue(c.height);
+            c.left = this.prepValue(c.left);
+            c.top = this.prepValue(c.top);
+            c.right = this.prepValue(c.right);
+            c.bottom = this.prepValue(c.bottom);
+
+            this.contain = c;
+        },
+
+        prepValue(n) {
+            if (this.round && typeof window != 'undefined') {
+                n = Math.round(n * window.devicePixelRatio) / window.devicePixelRatio;
+            }
+            if (this.toPx) {
+                n = this.cssPx(n);
+            }
+            return n;
+        },
+
+        toBoxModelObject(val) {
+            const arr = this.toBoxModelArray(val);
+            return {
+                top: arr[0],
+                right: arr[1],
+                bottom: arr[2],
+                left: arr[3],
+                w: arr[1] + arr[3],
+                h: arr[0] + arr[2],
+            };
+        },
+
+        toBoxModelArray(val) {
+            if (!val) {
+                return [0, 0, 0, 0];
+            }
+
+            if (Array.isArray(val)) {
+                if (val.length == 0) {
+                    return [0, 0, 0, 0];
+                }
+                if (val.length == 1) {
+                    return [val[0], val[0], val[0], val[0]];
+                }
+                if (val.length == 2) {
+                    return [val[0], val[1], val[0], val[1]];
+                }
+                if (val.length == 3) {
+                    return [val[0], val[1], val[2], val[1]];
+                }
+                return [val[0], val[1], val[2], val[3]];
+            }
+
+            return [val, val, val, val];
+        },
+
+        alignToDecimal(align) {
+            if (typeof align == 'number') {
+                return align;
+            }
+            if (align === 'center') {
+                return 0.5;
+            }
+            if (align === 'start') {
+                return 0;
+            }
+            if (align === 'end') {
+                return 1;
+            }
+            const float = parseFloat(align);
+            return !isNaN(float) ? float : 0.5;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+.px-contain {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>

package/components/PxFloat.vue

@@ -22,10 +22,10 @@
             :name="calcTransitionName"
             @before-enter="transitionVisible = true"
             @after-leave="transitionVisible = false"
-            :style="{ zIndex: zStart + currentLayerIndex }"
         >
             <div
                 :class="bem({ ...variantsMap, absolute: strategy == 'absolute' })"
+                :style="{ zIndex: zStart + currentLayerIndex }"
                 v-show="visibleValueNext"
             >
                 <!-- overlay element -->
@@ -273,7 +273,6 @@ export default {
                     }
                 } else {
                     if (this.cleanup) {
-                        console.log('cleanup');
                         this.cleanup();
                         this.cleanup = null;
                     }

package/dev/demos/Demo-PxCardGrid.vue

@@ -8,6 +8,7 @@
             :debug="true"
             :gap="60"
             :allow-orphans="true"
+            :pad-orphans="true"
             :maxColumns="4"
             :templates="{
                 4: ['== -- -----', '-- == -- --', '----- -- ==', '-- -- == --'],
@@ -49,5 +50,6 @@ export default {
 <style lang="scss">
 .demo-px-card-grid {
     // add styles here
+    padding: 5vh 0 10vh;
 }
 </style>

package/dev/demos/Demo-PxContain.vue

@@ -0,0 +1,116 @@
+<!--
+    Describe this component...
+-->
+<template>
+    <div :class="bem()">
+        <px-tester>
+            <px-test name="Aspect" testId="pxcontain-aspect" :size="{ h: 600 }">
+                <px-contain aspect="16:9" :px="true">
+                    <template #default="{ top, left, width, height }">
+                        <div
+                            :style="{
+                                position: 'absolute',
+                                left,
+                                top,
+                                width,
+                                height,
+                                background: 'red',
+                            }"
+                        />
+                    </template>
+                </px-contain>
+            </px-test>
+
+            <px-test name="Width / Height" testId="pxcontain-wh" :size="{ h: 600 }">
+                <px-contain :naturalWidth="1600" :naturalHeight="900">
+                    <template #default="{ top, left, width, height }">
+                        <div
+                            :style="{
+                                position: 'absolute',
+                                left,
+                                top,
+                                width,
+                                height,
+                                background: 'gold',
+                            }"
+                        />
+                    </template>
+                </px-contain>
+            </px-test>
+
+            <px-test name="Scale" testId="pxcontain-scale" :size="{ h: 600 }">
+                <px-contain :naturalWidth="1600" :naturalHeight="900">
+                    <template #default="{ top, left, scale }">
+                        <div
+                            :style="{
+                                position: 'absolute',
+                                width: '1600px',
+                                height: '900px',
+                                top,
+                                left,
+                                transformOrigin: '0 0',
+                                transform: `scale(${scale})`,
+                                background: 'gold',
+                            }"
+                        />
+                    </template>
+                </px-contain>
+            </px-test>
+            <px-test name="Basic with Padding" testId="pxcontain-pad" :size="{ h: 600 }">
+                <div
+                    :style="{
+                        width: '100%',
+                        height: '100%',
+                        padding: '49px',
+                        border: '1px solid red',
+                        boxSizing: 'border-box',
+                    }"
+                >
+                    <px-contain :aspect="4 / 3">
+                        <template #default="{ top, left, width, height }">
+                            <div
+                                :style="{
+                                    position: 'absolute',
+                                    left,
+                                    top,
+                                    width,
+                                    height,
+                                    background: 'lightblue',
+                                }"
+                            >
+                                {{ width }} x {{ height }}
+                            </div>
+                        </template>
+                    </px-contain>
+                </div>
+            </px-test>
+        </px-tester>
+    </div>
+</template>
+
+<script>
+// import { mapState } from 'vuex';
+// import Component from '~/components/Component.vue';
+// import Mixin from '~/components/Mixin.vue';
+import { PxTester, PxTest } from '@thinkpixellab-public/px-vue-tester';
+import PxContain from '../../components/PxContain.vue';
+
+export default {
+    name: 'demo-px-contain',
+    components: { PxTester, PxTest, PxContain },
+    // mixins: [ Mixin ],
+    // props: { a: { type: Boolean, default: false } },
+    // data() { return { b: 0 }; },
+    // computed: {},
+    // watch: {},
+    // mounted() {},
+    // methods: {},
+};
+</script>
+
+<style lang="scss">
+//@import '@/styles/include.scss';
+.demo-px-contain {
+    // add styles here
+}
+</style>

package/dev/dev.vue

@@ -17,6 +17,7 @@ import DemoPxBaseDrag from './demos/Demo-PxBaseDrag.vue';
 import DemoPxStylesPreview from './demos/Demo-PxStylesPreview.vue';
 import DemoPxPivot from './demos/Demo-PxPivot.vue';
 import DemoPxFloat from './demos/Demo-PxFloat.vue';
+import DemoPxContain from './demos/Demo-PxContain.vue';
 
 export default Vue.extend({
     components: {
@@ -30,6 +31,7 @@ export default Vue.extend({
         DemoPxStylesPreview,
         DemoPxPivot,
         DemoPxFloat,
+        DemoPxContain,
     },
     name: 'ServeDev',
     data() {

package/package.json

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

package/utils/fit.js

@@ -52,13 +52,13 @@ export function contain(inner, outer, posX = 0.5, posY = 0.5) {
         height = outer.width / aspectInner;
         x = 0;
         y = outer.height * posY - height * posY;
-        scale = height / outer.height;
+        scale = height / inner.height;
     } else {
         width = outer.height * aspectInner;
         height = outer.height;
         x = outer.width * posX - width * posX;
         y = 0;
-        scale = width / outer.width;
+        scale = width / inner.width;
     }
 
     var rect = {