feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+15
View File
@@ -0,0 +1,15 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { StepsEmits, StepsInstance, StepsProps, StepsPropsPublic, StepsStatus, stepsEmits, stepsProps } from "./src/steps.js";
import { _default } from "./src/steps.vue.js";
import { StepInstance, StepProps, StepPropsPublic, stepProps } from "./src/item.js";
import { _default as _default$1 } from "./src/item.vue.js";
import { STEPS_INJECTION_KEY } from "./src/tokens.js";
//#region ../../packages/components/steps/index.d.ts
declare const ElSteps: SFCWithInstall<typeof _default> & {
Step: typeof _default$1;
};
declare const ElStep: SFCWithInstall<typeof _default$1>;
//#endregion
export { ElStep, ElSteps, ElSteps as default, STEPS_INJECTION_KEY, StepInstance, StepProps, StepPropsPublic, StepsEmits, StepsInstance, StepsProps, StepsPropsPublic, StepsStatus, stepProps, stepsEmits, stepsProps };
+14
View File
@@ -0,0 +1,14 @@
import { withInstall, withNoopInstall } from "../../utils/vue/install.mjs";
import { stepsEmits, stepsProps } from "./src/steps.mjs";
import { STEPS_INJECTION_KEY } from "./src/tokens.mjs";
import steps_default from "./src/steps2.mjs";
import { stepProps } from "./src/item.mjs";
import item_default from "./src/item2.mjs";
//#region ../../packages/components/steps/index.ts
const ElSteps = withInstall(steps_default, { Step: item_default });
const ElStep = withNoopInstall(item_default);
//#endregion
export { ElStep, ElSteps, ElSteps as default, STEPS_INJECTION_KEY, stepProps, stepsEmits, stepsProps };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Steps","Step"],"sources":["../../../../../packages/components/steps/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Steps from './src/steps.vue'\nimport Step from './src/item.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElSteps: SFCWithInstall<typeof Steps> & {\n Step: typeof Step\n} = withInstall(Steps, {\n Step,\n})\nexport default ElSteps\nexport const ElStep: SFCWithInstall<typeof Step> = withNoopInstall(Step)\n\nexport * from './src/item'\nexport * from './src/steps'\nexport * from './src/tokens'\n"],"mappings":";;;;;;;;AAMA,MAAa,UAET,YAAYA,eAAO,EACrB,oBACD,CAAC;AAEF,MAAa,SAAsC,gBAAgBC,aAAK"}
+49
View File
@@ -0,0 +1,49 @@
import { IconPropType } from "../../../utils/vue/icon.js";
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { _default } from "./item.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/steps/src/item.d.ts
interface StepProps {
/**
* @description step title
*/
title?: string;
/**
* @description step custom icon. Icons can be passed via named slot as well
*/
icon?: IconPropType;
/**
* @description step description
* @default ''
*/
description?: string;
/**
* @description current status. It will be automatically set by Steps if not configured.
* @default ''
*/
status?: '' | 'wait' | 'process' | 'finish' | 'error' | 'success';
}
/**
* @deprecated Removed after 3.0.0, Use `StepProps` instead.
*/
declare const stepProps: {
readonly title: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly icon: {
readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly description: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
readonly status: EpPropFinalized<StringConstructor, "" | "error" | "success" | "wait" | "finish" | "process", unknown, "", boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `StepProps` instead.
*/
type StepPropsPublic = ExtractPublicPropTypes<typeof stepProps>;
type StepInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { StepInstance, StepProps, StepPropsPublic, stepProps };
+34
View File
@@ -0,0 +1,34 @@
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
import { iconPropType } from "../../../utils/vue/icon.mjs";
//#region ../../packages/components/steps/src/item.ts
/**
* @deprecated Removed after 3.0.0, Use `StepProps` instead.
*/
const stepProps = buildProps({
title: {
type: String,
default: ""
},
icon: { type: iconPropType },
description: {
type: String,
default: ""
},
status: {
type: String,
values: [
"",
"wait",
"process",
"finish",
"error",
"success"
],
default: ""
}
});
//#endregion
export { stepProps };
//# sourceMappingURL=item.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"item.mjs","names":[],"sources":["../../../../../../packages/components/steps/src/item.ts"],"sourcesContent":["import { buildProps, iconPropType } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { IconPropType } from '@element-plus/utils'\nimport type Step from './item.vue'\n\nexport interface StepProps {\n /**\n * @description step title\n */\n title?: string\n /**\n * @description step custom icon. Icons can be passed via named slot as well\n */\n icon?: IconPropType\n /**\n * @description step description\n * @default ''\n */\n description?: string\n /**\n * @description current status. It will be automatically set by Steps if not configured.\n * @default ''\n */\n status?: '' | 'wait' | 'process' | 'finish' | 'error' | 'success'\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `StepProps` instead.\n */\nexport const stepProps = buildProps({\n /**\n * @description step title\n */\n title: {\n type: String,\n default: '',\n },\n /**\n * @description step custom icon. Icons can be passed via named slot as well\n */\n icon: {\n type: iconPropType,\n },\n /**\n * @description step description\n */\n description: {\n type: String,\n default: '',\n },\n /**\n * @description current status. It will be automatically set by Steps if not configured.\n */\n status: {\n type: String,\n values: ['', 'wait', 'process', 'finish', 'error', 'success'],\n default: '',\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `StepProps` instead.\n */\nexport type StepPropsPublic = ExtractPublicPropTypes<typeof stepProps>\n\nexport type StepInstance = InstanceType<typeof Step> & unknown\n"],"mappings":";;;;;;;AA8BA,MAAa,YAAY,WAAW;CAIlC,OAAO;EACL,MAAM;EACN,SAAS;EACV;CAID,MAAM,EACJ,MAAM,cACP;CAID,aAAa;EACX,MAAM;EACN,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,QAAQ;GAAC;GAAI;GAAQ;GAAW;GAAU;GAAS;GAAU;EAC7D,SAAS;EACV;CACF,CAAU"}
@@ -0,0 +1,31 @@
import { IconPropType } from "../../../utils/vue/icon.js";
import "../../../utils/index.js";
import "./steps.js";
import { StepProps } from "./item.js";
import * as vue from "vue";
import { ComputedRef, Ref, VNode } from "vue";
//#region ../../packages/components/steps/src/item.vue.d.ts
declare var __VLS_1: {}, __VLS_36: {}, __VLS_38: {};
type __VLS_Slots = {} & {
icon?: (props: typeof __VLS_1) => any;
} & {
title?: (props: typeof __VLS_36) => any;
} & {
description?: (props: typeof __VLS_38) => any;
};
declare const __VLS_base: vue.DefineComponent<StepProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<StepProps> & Readonly<{}>, {
title: string;
description: string;
icon: IconPropType;
status: "" | "wait" | "process" | "finish" | "error" | "success";
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,153 @@
import { isNumber } from "../../../utils/types.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { ElIcon } from "../../icon/index.mjs";
import { STEPS_INJECTION_KEY } from "./tokens.mjs";
import { stepProps } from "./item.mjs";
import { Check, Close } from "@element-plus/icons-vue";
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
//#region ../../packages/components/steps/src/item.vue?vue&type=script&setup=true&lang.ts
var item_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElStep",
__name: "item",
props: stepProps,
setup(__props) {
const props = __props;
const ns = useNamespace("step");
const index = ref(-1);
const lineStyle = ref({});
const internalStatus = ref("");
const parent = inject(STEPS_INJECTION_KEY);
const currentInstance = getCurrentInstance();
let stepDiff = 0;
let beforeActive = 0;
onMounted(() => {
watch([
() => parent.props.active,
() => parent.props.processStatus,
() => parent.props.finishStatus
], ([active], [oldActive]) => {
beforeActive = oldActive || 0;
stepDiff = active - beforeActive;
updateStatus(active);
}, { immediate: true });
});
const currentStatus = computed(() => {
return props.status || internalStatus.value;
});
const prevInternalStatus = computed(() => {
const prevStep = parent.steps.value[index.value - 1];
return prevStep ? prevStep.internalStatus.value : "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 containerKls = computed(() => {
return [
ns.b(),
ns.is(isSimple.value ? "simple" : parent.props.direction),
ns.is("flex", isLast.value && !space.value && !isCenter.value),
ns.is("center", isCenter.value && !isVertical.value && !isSimple.value)
];
});
const style = computed(() => {
const style = { flexBasis: isNumber(space.value) ? `${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) => {
const isWait = status === "wait";
const style = { transitionDelay: `${Math.abs(stepDiff) === 1 ? 0 : stepDiff > 0 ? (index.value + 1 - beforeActive) * 150 : -(index.value + 1 - parent.props.active) * 150}ms` };
const step = status === parent.props.processStatus || isWait ? 0 : 100;
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 && prevInternalStatus.value !== "error") internalStatus.value = parent.props.processStatus;
else internalStatus.value = "wait";
const prevChild = parent.steps.value[index.value - 1];
if (prevChild) prevChild.calcProgress(internalStatus.value);
};
const stepItemState = {
uid: currentInstance.uid,
getVnode: () => currentInstance.vnode,
currentStatus,
internalStatus,
setIndex,
calcProgress
};
parent.addStep(stepItemState);
onBeforeUnmount(() => {
parent.removeStep(stepItemState);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
style: normalizeStyle(style.value),
class: normalizeClass(containerKls.value)
}, [
createCommentVNode(" icon & line "),
createElementVNode("div", { class: normalizeClass([unref(ns).e("head"), unref(ns).is(currentStatus.value)]) }, [!isSimple.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("line"))
}, [createElementVNode("i", {
class: normalizeClass(unref(ns).e("line-inner")),
style: normalizeStyle(lineStyle.value)
}, null, 6)], 2)) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass([unref(ns).e("icon"), unref(ns).is(__props.icon || _ctx.$slots.icon ? "icon" : "text")]) }, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createBlock(unref(ElIcon), {
key: 0,
class: normalizeClass(unref(ns).e("icon-inner"))
}, {
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.icon)))]),
_: 1
}, 8, ["class"])) : currentStatus.value === "success" ? (openBlock(), createBlock(unref(ElIcon), {
key: 1,
class: normalizeClass([unref(ns).e("icon-inner"), unref(ns).is("status")])
}, {
default: withCtx(() => [createVNode(unref(Check))]),
_: 1
}, 8, ["class"])) : currentStatus.value === "error" ? (openBlock(), createBlock(unref(ElIcon), {
key: 2,
class: normalizeClass([unref(ns).e("icon-inner"), unref(ns).is("status")])
}, {
default: withCtx(() => [createVNode(unref(Close))]),
_: 1
}, 8, ["class"])) : !isSimple.value ? (openBlock(), createElementBlock("div", {
key: 3,
class: normalizeClass(unref(ns).e("icon-inner"))
}, toDisplayString(index.value + 1), 3)) : createCommentVNode("v-if", true)])], 2)], 2),
createCommentVNode(" title & description "),
createElementVNode("div", { class: normalizeClass(unref(ns).e("main")) }, [createElementVNode("div", { class: normalizeClass([unref(ns).e("title"), unref(ns).is(currentStatus.value)]) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2), isSimple.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(unref(ns).e("arrow"))
}, null, 2)) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([unref(ns).e("description"), unref(ns).is(currentStatus.value)])
}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 2))], 2)
], 6);
};
}
});
//#endregion
export { item_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=item.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
+8
View File
@@ -0,0 +1,8 @@
import item_vue_vue_type_script_setup_true_lang_default from "./item.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/steps/src/item.vue
var item_default = item_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { item_default as default };
//# sourceMappingURL=item2.mjs.map
File diff suppressed because one or more lines are too long
+76
View File
@@ -0,0 +1,76 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { _default } from "./steps.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/steps/src/steps.d.ts
type StepsStatus = 'wait' | 'process' | 'finish' | 'error' | 'success';
interface StepsProps {
/**
* @description the spacing of each step, will be responsive if omitted. Supports percentage.
* @default ''
*/
space?: number | string;
/**
* @description current activation step
* @default 0
*/
active?: number;
/**
* @description display direction
* @default 'horizontal'
*/
direction?: 'horizontal' | 'vertical';
/**
* @description center title and description
*/
alignCenter?: boolean;
/**
* @description whether to apply simple theme
*/
simple?: boolean;
/**
* @description status of end step
* @default 'finish'
*/
finishStatus?: StepsStatus;
/**
* @description status of current step
* @default 'process'
*/
processStatus?: StepsStatus;
}
/**
* @deprecated Removed after 3.0.0, Use `StepsProps` instead.
*/
declare const stepsProps: {
readonly space: EpPropFinalized<readonly [NumberConstructor, StringConstructor], unknown, unknown, "", boolean>;
readonly active: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly direction: EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "horizontal", boolean>;
readonly alignCenter: {
readonly type: vue.PropType<EpPropMergeType<BooleanConstructor, unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly simple: {
readonly type: vue.PropType<EpPropMergeType<BooleanConstructor, unknown, unknown>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly finishStatus: EpPropFinalized<StringConstructor, "error" | "success" | "wait" | "finish" | "process", unknown, "finish", boolean>;
readonly processStatus: EpPropFinalized<StringConstructor, "error" | "success" | "wait" | "finish" | "process", unknown, "process", boolean>;
};
/**
* @deprecated Removed after 3.0.0, Use `StepsProps` instead.
*/
type StepsPropsPublic = ExtractPublicPropTypes<typeof stepsProps>;
declare const stepsEmits: {
change: (newVal: number, oldVal: number) => boolean;
};
type StepsEmits = typeof stepsEmits;
type StepsInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { StepsEmits, StepsInstance, StepsProps, StepsPropsPublic, StepsStatus, stepsEmits, stepsProps };
+52
View File
@@ -0,0 +1,52 @@
import { CHANGE_EVENT } from "../../../constants/event.mjs";
import { isNumber } from "../../../utils/types.mjs";
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/steps/src/steps.ts
/**
* @deprecated Removed after 3.0.0, Use `StepsProps` instead.
*/
const stepsProps = buildProps({
space: {
type: [Number, String],
default: ""
},
active: {
type: Number,
default: 0
},
direction: {
type: String,
default: "horizontal",
values: ["horizontal", "vertical"]
},
alignCenter: { type: Boolean },
simple: { type: Boolean },
finishStatus: {
type: String,
values: [
"wait",
"process",
"finish",
"error",
"success"
],
default: "finish"
},
processStatus: {
type: String,
values: [
"wait",
"process",
"finish",
"error",
"success"
],
default: "process"
}
});
const stepsEmits = { [CHANGE_EVENT]: (newVal, oldVal) => [newVal, oldVal].every(isNumber) };
//#endregion
export { stepsEmits, stepsProps };
//# sourceMappingURL=steps.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"steps.mjs","names":[],"sources":["../../../../../../packages/components/steps/src/steps.ts"],"sourcesContent":["import { CHANGE_EVENT } from '@element-plus/constants'\nimport { buildProps, isNumber } from '@element-plus/utils'\n\nimport type Steps from './steps.vue'\nimport type { ExtractPublicPropTypes } from 'vue'\n\nexport type StepsStatus = 'wait' | 'process' | 'finish' | 'error' | 'success'\n\nexport interface StepsProps {\n /**\n * @description the spacing of each step, will be responsive if omitted. Supports percentage.\n * @default ''\n */\n space?: number | string\n /**\n * @description current activation step\n * @default 0\n */\n active?: number\n /**\n * @description display direction\n * @default 'horizontal'\n */\n direction?: 'horizontal' | 'vertical'\n /**\n * @description center title and description\n */\n alignCenter?: boolean\n /**\n * @description whether to apply simple theme\n */\n simple?: boolean\n /**\n * @description status of end step\n * @default 'finish'\n */\n finishStatus?: StepsStatus\n /**\n * @description status of current step\n * @default 'process'\n */\n processStatus?: StepsStatus\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `StepsProps` instead.\n */\nexport const stepsProps = buildProps({\n /**\n * @description the spacing of each step, will be responsive if omitted. Supports percentage.\n */\n space: {\n type: [Number, String],\n default: '',\n },\n /**\n * @description current activation step\n */\n active: {\n type: Number,\n default: 0,\n },\n /**\n * @description display direction\n */\n direction: {\n type: String,\n default: 'horizontal',\n values: ['horizontal', 'vertical'],\n },\n /**\n * @description center title and description\n */\n alignCenter: {\n type: Boolean,\n },\n /**\n * @description whether to apply simple theme\n */\n simple: {\n type: Boolean,\n },\n /**\n * @description status of end step\n */\n finishStatus: {\n type: String,\n values: ['wait', 'process', 'finish', 'error', 'success'],\n default: 'finish',\n },\n /**\n * @description status of current step\n */\n processStatus: {\n type: String,\n values: ['wait', 'process', 'finish', 'error', 'success'],\n default: 'process',\n },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `StepsProps` instead.\n */\nexport type StepsPropsPublic = ExtractPublicPropTypes<typeof stepsProps>\n\nexport const stepsEmits = {\n [CHANGE_EVENT]: (newVal: number, oldVal: number) =>\n [newVal, oldVal].every(isNumber),\n}\nexport type StepsEmits = typeof stepsEmits\n\nexport type StepsInstance = InstanceType<typeof Steps> & unknown\n"],"mappings":";;;;;;;;AA+CA,MAAa,aAAa,WAAW;CAInC,OAAO;EACL,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACT,QAAQ,CAAC,cAAc,WAAW;EACnC;CAID,aAAa,EACX,MAAM,SACP;CAID,QAAQ,EACN,MAAM,SACP;CAID,cAAc;EACZ,MAAM;EACN,QAAQ;GAAC;GAAQ;GAAW;GAAU;GAAS;GAAU;EACzD,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,QAAQ;GAAC;GAAQ;GAAW;GAAU;GAAS;GAAU;EACzD,SAAS;EACV;CACF,CAAU;AAOX,MAAa,aAAa,GACvB,gBAAgB,QAAgB,WAC/B,CAAC,QAAQ,OAAO,CAAC,MAAM,SAAS,EACnC"}
@@ -0,0 +1,28 @@
import { StepsProps, StepsStatus } from "./steps.js";
import * as vue from "vue";
//#region ../../packages/components/steps/src/steps.vue.d.ts
declare var __VLS_1: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_1) => any;
};
declare const __VLS_base: vue.DefineComponent<StepsProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
change: (newVal: number, oldVal: number) => void;
}, string, vue.PublicProps, Readonly<StepsProps> & Readonly<{
onChange?: ((newVal: number, oldVal: number) => any) | undefined;
}>, {
space: number | string;
active: number;
direction: "horizontal" | "vertical";
finishStatus: StepsStatus;
processStatus: StepsStatus;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,41 @@
import { CHANGE_EVENT } from "../../../constants/event.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { useOrderedChildren } from "../../../hooks/use-ordered-children/index.mjs";
import { stepsEmits, stepsProps } from "./steps.mjs";
import { STEPS_INJECTION_KEY } from "./tokens.mjs";
import { createElementBlock, createVNode, defineComponent, getCurrentInstance, normalizeClass, openBlock, provide, renderSlot, unref, watch } from "vue";
//#region ../../packages/components/steps/src/steps.vue?vue&type=script&setup=true&lang.ts
var steps_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElSteps",
__name: "steps",
props: stepsProps,
emits: stepsEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const ns = useNamespace("steps");
const { children: steps, addChild: addStep, removeChild: removeStep, ChildrenSorter: StepsSorter } = useOrderedChildren(getCurrentInstance(), "ElStep");
watch(steps, () => {
steps.value.forEach((instance, index) => {
instance.setIndex(index);
});
});
provide(STEPS_INJECTION_KEY, {
props,
steps,
addStep,
removeStep
});
watch(() => props.active, (newVal, oldVal) => {
emit(CHANGE_EVENT, newVal, oldVal);
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", { class: normalizeClass([unref(ns).b(), unref(ns).m(__props.simple ? "simple" : __props.direction)]) }, [renderSlot(_ctx.$slots, "default"), createVNode(unref(StepsSorter))], 2);
};
}
});
//#endregion
export { steps_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=steps.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"steps.vue_vue_type_script_setup_true_lang.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":";;;;;;;;;;;;;;EAqBA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAEb,MAAM,KAAK,aAAa,QAAO;EAC/B,MAAM,EACJ,UAAU,OACV,UAAU,SACV,aAAa,YACb,gBAAgB,gBACd,mBAAkC,oBAAoB,EAAG,SAAQ;AAErE,QAAM,aAAa;AACjB,SAAM,MAAM,SAAS,UAAyB,UAAkB;AAC9D,aAAS,SAAS,MAAK;KACxB;IACF;AAED,UAAQ,qBAAqB;GAAE;GAAO;GAAO;GAAS;GAAY,CAAA;AAElE,cACQ,MAAM,SACX,QAAgB,WAAmB;AAClC,QAAK,cAAc,QAAQ,OAAM;IAErC;;uBAlDE,mBAGM,OAAA,EAHA,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,GAAC,EAAI,MAAA,GAAE,CAAC,EAAE,QAAA,SAAM,WAAc,QAAA,UAAS,CAAA,CAAA,KACtD,WAAQ,KAAA,QAAA,UAAA,EACR,YAAgB,MAAA,YAAA,CAAA"}
@@ -0,0 +1,8 @@
import steps_vue_vue_type_script_setup_true_lang_default from "./steps.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/steps/src/steps.vue
var steps_default = steps_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { steps_default as default };
//# sourceMappingURL=steps2.mjs.map
@@ -0,0 +1 @@
{"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":""}
@@ -0,0 +1,4 @@
//#region ../../packages/components/steps/src/tokens.d.ts
declare const STEPS_INJECTION_KEY = "ElSteps";
//#endregion
export { STEPS_INJECTION_KEY };
@@ -0,0 +1,6 @@
//#region ../../packages/components/steps/src/tokens.ts
const STEPS_INJECTION_KEY = "ElSteps";
//#endregion
export { STEPS_INJECTION_KEY };
//# sourceMappingURL=tokens.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"tokens.mjs","names":[],"sources":["../../../../../../packages/components/steps/src/tokens.ts"],"sourcesContent":["export const STEPS_INJECTION_KEY = 'ElSteps'\n"],"mappings":";AAAA,MAAa,sBAAsB"}
+2
View File
@@ -0,0 +1,2 @@
import "../../base/style/css.mjs";
import "element-plus/theme-chalk/el-steps.css";
@@ -0,0 +1,2 @@
import "../../base/style/index.mjs";
import "element-plus/theme-chalk/src/steps.scss";