refactor(multi): refactored pages as per master-vue-free-internal

Author: DeepKumbhare85

typescript-version/.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "editor.formatOnSave": true,
+    "files.insertFinalNewline": true,
     "javascript.updateImportsOnFileMove.enabled": "always",
     "[javascript]": {
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
@@ -110,4 +111,4 @@
             }
         ]
     }
-}
+}

typescript-version/auto-imports.d.ts

@@ -22,60 +22,61 @@
     "axios-mock-adapter": "^1.21.4",
     "chart.js": "^4.1.2",
     "jwt-decode": "^3.1.2",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.3",
     "prismjs": "^1.29.0",
     "roboto-fontface": "^0.10.0",
     "sass": "^1.59.3",
     "unplugin-vue-define-options": "^1.3.5",
-    "vue": "^3.3.2",
+    "vue": "^3.3.4",
     "vue-chartjs": "^5.2.0",
     "vue-flatpickr-component": "11.0.3",
     "vue-i18n": "^9.2.2",
     "vue-prism-component": "^2.0.0",
-    "vue-router": "^4.2.0",
+    "vue-router": "^4.2.1",
     "vue3-apexcharts": "^1.4.1",
     "vue3-perfect-scrollbar": "^1.6.0",
-    "vuetify": "3.2.1",
+    "vuetify": "3.3.1",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@antfu/eslint-config-vue": "^0.38.6",
-    "@fullcalendar/core": "^6.1.7",
-    "@fullcalendar/daygrid": "^6.1.7",
-    "@fullcalendar/interaction": "^6.1.7",
-    "@fullcalendar/list": "^6.1.7",
-    "@fullcalendar/timegrid": "^6.1.7",
-    "@fullcalendar/vue3": "^6.1.7",
+    "@antfu/eslint-config-vue": "^0.39.1",
+    "@fullcalendar/core": "^6.1.8",
+    "@fullcalendar/daygrid": "^6.1.8",
+    "@fullcalendar/interaction": "^6.1.8",
+    "@fullcalendar/list": "^6.1.8",
+    "@fullcalendar/timegrid": "^6.1.8",
+    "@fullcalendar/vue3": "^6.1.8",
     "@iconify-json/mdi": "^1.1.52",
     "@iconify/tools": "^2.2.0",
+    "@iconify/utils": "^2.1.5",
     "@iconify/vue": "4.1.1",
     "@intlify/unplugin-vue-i18n": "^0.10.0",
-    "@types/node": "^20.1.4",
+    "@types/node": "^20.2.3",
     "@types/webfontloader": "^1.6.34",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.0",
-    "eslint": "^8.40.0",
+    "eslint": "^8.41.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-typescript": "^3.5.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-promise": "^6.0.1",
     "eslint-plugin-regex": "^1.10.0",
     "eslint-plugin-sonarjs": "^0.19.0",
     "eslint-plugin-unicorn": "^47.0.0",
-    "eslint-plugin-vue": "^9.12.0",
+    "eslint-plugin-vue": "^9.13.0",
     "postcss-html": "^1.5.0",
     "stylelint": "14.15.0",
     "stylelint-config-idiomatic-order": "9.0.0",
     "stylelint-config-standard-scss": "6.1.0",
     "stylelint-use-logical-spec": "4.1.0",
-    "type-fest": "^3.10.0",
+    "type-fest": "^3.11.0",
     "typescript": "^5.0.4",
-    "unplugin-auto-import": "^0.15.1",
+    "unplugin-auto-import": "^0.16.1",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.5",
-    "vite-plugin-pages": "^0.29.0",
+    "vite": "^4.3.8",
+    "vite-plugin-pages": "^0.30.1",
     "vite-plugin-vue-layouts": "^0.8.0",
     "vite-plugin-vuetify": "1.0.2",
     "vue-shepherd": "^3.0.0",
@@ -85,4 +86,4 @@
   "resolutions": {
     "postcss": "8"
   }
-}
+}

typescript-version/package.json

@@ -1,6 +1,6 @@
 @use "mixins";
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
 @use "@layouts/styles/placeholders";
