28390429eb2225ed0ebd7460019732f26b889d49eca7f8fbcc91b84058966db771d4caf8f4c57f6dd026d0c0ab81c2131fb81e89ee756e71db6c2b71f45d31 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. import { defineComponent, computed, ref, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, withModifiers, createElementVNode, withKeys, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, toDisplayString, normalizeStyle, createVNode, renderSlot, nextTick } from 'vue';
  2. import { ElIcon } from '../../icon/index.mjs';
  3. import { Loading } from '@element-plus/icons-vue';
  4. import { switchProps, switchEmits } from './switch.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
  7. import { useFormSize, useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
  8. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  9. import { addUnit } from '../../../utils/dom/style.mjs';
  10. import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../constants/event.mjs';
  11. import { debugWarn, throwError } from '../../../utils/error.mjs';
  12. import { isPromise } from '@vue/shared';
  13. import { isBoolean } from '../../../utils/types.mjs';
  14. const COMPONENT_NAME = "ElSwitch";
  15. const __default__ = defineComponent({
  16. name: COMPONENT_NAME
  17. });
  18. const _sfc_main = /* @__PURE__ */ defineComponent({
  19. ...__default__,
  20. props: switchProps,
  21. emits: switchEmits,
  22. setup(__props, { expose, emit }) {
  23. const props = __props;
  24. const { formItem } = useFormItem();
  25. const switchSize = useFormSize();
  26. const ns = useNamespace("switch");
  27. const { inputId } = useFormItemInputId(props, {
  28. formItemContext: formItem
  29. });
  30. const switchDisabled = useFormDisabled(computed(() => props.loading));
  31. const isControlled = ref(props.modelValue !== false);
  32. const input = ref();
  33. const core = ref();
  34. const switchKls = computed(() => [
  35. ns.b(),
  36. ns.m(switchSize.value),
  37. ns.is("disabled", switchDisabled.value),
  38. ns.is("checked", checked.value)
  39. ]);
  40. const labelLeftKls = computed(() => [
  41. ns.e("label"),
  42. ns.em("label", "left"),
  43. ns.is("active", !checked.value)
  44. ]);
  45. const labelRightKls = computed(() => [
  46. ns.e("label"),
  47. ns.em("label", "right"),
  48. ns.is("active", checked.value)
  49. ]);
  50. const coreStyle = computed(() => ({
  51. width: addUnit(props.width)
  52. }));
  53. watch(() => props.modelValue, () => {
  54. isControlled.value = true;
  55. });
  56. const actualValue = computed(() => {
  57. return isControlled.value ? props.modelValue : false;
  58. });
  59. const checked = computed(() => actualValue.value === props.activeValue);
  60. if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
  61. emit(UPDATE_MODEL_EVENT, props.inactiveValue);
  62. emit(CHANGE_EVENT, props.inactiveValue);
  63. emit(INPUT_EVENT, props.inactiveValue);
  64. }
  65. watch(checked, (val) => {
  66. var _a;
  67. input.value.checked = val;
  68. if (props.validateEvent) {
  69. (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => debugWarn());
  70. }
  71. });
  72. const handleChange = () => {
  73. const val = checked.value ? props.inactiveValue : props.activeValue;
  74. emit(UPDATE_MODEL_EVENT, val);
  75. emit(CHANGE_EVENT, val);
  76. emit(INPUT_EVENT, val);
  77. nextTick(() => {
  78. input.value.checked = checked.value;
  79. });
  80. };
  81. const switchValue = () => {
  82. if (switchDisabled.value)
  83. return;
  84. const { beforeChange } = props;
  85. if (!beforeChange) {
  86. handleChange();
  87. return;
  88. }
  89. const shouldChange = beforeChange();
  90. const isPromiseOrBool = [
  91. isPromise(shouldChange),
  92. isBoolean(shouldChange)
  93. ].includes(true);
  94. if (!isPromiseOrBool) {
  95. throwError(COMPONENT_NAME, "beforeChange must return type `Promise<boolean>` or `boolean`");
  96. }
  97. if (isPromise(shouldChange)) {
  98. shouldChange.then((result) => {
  99. if (result) {
  100. handleChange();
  101. }
  102. }).catch((e) => {
  103. });
  104. } else if (shouldChange) {
  105. handleChange();
  106. }
  107. };
  108. const focus = () => {
  109. var _a, _b;
  110. (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
  111. };
  112. onMounted(() => {
  113. input.value.checked = checked.value;
  114. });
  115. expose({
  116. focus,
  117. checked
  118. });
  119. return (_ctx, _cache) => {
  120. return openBlock(), createElementBlock("div", {
  121. class: normalizeClass(unref(switchKls)),
  122. onClick: withModifiers(switchValue, ["prevent"])
  123. }, [
  124. createElementVNode("input", {
  125. id: unref(inputId),
  126. ref_key: "input",
  127. ref: input,
  128. class: normalizeClass(unref(ns).e("input")),
  129. type: "checkbox",
  130. role: "switch",
  131. "aria-checked": unref(checked),
  132. "aria-disabled": unref(switchDisabled),
  133. "aria-label": _ctx.ariaLabel,
  134. name: _ctx.name,
  135. "true-value": _ctx.activeValue,
  136. "false-value": _ctx.inactiveValue,
  137. disabled: unref(switchDisabled),
  138. tabindex: _ctx.tabindex,
  139. onChange: handleChange,
  140. onKeydown: withKeys(switchValue, ["enter"])
  141. }, null, 42, ["id", "aria-checked", "aria-disabled", "aria-label", "name", "true-value", "false-value", "disabled", "tabindex", "onKeydown"]),
  142. !_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText) ? (openBlock(), createElementBlock("span", {
  143. key: 0,
  144. class: normalizeClass(unref(labelLeftKls))
  145. }, [
  146. _ctx.inactiveIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
  147. default: withCtx(() => [
  148. (openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveIcon)))
  149. ]),
  150. _: 1
  151. })) : createCommentVNode("v-if", true),
  152. !_ctx.inactiveIcon && _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
  153. key: 1,
  154. "aria-hidden": unref(checked)
  155. }, toDisplayString(_ctx.inactiveText), 9, ["aria-hidden"])) : createCommentVNode("v-if", true)
  156. ], 2)) : createCommentVNode("v-if", true),
  157. createElementVNode("span", {
  158. ref_key: "core",
  159. ref: core,
  160. class: normalizeClass(unref(ns).e("core")),
  161. style: normalizeStyle(unref(coreStyle))
  162. }, [
  163. _ctx.inlinePrompt ? (openBlock(), createElementBlock("div", {
  164. key: 0,
  165. class: normalizeClass(unref(ns).e("inner"))
  166. }, [
  167. _ctx.activeIcon || _ctx.inactiveIcon ? (openBlock(), createBlock(unref(ElIcon), {
  168. key: 0,
  169. class: normalizeClass(unref(ns).is("icon"))
  170. }, {
  171. default: withCtx(() => [
  172. (openBlock(), createBlock(resolveDynamicComponent(unref(checked) ? _ctx.activeIcon : _ctx.inactiveIcon)))
  173. ]),
  174. _: 1
  175. }, 8, ["class"])) : _ctx.activeText || _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
  176. key: 1,
  177. class: normalizeClass(unref(ns).is("text")),
  178. "aria-hidden": !unref(checked)
  179. }, toDisplayString(unref(checked) ? _ctx.activeText : _ctx.inactiveText), 11, ["aria-hidden"])) : createCommentVNode("v-if", true)
  180. ], 2)) : createCommentVNode("v-if", true),
  181. createElementVNode("div", {
  182. class: normalizeClass(unref(ns).e("action"))
  183. }, [
  184. _ctx.loading ? (openBlock(), createBlock(unref(ElIcon), {
  185. key: 0,
  186. class: normalizeClass(unref(ns).is("loading"))
  187. }, {
  188. default: withCtx(() => [
  189. createVNode(unref(Loading))
  190. ]),
  191. _: 1
  192. }, 8, ["class"])) : unref(checked) ? renderSlot(_ctx.$slots, "active-action", { key: 1 }, () => [
  193. _ctx.activeActionIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
  194. default: withCtx(() => [
  195. (openBlock(), createBlock(resolveDynamicComponent(_ctx.activeActionIcon)))
  196. ]),
  197. _: 1
  198. })) : createCommentVNode("v-if", true)
  199. ]) : !unref(checked) ? renderSlot(_ctx.$slots, "inactive-action", { key: 2 }, () => [
  200. _ctx.inactiveActionIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
  201. default: withCtx(() => [
  202. (openBlock(), createBlock(resolveDynamicComponent(_ctx.inactiveActionIcon)))
  203. ]),
  204. _: 1
  205. })) : createCommentVNode("v-if", true)
  206. ]) : createCommentVNode("v-if", true)
  207. ], 2)
  208. ], 6),
  209. !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText) ? (openBlock(), createElementBlock("span", {
  210. key: 1,
  211. class: normalizeClass(unref(labelRightKls))
  212. }, [
  213. _ctx.activeIcon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
  214. default: withCtx(() => [
  215. (openBlock(), createBlock(resolveDynamicComponent(_ctx.activeIcon)))
  216. ]),
  217. _: 1
  218. })) : createCommentVNode("v-if", true),
  219. !_ctx.activeIcon && _ctx.activeText ? (openBlock(), createElementBlock("span", {
  220. key: 1,
  221. "aria-hidden": !unref(checked)
  222. }, toDisplayString(_ctx.activeText), 9, ["aria-hidden"])) : createCommentVNode("v-if", true)
  223. ], 2)) : createCommentVNode("v-if", true)
  224. ], 10, ["onClick"]);
  225. };
  226. }
  227. });
  228. var Switch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "switch.vue"]]);
  229. export { Switch as default };
  230. //# sourceMappingURL=switch2.mjs.map