├── .gitignore
├── README.md
├── babel.config.js
├── docs
    └── screenshot.png
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── fonts
    │   │   ├── icofont.woff
    │   │   └── icofont.woff2
    ├── components
    │   ├── Footer.vue
    │   ├── TablePagination.vue
    │   └── TableView.vue
    ├── data.js
    ├── main.js
    └── styles
    │   └── icofont.scss
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-table-component
 2 | A simple Vue component to display tables. Support sortable columns, pagination and custom css styles
 3 | 
 4 | Example with 2 Table components, first one with default styles and paginator, and second one with custom css styles and paginator in 'select' mode
 5 | 
 6 | ![Usage example](https://raw.githubusercontent.com/ozoono/vue-table-component/master/docs/screenshot.png)
 7 | 
 8 | ## Demo
 9 | You can check this [live demo](https://ozoono.github.io/vue-table-component/)
10 | 
11 | ## Usage
12 | ```html
13 |   <TableView
14 |     :headers="[
15 |       {"label":"First Name", "field":"first_name", "sortable":true, "type":"String"},
16 |       {"label":"Email", "field":"email", "sortable":true, "type":"String"},
17 |       {"label":"Age", "field":"age", "sortable":true, "type":"Number"}
18 |     ]",
19 |     :rows="[
20 |       {"first_name":"Isidor" ,"email":"igatenby0@stanford.edu", "age":20},
21 |       {"first_name":"Max", "email":"mchimienti1@ebay.vi", "age":32},
22 |       {"first_name":"Brigham", "email":"bibell2@businesswire.com", "age":54},
23 |       {"first_name":"Jakob", "email":"jcecil3@cmu.kz", "age":37},
24 |       {"first_name":"Brannon" ,"email":"btamsett4@jiathis.com", "age":18}
25 |     ]",      
26 |     :sort="{
27 |       field: 'first_name',
28 |       order: 'asc'
29 |     }",
30 |     :pagination="{
31 |       itemsPerPage: 10,
32 |       align: 'center',
33 |       visualStyle: 'select'
34 |     }",
35 |     css-style="my-css-style"
36 |   >
37 |     <template v-slot:items="{ row }">
38 |       <td>{{ row.first_name }}</td>  
39 |       <td>{{ row.email }}</td>              
40 |       <td>{{ row.age }}</td>            
41 |     </template>
42 |     <template v-slot:no-data>
43 |       <span>No data</span>
44 |     </template>
45 |   </TableView>
46 | ```
47 | 
48 | #### Props
49 | - `headers`: (required) array with table columns definition (See columns definition)
50 | - `rows`: (required) array with data to fill the table
51 | - `sort`: object with sorting configuration
52 |   - **field**: initial sort field
53 |   - **order**: [asc/desc]  sort order
54 | - `pagination`: object with pagination configuration
55 |   - **enabled**: [true/false]
56 |   - **itemsPerPage**: number of rows in each page
57 |   - **align**: [left/center/right] position of the paginator (Default 'right')
58 |   - **visualStyle**: [select/button] paginator style (Default 'button')
59 | - `css-style`: css class that will be applied to the component instead of default styles. Custom styles must be defined in this way:
60 | ```css
61 | <style lang="scss">
62 | .my-css-style{
63 |     .ozn-table {
64 |         ...
65 |     }
66 |     .ozn-paginator {
67 |         ...
68 |     }
69 | }
70 | </style>
71 | ```
72 | 
73 | #### Columns definition
74 | Each column must be defined with 4 parameters:
75 | - **label**: text that will be shown in the column header
76 | - **field**: data field related to the column
77 | - **sortable**: [true/false]
78 | - **type**: [String/Number]
79 | 
80 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozoono/vue-table-component/5cfbe924a3ec911ad6b8887868c4c7c3962d48ab/docs/screenshot.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-table-component",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "homepage": "https://github.com/ozoono/vue-table-component.git",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "deploy": "gh-pages -d dist",
10 |     "lint": "vue-cli-service lint"
11 |   },
12 |   "dependencies": {
13 |     "core-js": "^2.6.5",
14 |     "vue": "^2.6.10"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^3.0.1",
18 |     "@vue/cli-plugin-eslint": "^3.0.1",
19 |     "@vue/cli-service": "^3.0.1",
20 |     "babel-eslint": "^10.0.1",
21 |     "eslint": "^5.16.0",
22 |     "eslint-plugin-vue": "^5.0.0",
23 |     "gh-pages": "^2.1.1",
24 |     "node-sass": "^4.12.0",
25 |     "sass-loader": "^8.0.0",
26 |     "style-resources-loader": "^1.2.1",
27 |     "vue-cli-plugin-style-resources-loader": "^0.1.3",
28 |     "vue-template-compiler": "^2.6.10"
29 |   },
30 |   "eslintConfig": {
31 |     "root": true,
32 |     "env": {
33 |       "node": true
34 |     },
35 |     "extends": [
36 |       "plugin:vue/essential",
37 |       "eslint:recommended"
38 |     ],
39 |     "rules": {},
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     }
43 |   },
44 |   "postcss": {
45 |     "plugins": {
46 |       "autoprefixer": {}
47 |     }
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions"
52 |   ]
53 | }
54 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozoono/vue-table-component/5cfbe924a3ec911ad6b8887868c4c7c3962d48ab/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title>Vue table component</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but vue-table doesn't work properly without JavaScript
14 |         enabled. Please enable it to continue.</strong
15 |       >
16 |     </noscript>
17 |     <div id="app"></div>
18 |     <!-- built files will be auto injected -->
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <h1>Vue table component</h1>
  4 |     <h2>Default styles example:</h2>
  5 |   <TableView
  6 |     :headers="columns"
  7 |     :rows="items"      
  8 |     :sort="sort1"
  9 |   >
 10 |     <template v-slot:items="{ row }">
 11 |       <td>{{ row.first_name }}</td>
 12 |       <td>{{ row.last_name }}</td>   
 13 |       <td>{{ row.email }}</td>              
 14 |       <td>{{ row.age }}</td>     
 15 |       <td>{{ row.country }}</td>                 
 16 |       <td>{{ row.category }}</td>
 17 |       <td>{{ row.last_update }}</td>        
 18 |     </template>
 19 | 
 20 |     <template v-slot:no-data>
 21 |       <span>No data</span>
 22 |     </template>
 23 |   </TableView>
 24 | 
 25 |     <div class="separator">---&#10043;---</div>
 26 | 
 27 |     <h2>Custom styles example:</h2>
 28 |     <TableView
 29 |       :headers="columns"
 30 |       :rows="items"      
 31 |       :sort="sort2"
 32 |       :pagination="pagination"
 33 |       css-style="custom-style"      
 34 |     >
 35 |       <template v-slot:items="{ row }">
 36 |         <td>{{ row.first_name }}</td>
 37 |         <td>{{ row.last_name }}</td>   
 38 |         <td>{{ row.email }}</td>              
 39 |         <td>{{ row.age }}</td>     
 40 |         <td>{{ row.country }}</td>                 
 41 |         <td>{{ row.category }}</td>
 42 |         <td>{{ row.last_update }}</td>        
 43 |       </template>
 44 |       
 45 |       <template v-slot:no-data>
 46 |         <span>No data</span>
 47 |       </template>
 48 |     </TableView>
 49 | 
 50 |     <div class="separator">---&#10043;---</div>
 51 |     <Footer></Footer>
 52 |   </div>
 53 | </template>
 54 | <script>
 55 | import { columns, rows } from './data'
 56 | import TableView from '@/components/TableView'
 57 | import Footer from '@/components/Footer'
 58 | 
 59 | export default {
 60 |   name: 'App',
 61 |   components:{
 62 |     TableView,
 63 |     Footer
 64 |   },
 65 |   data(){
 66 |     return{
 67 |       columns: columns,
 68 |       items: rows,      
 69 |       sort1:{
 70 |         field: 'first_name',
 71 |         order: 'asc'
 72 |       },
 73 |       sort2:{
 74 |         field: 'email',
 75 |         order: 'asc'
 76 |       },      
 77 |       pagination:{
 78 |         itemsPerPage: 7,
 79 |         align: 'center',
 80 |         visualStyle: 'select'
 81 |       }
 82 |     }    
 83 |   }
 84 | }
 85 | </script>
 86 | <style lang="scss">
 87 | @import url(https://fonts.googleapis.com/css?family=Roboto+Mono);
 88 | 
 89 | body, html{
 90 |   height: 100%;
 91 | }
 92 | #app {
 93 |   font-family: 'Roboto Mono', Helvetica, Arial, sans-serif;
 94 |   font-size: 12px;
 95 |   -webkit-font-smoothing: antialiased;
 96 |   -moz-osx-font-smoothing: grayscale;
 97 |   color: #2c3e50;
 98 |   width: 90%;
 99 |   margin: 0 auto;
100 | }
101 | h1{
102 |   margin-bottom: 2em;
103 |   color: #f90;
104 | }
105 | .separator{
106 |   margin: 2em 0;
107 |   text-align: center;
108 | }
109 | .custom-style {
110 |   // Table styles
111 |   .ozn-table {
112 |     border-collapse: collapse;
113 |     width: 100%;
114 |     thead {
115 |       th { 
116 |         border-bottom: 1px solid #ffffff;
117 |         padding: 0 10px;
118 |         height: 48px;
119 |         text-align: left; 
120 |         font-size: 1em; 
121 |         color: #fff;
122 |         background-color: #7cc3fd; 
123 |         cursor: pointer; 
124 |         &:hover{
125 |           span{
126 |             text-decoration: underline;
127 |             text-decoration-style: dotted;
128 |           }
129 |         }        
130 |         i{
131 |           color: #ffffff; 
132 |           &.active{
133 |             color: #ff00aa;
134 |             + span{
135 |               color: #a9237c;
136 |             }
137 |           }
138 |         }       
139 |       }
140 |     }
141 |     tbody {
142 |       tr{
143 |         &:nth-child(odd){
144 |           background-color: #e9f5ff;
145 |         }
146 |         &:nth-child(even){
147 |           background-color: #fafaeb;
148 |         }
149 |       }
150 |       td {
151 |         border-bottom: 1px solid #ffffff;
152 |         padding: 0 10px;
153 |         height: 48px;
154 |         font-size: 1em; 
155 |       }
156 |     }
157 |   }
158 |   // Paginator styles    
159 |   .ozn-paginator{
160 |     margin-top: .5em;
161 |     select{
162 |       border: 1px solid #7cc3fd;
163 |       border-radius: 8px;
164 |       color: #ffffff;
165 |       background-color:  #7cc3fd;
166 |       outline: none;
167 |     }
168 |     button{
169 |       border: 1px solid #7cc3fd;
170 |       border-radius: 8px;
171 |       color: #ffffff;
172 |       background-color:  #7cc3fd;
173 |       outline: none;
174 |     }    
175 |   }
176 | 
177 | }
178 | </style>
179 | 


