Merge pull request #93 from coreui/dev-ie-getstyles

chore(release): v2.0.0-beta.3

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [vue](./README.md) version `changelog`
 
+##### `v2.0.0-beta.3`
+- refactor: `getStyles()` back to `@coreui/coreui` version `^2.0.2`
+- fix(Dashboard): `width` card-line*-chart-example `ie` issue
+
 ##### `v2.0.0-beta.2`
 - refactor: `HeaderDropdown` with new slots `header` and `dropdown` *breaking change*
 - chore: update `@coreui/vue` to `2.0.0-beta.1`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "Open Source Bootstrap Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -17,7 +17,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.1",
+    "@coreui/coreui": "^2.0.2",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/icons": "^0.2.0",
     "@coreui/vue": "^2.0.0-beta.1",

src/utils/getStyle.js

@@ -1,10 +0,0 @@
-// todo
-// temp getStyle fix for IE
-const getStyle = (prop, node) => {
-  const root = node || document.querySelector(':root')
-  const value = window.getComputedStyle(root).getPropertyValue(prop).trim()
-  // console.log('utils/getStyle', value)
-  return value
-}
-
-export default getStyle

src/views/Dashboard.vue

@@ -16,7 +16,7 @@
             <h4 class="mb-0">9.823</h4>
             <p>Members online</p>
           </b-card-body>
-          <card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" height="70"/>
+          <card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
         </b-card>
       </b-col>
       <b-col sm="6" lg="3">
@@ -34,7 +34,7 @@
             <h4 class="mb-0">9.823</h4>
             <p>Members online</p>
           </b-card-body>
-          <card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" height="70"/>
+          <card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" :height="70"/>
         </b-card>
       </b-col>
       <b-col sm="6" lg="3">
@@ -568,3 +568,10 @@ export default {
   }
 }
 </script>
+
+<style>
+  /* IE fix */
+  #card-chart-01, #card-chart-02 {
+    width: 100% !important;
+  }
+</style>

src/views/dashboard/CalloutChartExample.vue

@@ -1,8 +1,7 @@
 <script>
 import { Line } from 'vue-chartjs'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-import getStyle from '../../utils/getStyle'
+import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 
 export default {
   components: {

src/views/dashboard/CardLine1ChartExample.vue

@@ -1,8 +1,7 @@
 <script>
 import { Line } from 'vue-chartjs'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-import getStyle from '../../utils/getStyle'
+import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 
 export default {
   extends: Line,

src/views/dashboard/CardLine2ChartExample.vue

@@ -1,8 +1,7 @@
 <script>
 import { Line } from 'vue-chartjs'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-// import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
-import getStyle from '../../utils/getStyle'
+import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
 
 export default {
   extends: Line,

src/views/dashboard/MainChartExample.vue

@@ -1,9 +1,7 @@
 <script>
 import { Line } from 'vue-chartjs'
-// import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
-import { hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
+import { getStyle, hexToRgba } from '@coreui/coreui/dist/js/coreui-utilities'
 import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
-import getStyle from '../../utils/getStyle'
 
 function random (min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min)