{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-progress/index.vue"],"sourcesContent":["<template>\r\n  <div :class=\"wrapClasses\">\r\n    <!-- 进度条 -->\r\n    <div :class=\"outerClasser\">\r\n      <!-- 内容样式 -->\r\n      <div :class=\"innerClasser\">\r\n        <!-- 背景 -->\r\n        <div :class=\"bgClasser\" :style=\"bgStyles\">\r\n          <!-- 百分比是否置于进度条内 -->\r\n          <div :class=\"`${prefixCls}-inner-text`\" v-if=\"textInside\">\r\n            {{ percent }}%\r\n          </div>\r\n        </div>\r\n        <!-- 已完成的分段百分比 -->\r\n        <div :class=\"successBgClasses\" :style=\"successBgStyles\"></div>\r\n      </div>\r\n    </div>\r\n    <!-- 状态图标 -->\r\n    <span :class=\"textClasses\" v-if=\"!hideInfo && !textInside\">\r\n      <slot>\r\n        <!-- 图标 -->\r\n        <span v-if=\"isStatus\" :class=\"textInnerClasses\">\r\n          <ivue-icon v-if=\"!icon\">{{ statusIcon }}</ivue-icon>\r\n          <i :class=\"icon\" v-else></i>\r\n        </span>\r\n        <!-- 文案 -->\r\n        <span v-else :class=\"textInnerClasses\">{{ percent }}%</span>\r\n      </slot>\r\n    </span>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, ref, onMounted, watch } from 'vue';\r\nimport { oneOf } from '../../utils/assist';\r\n\r\nimport IvueIcon from '../ivue-icon/index.vue';\r\n\r\n// type\r\nimport type { Props } from './types/progress';\r\n\r\nconst prefixCls = 'ivue-progress';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['on-status-change'],\r\n  props: {\r\n    /**\r\n     * 状态，可选值为normal、active、wrong、success\r\n     *\r\n     * @type {String}\r\n     */\r\n    status: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, [\r\n          'normal',\r\n          'active',\r\n          'wrong',\r\n          'success',\r\n          'warning',\r\n        ]);\r\n      },\r\n      default: 'normal',\r\n    },\r\n    /**\r\n     * 隐藏数值或状态图标\r\n     *\r\n     * @type  {Boolean}\r\n     */\r\n    hideInfo: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 百分比是否置于进度条内\r\n     *\r\n     * @type  {Boolean}\r\n     */\r\n    textInside: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 已完成的分段百分比\r\n     *\r\n     * @type {Number}\r\n     */\r\n    successPercent: {\r\n      type: Number,\r\n      default: 0,\r\n    },\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 {Number}\r\n     */\r\n    strokeWidth: {\r\n      type: Number,\r\n      default: 10,\r\n    },\r\n    /**\r\n     * 是否在垂直方向显示\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    vertical: {\r\n      type: Boolean,\r\n      default: false,\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    },\r\n    /**\r\n     * 进度条阴影颜色\r\n     *\r\n     * @type {String}\r\n     */\r\n    boxShadowColor: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 状态图标\r\n     *\r\n     * @type {String}\r\n     */\r\n    icon: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 是否为动画进度条\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    indeterminate: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 控制动画进度条速度\r\n     *\r\n     * @type {Number}\r\n     */\r\n    duration: {\r\n      type: Number,\r\n      default: 3,\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // data\r\n    const currentStatus = ref<string>(props.status);\r\n\r\n    // computed\r\n\r\n    // 外层样式\r\n    const wrapClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}`,\r\n        `${prefixCls}-${currentStatus.value}`,\r\n        {\r\n          [`${prefixCls}-show-info`]: !props.hideInfo && !props.textInside,\r\n          [`${prefixCls}-vertical`]: props.vertical,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 进度条样式\r\n    const outerClasser = computed(() => {\r\n      return `${prefixCls}-outer`;\r\n    });\r\n\r\n    // 内容样式\r\n    const innerClasser = computed(() => {\r\n      return `${prefixCls}-inner`;\r\n    });\r\n\r\n    //背景样式\r\n    const bgClasser = computed(() => {\r\n      return {\r\n        [`${prefixCls}-bg`]: true,\r\n        [`${prefixCls}-indeterminate`]: props.indeterminate,\r\n      };\r\n    });\r\n\r\n    //状态样式\r\n    const textClasses = computed(() => {\r\n      return `${prefixCls}-text`;\r\n    });\r\n\r\n    // 文字样式\r\n    const textInnerClasses = computed(() => {\r\n      return `${prefixCls}-text`;\r\n    });\r\n\r\n    // 已完成的分段百分比 class\r\n    const successBgClasses = computed(() => {\r\n      return `${prefixCls}-success-bg`;\r\n    });\r\n\r\n    // 已完成的分段百分比 style\r\n    const successBgStyles = computed(() => {\r\n      let style = {};\r\n\r\n      // 垂直方向\r\n      if (props.vertical) {\r\n        style = {\r\n          height: `${props.successPercent}%`,\r\n          width: `${props.strokeWidth}px`,\r\n        };\r\n      } else {\r\n        style = {\r\n          width: `${props.successPercent}%`,\r\n          height: `${props.strokeWidth}px`,\r\n        };\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    //背景样式\r\n    const bgStyles = computed(() => {\r\n      let style: {\r\n        height?: string;\r\n        width?: string;\r\n        boxShadow?: string;\r\n        animationDuration?: string;\r\n        backgroundColor?: string;\r\n        backgroundImage?: string;\r\n      } = {};\r\n\r\n      // 垂直方向\r\n      if (props.vertical) {\r\n        style = {\r\n          height: `${props.percent}%`,\r\n          width: `${props.strokeWidth}px`,\r\n        };\r\n      } else {\r\n        style = {\r\n          width: `${props.percent}%`,\r\n          height: `${props.strokeWidth}px`,\r\n          boxShadow: `0 0px 5px ${props.boxShadowColor}`,\r\n        };\r\n      }\r\n\r\n      // 是否有进度条颜色\r\n      if (props.strokeColor) {\r\n        if (typeof props.strokeColor === 'string') {\r\n          style.backgroundColor = props.strokeColor;\r\n        } else {\r\n          style.backgroundImage = `linear-gradient(to right, ${props.strokeColor[0]} 0%, ${props.strokeColor[1]} 100%)`;\r\n        }\r\n      }\r\n\r\n      style.animationDuration = `${props.duration}s`;\r\n\r\n      return style;\r\n    });\r\n\r\n    // 状态图标\r\n    const statusIcon = computed(() => {\r\n      let type = '';\r\n\r\n      // 警告\r\n      if (currentStatus.value === 'warning') {\r\n        type = 'warning';\r\n      }\r\n\r\n      // 错误\r\n      if (currentStatus.value === 'wrong') {\r\n        type = 'cancel';\r\n      }\r\n\r\n      // 成功\r\n      if (currentStatus.value === 'success') {\r\n        type = 'check_circle';\r\n      }\r\n\r\n      return type;\r\n    });\r\n\r\n    // 是否有状态\r\n    const isStatus = computed(() => {\r\n      return (\r\n        currentStatus.value === 'wrong' ||\r\n        currentStatus.value === 'success' ||\r\n        currentStatus.value === 'warning'\r\n      );\r\n    });\r\n\r\n    // methods\r\n\r\n    // 状态事件\r\n    const handleStatus = (init: boolean) => {\r\n      // 初始化\r\n      if (init) {\r\n        currentStatus.value = 'normal';\r\n\r\n        emit('on-status-change', 'normal');\r\n      }\r\n      // 成功状态\r\n      else {\r\n        if (parseInt(`${props.percent}`, 10) == 100) {\r\n          currentStatus.value = 'success';\r\n\r\n          emit('on-status-change', 'success');\r\n        }\r\n      }\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      handleStatus(false);\r\n    });\r\n\r\n    // watch\r\n\r\n    // 监听进度条\r\n    watch(\r\n      () => props.percent,\r\n      (value, oldValue) => {\r\n        if (value < oldValue) {\r\n          handleStatus(true);\r\n        } else {\r\n          handleStatus(false);\r\n        }\r\n      }\r\n    );\r\n\r\n    // 监听状态\r\n    watch(\r\n      () => props.status,\r\n      (status) => {\r\n        currentStatus.value = status;\r\n      }\r\n    );\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      currentStatus,\r\n\r\n      // computed\r\n      wrapClasses,\r\n      outerClasser,\r\n      innerClasser,\r\n      bgClasser,\r\n      bgStyles,\r\n      textClasses,\r\n      textInnerClasses,\r\n      statusIcon,\r\n      isStatus,\r\n      successBgClasses,\r\n      successBgStyles,\r\n\r\n      // methods\r\n      handleStatus,\r\n    };\r\n  },\r\n  components: {\r\n    IvueIcon,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_normalizeClass","_createCommentVNode","_createElementVNode","_normalizeStyle","_openBlock","_createElementBlock","_withCtx","_Fragment"],"mappings":";;;;;+BACEA,iBA4BM,WAAA,CAAA,CAAA;;IA3BJ,KAAA,EAAYC,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,GACZ,EAAA;AAAA,IAAAC,mBAAW,sBAAE,CAAA;AAAA,IAAAC,mBAAA,KAAA,EAAA;AAAA,MACX,KAAA,EAAaF,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,KACb,EAAA;AAAA,MAAAC,mBAAW,4BAAE,CAAA;AAAA,MAAAC,mBAAA,KAAA,EAAA;AAAA,QACX,KAAA,EAAWF,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA,OACX,EAAA;AAAA,QAAAC,mBAAW,gBAAE,CAAA;AAAA,QAAAC,mBAAiB,KAAE,EAAA;AAAA,UAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,UAC9B,KAAA,EAAoBG,cAAA,CAAA,IAAA,CAAA,QAAA,CAAA;AAAA,SAC0B,EAAA;AAAA,UAA9CF,mBAAA,sEAAA,CAAA;AAAA,UAAA,IAAA,CAAA,UAAA,IAAAG,SAAW,EAAA,qBAAK,KAAS,EAAA;AAAA,YAAA,GAAA,EAAA,CAAA;AAAA;yDAI3BH,kBAAkB,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,WAC4C,CAAA,CAAA;AAAA,QAAAA,mBAAnD,0DAAE,CAAA;AAAA,QAAAC,mBAAwB,KAAE,EAAA;AAAA,UAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,gBAAA,CAAA;AAAA;;SAG3C,CAAA,CAAA;AAAA,OACkC,CAAQ,CAAA;AAAA,IAA1CC,mBAAA,4BAAA,CAAA;AAAA,IAAA,CAAA,KAAA,QAAA,IAAA,CAAA,KAAA,UAAA,IAAAG,SAAA,uBAAc,MAAW,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,MACvB,KAAA,EAQOJ,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,KAAA,EAAA;AAAA,iBANO,IAAQ,CAAA,MAAA,EAAA,SAAA,EAAA,IAAA,MAAA;AAAA,QAApBC,mBAAA,gBAAA,CAAA;AAAA,QAAA,IAAA,CAAA,QAAA,IAAAG,SAA4B,EAAA,EAAEC,mBAAA,MAAA,EAAA;AAAA,UAAA,GAAA,EAAA,CAAA;AAAA,iBACVL,cAAI,CAAA,IAAA,CAAA,gBAAA,CAAA;AAAA,SAAA,EAAA;AAAA,qEAAK,EAAA,EAAU,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,YAAA,OAAA,EAAAM,QAAA,MAAA;AAAA;;;0BAC5B,EAAA,EAAMD,mBAAA,GAAA,EAAA;AAAA,YAAA,GAAA,EAAA,CAAA;AAAA;WAGjB,EAAA,MAAA,CAAA,CAAA,CAAA;AAAA,SAAA,EADA,gBACA,EAAA,EAA4DA,mBAAAE,QAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,UAAAN,mBAAzC,gBAAE,CAAA;AAAA,UAAqBC,mBAAA,MAAA,EAAA;AAAA,YAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,gBAAA,CAAA;AAAA;;;;;;;;;;"}