@element-plus/nightly 0.0.20220116 → 0.0.20220120

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

@@ -20,6 +20,17 @@ export declare const ElSwitch: import("../../utils/types").SFCWithInstall<import
     readonly beforeChange: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<() => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
     readonly size: import("../../utils/props").BuildPropReturn<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown, unknown, unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     input: import("vue").Ref<HTMLInputElement | undefined>;
     core: import("vue").Ref<HTMLSpanElement | undefined>;
     switchDisabled: import("vue").ComputedRef<boolean>;
@@ -32,50 +43,28 @@ export declare const ElSwitch: import("../../utils/types").SFCWithInstall<import
     "update:modelValue": (val: string | number | boolean) => boolean;
     change: (val: string | number | boolean) => boolean;
     input: (val: string | number | boolean) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly modelValue?: unknown;
-    readonly value?: unknown;
-    readonly disabled?: unknown;
-    readonly width?: unknown;
-    readonly inlinePrompt?: unknown;
-    readonly activeIcon?: unknown;
-    readonly inactiveIcon?: unknown;
-    readonly activeText?: unknown;
-    readonly inactiveText?: unknown;
-    readonly activeColor?: unknown;
-    readonly inactiveColor?: unknown;
-    readonly borderColor?: unknown;
-    readonly activeValue?: unknown;
-    readonly inactiveValue?: unknown;
-    readonly name?: unknown;
-    readonly validateEvent?: unknown;
-    readonly id?: unknown;
-    readonly loading?: unknown;
-    readonly beforeChange?: unknown;
-    readonly size?: unknown;
-} & {
-    disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    loading: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    modelValue: import("../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-    name: string;
-    width: number;
-    borderColor: string;
-    validateEvent: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    value: import("../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-    inlinePrompt: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    activeIcon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
-    inactiveIcon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
-    activeText: string;
-    inactiveText: string;
-    activeColor: string;
-    inactiveColor: string;
-    activeValue: import("../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-    inactiveValue: import("../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-} & {
-    size?: import("../../utils/props").BuildPropType<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown> | undefined;
-    id?: string | undefined;
-    beforeChange?: (() => boolean | Promise<boolean>) | undefined;
-}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly modelValue: import("../../utils/props").BuildPropReturn<readonly [BooleanConstructor, StringConstructor, NumberConstructor], false, unknown, unknown, unknown>;
+    readonly value: import("../../utils/props").BuildPropReturn<readonly [BooleanConstructor, StringConstructor, NumberConstructor], false, unknown, unknown, unknown>;
+    readonly disabled: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly width: import("../../utils/props").BuildPropReturn<NumberConstructor, 40, unknown, unknown, unknown>;
+    readonly inlinePrompt: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly activeIcon: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
+    readonly inactiveIcon: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
+    readonly activeText: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly inactiveText: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly activeColor: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly inactiveColor: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly borderColor: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly activeValue: import("../../utils/props").BuildPropReturn<readonly [BooleanConstructor, StringConstructor, NumberConstructor], true, unknown, unknown, unknown>;
+    readonly inactiveValue: import("../../utils/props").BuildPropReturn<readonly [BooleanConstructor, StringConstructor, NumberConstructor], false, unknown, unknown, unknown>;
+    readonly name: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly validateEvent: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly id: StringConstructor;
+    readonly loading: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly beforeChange: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<() => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
+    readonly size: import("../../utils/props").BuildPropReturn<(new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../utils/types").ComponentSize & {}) | (() => import("../../utils/types").ComponentSize))[], unknown, unknown, unknown, unknown>;
+}>> & {
     onChange?: ((val: string | number | boolean) => any) | undefined;
     onInput?: ((val: string | number | boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;

package/lib/components/switch/src/switch.vue.d.ts

@@ -20,6 +20,17 @@ declare const _default: import("vue").DefineComponent<{
     readonly beforeChange: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<() => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
     readonly size: import("../../../utils/props").BuildPropReturn<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown, unknown, unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     input: import("vue").Ref<HTMLInputElement | undefined>;
     core: import("vue").Ref<HTMLSpanElement | undefined>;
     switchDisabled: import("vue").ComputedRef<boolean>;
@@ -32,50 +43,28 @@ declare const _default: import("vue").DefineComponent<{
     "update:modelValue": (val: string | number | boolean) => boolean;
     change: (val: string | number | boolean) => boolean;
     input: (val: string | number | boolean) => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly modelValue?: unknown;
-    readonly value?: unknown;
-    readonly disabled?: unknown;
-    readonly width?: unknown;
-    readonly inlinePrompt?: unknown;
-    readonly activeIcon?: unknown;
-    readonly inactiveIcon?: unknown;
-    readonly activeText?: unknown;
-    readonly inactiveText?: unknown;
-    readonly activeColor?: unknown;
-    readonly inactiveColor?: unknown;
-    readonly borderColor?: unknown;
-    readonly activeValue?: unknown;
-    readonly inactiveValue?: unknown;
-    readonly name?: unknown;
-    readonly validateEvent?: unknown;
-    readonly id?: unknown;
-    readonly loading?: unknown;
-    readonly beforeChange?: unknown;
-    readonly size?: unknown;
-} & {
-    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    loading: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    modelValue: import("../../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-    name: string;
-    width: number;
-    borderColor: string;
-    validateEvent: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    value: import("../../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-    inlinePrompt: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    activeIcon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
-    inactiveIcon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
-    activeText: string;
-    inactiveText: string;
-    activeColor: string;
-    inactiveColor: string;
-    activeValue: import("../../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-    inactiveValue: import("../../../utils/props").BuildPropType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-} & {
-    size?: import("../../../utils/props").BuildPropType<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown> | undefined;
-    id?: string | undefined;
-    beforeChange?: (() => boolean | Promise<boolean>) | undefined;
-}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly modelValue: import("../../../utils/props").BuildPropReturn<readonly [BooleanConstructor, StringConstructor, NumberConstructor], false, unknown, unknown, unknown>;
+    readonly value: import("../../../utils/props").BuildPropReturn<readonly [BooleanConstructor, StringConstructor, NumberConstructor], false, unknown, unknown, unknown>;
+    readonly disabled: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly width: import("../../../utils/props").BuildPropReturn<NumberConstructor, 40, unknown, unknown, unknown>;
+    readonly inlinePrompt: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly activeIcon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
+    readonly inactiveIcon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
+    readonly activeText: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly inactiveText: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly activeColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly inactiveColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly borderColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly activeValue: import("../../../utils/props").BuildPropReturn<readonly [BooleanConstructor, StringConstructor, NumberConstructor], true, unknown, unknown, unknown>;
+    readonly inactiveValue: import("../../../utils/props").BuildPropReturn<readonly [BooleanConstructor, StringConstructor, NumberConstructor], false, unknown, unknown, unknown>;
+    readonly name: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly validateEvent: import("../../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly id: StringConstructor;
+    readonly loading: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly beforeChange: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<() => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
+    readonly size: import("../../../utils/props").BuildPropReturn<(new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize) | ((new (...args: any[]) => import("../../../utils/types").ComponentSize & {}) | (() => import("../../../utils/types").ComponentSize))[], unknown, unknown, unknown, unknown>;
+}>> & {
     onChange?: ((val: string | number | boolean) => any) | undefined;
     onInput?: ((val: string | number | boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;

package/lib/components/switch/src/switch.vue_vue_type_script_lang.js

@@ -13,6 +13,7 @@ require('../../../hooks/index.js');
 var _switch = require('./switch.js');
 var index$1 = require('../../../hooks/use-form-item/index.js');
 var index$2 = require('../../../hooks/use-common-props/index.js');
+var index$3 = require('../../../hooks/use-namespace/index.js');
 
 const COMPONENT_NAME = "ElSwitch";
 var script = vue.defineComponent({
@@ -23,16 +24,16 @@ var script = vue.defineComponent({
   setup(props, { emit }) {
     const { formItem } = index$1.useFormItem();
     const switchDisabled = index$2.useDisabled(vue.computed(() => props.loading));
+    const ns = index$3.useNamespace("switch");
     const switchSize = index$2.useSize();
     const isModelValue = vue.ref(props.modelValue !== false);
     const input = vue.ref();
     const core = vue.ref();
-    const prefix = "el-switch";
     const switchKls = vue.computed(() => [
-      prefix,
-      `${prefix}--${switchSize.value}`,
-      switchDisabled.value ? "is-disabled" : "",
-      checked.value ? "is-checked" : ""
+      ns.b(),
+      ns.m(switchSize.value),
+      ns.is("disabled", switchDisabled.value),
+      ns.is("checked", checked.value)
     ]);
     vue.watch(() => props.modelValue, () => {
       isModelValue.value = true;
@@ -114,6 +115,7 @@ var script = vue.defineComponent({
       input.value.checked = checked.value;
     });
     return {
+      ns,
       input,
       core,
       switchDisabled,

package/lib/components/switch/src/switch.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"switchKls\"\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 { defineComponent, computed, onMounted, ref, nextTick, watch } from 'vue'\nimport { isPromise } from '@vue/shared'\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-vue'\nimport {\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { useDisabled, useFormItem, useSize } from '@element-plus/hooks'\nimport { switchProps, switchEmits } from './switch'\n\nconst COMPONENT_NAME = 'ElSwitch'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: { ElIcon, Loading },\n\n  props: switchProps,\n  emits: switchEmits,\n\n  setup(props, { emit }) {\n    const { formItem } = useFormItem()\n    const switchDisabled = useDisabled(computed(() => props.loading))\n\n    const switchSize = useSize()\n    const isModelValue = ref(props.modelValue !== false)\n    const input = ref<HTMLInputElement>()\n    const core = ref<HTMLSpanElement>()\n\n    const prefix = 'el-switch'\n    const switchKls = computed(() => [\n      prefix,\n      `${prefix}--${switchSize.value}`,\n      switchDisabled.value ? 'is-disabled' : '',\n      checked.value ? 'is-checked' : '',\n    ])\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(() => {\n      return isModelValue.value ? props.modelValue : props.value\n    })\n\n    const checked = computed(() => actualValue.value === props.activeValue)\n\n    if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n      emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n      emit(CHANGE_EVENT, props.inactiveValue)\n      emit(INPUT_EVENT, 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        formItem?.validate?.('change')\n      }\n    })\n\n    const handleChange = (): void => {\n      const val = checked.value ? props.inactiveValue : props.activeValue\n      emit(UPDATE_MODEL_EVENT, val)\n      emit(CHANGE_EVENT, val)\n      emit(INPUT_EVENT, 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          COMPONENT_NAME,\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(COMPONENT_NAME, `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] as HTMLDivElement).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      switchKls,\n      handleChange,\n      switchValue,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["switchProps","switchEmits","ref","watch","computed","UPDATE_MODEL_EVENT","CHANGE_EVENT","INPUT_EVENT","nextTick","isPromise"],"mappings":";;;;;;;;;;;;;;;;AA2GA,oBAAoB,GAAG,WAAW;;AAElC,EAAE,IAAI,EAAE;;AAER,EAAE,KAAK,EAAEA,mBAAW;EAClB,OAAOC,mBAAW;EAClB,KAAK,CAAC,SAAS,IAAI,IAAI;;IAErB,MAAM;IACN,MAAM,UAAU;;IAEhB,MAAM,KAAK,GAAGC,SAAK;IACnB,MAAM,IAAI,GAAGA,UAAM;IACnB,MAAM,MAAM,GAAG,WAAW,CAAC;;MAEzB,MAAM;MACN,CAAC,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;MAChC,cAAc,CAAC,KAAK,GAAG;MACvB,OAAO,MAAM,GAAG,YAAY,GAAG;;IAEjCC,UAAM,WAAW,CAAC;MAChB,YAAY,MAAM,GAAG,IAAI,CAAC;MAC1B,CAAC;aACE,CAAC,MAAM,KAAK,CAAC,KAAK,EAAE,MAAM;MAC7B,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;MAC3B,CAAC;IACH;;KAEC,CAAC,CAAC;UACG,OAAO,GAAGC,YAAQ;SACnB,CAAC;UACA,CAACC,4BAAkB,EAAE;MACzB;;;IAGFF,SAAK;MACH,IAAI,EAAE,CAAC;MACP,MAAM;UACF,KAAK,CAAC,WAAW,IAAI;;;;QAIvB,GAAG,GAAG,QAAQ,IAAI,IAAI,GAAG,MAAM;OAChC;KACF;;MAEC,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC,aAAa,QAAQ,CAAC,WAAW,CAAC;;UAEhE,CAACG,sBAAY,EAAE,IAAI,CAAC;MACxB,IAAI,CAACC,qBAAW,EAAE,GAAG,CAAC,CAAC;MACvBC,YAAQ,CAAC,MAAM;QACb,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK;;;IAGvC,MAAM;MACJ,IAAI,cAAc,CAAC,KAAK;;MAExB,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;UAC3B,CAAC,YAAY,EAAE;;;OAGlB;YACK,YAAY,GAAG;MACrB;;;OAGC;MACD,IAAIC,gBAAS,CAAC,YAAY,GAAG;QAC3B,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM;UACvB,IAAI,MAAM,EAAE;YACV,YAAY,EAAE,CAAC;WAChB;SACF,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;;;;QAIhB,YAAY,EAAE;OACf;;UAEG,qBAAqB;MACzB,MAAM,QAAQ,GAAG;YACX,MAAM,GAAG;UACX;;;QAGF,MAAM,CAAC,KAAK,CAAC,WAAW,GAAG;;MAE7B,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC;;;MAG1C,IAAI,EAAE,EAAE,EAAE,CAAC;SACR,GAAG,CAAC,EAAE,GAAG;;iBAEL,CAAC,MAAM;;;;MAId,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO;;WAExB;;;;;eAKI;kBACG;;MAEZ,KAAK;;;;;;;"}
+{"version":3,"file":"switch.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/switch/src/switch.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"switchKls\"\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=\"ns.e('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        ns.e('label'),\n        ns.em('label', 'left'),\n        ns.is('active', !checked),\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=\"ns.e('core')\"\n      :style=\"{ width: (width || 40) + 'px' }\"\n    >\n      <div v-if=\"inlinePrompt\" :class=\"ns.e('inner')\">\n        <template v-if=\"activeIcon || inactiveIcon\">\n          <el-icon\n            v-if=\"activeIcon\"\n            :class=\"[ns.is('icon'), checked ? ns.is('show') : ns.is('hide')]\"\n          >\n            <component :is=\"activeIcon\" />\n          </el-icon>\n          <el-icon\n            v-if=\"inactiveIcon\"\n            :class=\"[ns.is('icon'), !checked ? ns.is('show') : ns.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=\"[ns.is('text'), checked ? ns.is('show') : ns.is('hide')]\"\n            :aria-hidden=\"!checked\"\n          >\n            {{ activeText.substr(0, 1) }}\n          </span>\n          <span\n            v-if=\"inactiveText\"\n            :class=\"[ns.is('text'), !checked ? ns.is('show') : ns.is('hide')]\"\n            :aria-hidden=\"checked\"\n          >\n            {{ inactiveText.substr(0, 1) }}\n          </span>\n        </template>\n      </div>\n      <div :class=\"ns.e('action')\">\n        <el-icon v-if=\"loading\" :class=\"ns.is('loading')\"><loading /></el-icon>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText)\"\n      :class=\"[\n        ns.e('label'),\n        ns.em('label', 'right'),\n        ns.is('active', checked),\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 { defineComponent, computed, onMounted, ref, nextTick, watch } from 'vue'\nimport { isPromise } from '@vue/shared'\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-vue'\nimport {\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport {\n  useDisabled,\n  useFormItem,\n  useNamespace,\n  useSize,\n} from '@element-plus/hooks'\nimport { switchProps, switchEmits } from './switch'\n\nconst COMPONENT_NAME = 'ElSwitch'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: { ElIcon, Loading },\n\n  props: switchProps,\n  emits: switchEmits,\n\n  setup(props, { emit }) {\n    const { formItem } = useFormItem()\n    const switchDisabled = useDisabled(computed(() => props.loading))\n    const ns = useNamespace('switch')\n\n    const switchSize = useSize()\n    const isModelValue = ref(props.modelValue !== false)\n    const input = ref<HTMLInputElement>()\n    const core = ref<HTMLSpanElement>()\n\n    const switchKls = computed(() => [\n      ns.b(),\n      ns.m(switchSize.value),\n      ns.is('disabled', switchDisabled.value),\n      ns.is('checked', checked.value),\n    ])\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(() => {\n      return isModelValue.value ? props.modelValue : props.value\n    })\n\n    const checked = computed(() => actualValue.value === props.activeValue)\n\n    if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n      emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n      emit(CHANGE_EVENT, props.inactiveValue)\n      emit(INPUT_EVENT, 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        formItem?.validate?.('change')\n      }\n    })\n\n    const handleChange = (): void => {\n      const val = checked.value ? props.inactiveValue : props.activeValue\n      emit(UPDATE_MODEL_EVENT, val)\n      emit(CHANGE_EVENT, val)\n      emit(INPUT_EVENT, 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          COMPONENT_NAME,\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(COMPONENT_NAME, `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] as HTMLDivElement).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      ns,\n      input,\n      core,\n      switchDisabled,\n      checked,\n      switchKls,\n      handleChange,\n      switchValue,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["switchProps","switchEmits","useNamespace","ref","computed","UPDATE_MODEL_EVENT","watch","CHANGE_EVENT","INPUT_EVENT","nextTick","isPromise"],"mappings":";;;;;;;;;;;;;;;;;AA4GA,oBAAoB,GAAG,WAAW;;AAElC,EAAE,IAAI,EAAE;;AAER,EAAE,KAAK,EAAEA,mBAAW;EAClB,OAAOC,mBAAW;EAClB,KAAK,CAAC,SAAS,IAAI,IAAI;;IAErB,MAAM;IACN,MAAM,EAAE,GAAGC;;IAEX,MAAM,YAAY,GAAGC;IACrB,MAAM,KAAK,GAAGA,OAAG,EAAE;IACnB,MAAM,IAAI,GAAGA,OAAG,EAAE,CAAC;IACnB,MAAM,SAAS,GAAGC,YAAQ,CAAC;;MAEzB,EAAE,EAAE,CAAC,UAAU,MAAM,CAAC;MACtB,EAAE,GAAG,CAAC,0BAA0B,CAAC,KAAK;MACtC,EAAE,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC;KAChC,CAAC,CAAC;;MAED,YAAY,MAAM,GAAG,IAAI,CAAC;MAC1B,CAAC;aACE,CAAC,MAAM,KAAK,CAAC,KAAK;MACrB,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;MAC3B,CAAC;IACH;;KAEC,CAAC,CAAC;UACG,OAAO,GAAGA,YAAQ;SACnB,CAAC;UACA,CAACC,4BAAkB,EAAE;MACzB;;;IAGFC,SAAK;MACH,IAAI,EAAE,CAAC;MACP,MAAM;UACF,KAAK,CAAC,WAAW,IAAI;;;;QAIvB,GAAG,GAAG,QAAQ,IAAI,IAAI,GAAG,MAAM;OAChC;KACF;;MAEC,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC,aAAa,QAAQ,CAAC,WAAW,CAAC;;UAEhE,CAACC,sBAAY,EAAE,IAAI,CAAC;MACxB,IAAI,CAACC,qBAAW,EAAE,GAAG,CAAC,CAAC;MACvBC,YAAQ,CAAC,MAAM;QACb,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK;;;IAGvC,MAAM;MACJ,IAAI,cAAc,CAAC,KAAK;;MAExB,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;UAC3B,CAAC,YAAY,EAAE;;;OAGlB;YACK,YAAY,GAAG;MACrB;;;OAGC;MACD,IAAIC,gBAAS,CAAC,YAAY,GAAG;QAC3B,YAAY,CAAC,IAAI,CAAC,CAAC,MAAM;UACvB,IAAI,MAAM,EAAE;YACV,YAAY,EAAE,CAAC;WAChB;SACF,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;;;;QAIhB,YAAY,EAAE;OACf;;UAEG,qBAAqB;MACzB,MAAM,QAAQ,GAAG;YACX,MAAM,GAAG;UACX;;;QAGF,MAAM,CAAC,KAAK,CAAC,WAAW,GAAG;;MAE7B,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC;;;MAG1C,IAAI,EAAE,EAAE,EAAE,CAAC;SACR,GAAG,CAAC,EAAE,GAAG;;iBAEL,CAAC,MAAM;;;;MAId,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO;;WAExB;;;;;aAKE;eACE;;MAET,WAAW;WACN;MACL;;;;;;"}

package/lib/components/switch/src/switch.vue_vue_type_template_id_538fbc85_lang.js

@@ -7,14 +7,9 @@ var vue = require('vue');
 const _hoisted_1 = ["aria-checked", "aria-disabled"];
 const _hoisted_2 = ["id", "name", "true-value", "false-value", "disabled"];
 const _hoisted_3 = ["aria-hidden"];
-const _hoisted_4 = {
-  key: 0,
-  class: "el-switch__inner"
-};
+const _hoisted_4 = ["aria-hidden"];
 const _hoisted_5 = ["aria-hidden"];
 const _hoisted_6 = ["aria-hidden"];
-const _hoisted_7 = { class: "el-switch__action" };
-const _hoisted_8 = ["aria-hidden"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_icon = vue.resolveComponent("el-icon");
   const _component_loading = vue.resolveComponent("loading");
@@ -28,7 +23,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createElementVNode("input", {
       id: _ctx.id,
       ref: "input",
-      class: "el-switch__input",
+      class: vue.normalizeClass(_ctx.ns.e("input")),
       type: "checkbox",
       name: _ctx.name,
       "true-value": _ctx.activeValue,
@@ -36,13 +31,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       disabled: _ctx.switchDisabled,
       onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
       onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => _ctx.switchValue && _ctx.switchValue(...args), ["enter"]))
-    }, null, 40, _hoisted_2),
+    }, null, 42, _hoisted_2),
     !_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 0,
       class: vue.normalizeClass([
-        "el-switch__label",
-        "el-switch__label--left",
-        !_ctx.checked ? "is-active" : ""
+        _ctx.ns.e("label"),
+        _ctx.ns.em("label", "left"),
+        _ctx.ns.is("active", !_ctx.checked)
       ])
     }, [
       _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -58,14 +53,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)) : vue.createCommentVNode("v-if", true),
     vue.createElementVNode("span", {
       ref: "core",
-      class: "el-switch__core",
+      class: vue.normalizeClass(_ctx.ns.e("core")),
       style: vue.normalizeStyle({ width: (_ctx.width || 40) + "px" })
     }, [
-      _ctx.inlinePrompt ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+      _ctx.inlinePrompt ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass(_ctx.ns.e("inner"))
+      }, [
         _ctx.activeIcon || _ctx.inactiveIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
           _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
             key: 0,
-            class: vue.normalizeClass(["is-icon", _ctx.checked ? "is-show" : "is-hide"])
+            class: vue.normalizeClass([_ctx.ns.is("icon"), _ctx.checked ? _ctx.ns.is("show") : _ctx.ns.is("hide")])
           }, {
             default: vue.withCtx(() => [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeIcon)))
@@ -74,7 +72,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
           _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
             key: 1,
-            class: vue.normalizeClass(["is-icon", !_ctx.checked ? "is-show" : "is-hide"])
+            class: vue.normalizeClass([_ctx.ns.is("icon"), !_ctx.checked ? _ctx.ns.is("show") : _ctx.ns.is("hide")])
           }, {
             default: vue.withCtx(() => [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveIcon)))
@@ -84,34 +82,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ], 64)) : _ctx.activeText || _ctx.inactiveIcon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
           _ctx.activeText ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
-            class: vue.normalizeClass(["is-text", _ctx.checked ? "is-show" : "is-hide"]),
+            class: vue.normalizeClass([_ctx.ns.is("text"), _ctx.checked ? _ctx.ns.is("show") : _ctx.ns.is("hide")]),
             "aria-hidden": !_ctx.checked
-          }, vue.toDisplayString(_ctx.activeText.substr(0, 1)), 11, _hoisted_5)) : vue.createCommentVNode("v-if", true),
+          }, vue.toDisplayString(_ctx.activeText.substr(0, 1)), 11, _hoisted_4)) : vue.createCommentVNode("v-if", true),
           _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 1,
-            class: vue.normalizeClass(["is-text", !_ctx.checked ? "is-show" : "is-hide"]),
+            class: vue.normalizeClass([_ctx.ns.is("text"), !_ctx.checked ? _ctx.ns.is("show") : _ctx.ns.is("hide")]),
             "aria-hidden": _ctx.checked
-          }, vue.toDisplayString(_ctx.inactiveText.substr(0, 1)), 11, _hoisted_6)) : vue.createCommentVNode("v-if", true)
+          }, vue.toDisplayString(_ctx.inactiveText.substr(0, 1)), 11, _hoisted_5)) : vue.createCommentVNode("v-if", true)
         ], 64)) : vue.createCommentVNode("v-if", true)
