switch2.js 10 KB

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