fit2cloud-ui-plus 1.0.8 → 1.1.0

package/lib/fit2cloud-ui-plus.es.js

@@ -17,9 +17,114 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { ref, getCurrentInstance, inject, computed, provide, unref, isRef, defineComponent, watch, resolveComponent, openBlock, createBlock, mergeProps, onMounted, onUpdated, withCtx, createElementVNode, toDisplayString, nextTick, createElementBlock, Fragment, renderList, createVNode, withDirectives, createTextVNode, createCommentVNode, vShow, renderSlot, resolveDynamicComponent, normalizeClass, withModifiers, h, vModelText, normalizeStyle, Transition, useSlots, isVNode, Comment, normalizeProps, guardReactiveProps } from "vue";
-const COMPONENTS_SIZE = ["", "default", "small", "large"];
-const validateSize = (val) => ["", ...COMPONENTS_SIZE].includes(val);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, mergeProps, unref, withCtx, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, renderSlot, inject, ref, h, getCurrentInstance, provide, isRef, watch, Transition, createElementVNode, toDisplayString, createVNode, normalizeStyle, createCommentVNode, resolveDirective, withDirectives, onMounted, onUpdated, nextTick, createTextVNode, vShow, resolveDynamicComponent, normalizeClass, withModifiers, vModelText, useSlots, isVNode, Comment } from "vue";
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
+  __name: "FuHorizontalNavigation",
+  props: {
+    stepper: Object,
+    steps: Array,
+    disable: Function
+  },
+  emits: ["active"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const active = computed(() => {
+      return props.stepper.index;
+    });
+    function click(index) {
+      !props.disable(index) && emit("active", index);
+    }
+    return (_ctx, _cache) => {
+      const _component_el_step = resolveComponent("el-step");
+      const _component_el_steps = resolveComponent("el-steps");
+      return openBlock(), createBlock(_component_el_steps, mergeProps({ active: unref(active) }, __props.stepper), {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, index) => {
+            return openBlock(), createBlock(_component_el_step, mergeProps({ key: index }, step, {
+              onClick: ($event) => click(index),
+              class: __props.disable(index) && "fu-step--disable"
+            }), null, 16, ["onClick", "class"]);
+          }), 128))
+        ]),
+        _: 1
+      }, 16, ["active"]);
+    };
+  }
+});
+var FuHorizontalNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__file", "/Users/runner/work/fit2cloud-ui-plus/fit2cloud-ui-plus/src/components/ steps/FuHorizontalNavigation.vue"]]);
+const _sfc_main$I = {};
+function _sfc_render(_ctx, _cache) {
+  const _component_el_button = resolveComponent("el-button");
+  return openBlock(), createBlock(_component_el_button, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 16);
+}
+var FuStepButton = /* @__PURE__ */ _export_sfc(_sfc_main$I, [["render", _sfc_render], ["__file", "/Users/runner/work/fit2cloud-ui-plus/fit2cloud-ui-plus/src/components/ steps/FuStepButton.vue"]]);
+var FuStepsFooter = defineComponent({
+  name: "FuStepsFooter",
+  components: {
+    FuStepButton
+  },
+  emits: ["stepperFn"],
+  setup(props, { emit }) {
+    const stepper = inject("stepper");
+    const disabledButton = ref(false);
+    const isFirst = computed(() => {
+      return stepper.isFirst(stepper.index);
+    });
+    const isLast = computed(() => {
+      return stepper.isLast(stepper.index);
+    });
+    const showCancel = computed(() => {
+      return stepper.showCancel !== false;
+    });
+    const disabled = computed(() => {
+      return (stepper == null ? void 0 : stepper.isLoading) || disabledButton.value;
+    });
+    function clickHandle(fnName) {
+      stepper[fnName] ? stepper[fnName]() : emit("stepperFn", fnName);
+      disabledButton.value = true;
+      setTimeout(() => {
+        disabledButton.value = false;
+      }, 500);
+    }
+    const button = (value) => {
+      return h(FuStepButton, {
+        disabled: disabled.value,
+        size: stepper.buttonSize,
+        onClick: () => clickHandle(value)
+      }, () => stepper[`${value}ButtonText`]);
+    };
+    return () => h("div", {
+      class: `fu-steps__footer--${stepper.footerAlign}`
+    }, [
+      h("div", {
+        class: "fu-steps__footer--block",
+        style: "margin-right:10px"
+      }, [showCancel.value && button("onCancel")]),
+      h("div", {
+        class: "fu-steps__footer--block"
+      }, [
+        !isFirst.value && button("prev"),
+        isLast.value ? button("onFinish") : button("next")
+      ])
+    ]);
+  }
+});
 const globalConfig = ref();
 const globalConfigKey = Symbol("GlobalConfigKey");
 function useGlobalConfig(key, defaultValue = void 0) {
@@ -490,6 +595,8 @@ const useLocale = () => {
   const locale = useGlobalConfig("locale");
   return buildLocaleContext(computed(() => locale.value || Chinese));
 };
+const COMPONENTS_SIZE = ["", "default", "small", "large"];
+const validateSize = (val) => ["", ...COMPONENTS_SIZE].includes(val);
 const useProp = (name2) => {
   const vm = getCurrentInstance();
   return computed(() => {
@@ -507,13 +614,381 @@ const useSizeProp = {
   type: String,
   validator: validateSize
 };
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
+const { t } = useLocale();
+class Stepper {
+  constructor(options) {
+    __publicField(this, "steps");
+    __publicField(this, "index");
+    __publicField(this, "activeSet");
+    __publicField(this, "isLoading");
+    __publicField(this, "onCancelButtonText");
+    __publicField(this, "onFinishButtonText");
+    __publicField(this, "prevButtonText");
+    __publicField(this, "nextButtonText");
+    __publicField(this, "buttonSize");
+    __publicField(this, "footerAlign");
+    __publicField(this, "showCancel");
+    __publicField(this, "beforeActive");
+    __publicField(this, "beforeLeave");
+    __publicField(this, "height");
+    options = options || {};
+    this.steps = options.steps;
+    this.index = options.index === void 0 ? 0 : options.index;
+    this.activeSet = /* @__PURE__ */ new Set();
+    this.isLoading = (options == null ? void 0 : options.isLoading) || false;
+    this.onCancelButtonText = options.onCancelButtonText || t("fu.steps.cancel");
+    this.onFinishButtonText = options.onFinishButtonText || t("fu.steps.finish");
+    this.prevButtonText = options.prevButtonText || t("fu.steps.prev");
+    this.nextButtonText = options.nextButtonText || t("fu.steps.next");
+    this.buttonSize = options.buttonSize || "default";
+    this.footerAlign = options.footerAlign || "flex";
+    this.showCancel = options.showCancel === void 0 ? false : options.showCancel;
+    this.beforeActive = options.beforeActive;
+    this.beforeLeave = options.beforeLeave;
+    this.height = options.height;
   }
-  return target;
+  isFirst(index) {
+    return index === 0;
+  }
+  isLast(index) {
+    return index === this.steps.length - 1;
+  }
+  isActive(index) {
+    return this.activeSet.has(index);
+  }
+  isCurrent(index) {
+    return this.index === index;
+  }
+  async active(index) {
+    const isValid = index >= 0 && index < this.steps.length && this.index !== index;
+    const forward = index > this.index;
+    if (isValid) {
+      if (await this.executeBeforeLeave(this.index, forward) !== false) {
+        if (await this.executeBeforeActive(index, forward) !== false) {
+          this.index = index;
+          this.activeSet.add(index);
+        }
+      }
+    }
+  }
+  next() {
+    if (!this.isLast(this.index)) {
+      this.active(this.index + 1);
+    }
+  }
+  prev() {
+    if (!this.isFirst(this.index)) {
+      this.active(this.index - 1);
+    }
+  }
+  getStep(index) {
+    if (this.steps && this.steps.length > index) {
+      return this.steps[index];
+    }
+  }
+  executeBeforeLeave(index, forward) {
+    const step = this.getStep(index);
+    if (step.beforeLeave) {
+      return step.beforeLeave(step, forward);
+    }
+    if (this.beforeLeave) {
+      return this.beforeLeave(step, forward);
+    }
+  }
+  executeBeforeActive(index, forward) {
+    const step = this.getStep(index);
+    if (step.beforeActive) {
+      return step.beforeActive(step, forward);
+    }
+    if (this.beforeActive) {
+      return this.beforeActive(step, forward);
+    }
+  }
+}
+class Step {
+  constructor(options) {
+    __publicField(this, "id");
+    __publicField(this, "index");
+    __publicField(this, "beforeActive");
+    __publicField(this, "beforeLeave");
+    __publicField(this, "title");
+    __publicField(this, "description");
+    __publicField(this, "icon");
+    __publicField(this, "status");
+    options = options || {};
+    this.id = options.id;
+    this.index = options.index;
+    this.beforeActive = options.beforeActive;
+    this.beforeLeave = options.beforeLeave;
+    this.title = options.title;
+    this.description = options.description;
+    this.icon = options.icon;
+    this.status = options.status;
+  }
+}
+const _sfc_main$H = defineComponent({
+  name: "FuHorizontalSteps",
+  components: {
+    FuHorizontalNavigation,
+    FuStepsFooter
+  },
+  emits: ["change"],
+  setup(_, { attrs, slots, emit, expose }) {
+    var _a2;
+    const stepper = ref(new Stepper());
+    (_a2 = stepper.value) == null ? void 0 : _a2.activeSet.add(0);
+    watch(() => stepper.value.index, (value) => {
+      emit("change", stepper.value.steps[value]);
+    });
+    const heightStyle = computed(() => {
+      var _a3;
+      return { height: parseInt((_a3 = stepper.value) == null ? void 0 : _a3.height) + "px" || "auto" };
+    });
+    function active(index) {
+      var _a3;
+      (_a3 = stepper.value) == null ? void 0 : _a3.active(index);
+    }
+    function disable(index) {
+      var _a3;
+      return !((_a3 = stepper.value) == null ? void 0 : _a3.isActive(index));
+    }
+    function next() {
+      stepper.value.next();
+    }
+    function prev() {
+      stepper.value.prev();
+    }
+    function $func(name2) {
+      emit(name2);
+    }
+    provide("stepper", stepper.value);
+    expose({
+      next,
+      prev,
+      active
+    });
+    return () => {
+      var _a3, _b, _c;
+      let steps = [];
+      if ((_a3 = slots.default) == null ? void 0 : _a3.call(slots)) {
+        (_b = slots.default) == null ? void 0 : _b.call(slots).forEach((node, index) => {
+          const options = __spreadValues({
+            index
+          }, node.props);
+          const step = new Step(options);
+          steps.push(step);
+        });
+      }
+      stepper.value.steps = steps;
+      stepper.value = Object.assign(stepper.value, attrs);
+      return h("div", {
+        class: ["fu-steps", "fu-steps--horizontal"]
+      }, [
+        h(FuHorizontalNavigation, {
+          stepper: stepper.value,
+          steps,
+          disable,
+          onActive: active
+        }),
+        h("div", { class: "fu-steps__wrapper" }, h("div", { class: "fu-steps__container", style: heightStyle.value }, h(Transition, { name: "carousel", mode: "out-in", tag: "p" }, () => {
+          var _a4;
+          return (_a4 = slots.default) == null ? void 0 : _a4.call(slots).map((item, index) => {
+            item["key"] = index;
+            return stepper.value.index === index && item;
+          });
+        }))),
+        h("div", { class: "fu-steps__footer" }, ((_c = slots.footer) == null ? void 0 : _c.call(slots)) || h(FuStepsFooter, { onStepperFn: $func }))
+      ]);
+    };
+  }
+});
+var FuHorizontalSteps = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__file", "/Users/runner/work/fit2cloud-ui-plus/fit2cloud-ui-plus/src/components/ steps/FuHorizontalSteps.vue"]]);
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
+  __name: "FuVerticalNavigation",
+  props: {
+    stepper: Object,
+    steps: Array,
+    disable: Function
+  },
+  emits: ["active"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const active = computed(() => {
+      return props.stepper.index;
+    });
+    const heightStyle = computed(() => {
+      var _a2;
+      return {
+        height: parseInt((_a2 = props.stepper) == null ? void 0 : _a2.height) + "px" || "auto"
+      };
+    });
+    function click(index) {
+      !props.disable(index) && emit("active", index);
+    }
+    return (_ctx, _cache) => {
+      const _component_el_collapse_transition = resolveComponent("el-collapse-transition");
+      const _component_el_step = resolveComponent("el-step");
+      const _component_el_steps = resolveComponent("el-steps");
+      return openBlock(), createBlock(_component_el_steps, mergeProps({ active: unref(active) }, __props.stepper, { direction: "vertical" }), {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.steps, (step, i) => {
+            return openBlock(), createBlock(_component_el_step, mergeProps({ key: i }, step, {
+              onClick: ($event) => click(i),
+              class: __props.disable(i) && "fu-step--disable"
+            }), {
+              description: withCtx(() => [
+                createElementVNode("span", null, toDisplayString(step.description), 1),
+                createVNode(_component_el_collapse_transition, null, {
+                  default: withCtx(() => [
+                    i === unref(active) ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: "fu-steps__container",
+                      style: normalizeStyle(unref(heightStyle))
+                    }, [
+                      renderSlot(_ctx.$slots, "default", { step })
+                    ], 4)) : createCommentVNode("v-if", true)
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1040, ["onClick", "class"]);
+          }), 128))
+        ]),
+        _: 3
+      }, 16, ["active"]);
+    };
+  }
+});
+var FuVerticalNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__file", "/Users/runner/work/fit2cloud-ui-plus/fit2cloud-ui-plus/src/components/ steps/FuVerticalNavigation.vue"]]);
+const _sfc_main$F = defineComponent({
+  name: "FuVerticalSteps",
+  components: { FuVerticalNavigation, FuStepsFooter },
+  emits: ["change"],
+  setup(_, { attrs, slots, emit, expose }) {
+    const stepper = ref(new Stepper());
+    stepper.value.activeSet.add(0);
+    watch(() => stepper.value.index, (value) => {
+      emit("change", stepper.value.steps[value]);
+    });
+    function active(index) {
+      stepper.value.active(index);
+    }
+    function disable(index) {
+      return !stepper.value.isActive(index);
+    }
+    function next() {
+      stepper.value.next();
+    }
+    function prev() {
+      stepper.value.prev();
+    }
+    function $func(name2) {
+      emit(name2);
+    }
+    provide("stepper", stepper.value);
+    expose({
+      next,
+      prev,
+      active
+    });
+    return () => {
+      var _a2, _b;
+      let currentNode;
+      let steps = [];
+      if ((_a2 = slots.default) == null ? void 0 : _a2.call(slots)) {
+        (_b = slots.default) == null ? void 0 : _b.call(slots).forEach((node, index) => {
+          const options = __spreadValues({
+            index
+          }, node.props);
+          const step = new Step(options);
+          steps.push(step);
+          if (stepper.value.isCurrent(index)) {
+            currentNode = node;
+          }
+        });
+      }
+      stepper.value.steps = steps;
+      stepper.value = Object.assign(stepper.value, attrs);
+      return h("div", {
+        class: ["fu-steps", "fu-steps--vertical"]
+      }, [
+        h(FuVerticalNavigation, {
+          stepper: stepper.value,
+          steps,
+          disable,
+          onActive: active
+        }, () => currentNode),
+        h("div", { class: "fu-steps__footer" }, h(FuStepsFooter, { onStepperFn: $func }))
+      ]);
+    };
+  }
+});
+var FuVerticalSteps = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__file", "/Users/runner/work/fit2cloud-ui-plus/fit2cloud-ui-plus/src/components/ steps/FuVerticalSteps.vue"]]);
+const _sfc_main$E = defineComponent({
+  name: "FuSteps",
+  components: {
+    FuHorizontalSteps,
+    FuVerticalSteps
+  },
+  emits: ["change"],
+  props: ["direction"],
+  setup(props, { attrs, slots, emit, expose }) {
+    const { direction } = props;
+    const FuSteps2 = ref();
+    function next() {
+      var _a2;
+      (_a2 = FuSteps2.value) == null ? void 0 : _a2.next();
+    }
+    function prev() {
+      var _a2;
+      (_a2 = FuSteps2.value) == null ? void 0 : _a2.prev();
+    }
+    function active(index) {
+      var _a2;
+      (_a2 = FuSteps2.value) == null ? void 0 : _a2.active(index);
+    }
+    function handleChange({ id, title, index }) {
+      emit("change", { id, title, index });
+    }
+    expose({
+      next,
+      prev,
+      active
+    });
+    if (direction === "vertical") {
+      return () => h(FuVerticalSteps, __spreadValues({ ref: FuSteps2, onChange: handleChange }, attrs), slots);
+    } else {
+      return () => h(FuHorizontalSteps, __spreadValues({ ref: FuSteps2, onChange: handleChange }, attrs), slots);
+    }
+  }
+});
+var FuSteps = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__file", "/Users/runner/work/fit2cloud-ui-plus/fit2cloud-ui-plus/src/components/ steps/FuSteps.vue"]]);
+const _hoisted_1$o = { class: "fu-step" };
+const __default__$u = { name: "FuStep" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$u), {
+  setup(__props) {
+    const stepper = inject("stepper");
+    const loading = computed(() => stepper.isLoading || false);
+    return (_ctx, _cache) => {
+      const _directive_loading = resolveDirective("loading");
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$o, [
+        renderSlot(_ctx.$slots, "default")
+      ])), [
+        [_directive_loading, unref(loading)]
+      ]);
+    };
+  }
+}));
+var FuStep = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__file", "/Users/runner/work/fit2cloud-ui-plus/fit2cloud-ui-plus/src/components/ steps/FuStep.vue"]]);
+FuSteps.install = (app) => {
+  app.component(FuStep.name, FuStep);
+  app.component(FuSteps.name, FuSteps);
 };
