dddfa360b51424a52d6485ffa360b438d1d9aa0b193f7f75c778a692e257b8b8341090b536fdc652b07a535d6116d9ff13e80eb23016dde5c2efece40f0487 9.9 KB

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