UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 9.75 kB
{"version":3,"file":"item2.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 <!-- icon & line -->\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\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 <!-- title & description -->\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 reactive,\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 { stepProps } from './item'\n\nimport type { CSSProperties, Ref } 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 | undefined\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\ndefineOptions({\n name: 'ElStep',\n})\n\nconst props = defineProps(stepProps)\nconst ns = useNamespace('step')\nconst index = ref(-1)\nconst lineStyle = ref({})\nconst internalStatus = ref('')\nconst parent = inject('ElSteps') as IStepsInject\nconst currentInstance = getCurrentInstance()\n\nonMounted(() => {\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\nonBeforeUnmount(() => {\n parent.steps.value = parent.steps.value.filter(\n (instance) => instance.uid !== currentInstance?.uid\n )\n})\n\nconst currentStatus = computed(() => {\n return props.status || internalStatus.value\n})\n\nconst prevStatus = computed(() => {\n const prevStep = parent.steps.value[index.value - 1]\n return prevStep ? prevStep.currentStatus : '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 style = computed(() => {\n const style: CSSProperties = {\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\nconst setIndex = (val: number) => {\n index.value = val\n}\n\nconst calcProgress = (status: string) => {\n let step = 100\n const style: CSSProperties = {}\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[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 (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\nconst stepItemState = reactive({\n uid: computed(() => currentInstance?.uid),\n currentStatus,\n setIndex,\n calcProgress,\n})\n\nparent.steps.value = [...parent.steps.value, stepItemState]\n</script>\n"],"names":[],"mappings":"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"}