+var __glob_2_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  "default": FuSteps
+}, Symbol.toStringTag, { value: "Module" }));
 const __default__$t = { name: "FuFilterInput" };
 const _sfc_main$C = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$t), {
   props: {
@@ -679,7 +1154,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   emits: ["filter"],
   setup(__props, { expose, emit }) {
     const props = __props;
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     const filterRef = ref(null);
     const conditionsRef = ref(null);
     const configSize = useSize();
@@ -790,7 +1265,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         }, [
           createElementVNode("div", _hoisted_1$m, [
             createTextVNode(toDisplayString(__props.count) + " ", 1),
-            createElementVNode("span", _hoisted_2$f, toDisplayString(unref(t)("fu.filter_bar.results")), 1)
+            createElementVNode("span", _hoisted_2$f, toDisplayString(unref(t2)("fu.filter_bar.results")), 1)
           ]),
           _hoisted_3$d,
           scroll.value ? (openBlock(), createElementBlock("div", {
@@ -836,7 +1311,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
               ]),
               _: 1
             }),
-            createTextVNode(" " + toDisplayString(unref(t)("fu.filter_bar.clear")), 1)
+            createTextVNode(" " + toDisplayString(unref(t2)("fu.filter_bar.clear")), 1)
           ])) : createCommentVNode("v-if", true)
         ], 512), [
           [vShow, unref(show)]
@@ -844,7 +1319,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         createVNode(_component_el_drawer, {
           size: __props.drawerWidth,
           class: "fu-filter__drawer",
-          title: unref(t)("fu.filter_bar.drawer_title"),
+          title: unref(t2)("fu.filter_bar.drawer_title"),
           modelValue: drawer.value,
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => drawer.value = $event),
           onOpen: initComponents
@@ -864,7 +1339,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                   onClick: _cache[0] || (_cache[0] = ($event) => drawer.value = false)
                 }, {
                   default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(t)("fu.filter_bar.cancel")), 1)
