@thinkpixellab-public/px-vue 4.0.7 → 4.0.9

package/bases/PxBaseToggle.vue

@@ -10,6 +10,7 @@
 
 <script>
 export default {
+    emits: ['update:checked', 'checked', 'unchecked'],
     props: {
         /**
          * The value of the checked property.

package/components/PxContain.vue

@@ -3,8 +3,8 @@
 
     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 #default="{width, height, left, top }" :aspect="16/9" :round="true" :to-px="true">
+        <div :style="{position: 'absolute', left: left top: top,  width: width, height: height}"  />
     </px-contain>
 
 -->

package/components/PxQrCode.vue

@@ -1,72 +1,31 @@
 <!--
-    #VUE3 Todo
--->
-
-<!--
-    Creates a custom svg-based qr code.
+    Creates a custom qr code.
 
     Usage:
     <px-qr-code :content="http://thinkpixellab.com" />
 
 -->
 <template>
-    <div :class="bem()" v-html="svg"></div>
+    <qrcode-vue
+        :class="bem()"
+        v-if="content"
+        :value="content"
+        :size="size"
+        role="img"
+        :aria-label="label"
+    ></qrcode-vue>
 </template>
 
 <script>
-import * as qrcode from 'qrcode'
-import PxBaseResize from '../bases/PxBaseResize.vue';
+import QrcodeVue from 'qrcode.vue';
 
 export default {
     name: 'px-qr-code',
-    mixins: [PxBaseResize],
+    components: { QrcodeVue },
     props: {
         content: { type: String, default: 'Hello' },
-        foreground: { type: String, default: '#000000' },
-        background: { type: String, default: '#FFFFFF' },
-        padding: { type: Number, default: 0 },
-        ecl: { type: String, default: 'L' },
-    },
-    data() {
-        return { size: 0, svg: '' };
-    },
-    watch: {
-        content() {
-            this.updateSvg();
-        },
-        foreground() {
-            this.updateSvg();
-        },
-        background() {
-            this.updateSvg();
-        },
-        padding() {
-            this.updateSvg();
-        },
-    },
-    mounted() {
-        this.updateSvg();
-    },
-    methods: {
-        updateSvg() {
-            qrcode.toString(
-                this.content,
-                {
-                    type: 'svg',
-                    margin: this.padding,
-                    color: {
-                        dark: this.foreground,
-                        light: this.background,
-                    },
-                },
-                (err, str) => {
-                    if (err) {
-                        console.warn('Error creating QR Code. \n' + err);
-                    }
-                    this.svg = str;
-                }
-            );
-        },
+        label: { type: String },
+        size: { type: Number, default: 400 },
     },
 };
 </script>
@@ -75,8 +34,12 @@ export default {
 .px-qr-code {
     aspect-ratio: 1;
     width: 256px;
-    svg {
-        width: 100%;
+    canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100% !important;
+        height: 100% !important;
     }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "4.0.7",
+    "version": "4.0.9",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -20,7 +20,7 @@
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^4.0.0-beta.0",
         "mitt": "^3.0.0",
-        "qrcode": "^1.5.3",
+        "qrcode.vue": "^3.4.0",
         "throttle-debounce": "^5.0.0",
         "vue": "^3.3.4",
         "vue-inline-svg": "^3.1.0"

package/plugins/filters/striphtml.js

@@ -1,5 +1,5 @@
 export default val => {
-    if (val && !process.server) {
+    if (val && typeof document !== 'undefined') {
         val = val.replace(/<\/p>/g, '</p> ');
         val = val.replace(/<\/li>/g, '</li> ');
         val = val.replace(/<\/div>/g, '</div> ');

package/stories/PxIcon.mdx

@@ -10,8 +10,7 @@ by name, default replacements collection that converts the color black to `curre
 properties for customizing stroke width, offset and spacing.
 
 To make named app icons available, create a plugin in the project that calls
-`app.provide('PxIcon.icons', appIcons)` where `appIcons` is a collection of icons like `{ iconOne:
-srcOne, iconTwo: srcTwo }`.
+`app.provide('PxIcon.icons', appIcons)` where `appIcons` is a collection of icons like `{ iconOne: srcOne, iconTwo: srcTwo }`.
 
 PxVue contains the full set of [feather icons](https://feathericons.com/) and a helper for making
 those available by name within the application. See the plugin reference below.
@@ -20,8 +19,6 @@ those available by name within the application. See the plugin reference below.
 
 <Controls of={PxIconStories.Basic} />
 
-### Nuxt 3 Plugin Example
-
 ```js
 // px-vue feather icons helper
 import getFeatherIcons from '@thinkpixellab-public/px-vue/utils/getFeatherIcons.js';
@@ -30,15 +27,14 @@ export default defineNuxtPlugin(nuxtApp => {
     const vueApp = nuxtApp.vueApp;
 
     // search for icons in the @/assets/feather folder
-    const icons = Object.values(import.meta.globEager('@/assets/feather/*.svg')).reduce(
-        (obj, value) => {
-            const url = value.default;
-            const name = url.match(/([^\/]+)(?=\.\w+$)/)[0];
-            obj[name] = url;
-            return obj;
-        },
-        {}
-    );
+    const icons = Object.values(
+        import.meta.globEager('@thinkpixellab-public/px-vue/assets/feather/*.svg')
+    ).reduce((obj, value) => {
+        const url = value.default;
+        const name = url.match(/([^\/]+)(?=\.\w+$)/)[0];
+        obj[name] = url;
+        return obj;
+    }, {});
 
     vueApp.provide('PxIcon.icons', {
         // local icons