ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-steps/steps.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"steps.mjs","sources":["../../../../../src/components/ivue-steps/steps.vue"],"sourcesContent":["<template>\r\n  <div :class=\"wrapperClasses\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  computed,\r\n  provide,\r\n  reactive,\r\n  onMounted,\r\n  watch,\r\n  nextTick,\r\n  onBeforeMount,\r\n} from 'vue';\r\n\r\nimport { oneOf } from '../../utils/assist';\r\n\r\n// type\r\nimport { StepsContextKey, Props, Data } from './types/steps';\r\n\r\nconst prefixCls = 'ivue-steps';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 当前步骤\r\n     *\r\n     * @type {Number}\r\n     */\r\n    currentStep: {\r\n      type: Number,\r\n      default: 0,\r\n    },\r\n    /**\r\n     * 步骤条方向\r\n     *\r\n     * @type {string}\r\n     * @default {horizontal}\r\n     */\r\n    direction: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, ['horizontal', 'vertical']);\r\n      },\r\n      default: 'horizontal',\r\n    },\r\n    /**\r\n     * 步骤状态\r\n     *\r\n     * @type {String}\r\n     */\r\n    status: {\r\n      validator(value: string) {\r\n        return oneOf(value, ['wait', 'process', 'finish', 'error']);\r\n      },\r\n      default: 'process',\r\n    },\r\n    /**\r\n     * 每个 step 的间距，不填写将自适应间距。支持百分比\r\n     *\r\n     * @type {Number | String}\r\n     */\r\n    space: {\r\n      type: [Number, String],\r\n      default: '',\r\n    },\r\n    /**\r\n     * 文字方向\r\n     *\r\n     * @type {String}\r\n     */\r\n    textDirection: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, ['right', 'bottom-center', 'bottom']);\r\n      },\r\n      default: 'right',\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 选项\r\n       *\r\n       * @type {Array}\r\n       */\r\n      options: [],\r\n      /**\r\n       * 步骤状态\r\n       *\r\n       * @type {String}\r\n       */\r\n      status: props.status,\r\n      /**\r\n       * 是否初始化数据\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      initData: false,\r\n    });\r\n\r\n    // computed\r\n\r\n    const wrapperClasses = computed(() => {\r\n      return [`${prefixCls}`, `${prefixCls}-${props.direction}`];\r\n    });\r\n\r\n    // methods\r\n\r\n    // 更新数据\r\n    const updateSteps = () => {\r\n      // 初始化子组件data\r\n      updateChildProps(true);\r\n      // 设置错误步骤\r\n      setNextError();\r\n      // 更新当前数据\r\n      updateCurrent();\r\n\r\n      data.initData = false;\r\n    };\r\n\r\n    // 更新子组件props\r\n    const updateChildProps = (isInit: boolean) => {\r\n      data.options.map((child, index) => {\r\n        child.data.stepNumber = index + 1;\r\n        child.data.index = index;\r\n\r\n        // 如果已存在status,且在初始化时,则略过\r\n        if (!(isInit && child.data.currentStatus)) {\r\n          // index === 当前步骤\r\n          if (index === props.currentStep) {\r\n            if (data.status !== 'error') {\r\n              // 设置进行中状态\r\n              child.data.currentStatus = 'process';\r\n            }\r\n          }\r\n          // index < 当前步骤 已完成\r\n          else if (index < props.currentStep) {\r\n            child.data.currentStatus = 'finish';\r\n          }\r\n          // index > 当前步骤 待进行\r\n          else {\r\n            child.data.currentStatus = 'wait';\r\n          }\r\n        }\r\n\r\n        // 没有错误状态\r\n        if (child.data.currentStatus !== 'error' && index != 0) {\r\n          data.options[index - 1].data.nextError = false;\r\n        }\r\n\r\n        return child;\r\n      });\r\n    };\r\n\r\n    // 设置错误步骤\r\n    const setNextError = () => {\r\n      data.options.map((child, index) => {\r\n        if (child.data.currentStatus === 'error' && index !== 0) {\r\n          data.options[index - 1].data.nextError = true;\r\n        }\r\n      });\r\n    };\r\n\r\n    // 更新当前数据\r\n    const updateCurrent = () => {\r\n      if (props.currentStep < 0 || props.currentStep >= data.options.length) {\r\n        return;\r\n      }\r\n\r\n      data.options[props.currentStep].data.currentStatus = data.status;\r\n    };\r\n\r\n    // 选项销毁\r\n    const handleOptionDestroy = (index: number) => {\r\n      if (index > -1) {\r\n        data.options.splice(index, 1);\r\n      }\r\n    };\r\n\r\n    // provide\r\n    provide(\r\n      StepsContextKey,\r\n      reactive({\r\n        props,\r\n        data,\r\n        onOptionDestroy: handleOptionDestroy,\r\n      })\r\n    );\r\n\r\n    onBeforeMount(() => {\r\n      // 初始化数据\r\n      data.options = [];\r\n    });\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      data.initData = true;\r\n\r\n      updateSteps();\r\n    });\r\n\r\n    // 监听数组变化\r\n    watch(\r\n      () => data.options,\r\n      () => {\r\n        if (!data.initData) {\r\n          nextTick(() => {\r\n            updateSteps();\r\n          });\r\n        }\r\n      },\r\n      {\r\n        deep: true,\r\n      }\r\n    );\r\n\r\n    // 监听进度\r\n    watch(\r\n      () => props.currentStep,\r\n      () => {\r\n        updateChildProps(false);\r\n      }\r\n    );\r\n\r\n    // 监听步骤状态\r\n    watch(\r\n      () => props.status,\r\n      () => {\r\n        updateCurrent();\r\n      }\r\n    );\r\n\r\n    return {\r\n      // data\r\n      data,\r\n\r\n      // computed\r\n      wrapperClasses,\r\n\r\n      // methods\r\n      updateChildProps,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_normalizeClass"],"mappings":";;;;AACa,SAAA,YAAA,IAAE,EAAA,MAAA,EAAc,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;;IACzB,KAAA,EAAaA,cAAA,CAAA,IAAA,CAAA,cAAA,CAAA;AAAA,GAAA,EAAA;AAAA;;;;;;;"}