{"version":3,"file":"progress2.mjs","sources":["../../../../../../packages/components/progress/src/progress.vue"],"sourcesContent":["<template>\r\n  <div :class=\"[ns.b(), ns.is(status)]\">\r\n    <progress\r\n      ref=\"progressRef\"\r\n      :class=\"[\r\n        ns.e('content'),\r\n        ns.e(stroke),\r\n        ns.e(noRound ? '' : 'border-radius'),\r\n        ns.e(indeterminate ? 'indeterminate' : ''),\r\n        ns.e(indeterminate ? `indeterminate-${stroke}` : '')\r\n      ]\"\r\n      :style=\"progressStyle\"\r\n      :value=\"percent\"\r\n      :max=\"100\"\r\n    ></progress>\r\n    <span v-if=\"textInside\" :class=\"ns.e('innerText')\" :style=\"textInsideStyle\">{{ percent }}%</span>\r\n    <div\r\n      v-if=\"(!hideInfo || $slots.default) && !textInside\"\r\n      :class=\"[ns.e('text'), ns.is(stroke)]\"\r\n      :style=\"{ fontSize: `${progressTextSize}px`, color: textColor }\"\r\n    >\r\n      <slot v-bind=\"slotData\">\r\n        <span v-if=\"!status || stroke === 'custom'\">{{ content }}</span>\r\n        <sg-icon v-else><component :is=\"statusIcon\" /></sg-icon>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { computed, defineComponent, ref, onMounted, watch } from 'vue'\r\nimport { SgIcon } from '@sgui-plus/components/icon'\r\nimport {\r\n  Warning,\r\n  Success,\r\n  Error,\r\n  Check,\r\n  Close,\r\n} from '@sgui-plus/icons-vue'\r\nimport { useResizeObserver, useDebounceFn  } from '@vueuse/core'\r\nimport { progressProps } from './progress'\r\nimport type { CSSProperties } from 'vue'\r\nimport { useNamespace } from '@sgui-plus/hooks'\r\n\r\nexport default defineComponent({\r\n  name: 'SgProgress',\r\n  components: {\r\n    SgIcon,\r\n    Warning,\r\n    Success,\r\n    Error,\r\n    Check,\r\n    Close,\r\n  },\r\n  props: progressProps,\r\n\r\n  setup(props) {\r\n\r\n    const ns = useNamespace('progress')\r\n    const progressRef = ref<HTMLElement | null>(null)\r\n    const progressWidth = ref<number>(0)\r\n\r\n    const textInsideStyle = computed<CSSProperties>(() => {\r\n      const position = props.percent ? progressWidth.value * props.percent / 100 - 40 : 0\r\n      return {\r\n        color: props.textColor,\r\n        position: 'absolute',\r\n        left: position + 'px',\r\n      }\r\n    })\r\n    const progressStyle = computed<CSSProperties>(() => {\r\n      return {\r\n        height: props.strokeWidth + 'px',\r\n        borderRadius: props.noRound ? 'inherit' : '100px'\r\n      }\r\n    })\r\n    const statusIcon = computed(() => {\r\n      if (props.status === 'warning') {\r\n        return Warning\r\n      }\r\n      return props.status === 'success' ? Success : Error\r\n    })\r\n    const stroke = computed(() => {\r\n      let ret: string\r\n      switch (props.status) {\r\n        case '':\r\n          ret = 'primary'\r\n          break\r\n        case 'primary':\r\n        case 'success':\r\n        case 'warning':\r\n          ret = props.status\r\n          break\r\n        case 'exception':\r\n          ret = 'error'\r\n          break\r\n        default:\r\n          ret = 'custom'\r\n          setProperty(progressRef.value as HTMLElement, '--custom-progress-color', props.status)\r\n      }\r\n      return ret\r\n    })\r\n    const progressTextSize = computed(() => {\r\n      return 12 + props.strokeWidth * 0.4\r\n    })\r\n    const content = computed(() => props.format(props.percent))\r\n    const slotData = computed(() => {\r\n      return {\r\n        percent: props.percent,\r\n      }\r\n    })\r\n\r\n    const setProperty = (dom: HTMLElement | null, attribute: string, value: string): void => {\r\n      dom?.style?.setProperty(attribute, value)\r\n    }\r\n    const removeProgressValue = () => {\r\n      let timer = setTimeout(() => {\r\n        const progressDom = progressRef.value\r\n        progressDom && progressDom.removeAttribute('value')\r\n        clearTimeout(timer)\r\n      })\r\n    }\r\n    const setDurationVar = () => {\r\n      if (!props.indeterminate) return\r\n      setProperty(progressRef.value as HTMLElement, '--progress-duration', props.duration + 's')\r\n    }\r\n    const setDurationAndProgressValue = () => {\r\n      if (!props.indeterminate) return\r\n      setDurationVar()\r\n      removeProgressValue()\r\n    }\r\n    const setInnerColor = () => {\r\n      setProperty(progressRef.value  as HTMLElement, '--progress-inner-color', props.innerColor || '#ebeef5')\r\n    }\r\n\r\n    watch(() => [props.indeterminate, props.duration], setDurationAndProgressValue)\r\n    watch(() => props.innerColor, setInnerColor)\r\n\r\n    onMounted(() => {\r\n      setDurationAndProgressValue()\r\n      setInnerColor()\r\n\r\n      // console.log('progressRef123123', progressRef)\r\n      useResizeObserver(progressRef.value as HTMLElement, useDebounceFn((entries) => {\r\n        const entry = entries[0]\r\n        const { width } = entry.contentRect\r\n        progressWidth.value = width\r\n      }, 100))\r\n    })\r\n\r\n    return {\r\n      progressStyle,\r\n      textInsideStyle,\r\n      statusIcon,\r\n      progressTextSize,\r\n      content,\r\n      slotData,\r\n      stroke,\r\n      progressRef,\r\n      ns\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_normalizeClass","_createElementVNode","_normalizeStyle","_openBlock","_createElementBlock","_toDisplayString","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_withCtx"],"mappings":";;;;;;;6BACEA,gBAyBM,CAAA,SAAA,CAAA,CAAA;;IAxBJ,KAYY,EAAAC,cAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AAVJ,IAAAC,kBAAA,CAAA,UAAA,EAAA;AAAA,MAAa,GAAA,EAAA,aAAA;AAAA,MAAA,KAAA,EAA0BD,cAAW,CAAA;AAAA,QAAY,QAAG,CAAE,CAAA,SAAA,CAAA;AAAA,QAA0C,QAAG,CAAE,CAAA,IAAA,CAAA,MAAA,CAAA;AAAA,QAAgD,IAAA,CAAA,EAAA,CAAG,EAAE,IAAa,CAAA,OAAA,GAAA,EAAA,GAAA,eAAA,CAAA;AAAA,QAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,IAAA,CAAA,aAAA,GAAA,eAAA,GAAA,EAAA,CAAA;AAOzL,QAAA,IAAA,CAAK,0BAAE,CAAa,cAAA,EAAA,IAAA,CAAA,MAAA,CAAA,CAAA,GAAA,EAAA,CAAA;AAAA,OACpB,CAAA;AAAA,MACA,OAAKE,cAAG,CAAA,IAAA,CAAA,aAAA,CAAA;AAAA,MAAA,KAAA,EAAA,IAAA,CAAA,OAAA;AAEC,MAAA,GAAA,EAAA,GAAA;AAAA,KAAqF,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,CAAA;AAAA,IAAA,IAAA,CAAA,UAAA,IAAAC,SAAA,EAA7D,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,MAAgB,GAAK,EAAA,CAAA;AAAA,MAAA,KAAA,EAAAJ,cAAA,CAAsB,QAAO,CAAI,CAAA,WAAA,CAAA,CAAA;AAAA,MAAA,KAAA,EAAAE,cAAA,CAAA,IAAA,CAAA,eAAA,CAAA;AAEhF,KAAA,EAAAG,eAAA,CAAY,IAAO,CAAA,OAAA,CAAA,GAAO,GAAM,EAAA,CAAU,CADpD,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,IAAA,CAAA,CAAA,IAAA,CAAA,QAAA,IAAA,IAAA,CAAA,MAAA,CAAA,OAAA,KAAA,CAAA,IAAA,CAAA,UAAA,IAAAH,SAAA,EAEe,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,MACZ,GAAK,EAAA,CAAA;AAAA,MAAA,KAAA,EAAAJ,cAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,IAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAEN,MAAA,KAAA,EAAAE,cAAA,CAGO,iDAHO,IAAQ,CAAA,SAAA,EAAA,CAAA;AAAA,KAAA,EAAA;AACpB,MAAAK,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAgEC,gCAAjB,CAAO,CAAA,EAAA,MAAA;AAAA,QAAA,CAAA,IAAA,CAAA,MAAA,IAAA,IAAA,CACtD,MAAwD,KAAA,QAAA,IAAAN,SAAA,EAAA,EAAAC,kBAAA,CAAV,MAA9B,EAAA,UAAA,EAAAC,eAAA,CAAA,IAAA,CAAA,OAAA,CAAA,EAAA,CAAA,CAAA,KAAAF,SAAA,EAAA,EAAAO,WAAA,CAAA,kBAAA,EAA8B,EAAd,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,UAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;;;;;;;;;;;;;"}