switch.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  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('./switch2.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 _hoisted_1 = ["id", "aria-checked", "aria-disabled", "aria-label", "name", "true-value", "false-value", "disabled", "tabindex"];
  17. const _hoisted_2 = ["aria-hidden"];
  18. const _hoisted_3 = { key: 1 };
  19. const _hoisted_4 = { key: 1 };
  20. const _hoisted_5 = ["aria-hidden"];
  21. const COMPONENT_NAME = "ElSwitch";
  22. const _sfc_main = vue.defineComponent({
  23. ...{
  24. name: COMPONENT_NAME
  25. },
  26. __name: "switch",
  27. props: _switch.switchProps,
  28. emits: _switch.switchEmits,
  29. setup(__props, { expose: __expose, emit: __emit }) {
  30. const props = __props;
  31. const emit = __emit;
  32. const { formItem } = useFormItem.useFormItem();
  33. const switchSize = useFormCommonProps.useFormSize();
  34. const ns = index.useNamespace("switch");
  35. const { inputId } = useFormItem.useFormItemInputId(props, {
  36. formItemContext: formItem
  37. });
  38. const switchDisabled = useFormCommonProps.useFormDisabled(
  39. vue.computed(() => {
  40. if (props.loading) {
  41. return true;
  42. }
  43. return void 0;
  44. })
  45. );
  46. const isControlled = vue.ref(props.modelValue !== false);
  47. const input = vue.shallowRef();
  48. const switchKls = vue.computed(() => [
  49. ns.b(),
  50. ns.m(switchSize.value),
  51. ns.is("disabled", switchDisabled.value),
  52. ns.is("checked", checked.value)
  53. ]);
  54. const labelLeftKls = vue.computed(() => [
  55. ns.e("label"),
  56. ns.em("label", "left"),
  57. ns.is("active", !checked.value)
  58. ]);
  59. const labelRightKls = vue.computed(() => [
  60. ns.e("label"),
  61. ns.em("label", "right"),
  62. ns.is("active", checked.value)
  63. ]);
  64. const coreStyle = vue.computed(() => ({
  65. width: style.addUnit(props.width)
  66. }));
  67. vue.watch(
  68. () => props.modelValue,
  69. () => {
  70. isControlled.value = true;
  71. }
  72. );
  73. const actualValue = vue.computed(() => {
  74. return isControlled.value ? props.modelValue : false;
  75. });
  76. const checked = vue.computed(() => actualValue.value === props.activeValue);
  77. if (![props.activeValue, props.inactiveValue].includes(actualValue.value)) {
  78. emit(event.UPDATE_MODEL_EVENT, props.inactiveValue);
  79. emit(event.CHANGE_EVENT, props.inactiveValue);
  80. emit(event.INPUT_EVENT, props.inactiveValue);
  81. }
  82. vue.watch(checked, (val) => {
  83. var _a;
  84. input.value.checked = val;
  85. if (props.validateEvent) {
  86. (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn(err));
  87. }
  88. });
  89. const handleChange = () => {
  90. const val = checked.value ? props.inactiveValue : props.activeValue;
  91. emit(event.UPDATE_MODEL_EVENT, val);
  92. emit(event.CHANGE_EVENT, val);
  93. emit(event.INPUT_EVENT, val);
  94. vue.nextTick(() => {
  95. input.value.checked = checked.value;
  96. });
  97. };
  98. const switchValue = () => {
  99. if (switchDisabled.value)
  100. return;
  101. const { beforeChange } = props;
  102. if (!beforeChange) {
  103. handleChange();
  104. return;
  105. }
  106. const shouldChange = beforeChange();
  107. const isPromiseOrBool = [
  108. shared.isPromise(shouldChange),
  109. types.isBoolean(shouldChange)
  110. ].includes(true);
  111. if (!isPromiseOrBool) {
  112. error.throwError(
  113. COMPONENT_NAME,
  114. "beforeChange must return type `Promise<boolean>` or `boolean`"
  115. );
  116. }
  117. if (shared.isPromise(shouldChange)) {
  118. shouldChange.then((result) => {
  119. if (result) {
  120. handleChange();
  121. }
  122. }).catch((e) => {
  123. error.debugWarn(COMPONENT_NAME, `some error occurred: ${e}`);
  124. });
  125. } else if (shouldChange) {
  126. handleChange();
  127. }
  128. };
  129. const focus = () => {
  130. var _a, _b;
  131. (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
  132. };
  133. vue.onMounted(() => {
  134. input.value.checked = checked.value;
  135. });
  136. __expose({
  137. focus,
  138. checked
  139. });
  140. return (_ctx, _cache) => {
  141. return vue.openBlock(), vue.createElementBlock(
  142. "div",
  143. {
  144. class: vue.normalizeClass(switchKls.value),
  145. onClick: vue.withModifiers(switchValue, ["prevent"])
  146. },
  147. [
  148. vue.createElementVNode("input", {
  149. id: vue.unref(inputId),
  150. ref_key: "input",
  151. ref: input,
  152. class: vue.normalizeClass(vue.unref(ns).e("input")),
  153. type: "checkbox",
  154. role: "switch",
  155. "aria-checked": checked.value,
  156. "aria-disabled": vue.unref(switchDisabled),
  157. "aria-label": _ctx.ariaLabel,
  158. name: _ctx.name,
  159. "true-value": _ctx.activeValue,
  160. "false-value": _ctx.inactiveValue,
  161. disabled: vue.unref(switchDisabled),
  162. tabindex: _ctx.tabindex,
  163. onChange: handleChange,
  164. onKeydown: vue.withKeys(switchValue, ["enter"])
  165. }, null, 42, _hoisted_1),
  166. !_ctx.inlinePrompt && (_ctx.inactiveIcon || _ctx.inactiveText || _ctx.$slots.inactive) ? (vue.openBlock(), vue.createElementBlock(
  167. "span",
  168. {
  169. key: 0,
  170. class: vue.normalizeClass(labelLeftKls.value)
  171. },
  172. [
  173. vue.renderSlot(_ctx.$slots, "inactive", {}, () => [
  174. _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 0 }, {
  175. default: vue.withCtx(() => [
  176. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveIcon)))
  177. ]),
  178. _: 1
  179. })) : vue.createCommentVNode("v-if", true),
  180. !_ctx.inactiveIcon && _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", {
  181. key: 1,
  182. "aria-hidden": checked.value
  183. }, vue.toDisplayString(_ctx.inactiveText), 9, _hoisted_2)) : vue.createCommentVNode("v-if", true)
  184. ])
  185. ],
  186. 2
  187. )) : vue.createCommentVNode("v-if", true),
  188. vue.createElementVNode(
  189. "span",
  190. {
  191. class: vue.normalizeClass(vue.unref(ns).e("core")),
  192. style: vue.normalizeStyle(coreStyle.value)
  193. },
  194. [
  195. _ctx.inlinePrompt ? (vue.openBlock(), vue.createElementBlock(
  196. "div",
  197. {
  198. key: 0,
  199. class: vue.normalizeClass(vue.unref(ns).e("inner"))
  200. },
  201. [
  202. !checked.value ? (vue.openBlock(), vue.createElementBlock(
  203. "div",
  204. {
  205. key: 0,
  206. class: vue.normalizeClass(vue.unref(ns).e("inner-wrapper"))
  207. },
  208. [
  209. vue.renderSlot(_ctx.$slots, "inactive", {}, () => [
  210. _ctx.inactiveIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 0 }, {
  211. default: vue.withCtx(() => [
  212. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveIcon)))
  213. ]),
  214. _: 1
  215. })) : vue.createCommentVNode("v-if", true),
  216. !_ctx.inactiveIcon && _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock(
  217. "span",
  218. _hoisted_3,
  219. vue.toDisplayString(_ctx.inactiveText),
  220. 1
  221. )) : vue.createCommentVNode("v-if", true)
  222. ])
  223. ],
  224. 2
  225. )) : (vue.openBlock(), vue.createElementBlock(
  226. "div",
  227. {
  228. key: 1,
  229. class: vue.normalizeClass(vue.unref(ns).e("inner-wrapper"))
  230. },
  231. [
  232. vue.renderSlot(_ctx.$slots, "active", {}, () => [
  233. _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 0 }, {
  234. default: vue.withCtx(() => [
  235. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeIcon)))
  236. ]),
  237. _: 1
  238. })) : vue.createCommentVNode("v-if", true),
  239. !_ctx.activeIcon && _ctx.activeText ? (vue.openBlock(), vue.createElementBlock(
  240. "span",
  241. _hoisted_4,
  242. vue.toDisplayString(_ctx.activeText),
  243. 1
  244. )) : vue.createCommentVNode("v-if", true)
  245. ])
  246. ],
  247. 2
  248. ))
  249. ],
  250. 2
  251. )) : vue.createCommentVNode("v-if", true),
  252. vue.createElementVNode(
  253. "div",
  254. {
  255. class: vue.normalizeClass(vue.unref(ns).e("action"))
  256. },
  257. [
  258. _ctx.loading ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), {
  259. key: 0,
  260. class: vue.normalizeClass(vue.unref(ns).is("loading"))
  261. }, {
  262. default: vue.withCtx(() => [
  263. vue.createVNode(vue.unref(iconsVue.Loading))
  264. ]),
  265. _: 1
  266. }, 8, ["class"])) : checked.value ? vue.renderSlot(_ctx.$slots, "active-action", { key: 1 }, () => [
  267. _ctx.activeActionIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 0 }, {
  268. default: vue.withCtx(() => [
  269. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeActionIcon)))
  270. ]),
  271. _: 1
  272. })) : vue.createCommentVNode("v-if", true)
  273. ]) : !checked.value ? vue.renderSlot(_ctx.$slots, "inactive-action", { key: 2 }, () => [
  274. _ctx.inactiveActionIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 0 }, {
  275. default: vue.withCtx(() => [
  276. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inactiveActionIcon)))
  277. ]),
  278. _: 1
  279. })) : vue.createCommentVNode("v-if", true)
  280. ]) : vue.createCommentVNode("v-if", true)
  281. ],
  282. 2
  283. )
  284. ],
  285. 6
  286. ),
  287. !_ctx.inlinePrompt && (_ctx.activeIcon || _ctx.activeText || _ctx.$slots.active) ? (vue.openBlock(), vue.createElementBlock(
  288. "span",
  289. {
  290. key: 1,
  291. class: vue.normalizeClass(labelRightKls.value)
  292. },
  293. [
  294. vue.renderSlot(_ctx.$slots, "active", {}, () => [
  295. _ctx.activeIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 0 }, {
  296. default: vue.withCtx(() => [
  297. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.activeIcon)))
  298. ]),
  299. _: 1
  300. })) : vue.createCommentVNode("v-if", true),
  301. !_ctx.activeIcon && _ctx.activeText ? (vue.openBlock(), vue.createElementBlock("span", {
  302. key: 1,
  303. "aria-hidden": !checked.value
  304. }, vue.toDisplayString(_ctx.activeText), 9, _hoisted_5)) : vue.createCommentVNode("v-if", true)
  305. ])
  306. ],
  307. 2
  308. )) : vue.createCommentVNode("v-if", true)
  309. ],
  310. 2
  311. );
  312. };
  313. }
  314. });
  315. var Switch = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/switch/src/switch.vue"]]);
  316. exports["default"] = Switch;
  317. //# sourceMappingURL=switch.js.map