@thinkpixellab-public/px-vue 4.0.20 → 4.0.22

package/bases/PxBaseMobileProvide.vue

@@ -69,3 +69,9 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+@use '../styles/px.scss' as *;
+
+@include media-breakpoint-vars;
+</style>

package/components/PxArrowScroller.vue

@@ -21,7 +21,7 @@ ar
         <PxIconButton
             v-if="!disabled && !arrowsHidden"
             :class="[bem('button', { start: true, visible: arrowStartVisible }), buttonClass]"
-            :iconClass="[bem('arrow-icon'), iconClass]"
+            :iconClass="combineIconClasses(bem('arrow-icon'), iconClass)"
             :icon="arrowStartIcon"
             :disabled="!arrowStartVisible"
             aria-label="Scroll to previous"
@@ -40,7 +40,7 @@ ar
         <PxIconButton
             v-if="!disabled && !arrowsHidden"
             :class="[bem('button', { end: true, visible: arrowEndVisible }), buttonClass]"
-            :iconClass="[bem('arrow-icon'), iconClass]"
+            :iconClass="combineIconClasses(bem('arrow-icon'), iconClass)"
             :icon="arrowEndIcon"
             :disabled="!arrowEndVisible"
             aria-label="Scroll to next"
@@ -139,6 +139,9 @@ export default {
     },
 
     methods: {
+        combineIconClasses(...classNames) {
+            return classNames.filter((c) => c).join(' ');
+        },
         pxIconProps(attrs) {
             return propsFilter(PxIcon)(attrs);
         },

package/components/PxColorPicker.vue

@@ -35,6 +35,7 @@ const PxColorPicker = {
     name: 'px-color-picker',
     components: { PxFloat, PxColorPanel, PxColorPaletteButton, PxIcon },
     mixins: [PxBaseColor],
+    emits: ['click'],
     props: {
         /**
          * An icon to display inside the button. If a string is provided, it will be interpreted as

package/components/PxTextbox.vue

@@ -30,7 +30,7 @@ export default {
         multiline: { type: Boolean, default: false },
 
         // the value of the textbox
-        value: { type: String, default: null },
+        text: { type: String, default: null },
 
         // whether to fire an update / v-model event on every character change ('input') or when the textbox loses focus ('change')
         updateMode: {
@@ -58,12 +58,12 @@ export default {
     },
 
     watch: {
-        value(nv) {
+        text(nv) {
             this.setValue(nv);
         },
     },
     mounted() {
-        this.setValue(this.value);
+        this.setValue(this.text);
     },
 
     methods: {
@@ -99,7 +99,7 @@ export default {
             this.$refs.input.textContent = val;
 
             // raise an update event
-            this.$emit('update:value', val);
+            this.$emit('update:text', val);
 
             // update the caret position
             const newPos = startPos + (val.length - prevValue.length);

package/components/PxVueTest.vue

@@ -129,7 +129,7 @@
                     >
                         <template #default="v">
                             <px-textbox
-                                v-model="validateOne"
+                                v-model:text="validateOne"
                                 :class="[v.class, v.requiredClass, v.violationClasses]"
                             />
                         </template>
@@ -142,7 +142,7 @@
                     >
                         <template #default="v">
                             <px-textbox
-                                v-model="validateTwo"
+                                v-model:text="validateTwo"
                                 :class="[v.class, v.requiredClass, v.violationClasses]"
                             />
                         </template>
@@ -253,7 +253,7 @@
                 <px-flex :vertical="true" :gap="1">
                     <div>currentText: {{ currentText }}</div>
 
-                    <px-textbox v-model="currentText" placeholder="Say what you want..." />
+                    <px-textbox v-model:text="currentText" placeholder="Say what you want..." />
 
                     <px-textbox
                         multiline
@@ -263,7 +263,7 @@
                     />
 
                     <px-textbox type="password" />
-                    <px-textbox :value="'hello@thinkpixellab.com'" type="email" />
+                    <px-textbox :text="'hello@thinkpixellab.com'" type="email" />
                 </px-flex>
             </px-test>
 

package/package.json

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