+                    createTextVNode(toDisplayString(unref(t2)("fu.filter_bar.cancel")), 1)
                   ]),
                   _: 1
                 }, 8, ["size"]),
@@ -874,7 +1349,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                   onClick: filter
                 }, {
                   default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(t)("fu.filter_bar.search")), 1)
+                    createTextVNode(toDisplayString(unref(t2)("fu.filter_bar.search")), 1)
                   ]),
                   _: 1
                 }, 8, ["size"])
@@ -911,7 +1386,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   },
   emits: ["exec"],
   setup(__props, { expose, emit }) {
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     const configSize = useSize();
     const quick = ref("");
     const conditions = ref([]);
@@ -972,7 +1447,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
               size: unref(configSize)
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(t)("fu.filter_bar.filter")) + " ", 1),
+                createTextVNode(toDisplayString(unref(t2)("fu.filter_bar.filter")) + " ", 1),
                 conditions.value.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_5, "(" + toDisplayString(conditions.value.length) + ")", 1)) : createCommentVNode("v-if", true)
               ]),
               _: 1
@@ -1104,7 +1579,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const showSelectAll = computed(() => {
       return props.useSelectAll && props.multiple;
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function change(v) {
       if (showSelectAll.value && (v == null ? void 0 : v.includes("-$SELECT-ALL$-"))) {
         selection.value = props.options.map((o) => o.value);
@@ -1187,7 +1662,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                   ]),
                   _: 1
                 }),
