@opentiny/vue-renderless 3.1.0-alpha.0 → 3.4.7

package/rich-text/index.js

@@ -0,0 +1,176 @@
+import { extend } from '@opentiny/vue-renderless/common/object';
+import { xss } from '@opentiny/vue-renderless/common';
+import { getToolbarTips, defaultOptions } from './options';
+import registerTableModule from './table-module';
+import registerCustomClipboard from './clipboard';
+export var initContent = function initContent(_ref) {
+  var state = _ref.state;
+  return function () {
+    if (state.quill) {
+      if (state.content && state.content !== state.innerContent) {
+        state.innerContent = state.content;
+        state.quill.pasteHTML(state.content);
+      } else if (!state.content) {
+        state.quill.setText('');
+      }
+    }
+  };
+};
+var getOuterHTML = function getOuterHTML(el) {
+  if (!el.outerHTML) {
+    var container = document.createElement('div');
+    container.appendChild(el);
+    return container.innerHTML;
+  } else {
+    return el.outerHTML;
+  }
+};
+export var initQuill = function initQuill(_ref2) {
+  var api = _ref2.api,
+    emit = _ref2.emit,
+    props = _ref2.props,
+    refs = _ref2.refs,
+    service = _ref2.service,
+    state = _ref2.state,
+    Quill = _ref2.Quill,
+    ImageDrop = _ref2.ImageDrop,
+    ImageUpload = _ref2.ImageUpload,
+    FileUpload = _ref2.FileUpload;
+  return function () {
+    state.innerOptions = extend(true, {}, defaultOptions, props.globalOptions, props.options);
+    if (document.caretRangeFromPoint) {
+      if (props.imageDrop) {
+        Quill.register('modules/imageDrop', ImageDrop, true);
+        state.innerOptions.modules.imageDrop = props.imageDrop;
+      }
+      if (props.imageUpload) {
+        Quill.register('modules/imageUpload', ImageUpload, true);
+        state.innerOptions.modules.imageUpload = props.imageUpload;
+      }
+      if (props.fileUpload) {
+        Quill.register('modules/fileUpload', FileUpload, true);
+        state.innerOptions.modules.fileUpload = extend(true, {}, {
+          httpRequest: service && service.network.request
+        }, props.fileUpload, {
+          url: state.fileUploadUrl
+        });
+      }
+    }
+    registerTableModule(Quill);
+    if (state.innerOptions.modules) {
+      state.innerOptions.modules.tableModule = props.tableModule === true;
+    }
+    registerCustomClipboard(Quill, props.keepClass);
+    state.quill = Object.freeze(new Quill(refs.editor, state.innerOptions));
+    state.quill.enable(false);
+    state.quill.on('selection-change', api.selectionChange);
+    state.quill.on('text-change', api.textChange);
+    if (state.content) {
+      state.quill.pasteHTML(state.content);
+    }
+    if (!props.disabled) {
+      state.quill.enable(true);
+    }
+    emit('ready', state.quill);
+    api.setToolbarTips();
+  };
+};
+export var setToolbarTips = function setToolbarTips(_ref3) {
+  var refs = _ref3.refs,
+    t = _ref3.t,
+    vm = _ref3.vm;
+  return function () {
+    var tip;
+    var item = getToolbarTips(t);
+    var length = item.length;
+    var richTextEl = vm.$el;
+    var _loop = function _loop(i) {
+      tip = richTextEl.querySelectorAll('.quill-editor ' + item[i].Choice);
+      if (tip.length) {
+        Array.prototype.slice.call(tip).forEach(function (ite) {
+          ite.setAttribute('title', item[i].title);
+        });
+      }
+    };
+    for (var i = 0; i < length; i++) {
+      _loop(i);
+    }
+    tip = richTextEl.querySelectorAll('.quill-editor .ql-file');
+    if (tip.length) {
+      var iconEl = refs.iconFile.$el;
+      Array.prototype.slice.call(tip).forEach(function (ite) {
+        ite.innerHTML = getOuterHTML(iconEl);
+      });
+    }
+  };
+};
+export var getFileUploadUrl = function getFileUploadUrl(_ref4) {
+  var service = _ref4.service;
+  return function () {
+    return service ? service.common.getFileUploadUrl() : Promise.resolve('');
+  };
+};
+export var selectionChange = function selectionChange(_ref5) {
+  var emit = _ref5.emit,
+    state = _ref5.state;
+  return function (range) {
+    if (!range) {
+      emit('blur', state.quill);
+    } else {
+      emit('focus', state.quill);
+    }
+  };
+};
+export var textChange = function textChange(_ref6) {
+  var emit = _ref6.emit,
+    refs = _ref6.refs,
+    state = _ref6.state;
+  return function () {
+    var html = refs.editor.children[0].innerHTML;
+    var quill = state.quill;
+    var text = state.quill.getText();
+    if (html === '<p><br></p>') {
+      html = '';
+    }
+    state.innerContent = html;
+    emit('update:modelValue', html);
+    emit('change', {
+      html: html,
+      text: text,
+      quill: quill
+    });
+  };
+};
+export var mounted = function mounted(_ref7) {
+  var api = _ref7.api,
+    props = _ref7.props,
+    state = _ref7.state,
+    i18n = _ref7.i18n,
+    watch = _ref7.watch;
+  return function () {
+    if (props.fileUpload && !props.fileUpload.url) {
+      api.getFileUploadUrl().then(function (url) {
+        url = xss.filterUrl(url);
+        state.fileUploadUrl = url;
+        api.initQuill();
+      });
+    } else {
+      api.initQuill();
+    }
+    if (i18n) {
+      watch(function () {
+        return i18n.locale;
+      }, api.setToolbarTips);
+    }
+  };
+};
+export var beforeUnmount = function beforeUnmount(_ref8) {
+  var api = _ref8.api,
+    state = _ref8.state;
+  return function () {
+    state.quill.off('selection-change', api.selectionChange);
+    state.quill.off('text-change', api.textChange);
+    state.quill = null;
+    delete state.quill;
+  };
+};

