ylyx-cli 1.0.16 → 1.1.1

package/templates/vue-app/files/src/components/SvgIcon/index.vue

@@ -1,66 +1,66 @@
-<template>
-  <div
-    v-if="isExternal"
-    :style="styleExternalIcon"
-    class="svg-external-icon svg-icon"
-    v-on="$listeners" />
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :href="iconName" />
-  </svg>
-</template>
-
-<script>
-// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
-import { isExternal } from '@/utils/validate';
-
-export default {
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true,
-    },
-    className: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    isExternal() {
-      return isExternal(this.iconClass);
-    },
-    iconName() {
-      return `#icon-${this.iconClass}`;
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className;
-      } else {
-        return 'svg-icon';
-      }
-    },
-    styleExternalIcon() {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
-      };
-    },
-  },
-};
-</script>
-
-<style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-.svg-external-icon {
-  background-color: currentColor;
-  mask-size: cover !important;
-  display: inline-block;
-}
-</style>
+<template>
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate';
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true,
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass);
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`;
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className;
+      } else {
+        return 'svg-icon';
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+  display: inline-block;
+}
+</style>

package/templates/vue-app/files/src/components/ThemePicker/index.vue

@@ -1,177 +1,177 @@
-<template>
-  <el-color-picker
-    v-model="theme"
-    :predefine="[
-      '#409EFF',
-      '#1890ff',
-      '#304156',
-      '#212121',
-      '#11a983',
-      '#13c2c2',
-      '#6959CD',
-      '#f5222d',
-    ]"
-    class="theme-picker"
-    popper-class="theme-picker-dropdown" />
-</template>
-
-<script>
-const version = require('element-ui/package.json').version; // element-ui version from node_modules
-const ORIGINAL_THEME = '#409EFF'; // default color
-import Cookies from 'js-cookie';
-export default {
-  data() {
-    return {
-      chalk: '', // content of theme-chalk css
-      theme: '',
-    };
-  },
-  computed: {
-    defaultTheme() {
-      return this.$store.state.settings.theme;
-    },
-  },
-  watch: {
-    defaultTheme: {
-      handler: function (val, oldVal) {
-        this.theme = val;
-      },
-      immediate: true,
-    },
-    async theme(val) {
-      Cookies.set('theme', val, { expires: 365 });
-      const oldVal = this.chalk
-        ? this.theme
-        : Cookies.get('theme')
-          ? Cookies.get('theme')
-          : ORIGINAL_THEME;
-      if (typeof val !== 'string') return;
-      const themeCluster = this.getThemeCluster(val.replace('#', ''));
-      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
-
-      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;
-        };
-      };
-
-      if (!this.chalk) {
-        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
-        await this.getCSSString(url, 'chalk');
-      }
-
-      const chalkHandler = getHandler('chalk', 'chalk-style');
-
-      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);
-      });
-
-      this.$emit('change', val);
-    },
-  },
-
-  methods: {
-    updateStyle(style, oldCluster, newCluster) {
-      let newStyle = style;
-      oldCluster.forEach((color, index) => {
-        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
-      });
-      return newStyle;
-    },
-
-    getCSSString(url, variable) {
-      return new Promise(resolve => {
-        const xhr = new XMLHttpRequest();
-        xhr.onreadystatechange = () => {
-          if (xhr.readyState === 4 && xhr.status === 200) {
-            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '');
-            resolve();
-          }
-        };
-        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>
-.theme-message,
-.theme-picker-dropdown {
-  z-index: 99999 !important;
-}
-
-.theme-picker .el-color-picker__trigger {
-  height: 26px !important;
-  width: 26px !important;
-  padding: 2px;
-}
-
-.theme-picker-dropdown .el-color-dropdown__link-btn {
-  display: none;
-}
-</style>
+<template>
+  <el-color-picker
+    v-model="theme"
+    :predefine="[
+      '#409EFF',
+      '#1890ff',
+      '#304156',
+      '#212121',
+      '#11a983',
+      '#13c2c2',
+      '#6959CD',
+      '#f5222d',
+    ]"
+    class="theme-picker"
+    popper-class="theme-picker-dropdown" />
+</template>
+
+<script>
+const version = require('element-ui/package.json').version; // element-ui version from node_modules
+const ORIGINAL_THEME = '#409EFF'; // default color
+import Cookies from 'js-cookie';
+export default {
+  data() {
+    return {
+      chalk: '', // content of theme-chalk css
+      theme: '',
+    };
+  },
+  computed: {
+    defaultTheme() {
+      return this.$store.state.settings.theme;
+    },
+  },
+  watch: {
+    defaultTheme: {
+      handler: function (val, oldVal) {
+        this.theme = val;
+      },
+      immediate: true,
+    },
+    async theme(val) {
+      Cookies.set('theme', val, { expires: 365 });
+      const oldVal = this.chalk
+        ? this.theme
+        : Cookies.get('theme')
+          ? Cookies.get('theme')
+          : ORIGINAL_THEME;
+      if (typeof val !== 'string') return;
+      const themeCluster = this.getThemeCluster(val.replace('#', ''));
+      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
+
+      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;
+        };
+      };
+
+      if (!this.chalk) {
+        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;
+        await this.getCSSString(url, 'chalk');
+      }
+
+      const chalkHandler = getHandler('chalk', 'chalk-style');
+
+      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);
+      });
+
+      this.$emit('change', val);
+    },
+  },
+
+  methods: {
+    updateStyle(style, oldCluster, newCluster) {
+      let newStyle = style;
+      oldCluster.forEach((color, index) => {
+        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
+      });
+      return newStyle;
+    },
+
+    getCSSString(url, variable) {
+      return new Promise(resolve => {
+        const xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '');
+            resolve();
+          }
+        };
+        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>
+.theme-message,
+.theme-picker-dropdown {
+  z-index: 99999 !important;
+}
+
+.theme-picker .el-color-picker__trigger {
+  height: 26px !important;
+  width: 26px !important;
+  padding: 2px;
+}
+
+.theme-picker-dropdown .el-color-dropdown__link-btn {
+  display: none;
+}
+</style>