drip-ui/lib/toast/toast.js

Lightweight Mobile UI Components built on Vue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _create = _interopRequireDefault(require("../utils/create"));

var DEFAULT_STYLE_LIST = ['success', 'fail', 'loading'];

var _default = (0, _create["default"])({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('transition', {
      attrs: {
        "name": "drip-fade"
      }
    }, [_c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.visible,
        expression: "visible"
      }],
      staticClass: "drip-toast-wrapper"
    }, [_c('div', {
      staticClass: "drip-toast",
      "class": ["drip-toast--" + _vm.displayStyle, "drip-toast--" + _vm.position]
    }, [_vm.displayStyle === 'text' ? _c('div', [_vm._v(_vm._s(_vm.message))]) : _vm._e(), _vm.displayStyle === 'html' ? _c('div', {
      domProps: {
        "innerHTML": _vm._s(_vm.message)
      }
    }) : _vm._e(), _vm.displayStyle === 'default' ? [_vm.type === 'loading' ? _c('loading', {
      attrs: {
        "color": "white"
      }
    }) : _c('icon', {
      staticClass: "drip-toast__icon",
      attrs: {
        "name": _vm.type
      }
    }), _vm.message != null ? _c('div', {
      staticClass: "drip-toast__text"
    }, [_vm._v(_vm._s(_vm.message))]) : _vm._e()] : _vm._e()], 2), _vm.forbidClick || _vm.mask ? _c('div', {
      staticClass: "drip-toast__overlay",
      "class": {
        'drip-toast__overlay--mask': _vm.mask
      }
    }) : _vm._e()])]);
  },
  name: 'drip-toast',
  props: {
    mask: Boolean,
    message: [String, Number],
    forbidClick: Boolean,
    type: {
      type: String,
      "default": 'text'
    },
    position: {
      type: String,
      "default": 'middle'
    }
  },
  data: function data() {
    return {
      visible: false
    };
  },
  computed: {
    displayStyle: function displayStyle() {
      return DEFAULT_STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;
    }
  },
  mounted: function mounted() {
    var _this = this;

    this.handleState = function () {
      _this.clear();
    };

    window.addEventListener('popstate', this.handleState);
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('popstate', this.handleState);
  }
});

exports["default"] = _default;