@fe6/water-pro/es/checkbox-cascader/src/OneCheckbox.js

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

import { createVNode as _createVNode } from "vue";
import { defineComponent } from 'vue';
import useConfigInject from '../../_util/hooks/useConfigInject';
import PropTypes from '../../_util/vue-types';
import Checkbox from '../../checkbox';
import BasicArrow from '../../basic-arrow';
import Typography from '../../typography';
export default defineComponent({
  inheritAttrs: false,
  props: {
    prefixCls: PropTypes.string,
    text: PropTypes.string,
    preWidth: PropTypes.number.def(160),
    showArrow: PropTypes.bool,
    checked: PropTypes.bool,
    indeterminate: PropTypes.bool
  },
  emits: ['change', 'click'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;

    var _useConfigInject = useConfigInject('checkbox-cascader', props),
        prefixClsNew = _useConfigInject.prefixCls;

    var changeCheckbox = function changeCheckbox(_ref2) {
      var target = _ref2.target;
      emit('change', target === null || target === void 0 ? void 0 : target.checked);
    };

    var openClick = function openClick() {
      emit('click');
    };

    return {
      prefixClsNew: prefixClsNew,
      changeCheckbox: changeCheckbox,
      openClick: openClick
    };
  },
  render: function render() {
    var theArrow = null;

    if (this.showArrow) {
      theArrow = _createVNode(BasicArrow, {
        "class": "".concat(this.prefixClsNew, "-one-arrow")
      }, null);
    }

    return _createVNode("div", {
      "class": "".concat(this.prefixClsNew, "-one"),
      "style": {
        width: "".concat(this.preWidth, "px")
      }
    }, [_createVNode(Checkbox, {
      "checked": this.checked,
      "indeterminate": this.indeterminate,
      "onChange": this.changeCheckbox
    }, null), _createVNode(Typography.Text, {
      "class": "".concat(this.prefixClsNew, "-one-label"),
      "style": {
        width: "".concat(this.preWidth - 60, "px")
      },
      "onClick": this.openClick,
      "content": this.text,
      "ellipsis": {
        tooltip: this.text
      }
    }, null), theArrow]);
  }
});