ct-component-plus 0.0.43 → 0.0.44

package/packages/components/loading/src/CtLoading.vue

@@ -1,75 +1,75 @@
-<template>
-  <div class="ct-loading">
-    <div class="ct-loading__main" v-show="showLoad">
-      <component :is="componentMap[type]" :is-load="isLoad"></component>
-    </div>
-    <!-- 默认插槽，放置显示内容 -->
-    <div v-show="!showLoad" class="slot-content">
-      <slot> </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import beating from "./beating.vue";
-import spinner from "./spinner.vue";
-import CircleProgress from "./progress.vue";
-export default {
-  props: {
-    type: {
-      type: String,
-      default: "beating", //beating,spinner,progress
-    },
-    isLoad: {
-      type: Boolean,
-    },
-    delay: {
-      type: [String, Number],
-      default: 500,
-    },
-  },
-  components: {
-    beating,
-    spinner,
-    CircleProgress,
-  },
-  data() {
-    return {
-      showLoad: false,
-      componentMap: {
-        beating: "beating",
-        spinner: "spinner",
-        progress: "CircleProgress",
-      },
-    };
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-  watch: {
-    isLoad: {
-      handler(val) {
-        if (val) {
-          this.showLoad = val;
-        } else {
-          if (this.type == "progress") {
-            setTimeout(() => {
-              this.showLoad = val;
-            }, Number(this.delay));
-          } else {
-            this.showLoad = val;
-          }
-        }
-      },
-      immediate: true,
-    },
-  },
-};
-</script>
-<style scoped lang='less'>
-.ct-loading {
-  width: 100%;
-  min-height: 200px;
-  position: relative;
-}
+<template>
+  <div class="ct-loading">
+    <div class="ct-loading__main" v-show="showLoad">
+      <component :is="componentMap[type]" :is-load="isLoad"></component>
+    </div>
+    <!-- 默认插槽，放置显示内容 -->
+    <div v-show="!showLoad" class="slot-content">
+      <slot> </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import beating from "./beating.vue";
+import spinner from "./spinner.vue";
+import CircleProgress from "./progress.vue";
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "beating", //beating,spinner,progress
+    },
+    isLoad: {
+      type: Boolean,
+    },
+    delay: {
+      type: [String, Number],
+      default: 500,
+    },
+  },
+  components: {
+    beating,
+    spinner,
+    CircleProgress,
+  },
+  data() {
+    return {
+      showLoad: false,
+      componentMap: {
+        beating: "beating",
+        spinner: "spinner",
+        progress: "CircleProgress",
+      },
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+  watch: {
+    isLoad: {
+      handler(val) {
+        if (val) {
+          this.showLoad = val;
+        } else {
+          if (this.type == "progress") {
+            setTimeout(() => {
+              this.showLoad = val;
+            }, Number(this.delay));
+          } else {
+            this.showLoad = val;
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+};
+</script>
+<style scoped lang='less'>
+.ct-loading {
+  width: 100%;
+  min-height: 200px;
+  position: relative;
+}
 </style>

package/packages/components/loading/src/beating.vue

@@ -1,72 +1,72 @@
-<template>
-  <!-- 跳动加载特效 -->
-  <div class="ct-loading__beating">
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-    <div></div>
-  </div>
-</template>
-<script>
-export default {};
-</script>
-
-<style lang="less" scoped>
-.ct-loading__beating {
-  width: 40px;
-  height: 45px;
-  text-align: center;
-  font-size: 10px;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 10px;
-}
-
-.ct-loading__beating > div {
-  background-color: var(--ct-color-primary, #2e65fd);
-  opacity: 0.8;
-  height: 100%;
-  width: 4px;
-  border-radius: 10px;
-  display: inline-block;
-  margin: 0 2px;
-  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
-  animation: stretchdelay 1.2s infinite ease-in-out;
-
-  &:nth-child(2) {
-    -webkit-animation-delay: -1.1s;
-    animation-delay: -1.1s;
-  }
-
-  &:nth-child(3) {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-  }
-
-  &:nth-child(4) {
-    -webkit-animation-delay: -0.9s;
-    animation-delay: -0.9s;
-  }
-
-  &:nth-child(5) {
-    -webkit-animation-delay: -0.8s;
-    animation-delay: -0.8s;
-  }
-}
-@keyframes stretchdelay {
-  0%,
-  40%,
-  100% {
-    transform: scaleY(0.4);
-    -webkit-transform: scaleY(0.4);
-  }
-
-  20% {
-    transform: scaleY(1);
-    -webkit-transform: scaleY(1);
-  }
-}
+<template>
+  <!-- 跳动加载特效 -->
+  <div class="ct-loading__beating">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.ct-loading__beating {
+  width: 40px;
+  height: 45px;
+  text-align: center;
+  font-size: 10px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 10px;
+}
+
+.ct-loading__beating > div {
+  background-color: var(--ct-color-primary, #2e65fd);
+  opacity: 0.8;
+  height: 100%;
+  width: 4px;
+  border-radius: 10px;
+  display: inline-block;
+  margin: 0 2px;
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+
+  &:nth-child(2) {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+
+  &:nth-child(3) {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+  }
+
+  &:nth-child(4) {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+  }
+
+  &:nth-child(5) {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+}
+@keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+
+  20% {
+    transform: scaleY(1);
+    -webkit-transform: scaleY(1);
+  }
+}
 </style>

package/packages/components/loading/src/progress.vue

@@ -1,121 +1,121 @@
-<template>
-  <svg class="ct-loading__progress" width="100" height="100">
-    <circle
-      cx="50"
-      cy="50"
-      r="45"
-      stroke="#F5F7FA"
-      stroke-width="6"
-      fill="none"
-    ></circle>
-    <circle
-      cx="50"
-      cy="50"
-      r="45"
-      :stroke="color"
-      class="circle"
-      id="ct-loading__progress"
-    ></circle>
-    <text x="50" y="55" fill="#141617" text-anchor="middle">
-      <tspan class="text">{{ currentPercentage }}</tspan>
-      <tspan class="percent">%</tspan>
-    </text>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "CircleProgress",
-  props: {
-    color: {
-      default: "#2E65FD",
-    },
-    isLoad: {
-      type: Boolean,
-    },
-  },
-  data() {
-    return {
-      currentPercentage: 0,
-      progressLen: 282.6,
-      circleDom: null,
-      interval: null,
-    };
-  },
-  created() {},
-  mounted() {
-    this.circleDom = document.querySelector("#ct-loading__progress");
-  },
-  methods: {
-    setPercent(dom, num) {
-      if (num > 100) return;
-      dom.style["stroke-dashoffset"] =
-        this.progressLen - (this.progressLen / 100) * num;
-    },
-  },
-  watch: {
-    isLoad: {
-      handler(val) {
-        if (val) {
-          this.currentPercentage = 0;
-          this.interval = setInterval(() => {
-            if (this.currentPercentage <= 60) {
-              this.currentPercentage += Math.floor(Math.random() * 5 + 5);
-            } else {
-              this.currentPercentage += Math.floor(Math.random() * 5);
-            }
-            if (this.currentPercentage >= 99) this.currentPercentage = 99;
-          }, 250);
-        } else {
-          this.currentPercentage = 100;
-        }
-      },
-      immediate: true,
-    },
-    currentPercentage(val) {
-      this.setPercent(this.circleDom, val);
-      if (val == 100) {
-        clearInterval(this.interval);
-      }
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.interval);
-  },
-};
-</script>
-<style scoped lang='less'>
-.ct-loading__progress {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  .circle {
-    fill: none;
-    stroke-width: 6;
-    stroke-dasharray: 282.6;
-    stroke-dashoffset: 282.6;
-    //animation: circle 3s infinite;
-    stroke-linecap: round;
-    transform: rotate(-90deg);
-    transform-origin: center;
-    transform-box: fill-box;
-    transition: all 0.5s;
-  }
-  @keyframes circle {
-    100% {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  .text,
-  .percent {
-    font-weight: 500;
-  }
-  text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
+<template>
+  <svg class="ct-loading__progress" width="100" height="100">
+    <circle
+      cx="50"
+      cy="50"
+      r="45"
+      stroke="#F5F7FA"
+      stroke-width="6"
+      fill="none"
+    ></circle>
+    <circle
+      cx="50"
+      cy="50"
+      r="45"
+      :stroke="color"
+      class="circle"
+      id="ct-loading__progress"
+    ></circle>
+    <text x="50" y="55" fill="#141617" text-anchor="middle">
+      <tspan class="text">{{ currentPercentage }}</tspan>
+      <tspan class="percent">%</tspan>
+    </text>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CircleProgress",
+  props: {
+    color: {
+      default: "#2E65FD",
+    },
+    isLoad: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      currentPercentage: 0,
+      progressLen: 282.6,
+      circleDom: null,
+      interval: null,
+    };
+  },
+  created() {},
+  mounted() {
+    this.circleDom = document.querySelector("#ct-loading__progress");
+  },
+  methods: {
+    setPercent(dom, num) {
+      if (num > 100) return;
+      dom.style["stroke-dashoffset"] =
+        this.progressLen - (this.progressLen / 100) * num;
+    },
+  },
+  watch: {
+    isLoad: {
+      handler(val) {
+        if (val) {
+          this.currentPercentage = 0;
+          this.interval = setInterval(() => {
+            if (this.currentPercentage <= 60) {
+              this.currentPercentage += Math.floor(Math.random() * 5 + 5);
+            } else {
+              this.currentPercentage += Math.floor(Math.random() * 5);
+            }
+            if (this.currentPercentage >= 99) this.currentPercentage = 99;
+          }, 250);
+        } else {
+          this.currentPercentage = 100;
+        }
+      },
+      immediate: true,
+    },
+    currentPercentage(val) {
+      this.setPercent(this.circleDom, val);
+      if (val == 100) {
+        clearInterval(this.interval);
+      }
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.interval);
+  },
+};
+</script>
+<style scoped lang='less'>
+.ct-loading__progress {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  .circle {
+    fill: none;
+    stroke-width: 6;
+    stroke-dasharray: 282.6;
+    stroke-dashoffset: 282.6;
+    //animation: circle 3s infinite;
+    stroke-linecap: round;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    transform-box: fill-box;
+    transition: all 0.5s;
+  }
+  @keyframes circle {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .text,
+  .percent {
+    font-weight: 500;
+  }
+  text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
 </style>

package/packages/components/loading/src/spinner.vue

@@ -1,39 +1,39 @@
-<template>
-  <div class="ct-loading__spinner">
-    <img src="../../../assets/img/icon_load_circle.png" alt="" />
-    <slot name="text"></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {},
-};
-</script>
-<style scoped lang='less'>
-.ct-loading__spinner {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-
-  img {
-    width: 40px;
-    transform-origin: center;
-    animation: rotate 2s infinite linear;
-  }
-  @keyframes rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}
+<template>
+  <div class="ct-loading__spinner">
+    <img src="../../../assets/img/icon_load_circle.png" alt="" />
+    <slot name="text"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+<style scoped lang='less'>
+.ct-loading__spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  img {
+    width: 40px;
+    transform-origin: center;
+    animation: rotate 2s infinite linear;
+  }
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
 </style>

package/packages/components/menu/index.js

@@ -1,8 +1,8 @@
-import CtMenu from './src/menu.vue';
-
-/* istanbul ignore next */
-CtMenu.install = function (Vue) {
-  Vue.component('CtMenu', CtMenu);
-};
-
+import CtMenu from './src/menu.vue';
+
+/* istanbul ignore next */
+CtMenu.install = function (Vue) {
+  Vue.component('CtMenu', CtMenu);
+};
+
 export default CtMenu;