element-plus 1.2.0-beta.3 → 1.2.0-beta.4

package/es/components/steps/src/index.vue_vue_type_script_lang.mjs

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

package/es/components/steps/src/index.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/steps/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'el-steps',\n      simple ? 'el-steps--simple' : `el-steps--${direction}`,\n    ]\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, watch, ref, provide } from 'vue'\n\nimport { CHANGE_EVENT } from '@element-plus/utils/constants'\n\nexport default defineComponent({\n  name: 'ElSteps',\n  props: {\n    space: {\n      type: [Number, String],\n      default: '',\n    },\n    active: {\n      type: Number,\n      default: 0,\n    },\n    direction: {\n      type: String,\n      default: 'horizontal',\n      validator: (val: string): boolean =>\n        ['horizontal', 'vertical'].includes(val),\n    },\n    alignCenter: {\n      type: Boolean,\n      default: false,\n    },\n    simple: {\n      type: Boolean,\n      default: false,\n    },\n    finishStatus: {\n      type: String,\n      default: 'finish',\n      validator: (val: string): boolean =>\n        ['wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n    processStatus: {\n      type: String,\n      default: 'process',\n      validator: (val: string): boolean =>\n        ['wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  emits: [CHANGE_EVENT],\n  setup(props, { emit }) {\n    const steps = ref([])\n\n    watch(steps, () => {\n      steps.value.forEach((instance, index) => {\n        instance.setIndex(index)\n      })\n    })\n\n    provide('ElSteps', { props, steps })\n\n    watch(\n      () => props.active,\n      (newVal, oldVal) => {\n        emit(CHANGE_EVENT, newVal, oldVal)\n      }\n    )\n\n    return {\n      steps,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;AAgBA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA,IAEX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QACV,CAAC,cAAc,YAAY,SAAS;AAAA;AAAA,IAExC,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QACV,CAAC,QAAQ,WAAW,UAAU,SAAS,WAAW,SAAS;AAAA;AAAA,IAE/D,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QACV,CAAC,QAAQ,WAAW,UAAU,SAAS,WAAW,SAAS;AAAA;AAAA;AAAA,EAGjE,OAAO,CAAC;AAAA,EACR,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,QAAQ,IAAI;AAElB,UAAM,OAAO,MAAM;AACjB,YAAM,MAAM,QAAQ,CAAC,UAAU,UAAU;AACvC,iBAAS,SAAS;AAAA;AAAA;AAItB,YAAQ,WAAW,EAAE,OAAO;AAE5B,UACE,MAAM,MAAM,QACZ,CAAC,QAAQ,WAAW;AAClB,WAAK,cAAc,QAAQ;AAAA;AAI/B,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;"}

package/es/components/steps/src/index.vue_vue_type_template_id_882d196c_lang.mjs

@@ -0,0 +1,15 @@
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "el-steps",
+      _ctx.simple ? "el-steps--simple" : `el-steps--${_ctx.direction}`
+    ])
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=index.vue_vue_type_template_id_882d196c_lang.mjs.map

package/es/components/steps/src/index.vue_vue_type_template_id_882d196c_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_template_id_882d196c_lang.mjs","sources":["../../../../../../packages/components/steps/src/index.vue?vue&type=template&id=882d196c&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'el-steps',\n      simple ? 'el-steps--simple' : `el-steps--${direction}`,\n    ]\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, watch, ref, provide } from 'vue'\n\nimport { CHANGE_EVENT } from '@element-plus/utils/constants'\n\nexport default defineComponent({\n  name: 'ElSteps',\n  props: {\n    space: {\n      type: [Number, String],\n      default: '',\n    },\n    active: {\n      type: Number,\n      default: 0,\n    },\n    direction: {\n      type: String,\n      default: 'horizontal',\n      validator: (val: string): boolean =>\n        ['horizontal', 'vertical'].includes(val),\n    },\n    alignCenter: {\n      type: Boolean,\n      default: false,\n    },\n    simple: {\n      type: Boolean,\n      default: false,\n    },\n    finishStatus: {\n      type: String,\n      default: 'finish',\n      validator: (val: string): boolean =>\n        ['wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n    processStatus: {\n      type: String,\n      default: 'process',\n      validator: (val: string): boolean =>\n        ['wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  emits: [CHANGE_EVENT],\n  setup(props, { emit }) {\n    const steps = ref([])\n\n    watch(steps, () => {\n      steps.value.forEach((instance, index) => {\n        instance.setIndex(index)\n      })\n    })\n\n    provide('ElSteps', { props, steps })\n\n    watch(\n      () => props.active,\n      (newVal, oldVal) => {\n        emit(CHANGE_EVENT, newVal, oldVal)\n      }\n    )\n\n    return {\n      steps,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;sBACEA;IACG;;;;;IAKDC;;;;;;"}

package/es/components/steps/src/item.mjs

@@ -1,6 +1,6 @@
-import script from './item.vue_vue&type=script&lang.mjs';
-export { default } from './item.vue_vue&type=script&lang.mjs';
-import { render } from './item.vue_vue&type=template&id=6ec47f4b&lang.mjs';
+import script from './item.vue_vue_type_script_lang.mjs';
+export { default } from './item.vue_vue_type_script_lang.mjs';
+import { render } from './item.vue_vue_type_template_id_6ec47f4b_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/steps/src/item.vue";

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

@@ -57,13 +57,13 @@ declare const _default: import("vue").DefineComponent<{
     status?: unknown;
 } & {
     title: string;
-    description: string;
     icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    description: string;
     status: string;
 } & {}>, {
     title: string;
-    description: string;
     icon: string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    description: string;
     status: string;
 }>;
 export default _default;

package/es/components/steps/src/item.vue_vue_type_script_lang.mjs

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

package/es/components/steps/src/item.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/steps/src/item.vue"],"sourcesContent":["<template>\n  <div\n    :style=\"style\"\n    :class=\"[\n      'el-step',\n      isSimple ? 'is-simple' : `is-${parent.props.direction}`,\n      isLast && !space && !isCenter && 'is-flex',\n      isCenter && !isVertical && !isSimple && 'is-center',\n    ]\"\n  >\n    <!-- icon & line -->\n    <div :class=\"['el-step__head', `is-${currentStatus}`]\">\n      <div class=\"el-step__line\">\n        <i class=\"el-step__line-inner\" :style=\"lineStyle\"></i>\n      </div>\n\n      <div :class=\"['el-step__icon', `is-${icon ? 'icon' : 'text'}`]\">\n        <slot\n          v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\"\n          name=\"icon\"\n        >\n          <el-icon v-if=\"icon\" class=\"el-step__icon-inner\">\n            <component :is=\"icon\" />\n          </el-icon>\n          <div v-if=\"!icon && !isSimple\" class=\"el-step__icon-inner\">\n            {{ index + 1 }}\n          </div>\n        </slot>\n        <el-icon v-else class=\"el-step__icon-inner is-status\">\n          <check v-if=\"currentStatus === 'success'\" />\n          <close v-else />\n        </el-icon>\n      </div>\n    </div>\n    <!-- title & description -->\n    <div class=\"el-step__main\">\n      <div :class=\"['el-step__title', `is-${currentStatus}`]\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"isSimple\" class=\"el-step__arrow\"></div>\n      <div v-else :class=\"['el-step__description', `is-${currentStatus}`]\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  reactive,\n  watch,\n} from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Close, Check } from '@element-plus/icons'\n\nimport type { Ref, PropType, Component } from 'vue'\n\nexport interface IStepsProps {\n  space: number | string\n  active: number\n  direction: string\n  alignCenter: boolean\n  simple: boolean\n  finishStatus: string\n  processStatus: string\n}\n\nexport interface StepItemState {\n  uid: number\n  currentStatus: string\n  setIndex: (val: number) => void\n  calcProgress: (status: string) => void\n}\n\nexport interface IStepsInject {\n  props: IStepsProps\n  steps: Ref<StepItemState[]>\n}\n\nexport default defineComponent({\n  name: 'ElStep',\n  components: {\n    ElIcon,\n    Close,\n    Check,\n  },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    icon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    description: {\n      type: String,\n      default: '',\n    },\n    status: {\n      type: String,\n      default: '',\n      validator: (val: string): boolean =>\n        ['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  setup(props) {\n    const index = ref(-1)\n    const lineStyle = ref({})\n    const internalStatus = ref('')\n    const parent: IStepsInject = inject('ElSteps')\n    const currentInstance = getCurrentInstance()\n\n    onMounted(() => {\n      watch(\n        [\n          () => parent.props.active,\n          () => parent.props.processStatus,\n          () => parent.props.finishStatus,\n        ],\n        ([active]) => {\n          updateStatus(active)\n        },\n        { immediate: true }\n      )\n    })\n\n    onBeforeUnmount(() => {\n      parent.steps.value = parent.steps.value.filter(\n        (instance) => instance.uid !== currentInstance.uid\n      )\n    })\n\n    const currentStatus = computed(() => {\n      return props.status || internalStatus.value\n    })\n    const prevStatus = computed(() => {\n      const prevStep = parent.steps.value[index.value - 1]\n      return prevStep ? prevStep.currentStatus : 'wait'\n    })\n    const isCenter = computed(() => {\n      return parent.props.alignCenter\n    })\n    const isVertical = computed(() => {\n      return parent.props.direction === 'vertical'\n    })\n    const isSimple = computed(() => {\n      return parent.props.simple\n    })\n    const stepsCount = computed(() => {\n      return parent.steps.value.length\n    })\n    const isLast = computed(() => {\n      return (\n        parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid\n      )\n    })\n    const space = computed(() => {\n      return isSimple.value ? '' : parent.props.space\n    })\n    const style = computed(() => {\n      const style: Record<string, unknown> = {\n        flexBasis:\n          typeof space.value === 'number'\n            ? `${space.value}px`\n            : space.value\n            ? space.value\n            : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,\n      }\n      if (isVertical.value) return style\n      if (isLast.value) {\n        style.maxWidth = `${100 / stepsCount.value}%`\n      }\n      return style\n    })\n\n    const setIndex = (val) => {\n      index.value = val\n    }\n    const calcProgress = (status) => {\n      let step = 100\n      const style: Record<string, unknown> = {}\n\n      style.transitionDelay = `${150 * index.value}ms`\n      if (status === parent.props.processStatus) {\n        step = 0\n      } else if (status === 'wait') {\n        step = 0\n        style.transitionDelay = `${-150 * index.value}ms`\n      }\n      style.borderWidth = step && !isSimple.value ? '1px' : 0\n      style[\n        parent.props.direction === 'vertical' ? 'height' : 'width'\n      ] = `${step}%`\n      lineStyle.value = style\n    }\n    const updateStatus = (activeIndex) => {\n      if (activeIndex > index.value) {\n        internalStatus.value = parent.props.finishStatus\n      } else if (activeIndex === index.value && prevStatus.value !== 'error') {\n        internalStatus.value = parent.props.processStatus\n      } else {\n        internalStatus.value = 'wait'\n      }\n      const prevChild = parent.steps.value[stepsCount.value - 1]\n      if (prevChild) prevChild.calcProgress(internalStatus.value)\n    }\n\n    const stepItemState = reactive({\n      uid: computed(() => currentInstance.uid),\n      currentStatus,\n      setIndex,\n      calcProgress,\n    })\n    parent.steps.value = [...parent.steps.value, stepItemState]\n\n    return {\n      index,\n      lineStyle,\n      currentStatus,\n      isCenter,\n      isVertical,\n      isSimple,\n      isLast,\n      space,\n      style,\n      parent,\n      setIndex,\n      calcProgress,\n      updateStatus,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/steps/src/item.vue_vue_type_template_id_6ec47f4b_lang.mjs

@@ -0,0 +1,83 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, renderSlot, createBlock, withCtx, resolveDynamicComponent, toDisplayString, createTextVNode } from 'vue';
+
+const _hoisted_1 = { class: "el-step__line" };
+const _hoisted_2 = {
+  key: 1,
+  class: "el-step__icon-inner"
+};
+const _hoisted_3 = { class: "el-step__main" };
+const _hoisted_4 = {
+  key: 0,
+  class: "el-step__arrow"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_check = resolveComponent("check");
+  const _component_close = resolveComponent("close");
+  return openBlock(), createElementBlock("div", {
+    style: normalizeStyle(_ctx.style),
+    class: normalizeClass([
+      "el-step",
+      _ctx.isSimple ? "is-simple" : `is-${_ctx.parent.props.direction}`,
+      _ctx.isLast && !_ctx.space && !_ctx.isCenter && "is-flex",
+      _ctx.isCenter && !_ctx.isVertical && !_ctx.isSimple && "is-center"
+    ])
+  }, [
+    createCommentVNode(" icon & line "),
+    createElementVNode("div", {
+      class: normalizeClass(["el-step__head", `is-${_ctx.currentStatus}`])
+    }, [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("i", {
+          class: "el-step__line-inner",
+          style: normalizeStyle(_ctx.lineStyle)
+        }, null, 4)
+      ]),
+      createElementVNode("div", {
+        class: normalizeClass(["el-step__icon", `is-${_ctx.icon ? "icon" : "text"}`])
+      }, [
+        _ctx.currentStatus !== "success" && _ctx.currentStatus !== "error" ? renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
+          _ctx.icon ? (openBlock(), createBlock(_component_el_icon, {
+            key: 0,
+            class: "el-step__icon-inner"
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
+            ]),
+            _: 1
+          })) : createCommentVNode("v-if", true),
+          !_ctx.icon && !_ctx.isSimple ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.index + 1), 1)) : createCommentVNode("v-if", true)
+        ]) : (openBlock(), createBlock(_component_el_icon, {
+          key: 1,
+          class: "el-step__icon-inner is-status"
+        }, {
+          default: withCtx(() => [
+            _ctx.currentStatus === "success" ? (openBlock(), createBlock(_component_check, { key: 0 })) : (openBlock(), createBlock(_component_close, { key: 1 }))
+          ]),
+          _: 1
+        }))
+      ], 2)
+    ], 2),
+    createCommentVNode(" title & description "),
+    createElementVNode("div", _hoisted_3, [
+      createElementVNode("div", {
+        class: normalizeClass(["el-step__title", `is-${_ctx.currentStatus}`])
+      }, [
+        renderSlot(_ctx.$slots, "title", {}, () => [
+          createTextVNode(toDisplayString(_ctx.title), 1)
+        ])
+      ], 2),
+      _ctx.isSimple ? (openBlock(), createElementBlock("div", _hoisted_4)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(["el-step__description", `is-${_ctx.currentStatus}`])
+      }, [
+        renderSlot(_ctx.$slots, "description", {}, () => [
+          createTextVNode(toDisplayString(_ctx.description), 1)
+        ])
+      ], 2))
+    ])
+  ], 6);
+}
+
+export { render };
+//# sourceMappingURL=item.vue_vue_type_template_id_6ec47f4b_lang.mjs.map