-      ])) : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("div", _hoisted_7, [
+      ], 2)) : vue.createCommentVNode("v-if", true),
+      vue.createElementVNode("div", {
+        class: vue.normalizeClass(_ctx.ns.e("action"))
+      }, [
         _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
           key: 0,
-          class: "is-loading"
+          class: vue.normalizeClass(_ctx.ns.is("loading"))
         }, {
           default: vue.withCtx(() => [
             vue.createVNode(_component_loading)
           ]),
           _: 1
-        })) : vue.createCommentVNode("v-if", true)
-      ])
-    ], 4),
+        }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
+      ], 2)
+    ], 6),
     !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 1,
       class: vue.normalizeClass([
-        "el-switch__label",
-        "el-switch__label--right",
-        _ctx.checked ? "is-active" : ""
+        _ctx.ns.e("label"),
+        _ctx.ns.em("label", "right"),
+        _ctx.ns.is("active", _ctx.checked)
       ])
     }, [
       _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 0 }, {
@@ -123,7 +123,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       !_ctx.activeIcon && _ctx.activeText ? (vue.openBlock(), vue.createElementBlock("span", {
         key: 1,
         "aria-hidden": !_ctx.checked
-      }, vue.toDisplayString(_ctx.activeText), 9, _hoisted_8)) : vue.createCommentVNode("v-if", true)
+      }, vue.toDisplayString(_ctx.activeText), 9, _hoisted_6)) : vue.createCommentVNode("v-if", true)
     ], 2)) : vue.createCommentVNode("v-if", true)
   ], 10, _hoisted_1);
 }

