openatc-components 0.0.1 → 0.0.2

package/package/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;
+  }
 }

package/package/kisscomps/components/KissCircleMenu/style/main/other.less

@@ -1,94 +1,94 @@
-@import "../mixin/mixin.less";
-@import "../var/var.less";
-
-
-//子菜单默认背景颜色
-.blue {
-  background: @CircleMenuItem4Color;
-}
-.yellow {
-  background: @CircleMenuItem3Color;
-}
-.green {
-  background: @CircleMenuItem2Color;
-}
-
-.purple {
-  background: @CircleMenuItem1Color;
-}
-
-.pink {
-  background: @CircleMenuBtnColor;
-}
-//遮罩样式
-.oy-mask-white {
-  .mask();
-  background: rgba(255, 255, 255, 0.8);
-  &_transparent{
-    .mask();
-  }
-}
-
-.oy-mask-black {
-  .mask();
-  background: rgba(0, 0, 0, 0.6);
-  &_transparent{
-    .mask();
-  }
-}
-
-// 菜单和子菜单的基础样式
-.oy-menu-group{
-  z-index: 1001;
-}
-
-.oy-menu-btn{
-  .meun-base();
-  &:active{
-    box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
-  }
-}
-.oy-menu-btn-Circle {
-  .circle();
-  outline: none;
-}
-
-.oy-menu-item{
-  .meun-base();
-  .circle();
-  &:active{
-    box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
-  }
-}
-
-// 默认开关按钮样式
-.icon-bars{
-  background: #fff;
-  height: 1px;
-  width: 22px;
-  margin: auto;
-  display: block;
-  position: relative;
-  transition: 0.2s 0.2s;
-  &:after{
-    content: '';
-    position: absolute;
-    height: 22px;
-    width: 1px;
-    background: #fff;
-    top: -10px;
-  }
-  .oy-menu-group.open &{
-    transform: rotate(45deg);
-  }
-}
-
-// 菜单和子菜单定位
-.oy-menu-group {
-  position: relative;
-  float: right;
-  transition: 0.2s;
-}
-.oy-menu-group .btn-toggle {
-  z-index: 15;
-}
+@import "../mixin/mixin.less";
+@import "../var/var.less";
+
+
+//子菜单默认背景颜色
+.blue {
+  background: @CircleMenuItem4Color;
+}
+.yellow {
+  background: @CircleMenuItem3Color;
+}
+.green {
+  background: @CircleMenuItem2Color;
+}
+
+.purple {
+  background: @CircleMenuItem1Color;
+}
+
+.pink {
+  background: @CircleMenuBtnColor;
+}
+//遮罩样式
+.oy-mask-white {
+  .mask();
+  background: rgba(255, 255, 255, 0.8);
+  &_transparent{
+    .mask();
+  }
+}
+
+.oy-mask-black {
+  .mask();
+  background: rgba(0, 0, 0, 0.6);
+  &_transparent{
+    .mask();
+  }
+}
+
+// 菜单和子菜单的基础样式
+.oy-menu-group{
+  z-index: 1001;
+}
+
+.oy-menu-btn{
+  .meun-base();
+  &:active{
+    box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
+  }
+}
+.oy-menu-btn-Circle {
+  .circle();
+  outline: none;
+}
+
+.oy-menu-item{
+  .meun-base();
+  .circle();
+  &:active{
+    box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
+  }
+}
+
+// 默认开关按钮样式
+.icon-bars{
+  background: #fff;
+  height: 1px;
+  width: 22px;
+  margin: auto;
+  display: block;
+  position: relative;
+  transition: 0.2s 0.2s;
+  &:after{
+    content: '';
+    position: absolute;
+    height: 22px;
+    width: 1px;
+    background: #fff;
+    top: -10px;
+  }
+  .oy-menu-group.open &{
+    transform: rotate(45deg);
+  }
+}
+
+// 菜单和子菜单定位
+.oy-menu-group {
+  position: relative;
+  float: right;
+  transition: 0.2s;
+}
+.oy-menu-group .btn-toggle {
+  z-index: 15;
+}

package/package/kisscomps/components/KissCircleMenu/style/mixin/mixin.less

@@ -1,36 +1,36 @@
-@import "../var/var.less";
-// 遮罩基础样式
-.mask() {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-}
-
-// 菜单按钮基础样式
-.meun-base() {
-  width: @CircleWidth;
-  height: @CircleHeight;
-  line-height: 50px;
-  display: inline-block;
-  border: none;
-  text-align: center;
-  position: relative;
-}
-
-//圆角
-.circle(){
-  border-radius: 50%;
-}
-
-//菜单位置
-.CircleItem(){
-  position: absolute;
-  right: 0;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  opacity: 0;
-}
+@import "../var/var.less";
+// 遮罩基础样式
+.mask() {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+
+// 菜单按钮基础样式
+.meun-base() {
+  width: @CircleWidth;
+  height: @CircleHeight;
+  line-height: 50px;
+  display: inline-block;
+  border: none;
+  text-align: center;
+  position: relative;
+}
+
+//圆角
+.circle(){
+  border-radius: 50%;
+}
+
+//菜单位置
+.CircleItem(){
+  position: absolute;
+  right: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  opacity: 0;
+}

package/package/kisscomps/components/KissCircleMenu/style/var/var.less

@@ -1,21 +1,21 @@
-// CircleMenu菜单按钮和菜单默认背景颜色
-@CircleMenuBtnColor: #F0A28E;
-@CircleMenuItem1Color: #8e24aa;
-@CircleMenuItem2Color: #00e676;
-@CircleMenuItem3Color: #ffa000;
-@CircleMenuItem4Color: #40c4ff;
-
-// 菜单基础间隔距离
-@MenuSpace: 55px;
-@MenuPrepSpace: -55px;
-
-//菜单type类型,middle-round因为有“-”会报错
-@top: .top;
-@bottom: .bottom;
-@left: .left;
-@right: .right;
-@middle: .middle;
-
-//圆环大小
-@CircleWidth: 48px;
-@CircleHeight: 48px;
+// CircleMenu菜单按钮和菜单默认背景颜色
+@CircleMenuBtnColor: #F0A28E;
+@CircleMenuItem1Color: #8e24aa;
+@CircleMenuItem2Color: #00e676;
+@CircleMenuItem3Color: #ffa000;
+@CircleMenuItem4Color: #40c4ff;
+
+// 菜单基础间隔距离
+@MenuSpace: 55px;
+@MenuPrepSpace: -55px;
+
+//菜单type类型,middle-round因为有“-”会报错
+@top: .top;
+@bottom: .bottom;
+@left: .left;
+@right: .right;
+@middle: .middle;
+
+//圆环大小
+@CircleWidth: 48px;
+@CircleHeight: 48px;

package/package/kisscomps/components/KissCircleMenu/utils/colorRE.js

@@ -1,5 +1,5 @@
-const hexColors = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/
-const rgbColors = /^[rR][gG][Bb][Aa]?[(]([\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}[\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?[\s]*(0\.\d{1,2}|1|0)?[)]{1}$/g
-export function isColors (value) {
-  return hexColors.test(value) || rgbColors.test(value)
-}
+const hexColors = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/
+const rgbColors = /^[rR][gG][Bb][Aa]?[(]([\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}[\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?[\s]*(0\.\d{1,2}|1|0)?[)]{1}$/g
+export function isColors (value) {
+  return hexColors.test(value) || rgbColors.test(value)
+}