Stage v1.2.0

eslint.config.ts

@@ -1,6 +1,9 @@
-import pluginVue from 'eslint-plugin-vue'
-import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+import pluginVue from "eslint-plugin-vue";
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+} from "@vue/eslint-config-typescript";
+import prettierConfig from "@vue/eslint-config-prettier";
 
 // To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
 // import { configureVueProject } from '@vue/eslint-config-typescript'
@@ -9,17 +12,21 @@ import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
 
 export default defineConfigWithVueTs(
   {
-    name: 'app/files-to-lint',
-    files: ['**/*.{ts,mts,tsx,vue}'],
+    name: "app/files-to-lint",
+    files: ["**/*.{ts,mts,tsx,vue}"],
   },
 
   {
-    name: 'app/files-to-ignore',
+    name: "app/files-to-ignore",
     // todo: change or remove assets/js
-    ignores: ['src/assets/js', '**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+    ignores: [
+      "src/assets/js",
+      "**/dist/**", 
+      "**/dist-ssr/**",
+      "**/coverage/**"]
   },
 
-  pluginVue.configs['flat/essential'],
+  pluginVue.configs["flat/essential"],
   vueTsConfigs.recommended,
-  skipFormatting,
-)
+  prettierConfig,
+)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "datta-able-free-vue-admin-template",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "license": "MIT",
   "author": "CodedThemes",

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
 
-document.body.setAttribute('data-pc-theme', 'light')
-document.body.setAttribute('data-pc-direction', 'ltr')
-document.body.setAttribute('data-pc-preset', 'preset-1')
+document.body.setAttribute("data-pc-theme", "light");
+document.body.setAttribute("data-pc-direction", "ltr");
+document.body.setAttribute("data-pc-preset", "preset-1");
 </script>
 
 <template>

src/assets/scss/landing.scss

@@ -8,6 +8,8 @@ File: style.css
 =================================================================================== */
 
 // main framework
+@use 'sass:color';
+
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
 @import 'settings/color-variables';
