@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.2

package/crop/index.js

@@ -1,297 +1,178 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
-import { toFileSize } from '@opentiny/vue-renderless/common/string';
-export var computedCropImages = function computedCropImages(_ref) {
-  var constants = _ref.constants,
-    t = _ref.t;
-  return function () {
-    return t(constants.CROP_IMAGE);
-  };
-};
-export var watchImageSrc = function watchImageSrc(state) {
-  return function (value) {
-    return state.src = value;
-  };
-};
-export var watchAlt = function watchAlt(state) {
-  return function (value) {
-    return state.alt = value || 'image';
-  };
-};
-export var watchVisible = function watchVisible(_ref2) {
-  var api = _ref2.api,
-    state = _ref2.state;
-  return function (value) {
-    if (value) {
-      on(document.body, 'keydown', api.shortcutKeys);
-    } else {
-      off(document.body, 'keydown', api.shortcutKeys);
-    }
-    state.cropvisible = value;
-  };
-};
-export var shortcutKeys = function shortcutKeys(api) {
-  return function (e) {
-    if (e.keyCode == 187 && e.ctrlKey) {
-      e.preventDefault();
-      api.zoom(0.1);
-    }
-    if (e.keyCode == 189 && e.ctrlKey) {
-      e.preventDefault();
-      api.zoom(-0.1);
+import "../chunk-PKUHTIDK.js";
+import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
+import { toFileSize } from "@opentiny/vue-renderless/common/string";
+const computedCropImages = ({ constants, t }) => () => t(constants.CROP_IMAGE);
+const watchImageSrc = (state) => (value) => state.src = value;
+const watchAlt = (state) => (value) => state.alt = value || "image";
+const watchVisible = ({ api, state }) => (value) => {
+  if (value) {
+    on(document.body, "keydown", api.shortcutKeys);
+  } else {
+    off(document.body, "keydown", api.shortcutKeys);
+  }
+  state.cropvisible = value;
+};
+const shortcutKeys = (api) => (e) => {
+  if (e.keyCode == 187 && e.ctrlKey) {
+    e.preventDefault();
+    api.zoom(0.1);
+  }
+  if (e.keyCode == 189 && e.ctrlKey) {
+    e.preventDefault();
+    api.zoom(-0.1);
+  }
+  if (e.keyCode == 38 && e.ctrlKey) {
+    e.preventDefault();
+    api.move(0, 1);
+  }
+  if (e.keyCode == 40 && e.ctrlKey) {
+    e.preventDefault();
+    api.move(0, -1);
+  }
+  if (e.keyCode == 37 && e.ctrlKey) {
+    e.preventDefault();
+    api.move(1, 0);
+  }
+  if (e.keyCode == 39 && e.ctrlKey) {
+    e.preventDefault();
+    api.move(-1, 0);
+  }
+};
+const closeCrop = ({ emit, state }) => () => {
+  emit("update:cropvisible", false);
+  emit("update:visible", false);
+  state.cropImg = "";
+};
+const createCrop = ({ emit, props, refs, state }) => () => {
+  const Cropper = props.plugin;
+  const cropImage2 = refs.cropImage;
+  state.cropper = new Cropper(cropImage2, {
+    modal: props.modal,
+    guides: props.guides,
+    center: props.center,
+    movable: props.movable,
+    restore: props.restore,
+    viewMode: props.viewMode,
+    zoomable: props.zoomable,
+    autoCrop: props.autoCrop,
+    dragMode: props.dragMode,
+    rotatable: props.rotatable,
+    responsive: props.responsive,
+    background: props.background,
+    aspectRatio: props.aspectRatio,
+    zoomOnWheel: props.zoomOnWheel,
+    autoCropArea: props.autoCropArea,
+    wheelZoomRatio: props.wheelZoomRatio,
+    minCropBoxWidth: props.minCropBoxWidth,
+    minCropBoxHeight: props.minCropBoxHeight,
+    minContainerWidth: props.minContainerWidth,
+    minContainerHeight: props.minContainerHeight,
+    preview: document.querySelectorAll(".croppreview"),
+    ready() {
+      emit("ready");
+    },
+    cropstart(e) {
+      emit("cropstart", e);
+    },
+    cropmove(e) {
+      emit("cropmove", e);
+    },
+    cropend(e) {
+      emit("cropend", e);
+    },
+    crop(e) {
+      emit("crop", e);
     }
-    if (e.keyCode == 38 && e.ctrlKey) {
-      e.preventDefault();
-      api.move(0, 1);
-    }
-    if (e.keyCode == 40 && e.ctrlKey) {
-      e.preventDefault();
-      api.move(0, -1);
-    }
-    if (e.keyCode == 37 && e.ctrlKey) {
-      e.preventDefault();
-      api.move(1, 0);
-    }
-    if (e.keyCode == 39 && e.ctrlKey) {
-      e.preventDefault();
-      api.move(-1, 0);
-    }
-  };
-};
-export var closeCrop = function closeCrop(_ref3) {
-  var emit = _ref3.emit,
-    state = _ref3.state;
-  return function () {
-    emit('update:cropvisible', false);
-    emit('update:visible', false);
-    state.cropImg = '';
-  };
-};
-export var createCrop = function createCrop(_ref4) {
-  var emit = _ref4.emit,
-    props = _ref4.props,
-    refs = _ref4.refs,
-    state = _ref4.state;
-  return function () {
-    var Cropper = props.plugin;
-    var cropImage = refs.cropImage;
-    state.cropper = new Cropper(cropImage, {
-      modal: props.modal,
-      guides: props.guides,
-      center: props.center,
-      movable: props.movable,
-      restore: props.restore,
-      viewMode: props.viewMode,
-      zoomable: props.zoomable,
-      autoCrop: props.autoCrop,
-      dragMode: props.dragMode,
-      rotatable: props.rotatable,
-      responsive: props.responsive,
-      background: props.background,
-      aspectRatio: props.aspectRatio,
-      zoomOnWheel: props.zoomOnWheel,
-      autoCropArea: props.autoCropArea,
-      wheelZoomRatio: props.wheelZoomRatio,
-      minCropBoxWidth: props.minCropBoxWidth,
-      minCropBoxHeight: props.minCropBoxHeight,
-      minContainerWidth: props.minContainerWidth,
-      minContainerHeight: props.minContainerHeight,
-      preview: document.querySelectorAll('.croppreview'),
-      ready: function ready() {
-        emit('ready');
-      },
-      cropstart: function cropstart(e) {
-        emit('cropstart', e);
-      },
-      cropmove: function cropmove(e) {
-        emit('cropmove', e);
+  });
+};
+const closeCropArea = (api) => () => api.clear();
+const clear = (state) => () => state.cropper.clear();
+const cropImage = ({ api, emit, props, state }) => () => {
+  state.cropImg = api.getCroppedCanvas().toDataURL("image/jpeg", props.quality);
+  if (props.cropType.toLowerCase() === "base64") {
+    emit("cropdata", api.getCroppedCanvas().toDataURL("image/jpeg", props.quality));
+  } else if (props.cropType.toLowerCase() === "blob") {
+    let canvas = api.getCroppedCanvas();
+    canvas.toBlob(
+      (blobObj) => {
+        emit("cropdata", blobObj);
       },
-      cropend: function cropend(e) {
-        emit('cropend', e);
-      },
-      crop: function crop(e) {
-        emit('crop', e);
-      }
-    });
-  };
-};
-export var closeCropArea = function closeCropArea(api) {
-  return function () {
-    return api.clear();
-  };
-};
-export var clear = function clear(state) {
-  return function () {
-    return state.cropper.clear();
-  };
-};
-export var cropImage = function cropImage(_ref5) {
-  var api = _ref5.api,
-    emit = _ref5.emit,
-    props = _ref5.props,
-    state = _ref5.state;
-  return function () {
-    state.cropImg = api.getCroppedCanvas().toDataURL('image/jpeg', props.quality);
-    if (props.cropType.toLowerCase() === 'base64') {
-      emit('cropdata', api.getCroppedCanvas().toDataURL('image/jpeg', props.quality));
-    } else if (props.cropType.toLowerCase() === 'blob') {
-      var canvas = api.getCroppedCanvas();
-      canvas.toBlob(function (blobObj) {
-        emit('cropdata', blobObj);
-      }, 'image/jpeg', props.quality);
-    }
-  };
-};
-export var getCroppedCanvas = function getCroppedCanvas(state) {
-  return function () {
-    return state.cropper.getCroppedCanvas();
-  };
-};
-export var getCropBoxData = function getCropBoxData(state) {
-  return function () {
-    return state.cropper.getCropBoxData();
-  };
-};
-export var getData = function getData(state) {
-  return function (rounded) {
-    return state.cropper.getData(!!rounded);
-  };
-};
-export var move = function move(state) {
-  return function (offsetX, offsetY) {
-    return state.cropper.move(offsetX, offsetY);
-  };
-};
-export var reset = function reset(state) {
-  return function () {
-    return state.cropper.reset();
-  };
+      "image/jpeg",
+      props.quality
+    );
+  }
+};
+const getCroppedCanvas = (state) => () => state.cropper.getCroppedCanvas();
+const getCropBoxData = (state) => () => state.cropper.getCropBoxData();
+const getData = (state) => (rounded) => state.cropper.getData(!!rounded);
+const move = (state) => (offsetX, offsetY) => state.cropper.move(offsetX, offsetY);
+const reset = (state) => () => state.cropper.reset();
+const setCropBoxData = (state) => ({ left, top, width, height }) => state.cropper.setCropBoxData({ left, top, width, height });
+const setData = (state) => (data) => data !== null && typeof data === "object" && state.cropper.setData(data);
+const disable = (state) => () => state.cropper.disable();
+const enable = (state) => () => state.cropper.enable();
+const destroy = (state) => () => state.cropper.destroy();
+const scale = (state) => (scaleX2, scaleY2) => state.cropper.scale(scaleX2, scaleY2);
+const scaleX = (state) => (x) => state.cropper.scaleX(x);
+const scaleY = (state) => (x) => state.cropper.scaleY(x);
+const getContainerData = (state) => () => state.cropper.getContainerData();
+const getImageData = (state) => () => state.cropper.getImageData();
+const getCanvasData = (state) => () => state.cropper.getCanvasData();
+const setAspectRatio = (state) => (s) => state.cropper.setAspectRatio(s);
+const setDragMode = (state) => (s) => state.cropper.setDragMode(s);
+const setCanvasData = (state) => ({ width, height, left, top }) => state.cropper.setCanvasData({ width, height, left, top });
+const rotate = (state) => (deg) => state.cropper.rotate(deg);
+const setImage = ({ api, state, props }) => (e) => {
+  const file = e.target.files[0];
+  let unit = props.maxSize.match(/[a-zA-Z]+/gi);
+  unit = unit && (unit[0].length > 1 ? unit[0] : unit[0] + "B");
+  const size = toFileSize(Number(props.maxSize.match(/[0-9]+/gi)[0]), "B", unit || "B");
+  if (file === void 0 || !file.type.includes("image/") || Number(file.size) > Number(size.split("B")[0])) {
+    return;
+  }
+  const reader = new FileReader();
+  reader.onload = (event) => {
+    state.src = event.target.result;
+    api.replace(event.target.result);
+  };
+  reader.readAsDataURL(file);
+};
+const replace = (state) => (url) => state.cropper.replace(url);
+const showFileChooser = (refs) => () => refs.cropInput.click();
+const zoom = (state) => (percent) => state.cropper.zoom(percent);
+export {
+  clear,
+  closeCrop,
+  closeCropArea,
+  computedCropImages,
+  createCrop,
+  cropImage,
+  destroy,
+  disable,
+  enable,
+  getCanvasData,
+  getContainerData,
+  getCropBoxData,
+  getCroppedCanvas,
+  getData,
+  getImageData,
+  move,
+  replace,
+  reset,
+  rotate,
+  scale,
+  scaleX,
+  scaleY,
+  setAspectRatio,
+  setCanvasData,
+  setCropBoxData,
+  setData,
+  setDragMode,
+  setImage,
+  shortcutKeys,
+  showFileChooser,
+  watchAlt,
+  watchImageSrc,
+  watchVisible,
+  zoom
 };
-export var setCropBoxData = function setCropBoxData(state) {
-  return function (_ref6) {
-    var left = _ref6.left,
-      top = _ref6.top,
-      width = _ref6.width,
-      height = _ref6.height;
-    return state.cropper.setCropBoxData({
-      left: left,
-      top: top,
-      width: width,
-      height: height
-    });
-  };
-};
-export var setData = function setData(state) {
-  return function (data) {
-    return data !== null && _typeof(data) === 'object' && state.cropper.setData(data);
-  };
-};
-export var disable = function disable(state) {
-  return function () {
-    return state.cropper.disable();
-  };
-};
-export var enable = function enable(state) {
-  return function () {
-    return state.cropper.enable();
-  };
-};
-export var destroy = function destroy(state) {
-  return function () {
-    return state.cropper.destroy();
-  };
-};
-export var scale = function scale(state) {
-  return function (scaleX, scaleY) {
-    return state.cropper.scale(scaleX, scaleY);
-  };
-};
-export var scaleX = function scaleX(state) {
-  return function (x) {
-    return state.cropper.scaleX(x);
-  };
-};
-export var scaleY = function scaleY(state) {
-  return function (x) {
-    return state.cropper.scaleY(x);
-  };
-};
-export var getContainerData = function getContainerData(state) {
-  return function () {
-    return state.cropper.getContainerData();
-  };
-};
-export var getImageData = function getImageData(state) {
-  return function () {
-    return state.cropper.getImageData();
-  };
-};
-export var getCanvasData = function getCanvasData(state) {
-  return function () {
-    return state.cropper.getCanvasData();
-  };
-};
-export var setAspectRatio = function setAspectRatio(state) {
-  return function (s) {
-    return state.cropper.setAspectRatio(s);
-  };
-};
-export var setDragMode = function setDragMode(state) {
-  return function (s) {
-    return state.cropper.setDragMode(s);
-  };
-};
-export var setCanvasData = function setCanvasData(state) {
-  return function (_ref7) {
-    var width = _ref7.width,
-      height = _ref7.height,
-      left = _ref7.left,
-      top = _ref7.top;
-    return state.cropper.setCanvasData({
-      width: width,
-      height: height,
-      left: left,
-      top: top
-    });
-  };
-};
-export var rotate = function rotate(state) {
-  return function (deg) {
-    return state.cropper.rotate(deg);
-  };
-};
-export var setImage = function setImage(_ref8) {
-  var api = _ref8.api,
-    state = _ref8.state,
-    props = _ref8.props;
-  return function (e) {
-    var file = e.target.files[0];
-    var unit = props.maxSize.match(/[a-zA-Z]+/gi);
-    unit = unit && (unit[0].length > 1 ? unit[0] : unit[0] + 'B');
-    var size = toFileSize(Number(props.maxSize.match(/[0-9]+/gi)[0]), 'B', unit || 'B');
-    if (file === undefined || file.type.indexOf('image/') === -1 || Number(file.size) > Number(size.split('B')[0])) {
-      return;
-    }
-    var reader = new FileReader();
-    reader.onload = function (event) {
-      state.src = event.target.result;
-      api.replace(event.target.result);
-    };
-    reader.readAsDataURL(file);
-  };
-};
-export var replace = function replace(state) {
-  return function (url) {
-    return state.cropper.replace(url);
-  };
-};
-export var showFileChooser = function showFileChooser(refs) {
-  return function () {
-    return refs.cropInput.click();
-  };
-};
-export var zoom = function zoom(state) {
-  return function (percent) {
-    return state.cropper.zoom(percent);
-  };
-};