Merge branch 'master' of https://github.com/flatlogic/material-vue-full

Author: guardofparadise

README.md

@@ -36,11 +36,11 @@ We have implemented some basic pages, so you can see our template in action.
 
 1. Clone repository
 ```shell
-git clone https://github.com/flatlogic/material-vue.git
+git clone https://github.com/flatlogic/material-vue-full.git
 ```
 2. Get in the project folder
 ```shell
-cd material-vue
+cd material-vue-full
 ```
 3. Install dependencies via npm or yarn
 ```shell

changelog.md

@@ -1,7 +1,25 @@
 # Changelog
 
-## [v.1.0.5]
+## [v.1.0.7] - 04/20/2021
+
+### Fixed
+ - Sidebar sub-menu
+
+## [v.1.0.6] - 04/13/2021
 
+### Update dependencies
+    amcharts/amcharts4: 4.10.14 -> 4.10.17
+    apexcharts: 3.24.0 -> 3.26.0
+    core-js: 3.8.3 ->  3.10.1
+    vue-apexcharts: 1.6.0 -> 1.6.1
+    vuetify: 2.3.19 -> 2.4.9
+
+## [v.1.0.6] - 09/04/2021
+### Updated  
+- Updated documentation
+- Update notifications in User List and Product pages 
+
+## [v.1.0.5]
 - Updated documentation
 
 ## [v.1.0.4]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-material-admin-full",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --port 3000",
@@ -9,11 +9,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@amcharts/amcharts4": "^4.10.14",
+    "@amcharts/amcharts4": "^4.10.17",
     "@amcharts/amcharts4-geodata": "^4.1.19",
-    "apexcharts": "^3.24.0",
+    "apexcharts": "^3.26.0",
     "axios": "^0.21.1",
-    "core-js": "^3.8.3",
+    "core-js": "^3.10.1",
     "cross-env": "^7.0.3",
     "css-loader": "^1.0.1",
     "font-awesome": "^4.7.0",
@@ -22,10 +22,10 @@
     "jsonwebtoken": "^8.5.1",
     "moment": "^2.29.1",
     "vue": "^2.6.12",
-    "vue-apexcharts": "^1.6.0",
+    "vue-apexcharts": "^1.6.1",
     "vue-router": "^3.5.1",
     "vue2-google-maps": "^0.10.7",
-    "vuetify": "^2.3.19",
+    "vuetify": "^2.4.9",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/components/Breadcrumbs/Breadcrumbs.vue

@@ -2,7 +2,7 @@
   <v-card class="mx-1">
     <v-breadcrumbs
       v-if="!homePage()"
-      class="mt-8 px-4 py-2"
+      class="mt-8 mb-6 px-4 py-2"
       :items="breadcrumbsGen">
       <template v-slot:divider >
         <v-icon size="22">mdi-chevron-right</v-icon>

src/components/Helper/Helper.vue

@@ -54,7 +54,8 @@
         <v-card-actions>
           <v-col cols="12">
             <v-btn color="successConst white--text" block @click="menu = false" class="button-shadow mb-2" href="https://flatlogic.com/templates/vue">Buy</v-btn>
-            <v-btn color="primaryConst white--text" block @click="menu = false" class="button-shadow" to="/documentation/overview">Documentation</v-btn>
+            <v-btn color="primaryConst white--text" block @click="menu = false" class="button-shadow mb-2" to="/documentation/overview">Documentation</v-btn>
+            <v-btn color="info white--text" block @click="menu = false" class="button-shadow" href="https://flatlogic.com/forum">Support</v-btn>
           </v-col>
         </v-card-actions>
       </v-card>

src/components/Sidebar/Sidebar.vue

@@ -43,6 +43,7 @@
           :key="item.title"
           v-model="item.model"
         >
+
           <template v-slot:prependIcon>
             <v-icon size="24" class="mr-0" color="greyTint"> {{ item.icon }} </v-icon>
           </template>
@@ -57,6 +58,7 @@
           </template>
 
           <v-list-item
+            v-show="!item.type"
             v-for="(child, i) in item.children"
             :key="i"
             :to="child.link"
@@ -73,11 +75,36 @@
                 </v-list-item-title>
             </v-list-item-content>
           </v-list-item>
+
+          <template v-if="item.type">
+            <v-list-group
+              v-for="(item, i) in item.children"
+              :key="i"
+              :value="true"
+              no-action
+              sub-group
+            >
+              <template v-slot:activator>
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item-content>
+              </template>
+
+              <v-list-item
+                  v-for="(child, i) in item.children"
+                  :key="i"
+                  link
+              >
+                <v-list-item-title v-text="child.title"></v-list-item-title>
+              </v-list-item>
+            </v-list-group>
+          </template>
         </v-list-group>
         <v-list-item
           color="primary"
           v-else
           :key="item.text"
+          :href="item.href ? item.href : null"
           :to="item.link === '#' ? '' : item.link"
           @click="item.action ? item.action() : null"
           link
@@ -327,24 +354,30 @@
             title: 'Menu Levels',
             icon: 'mdi-folder',
             model: false,
+            type: 'sub-menu',
             children: [
-              { title: 'Level 1.1', icon: 'mdi-circle-small', },
+              { title: 'Level 1.1',
+                icon: 'mdi-circle-small',
+                children: [
+                  { title: 'Level 1.2', icon: 'mdi-circle-small', link: '/extra/calendar'},
+                  { title: 'Level 1.3', icon: 'mdi-circle-small', link: '/extra/invoice'},
+                ]},
               {
-                title: 'Level 1.2',
+                title: 'Level 2.1',
                 icon: 'mdi-folder',
                 model: false,
                 children: [
-                  { title: 'Calendar', icon: 'mdi-circle-small', link: '/extra/calendar'},
-                  { title: 'Invoice', icon: 'mdi-circle-small', link: '/extra/invoice'},
+                  { title: 'Level 2.2', icon: 'mdi-circle-small', link: '/extra/calendar'},
+                  { title: 'Level 2.3', icon: 'mdi-circle-small', link: '/extra/invoice'},
                 ],
               },
             ],
           },
           { divider: true },
           { heading: 'HELP' },
-          { title: 'Library', icon: 'mdi-book-variant-multiple'},
-          { title: 'Support', icon: 'mdi-forum'},
-          { title: 'FAQ', icon: 'mdi-help-circle-outline', },
+          { title: 'Library', icon: 'mdi-book-variant-multiple', href: 'https://flatlogic.com/templates'},
+          { title: 'Support', icon: 'mdi-forum', href: 'https://flatlogic.com/forum/'},
+          { title: 'FAQ', icon: 'mdi-help-circle-outline', href:'https://flatlogic.com/templates/vue-material-template'},
           { divider: true },
           { heading: 'PROJECTS' },
           { title: 'My recent', icon: 'mdi-circle-medium', color: 'warning'},

src/pages/Dashboard/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-container fluid class="mx-1">
+  <v-container fluid class="">
     <div class="dashboard-page">
-      <v-card width="100%" class="breadcrumbs">
+      <v-card width="100%" class="breadcrumbs mx-1 mb-6">
         <v-row no-gutters class="d-flex align-center mt-8 mb-3 px-5 py-1 mx-1">
           <v-col cols="12" md="6" class="d-sm-flex justify-md-start justify-space-between align-center">
             <h1 class="main-page-title greyMedium--text mb-0 mr-2 pt-4 pt-md-0">Dashboard</h1>

src/pages/Documentation/pages/Overview/Overview.vue

@@ -5,8 +5,8 @@
         <v-card class="mx-1 mb-1">
           <v-card-text class="pa-5">
             <p class="text-h5">Vue Material Admin</p>
-            <p>Angular Material Admin Full is an admin dashboard template built with Angular 9. You can use Angular
-              Material Admin Full to build any type of web applications like SAAS, CMS, financial dashboards, project
+            <p>Vue Material Admin Full is an admin dashboard template built with Vue 2.6. You can use
+              Vue Admin Full to build any type of web applications like SAAS, CMS, financial dashboards, project
               management tools, etc.</p>
             <p class="text-h5">Features</p>
             <ul>

src/pages/Documentation/pages/QuickStart/QuickStart.vue

@@ -9,8 +9,7 @@
               <li>Mac OS X, Windows, or Linux</li>
               <li>Node.js v9 or newer</li>
               <li>Vue JS 2.6</li>
-              <li>Running our <a href="https://github.com/flatlogic/user-management-template-backend">Node.js</a>
-                or <a href="https://github.com/flatlogic/app-generator-java">Java</a> backend (Required only in full stack version)</li>
+              <li>Running our <a href="https://github.com/flatlogic/user-management-template-backend">Node.js</a> / <a href="https://github.com/flatlogic/app-generator-java">Java</a> / <a href="https://github.com/flatlogic/php-backend">PHP</a> backend (Required only in full stack version)</li>
             </ul>
             <p class="text-h5 mt-4">Quick Start:</p>
             <ul>

src/pages/E-commerce/ProductManagement/ProductManagement.vue

@@ -113,7 +113,7 @@
         right
         top
         style="top: 50px">
-      {{ text }}
+      <div v-html="text" class=""></div>
       <template v-slot:action="{ attrs }">
         <v-btn
           dark
@@ -180,7 +180,9 @@
           require('@/assets/img/e-commerce/low/5.png'),
           require('@/assets/img/e-commerce/low/6.png')
        ],
-        notification: 'This page is only available in Vue Material Admin Full with NodeJS/.NET integration!'
+        notification: '<p class="font-weight-bold mb-0">This page is only available in Vue Material Admin Full with ' +
+            '<a rel="noreferrer noopener" target="_blank" class="white--text text-decoration-none" href="https://flatlogic.com/templates/sing-app-vue-node-js">NodeJS</a>/' +
+            '<a rel="noreferrer noopener" target="_blank" class="white--text text-decoration-none" href="https://flatlogic.com/templates/sing-app-vue-laravel">PHP</a> backend integration!</p>'
       }
     },
     computed: {