@opentinyvue/vue-crop 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Crop from './src/pc.vue';
+export default Crop;

package/lib/index.js

@@ -0,0 +1,271 @@
+import { defineComponent, $prefix, setup } from '@opentinyvue/vue-common';
+import { renderless, api } from '@opentinyvue/vue-renderless/crop/vue';
+import { iconConmentRefresh, iconNew, iconZoomIn, iconZoomOut, iconRepeat, iconRefres, iconClose, iconYes, iconCrop } from '@opentinyvue/vue-icon';
+import Cropper from 'cropperjs';
+import 'cropperjs/dist/cropper.css';
+import '@opentinyvue/vue-theme/crop/index.css';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var __vue2_script = defineComponent({
+  name: $prefix + "Crop",
+  components: {
+    IconConmentRefresh: iconConmentRefresh(),
+    IconNew: iconNew(),
+    IconZoomIn: iconZoomIn(),
+    IconZoomOut: iconZoomOut(),
+    IconRepeat: iconRepeat(),
+    IconRefres: iconRefres(),
+    IconClose: iconClose(),
+    IconYes: iconYes(),
+    IconCrop: iconCrop()
+  },
+  props: {
+    /** 设置图片上的alt属性 */
+    alt: {
+      type: String,
+      default: "image"
+    },
+    /** 裁剪框的宽高比，默认 16/9 */
+    aspectRatio: {
+      type: Number,
+      default: 16 / 9
+    },
+    /** 初始化时，是否自动显示裁剪框，默认 true */
+    autoCrop: {
+      type: Boolean,
+      default: true
+    },
+    /** 定义自动裁剪面积大小（百分比） 默认0.8 */
+    autoCropArea: {
+      type: Number,
+      default: 0.8
+    },
+    /** 是否显示容器的网格背景 默认true */
+    background: {
+      type: Boolean,
+      default: true
+    },
+    /** 裁剪框是否在图片正中心,并显示一个 + 号 默认false */
+    center: {
+      type: Boolean,
+      default: false
+    },
+    /** 设置图片裁剪后返回的类型，可配置为 blob 和 base64  默认 base64 */
+    cropType: {
+      type: String,
+      default: "base64"
+    },
+    /** 设置裁剪弹框是否可见 默认false */
+    cropvisible: {
+      type: Boolean,
+      default: false
+    },
+    /** 定义 cropper 的拖拽模式，默认 crop ;'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理   */
+    dragMode: {
+      type: String,
+      default: "crop"
+    },
+    /** 是否在裁剪框上方显示虚线 默认true */
+    guides: {
+      type: Boolean,
+      default: true
+    },
+    /** 设置待裁剪图片的最大大小，默认为 1M */
+    maxSize: {
+      type: String,
+      default: "1M"
+    },
+    /** 容器的最小高度 默认 300 */
+    minContainerHeight: {
+      type: Number,
+      default: 300
+    },
+    /** 容器的最小宽度 默认 652 */
+    minContainerWidth: {
+      type: Number,
+      default: 652
+    },
+    /** 裁剪层的最小高度  默认0 */
+    minCropBoxHeight: {
+      type: Number,
+      default: 0
+    },
+    /** 裁剪层的最小宽度 默认0 */
+    minCropBoxWidth: {
+      type: Number,
+      default: 0
+    },
+    /** 是否显示图片上方裁剪框下方的黑色模态 默认true */
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否允许可以移动后面的图片 默认true */
+    movable: {
+      type: Boolean,
+      default: true
+    },
+    plugin: {
+      type: [Object, Function],
+      default: function _default() {
+        return Cropper;
+      }
+    },
+    /** 设置图片裁剪后的压缩比例，值在 0-1 之间 默认0.92 */
+    quality: {
+      type: Number,
+      default: 0.92,
+      validator: function validator(value) {
+        return value <= 1 && value > 0;
+      }
+    },
+    /** 是否允许旋转图像;默认为 true */
+    rotatable: {
+      type: Boolean,
+      default: true
+    },
+    /** 默认裁剪的源图片 */
+    src: {
+      type: String,
+      default: ""
+    },
+    /** 定义 cropper 的视图模式,默认 0 ;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1 */
+    viewMode: {
+      type: Number,
+      default: 0
+    },
+    /** 用鼠标移动图像时，定义缩放比例 默认 0.1 */
+    wheelZoomRatio: {
+      type: Number,
+      default: 0.1
+    },
+    /** 是否可以通过滚动鼠标滚轮来缩放图像 默认true */
+    zoomOnWheel: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否允许放大图像 默认true */
+    zoomable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:cropvisible", "update:visible", "ready", "cropstart", "cropmove", "cropend", "crop", "cropdata"],
+  setup: function setup$1(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api,
+      mono: true
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "tiny-crop__wrapper"
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.cropvisible,
+      expression: "state.cropvisible"
+    }],
+    staticClass: "tiny-crop"
+  }, [_c("div", {
+    staticClass: "tiny-crop__dialog"
+  }, [_c("input", {
+    ref: "cropInput",
+    attrs: {
+      "type": "file",
+      "name": "image",
+      "accept": "image/*"
+    },
+    on: {
+      "change": _vm.setImage
+    }
+  }), _c("div", {
+    staticClass: "tiny-crop__dialog-cropper"
+  }, [_c("img", {
+    ref: "cropImage",
+    attrs: {
+      "src": _vm.state.src,
+      "id": "crops",
+      "alt": _vm.alt
+    }
+  })]), _c("div", {
+    staticClass: "tiny-crop__dialog-content__handle"
+  }, [_c("div", {
+    staticClass: "tiny-crop__dialog-content__handle__button"
+  }, _vm._l(_vm.state.renderIcon, function(item, index) {
+    return _c("div", {
+      key: index,
+      staticClass: "iconButton"
+    }, [!item.split ? _c("div", {
+      attrs: {
+        "title": item.title
+      }
+    }, [_c(item.icon, {
+      tag: "component",
+      staticClass: "iconButtonset",
+      on: {
+        "click": function click($event) {
+          $event.preventDefault();
+          return item.method.apply(null, arguments);
+        }
+      }
+    })], 1) : _c("div", {
+      staticClass: "iconButton__split"
+    })]);
+  }), 0)])])])]);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var Crop = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+var version = "2.21.0";
+Crop.install = function(Vue) {
+  Vue.component(Crop.name, Crop);
+};
+Crop.version = version;
+
+export { Crop as default };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@opentinyvue/vue-crop",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0",
+    "cropperjs": "1.5.7",
+    "@opentinyvue/vue-theme": "~3.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/pc.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;