package/rich-text/module/file-upload.js

@@ -0,0 +1,118 @@
+import { xss } from '@opentiny/vue-renderless/common';
+var Upload = function Upload(quill, options) {
+  this.quill = quill;
+  this.options = options || {};
+  this.quill.getModule('toolbar').addHandler('file', this.selectLocalFile.bind(this));
+};
+var FormDataRequest = function FormDataRequest(_ref) {
+  var file = _ref.file,
+    url = _ref.url,
+    method = _ref.method,
+    name = _ref.name,
+    headers = _ref.headers,
+    callbackOK = _ref.callbackOK,
+    callbackKO = _ref.callbackKO;
+  var fd = new FormData();
+  url = xss.filterUrl(url);
+  fd.append(name, file, file.name);
+  this.options.csrf && fd.append(this.options.csrf.token, this.options.csrf.hash);
+  if (this.options.httpRequest) {
+    var option = {
+      url: url,
+      headers: headers,
+      method: method,
+      data: fd,
+      onSuccess: function (res) {
+        callbackOK(res && res.data, this.insert.bind(this));
+      }.bind(this),
+      onError: function onError(error) {
+        callbackKO(error);
+      }
+    };
+    var req = this.options.httpRequest(option);
+    if (req && req.then) {
+      req.then(option.onSuccess, option.onError);
+    }
+  } else {
+    var xmlRequest = new XMLHttpRequest();
+    xmlRequest.withCredentials = this.options.withCredentials !== false;
+    xmlRequest.open(method, url, true);
+    for (var index in headers) {
+      if (Object.prototype.hasOwnProperty.call(headers, index)) {
+        xmlRequest.setRequestHeader(index, headers[index]);
+      }
+    }
+    xmlRequest.onload = function () {
+      if (xmlRequest.status === 200) {
+        callbackOK(JSON.parse(xmlRequest.responseText), this.insert.bind(this));
+      } else {
+        callbackKO({
+          code: xmlRequest.status,
+          type: xmlRequest.statusText,
+          body: xmlRequest.responseText
+        });
+      }
+    }.bind(this);
+    xmlRequest.send(fd);
+  }
+};
+var defaultUploader = function defaultUploader(file) {
+  var url = this.options.url,
+    method = this.options.method || 'POST',
+    name = this.options.name || 'file',
+    headers = this.options.headers || {},
+    callbackOK = this.options.success || this.uploadCallbackOK.bind(this),
+    callbackKO = this.options.fail || this.uploadCallbackKO.bind(this);
+  if (url) {
+    FormDataRequest.call(this, {
+      file: file,
+      url: url,
+      method: method,
+      name: name,
+      headers: headers,
+      callbackOK: callbackOK,
+      callbackKO: callbackKO
+    });
+  } else {
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      callbackOK(event.target.result, this.insert.bind(this));
+    }.bind(this);
+    reader.readAsDataURL(file);
+  }
+};
+Upload.prototype.selectLocalFile = function () {
+  var input = document.createElement('input');
+  input.setAttribute('type', 'file');
+  input.click();
+  input.onchange = function () {
+    var file = input.files[0];
+    var checkBeforeSend = this.options.checkBeforeSend || this.checkBeforeSend.bind(this);
+    checkBeforeSend(file, this.sendToServer.bind(this));
+  }.bind(this);
+};
+Upload.prototype.checkBeforeSend = function (file, next) {
+  next(file);
+};
+Upload.prototype.sendToServer = function (file) {
+  var _this = this;
+  if (this.options.customUploader) {
+    this.options.customUploader(file, function (file) {
+      _this.insert(file).bind(_this);
+    });
+  } else {
+    defaultUploader.call(this, file);
+  }
+};
+Upload.prototype.insert = function (file) {
+  var index = (this.quill.getSelection() || {}).index || this.quill.getLength();
+  this.quill.insertText(index, file.name, 'link', file.url);
+  this.quill.setSelection(index + file.name.length);
+};
+Upload.prototype.uploadCallbackOK = function (response, next) {
+  next(response);
+};
+Upload.prototype.uploadCallbackKO = function (error) {
+  throw new Error(error);
+};
+export default Upload;

