@mdsfe/mds-ui/dist/progress.js

A set of enterprise-class Vue UI components.

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("./icon"));
	else if(typeof define === 'function' && define.amd)
		define(["./icon"], factory);
	else {
		var a = typeof exports === 'object' ? factory(require("./icon")) : factory(root["./icon"]);
		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
	}
})(window, function(__WEBPACK_EXTERNAL_MODULE__7__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/dist/";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 99);
/******/ })
/************************************************************************/
/******/ ({

/***/ 0:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* globals __VUE_SSR_CONTEXT__ */

// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.

function normalizeComponent (
  scriptExports,
  render,
  staticRenderFns,
  functionalTemplate,
  injectStyles,
  scopeId,
  moduleIdentifier, /* server only */
  shadowMode /* vue-cli only */
) {
  // Vue.extend constructor export interop
  var options = typeof scriptExports === 'function'
    ? scriptExports.options
    : scriptExports

  // render functions
  if (render) {
    options.render = render
    options.staticRenderFns = staticRenderFns
    options._compiled = true
  }

  // functional template
  if (functionalTemplate) {
    options.functional = true
  }

  // scopedId
  if (scopeId) {
    options._scopeId = 'data-v-' + scopeId
  }

  var hook
  if (moduleIdentifier) { // server build
    hook = function (context) {
      // 2.3 injection
      context =
        context || // cached call
        (this.$vnode && this.$vnode.ssrContext) || // stateful
        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
      // 2.2 with runInNewContext: true
      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__
      }
      // inject component styles
      if (injectStyles) {
        injectStyles.call(this, context)
      }
      // register component module identifier for async chunk inferrence
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier)
      }
    }
    // used by ssr in case component is cached and beforeCreate
    // never gets called
    options._ssrRegister = hook
  } else if (injectStyles) {
    hook = shadowMode
      ? function () {
        injectStyles.call(
          this,
          (options.functional ? this.parent : this).$root.$options.shadowRoot
        )
      }
      : injectStyles
  }

  if (hook) {
    if (options.functional) {
      // for template-only hot-reload because in that case the render fn doesn't
      // go through the normalizer
      options._injectStyles = hook
      // register for functional component in vue file
      var originalRender = options.render
      options.render = function renderWithStyleInjection (h, context) {
        hook.call(context)
        return originalRender(h, context)
      }
    } else {
      // inject component registration as beforeCreate hook
      var existing = options.beforeCreate
      options.beforeCreate = existing
        ? [].concat(existing, hook)
        : [hook]
    }
  }

  return {
    exports: scriptExports,
    options: options
  }
}


/***/ }),

/***/ 142:
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ 210:
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ 7:
/***/ (function(module, exports) {

module.exports = __WEBPACK_EXTERNAL_MODULE__7__;

/***/ }),

/***/ 99:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: ./components/style/index.less
var style = __webpack_require__(142);

// EXTERNAL MODULE: ./components/progress/style/index.less
var progress_style = __webpack_require__(210);

// CONCATENATED MODULE: ./components/progress/style/index.js


// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/progress/progress.vue?vue&type=template&id=364f9ca4&
var render = function () {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", [
    _vm.type === "line"
      ? _c(
          "div",
          [_c("line-progress", _vm._b({}, "line-progress", _vm.$attrs, false))],
          1
        )
      : _c(
          "div",
          [
            _c(
              "circle-progress",
              _vm._b({}, "circle-progress", _vm.$attrs, false)
            ),
          ],
          1
        ),
  ])
}
var staticRenderFns = []
render._withStripped = true


// CONCATENATED MODULE: ./components/progress/progress.vue?vue&type=template&id=364f9ca4&

// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/progress/line.vue?vue&type=template&id=186b566b&scoped=true&
var linevue_type_template_id_186b566b_scoped_true_render = function () {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", { class: "" + _vm.prefixCls - _vm.progress }, [
    _c(
      "div",
      {
        class: [
          _vm.prefixCls + "-line",
          _vm.prefixCls + "-" + _vm.size,
          "" + _vm.showInfo,
        ],
      },
      [
        _c("div", { class: _vm.prefixCls + "-outer" }, [
          _c("div", { class: _vm.prefixCls + "-inner", style: _vm.bgStyle }, [
            _c("div", {
              class: _vm.prefixCls + "-bg",
              style: _vm.percentStyle,
            }),
          ]),
        ]),
        _c(
          "span",
          {
            directives: [
              {
                name: "show",
                rawName: "v-show",
                value: _vm.showText,
                expression: "showText",
              },
            ],
            class: _vm.prefixCls + "-text",
          },
          [_vm._v(_vm._s("" + _vm.showProgressText))]
        ),
        _c(
          "span",
          {
            directives: [
              {
                name: "show",
                rawName: "v-show",
                value: _vm.showIcon || _vm.iconType,
                expression: "showIcon || iconType",
              },
            ],
            class: _vm.prefixCls + "-text",
          },
          [
            _c("mds-icon", {
              style: _vm.iconStyle,
              attrs: { type: _vm.iconTypes },
            }),
          ],
          1
        ),
      ]
    ),
  ])
}
var linevue_type_template_id_186b566b_scoped_true_staticRenderFns = []
linevue_type_template_id_186b566b_scoped_true_render._withStripped = true


