@element-plus/nightly 0.0.20211230

package/lib/components/steps/index.d.ts

@@ -0,0 +1,159 @@
+export declare const ElSteps: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+    space: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    active: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
+    alignCenter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    simple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    finishStatus: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
+    processStatus: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
+}, {
+    steps: import("vue").Ref<never[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    space?: unknown;
+    active?: unknown;
+    direction?: unknown;
+    alignCenter?: unknown;
+    simple?: unknown;
+    finishStatus?: unknown;
+    processStatus?: unknown;
+} & {
+    active: number;
+    space: string | number;
+    direction: string;
+    alignCenter: boolean;
+    simple: boolean;
+    finishStatus: string;
+    processStatus: string;
+} & {}> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    active: number;
+    space: string | number;
+    direction: string;
+    alignCenter: boolean;
+    simple: boolean;
+    finishStatus: string;
+    processStatus: string;
+}>> & {
+    Step: import("vue").DefineComponent<{
+        title: {
+            type: StringConstructor;
+            default: string;
+        };
+        icon: {
+            type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+            default: string;
+        };
+        description: {
+            type: StringConstructor;
+            default: string;
+        };
+        status: {
+            type: StringConstructor;
+            default: string;
+            validator: (val: string) => boolean;
+        };
+    }, {
+        index: import("vue").Ref<number>;
+        lineStyle: import("vue").Ref<{}>;
+        currentStatus: import("vue").ComputedRef<string>;
+        isCenter: import("vue").ComputedRef<boolean>;
+        isVertical: import("vue").ComputedRef<boolean>;
+        isSimple: import("vue").ComputedRef<boolean>;
+        isLast: import("vue").ComputedRef<boolean>;
+        space: import("vue").ComputedRef<string | number>;
+        style: import("vue").ComputedRef<Record<string, unknown>>;
+        parent: import("./src/item.vue").IStepsInject;
+        setIndex: (val: any) => void;
+        calcProgress: (status: any) => void;
+        updateStatus: (activeIndex: any) => void;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        title?: unknown;
+        icon?: unknown;
+        description?: unknown;
+        status?: unknown;
+    } & {
+        icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+        title: string;
+        description: string;
+        status: string;
+    } & {}>, {
+        icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+        title: string;
+        description: string;
+        status: string;
+    }>;
+};
+export default ElSteps;
+export declare const ElStep: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: import("vue").PropType<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    status: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
+}, {
+    index: import("vue").Ref<number>;
+    lineStyle: import("vue").Ref<{}>;
+    currentStatus: import("vue").ComputedRef<string>;
+    isCenter: import("vue").ComputedRef<boolean>;
+    isVertical: import("vue").ComputedRef<boolean>;
+    isSimple: import("vue").ComputedRef<boolean>;
+    isLast: import("vue").ComputedRef<boolean>;
+    space: import("vue").ComputedRef<string | number>;
+    style: import("vue").ComputedRef<Record<string, unknown>>;
+    parent: import("./src/item.vue").IStepsInject;
+    setIndex: (val: any) => void;
+    calcProgress: (status: any) => void;
+    updateStatus: (activeIndex: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    title?: unknown;
+    icon?: unknown;
+    description?: unknown;
+    status?: unknown;
+} & {
+    icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    title: string;
+    description: string;
+    status: string;
+} & {}>, {
+    icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    title: string;
+    description: string;
+    status: string;
+}>>;

package/lib/components/steps/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var withInstall = require('../../utils/with-install.js');
+require('./src/index.js');
+require('./src/item.js');
+var index_vue_vue_type_script_lang = require('./src/index.vue_vue_type_script_lang.js');
+var item_vue_vue_type_script_lang = require('./src/item.vue_vue_type_script_lang.js');
+
+const ElSteps = withInstall.withInstall(index_vue_vue_type_script_lang["default"], {
+  Step: item_vue_vue_type_script_lang["default"]
+});
+const ElStep = withInstall.withNoopInstall(item_vue_vue_type_script_lang["default"]);
+
+exports.ElStep = ElStep;
+exports.ElSteps = ElSteps;
+exports["default"] = ElSteps;
+//# sourceMappingURL=index.js.map

package/lib/components/steps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/steps/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\n\nimport Steps from './src/index.vue'\nimport Step from './src/item.vue'\n\nexport const ElSteps = withInstall(Steps, {\n  Step,\n})\nexport default ElSteps\nexport const ElStep = withNoopInstall(Step)\n"],"names":["withInstall","Steps","Step","withNoopInstall"],"mappings":";;;;;;;;;;AAGY,MAAC,OAAO,GAAGA,uBAAW,CAACC,yCAAK,EAAE;AAC1C,QAAEC,wCAAI;AACN,CAAC,EAAE;AAES,MAAC,MAAM,GAAGC,2BAAe,CAACD,wCAAI;;;;;;"}

package/lib/components/steps/src/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_vue_vue_type_script_lang = require('./index.vue_vue_type_script_lang.js');
+var index_vue_vue_type_template_id_882d196c_lang = require('./index.vue_vue_type_template_id_882d196c_lang.js');
+
+index_vue_vue_type_script_lang["default"].render = index_vue_vue_type_template_id_882d196c_lang.render;
+index_vue_vue_type_script_lang["default"].__file = "packages/components/steps/src/index.vue";
+
+exports["default"] = index_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=index.js.map

package/lib/components/steps/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/components/steps/src/index.vue.d.ts

@@ -0,0 +1,62 @@
+declare const _default: import("vue").DefineComponent<{
+    space: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    active: {
+        type: NumberConstructor;
+        default: number;
+    };
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
+    alignCenter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    simple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    finishStatus: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
+    processStatus: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
+}, {
+    steps: import("vue").Ref<never[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    space?: unknown;
+    active?: unknown;
+    direction?: unknown;
+    alignCenter?: unknown;
+    simple?: unknown;
+    finishStatus?: unknown;
+    processStatus?: unknown;
+} & {
+    active: number;
+    space: string | number;
+    direction: string;
+    alignCenter: boolean;
+    simple: boolean;
+    finishStatus: string;
+    processStatus: string;
+} & {}> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    active: number;
+    space: string | number;
+    direction: string;
+    alignCenter: boolean;
+    simple: boolean;
+    finishStatus: string;
+    processStatus: string;
+}>;
+export default _default;

package/lib/components/steps/src/index.vue_vue_type_script_lang.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var constants = require('../../../utils/constants.js');
+
+var script = vue.defineComponent({
+  name: "ElSteps",
+  props: {
+    space: {
+      type: [Number, String],
+      default: ""
+    },
+    active: {
+      type: Number,
+      default: 0
+    },
+    direction: {
+      type: String,
+      default: "horizontal",
+      validator: (val) => ["horizontal", "vertical"].includes(val)
+    },
+    alignCenter: {
+      type: Boolean,
+      default: false
+    },
+    simple: {
+      type: Boolean,
+      default: false
+    },
+    finishStatus: {
+      type: String,
+      default: "finish",
+      validator: (val) => ["wait", "process", "finish", "error", "success"].includes(val)
+    },
+    processStatus: {
+      type: String,
+      default: "process",
+      validator: (val) => ["wait", "process", "finish", "error", "success"].includes(val)
+    }
+  },
+  emits: [constants.CHANGE_EVENT],
+  setup(props, { emit }) {
+    const steps = vue.ref([]);
+    vue.watch(steps, () => {
+      steps.value.forEach((instance, index) => {
+        instance.setIndex(index);
+      });
+    });
+    vue.provide("ElSteps", { props, steps });
+    vue.watch(() => props.active, (newVal, oldVal) => {
+      emit(constants.CHANGE_EVENT, newVal, oldVal);
+    });
+    return {
+      steps
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=index.vue_vue_type_script_lang.js.map

package/lib/components/steps/src/index.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/steps/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'el-steps',\n      simple ? 'el-steps--simple' : `el-steps--${direction}`,\n    ]\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, watch, ref, provide } from 'vue'\n\nimport { CHANGE_EVENT } from '@element-plus/utils/constants'\n\nexport default defineComponent({\n  name: 'ElSteps',\n  props: {\n    space: {\n      type: [Number, String],\n      default: '',\n    },\n    active: {\n      type: Number,\n      default: 0,\n    },\n    direction: {\n      type: String,\n      default: 'horizontal',\n      validator: (val: string): boolean =>\n        ['horizontal', 'vertical'].includes(val),\n    },\n    alignCenter: {\n      type: Boolean,\n      default: false,\n    },\n    simple: {\n      type: Boolean,\n      default: false,\n    },\n    finishStatus: {\n      type: String,\n      default: 'finish',\n      validator: (val: string): boolean =>\n        ['wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n    processStatus: {\n      type: String,\n      default: 'process',\n      validator: (val: string): boolean =>\n        ['wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  emits: [CHANGE_EVENT],\n  setup(props, { emit }) {\n    const steps = ref([])\n\n    watch(steps, () => {\n      steps.value.forEach((instance, index) => {\n        instance.setIndex(index)\n      })\n    })\n\n    provide('ElSteps', { props, steps })\n\n    watch(\n      () => props.active,\n      (newVal, oldVal) => {\n        emit(CHANGE_EVENT, newVal, oldVal)\n      }\n    )\n\n    return {\n      steps,\n    }\n  },\n})\n</script>\n"],"names":["CHANGE_EVENT","ref","provide"],"mappings":";;;;;;;;AAcA,EAAE,eAAe;;AAEjB,IAAI,KAAK,EAAE;MACL,IAAI,EAAE,CAAC;MACP;KACD;UACK,EAAE;MACN,IAAI,EAAE;;KAEP;aACQ,EAAE;MACT,IAAI,EAAE;;MAEN,SAAS;;eAEA,EAAE;MACX,IAAI,EAAE,OAAO;aACN,EAAE,KAAK;KACf;IACD,MAAM,EAAE;MACN,IAAI,EAAE,OAAO;MACb,OAAO,EAAE,KAAK;KACf;IACD;MACE,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;;KAEV;iBACY;MACX,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE,SAAS;eACT,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE,SAAS,UAAU,EAAE,OAAO,EAAE;KAC5D;;OAEE,EAAE,CAACA;OACH,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE;UACb,KAAK,GAAGC,OAAG,GAAG,CAAC,CAAC;aACjB,CAAC,KAAK,EAAE,MAAM;;;OAGhB,EAAE;KACJ,CAAC,CAAC;IACHC,WAAO,CAAC,SAAS,EAAE;;MAEjB,IAAI,CAACF,sBAAY;MACjB,CAAC;WACI;MACL;KACD;;;;;;"}

package/lib/components/steps/src/index.vue_vue_type_template_id_882d196c_lang.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "el-steps",
+      _ctx.simple ? "el-steps--simple" : `el-steps--${_ctx.direction}`
+    ])
+  }, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+
+exports.render = render;
+//# sourceMappingURL=index.vue_vue_type_template_id_882d196c_lang.js.map

package/lib/components/steps/src/index.vue_vue_type_template_id_882d196c_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_template_id_882d196c_lang.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/lib/components/steps/src/item.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var item_vue_vue_type_script_lang = require('./item.vue_vue_type_script_lang.js');
+var item_vue_vue_type_template_id_6ec47f4b_lang = require('./item.vue_vue_type_template_id_6ec47f4b_lang.js');
+
+item_vue_vue_type_script_lang["default"].render = item_vue_vue_type_template_id_6ec47f4b_lang.render;
+item_vue_vue_type_script_lang["default"].__file = "packages/components/steps/src/item.vue";
+
+exports["default"] = item_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=item.js.map

package/lib/components/steps/src/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/components/steps/src/item.vue.d.ts

@@ -0,0 +1,69 @@
+import type { Ref, PropType, Component } from 'vue';
+export interface IStepsProps {
+    space: number | string;
+    active: number;
+    direction: string;
+    alignCenter: boolean;
+    simple: boolean;
+    finishStatus: string;
+    processStatus: string;
+}
+export interface StepItemState {
+    uid: number;
+    currentStatus: string;
+    setIndex: (val: number) => void;
+    calcProgress: (status: string) => void;
+}
+export interface IStepsInject {
+    props: IStepsProps;
+    steps: Ref<StepItemState[]>;
+}
+declare const _default: import("vue").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+        default: string;
+    };
+    description: {
+        type: StringConstructor;
+        default: string;
+    };
+    status: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
+}, {
+    index: Ref<number>;
+    lineStyle: Ref<{}>;
+    currentStatus: import("vue").ComputedRef<string>;
+    isCenter: import("vue").ComputedRef<boolean>;
+    isVertical: import("vue").ComputedRef<boolean>;
+    isSimple: import("vue").ComputedRef<boolean>;
+    isLast: import("vue").ComputedRef<boolean>;
+    space: import("vue").ComputedRef<string | number>;
+    style: import("vue").ComputedRef<Record<string, unknown>>;
+    parent: IStepsInject;
+    setIndex: (val: any) => void;
+    calcProgress: (status: any) => void;
+    updateStatus: (activeIndex: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    title?: unknown;
+    icon?: unknown;
+    description?: unknown;
+    status?: unknown;
+} & {
+    icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    title: string;
+    description: string;
+    status: string;
+} & {}>, {
+    icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    title: string;
+    description: string;
+    status: string;
+}>;
+export default _default;

package/lib/components/steps/src/item.vue_vue_type_script_lang.js

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var index = require('../../icon/index.js');
+var iconsVue = require('@element-plus/icons-vue');
+
+var script = vue.defineComponent({
+  name: "ElStep",
+  components: {
+    ElIcon: index.ElIcon,
+    Close: iconsVue.Close,
+    Check: iconsVue.Check
+  },
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: [String, Object],
+      default: ""
+    },
+    description: {
+      type: String,
+      default: ""
+    },
+    status: {
+      type: String,
+      default: "",
+      validator: (val) => ["", "wait", "process", "finish", "error", "success"].includes(val)
+    }
+  },
+  setup(props) {
+    const index = vue.ref(-1);
+    const lineStyle = vue.ref({});
+    const internalStatus = vue.ref("");
+    const parent = vue.inject("ElSteps");
+    const currentInstance = vue.getCurrentInstance();
+    vue.onMounted(() => {
+      vue.watch([
+        () => parent.props.active,
+        () => parent.props.processStatus,
+        () => parent.props.finishStatus
+      ], ([active]) => {
+        updateStatus(active);
+      }, { immediate: true });
+    });
+    vue.onBeforeUnmount(() => {
+      parent.steps.value = parent.steps.value.filter((instance) => instance.uid !== currentInstance.uid);
+    });
+    const currentStatus = vue.computed(() => {
+      return props.status || internalStatus.value;
+    });
+    const prevStatus = vue.computed(() => {
+      const prevStep = parent.steps.value[index.value - 1];
+      return prevStep ? prevStep.currentStatus : "wait";
+    });
+    const isCenter = vue.computed(() => {
+      return parent.props.alignCenter;
+    });
+    const isVertical = vue.computed(() => {
+      return parent.props.direction === "vertical";
+    });
+    const isSimple = vue.computed(() => {
+      return parent.props.simple;
+    });
+    const stepsCount = vue.computed(() => {
+      return parent.steps.value.length;
+    });
+    const isLast = vue.computed(() => {
+      var _a;
+      return ((_a = parent.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.uid) === currentInstance.uid;
+    });
+    const space = vue.computed(() => {
+      return isSimple.value ? "" : parent.props.space;
+    });
+    const style = vue.computed(() => {
+      const style2 = {
+        flexBasis: typeof space.value === "number" ? `${space.value}px` : space.value ? space.value : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`
+      };
+      if (isVertical.value)
+        return style2;
+      if (isLast.value) {
+        style2.maxWidth = `${100 / stepsCount.value}%`;
+      }
+      return style2;
+    });
+    const setIndex = (val) => {
+      index.value = val;
+    };
+    const calcProgress = (status) => {
+      let step = 100;
+      const style2 = {};
+      style2.transitionDelay = `${150 * index.value}ms`;
+      if (status === parent.props.processStatus) {
+        step = 0;
+      } else if (status === "wait") {
+        step = 0;
+        style2.transitionDelay = `${-150 * index.value}ms`;
+      }
+      style2.borderWidth = step && !isSimple.value ? "1px" : 0;
+      style2[parent.props.direction === "vertical" ? "height" : "width"] = `${step}%`;
+      lineStyle.value = style2;
+    };
+    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 = vue.reactive({
+      uid: vue.computed(() => currentInstance.uid),
+      currentStatus,
+      setIndex,
+      calcProgress
+    });
+    parent.steps.value = [...parent.steps.value, stepItemState];
+    return {
+      index,
+      lineStyle,
+      currentStatus,
+      isCenter,
+      isVertical,
+      isSimple,
+      isLast,
+      space,
+      style,
+      parent,
+      setIndex,
+      calcProgress,
+      updateStatus
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=item.vue_vue_type_script_lang.js.map

package/lib/components/steps/src/item.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/steps/src/item.vue"],"sourcesContent":["<template>\n  <div\n    :style=\"style\"\n    :class=\"[\n      'el-step',\n      isSimple ? 'is-simple' : `is-${parent.props.direction}`,\n      isLast && !space && !isCenter && 'is-flex',\n      isCenter && !isVertical && !isSimple && 'is-center',\n    ]\"\n  >\n    <!-- icon & line -->\n    <div :class=\"['el-step__head', `is-${currentStatus}`]\">\n      <div v-if=\"!isSimple\" class=\"el-step__line\">\n        <i class=\"el-step__line-inner\" :style=\"lineStyle\"></i>\n      </div>\n\n      <div :class=\"['el-step__icon', `is-${icon ? 'icon' : 'text'}`]\">\n        <slot\n          v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\"\n          name=\"icon\"\n        >\n          <el-icon v-if=\"icon\" class=\"el-step__icon-inner\">\n            <component :is=\"icon\" />\n          </el-icon>\n          <div v-if=\"!icon && !isSimple\" class=\"el-step__icon-inner\">\n            {{ index + 1 }}\n          </div>\n        </slot>\n        <el-icon v-else class=\"el-step__icon-inner 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=\"el-step__main\">\n      <div :class=\"['el-step__title', `is-${currentStatus}`]\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"isSimple\" class=\"el-step__arrow\"></div>\n      <div v-else :class=\"['el-step__description', `is-${currentStatus}`]\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  reactive,\n  watch,\n} from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Close, Check } from '@element-plus/icons-vue'\n\nimport type { Ref, PropType, Component } 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\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\nexport default defineComponent({\n  name: 'ElStep',\n  components: {\n    ElIcon,\n    Close,\n    Check,\n  },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    icon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    description: {\n      type: String,\n      default: '',\n    },\n    status: {\n      type: String,\n      default: '',\n      validator: (val: string): boolean =>\n        ['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  setup(props) {\n    const index = ref(-1)\n    const lineStyle = ref({})\n    const internalStatus = ref('')\n    const parent: IStepsInject = inject('ElSteps')\n    const currentInstance = getCurrentInstance()\n\n    onMounted(() => {\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\n    onBeforeUnmount(() => {\n      parent.steps.value = parent.steps.value.filter(\n        (instance) => instance.uid !== currentInstance.uid\n      )\n    })\n\n    const currentStatus = computed(() => {\n      return props.status || internalStatus.value\n    })\n    const prevStatus = computed(() => {\n      const prevStep = parent.steps.value[index.value - 1]\n      return prevStep ? prevStep.currentStatus : 'wait'\n    })\n    const isCenter = computed(() => {\n      return parent.props.alignCenter\n    })\n    const isVertical = computed(() => {\n      return parent.props.direction === 'vertical'\n    })\n    const isSimple = computed(() => {\n      return parent.props.simple\n    })\n    const stepsCount = computed(() => {\n      return parent.steps.value.length\n    })\n    const isLast = computed(() => {\n      return (\n        parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid\n      )\n    })\n    const space = computed(() => {\n      return isSimple.value ? '' : parent.props.space\n    })\n    const style = computed(() => {\n      const style: Record<string, unknown> = {\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\n    const setIndex = (val) => {\n      index.value = val\n    }\n    const calcProgress = (status) => {\n      let step = 100\n      const style: Record<string, unknown> = {}\n\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[\n        parent.props.direction === 'vertical' ? 'height' : 'width'\n      ] = `${step}%`\n      lineStyle.value = style\n    }\n    const updateStatus = (activeIndex) => {\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\n    const stepItemState = reactive({\n      uid: computed(() => currentInstance.uid),\n      currentStatus,\n      setIndex,\n      calcProgress,\n    })\n    parent.steps.value = [...parent.steps.value, stepItemState]\n\n    return {\n      index,\n      lineStyle,\n      currentStatus,\n      isCenter,\n      isVertical,\n      isSimple,\n      isLast,\n      space,\n      style,\n      parent,\n      setIndex,\n      calcProgress,\n      updateStatus,\n    }\n  },\n})\n</script>\n"],"names":["Close","Check","watch","onBeforeUnmount","computed","reactive"],"mappings":";;;;;;;;AA4DA,gCAA8B,CAAC;;AAE/B,EAAE,UAAU,EAAE;;AAEd,WAAIA,cAAK;WACLC,cAAK;GACN;EACD,KAAK,EAAE;IACL,KAAK,EAAE;MACL,IAAI,EAAE;MACN,OAAO,IAAI;KACZ;AACL;;AAEA,aAAa,EAAE,EAAE;KACZ;IACD,WAAW,EAAE;MACX,IAAI,EAAE,MAAM;MACZ,OAAO,IAAI;AACjB;;AAEA,UAAU,EAAE,MAAM;MACZ,OAAO,EAAE,EAAE;MACX,SAAS,EAAE,CAAC,GAAG,KAAK,CAAC;AAC3B;;AAEA,EAAE,KAAK,CAAC,KAAK,EAAE;IACX,MAAM,KAAK;IACX,MAAM;IACN,MAAM;IACN;IACA;;MAEEC;QACE;QACA,MAAM;QACN;;QAEA;OACD,EAAE,aAAa,IAAI,GAAG,CAAC;MACxB,CAAC;IACHC;MACE,MAAM,CAAC;MACP,CAAC;UACG;;KAEL,CAAC,CAAC;UACG;MACJ,MAAM;MACN,OAAO,QAAQ,GAAG,QAAQ,CAAC;;IAE7B;;KAEC,CAAC,CAAC;IACH,MAAM,UAAU,GAAGC;MACjB,OAAO,OAAO,KAAK,CAAC;KACrB,CAAC,CAAC;IACH,MAAM,QAAQ,GAAGA,YAAQ,OAAO;MAC9B,OAAO,MAAM,CAAC,MAAM,MAAM,CAAC;;IAE7B,MAAM,UAAU;MACd;;UAEI,MAAM,GAAGA,YAAQ,CAAC,MAAM;UACxB,GAAG;aACA,CAAC,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;;UAE7B,KAAK;aACF,QAAQ,CAAC,KAAK;;UAEjB,KAAK,GAAGA,YAAQ;MACpB;;;MAGA,IAAI,UAAU,CAAC,KAAK;QAClB,OAAO,MAAM,CAAC;UACZ,MAAM,CAAC,KAAK,EAAE;;;;KAInB,CAAC,CAAC;UACG,QAAQ,GAAG,CAAC,QAAQ;;KAEzB,CAAC;UACI,eAAe,CAAC,MAAM,KAAK;MAC/B,IAAI,IAAI,GAAG,GAAG;;MAEd,MAAM,CAAC,eAAe,GAAG,GAAG;MAC5B,IAAI,MAAM,KAAK,MAAM,CAAC,KAAK,CAAC;;OAE3B,MAAM,IAAI,MAAM,KAAK,QAAQ;QAC5B,OAAO,CAAC,CAAC;;OAEV;MACD,OAAO,WAAW,GAAG,IAAI;;MAEzB,SAAS,CAAC,KAAK,GAAG,MAAM,CAAC;MACzB;IACF;MACE,IAAI,WAAW,GAAG,KAAK;QACrB;aACK,IAAI,WAAW,KAAK,KAAK,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,KAAK,OAAO;;;QAGpE,cAAc,CAAC,KAAK,GAAG;OACxB;;MAED,IAAI,SAAS;QACX,SAAS,aAAa,CAAC,cAAc;;UAEnC,aAAa,GAAGC,YAAQ,CAAC;uBAChB,CAAC,MAAM;mBACP;cACL;kBACI;MACZ;UACI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC;WACzB;WACA;MACL;MACA;;;MAGA,QAAQ;MACR,MAAM;;MAEN,KAAK;MACL,MAAM;MACN,QAAQ;;MAER,YAAY;MACZ;;;;;;"}