zartui 1.0.19 → 1.0.21

package/es/circle/index.css

@@ -0,0 +1 @@
+.zt-circle{position:relative;display:inline-block;width:100px;height:100px;text-align:center}.zt-circle svg{position:absolute;top:0;left:0;width:100%;height:100%}.zt-circle__layer{stroke:#fff}.zt-circle__hover{fill:none;stroke:#0091fa;stroke-linecap:round}.zt-circle__text{position:absolute;top:50%;left:0;box-sizing:border-box;width:100%;padding:0 4px;color:rgba(0,0,0,.6);font-weight:700;font-size:14px;line-height:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}

package/es/circle/index.js

@@ -0,0 +1,175 @@
+import { createNamespace, isObject, addUnit } from '../utils';
+import { raf, cancelRaf } from '../utils/dom/raf';
+
+var _createNamespace = createNamespace('circle'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+var PERIMETER = 3140;
+var uid = 0;
+
+function format(rate) {
+  return Math.min(Math.max(rate, 0), 100);
+}
+
+function getPath(clockwise, viewBoxSize) {
+  var sweepFlag = clockwise ? 1 : 0;
+  return "M " + viewBoxSize / 2 + " " + viewBoxSize / 2 + " m 0, -500 a 500, 500 0 1, " + sweepFlag + " 0, 1000 a 500, 500 0 1, " + sweepFlag + " 0, -1000";
+}
+
+export default createComponent({
+  props: {
+    text: String,
+    size: [Number, String],
+    color: [String, Object],
+    layerColor: String,
+    strokeLinecap: String,
+    value: {
+      type: Number,
+      default: 0
+    },
+    speed: {
+      type: [Number, String],
+      default: 0
+    },
+    fill: {
+      type: String,
+      default: 'none'
+    },
+    rate: {
+      type: [Number, String],
+      default: 100
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: 40
+    },
+    clockwise: {
+      type: Boolean,
+      default: true
+    }
+  },
+  beforeCreate: function beforeCreate() {
+    this.uid = "zt-circle-gradient-" + uid++;
+  },
+  computed: {
+    style: function style() {
+      var size = addUnit(this.size);
+      return {
+        width: size,
+        height: size
+      };
+    },
+    path: function path() {
+      return getPath(this.clockwise, this.viewBoxSize);
+    },
+    viewBoxSize: function viewBoxSize() {
+      return +this.strokeWidth + 1000;
+    },
+    layerStyle: function layerStyle() {
+      return {
+        fill: "" + this.fill,
+        stroke: "" + this.layerColor,
+        strokeWidth: this.strokeWidth + "px"
+      };
+    },
+    hoverStyle: function hoverStyle() {
+      var offset = PERIMETER * this.value / 100;
+      return {
+        stroke: "" + (this.gradient ? "url(#" + this.uid + ")" : this.color),
+        strokeWidth: +this.strokeWidth + 1 + "px",
+        strokeLinecap: this.strokeLinecap,
+        strokeDasharray: offset + "px " + PERIMETER + "px"
+      };
+    },
+    gradient: function gradient() {
+      return isObject(this.color);
+    },
+    LinearGradient: function LinearGradient() {
+      var _this = this;
+
+      var h = this.$createElement;
+
+      if (!this.gradient) {
+        return;
+      }
+
+      var Stops = Object.keys(this.color).sort(function (a, b) {
+        return parseFloat(a) - parseFloat(b);
+      }).map(function (key, index) {
+        return h("stop", {
+          "key": index,
+          "attrs": {
+            "offset": key,
+            "stop-color": _this.color[key]
+          }
+        });
+      });
+      return h("defs", [h("linearGradient", {
+        "attrs": {
+          "id": this.uid,
+          "x1": "100%",
+          "y1": "0%",
+          "x2": "0%",
+          "y2": "0%"
+        }
+      }, [Stops])]);
+    }
+  },
+  watch: {
+    rate: {
+      handler: function handler(rate) {
+        this.startTime = Date.now();
+        this.startRate = this.value;
+        this.endRate = format(rate);
+        this.increase = this.endRate > this.startRate;
+        this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
+
+        if (this.speed) {
+          cancelRaf(this.rafId);
+          this.rafId = raf(this.animate);
+        } else {
+          this.$emit('input', this.endRate);
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    animate: function animate() {
+      var now = Date.now();
+      var progress = Math.min((now - this.startTime) / this.duration, 1);
+      var rate = progress * (this.endRate - this.startRate) + this.startRate;
+      this.$emit('input', format(parseFloat(rate.toFixed(1))));
+
+      if (this.increase ? rate < this.endRate : rate > this.endRate) {
+        this.rafId = raf(this.animate);
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": bem(),
+      "style": this.style
+    }, [h("svg", {
+      "attrs": {
+        "viewBox": "0 0 " + this.viewBoxSize + " " + this.viewBoxSize
+      }
+    }, [this.LinearGradient, h("path", {
+      "class": bem('layer'),
+      "style": this.layerStyle,
+      "attrs": {
+        "d": this.path
+      }
+    }), h("path", {
+      "attrs": {
+        "d": this.path
+      },
+      "class": bem('hover'),
+      "style": this.hoverStyle
+    })]), this.slots() || this.text && h("div", {
+      "class": bem('text')
+    }, [this.text])]);
+  }
+});

package/es/circle/index.less

@@ -0,0 +1,41 @@
+@import '../style/var';
+
+.zt-circle {
+  position: relative;
+  display: inline-block;
+  width: @circle-size;
+  height: @circle-size;
+  text-align: center;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__layer {
+    stroke: @circle-layer-color;
+  }
+
+  &__hover {
+    fill: none;
+    stroke: @circle-color;
+    stroke-linecap: round;
+  }
+
+  &__text {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 @padding-base;
+    color: @circle-text-color;
+    font-weight: @circle-text-font-weight;
+    font-size: @circle-text-font-size;
+    line-height: @circle-text-line-height;
+    transform: translateY(-50%);
+  }
+}

package/es/circle/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/base.css';
+import '../index.css';

package/es/circle/style/less.js

@@ -0,0 +1,2 @@
+import '../../style/base.less';
+import '../index.less';

package/es/index.js

@@ -10,6 +10,7 @@ import Cell from './cell';
 import CellGroup from './cell-group';
 import Checkbox from './checkbox';
 import CheckboxGroup from './checkbox-group';
+import Circle from './circle';
 import Col from './col';
 import Collapse from './collapse';
 import CollapseItem from './collapse-item';
@@ -76,10 +77,10 @@ import Tag from './tag';
 import Timeline from './timeline';
 import Toast from './toast';
 import Uploader from './uploader';
-var version = '1.0.19';
+var version = '1.0.21';
 
 function install(Vue) {
-  var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];
+  var components = [ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader];
   components.forEach(function (item) {
     if (item.install) {
       Vue.use(item);
@@ -93,7 +94,7 @@ if (typeof window !== 'undefined' && window.Vue) {
   install(window.Vue);
 }
 
-export { install, version, ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader };
+export { install, version, ActionSheet, Area, Avatar, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, Collapse, CollapseItem, CountDown, DatetimePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, FoldDialog, Form, Grid, GridItem, HierarchySelect, Icon, Image, ImagePreview, IndexAnchor, IndexBar, Info, Lazyload, List, Loading, Locale, MediaPicker, MediaPlayer, MultiplePicker, NavBar, NoticeBar, NumberKeyboard, Overlay, PasswordInput, PdfViewer, PdfViewerV2, Picker, Popover, Popup, PullRefresh, Radio, RadioGroup, Rate, Row, Search, Signature, Skeleton, Slider, Step, Stepper, Steps, Sticky, Swipe, SwipeCell, SwipeItem, Switch, SwitchCell, Tab, Tabbar, TabbarItem, Table, Tabs, Tag, Timeline, Toast, Uploader };
 export default {
   install: install,
   version: version

package/es/media-picker/index.js

@@ -475,6 +475,8 @@ export default createComponent({
               address: _this4.watermarkOptions.address || "",
               humanName: _this4.watermarkOptions.humanName || "",
               projectName: _this4.watermarkOptions.projectName || "",
+              logo: _this4.watermarkOptions.logo || "",
+              applicationName: _this4.watermarkOptions.applicationName || "",
               watermarkTime: new Date()
             }
           });

package/es/pdf-viewer-v2/index.css

@@ -1 +1 @@
-.zt-pdf-viewer-v2{width:100%;height:100%;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-pdf-viewer-v2__inner-body{height:calc(100% - 44px);overflow:hidden}.zt-pdf-viewer-v2__inner-container{height:100%;overflow:scroll}.zt-pdf-viewer-v2::-webkit-scrollbar{width:0;height:0}.zt-pdf-viewer-v2__page-box{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;background-color:#fff;text-align:center;font-size:16px;line-height:44px}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__next,.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__pre{cursor:pointer;color:#3a90f6}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__page{margin:0 10px}.zt-pdf-viewer-v2 .zt-loading{position:absolute;top:50%;left:50%;margin-left:-18px;margin-top:-18px}
+.zt-pdf-viewer-v2{width:100%;height:100%;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.zt-pdf-viewer-v2__inner-body{height:calc(100% - 44px);overflow:hidden}.zt-pdf-viewer-v2__inner-container{height:100%;overflow:scroll}.zt-pdf-viewer-v2::-webkit-scrollbar{width:0;height:0}.zt-pdf-viewer-v2__page-box{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;background-color:#fff;text-align:center;font-size:16px;line-height:44px}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__next,.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__pre{cursor:pointer;color:#3a90f6}.zt-pdf-viewer-v2__page-box .zt-pdf-viewer-v2__page{margin:0 10px}.zt-pdf-viewer-v2 .zt-loading{position:absolute;top:50%;left:50%;margin-left:-18px;margin-top:-18px}.zt-pdf-viewer-v2__loadding-circle{position:absolute;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}

package/es/pdf-viewer-v2/index.js

@@ -6,6 +6,7 @@ var _createNamespace = createNamespace('pdf-viewer-v2'),
 
 import Toast from '../toast';
 import Loading from '../loading';
+import Circle from '../circle';
 import Picker from '../picker';
 import { resetObject } from "../utils/index";
 
@@ -19,7 +20,11 @@ var defaultData = function defaultData() {
     loading: false,
     PDFJS: null,
     pageChangeByButton: false,
-    showPicker: false
+    showPicker: false,
+    // 进度范围：0~100
+    progress: 0,
+    // circle绑定值
+    circleProgress: 0
   };
 };
 
@@ -49,7 +54,8 @@ export default createComponent({
       default: function _default() {
         return {};
       }
-    }
+    },
+    showProgress: Boolean
   },
   data: function data() {
     return defaultData();
@@ -225,6 +231,14 @@ export default createComponent({
           cMapUrl: this.cMapUrl,
           cMapPacked: true
         });
+
+        pdfLoadingTask.onProgress = function (progressData) {
+          // 返回的进度可能会超过100
+          _this4.progress = Math.min(100, Math.floor(progressData.loaded * 100 / progressData.total));
+
+          _this4.$emit('progress', _this4.progress);
+        };
+
         pdfLoadingTask.promise.then(function (pdfDoc) {
           if (pdfDoc && pdfViewerDom) {
             // 缓存pdf内容
@@ -285,6 +299,8 @@ export default createComponent({
     }
   },
   render: function render(h) {
+    var _this5 = this;
+
     return h("div", {
       "class": bem(),
       "ref": "pdfContainer"
@@ -298,7 +314,7 @@ export default createComponent({
     }, [h(Loading, {
       "directives": [{
         name: "show",
-        value: this.loading
+        value: !this.showProgress && this.loading
       }],
       "class": bem('loading-icon')
     }), h("div", {
@@ -308,7 +324,21 @@ export default createComponent({
       }],
       "ref": "pdfViewerContainer",
       "class": bem("container")
-    })])]), this.totalPage ? h("div", {
+    })])]), this.showProgress && this.progress < 100 ? h("div", {
+      "class": bem("loadding-circle")
+    }, [h(Circle, {
+      "attrs": {
+        "rate": this.progress,
+        "speed": "100",
+        "text": this.progress + '%'
+      },
+      "model": {
+        value: _this5.circleProgress,
+        callback: function callback($$v) {
+          _this5.circleProgress = $$v;
+        }
+      }
+    })]) : "", this.totalPage ? h("div", {
       "class": bem("page-box")
     }, [h("span", {
       "class": bem("pre"),

package/es/pdf-viewer-v2/index.less

@@ -49,4 +49,13 @@
         margin-left: -18px;
         margin-top: -18px;
     }
+
+    &__loadding-circle {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }

package/es/pdf-viewer-v2/style/index.js

@@ -6,4 +6,5 @@ import '../../popup/index.css';
 import '../../loading/index.css';
 import '../../toast/index.css';
 import '../../picker/index.css';
+import '../../circle/index.css';
 import '../index.css';

package/es/pdf-viewer-v2/style/less.js

@@ -6,4 +6,5 @@ import '../../popup/index.less';
 import '../../loading/index.less';
 import '../../toast/index.less';
 import '../../picker/index.less';
+import '../../circle/index.less';
 import '../index.less';

package/es/uploader/index.js

@@ -150,7 +150,9 @@ export default createComponent({
               address: _this.watermarkOptions.address || "",
               watermarkTime: new Date(),
               humanName: _this.watermarkOptions.humanName || "",
-              projectName: _this.watermarkOptions.projectName || ""
+              projectName: _this.watermarkOptions.projectName || "",
+              logo: _this.watermarkOptions.logo || "",
+              applicationName: _this.watermarkOptions.applicationName || ""
             });
             var watermarkOptions = new WatermarkOptions({
               enabled: true,

package/lib/circle/index.css

@@ -0,0 +1 @@
+.zt-circle{position:relative;display:inline-block;width:100px;height:100px;text-align:center}.zt-circle svg{position:absolute;top:0;left:0;width:100%;height:100%}.zt-circle__layer{stroke:#fff}.zt-circle__hover{fill:none;stroke:#0091fa;stroke-linecap:round}.zt-circle__text{position:absolute;top:50%;left:0;box-sizing:border-box;width:100%;padding:0 4px;color:rgba(0,0,0,.6);font-weight:700;font-size:14px;line-height:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}

package/lib/circle/index.js

@@ -0,0 +1,183 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+var _raf = require("../utils/dom/raf");
+
+var _createNamespace = (0, _utils.createNamespace)('circle'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+var PERIMETER = 3140;
+var uid = 0;
+
+function format(rate) {
+  return Math.min(Math.max(rate, 0), 100);
+}
+
+function getPath(clockwise, viewBoxSize) {
+  var sweepFlag = clockwise ? 1 : 0;
+  return "M " + viewBoxSize / 2 + " " + viewBoxSize / 2 + " m 0, -500 a 500, 500 0 1, " + sweepFlag + " 0, 1000 a 500, 500 0 1, " + sweepFlag + " 0, -1000";
+}
+
+var _default = createComponent({
+  props: {
+    text: String,
+    size: [Number, String],
+    color: [String, Object],
+    layerColor: String,
+    strokeLinecap: String,
+    value: {
+      type: Number,
+      default: 0
+    },
+    speed: {
+      type: [Number, String],
+      default: 0
+    },
+    fill: {
+      type: String,
+      default: 'none'
+    },
+    rate: {
+      type: [Number, String],
+      default: 100
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: 40
+    },
+    clockwise: {
+      type: Boolean,
+      default: true
+    }
+  },
+  beforeCreate: function beforeCreate() {
+    this.uid = "zt-circle-gradient-" + uid++;
+  },
+  computed: {
+    style: function style() {
+      var size = (0, _utils.addUnit)(this.size);
+      return {
+        width: size,
+        height: size
+      };
+    },
+    path: function path() {
+      return getPath(this.clockwise, this.viewBoxSize);
+    },
+    viewBoxSize: function viewBoxSize() {
+      return +this.strokeWidth + 1000;
+    },
+    layerStyle: function layerStyle() {
+      return {
+        fill: "" + this.fill,
+        stroke: "" + this.layerColor,
+        strokeWidth: this.strokeWidth + "px"
+      };
+    },
+    hoverStyle: function hoverStyle() {
+      var offset = PERIMETER * this.value / 100;
+      return {
+        stroke: "" + (this.gradient ? "url(#" + this.uid + ")" : this.color),
+        strokeWidth: +this.strokeWidth + 1 + "px",
+        strokeLinecap: this.strokeLinecap,
+        strokeDasharray: offset + "px " + PERIMETER + "px"
+      };
+    },
+    gradient: function gradient() {
+      return (0, _utils.isObject)(this.color);
+    },
+    LinearGradient: function LinearGradient() {
+      var _this = this;
+
+      var h = this.$createElement;
+
+      if (!this.gradient) {
+        return;
+      }
+
+      var Stops = Object.keys(this.color).sort(function (a, b) {
+        return parseFloat(a) - parseFloat(b);
+      }).map(function (key, index) {
+        return h("stop", {
+          "key": index,
+          "attrs": {
+            "offset": key,
+            "stop-color": _this.color[key]
+          }
+        });
+      });
+      return h("defs", [h("linearGradient", {
+        "attrs": {
+          "id": this.uid,
+          "x1": "100%",
+          "y1": "0%",
+          "x2": "0%",
+          "y2": "0%"
+        }
+      }, [Stops])]);
+    }
+  },
+  watch: {
+    rate: {
+      handler: function handler(rate) {
+        this.startTime = Date.now();
+        this.startRate = this.value;
+        this.endRate = format(rate);
+        this.increase = this.endRate > this.startRate;
+        this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
+
+        if (this.speed) {
+          (0, _raf.cancelRaf)(this.rafId);
+          this.rafId = (0, _raf.raf)(this.animate);
+        } else {
+          this.$emit('input', this.endRate);
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    animate: function animate() {
+      var now = Date.now();
+      var progress = Math.min((now - this.startTime) / this.duration, 1);
+      var rate = progress * (this.endRate - this.startRate) + this.startRate;
+      this.$emit('input', format(parseFloat(rate.toFixed(1))));
+
+      if (this.increase ? rate < this.endRate : rate > this.endRate) {
+        this.rafId = (0, _raf.raf)(this.animate);
+      }
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": bem(),
+      "style": this.style
+    }, [h("svg", {
+      "attrs": {
+        "viewBox": "0 0 " + this.viewBoxSize + " " + this.viewBoxSize
+      }
+    }, [this.LinearGradient, h("path", {
+      "class": bem('layer'),
+      "style": this.layerStyle,
+      "attrs": {
+        "d": this.path
+      }
+    }), h("path", {
+      "attrs": {
+        "d": this.path
+      },
+      "class": bem('hover'),
+      "style": this.hoverStyle
+    })]), this.slots() || this.text && h("div", {
+      "class": bem('text')
+    }, [this.text])]);
+  }
+});
+
+exports.default = _default;

package/lib/circle/index.less

@@ -0,0 +1,41 @@
+@import '../style/var';
+
+.zt-circle {
+  position: relative;
+  display: inline-block;
+  width: @circle-size;
+  height: @circle-size;
+  text-align: center;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__layer {
+    stroke: @circle-layer-color;
+  }
+
+  &__hover {
+    fill: none;
+    stroke: @circle-color;
+    stroke-linecap: round;
+  }
+
+  &__text {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 @padding-base;
+    color: @circle-text-color;
+    font-weight: @circle-text-font-weight;
+    font-size: @circle-text-font-size;
+    line-height: @circle-text-line-height;
+    transform: translateY(-50%);
+  }
+}

package/lib/circle/style/index.js

@@ -0,0 +1,2 @@
+require('../../style/base.css');
+require('../index.css');

package/lib/circle/style/less.js

@@ -0,0 +1,2 @@
+require('../../style/base.less');
+require('../index.less');