| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232 |
- import { defineComponent, computed, ref, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, withModifiers, createElementVNode, withKeys, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, toDisplayString, normalizeStyle, createVNode, renderSlot, nextTick } from 'vue';
- import { ElIcon } from '../../icon/index.mjs';
- import { Loading } from '@element-plus/icons-vue';
- import { switchProps, switchEmits } from './switch.mjs';
- import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
- import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
- import { useFormSize, useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
- import { addUnit } from '../../../utils/dom/style.mjs';
- import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../constants/event.mjs';
- import { debugWarn, throwError } from '../../../utils/error.mjs';
- import { isPromise } from '@vue/shared';
- import { isBoolean } from '../../../utils/types.mjs';
- const COMPONENT_NAME = "ElSwitch";
- const __default__ = defineComponent({
- name: COMPONENT_NAME
- });
- const _sfc_main = /* @__PURE__ */ defineComponent({
- ...__default__,
- props: switchProps,
- emits: switchEmits,
- setup(__props, { expose, emit }) {
- const props = __props;
- const { formItem } = useFormItem();
- const switchSize = useFormSize();
- const ns = useNamespace("switch");
- const { inputId } = useFormItemInputId(props, {
- formItemContext: formItem
- });
- const switchDisabled = useFormDisabled(computed(() => props.loading));
- const isControlled = ref(props.modelValue !== false);
- const input = ref();
- const core = ref();
- const switchKls = computed(() => [
- ns.b(),
- ns.m(switchSize.value),
- ns.is("disabled", switchDisabled.value),
- ns.is("checked", checked.value)
- ]);
- const labelLeftKls = computed(() => [
- ns.e("label"),
- ns.em("label", "left"),
- ns.is("active", !checked.value)
- ]);
- const labelRightKls = computed(() => [
- ns.e("label"),
- ns.em("label", "right"),
- ns.is("active", checked.value)
- ]);
- const coreStyle = computed(() => ({
- width: addUnit(props.width)
- }));
- watch(() => props.modelValue, () => {
- isControlled.value = true;
- });
- const actualValue = computed(() => {
- return isControlled.value ? props.modelValue : false;
- });
- const checked = computed(() => actualValue.value === props.activeValue);
- if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
- emit(UPDATE_MODEL_EVENT, props.inactiveValue);
- emit(CHANGE_EVENT, props.inactiveValue);
- emit(INPUT_EVENT, props.inactiveValue);
- }
- watch(checked, (val) => {
- var _a;
- input.value.checked = val;
- if (props.validateEvent) {
- (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
- }
- });
- const handleChange = () => {
- const val = checked.value ? props.inactiveValue : props.activeValue;
- emit(UPDATE_MODEL_EVENT, val);
- emit(CHANGE_EVENT, val);
- emit(INPUT_EVENT, val);
- nextTick(() => {
- input.value.checked = checked.value;
- });
- };
- const switchValue = () => {
- if (switchDisabled.value)
- return;
- const { beforeChange } = props;
- if (!beforeChange) {
- handleChange();
- return;
- }
- const shouldChange = beforeChange();
- const isPromiseOrBool = [
- isPromise(shouldChange),
- isBoolean(shouldChange)
- ].includes(true);
- if (!isPromiseOrBool) {
- throwError(COMPONENT_NAME, "beforeChange must return type `Promise<boolean>` or `boolean`");
- }
- if (isPromise(shouldChange)) {
- shouldChange.then((result) => {
- if (result) {
- handleChange();
- }
- }).catch((e) => {
- });
- } else if (shouldChange) {
- handleChange();
- }
- };
- const focus = () => {
- var _a, _b;
- (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
- };
- onMounted(() => {
- input.value.checked = checked.value;
- });
- expose({
- focus,
- checked
- });
- return (_ctx, _cache) => {
- return openBlock(), createElementBlock("div", {
- class: normalizeClass(unref(switchKls)),
- onClick: withModifiers(switchValue, ["prevent"])
- }, [
- createElementVNode("input", {
- id: unref(inputId),
- ref_key: "input",
- ref: input,
- class: normalizeClass(unref(ns).e("input")),
- type: "checkbox",
- role: "switch",
- "aria-checked": unref(checked),
- "aria-disabled": unref(switchDisabled),
- "aria-label": _ctx.ariaLabel,
- name: _ctx.name,
- "true-value": _ctx.activeValue,
- "false-value": _ctx.inactiveValue,
- disabled: unref(switchDisabled),
- tabindex: _ctx.tabindex,
- onChange: handleChange,
- onKeydown: withKeys(switchValue, ["enter"])
- }, null, 42, ["id", "aria-checked", "aria-disabled", "aria-label", "name", "true-value", "false-value", "disabled", "tabindex", "onKeydown"]),
- !_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (openBlock(), createElementBlock("span", {
- key: 0,
- class: normalizeClass(unref(labelLeftKls))
- }, [
- _ctx.inactiveIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveIcon)))
- ]),
- _: 1
- })) : createCommentVNode("v-if", true),
- !_ctx.inactiveIcon && _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
- key: 1,
- "aria-hidden": unref(checked)
- }, toDisplayString(_ctx.inactiveText), 9, ["aria-hidden"])) : createCommentVNode("v-if", true)
- ], 2)) : createCommentVNode("v-if", true),
- createElementVNode("span", {
- ref_key: "core",
- ref: core,
- class: normalizeClass(unref(ns).e("core")),
- style: normalizeStyle(unref(coreStyle))
- }, [
- _ctx.inlinePrompt ? (openBlock(), createElementBlock("div", {
- key: 0,
- class: normalizeClass(unref(ns).e("inner"))
- }, [
- _ctx.activeIcon || _ctx.inactiveIcon ? (openBlock(), createBlock(unref(ElIcon), {
- key: 0,
- class: normalizeClass(unref(ns).is("icon"))
- }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(unref(checked) ? _ctx.activeIcon : _ctx.inactiveIcon)))
- ]),
- _: 1
- }, 8, ["class"])) : _ctx.activeText || _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
- key: 1,
- class: normalizeClass(unref(ns).is("text")),
- "aria-hidden": !unref(checked)
- }, toDisplayString(unref(checked) ? _ctx.activeText : _ctx.inactiveText), 11, ["aria-hidden"])) : createCommentVNode("v-if", true)
- ], 2)) : createCommentVNode("v-if", true),
- createElementVNode("div", {
- class: normalizeClass(unref(ns).e("action"))
- }, [
- _ctx.loading ? (openBlock(), createBlock(unref(ElIcon), {
- key: 0,
- class: normalizeClass(unref(ns).is("loading"))
- }, {
- default: withCtx(() => [
- createVNode(unref(Loading))
- ]),
- _: 1
- }, 8, ["class"])) : unref(checked) ? renderSlot(_ctx.$slots, "active-action", { key: 1 }, () => [
- _ctx.activeActionIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.activeActionIcon)))
- ]),
- _: 1
- })) : createCommentVNode("v-if", true)
- ]) : !unref(checked) ? renderSlot(_ctx.$slots, "inactive-action", { key: 2 }, () => [
- _ctx.inactiveActionIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveActionIcon)))
- ]),
- _: 1
- })) : createCommentVNode("v-if", true)
- ]) : createCommentVNode("v-if", true)
- ], 2)
- ], 6),
- !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (openBlock(), createElementBlock("span", {
- key: 1,
- class: normalizeClass(unref(labelRightKls))
- }, [
- _ctx.activeIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.activeIcon)))
- ]),
- _: 1
- })) : createCommentVNode("v-if", true),
- !_ctx.activeIcon && _ctx.activeText ? (openBlock(), createElementBlock("span", {
- key: 1,
- "aria-hidden": !unref(checked)
- }, toDisplayString(_ctx.activeText), 9, ["aria-hidden"])) : createCommentVNode("v-if", true)
- ], 2)) : createCommentVNode("v-if", true)
- ], 10, ["onClick"]);
- };
- }
- });
- var Switch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "switch.vue"]]);
- export { Switch as default };
- //# sourceMappingURL=switch2.mjs.map
|