@mekari/pixel-input - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/mekari-pixel-input.cjs.dev.js

@@ -61,3 +61,3 @@ 'use strict';
     type: [Boolean],
-    default: false
+    default: true
   },
@@ -95,5 +95,5 @@ isClearable: {
     md: {
-      width: isFullWidth ? '100%' : 'auto',
+      width: isFullWidth ? '100%' : undefined,
       height: '9.5',
-      minWidth: isFullWidth ? 'auto' : '65',
+      minWidth: '22',
       fontSize: 'md',
@@ -108,5 +108,5 @@ fontWeight: 'regular',
     sm: {
-      width: isFullWidth ? '100%' : 'auto',
+      width: isFullWidth ? '100%' : undefined,
       height: '7.5',
-      minWidth: isFullWidth ? 'auto' : '65',
+      minWidth: '22',
       fontSize: 'sm',
@@ -279,5 +279,9 @@ fontWeight: 'regular',
     this.$parent.$children.map(node => {
-      const width = node.$el.clientWidth;
+      let width = 0;
       const withBackground = pixelUtils.isUndef(node.$options.propsData.withBackground);
 
+      if (node.$children[0].$children[0]) {
+        width = parseInt(getComputedStyle(node.$children[0].$children[0].$el).width, 10);
+      }
+
       if (node.$refs.inputLeftAddonRef) {
@@ -291,4 +295,2 @@ this.stylePaddingLeft += withBackground ? width + 1 : width + 12;
       }
-
-      this.stylePaddingRight += this.isClearable ? 16 : 0;
     });
@@ -303,3 +305,3 @@ },
         alignItems: 'center',
-        width: this.isFullWidth ? '100%' : 'auto'
+        width: this.isFullWidth ? '100%' : undefined
       },
@@ -306,0 +308,0 @@ on: {

dist/mekari-pixel-input.cjs.prod.js

@@ -61,3 +61,3 @@ 'use strict';
     type: [Boolean],
-    default: false
+    default: true
   },
@@ -95,5 +95,5 @@ isClearable: {
     md: {
-      width: isFullWidth ? '100%' : 'auto',
+      width: isFullWidth ? '100%' : undefined,
       height: '9.5',
-      minWidth: isFullWidth ? 'auto' : '65',
+      minWidth: '22',
       fontSize: 'md',
@@ -108,5 +108,5 @@ fontWeight: 'regular',
     sm: {
-      width: isFullWidth ? '100%' : 'auto',
+      width: isFullWidth ? '100%' : undefined,
       height: '7.5',
-      minWidth: isFullWidth ? 'auto' : '65',
+      minWidth: '22',
       fontSize: 'sm',
@@ -279,5 +279,9 @@ fontWeight: 'regular',
     this.$parent.$children.map(node => {
-      const width = node.$el.clientWidth;
+      let width = 0;
       const withBackground = pixelUtils.isUndef(node.$options.propsData.withBackground);
 
+      if (node.$children[0].$children[0]) {
+        width = parseInt(getComputedStyle(node.$children[0].$children[0].$el).width, 10);
+      }
+
       if (node.$refs.inputLeftAddonRef) {
@@ -291,4 +295,2 @@ this.stylePaddingLeft += withBackground ? width + 1 : width + 12;
       }
-
-      this.stylePaddingRight += this.isClearable ? 16 : 0;
     });
@@ -303,3 +305,3 @@ },
         alignItems: 'center',
-        width: this.isFullWidth ? '100%' : 'auto'
+        width: this.isFullWidth ? '100%' : undefined
       },
@@ -306,0 +308,0 @@ on: {

dist/mekari-pixel-input.esm.js

@@ -57,3 +57,3 @@ import { MpBox } from '@mekari/pixel-box';
     type: [Boolean],
-    default: false
+    default: true
   },
@@ -91,5 +91,5 @@ isClearable: {
     md: {
-      width: isFullWidth ? '100%' : 'auto',
+      width: isFullWidth ? '100%' : undefined,
       height: '9.5',
-      minWidth: isFullWidth ? 'auto' : '65',
+      minWidth: '22',
       fontSize: 'md',
@@ -104,5 +104,5 @@ fontWeight: 'regular',
     sm: {
-      width: isFullWidth ? '100%' : 'auto',
+      width: isFullWidth ? '100%' : undefined,
       height: '7.5',
-      minWidth: isFullWidth ? 'auto' : '65',
+      minWidth: '22',
       fontSize: 'sm',
@@ -275,5 +275,9 @@ fontWeight: 'regular',
     this.$parent.$children.map(node => {
-      const width = node.$el.clientWidth;
+      let width = 0;
       const withBackground = isUndef(node.$options.propsData.withBackground);
 
+      if (node.$children[0].$children[0]) {
+        width = parseInt(getComputedStyle(node.$children[0].$children[0].$el).width, 10);
+      }
+
       if (node.$refs.inputLeftAddonRef) {
@@ -287,4 +291,2 @@ this.stylePaddingLeft += withBackground ? width + 1 : width + 12;
       }
-
-      this.stylePaddingRight += this.isClearable ? 16 : 0;
     });
@@ -299,3 +301,3 @@ },
         alignItems: 'center',
-        width: this.isFullWidth ? '100%' : 'auto'
+        width: this.isFullWidth ? '100%' : undefined
       },
@@ -302,0 +304,0 @@ on: {

package.json

 {
   "name": "@mekari/pixel-input",
   "description": "Mekari Pixel | Input component",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "homepage": "https://mekari.design/",
@@ -28,3 +28,3 @@ "repository": {
     "@mekari/pixel-box": "^0.0.7",
-    "@mekari/pixel-button-icon": "^0.4.0",
+    "@mekari/pixel-button-icon": "^0.4.1",
     "@mekari/pixel-utils": "^0.1.0"
@@ -31,0 +31,0 @@ },

src/input.js

@@ -82,5 +82,9 @@ import { MpBox } from '@mekari/pixel-box'
     this.$parent.$children.map((node) => {
-      const width = node.$el.clientWidth
+      let width = 0
       const withBackground = isUndef(node.$options.propsData.withBackground)
 
+      if (node.$children[0].$children[0]) {
+        width = parseInt(getComputedStyle(node.$children[0].$children[0].$el).width, 10)
+      }
+
       if (node.$refs.inputLeftAddonRef) {
@@ -94,4 +98,2 @@ this.stylePaddingLeft += withBackground ? width + 1 : width + 12
       }
-
-      this.stylePaddingRight += this.isClearable ? 16 : 0
     })
@@ -107,3 +109,3 @@ },
           alignItems: 'center',
-          width: this.isFullWidth ? '100%' : 'auto'
+          width: this.isFullWidth ? '100%' : undefined
         },
@@ -110,0 +112,0 @@ on: {

src/utils/input.props.js

@@ -31,3 +31,3 @@ /**
   isRequired: { type: [Boolean], default: false },
-  isFullWidth: { type: [Boolean], default: false },
+  isFullWidth: { type: [Boolean], default: true },
   isClearable: { type: [Boolean], default: false },
@@ -34,0 +34,0 @@ ariaLabel: [String],

src/utils/input.styles.js

@@ -20,5 +20,5 @@ /**
     md: {
-      width: isFullWidth ? '100%' : 'auto',
+      width: isFullWidth ? '100%' : undefined,
       height: '9.5',
-      minWidth: isFullWidth ? 'auto' : '65',
+      minWidth: '22',
       fontSize: 'md',
@@ -33,5 +33,5 @@ fontWeight: 'regular',
     sm: {
-      width: isFullWidth ? '100%' : 'auto',
+      width: isFullWidth ? '100%' : undefined,
       height: '7.5',
-      minWidth: isFullWidth ? 'auto' : '65',
+      minWidth: '22',
       fontSize: 'sm',
@@ -38,0 +38,0 @@ fontWeight: 'regular',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52655

increased by0.18%

Lines of code

1914

increased by0.42%

Dependency changes

• Updated@mekari/pixel-button-icon@^0.4.1