Merge pull request #27 from nyancodeid/feat/upgrade-vue

feat/upgrade: upgrade to Vue v3.2, Vite v2.5, some Refactor

package.json

@@ -16,17 +16,17 @@
     "comlink": "^4.3.1",
     "matercolors": "^2.2.10",
     "notyf": "^3.10.0",
-    "pinia": "^2.0.0-beta.3",
-    "vue": "^3.0.5",
+    "pinia": "^2.0.0-rc.6",
+    "vue": "^3.2.4",
     "vue-i18n": "^9.1.7",
     "vue-router": "^4.0.8"
   },
   "devDependencies": {
     "@intlify/vite-plugin-vue-i18n": "^2.4.0",
-    "@vitejs/plugin-vue": "^1.2.3",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vitejs/plugin-vue": "^1.4.0",
+    "@vue/compiler-sfc": "^3.2.4",
     "sass": "^1.34.1",
-    "vite": "^2.3.7",
+    "vite": "^2.5.0",
     "vite-plugin-pwa": "^0.8.1"
   }
 }

src/components/ColorPicker/ColorResult.vue

@@ -78,23 +78,27 @@ export default {
     }
   }
   .video-color--result-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: start;
+    display: grid;
+    grid-template-columns: auto auto auto auto auto;
+    grid-auto-columns: 60px;
+    column-gap: 16px;
+    row-gap: 16px;
+
+    padding: 8px 0;
+    justify-items: center;
 
     .video-color--result-empty {
+      grid-column: 2 / 5;
+
       text-align: center;
       width: 100%;
       border-radius: 0.5em;
       padding: 16px;
-      margin: 8px 8px 16px;
       color: var(--darker-color);
       font-size: 14px;
     }
 
     .video-color--result-item {
-      margin: 0 8px 12px;
-      width: calc((100% / 6) - 3px);
       cursor: pointer;
 
       .result-item--color {
@@ -120,11 +124,17 @@ export default {
     justify-content: center;
     width: calc(100% - 24px);
 
-    .video-color--result-wrapper .video-color--result-item {
-      width: calc((100% / 5) - 1px);
+    .video-color--result-wrapper {
+      grid-template-columns: auto auto auto auto;
 
-      .result-item--text {
-        font-size: 12px;
+      .video-color--result-empty {
+        grid-column: 2 / 4;
+      }
+
+      .video-color--result-item {
+        .result-item--text {
+          font-size: 12px;
+        }
       }
     }
   }

src/services/colors.js

@@ -151,11 +151,15 @@ export const calculateColor = async (type, value) => {
       value,
     });
 
-  document.body.style.cssText = cssVariable
-    .filter(([name]) => name.indexOf("gradient") === -1)
+  const lowPriorityCss = ["--dark-color-value", "--darken-color", "--modal-color"];
+  const withoutGradientCss = cssVariable
+    .filter(([name]) => (name.indexOf("gradient") === -1));
+
+  document.body.style.cssText = withoutGradientCss
+    .filter(([name]) => !lowPriorityCss.includes(name))
     .map(([ name, value ]) => `${name}: ${value};`)
     .join("");
-
+    
   if (contrast.result === "black" && !document.body.classList.contains("dark")) {
     document.body.classList.add("dark");
   } else if (contrast.result === "white" && document.body.classList.contains("dark")) {
@@ -167,6 +171,14 @@ export const calculateColor = async (type, value) => {
     contrast,
     gradients,
     variable,
+    nextTick: () => {
+      const variables = withoutGradientCss
+        .filter(([name]) => lowPriorityCss.includes(name));
+
+      variables.forEach(function ([ name, value ]) {
+        document.body.style.setProperty(name, value);
+      });
+    }
   };
 };
 
@@ -195,10 +207,10 @@ export const generateCssColor = async ({ type, value }) => {
     ["primary-color", rgb.toString(colors.rgb)],
     ["secondary-color", secondaryColor],
     ["text-color", textColor],
+    ["contrast-color", contrast.result],
     ["dark-color-value", darkColorValue],
     ["darken-color", gradients[1]],
     ["modal-color", gradients[8]],
-    ["contrast-color", contrast.result],
   ];
 
   cssVariable = cssVariable

src/views/ColorConvert.vue

@@ -176,7 +176,7 @@ export default {
       this.gradients = gradients;
     },
     async onColorChanged([id, value]) {
-      const { colors, contrast, gradients, variable } = await calculateColor(
+      const { colors, contrast, gradients, variable, nextTick } = await calculateColor(
         id,
         value
       );
@@ -199,6 +199,8 @@ export default {
           value: this.activeColor.value,
           colors,
         });
+
+        nextTick();
       });
     },
     onColorTypeChanged(id) {

src/views/ColorPicker.vue

@@ -1,17 +1,20 @@
 <template>
   <div id="content" class="color-picker--page">
     <VideoPicker />
-    <ColorResult />
+    <Lazy>
+      <ColorResult />
+    </Lazy>
   </div>
 </template>
 
 <script>
+import Lazy from "@src/components/Lazy.vue";
 import ColorResult from "@src/components/ColorPicker/ColorResult.vue";
 import VideoPicker from "@src/components/ColorPicker/VideoPicker.vue";
 
 export default {
   name: "ColorPicker",
-  components: { VideoPicker, ColorResult },
+  components: { VideoPicker, ColorResult, Lazy },
 };
 </script>
 

vite.config.js

@@ -2,8 +2,8 @@ import { defineConfig } from "vite";
 import { resolve } from "path";
 import { VitePWA } from "vite-plugin-pwa";
 
-import vue from "@vitejs/plugin-vue";
-import vueI18n from "@intlify/vite-plugin-vue-i18n";
+import Vue from "@vitejs/plugin-vue";
+import VueI18n from "@intlify/vite-plugin-vue-i18n";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,8 +14,8 @@ export default defineConfig({
     },
   },
   plugins: [
-    vue(),
-    vueI18n({
+    Vue(),
+    VueI18n({
       include: resolve(__dirname, "./src/locales/*.json"),
       compositionOnly: true
     }),