{"size": 1604, "ext": "js", "max_stars_repo_path": "src/components/Field/field.js", "max_stars_repo_name": "Vincent1993/Too-ui", "max_stars_repo_stars_event_min_datetime": "2019-02-12T05:12:22.000Z", "max_stars_repo_stars_event_max_datetime": "2019-02-12T05:12:22.000Z", "max_issues_repo_path": "src/components/Field/field.js", "max_issues_repo_name": "Vincent1993/Too-ui", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Field/field.js", "max_forks_repo_name": "Vincent1993/Too-ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.1636363636, "max_line_length": 100, "alphanum_fraction": 0.5997506234}
import { Component, Vue } from 'vue-property-decorator';
import PropTypes from 'vue-types';

@Component({
  props: {
    prefixCls: PropTypes.string.def('to-field'),
    title: PropTypes.oneOfType([Object, String]).def(''),
    brief: PropTypes.oneOfType([Object, String]).def(''),
    footer: PropTypes.oneOfType([Object, String]).def(''),
    disabled: PropTypes.bool.def(false),
    fullWidth: PropTypes.bool.def(false),
  },
})
export default class Field extends Vue {
  get headerRender() {
    const { title, brief } = this.$props;
    const { header } = this.$slots;
    return header || title || brief ? (
      <header class={`${this.prefixCls}-header`} onClick={this.handleClick}>
        {title ? <div class={`${this.prefixCls}-title`}>{title}</div> : null}
        {header}
        {brief ? <div class={`${this.prefixCls}-brief`}>{brief}</div> : null}
      </header>
    ) : null;
  }

  get mainRender() {
    return <main class={`${this.prefixCls}-main`}>{this.$slots.default}</main>;
  }

  // slot's footer weight bigger than props's footer
  get footerRender() {
    return this.$slots.footer || this.$props.footer ? (
      <footer class={`${this.prefixCls}-footer`}>{this.$slots.footer || this.$props.footer}</footer>
    ) : null;
  }

  handleClick(e) {
    if (this.disabled) return;
    this.$emit('click', e, this);
  }
  render() {
    return (
      <div
        class={{ [this.prefixCls]: true, 'full-width': this.fullWidth }}
        disabled={this.disabled}
      >
        {this.headerRender}
        {this.mainRender}
        {this.footerRender}
      </div>
    );
  }
}
