@thinkpixellab-public/px-vue 3.0.16 → 3.0.18

package/components/PxBaseVariantsOverride.vue

@@ -0,0 +1,26 @@
+<!--
+    Extends PxBaseVariants with the ability to specify default and base variants
+    (see descriptions of props below).
+-->
+
+<script>
+import PxBaseVariants from './PxBaseVariants.vue';
+export default {
+    mixins: [PxBaseVariants],
+    props: {
+        // variant that is always applied in addition to option specified by the variant prop
+        variantBase: { type: String, default: '' },
+
+        // variant that is applied only if no other variant is specified
+        variantDefault: { type: String, default: '' },
+    },
+    computed: {
+        variantValue() {
+            return (
+                (this.variantBase ? `${this.variantBase} ` : '') +
+                (this.variantDefault ? this.variantDefault : this.variant)
+            );
+        },
+    },
+};
+</script>

package/components/PxContain.vue

@@ -146,6 +146,9 @@ export default {
         aspectNumber() {
             this.resize();
         },
+        contain(nv) {
+            this.$emit('update', nv);
+        },
     },
     methods: {
         // Use a source for the outer container size other than this.$el. The container argument can
@@ -169,6 +172,7 @@ export default {
                     left: null,
                     scale: 1,
                 };
+
                 return;
             }
             let p = this.toBoxModelObject(this.padding);
@@ -226,8 +230,6 @@ export default {
                 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);

package/components/PxFloat.vue

@@ -344,9 +344,11 @@ export default {
     },
     methods: {
         show(reference) {
+            if (reference) {
+                this.referenceValue = reference;
+            }
             this.hideSource = null;
             this.visibleValue = true;
-            this.referenceValue = reference;
         },
 
         showAtCursor(mouseEvent) {

package/components/PxSideDrawer.vue

@@ -121,7 +121,6 @@ $dur: 400ms;
 
     &__overlay {
         background-color: clr(accent, -6, 0.2);
-        backdrop-filter: blur(10px);
     }
 
     &__drawer,
@@ -160,5 +159,11 @@ $dur: 400ms;
             )
         );
     }
+
+    &--blur & {
+        &__overlay {
+            backdrop-filter: blur(10px);
+        }
+    }
 }
 </style>

package/package.json

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

package/plugins/common.js

@@ -5,7 +5,7 @@
 
 import bem from '../utils/bem';
 import isServer from '../utils/isServer.js';
-import { cssPx, cssEm, cssPcnt, cssUrl } from '../utils/cssStr.js';
+import { cssPx, cssEm, cssPcnt, cssUrl, cssVar } from '../utils/cssStr.js';
 import aspect from './filters/aspect.js';
 import kebab from './filters/kebab.js';
 import slug from './filters/slug.js';
@@ -21,6 +21,7 @@ export default {
         Vue.prototype.cssEm = cssEm;
         Vue.prototype.cssPcnt = cssPcnt;
         Vue.prototype.cssUrl = cssUrl;
+        Vue.prototype.cssVar = cssVar;
 
         // filters
         // note: filters can be called as methods with something like

package/utils/cssStr.js

@@ -24,9 +24,14 @@ function cssEm(val, fallback) {
     Converts a number to a percentage string
     percent(0.45) => '45%'
 */
-function cssPcnt(val) {
+function cssPcnt(val, roundDec = 0) {
     if (!isNaN(val)) {
-        return val * 100 + '%';
+        val *= 100;
+
+        if (roundDec) {
+            val = Math.round(val * Math.pow(10, roundDec)) / Math.pow(10, roundDec);
+        }
+        return val + '%';
     }
     return null;
 }
@@ -42,4 +47,15 @@ function cssUrl(val) {
     return null;
 }
 
-export { cssPx, cssEm, cssPcnt, cssUrl };
+/*
+Wrap a string in css variable syntax
+    cssVar('theme-blue') => 'var(--theme-blue)'
+*/
+function cssVar(val) {
+    if (val) {
+        return `var(--${val})`;
+    }
+    return null;
+}
+
+export { cssPx, cssEm, cssPcnt, cssUrl, cssVar };

package/utils/utils.js

@@ -165,4 +165,36 @@ export default {
             height: clientRect.height,
         };
     },
+
+    /**
+     * Returns a simple seeded random number function. This turns out to be really useful when trying
+     * to keep state in sync between nuxt and client. If seed is null, returns an instance that has
+     * been seeded with the current minute value (e.g. will change once per minute).
+     *
+     * Seed can be any string or number.
+     *
+     * This is based on the mulberry32 function found here:
+     * https://www.delftstack.com/howto/javascript/javascript-random-seed-to-generate-random/
+     *
+     * Usage:
+     * const myRandomFn = utils.seededRandom(1234);
+     * myRandomFn() // 0.432887248
+     * myRandomFn() // 0.028234674
+     *
+     */
+
+    seededRandomFn(seed) {
+        seed = seed || parseInt(Date().slice(19, 21));
+
+        return () => {
+            let for_bit32_mul = (seed += 0x6d2b79f5);
+            let cast32_one = for_bit32_mul ^ (for_bit32_mul >>> 15);
+            let cast32_two = for_bit32_mul | 1;
+            for_bit32_mul = Math.imul(cast32_one, cast32_two);
+            for_bit32_mul ^=
+                for_bit32_mul +
+                Math.imul(for_bit32_mul ^ (for_bit32_mul >>> 7), for_bit32_mul | 61);
+            return ((for_bit32_mul ^ (for_bit32_mul >>> 14)) >>> 0) / 4294967296;
+        };
+    },
 };