@thinkpixellab-public/px-vue 3.0.3 → 3.0.4

package/README.md

@@ -13,7 +13,7 @@ be preserved.
 There is no primary entry point into this package so individual components or other files need to be imported directly. The package uses the same project structure as most of our other Vue projects (e.g. components in the /components folder, etc.).
 
 ```javascript
-import PxToggle from '@thinkpixellab/px-vue/components/PxToggle.vue';
+import PxToggle from '@thinkpixellab-public/px-vue/components/PxToggle.vue';
 ```
 
 ## Dependency on px-styles
@@ -57,7 +57,7 @@ Because we use a hard coded path to px-styles.scss, that file will get resolved
 
 ## Aliasing a Local Version During Development
 
-To resolve `@thinkpixellab/px-vue` from a local folder during development, you can extend webpack as follows
+To resolve `@thinkpixellab-public/px-vue` from a local folder during development, you can extend webpack as follows
 
 ```js
 const path = require('path');
@@ -66,7 +66,7 @@ const path = require('path');
 {
     resolve: {
         alias: {
-            '@thinkpixellab/px-vue': path.resolve(__dirname, '../px-vue'),
+            '@thinkpixellab-public/px-vue': path.resolve(__dirname, '../px-vue'),
         },
     }
 }

package/components/PxStylesPreview.vue

@@ -3,6 +3,13 @@
 -->
 <template>
     <div :class="bem()">
+        <div :class="bem('section')">
+            <h3 class="h3">Container</h3>
+        </div>
+        <div :class="[bem('container'), containerClass]">
+            <div :class="bem('container-inner')"></div>
+        </div>
+
         <div :class="bem('section', { color: true })">
             <h3 class="h3">Color</h3>
 
@@ -52,8 +59,6 @@ export default {
                 ].includes(c);
             });
 
-            console.log(`f: 👉 ${JSON.stringify(f, null, 4)}`);
-
             return f.map(colorName => {
                 return {
                     name: colorName,
@@ -61,6 +66,11 @@ export default {
                 };
             });
         },
+
+        containerClass() {
+            let sel = this.config?.container?.selector;
+            return sel && sel.slice(1);
+        },
     },
     // watch: {},
     mounted() {
@@ -71,11 +81,10 @@ export default {
 
         try {
             this.config = JSON.parse(configStr);
+            console.log(`this.config: 👉 ${JSON.stringify(this.config, null, 4)}`);
         } catch {
             console.error('Could not parse px-styles config string.');
         }
-
-        console.log(configStr);
     },
     // methods: {},
 };
@@ -125,5 +134,27 @@ export default {
         display: flex;
         gap: 1px;
     }
+
+    // container
+
+    &__container {
+        height: 100px;
+        position: relative;
+        @include after() {
+            position: absolute;
+            height: 1px;
+            background-color: black;
+            top: 50%;
+            left: 0;
+            right: 0;
+        }
+    }
+
+    &__container-inner {
+        height: 20px;
+        width: 100%;
+        border-left: 1px solid red;
+        border-right: 1px solid red;
+    }
 }
 </style>

package/components/PxSvg.vue

@@ -3,7 +3,7 @@
     provided by vue-inline-svg, this component will ensure a consistent approach to sizing and
     perform basic string replacements.
 
-    @import PxSvg from '@thinkpixellab/px-vue/components/PxSvg.vue';
+    @import PxSvg from '@thinkpixellab-public/px-vue/components/PxSvg.vue';
 
     // show the icon at it's natural size
     <px-svg src="require('~assets/icons/arrow.svg')" />

package/components/PxValidator.vue

@@ -37,8 +37,8 @@
     </template>
 
     <script>
-    import PxValidator from '@thinkpixellab/px-vue/components/PxValidator.vue';
-    import PxTextbox from '@thinkpixellab/px-vue/components/PxTextbox.vue';
+    import PxValidator from '@thinkpixellab-public/px-vue/components/PxValidator.vue';
+    import PxTextbox from '@thinkpixellab-public/px-vue/components/PxTextbox.vue';
 
     export default {
         components: { PxValidator, PxTextbox },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thinkpixellab-public/px-vue",
-    "version": "3.0.3",
+    "version": "3.0.4",
     "description": "General purpose Vue components and helpers that can be used across projects.",
     "author": "Pixel Lab",
     "license": "MIT",
@@ -14,7 +14,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.0.1",
         "@popperjs/core": "^2.11.5",
-        "@thinkpixellab-public/px-styles": "^3.6.3",
+        "@thinkpixellab-public/px-styles": "^3.7.1",
         "@thinkpixellab-public/px-vue-tester": "^2.0.0",
         "@thinkpixellab-public/vue-resize-directive": "^1.2.2",
         "body-scroll-lock": "^3.1.5",

package/styles/helpers.scss

@@ -5,7 +5,7 @@
     To import include the following at the top of any scss file:
 
         // import px-vue helpers
-        @use '@thinkpixellab/px-vue/styles/helpers.scss' as pxvue;
+        @use '@thinkpixellab-public/px-vue/styles/helpers.scss' as pxvue;
 
     And then access mixins from the prefix pxvue (or import as * if you're feeling dangerous).