package/rich-text/module/image-drop.js

@@ -0,0 +1,54 @@
+var ImageDrop = function ImageDrop(quill) {
+  this.quill = quill;
+  this.handleDrop = this.handleDrop.bind(this);
+  this.handlePaste = this.handlePaste.bind(this);
+  this.quill.root.addEventListener('drop', this.handleDrop, false);
+  this.quill.root.addEventListener('paste', this.handlePaste, false);
+};
+ImageDrop.prototype.handleDrop = function (e) {
+  e.preventDefault();
+  if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length) {
+    if (document.caretRangeFromPoint) {
+      var selection = document.getSelection();
+      var range = document.caretRangeFromPoint(e.clientX, e.clientY);
+      if (selection && range) {
+        selection.setBaseAndExtent(range.startContainer, range.startOffset, range.startContainer, range.startOffset);
+      }
+    }
+    this.readFiles(e.dataTransfer.files, this.insert.bind(this));
+  }
+};
+ImageDrop.prototype.handlePaste = function (e) {
+  var _this = this;
+  if (!e.clipboardData || !e.clipboardData.items || !e.clipboardData.items.length) {
+    return;
+  }
+  this.readFiles(e.clipboardData.items, function (dataUrl) {
+    var selection = _this.quill.getSelection();
+    if (!selection) {
+      setTimeout(function () {
+        _this.insert(dataUrl);
+      }, 0);
+    }
+  });
+};
+ImageDrop.prototype.insert = function (dataUrl) {
+  var index = (this.quill.getSelection() || {}).index || this.quill.getLength();
+  this.quill.insertEmbed(index, 'image', dataUrl, 'user');
+};
+ImageDrop.prototype.readFiles = function (files, callback) {
+  [].forEach.call(files, function (file) {
+    if (!file.type.match(/^image\/(gif|jpe?g|a?png|svg|webp|bmp|vnd\.microsoft\.icon)/i)) {
+      return;
+    }
+    var reader = new FileReader();
+    reader.onload = function (e) {
+      callback(e.target.result);
+    };
+    var blob = file.getAsFile ? file.getAsFile() : file;
+    if (blob instanceof Blob) {
+      reader.readAsDataURL(blob);
+    }
+  });
+};
+export default ImageDrop;

package/rich-text/module/image-upload.js

