mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
refactor(components): [step] switch to script-setup syntax (#7782)
* refactor(components): [step] switch to script-setup syntax * improvement(components): [step] props type * improvement(components): [step] unnecessary type
This commit is contained in:
류한경
GitHub
parent
e1b88263e3
commit
1d417f4087
@ -31,7 +31,6 @@
|
||||
"packages/components/skeleton-item/",
|
||||
"packages/components/slider/",
|
||||
"packages/components/space/",
|
||||
"packages/components/step/",
|
||||
"packages/components/steps/",
|
||||
"packages/components/table/",
|
||||
"packages/components/table-column/",
|
||||
|
||||
23
packages/components/steps/src/item.ts
Normal file
23
packages/components/steps/src/item.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { buildProps, iconPropType } from '@element-plus/utils'
|
||||
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
|
||||
export const stepProps = buildProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: iconPropType,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: '',
|
||||
values: ['', 'wait', 'process', 'finish', 'error', 'success'] as const,
|
||||
},
|
||||
} as const)
|
||||
export type StepProps = ExtractPropTypes<typeof stepProps>
|
||||
@ -27,8 +27,8 @@
|
||||
</div>
|
||||
</slot>
|
||||
<el-icon v-else :class="[ns.e('icon-inner'), ns.is('status')]">
|
||||
<check v-if="currentStatus === 'success'" />
|
||||
<close v-else />
|
||||
<Check v-if="currentStatus === 'success'" />
|
||||
<Close v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,10 +45,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
getCurrentInstance,
|
||||
inject,
|
||||
onBeforeUnmount,
|
||||
@ -57,11 +56,12 @@ import {
|
||||
ref,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { useNamespace } from '@element-plus/hooks'
|
||||
import { ElIcon } from '@element-plus/components/icon'
|
||||
import { Check, Close } from '@element-plus/icons-vue'
|
||||
import { stepProps } from './item'
|
||||
|
||||
import { useNamespace } from '@element-plus/hooks'
|
||||
import type { Component, PropType, Ref } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
|
||||
export interface IStepsProps {
|
||||
space: number | string
|
||||
@ -74,7 +74,7 @@ export interface IStepsProps {
|
||||
}
|
||||
|
||||
export interface StepItemState {
|
||||
uid: number
|
||||
uid: number | undefined
|
||||
currentStatus: string
|
||||
setIndex: (val: number) => void
|
||||
calcProgress: (status: string) => void
|
||||
@ -85,160 +85,124 @@ export interface IStepsInject {
|
||||
steps: Ref<StepItemState[]>
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
defineOptions({
|
||||
name: 'ElStep',
|
||||
components: {
|
||||
ElIcon,
|
||||
Close,
|
||||
Check,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: [String, Object] as PropType<string | Component>,
|
||||
default: '',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: '',
|
||||
validator: (val: string): boolean =>
|
||||
['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const ns = useNamespace('step')
|
||||
const index = ref(-1)
|
||||
const lineStyle = ref({})
|
||||
const internalStatus = ref('')
|
||||
const parent: IStepsInject = inject('ElSteps')
|
||||
const currentInstance = getCurrentInstance()
|
||||
|
||||
onMounted(() => {
|
||||
watch(
|
||||
[
|
||||
() => parent.props.active,
|
||||
() => parent.props.processStatus,
|
||||
() => parent.props.finishStatus,
|
||||
],
|
||||
([active]) => {
|
||||
updateStatus(active)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
parent.steps.value = parent.steps.value.filter(
|
||||
(instance) => instance.uid !== currentInstance.uid
|
||||
)
|
||||
})
|
||||
|
||||
const currentStatus = computed(() => {
|
||||
return props.status || internalStatus.value
|
||||
})
|
||||
const prevStatus = computed(() => {
|
||||
const prevStep = parent.steps.value[index.value - 1]
|
||||
return prevStep ? prevStep.currentStatus : 'wait'
|
||||
})
|
||||
const isCenter = computed(() => {
|
||||
return parent.props.alignCenter
|
||||
})
|
||||
const isVertical = computed(() => {
|
||||
return parent.props.direction === 'vertical'
|
||||
})
|
||||
const isSimple = computed(() => {
|
||||
return parent.props.simple
|
||||
})
|
||||
const stepsCount = computed(() => {
|
||||
return parent.steps.value.length
|
||||
})
|
||||
const isLast = computed(() => {
|
||||
return (
|
||||
parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid
|
||||
)
|
||||
})
|
||||
const space = computed(() => {
|
||||
return isSimple.value ? '' : parent.props.space
|
||||
})
|
||||
const style = computed(() => {
|
||||
const style: Record<string, unknown> = {
|
||||
flexBasis:
|
||||
typeof space.value === 'number'
|
||||
? `${space.value}px`
|
||||
: space.value
|
||||
? space.value
|
||||
: `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,
|
||||
}
|
||||
if (isVertical.value) return style
|
||||
if (isLast.value) {
|
||||
style.maxWidth = `${100 / stepsCount.value}%`
|
||||
}
|
||||
return style
|
||||
})
|
||||
|
||||
const setIndex = (val) => {
|
||||
index.value = val
|
||||
}
|
||||
const calcProgress = (status) => {
|
||||
let step = 100
|
||||
const style: Record<string, unknown> = {}
|
||||
|
||||
style.transitionDelay = `${150 * index.value}ms`
|
||||
if (status === parent.props.processStatus) {
|
||||
step = 0
|
||||
} else if (status === 'wait') {
|
||||
step = 0
|
||||
style.transitionDelay = `${-150 * index.value}ms`
|
||||
}
|
||||
style.borderWidth = step && !isSimple.value ? '1px' : 0
|
||||
style[
|
||||
parent.props.direction === 'vertical' ? 'height' : 'width'
|
||||
] = `${step}%`
|
||||
lineStyle.value = style
|
||||
}
|
||||
const updateStatus = (activeIndex) => {
|
||||
if (activeIndex > index.value) {
|
||||
internalStatus.value = parent.props.finishStatus
|
||||
} else if (activeIndex === index.value && prevStatus.value !== 'error') {
|
||||
internalStatus.value = parent.props.processStatus
|
||||
} else {
|
||||
internalStatus.value = 'wait'
|
||||
}
|
||||
const prevChild = parent.steps.value[stepsCount.value - 1]
|
||||
if (prevChild) prevChild.calcProgress(internalStatus.value)
|
||||
}
|
||||
|
||||
const stepItemState = reactive({
|
||||
uid: computed(() => currentInstance.uid),
|
||||
currentStatus,
|
||||
setIndex,
|
||||
calcProgress,
|
||||
})
|
||||
parent.steps.value = [...parent.steps.value, stepItemState]
|
||||
|
||||
return {
|
||||
ns,
|
||||
index,
|
||||
lineStyle,
|
||||
currentStatus,
|
||||
isCenter,
|
||||
isVertical,
|
||||
isSimple,
|
||||
isLast,
|
||||
space,
|
||||
style,
|
||||
parent,
|
||||
setIndex,
|
||||
calcProgress,
|
||||
updateStatus,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const props = defineProps(stepProps)
|
||||
const ns = useNamespace('step')
|
||||
const index = ref(-1)
|
||||
const lineStyle = ref({})
|
||||
const internalStatus = ref('')
|
||||
const parent = inject('ElSteps') as IStepsInject
|
||||
const currentInstance = getCurrentInstance()
|
||||
|
||||
onMounted(() => {
|
||||
watch(
|
||||
[
|
||||
() => parent.props.active,
|
||||
() => parent.props.processStatus,
|
||||
() => parent.props.finishStatus,
|
||||
],
|
||||
([active]) => {
|
||||
updateStatus(active)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
parent.steps.value = parent.steps.value.filter(
|
||||
(instance) => instance.uid !== currentInstance?.uid
|
||||
)
|
||||
})
|
||||
|
||||
const currentStatus = computed(() => {
|
||||
return props.status || internalStatus.value
|
||||
})
|
||||
|
||||
const prevStatus = computed(() => {
|
||||
const prevStep = parent.steps.value[index.value - 1]
|
||||
return prevStep ? prevStep.currentStatus : 'wait'
|
||||
})
|
||||
|
||||
const isCenter = computed(() => {
|
||||
return parent.props.alignCenter
|
||||
})
|
||||
|
||||
const isVertical = computed(() => {
|
||||
return parent.props.direction === 'vertical'
|
||||
})
|
||||
|
||||
const isSimple = computed(() => {
|
||||
return parent.props.simple
|
||||
})
|
||||
|
||||
const stepsCount = computed(() => {
|
||||
return parent.steps.value.length
|
||||
})
|
||||
|
||||
const isLast = computed(() => {
|
||||
return parent.steps.value[stepsCount.value - 1]?.uid === currentInstance?.uid
|
||||
})
|
||||
|
||||
const space = computed(() => {
|
||||
return isSimple.value ? '' : parent.props.space
|
||||
})
|
||||
|
||||
const style = computed(() => {
|
||||
const style: Record<string, unknown> = {
|
||||
flexBasis:
|
||||
typeof space.value === 'number'
|
||||
? `${space.value}px`
|
||||
: space.value
|
||||
? space.value
|
||||
: `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,
|
||||
}
|
||||
if (isVertical.value) return style
|
||||
if (isLast.value) {
|
||||
style.maxWidth = `${100 / stepsCount.value}%`
|
||||
}
|
||||
return style
|
||||
})
|
||||
|
||||
const setIndex = (val) => {
|
||||
index.value = val
|
||||
}
|
||||
|
||||
const calcProgress = (status) => {
|
||||
let step = 100
|
||||
const style: Record<string, unknown> = {}
|
||||
style.transitionDelay = `${150 * index.value}ms`
|
||||
if (status === parent.props.processStatus) {
|
||||
step = 0
|
||||
} else if (status === 'wait') {
|
||||
step = 0
|
||||
style.transitionDelay = `${-150 * index.value}ms`
|
||||
}
|
||||
style.borderWidth = step && !isSimple.value ? '1px' : 0
|
||||
style[parent.props.direction === 'vertical' ? 'height' : 'width'] = `${step}%`
|
||||
lineStyle.value = style
|
||||
}
|
||||
|
||||
const updateStatus = (activeIndex) => {
|
||||
if (activeIndex > index.value) {
|
||||
internalStatus.value = parent.props.finishStatus
|
||||
} else if (activeIndex === index.value && prevStatus.value !== 'error') {
|
||||
internalStatus.value = parent.props.processStatus
|
||||
} else {
|
||||
internalStatus.value = 'wait'
|
||||
}
|
||||
const prevChild = parent.steps.value[stepsCount.value - 1]
|
||||
if (prevChild) prevChild.calcProgress(internalStatus.value)
|
||||
}
|
||||
|
||||
const stepItemState = reactive({
|
||||
uid: computed(() => currentInstance?.uid),
|
||||
currentStatus,
|
||||
setIndex,
|
||||
calcProgress,
|
||||
})
|
||||
|
||||
parent.steps.value = [...parent.steps.value, stepItemState]
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user