ant-design-vue/es/vc-switch/Switch.js

An enterprise-class UI design language and Vue-based implementation

import { createVNode as _createVNode } from "vue";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import { switchPropTypes } from './PropTypes';
import BaseMixin from '../_util/BaseMixin';
import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
import Omit from 'omit.js';
import { defineComponent } from 'vue'; // function noop () {
// }

export default defineComponent({
  name: 'VcSwitch',
  mixins: [BaseMixin],
  inheritAttrs: false,
  props: _extends(_extends({}, switchPropTypes), {
    prefixCls: switchPropTypes.prefixCls.def('rc-switch')
  }),
  data: function data() {
    var checked = false;

    if (hasProp(this, 'checked')) {
      checked = !!this.checked;
    } else {
      checked = !!this.defaultChecked;
    }

    return {
      stateChecked: checked
    };
  },
  watch: {
    checked: function checked(val) {
      this.stateChecked = val;
    }
  },
  mounted: function mounted() {
    var _this = this;

    this.$nextTick(function () {
      var autofocus = _this.autofocus,
          disabled = _this.disabled;

      if (autofocus && !disabled) {
        _this.focus();
      }
    });
  },
  methods: {
    saveRef: function saveRef(c) {
      this.refSwitchNode = c;
    },
    setChecked: function setChecked(checked, e) {
      if (this.disabled) {
        return;
      }

      if (!hasProp(this, 'checked')) {
        this.stateChecked = checked;
      }

      this.__emit('change', checked, e);

      this.__emit('update:checked', checked);
    },
    handleClick: function handleClick(e) {
      var checked = !this.stateChecked;
      this.setChecked(checked, e);

      this.__emit('click', checked, e);
    },
    handleKeyDown: function handleKeyDown(e) {
      if (e.keyCode === 37) {
        // Left
        this.setChecked(false, e);
      } else if (e.keyCode === 39) {
        // Right
        this.setChecked(true, e);
      }
    },
    handleMouseUp: function handleMouseUp(e) {
      var _a;

      (_a = this.refSwitchNode) === null || _a === void 0 ? void 0 : _a.blur();

      this.__emit('mouseup', e);
    },
    focus: function focus() {
      var _a;

      (_a = this.refSwitchNode) === null || _a === void 0 ? void 0 : _a.focus();
    },
    blur: function blur() {
      var _a;

      (_a = this.refSwitchNode) === null || _a === void 0 ? void 0 : _a.blur();
    }
  },
  render: function render() {
    var _switchClassName;

    var _a = getOptionProps(this),
        prefixCls = _a.prefixCls,
        disabled = _a.disabled,
        loadingIcon = _a.loadingIcon,
        restProps = __rest(_a, ["prefixCls", "disabled", "loadingIcon"]);

    var checked = this.stateChecked;
    var $attrs = this.$attrs;
    var switchClassName = (_switchClassName = {}, _defineProperty(_switchClassName, $attrs.class, $attrs.class), _defineProperty(_switchClassName, prefixCls, true), _defineProperty(_switchClassName, "".concat(prefixCls, "-checked"), checked), _defineProperty(_switchClassName, "".concat(prefixCls, "-disabled"), disabled), _switchClassName);

    var spanProps = _extends(_extends(_extends({}, Omit(restProps, ['checkedChildren', 'unCheckedChildren', 'checked', 'autofocus', 'defaultChecked'])), $attrs), {
      onKeydown: this.handleKeyDown,
      onClick: this.handleClick,
      onMouseup: this.handleMouseUp,
      type: 'button',
      role: 'switch',
      'aria-checked': checked,
      disabled: disabled,
      class: switchClassName,
      ref: this.saveRef
    });

    return _createVNode("button", spanProps, [loadingIcon, _createVNode("span", {
      "class": "".concat(prefixCls, "-inner")
    }, [checked ? getComponent(this, 'checkedChildren') : getComponent(this, 'unCheckedChildren')])]);
  }
});