v1.4.2 Package & Code style updates

vikdiesel · Aug 13, 2020 · a597d1f · a597d1f
1 parent 4ca11cf
commit a597d1f
Show file tree

Hide file tree

Showing 34 changed files with 2,499 additions and 2,579 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,47 +1,48 @@
 {
   "name": "admin-one-vue-bulma-dashboard",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "build:gh-pages": "cross-env DEPLOY_ENV=GH_PAGES vue-cli-service build --modern",
     "deploy:gh-pages": "cross-env NODE_DEBUG=gh-pages gh-pages -d dist -t",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "lintfix": "vue-cli-service lint --fix"
   },
   "dependencies": {
     "axios": "^0.19.2",
     "buefy": "^0.8.20",
     "bulma": "^0.9.0",
     "chart.js": "^2.9.3",
     "core-js": "^3.6.5",
-    "dayjs": "^1.8.28",
-    "lodash": "^4.17.15",
+    "dayjs": "^1.8.33",
+    "lodash": "^4.17.19",
     "numeral": "^2.0.6",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-chartjs": "^3.5.0",
-    "vue-router": "^3.3.2",
-    "vuex": "^3.4.0"
+    "vue-router": "^3.4.3",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.1",
-    "@vue/cli-plugin-eslint": "~4.4.1",
-    "@vue/cli-plugin-pwa": "~4.4.1",
-    "@vue/cli-plugin-router": "~4.4.1",
-    "@vue/cli-plugin-vuex": "~4.4.1",
-    "@vue/cli-service": "~4.4.1",
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-plugin-eslint": "^4.4.6",
+    "@vue/cli-plugin-pwa": "^4.4.6",
+    "@vue/cli-plugin-router": "^4.4.6",
+    "@vue/cli-plugin-vuex": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
     "cross-env": "^7.0.2",
-    "eslint": "^7.2.0",
-    "eslint-plugin-import": "^2.21.1",
+    "eslint": "^7.6.0",
+    "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
-    "gh-pages": "^3.0.0",
-    "sass": "^1.26.8",
+    "gh-pages": "^3.1.0",
+    "sass": "^1.26.10",
     "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="app">
-    <nav-bar/>
-    <aside-menu :menu="menu"/>
-    <router-view/>
-    <footer-bar/>
+    <nav-bar />
+    <aside-menu :menu="menu" />
+    <router-view />
+    <footer-bar />
   </div>
 </template>
 
@@ -14,7 +14,7 @@ import AsideMenu from '@/components/AsideMenu'
 import FooterBar from '@/components/FooterBar'
 
 export default {
-  name: 'home',
+  name: 'Home',
   components: {
     FooterBar,
     AsideMenu,

diff --git a/src/components/AsideMenu.vue b/src/components/AsideMenu.vue
@@ -1,20 +1,19 @@
 <template>
-  <aside
-      v-show="isAsideVisible"
-      class="aside is-placed-left is-expanded">
+  <aside v-show="isAsideVisible" class="aside is-placed-left is-expanded">
     <aside-tools :is-main-menu="true">
-      <span slot="label">
-        <b>Admin</b> One
-      </span>
+      <span slot="label"> <b>Admin</b> One </span>
     </aside-tools>
     <div class="menu is-menu-main">
-      <template v-for="(menuGroup, index) in menu" >
-        <p class="menu-label" v-if="typeof menuGroup === 'string'" :key="index">{{ menuGroup }}</p>
+      <template v-for="(menuGroup, index) in menu">
+        <p v-if="typeof menuGroup === 'string'" :key="index" class="menu-label">
+          {{ menuGroup }}
+        </p>
         <aside-menu-list
-            v-else
-            :key="index"
-            @menu-click="menuClick"
-            :menu="menuGroup"/>
+          v-else
+          :key="index"
+          :menu="menuGroup"
+          @menu-click="menuClick"
+        />
       </template>
     </div>
   </aside>
@@ -35,9 +34,7 @@ export default {
     }
   },
   computed: {
-    ...mapState([
-      'isAsideVisible'
-    ])
+    ...mapState(['isAsideVisible'])
   },
   methods: {
     menuClick (item) {

diff --git a/src/components/AsideMenuItem.vue b/src/components/AsideMenuItem.vue
@@ -1,16 +1,31 @@
 <template>
-  <li :class="{'is-active':isDropdownActive}">
-    <component :is="componentIs" :to="itemTo" :href="itemHref" @click="menuClick" exact-active-class="is-active" :class="{'has-icon':!!item.icon, 'has-dropdown-icon':hasDropdown}">
-      <b-icon v-if="item.icon" :icon="item.icon" :class="{ 'has-update-mark' : item.updateMark }" custom-size="default"  />
-      <span v-if="item.label" :class="{'menu-item-label':!!item.icon}">{{ item.label }}</span>
+  <li :class="{ 'is-active': isDropdownActive }">
+    <component
+      :is="componentIs"
+      :to="itemTo"
+      :href="itemHref"
+      exact-active-class="is-active"
+      :class="{ 'has-icon': !!item.icon, 'has-dropdown-icon': hasDropdown }"
+      @click="menuClick"
+    >
+      <b-icon
+        v-if="item.icon"
+        :icon="item.icon"
+        :class="{ 'has-update-mark': item.updateMark }"
+        custom-size="default"
+      />
+      <span v-if="item.label" :class="{ 'menu-item-label': !!item.icon }">{{
+        item.label
+      }}</span>
       <div v-if="hasDropdown" class="dropdown-icon">
-        <b-icon :icon="dropdownIcon" custom-size="default"/>
+        <b-icon :icon="dropdownIcon" custom-size="default" />
       </div>
     </component>
     <aside-menu-list
-        v-if="hasDropdown"
-        :menu="item.menu"
-        :isSubmenuList="true"/>
+      v-if="hasDropdown"
+      :menu="item.menu"
+      :is-submenu-list="true"
+    />
   </li>
 </template>
 
@@ -20,24 +35,15 @@ export default {
   components: {
     AsideMenuList: () => import('@/components/AsideMenuList')
   },
-  data () {
-    return {
-      isDropdownActive: false
-    }
-  },
   props: {
     item: {
       type: Object,
       default: null
     }
   },
-  methods: {
-    menuClick () {
-      this.$emit('menu-click', this.item)
-
-      if (this.hasDropdown) {
-        this.isDropdownActive = (!this.isDropdownActive)
-      }
+  data () {
+    return {
+      isDropdownActive: false
     }
   },
   computed: {
@@ -48,14 +54,23 @@ export default {
       return !!this.item.menu
     },
     dropdownIcon () {
-      return (this.isDropdownActive) ? 'minus' : 'plus'
+      return this.isDropdownActive ? 'minus' : 'plus'
     },
     itemTo () {
       return this.item.to ? this.item.to : null
     },
     itemHref () {
       return this.item.href ? this.item.href : null
     }
+  },
+  methods: {
+    menuClick () {
+      this.$emit('menu-click', this.item)
+
+      if (this.hasDropdown) {
+        this.isDropdownActive = !this.isDropdownActive
+      }
+    }
   }
 }
 </script>
diff --git a/src/components/AsideMenuList.vue b/src/components/AsideMenuList.vue
@@ -1,9 +1,11 @@
 <template>
-  <ul :class="{'menu-list':!isSubmenuList}">
-    <aside-menu-item v-for="(item,index) in menu"
-      @menu-click="menuClick"
+  <ul :class="{ 'menu-list': !isSubmenuList }">
+    <aside-menu-item
+      v-for="(item, index) in menu"
+      :key="index"
       :item="item"
-      :key="index"/>
+      @menu-click="menuClick"
+    />
   </ul>
 </template>
 

diff --git a/src/components/AsideTools.vue b/src/components/AsideTools.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="aside-tools">
     <div class="aside-tools-label">
-      <b-icon v-if="icon" :icon="icon" custom-size="default"/>
-      <slot name="label"/>
+      <b-icon v-if="icon" :icon="icon" custom-size="default" />
+      <slot name="label" />
     </div>
   </div>
 </template>

diff --git a/src/components/CardComponent.vue b/src/components/CardComponent.vue
@@ -2,15 +2,21 @@
   <div class="card">
     <header v-if="title" class="card-header">
       <p class="card-header-title">
-        <b-icon v-if="icon" :icon="icon" custom-size="default"/>
+        <b-icon v-if="icon" :icon="icon" custom-size="default" />
         {{ title }}
       </p>
-      <a v-if="headerIcon" href="#" class="card-header-icon" aria-label="more options" @click.prevent="headerIconClick">
-        <b-icon :icon="headerIcon" custom-size="default"/>
+      <a
+        v-if="headerIcon"
+        href="#"
+        class="card-header-icon"
+        aria-label="more options"
+        @click.prevent="headerIconClick"
+      >
+        <b-icon :icon="headerIcon" custom-size="default" />
       </a>
     </header>
     <div class="card-content">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>

diff --git a/src/components/CardToolbar.vue b/src/components/CardToolbar.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="notification is-card-toolbar">
-    <div class="level" :class="{'is-mobile':isMobile}">
+    <div class="level" :class="{ 'is-mobile': isMobile }">
       <div class="level-left">
         <div class="level-item">
-          <slot name="left"/>
+          <slot name="left" />
         </div>
       </div>
       <div class="level-right">
         <div class="level-item">
-          <slot name="right"/>
+          <slot name="right" />
         </div>
       </div>
     </div>

diff --git a/src/components/CardWidget.vue b/src/components/CardWidget.vue
@@ -7,13 +7,13 @@
             {{ label }}
           </h3>
           <h1 class="title">
-            <growing-number :value="number" :prefix="prefix" :suffix="suffix"/>
+            <growing-number :value="number" :prefix="prefix" :suffix="suffix" />
           </h1>
         </div>
       </div>
       <div v-if="icon" class="level-item has-widget-icon">
         <div class="is-widget-icon">
-          <b-icon :icon="icon" size="is-large" :type="type"/>
+          <b-icon :icon="icon" size="is-large" :type="type" />
         </div>
       </div>
     </div>

diff --git a/src/components/Charts/LineChart.js b/src/components/Charts/LineChart.js
@@ -13,13 +13,14 @@ export default {
     }
   },
   mounted () {
-    this.$watch('chartData', (newVal, oldVal) => {
-      if (!oldVal) {
-        this.renderChart(
-          this.chartData,
-          this.extraOptions
-        )
-      }
-    }, { immediate: true })
+    this.$watch(
+      'chartData',
+      (newVal, oldVal) => {
+        if (!oldVal) {
+          this.renderChart(this.chartData, this.extraOptions)
+        }
+      },
+      { immediate: true }
+    )
   }
 }
diff --git a/src/components/Charts/chart.config.js b/src/components/Charts/chart.config.js
@@ -27,30 +27,34 @@ export const chartOptionsMain = {
     position: 'nearest'
   },
   scales: {
-    yAxes: [{
-      barPercentage: 1.6,
-      gridLines: {
-        drawBorder: false,
-        color: 'rgba(29,140,248,0.0)',
-        zeroLineColor: 'transparent'
-      },
-      ticks: {
-        padding: 20,
-        fontColor: '#9a9a9a'
+    yAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(29,140,248,0.0)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#9a9a9a'
+        }
       }
-    }],
+    ],
 
-    xAxes: [{
-      barPercentage: 1.6,
-      gridLines: {
-        drawBorder: false,
-        color: 'rgba(225,78,202,0.1)',
-        zeroLineColor: 'transparent'
-      },
-      ticks: {
-        padding: 20,
-        fontColor: '#9a9a9a'
+    xAxes: [
+      {
+        barPercentage: 1.6,
+        gridLines: {
+          drawBorder: false,
+          color: 'rgba(225,78,202,0.1)',
+          zeroLineColor: 'transparent'
+        },
+        ticks: {
+          padding: 20,
+          fontColor: '#9a9a9a'
+        }
       }
-    }]
+    ]
   }
 }