robin/lemon-imui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

`

Browse Source
This commit is contained in:
fan
2021-01-31 19:58:27 +08:00
parent 3603d0c03b
commit 44c6063a03
24 changed files with 853 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.common.js
Vendored
+307 -187
View File
@@ -5642,6 +5642,136 @@ var es7_array_includes = __webpack_require__("6762");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.string.includes.js
var es6_string_includes = __webpack_require__("2fdb");
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.constructor.js
var es6_regexp_constructor = __webpack_require__("3b2b");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
var es7_object_values = __webpack_require__("8615");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.to-string.js
var es6_regexp_to_string = __webpack_require__("6b54");
// CONCATENATED MODULE: ./packages/utils/validate.js
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
}
function isString(str) {
return typeof str == "string";
}
function isToday(time) {
return new Date().getTime() - time < 86400000;
}
function isEmpty(obj) {
if (!obj) return true;
if (Array.isArray(obj) && obj.length == 0) return true;
if (isPlainObject(obj) && Object.values(obj).length == 0) return true;
return false;
}
function isUrl(str) {
var reg = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
"(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
"|" + // 允许IP和DOMAIN（域名）
"([0-9a-z_!~*'()-]+.)*" + // 域名- www.
"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
"[a-z]{2,6})" + // first level domain- .com or .museum
"(:[0-9]{1,4})?" + // 端口- :80
"((/?)|" + // 如果没有文件名，则不需要斜杠
"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
return new RegExp(reg).test(str) ? true : false;
}
function isFunction(val) {
return val && typeof val === "function";
}
function isEng(val) {
return /^[A-Za-z]+$/.test(val);
}
// CONCATENATED MODULE: ./packages/directives/contextmenu.js
var popover;
var hidePopover = function hidePopover() {
if (popover) popover.style.display = 'none';
};
var showPopover = function showPopover() {
if (popover) popover.style.display = 'block';
};
document.addEventListener('click', function (e) {
hidePopover();
});
/* harmony default export */ var contextmenu = ({
hide: hidePopover,
bind: function bind(el, binding, vnode) {
el.addEventListener('contextmenu', function (e) {
if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
components_popover.methods.closeAll();
var component;
var visibleItems = [];
if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
if (!popover) {
popover = document.createElement('div');
popover.className = 'lemon-contextmenu';
document.body.appendChild(popover);
}
popover.innerHTML = binding.value.map(function (item) {
var visible;
if (isFunction(item.visible)) {
visible = item.visible(component);
} else {
visible = item.visible === undefined ? true : item.visible;
}
if (visible) {
visibleItems.push(item);
var icon = item.icon ? "<i class=\"lemon-contextmenu__icon ".concat(item.icon, "\"></i>") : '';
return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-contextmenu__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
}
return '';
}).join("");
popover.style.top = "".concat(e.pageY, "px");
popover.style.left = "".concat(e.pageX, "px");
popover.childNodes.forEach(function (node, index) {
var _visibleItems$index = visibleItems[index],
click = _visibleItems$index.click,
_render = _visibleItems$index.render;
node.addEventListener('click', function (e) {
e.stopPropagation();
if (isFunction(click)) click(e, component, hidePopover);
});
if (isFunction(_render)) {
var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
render: function render(h) {
return _render(h, component, hidePopover);
}
});
var renderComponent = new ins().$mount();
node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
}
});
showPopover();
});
},
inserted: function inserted(el, binding, vnode) {}
});
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/popover.vue?vue&type=script&lang=js&
@@ -5652,12 +5782,6 @@ var es6_string_includes = __webpack_require__("2fdb");
var popoverCloseQueue = [];
var popoverCloseAll = function popoverCloseAll() {
return popoverCloseQueue.forEach(function (callback) {
return callback();
});
};
var triggerEvents = {
hover: function hover(el) {},
focus: function focus(el) {
@@ -5675,6 +5799,7 @@ var triggerEvents = {
el.addEventListener("click", function (e) {
e.stopPropagation();
contextmenu.hide();
_this2.changeVisible();
});
@@ -5731,8 +5856,6 @@ var triggerEvents = {
}
}
}, [h("div", {
"class": "lemon-popover__title"
}), h("div", {
"class": "lemon-popover__content"
}, [this.$slots.content]), h("div", {
"class": "lemon-popover__arrow"
@@ -5792,9 +5915,14 @@ var triggerEvents = {
this.visible ? this.close() : this.open();
},
open: function open() {
popoverCloseAll();
this.closeAll();
this.visible = true;
},
closeAll: function closeAll() {
popoverCloseQueue.forEach(function (callback) {
return callback();
});
},
close: function close() {
this.visible = false;
}
@@ -5825,17 +5953,21 @@ var popover_component = normalizeComponent(
)
/* harmony default export */ var popover = (popover_component.exports);
/* harmony default export */ var components_popover = (popover_component.exports);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/button.vue?vue&type=script&lang=js&
/* harmony default export */ var buttonvue_type_script_lang_js_ = ({
name: "LemonButton",
props: {
color: {
type: String,
default: 'default'
},
disabled: Boolean
},
render: function render() {
var h = arguments[0];
return h("button", {
"class": "lemon-button",
"class": ['lemon-button', "lemon-button--color-".concat(this.color)],
"attrs": {
"disabled": this.disabled,
"type": "button"
@@ -5940,12 +6072,19 @@ var badge_component = normalizeComponent(
/* harmony default export */ var avatarvue_type_script_lang_js_ = ({
name: "LemonAvatar",
inject: ['IMUI'],
props: {
src: String,
icon: {
type: String,
default: "lemon-icon-people"
},
circle: {
type: Boolean,
default: function _default() {
return this.IMUI ? this.IMUI.avatarCricle : false;
}
},
size: {
type: Number,
default: 32
@@ -5962,7 +6101,9 @@ var badge_component = normalizeComponent(
var h = arguments[0];
return h("span", {
"style": this.style,
"class": "lemon-avatar",
"class": ['lemon-avatar', {
'lemon-avatar--circle': this.circle
}],
"on": {
"click": function click(e) {
return _this.$emit("click", e);
@@ -6026,54 +6167,6 @@ var avatar_component = normalizeComponent(
var helper = __webpack_require__("2638");
var helper_default = /*#__PURE__*/__webpack_require__.n(helper);
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.constructor.js
var es6_regexp_constructor = __webpack_require__("3b2b");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
var es7_object_values = __webpack_require__("8615");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.to-string.js
var es6_regexp_to_string = __webpack_require__("6b54");
// CONCATENATED MODULE: ./packages/utils/validate.js
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
}
function isString(str) {
return typeof str == "string";
}
function isToday(time) {
return new Date().getTime() - time < 86400000;
}
function isEmpty(obj) {
if (!obj) return true;
if (Array.isArray(obj) && obj.length == 0) return true;
if (isPlainObject(obj) && Object.values(obj).length == 0) return true;
return false;
}
function isUrl(str) {
var reg = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
"(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
"|" + // 允许IP和DOMAIN（域名）
"([0-9a-z_!~*'()-]+.)*" + // 域名- www.
"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
"[a-z]{2,6})" + // first level domain- .com or .museum
"(:[0-9]{1,4})?" + // 端口- :80
"((/?)|" + // 如果没有文件名，则不需要斜杠
"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
return new RegExp(reg).test(str) ? true : false;
}
function isFunction(val) {
return val && typeof val === "function";
}
function isEng(val) {
return /^[A-Za-z]+$/.test(val);
}
// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.get-own-property-descriptors.js
var es7_object_get_own_property_descriptors = __webpack_require__("8e6e");
@@ -6223,9 +6316,6 @@ function mergeDeep(o1, o2) {
return o1;
}
function toEmojiName(str) {
return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
}
function formatByte(value) {
if (null == value || value == "") {
return "0 Bytes";
@@ -6426,13 +6516,18 @@ var isInitTool = false;
}
},
data: function data() {
this.clipboardBlob = null;
return {
//剪切板图片URL
clipboardUrl: '',
submitDisabled: true,
proxyTools: [],
accept: ""
};
},
created: function created() {
var _this = this;
if (this.tools && this.tools.length > 0) {
this.initTools(this.tools);
} else {
@@ -6444,9 +6539,13 @@ var isInitTool = false;
name: 'uploadImage'
}]);
}
this.IMUI.$on('change-contact', function () {
_this.closeClipboardImage();
});
},
render: function render() {
var _this = this;
var _this2 = this;
var h = arguments[0];
var toolLeft = [];
@@ -6468,7 +6567,7 @@ var isInitTool = false;
"class": "lemon-editor__emoji"
}, [h("template", {
"slot": "content"
}, [_this._renderEmojiTabs()]), h("div", {
}, [_this2._renderEmojiTabs()]), h("div", {
"class": classes,
"attrs": {
"title": title
@@ -6494,7 +6593,27 @@ var isInitTool = false;
});
return h("div", {
"class": "lemon-editor"
}, [h("input", {
}, [this.clipboardUrl && h("div", {
"class": "lemon-editor__clipboard-image"
}, [h("img", {
"attrs": {
"src": this.clipboardUrl
}
}), h("div", [h("lemon-button", {
"style": {
marginRight: '10px'
},
"on": {
"click": this.closeClipboardImage
},
"attrs": {
"color": "grey"
}
}, ["\u53D6\u6D88"]), h("lemon-button", {
"on": {
"click": this.sendClipboardImage
}
}, ["\u53D1\u9001\u56FE\u7247"])])]), h("input", {
"style": "display:none",
"attrs": {
"type": "file",
@@ -6542,11 +6661,21 @@ var isInitTool = false;
}, [this.sendText])])])]);
},
methods: {
closeClipboardImage: function closeClipboardImage() {
this.clipboardUrl = '';
this.clipboardBlob = null;
},
sendClipboardImage: function sendClipboardImage() {
if (!this.clipboardBlob) return;
this.$emit("upload", this.clipboardBlob);
this.closeClipboardImage();
},
/**
* 初始化工具栏
*/
initTools: function initTools(data) {
var _this2 = this;
var _this3 = this;
var h = this.$createElement;
if (!data) return;
@@ -6563,7 +6692,7 @@ var isInitTool = false;
name: 'uploadFile',
title: "文件上传",
click: function click() {
return _this2.selectFile("*");
return _this3.selectFile("*");
},
render: function render(menu) {
return h("i", {
@@ -6574,7 +6703,7 @@ var isInitTool = false;
name: 'uploadImage',
title: "图片上传",
click: function click() {
return _this2.selectFile("image/*");
return _this3.selectFile("image/*");
},
render: function render(menu) {
return h("i", {
@@ -6619,7 +6748,7 @@ var isInitTool = false;
this._saveLastRange();
},
_renderEmojiTabs: function _renderEmojiTabs() {
var _this3 = this;
var _this4 = this;
var h = this.$createElement;
@@ -6633,7 +6762,7 @@ var isInitTool = false;
"class": "lemon-editor__emoji-item",
"on": {
"click": function click() {
return _this3._handleSelectEmoji(item);
return _this4._handleSelectEmoji(item);
}
}
});
@@ -6703,12 +6832,36 @@ var isInitTool = false;
var clipboardData = e.clipboardData || window.clipboardData;
var text = clipboardData.getData("Text");
if (window.clipboardData) {
this.$refs.textarea.innerHTML = text;
if (text) {
if (window.clipboardData) {
this.$refs.textarea.innerHTML = text;
} else {
exec(text, "insertText");
}
} else {
exec(text, "insertText");
var _this$_getClipboardBl = this._getClipboardBlob(clipboardData),
blob = _this$_getClipboardBl.blob,
blobUrl = _this$_getClipboardBl.blobUrl;
this.clipboardBlob = blob;
this.clipboardUrl = blobUrl;
}
},
_getClipboardBlob: function _getClipboardBlob(clipboard) {
var blob, blobUrl;
for (var i = 0; i < clipboard.items.length; ++i) {
if (clipboard.items[i].kind == 'file' && clipboard.items[i].type.indexOf('image/') !== -1) {
blob = clipboard.items[i].getAsFile();
blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
}
}
return {
blob: blob,
blobUrl: blobUrl
};
},
_handleKeyup: function _handleKeyup(e) {
this._saveLastRange();
@@ -6726,7 +6879,7 @@ var isInitTool = false;
// .replace(/<div>|<p>/g, "\r\n")
// .replace(/<\/div>|<\/p>/g, "")
// );
return toEmojiName(this.$refs.textarea.innerHTML);
return this.IMUI.emojiImageToName(this.$refs.textarea.innerHTML);
},
_checkSubmitDisabled: function _checkSubmitDisabled() {
this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
@@ -6739,11 +6892,11 @@ var isInitTool = false;
this._checkSubmitDisabled();
},
_handleChangeFile: function _handleChangeFile(e) {
var _this4 = this;
var _this5 = this;
var fileInput = this.$refs.fileInput;
Array.from(fileInput.files).forEach(function (file) {
_this4.$emit("upload", file);
_this5.$emit("upload", file);
});
fileInput.value = "";
},
@@ -6755,7 +6908,7 @@ var isInitTool = false;
this.$forceUpdate();
},
setValue: function setValue(val) {
this.$refs.textarea.innerHTML = val;
this.$refs.textarea.innerHTML = this.IMUI.emojiNameToImage(val);
this._checkSubmitDisabled();
}
@@ -6787,86 +6940,6 @@ var editor_component = normalizeComponent(
)
/* harmony default export */ var editor = (editor_component.exports);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
// CONCATENATED MODULE: ./packages/directives/dropdown.js
var dropdown_popover;
var hidePopover = function hidePopover() {
if (dropdown_popover) dropdown_popover.style.display = 'none';
};
var showPopover = function showPopover() {
if (dropdown_popover) dropdown_popover.style.display = 'block';
};
document.addEventListener('click', function (e) {
hidePopover();
});
/* harmony default export */ var dropdown = ({
hide: hidePopover,
bind: function bind(el, binding, vnode) {
el.addEventListener('contextmenu', function (e) {
if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
var component;
var visibleItems = [];
if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
if (!dropdown_popover) {
dropdown_popover = document.createElement('div');
dropdown_popover.className = 'lemon-dropdown';
document.body.appendChild(dropdown_popover);
}
dropdown_popover.innerHTML = binding.value.map(function (item) {
var visible;
if (isFunction(item.visible)) {
visible = item.visible(component);
} else {
visible = item.visible === undefined ? true : item.visible;
}
if (visible) {
visibleItems.push(item);
var icon = item.icon ? "<i class=\"lemon-dropdown__icon ".concat(item.icon, "\"></i>") : '';
return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-dropdown__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
}
return '';
}).join("");
dropdown_popover.style.top = "".concat(e.pageY, "px");
dropdown_popover.style.left = "".concat(e.pageX, "px");
dropdown_popover.childNodes.forEach(function (node, index) {
var _visibleItems$index = visibleItems[index],
click = _visibleItems$index.click,
_render = _visibleItems$index.render;
node.addEventListener('click', function (e) {
e.stopPropagation();
if (isFunction(click)) click(e, component, hidePopover);
});
if (isFunction(_render)) {
var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
render: function render(h) {
return _render(h, component, hidePopover);
}
});
var renderComponent = new ins().$mount();
node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
}
});
showPopover();
});
},
inserted: function inserted(el, binding, vnode) {}
});
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/messages.vue?vue&type=script&lang=js&
@@ -6998,7 +7071,7 @@ document.addEventListener('click', function (e) {
switch (_context2.prev = _context2.next) {
case 0:
target = e.target;
dropdown.hide();
contextmenu.hide();
if (!(target.scrollTop == 0 && this._loading == false && this._loadend == false)) {
_context2.next = 8;
@@ -7199,7 +7272,7 @@ var messages_component = normalizeComponent(
"class": "lemon-message__content-flex"
}, [h("div", {
"directives": [{
name: "dropdown",
name: "lemon-contextmenu",
value: this.IMUI.contextmenu,
modifiers: {
"message": true
@@ -7277,6 +7350,7 @@ var basic_component = normalizeComponent(
function textvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function textvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { textvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { textvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7296,7 +7370,7 @@ function textvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i <
}, {
"scopedSlots": {
content: function content(props) {
var content = _this.IMUI.replaceEmojiName(props.content);
var content = _this.IMUI.emojiNameToImage(props.content);
return h("span", helper_default()([{}, {
"domProps": {
@@ -7595,7 +7669,7 @@ var CONTACT_TYPE = ["many", "single"];
return "[图片]";
},
text: function text(message) {
return this.replaceEmojiName(clearHtml(message.content));
return this.emojiNameToImage(clearHtml(message.content));
},
event: function event(message) {
return '[通知]';
@@ -7692,6 +7766,7 @@ function () {
function componentsvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { componentsvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { componentsvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7769,6 +7844,7 @@ var renderDrawerContent = function renderDrawerContent() {};
sendText: String,
contextmenu: Array,
contactContextmenu: Array,
avatarCricle: Boolean,
user: {
type: Object,
default: function _default() {
@@ -7780,6 +7856,7 @@ var renderDrawerContent = function renderDrawerContent() {};
this.CacheContactContainer = new memory_MemoryCache();
this.CacheMenuContainer = new memory_MemoryCache();
this.CacheMessageLoaded = new memory_MemoryCache();
this.CacheDraft = new memory_MemoryCache();
return {
drawerVisible: !this.hideDrawer,
currentContactId: null,
@@ -7896,6 +7973,8 @@ var renderDrawerContent = function renderDrawerContent() {};
if (scrollToBottom == true) {
this.messageViewToBottom();
}
this.CacheDraft.remove(message.toContactId);
} else {
updateContact.unread = '+1';
}
@@ -7930,6 +8009,8 @@ var renderDrawerContent = function renderDrawerContent() {};
lastContent: _this4.lastContentRender(message),
lastSendTime: message.sendTime
});
_this4.CacheDraft.remove(message.toContactId);
});
},
_handleUpload: function _handleUpload(file) {
@@ -8074,14 +8155,14 @@ var renderDrawerContent = function renderDrawerContent() {};
_renderSidebarMessage: function _renderSidebarMessage() {
var _this9 = this;
return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-message-top"]), this.lastMessages.map(function (contact) {
return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-message-top"], null, this), this.lastMessages.map(function (contact) {
return _this9._renderContact({
contact: contact,
timeFormat: _this9.contactTimeFormat
}, function () {
return _this9.changeContact(contact.id);
}, _this9.$scopedSlots["sidebar-message"]);
})], DEFAULT_MENU_LASTMESSAGES);
})], DEFAULT_MENU_LASTMESSAGES, useScopedSlot(this.$scopedSlots["sidebar-message-fixedtop"], null, this));
},
_renderContact: function _renderContact(props, onClick, slot) {
var _this10 = this;
@@ -8105,7 +8186,7 @@ var renderDrawerContent = function renderDrawerContent() {};
"lemon-contact--active": this.currentContactId == props.contact.id
},
"directives": [{
name: "dropdown",
name: "lemon-contextmenu",
value: this.contactContextmenu,
modifiers: {
"contact": true
@@ -8127,7 +8208,7 @@ var renderDrawerContent = function renderDrawerContent() {};
var h = this.$createElement;
var prevIndex;
return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-contact-top"]), this.contacts.map(function (contact) {
return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-contact-top"], null, this), this.contacts.map(function (contact) {
if (!contact.index) return;
contact.index = contact.index.replace(/\[[0-9]*\]/, "");
var node = [contact.index !== prevIndex && h("p", {
@@ -8140,9 +8221,9 @@ var renderDrawerContent = function renderDrawerContent() {};
}, _this11.$scopedSlots["sidebar-contact"])];
prevIndex = contact.index;
return node;
})], DEFAULT_MENU_CONTACTS);
})], DEFAULT_MENU_CONTACTS, useScopedSlot(this.$scopedSlots["sidebar-contact-fixedtop"], null, this));
},
_renderSidebar: function _renderSidebar(children, name) {
_renderSidebar: function _renderSidebar(children, name, fixedtop) {
var h = this.$createElement;
return h("div", {
"class": "lemon-sidebar",
@@ -8153,7 +8234,11 @@ var renderDrawerContent = function renderDrawerContent() {};
"on": {
"scroll": this._handleSidebarScroll
}
}, [children]);
}, [h("div", {
"class": "lemon-sidebar__fixed-top"
}, [fixedtop]), h("div", {
"class": "lemon-sidebar__scroll"
}, [children])]);
},
_renderDrawer: function _renderDrawer() {
var h = this.$createElement;
@@ -8266,14 +8351,13 @@ var renderDrawerContent = function renderDrawerContent() {};
return nodes;
},
_handleSidebarScroll: function _handleSidebarScroll() {
dropdown.hide();
contextmenu.hide();
},
_addContact: function _addContact(data, t) {
var type = {
0: "unshift",
1: "push"
}[t]; //this.contacts[type](cloneDeep(data));
}[t];
this.contacts[type](data);
},
_addMessage: function _addMessage(data, contactId, t) {
@@ -8312,12 +8396,15 @@ var renderDrawerContent = function renderDrawerContent() {};
* @param {String} str 被替换的字符串
* @return {String} 替换后的字符串
*/
replaceEmojiName: function replaceEmojiName(str) {
emojiNameToImage: function emojiNameToImage(str) {
return str.replace(/\[!(\w+)\]/gi, function (str, match) {
var file = match;
return emojiMap[file] ? "<img src=\"".concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
return emojiMap[file] ? "<img emoji-name=\"".concat(match, "\" src=\"").concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
});
},
emojiImageToName: function emojiImageToName(str) {
return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
},
updateCurrentMessages: function updateCurrentMessages() {
if (!allMessages[this.currentContactId]) allMessages[this.currentContactId] = [];
this.currentMessages = allMessages[this.currentContactId];
@@ -8340,48 +8427,79 @@ var renderDrawerContent = function renderDrawerContent() {};
regeneratorRuntime.mark(function _callee2(contactId, menuName) {
var _this13 = this;
var h, prevCurrentContactId, editorValue, draft;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
h = this.$createElement;
if (!menuName) {
_context2.next = 4;
_context2.next = 5;
break;
}
this.changeMenu(menuName);
_context2.next = 6;
_context2.next = 7;
break;
case 4:
case 5:
if (!(this._changeContactLock || this.currentContactId == contactId)) {
_context2.next = 6;
_context2.next = 7;
break;
}
return _context2.abrupt("return", false);
case 6:
case 7:
prevCurrentContactId = this.currentContactId; //保存上个聊天目标的草稿
if (prevCurrentContactId) {
editorValue = this.getEditorValue();
if (editorValue) {
this.CacheDraft.set(prevCurrentContactId, editorValue);
this.updateContact({
id: prevCurrentContactId,
lastContent: [h("span", {
"style": "color:red;"
}, ["[\u8349\u7A3F]"]), h("span", helper_default()([{}, {
"domProps": {
innerHTML: this.lastContentRender({
type: 'text',
content: editorValue
})
}
}]))]
});
this.setEditorValue('');
}
}
this.currentContactId = contactId;
if (this.currentContactId) {
_context2.next = 9;
_context2.next = 12;
break;
}
return _context2.abrupt("return", false);
case 9:
case 12:
this.$emit("change-contact", this.currentContact, this);
if (!isFunction(this.currentContact.renderContainer)) {
_context2.next = 12;
_context2.next = 15;
break;
}
return _context2.abrupt("return");
case 12:
case 15:
//填充草稿内容
draft = this.CacheDraft.get(contactId) || "";
if (draft) this.setEditorValue(draft);
if (this.CacheMessageLoaded.has(contactId)) {
this.$refs.messages.loaded();
} else {
@@ -8402,7 +8520,7 @@ var renderDrawerContent = function renderDrawerContent() {};
}, 0);
}
case 14:
case 19:
case "end":
return _context2.stop();
}
@@ -8611,6 +8729,8 @@ var renderDrawerContent = function renderDrawerContent() {};
var index = this.findContactIndexById(id);
if (index === -1) return false;
this.contacts.splice(index, 1);
this.CacheDraft.remove(id);
this.CacheMessageLoaded.remove(id);
return true;
},
@@ -8686,7 +8806,7 @@ var renderDrawerContent = function renderDrawerContent() {};
return this.currentMessages;
},
setEditorValue: function setEditorValue(val) {
this.$refs.editor.setValue(this.replaceEmojiName(val));
this.$refs.editor.setValue(this.emojiNameToImage(val));
},
getEditorValue: function getEditorValue() {
return this.$refs.editor.getFormatValue();
@@ -8744,7 +8864,7 @@ var common = __webpack_require__("6a2b");
// CONCATENATED MODULE: ./packages/directives/index.js
external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dropdown);
external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('LemonContextmenu', contextmenu);
// CONCATENATED MODULE: ./packages/index.js
@@ -8765,7 +8885,7 @@ external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dro
var version = "1.4.2";
var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, popover, tabs, basic, message_text, message_image, file, message_event];
var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, components_popover, tabs, basic, message_text, message_image, file, message_event];
var install = function install(Vue) {
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
dist/index.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/index.umd.js
Vendored
+307 -187
View File
@@ -5651,6 +5651,136 @@ var es7_array_includes = __webpack_require__("6762");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.string.includes.js
var es6_string_includes = __webpack_require__("2fdb");
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.constructor.js
var es6_regexp_constructor = __webpack_require__("3b2b");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
var es7_object_values = __webpack_require__("8615");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.to-string.js
var es6_regexp_to_string = __webpack_require__("6b54");
// CONCATENATED MODULE: ./packages/utils/validate.js
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
}
function isString(str) {
return typeof str == "string";
}
function isToday(time) {
return new Date().getTime() - time < 86400000;
}
function isEmpty(obj) {
if (!obj) return true;
if (Array.isArray(obj) && obj.length == 0) return true;
if (isPlainObject(obj) && Object.values(obj).length == 0) return true;
return false;
}
function isUrl(str) {
var reg = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
"(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
"|" + // 允许IP和DOMAIN（域名）
"([0-9a-z_!~*'()-]+.)*" + // 域名- www.
"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
"[a-z]{2,6})" + // first level domain- .com or .museum
"(:[0-9]{1,4})?" + // 端口- :80
"((/?)|" + // 如果没有文件名，则不需要斜杠
"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
return new RegExp(reg).test(str) ? true : false;
}
function isFunction(val) {
return val && typeof val === "function";
}
function isEng(val) {
return /^[A-Za-z]+$/.test(val);
}
// CONCATENATED MODULE: ./packages/directives/contextmenu.js
var popover;
var hidePopover = function hidePopover() {
if (popover) popover.style.display = 'none';
};
var showPopover = function showPopover() {
if (popover) popover.style.display = 'block';
};
document.addEventListener('click', function (e) {
hidePopover();
});
/* harmony default export */ var contextmenu = ({
hide: hidePopover,
bind: function bind(el, binding, vnode) {
el.addEventListener('contextmenu', function (e) {
if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
components_popover.methods.closeAll();
var component;
var visibleItems = [];
if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
if (!popover) {
popover = document.createElement('div');
popover.className = 'lemon-contextmenu';
document.body.appendChild(popover);
}
popover.innerHTML = binding.value.map(function (item) {
var visible;
if (isFunction(item.visible)) {
visible = item.visible(component);
} else {
visible = item.visible === undefined ? true : item.visible;
}
if (visible) {
visibleItems.push(item);
var icon = item.icon ? "<i class=\"lemon-contextmenu__icon ".concat(item.icon, "\"></i>") : '';
return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-contextmenu__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
}
return '';
}).join("");
popover.style.top = "".concat(e.pageY, "px");
popover.style.left = "".concat(e.pageX, "px");
popover.childNodes.forEach(function (node, index) {
var _visibleItems$index = visibleItems[index],
click = _visibleItems$index.click,
_render = _visibleItems$index.render;
node.addEventListener('click', function (e) {
e.stopPropagation();
if (isFunction(click)) click(e, component, hidePopover);
});
if (isFunction(_render)) {
var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
render: function render(h) {
return _render(h, component, hidePopover);
}
});
var renderComponent = new ins().$mount();
node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
}
});
showPopover();
});
},
inserted: function inserted(el, binding, vnode) {}
});
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/popover.vue?vue&type=script&lang=js&
@@ -5661,12 +5791,6 @@ var es6_string_includes = __webpack_require__("2fdb");
var popoverCloseQueue = [];
var popoverCloseAll = function popoverCloseAll() {
return popoverCloseQueue.forEach(function (callback) {
return callback();
});
};
var triggerEvents = {
hover: function hover(el) {},
focus: function focus(el) {
@@ -5684,6 +5808,7 @@ var triggerEvents = {
el.addEventListener("click", function (e) {
e.stopPropagation();
contextmenu.hide();
_this2.changeVisible();
});
@@ -5740,8 +5865,6 @@ var triggerEvents = {
}
}
}, [h("div", {
"class": "lemon-popover__title"
}), h("div", {
"class": "lemon-popover__content"
}, [this.$slots.content]), h("div", {
"class": "lemon-popover__arrow"
@@ -5801,9 +5924,14 @@ var triggerEvents = {
this.visible ? this.close() : this.open();
},
open: function open() {
popoverCloseAll();
this.closeAll();
this.visible = true;
},
closeAll: function closeAll() {
popoverCloseQueue.forEach(function (callback) {
return callback();
});
},
close: function close() {
this.visible = false;
}
@@ -5834,17 +5962,21 @@ var popover_component = normalizeComponent(
)
/* harmony default export */ var popover = (popover_component.exports);
/* harmony default export */ var components_popover = (popover_component.exports);
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/button.vue?vue&type=script&lang=js&
/* harmony default export */ var buttonvue_type_script_lang_js_ = ({
name: "LemonButton",
props: {
color: {
type: String,
default: 'default'
},
disabled: Boolean
},
render: function render() {
var h = arguments[0];
return h("button", {
"class": "lemon-button",
"class": ['lemon-button', "lemon-button--color-".concat(this.color)],
"attrs": {
"disabled": this.disabled,
"type": "button"
@@ -5949,12 +6081,19 @@ var badge_component = normalizeComponent(
/* harmony default export */ var avatarvue_type_script_lang_js_ = ({
name: "LemonAvatar",
inject: ['IMUI'],
props: {
src: String,
icon: {
type: String,
default: "lemon-icon-people"
},
circle: {
type: Boolean,
default: function _default() {
return this.IMUI ? this.IMUI.avatarCricle : false;
}
},
size: {
type: Number,
default: 32
@@ -5971,7 +6110,9 @@ var badge_component = normalizeComponent(
var h = arguments[0];
return h("span", {
"style": this.style,
"class": "lemon-avatar",
"class": ['lemon-avatar', {
'lemon-avatar--circle': this.circle
}],
"on": {
"click": function click(e) {
return _this.$emit("click", e);
@@ -6035,54 +6176,6 @@ var avatar_component = normalizeComponent(
var helper = __webpack_require__("2638");
var helper_default = /*#__PURE__*/__webpack_require__.n(helper);
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.constructor.js
var es6_regexp_constructor = __webpack_require__("3b2b");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.values.js
var es7_object_values = __webpack_require__("8615");
// EXTERNAL MODULE: ./node_modules/core-js/modules/es6.regexp.to-string.js
var es6_regexp_to_string = __webpack_require__("6b54");
// CONCATENATED MODULE: ./packages/utils/validate.js
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
}
function isString(str) {
return typeof str == "string";
}
function isToday(time) {
return new Date().getTime() - time < 86400000;
}
function isEmpty(obj) {
if (!obj) return true;
if (Array.isArray(obj) && obj.length == 0) return true;
if (isPlainObject(obj) && Object.values(obj).length == 0) return true;
return false;
}
function isUrl(str) {
var reg = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@
"(([0-9]{1,3}.){3}[0-9]{1,3}" + // IP形式的URL- 199.194.52.184
"|" + // 允许IP和DOMAIN（域名）
"([0-9a-z_!~*'()-]+.)*" + // 域名- www.
"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." + // 二级域名
"[a-z]{2,6})" + // first level domain- .com or .museum
"(:[0-9]{1,4})?" + // 端口- :80
"((/?)|" + // 如果没有文件名，则不需要斜杠
"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
return new RegExp(reg).test(str) ? true : false;
}
function isFunction(val) {
return val && typeof val === "function";
}
function isEng(val) {
return /^[A-Za-z]+$/.test(val);
}
// EXTERNAL MODULE: ./node_modules/core-js/modules/es7.object.get-own-property-descriptors.js
var es7_object_get_own_property_descriptors = __webpack_require__("8e6e");
@@ -6232,9 +6325,6 @@ function mergeDeep(o1, o2) {
return o1;
}
function toEmojiName(str) {
return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
}
function formatByte(value) {
if (null == value || value == "") {
return "0 Bytes";
@@ -6435,13 +6525,18 @@ var isInitTool = false;
}
},
data: function data() {
this.clipboardBlob = null;
return {
//剪切板图片URL
clipboardUrl: '',
submitDisabled: true,
proxyTools: [],
accept: ""
};
},
created: function created() {
var _this = this;
if (this.tools && this.tools.length > 0) {
this.initTools(this.tools);
} else {
@@ -6453,9 +6548,13 @@ var isInitTool = false;
name: 'uploadImage'
}]);
}
this.IMUI.$on('change-contact', function () {
_this.closeClipboardImage();
});
},
render: function render() {
var _this = this;
var _this2 = this;
var h = arguments[0];
var toolLeft = [];
@@ -6477,7 +6576,7 @@ var isInitTool = false;
"class": "lemon-editor__emoji"
}, [h("template", {
"slot": "content"
}, [_this._renderEmojiTabs()]), h("div", {
}, [_this2._renderEmojiTabs()]), h("div", {
"class": classes,
"attrs": {
"title": title
@@ -6503,7 +6602,27 @@ var isInitTool = false;
});
return h("div", {
"class": "lemon-editor"
}, [h("input", {
}, [this.clipboardUrl && h("div", {
"class": "lemon-editor__clipboard-image"
}, [h("img", {
"attrs": {
"src": this.clipboardUrl
}
}), h("div", [h("lemon-button", {
"style": {
marginRight: '10px'
},
"on": {
"click": this.closeClipboardImage
},
"attrs": {
"color": "grey"
}
}, ["\u53D6\u6D88"]), h("lemon-button", {
"on": {
"click": this.sendClipboardImage
}
}, ["\u53D1\u9001\u56FE\u7247"])])]), h("input", {
"style": "display:none",
"attrs": {
"type": "file",
@@ -6551,11 +6670,21 @@ var isInitTool = false;
}, [this.sendText])])])]);
},
methods: {
closeClipboardImage: function closeClipboardImage() {
this.clipboardUrl = '';
this.clipboardBlob = null;
},
sendClipboardImage: function sendClipboardImage() {
if (!this.clipboardBlob) return;
this.$emit("upload", this.clipboardBlob);
this.closeClipboardImage();
},
/**
* 初始化工具栏
*/
initTools: function initTools(data) {
var _this2 = this;
var _this3 = this;
var h = this.$createElement;
if (!data) return;
@@ -6572,7 +6701,7 @@ var isInitTool = false;
name: 'uploadFile',
title: "文件上传",
click: function click() {
return _this2.selectFile("*");
return _this3.selectFile("*");
},
render: function render(menu) {
return h("i", {
@@ -6583,7 +6712,7 @@ var isInitTool = false;
name: 'uploadImage',
title: "图片上传",
click: function click() {
return _this2.selectFile("image/*");
return _this3.selectFile("image/*");
},
render: function render(menu) {
return h("i", {
@@ -6628,7 +6757,7 @@ var isInitTool = false;
this._saveLastRange();
},
_renderEmojiTabs: function _renderEmojiTabs() {
var _this3 = this;
var _this4 = this;
var h = this.$createElement;
@@ -6642,7 +6771,7 @@ var isInitTool = false;
"class": "lemon-editor__emoji-item",
"on": {
"click": function click() {
return _this3._handleSelectEmoji(item);
return _this4._handleSelectEmoji(item);
}
}
});
@@ -6712,12 +6841,36 @@ var isInitTool = false;
var clipboardData = e.clipboardData || window.clipboardData;
var text = clipboardData.getData("Text");
if (window.clipboardData) {
this.$refs.textarea.innerHTML = text;
if (text) {
if (window.clipboardData) {
this.$refs.textarea.innerHTML = text;
} else {
exec(text, "insertText");
}
} else {
exec(text, "insertText");
var _this$_getClipboardBl = this._getClipboardBlob(clipboardData),
blob = _this$_getClipboardBl.blob,
blobUrl = _this$_getClipboardBl.blobUrl;
this.clipboardBlob = blob;
this.clipboardUrl = blobUrl;
}
},
_getClipboardBlob: function _getClipboardBlob(clipboard) {
var blob, blobUrl;
for (var i = 0; i < clipboard.items.length; ++i) {
if (clipboard.items[i].kind == 'file' && clipboard.items[i].type.indexOf('image/') !== -1) {
blob = clipboard.items[i].getAsFile();
blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
}
}
return {
blob: blob,
blobUrl: blobUrl
};
},
_handleKeyup: function _handleKeyup(e) {
this._saveLastRange();
@@ -6735,7 +6888,7 @@ var isInitTool = false;
// .replace(/<div>|<p>/g, "\r\n")
// .replace(/<\/div>|<\/p>/g, "")
// );
return toEmojiName(this.$refs.textarea.innerHTML);
return this.IMUI.emojiImageToName(this.$refs.textarea.innerHTML);
},
_checkSubmitDisabled: function _checkSubmitDisabled() {
this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
@@ -6748,11 +6901,11 @@ var isInitTool = false;
this._checkSubmitDisabled();
},
_handleChangeFile: function _handleChangeFile(e) {
var _this4 = this;
var _this5 = this;
var fileInput = this.$refs.fileInput;
Array.from(fileInput.files).forEach(function (file) {
_this4.$emit("upload", file);
_this5.$emit("upload", file);
});
fileInput.value = "";
},
@@ -6764,7 +6917,7 @@ var isInitTool = false;
this.$forceUpdate();
},
setValue: function setValue(val) {
this.$refs.textarea.innerHTML = val;
this.$refs.textarea.innerHTML = this.IMUI.emojiNameToImage(val);
this._checkSubmitDisabled();
}
@@ -6796,86 +6949,6 @@ var editor_component = normalizeComponent(
)
/* harmony default export */ var editor = (editor_component.exports);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
var external_commonjs_vue_commonjs2_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_root_Vue_);
// CONCATENATED MODULE: ./packages/directives/dropdown.js
var dropdown_popover;
var hidePopover = function hidePopover() {
if (dropdown_popover) dropdown_popover.style.display = 'none';
};
var showPopover = function showPopover() {
if (dropdown_popover) dropdown_popover.style.display = 'block';
};
document.addEventListener('click', function (e) {
hidePopover();
});
/* harmony default export */ var dropdown = ({
hide: hidePopover,
bind: function bind(el, binding, vnode) {
el.addEventListener('contextmenu', function (e) {
if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
var component;
var visibleItems = [];
if (binding.modifiers.message) component = vnode.context;else if (binding.modifiers.contact) component = vnode.child;
if (!dropdown_popover) {
dropdown_popover = document.createElement('div');
dropdown_popover.className = 'lemon-dropdown';
document.body.appendChild(dropdown_popover);
}
dropdown_popover.innerHTML = binding.value.map(function (item) {
var visible;
if (isFunction(item.visible)) {
visible = item.visible(component);
} else {
visible = item.visible === undefined ? true : item.visible;
}
if (visible) {
visibleItems.push(item);
var icon = item.icon ? "<i class=\"lemon-dropdown__icon ".concat(item.icon, "\"></i>") : '';
return "<div style=\"color:".concat(item.color, "\" title=\"").concat(item.text, "\" class=\"lemon-dropdown__item\">").concat(icon, "<span>").concat(item.text, "</span></div>");
}
return '';
}).join("");
dropdown_popover.style.top = "".concat(e.pageY, "px");
dropdown_popover.style.left = "".concat(e.pageX, "px");
dropdown_popover.childNodes.forEach(function (node, index) {
var _visibleItems$index = visibleItems[index],
click = _visibleItems$index.click,
_render = _visibleItems$index.render;
node.addEventListener('click', function (e) {
e.stopPropagation();
if (isFunction(click)) click(e, component, hidePopover);
});
if (isFunction(_render)) {
var ins = external_commonjs_vue_commonjs2_vue_root_Vue_default.a.extend({
render: function render(h) {
return _render(h, component, hidePopover);
}
});
var renderComponent = new ins().$mount();
node.querySelector('span').innerHTML = renderComponent.$el.outerHTML;
}
});
showPopover();
});
},
inserted: function inserted(el, binding, vnode) {}
});
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/messages.vue?vue&type=script&lang=js&
@@ -7007,7 +7080,7 @@ document.addEventListener('click', function (e) {
switch (_context2.prev = _context2.next) {
case 0:
target = e.target;
dropdown.hide();
contextmenu.hide();
if (!(target.scrollTop == 0 && this._loading == false && this._loadend == false)) {
_context2.next = 8;
@@ -7208,7 +7281,7 @@ var messages_component = normalizeComponent(
"class": "lemon-message__content-flex"
}, [h("div", {
"directives": [{
name: "dropdown",
name: "lemon-contextmenu",
value: this.IMUI.contextmenu,
modifiers: {
"message": true
@@ -7286,6 +7359,7 @@ var basic_component = normalizeComponent(
function textvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function textvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { textvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { textvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7305,7 +7379,7 @@ function textvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i <
}, {
"scopedSlots": {
content: function content(props) {
var content = _this.IMUI.replaceEmojiName(props.content);
var content = _this.IMUI.emojiNameToImage(props.content);
return h("span", helper_default()([{}, {
"domProps": {
@@ -7604,7 +7678,7 @@ var CONTACT_TYPE = ["many", "single"];
return "[图片]";
},
text: function text(message) {
return this.replaceEmojiName(clearHtml(message.content));
return this.emojiNameToImage(clearHtml(message.content));
},
event: function event(message) {
return '[通知]';
@@ -7701,6 +7775,7 @@ function () {
function componentsvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { componentsvue_type_script_lang_js_ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { componentsvue_type_script_lang_js_ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -7778,6 +7853,7 @@ var renderDrawerContent = function renderDrawerContent() {};
sendText: String,
contextmenu: Array,
contactContextmenu: Array,
avatarCricle: Boolean,
user: {
type: Object,
default: function _default() {
@@ -7789,6 +7865,7 @@ var renderDrawerContent = function renderDrawerContent() {};
this.CacheContactContainer = new memory_MemoryCache();
this.CacheMenuContainer = new memory_MemoryCache();
this.CacheMessageLoaded = new memory_MemoryCache();
this.CacheDraft = new memory_MemoryCache();
return {
drawerVisible: !this.hideDrawer,
currentContactId: null,
@@ -7905,6 +7982,8 @@ var renderDrawerContent = function renderDrawerContent() {};
if (scrollToBottom == true) {
this.messageViewToBottom();
}
this.CacheDraft.remove(message.toContactId);
} else {
updateContact.unread = '+1';
}
@@ -7939,6 +8018,8 @@ var renderDrawerContent = function renderDrawerContent() {};
lastContent: _this4.lastContentRender(message),
lastSendTime: message.sendTime
});
_this4.CacheDraft.remove(message.toContactId);
});
},
_handleUpload: function _handleUpload(file) {
@@ -8083,14 +8164,14 @@ var renderDrawerContent = function renderDrawerContent() {};
_renderSidebarMessage: function _renderSidebarMessage() {
var _this9 = this;
return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-message-top"]), this.lastMessages.map(function (contact) {
return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-message-top"], null, this), this.lastMessages.map(function (contact) {
return _this9._renderContact({
contact: contact,
timeFormat: _this9.contactTimeFormat
}, function () {
return _this9.changeContact(contact.id);
}, _this9.$scopedSlots["sidebar-message"]);
})], DEFAULT_MENU_LASTMESSAGES);
})], DEFAULT_MENU_LASTMESSAGES, useScopedSlot(this.$scopedSlots["sidebar-message-fixedtop"], null, this));
},
_renderContact: function _renderContact(props, onClick, slot) {
var _this10 = this;
@@ -8114,7 +8195,7 @@ var renderDrawerContent = function renderDrawerContent() {};
"lemon-contact--active": this.currentContactId == props.contact.id
},
"directives": [{
name: "dropdown",
name: "lemon-contextmenu",
value: this.contactContextmenu,
modifiers: {
"contact": true
@@ -8136,7 +8217,7 @@ var renderDrawerContent = function renderDrawerContent() {};
var h = this.$createElement;
var prevIndex;
return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-contact-top"]), this.contacts.map(function (contact) {
return this._renderSidebar([useScopedSlot(this.$scopedSlots["sidebar-contact-top"], null, this), this.contacts.map(function (contact) {
if (!contact.index) return;
contact.index = contact.index.replace(/\[[0-9]*\]/, "");
var node = [contact.index !== prevIndex && h("p", {
@@ -8149,9 +8230,9 @@ var renderDrawerContent = function renderDrawerContent() {};
}, _this11.$scopedSlots["sidebar-contact"])];
prevIndex = contact.index;
return node;
})], DEFAULT_MENU_CONTACTS);
})], DEFAULT_MENU_CONTACTS, useScopedSlot(this.$scopedSlots["sidebar-contact-fixedtop"], null, this));
},
_renderSidebar: function _renderSidebar(children, name) {
_renderSidebar: function _renderSidebar(children, name, fixedtop) {
var h = this.$createElement;
return h("div", {
"class": "lemon-sidebar",
@@ -8162,7 +8243,11 @@ var renderDrawerContent = function renderDrawerContent() {};
"on": {
"scroll": this._handleSidebarScroll
}
}, [children]);
}, [h("div", {
"class": "lemon-sidebar__fixed-top"
}, [fixedtop]), h("div", {
"class": "lemon-sidebar__scroll"
}, [children])]);
},
_renderDrawer: function _renderDrawer() {
var h = this.$createElement;
@@ -8275,14 +8360,13 @@ var renderDrawerContent = function renderDrawerContent() {};
return nodes;
},
_handleSidebarScroll: function _handleSidebarScroll() {
dropdown.hide();
contextmenu.hide();
},
_addContact: function _addContact(data, t) {
var type = {
0: "unshift",
1: "push"
}[t]; //this.contacts[type](cloneDeep(data));
}[t];
this.contacts[type](data);
},
_addMessage: function _addMessage(data, contactId, t) {
@@ -8321,12 +8405,15 @@ var renderDrawerContent = function renderDrawerContent() {};
* @param {String} str 被替换的字符串
* @return {String} 替换后的字符串
*/
replaceEmojiName: function replaceEmojiName(str) {
emojiNameToImage: function emojiNameToImage(str) {
return str.replace(/\[!(\w+)\]/gi, function (str, match) {
var file = match;
return emojiMap[file] ? "<img src=\"".concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
return emojiMap[file] ? "<img emoji-name=\"".concat(match, "\" src=\"").concat(emojiMap[file], "\" />") : "[!".concat(match, "]");
});
},
emojiImageToName: function emojiImageToName(str) {
return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
},
updateCurrentMessages: function updateCurrentMessages() {
if (!allMessages[this.currentContactId]) allMessages[this.currentContactId] = [];
this.currentMessages = allMessages[this.currentContactId];
@@ -8349,48 +8436,79 @@ var renderDrawerContent = function renderDrawerContent() {};
regeneratorRuntime.mark(function _callee2(contactId, menuName) {
var _this13 = this;
var h, prevCurrentContactId, editorValue, draft;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
h = this.$createElement;
if (!menuName) {
_context2.next = 4;
_context2.next = 5;
break;
}
this.changeMenu(menuName);
_context2.next = 6;
_context2.next = 7;
break;
case 4:
case 5:
if (!(this._changeContactLock || this.currentContactId == contactId)) {
_context2.next = 6;
_context2.next = 7;
break;
}
return _context2.abrupt("return", false);
case 6:
case 7:
prevCurrentContactId = this.currentContactId; //保存上个聊天目标的草稿
if (prevCurrentContactId) {
editorValue = this.getEditorValue();
if (editorValue) {
this.CacheDraft.set(prevCurrentContactId, editorValue);
this.updateContact({
id: prevCurrentContactId,
lastContent: [h("span", {
"style": "color:red;"
}, ["[\u8349\u7A3F]"]), h("span", helper_default()([{}, {
"domProps": {
innerHTML: this.lastContentRender({
type: 'text',
content: editorValue
})
}
}]))]
});
this.setEditorValue('');
}
}
this.currentContactId = contactId;
if (this.currentContactId) {
_context2.next = 9;
_context2.next = 12;
break;
}
return _context2.abrupt("return", false);
case 9:
case 12:
this.$emit("change-contact", this.currentContact, this);
if (!isFunction(this.currentContact.renderContainer)) {
_context2.next = 12;
_context2.next = 15;
break;
}
return _context2.abrupt("return");
case 12:
case 15:
//填充草稿内容
draft = this.CacheDraft.get(contactId) || "";
if (draft) this.setEditorValue(draft);
if (this.CacheMessageLoaded.has(contactId)) {
this.$refs.messages.loaded();
} else {
@@ -8411,7 +8529,7 @@ var renderDrawerContent = function renderDrawerContent() {};
}, 0);
}
case 14:
case 19:
case "end":
return _context2.stop();
}
@@ -8620,6 +8738,8 @@ var renderDrawerContent = function renderDrawerContent() {};
var index = this.findContactIndexById(id);
if (index === -1) return false;
this.contacts.splice(index, 1);
this.CacheDraft.remove(id);
this.CacheMessageLoaded.remove(id);
return true;
},
@@ -8695,7 +8815,7 @@ var renderDrawerContent = function renderDrawerContent() {};
return this.currentMessages;
},
setEditorValue: function setEditorValue(val) {
this.$refs.editor.setValue(this.replaceEmojiName(val));
this.$refs.editor.setValue(this.emojiNameToImage(val));
},
getEditorValue: function getEditorValue() {
return this.$refs.editor.getFormatValue();
@@ -8753,7 +8873,7 @@ var common = __webpack_require__("6a2b");
// CONCATENATED MODULE: ./packages/directives/index.js
external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dropdown);
external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('LemonContextmenu', contextmenu);
// CONCATENATED MODULE: ./packages/index.js
@@ -8774,7 +8894,7 @@ external_commonjs_vue_commonjs2_vue_root_Vue_default.a.directive('dropdown', dro
var version = "1.4.2";
var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, popover, tabs, basic, message_text, message_image, file, message_event];
var packages_components = [components, components_contact, messages, editor, avatar, badge, components_button, components_popover, tabs, basic, message_text, message_image, file, message_event];
var install = function install(Vue) {
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
dist/index.umd.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/App.vue
+39 -11
View File
@@ -11,7 +11,7 @@
<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=xzUa9CPYQ5KCNQ86h7ep4Z3TtkqJxRZE&jump_from=webapi">QQ交流群：1081773406</a>
</div>
<br/>
<div><a style="font-size:14px;" href="#help1">1.如何创建自定义消息？</a></div>
<div><a style="font-size:14px;" href="#help1">1.如何创建消息？</a></div>
<div><a style="font-size:14px;" href="#help2">2.如何对接后端接口？</a></div>
</div>
<div class="imui-center">
@@ -49,7 +49,7 @@
<lemon-button @click="appendEventMessage">发送 event 消息</lemon-button>
<lemon-button @click="removeMessage">删除最近一条消息</lemon-button>
<lemon-button @click="updateMessage">修改消息</lemon-button>
<lemon-button @click="appendCustomMessage">发送自定义消息</lemon-button>
<lemon-button @click="appendCustomMessage">发送消息</lemon-button>
<br/>
<lemon-button @click="updateContact">修改联系人信息</lemon-button>
<lemon-button @click="changeMenuVisible">切换导航显示</lemon-button>
@@ -96,7 +96,7 @@
</template>
<template #contact-info="contact">
自定义联系人信息 {{ contact.displayName }}
自定义通讯录信息 {{ contact.displayName }}
</template>
<template #sidebar-message="contact">
<lemon-badge :count="contact.unread" style="width:100%">
@@ -110,10 +110,16 @@
<span>{{ contact.displayName }}</span>
</template>
<template #sidebar-message-top>
<div class="bar">自定义消息顶部</div>
<div class="bar">最新消息顶部</div>
</template>
<template #sidebar-contact-top>
<div class="bar">自定义联系人顶部</div>
<div class="bar">联系人顶部</div>
</template>
<template #sidebar-message-fixedtop>
<div class="bar">最新消息顶部 Fixed</div>
</template>
<template #sidebar-contact-fixedtop>
<div class="bar">联系人顶部 Fixed</div>
</template>
</lemon-imui>
</div>
@@ -128,6 +134,7 @@
:user="user"
ref="SimpleIMUI"
width="340px"
:avatar-cricle="true"
simple
@pull-messages="handlePullMessages"
@message-click="handleMessageClick"
@@ -363,6 +370,13 @@
<td width="100">default</td>
<td></td>
</tr>
<tr>
<td width="150">avatarCricle</td>
<td width="350">使用圆形头像</td>
<td width="150">Boolean</td>
<td width="100">false</td>
<td></td>
</tr>
<tr>
<td width="150">sendText</td>
<td width="350">发送消息按钮的文字</td>
@@ -722,13 +736,23 @@
</tr>
<tr>
<td width="150">sidebar-message-top</td>
<td width="350">左侧最新消息列表的顶部</td>
<td width="150">-</td>
<td width="350">左侧最新消息列表的顶部，会随列表滚动</td>
<td width="150">instance</td>
</tr>
<tr>
<td width="150">sidebar-contact-top</td>
<td width="350">左侧联系人列表的顶部</td>
<td width="150">-</td>
<td width="350">左侧联系人列表的顶部，会随列表滚动</td>
<td width="150">instance</td>
</tr>
<tr>
<td width="150">sidebar-message-fixedtop</td>
<td width="350">固定在左侧最新消息列表的顶部</td>
<td width="150">instance</td>
</tr>
<tr>
<td width="150">sidebar-contact-fixedtop</td>
<td width="350">固定在左侧联系人列表的顶部</td>
<td width="150">instance</td>
</tr>
<tr>
<td width="150">contact-info</td>
@@ -776,9 +800,9 @@
</tr>
</table>
<div class="title" id="help1">如何创建自定义消息？</div>
<div class="title" id="help1">如何创建消息？</div>
<div>
<p>Lemon-IMUI 目前内置了file、image、text、event四种消息类型，在实际应用当中肯定是不够的哦，咋办？没事的，我们继续往下see。<br/>要创建自定义消息首先要确定新消息的 Message 结构。</p>
<p>Lemon-IMUI 目前内置了file、image、text、event四种消息类型，在实际应用当中肯定是不够的哦，咋办？没事的，我们继续往下see。<br/>要创建消息首先要确定新消息的 Message 结构。</p>
<pre>
{
//值为 voice，用于解析的组件 name 必须为 lemonMessageVoice
@@ -1092,6 +1116,10 @@ export default {
},
mounted() {
const contactData1 = {
id: "contact-1",
displayName: "工作协作群",
examples/dist/css/index.da20b752.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
examples/dist/css/index.fed1a091.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
examples/dist/index.html
Vendored
+1 -1
View File
@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.fed1a091.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.4318ecd4.js rel=preload as=script><link href=css/index.fed1a091.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.4318ecd4.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.da20b752.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.f43bda32.js rel=preload as=script><link href=css/index.da20b752.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.f43bda32.js></script></body></html>
examples/dist/js/index.4318ecd4.js
Vendored
-1
View File
File diff suppressed because one or more lines are too long
examples/dist/js/index.f43bda32.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "lemon-imui",
"version": "1.5.0",
"version": "1.6.0",
"main": "dist/index.umd.min.js",
"description": "基于 VUE2.0 的 IM 聊天组件",
"homepage": "https://github.com/fanjyy/lemon-imui",
packages/components/avatar.vue
+10 -1
View File
@@ -1,12 +1,19 @@
<script>
export default {
name: "LemonAvatar",
inject:['IMUI'],
props: {
src: String,
icon: {
type: String,
default: "lemon-icon-people"
},
circle:{
type:Boolean,
default(){
return this.IMUI ? this.IMUI.avatarCricle : false;
},
},
size: {
type: Number,
default: 32
@@ -21,7 +28,7 @@ export default {
return (
<span
style={this.style}
class="lemon-avatar"
class={['lemon-avatar',{'lemon-avatar--circle':this.circle}]}
on-click={e => this.$emit("click", e)}
>
{this.imageFinishLoad && <i class={this.icon} />}
@@ -65,6 +72,8 @@ export default {
overflow hidden
vertical-align middle
border-radius 4px
+m(circle)
border-radius 50%
img
width 100%
height 100%
packages/components/button.vue
+21 -10
View File
@@ -2,12 +2,16 @@
export default {
name: "LemonButton",
props: {
color:{
type:String,
default:'default'
},
disabled: Boolean
},
render() {
return (
<button
class="lemon-button"
class={['lemon-button',`lemon-button--color-${this.color}`]}
disabled={this.disabled}
type="button"
on-click={this._handleClick}
@@ -47,13 +51,20 @@ export default {
background-color #fff
box-shadow 0 2px 0 rgba(0, 0, 0, 0.015)
text-shadow 0 -1px 0 rgba(0, 0, 0, 0.12)
&:hover:not([disabled])
border-color #666
color #333
&:active
background-color #ddd
&[disabled]
cursor not-allowed
color #aaa
background #eee
+m(color-default)
&:hover:not([disabled])
border-color #666
color #333
&:active
background-color #ddd
&[disabled]
cursor not-allowed
color #aaa
background #eee
+m(color-grey)
background #e1e1e1
border-color #e1e1e1
color #666
&:hover:not([disabled])
border-color #bbb
</style>
packages/components/contact.vue
+6 -4
View File
@@ -126,15 +126,17 @@ export default {
+e(content)
font-size 12px
color #999
padding-top 3px
height 14px
line-height 14px
height 18px
line-height 18px
margin-top 1px !important
ellipsis()
img
height 14px
display inline-block
vertical-align top
vertical-align middle
margin 0 1px
position relative
top -1px
+m(name-center)
+e(label)
padding-bottom 0
packages/components/editor.vue
+71 -5
View File
@@ -35,7 +35,10 @@ export default {
},
},
data() {
this.clipboardBlob = null;
return {
//剪切板图片URL
clipboardUrl:'',
submitDisabled: true,
proxyTools:[],
accept: ""
@@ -47,6 +50,9 @@ export default {
}else{
this.initTools([{name:'emoji'},{name:'uploadFile'},{name:'uploadImage'}]);
}
this.IMUI.$on('change-contact',()=>{
this.closeClipboardImage();
})
},
render() {
const toolLeft = [];
@@ -74,6 +80,15 @@ export default {
return (
<div class="lemon-editor">
{this.clipboardUrl && <div class="lemon-editor__clipboard-image">
<img src={this.clipboardUrl} />
<div>
<lemon-button style={{marginRight:'10px'}} on-click={this.closeClipboardImage} color="grey">
取消
</lemon-button>
<lemon-button on-click={this.sendClipboardImage}>发送图片</lemon-button>
</div>
</div>}
<input
style="display:none"
type="file"
@@ -115,6 +130,15 @@ export default {
);
},
methods: {
closeClipboardImage(){
this.clipboardUrl = '';
this.clipboardBlob = null;
},
sendClipboardImage(){
if(!this.clipboardBlob) return;
this.$emit("upload", this.clipboardBlob);
this.closeClipboardImage();
},
/**
* 初始化工具栏
*/
@@ -224,12 +248,28 @@ export default {
e.preventDefault();
const clipboardData = e.clipboardData || window.clipboardData;
const text = clipboardData.getData("Text");
if(window.clipboardData){
this.$refs.textarea.innerHTML = text;
if(text){
if(window.clipboardData){
this.$refs.textarea.innerHTML = text;
}else{
exec(text, "insertText");
}
}else{
exec(text, "insertText");
const {blob,blobUrl} = this._getClipboardBlob(clipboardData);
this.clipboardBlob = blob;
this.clipboardUrl = blobUrl;
}
},
_getClipboardBlob(clipboard){
let blob,blobUrl;
for (var i = 0; i < clipboard.items.length; ++i) {
if ( clipboard.items[i].kind == 'file' && clipboard.items[i].type.indexOf('image/') !== -1 ) {
blob = clipboard.items[i].getAsFile();
blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
}
}
return {blob,blobUrl};
},
_handleKeyup(e) {
this._saveLastRange();
this._checkSubmitDisabled();
@@ -246,7 +286,7 @@ export default {
// .replace(/<div>|<p>/g, "\r\n")
// .replace(/<\/div>|<\/p>/g, "")
// );
return toEmojiName(this.$refs.textarea.innerHTML);
return this.IMUI.emojiImageToName(this.$refs.textarea.innerHTML);
},
_checkSubmitDisabled() {
this.submitDisabled = !clearHtmlExcludeImg(this.$refs.textarea.innerHTML.trim());
@@ -272,7 +312,7 @@ export default {
this.$forceUpdate();
},
setValue(val){
this.$refs.textarea.innerHTML = val;
this.$refs.textarea.innerHTML = this.IMUI.emojiNameToImage(val);
this._checkSubmitDisabled();
},
}
@@ -283,6 +323,7 @@ export default {
gap = 10px;
+b(lemon-editor)
height 200px
position relative
flex-column()
+e(tool)
display flex
@@ -317,6 +358,31 @@ gap = 10px;
overflow-x hidden
overflow-y auto
scrollbar-light()
+e(clipboard-image)
position absolute
top 0
left 0
width 100%
height 100%
flex-column()
justify-content center
align-items center
background #f4f4f4
z-index 1
img
max-height 66%
max-width 80%
background #e9e9e9
//box-shadow 0 0 20px rgba(0,0,0,0.15)
user-select none
cursor pointer
border-radius 4px
margin-bottom 10px
border 3px dashed #ddd !important
box-sizing border-box
.clipboard-popover-title
font-size 14px
color #333
+e(input)
height 100%
box-sizing border-box
packages/components/index.vue
+68 -21
View File
@@ -1,7 +1,7 @@
<script>
import { useScopedSlot, funCall, generateUUID,cloneDeep } from "utils";
import { isFunction, isString, isEmpty } from "utils/validate";
import dropdown from "../directives/dropdown";
import contextmenu from "../directives/contextmenu";
import {
DEFAULT_MENUS,
DEFAULT_MENU_LASTMESSAGES,
@@ -71,6 +71,7 @@ export default {
sendText:String,
contextmenu:Array,
contactContextmenu:Array,
avatarCricle:Boolean,
user: {
type: Object,
default: () => {
@@ -82,6 +83,7 @@ export default {
this.CacheContactContainer = new MemoryCache();
this.CacheMenuContainer = new MemoryCache();
this.CacheMessageLoaded = new MemoryCache();
this.CacheDraft = new MemoryCache();
return {
drawerVisible: !this.hideDrawer,
currentContactId:null,
@@ -173,6 +175,7 @@ export default {
if(scrollToBottom == true){
this.messageViewToBottom();
}
this.CacheDraft.remove(message.toContactId);
}else{
updateContact.unread = '+1';
}
@@ -199,6 +202,7 @@ export default {
lastContent: this.lastContentRender(message),
lastSendTime: message.sendTime
});
this.CacheDraft.remove(message.toContactId);
});
},
_handleUpload(file) {
@@ -326,7 +330,7 @@ export default {
_renderSidebarMessage() {
return this._renderSidebar(
[
useScopedSlot(this.$scopedSlots["sidebar-message-top"]),
useScopedSlot(this.$scopedSlots["sidebar-message-top"],null,this),
this.lastMessages.map(contact => {
return this._renderContact(
{
@@ -338,7 +342,8 @@ export default {
);
})
],
DEFAULT_MENU_LASTMESSAGES
DEFAULT_MENU_LASTMESSAGES,
useScopedSlot(this.$scopedSlots["sidebar-message-fixedtop"],null,this)
);
},
_renderContact(props, onClick,slot) {
@@ -363,7 +368,7 @@ export default {
class={{
"lemon-contact--active": this.currentContactId == props.contact.id
}}
v-dropdown_contact={this.contactContextmenu}
v-lemon-contextmenu_contact={this.contactContextmenu}
props={props}
on-click={click}
scopedSlots={{default:slot}}
@@ -374,7 +379,7 @@ export default {
let prevIndex;
return this._renderSidebar(
[
useScopedSlot(this.$scopedSlots["sidebar-contact-top"]),
useScopedSlot(this.$scopedSlots["sidebar-contact-top"],null,this),
this.contacts.map(contact => {
if (!contact.index) return;
contact.index = contact.index.replace(/\[[0-9]*\]/, "");
@@ -397,13 +402,19 @@ export default {
return node;
})
],
DEFAULT_MENU_CONTACTS
DEFAULT_MENU_CONTACTS,
useScopedSlot(this.$scopedSlots["sidebar-contact-fixedtop"],null,this)
);
},
_renderSidebar(children, name) {
_renderSidebar(children, name,fixedtop) {
return (
<div class="lemon-sidebar" v-show={this.activeSidebar == name} on-scroll={this._handleSidebarScroll}>
{children}
<div class="lemon-sidebar__fixed-top">
{fixedtop}
</div>
<div class="lemon-sidebar__scroll">
{children}
</div>
</div>
);
},
@@ -514,14 +525,13 @@ export default {
return nodes;
},
_handleSidebarScroll(){
dropdown.hide();
contextmenu.hide();
},
_addContact(data, t) {
const type = {
0: "unshift",
1: "push"
}[t];
//this.contacts[type](cloneDeep(data));
this.contacts[type](data);
},
_addMessage(data, contactId, t) {
@@ -553,14 +563,17 @@ export default {
* @param {String} str 被替换的字符串
* @return {String} 替换后的字符串
*/
replaceEmojiName(str) {
emojiNameToImage(str) {
return str.replace(/\[!(\w+)\]/gi, (str, match) => {
const file = match;
return emojiMap[file]
? `<img src="${emojiMap[file]}" />`
? `<img emoji-name="${match}" src="${emojiMap[file]}" />`
: `[!${match}]`;
});
},
emojiImageToName(str){
return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]")
},
updateCurrentMessages(){
if(!allMessages[this.currentContactId]) allMessages[this.currentContactId] = []
this.currentMessages = allMessages[this.currentContactId];
@@ -581,13 +594,36 @@ export default {
}else{
if(this._changeContactLock || this.currentContactId == contactId) return false;
}
const prevCurrentContactId = this.currentContactId;
//保存上个聊天目标的草稿
if(prevCurrentContactId){
const editorValue = this.getEditorValue();
if(editorValue){
this.CacheDraft.set(prevCurrentContactId,editorValue);
this.updateContact({
id:prevCurrentContactId,
lastContent:[
<span style="color:red;">[草稿]</span>,
<span domProps={{
innerHTML:this.lastContentRender({type:'text',content:editorValue})
}}></span>
],
});
this.setEditorValue('');
}
}
this.currentContactId = contactId;
if(!this.currentContactId) return false;
this.$emit("change-contact", this.currentContact,this);
if (isFunction(this.currentContact.renderContainer)) {
return;
}
//填充草稿内容
const draft = this.CacheDraft.get(contactId) || "";
if(draft) this.setEditorValue(draft);
if (this.CacheMessageLoaded.has(contactId)) {
this.$refs.messages.loaded();
@@ -785,6 +821,8 @@ export default {
const index = this.findContactIndexById(id);
if(index === -1) return false;
this.contacts.splice(index,1);
this.CacheDraft.remove(id);
this.CacheMessageLoaded.remove(id);
return true;
},
/**
@@ -850,7 +888,7 @@ export default {
return this.currentMessages;
},
setEditorValue(val){
this.$refs.editor.setValue(this.replaceEmojiName(val));
this.$refs.editor.setValue(this.emojiNameToImage(val));
},
getEditorValue(){
return this.$refs.editor.getFormatValue();
@@ -933,8 +971,12 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
+b(lemon-sidebar)
width 250px
background #efefef
overflow-y auto
scrollbar-light()
display flex
flex-direction column
+e(scroll){
overflow-y auto
scrollbar-light()
}
+e(label)
padding 6px 14px 6px 14px
color #666
@@ -1014,7 +1056,11 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
.lemon-menu
.lemon-sidebar
display none
+b(lemon-dropdown)
.lemon-wrapper--simple
.lemon-menu
.lemon-sidebar
display none
+b(lemon-contextmenu)
border-radius 4px
font-size 14px
font-variant tabular-nums
@@ -1022,21 +1068,22 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
color rgba(0, 0, 0, 0.65)
z-index 10
background-color #fff
border-radius 4px
border-radius 6px
box-shadow 0 2px 8px rgba(0, 0, 0, 0.06)
position absolute
transform-origin 50% 150%
box-sizing border-box
user-select none
overflow hidden
min-width 120px
+e(item)
font-size 12px
line-height 14px
padding 8px 10px
font-size 14px
line-height 16px
padding 10px 15px
cursor pointer
display flex
align-items center
color #444
color #333
> span
display inline-block
flex none
packages/components/message/basic.vue
+1 -1
View File
@@ -67,7 +67,7 @@ export default {
</div>
<div class="lemon-message__content-flex">
<div
v-dropdown_message={this.IMUI.contextmenu}
v-lemon-contextmenu_message={this.IMUI.contextmenu}
class="lemon-message__content"
on-click={e => {
this._emitClick(e, "content");
packages/components/message/text.vue
+1 -1
View File
@@ -10,7 +10,7 @@ export default {
props={{ ...this.$attrs }}
scopedSlots={{
content: props => {
const content = this.IMUI.replaceEmojiName(props.content);
const content = this.IMUI.emojiNameToImage(props.content);
return <span domProps={{ innerHTML: content }} />;
}
}}
packages/components/messages.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<script>
import { hoursTimeFormat } from "utils";
import dropdown from "../directives/dropdown";
import contextmenu from "../directives/contextmenu";
export default {
name: "LemonMessages",
components: {},
@@ -111,7 +111,7 @@ export default {
},
async _handleScroll(e) {
const { target } = e;
dropdown.hide();
contextmenu.hide();
if (
target.scrollTop == 0 &&
this._loading == false &&
packages/components/popover.vue
+6 -3
View File
@@ -1,6 +1,6 @@
<script>
const popoverCloseQueue = [];
const popoverCloseAll = () => popoverCloseQueue.forEach(callback => callback());
import contextmenu from "../directives/contextmenu";
const triggerEvents = {
hover(el) {},
focus(el) {
@@ -14,6 +14,7 @@ const triggerEvents = {
click(el) {
el.addEventListener("click", e => {
e.stopPropagation();
contextmenu.hide();
this.changeVisible();
});
},
@@ -59,7 +60,6 @@ export default {
style={this.popoverStyle}
on-click={e => e.stopPropagation()}
>
<div class="lemon-popover__title" />
<div class="lemon-popover__content">{this.$slots.content}</div>
<div class="lemon-popover__arrow" />
</div>
@@ -96,9 +96,12 @@ export default {
this.visible ? this.close() : this.open();
},
open() {
popoverCloseAll();
this.closeAll();
this.visible = true;
},
closeAll(){
popoverCloseQueue.forEach(callback => callback())
},
close() {
this.visible = false;
}
packages/directives/dropdown.js → packages/directives/contextmenu.js
+5 -3
View File
@@ -1,5 +1,6 @@
import Vue from 'vue';
import {isFunction,isEmpty} from 'utils/validate';
import LemonPopover from '../components/popover.vue';
let popover;
const hidePopover = ()=>{
@@ -17,13 +18,14 @@ export default{
el.addEventListener('contextmenu',(e)=>{
if(isEmpty(binding.value) || !Array.isArray(binding.value)) return;
e.preventDefault();
LemonPopover.methods.closeAll()
let component;
let visibleItems = []
if(binding.modifiers.message) component = vnode.context;
else if(binding.modifiers.contact) component = vnode.child;
if(!popover){
popover = document.createElement('div');
popover.className = 'lemon-dropdown';
popover.className = 'lemon-contextmenu';
document.body.appendChild(popover);
}
popover.innerHTML = binding.value.map((item)=>{
@@ -36,8 +38,8 @@ export default{
if(visible){
visibleItems.push(item);
const icon = item.icon ? `<i class="lemon-dropdown__icon ${item.icon}"></i>` : '';
return `<div style="color:${item.color}" title="${item.text}" class="lemon-dropdown__item">${icon}<span>${item.text}</span></div>`;
const icon = item.icon ? `<i class="lemon-contextmenu__icon ${item.icon}"></i>` : '';
return `<div style="color:${item.color}" title="${item.text}" class="lemon-contextmenu__item">${icon}<span>${item.text}</span></div>`;
}
return '';
}).join("");
packages/directives/index.js
+2 -2
View File
@@ -1,3 +1,3 @@
import Vue from 'vue';
import Dropdown from './dropdown';
Vue.directive('dropdown',Dropdown);
import Contextmenu from './contextmenu';
Vue.directive('LemonContextmenu',Contextmenu);
packages/lastContentRender.js
+1 -1
View File
@@ -7,7 +7,7 @@ export default {
return "[图片]";
},
text(message) {
return this.replaceEmojiName(clearHtml(message.content));
return this.emojiNameToImage(clearHtml(message.content));
},
event(message){
return '[通知]';
packages/utils/index.js
-3
View File
@@ -103,9 +103,6 @@ export function mergeDeep(o1, o2) {
return o1;
}
export function toEmojiName(str) {
return str.replace(/<img emoji-name=\"([^\"]*?)\" [^>]*>/gi, "[!$1]");
}
export function formatByte(value) {
if (null == value || value == "") {
return "0 Bytes";