Add description to all props from components

src/components/BaseAlert.vue

@@ -31,11 +31,13 @@
       },
       dismissible: {
         type: Boolean,
-        default: false
+        default: false,
+        description: 'Whether alert is dismissible (closeable)'
       },
       withIcon: {
         type: Boolean,
-        default: false
+        default: false,
+        description: 'Whether alert contains icon'
       }
     },
     data() {

src/components/BaseButton.vue

@@ -9,51 +9,59 @@
       {'btn-round': round},
       {'btn-block': block},
       {'btn-icon btn-fab': icon},
-      {[`btn-${type}`]: type && !outline},
+      {[`btn-${type}`]: type},
-      {[`btn-outline-${type}`]: type && outline},
       {[`btn-${size}`]: size},
       {'btn-simple': simple},
       {'btn-link': link},
       {'disabled': disabled && tag !== 'button'}
     ]">
     <slot name="loading">
-      <i v-if="loading" class="fa fa-spinner fa-spin"></i>
+      <i v-if="loading" class="fas fa-spinner fa-spin"></i>
     </slot>
     <slot></slot>
   </component>
 </template>
 <script>
 export default {
-  name: 'base-button',
+  name: "base-button",
   props: {
     tag: {
       type: String,
-      default: "button"
+      default: "button",
+      description: "Button html tag"
     },
     round: Boolean,
     icon: Boolean,
-    outline: Boolean,
     block: Boolean,
     loading: Boolean,
     disabled: Boolean,
     type: {
       type: String,
-      default: "default"
+      default: "default",
+      description: "Button type (primary|secondary|danger etc)"
     },
     nativeType: {
       type: String,
-      default: "button"
+      default: "button",
+      description: "Button native type (e.g button, input etc)"
     },
     size: {
       type: String,
-      default: ""
+      default: "",
+      description: "Button size (sm|lg)"
+    },
+    simple: {
+      type: Boolean,
+      description: "Whether button is simple (outlined)"
+    },
+    link: {
+      type: Boolean,
+      description: "Whether button is a link (no borders or background)"
     },
-    simple: Boolean,
-    link: Boolean,
   },
   methods: {
     handleClick(evt) {
-      this.$emit('click', evt);
+      this.$emit("click", evt);
     }
   }
 };

src/components/BaseCheckbox.vue

@@ -21,10 +21,18 @@
       prop: "checked"
     },
     props: {
-      checked: [Array, Boolean],
+      checked: {
-      disabled: Boolean,
+        type: [Array, Boolean],
-      inline: Boolean,
+        description: "Whether checkbox is checked"
-      hasError: Boolean
+      },
+      disabled: {
+        type: Boolean,
+        description: "Whether checkbox is disabled"
+      },
+      inline: {
+        type: Boolean,
+        description: "Whether checkbox should be inline with other checkboxes"
+      }
     },
     data() {
       return {

src/components/BaseDropdown.vue

@@ -23,37 +23,55 @@
   </component>
 </template>
 <script>
-export default {
+  export default {
-  name: "base-dropdown",
+    name: "base-dropdown",
-  props: {
+    props: {
-    tag: {
+      tag: {
-      type: String,
+        type: String,
-      default: "div"
+        default: "div",
+        description: "Dropdown html tag (e.g div, ul etc)"
+      },
+      titleTag: {
+        type: String,
+        default: "button",
+        description: "Dropdown title (toggle) html tag"
+      },
+      title: {
+        type: String,
+        description: "Dropdown title",
+
+      },
+      icon: {
+        type: String,
+        description: "Dropdown icon"
+      },
+      titleClasses: {
+        type: [String, Object, Array],
+        description: "Title css classes"
+      },
+      menuClasses: {
+        type: [String, Object],
+        description: "Menu css classes"
+      },
+      menuOnRight: {
+        type: Boolean,
+        description: "Whether menu should appear on the right"
+      },
     },
-    titleTag: {
+    data() {
-      type: String,
+      return {
-      default: "button"
+        isOpen: false
+      };
     },
-    title: String,
+    methods: {
-    icon: String,
+      toggleDropDown() {
-    titleClasses: [String, Object, Array],
+        this.isOpen = !this.isOpen;
-    menuClasses: [String, Object],
+        this.$emit("change", this.isOpen);
-    menuOnRight: Boolean
+      },
-  },
+      closeDropDown() {
-  data() {
+        this.isOpen = false;
-    return {
+        this.$emit('change', false);
-      isOpen: false
+      }
-    };
-  },
-  methods: {
-    toggleDropDown() {
-      this.isOpen = !this.isOpen;
-      this.$emit("change", this.isOpen);
-    },
-    closeDropDown() {
-      this.isOpen = false;
-      this.$emit('change', false);
     }
-  }
+  };
-};
 </script>

src/components/BaseTable.vue

@@ -24,27 +24,30 @@
   export default {
     name: 'base-table',
     props: {
-      columns: Array,
+      columns: {
-      data: Array,
+        type: Array,
+        default: () => [],
+        description: "Table columns"
+      },
+      data: {
+        type: Array,
+        default: () => [],
+        description: "Table data"
+      },
       type: {
         type: String, // striped | hover
-        default: ""
+        default: "",
-      },
+        description: "Whether table is striped or hover type"
-      title: {
-        type: String,
-        default: ""
       },
       theadClasses: {
         type: String,
-        default: ''
+        default: '',
+        description: "<thead> css classes"
       },
       tbodyClasses: {
         type: String,
-        default: ''
+        default: '',
-      },
+        description: "<tbody> css classes"
-      subTitle: {
-        type: String,
-        default: ""
       }
     },
     computed: {

src/components/Cards/Card.vue

@@ -16,21 +16,41 @@
       <slot name="image-bottom"></slot>
     </div>
     <slot name="raw-content"></slot>
-    <div class="card-footer" v-if="$slots.footer">
+    <div class="card-footer" :class="footerClasses" v-if="$slots.footer">
       <slot name="footer"></slot>
     </div>
   </div>
 </template>
 <script>
-export default {
+  export default {
-  name: "card",
+    name: "card",
-  props: {
+    props: {
-    title: String,
+      title: {
-    subTitle: String,
+        type: String,
-    type: String,
+        description: "Card title"
-    headerClasses: [String, Object, Array]
+      },
-  }
+      subTitle: {
-};
+        type: String,
+        description: "Card subtitle"
+      },
+      type: {
+        type: String,
+        description: "Card type (e.g primary/danger etc)"
+      },
+      headerClasses: {
+        type: [String, Object, Array],
+        description: "Card header css classes"
+      },
+      bodyClasses: {
+        type: [String, Object, Array],
+        description: "Card body css classes"
+      },
+      footerClasses: {
+        type: [String, Object, Array],
+        description: "Card footer css classes"
+      }
+    }
+  };
 </script>
 <style>
 </style>

src/components/Inputs/BaseInput.vue

@@ -39,10 +39,22 @@
     inheritAttrs: false,
     name: "base-input",
     props: {
-      label: String,
+      label: {
-      value: [String, Number],
+        type: String,
-      addonRightIcon: String,
+        description: "Input label"
-      addonLeftIcon: String
+      },
+      value: {
+        type: [String, Number],
+        description: "Input value"
+      },
+      addonRightIcon: {
+        type: String,
+        description: "Input icon on the right"
+      },
+      addonLeftIcon: {
+        type: String,
+        description: "Input icon on the left"
+      },
     },
     model: {
       prop: 'value',