-                createTextVNode(" " + toDisplayString(unref(t)("fu.filter_bar.more")), 1)
+                createTextVNode(" " + toDisplayString(unref(t2)("fu.filter_bar.more")), 1)
               ])
             ]),
             default: withCtx(() => [
@@ -1199,7 +1674,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 onChange: change,
                 teleported: false,
                 size: unref(configSize),
-                placeholder: unref(t)("fu.search_bar.please_select")
+                placeholder: unref(t2)("fu.search_bar.please_select")
               }), {
                 default: withCtx(() => [
                   unref(showSelectAll) ? (openBlock(), createBlock(_component_el_option, {
@@ -1207,7 +1682,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                     value: "-$SELECT-ALL$-"
                   }, {
                     default: withCtx(() => [
-                      createElementVNode("div", { onClick: selectAll }, toDisplayString(unref(t)("fu.filter_bar.select_all")), 1)
+                      createElementVNode("div", { onClick: selectAll }, toDisplayString(unref(t2)("fu.filter_bar.select_all")), 1)
                     ]),
                     _: 1
                   })) : createCommentVNode("v-if", true),
@@ -1276,7 +1751,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const showSelectAll = computed(() => {
       return props.useSelectAll && props.multiple;
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function change(v) {
       if (showSelectAll.value && (v == null ? void 0 : v.includes("-$SELECT-ALL$-"))) {
         selection.value = props.options.map((o) => o.value);
@@ -1341,7 +1816,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             onChange: change,
             teleported: false,
             size: unref(configSize),
-            placeholder: unref(t)("fu.search_bar.please_select"),
+            placeholder: unref(t2)("fu.search_bar.please_select"),
             class: "fu-filter-select"
           }), {
             default: withCtx(() => [
@@ -1350,7 +1825,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 value: "-$SELECT-ALL$-"
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", { onClick: selectAll }, toDisplayString(unref(t)("fu.filter_bar.select_all")), 1)
+                  createElementVNode("div", { onClick: selectAll }, toDisplayString(unref(t2)("fu.filter_bar.select_all")), 1)
                 ]),
                 _: 1
               })) : createCommentVNode("v-if", true),
@@ -1426,7 +1901,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const valueLabel = computed(() => {
       return dateFormat(value.value[0]) + " - " + dateFormat(value.value[1]);
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function getCondition() {
       if (!value.value || value.value.length === 0)
         return;
@@ -1456,11 +1931,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event)
           }, _ctx.$attrs, {
             size: unref(configSize),
-            placeholder: unref(t)("fu.search_bar.select_date"),
+            placeholder: unref(t2)("fu.search_bar.select_date"),
             type: "daterange",
             "value-format": __props.valueFormat,
-            "start-placeholder": unref(t)("fu.search_bar.start_date"),
-            "end-placeholder": unref(t)("fu.search_bar.end_date")
+            "start-placeholder": unref(t2)("fu.search_bar.start_date"),
+            "end-placeholder": unref(t2)("fu.search_bar.end_date")
           }), null, 16, ["modelValue", "size", "placeholder", "value-format", "start-placeholder", "end-placeholder"])
         ])
       ]);
