{"version":3,"file":"step.mjs","sources":["../../../../../src/components/ivue-steps/step.vue"],"sourcesContent":["<template>\r\n  <div :class=\"wrapClasses\" :style=\"wrapStyles\">\r\n    <!-- 下划线 -->\r\n    <div\r\n      :class=\"[`${prefixCls}-divider`]\"\r\n      v-if=\"data.textDirection === 'right' || data.direction === 'horizontal'\"\r\n    >\r\n      <i></i>\r\n    </div>\r\n    <!-- 步骤 -->\r\n    <div :class=\"[`${prefixCls}-header`]\">\r\n      <!-- 下划线 -->\r\n      <div\r\n        :class=\"[`${prefixCls}-divider`]\"\r\n        v-if=\"data.textDirection === 'bottom' || data.direction === 'vertical'\"\r\n      >\r\n        <i></i>\r\n      </div>\r\n\r\n      <div :class=\"[`${prefixCls}-header-content`]\" @click=\"handleClick\">\r\n        <!-- 步骤数 还没完成或者没有错误显示-->\r\n        <span\r\n          v-if=\"\r\n            !icon &&\r\n            !$slots.icon &&\r\n            data.currentStatus !== 'finish' &&\r\n            data.currentStatus !== 'error'\r\n          \"\r\n          >{{ data.stepNumber }}</span\r\n        >\r\n        <!-- 插槽 -->\r\n        <span v-else-if=\"$slots.icon\" :class=\"`${prefixCls}s-icon`\">\r\n          <slot name=\"icon\"></slot>\r\n        </span>\r\n        <!-- 图标 -->\r\n        <ivue-icon :class=\"`${prefixCls}-icon`\" v-else>{{\r\n          icon\r\n            ? icon\r\n            : data.currentStatus === 'finish'\r\n            ? 'check'\r\n            : data.currentStatus === 'error'\r\n            ? 'close'\r\n            : ''\r\n        }}</ivue-icon>\r\n      </div>\r\n    </div>\r\n    <!-- 文字 -->\r\n    <div :class=\"[`${prefixCls}-content`]\">\r\n      <div :class=\"[`${prefixCls}-title`]\">\r\n        <slot name=\"title\">{{ title }}</slot>\r\n      </div>\r\n      <slot name=\"content\">\r\n        <div :class=\"[`${prefixCls}-content-slot`]\">{{ content }}</div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  computed,\r\n  reactive,\r\n  inject,\r\n  getCurrentInstance,\r\n  onBeforeUnmount,\r\n  ComponentInternalInstance,\r\n  onBeforeMount,\r\n} from 'vue';\r\nimport IvueIcon from '../ivue-icon/index.vue';\r\n\r\nimport { oneOf } from '../../utils/assist';\r\n\r\n// type\r\nimport { StepsContextKey } from './types/steps';\r\nimport type { Props, Data } from './types/step';\r\n\r\nconst prefixCls = 'ivue-step';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['on-step'],\r\n  props: {\r\n    /**\r\n     * 标题\r\n     *\r\n     * @type {String}\r\n     */\r\n    title: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 内容\r\n     *\r\n     * @type {String}\r\n     */\r\n    content: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 当前步骤的状态\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, ['wait', 'process', 'finish', 'error']);\r\n      },\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  setup(props: Props, { slots, emit }) {\r\n    // inject\r\n    const steps = inject(StepsContextKey);\r\n\r\n    // options\r\n    const options = steps.data.options;\r\n\r\n    // vm\r\n    const { uid } = getCurrentInstance() as ComponentInternalInstance;\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 步骤数\r\n       *\r\n       * @type {String}\r\n       */\r\n      stepNumber: '',\r\n      /**\r\n       * 当前状态\r\n       *\r\n       * @type {String}\r\n       */\r\n      currentStatus: props.status,\r\n      /**\r\n       * 下一个错误状态\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      nextError: false,\r\n      /**\r\n       * 初始化下标\r\n       *\r\n       * @type {Number}\r\n       */\r\n      index: 0,\r\n      /**\r\n       * 文字方向\r\n       *\r\n       * @type {String}\r\n       */\r\n      textDirection: steps.props.textDirection,\r\n      /**\r\n       * 步骤条方向\r\n       *\r\n       * @type {String}\r\n       * @default horizontal\r\n       */\r\n      direction: steps.props.direction,\r\n    });\r\n\r\n    // computed\r\n\r\n    // 外层class\r\n    const wrapClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}-item`,\r\n        `${prefixCls}-status-${data.currentStatus}`,\r\n        {\r\n          [`${prefixCls}-custom`]: props.icon || slots.icon,\r\n          [`${prefixCls}-next-error`]: data.nextError,\r\n          [`${prefixCls}-text-${data.textDirection}`]: !isVertical.value,\r\n          [`${prefixCls}-${data.textDirection}`]: !isVertical.value,\r\n          [`${prefixCls}-last`]:\r\n            isLast.value && !steps.props.space && !isCenter.value,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 进行居中对齐\r\n    const isCenter = computed(() => {\r\n      return data.textDirection.includes('center');\r\n    });\r\n\r\n    // 是否竖向\r\n    const isVertical = computed(() => {\r\n      return steps.props.direction === 'vertical';\r\n    });\r\n\r\n    const isLast = computed(() => {\r\n      return options[stepsCount.value - 1]?.uid === uid;\r\n    });\r\n\r\n    // 进度总长度\r\n    const stepsCount = computed(() => {\r\n      return options.length;\r\n    });\r\n\r\n    // 外层样式\r\n    const wrapStyles = computed(() => {\r\n      const space = steps.props.space;\r\n\r\n      const style: {\r\n        flexBasis: string;\r\n        maxWidth?: string;\r\n      } = {\r\n        flexBasis:\r\n          typeof space === 'number'\r\n            ? `${space}px`\r\n            : space\r\n            ? space\r\n            : `${100 / (options.length - (isCenter.value ? 0 : 1))}%`,\r\n      };\r\n\r\n      // 竖向\r\n      if (isVertical.value) {\r\n        return style;\r\n      }\r\n\r\n      // 是否是最后一个元素\r\n      if (isLast.value) {\r\n        style.maxWidth = `${100 / stepsCount.value}%`;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 点击\r\n    const handleClick = () => {\r\n      emit('on-step');\r\n    };\r\n\r\n    // onBeforeMount\r\n    onBeforeMount(() => {\r\n      // 步骤状态\r\n      options.push(\r\n        reactive({\r\n          uid: uid,\r\n          data: data,\r\n        })\r\n      );\r\n    });\r\n\r\n    // onBeforeUnmount\r\n    onBeforeUnmount(() => {\r\n      // 销毁选项\r\n      steps.onOptionDestroy(data.index);\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      data,\r\n\r\n      // computed\r\n      wrapClasses,\r\n      wrapStyles,\r\n\r\n      // methods\r\n      handleClick,\r\n    };\r\n  },\r\n  components: {\r\n    IvueIcon,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_createElementVNode","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createCommentVNode","_toDisplayString","_Fragment","_createVNode","_withCtx","_createTextVNode","_renderSlot"],"mappings":"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"}