element-plus

Version:

A Component Library for Vue 3

1 lines • 6.33 kB

Source Map (JSON)

{"version":3,"file":"item2.mjs","names":[],"sources":["../../../../../../packages/components/steps/src/item.vue"],"sourcesContent":["<template>\n <div :style=\"style\" :class=\"containerKls\">\n \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\" />\n </div>\n\n <div\n :class=\"[ns.e('icon'), ns.is(icon || $slots.icon ? 'icon' : 'text')]\"\n >\n <slot name=\"icon\">\n <el-icon v-if=\"icon\" :class=\"ns.e('icon-inner')\">\n <component :is=\"icon\" />\n </el-icon>\n <el-icon\n v-else-if=\"currentStatus === 'success'\"\n :class=\"[ns.e('icon-inner'), ns.is('status')]\"\n >\n <Check />\n </el-icon>\n <el-icon\n v-else-if=\"currentStatus === 'error'\"\n :class=\"[ns.e('icon-inner'), ns.is('status')]\"\n >\n <Close />\n </el-icon>\n <div v-else-if=\"!isSimple\" :class=\"ns.e('icon-inner')\">\n {{ index + 1 }}\n </div>\n </slot>\n </div>\n </div>\n \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')\" />\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\" setup>\nimport {\n computed,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n} from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Check, Close } from '@element-plus/icons-vue'\nimport { isNumber } from '@element-plus/utils'\nimport { STEPS_INJECTION_KEY } from './tokens'\n\nimport type { StepProps } from './item'\nimport type { CSSProperties, ComputedRef, Ref, VNode } from 'vue'\nimport type { StepsProps } from './steps'\n\nexport interface StepItemState {\n uid: number\n getVnode: () => VNode\n currentStatus: ComputedRef<string>\n internalStatus: Ref<string>\n setIndex: (val: number) => void\n calcProgress: (status: string) => void\n}\n\nexport interface IStepsInject {\n props: Required<StepsProps>\n steps: Ref<StepItemState[]>\n addStep: (item: StepItemState) => void\n removeStep: (item: StepItemState) => void\n}\n\ndefineOptions({\n name: 'ElStep',\n})\n\nconst props = withDefaults(defineProps<StepProps>(), {\n title: '',\n description: '',\n icon: '',\n status: '',\n})\n\nconst ns = useNamespace('step')\nconst index = ref(-1)\nconst lineStyle = ref({})\nconst internalStatus = ref('')\nconst parent = inject(STEPS_INJECTION_KEY) as IStepsInject\nconst currentInstance = getCurrentInstance()!\nlet stepDiff = 0\nlet beforeActive = 0\n\nonMounted(() => {\n watch(\n [\n () => parent.props.active,\n () => parent.props.processStatus,\n () => parent.props.finishStatus,\n ],\n ([active], [oldActive]) => {\n beforeActive = oldActive || 0\n stepDiff = active - beforeActive\n\n updateStatus(active)\n },\n { immediate: true }\n )\n})\n\nconst currentStatus = computed(() => {\n return props.status || internalStatus.value\n})\n\nconst prevInternalStatus = computed(() => {\n const prevStep = parent.steps.value[index.value - 1]\n return prevStep ? prevStep.internalStatus.value : 'wait'\n})\n\nconst isCenter = computed(() => {\n return parent.props.alignCenter\n})\n\nconst isVertical = computed(() => {\n return parent.props.direction === 'vertical'\n})\n\nconst isSimple = computed(() => {\n return parent.props.simple\n})\n\nconst stepsCount = computed(() => {\n return parent.steps.value.length\n})\n\nconst isLast = computed(() => {\n return parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid\n})\n\nconst space = computed(() => {\n return isSimple.value ? '' : parent.props.space\n})\n\nconst containerKls = computed(() => {\n return [\n ns.b(),\n ns.is(isSimple.value ? 'simple' : parent.props.direction),\n ns.is('flex', isLast.value && !space.value && !isCenter.value),\n ns.is('center', isCenter.value && !isVertical.value && !isSimple.value),\n ]\n})\n\nconst style = computed(() => {\n const style: CSSProperties = {\n flexBasis: isNumber(space.value)\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\nconst setIndex = (val: number) => {\n index.value = val\n}\n\nconst calcProgress = (status: string) => {\n const isWait = status === 'wait'\n const delayTimer =\n Math.abs(stepDiff) === 1\n ? 0\n : stepDiff > 0\n ? (index.value + 1 - beforeActive) * 150\n : -(index.value + 1 - parent.props.active) * 150\n\n const style: CSSProperties = {\n transitionDelay: `${delayTimer}ms`,\n }\n const step = status === parent.props.processStatus || isWait ? 0 : 100\n\n style.borderWidth = step && !isSimple.value ? '1px' : 0\n style[parent.props.direction === 'vertical' ? 'height' : 'width'] = `${step}%`\n lineStyle.value = style\n}\n\nconst updateStatus = (activeIndex: number) => {\n if (activeIndex > index.value) {\n internalStatus.value = parent.props.finishStatus\n } else if (\n activeIndex === index.value &&\n prevInternalStatus.value !== 'error'\n ) {\n internalStatus.value = parent.props.processStatus\n } else {\n internalStatus.value = 'wait'\n }\n const prevChild = parent.steps.value[index.value - 1]\n if (prevChild) prevChild.calcProgress(internalStatus.value)\n}\n\nconst stepItemState: StepItemState = {\n uid: currentInstance.uid,\n getVnode: () => currentInstance.vnode,\n currentStatus,\n internalStatus,\n setIndex,\n calcProgress,\n}\n\nparent.addStep(stepItemState)\n\nonBeforeUnmount(() => {\n parent.removeStep(stepItemState)\n})\n</script>\n"],"mappings":""}