--------------------------------------------------------------------------------
/src/assets/fonts/icofont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozoono/vue-table-component/5cfbe924a3ec911ad6b8887868c4c7c3962d48ab/src/assets/fonts/icofont.woff


--------------------------------------------------------------------------------
/src/assets/fonts/icofont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ozoono/vue-table-component/5cfbe924a3ec911ad6b8887868c4c7c3962d48ab/src/assets/fonts/icofont.woff2


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="footer">
 3 |     <a href="https://github.com/ozoono/vue-table-component">Repo on Github</a>
 4 |     |
 5 |     Created with <a href="http://vuejs.org">Vue 2.x</a>   
 6 |   </div> 
 7 | </template>
 8 | 
 9 | <style lang="scss">
10 | .footer {
11 |   margin-top: 50px;
12 |   text-align: center;
13 | }
14 | </style>


--------------------------------------------------------------------------------
/src/components/TablePagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ozn-paginator" :class="alignClass">
  3 |     <template v-if="paginationOptions.visualStyle === 'select'">
  4 |       <span>Page </span> 
  5 |       <select @change="onChange">
  6 |         <option 
  7 |           v-for="index in totalPages" 
  8 |           :value="index" 
  9 |           :key="index"
 10 |           :selected="index == page"
 11 |         >
 12 |           {{ index }}
 13 |         </option>
 14 |       </select>
 15 |       <span> of {{ totalPages }}</span>       
 16 |     </template>
 17 |     <template v-else>
 18 |         <button class="ozn-prev" v-if="prevPage > 0" @click="goToPage(prevPage)"><i class="icofont-caret-left"></i></button>
 19 |         <span>Page <strong>{{page}}</strong> of {{ totalPages }}</span> 
 20 |         <button class="ozn-next" v-if="nextPage <= totalPages" @click="goToPage(nextPage)"><i class="icofont-caret-right"></i></button>
 21 |     </template>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | 
 27 | export default {
 28 |   name: 'TablePagination',  
 29 |   props: {
 30 |     page : Number,
 31 |     totalPages: Number,
 32 |     paginationOptions: Object
 33 |   },
 34 |   data(){
 35 |     return{
 36 |     }
 37 |   },
 38 |   computed:{
 39 |     prevPage() {
 40 |       return this.page - 1;
 41 |     },
 42 |     nextPage() {
 43 |       return this.page + 1;
 44 |     },
 45 |     alignClass(){
 46 |       return `ozn-${this.paginationOptions.align}`
 47 |     }   
 48 |   },
 49 |   methods:{
 50 |     goToPage(newPage) {      
 51 |       this.$emit('new-page', parseInt(newPage))
 52 |     },
 53 |     onChange(event) {
 54 |       this.goToPage(event.target.value)
 55 |     }
 56 |   }
 57 | }
 58 | </script>
 59 | 
 60 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 61 | <style lang="scss" scoped>
 62 | button {
 63 |   font-size: 1rem; 
 64 |   display: inline-block;
 65 |   vertical-align: middle;
 66 |   cursor: pointer;
 67 | }
 68 | .ozn-left{
 69 |   text-align: left;
 70 | }
 71 | .ozn-right{
 72 |   text-align: right;
 73 | }
 74 | .ozn-center{
 75 |   text-align: center;
 76 | }
 77 | .ozn-prev{
 78 |   margin-right: .5rem; 
 79 | }
 80 | .ozn-next{
 81 |   margin-left: .5rem;    
 82 | }
 83 |   // Default paginator styles
 84 | .ozn{
 85 |   .ozn-paginator{
 86 |     margin: .5em 0;
 87 |     span{
 88 |       display: inline-block;
 89 |       vertical-align: middle;
 90 |     }
 91 |     button{
 92 |       border: 1px solid #ccc;
 93 |       outline: none;
 94 |       background-color: #fff; 
 95 |     } 
 96 |     select{
 97 |       margin: 0 10px;    
 98 |       border: 1px solid #ccc;
 99 |       outline: none;
100 |       background-color: #fff;
101 |     }
102 |   }
103 | }
104 | 
105 | 
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/components/TableView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="ozn-component" :class="cssStyle"> 
  3 |     <table class="ozn-table">
  4 |       <thead>
  5 |         <tr>
  6 |           <th 
  7 |             v-for="(col, idx) in headers" 
  8 |             :key="idx" 
  9 |             @click="sortBy(idx)"
 10 |           >     
 11 |             <template v-if="sortEnabled">
 12 |               <template v-if="sortColumn == idx">
 13 |                 <i v-if="sortOrder == 'desc'" class="icofont-arrow-up icofont-md active"></i>
 14 |                 <i v-else class="icofont-arrow-down icofont-md active"></i>
 15 |               </template>
 16 |               <template v-else>
 17 |                 <i v-if="col.sortable" class="icofont-sort icofont-md"></i>
 18 |               </template>
 19 |             </template>
 20 |             <span> {{ col.label }}</span>             
 21 |           </th>
 22 |         </tr>   
 23 |       </thead>
 24 |       <tbody>
 25 |         <template v-if="numRows > 0">
 26 |           <tr 
 27 |             v-for="(row, idx) in visibleRows" 
 28 |             :key="idx"
 29 |           >     
 30 |             <slot name="items" :row="row"></slot>
 31 |           </tr>  
 32 |         </template>
 33 |         <template v-else>
 34 |           <tr>
 35 |             <td :colspan="numColumns">
 36 |               <slot name="no-data"></slot>
 37 |             </td>
 38 |           </tr>
 39 |         </template>
 40 |       </tbody>
 41 |     </table>
 42 | 
 43 |     <TablePagination 
 44 |       v-if="paginationEnabled"
 45 |       :page="page"
 46 |       :total-pages="totalPages"
 47 |       :pagination-options="paginationOptions"
 48 |       @new-page="onNewPage"
 49 |     />
 50 | 
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | import TablePagination from '@/components/TablePagination.vue'
 56 | 
 57 | export default {
 58 |   name: 'TableView',  
 59 |   components: {
 60 |     TablePagination
 61 |   },
 62 |   props:{
 63 |     headers: {
 64 |       type: Array,
 65 |       default() {
 66 |         return []
 67 |       },
 68 |       required: true
 69 |     },   
 70 |     rows: {
 71 |       type: Array,
 72 |       default() {
 73 |         return []
 74 |       }, 
 75 |       required: true
 76 |     },        
 77 |     sort: {
 78 |       type: Object,
 79 |       default() {
 80 |         return {}
 81 |       }
 82 |     },
 83 |     pagination: {
 84 |       type: Object,
 85 |       default() {
 86 |         return {}
 87 |       }
 88 |     },
 89 |     cssStyle: {
 90 |       type: String,
 91 |       default: 'ozn'
 92 |     }
 93 |   },
 94 |   data(){
 95 |     return{
 96 |       sortDefault: {
 97 |         field: null,
 98 |         type: 'asc' 
 99 |       },
100 |       paginationDefault: {
101 |         enabled: true,
102 |         itemsPerPage: 5,
103 |         align: 'right',
104 |         visualStyle: 'buttons'
105 |       },
106 |       sortColumn: null,
107 |       sortField: null,
108 |       sortOrder: null,
109 |       visibleRows: {},
110 |       tableRows: {},      
111 |       page: 1
112 |     }
113 |   },
114 |   watch: {
115 |     rows: function() {
116 |       this.tableRows = this.rows.slice(0);
117 |       this.selectVisibleRows();
118 |     }
119 |   },
120 |   computed: {
121 |     sortOptions(){
122 |       return Object.assign(this.sortDefault, this.sort)      
123 |     },
124 |     paginationOptions() {
125 |       return Object.assign(this.paginationDefault, this.pagination)
126 |     },    
127 |     sortEnabled(){
128 |       return (this.sortOptions.field != null && this.numRows > 0)
129 |     },
130 |     paginationEnabled(){
131 |       return ((this.paginationOptions.enabled) && (this.paginationOptions.itemsPerPage > 0) && (this.numRows > 0))
132 |     },    
133 |     numRows(){
134 |       return this.rows.length
135 |     },    
136 |     numColumns(){
137 |       return this.headers.length
138 |     },    
139 |     totalPages() {
140 |      return (this.paginationEnabled) ? Math.ceil(this.numRows / this.paginationOptions.itemsPerPage) : null
141 |     }
142 |   },
143 |   mounted(){
144 |     this.tableRows = this.rows.slice(0)   // Para que haga una copia del array  
145 |     if (this.sortEnabled) this.initSort() 
146 |     this.selectVisibleRows()   
147 |   },
148 |   methods:{
149 |     onNewPage: function(newPage){
150 |       this.page = newPage
151 |       this.selectVisibleRows()
152 |     },
153 |     selectVisibleRows: function() {
154 | 
155 |       if (this.paginationEnabled){
156 |         const rowFirst = (this.page * this.paginationOptions.itemsPerPage) - this.paginationOptions.itemsPerPage
157 |         const rowLast = (this.page * this.paginationOptions.itemsPerPage)       
158 |         this.visibleRows = this.tableRows.slice(rowFirst, rowLast)        
159 |       }
160 |       else this.visibleRows = this.tableRows.slice(0)
161 | 
162 |     },
163 |     initSort: function(){
164 |       this.sortOrder = (this.sortOptions.order === 'asc') ? 'asc' : 'desc'
165 | 
166 |       let defaultSortColumn = null
167 | 
168 |       for(let x=0; x<this.headers.length; x++){
169 |       
170 |         if ((this.headers[x].sortable) && (this.headers[x].field == this.sortOptions.field)) {
171 |           defaultSortColumn = x            
172 |           break;
173 |         }
174 |       }
175 | 
176 |       if (defaultSortColumn != null) this.sortBy(defaultSortColumn) 
177 | 
178 |     },
179 |     sortBy: function(idx){  
180 | 
181 |       if (this.sortEnabled && this.headers[idx].sortable){
182 |        
183 |         if (this.sortColumn == idx){   
184 |           this.sortOrder = (this.sortOrder === 'asc') ? 'desc' : 'asc'
185 |           this.tableRows.reverse()
186 |         }
187 |         else{
188 |           this.sortColumn = idx
189 |           this.sortOrder = 'asc'
190 |           this.sortField = this.headers[idx].field  
191 | 
192 |           if (this.headers[idx].type == 'Number'){
193 |             this.tableRows.sort((a, b) => a[this.sortField] - b[this.sortField])
194 |           }
195 |           else{
196 |             this.tableRows.sort((a, b) => a[this.sortField].localeCompare(b[this.sortField]))
197 |           }
198 |         }        
199 | 
200 |         this.page= 1
201 | 
202 |         this.selectVisibleRows()        
203 |       }
204 |       
205 |     }
206 |   }
207 | }
208 | </script>
209 | 
210 | <!-- Add "scoped" attribute to limit CSS to this component only -->
211 | <style lang="scss" scoped>
212 | .material-icons {
213 |   font-size: 1rem; 
214 |   display: inline-block;
215 |   vertical-align: middle;
216 |   cursor: pointer;
217 | }
218 | // Default table styles
219 | .ozn{
220 |   .ozn-table {
221 |     border-collapse: collapse;
222 |     width: 100%;
223 |     thead {
224 |       th {
225 |         border-bottom: 2px solid #ccc;    
226 |         padding: 0 10px;
227 |         height: 48px;
228 |         text-align: left; 
229 |         font-size: 1em; 
230 |         cursor: pointer;
231 |         &:hover{
232 |           span{
233 |             text-decoration: underline;
234 |             text-decoration-style: dotted;            
235 |           }
236 |         }  
237 |         i{
238 |           color: #aaa;
239 |           &.active{
240 |             color: #ff6633;
241 |             + span{
242 |               color: #ff6633;
243 |             }
244 |           }
245 |         }
246 |       }
247 |     }
248 |     tbody {
249 |       tr{
250 |         &:nth-child(odd){
251 |           background-color: #fafafa;
252 |         }
253 |       }
254 |       td {
255 |         border-bottom: 1px dotted #ccc;
256 |         padding: 0 10px;
257 |         height: 48px;
258 |         font-size: 1em; 
259 |       }
260 |     }
261 |   }
262 | } 
263 | </style>
264 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
  1 | export const columns = [
  2 | {"label":"First Name","field":"first_name","sortable":true,"type":"String"},
  3 | {"label":"Last Name","field":"last_name","sortable":true,"type":"String"},
  4 | {"label":"Email","field":"email","sortable":true,"type":"String"},
  5 | {"label":"Age","field":"age","sortable":true,"type":"Number"},
  6 | {"label":"Country","field":"country","sortable":true,"type":"String"},
  7 | {"label":"Category","field":"category","sortable":true,"type":"String"},
  8 | {"label":"Last Update","field":"last_update","sortable":true,"type":"String"},
  9 | ]
 10 | 
 11 | export const rows = [{"first_name":"Isidor","last_name":"Gatenby","email":"igatenby0@stanford.edu","age":20,"country":"El Salvador","category":"A2","last_update":"2017-12-14"},
 12 | {"first_name":"Max","last_name":"Chimienti","email":"mchimienti1@ebay.vi","age":32,"country":"Vietnam","category":"B2","last_update":"2018-04-28"},
 13 | {"first_name":"Brigham","last_name":"Ibell","email":"bibell2@businesswire.com","age":54,"country":"Australia","category":"D1","last_update":"2017-02-23"},
 14 | {"first_name":"Jakob","last_name":"Cecil","email":"jcecil3@cmu.kz","age":37,"country":"Kazakhstan","category":"A2","last_update":"2017-01-21"},
 15 | {"first_name":"Brannon","last_name":"Tamsett","email":"btamsett4@jiathis.com","age":18,"country":"Portugal","category":"B2","last_update":"2017-06-20"},
 16 | {"first_name":"Alexio","last_name":"Stirrip","email":"astirrip5@reference.com","age":31,"country":"Iceland","category":"D1","last_update":"2018-04-08"},
 17 | {"first_name":"Sallyann","last_name":"Lugsdin","email":"slugsdin6@netvibes.com","age":53,"country":"France","category":"A1","last_update":"2017-08-26"},
 18 | {"first_name":"Guntar","last_name":"McGorman","email":"gmcgorman7@aol.com","age":34,"country":"Chile","category":"C2","last_update":"2018-05-19"},
 19 | {"first_name":"Hagan","last_name":"Slobom","email":"hslobom8@netvibes.com","age":56,"country":"United States","category":"A1","last_update":"2018-09-16"},
 20 | {"first_name":"Izak","last_name":"Kempston","email":"ikempston9@soup.io","age":56,"country":"Poland","category":"B3","last_update":"2018-09-16"},
 21 | {"first_name":"Lucky","last_name":"Deville","email":"ldevillea@nifty.com","age":50,"country":"Serbia","category":"A3","last_update":"2017-01-10"},
 22 | {"first_name":"Wang","last_name":"Xiyu","email":"wangxiyu@baidu.com","age":24,"country":"China","category":"A1","last_update":"2018-07-06"},
 23 | {"first_name":"Avis","last_name":"Eddolls","email":"aeddollsc@desdev.be","age":26,"country":"Belgium","category":"A3","last_update":"2017-03-21"},
 24 | {"first_name":"Farr","last_name":"Blyden","email":"fblydend@who.int","age":52,"country":"Greece","category":"A3","last_update":"2017-01-16"},
 25 | {"first_name":"Peng","last_name":"Shuai","email":"pengshuai@amazon.com","age":21,"country":"China","category":"B1","last_update":"2017-06-10"},
 26 | {"first_name":"Pearla","last_name":"Crosser","email":"pcrosserf@exblog.ru","age":24,"country":"Russia","category":"D1","last_update":"2017-09-24"},
 27 | {"first_name":"Brana","last_name":"Loade","email":"bloadeg@photobucket.com","age":23,"country":"Malaysia","category":"A1","last_update":"2017-01-08"},
 28 | {"first_name":"Sonia","last_name":"Rummer","email":"srummerh@joomla.org","age":43,"country":"Laos","category":"D2","last_update":"2018-05-05"},
 29 | {"first_name":"Carline","last_name":"Dorn","email":"cdorni@huffingtonpost.com","age":60,"country":"Sweden","category":"A2","last_update":"2017-11-02"},
 30 | {"first_name":"Zulema","last_name":"Battershall","email":"zbattershallj@typepad.com","age":37,"country":"Brazil","category":"C2","last_update":"2017-11-08"},
 31 | {"first_name":"Jamie","last_name":"Hyndes","email":"jhyndesk@vk.com","age":33,"country":"Indonesia","category":"C1","last_update":"2017-04-22"},
 32 | {"first_name":"Kellby","last_name":"Volette","email":"kvolettel@theatlantic.com","age":40,"country":"Poland","category":"B3","last_update":"2017-10-26"},
 33 | {"first_name":"Isabelle","last_name":"Rallings","email":"irallingsm@youtu.hr","age":55,"country":"Croatia","category":"B3","last_update":"2018-10-06"},
 34 | {"first_name":"Melly","last_name":"Szymoni","email":"mszymonin@boston.com","age":57,"country":"Luxembourg","category":"A2","last_update":"2017-07-08"},
 35 | {"first_name":"Leoine","last_name":"Insull","email":"linsullo@g.co","age":54,"country":"Sweden","category":"B2","last_update":"2017-03-30"},
 36 | {"first_name":"Demetris","last_name":"Kubasiewicz","email":"dkubasiewiczp@nih.gov","age":27,"country":"Hungary","category":"D2","last_update":"2017-03-19"},
 37 | {"first_name":"Kass","last_name":"Beavon","email":"kbeavonq@biglobe.nt","age":57,"country":"Central African Republic","category":"B2","last_update":"2017-07-19"},
 38 | {"first_name":"Norma","last_name":"Bratilia","email":"nbratla@ferret.ho","age":30,"country":"Honduras","category":"B3","last_update":"2017-08-22"},
 39 | {"first_name":"Huntley","last_name":"Eagles","email":"heagless@redcross.org","age":29,"country":"United States","category":"B2","last_update":"2018-02-23"},
 40 | {"first_name":"Pollyanna","last_name":"Juncker","email":"pjunk@spiegel.de","age":58,"country":"Germany","category":"A3","last_update":"2018-07-18"},
 41 | {"first_name":"Sibeal","last_name":"Estrella","email":"sestrellau@naver.com","age":42,"country":"Indonesia","category":"A3","last_update":"2018-08-23"},
 42 | {"first_name":"Guss","last_name":"Camamile","email":"gcamamilev@rakuten.co.in","age":34,"country":"Indonesia","category":"D2","last_update":"2018-09-20"},
 43 | {"first_name":"Wilhelmina","last_name":"Josefovic","email":"wjosefovicw@theatlantic.com","age":58,"country":"Indonesia","category":"B4","last_update":"2018-01-15"},
 44 | {"first_name":"Madella","last_name":"Aslum","email":"maslumx@indiegogo.com","age":44,"country":"Bulgaria","category":"D3","last_update":"2017-06-29"},
 45 | {"first_name":"Cassius","last_name":"Lebourikis","email":"clebourny@opera.gr","age":43,"country":"Greece","category":"A3","last_update":"2017-08-27"},
 46 | {"first_name":"Yul","last_name":"Filippozzi","email":"yfilippozziz@mediafire.com","age":32,"country":"Bulgaria","category":"A2","last_update":"2017-12-06"},
 47 | {"first_name":"Roy","last_name":"Stares","email":"rstares10@xrea.com","age":54,"country":"Canada","category":"A1","last_update":"2018-04-27"},
 48 | {"first_name":"Rebekkah","last_name":"Vallantine","email":"rvallantine11@ustream.tv","age":52,"country":"Russia","category":"D3","last_update":"2017-04-14"},
 49 | {"first_name":"Nicoline","last_name":"Coldbath","email":"ncoldbath12@facebook.com","age":37,"country":"Ireland","category":"B4","last_update":"2018-04-27"},
 50 | {"first_name":"Urbanus","last_name":"Muddle","email":"umuddle13@istockphoto.com","age":26,"country":"Russia","category":"D1","last_update":"2018-04-27"},
 51 | {"first_name":"Butch","last_name":"Crampsey","email":"bcrampsey14@deviantart.com","age":40,"country":"Gabon","category":"B1","last_update":"2018-07-21"},
 52 | {"first_name":"Roxanna","last_name":"Cesconi","email":"rcesconi15@businesswire.com","age":39,"country":"Indonesia","category":"B4","last_update":"2018-03-06"},
 53 | {"first_name":"Sigrid","last_name":"Hambidge","email":"shambidge16@etsy.com","age":56,"country":"Poland","category":"D3","last_update":"2018-09-10"},
 54 | {"first_name":"Akira","last_name":"Tanaka","email":"atanaka@bbb.jp","age":55,"country":"Japan","category":"C1","last_update":"2017-12-10"},
 55 | {"first_name":"Kiel","last_name":"Dressel","email":"kdressel18@go.com","age":25,"country":"Poland","category":"D3","last_update":"2017-10-30"},
 56 | {"first_name":"Henryetta","last_name":"Shapcott","email":"hshapcott19@php.net","age":30,"country":"Nigeria","category":"B3","last_update":"2018-04-06"},
 57 | {"first_name":"Korney","last_name":"Cord","email":"kcord1a@thetimes.co.uk","age":33,"country":"United Kingdom","category":"B1","last_update":"2018-08-06"},
 58 | {"first_name":"Harlan","last_name":"Seczyk","email":"hseczyk1b@comcast.net","age":59,"country":"Ghana","category":"A3","last_update":"2018-10-10"},
 59 | {"first_name":"Emmalee","last_name":"Stump","email":"estump1c@ustream.tv","age":58,"country":"Russia","category":"B3","last_update":"2018-07-25"},
 60 | {"first_name":"Jenda","last_name":"Janecki","email":"jjanecki1d@wp.com","age":20,"country":"France","category":"B3","last_update":"2017-11-23"},
 61 | {"first_name":"Brandais","last_name":"Piotrowski","email":"bpiotrowski1e@va.gov","age":29,"country":"Latvia","category":"C2","last_update":"2018-05-08"},
 62 | {"first_name":"Farrah","last_name":"Wolfinger","email":"fwolfinger1f@samsung.com","age":48,"country":"Madagascar","category":"C1","last_update":"2017-01-31"},
 63 | {"first_name":"Fernanda","last_name":"Brissenden","email":"fbrissenden1g@instagram.com","age":56,"country":"Canada","category":"B3","last_update":"2017-01-27"},
 64 | {"first_name":"Adria","last_name":"Elam","email":"aelam1h@arizona.ru","age":47,"country":"Russia","category":"A3","last_update":"2018-05-19"},
 65 | {"first_name":"Daryn","last_name":"Eaklee","email":"deaklee1i@zimbio.com","age":30,"country":"Botswana","category":"D2","last_update":"2018-05-11"},
 66 | {"first_name":"Milka","last_name":"Pestricke","email":"mpestricke1j@shinystat.com","age":29,"country":"Thailand","category":"D3","last_update":"2018-09-07"},
 67 | {"first_name":"Vaughn","last_name":"Sousa","email":"vsousa1n@narod.br","age":34,"country":"Brazil","category":"A1","last_update":"2017-02-26"},
 68 | {"first_name":"María","last_name":"Shade","email":"mshade1l@naver.com","age":41,"country":"Colombia","category":"D1","last_update":"2017-09-15"},
 69 | {"first_name":"Penelopa","last_name":"Ludman","email":"pludman1m@chicagotribune.com","age":23,"country":"Indonesia","category":"B3","last_update":"2017-01-26"},
 70 | {"first_name":"Kerr","last_name":"Ramplee","email":"kramplee1n@opensource.org","age":55,"country":"South Africa","category":"A2","last_update":"2018-08-13"},
 71 | {"first_name":"Issy","last_name":"Reily","email":"ireily1o@china.com.mw","age":49,"country":"Malawi","category":"A3","last_update":"2017-09-08"},
 72 | {"first_name":"Loleta","last_name":"Beardon","email":"lbeardon1p@ca.gov","age":23,"country":"Canada","category":"B4","last_update":"2018-03-02"},
 73 | {"first_name":"Eugenio","last_name":"Miranda","email":"eumiranda@youku.com","age":19,"country":"Guatemala","category":"A3","last_update":"2018-05-05"},
 74 | {"first_name":"Addison","last_name":"Pikett","email":"apikett1r@over-blog.com","age":59,"country":"New Zealand","category":"A1","last_update":"2017-08-28"},
 75 | {"first_name":"Merrielle","last_name":"Mossop","email":"mmossop1s@hubpages.com","age":36,"country":"Ukraine","category":"A3","last_update":"2017-11-17"},
 76 | {"first_name":"David","last_name":"Fernandez","email":"david1@ut.gov.es","age":25,"country":"Spain","category":"A1","last_update":"2017-01-23"},
 77 | {"first_name":"Marsiella","last_name":"Powlett","email":"mpowlett1u@topsy.com","age":22,"country":"China","category":"B3","last_update":"2018-04-30"},
 78 | {"first_name":"Leontyne","last_name":"Biswell","email":"lbiswell1v@comcast.net","age":53,"country":"Philippines","category":"B4","last_update":"2017-12-29"},
 79 | {"first_name":"Kamil","last_name":"Duer","email":"kduer1w@simplemachines.org","age":55,"country":"Poland","category":"A1","last_update":"2017-10-30"},
 80 | {"first_name":"Petronella","last_name":"Whaites","email":"pwhaites1x@upenn.edu","age":31,"country":"Portugal","category":"C2","last_update":"2018-08-07"},
 81 | {"first_name":"Hyacinthe","last_name":"Soldner","email":"hsoldner1y@youtu.be","age":58,"country":"Nigeria","category":"D1","last_update":"2018-02-05"},
 82 | {"first_name":"Margaret","last_name":"Stracey","email":"mstracey1z@about.com","age":48,"country":"United States","category":"A3","last_update":"2017-06-05"},
 83 | {"first_name":"Annabell","last_name":"Briamo","email":"abriamo20@scientificamerican.com","age":49,"country":"United States","category":"A1","last_update":"2017-11-18"},
 84 | {"first_name":"Alberta","last_name":"Mathis","email":"amathis21@booking.com","age":43,"country":"Brazil","category":"D3","last_update":"2018-02-10"},
 85 | {"first_name":"Kippie","last_name":"Daviot","email":"kdaviot22@gravatar.com","age":48,"country":"China","category":"D2","last_update":"2018-01-15"},
 86 | {"first_name":"Malvina","last_name":"Laybourne","email":"mlaybourne23@baidu.com","age":60,"country":"China","category":"C1","last_update":"2017-02-01"},
 87 | {"first_name":"Huberto","last_name":"Mattisson","email":"hmattisson24@yellowbook.com","age":41,"country":"Philippines","category":"D1","last_update":"2018-01-04"},
 88 | {"first_name":"Thornie","last_name":"Earland","email":"tearland25@java.com","age":45,"country":"Indonesia","category":"C2","last_update":"2017-08-03"},
 89 | {"first_name":"Immanuel","last_name":"Buncombe","email":"ibuncombe26@samsung.com","age":46,"country":"Philippines","category":"C1","last_update":"2017-11-04"},
 90 | {"first_name":"Jay","last_name":"Pellamont","email":"jpellamont27@opensource.org","age":46,"country":"Moldova","category":"C2","last_update":"2018-05-16"},
 91 | {"first_name":"Dame","last_name":"Gounel","email":"dgounel28@1688.com","age":52,"country":"Russia","category":"A2","last_update":"2017-04-14"},
 92 | {"first_name":"Oriana","last_name":"Hintzer","email":"ohintzer29@eepurl.com","age":55,"country":"Brazil","category":"B3","last_update":"2018-02-26"},
 93 | {"first_name":"Fabio","last_name":"Zunni","email":"fabzun456@weebly.com","age":50,"country":"Italy","category":"D1","last_update":"2017-05-04"},
 94 | {"first_name":"Jamaal","last_name":"Froschauer","email":"jfroschauer2b@reuters.com","age":48,"country":"Greece","category":"B1","last_update":"2017-06-21"},
 95 | {"first_name":"Haley","last_name":"Dearnly","email":"hdearnly2c@youku.com","age":31,"country":"Tanzania","category":"A3","last_update":"2017-02-10"},
 96 | {"first_name":"Ilene","last_name":"Gelletly","email":"igelletly2d@redcross.org","age":40,"country":"Czech Republic","category":"C1","last_update":"2018-07-22"},
 97 | {"first_name":"Kwon","last_name":"yan","email":"kyan12@goo.ne.ch","age":30,"country":"China","category":"A2","last_update":"2018-09-28"},
 98 | {"first_name":"Joye","last_name":"Goulborn","email":"jgoulborn2f@rambler.ru","age":20,"country":"Ireland","category":"D1","last_update":"2018-05-04"},
 99 | {"first_name":"Adrianne","last_name":"Kesten","email":"akesten2g@latimes.com","age":58,"country":"Indonesia","category":"A2","last_update":"2017-08-08"},
100 | {"first_name":"Maire","last_name":"Halsted","email":"mhalsted2h@xrea.com","age":53,"country":"Portugal","category":"C1","last_update":"2017-01-27"},
101 | {"first_name":"Jeffry","last_name":"Ridgewell","email":"jridgewell2i@economist.com","age":45,"country":"Guam","category":"D2","last_update":"2018-01-20"},
102 | {"first_name":"Hisako","last_name":"Anzu","email":"hisako@admin.jp","age":20,"country":"Japan","category":"C2","last_update":"2017-05-14"},
103 | {"first_name":"Bertine","last_name":"Pellamont","email":"bpellamont2k@studiopress.com","age":20,"country":"Austria","category":"D2","last_update":"2018-06-16"},
104 | {"first_name":"Berky","last_name":"Jencey","email":"bjencey2l@tumblr.com","age":52,"country":"Sweden","category":"C2","last_update":"2017-08-31"},
105 | {"first_name":"Ivy","last_name":"Toner","email":"itoner2m@reuters.com","age":46,"country":"China","category":"D1","last_update":"2018-02-28"},
106 | {"first_name":"Denice","last_name":"Warrillow","email":"dwarrillow2n@macromedia.com","age":38,"country":"Aland Islands","category":"A2","last_update":"2017-08-15"},
107 | {"first_name":"Wilie","last_name":"Bugdale","email":"wbugdale2o@senate.gov","age":22,"country":"Indonesia","category":"C2","last_update":"2017-12-31"},
108 | {"first_name":"Wilfred","last_name":"Delagnes","email":"wdelagnes2p@icio.us","age":18,"country":"Philippines","category":"B2","last_update":"2017-03-20"},
109 | {"first_name":"Malory","last_name":"Freer","email":"mfreer2q@theatlantic.com","age":40,"country":"United Kingdom","category":"A3","last_update":"2017-10-12"},
110 | {"first_name":"Dennie","last_name":"Wattisham","email":"dwattisham2r@sourceforge.net","age":20,"country":"Canada","category":"D2","last_update":"2017-07-08"}]


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/src/styles/icofont.scss:
--------------------------------------------------------------------------------
  1 | /*! 
  2 | * @package IcoFont 
  3 | * @version 1.0.1 
  4 | * @author IcoFont https://icofont.com 
  5 | * @copyright Copyright (c) 2015 - 2019 IcoFont 
  6 | * @license - https://icofont.com/license/
  7 | */
  8 | 
  9 | @font-face {
 10 |   font-family: "IcoFont";
 11 |   font-weight: normal;
 12 |   font-style: "Regular";
 13 |   src: url("~@/assets/fonts/icofont.woff2") format("woff2"),
 14 |   url(".~@/assets/fonts/icofont.woff") format("woff");
 15 | }
 16 | 
 17 | [class^="icofont-"], [class*=" icofont-"] {
 18 |   font-family: 'IcoFont' !important;
 19 |   speak: none;
 20 |   font-style: normal;
 21 |   font-weight: normal;
 22 |   font-variant: normal;
 23 |   text-transform: none;
 24 |   white-space: nowrap;
 25 |   word-wrap: normal;
 26 |   direction: ltr;
 27 |   line-height: 1;
 28 | /* Better Font Rendering =========== */
 29 |   -webkit-font-feature-settings: "liga";
 30 |   -webkit-font-smoothing: antialiased;
 31 | }
 32 | 
 33 | .icofont-sort:before {
 34 |   content: "\efef";
 35 | }
 36 | 
 37 | .icofont-arrow-down:before {
 38 |   content: "\ea5b";
 39 | }
 40 | 
 41 | .icofont-arrow-up:before {
 42 |   content: "\ea5e";
 43 | }
 44 | 
 45 | .icofont-caret-left:before
 46 | {
 47 |   content: "\ea68";
 48 | }
 49 | 
 50 | .icofont-caret-right:before
 51 | {
 52 |   content: "\ea69";
 53 | }
 54 | 
 55 | .icofont-xs {
 56 |   font-size: .5em;
 57 | }
 58 | 
 59 | .icofont-sm {
 60 |   font-size: .75em;
 61 | }
 62 | 
 63 | .icofont-md {
 64 |   font-size: 1.25em;
 65 | }
 66 | 
 67 | .icofont-lg {
 68 |   font-size: 1.5em;
 69 | }
 70 | 
 71 | .icofont-1x {
 72 |   font-size: 1em;
 73 | }
 74 | 
 75 | .icofont-2x {
 76 |   font-size: 2em;
 77 | }
 78 | 
 79 | .icofont-3x {
 80 |   font-size: 3em;
 81 | }
 82 | 
 83 | .icofont-4x {
 84 |   font-size: 4em;
 85 | }
 86 | 
 87 | .icofont-5x {
 88 |   font-size: 5em;
 89 | }
 90 | 
 91 | .icofont-6x {
 92 |   font-size: 6em;
 93 | }
 94 | 
 95 | .icofont-7x {
 96 |   font-size: 7em;
 97 | }
 98 | 
 99 | .icofont-8x {
100 |   font-size: 8em;
101 | }
102 | 
103 | .icofont-9x {
104 |   font-size: 9em;
105 | }
106 | 
107 | .icofont-10x {
108 |   font-size: 10em;
109 | }
110 | 
111 | .icofont-fw {
112 |   text-align: center;
113 |   width: 1.25em;
114 | }
115 | 
116 | .icofont-ul {
117 |   list-style-type: none;
118 |   padding-left: 0;
119 |   margin-left: 0;
120 | }
121 | 
122 | .icofont-ul > li {
123 |   position: relative;
124 |   line-height: 2em;
125 | }
126 | 
127 | .icofont-ul > li .icofont {
128 |   display: inline-block;
129 |   vertical-align: middle;
130 | }
131 | 
132 | .icofont-border {
133 |   border: solid 0.08em #f1f1f1;
134 |   border-radius: .1em;
135 |   padding: .2em .25em .15em;
136 | }
137 | 
138 | .icofont-pull-left {
139 |   float: left;
140 | }
141 | 
142 | .icofont-pull-right {
143 |   float: right;
144 | }
145 | 
146 | .icofont.icofont-pull-left {
147 |   margin-right: .3em;
148 | }
149 | 
150 | .icofont.icofont-pull-right {
151 |   margin-left: .3em;
152 | }
153 | 
154 | .icofont-spin {
155 |   -webkit-animation: icofont-spin 2s infinite linear;
156 |   animation: icofont-spin 2s infinite linear;
157 |   display: inline-block;
158 | }
159 | 
160 | .icofont-pulse {
161 |   -webkit-animation: icofont-spin 1s infinite steps(8);
162 |   animation: icofont-spin 1s infinite steps(8);
163 |   display: inline-block;
164 | }
165 | 
166 | @-webkit-keyframes icofont-spin {
167 |   0%
168 |   {
169 |     -webkit-transform: rotate(0deg);
170 |     transform: rotate(0deg);
171 |   }
172 | 
173 |   100%
174 |   {
175 |     -webkit-transform: rotate(360deg);
176 |     transform: rotate(360deg);
177 |   }
178 | }
179 | 
180 | @keyframes icofont-spin {
181 |   0%
182 |   {
183 |     -webkit-transform: rotate(0deg);
184 |     transform: rotate(0deg);
185 |   }
186 | 
187 |   100%
188 |   {
189 |     -webkit-transform: rotate(360deg);
190 |     transform: rotate(360deg);
191 |   }
192 | }
193 | 
194 | .icofont-rotate-90 {
195 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
196 |   -webkit-transform: rotate(90deg);
197 |   transform: rotate(90deg);
198 | }
199 | 
200 | .icofont-rotate-180 {
201 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
202 |   -webkit-transform: rotate(180deg);
203 |   transform: rotate(180deg);
204 | }
205 | 
206 | .icofont-rotate-270 {
207 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
208 |   -webkit-transform: rotate(270deg);
209 |   transform: rotate(270deg);
210 | }
211 | 
212 | .icofont-flip-horizontal {
213 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
214 |   -webkit-transform: scale(-1, 1);
215 |   transform: scale(-1, 1);
216 | }
217 | 
218 | .icofont-flip-vertical {
219 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
220 |   -webkit-transform: scale(1, -1);
221 |   transform: scale(1, -1);
222 | }
223 | 
224 | .icofont-flip-horizontal.icofont-flip-vertical {
225 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
226 |   -webkit-transform: scale(-1, -1);
227 |   transform: scale(-1, -1);
228 | }
229 | 
230 | :root .icofont-rotate-90,
231 | 	:root .icofont-rotate-180,
232 | 	:root .icofont-rotate-270,
233 | 	:root .icofont-flip-horizontal,
234 | 	:root .icofont-flip-vertical {
235 |   -webkit-filter: none;
236 |   filter: none;
237 |   display: inline-block;
238 | }
239 | 
240 | .icofont-inverse {
241 |   color: #fff;
242 | }
243 | 
244 | .sr-only {
245 |   border: 0;
246 |   clip: rect(0, 0, 0, 0);
247 |   height: 1px;
248 |   margin: -1px;
249 |   overflow: hidden;
250 |   padding: 0;
251 |   position: absolute;
252 |   width: 1px;
253 | }
254 | 
255 | .sr-only-focusable:active,
256 | 	.sr-only-focusable:focus {
257 |   clip: auto;
258 |   height: auto;
259 |   margin: 0;
260 |   overflow: visible;
261 |   position: static;
262 |   width: auto;
263 | }
264 | 	


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | 
 3 | module.exports = {
 4 |   pluginOptions: {
 5 |     "style-resources-loader": {
 6 |       preProcessor: "scss",
 7 |       patterns: [path.resolve(__dirname, "./src/styles/icofont.scss")]
 8 |     }
 9 |   },
10 |   publicPath: process.env.NODE_ENV === 'production'
11 |     ? './'
12 |     : '/'    
13 | };
14 | 


--------------------------------------------------------------------------------