ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines • 9.75 kB

Source Map (JSON)

{"version":3,"file":"step.mjs","sources":["../../../../../src/components/ivue-steps/step.vue"],"sourcesContent":["<template>\r\n <div :class=\"wrapClasses\" :style=\"wrapStyles\">\r\n \r\n <div\r\n :class=\"[`${prefixCls}-divider`]\"\r\n v-if=\"data.textDirection === 'right' || data.direction === 'horizontal'\"\r\n >\r\n <i></i>\r\n </div>\r\n \r\n <div :class=\"[`${prefixCls}-header`]\">\r\n \r\n <div\r\n :class=\"[`${prefixCls}-divider`]\"\r\n v-if=\"data.textDirection === 'bottom' || data.direction === 'vertical'\"\r\n >\r\n <i></i>\r\n </div>\r\n\r\n <div :class=\"[`${prefixCls}-header-content`]\" @click=\"handleClick\">\r\n \r\n <span\r\n v-if=\"\r\n !icon &&\r\n !$slots.icon &&\r\n data.currentStatus !== 'finish' &&\r\n data.currentStatus !== 'error'\r\n \"\r\n >{{ data.stepNumber }}</span\r\n >\r\n \r\n <span v-else-if=\"$slots.icon\" :class=\"`${prefixCls}s-icon`\">\r\n <slot name=\"icon\"></slot>\r\n </span>\r\n \r\n <ivue-icon :class=\"`${prefixCls}-icon`\" v-else>{{\r\n icon\r\n ? icon\r\n : data.currentStatus === 'finish'\r\n ? 'check'\r\n : data.currentStatus === 'error'\r\n ? 'close'\r\n : ''\r\n }}</ivue-icon>\r\n </div>\r\n </div>\r\n \r\n <div :class=\"[`${prefixCls}-content`]\">\r\n <div :class=\"[`${prefixCls}-title`]\">\r\n <slot name=\"title\">{{ title }}</slot>\r\n </div>\r\n <slot name=\"content\">\r\n <div :class=\"[`${prefixCls}-content-slot`]\">{{ content }}</div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n defineComponent,\r\n computed,\r\n reactive,\r\n inject,\r\n getCurrentInstance,\r\n onBeforeUnmount,\r\n ComponentInternalInstance,\r\n onBeforeMount,\r\n} from 'vue';\r\nimport IvueIcon from '../ivue-icon/index.vue';\r\n\r\nimport { oneOf } from '../../utils/assist';\r\n\r\n// type\r\nimport { StepsContextKey } from './types/steps';\r\nimport type { Props, Data } from './types/step';\r\n\r\nconst prefixCls = 'ivue-step';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n emits: ['on-step'],\r\n props: {\r\n /**\r\n * 标题\r\n *\r\n * @type {String}\r\n */\r\n title: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * 内容\r\n *\r\n * @type {String}\r\n */\r\n content: {\r\n type: String,\r\n },\r\n /**\r\n * 当前步骤的状态\r\n *\r\n * @type {String}\r\n */\r\n status: {\r\n type: String,\r\n validator(value: string) {\r\n return oneOf(value, ['wait', 'process', 'finish', 'error']);\r\n },\r\n },\r\n /**\r\n * 步骤图标\r\n *\r\n * @type {String}\r\n */\r\n icon: {\r\n type: String,\r\n },\r\n },\r\n setup(props: Props, { slots, emit }) {\r\n // inject\r\n const steps = inject(StepsContextKey);\r\n\r\n // options\r\n const options = steps.data.options;\r\n\r\n // vm\r\n const { uid } = getCurrentInstance() as ComponentInternalInstance;\r\n\r\n // data\r\n const data = reactive<Data>({\r\n /**\r\n * 步骤数\r\n *\r\n * @type {String}\r\n */\r\n stepNumber: '',\r\n /**\r\n * 当前状态\r\n *\r\n * @type {String}\r\n */\r\n currentStatus: props.status,\r\n /**\r\n * 下一个错误状态\r\n *\r\n * @type {Boolean}\r\n */\r\n nextError: false,\r\n /**\r\n * 初始化下标\r\n *\r\n * @type {Number}\r\n */\r\n index: 0,\r\n /**\r\n * 文字方向\r\n *\r\n * @type {String}\r\n */\r\n textDirection: steps.props.textDirection,\r\n /**\r\n * 步骤条方向\r\n *\r\n * @type {String}\r\n * @default horizontal\r\n */\r\n direction: steps.props.direction,\r\n });\r\n\r\n // computed\r\n\r\n // 外层class\r\n const wrapClasses = computed(() => {\r\n return [\r\n `${prefixCls}-item`,\r\n `${prefixCls}-status-${data.currentStatus}`,\r\n {\r\n [`${prefixCls}-custom`]: props.icon || slots.icon,\r\n [`${prefixCls}-next-error`]: data.nextError,\r\n [`${prefixCls}-text-${data.textDirection}`]: !isVertical.value,\r\n [`${prefixCls}-${data.textDirection}`]: !isVertical.value,\r\n [`${prefixCls}-last`]:\r\n isLast.value && !steps.props.space && !isCenter.value,\r\n },\r\n ];\r\n });\r\n\r\n // 进行居中对齐\r\n const isCenter = computed(() => {\r\n return data.textDirection.includes('center');\r\n });\r\n\r\n // 是否竖向\r\n const isVertical = computed(() => {\r\n return steps.props.direction === 'vertical';\r\n });\r\n\r\n const isLast = computed(() => {\r\n return options[stepsCount.value - 1]?.uid === uid;\r\n });\r\n\r\n // 进度总长度\r\n const stepsCount = computed(() => {\r\n return options.length;\r\n });\r\n\r\n // 外层样式\r\n const wrapStyles = computed(() => {\r\n const space = steps.props.space;\r\n\r\n const style: {\r\n flexBasis: string;\r\n maxWidth?: string;\r\n } = {\r\n flexBasis:\r\n typeof space === 'number'\r\n ? `${space}px`\r\n : space\r\n ? space\r\n : `${100 / (options.length - (isCenter.value ? 0 : 1))}%`,\r\n };\r\n\r\n // 竖向\r\n if (isVertical.value) {\r\n return style;\r\n }\r\n\r\n // 是否是最后一个元素\r\n if (isLast.value) {\r\n style.maxWidth = `${100 / stepsCount.value}%`;\r\n }\r\n\r\n return style;\r\n });\r\n\r\n // methods\r\n\r\n // 点击\r\n const handleClick = () => {\r\n emit('on-step');\r\n };\r\n\r\n // onBeforeMount\r\n onBeforeMount(() => {\r\n // 步骤状态\r\n options.push(\r\n reactive({\r\n uid: uid,\r\n data: data,\r\n })\r\n );\r\n });\r\n\r\n // onBeforeUnmount\r\n onBeforeUnmount(() => {\r\n // 销毁选项\r\n steps.onOptionDestroy(data.index);\r\n });\r\n\r\n return {\r\n prefixCls,\r\n\r\n // data\r\n data,\r\n\r\n // computed\r\n wrapClasses,\r\n wrapStyles,\r\n\r\n // methods\r\n handleClick,\r\n };\r\n },\r\n components: {\r\n IvueIcon,\r\n },\r\n});\r\n</script>\r\n"],"names":["_createElementVNode","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createCommentVNode","_toDisplayString","_Fragment","_createVNode","_withCtx","_createTextVNode","_renderSlot"],"mappings":"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"}