// CONCATENATED MODULE: ./components/progress/line.vue?vue&type=template&id=186b566b&scoped=true&

// EXTERNAL MODULE: external "./icon"
var external_icon_ = __webpack_require__(7);
var external_icon_default = /*#__PURE__*/__webpack_require__.n(external_icon_);

// CONCATENATED MODULE: ./components/progress/props.js
/* harmony default export */ var props = ({
  props: {
    prefixCls: { // class前缀
      type: String,
      default: 'mds-progress'
    },
    percentage: { // 百分比
      type: [Number, String],
      default: 0
    },
    procentageText: { // 展示进度文字
      type: String
    },
    strokeWidth: { // 比例宽度
      type: [Number, String],
      default: 0
    },
    showText: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'normal'
    }
  }
});
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/progress/line.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//



var ICONTYPES = {
  info: 'line-info-circle',
  success: 'fill-solid-right-circle',
  error: 'fill-solid-wrong-circle',
  warning: 'fill-solid-exclamation-circle'
};
/* harmony default export */ var linevue_type_script_lang_js_ = ({
  mixins: [props],
  props: {
    percentColor: {
      type: String,
      default: '#0364FF'
    },
    bgColor: {
      type: String,
      default: '#F0F2F5'
    },
    showIcon: {
      type: Boolean,
      default: false
    },
    iconColor: {
      type: String
    },
    iconType: {
      type: String,
      validator: function validator(value) {
        return ['info', 'success', 'error', 'warning'].includes(value);
      }
    },
    gradual: {
      type: Boolean,
      default: false
    }
  },
  components: {
    MdsIcon: external_icon_default.a
  },
  data: function data() {
    return {};
  },

  computed: {
    realStrokeWidth: function realStrokeWidth() {
      if (!this.strokeWidth) {
        return 8;
      } else {
        return this.strokeWidth;
      }
    },
    percentStyle: function percentStyle() {
      var linearGradient = '';
      if (this.percentColor) {
        if (this.percentColor.includes(',')) {
          var colorArr = this.percentColor.split(',');
          var len = colorArr.length;
          for (var i = 1; i <= len; i++) {
            var ratio = Math.floor(i / len * 100);
            var preRatio = Math.floor((i - 1) / len * 100);
            if (this.gradual) {
              linearGradient += linearGradient ? ',' + colorArr[i - 1] : colorArr[i - 1];
            } else {
              linearGradient += linearGradient ? ',' + colorArr[i - 1] + ' ' + preRatio + '%' + ' ' + ratio + '%' : colorArr[i - 1] + ' ' + preRatio + '%' + ' ' + ratio + '%';
            }
          }
        }
      }
      return linearGradient ? {
        width: this.percentage + '%',
        height: this.size === 'mini' ? this.realStrokeWidth / 2 + 'px' : this.realStrokeWidth + 'px',
        background: 'linear-gradient(to left, ' + linearGradient + ')'
      } : {
        width: this.percentage + '%',
        height: this.size === 'mini' ? this.realStrokeWidth / 2 + 'px' : this.realStrokeWidth + 'px',
        backgroundColor: this.percentColor
      };
    },
    bgStyle: function bgStyle() {
      return {
        backgroundColor: '' + this.bgColor
      };
    },
    showInfo: function showInfo() {
      return (this.showText || this.showIcon || this.iconType) && this.prefixCls + '-show-info';
    },
    showProgressText: function showProgressText() {
      return this.procentageText || this.percentage + '%';
    },
    iconStyle: function iconStyle() {
      if (this.size === 'mini') {
        return {
          color: this.iconColor || this.percentColor
        };
      } else {
        return {
          color: this.iconColor || this.percentColor,
          fontSize: '16px'
        };
      }
    },
    iconTypes: function iconTypes() {
      return ICONTYPES[this.iconType] || 'close-circle';
    }
  }
});
// CONCATENATED MODULE: ./components/progress/line.vue?vue&type=script&lang=js&
 /* harmony default export */ var progress_linevue_type_script_lang_js_ = (linevue_type_script_lang_js_); 
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(0);

