Upgrade Vite, Vue and other thrid-party packages

package.json

@@ -10,54 +10,54 @@
   "devDependencies": {
     "@rvxlab/tailwind-plugin-ios-full-height": "^1.1.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/compiler-sfc": "^3.4.15",
+    "@vue/compiler-sfc": "^3.5.13",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
+    "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.20.1",
+    "eslint-plugin-vue": "^9.32.0",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.49",
-    "prettier": "^3.2.4",
+    "prettier": "^3.4.2",
-    "sass": "^1.70.0",
+    "sass": "^1.83.1",
-    "tailwind-scrollbar": "^3.0.5",
+    "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.17"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.17",
+    "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^1.0.6",
     "@popperjs/core": "^2.11.8",
     "@stripe/stripe-js": "^2.4.0",
-    "@tiptap/core": "^2.8.0",
+    "@tiptap/core": "^2.11.2",
-    "@tiptap/extension-link": "^2.8.0",
+    "@tiptap/extension-link": "^2.11.2",
-    "@tiptap/extension-text-align": "^2.8.0",
+    "@tiptap/extension-text-align": "^2.11.2",
-    "@tiptap/pm": "^2.8.0",
+    "@tiptap/pm": "^2.11.2",
-    "@tiptap/starter-kit": "^2.8.0",
+    "@tiptap/starter-kit": "^2.11.2",
-    "@tiptap/vue-3": "^2.8.0",
+    "@tiptap/vue-3": "^2.11.2",
     "@types/node": "^20.11.9",
     "@vuelidate/components": "^1.2.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^12.4.0",
-    "axios": "0.28.1",
+    "axios": "0.29.0",
     "chart.js": "^2.9.4",
-    "guid": "0.0.12",
+    "guid": "^0.0.12",
-    "laravel-vite-plugin": "^1.0.0",
+    "laravel-vite-plugin": "^1.1.1",
     "lodash": "^4.17.21",
-    "maska": "^2.1.11",
+    "maska": "^3.0.4",
     "mini-svg-data-uri": "^1.4.4",
     "moment": "^2.30.1",
     "path": "^0.12.7",
-    "pinia": "^2.1.7",
+    "pinia": "^2.3.0",
     "v-money3": "^3.24.1",
     "v-tooltip": "^4.0.0-beta.17",
-    "vite": "5.3.5",
+    "vite": "^6.0.7",
-    "vue": "^3.4",
+    "vue": "^3.5",
-    "vue-flatpickr-component": "^11.0.3",
+    "vue-flatpickr-component": "^11.0.5",
-    "vue-i18n": "^9.9.0",
+    "vue-i18n": "^11.0.1",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.5.0",
     "vuedraggable": "^4.1.0"
   }
 }

resources/sass/invoiceshelf.scss

@@ -1,3 +1,6 @@
+@use "themes.scss";
+@use "components/animation.scss";
+
 @tailwind base;
 
 @tailwind components;
@@ -44,16 +47,6 @@
     src: url("$fonts/Poppins-SemiBold.ttf") format("truetype");
 }
 
-// Default Theme
-//----------------------------------
-
-@import "themes.scss";
-
-// Base Components
-//----------------------------------
-
-@import "components/animation.scss";
-
 body {
     min-height: 100vh;
     min-height: -webkit-fill-available;

resources/scripts/components/base/BaseContentPlaceholders.vue

@@ -33,6 +33,9 @@ const classObject = computed(() => {
 </script>
 
 <style lang="scss">
+
+@use 'sass:color';
+
 $base-content-placeholders-primary-color: #ccc !default;
 $base-content-placeholders-secondary-color: #eee !default;
 $base-content-placeholders-border-radius: 6px !default;
@@ -77,7 +80,7 @@ $base-content-placeholders-spacing: 10px !default;
     background: linear-gradient(
       to right,
       transparent 0%,
-      darken($base-content-placeholders-secondary-color, 5%) 15%,
+      color.adjust($base-content-placeholders-secondary-color, $lightness: -5%) 15%,
       transparent 30%
     );
     animation-duration: 1.5s;
@@ -168,7 +171,7 @@ $base-content-placeholders-spacing: 10px !default;
     background: linear-gradient(
       to right,
       transparent 0%,
-      darken($base-content-placeholders-secondary-color, 5%) 15%,
+      color.adjust($base-content-placeholders-secondary-color, $lightness: -5%) 15%,
       transparent 30%
     );
     animation-duration: 1.5s;

resources/scripts/components/base/BaseFileUploader.vue

@@ -250,9 +250,9 @@
           </p>
         </div>
 
-        <a
+        <span
-          href="#"
           class="
+            cursor-pointer
             box-border
             absolute
             z-30
@@ -273,7 +273,7 @@
           @click.prevent.stop="onFileRemove(index)"
         >
           <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
-        </a>
+        </span>
       </a>
     </div>
 
@@ -348,9 +348,9 @@
           </p>
         </div>
 
-        <a
+        <span
-          href="#"
           class="
+            cursor-pointer
             box-border
             absolute
             z-30
@@ -371,7 +371,7 @@
           @click.prevent.stop="onFileRemove(index)"
         >
           <BaseIcon name="XIcon" class="h-4 text-xl leading-6 text-black" />
-        </a>
+        </span>
       </a>
     </div>
   </form>