feature/v2.1.1

.babelrc

@@ -1,10 +1,7 @@
 {
   "presets": [
     [
-      "@vue/app",
-      {
-        "polyfills": ["es7.object.entries", "es6.promise"]
-      }
+      "@vue/app"
     ]
   ]
 }

.eslintrc

@@ -2,5 +2,8 @@
   "root": true,
   "extends": [
     "plugin:vue/essential"
-  ]
+  ],
+  "rules": {
+  "vue/multi-word-component-names": "off"
+  }
 }

.npmrc

@@ -1 +1,3 @@
-legacy-peer-deps=true
+legacy-peer-deps=true
+auto-install-peers=true
+strict-peer-dependencies=false

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 
-## [2.1.0] 2023-01-10
+## [2.1.1] 2023-05-31
+
+- Update dependencies
+
+## [2.1.0] 2022-12-12
 
 - Update dependencies and devDependencies
 - Migrate from `node-sass` to `sass`

README.md

@@ -53,5 +53,5 @@ For detailed explanation on how things work, checkout the [guide](http://vuejs-t
 
 [changelog]: ./CHANGELOG.md
 [license]: ./LICENSE.md
-[version-badge]: https://img.shields.io/badge/version-2.1.0-blue.svg
+[version-badge]: https://img.shields.io/badge/version-2.1.1-blue.svg
 [license-badge]: https://img.shields.io/badge/license-MIT-blue.svg

documentation/tutorial-components.html

@@ -80,7 +80,7 @@
         <div class="filter"></div>
         <div class="title-container text-center">
           <h1>Vue Light Bootstrap Dashboard</h1>
-          <h3 class="category">v2.1.0</h3>
+          <h3 class="category">v2.1.1</h3>
           <h4 class="description text-center">
             We are constantly doing updates for you.
           </h4>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-light-bootstrap-dashboard",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": true,
   "description": "Vue light bootstrap dashboard",
   "author": "cristijora <[email protected]>",
@@ -13,23 +13,25 @@
     "lint-fix": "vue-cli-service lint --fix"
   },
   "dependencies": {
-    "bootstrap": "4.6.0",
+    "bootstrap": "4.6.2",
     "cache-loader": "^4.1.0",
     "chartist": "0.11.0",
-    "google-maps": "3.2.1",
+    "google-maps": "4.3.3",
     "register-service-worker": "1.7.2",
-    "v-tooltip": "2.0.0-rc.33",
+    "v-tooltip": "2.1.3",
     "vue": "2.7.14",
-    "vue-router": "3.0.2",
+    "vue-router": "3.6.5",
     "vue2-google-maps": "0.10.7"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "3.12.1",
-    "@vue/cli-plugin-eslint": "3.12.1",
-    "@vue/cli-plugin-pwa": "3.12.1",
-    "@vue/cli-service": "3.12.1",
-    "sass": "1.56.2",
-    "sass-loader": "10.1.1",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-pwa": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "eslint": "8.41.0",
+    "eslint-plugin-vue": "9.14.1",
+    "sass": "1.62.1",
+    "sass-loader": "13.3.1",
     "vue-template-compiler": "2.7.14"
   },
   "browserslist": [

public/index.html

@@ -1,6 +1,6 @@
 <!--
  =========================================================
- * Vue Light Bootstrap Dashboard - v2.1.0 (Bootstrap 4)
+ * Vue Light Bootstrap Dashboard - v2.1.1 (Bootstrap 4)
  =========================================================
 
  * Product Page: http://www.creative-tim.com/product/light-bootstrap-dashboard

src/assets/sass/light-bootstrap-dashboard.scss

@@ -1,7 +1,7 @@
 /*!
 
  =========================================================
- * Vue Light Bootstrap Dashboard - v2.1.0 (Bootstrap 4)
+ * Vue Light Bootstrap Dashboard - v2.1.1 (Bootstrap 4)
  =========================================================
 
  * Product Page: http://www.creative-tim.com/product/light-bootstrap-dashboard

src/components/Cards/ChartCard.vue

@@ -12,126 +12,128 @@
   </div>
 </template>
 <script>
-  import Card from './Card.vue'
-
-  export default {
-    name: 'chart-card',
-    components: {
-      Card
+export default {
+  name: "chart-card",
+  props: {
+    chartType: {
+      type: String,
+      default: "Line", // Line | Pie | Bar
     },
-    props: {
-      chartType: {
-        type: String,
-        default: 'Line' // Line | Pie | Bar
+    chartOptions: {
+      type: Object,
+      default: () => {
+        return {};
       },
-      chartOptions: {
-        type: Object,
-        default: () => {
-          return {}
-        }
-      },
-      chartData: {
-        type: Object,
-        default: () => {
-          return {
-            labels: [],
-            series: []
-          }
-        }
+    },
+    chartData: {
+      type: Object,
+      default: () => {
+        return {
+          labels: [],
+          series: [],
+        };
       },
-      responsiveOptions: [Object, Array]
     },
-    data () {
-      return {
-        chartId: 'no-id',
-        $Chartist: null,
-        chart: null
+    responsiveOptions: [Object, Array],
+  },
+  data() {
+    return {
+      chartId: "no-id",
+      $Chartist: null,
+      chart: null,
+    };
+  },
+  methods: {
+    /***
+     * Initializes the chart by merging the chart options sent via props and the default chart options
+     */
+    initChart() {
+      var chartIdQuery = `#${this.chartId}`;
+      this.chart = this.$Chartist[this.chartType](
+        chartIdQuery,
+        this.chartData,
+        this.chartOptions,
+        this.responsiveOptions
+      );
+      this.$emit("initialized", this.chart);
+      if (this.chartType === "Line") {
+        this.animateLineChart();
       }
+      if (this.chartType === "Bar") {
+        this.animateBarChart();
+      }
+    },
+    /***
+     * Assigns a random id to the chart
+     */
+    updateChartId() {
+      const currentTime = new Date().getTime().toString();
+      const randomInt = this.getRandomInt(0, currentTime);
+      this.chartId = `div_${randomInt}`;
+    },
+    getRandomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
     },