@@ -1495,7 +1970,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const valueLabel = computed(() => {
       return datetimeFormat(value.value[0]) + " - " + datetimeFormat(value.value[1]);
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function getCondition() {
       if (!value.value || value.value.length === 0)
         return;
@@ -1525,11 +2000,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event)
           }, _ctx.$attrs, {
             size: unref(configSize),
-            placeholder: unref(t)("fu.search_bar.select_date_time"),
+            placeholder: unref(t2)("fu.search_bar.select_date_time"),
             type: "datetimerange",
             "value-format": __props.valueFormat,
-            "start-placeholder": unref(t)("fu.search_bar.start_date_time"),
-            "end-placeholder": unref(t)("fu.search_bar.end_date_time")
+            "start-placeholder": unref(t2)("fu.search_bar.start_date_time"),
+            "end-placeholder": unref(t2)("fu.search_bar.end_date_time")
           }), null, 16, ["modelValue", "size", "placeholder", "value-format", "start-placeholder", "end-placeholder"])
         ])
       ]);
@@ -1601,7 +2076,7 @@ FuFilterBar.install = (app) => {
   app.component(FuFilterDateTime.name, FuFilterDateTime);
   app.component(FuFilterInputText.name, FuFilterInputText);
 };
-var __glob_2_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var __glob_2_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": FuFilterBar
 }, Symbol.toStringTag, { value: "Module" }));
