element-plus-secondary 0.0.21 → 0.1.1

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

@@ -2,202 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-require('../../../hooks/index.js');
-var index$1 = require('../../icon/index.js');
-var iconsVue = require('@element-plus/icons-vue');
-var item = require('./item.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-namespace/index.js');
+require('../../../utils/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var icon = require('../../../utils/vue/icon.js');
 
-const __default__ = vue.defineComponent({
-  name: "ElStep"
-});
-const _sfc_main = vue.defineComponent({
-  ...__default__,
-  props: item.stepProps,
-  setup(__props) {
-    const props = __props;
-    const ns = index.useNamespace("step");
-    const index$2 = 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 == null ? void 0 : currentInstance.uid));
-    });
-    const currentStatus = vue.computed(() => {
-      return props.status || internalStatus.value;
-    });
-    const prevStatus = vue.computed(() => {
-      const prevStep = parent.steps.value[index$2.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 == null ? void 0 : 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$2.value = val;
-    };
-    const calcProgress = (status) => {
-      let step = 100;
-      const style2 = {};
-      style2.transitionDelay = `${150 * index$2.value}ms`;
-      if (status === parent.props.processStatus) {
-        step = 0;
-      } else if (status === "wait") {
-        step = 0;
-        style2.transitionDelay = `${-150 * index$2.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$2.value) {
-        internalStatus.value = parent.props.finishStatus;
-      } else if (activeIndex === index$2.value && prevStatus.value !== "error") {
-        internalStatus.value = parent.props.processStatus;
-      } else {
-        internalStatus.value = "wait";
-      }
-      const prevChild = parent.steps.value[index$2.value - 1];
-      if (prevChild)
-        prevChild.calcProgress(internalStatus.value);
-    };
-    const stepItemState = vue.reactive({
-      uid: vue.computed(() => currentInstance == null ? void 0 : currentInstance.uid),
-      currentStatus,
-      setIndex,
-      calcProgress
-    });
-    parent.steps.value = [...parent.steps.value, stepItemState];
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        style: vue.normalizeStyle(vue.unref(style)),
-        class: vue.normalizeClass([
-          vue.unref(ns).b(),
-          vue.unref(ns).is(vue.unref(isSimple) ? "simple" : vue.unref(parent).props.direction),
-          vue.unref(ns).is("flex", vue.unref(isLast) && !vue.unref(space) && !vue.unref(isCenter)),
-          vue.unref(ns).is("center", vue.unref(isCenter) && !vue.unref(isVertical) && !vue.unref(isSimple))
-        ])
-      }, [
-        vue.createCommentVNode(" icon & line "),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass([vue.unref(ns).e("head"), vue.unref(ns).is(vue.unref(currentStatus))])
-        }, [
-          !vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: vue.normalizeClass(vue.unref(ns).e("line"))
-          }, [
-            vue.createElementVNode("i", {
-              class: vue.normalizeClass(vue.unref(ns).e("line-inner")),
-              style: vue.normalizeStyle(lineStyle.value)
-            }, null, 6)
-          ], 2)) : vue.createCommentVNode("v-if", true),
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(ns).is(_ctx.icon || _ctx.$slots.icon ? "icon" : "text")])
-          }, [
-            vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-              _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), {
-                key: 0,
-                class: vue.normalizeClass(vue.unref(ns).e("icon-inner"))
-              }, {
-                default: vue.withCtx(() => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
-                ]),
-                _: 1
-              }, 8, ["class"])) : vue.unref(currentStatus) === "success" ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), {
-                key: 1,
-                class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")])
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(iconsVue.Check))
-                ]),
-                _: 1
-              }, 8, ["class"])) : vue.unref(currentStatus) === "error" ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), {
-                key: 2,
-                class: vue.normalizeClass([vue.unref(ns).e("icon-inner"), vue.unref(ns).is("status")])
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(iconsVue.Close))
-                ]),
-                _: 1
-              }, 8, ["class"])) : vue.unref(currentStatus) === "finish" ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 3,
-                class: vue.normalizeClass(vue.unref(ns).e("icon-inner"))
-              }, null, 2)) : !vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", {
-                key: 4,
-                class: vue.normalizeClass(vue.unref(ns).e("icon-inner"))
-              }, vue.toDisplayString(index$2.value + 1), 3)) : vue.createCommentVNode("v-if", true)
-            ])
-          ], 2)
-        ], 2),
-        vue.createCommentVNode(" title & description "),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(vue.unref(ns).e("main"))
-        }, [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass([vue.unref(ns).e("title"), vue.unref(ns).is(vue.unref(currentStatus))])
-          }, [
-            vue.renderSlot(_ctx.$slots, "title", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
-            ])
-          ], 2),
-          vue.unref(isSimple) ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: vue.normalizeClass(vue.unref(ns).e("arrow"))
-          }, null, 2)) : (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
-            class: vue.normalizeClass([vue.unref(ns).e("description"), vue.unref(ns).is(vue.unref(currentStatus))])
-          }, [
-            vue.renderSlot(_ctx.$slots, "description", {}, () => [
-              vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
-            ])
-          ], 2))
-        ], 2)
-      ], 6);
-    };
+const stepProps = runtime.buildProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: icon.iconPropType
+  },
+  description: {
+    type: String,
+    default: ""
+  },
+  status: {
+    type: String,
+    values: ["", "wait", "process", "finish", "error", "success"],
+    default: ""
   }
 });
-var Step = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/st/Desktop/vue/nxx-ui/packages/components/steps/src/item.vue"]]);
 
-exports["default"] = Step;
+exports.stepProps = stepProps;
 //# sourceMappingURL=item2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"item2.js","sources":["../../../../../../packages/components/steps/src/item.vue"],"sourcesContent":["<template>\n  <div\n    :style=\"style\"\n    :class=\"[\n      ns.b(),\n      ns.is(isSimple ? 'simple' : parent.props.direction),\n      ns.is('flex', isLast && !space && !isCenter),\n      ns.is('center', isCenter && !isVertical && !isSimple),\n    ]\"\n  >\n    <!-- icon & line -->\n    <div :class=\"[ns.e('head'), ns.is(currentStatus)]\">\n      <div v-if=\"!isSimple\" :class=\"ns.e('line')\">\n        <i :class=\"ns.e('line-inner')\" :style=\"lineStyle\" />\n      </div>\n\n      <div\n        :class=\"[ns.e('icon'), ns.is(icon || $slots.icon ? 'icon' : 'text')]\"\n      >\n        <slot name=\"icon\">\n          <el-icon v-if=\"icon\" :class=\"ns.e('icon-inner')\">\n            <component :is=\"icon\" />\n          </el-icon>\n          <el-icon\n            v-else-if=\"currentStatus === 'success'\"\n            :class=\"[ns.e('icon-inner'), ns.is('status')]\"\n          >\n            <Check />\n          </el-icon>\n          <el-icon\n            v-else-if=\"currentStatus === 'error'\"\n            :class=\"[ns.e('icon-inner'), ns.is('status')]\"\n          >\n            <Close />\n          </el-icon>\n          <div v-else-if=\"currentStatus === 'finish'\" :class=\"ns.e('icon-inner')\">\n          </div>\n          <div v-else-if=\"!isSimple\" :class=\"ns.e('icon-inner')\">\n            {{ index + 1 }}\n          </div>\n        </slot>\n      </div>\n    </div>\n    <!-- title & description -->\n    <div :class=\"ns.e('main')\">\n      <div :class=\"[ns.e('title'), ns.is(currentStatus)]\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"isSimple\" :class=\"ns.e('arrow')\" />\n      <div v-else :class=\"[ns.e('description'), ns.is(currentStatus)]\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Check, Close } from '@element-plus/icons-vue'\nimport { stepProps } from './item'\n\nimport type { CSSProperties, Ref } 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 | undefined\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\ndefineOptions({\n  name: 'ElStep',\n})\n\nconst props = defineProps(stepProps)\nconst ns = useNamespace('step')\nconst index = ref(-1)\nconst lineStyle = ref({})\nconst internalStatus = ref('')\nconst parent = inject('ElSteps') as IStepsInject\nconst currentInstance = getCurrentInstance()\n\nonMounted(() => {\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\nonBeforeUnmount(() => {\n  parent.steps.value = parent.steps.value.filter(\n    (instance) => instance.uid !== currentInstance?.uid\n  )\n})\n\nconst currentStatus = computed(() => {\n  return props.status || internalStatus.value\n})\n\nconst prevStatus = computed(() => {\n  const prevStep = parent.steps.value[index.value - 1]\n  return prevStep ? prevStep.currentStatus : 'wait'\n})\n\nconst isCenter = computed(() => {\n  return parent.props.alignCenter\n})\n\nconst isVertical = computed(() => {\n  return parent.props.direction === 'vertical'\n})\n\nconst isSimple = computed(() => {\n  return parent.props.simple\n})\n\nconst stepsCount = computed(() => {\n  return parent.steps.value.length\n})\n\nconst isLast = computed(() => {\n  return parent.steps.value[stepsCount.value - 1]?.uid === currentInstance?.uid\n})\n\nconst space = computed(() => {\n  return isSimple.value ? '' : parent.props.space\n})\n\nconst style = computed(() => {\n  const style: CSSProperties = {\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\nconst setIndex = (val: number) => {\n  index.value = val\n}\n\nconst calcProgress = (status: string) => {\n  let step = 100\n  const style: CSSProperties = {}\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[parent.props.direction === 'vertical' ? 'height' : 'width'] = `${step}%`\n  lineStyle.value = style\n}\n\nconst updateStatus = (activeIndex: number) => {\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[index.value - 1]\n  if (prevChild) prevChild.calcProgress(internalStatus.value)\n}\n\nconst stepItemState = reactive({\n  uid: computed(() => currentInstance?.uid),\n  currentStatus,\n  setIndex,\n  calcProgress,\n})\n\nparent.steps.value = [...parent.steps.value, stepItemState]\n</script>\n"],"names":["useNamespace","index","ref","inject","getCurrentInstance","onMounted","watch","onBeforeUnmount","computed","reactive"],"mappings":"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"}
+{"version":3,"file":"item2.js","sources":["../../../../../../packages/components/steps/src/item.ts"],"sourcesContent":["import { buildProps, iconPropType } from '@element-plus/utils'\nimport type Step from './item.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const stepProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  icon: {\n    type: iconPropType,\n  },\n  description: {\n    type: String,\n    default: '',\n  },\n  status: {\n    type: String,\n    values: ['', 'wait', 'process', 'finish', 'error', 'success'],\n    default: '',\n  },\n} as const)\n\nexport type StepProps = ExtractPropTypes<typeof stepProps>\n\nexport type StepInstance = InstanceType<typeof Step>\n"],"names":["buildProps","iconPropType"],"mappings":";;;;;;;;AACY,MAAC,SAAS,GAAGA,kBAAU,CAAC;AACpC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,iBAAY;AACtB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;AACjE,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,CAAC;;;;"}

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

@@ -2,44 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
 require('../../../constants/index.js');
-require('../../../hooks/index.js');
-var steps = require('./steps2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-namespace/index.js');
+require('../../../utils/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 var event = require('../../../constants/event.js');
+var core = require('@vueuse/core');
 
-const __default__ = vue.defineComponent({
-  name: "ElSteps"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: steps.stepsProps,
-  emits: steps.stepsEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const ns = index.useNamespace("steps");
-    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(event.CHANGE_EVENT, newVal, oldVal);
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.simple ? "simple" : _ctx.direction)])
-      }, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
+const stepsProps = runtime.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"
   }
 });
-var Steps = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/st/Desktop/vue/nxx-ui/packages/components/steps/src/steps.vue"]]);
+const stepsEmits = {
+  [event.CHANGE_EVENT]: (newVal, oldVal) => [newVal, oldVal].every(core.isNumber)
+};
 
-exports["default"] = Steps;
+exports.stepsEmits = stepsEmits;
+exports.stepsProps = stepsProps;
 //# sourceMappingURL=steps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"steps.js","sources":["../../../../../../packages/components/steps/src/steps.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.m(simple ? 'simple' : direction)]\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { provide, ref, watch } from 'vue'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { stepsEmits, stepsProps } from './steps'\n\nimport type { Ref } from 'vue'\nimport type { StepItemState } from './item.vue'\n\ndefineOptions({\n  name: 'ElSteps',\n})\n\nconst props = defineProps(stepsProps)\nconst emit = defineEmits(stepsEmits)\n\nconst ns = useNamespace('steps')\n\nconst steps: Ref<StepItemState[]> = ref([])\n\nwatch(steps, () => {\n  steps.value.forEach((instance: StepItemState, index: number) => {\n    instance.setIndex(index)\n  })\n})\n\nprovide('ElSteps', { props, steps })\n\nwatch(\n  () => props.active,\n  (newVal: number, oldVal: number) => {\n    emit(CHANGE_EVENT, newVal, oldVal)\n  }\n)\n</script>\n"],"names":["useNamespace","ref","watch","provide","CHANGE_EVENT"],"mappings":";;;;;;;;;;;;uCAec,CAAA;AAAA,EACZ,IAAM,EAAA,SAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,EAAA,GAAKA,mBAAa,OAAO,CAAA,CAAA;AAE/B,IAAM,MAAA,KAAA,GAA8BC,OAAI,CAAA,EAAE,CAAA,CAAA;AAE1C,IAAAC,SAAA,CAAM,OAAO,MAAM;AACjB,MAAA,KAAA,CAAM,KAAM,CAAA,OAAA,CAAQ,CAAC,QAAA,EAAyB,KAAkB,KAAA;AAC9D,QAAA,QAAA,CAAS,SAAS,KAAK,CAAA,CAAA;AAAA,OACxB,CAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAED,IAAAC,WAAA,CAAQ,SAAW,EAAA,EAAE,KAAO,EAAA,KAAA,EAAO,CAAA,CAAA;AAEnC,IAAAD,SAAA,CACE,MAAM,KAAA,CAAM,MACZ,EAAA,CAAC,QAAgB,MAAmB,KAAA;AAClC,MAAK,IAAA,CAAAE,kBAAA,EAAc,QAAQ,MAAM,CAAA,CAAA;AAAA,KAErC,CAAA,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"steps.js","sources":["../../../../../../packages/components/steps/src/steps.ts"],"sourcesContent":["import { CHANGE_EVENT } from '@element-plus/constants'\nimport { buildProps, isNumber } from '@element-plus/utils'\nimport type Steps from './steps.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const stepsProps = buildProps({\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    values: ['horizontal', 'vertical'],\n  },\n  alignCenter: {\n    type: Boolean,\n  },\n  simple: {\n    type: Boolean,\n  },\n  finishStatus: {\n    type: String,\n    values: ['wait', 'process', 'finish', 'error', 'success'],\n    default: 'finish',\n  },\n  processStatus: {\n    type: String,\n    values: ['wait', 'process', 'finish', 'error', 'success'],\n    default: 'process',\n  },\n} as const)\nexport type StepsProps = ExtractPropTypes<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>\n"],"names":["buildProps","CHANGE_EVENT","isNumber"],"mappings":";;;;;;;;;;AAEY,MAAC,UAAU,GAAGA,kBAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,YAAY;AACzB,IAAI,MAAM,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;AACtC,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,OAAO;AACjB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;AAC7D,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;AAC7D,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,CAACC,kBAAY,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,CAACC,aAAQ,CAAC;AACtE;;;;;"}

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

@@ -2,47 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
 require('../../../constants/index.js');
-require('../../../utils/index.js');
-var runtime = require('../../../utils/vue/props/runtime.js');
+require('../../../hooks/index.js');
+var steps = require('./steps.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
 var event = require('../../../constants/event.js');
-var core = require('@vueuse/core');
 
-const stepsProps = runtime.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 __default__ = vue.defineComponent({
+  name: "ElSteps"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: steps.stepsProps,
+  emits: steps.stepsEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = index.useNamespace("steps");
+    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(event.CHANGE_EVENT, newVal, oldVal);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.simple ? "simple" : _ctx.direction)])
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
   }
 });
-const stepsEmits = {
-  [event.CHANGE_EVENT]: (newVal, oldVal) => [newVal, oldVal].every(core.isNumber)
-};
+var Steps = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/st/Desktop/vue/nxx-ui/packages/components/steps/src/steps.vue"]]);
 
-exports.stepsEmits = stepsEmits;
-exports.stepsProps = stepsProps;
+exports["default"] = Steps;
 //# sourceMappingURL=steps2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"steps2.js","sources":["../../../../../../packages/components/steps/src/steps.ts"],"sourcesContent":["import { CHANGE_EVENT } from '@element-plus/constants'\nimport { buildProps, isNumber } from '@element-plus/utils'\nimport type Steps from './steps.vue'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const stepsProps = buildProps({\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    values: ['horizontal', 'vertical'],\n  },\n  alignCenter: {\n    type: Boolean,\n  },\n  simple: {\n    type: Boolean,\n  },\n  finishStatus: {\n    type: String,\n    values: ['wait', 'process', 'finish', 'error', 'success'],\n    default: 'finish',\n  },\n  processStatus: {\n    type: String,\n    values: ['wait', 'process', 'finish', 'error', 'success'],\n    default: 'process',\n  },\n} as const)\nexport type StepsProps = ExtractPropTypes<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>\n"],"names":["buildProps","CHANGE_EVENT","isNumber"],"mappings":";;;;;;;;;;AAEY,MAAC,UAAU,GAAGA,kBAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,YAAY;AACzB,IAAI,MAAM,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;AACtC,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,OAAO;AACjB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;AAC7D,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;AAC7D,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,CAACC,kBAAY,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,CAACC,aAAQ,CAAC;AACtE;;;;;"}
+{"version":3,"file":"steps2.js","sources":["../../../../../../packages/components/steps/src/steps.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.m(simple ? 'simple' : direction)]\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { provide, ref, watch } from 'vue'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport { stepsEmits, stepsProps } from './steps'\n\nimport type { Ref } from 'vue'\nimport type { StepItemState } from './item.vue'\n\ndefineOptions({\n  name: 'ElSteps',\n})\n\nconst props = defineProps(stepsProps)\nconst emit = defineEmits(stepsEmits)\n\nconst ns = useNamespace('steps')\n\nconst steps: Ref<StepItemState[]> = ref([])\n\nwatch(steps, () => {\n  steps.value.forEach((instance: StepItemState, index: number) => {\n    instance.setIndex(index)\n  })\n})\n\nprovide('ElSteps', { props, steps })\n\nwatch(\n  () => props.active,\n  (newVal: number, oldVal: number) => {\n    emit(CHANGE_EVENT, newVal, oldVal)\n  }\n)\n</script>\n"],"names":["useNamespace","ref","watch","provide","CHANGE_EVENT"],"mappings":";;;;;;;;;;;;uCAec,CAAA;AAAA,EACZ,IAAM,EAAA,SAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,EAAA,GAAKA,mBAAa,OAAO,CAAA,CAAA;AAE/B,IAAM,MAAA,KAAA,GAA8BC,OAAI,CAAA,EAAE,CAAA,CAAA;AAE1C,IAAAC,SAAA,CAAM,OAAO,MAAM;AACjB,MAAA,KAAA,CAAM,KAAM,CAAA,OAAA,CAAQ,CAAC,QAAA,EAAyB,KAAkB,KAAA;AAC9D,QAAA,QAAA,CAAS,SAAS,KAAK,CAAA,CAAA;AAAA,OACxB,CAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAED,IAAAC,WAAA,CAAQ,SAAW,EAAA,EAAE,KAAO,EAAA,KAAA,EAAO,CAAA,CAAA;AAEnC,IAAAD,SAAA,CACE,MAAM,KAAA,CAAM,MACZ,EAAA,CAAC,QAAgB,MAAmB,KAAA;AAClC,MAAK,IAAA,CAAAE,kBAAA,EAAc,QAAQ,MAAM,CAAA,CAAA;AAAA,KAErC,CAAA,CAAA;;;;;;;;;;;;;;"}

package/lib/components/tabs/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('../../utils/index.js');
 var tabs = require('./src/tabs.js');
-var tabPane$1 = require('./src/tab-pane.js');
-var tabBar = require('./src/tab-bar.js');
+var tabPane$1 = require('./src/tab-pane2.js');
+var tabBar = require('./src/tab-bar2.js');
 var tabNav = require('./src/tab-nav.js');
-var tabPane = require('./src/tab-pane2.js');
+var tabPane = require('./src/tab-pane.js');
 var install = require('../../utils/vue/install.js');
 
 const ElTabs = install.withInstall(tabs["default"], {

package/lib/components/tabs/src/tab-bar.js

@@ -2,16 +2,90 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
+var core = require('@vueuse/core');
 require('../../../utils/index.js');
-var runtime = require('../../../utils/vue/props/runtime.js');
-var typescript = require('../../../utils/typescript.js');
+require('../../../tokens/index.js');
+require('../../../hooks/index.js');
+var tabBar = require('./tab-bar2.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var tabs = require('../../../tokens/tabs.js');
+var error = require('../../../utils/error.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var strings = require('../../../utils/strings.js');
 
-const tabBarProps = runtime.buildProps({
-  tabs: {
-    type: runtime.definePropType(Array),
-    default: () => typescript.mutable([])
+const COMPONENT_NAME = "ElTabBar";
+const __default__ = vue.defineComponent({
+  name: COMPONENT_NAME
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: tabBar.tabBarProps,
+  setup(__props, { expose }) {
+    const props = __props;
+    const instance = vue.getCurrentInstance();
+    const rootTabs = vue.inject(tabs.tabsRootContextKey);
+    if (!rootTabs)
+      error.throwError(COMPONENT_NAME, "<el-tabs><el-tab-bar /></el-tabs>");
+    const ns = index.useNamespace("tabs");
+    const barRef = vue.ref();
+    const barStyle = vue.ref();
+    const getBarStyle = () => {
+      let offset = 0;
+      let tabSize = 0;
+      const sizeName = ["top", "bottom"].includes(rootTabs.props.tabPosition) ? "width" : "height";
+      const sizeDir = sizeName === "width" ? "x" : "y";
+      props.tabs.every((tab) => {
+        var _a, _b, _c, _d;
+        const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];
+        if (!$el)
+          return false;
+        if (!tab.active) {
+          return true;
+        }
+        tabSize = $el[`client${strings.capitalize(sizeName)}`];
+        const position = sizeDir === "x" ? "left" : "top";
+        offset = $el[`offset${strings.capitalize(position)}`] - ((_d = (_c = $el.parentElement) == null ? void 0 : _c[`offset${strings.capitalize(position)}`]) != null ? _d : 0);
+        const scrollwrapEl = $el.closest(".is-scrollable");
+        if (scrollwrapEl) {
+          const scrollWrapStyle = window.getComputedStyle(scrollwrapEl);
+          offset += Number.parseFloat(scrollWrapStyle[`padding${strings.capitalize(position)}`]);
+        }
+        const tabStyles = window.getComputedStyle($el);
+        if (sizeName === "width") {
+          if (props.tabs.length > 1) {
+            tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);
+          }
+          offset += Number.parseFloat(tabStyles.paddingLeft);
+        }
+        return false;
+      });
+      return {
+        [sizeName]: `${tabSize}px`,
+        transform: `translate${strings.capitalize(sizeDir)}(${offset}px)`
+      };
+    };
+    const update = () => barStyle.value = getBarStyle();
+    vue.watch(() => props.tabs, async () => {
+      await vue.nextTick();
+      update();
+    }, { immediate: true });
+    core.useResizeObserver(barRef, () => update());
+    expose({
+      ref: barRef,
+      update
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "barRef",
+        ref: barRef,
+        class: vue.normalizeClass([vue.unref(ns).e("active-bar"), vue.unref(ns).is(vue.unref(rootTabs).props.tabPosition)]),
+        style: vue.normalizeStyle(barStyle.value)
+      }, null, 6);
+    };
   }
 });
+var TabBar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/st/Desktop/vue/nxx-ui/packages/components/tabs/src/tab-bar.vue"]]);
 
-exports.tabBarProps = tabBarProps;
+exports["default"] = TabBar;
 //# sourceMappingURL=tab-bar.js.map

package/lib/components/tabs/src/tab-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.js","sources":["../../../../../../packages/components/tabs/src/tab-bar.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type { TabsPaneContext } from '@element-plus/tokens'\nimport type TabBar from './tab-bar.vue'\n\nexport const tabBarProps = buildProps({\n  tabs: {\n    type: definePropType<TabsPaneContext[]>(Array),\n    default: () => mutable([] as const),\n  },\n} as const)\n\nexport type TabBarProps = ExtractPropTypes<typeof tabBarProps>\nexport type TabBarInstance = InstanceType<typeof TabBar>\n"],"names":["buildProps","definePropType","mutable"],"mappings":";;;;;;;;AACY,MAAC,WAAW,GAAGA,kBAAU,CAAC;AACtC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAMC,kBAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"tab-bar.js","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"barRef\"\n    :class=\"[ns.e('active-bar'), ns.is(rootTabs.props.tabPosition)]\"\n    :style=\"barStyle\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, throwError } from '@element-plus/utils'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabBarProps } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\nconst props = defineProps(tabBarProps)\n\nconst instance = getCurrentInstance()!\nconst rootTabs = inject(tabsRootContextKey)\nif (!rootTabs) throwError(COMPONENT_NAME, '<el-tabs><el-tab-bar /></el-tabs>')\n\nconst ns = useNamespace('tabs')\n\nconst barRef = ref<HTMLDivElement>()\nconst barStyle = ref<CSSProperties>()\n\nconst getBarStyle = (): CSSProperties => {\n  let offset = 0\n  let tabSize = 0\n\n  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n    ? 'width'\n    : 'height'\n  const sizeDir = sizeName === 'width' ? 'x' : 'y'\n\n  props.tabs.every((tab) => {\n    const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement\n    if (!$el) return false\n\n    if (!tab.active) {\n      return true\n    }\n\n    tabSize = $el[`client${capitalize(sizeName)}`]\n    const position = sizeDir === 'x' ? 'left' : 'top'\n\n    offset =\n      $el[`offset${capitalize(position)}`] -\n      ($el.parentElement?.[`offset${capitalize(position)}`] ?? 0)\n\n    const scrollwrapEl = $el.closest('.is-scrollable')\n    if (scrollwrapEl) {\n      const scrollWrapStyle = window.getComputedStyle(scrollwrapEl)\n      offset += Number.parseFloat(\n        scrollWrapStyle[`padding${capitalize(position)}`]\n      )\n    }\n\n    const tabStyles = window.getComputedStyle($el)\n\n    if (sizeName === 'width') {\n      if (props.tabs.length > 1) {\n        tabSize -=\n          Number.parseFloat(tabStyles.paddingLeft) +\n          Number.parseFloat(tabStyles.paddingRight)\n      }\n      offset += Number.parseFloat(tabStyles.paddingLeft)\n    }\n    return false\n  })\n\n  return {\n    [sizeName]: `${tabSize}px`,\n    transform: `translate${capitalize(sizeDir)}(${offset}px)`,\n  }\n}\n\nconst update = () => (barStyle.value = getBarStyle())\n\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n  },\n  { immediate: true }\n)\nuseResizeObserver(barRef, () => update())\n\ndefineExpose({\n  /** @description tab root html element */\n  ref: barRef,\n  /** @description method to manually update tab bar style */\n  update,\n})\n</script>\n"],"names":["getCurrentInstance","inject","tabsRootContextKey","throwError","useNamespace","ref","capitalize","watch","nextTick","useResizeObserver"],"mappings":"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"}