-    methods: {
-      /***
-       * Initializes the chart by merging the chart options sent via props and the default chart options
-       */
-      initChart () {
-        var chartIdQuery = `#${this.chartId}`
-        this.chart = this.$Chartist[this.chartType](chartIdQuery, this.chartData, this.chartOptions, this.responsiveOptions)
-        this.$emit('initialized', this.chart)
-        if (this.chartType === 'Line') {
-          this.animateLineChart()
+    animateLineChart() {
+      let seq = 0;
+      let durations = 500;
+      let delays = 80;
+      this.chart.on("draw", (data) => {
+        if (data.type === "line" || data.type === "area") {
+          data.element.animate({
+            d: {
+              begin: 600,
+              dur: 700,
+              from: data.path
+                .clone()
+                .scale(1, 0)
+                .translate(0, data.chartRect.height())
+                .stringify(),
+              to: data.path.clone().stringify(),
+              easing: this.$Chartist.Svg.Easing.easeOutQuint,
+            },
+          });
+        } else if (data.type === "point") {
+          seq++;
+          data.element.animate({
+            opacity: {
+              begin: seq * delays,
+              dur: durations,
+              from: 0,
+              to: 1,
+              easing: "ease",
+            },
+          });
         }
-        if (this.chartType === 'Bar') {
-          this.animateBarChart()
+      });
+      seq = 0;
+    },
+    animateBarChart() {
+      let seq = 0;
+      let durations = 500;
+      let delays = 80;
+      this.chart.on("draw", (data) => {
+        if (data.type === "bar") {
+          seq++;
+          data.element.animate({
+            opacity: {
+              begin: seq * delays,
+              dur: durations,
+              from: 0,
+              to: 1,
+              easing: "ease",
+            },
+          });
         }
-      },
-      /***
-       * Assigns a random id to the chart
-       */
-      updateChartId () {
-        const currentTime = new Date().getTime().toString()
-        const randomInt = this.getRandomInt(0, currentTime)
-        this.chartId = `div_${randomInt}`
-      },
-      getRandomInt (min, max) {
-        return Math.floor(Math.random() * (max - min + 1)) + min
-      },
-      animateLineChart () {
-        let seq = 0
-        let durations = 500
-        let delays = 80
-        this.chart.on('draw', (data) => {
-          if (data.type === 'line' || data.type === 'area') {
-            data.element.animate({
-              d: {
-                begin: 600,
-                dur: 700,
-                from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
-                to: data.path.clone().stringify(),
-                easing: this.$Chartist.Svg.Easing.easeOutQuint
-              }
-            })
-          } else if (data.type === 'point') {
-            seq++
-            data.element.animate({
-              opacity: {
-                begin: seq * delays,
-                dur: durations,
-                from: 0,
-                to: 1,
-                easing: 'ease'
-              }
-            })
-          }
-        })
-        seq = 0
-      },
-      animateBarChart () {
-        let seq = 0
-        let durations = 500
-        let delays = 80
-        this.chart.on('draw', (data) => {
-          if (data.type === 'bar') {
-            seq++
-            data.element.animate({
-              opacity: {
-                begin: seq * delays,
-                dur: durations,
-                from: 0,
-                to: 1,
-                easing: 'ease'
-              }
-            })
-          }
-        })
-      }
+      });
     },
-    async mounted () {
-      this.updateChartId()
-      const Chartist = await import('chartist')
-      this.$Chartist = Chartist.default || Chartist
-      this.initChart()
-    }
-  }
+  },
+  async mounted() {
+    this.updateChartId();
+    const Chartist = await import("chartist");
+    this.$Chartist = Chartist.default || Chartist;
+    this.initChart();
+  },
+};
 </script>
-<style>
-
-</style>
+<style></style>