@thinkpixellab-public/px-vue 4.0.12 → 4.0.14

package/bases/PxBaseItems.vue

@@ -94,11 +94,11 @@ export default {
         },
 
         isValidItem(item) {
-            return !!this.items.includes(item);
+            return !!this.items?.includes(item);
         },
 
         isValidItemKey(key) {
-            return !!this.itemKeys.includes(key);
+            return !!this.itemKeys?.includes(key);
         },
     },
 };

package/components/PxBalancedText.vue

@@ -3,7 +3,7 @@
 -->
 <template>
     <component
-        :is="tag"
+        :is="calcTag"
         class="px-balanced-text"
         :style="{ opacity: elementOpacity, color: debugColor, textAlign }"
     >
@@ -11,13 +11,13 @@
         <component
             v-if="hasHtml"
             :class="[bem('inner', { html: true }), innerClass]"
-            :is="innerTag"
+            :is="calcInnerTag"
             ref="text"
             v-html="html"
         />
 
         <!-- slot -->
-        <component v-else :class="[bem('inner'), innerClass]" :is="innerTag" ref="text">
+        <component v-else :class="[bem('inner'), innerClass]" :is="calcInnerTag" ref="text">
             <slot>
                 {{ text }}
             </slot>
@@ -37,12 +37,12 @@ export default {
         /**
          * The outer tag element
          */
-        tag: { type: String, default: 'p' },
+        tag: { type: String, default: null },
 
         /**
          * The inner tag element
          */
-        innerTag: { type: String, default: 'span' },
+        innerTag: { type: String, default: null },
 
         // the inner tag element
         innerClass: { type: String, default: null },
@@ -83,6 +83,14 @@ export default {
         };
     },
     computed: {
+        calcTag() {
+            const defaultTag = this.hasHtml ? 'div' : 'p';
+            return this.tag || defaultTag;
+        },
+        calcInnerTag() {
+            const defaultTag = this.hasHtml ? 'div' : 'span';
+            return this.innerTag || defaultTag;
+        },
         hasHtml() {
             return !!this.htmlValue && !this.text;
         },

package/components/PxCodeSample.vue

@@ -2,7 +2,6 @@
     <div :class="bem()">
         <pre
             v-if="loaded"
-            ref="code"
             class="px-code-sample"
             :class="lang"
         ><code v-html="highlightedCode"></code></pre>
@@ -71,10 +70,14 @@ export default {
 @use '@thinkpixellab-public/px-styles/src/modules/highlightjs.scss' as *;
 .px-code-sample {
     position: relative;
-    pre {
-        @include highlightjs();
-        padding: 1em;
-        border-radius: 0.5em;
+    padding: 1em;
+    border-radius: 0.5em;
+
+    @include highlightjs();
+    pre,
+    code {
+        padding: 0;
+        margin: 0;
     }
 
     &__copy-button {

package/components/PxQrCode.vue

@@ -6,18 +6,21 @@
 
 -->
 <template>
-    <qrcode-vue
-        :class="bem()"
-        v-if="content"
-        :value="content"
-        :size="size"
-        role="img"
-        :aria-label="label || content"
-    ></qrcode-vue>
+    <div :class="bem()">
+        <qrcode-vue
+            v-if="content"
+            :value="content"
+            role="img"
+            :size="size"
+            :margin="padding"
+            :aria-label="label || content"
+        ></qrcode-vue>
+    </div>
 </template>
 
 <script>
 import QrcodeVue from 'qrcode.vue';
+// test
 
 export default {
     name: 'px-qr-code',
@@ -25,7 +28,23 @@ export default {
     props: {
         content: { type: String, default: 'Hello' },
         label: { type: String },
-        size: { type: Number, default: 400 },
+        padding: { type: Number, default: 0 },
+    },
+    data() {
+        return { size: null };
+    },
+    mounted() {
+        this.size = Math.min(this.$el.clientWidth, this.$el.clientHeight);
+
+        this.onSizeChange = () => {
+            this.size = Math.min(this.$el.clientWidth, this.$el.clientHeight);
+        };
+
+        this.resizeObserver = new ResizeObserver(this.onSizeChange);
+        this.resizeObserver.observe(this.$el);
+    },
+    beforeUnmount() {
+        this.resizeObserver.disconnect();
     },
 };
 </script>
@@ -33,13 +52,5 @@ export default {
 <style lang="scss">
 .px-qr-code {
     aspect-ratio: 1;
-    width: 256px;
-    canvas {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100% !important;
-        height: 100% !important;
-    }
 }
 </style>

package/components/PxTable.vue

@@ -471,64 +471,64 @@ export default {
 @use '../styles/px.scss' as *;
 @use '@thinkpixellab-public/px-styles/src/modules/controls' as *;
 
-.px-table {
-    @at-root {
-        :root {
-            // background for the entire table
-            --px-table-bg: #{clr(page-bg)};
+@at-root {
+    :root {
+        // background for the entire table
+        --px-table-bg: #{clr(page-bg)};
 
-            // background for the entire table
-            --px-table-fg: #{clr(page-fg)};
+        // background for the entire table
+        --px-table-fg: #{clr(page-fg)};
 
-            // outer border for the entire table
-            --px-table-border: 1px solid #{gray(2, 0.5)};
+        // outer border for the entire table
+        --px-table-border: 1px solid #{gray(2, 0.5)};
 
-            // outer border radius for the entire table
-            --px-table-radius: 0.5em;
+        // outer border radius for the entire table
+        --px-table-radius: 0.5em;
 
-            // inner border radius (may need to be less than outer in some cases)
-            --px-table-inner-radius: initial;
+        // inner border radius (may need to be less than outer in some cases)
+        --px-table-inner-radius: initial;
 
-            // background for the header row
-            --px-table-header-bg: #{gray(8)};
+        // background for the header row
+        --px-table-header-bg: #{gray(8)};
 
-            // background for the header row
-            --px-table-header-fg: unset;
+        // background for the header row
+        --px-table-header-fg: unset;
 
-            // separator border below the header row
-            --px-table-header-border: 1px solid #{gray(2, 0.5)};
+        // separator border below the header row
+        --px-table-header-border: 1px solid #{gray(2, 0.5)};
 
-            // background for all non-header rows
-            --px-table-row-bg: transparent;
+        // background for all non-header rows
+        --px-table-row-bg: unset;
 
-            // background for all non-header rows
-            --px-table-row-fg: unset;
+        // background for all non-header rows
+        --px-table-row-fg: unset;
 
-            // background for odd non-header rows
-            --px-table-row-odd-bg: unset;
+        // background for odd non-header rows
+        --px-table-row-odd-bg: unset;
 
-            // background for odd non-header rows
-            --px-table-row-odd-fg: unset;
+        // background for odd non-header rows
+        --px-table-row-odd-fg: unset;
 
-            // separator border below each row
-            --px-table-row-border: 1px solid #{gray(2, 0.5)};
+        // separator border below each row
+        --px-table-row-border: 1px solid #{gray(2, 0.5)};
 
-            // cell padding
-            --px-table-cell-padding: 1em;
+        // cell padding
+        --px-table-cell-padding: 1em;
 
-            // header cell padding
-            --px-table-header-cell-padding: 1em;
+        // header cell padding
+        --px-table-header-cell-padding: 1em;
 
-            // header cell hover (when clickable)
-            --px-table-header-cell-hover-bg: #{gray(5)};
-            --px-table-header-cell-hover-fg: unset;
+        // header cell hover (when clickable)
+        --px-table-header-cell-hover-bg: #{gray(5)};
+        --px-table-header-cell-hover-fg: unset;
 
-            // header cell selected (e.g. sorted)
-            --px-table-header-cell-selected-bg: #{accent(0)};
-            --px-table-header-cell-selected-fg: #{contrast-color(accent(0))};
-        }
+        // header cell selected (e.g. sorted)
+        --px-table-header-cell-selected-bg: #{accent(0)};
+        --px-table-header-cell-selected-fg: #{contrast-color(accent(0))};
     }
+}
 
+.px-table {
     // row states that can be used when defining config for cell and header
 
     $cell-state-aliases: (
@@ -635,6 +635,7 @@ export default {
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        line-height: 1.33;
 
         &--action {
             padding: 0.5em;

package/package.json

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