From c684ffead95c53fa5899df63ce12e75ffefb8597 Mon Sep 17 00:00:00 2001
From: Ricardo Falasca <ricardo@wrfinance.com>
Date: Fri, 3 Aug 2018 16:11:31 -0700
Subject: [PATCH] 0.0.14 - new feature: customizable button class  -
 test(customized button class): add new test in favor of a customized button
 class  - doc: append documentation about 'buttonClass' prop

---
 README.md         |  7 +++++++
 package.json      |  2 +-
 src/vue-ladda.vue | 16 ++++++++--------
 test.js           |  7 +++++++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 38f46b0..6728864 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,13 @@ new Vue({
     <vue-ladda>Confirm</vue-ladda>
     ```
 
+- Use `buttonClass` prop to specify your own CSS classes: (Default is "ladda-class")
+    ie. you can use Bootstrap button classes
+
+    ```html
+    <vue-ladda button-class="btn btn-primary">Yes!</vue-ladda>
+    ```
+
 - Use `data-style` prop to specify animation:
 
     ```html
diff --git a/package.json b/package.json
index df498a7..1ffa861 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ladda",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A vue component wrapper of Ladda button.",
   "homepage": "https://github.com/zcfan/vue-ladda",
   "main": "dist/vue-ladda.js",
diff --git a/src/vue-ladda.vue b/src/vue-ladda.vue
index 3f84476..9f623e3 100644
--- a/src/vue-ladda.vue
+++ b/src/vue-ladda.vue
@@ -1,6 +1,6 @@
 <template>
-  <button class="ladda-button" ref="ladda" :data-style="dataStyle" @click="handleClick">
-    <span class="ladda-label"><slot>Submit</slot></span>
+  <button :class="buttonClass" ref="ladda" :data-style="dataStyle" @click="handleClick">
+    <slot><span class="ladda-label">Submit</span></slot>
   </button>
 </template>
 
@@ -11,8 +11,13 @@
     name: 'VueLadda',
 
     props: {
+      // customizable button's class attribute - you can use your own CSS class 
+      'buttonClass': {
+        type: String,
+        default: 'ladda-class'
+      },
       // use vue props validation to make sure "data-style" is given. (ladda need it)
-      "dataStyle": {
+      'dataStyle': {
         type: String,
         default: 'expand-left'
       },
@@ -56,8 +61,3 @@
     }
   };
 </script>
-
-<style lang="scss">
-  // TODO: make themed a option?
-  @import '~ladda/css/ladda-themed.scss';
-</style>
diff --git a/test.js b/test.js
index e07a2a8..52d1414 100644
--- a/test.js
+++ b/test.js
@@ -13,7 +13,14 @@ describe('VueLadda', () => {
 
   it('sets the correct default data', () => {
     const vm = new Ctor().$mount();
+    expect(vm.buttonClass).toBe('ladda-class');
     expect(vm.dataStyle).toBe('expand-left');
     expect(vm.progress).toBe(0);
   });
+
+  it('test custom button class', () => {
+    let bsClasses = 'btn btn-primary'
+    const vm = new Ctor({propsData: {buttonClass: bsClasses}}).$mount();
+    expect(vm.buttonClass).toBe(bsClasses)
+  });
 });