@@ -1674,7 +2149,7 @@ var FuIconButton = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__file", "/Users/
 FuIconButton.install = (app) => {
   app.component(FuIconButton.name, FuIconButton);
 };
-var __glob_2_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var __glob_2_2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": FuIconButton
 }, Symbol.toStringTag, { value: "Module" }));
@@ -1905,7 +2380,7 @@ FuReadWriteSwitch.install = (app) => {
   app.component(FuInputRwSwitch.name, FuInputRwSwitch);
   app.component(FuSelectRwSwitch.name, FuSelectRwSwitch);
 };
-var __glob_2_2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var __glob_2_3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": FuReadWriteSwitch
 }, Symbol.toStringTag, { value: "Module" }));
@@ -2000,7 +2475,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const showComplex = computed(() => {
       return references ? references.value.length > 0 : false;
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function hide() {
       emit("close");
     }
@@ -2085,7 +2560,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 size: unref(configSize)
               }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(t)("fu.search_bar.cancel")), 1)
+                  createTextVNode(toDisplayString(unref(t2)("fu.search_bar.cancel")), 1)
                 ]),
                 _: 1
               }, 8, ["size"]),
@@ -2095,7 +2570,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 size: unref(configSize)
               }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(t)("fu.search_bar.ok")), 1)
+                  createTextVNode(toDisplayString(unref(t2)("fu.search_bar.ok")), 1)
                 ]),
                 _: 1
               }, 8, ["size"])
@@ -2224,7 +2699,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     provide(referenceKey, references);
     const configSize = useSize();
     const placeholder = computed(() => {
-      return props.quickPlaceholder ? props.quickPlaceholder : t("fu.search_bar.search");
+      return props.quickPlaceholder ? props.quickPlaceholder : t2("fu.search_bar.search");
     });
     const showComplex = computed(() => {
       return references.value.length > 0;
@@ -2249,7 +2724,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       }
       return obj;
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function closePopover() {
       emit("close");
     }
@@ -2334,14 +2809,14 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
               icon: "Close",
               onClick: clean,
               size: unref(configSize),
-              tooltip: unref(t)("fu.search_bar.clean")
+              tooltip: unref(t2)("fu.search_bar.clean")
             }, null, 8, ["size", "tooltip"])) : createCommentVNode("v-if", true),
             unref(showRefresh) ? (openBlock(), createBlock(FuSearchBarButton, {
               key: 1,
               icon: "Refresh",
               onClick: refresh,
               size: unref(configSize),
-              tooltip: unref(t)("fu.search_bar.refresh")
+              tooltip: unref(t2)("fu.search_bar.refresh")
             }, null, 8, ["size", "tooltip"])) : createCommentVNode("v-if", true),
             renderSlot(_ctx.$slots, "default")
           ])