// CONCATENATED MODULE: ./components/progress/line.vue





/* normalize component */

var component = Object(componentNormalizer["a" /* default */])(
  progress_linevue_type_script_lang_js_,
  linevue_type_template_id_186b566b_scoped_true_render,
  linevue_type_template_id_186b566b_scoped_true_staticRenderFns,
  false,
  null,
  "186b566b",
  null
  
)

/* hot reload */
if (false) { var api; }
component.options.__file = "components/progress/line.vue"
/* harmony default export */ var line = (component.exports);
// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./components/progress/circle.vue?vue&type=template&id=9a60ccf2&
var circlevue_type_template_id_9a60ccf2_render = function () {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    { class: _vm.prefixCls + "-circle", style: _vm.circleStyle },
    [
      _c("svg", { attrs: { viewBox: "0 0 100 100" } }, [
        _c("path", {
          class: _vm.prefixCls + "-track",
          style: _vm.trailPathStyle,
          attrs: {
            d: _vm.trackPath,
            stroke: _vm.trackColor,
            "stroke-width": _vm.relativeStrokeWidth,
            fill: "none",
          },
        }),
        _c("path", {
          class: _vm.prefixCls + "-path",
          style: _vm.circlePathStyle,
          attrs: {
            d: _vm.trackPath,
            stroke: _vm.stroke,
            fill: "none",
            "stroke-linecap": _vm.strokeLinecap,
            "stroke-width": _vm.percentage ? _vm.relativeStrokeWidth : 0,
          },
        }),
      ]),
      _c(
        "div",
        { class: _vm.prefixCls + "-text", style: _vm.textStyle },
        [
          _vm.showText
            ? _c("span", [_vm._v(_vm._s(_vm.showProgressText))])
            : _c("mds-icon", {
                style: _vm.iconStyle,
                attrs: { type: _vm.iconTypes },
              }),
        ],
        1
      ),
    ]
  )
}
var circlevue_type_template_id_9a60ccf2_staticRenderFns = []
circlevue_type_template_id_9a60ccf2_render._withStripped = true


// CONCATENATED MODULE: ./components/progress/circle.vue?vue&type=template&id=9a60ccf2&

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/progress/circle.vue?vue&type=script&lang=js&
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//



