framework7-vue
Version:
Build full featured iOS & Android apps using Framework7 & Vue
150 lines • 6.76 kB
JavaScript
import { renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = {
class: "message-content"
};
const _hoisted_2 = {
key: 0,
class: "message-image"
};
const _hoisted_3 = ["src"];
const _hoisted_4 = {
key: 1,
class: "message-text-header"
};
const _hoisted_5 = {
key: 0,
class: "message-typing-indicator"
};
const _hoisted_6 = {
key: 3,
class: "message-text-footer"
};
function render(_ctx, _cache) {
return _openBlock(), _createElementBlock("div", {
class: _normalizeClass(_ctx.classes),
onClick: _cache[6] || (_cache[6] = (...args) => _ctx.onClick && _ctx.onClick(...args))
}, [_renderSlot(_ctx.$slots, "start"), _ctx.hasAvatar ? (_openBlock(), _createElementBlock("div", {
key: 0,
class: "message-avatar",
style: _normalizeStyle({
backgroundImage: _ctx.avatar && `url(${_ctx.avatar})`
}),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onAvatarClick && _ctx.onAvatarClick(...args))
}, [_renderSlot(_ctx.$slots, "avatar")], 4)) : _createCommentVNode("", true), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "content-start"), _ctx.hasName ? (_openBlock(), _createElementBlock("div", {
key: 0,
class: "message-name",
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onNameClick && _ctx.onNameClick(...args))
}, [_createTextVNode(_toDisplayString(_ctx.name) + " ", 1), _renderSlot(_ctx.$slots, "name")])) : _createCommentVNode("", true), _ctx.hasHeader ? (_openBlock(), _createElementBlock("div", {
key: 1,
class: "message-header",
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onHeaderClick && _ctx.onHeaderClick(...args))
}, [_createTextVNode(_toDisplayString(_ctx.header) + " ", 1), _renderSlot(_ctx.$slots, "header")])) : _createCommentVNode("", true), _createElementVNode("div", {
class: "message-bubble",
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.onBubbleClick && _ctx.onBubbleClick(...args))
}, [_renderSlot(_ctx.$slots, "bubble-start"), _ctx.hasImage ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_renderSlot(_ctx.$slots, "image", {}, () => [_createElementVNode("img", {
src: _ctx.image
}, null, 8, _hoisted_3)])])) : _createCommentVNode("", true), _ctx.hasTextHeader ? (_openBlock(), _createElementBlock("div", _hoisted_4, [_createTextVNode(_toDisplayString(_ctx.textHeader) + " ", 1), _renderSlot(_ctx.$slots, "text-header")])) : _createCommentVNode("", true), _ctx.hasText ? (_openBlock(), _createElementBlock("div", {
key: 2,
class: "message-text",
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.onTextClick && _ctx.onTextClick(...args))
}, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "text"), _ctx.typing ? (_openBlock(), _createElementBlock("div", _hoisted_5, [...(_cache[7] || (_cache[7] = [_createElementVNode("div", null, null, -1), _createElementVNode("div", null, null, -1), _createElementVNode("div", null, null, -1)]))])) : _createCommentVNode("", true)])) : _createCommentVNode("", true), _ctx.hasTextFooter ? (_openBlock(), _createElementBlock("div", _hoisted_6, [_createTextVNode(_toDisplayString(_ctx.textFooter) + " ", 1), _renderSlot(_ctx.$slots, "text-footer")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "bubble-end"), _renderSlot(_ctx.$slots, "default")]), _ctx.hasFooter ? (_openBlock(), _createElementBlock("div", {
key: 2,
class: "message-footer",
onClick: _cache[5] || (_cache[5] = (...args) => _ctx.onFooterClick && _ctx.onFooterClick(...args))
}, [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")])) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "content-end")]), _renderSlot(_ctx.$slots, "end")], 2);
}
import { computed } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
export default {
name: 'f7-message',
render,
props: {
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,
...colorProps
},
emits: ['click', 'click:name', 'click:text', 'click:avatar', 'click:header', 'click:footer', 'click:bubble'],
setup(props, {
emit,
slots
}) {
const onClick = event => {
emit('click', event);
};
const onNameClick = event => {
emit('click:name', event);
};
const onTextClick = event => {
emit('click:text', event);
};
const onAvatarClick = event => {
emit('click:avatar', event);
};
const onHeaderClick = event => {
emit('click:header', event);
};
const onFooterClick = event => {
emit('click:footer', event);
};
const onBubbleClick = event => {
emit('click:bubble', event);
};
const classes = computed(() => 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
}, colorClasses(props)));
const hasAvatar = computed(() => slots.avatar || props.avatar);
const hasName = computed(() => slots.name || props.name);
const hasHeader = computed(() => slots.header || props.header);
const hasImage = computed(() => slots.image || props.image);
const hasTextHeader = computed(() => slots['text-header'] || props.textHeader);
const hasText = computed(() => slots.text || props.text || props.typing);
const hasTextFooter = computed(() => slots['text-footer'] || props.textFooter);
const hasFooter = computed(() => slots.footer || props.footer);
return {
classes,
onClick,
onNameClick,
onTextClick,
onAvatarClick,
onHeaderClick,
onFooterClick,
onBubbleClick,
hasAvatar,
hasName,
hasHeader,
hasImage,
hasTextHeader,
hasText,
hasTextFooter,
hasFooter
};
}
};