@fesjs/fes-design/es/steps/step.js

fes-design for PC

import { defineComponent, getCurrentInstance, inject, ref, computed, onMounted, onUnmounted, createVNode } from 'vue';
import { isNil } from 'lodash-es';
import getPrefixCls from '../_util/getPrefixCls';
import { noop } from '../_util/utils';
import { CloseOutlined, CheckOutlined } from '../icon';
import { COMPONENT_NAME, PROVIDE_KEY, STATUS } from './const';

const prefixCls = getPrefixCls('step');
const stepProps = {
  description: {
    type: String
  },
  title: {
    type: String
  },
  status: {
    type: String
  }
};
var step = defineComponent({
  name: COMPONENT_NAME.STEP,
  components: {
    CloseOutlined,
    CheckOutlined
  },
  props: stepProps,
  emits: ['clickStep'],
  setup(props, _ref) {
    let {
      slots,
      emit
    } = _ref;
    const vm = getCurrentInstance();
    if (!vm || !vm.parent || !vm.parent.type || vm.parent.type.name !== COMPONENT_NAME.STEPS) {
      console.warn(`[${COMPONENT_NAME.STEP}] must be a child of ${COMPONENT_NAME.STEPS}`);
    }
    const parent = inject(PROVIDE_KEY, {
      current: ref(),
      parentDomRef: ref(null),
      props: {
        initial: 1
      },
      count: ref(0),
      onUpdate: noop
    });
    const itemDomRef = ref();
    const index = computed(() => {
      // 用parent.count触发更新
      void parent.count.value;
      const parentDom = parent.parentDomRef.value;
      const itemDom = itemDomRef.value;
      if (parentDom && itemDom) {
        return Array.from(parentDom.children).indexOf(itemDom) + parent.props.initial;
      }
      return parent.props.initial - 1;
    });
    const style = computed(() => {
      // 用parent.count触发更新
      void parent.count.value;
      const _style = {};
      const parentDom = parent.parentDomRef.value;
      if (parentDom && !parent.props.vertical) {
        const lastChild = index.value === parentDom.children.length - 1 + parent.props.initial;
        if (lastChild) {
          _style['max-width'] = `${1 / parentDom.children.length * 100}%`;
        }
      }
      return _style;
    });
    const status = computed(() => {
      if (props.status) {
        return props.status;
      }
      const current = isNil(parent.current.value) ? parent.props.initial : parent.current.value;
      if (index.value < current) {
        return STATUS.FINISH;
      }
      if (index.value > current) {
        return STATUS.WAIT;
      }
      return parent.props.status;
    });
    const classList = computed(() => [prefixCls, `is-${status.value}`].filter(Boolean).join(' '));
    const onClickStep = () => {
      emit('clickStep', index.value);
    };
    const renderSymbol = () => {
      let content;
      if (slots.icon) {
        content = createVNode("span", {
          "class": `${prefixCls}-icon`
        }, [slots.icon()]);
      } else if (status.value === STATUS.WAIT || status.value === STATUS.PROCESS) {
        content = index.value;
      } else if (status.value === STATUS.FINISH) {
        content = createVNode("span", {
          "class": `${prefixCls}-icon`
        }, [createVNode(CheckOutlined, null, null)]);
      } else if (status.value === STATUS.ERROR) {
        content = createVNode("span", {
          "class": `${prefixCls}-icon`
        }, [createVNode(CloseOutlined, null, null)]);
      }
      return createVNode("div", {
        "class": `${prefixCls}-symbol`
      }, [createVNode("div", {
        "class": `${prefixCls}-symbol-wrapper`,
        "onClick": onClickStep
      }, [content]), parent.props.vertical && createVNode("div", {
        "class": `${prefixCls}-tail`
      }, null)]);
    };
    onMounted(() => {
      parent.onUpdate();
    });
    onUnmounted(() => {
      parent.onUpdate();
    });
    return () => {
      var _slots$title, _slots$description;
      return createVNode("div", {
        "ref": itemDomRef,
        "class": classList.value,
        "style": style.value
      }, [renderSymbol(), createVNode("div", {
        "class": `${prefixCls}-content`
      }, [createVNode("div", {
        "class": `${prefixCls}-title`
      }, [createVNode("span", {
        "class": `${prefixCls}-text`,
        "onClick": onClickStep
      }, [((_slots$title = slots.title) === null || _slots$title === void 0 ? void 0 : _slots$title.call(slots)) || `${props.title}`]), !parent.props.vertical && createVNode("div", {
        "class": `${prefixCls}-tail`
      }, null)]), createVNode("div", {
        "class": `${prefixCls}-description`
      }, [(slots.description || props.description) && (((_slots$description = slots.description) === null || _slots$description === void 0 ? void 0 : _slots$description.call(slots)) || props.description)])])]);
    };
  }
});

export { step as default, stepProps };