+@use "@layouts/styles/mixins" as layoutMixins;
 @use "@configured-variables" as variables;
 
 // 👉 Avatar group
@@ -65,6 +65,17 @@
   }
 }
 
+// 👉 Datatable
+.v-data-table-footer__pagination {
+  @include layoutMixins.rtl {
+    .v-btn {
+      .v-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
 // Dialog responsive width
 .v-dialog {
   // dialog custom close btn
@@ -148,8 +159,12 @@
   }
 }
 
-// 👉 Textarea
+// 👉 Switch
+.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
+  color: #fff !important;
+}
 
+// 👉 Textarea
 .v-textarea .v-field__input {
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-mask-image: none !important;

typescript-version/src/@core/scss/base/_components.scss

@@ -1,7 +1,6 @@
 @use "@configured-variables" as variables;
 @use "@core/scss/base/placeholders" as *;
 @use "@core/scss/template/placeholders" as *;
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
 @use "misc";
 @use "@core/scss/base/mixins";
 

typescript-version/src/@core/scss/base/_default-layout-w-vertical-nav.scss

@@ -5,6 +5,7 @@
   box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
 }
 
+// #region before-pseudo
 // ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
 @mixin before-pseudo() {
   position: relative;
@@ -22,6 +23,8 @@
   }
 }
 
+// #endregion before-pseudo
+
 @mixin bordered-skin($component, $border-property: "border", $important: false) {
   #{$component} {
     // background-color: rgb(var(--v-theme-background));
@@ -30,30 +33,10 @@
   }
 }
 
+// #region selected-states
 // ℹ️ Inspired from vuetify's active-states mixin
 // focus => 0.12 & selected => 0.08
 @mixin selected-states($selector) {
-  // #{$selector} {
-  //   opacity: calc(#{map.get(vuetify.$states, "selected")} * var(--v-theme-overlay-multiplier));
-  // }
-
-  // &:hover
-  // #{$selector} {
-  //   opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "hover")} * var(--v-theme-overlay-multiplier));
-  // }
-
-  // &:focus-visible
-  // #{$selector} {
-  //   opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
-  // }
-
-  // @supports not selector(:focus-visible) {
-  //   &:focus {
-  //     #{$selector} {
-  //       opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
-  //     }
-  //   }
-  // }
   #{$selector} {
     opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
   }
@@ -76,3 +59,5 @@
     }
   }
 }
+
+// #endregion selected-states

typescript-version/src/@core/scss/base/_mixins.scss

@@ -95,7 +95,7 @@ $card-spacer-content: 16px;
     .v-btn--icon.v-btn--density-default {
       block-size: calc(var(--v-btn-height) + -10px);
       color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-      inline-size: calc(var(--v-btn-height) + -10px);
+      inline-size: calc(var(--v-btn-height) + -8px);
 
       &.v-btn--active {
         color: #fff;
@@ -104,6 +104,17 @@ $card-spacer-content: 16px;
       .v-btn__overlay {
         opacity: 0;
       }
+
+      .v-ripple__container {
+        display: none;
+      }
+
+      .v-btn__content {
+        .v-icon {
+          block-size: 8px !important;
+          inline-size: 8px !important;
+        }
+      }
     }
   }
 

typescript-version/src/@core/scss/base/_utilities.scss

@@ -196,7 +196,6 @@ h6,
   color: rgb(var(--v-border-color));
 }
 
-// 👉 DataTable
 // 👉 DataTable
 .v-data-table {
   /* stylelint-disable-next-line no-descending-specificity */

typescript-version/src/@core/scss/base/libs/vuetify/_overrides.scss

@@ -1,4 +1,3 @@
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
 @use "@core/scss/base/mixins";
 
 // ℹ️ This is common style that needs to be applied to both navs

typescript-version/src/@core/scss/base/placeholders/_nav.scss

@@ -1,5 +1,4 @@
 @use "@styles/variables/_vuetify.scss" as vuetify;
-@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
 @use "@layouts/styles/mixins" as layoutsMixins;
 @use "@core/scss/base/mixins";