qj-common 4.3.0 → 4.3.2

package/src/components/SvgIcon/index.vue

@@ -1,42 +1,42 @@
-<template>
-  <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName"></use>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'svg-icon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String
-    }
-  },
-  computed: {
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'svg-icon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

package/src/components/ThemePicker/index.vue

@@ -1,243 +1,243 @@
-<template>
-  <div class="theme-box">
-    <el-color-picker
-      v-if="themeState"
-      v-model="theme"
-      class="theme-picker"
-      popper-class="theme-picker-dropdown"
-    />
-    <slot v-if="themeState"/>
-  </div>
-</template>
-<script>
-const version = require("element-ui/package.json").version; // element-ui version from node_modules
-// console.log(version, "version");
-const ORIGINAL_THEME = "#409EFF"; // default color
-
-export default {
-  props: {
-    theme: {
-      type: Object,
-      default: ORIGINAL_THEME
-    },
-    themeState: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      chalk: "" // content of theme-chalk css
-      // theme: ORIGINAL_THEME
-      // ORIGINAL_THEME: this.theme
-    };
-  },
-  mounted() {
-    if (this.$route.query.theme) {
-      this.themeState = true;
-    }
-    // this.getTheme(this.theme, ORIGINAL_THEME);
-  },
-  watch: {
-    theme(val, oldVal) {
-      this.getTheme(this.theme, ORIGINAL_THEME);
-      // if (typeof val !== "string") return;
-      // const themeCluster = this.getThemeCluster(val.replace("#", ""));
-      // const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
-      // // console.log(themeCluster, originalCluster);
-      // const getHandler = (variable, id) => {
-      //   return () => {
-      //     const originalCluster = this.getThemeCluster(
-      //       ORIGINAL_THEME.replace("#", "")
-      //     );
-      //     const newStyle = this.updateStyle(
-      //       this[variable],
-      //       originalCluster,
-      //       themeCluster
-      //     );
-      //     let styleTag = document.getElementById(id);
-      //     if (!styleTag) {
-      //       styleTag = document.createElement("style");
-      //       styleTag.setAttribute("id", id);
-      //       document.head.appendChild(styleTag);
-      //     }
-      //     styleTag.innerText = newStyle;
-      //   };
-      // };
-      // const chalkHandler = getHandler("chalk", "chalk-style");
-      // if (!this.chalk) {
-      //   const url = `https://qjstatic.oss-cn-shanghai.aliyuncs.com/element-ui@2.0.10.css`;
-      //   // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
-      //   this.getCSSString(url, chalkHandler, "chalk");
-      // } else {
-      //   chalkHandler();
-      // }
-      // const styles = [].slice
-      //   .call(document.querySelectorAll("style"))
-      //   .filter(style => {
-      //     const text = style.innerText;
-      //     return (
-      //       new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
-      //     );
-      //   });
-      // styles.forEach(style => {
-      //   const { innerText } = style;
-      //   if (typeof innerText !== "string") return;
-      //   style.innerText = this.updateStyle(
-      //     innerText,
-      //     originalCluster,
-      //     themeCluster
-      //   );
-      // });
-      console.log("换肤成功");
-      // this.$message({
-      //   message: "换肤成功",
-      //   type: "success"
-      // });
-    }
-  },
-
-  methods: {
-    getTheme(val, oldVal) {
-      if (typeof val !== "string") return;
-      const themeCluster = this.getThemeCluster(val.replace("#", ""));
-      const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
-      // console.log(themeCluster, originalCluster);
-      const getHandler = (variable, id) => {
-        return () => {
-          const originalCluster = this.getThemeCluster(
-            ORIGINAL_THEME.replace("#", "")
-          );
-          const newStyle = this.updateStyle(
-            this[variable],
-            originalCluster,
-            themeCluster
-          );
-
-          let styleTag = document.getElementById(id);
-          if (!styleTag) {
-            styleTag = document.createElement("style");
-            styleTag.setAttribute("id", id);
-            document.head.appendChild(styleTag);
-          }
-          styleTag.innerText = newStyle;
-        };
-      };
-
-      const chalkHandler = getHandler("chalk", "chalk-style");
-
-      if (!this.chalk) {
-        const url = `https://qjstatic.oss-cn-shanghai.aliyuncs.com/element-ui@2.0.10.css`;
-        // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
-        this.getCSSString(url, chalkHandler, "chalk");
-      } else {
-        chalkHandler();
-      }
-      const styles = [].slice
-        .call(document.querySelectorAll("style"))
-        .filter(style => {
-          const text = style.innerText;
-          return (
-            new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
-          );
-        });
-      // console.log(styles, "styles");
-      styles.forEach(style => {
-        const { innerText } = style;
-        if (typeof innerText !== "string") return;
-        style.innerText = this.updateStyle(
-          innerText,
-          originalCluster,
-          themeCluster
-        );
-      });
-      // console.log("换肤成功");
-      // this.$message({
-      //   message: "换肤成功",
-      //   type: "success"
-      // });
-    },
-    updateStyle(style, oldCluster, newCluster) {
-      let newStyle = style;
-      oldCluster.forEach((color, index) => {
-        newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
-      });
-      return newStyle;
-    },
-
-    getCSSString(url, callback, variable) {
-      const xhr = new XMLHttpRequest();
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
-          callback();
-        }
-      };
-      xhr.open("GET", url);
-      xhr.send();
-    },
-
-    getThemeCluster(theme) {
-      const tintColor = (color, tint) => {
-        let red = parseInt(color.slice(0, 2), 16);
-        let green = parseInt(color.slice(2, 4), 16);
-        let blue = parseInt(color.slice(4, 6), 16);
-
-        if (tint === 0) {
-          // when primary color is in its rgb space
-          return [red, green, blue].join(",");
-        } else {
-          red += Math.round(tint * (255 - red));
-          green += Math.round(tint * (255 - green));
-          blue += Math.round(tint * (255 - blue));
-
-          red = red.toString(16);
-          green = green.toString(16);
-          blue = blue.toString(16);
-
-          return `#${red}${green}${blue}`;
-        }
-      };
-
-      const shadeColor = (color, shade) => {
-        let red = parseInt(color.slice(0, 2), 16);
-        let green = parseInt(color.slice(2, 4), 16);
-        let blue = parseInt(color.slice(4, 6), 16);
-
-        red = Math.round((1 - shade) * red);
-        green = Math.round((1 - shade) * green);
-        blue = Math.round((1 - shade) * blue);
-
-        red = red.toString(16);
-        green = green.toString(16);
-        blue = blue.toString(16);
-
-        return `#${red}${green}${blue}`;
-      };
-
-      const clusters = [theme];
-      for (let i = 0; i <= 9; i++) {
-        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
-      }
-      clusters.push(shadeColor(theme, 0.1));
-      return clusters;
-    }
-  }
-};
-</script>
-<style rel="stylesheet/scss" lang="scss">
-@import "~#/styles/index.scss";
-.theme-picker .el-color-picker__trigger {
-  vertical-align: middle;
-}
-
-.theme-picker-dropdown .el-color-dropdown__link-btn {
-  display: none;
-}
-.theme-box {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  margin-left: 700px;
-}
-</style>
+<template>
+  <div class="theme-box">
+    <el-color-picker
+      v-if="themeState"
+      v-model="theme"
+      class="theme-picker"
+      popper-class="theme-picker-dropdown"
+    />
+    <slot v-if="themeState"/>
+  </div>
+</template>
+<script>
+const version = require("element-ui/package.json").version; // element-ui version from node_modules
+// console.log(version, "version");
+const ORIGINAL_THEME = "#409EFF"; // default color
+
+export default {
+  props: {
+    theme: {
+      type: Object,
+      default: ORIGINAL_THEME
+    },
+    themeState: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      chalk: "" // content of theme-chalk css
+      // theme: ORIGINAL_THEME
+      // ORIGINAL_THEME: this.theme
+    };
+  },
+  mounted() {
+    if (this.$route.query.theme) {
+      this.themeState = true;
+    }
+    // this.getTheme(this.theme, ORIGINAL_THEME);
+  },
+  watch: {
+    theme(val, oldVal) {
+      this.getTheme(this.theme, ORIGINAL_THEME);
+      // if (typeof val !== "string") return;
+      // const themeCluster = this.getThemeCluster(val.replace("#", ""));
+      // const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
+      // // console.log(themeCluster, originalCluster);
+      // const getHandler = (variable, id) => {
+      //   return () => {
+      //     const originalCluster = this.getThemeCluster(
+      //       ORIGINAL_THEME.replace("#", "")
+      //     );
+      //     const newStyle = this.updateStyle(
+      //       this[variable],
+      //       originalCluster,
+      //       themeCluster
+      //     );
+      //     let styleTag = document.getElementById(id);
+      //     if (!styleTag) {
+      //       styleTag = document.createElement("style");
+      //       styleTag.setAttribute("id", id);
+      //       document.head.appendChild(styleTag);
+      //     }
+      //     styleTag.innerText = newStyle;
+      //   };
+      // };
+      // const chalkHandler = getHandler("chalk", "chalk-style");
+      // if (!this.chalk) {
+      //   const url = `https://qjstatic.oss-cn-shanghai.aliyuncs.com/element-ui@2.0.10.css`;
+      //   // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
+      //   this.getCSSString(url, chalkHandler, "chalk");
+      // } else {
+      //   chalkHandler();
+      // }
+      // const styles = [].slice
+      //   .call(document.querySelectorAll("style"))
+      //   .filter(style => {
+      //     const text = style.innerText;
+      //     return (
+      //       new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
+      //     );
+      //   });
+      // styles.forEach(style => {
+      //   const { innerText } = style;
+      //   if (typeof innerText !== "string") return;
+      //   style.innerText = this.updateStyle(
+      //     innerText,
+      //     originalCluster,
+      //     themeCluster
+      //   );
+      // });
+      console.log("换肤成功");
+      // this.$message({
+      //   message: "换肤成功",
+      //   type: "success"
+      // });
+    }
+  },
+
+  methods: {
+    getTheme(val, oldVal) {
+      if (typeof val !== "string") return;
+      const themeCluster = this.getThemeCluster(val.replace("#", ""));
+      const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));
+      // console.log(themeCluster, originalCluster);
+      const getHandler = (variable, id) => {
+        return () => {
+          const originalCluster = this.getThemeCluster(
+            ORIGINAL_THEME.replace("#", "")
+          );
+          const newStyle = this.updateStyle(
+            this[variable],
+            originalCluster,
+            themeCluster
+          );
+
+          let styleTag = document.getElementById(id);
+          if (!styleTag) {
+            styleTag = document.createElement("style");
+            styleTag.setAttribute("id", id);
+            document.head.appendChild(styleTag);
+          }
+          styleTag.innerText = newStyle;
+        };
+      };
+
+      const chalkHandler = getHandler("chalk", "chalk-style");
+
+      if (!this.chalk) {
+        const url = `https://qjstatic.oss-cn-shanghai.aliyuncs.com/element-ui@2.0.10.css`;
+        // const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
+        this.getCSSString(url, chalkHandler, "chalk");
+      } else {
+        chalkHandler();
+      }
+      const styles = [].slice
+        .call(document.querySelectorAll("style"))
+        .filter(style => {
+          const text = style.innerText;
+          return (
+            new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text)
+          );
+        });
+      // console.log(styles, "styles");
+      styles.forEach(style => {
+        const { innerText } = style;
+        if (typeof innerText !== "string") return;
+        style.innerText = this.updateStyle(
+          innerText,
+          originalCluster,
+          themeCluster
+        );
+      });
+      // console.log("换肤成功");
+      // this.$message({
+      //   message: "换肤成功",
+      //   type: "success"
+      // });
+    },
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style;
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);
+      });
+      return newStyle;
+    },
+
+    getCSSString(url, callback, variable) {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, "");
+          callback();
+        }
+      };
+      xhr.open("GET", url);
+      xhr.send();
+    },
+
+    getThemeCluster(theme) {
+      const tintColor = (color, tint) => {
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
+
+        if (tint === 0) {
+          // when primary color is in its rgb space
+          return [red, green, blue].join(",");
+        } else {
+          red += Math.round(tint * (255 - red));
+          green += Math.round(tint * (255 - green));
+          blue += Math.round(tint * (255 - blue));
+
+          red = red.toString(16);
+          green = green.toString(16);
+          blue = blue.toString(16);
+
+          return `#${red}${green}${blue}`;
+        }
+      };
+
+      const shadeColor = (color, shade) => {
+        let red = parseInt(color.slice(0, 2), 16);
+        let green = parseInt(color.slice(2, 4), 16);
+        let blue = parseInt(color.slice(4, 6), 16);
+
+        red = Math.round((1 - shade) * red);
+        green = Math.round((1 - shade) * green);
+        blue = Math.round((1 - shade) * blue);
+
+        red = red.toString(16);
+        green = green.toString(16);
+        blue = blue.toString(16);
+
+        return `#${red}${green}${blue}`;
+      };
+
+      const clusters = [theme];
+      for (let i = 0; i <= 9; i++) {
+        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
+      }
+      clusters.push(shadeColor(theme, 0.1));
+      return clusters;
+    }
+  }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss">
+@import "~#/styles/index.scss";
+.theme-picker .el-color-picker__trigger {
+  vertical-align: middle;
+}
+
+.theme-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
+.theme-box {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: 700px;
+}
+</style>