openatc-components 0.0.1 → 0.0.2

package/src/kisscomps/components/DashBoard/dashboard.vue

@@ -1,57 +1,57 @@
-<template>
-  <div class="wrap" ref="body">
-    <canvas :width="cw" :height="ch" :id="id" style="margin: auto; width: 100%;"></canvas>
-  </div>
-</template>
-
-<script>
-import DashBoard from './dashboard.js'
-export default {
-  name: 'DashBoard',
-  data () {
-    return {
-      dashboard: Object,
-      cw: 510,
-      ch: 510
-    }
-  },
-  props: {
-    option: {
-      type: Object,
-      default: function () {
-        return {}
-      }
-    },
-    curPercent: {
-      type: Number,
-      default: 50
-    },
-    id: {
-      type: String,
-      default: 'dashboard'
-    }
-  },
-  watch: {
-    curPercent (newVal, oldVal) {
-      this.dashboard.updatedPercent(this.curPercent)
-    }
-  },
-  created () {
-  },
-  mounted () {
-    // let screenWidth = window.screen.width
-    // let screenHeight = window.screen.height
-    // console.log(this.$refs.body.offsetHeight)
-    // console.log(this.$refs.body.offsetWeight)
-    // this.cw = parseInt(this.$refs.body.style.weight)
-    // // console.log(this.$refs.body)
-    // this.ch = parseInt(this.$refs.body.style.height)
-    this.dashboard = new DashBoard(this.id, this.option)
-    this.dashboard.render()
-    // document.getElementById(this.id).width = 300
-    // document.getElementById(this.id).height = 300
-  }
-}
-</script>
-<style scoped>
-</style>
+<template>
+  <div class="wrap" ref="body">
+    <canvas :width="cw" :height="ch" :id="id" style="margin: auto; width: 100%;"></canvas>
+  </div>
+</template>
+
+<script>
+import DashBoard from './dashboard.js'
+export default {
+  name: 'DashBoard',
+  data () {
+    return {
+      dashboard: Object,
+      cw: 510,
+      ch: 510
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    curPercent: {
+      type: Number,
+      default: 50
+    },
+    id: {
+      type: String,
+      default: 'dashboard'
+    }
+  },
+  watch: {
+    curPercent (newVal, oldVal) {
+      this.dashboard.updatedPercent(this.curPercent)
+    }
+  },
+  created () {
+  },
+  mounted () {
+    // let screenWidth = window.screen.width
+    // let screenHeight = window.screen.height
+    // console.log(this.$refs.body.offsetHeight)
+    // console.log(this.$refs.body.offsetWeight)
+    // this.cw = parseInt(this.$refs.body.style.weight)
+    // // console.log(this.$refs.body)
+    // this.ch = parseInt(this.$refs.body.style.height)
+    this.dashboard = new DashBoard(this.id, this.option)
+    this.dashboard.render()
+    // document.getElementById(this.id).width = 300
+    // document.getElementById(this.id).height = 300
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/kisscomps/components/DashBoard/index.js

@@ -1,2 +1,2 @@
-import DashBoard from './dashboard.vue'
-export default DashBoard
+import DashBoard from './dashboard.vue'
+export default DashBoard

package/src/kisscomps/components/KissCircleMenu/CircleMenu.vue

@@ -1,113 +1,113 @@
-<template>
-  <div id='CircleMenu'>
-    <div :class="type" :animate='animate'>
-      <div class="oy-mask-black" v-show="MaskToggle" v-if="mask==='black'" @click="toggle"></div>
-      <div class="oy-mask-white" v-show="MaskToggle" v-if="mask==='white'" @click="toggle"></div>
-      <div class="oy-menu-group" :class="{'open':open}">
-        <button class="oy-menu-btn btn-toggle"  :class="{'oy-menu-btn-Circle':circle}" :style='{}' @click="toggle">
-          <i class="icon-bars" v-if="btn"></i>
-          <slot name="item_btn"></slot>
-        </button>
-        <div class="btn-list">
-          <div  class="oy-menu-item oy-menu-item_1 yellow" :class="AnimateClass" :style='{background:Item1Color}' v-show="number > 1 && number < 5">
-            <slot name="item_1"></slot>
-          </div>
-          <div  class="oy-menu-item oy-menu-item_2 purple" :class="AnimateClass" :style='{background:Item2Color}' v-show="number > 1 && number < 5">
-            <slot name="item_2"></slot>
-          </div>
-          <div  class="oy-menu-item oy-menu-item_3 green" :class="AnimateClass" :style='{background:Item3Color}' v-show="isShow">
-            <slot name="item_3"></slot>
-          </div>
-          <div  class="oy-menu-item oy-menu-item_4 blue" :class="AnimateClass" :style='{background:Item4Color}' v-show="number === 4">
-            <slot name="item_4"></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { isColors } from './utils/colorRE.js'
-export default {
-  name: 'CirleMenu',
-  props: {
-    type: {
-      type: String,
-      required: true
-    },
-    number: {
-      type: Number,
-      required: true,
-      validator: function (value) {
-        return value > 1 && value < 5
-      }
-    },
-    animate: String,
-    mask: String,
-    circle: Boolean,
-    btn: Boolean,
-    colors: Array
-  },
-  data () {
-    return {
-      open: false,
-      toggleAnimate: false,
-      MaskToggle: false,
-      BtnColor: '',
-      Item1Color: '',
-      Item2Color: '',
-      Item3Color: '',
-      Item4Color: ''
-    }
-  },
-  methods: {
-    toggle () {
-      this.open = !this.open
-      this.toggleAnimate = !this.toggleAnimate
-      this.MaskToggle = !this.MaskToggle
-    }
-  },
-  computed: {
-    AnimateClass () {
-      return this.toggleAnimate ? this.animate : ''
-    },
-    isShow () {
-      if (this.number === 3) {
-        if (this.type === 'middle' || this.type === 'middle-around') {
-          console.error("when type is 'middle' or 'middle-around',this number can not 3 ---VueCircleMenu")
-        } else {
-          return true
-        }
-      } else if (this.number === 4) {
-        return true
-      } else {
-        return false
-      }
-    }
-  },
-  mounted () {
-    if (this.colors) {
-      if (this.colors.every(isColors) && this.colors.length === 5) {
-        for (let i = 0, length = this.colors.length; i < length; i++) {
-          this.BtnColor = this.colors[0]
-          this.Item1Color = this.colors[1]
-          this.Item2Color = this.colors[2]
-          this.Item3Color = this.colors[3]
-          this.Item4Color = this.colors[4]
-        }
-      } else {
-        console.error('this Array of colors must be hexcolor or rgbcolor and Array length must be 5 ---VueCircleMenu')
-      }
-    } else {
-      return {}
-    }
-  }
-}
-</script>
-
-<style lang="less">
-
-@import './style/index.less';
-
-</style>
+<template>
+  <div id='CircleMenu'>
+    <div :class="type" :animate='animate'>
+      <div class="oy-mask-black" v-show="MaskToggle" v-if="mask==='black'" @click="toggle"></div>
+      <div class="oy-mask-white" v-show="MaskToggle" v-if="mask==='white'" @click="toggle"></div>
+      <div class="oy-menu-group" :class="{'open':open}">
+        <button class="oy-menu-btn btn-toggle"  :class="{'oy-menu-btn-Circle':circle}" :style='{}' @click="toggle">
+          <i class="icon-bars" v-if="btn"></i>
+          <slot name="item_btn"></slot>
+        </button>
+        <div class="btn-list">
+          <div  class="oy-menu-item oy-menu-item_1 yellow" :class="AnimateClass" :style='{background:Item1Color}' v-show="number > 1 && number < 5">
+            <slot name="item_1"></slot>
+          </div>
+          <div  class="oy-menu-item oy-menu-item_2 purple" :class="AnimateClass" :style='{background:Item2Color}' v-show="number > 1 && number < 5">
+            <slot name="item_2"></slot>
+          </div>
+          <div  class="oy-menu-item oy-menu-item_3 green" :class="AnimateClass" :style='{background:Item3Color}' v-show="isShow">
+            <slot name="item_3"></slot>
+          </div>
+          <div  class="oy-menu-item oy-menu-item_4 blue" :class="AnimateClass" :style='{background:Item4Color}' v-show="number === 4">
+            <slot name="item_4"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isColors } from './utils/colorRE.js'
+export default {
+  name: 'CirleMenu',
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    number: {
+      type: Number,
+      required: true,
+      validator: function (value) {
+        return value > 1 && value < 5
+      }
+    },
+    animate: String,
+    mask: String,
+    circle: Boolean,
+    btn: Boolean,
+    colors: Array
+  },
+  data () {
+    return {
+      open: false,
+      toggleAnimate: false,
+      MaskToggle: false,
+      BtnColor: '',
+      Item1Color: '',
+      Item2Color: '',
+      Item3Color: '',
+      Item4Color: ''
+    }
+  },
+  methods: {
+    toggle () {
+      this.open = !this.open
+      this.toggleAnimate = !this.toggleAnimate
+      this.MaskToggle = !this.MaskToggle
+    }
+  },
+  computed: {
+    AnimateClass () {
+      return this.toggleAnimate ? this.animate : ''
+    },
+    isShow () {
+      if (this.number === 3) {
+        if (this.type === 'middle' || this.type === 'middle-around') {
+          console.error("when type is 'middle' or 'middle-around',this number can not 3 ---VueCircleMenu")
+        } else {
+          return true
+        }
+      } else if (this.number === 4) {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  mounted () {
+    if (this.colors) {
+      if (this.colors.every(isColors) && this.colors.length === 5) {
+        for (let i = 0, length = this.colors.length; i < length; i++) {
+          this.BtnColor = this.colors[0]
+          this.Item1Color = this.colors[1]
+          this.Item2Color = this.colors[2]
+          this.Item3Color = this.colors[3]
+          this.Item4Color = this.colors[4]
+        }
+      } else {
+        console.error('this Array of colors must be hexcolor or rgbcolor and Array length must be 5 ---VueCircleMenu')
+      }
+    } else {
+      return {}
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+@import './style/index.less';
+
+</style>

package/src/kisscomps/components/KissCircleMenu/index.js

@@ -1,2 +1,2 @@
-import CircleMenu from './CircleMenu.vue'
-export default CircleMenu
+import CircleMenu from './CircleMenu.vue'
+export default CircleMenu

package/src/kisscomps/components/KissCircleMenu/style/index.less

@@ -1,2 +1,2 @@
-@import "./main/core.less";
+@import "./main/core.less";
 @import "./main/other.less";

package/src/kisscomps/components/KissCircleMenu/style/main/core.less

@@ -1,162 +1,162 @@
-@import "../mixin/mixin.less";
-@import "../var/var.less";
-
-.oy-menu-group .btn-list .oy-menu-item{
-  @{top} &{
-    .CircleItem();
-  }
-  @{bottom} &{
-    .CircleItem();
-  }
-  @{left} &{
-    .CircleItem();
-  }
-  @{right} &{
-    .CircleItem();
-  }
-  @{middle} &{
-    .CircleItem();
-  } 
-  .middle-around &{
-    .CircleItem();
-  } 
-  
-}
-.oy-menu-group.open .btn-list .oy-menu-item{
-  @{top} &{
-    opacity: 1;
-  }
-  @{bottom} &{
-    opacity: 1;
-  }
-  @{left} &{
-    opacity: 1;
-  }
-  @{right} &{
-    opacity: 1;
-  }
-  @{middle} &{
-    opacity: 1;
-  } 
-  .middle-around &{
-    opacity: 1;
-  } 
-  
-}
-
-// tope 样式
-.top-open(@n, @i: 1) when (@i =< @n) {
-  .top .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    top: (@i * @MenuPrepSpace);
-    transition: 0.2s 0.1s;
-  }
-  .top-open(@n, (@i + 1));
-}
-.top(@n, @i: 1) when (@i =< @n) {
-  .top .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .top(@n, (@i + 1));
-}
-
-.top(4);
-.top-open(4);
-
-// bottom的样式
-.bottom-open(@n, @i: 1) when (@i =< @n) {
-  .bottom .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    top: (@i * @MenuSpace);
-  }
-  .bottom-open(@n, (@i + 1));
-}
-.bottom(@n, @i: 1) when (@i =< @n) {
-  .bottom .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .bottom(@n, (@i + 1));
-}
-.bottom(4);
-.bottom-open(4);
-
-//left的样式
-.left-open(@n, @i: 1) when (@i =< @n) {
-  .left .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    left: (@i * @MenuSpace);
-  }
-  .left-open(@n, (@i + 1));
-}
-.left(@n, @i: 1) when (@i =< @n) {
-  .left .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .left(@n, (@i + 1));
-}
-.left(4);
-.left-open(4);
-
-//right的样式
-.right-open(@n, @i: 1) when (@i =< @n) {
-  .right .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    left: (@i * @MenuPrepSpace);
-  }
-  .right-open(@n, (@i + 1));
-}
-.right(@n, @i: 1) when (@i =< @n) {
-  .right .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .right(@n, (@i + 1));
-}
-.right-open(4);
-.right(4);
-
-//middle的样式
-.middle(@n, @i: 1) when (@i =< @n) {
-  .middle .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .middle(@n, (@i + 1));
-}
-.middle(4);
-.middle .oy-menu-group.open .btn-list{
-  & .oy-menu-item.oy-menu-item_1{
-    left: @MenuPrepSpace;
-  }
-  & .oy-menu-item.oy-menu-item_2{
-    left: @MenuSpace;
-  }
-  & .oy-menu-item.oy-menu-item_3{
-    left: 2*@MenuPrepSpace;
-  }
-  & .oy-menu-item.oy-menu-item_4{
-    left: 2*@MenuSpace;
-  }
-}
-
-
-//middle-around的样式
-.middle-around(@n, @i: 1) when (@i =< @n) {
-  .middle-around .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
-    transition: 0.2s 0.1s;
-  }
-  .middle-around(@n, (@i + 1));
-}
-.middle-around(4);
-.middle-around .oy-menu-group.open .btn-list{
-  & .oy-menu-item.oy-menu-item_1{
-    left: (@MenuPrepSpace)-20px;
-    top: 0px;
-  }
-  & .oy-menu-item.oy-menu-item_2{
-    left: @MenuSpace+20px;
-    top: 0px;
-  }
-  & .oy-menu-item.oy-menu-item_3{
-    left: (@MenuSpace)-15px;
-    top: (@MenuPrepSpace)-10px;
-  }
-  & .oy-menu-item.oy-menu-item_4{
-    left: @MenuPrepSpace+15px;
-    top: (@MenuPrepSpace)-10px;
-  }
+@import "../mixin/mixin.less";
+@import "../var/var.less";
+
+.oy-menu-group .btn-list .oy-menu-item{
+  @{top} &{
+    .CircleItem();
+  }
+  @{bottom} &{
+    .CircleItem();
+  }
+  @{left} &{
+    .CircleItem();
+  }
+  @{right} &{
+    .CircleItem();
+  }
+  @{middle} &{
+    .CircleItem();
+  } 
+  .middle-around &{
+    .CircleItem();
+  } 
+  
+}
+.oy-menu-group.open .btn-list .oy-menu-item{
+  @{top} &{
+    opacity: 1;
+  }
+  @{bottom} &{
+    opacity: 1;
+  }
+  @{left} &{
+    opacity: 1;
+  }
+  @{right} &{
+    opacity: 1;
+  }
+  @{middle} &{
+    opacity: 1;
+  } 
+  .middle-around &{
+    opacity: 1;
+  } 
+  
+}
+
+// tope 样式
+.top-open(@n, @i: 1) when (@i =< @n) {
+  .top .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    top: (@i * @MenuPrepSpace);
+    transition: 0.2s 0.1s;
+  }
+  .top-open(@n, (@i + 1));
+}
+.top(@n, @i: 1) when (@i =< @n) {
+  .top .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    transition: 0.2s 0.1s;
+  }
+  .top(@n, (@i + 1));
+}
+
+.top(4);
+.top-open(4);
+
+// bottom的样式
+.bottom-open(@n, @i: 1) when (@i =< @n) {
+  .bottom .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    top: (@i * @MenuSpace);
+  }
+  .bottom-open(@n, (@i + 1));
+}
+.bottom(@n, @i: 1) when (@i =< @n) {
+  .bottom .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    transition: 0.2s 0.1s;
+  }
+  .bottom(@n, (@i + 1));
+}
+.bottom(4);
+.bottom-open(4);
+
+//left的样式
+.left-open(@n, @i: 1) when (@i =< @n) {
+  .left .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    left: (@i * @MenuSpace);
+  }
+  .left-open(@n, (@i + 1));
+}
+.left(@n, @i: 1) when (@i =< @n) {
+  .left .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    transition: 0.2s 0.1s;
+  }
+  .left(@n, (@i + 1));
+}
+.left(4);
+.left-open(4);
+
+//right的样式
+.right-open(@n, @i: 1) when (@i =< @n) {
+  .right .oy-menu-group.open .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    left: (@i * @MenuPrepSpace);
+  }
+  .right-open(@n, (@i + 1));
+}
+.right(@n, @i: 1) when (@i =< @n) {
+  .right .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    transition: 0.2s 0.1s;
+  }
+  .right(@n, (@i + 1));
+}
+.right-open(4);
+.right(4);
+
+//middle的样式
+.middle(@n, @i: 1) when (@i =< @n) {
+  .middle .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    transition: 0.2s 0.1s;
+  }
+  .middle(@n, (@i + 1));
+}
+.middle(4);
+.middle .oy-menu-group.open .btn-list{
+  & .oy-menu-item.oy-menu-item_1{
+    left: @MenuPrepSpace;
+  }
+  & .oy-menu-item.oy-menu-item_2{
+    left: @MenuSpace;
+  }
+  & .oy-menu-item.oy-menu-item_3{
+    left: 2*@MenuPrepSpace;
+  }
+  & .oy-menu-item.oy-menu-item_4{
+    left: 2*@MenuSpace;
+  }
+}
+
+
+//middle-around的样式
+.middle-around(@n, @i: 1) when (@i =< @n) {
+  .middle-around .oy-menu-group .btn-list .oy-menu-item.oy-menu-item_@{i} {
+    transition: 0.2s 0.1s;
+  }
+  .middle-around(@n, (@i + 1));
+}
+.middle-around(4);
+.middle-around .oy-menu-group.open .btn-list{
+  & .oy-menu-item.oy-menu-item_1{
+    left: (@MenuPrepSpace)-20px;
+    top: 0px;
+  }
+  & .oy-menu-item.oy-menu-item_2{
+    left: @MenuSpace+20px;
+    top: 0px;
+  }
+  & .oy-menu-item.oy-menu-item_3{
+    left: (@MenuSpace)-15px;
+    top: (@MenuPrepSpace)-10px;
+  }
+  & .oy-menu-item.oy-menu-item_4{
+    left: @MenuPrepSpace+15px;
+    top: (@MenuPrepSpace)-10px;
+  }
 }