package/es/components/steps/src/item.vue_vue_type_template_id_6ec47f4b_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.vue_vue_type_template_id_6ec47f4b_lang.mjs","sources":["../../../../../../packages/components/steps/src/item.vue?vue&type=template&id=6ec47f4b&lang.js"],"sourcesContent":["<template>\n  <div\n    :style=\"style\"\n    :class=\"[\n      'el-step',\n      isSimple ? 'is-simple' : `is-${parent.props.direction}`,\n      isLast && !space && !isCenter && 'is-flex',\n      isCenter && !isVertical && !isSimple && 'is-center',\n    ]\"\n  >\n    <!-- icon & line -->\n    <div :class=\"['el-step__head', `is-${currentStatus}`]\">\n      <div class=\"el-step__line\">\n        <i class=\"el-step__line-inner\" :style=\"lineStyle\"></i>\n      </div>\n\n      <div :class=\"['el-step__icon', `is-${icon ? 'icon' : 'text'}`]\">\n        <slot\n          v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\"\n          name=\"icon\"\n        >\n          <el-icon v-if=\"icon\" class=\"el-step__icon-inner\">\n            <component :is=\"icon\" />\n          </el-icon>\n          <div v-if=\"!icon && !isSimple\" class=\"el-step__icon-inner\">\n            {{ index + 1 }}\n          </div>\n        </slot>\n        <el-icon v-else class=\"el-step__icon-inner is-status\">\n          <check v-if=\"currentStatus === 'success'\" />\n          <close v-else />\n        </el-icon>\n      </div>\n    </div>\n    <!-- title & description -->\n    <div class=\"el-step__main\">\n      <div :class=\"['el-step__title', `is-${currentStatus}`]\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"isSimple\" class=\"el-step__arrow\"></div>\n      <div v-else :class=\"['el-step__description', `is-${currentStatus}`]\">\n        <slot name=\"description\">{{ description }}</slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  reactive,\n  watch,\n} from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { Close, Check } from '@element-plus/icons'\n\nimport type { Ref, PropType, Component } from 'vue'\n\nexport interface IStepsProps {\n  space: number | string\n  active: number\n  direction: string\n  alignCenter: boolean\n  simple: boolean\n  finishStatus: string\n  processStatus: string\n}\n\nexport interface StepItemState {\n  uid: number\n  currentStatus: string\n  setIndex: (val: number) => void\n  calcProgress: (status: string) => void\n}\n\nexport interface IStepsInject {\n  props: IStepsProps\n  steps: Ref<StepItemState[]>\n}\n\nexport default defineComponent({\n  name: 'ElStep',\n  components: {\n    ElIcon,\n    Close,\n    Check,\n  },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    icon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    description: {\n      type: String,\n      default: '',\n    },\n    status: {\n      type: String,\n      default: '',\n      validator: (val: string): boolean =>\n        ['', 'wait', 'process', 'finish', 'error', 'success'].includes(val),\n    },\n  },\n  setup(props) {\n    const index = ref(-1)\n    const lineStyle = ref({})\n    const internalStatus = ref('')\n    const parent: IStepsInject = inject('ElSteps')\n    const currentInstance = getCurrentInstance()\n\n    onMounted(() => {\n      watch(\n        [\n          () => parent.props.active,\n          () => parent.props.processStatus,\n          () => parent.props.finishStatus,\n        ],\n        ([active]) => {\n          updateStatus(active)\n        },\n        { immediate: true }\n      )\n    })\n\n    onBeforeUnmount(() => {\n      parent.steps.value = parent.steps.value.filter(\n        (instance) => instance.uid !== currentInstance.uid\n      )\n    })\n\n    const currentStatus = computed(() => {\n      return props.status || internalStatus.value\n    })\n    const prevStatus = computed(() => {\n      const prevStep = parent.steps.value[index.value - 1]\n      return prevStep ? prevStep.currentStatus : 'wait'\n    })\n    const isCenter = computed(() => {\n      return parent.props.alignCenter\n    })\n    const isVertical = computed(() => {\n      return parent.props.direction === 'vertical'\n    })\n    const isSimple = computed(() => {\n      return parent.props.simple\n    })\n    const stepsCount = computed(() => {\n      return parent.steps.value.length\n    })\n    const isLast = computed(() => {\n      return (\n        parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid\n      )\n    })\n    const space = computed(() => {\n      return isSimple.value ? '' : parent.props.space\n    })\n    const style = computed(() => {\n      const style: Record<string, unknown> = {\n        flexBasis:\n          typeof space.value === 'number'\n            ? `${space.value}px`\n            : space.value\n            ? space.value\n            : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`,\n      }\n      if (isVertical.value) return style\n      if (isLast.value) {\n        style.maxWidth = `${100 / stepsCount.value}%`\n      }\n      return style\n    })\n\n    const setIndex = (val) => {\n      index.value = val\n    }\n    const calcProgress = (status) => {\n      let step = 100\n      const style: Record<string, unknown> = {}\n\n      style.transitionDelay = `${150 * index.value}ms`\n      if (status === parent.props.processStatus) {\n        step = 0\n      } else if (status === 'wait') {\n        step = 0\n        style.transitionDelay = `${-150 * index.value}ms`\n      }\n      style.borderWidth = step && !isSimple.value ? '1px' : 0\n      style[\n        parent.props.direction === 'vertical' ? 'height' : 'width'\n      ] = `${step}%`\n      lineStyle.value = style\n    }\n    const updateStatus = (activeIndex) => {\n      if (activeIndex > index.value) {\n        internalStatus.value = parent.props.finishStatus\n      } else if (activeIndex === index.value && prevStatus.value !== 'error') {\n        internalStatus.value = parent.props.processStatus\n      } else {\n        internalStatus.value = 'wait'\n      }\n      const prevChild = parent.steps.value[stepsCount.value - 1]\n      if (prevChild) prevChild.calcProgress(internalStatus.value)\n    }\n\n    const stepItemState = reactive({\n      uid: computed(() => currentInstance.uid),\n      currentStatus,\n      setIndex,\n      calcProgress,\n    })\n    parent.steps.value = [...parent.steps.value, stepItemState]\n\n    return {\n      index,\n      lineStyle,\n      currentStatus,\n      isCenter,\n      isVertical,\n      isSimple,\n      isLast,\n      space,\n      style,\n      parent,\n      setIndex,\n      calcProgress,\n      updateStatus,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createCommentVNode","_createElementVNode","_renderSlot","_createBlock"],"mappings":";;qBAYW,OAAM;;;EAYwB,OAAM;AAAA;qBAWtC,OAAM;;;EAIY,OAAM;AAAA;;;;;sBAtC/BA;IACG,sBAAO;IACP;;;;;;;IAODC;IACAC;MAAM,8CAA+B;;MACnCA,0BAAA;QACEA;UAAG,OAAM;AAAA,UAAuB,sBAAO;;;MAGzCA;QAAM,8CAA+B;;QAE3B,oCAA+B,iCADvCC,4CAAA;UAIiB,0BAAfC;;YAAqB,OAAM;AAAA;6BACzB;4BAAAA,oCAAgB;;;;WAEN,cAAS,8BAArBJ,0BAAA,4BACK;2BAGPI;;UAAgB,OAAM;AAAA;2BACpB;YAAa,iDAAbA,2DACAA;;;;;;IAINH;IACAC,0BAAA;MACEA;QAAM,+CAAgC;;QACpCC,qCAAA;0CAAsB;;;MAEb,8BAAXH,0BAAA,6BACAA;;QAAa,qDAAsC;;QACjDG,2CAAA;0CAA4B;;;;;;;;;"}