var circlevue_type_script_lang_js_ICONTYPES = {
  success: 'line-check',
  error: 'line-exclamation'
};
/* harmony default export */ var circlevue_type_script_lang_js_ = ({
  mixins: [props],
  props: {
    defaultWidth: {
      type: Number,
      default: 80
    },
    percentColor: {
      // 进度条颜色
      type: String,
      default: '#0364FF'
    },
    iconType: {
      type: String,
      validator: function validator(value) {
        return ['success', 'error'].includes(value);
      }
    },
    strokeLinecap: {
      type: String,
      default: 'round'
    },
    trackColor: {
      type: String,
      default: '#e5e9f2'
    }
  },
  data: function data() {
    return {};
  },

  components: {
    MdsIcon: external_icon_default.a
  },
  mounted: function mounted() {
    console.log(this.strokeWidth);
  },

  computed: {
    realStrokeWidth: function realStrokeWidth() {
      var width = void 0;
      if (!this.strokeWidth) {
        if (this.size === 'mini') {
          width = 4;
        } else {
          width = 8;
        }
      } else {
        return this.strokeWidth;
      }
      return width;
    },
    width: function width() {
      if (this.size === 'mini') {
        return this.defaultWidth * 0.6;
      } else {
        return this.defaultWidth;
      }
    },
    textStyle: function textStyle() {
      var fontSize = '16px';
      if (this.size === 'mini') {
        fontSize = '14px';
      }
      return {
        fontSize: fontSize
      };
    },
    iconStyle: function iconStyle() {
      var fontSize = '32px';
      if (this.size === 'mini') {
        fontSize = '16px';
      }
      return {
        color: this.iconColor || this.percentColor,
        // fontSize: `${this.width / 3}px`
        fontSize: fontSize
      };
    },

    // icon
    iconTypes: function iconTypes() {
      return circlevue_type_script_lang_js_ICONTYPES[this.iconType] || 'right2';
    },

    // 展示进度文字
    showProgressText: function showProgressText() {
      var reg = /\d/g;
      if (reg.test(this.percentage)) {
        return this.procentageText || this.percentage + '%';
      } else {
        return this.procentageText || '' + this.percentage;
      }
    },

    // 外部样式
    circleStyle: function circleStyle() {
      return {
        height: this.width + 'px',
        width: this.width + 'px'
      };
    },

    // 圆环宽度
    relativeStrokeWidth: function relativeStrokeWidth() {
      // let width = this.size === 'mini' ? this.strokeWidth / 2 : this.strokeWidth
      // return ((width / this.width) * 100).toFixed(1)
      // let width = this.size === 'mini' ? 4 : 8
      // return width

      return (this.realStrokeWidth / this.width * 100).toFixed(1);
    },

    // 比例
    radius: function radius() {
      return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
    },
    trackPath: function trackPath() {
      var radius = this.radius;
      var isDashboard = this.type === 'dashboard';
      return '\n          M 50 50\n          m 0 ' + (isDashboard ? '' : '-') + radius + '\n          a ' + radius + ' ' + radius + ' 0 1 1 0 ' + (isDashboard ? '-' : '') + radius * 2 + '\n          a ' + radius + ' ' + radius + ' 0 1 1 0 ' + (isDashboard ? '' : '-') + radius * 2 + '\n          ';
    },
    perimeter: function perimeter() {
      return 2 * Math.PI * this.radius;
    },
    rate: function rate() {
      return this.type === 'dashboard' ? 0.75 : 1;
    },
    strokeDashoffset: function strokeDashoffset() {
      var offset = -1 * this.perimeter * (1 - this.rate) / 2;
      return offset + 'px';
    },

    // 圆环样式
    circlePathStyle: function circlePathStyle() {
      return {
        strokeDasharray: this.perimeter * this.rate * (this.percentage / 100) + 'px, ' + this.perimeter + 'px',
        strokeDashoffset: this.strokeDashoffset,
        transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
      };
    },

    // 圆环底色样式
    trailPathStyle: function trailPathStyle() {
      return {
        strokeDasharray: this.perimeter * this.rate + 'px, ' + this.perimeter + 'px',
        strokeDashoffset: this.strokeDashoffset
      };
    },

    // 进度条颜色
    stroke: function stroke() {
      var ret = this.percentColor;
      return ret;
    }
  }
});
// CONCATENATED MODULE: ./components/progress/circle.vue?vue&type=script&lang=js&
 /* harmony default export */ var progress_circlevue_type_script_lang_js_ = (circlevue_type_script_lang_js_); 
// CONCATENATED MODULE: ./components/progress/circle.vue





/* normalize component */

var circle_component = Object(componentNormalizer["a" /* default */])(
  progress_circlevue_type_script_lang_js_,
  circlevue_type_template_id_9a60ccf2_render,
  circlevue_type_template_id_9a60ccf2_staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* hot reload */
if (false) { var circle_api; }
circle_component.options.__file = "components/progress/circle.vue"
/* harmony default export */ var circle = (circle_component.exports);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./components/progress/progress.vue?vue&type=script&lang=js&
//
//
//
//
//
//



/* harmony default export */ var progressvue_type_script_lang_js_ = ({
  name: 'MdsProgress',
  components: {
    LineProgress: line,
    CircleProgress: circle
  },
  props: {
    type: {
      type: String,
      default: 'line',
      validator: function validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['line', 'circle'].indexOf(value) !== -1;
      }
    }
  },
  data: function data() {
    return {};
  }
});
// CONCATENATED MODULE: ./components/progress/progress.vue?vue&type=script&lang=js&
 /* harmony default export */ var progress_progressvue_type_script_lang_js_ = (progressvue_type_script_lang_js_); 
// CONCATENATED MODULE: ./components/progress/progress.vue





/* normalize component */

var progress_component = Object(componentNormalizer["a" /* default */])(
  progress_progressvue_type_script_lang_js_,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* hot reload */
if (false) { var progress_api; }
progress_component.options.__file = "components/progress/progress.vue"
/* harmony default export */ var progress = (progress_component.exports);
// CONCATENATED MODULE: ./components/progress/index.js


/* istanbul ignore next */
progress.install = function (Vue) {
  Vue.component(progress.name, progress);
};
/* harmony default export */ var components_progress = __webpack_exports__["default"] = (progress);

/***/ })

/******/ });
});