package/lib/components/switch/src/switch.vue_vue_type_template_id_538fbc85_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.vue_vue_type_template_id_538fbc85_lang.js","sources":["../../../../../../packages/components/switch/src/switch.vue?vue&type=template&id=538fbc85&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"switchKls\"\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 { defineComponent, computed, onMounted, ref, nextTick, watch } from 'vue'\nimport { isPromise } from '@vue/shared'\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-vue'\nimport {\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { useDisabled, useFormItem, useSize } from '@element-plus/hooks'\nimport { switchProps, switchEmits } from './switch'\n\nconst COMPONENT_NAME = 'ElSwitch'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: { ElIcon, Loading },\n\n  props: switchProps,\n  emits: switchEmits,\n\n  setup(props, { emit }) {\n    const { formItem } = useFormItem()\n    const switchDisabled = useDisabled(computed(() => props.loading))\n\n    const switchSize = useSize()\n    const isModelValue = ref(props.modelValue !== false)\n    const input = ref<HTMLInputElement>()\n    const core = ref<HTMLSpanElement>()\n\n    const prefix = 'el-switch'\n    const switchKls = computed(() => [\n      prefix,\n      `${prefix}--${switchSize.value}`,\n      switchDisabled.value ? 'is-disabled' : '',\n      checked.value ? 'is-checked' : '',\n    ])\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(() => {\n      return isModelValue.value ? props.modelValue : props.value\n    })\n\n    const checked = computed(() => actualValue.value === props.activeValue)\n\n    if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n      emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n      emit(CHANGE_EVENT, props.inactiveValue)\n      emit(INPUT_EVENT, 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        formItem?.validate?.('change')\n      }\n    })\n\n    const handleChange = (): void => {\n      const val = checked.value ? props.inactiveValue : props.activeValue\n      emit(UPDATE_MODEL_EVENT, val)\n      emit(CHANGE_EVENT, val)\n      emit(INPUT_EVENT, 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          COMPONENT_NAME,\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(COMPONENT_NAME, `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] as HTMLDivElement).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      switchKls,\n      handleChange,\n      switchValue,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_normalizeClass","_createBlock"],"mappings":";;;;;;;;;;;;EAsC+B;;;;;;;;;;;wBArC7B;IACG;IACD;;IAECA;;;;MAIE,IAAI;MACL;MACA;MACA;MACC,eAAU;MACV,8BAAuB;MACvB,iCAA0B;;6GAEN;MACpB;;;;;;;;;;;WAUc;;;;;;;;;;;;;;;;;WAMX;;;;;yBAIJ;;;mBAGYC,kBAAU;;;gCACXC;;;;;;;;;;;;;;;;;;;;iBAaY;;;;;;6CAKF;;;;;;0BAMf;;;;;;;;;SASW;;;cAAS;;;;;;;;;"}
+{"version":3,"file":"switch.vue_vue_type_template_id_538fbc85_lang.js","sources":["../../../../../../packages/components/switch/src/switch.vue?vue&type=template&id=538fbc85&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"switchKls\"\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=\"ns.e('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        ns.e('label'),\n        ns.em('label', 'left'),\n        ns.is('active', !checked),\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=\"ns.e('core')\"\n      :style=\"{ width: (width || 40) + 'px' }\"\n    >\n      <div v-if=\"inlinePrompt\" :class=\"ns.e('inner')\">\n        <template v-if=\"activeIcon || inactiveIcon\">\n          <el-icon\n            v-if=\"activeIcon\"\n            :class=\"[ns.is('icon'), checked ? ns.is('show') : ns.is('hide')]\"\n          >\n            <component :is=\"activeIcon\" />\n          </el-icon>\n          <el-icon\n            v-if=\"inactiveIcon\"\n            :class=\"[ns.is('icon'), !checked ? ns.is('show') : ns.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=\"[ns.is('text'), checked ? ns.is('show') : ns.is('hide')]\"\n            :aria-hidden=\"!checked\"\n          >\n            {{ activeText.substr(0, 1) }}\n          </span>\n          <span\n            v-if=\"inactiveText\"\n            :class=\"[ns.is('text'), !checked ? ns.is('show') : ns.is('hide')]\"\n            :aria-hidden=\"checked\"\n          >\n            {{ inactiveText.substr(0, 1) }}\n          </span>\n        </template>\n      </div>\n      <div :class=\"ns.e('action')\">\n        <el-icon v-if=\"loading\" :class=\"ns.is('loading')\"><loading /></el-icon>\n      </div>\n    </span>\n    <span\n      v-if=\"!inlinePrompt && (activeIcon || activeText)\"\n      :class=\"[\n        ns.e('label'),\n        ns.em('label', 'right'),\n        ns.is('active', checked),\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 { defineComponent, computed, onMounted, ref, nextTick, watch } from 'vue'\nimport { isPromise } from '@vue/shared'\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-vue'\nimport {\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport {\n  useDisabled,\n  useFormItem,\n  useNamespace,\n  useSize,\n} from '@element-plus/hooks'\nimport { switchProps, switchEmits } from './switch'\n\nconst COMPONENT_NAME = 'ElSwitch'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: { ElIcon, Loading },\n\n  props: switchProps,\n  emits: switchEmits,\n\n  setup(props, { emit }) {\n    const { formItem } = useFormItem()\n    const switchDisabled = useDisabled(computed(() => props.loading))\n    const ns = useNamespace('switch')\n\n    const switchSize = useSize()\n    const isModelValue = ref(props.modelValue !== false)\n    const input = ref<HTMLInputElement>()\n    const core = ref<HTMLSpanElement>()\n\n    const switchKls = computed(() => [\n      ns.b(),\n      ns.m(switchSize.value),\n      ns.is('disabled', switchDisabled.value),\n      ns.is('checked', checked.value),\n    ])\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(() => {\n      return isModelValue.value ? props.modelValue : props.value\n    })\n\n    const checked = computed(() => actualValue.value === props.activeValue)\n\n    if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {\n      emit(UPDATE_MODEL_EVENT, props.inactiveValue)\n      emit(CHANGE_EVENT, props.inactiveValue)\n      emit(INPUT_EVENT, 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        formItem?.validate?.('change')\n      }\n    })\n\n    const handleChange = (): void => {\n      const val = checked.value ? props.inactiveValue : props.activeValue\n      emit(UPDATE_MODEL_EVENT, val)\n      emit(CHANGE_EVENT, val)\n      emit(INPUT_EVENT, 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          COMPONENT_NAME,\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(COMPONENT_NAME, `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] as HTMLDivElement).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      ns,\n      input,\n      core,\n      switchDisabled,\n      checked,\n      switchKls,\n      handleChange,\n      switchValue,\n      focus,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_normalizeClass","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;;;;;;;;;;;;;;wBACE;IACG;IACD;;IAECA;;;;MAIE,IAAI;MACL;MACC,8BAAS;MACV;MACC,eAAU;MACV,8BAAuB;MACvB,iCAA0B;;6GAEN;MACpB;;;;;;;;;;;WAUc;;;;;;;;;gCACf;;;;;;;;;;;;;4BASA;;YAA0B;;;;mBAGdC,kBAAU;;;gCACVC;;;;;;;;;;;;;;;;;;;;uCAWyB;;;;;;;;;;;;;;;;;;;;;4CAiBtBC;;SACE;;;cAAU;;;;;;;;;"}