element-plus
Version:
A Component Library for Vue 3
1 lines • 1.5 kB
Source Map (JSON)
{"version":3,"file":"steps2.mjs","names":[],"sources":["../../../../../../packages/components/steps/src/steps.vue"],"sourcesContent":["<template>\n <div :class=\"[ns.b(), ns.m(simple ? 'simple' : direction)]\">\n <slot />\n <steps-sorter />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, provide, watch } from 'vue'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { useNamespace, useOrderedChildren } from '@element-plus/hooks'\nimport { stepsEmits } from './steps'\nimport { STEPS_INJECTION_KEY } from './tokens'\n\nimport type { StepsProps } from './steps'\nimport type { StepItemState } from './item.vue'\n\ndefineOptions({\n name: 'ElSteps',\n})\n\nconst props = withDefaults(defineProps<StepsProps>(), {\n space: '',\n direction: 'horizontal',\n active: 0,\n processStatus: 'process',\n finishStatus: 'finish',\n})\nconst emit = defineEmits(stepsEmits)\n\nconst ns = useNamespace('steps')\nconst {\n children: steps,\n addChild: addStep,\n removeChild: removeStep,\n ChildrenSorter: StepsSorter,\n} = useOrderedChildren<StepItemState>(getCurrentInstance()!, 'ElStep')\n\nwatch(steps, () => {\n steps.value.forEach((instance: StepItemState, index: number) => {\n instance.setIndex(index)\n })\n})\n\nprovide(STEPS_INJECTION_KEY, { props, steps, addStep, removeStep })\n\nwatch(\n () => props.active,\n (newVal: number, oldVal: number) => {\n emit(CHANGE_EVENT, newVal, oldVal)\n }\n)\n</script>\n"],"mappings":""}