@meve/ui/es/dialog/Dialog.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Popup from '../popup';
import Button from '../button';
import Icon from '../icon';
import { createNamespace } from '../utils/create';
import { props } from './props';






var _createNamespace = createNamespace('dialog'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var DialogPlugin = createComponent({
  props: props,
  data: function data() {
    return {
      show: false,
      localCloseOnClickOverlay: false
    };
  },
  watch: {
    value: {
      handler: function handler(newValue) {
        this.show = newValue;
      },
      immediate: true
    },
    closeOnClickOverlay: {
      handler: function handler(newValue) {
        if (this.beforeClose) {
          this.localCloseOnClickOverlay = false;
          return;
        }

        this.localCloseOnClickOverlay = newValue;
      },
      immediate: true
    }
  },
  methods: {
    handleOpen: function handleOpen() {
      this.$emit('open');
    },
    handleOpened: function handleOpened() {
      this.$emit('opened');
    },
    handleClose: function handleClose() {
      this.$emit('close');
    },
    handleClosed: function handleClosed() {
      this.$emit('closed');
    },
    handleRouteChange: function handleRouteChange() {
      this.$emit('route-change');
    },
    done: function done() {
      this.$emit('input', false);
    },
    handleClickOverlay: function handleClickOverlay() {
      this.$emit('click-overlay');

      if (!this.closeOnClickOverlay) {
        return;
      }

      if (this.beforeClose) {
        this.beforeClose('close', this.done.bind(this));
        return;
      }

      this.done();
    },
    handleClickCloseButton: function handleClickCloseButton() {
      if (this.beforeClose) {
        this.beforeClose('close', this.done.bind(this));
        return;
      }

      this.done();
    },
    confirm: function confirm() {
      this.$emit('confirm');

      if (this.beforeClose) {
        this.beforeClose('confirm', this.done.bind(this));
        return;
      }

      this.done();
    },
    cancel: function cancel() {
      this.$emit('cancel');

      if (this.beforeClose) {
        this.beforeClose('cancel', this.done.bind(this));
        return;
      }

      this.done();
    },
    renderMessage: function renderMessage() {
      var h = this.$createElement;

      if (this.hasSlots()) {
        return this.slots();
      }

      if (this.message) {
        return h("div", {
          "class": namespace('__message'),
          "style": {
            textAlign: this.messageAlign
          }
        }, [this.message]);
      }
    },
    renderTitle: function renderTitle() {
      var _this$title;

      var h = this.$createElement;

      if (this.hasSlots('title')) {
        return this.slots('title');
      }

      return h("div", {
        "class": namespace('__title')
      }, [(_this$title = this.title) != null ? _this$title : '提示']);
    },
    renderFooter: function renderFooter() {
      var _this = this,
          _this$confirmButtonTe,
          _this$cancelButtonTex;

      var h = this.$createElement;

      if (this.hasSlots('footer')) {
        return this.slots('footer');
      }

      return h("div", {
        "class": namespace('__footer')
      }, [this.confirmButton && h(Button, {
        "class": namespace('__confirm-button'),
        "attrs": {
          "dialog-cover": true,
          "size": "large",
          "type": this.confirmButtonType
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
              attrs[_key - 1] = arguments[_key];
            }

            _this.confirm.apply(_this, [$event].concat(attrs));
          }
        })
      }, [(_this$confirmButtonTe = this.confirmButtonText) != null ? _this$confirmButtonTe : '确认']), this.cancelButton && h(Button, {
        "class": namespace('__cancel-button'),
        "attrs": {
          "dialog-cover": true,
          "size": "large",
          "type": this.cancelButtonType,
          "text": true
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
              attrs[_key2 - 1] = arguments[_key2];
            }

            _this.cancel.apply(_this, [$event].concat(attrs));
          }
        })
      }, [(_this$cancelButtonTex = this.cancelButtonText) != null ? _this$cancelButtonTex : '取消'])]);
    }
  },
  render: function render() {
    var _this2 = this;

    var h = arguments[0];
    var show = this.show,
        overlay = this.overlay,
        overlayClass = this.overlayClass,
        lockScroll = this.lockScroll,
        localCloseOnClickOverlay = this.localCloseOnClickOverlay,
        handleOpen = this.handleOpen,
        handleOpened = this.handleOpened,
        handleClose = this.handleClose,
        handleClosed = this.handleClosed,
        handleClickOverlay = this.handleClickOverlay,
        handleRouteChange = this.handleRouteChange;
    return h(Popup, {
      "class": namespace(),
      "attrs": {
        "dialog-cover": true,
        "value": show,
        "overlay": overlay,
        "overlayClass": overlayClass,
        "lockScroll": lockScroll,
        "closeOnClickOverlay": localCloseOnClickOverlay
      },
      "on": _extends({}, {
        "open": function open($event) {
          for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
            attrs[_key3 - 1] = arguments[_key3];
          }

          handleOpen.apply(void 0, [$event].concat(attrs));
        },
        "opened": function opened($event) {
          for (var _len4 = arguments.length, attrs = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
            attrs[_key4 - 1] = arguments[_key4];
          }

          handleOpened.apply(void 0, [$event].concat(attrs));
        },
        "close": function close($event) {
          for (var _len5 = arguments.length, attrs = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
            attrs[_key5 - 1] = arguments[_key5];
          }

          handleClose.apply(void 0, [$event].concat(attrs));
        },
        "closed": function closed($event) {
          for (var _len6 = arguments.length, attrs = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
            attrs[_key6 - 1] = arguments[_key6];
          }

          handleClosed.apply(void 0, [$event].concat(attrs));
        },
        "clickOverlay": function clickOverlay($event) {
          for (var _len7 = arguments.length, attrs = new Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
            attrs[_key7 - 1] = arguments[_key7];
          }

          handleClickOverlay.apply(void 0, [$event].concat(attrs));
        },
        "routeChange": function routeChange($event) {
          for (var _len8 = arguments.length, attrs = new Array(_len8 > 1 ? _len8 - 1 : 0), _key8 = 1; _key8 < _len8; _key8++) {
            attrs[_key8 - 1] = arguments[_key8];
          }

          handleRouteChange.apply(void 0, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": namespace('__container')
    }, [h("div", {
      "class": namespace('__title-wrapper')
    }, [this.renderTitle(), h(Button, {
      "class": namespace('__close-button'),
      "attrs": {
        "dialog-cover": true,
        "text": true,
        "round": true
      },
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len9 = arguments.length, attrs = new Array(_len9 > 1 ? _len9 - 1 : 0), _key9 = 1; _key9 < _len9; _key9++) {
            attrs[_key9 - 1] = arguments[_key9];
          }

          _this2.handleClickCloseButton.apply(_this2, [$event].concat(attrs));
        }
      })
    }, [h(Icon, {
      "attrs": {
        "name": "close"
      }
    })])]), this.renderMessage(), this.renderFooter()])]);
  }
});
export var _DialogComponent = DialogPlugin;
export default DialogPlugin;