package/es/components/switch/index.mjs

@@ -1,5 +1,5 @@
 import './src/index.mjs';
-import script from './src/index.vue_vue&type=script&lang.mjs';
+import script from './src/index.vue_vue_type_script_lang.mjs';
 
 script.install = (app) => {
   app.component(script.name, script);

package/es/components/switch/src/index.mjs

@@ -1,6 +1,6 @@
-import script from './index.vue_vue&type=script&lang.mjs';
-export { default } from './index.vue_vue&type=script&lang.mjs';
-import { render } from './index.vue_vue&type=template&id=ee4fcade&lang.mjs';
+import script from './index.vue_vue_type_script_lang.mjs';
+export { default } from './index.vue_vue_type_script_lang.mjs';
+import { render } from './index.vue_vue_type_template_id_ee4fcade_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/switch/src/index.vue";

package/es/components/switch/src/index.vue_vue_type_script_lang.mjs

@@ -0,0 +1,190 @@
+import { defineComponent, inject, ref, watch, computed, nextTick, onMounted } from 'vue';
+import { isPromise } from '@vue/shared';
+import '../../../tokens/index.mjs';
+import { isBool } from '../../../utils/util.mjs';
+import { throwError, debugWarn } from '../../../utils/error.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { Loading } from '@element-plus/icons';
+import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+
+var script = defineComponent({
+  name: "ElSwitch",
+  components: { ElIcon, Loading },
+  props: {
+    modelValue: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    value: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 40
+    },
+    inlinePrompt: {
+      type: Boolean,
+      default: false
+    },
+    activeIcon: {
+      type: [String, Object],
+      default: ""
+    },
+    inactiveIcon: {
+      type: [String, Object],
+      default: ""
+    },
+    activeText: {
+      type: String,
+      default: ""
+    },
+    inactiveText: {
+      type: String,
+      default: ""
+    },
+    activeColor: {
+      type: String,
+      default: ""
+    },
+    inactiveColor: {
+      type: String,
+      default: ""
+    },
+    borderColor: {
+      type: String,
+      default: ""
+    },
+    activeValue: {
+      type: [Boolean, String, Number],
+      default: true
+    },
+    inactiveValue: {
+      type: [Boolean, String, Number],
+      default: false
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    },
+    id: String,
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    beforeChange: Function
+  },
+  emits: ["update:modelValue", "change", "input"],
+  setup(props, ctx) {
+    const elForm = inject(elFormKey, {});
+    const elFormItem = inject(elFormItemKey, {});
+    const isModelValue = ref(props.modelValue !== false);
+    const input = ref(null);
+    const core = ref(null);
+    const scope = "ElSwitch";
+    watch(() => props.modelValue, () => {
+      isModelValue.value = true;
+    });
+    watch(() => props.value, () => {
+      isModelValue.value = false;
+    });
+    const actualValue = computed(() => {
+      return isModelValue.value ? props.modelValue : props.value;
+    });
+    const checked = computed(() => {
+      return actualValue.value === props.activeValue;
+    });
+    if (!~[props.activeValue, props.inactiveValue].indexOf(actualValue.value)) {
+      ctx.emit("update:modelValue", props.inactiveValue);
+      ctx.emit("change", props.inactiveValue);
+      ctx.emit("input", props.inactiveValue);
+    }
+    watch(checked, () => {
+      var _a;
+      input.value.checked = checked.value;
+      if (props.activeColor || props.inactiveColor) {
+        setBackgroundColor();
+      }
+      if (props.validateEvent) {
+        (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+      }
+    });
+    const switchDisabled = computed(() => {
+      return props.disabled || props.loading || (elForm || {}).disabled;
+    });
+    const handleChange = () => {
+      const val = checked.value ? props.inactiveValue : props.activeValue;
+      ctx.emit("update:modelValue", val);
+      ctx.emit("change", val);
+      ctx.emit("input", val);
+      nextTick(() => {
+        input.value.checked = checked.value;
+      });
+    };
+    const switchValue = () => {
+      if (switchDisabled.value)
+        return;
+      const { beforeChange } = props;
+      if (!beforeChange) {
+        handleChange();
+        return;
+      }
+      const shouldChange = beforeChange();
+      const isExpectType = [isPromise(shouldChange), isBool(shouldChange)].some((i) => i);
+      if (!isExpectType) {
+        throwError(scope, "beforeChange must return type `Promise<boolean>` or `boolean`");
+      }
+      if (isPromise(shouldChange)) {
+        shouldChange.then((result) => {
+          if (result) {
+            handleChange();
+          }
+        }).catch((e) => {
+          debugWarn(scope, `some error occurred: ${e}`);
+        });
+      } else if (shouldChange) {
+        handleChange();
+      }
+    };
+    const setBackgroundColor = () => {
+      const newColor = checked.value ? props.activeColor : props.inactiveColor;
+      const coreEl = core.value;
+      if (props.borderColor)
+        coreEl.style.borderColor = props.borderColor;
+      else if (!props.borderColor)
+        coreEl.style.borderColor = newColor;
+      coreEl.style.backgroundColor = newColor;
+      coreEl.children[0].style.color = newColor;
+    };
+    const focus = () => {
+      var _a, _b;
+      (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    };
+    onMounted(() => {
+      if (props.activeColor || props.inactiveColor || props.borderColor) {
+        setBackgroundColor();
+      }
+      input.value.checked = checked.value;
+    });
+    return {
+      input,
+      core,
+      switchDisabled,
+      checked,
+      handleChange,
+      switchValue,
+      focus
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=index.vue_vue_type_script_lang.mjs.map

package/es/components/switch/src/index.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/switch/src/index.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-switch\"\n    :class=\"{ 'is-disabled': switchDisabled, 'is-checked': checked }\"\n    role=\"switch\"\n    :aria-checked=\"checked\"\n    :aria-disabled=\"switchDisabled\"\n    @click.prevent=\"switchValue\"\n  >\n    <input\n      :id=\"id\"\n      ref=\"input\"\n      class=\"el-switch__input\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :true-value=\"activeValue\"\n      :false-value=\"inactiveValue\"\n      :disabled=\"switchDisabled\"\n      @change=\"handleChange\"\n      @keydown.enter=\"switchValue\"\n    />\n    <span\n      v-if=\"!inlinePrompt && (inactiveIcon || inactiveText)\"\n      :class=\"[\n        'el-switch__label',\n        'el-switch__label--left',\n        !checked ? 'is-active' : '',\n      ]\"\n    >\n      <el-icon v-if=\"inactiveIcon\"><component :is=\"inactiveIcon\" /></el-icon>\n      <span v-if=\"!inactiveIcon && inactiveText\" :aria-hidden=\"checked\">{{\n        inactiveText\n      }}</span>\n    </span>\n    <span\n      ref=\"core\"\n      class=\"el-switch__core\"\n      :style=\"{ width: (width || 40) + 'px' }\"\n    >\n      <div v-if=\"inlinePrompt\" class=\"el-switch__inner\">\n        <template v-if=\"activeIcon || inactiveIcon\">\n          <el-icon\n            v-if=\"activeIcon\"\n            class=\"is-icon\"\n            :class=\"checked ? 'is-show' : 'is-hide'\"\n          >\n            <component :is=\"activeIcon\" />\n          </el-icon>\n          <el-icon\n            v-if=\"inactiveIcon\"\n            class=\"is-icon\"\n            :class=\"!checked ? 'is-show' : 'is-hide'\"\n          >\n            <component :is=\"inactiveIcon\" />\n          </el-icon>\n        </template>\n        <template v-else-if=\"activeText || inactiveIcon\">\n          <span\n            v-if=\"activeText\"\n            class=\"is-text\"\n            :class=\"checked ? 'is-show' : 'is-hide'\"\n            :aria-hidden=\"!checked\"\n          >\n            {{ activeText.substr(0, 1) }}\n          </span>\n          <span\n            v-if=\"inactiveText\"\n            class=\"is-text\"\n            :class=\"!checked ? 'is-show' : 'is-hide'\"\n            :aria-hidden=\"checked\"\n          >\n            {{ inactiveText.substr(0, 1) }}\n          </span>\n        </template>\n      </div>\n      <div class=\"el-switch__action\">\n        <el-icon v-if=\"loading\" class=\"is-loading\"><loading /></el-icon>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText)\"\n      :class=\"[\n        'el-switch__label',\n        'el-switch__label--right',\n        checked ? 'is-active' : '',\n      ]\"\n    >\n      <el-icon v-if=\"activeIcon\"><component :is=\"activeIcon\" /></el-icon>\n      <span v-if=\"!activeIcon && activeText\" :aria-hidden=\"!checked\">{{\n        activeText\n      }}</span>\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  ref,\n  inject,\n  nextTick,\n  watch,\n} from 'vue'\nimport { isPromise } from '@vue/shared'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { isBool } from '@element-plus/utils/util'\nimport { throwError, debugWarn } from '@element-plus/utils/error'\nimport ElIcon from '@element-plus/components/icon'\nimport { Loading } from '@element-plus/icons'\n\nimport type { PropType, Component } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\n\ntype ValueType = boolean | string | number\n\ninterface ISwitchProps {\n  modelValue: ValueType\n  value: ValueType\n  disabled: boolean\n  width: number\n  activeIcon: string | Component\n  inactiveIcon: string | Component\n  activeText: string\n  inactiveText: string\n  activeColor: string\n  inactiveColor: string\n  borderColor: string\n  activeValue: ValueType\n  inactiveValue: ValueType\n  name: string\n  validateEvent: boolean\n  id: string\n  loading: boolean\n  beforeChange?: () => Promise<boolean> | boolean\n}\n\nexport default defineComponent({\n  name: 'ElSwitch',\n  components: { ElIcon, Loading },\n  props: {\n    modelValue: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    value: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    width: {\n      type: Number,\n      default: 40,\n    },\n    inlinePrompt: {\n      type: Boolean,\n      default: false,\n    },\n    activeIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    inactiveIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: '',\n    },\n    activeText: {\n      type: String,\n      default: '',\n    },\n    inactiveText: {\n      type: String,\n      default: '',\n    },\n    activeColor: {\n      type: String,\n      default: '',\n    },\n    inactiveColor: {\n      type: String,\n      default: '',\n    },\n    borderColor: {\n      type: String,\n      default: '',\n    },\n    activeValue: {\n      type: [Boolean, String, Number],\n      default: true,\n    },\n    inactiveValue: {\n      type: [Boolean, String, Number],\n      default: false,\n    },\n    name: {\n      type: String,\n      default: '',\n    },\n    validateEvent: {\n      type: Boolean,\n      default: true,\n    },\n    id: String,\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n    beforeChange: Function as PropType<() => Promise<boolean> | boolean>,\n  },\n  emits: ['update:modelValue', 'change', 'input'],\n  setup(props: ISwitchProps, ctx) {\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const isModelValue = ref(props.modelValue !== false)\n    const input = ref(null)\n    const core = ref(null)\n\n    const scope = 'ElSwitch'\n\n    watch(\n      () => props.modelValue,\n      () => {\n        isModelValue.value = true\n      }\n    )\n\n    watch(\n      () => props.value,\n      () => {\n        isModelValue.value = false\n      }\n    )\n\n    const actualValue = computed((): ValueType => {\n      return isModelValue.value ? props.modelValue : props.value\n    })\n\n    const checked = computed((): boolean => {\n      return actualValue.value === props.activeValue\n    })\n\n    if (!~[props.activeValue, props.inactiveValue].indexOf(actualValue.value)) {\n      ctx.emit('update:modelValue', props.inactiveValue)\n      ctx.emit('change', props.inactiveValue)\n      ctx.emit('input', props.inactiveValue)\n    }\n\n    watch(checked, () => {\n      input.value.checked = checked.value\n\n      if (props.activeColor || props.inactiveColor) {\n        setBackgroundColor()\n      }\n\n      if (props.validateEvent) {\n        elFormItem.validate?.('change')\n      }\n    })\n\n    const switchDisabled = computed((): boolean => {\n      return props.disabled || props.loading || (elForm || {}).disabled\n    })\n\n    const handleChange = (): void => {\n      const val = checked.value ? props.inactiveValue : props.activeValue\n      ctx.emit('update:modelValue', val)\n      ctx.emit('change', val)\n      ctx.emit('input', val)\n      nextTick(() => {\n        input.value.checked = checked.value\n      })\n    }\n\n    const switchValue = (): void => {\n      if (switchDisabled.value) return\n\n      const { beforeChange } = props\n      if (!beforeChange) {\n        handleChange()\n        return\n      }\n\n      const shouldChange = beforeChange()\n\n      const isExpectType = [isPromise(shouldChange), isBool(shouldChange)].some(\n        (i) => i\n      )\n      if (!isExpectType) {\n        throwError(\n          scope,\n          'beforeChange must return type `Promise<boolean>` or `boolean`'\n        )\n      }\n\n      if (isPromise(shouldChange)) {\n        shouldChange\n          .then((result) => {\n            if (result) {\n              handleChange()\n            }\n          })\n          .catch((e) => {\n            debugWarn(scope, `some error occurred: ${e}`)\n          })\n      } else if (shouldChange) {\n        handleChange()\n      }\n    }\n\n    const setBackgroundColor = (): void => {\n      const newColor = checked.value ? props.activeColor : props.inactiveColor\n      const coreEl = core.value\n      if (props.borderColor) coreEl.style.borderColor = props.borderColor\n      else if (!props.borderColor) coreEl.style.borderColor = newColor\n      coreEl.style.backgroundColor = newColor\n      coreEl.children[0].style.color = newColor\n    }\n\n    const focus = (): void => {\n      input.value?.focus?.()\n    }\n\n    onMounted(() => {\n      if (props.activeColor || props.inactiveColor || props.borderColor) {\n        setBackgroundColor()\n      }\n\n      input.value.checked = checked.value\n    })\n\n    return {\n      input,\n      core,\n      switchDisabled,\n      checked,\n      handleChange,\n      switchValue,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}