zmp-vue/cjs/components/message.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _vue = require("vue");

var _utils = require("../shared/utils");

var _mixins = require("../shared/mixins");

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 _hoisted_1 = {
  class: "message-content"
};
var _hoisted_2 = {
  key: 0,
  class: "message-image"
};
var _hoisted_3 = {
  key: 1,
  class: "message-text-header"
};
var _hoisted_4 = {
  key: 0,
  class: "message-typing-indicator"
};

var _hoisted_5 = /*#__PURE__*/(0, _vue.createVNode)("div", null, null, -1);

var _hoisted_6 = /*#__PURE__*/(0, _vue.createVNode)("div", null, null, -1);

var _hoisted_7 = /*#__PURE__*/(0, _vue.createVNode)("div", null, null, -1);

var _hoisted_8 = {
  key: 3,
  class: "message-text-footer"
};

function render(_ctx, _cache) {
  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    class: _ctx.classes,
    onClick: _cache[7] || (_cache[7] = function () {
      return _ctx.onClick && _ctx.onClick.apply(_ctx, arguments);
    })
  }, [(0, _vue.renderSlot)(_ctx.$slots, "start"), _ctx.hasAvatar ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    key: 0,
    class: "message-avatar",
    style: {
      backgroundImage: _ctx.avatar && "url(" + _ctx.avatar + ")"
    },
    onClick: _cache[1] || (_cache[1] = function () {
      return _ctx.onAvatarClick && _ctx.onAvatarClick.apply(_ctx, arguments);
    })
  }, [(0, _vue.renderSlot)(_ctx.$slots, "avatar")], 4)) : (0, _vue.createCommentVNode)("", true), (0, _vue.createVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "content-start"), _ctx.hasName ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    key: 0,
    class: "message-name",
    onClick: _cache[2] || (_cache[2] = function () {
      return _ctx.onNameClick && _ctx.onNameClick.apply(_ctx, arguments);
    })
  }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.name) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "name")])) : (0, _vue.createCommentVNode)("", true), _ctx.hasHeader ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    key: 1,
    class: "message-header",
    onClick: _cache[3] || (_cache[3] = function () {
      return _ctx.onHeaderClick && _ctx.onHeaderClick.apply(_ctx, arguments);
    })
  }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.header) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "header")])) : (0, _vue.createCommentVNode)("", true), (0, _vue.createVNode)("div", {
    class: "message-bubble",
    onClick: _cache[5] || (_cache[5] = function () {
      return _ctx.onBubbleClick && _ctx.onBubbleClick.apply(_ctx, arguments);
    })
  }, [(0, _vue.renderSlot)(_ctx.$slots, "bubble-start"), _ctx.hasImage ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_2, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, function () {
    return [(0, _vue.createVNode)("img", {
      src: _ctx.image
    }, null, 8, ["src"])];
  })])) : (0, _vue.createCommentVNode)("", true), _ctx.hasTextHeader ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_3, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.textHeader) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "text-header")])) : (0, _vue.createCommentVNode)("", true), _ctx.hasText ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    key: 2,
    class: "message-text",
    onClick: _cache[4] || (_cache[4] = function () {
      return _ctx.onTextClick && _ctx.onTextClick.apply(_ctx, arguments);
    })
  }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.text) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "text"), _ctx.typing ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_4, [_hoisted_5, _hoisted_6, _hoisted_7])) : (0, _vue.createCommentVNode)("", true)])) : (0, _vue.createCommentVNode)("", true), _ctx.hasTextFooter ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", _hoisted_8, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.textFooter) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "text-footer")])) : (0, _vue.createCommentVNode)("", true), (0, _vue.renderSlot)(_ctx.$slots, "bubble-end"), (0, _vue.renderSlot)(_ctx.$slots, "default")]), _ctx.hasFooter ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    key: 2,
    class: "message-footer",
    onClick: _cache[6] || (_cache[6] = function () {
      return _ctx.onFooterClick && _ctx.onFooterClick.apply(_ctx, arguments);
    })
  }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.footer) + " ", 1), (0, _vue.renderSlot)(_ctx.$slots, "footer")])) : (0, _vue.createCommentVNode)("", true), (0, _vue.renderSlot)(_ctx.$slots, "content-end")]), (0, _vue.renderSlot)(_ctx.$slots, "end")], 2);
}

var _default = {
  name: 'zmp-message',
  render: render,
  props: _extends({
    text: String,
    name: String,
    avatar: String,
    type: {
      type: String,
      default: 'sent'
    },
    image: String,
    header: String,
    footer: String,
    textHeader: String,
    textFooter: String,
    first: Boolean,
    last: Boolean,
    tail: Boolean,
    sameName: Boolean,
    sameHeader: Boolean,
    sameFooter: Boolean,
    sameAvatar: Boolean,
    typing: Boolean
  }, _mixins.colorProps),
  emits: ['click', 'click:name', 'click:text', 'click:avatar', 'click:header', 'click:footer', 'click:bubble'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        slots = _ref.slots;

    var onClick = function onClick(event) {
      emit('click', event);
    };

    var onNameClick = function onNameClick(event) {
      emit('click:name', event);
    };

    var onTextClick = function onTextClick(event) {
      emit('click:text', event);
    };

    var onAvatarClick = function onAvatarClick(event) {
      emit('click:avatar', event);
    };

    var onHeaderClick = function onHeaderClick(event) {
      emit('click:header', event);
    };

    var onFooterClick = function onFooterClick(event) {
      emit('click:footer', event);
    };

    var onBubbleClick = function onBubbleClick(event) {
      emit('click:bubble', event);
    };

    var classes = (0, _vue.computed)(function () {
      return (0, _utils.classNames)('message', {
        'message-sent': props.type === 'sent',
        'message-received': props.type === 'received',
        'message-typing': props.typing,
        'message-first': props.first,
        'message-last': props.last,
        'message-tail': props.tail,
        'message-same-name': props.sameName,
        'message-same-header': props.sameHeader,
        'message-same-footer': props.sameFooter,
        'message-same-avatar': props.sameAvatar
      }, (0, _mixins.colorClasses)(props));
    });
    var hasAvatar = (0, _vue.computed)(function () {
      return slots.avatar || props.avatar;
    });
    var hasName = (0, _vue.computed)(function () {
      return slots.name || props.name;
    });
    var hasHeader = (0, _vue.computed)(function () {
      return slots.header || props.header;
    });
    var hasImage = (0, _vue.computed)(function () {
      return slots.image || props.image;
    });
    var hasTextHeader = (0, _vue.computed)(function () {
      return slots['text-header'] || props.textHeader;
    });
    var hasText = (0, _vue.computed)(function () {
      return slots.text || props.text || props.typing;
    });
    var hasTextFooter = (0, _vue.computed)(function () {
      return slots['text-footer'] || props.textFooter;
    });
    var hasFooter = (0, _vue.computed)(function () {
      return slots.footer || props.footer;
    });
    return {
      classes: classes,
      onClick: onClick,
      onNameClick: onNameClick,
      onTextClick: onTextClick,
      onAvatarClick: onAvatarClick,
      onHeaderClick: onHeaderClick,
      onFooterClick: onFooterClick,
      onBubbleClick: onBubbleClick,
      hasAvatar: hasAvatar,
      hasName: hasName,
      hasHeader: hasHeader,
      hasImage: hasImage,
      hasTextHeader: hasTextHeader,
      hasText: hasText,
      hasTextFooter: hasTextFooter,
      hasFooter: hasFooter
    };
  }
};
exports.default = _default;