@thinkpixellab-public/px-vue 3.0.28 → 3.0.30

package/components/PxBalancedText.vue

@@ -5,7 +5,13 @@
         :style="{ opacity: elementOpacity, color: debugColor }"
     >
         <!-- html -->
-        <component v-if="hasHtml" :class="bem('inner')" :is="innerTag" ref="text" v-html="html" />
+        <component
+            v-if="hasHtml"
+            :class="bem('inner', { html: true })"
+            :is="innerTag"
+            ref="text"
+            v-html="html"
+        />
 
         <!-- slot -->
         <component v-else :class="bem('inner')" :is="innerTag" ref="text">
@@ -17,8 +23,10 @@
 <script>
 import PxBaseResize from './PxBaseResize.vue';
 import balanceText from '../utils/balanceText.js';
+import isServer from '../utils/isServer.js';
 
 export default {
+    name: 'px-balanced-text',
     mixins: [PxBaseResize],
     props: {
         // the outer tag element
@@ -80,17 +88,23 @@ export default {
     },
     watch: {
         enabled() {
-            this.balanced = false;
-            if (!process.server) {
-                this.$nextTick(() => {
-                    this.resize();
-                });
+            if (isServer()) {
+                return;
             }
+            this.balanced = false;
+            this.$nextTick(() => {
+                this.resize();
+            });
         },
     },
+
     methods: {
         resize() {
-            if (this.enabled && !process.server) {
+            if (isServer()) {
+                return;
+            }
+
+            if (this.enabled) {
                 try {
                     this.balanceFailed = false;
                     if (this.$refs.text && this.$refs.text.offsetWidth > 0) {

package/components/PxBaseResize.vue

@@ -1,5 +1,5 @@
 <script>
-import debounce from 'debounce';
+import { debounce } from 'debounce';
 
 export default {
     data() {

package/components/PxFloat.vue

@@ -521,8 +521,6 @@ export default {
                 }
             }
 
-            console.log(`reference: ${reference}`);
-
             return reference;
         },
 

package/package.json

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

package/plugins/common-vue3.js

@@ -0,0 +1,60 @@
+import bem from '../utils/bem';
+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';
+import spacenator from './filters/spacenator.js';
+import date from './filters/date.js';
+// import isServer from '../utils/isServer.js';
+// import eventBus from './mixins/eventBus.js';
+
+export default {
+    //install: (app, options) => {
+    install: app => {
+        // methods
+        app.config.globalProperties.bem = bem;
+        app.config.globalProperties.cssPx = cssPx;
+        app.config.globalProperties.cssEm = cssEm;
+        app.config.globalProperties.cssPcnt = cssPcnt;
+        app.config.globalProperties.cssUrl = cssUrl;
+        app.config.globalProperties.cssVar = cssVar;
+
+        // filters (just functions now)
+        app.config.globalProperties.$filters = {
+            aspect,
+            kebab,
+            slug,
+            spacenator,
+            date,
+        };
+
+        // TODO
+
+        // // mixins
+        // Vue.mixin({
+        //     computed: {
+        //         isServer() {
+        //             return isServer();
+        //         },
+        //     },
+        // });
+
+        // // event bus
+        // eventBus.install(Vue);
+
+        // // other
+        // Vue.prototype.hasSlot = function (slotName) {
+        //     return this.$slots && slotName in this.$slots;
+        // };
+
+        // /*
+        // Get a unique id derived from vue's unique component identifier (this._uid) for use when an
+        // id is required for an inputs, labels, etc.
+        //     uniqueId('label') => 'label-0003'
+        // */
+        // Vue.prototype.uniqueId = function (prefix = null) {
+        //     let id = ('000000' + Number(this._uid).toString(16).toLowerCase()).slice(-4);
+        //     return prefix ? prefix + '-' + id : id;
+        // };
+    },
+};

package/utils/cardGridLayoutHelper.js

@@ -32,9 +32,7 @@ const baseTemplates = [
         '-----',
         '-- --'
     ],
-    [
-        '-- =='
-    ],
+
 
     // 2x4
 
@@ -44,7 +42,8 @@ const baseTemplates = [
     ],
     [
         '-----',
-        '-- =='
+        '-----',
+        '-- --'
     ],
 
     // 2x5
@@ -54,14 +53,12 @@ const baseTemplates = [
         '-- --',
         '-- --'
     ],
+
     [
         '-----',
         '-----',
-        '-- =='
-    ],
-    [
         '-- --',
-        '-- =='
+        '-----',
     ],
 
     // 2x6
@@ -74,11 +71,8 @@ const baseTemplates = [
     [
         '-----',
         '-- --',
-        '-- =='
-    ],
-    [
-        '-- --',
-        '== =='
+        '-----',
+        '-- --'
     ],
 
     // 2x7
@@ -90,15 +84,13 @@ const baseTemplates = [
         '-- --'
     ],
     [
+        '-----',
         '-- --',
-        '-- --',
-        '-- =='
-    ],
-    [
         '-----',
         '-- --',
-        '== =='
-    ],
+        '-----',
+    ]
+
 
     // 2x8
 
@@ -115,12 +107,16 @@ const baseTemplates = [
         '-- --',
         '-- --'
     ],
+
     [
+        '-----',
         '-----',
         '-- --',
         '-----',
-        '== =='
-    ]
+        '-----',
+        '-- --'
+    ],
+
 
     // THREE column layouts
 
@@ -147,9 +143,7 @@ const baseTemplates = [
     [
         '-- -- --'
     ],
-    [
-        '----- =='
-    ],
+
 
     // 3x4
 
@@ -157,9 +151,6 @@ const baseTemplates = [
         '----- --',
         '-- -----'
     ],
-    [
-        '-- -- =='
-    ],
 
     // 3x5
 
@@ -167,12 +158,10 @@ const baseTemplates = [
         '----- --',
         '-- -- --'
     ],
+
     [
-        '----- --',
-        '----- =='
-    ],
-    [
-        '-- == =='
+        '-- -----',
+        '-- -- --'
     ],
 
     // 3x6
@@ -182,14 +171,12 @@ const baseTemplates = [
         '-- -- --'
     ],
     [
+        '-- -----',
         '----- --',
-        '-- -- =='
-    ],
-    [
-        '----- ==',
-        '-- -- --'
+        '-- -----',
     ],
 
+
     // 3x7
 
     [
@@ -198,14 +185,12 @@ const baseTemplates = [
         '-- -- --'
     ],
     [
-        '-- -- ==',
-        '-- -- --'
-    ],
-    [
-        '----- ==',
-        '-- -- =='
+        '----- --',
+        '-- -- --',
+        '-- -----',
     ],
 
+
     // 3x8
 
     [
@@ -213,14 +198,12 @@ const baseTemplates = [
         '-- -- --',
         '-- -- --'
     ],
+
     [
         '----- --',
         '-- -----',
-        '-- -- =='
-    ],
-    [
         '----- --',
-        '== == =='
+        '-- -----',
     ],
 
     // 3x9
@@ -236,11 +219,6 @@ const baseTemplates = [
         '-- -- --',
         '-- -- --'
     ],
-    [
-        '----- --',
-        '-- -- --',
-        '-- -- =='
-    ],
 
     // 3x10
 
@@ -252,17 +230,286 @@ const baseTemplates = [
     ],
     [
         '----- --',
-        '-- -- ==',
-        '== -- --'
+        '-- -- --',
+        '-- -----',
+        '-- -- --',
     ],
     [
-        '----- ==',
-        '-- -- --',
-        '== -- --'
-    ]
+        '----- --',
+        '-- -----',
+        '----- --',
+        '-- -----',
+        '----- --',
+    ],
+
 
 ];
 
+// prettier-ignore
+// const baseTemplatesStacked = [
+
+//     // 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 => {

package/utils/textWidth.js

@@ -3,7 +3,9 @@
  *
  * @param str The text to be measured.
  * @param fontOrElement The css font descriptor (e.g bold 15px arial) or an element from which to extract the font.
+ * @param roundUp Round the result up to the nearest pixel (this is almost always desired so true by default)
  */
+
 const textWidth = (str, fontOrElement, roundUp = true) => {
     // get font metrics from an element
     let font = fontOrElement;