element-plus

Version:

A Component Library for Vue 3

1 lines • 8.98 kB

Source Map (JSON)

{"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 \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 \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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"}