@@ -0,0 +1,84 @@
+import { xss } from '@opentiny/vue-renderless/common';
+var ImageUpload = function ImageUpload(quill, options) {
+  this.quill = quill;
+  this.options = options || {};
+  this.quill.getModule('toolbar').addHandler('image', this.selectLocalImage.bind(this));
+};
+ImageUpload.prototype.selectLocalImage = function () {
+  var input = document.createElement('input');
+  input.setAttribute('type', 'file');
+  input.click();
+  input.onchange = function () {
+    var file = input.files[0];
+    if (/^image\//.test(file.type)) {
+      var checkBeforeSend = this.options.checkBeforeSend || this.checkBeforeSend.bind(this);
+      checkBeforeSend(file, this.sendToServer.bind(this));
+    } else {
+      throw new Error('You could only upload images.');
+    }
+  }.bind(this);
+};
+ImageUpload.prototype.checkBeforeSend = function (file, next) {
+  next(file);
+};
+ImageUpload.prototype.sendToServer = function (file) {
+  var _this = this;
+  if (this.options.customUploader) {
+    this.options.customUploader(file, function (dataUrl) {
+      _this.insert(dataUrl);
+    });
+  } else {
+    var url = xss.filterUrl(this.options.url),
+      method = this.options.method || 'POST',
+      name = this.options.name || 'image',
+      headers = this.options.headers || {},
+      callbackOK = this.options.success || this.uploadImageCallbackOK.bind(this),
+      callbackKO = this.options.fail || this.uploadImageCallbackKO.bind(this);
+    if (url) {
+      var fd = new FormData();
+      fd.append(name, file);
+      if (this.options.csrf) {
+        fd.append(this.options.csrf.token, this.options.csrf.hash);
+      }
+      var xmlHttpRequest = new XMLHttpRequest();
+      xmlHttpRequest.open(method, url, true);
+      for (var index in headers) {
+        if (Object.prototype.hasOwnProperty.call(headers, index)) {
+          xmlHttpRequest.setRequestHeader(index, headers[index]);
+        }
+      }
+      xmlHttpRequest.onload = function () {
+        if (xmlHttpRequest.status === 200) {
+          callbackOK(JSON.parse(xmlHttpRequest.responseText), this.insert.bind(this));
+        } else {
+          callbackKO({
+            code: xmlHttpRequest.status,
+            type: xmlHttpRequest.statusText,
+            body: xmlHttpRequest.responseText
+          });
+        }
+      }.bind(this);
+      if (this.options.withCredentials) {
+        xmlHttpRequest.withCredentials = true;
+      }
+      xmlHttpRequest.send(fd);
+    } else {
+      var reader = new FileReader();
+      reader.onload = function (event) {
+        callbackOK(event.target.result, this.insert.bind(this));
+      }.bind(this);
+      reader.readAsDataURL(file);
+    }
+  }
+};
+ImageUpload.prototype.insert = function (dataUrl) {
+  var index = (this.quill.getSelection() || {}).index || this.quill.getLength();
+  this.quill.insertEmbed(index, 'image', dataUrl, 'user');
+};
+ImageUpload.prototype.uploadImageCallbackOK = function (response, next) {
+  next(response);
+};
+ImageUpload.prototype.uploadImageCallbackKO = function (error) {
+  throw new Error(error);
+};
+export default ImageUpload;

package/rich-text/options.js