@@ -2390,7 +2865,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       }
       return getValueLabel(selection.value);
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function getValueLabel(value) {
       for (let o of props.options) {
         if (o.value === value) {
@@ -2425,7 +2900,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         createElementVNode("div", _hoisted_3$3, [
           createVNode(_component_el_select, mergeProps({
             class: "fu-complex-select",
-            placeholder: unref(t)("fu.search_bar.please_select"),
+            placeholder: unref(t2)("fu.search_bar.please_select"),
             modelValue: selection.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selection.value = $event),
             size: unref(configSize)
@@ -2467,7 +2942,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const props = __props;
     const inputValue = ref("");
     const configSize = useSize();
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function getCondition() {
       if (!inputValue.value)
         return;
@@ -2495,7 +2970,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           createVNode(_component_el_input, mergeProps({
             modelValue: inputValue.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event),
-            placeholder: unref(t)("fu.search_bar.please_input"),
+            placeholder: unref(t2)("fu.search_bar.please_input"),
             size: unref(configSize)
           }, _ctx.$attrs), null, 16, ["modelValue", "placeholder", "size"])
         ])
@@ -2530,7 +3005,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const valueLabel = computed(() => {
       return dateFormat(value.value[0]) + " ~ " + dateFormat(value.value[1]);
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     const configSize = useSize();
     function getCondition() {
       if (!String(value.value))
@@ -2560,11 +3035,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event)
           }, _ctx.$attrs, {
             size: unref(configSize),
-            placeholder: unref(t)("fu.search_bar.select_date"),
+            placeholder: unref(t2)("fu.search_bar.select_date"),
             type: "daterange",
             "value-format": __props.valueFormat,
-            "start-placeholder": unref(t)("fu.search_bar.start_date"),
-            "end-placeholder": unref(t)("fu.search_bar.end_date")
+            "start-placeholder": unref(t2)("fu.search_bar.start_date"),
+            "end-placeholder": unref(t2)("fu.search_bar.end_date")
           }), null, 16, ["modelValue", "size", "placeholder", "value-format", "start-placeholder", "end-placeholder"])
         ])
       ]);
@@ -2599,7 +3074,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const valueLabel = computed(() => {
       return datetimeFormat(value.value[0]) + " ~ " + datetimeFormat(value.value[1]);
     });
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     function getCondition() {
       if (!String(value.value))
         return;
@@ -2629,11 +3104,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event)
           }, _ctx.$attrs, {
             size: unref(configSize),
-            placeholder: unref(t)("fu.search_bar.select_date_time"),
+            placeholder: unref(t2)("fu.search_bar.select_date_time"),
             type: "datetimerange",
             "value-format": __props.valueFormat,
-            "start-placeholder": unref(t)("fu.search_bar.start_date_time"),
-            "end-placeholder": unref(t)("fu.search_bar.end_date_time")
+            "start-placeholder": unref(t2)("fu.search_bar.start_date_time"),
+            "end-placeholder": unref(t2)("fu.search_bar.end_date_time")
           }), null, 16, ["modelValue", "size", "placeholder", "value-format", "start-placeholder", "end-placeholder"])
         ])
       ]);
@@ -2650,7 +3125,7 @@ FuSearchBar.install = (app) => {
   app.component(FuComplexDate.name, FuComplexDate);
   app.component(FuComplexDateTime.name, FuComplexDateTime);
 };
-var __glob_2_3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var __glob_2_4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": FuSearchBar
 }, Symbol.toStringTag, { value: "Module" }));
@@ -3242,7 +3717,7 @@ FuSpeedDial.install = (app) => {
   app.component(FuSpeedDial.name, FuSpeedDial);
   app.component(FuSpeedDialItem.name, FuSpeedDialItem);
 };
-var __glob_2_4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var __glob_2_5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": FuSpeedDial
 }, Symbol.toStringTag, { value: "Module" }));
@@ -3457,7 +3932,7 @@ var FuSplitPane = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__file", "/Users/r
 FuSplitPane.install = (app) => {
   app.component(FuSplitPane.name, FuSplitPane);
 };
-var __glob_2_5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var __glob_2_6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": FuSplitPane
 }, Symbol.toStringTag, { value: "Module" }));
@@ -3640,6 +4115,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         ref_key: "refElTable",
         ref: refElTable
       }), {
+        append: withCtx(() => [
+          renderSlot(_ctx.$slots, "append")
+        ]),
+        empty: withCtx(() => [
+          renderSlot(_ctx.$slots, "empty")
+        ]),
         default: withCtx(() => [
           createVNode(unref(FuTableBody), {
             name: "table-body",
@@ -3740,7 +4221,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     const localKey = inject(LocalKey, void 0);
     const {
       columnsKey,
@@ -3761,7 +4242,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return ((_a2 = props.columns) == null ? void 0 : _a2.length) > 0 && !isFixAll.value;
     });
     const header = computed(() => {
-      return props.title || t("fu.table.custom_table_fields");
+      return props.title || t2("fu.table.custom_table_fields");
     });
     function reset() {
       if (columnsKey) {
@@ -3786,7 +4267,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             icon: __props.icon
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("fu.table.custom_table_rows")), 1)
+              createTextVNode(toDisplayString(unref(t2)("fu.table.custom_table_rows")), 1)
             ]),
             _: 1
           }, 8, ["icon"])
