{"version":3,"file":"item.mjs","sources":["../../../../../../packages/components/steps/src/item.vue"],"sourcesContent":["<template>\r\n  <div\r\n    :style=\"style\"\r\n    :class=\"[\r\n      'sg-step',\r\n      isSimple ? 'is-simple' : `is-${parent.props.direction}`,\r\n      isLast && !space && !isCenter && 'is-flex',\r\n      isCenter && !isVertical && !isSimple && 'is-center',\r\n    ]\"\r\n    @click=\"handleItemClick(index)\"\r\n  >\r\n    <!-- icon & line -->\r\n    <div :class=\"['sg-step__head', `is-${currentStatus}`]\">\r\n      <div :class=\"['sg-step__icon-wrap', `is-${icon ? 'icon' : 'text'}`]\">\r\n        <div :class=\"['sg-step__icon', `is-${icon ? 'icon' : 'text'}`]\">\r\n          <slot\r\n            v-if=\"parent.props.activeStep <= index ||\r\n              parent.props.completedSymbol !== 'check' &&\r\n              parent.props.completedSymbol !== 'error'\"\r\n            name=\"icon\"\r\n          >\r\n            <sg-icon v-if=\"icon\" class=\"sg-step__icon-inner\">\r\n              <component :is=\"icon\" />\r\n            </sg-icon>\r\n            <div v-if=\"!icon && !isSimple\" class=\"sg-step__icon-inner\">\r\n              {{ index + 1 }}\r\n            </div>\r\n          </slot>\r\n          <sg-icon v-else class=\"sg-step__icon-inner is-status\">\r\n            <Finished v-if=\"parent.props.completedSymbol === 'check'\" />\r\n            <Close v-else />\r\n          </sg-icon>\r\n        </div>\r\n      </div>\r\n      <div v-if=\"!isSimple && !isVertical && isContentRow\" :class=\"['sg-step__title', `is-${currentStatus}`]\"> <slot name=\"title\">{{ title }}</slot></div>\r\n      <div v-if=\"!isSimple\" class=\"sg-step__line\" :style=\"lineSize\">\r\n        <i class=\"sg-step__line-inner\" :style=\"lineStyle\"></i>\r\n      </div>\r\n    </div>\r\n    <div class=\"sg-step__main\">\r\n        <div :class=\"['sg-step__title', `is-${currentStatus}`]\" v-if=\"!isContentRow || isSimple || isVertical\">\r\n            <slot name=\"title\">{{ title }}</slot>\r\n        </div>\r\n        <div v-if=\"isSimple\" class=\"sg-step__arrow\"></div>\r\n        <div v-else :class=\"['sg-step__description', `is-${currentStatus}`]\" :style=\"directionStyle\">\r\n            <slot name=\"description\">{{ description }}</slot>\r\n        </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  getCurrentInstance,\r\n  inject,\r\n  onBeforeUnmount,\r\n  onMounted,\r\n  ref,\r\n  reactive,\r\n  watch\r\n} from 'vue'\r\nimport { SgIcon } from '@sgui-plus/components/icon'\r\nimport { Close, Finished } from '@sgui-plus/icons-vue'\r\n\r\nimport type { Ref, PropType, Component } from 'vue'\r\n\r\nexport interface IStepsProps {\r\n  space: number | string\r\n  activeStep: number\r\n  direction: string\r\n  alignCenter: boolean\r\n  simple: boolean\r\n  finishStatus: string\r\n  processStatus: string\r\n  completedSymbol: string\r\n  lineSize: number\r\n  contentDirection: string\r\n}\r\n\r\nexport interface StepItemState {\r\n  uid: number\r\n  currentStatus: string\r\n  setIndex: (val: number) => void\r\n  calcProgress: (status: string) => void\r\n}\r\n\r\nexport interface IStepsInject {\r\n  props: IStepsProps\r\n  steps: Ref<StepItemState[]>\r\n  stepClick: (index: number,props: IStepItemProps) => void\r\n}\r\n\r\nexport interface IStepItemProps {\r\n  title: string\r\n  icon: string | Component\r\n  description: string\r\n  status: string\r\n}\r\n\r\nexport default defineComponent({\r\n  name: 'SgStep',\r\n  components: {\r\n    SgIcon,\r\n    Close,\r\n    Finished\r\n  },\r\n  props: {\r\n    title: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    icon: {\r\n      type: [String, Object] as PropType<string | Component>,\r\n      default: '',\r\n    },\r\n    description: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    status: {\r\n      type: String,\r\n      default: '',\r\n      validator: (val: string): boolean =>\r\n        ['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),\r\n    },\r\n  },\r\n  emits:[\r\n    'on-step-item-click'\r\n  ],\r\n  setup(props) {\r\n    const index = ref(-1)\r\n    const lineStyleStatus = ref('')\r\n    const internalStatus = ref('')\r\n    const parent: IStepsInject = inject('StepsContextKey')!\r\n    const currentInstance = getCurrentInstance()\r\n\r\n    onMounted(() => {\r\n      watch(\r\n        [\r\n          () => parent.props.activeStep,\r\n          () => parent.props.processStatus,\r\n          () => parent.props.finishStatus,\r\n        ],\r\n        ([activeStep]) => {\r\n          updateStatus(activeStep)\r\n        },\r\n        { immediate: true }\r\n      )\r\n    })\r\n\r\n    onBeforeUnmount(() => {\r\n      parent.steps.value = parent.steps.value.filter(\r\n        (instance) => instance.uid !== currentInstance!.uid\r\n      )\r\n    })\r\n\r\n    const currentStatus = computed(() => {\r\n      return props.status || internalStatus.value\r\n    })\r\n    const prevStatus = computed(() => {\r\n      const prevStep = parent.steps.value[index.value - 1]\r\n      return prevStep ? prevStep.currentStatus : 'wait'\r\n    })\r\n    const isCenter = computed(() => {\r\n      return parent.props.alignCenter\r\n    })\r\n    const isContentRow = computed(() => {\r\n      return parent.props.contentDirection === 'row'\r\n    })\r\n    const isVertical = computed(() => {\r\n      return parent.props.direction === 'vertical'\r\n    })\r\n    const isSimple = computed(() => {\r\n      return parent.props.simple\r\n    })\r\n    const stepsCount = computed(() => {\r\n      return parent.steps.value.length\r\n    })\r\n    const isLast = computed(() => {\r\n      return (\r\n        parent.steps.value[stepsCount.value - 1]?.uid === currentInstance!.uid\r\n      )\r\n    })\r\n    const space = computed(() => {\r\n      return isSimple.value ? '' : parent.props.space\r\n    })\r\n    const style = computed(() => {\r\n      const style: Record<string, unknown> = {\r\n        flexBasis:\r\n          typeof space.value === 'number'\r\n            ? `${space.value}px`\r\n            : space.value\r\n            ? space.value\r\n            : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,\r\n      }\r\n      if (isVertical.value) return style\r\n      if (isLast.value) {\r\n        style.maxWidth = `${100 / stepsCount.value}%`\r\n      }\r\n      return style\r\n    })\r\n\r\n    const directionStyle = computed(() => {\r\n      const style: Record<string, unknown> = {\r\n        paddingLeft: !isSimple.value && !isVertical.value && isContentRow.value && !isCenter.value ?  '32px' : ''\r\n      }\r\n\r\n      return style\r\n    })\r\n\r\n    const lineSize = computed(() => {\r\n      if(!parent.props.lineSize || parent.props.lineSize > 12 || parent.props.lineSize < 0) return\r\n      let direction = isVertical.value ? 'width' : 'height'\r\n      let offset = isVertical.value ? 'left' : 'top'\r\n      return [\r\n        `${direction}:${parent.props.lineSize}px`,\r\n        `${offset}:${12-(parent.props.lineSize / 2)}px`\r\n      ]\r\n    })\r\n\r\n    const setIndex = (val) => {\r\n      index.value = val\r\n    }\r\n    const calcProgress = (status) => {\r\n      lineStyleStatus.value = status\r\n    }\r\n\r\n    const lineStyle = computed(() => {\r\n      const status = lineStyleStatus.value\r\n\r\n      let step = 100\r\n      const style: Record<string, unknown> = {color: '#F00'}\r\n\r\n      style.transitionDelay = `${150 * index.value}ms`\r\n      if (status === parent.props.processStatus) {\r\n        step = 0\r\n      } else if (status === 'wait') {\r\n        step = 0\r\n        style.transitionDelay = `${-150 * index.value}ms`\r\n      }\r\n      style.borderWidth = step && !isSimple.value ? '1px' : 0\r\n      style[\r\n        parent.props.direction === 'vertical' ? 'height' : 'width'\r\n      ] = `${step}%`\r\n\r\n      return style\r\n    })\r\n\r\n    const updateStatus = (activeIndex) => {\r\n      if (activeIndex > index.value) {\r\n        internalStatus.value = parent.props.finishStatus\r\n      } else if (activeIndex === index.value && prevStatus.value !== 'error') {\r\n        internalStatus.value = parent.props.processStatus\r\n      } else {\r\n        internalStatus.value = 'wait'\r\n      }\r\n      const prevChild = parent.steps.value[stepsCount.value - 1]\r\n      if (prevChild) prevChild.calcProgress(internalStatus.value)\r\n    }\r\n\r\n    const handleItemClick = (index:number) => {\r\n      if (index <= parent.props.activeStep) {\r\n        const { title , icon, description, status } = props\r\n        parent.stepClick(index, {title , icon, description, status})\r\n      }\r\n    }\r\n\r\n    const stepItemState = reactive({\r\n      uid: computed(() => currentInstance!.uid),\r\n      currentStatus,\r\n      setIndex,\r\n      calcProgress,\r\n    })\r\n    parent.steps.value = [...parent.steps.value, stepItemState]\r\n\r\n    return {\r\n      index,\r\n      lineStyle,\r\n      lineSize,\r\n      currentStatus,\r\n      isCenter,\r\n      isContentRow,\r\n      isVertical,\r\n      isSimple,\r\n      isLast,\r\n      space,\r\n      style,\r\n      parent,\r\n      directionStyle,\r\n      setIndex,\r\n      calcProgress,\r\n      updateStatus,\r\n      handleItemClick,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_normalizeStyle","_normalizeClass","_createCommentVNode","_createElementVNode","_createBlock","_toDisplayString","_withCtx"],"mappings":"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"}