ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-circular/circular.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"circular.mjs","sources":["../../../../../src/components/ivue-circular/circular.vue"],"sourcesContent":["<template>\r\n  <div :class=\"wrapClasses\" :style=\"wrapStyles\">\r\n    <svg viewBox=\"0 0 100 100\">\r\n      <defs v-if=\"strokeColorIsString\">\r\n        <linearGradient :id=\"id\" x1=\"100%\" y1=\"0%\" x2=\"0%\" y2=\"0%\">\r\n          <stop offset=\"0%\" :stop-color=\"`${strokeColor[0]}`\" />\r\n          <stop offset=\"100%\" :stop-color=\"`${strokeColor[1]}`\" />\r\n        </linearGradient>\r\n      </defs>\r\n      <path\r\n        :d=\"pathString\"\r\n        :stroke=\"trailColor\"\r\n        :stroke-width=\"trailWidth\"\r\n        :fill-opacity=\"0\"\r\n        :style=\"trailStyle\"\r\n        :stroke-linecap=\"strokeLinecap\"\r\n      />\r\n\r\n      <path\r\n        fill-opacity=\"0\"\r\n        :d=\"pathString\"\r\n        :stroke-linecap=\"strokeLinecap\"\r\n        :stroke=\"strokeValue\"\r\n        :stroke-width=\"computedStrokeWidth\"\r\n        :style=\"pathStyles\"\r\n      />\r\n    </svg>\r\n    <!-- 文字 -->\r\n    <div :class=\"`${prefixCls}-inner`\">\r\n      <slot></slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed, defineComponent, ref } from 'vue';\r\n\r\nimport { oneOf } from '../../utils/assist';\r\nimport { getRandomStr } from '../../utils/helpers';\r\n\r\n// type\r\nimport { Props } from './types/circular';\r\n\r\nconst prefixCls = 'ivue-circular';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 百分比\r\n     *\r\n     * @type {Number}\r\n     */\r\n    percent: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * 圆圈大小，单位 px\r\n     *\r\n     * @type {String | Number}\r\n     */\r\n    size: {\r\n      type: [String, Number],\r\n      default: 120,\r\n    },\r\n    /**\r\n     * 是否显示为仪表盘\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    dashboard: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 进度环的线宽\r\n     *\r\n     * @type {Number}\r\n     */\r\n    strokeWidth: {\r\n      type: Number,\r\n      default: 6,\r\n    },\r\n    /**\r\n     * 进度环背景的颜色\r\n     *\r\n     * @type {String}\r\n     */\r\n    trailColor: {\r\n      type: String,\r\n      default: '#F8F9FD',\r\n    },\r\n    /**\r\n     * 进度环背景的线宽\r\n     *\r\n     * @type {Number}\r\n     */\r\n    trailWidth: {\r\n      type: Number,\r\n      default: 6,\r\n    },\r\n    /**\r\n     * 进度环顶端的形状，可选值为square（方）和round（圆）\r\n     *\r\n     * @type {String}\r\n     */\r\n    strokeLinecap: {\r\n      type: null,\r\n      validator(value: string) {\r\n        return oneOf(value, ['square', 'round']);\r\n      },\r\n      default: 'round',\r\n    },\r\n    /**\r\n     * 进度环的颜色\r\n     *\r\n     * @type {String | Array}\r\n     */\r\n    strokeColor: {\r\n      type: [String, Array],\r\n      default: '#5B8EFF',\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // ref\r\n    const id = ref<string>(`ivu-chart-circle-${getRandomStr(3)}`);\r\n\r\n    // 外层样式\r\n    const wrapClasses = computed(() => {\r\n      return [prefixCls];\r\n    });\r\n\r\n    // 外层样式style\r\n    const wrapStyles = computed(() => {\r\n      const regexp = new RegExp(/[a-zA-Z]/g);\r\n\r\n      // 是否有单位\r\n      const isUnit = regexp.test(`${props.size}`);\r\n\r\n      return {\r\n        height: !isUnit ? `${props.size}px` : props.size,\r\n        width: !isUnit ? `${props.size}px` : props.size,\r\n      };\r\n    });\r\n\r\n    // 圆角大小\r\n    const radius = computed(() => {\r\n      return 50 - props.strokeWidth / 2;\r\n    });\r\n\r\n    // 长度\r\n    const len = computed(() => {\r\n      return Math.PI * 2 * radius.value;\r\n    });\r\n\r\n    // 路径\r\n    const pathString = computed(() => {\r\n      // 显示为仪表盘\r\n      if (props.dashboard) {\r\n        return `\r\n                M 50,50 m 0,\r\n                ${radius.value}\r\n                    a ${radius.value},${radius.value} 0 1 1 0,\r\n                    -${2 * radius.value} a ${radius.value},\r\n                    ${radius.value} 0 1 1 0,${2 * radius.value}`;\r\n      }\r\n      // 普通显示\r\n      else {\r\n        return `M 50,50 m 0,\r\n                -${radius.value} a ${radius.value},\r\n                ${radius.value} 0 1 1 0,\r\n                ${2 * radius.value} a ${radius.value},\r\n                ${radius.value} 0 1 1 0,-${2 * radius.value}`;\r\n      }\r\n    });\r\n\r\n    // 轨道样式\r\n    const trailStyle = computed(() => {\r\n      let style = {};\r\n\r\n      if (props.dashboard) {\r\n        style = {\r\n          'stroke-dasharray': `${len.value - 75}px ${len.value}px`,\r\n          'stroke-dashoffset': `-${75 / 2}px`,\r\n          transition:\r\n            'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s',\r\n        };\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    // 进度值\r\n    const strokeValue = computed(() => {\r\n      let color = props.strokeColor;\r\n\r\n      if (typeof props.strokeColor !== 'string') {\r\n        color = `url(#${id.value})`;\r\n      }\r\n\r\n      return color as string;\r\n    });\r\n\r\n    // 计算进度条宽度\r\n    const computedStrokeWidth = computed(() => {\r\n      return props.percent === 0 && props.dashboard ? 0 : props.strokeWidth;\r\n    });\r\n\r\n    // 路径样式\r\n    const pathStyles = computed(() => {\r\n      let style = {};\r\n\r\n      // 仪表盘\r\n      if (props.dashboard) {\r\n        style = {\r\n          'stroke-dasharray': `${(props.percent / 100) * (len.value - 75)}px ${\r\n            len.value\r\n          }px`,\r\n          'stroke-dashoffset': `-${75 / 2}px`,\r\n          transition:\r\n            'stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s',\r\n        };\r\n      } else {\r\n        style = {\r\n          'stroke-dasharray': `${len.value}px ${len.value}px`,\r\n          'stroke-dashoffset': `${((100 - props.percent) / 100) * len.value}px`,\r\n          transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease',\r\n        };\r\n      }\r\n      return style;\r\n    });\r\n\r\n    // 进度环的颜色是否是字符串\r\n    const strokeColorIsString = computed(() => {\r\n      return typeof props.strokeColor !== 'string';\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // id\r\n      id,\r\n      // computed\r\n      wrapClasses,\r\n      wrapStyles,\r\n      pathString,\r\n      trailStyle,\r\n      strokeValue,\r\n      computedStrokeWidth,\r\n      pathStyles,\r\n      strokeColorIsString,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_createCommentVNode","_normalizeStyle"],"mappings":";;;;;;;;;;;AACa,SAAA,YAAA,IAAE,EAAA,MAAA,EAAW,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;EAAQ,OAAAA,SAAA,EAAY,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,yBAC1C,CAAA,IAAA,CAwBM,UAAA,CAAA;AAAA,GAAA,EAAA;AAAA,oCAvBJ,CAAA,KAAA,EAKO,UAAA,EAAA;AAAA,MAAA,KAJL,kCAAuB,EAAAD,kBAAA,CAAA,QAAA,UAAA,EAAA;AAAA,QAAWE,mBAAA,gBAAA,EAAA;AAAA,UAAC,IAAG,IAAI,CAAA,EAAA;AAAA,UAAC,EAAG,EAAA,MAAA;AAAA,UAAK,EAAG,EAAA,IAAA;AAAA,UAAA,EAAA,EAAA,IAAA;AAAA,UACpD,EAAA,EAAA,IAAA;AAAA,SAAA,EAAA;AAAA,UAAkCA,mBAAA,MAAA,EAAA;AAAA,YAAA,MAAA,EAAA,IAAA;AAAA,YAClC,YAAA,EAAwD,CAAA,EAAA,IAAA,CAAA,WAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,WAAA,EAAlD,IAAM,EAAA,CAAA,EAAO,UAAA,CAAA;AAAA,UAAiBA,mBAAA,MAAA,EAAA;AAAA,YAAA,MAAA,EAAA,MAAA;AAAA;;;OAGxC,CAAA,IACIC,kBAAY,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAAD,mBACL,MAAU,EAAA;AAAA,QAClB,GAAA,IAAA,CAAA,UAAA;AAAA,QACA,QAAA,IAAA,CAAA,UAAA;AAAA,QACA,gBAAK,IAAA,CAAA,UAAA;AAAA,QACL,cAAc,EAAA,CAAA;AAAA,QAAA,KAAA,EAAAE,cAAA,CAAA,IAAA,CAAA,UAAA,CAAA;AAAA,QAGjB,kBAOE,IAAA,CAAA,aAAA;AAAA,OAAA,EANA,IAAgB,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,MACFF,mBAAA,MAAA,EAAA;AAAA,QACb,cAAc,EAAA,GAAA;AAAA,QACd,GAAQ,IAAA,CAAA,UAAA;AAAA,QACR,kBAAc,IAAA,CAAA,aAAA;AAAA,QACd,QAAK,IAAA,CAAA,WAAA;AAAA,QAAA,gBAAA,IAAA,CAAA,mBAAA;AAAA;OAGV,EAAW,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,KACX,CAAA;AAAA,IAAWC,mBAAA,gBAAA,CAAA;AAAA,IAAAD,mBAAA,KAAA,EAAA;AAAA,MACT,KAAa,EAAAD,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,MAAA,CAAA,CAAA;AAAA,KAAA,EAAA;AAAA;;;;;;;;"}