chore: upgrade vue-cli to v5, tailwind css to v3

.eslintrc.js

@@ -5,9 +5,10 @@ module.exports = {
 	},
 	extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
 	parserOptions: {
-		parser: "babel-eslint",
+		parser: "@babel/eslint-parser",
 	},
 	rules: {
+		"vue/multi-word-component-names": 0,
 		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
 		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
 		"prettier/prettier": [

README.md

@@ -1,5 +1,10 @@
 # access8mathweb
 
+## Prerequisites
+
+- Node.js >= 18
+- NPM >= 9
+
 ## Project setup
 ```
 npm install

package.json

@@ -10,42 +10,40 @@
   },
   "dependencies": {
     "@codemirror/lang-markdown": "^6.0.5",
-    "@headlessui/vue": "1.7.10",
-    "@tailwindcss/postcss7-compat": "^2.2.17",
-    "autoprefixer": "^9.8.8",
+    "@headlessui/vue": "^1.7.10",
     "codemirror": "^6.0.1",
     "core-js": "^3.21.1",
     "i": "^0.3.7",
     "marked": "^5.1.0",
     "mathjax-full": "^3.2.2",
-    "postcss": "^7.0.39",
     "register-service-worker": "^1.7.2",
-    "svg-sprite-loader": "^6.0.11",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.22.5",
     "@intlify/vue-i18n-loader": "^2.1.2",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^7.20.0",
-    "prettier": "^2.5.1",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-pwa": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.43.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.15.1",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
     "sass": "^1.49.8",
     "sass-loader": "^8.0.2",
-    "vue-cli-plugin-i18n": "~2.1.1",
-    "vue-cli-plugin-tailwind": "~2.0.6",
+    "svg-sprite-loader": "^6.0.11",
+    "tailwindcss": "^3.3.2",
+    "vue-cli-plugin-i18n": "~2.3.2",
+    "vue-cli-plugin-tailwind": "~3.0.0",
     "vue-loader-v16": "^16.0.0-beta.5.4"
   }
 }

src/assets/tailwind.css

@@ -1,7 +1,5 @@
 @tailwind base;
-
 @tailwind components;
-
 @tailwind utilities;
 
 /* Only when we need to "handcoding" styling, then require these CSS Variable. */
@@ -43,21 +41,19 @@
 }
 
 @layer utilities {
-  @variants responsive {
-    .flex-basis-auto {
-      flex-basis: auto;
-    }
-    /* Purpose: For those flex item, that need to take up "1/1" or "1/2" or "1/3" of the space (parent width). */
-    /* "4/5" is arbitrary/rough "safe-enough" value to prevent padding/margin issues of parent/chidren. */
-    .flex-basis-like-1\/1 {
-      flex-basis: calc(100% * (4/5) / 1);
-    }
-    .flex-basis-like-1\/2 {
-      flex-basis: calc(100% * (4/5) / 2);
-    }
-    .flex-basis-like-1\/3 {
-      flex-basis: calc(100% * (4/5) / 3);
-    }
+  .flex-basis-auto {
+    flex-basis: auto;
+  }
+  /* Purpose: For those flex item, that need to take up "1/1" or "1/2" or "1/3" of the space (parent width). */
+  /* "4/5" is arbitrary/rough "safe-enough" value to prevent padding/margin issues of parent/chidren. */
+  .flex-basis-like-1\/1 {
+    flex-basis: calc(100% * (4/5) / 1);
+  }
+  .flex-basis-like-1\/2 {
+    flex-basis: calc(100% * (4/5) / 2);
+  }
+  .flex-basis-like-1\/3 {
+    flex-basis: calc(100% * (4/5) / 3);
   }
 }
 
@@ -89,4 +85,4 @@ body {
 
 .w-100{
   width: 100%;
-}
+}

src/components/EditIconsTab.vue

@@ -12,13 +12,13 @@
 			<div class="flex padding_bottom">
 				<TabList
 					as="div"
-					class="flex-auto xl:flex-grow-0 flex flex-wrap xl:flex-nowrap bg-white"
+					class="flex-auto xl:grow-0 flex flex-wrap xl:flex-nowrap bg-white"
 				>
 					<Tab
 						as="button"
 						v-for="(tab, main_k) in mains"
 						:key="main_k"
-						class="category-icon w-24 h-12 flex-basis-like-1/3 xl:flex-basis-auto flex-grow xl:flex-grow-0 xl:flex-shrink-0 order mx-0.5 border bg-gray-50 text-sm text-center cursor-pointer transition-color"
+						class="category-icon w-24 h-12 flex-basis-like-1/3 xl:flex-basis-auto grow xl:grow-0 xl:shrink-0 order mx-0.5 border bg-gray-50 text-sm text-center cursor-pointer transition-color"
 						:class="{ main_active: main_active === main_k }"
 						@click="main_active = main_k"
 					>
@@ -68,7 +68,7 @@
 								v-for="(tab, k) in tabs"
 								:key="k"
 								:aria-label="$t(`default.categorys.${tab}`)"
-								class="group relative category-icon h-12 flex-basis-like-1/3 xl:flex-basis-auto flex-grow xl:flex-shrink-0 order mx-0.5 border bg-gray-50 cursor-pointer transition-color"
+								class="group relative category-icon h-12 flex-basis-like-1/3 xl:flex-basis-auto grow xl:shrink-0 order mx-0.5 border bg-gray-50 cursor-pointer transition-color"
 								:class="{ active: active === k }"
 								@click="active = k"
 							>

src/views/Header.vue → src/views/AppHeader.vue

@@ -10,7 +10,7 @@
 <script>
 import LanguageSwitchButton from "../components/LanguageSwitchButton.vue";
 export default {
-	name: "Header",
+	name: "AppHeader",
 	components: { LanguageSwitchButton },
 };
 </script>

src/views/Home.vue

@@ -4,7 +4,7 @@
 	>
 		<!--Left side input panel-->
 		<div
-			class="w-2/4 p-p1 flex-basis-like-1/1 flex-grow md:flex-1 bg-bg1 text-left pt-p1 pl-p3 pr-p3 flex flex-col"
+			class="w-2/4 p-p1 flex-basis-like-1/1 grow md:flex-1 bg-bg1 text-left pt-p1 pl-p3 pr-p3 flex flex-col"
 		>
 			<p role="heading" aria-level="1" class="text-2xl md:text-3xl">
 				{{ $t("default.editContent") }}
@@ -26,7 +26,7 @@
 					{{ $t("default.export") }}
 				</button>
 				<button
-					class="transform hover:scale-110 transition-scale"
+					class="hover:scale-110 transition-scale"
 					@click="showUseTipModal = true"
 					:aria-label="$t('default.descript')"
 				>
@@ -62,7 +62,7 @@
 		</div>
 		<!--Right side output panel-->
 		<div
-			class="w-2/4 flex-basis-like-1/1 flex-grow md:flex-1 text-left p-p1 pt-p1 pl-p3 flex flex-col"
+			class="w-2/4 flex-basis-like-1/1 grow md:flex-1 text-left p-p1 pt-p1 pl-p3 flex flex-col"
 		>
 			<div class="flex md:mb-m3 w-100">
 				<p role="heading" aria-level="1" class="text-2xl md:text-3xl w-100">
@@ -466,22 +466,22 @@ const createView = (content = "") => {
 // .right-side-input-textarea {
 // 	vertical-align: middle;
 // }
-.right-side-input-textarea::v-deep {
-	> * {
+.right-side-input-textarea {
+	:deep(> *) {
 		// display: inline-block;
 		margin: var(--spacing-2-5) var(--spacing-5);
 		vertical-align: middle;
 	}
 
-	ol {
+	:deep(ol) {
 		list-style-type: decimal;
 	}
 
-	ul {
+	:deep(ul) {
 		list-style-type: disc;
 	}
 
-	table {
+	:deep(table) {
 		border: 1px solid black;
 		tr {
 			border: inherit;
@@ -493,7 +493,7 @@ const createView = (content = "") => {
 		}
 	}
 
-	svg {
+	:deep(svg) {
 		@apply inline-block;
 	}
 }

src/views/Layout.vue

@@ -1,16 +1,16 @@
 <template>
 	<div>
-		<Header />
+		<AppHeader />
 		<main class="container" id="main_id"><router-view /></main>
 	</div>
 </template>
 
 <script>
-import Header from "./Header.vue";
+import AppHeader from "./AppHeader.vue";
 export default {
 	name: "Layout",
 	components: {
-		Header,
+		AppHeader,
 	},
 };
 </script>

tailwind.config.js

@@ -1,6 +1,5 @@
 module.exports = {
-	purge: { content: ["./public/**/*.html", "./src/**/*.vue"] },
-	darkMode: false, // or 'media' or 'class'
+	content: ["./public/**/*.html", "./src/**/*.vue"],
 	theme: {
 		extend: {
 			spacing: {
@@ -32,9 +31,5 @@ module.exports = {
 			},
 		},
 	},
-	variants: {
-		display: ["group-hover"],
-		extend: {},
-	},
 	plugins: [],
 };

vue.config.js

@@ -4,6 +4,7 @@ module.exports = {
 		const svgRule = config.module.rule("svg");
 		svgRule.uses.clear();
 		svgRule
+			.set("type", "javascript/auto")
 			.use("svg-sprite-loader")
 			.loader("svg-sprite-loader")
 			.options({