[improve] replace all the meta classes (e.g. .m-0 .p-0) with inline styles

Author: Ken Berkeley

lib/HeadSort.vue

@@ -1,5 +1,5 @@
 <template>
-  <a href="javascript:;" @click="handleSort" class="p-l-5">
+  <a href="javascript:;" @click="handleSort" style="padding-left: 5px">
     <i class="fa" :class="[cls, { 'text-muted': !this.order }]"></i>
   </a>
 </template>
@@ -36,8 +36,3 @@ export default {
   }
 }
 </script>
-<style>
-.p-l-5 {
-  padding-left: 5px;
-}
-</style>

lib/HeaderSettings/ColumnGroup.vue

@@ -64,8 +64,8 @@ export default {
 </script>
 <style>
 .-col-group {
-  width: 150px;
   display: inline-block;
+  width: 150px;
   padding: 0;
   vertical-align: top;
 }

lib/HeaderSettings/index.vue

@@ -4,17 +4,17 @@
       <i class="fa" :class="[usingBak && 'text-info', processingCls || 'fa-cog']"></i>
       <span class="caret"></span>
     </button>
-    <div class="dropdown-menu p-10 clearfix" :style="drpMenuStyle">
+    <div class="dropdown-menu clearfix" :style="[drpMenuStyle, { padding: '10px 10px 0' }]">
       <div class="-col-group-container">
         <column-group v-for="(group, idx) in colGroups" :key="idx" ref="colGroups" :col-group="group" />
       </div>
-      <div class="m-10 clearfix">
+      <div class="clearfix" style="margin: 10px">
         <div class="btn-group btn-group-sm pull-right">
           <button class="btn btn-default" @click="apply()">
             {{ $i18n('Apply') }}
           </button>
           <template v-if="supportBackup">
-            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle box-shadow-none">
+            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" style="box-shadow: none">
               <span class="caret"></span>
             </button>
             <ul class="dropdown-menu">
@@ -34,7 +34,7 @@
           </template>
         </div>
       </div>
-      <small v-if="usingBak" class="pull-left text-muted m-t--8">
+      <small v-if="usingBak" class="pull-left text-muted" style="margin-top: -8px">
         ( {{ $i18n('Using local settings') }} )
       </small>
     </div>
@@ -126,16 +126,4 @@ export default {
 .-col-group-container {
   border-bottom: 1px solid #ddd;
 }
-.p-10 {
-  padding: 10px 10px 0 10px;
-}
-.m-10 {
-  margin: 10px;
-}
-.m-t--8 {
-  margin-top: -8px;
-}
-.box-shadow-none {
-  box-shadow: none !important;
-}
 </style>

lib/Pagination.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="pagination m-0">
+  <ul class="pagination" style="margin: 0">
     <li v-if="!isFirstPage" @click="turnPage(-1)">
       <a href="javascript:;">
         <i class="fa fa-arrow-left"></i>
@@ -66,8 +66,3 @@ export default {
   }
 }
 </script>
-<style>
-.m-0 {
-  margin: 0;
-}
-</style>

lib/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div v-if="$slots.default || HeaderSettings" class="m-b-10 clearfix">
+    <div v-if="$slots.default || HeaderSettings" class="clearfix" style="margin-bottom: 10px">
       <header-settings v-if="HeaderSettings" class="pull-right"
         :col-groups="columns" :support-backup="supportBackup">
       </header-settings>
       <slot></slot>
     </div>
     <!-- `.panel.panel-default` is for rounded table, see http://stackoverflow.com/a/20903465/5172890 -->
-    <div class="table-responsive panel panel-default m-b-10">
+    <div class="table-responsive panel panel-default" style="margin-bottom: 10px">
       <table class="table table-striped table-hover" :class="tblClass" :style="tblStyle">
         <thead>
           <transition-group name="fade" tag="tr">
@@ -26,7 +26,7 @@
                 {{ column.title }}
               </template>
 
-              <i v-if="column.explain" class="fa fa-info-circle cursor-help" :title="column.explain"></i>
+              <i v-if="column.explain" class="fa fa-info-circle" style="cursor: help" :title="column.explain"></i>
               <head-sort v-if="column.sort" :field="column.field" :query="query" />
             </th>
           </transition-group>
@@ -96,7 +96,7 @@
       </table>
     </div><!-- .table-responsive -->
     <div v-if="Pagination" class="row">
-      <div class="col-sm-6 nowrap">
+      <div class="col-sm-6" style="white-space: nowrap">
         <strong>{{ $i18n('Total') }} {{ total }} {{ $i18n(',') }}</strong>
         <limit-select :query="query" />
       </div>
@@ -220,21 +220,13 @@ export default {
 }
 </script>
 <style>
+/* transition effect: fade */
 .fade-enter-active, .fade-leave-active {
   transition: opacity .2s;
 }
 .fade-enter, .fade-leave-active {
   opacity: 0;
 }
-.m-b-10 {
-  margin-bottom: 10px;
-}
-.nowrap {
-  white-space: nowrap;
-}
-.cursor-help {
-  cursor: help;
-}
 .-summary-row {
   font-weight: bold;
   background-color: #ddd !important;

package.json

@@ -2,7 +2,7 @@
   "name": "vue2-datatable-component",
   "description": "The Best Datatable for Vue.js 2.x which never sucks",
   "author": "Ken Berkeley <[email protected]>",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "scripts": {
     "start": "vue build examples/src/app.js --config vue-build.config.js",
     "build": "vue build examples/src/app.js --config vue-build.config.js --prod",