@@ -65,12 +67,11 @@ section {
 
   &.top-nav-collapse.default {
     padding: 26px 0;
+    box-shadow: none;
 
-    @include media-breakpoint-up(md) {
+    @media (min-width: 776px) {
       background: transparent !important;
     }
-
-    box-shadow: none;
   }
 
   &.default,
@@ -506,6 +507,7 @@ header {
   section {
     padding: 40px 0;
   }
+
   .call-to-action .cta-block .gift-icon {
     display: none;
   }
@@ -545,8 +547,8 @@ header {
     background: $dark-layout-color;
 
     .bg-white {
-      background: lighten($dark-layout-color, 4%) !important;
-      --bs-white: lighten($dark-layout-color, 4%);
+      background: #{color.adjust($dark-layout-color, $lightness: 4%)} !important;
+      --bs-white: #{color.adjust($dark-layout-color, $lightness: 4%)};
     }
   }
 

src/assets/scss/settings/_bootstrap-variables.scss

@@ -265,6 +265,7 @@ $position-values: (
 body {
   font-feature-settings: 'salt';
 }
+
 $body-bg: #f4f7fa; // change
 $body-color: #888; // change
 $body-text-align: null;
@@ -888,14 +889,14 @@ $form-validation-states: (
 // of components dependent on the z-axis and are designed to all work together.
 
 // scss-docs-start zindex-stack
-$zindex-dropdown: 1026;
+$zindex-dropdown: 1024;
 $zindex-sticky: 1020;
 $zindex-fixed: 1030;
 $zindex-offcanvas-backdrop: 1040;
 $zindex-offcanvas: 1045;
 $zindex-modal-backdrop: 1050;
 $zindex-modal: 1055;
-$zindex-popover: 1070;
+$zindex-popover: 1025;
 $zindex-tooltip: 1081;
 $zindex-toast: 1090;
 // scss-docs-end zindex-stack

src/assets/scss/style.scss

@@ -137,15 +137,9 @@ File: style.css
 @import 'themes/pages/admin';
 
 // custom plugins
-@import 'themes/plugins/sweatalert';
 @import 'themes/plugins/lightbox';
-@import 'themes/plugins/notification';
-@import 'themes/plugins/modal';
-@import 'themes/plugins/rangeslider';
-@import 'themes/plugins/daterange';
-@import 'themes/plugins/tags-input';
-@import 'themes/plugins/slider';
-@import 'themes/plugins/switches';
+@import 'themes/plugins/apexchart';
 @import 'themes/plugins/data-tables';
+@import 'themes/plugins/scrollbar';
 
 @import 'themes/layouts/customizer';

src/assets/scss/themes/_general.scss

@@ -2,6 +2,7 @@
     2. Custom css start
 ==========================  **/
 @use 'sass:map';
+
 * {
   &:focus {
     outline: none;

src/assets/scss/themes/_generic.scss

@@ -3,6 +3,7 @@
 ========================== **/
 /*====== Padding , Margin css starts ======*/
 @use 'sass:map';
+
 $i: 0;
 @while $i<=50 {
   .p {

src/assets/scss/themes/components/_form.scss

@@ -2,6 +2,7 @@
 //   19. Form css start
 // ============================
 @use 'sass:color';
+
 select.form-control,
 .form-control {
   &:hover {
@@ -79,7 +80,7 @@ select.form-control {
 
   i {
     position: absolute;
-    top: 14px;
+    top: 12px;
     left: 15px;
     font-size: 20px;
   }

src/assets/scss/themes/components/_table.scss

@@ -2,6 +2,7 @@
 //   17. Table css start
 // ============================
 @use 'sass:color';
+
 .table {
   &.table-align-center {
     td,

src/assets/scss/themes/layouts/_customizer.scss

@@ -2,6 +2,7 @@
   36. Customizer css start
 ==========================  **/
 @use 'sass:map';
+
 // main framework
 .pct-c-btn {
   display: block;
@@ -50,6 +51,7 @@
     transform: rotate(360deg);
   }
 }
+
 .pct-tabs {
   background: rgba(var(--bs-primary-rgb), 0.06);
   border-top: 1px solid var(--bs-border-color);
@@ -220,6 +222,7 @@
       $i: $i + 1;
     }
   }
+
   &.navbar-img {
     > a {
       width: 45px;
@@ -228,16 +231,19 @@
       background-size: cover;
     }
   }
+
   &.drp-menu-link-icon,
   &.drp-menu-icon {
     > a {
       width: 45px;
       height: 45px;
       border: 2px solid var(--bs-border-color);
+
       i {
         transform: scale(1);
         color: var(--bs-body-color);
       }
+
       &.active {
         flex: none;
         border-color: var(--bs-primary);

src/assets/scss/themes/layouts/_pc-common.scss

@@ -2,6 +2,7 @@
 //   6. Common layout css start
 // ============================
 @use 'sass:color';
+
 .pc-container {
   $temp: $header-height + 66;
   position: relative;

src/assets/scss/themes/layouts/_pc-header.scss

@@ -2,6 +2,7 @@
 //   4. header css start
 // ============================
 @use 'sass:color';
+
 .pc-header {
   background: var(--pc-header-background);
   color: var(--pc-header-color);

src/assets/scss/themes/layouts/_pc-horizontal.scss

@@ -2,6 +2,7 @@
 //    8. Horizontal layout css start
 // ========================================
 @use 'sass:color';
+
 [data-pc-layout='horizontal'] {
   @media (min-width: 1025px) {
     .pc-header {
@@ -180,6 +181,7 @@
         .pc-item {
           display: block;
           position: relative;
+
           .pc-link {
             display: block;
           }
@@ -268,6 +270,7 @@
         &:hover {
           > .pc-submenu {
             display: block;
+            z-index: 1020;
           }
         }
       }

src/assets/scss/themes/layouts/_pc-sidebar.scss

@@ -3,6 +3,7 @@
 // ============================
 @use 'sass:map';
 @use 'sass:color';
+
 .b-brand {
   display: flex;
   align-items: center;
@@ -18,6 +19,7 @@
     svg {
       stroke: #fff;
     }
+
     i {
       color: #fff;
     }
@@ -177,6 +179,7 @@
 
     .pc-submenu {
       padding: 15px 0;
+
       .pc-item {
         > .pc-link {
           &:after {
@@ -357,9 +360,11 @@
     display: none;
   }
 }
+
 [data-pc-navimg*='preset-'] {
   .pc-sidebar {
     background-size: cover;
+
     .navbar-wrapper {
       background: rgba(0, 0, 0, 0.5);
     }
@@ -386,6 +391,7 @@
           top: 6px;
           opacity: 0;
         }
+
         &.active,
         &:hover {
           > .pc-link:after {
@@ -396,6 +402,7 @@
     }
   }
 }
+
 @media (min-width: 1025px) {
   .navbar-overlay {
     .pc-sidebar {
@@ -521,6 +528,7 @@
       &:focus,
       &:hover {
         color: var(--pc-header-color);
+
         > svg,
         > i {
           color: var(--pc-header-color);
@@ -587,6 +595,7 @@
         .breadcrumb-item,
         a {
           color: #fff;
+
           &:active,
           &:focus,
           &:hover {