feat 0.17/4 (#491)

## Chore:
* chore: increment version

## Fix:
* fix(button): handle auto and % width values on loading
* fix(button): avoid setting width to auto
  * This could caused issues when turning button back from loading

## Feature:
* feat: made error message more helpful

## Testing
* test: updated helper test
* test: updated button tests

Author: nandi95

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.17.3",
+    "version": "0.17.4",
     "files": [
         "dist",
         "types"

package.json

@@ -107,7 +107,7 @@ describe('UIButton', () => {
             }
         });
 
-        expect(wrapper.find('.loader').isVisible()).toBe(true);
+        expect(wrapper.find('.ui-button-loader').isVisible()).toBe(true);
         expect(wrapper.find('.label').exists()).toBe(false);
     });
 

src/components/button/UIButton.test.ts

@@ -5,7 +5,7 @@
             :style="styles"
             class="ui-button rounded font-bold text-sm m-0 focus:outline-none ring-0
                    disabled:cursor-not-allowed disabled:shadow-none">
-        <span v-if="loading" class="loader">
+        <span v-if="loading" class="ui-button-loader">
             <slot name="loader">
                 <UISpinnerLoader inherit-color
                                  class="mx-auto"
@@ -313,14 +313,28 @@ export default defineComponent({
         const styles: Partial<CSSStyleDeclaration> = {};
 
         watch(() => props.loading, newVal => {
+            const computedStyle = getComputedStyle(instance.proxy!.$el as HTMLButtonElement);
+
+            if (computedStyle.width === 'auto' || computedStyle.width.endsWith('%')) {
+                return;
+            }
+
             // while loading sizing props might change but on
             // next loading it will set to the correct width
             if (newVal && !instance.slots.loader) {
-                const computedStyle = getComputedStyle(instance.proxy!.$el as HTMLButtonElement);
-                const minWidthRequirement = (props.small ? 20 : 25) + getPxValue(computedStyle.paddingInline) * 2;
+                const paddingInline = computedStyle.paddingInline === 'auto' ||
+                computedStyle.paddingInline.endsWith('%')
+                    ? 0
+                    : getPxValue(computedStyle.paddingInline);
 
-                styles.width = getPxValue(computedStyle.width) < minWidthRequirement ? 'auto' : computedStyle.width;
+                const minWidthRequirement = (props.small ? 20 : 25) + paddingInline * 2;
+
+                if (getPxValue(computedStyle.width) < minWidthRequirement) return;
+
+                styles.width = computedStyle.width;
             } else {
+                if (!styles.width) return;
+
                 styles.width = 'auto';
             }
         });

src/components/button/UIButton.vue

@@ -6,7 +6,7 @@ exports[`UIButton should display the loading correctly 1`] = `
   type="button"
 >
   <span
-    class="loader"
+    class="ui-button-loader"
   >
     
     <transition-stub>

src/components/button/__snapshots__/UIButton.test.ts.snap

@@ -28,5 +28,5 @@ export const getPxValue = (value: string | number): number => {
             parseFloat(globalThis?.window.getComputedStyle(globalThis?.document.documentElement).fontSize);
     }
 
-    throw new TypeError('Unexpected argument given.');
+    throw new TypeError('Unexpected argument given. Expected a number, px/vh/vw/rem value, got: ' + value);
 };

src/composables/style/index.ts

@@ -28,7 +28,9 @@ describe('style', () => {
         });
 
         it('should throw an error on invalid argument', () => {
-            expect(() => getPxValue('something')).toThrow(new TypeError('Unexpected argument given.'));
+            expect(() => getPxValue('something'))
+                .toThrow(new TypeError('Unexpected argument given. Expected a number, px/vh/vw/rem value, got: '
+                    + 'something'));
         });
 
         it('should correctly convert vw to px', () => {