@@ -3828,7 +4309,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               onClick: reset
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(t)("fu.table.reset")), 1)
+                createTextVNode(toDisplayString(unref(t2)("fu.table.reset")), 1)
               ]),
               _: 1
             })) : createCommentVNode("v-if", true)
@@ -3860,7 +4341,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const localKey = inject(LocalKey, void 0);
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     const cloneColumn = (source, target) => {
       source.forEach((col) => {
         target.push(Object.assign({}, col));
@@ -3878,7 +4359,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const cloneColumns = ref([]);
     const visible = ref(false);
     const header = computed(() => {
-      return props.title || t("fu.table.custom_table_fields");
+      return props.title || t2("fu.table.custom_table_fields");
     });
     function open() {
       cloneColumns.value = [];
@@ -3910,7 +4391,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = ($event) => visible.value = true)
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(unref(t)("fu.table.custom_table_rows")), 1)
+            createTextVNode(toDisplayString(unref(t2)("fu.table.custom_table_rows")), 1)
           ]),
           _: 1
         }, 8, ["icon"]),
@@ -3924,7 +4405,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           header: withCtx(() => [
             createElementVNode("h3", null, toDisplayString(unref(header)), 1),
             createVNode(_component_el_alert, {
-              title: unref(t)("fu.table.custom_table_fields_desc"),
+              title: unref(t2)("fu.table.custom_table_fields_desc"),
               type: "info",
               closable: false
             }, null, 8, ["title"])
@@ -3935,7 +4416,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               onClick: reset
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(t)("fu.table.reset")), 1)
+                createTextVNode(toDisplayString(unref(t2)("fu.table.reset")), 1)
               ]),
               _: 1
             })) : createCommentVNode("v-if", true),
@@ -3944,7 +4425,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               onClick: ok
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(t)("fu.table.ok")), 1)
+                createTextVNode(toDisplayString(unref(t2)("fu.table.ok")), 1)
               ]),
               _: 1
             })
@@ -4094,7 +4575,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   },
   setup(__props) {
     const props = __props;
-    const { t } = useLocale();
+    const { t: t2 } = useLocale();
     const disabled = computed(() => {
       return function(btn) {
         return typeof btn.disabled === "function" ? btn.disabled(props.row) : btn.disabled;
@@ -4148,7 +4629,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 ]),
                 _: 1
               })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                createTextVNode(toDisplayString(unref(t)("fu.table.more")), 1)
+                createTextVNode(toDisplayString(unref(t2)("fu.table.more")), 1)
               ], 64))
             ]),
             _: 1
@@ -4410,7 +4891,7 @@ FuTable.install = (app) => {
   app.component(FuTableButton.name, FuTableButton);
   app.component(FuTableMoreButton.name, FuTableMoreButton);
 };
-var __glob_2_6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var __glob_2_7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": FuTable
 }, Symbol.toStringTag, { value: "Module" }));
@@ -4561,12 +5042,12 @@ var FuTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/runner/w
 FuTabs.install = (app) => {
   app.component(FuTabs.name, FuTabs);
 };
-var __glob_2_7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var __glob_2_8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   "default": FuTabs
 }, Symbol.toStringTag, { value: "Module" }));
 const name = "fit2cloud-ui-plus";
-const version = "1.0.8";
+const version = "1.1.0";
 const main = "./lib/fit2cloud-ui-plus.es.js";
 const files = [
   "lib",
@@ -4622,7 +5103,7 @@ var PackageJSON = {
   dependencies,
   devDependencies
 };
-const components = { "./components/filter-bar/index.ts": __glob_2_0, "./components/icon-button/index.ts": __glob_2_1, "./components/read-write-switch/index.ts": __glob_2_2, "./components/search-bar/index.ts": __glob_2_3, "./components/speed-dial/index.ts": __glob_2_4, "./components/split-pane/index.ts": __glob_2_5, "./components/table/index.ts": __glob_2_6, "./components/tabs/index.ts": __glob_2_7 };
+const components = { "./components/ steps/index.ts": __glob_2_0, "./components/filter-bar/index.ts": __glob_2_1, "./components/icon-button/index.ts": __glob_2_2, "./components/read-write-switch/index.ts": __glob_2_3, "./components/search-bar/index.ts": __glob_2_4, "./components/speed-dial/index.ts": __glob_2_5, "./components/split-pane/index.ts": __glob_2_6, "./components/table/index.ts": __glob_2_7, "./components/tabs/index.ts": __glob_2_8 };
 const install = (app, config) => {
   Object.keys(components).forEach((key) => {
     let component = components[key].default;