@@ -0,0 +1,187 @@
+var size = ['small', false, 'large', 'huge'];
+var underline = ['bold', 'italic', 'underline', 'strike'];
+var media = ['link', 'image', 'video', 'file'];
+var header = [{
+  header: [1, 2, 3, 4, 5, 6, false]
+}];
+var script = [{
+  script: 'sub'
+}, {
+  script: 'super'
+}];
+var defaultOptions = {
+  theme: 'snow',
+  boundary: document.body,
+  modules: {
+    tableModule: true,
+    toolbar: {
+      container: [underline, ['blockquote', 'code-block'], [{
+        header: 1
+      }, {
+        header: 2
+      }], [{
+        list: 'ordered'
+      }, {
+        list: 'bullet'
+      }], script, [{
+        indent: '-1'
+      }, {
+        indent: '+1'
+      }], [{
+        direction: 'rtl'
+      }], [{
+        size: size
+      }], header, [{
+        color: []
+      }, {
+        background: []
+      }], [{
+        font: []
+      }], [{
+        align: []
+      }], ['clean'], media],
+      handlers: {
+        file: function file(value) {
+          if (!value) {
+            this.quill.format('file', false);
+          }
+        }
+      }
+    }
+  },
+  placeholder: 'Insert text here ...',
+  readOnly: false
+};
+var getToolbarTips = function getToolbarTips(t) {
+  return [{
+    Choice: '.ql-bold',
+    title: t('ui.richText.bold')
+  }, {
+    Choice: '.ql-italic',
+    title: t('ui.richText.italic')
+  }, {
+    Choice: '.ql-underline',
+    title: t('ui.richText.underline')
+  }, {
+    Choice: '.ql-header',
+    title: t('ui.richText.header')
+  }, {
+    Choice: '.ql-strike',
+    title: t('ui.richText.strike')
+  }, {
+    Choice: '.ql-blockquote',
+    title: t('ui.richText.blockquote')
+  }, {
+    Choice: '.ql-code-block',
+    title: t('ui.richText.codeBlock')
+  }, {
+    Choice: '.ql-size',
+    title: t('ui.richText.size')
+  }, {
+    Choice: '.ql-list[value="ordered"]',
+    title: t('ui.richText.listOrdered')
+  }, {
+    Choice: '.ql-list[value="bullet"]',
+    title: t('ui.richText.listBullet')
+  }, {
+    Choice: '.ql-header[value="1"]',
+    title: t('ui.richText.header1')
+  }, {
+    Choice: '.ql-header[value="2"]',
+    title: t('ui.richText.header2')
+  }, {
+    Choice: '.ql-align',
+    title: t('ui.richText.align')
+  }, {
+    Choice: '.ql-color',
+    title: t('ui.richText.color')
+  }, {
+    Choice: '.ql-background',
+    title: t('ui.richText.background')
+  }, {
+    Choice: '.ql-image',
+    title: t('ui.richText.image')
+  }, {
+    Choice: '.ql-video',
+    title: t('ui.richText.video')
+  }, {
+    Choice: '.ql-link',
+    title: t('ui.richText.link')
+  }, {
+    Choice: '.ql-formula',
+    title: t('ui.richText.formula')
+  }, {
+    Choice: '.ql-clean',
+    title: t('ui.richText.clean')
+  }, {
+    Choice: '.ql-indent[value="-1"]',
+    title: t('ui.richText.indent1')
+  }, {
+    Choice: '.ql-indent[value="+1"]',
+    title: t('ui.richText.indent2')
+  }, {
+    Choice: '.ql-header .ql-picker-label',
+    title: t('ui.richText.pickerLabel')
+  }, {
+    Choice: '.ql-header .ql-picker-item[data-value="1"]',
+    title: t('ui.richText.headerPicker1')
+  }, {
+    Choice: '.ql-header .ql-picker-item[data-value="2"]',
+    title: t('ui.richText.headerPicker2')
+  }, {
+    Choice: '.ql-header .ql-picker-item[data-value="3"]',
+    title: t('ui.richText.headerPicker3')
+  }, {
+    Choice: '.ql-header .ql-picker-item[data-value="4"]',
+    title: t('ui.richText.headerPicker4')
+  }, {
+    Choice: '.ql-header .ql-picker-item[data-value="5"]',
+    title: t('ui.richText.headerPicker5')
+  }, {
+    Choice: '.ql-header .ql-picker-item[data-value="6"]',
+    title: t('ui.richText.headerPicker6')
+  }, {
+    Choice: '.ql-header .ql-picker-item:last-child',
+    title: t('ui.richText.normal')
+  }, {
+    Choice: '.ql-size .ql-picker-item[data-value="small"]',
+    title: t('ui.richText.sizeSmall')
+  }, {
+    Choice: '.ql-size .ql-picker-item[data-value="large"]',
+    title: t('ui.richText.sizeLarge')
+  }, {
+    Choice: '.ql-size .ql-picker-item[data-value="huge"]',
+    title: t('ui.richText.sizeHuge')
+  }, {
+    Choice: '.ql-size .ql-picker-item:nth-child(2)',
+    title: t('ui.richText.normal')
+  }, {
+    Choice: '.ql-align .ql-picker-item:first-child',
+    title: t('ui.richText.alignPicker1')
+  }, {
+    Choice: '.ql-align .ql-picker-item[data-value="center"]',
+    title: t('ui.richText.alignPicker2')
+  }, {
+    Choice: '.ql-align .ql-picker-item[data-value="right"]',
+    title: t('ui.richText.alignPicker3')
+  }, {
+    Choice: '.ql-align .ql-picker-item[data-value="justify"]',
+    title: t('ui.richText.alignPicker4')
+  }, {
+    Choice: '.ql-script[value="sub"]',
+    title: t('ui.richText.subScript')
+  }, {
+    Choice: '.ql-script[value="super"]',
+    title: t('ui.richText.superScript')
+  }, {
+    Choice: '.ql-direction[value="rtl"]',
+    title: t('ui.richText.directionRTL')
+  }, {
+    Choice: '.ql-font',
+    title: t('ui.richText.font')
+  }, {
+    Choice: '.ql-file',
+    title: t('ui.richText.file')
+  }];
+};
+export { defaultOptions, getToolbarTips };