{"version":3,"file":"item.mjs","sources":["../../../../../../packages/components/steps/src/item.vue"],"sourcesContent":["<template>\n  <div\n    :style=\"style\"\n    :class=\"[\n      ns.b(),\n      ns.is(isSimple ? 'simple' : parent.props.direction),\n      ns.is('flex', isLast && !space && !isCenter),\n      ns.is('center', isCenter && !isVertical && !isSimple),\n    ]\"\n  >\n    <!-- icon & line -->\n    <div :class=\"[ns.e('head'), ns.is(currentStatus)]\">\n      <div v-if=\"!isSimple\" :class=\"ns.e('line')\">\n        <i :class=\"ns.e('line-inner')\" :style=\"lineStyle\"></i>\n      </div>\n\n      <div :class=\"[ns.e('icon'), ns.is(icon ? 'icon' : 'text')]\">\n        <slot\n          v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\"\n          name=\"icon\"\n        >\n          <el-icon v-if=\"icon\" :class=\"ns.e('icon-inner')\">\n            <component :is=\"icon\" />\n          </el-icon>\n          <div v-if=\"!icon && !isSimple\" :class=\"ns.e('icon-inner')\">\n            {{ index + 1 }}\n          </div>\n        </slot>\n        <el-icon v-else :class=\"[ns.e('icon-inner'), ns.is('status')]\">\n          <check v-if=\"currentStatus === 'success'\" />\n          <close v-else />\n        </el-icon>\n      </div>\n    </div>\n    <!-- title & description -->\n    <div :class=\"ns.e('main')\">\n      <div :class=\"[ns.e('title'), ns.is(currentStatus)]\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"isSimple\" :class=\"ns.e('arrow')\"></div>\n      <div v-else :class=\"[ns.e('description'), ns.is(currentStatus)]\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  reactive,\n  watch,\n} from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Close, Check } from '@element-plus/icons-vue'\n\nimport { useNamespace } from '@element-plus/hooks'\nimport type { Ref, PropType, Component } from 'vue'\n\nexport interface IStepsProps {\n  space: number | string\n  active: number\n  direction: string\n  alignCenter: boolean\n  simple: boolean\n  finishStatus: string\n  processStatus: string\n}\n\nexport interface StepItemState {\n  uid: number\n  currentStatus: string\n  setIndex: (val: number) => void\n  calcProgress: (status: string) => void\n}\n\nexport interface IStepsInject {\n  props: IStepsProps\n  steps: Ref<StepItemState[]>\n}\n\nexport default defineComponent({\n  name: 'ElStep',\n  components: {\n    ElIcon,\n    Close,\n    Check,\n  },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    icon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    description: {\n      type: String,\n      default: '',\n    },\n    status: {\n      type: String,\n      default: '',\n      validator: (val: string): boolean =>\n        ['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  setup(props) {\n    const ns = useNamespace('step')\n    const index = ref(-1)\n    const lineStyle = ref({})\n    const internalStatus = ref('')\n    const parent: IStepsInject = inject('ElSteps')\n    const currentInstance = getCurrentInstance()\n\n    onMounted(() => {\n      watch(\n        [\n          () => parent.props.active,\n          () => parent.props.processStatus,\n          () => parent.props.finishStatus,\n        ],\n        ([active]) => {\n          updateStatus(active)\n        },\n        { immediate: true }\n      )\n    })\n\n    onBeforeUnmount(() => {\n      parent.steps.value = parent.steps.value.filter(\n        (instance) => instance.uid !== currentInstance.uid\n      )\n    })\n\n    const currentStatus = computed(() => {\n      return props.status || internalStatus.value\n    })\n    const prevStatus = computed(() => {\n      const prevStep = parent.steps.value[index.value - 1]\n      return prevStep ? prevStep.currentStatus : 'wait'\n    })\n    const isCenter = computed(() => {\n      return parent.props.alignCenter\n    })\n    const isVertical = computed(() => {\n      return parent.props.direction === 'vertical'\n    })\n    const isSimple = computed(() => {\n      return parent.props.simple\n    })\n    const stepsCount = computed(() => {\n      return parent.steps.value.length\n    })\n    const isLast = computed(() => {\n      return (\n        parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid\n      )\n    })\n    const space = computed(() => {\n      return isSimple.value ? '' : parent.props.space\n    })\n    const style = computed(() => {\n      const style: Record<string, unknown> = {\n        flexBasis:\n          typeof space.value === 'number'\n            ? `${space.value}px`\n            : space.value\n            ? space.value\n            : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,\n      }\n      if (isVertical.value) return style\n      if (isLast.value) {\n        style.maxWidth = `${100 / stepsCount.value}%`\n      }\n      return style\n    })\n\n    const setIndex = (val) => {\n      index.value = val\n    }\n    const calcProgress = (status) => {\n      let step = 100\n      const style: Record<string, unknown> = {}\n\n      style.transitionDelay = `${150 * index.value}ms`\n      if (status === parent.props.processStatus) {\n        step = 0\n      } else if (status === 'wait') {\n        step = 0\n        style.transitionDelay = `${-150 * index.value}ms`\n      }\n      style.borderWidth = step && !isSimple.value ? '1px' : 0\n      style[\n        parent.props.direction === 'vertical' ? 'height' : 'width'\n      ] = `${step}%`\n      lineStyle.value = style\n    }\n    const updateStatus = (activeIndex) => {\n      if (activeIndex > index.value) {\n        internalStatus.value = parent.props.finishStatus\n      } else if (activeIndex === index.value && prevStatus.value !== 'error') {\n        internalStatus.value = parent.props.processStatus\n      } else {\n        internalStatus.value = 'wait'\n      }\n      const prevChild = parent.steps.value[stepsCount.value - 1]\n      if (prevChild) prevChild.calcProgress(internalStatus.value)\n    }\n\n    const stepItemState = reactive({\n      uid: computed(() => currentInstance.uid),\n      currentStatus,\n      setIndex,\n      calcProgress,\n    })\n    parent.steps.value = [...parent.steps.value, stepItemState]\n\n    return {\n      ns,\n      index,\n      lineStyle,\n      currentStatus,\n      isCenter,\n      isVertical,\n      isSimple,\n      isLast,\n      space,\n      style,\n      parent,\n      setIndex,\n      calcProgress,\n      updateStatus,\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle","_createCommentVNode"],"mappings":"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"}