{"version":3,"file":"index.vue.mjs","sources":["../../../../../packages/components/progress/src/index.vue"],"sourcesContent":["<script setup>\r\nimport { useNamespace, useStyle } from \"@ui-library/hook\";\r\nimport { ref, watch, computed } from \"vue\";\r\n\r\ndefineOptions({\r\n  name: \"x-progress\",\r\n});\r\n\r\n// 定义 props\r\nconst props = defineProps({\r\n  // 当前进度 (0 - 100)\r\n  value: {\r\n    type: [Number, String],\r\n    default: 0,\r\n  },\r\n\r\n  //   状态\r\n  status: {\r\n    type: String,\r\n    default: \"\",\r\n  },\r\n\r\n  //   自定义文本\r\n  format: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  color: {\r\n    type: String,\r\n    default: \"\",\r\n  },\r\n\r\n  type: {\r\n    type: String,\r\n    default: \"\",\r\n  },\r\n\r\n  //   进度条高度\r\n  height: {\r\n    type: [Number, String],\r\n    default: 20,\r\n  },\r\n});\r\n\r\nconst { bgColor, color, borderColor, height } = useStyle();\r\n\r\nconst styleBgColor = computed(() => bgColor(props.color));\r\nconst styleTextColor = computed(() => color(props.color));\r\nconst styleBorderColor = computed(() => borderColor(props.color));\r\nconst styleHeight = computed(() => height(props.height));\r\n\r\n// 定义内部状态\r\nconst progress = ref(0);\r\n\r\n// 监听传入的 value 值变化\r\nwatch(\r\n  () => props.value,\r\n  (newValue) => {\r\n    if (newValue >= 0 && newValue <= 100) {\r\n      progress.value = newValue;\r\n    } else {\r\n      console.warn(\"进度值应在 0 到 100 之间\");\r\n    }\r\n  },\r\n  { immediate: true } // 立即执行一次\r\n);\r\n\r\nconst ns = useNamespace(\"progress\");\r\n</script>\r\n\r\n<template>\r\n  <div :class=\"[ns.b(), ns.m(status)]\">\r\n    <!-- 外层容器 -->\r\n    <div :class=\"ns.e('bar')\" :style=\"{ ...styleBorderColor, ...styleHeight }\">\r\n      <!-- 内部填充部分，表示进度 -->\r\n      <div\r\n        :class=\"[ns.e('inner')]\"\r\n        :style=\"{ width: progress + '%', ...styleBgColor }\"\r\n      >\r\n        <div :class=\"ns.e('inner-content')\" v-if=\"$slots.default\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- 显示进度百分比 -->\r\n    <span v-if=\"!format\" :class=\"[ns.e('text')]\" :style=\"styleTextColor\"\r\n      >{{ progress }}%</span\r\n    >\r\n    <span v-else :class=\"[ns.e('text')]\" :style=\"styleTextColor\">{{\r\n      format\r\n    }}</span>\r\n  </div>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAc;AAMX;AACH;AACA;AACA,MAAM,KAAK,GAAG,OAiCZ,CAAC;AACH;AACA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;AAC3D;AACA,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAC1D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClE,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;AACzD;AACA;AACA,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACxB;AACA;AACA,KAAK;AACL,EAAE,MAAM,KAAK,CAAC,KAAK;AACnB,EAAE,CAAC,QAAQ,KAAK;AAChB,IAAI,IAAI,QAAQ,IAAI,CAAC,IAAI,QAAQ,IAAI,GAAG,EAAE;AAC1C,MAAM,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC;AAChC,KAAK,MAAM;AACX,MAAM,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;AACvC,KAAK;AACL,GAAG;AACH,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE;AACrB,CAAC,CAAC;AACF;AACA,MAAM,EAAE,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}