@thinkpixellab-public/px-vue 3.0.29 → 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.29",
+    "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;
+        // };
+    },
+};