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
janwehner · Aug 3, 2018 · c684ffe · c684ffe
1 parent 57925be
commit c684ffe
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)
+  });
 });