vue-cropperjs-ex
Version:
a vue copper component based on cropperjs
1 lines • 14.9 kB
Source Map (JSON)
{"version":3,"sources":["webpack://MCopper/./node_modules/cropperjs/dist/cropper.css","webpack://MCopper/./src/css/base.css","webpack://MCopper/./src/components/svg-icon.vue?6cf7","webpack://MCopper/./src/copper.vue?db7c"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,wCAAwC;AACxC;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AC/SA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,C;;ACvMA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACkOA,2EAA2E;AAC3E;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"css/cropper.min.css","sourcesContent":["/*!\n * Cropper.js v1.5.9\n * https://fengyuanchen.github.io/cropperjs\n *\n * Copyright 2015-present Chen Fengyuan\n * Released under the MIT license\n *\n * Date: 2020-09-10T13:16:21.689Z\n */\n\n.cropper-container {\n direction: ltr;\n font-size: 0;\n line-height: 0;\n position: relative;\n -ms-touch-action: none;\n touch-action: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.cropper-container img {\n display: block;\n height: 100%;\n image-orientation: 0deg;\n max-height: none !important;\n max-width: none !important;\n min-height: 0 !important;\n min-width: 0 !important;\n width: 100%;\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n overflow: hidden;\n}\n\n.cropper-drag-box {\n background-color: #fff;\n opacity: 0;\n}\n\n.cropper-modal {\n background-color: #000;\n opacity: 0.5;\n}\n\n.cropper-view-box {\n display: block;\n height: 100%;\n outline: 1px solid #39f;\n outline-color: rgba(51, 153, 255, 0.75);\n overflow: hidden;\n width: 100%;\n}\n\n.cropper-dashed {\n border: 0 dashed #eee;\n display: block;\n opacity: 0.5;\n position: absolute;\n}\n\n.cropper-dashed.dashed-h {\n border-bottom-width: 1px;\n border-top-width: 1px;\n height: calc(100% / 3);\n left: 0;\n top: calc(100% / 3);\n width: 100%;\n}\n\n.cropper-dashed.dashed-v {\n border-left-width: 1px;\n border-right-width: 1px;\n height: 100%;\n left: calc(100% / 3);\n top: 0;\n width: calc(100% / 3);\n}\n\n.cropper-center {\n display: block;\n height: 0;\n left: 50%;\n opacity: 0.75;\n position: absolute;\n top: 50%;\n width: 0;\n}\n\n.cropper-center::before,\n.cropper-center::after {\n background-color: #eee;\n content: ' ';\n display: block;\n position: absolute;\n}\n\n.cropper-center::before {\n height: 1px;\n left: -3px;\n top: 0;\n width: 7px;\n}\n\n.cropper-center::after {\n height: 7px;\n left: 0;\n top: -3px;\n width: 1px;\n}\n\n.cropper-face,\n.cropper-line,\n.cropper-point {\n display: block;\n height: 100%;\n opacity: 0.1;\n position: absolute;\n width: 100%;\n}\n\n.cropper-face {\n background-color: #fff;\n left: 0;\n top: 0;\n}\n\n.cropper-line {\n background-color: #39f;\n}\n\n.cropper-line.line-e {\n cursor: ew-resize;\n right: -3px;\n top: 0;\n width: 5px;\n}\n\n.cropper-line.line-n {\n cursor: ns-resize;\n height: 5px;\n left: 0;\n top: -3px;\n}\n\n.cropper-line.line-w {\n cursor: ew-resize;\n left: -3px;\n top: 0;\n width: 5px;\n}\n\n.cropper-line.line-s {\n bottom: -3px;\n cursor: ns-resize;\n height: 5px;\n left: 0;\n}\n\n.cropper-point {\n background-color: #39f;\n height: 5px;\n opacity: 0.75;\n width: 5px;\n}\n\n.cropper-point.point-e {\n cursor: ew-resize;\n margin-top: -3px;\n right: -3px;\n top: 50%;\n}\n\n.cropper-point.point-n {\n cursor: ns-resize;\n left: 50%;\n margin-left: -3px;\n top: -3px;\n}\n\n.cropper-point.point-w {\n cursor: ew-resize;\n left: -3px;\n margin-top: -3px;\n top: 50%;\n}\n\n.cropper-point.point-s {\n bottom: -3px;\n cursor: s-resize;\n left: 50%;\n margin-left: -3px;\n}\n\n.cropper-point.point-ne {\n cursor: nesw-resize;\n right: -3px;\n top: -3px;\n}\n\n.cropper-point.point-nw {\n cursor: nwse-resize;\n left: -3px;\n top: -3px;\n}\n\n.cropper-point.point-sw {\n bottom: -3px;\n cursor: nesw-resize;\n left: -3px;\n}\n\n.cropper-point.point-se {\n bottom: -3px;\n cursor: nwse-resize;\n height: 20px;\n opacity: 1;\n right: -3px;\n width: 20px;\n}\n\n@media (min-width: 768px) {\n .cropper-point.point-se {\n height: 15px;\n width: 15px;\n }\n}\n\n@media (min-width: 992px) {\n .cropper-point.point-se {\n height: 10px;\n width: 10px;\n }\n}\n\n@media (min-width: 1200px) {\n .cropper-point.point-se {\n height: 5px;\n opacity: 0.75;\n width: 5px;\n }\n}\n\n.cropper-point.point-se::before {\n background-color: #39f;\n bottom: -50%;\n content: ' ';\n display: block;\n height: 200%;\n opacity: 0;\n position: absolute;\n right: -50%;\n width: 200%;\n}\n\n.cropper-invisible {\n opacity: 0;\n}\n\n.cropper-bg {\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');\n}\n\n.cropper-hide {\n display: block;\n height: 0;\n position: absolute;\n width: 0;\n}\n\n.cropper-hidden {\n display: none !important;\n}\n\n.cropper-move {\n cursor: move;\n}\n\n.cropper-crop {\n cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n cursor: not-allowed;\n}\n",".btn {\r\n display: inline-block;\r\n font-weight: 400;\r\n color: #212529;\r\n text-align: center;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n background-color: transparent;\r\n border: 1px solid transparent;\r\n padding: .375rem .75rem;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n border-radius: .25rem;\r\n transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;\r\n}\r\n\r\n.btn:not(:disabled):not(.disabled) {\r\n cursor: pointer;\r\n}\r\n.docs-toggles > .btn, .docs-toggles > .btn-group, .docs-toggles > .dropdown {\r\n margin-bottom: 0.5rem;\r\n}\r\n.btn {\r\n padding-left: 0.75rem;\r\n padding-right: 0.75rem;\r\n}\r\n.btn-block {\r\n display: block;\r\n width: 100%;\r\n}\r\n.btn-success {\r\n color: #fff;\r\n background-color: #28a745;\r\n border-color: #28a745;\r\n}\r\n\r\n\r\ninput[type=checkbox], input[type=radio] {\r\n box-sizing: border-box;\r\n padding: 0;\r\n}\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0,0,0,0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n.sr-only {\r\n border: 0;\r\n clip: rect(0,0,0,0);\r\n height: 1px;\r\n margin: -1px;\r\n overflow: hidden;\r\n padding: 0;\r\n position: absolute;\r\n width: 1px;\r\n}\r\nbutton, input {\r\n overflow: visible;\r\n}\r\nbutton, input, optgroup, select, textarea {\r\n margin: 0;\r\n font-family: inherit;\r\n font-size: inherit;\r\n line-height: inherit;\r\n}\r\n\r\n\r\n.docs-tooltip {\r\n display: block;\r\n margin: -0.5rem -0.75rem;\r\n padding: 0.5rem 0.75rem;\r\n}\r\n*, ::after, ::before {\r\n box-sizing: border-box;\r\n}\r\n.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {\r\n color: #fff;\r\n background-color: #0062cc;\r\n border-color: #005cbf;\r\n}\r\n.btn:not(:disabled):not(.disabled) {\r\n cursor: pointer;\r\n}\r\n\r\n.btn-primary {\r\n color: #fff;\r\n background-color: #007bff;\r\n border-color: #007bff;\r\n}\r\n\r\n\r\n.docs-toggles > .btn, .docs-toggles > .btn-group, .docs-toggles > .dropdown {\r\n margin-bottom: 0.5rem;\r\n}\r\n.flex-nowrap {\r\n -ms-flex-wrap: nowrap!important;\r\n flex-wrap: nowrap!important;\r\n}\r\n.d-flex {\r\n display: -ms-flexbox!important;\r\n display: flex!important;\r\n}\r\n.btn-group, .btn-group-vertical {\r\n position: relative;\r\n display: -ms-inline-flexbox;\r\n display: inline-flex;\r\n vertical-align: middle;\r\n}\r\n\r\n\r\n.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n}\r\n.btn:not(:disabled):not(.disabled) {\r\n cursor: pointer;\r\n}\r\n.d-flex > .btn {\r\n flex: 1;\r\n}\r\n.btn-group-vertical>.btn, .btn-group>.btn {\r\n position: relative;\r\n -ms-flex: 1 1 auto;\r\n flex: 1 1 auto;\r\n}\r\nlabel.btn {\r\n margin-bottom: 0;\r\n}\r\n.btn {\r\n padding-left: 0.75rem;\r\n padding-right: 0.75rem;\r\n}\r\n\r\n\r\n.btn-group-vertical>.btn:hover, .btn-group>.btn:hover {\r\n z-index: 1;\r\n}\r\n.btn:not(:disabled):not(.disabled) {\r\n cursor: pointer;\r\n}\r\n.d-flex > .btn {\r\n flex: 1;\r\n}\r\n.btn-group-vertical>.btn, .btn-group>.btn {\r\n position: relative;\r\n -ms-flex: 1 1 auto;\r\n flex: 1 1 auto;\r\n}\r\n.btn-primary:hover {\r\n color: #fff;\r\n background-color: #0069d9;\r\n border-color: #0062cc;\r\n}\r\n.btn:hover {\r\n}\r\n\r\n.btn-group .btn{\r\n border-radius: 0;\r\n}\r\n\r\n.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {\r\n color: #fff;\r\n background-color: #1e7e34;\r\n border-color: #1c7430;\r\n}\r\n\r\n\r\n\r\n.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {\r\n box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);\r\n}\r\n.btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {\r\n border-top-right-radius: 0;\r\n border-bottom-right-radius: 0;\r\n}\r\n.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {\r\n color: #fff;\r\n background-color: #0062cc;\r\n border-color: #005cbf;\r\n}\r\n\r\n\r\n.btn-success.focus, .btn-success:focus {\r\n color: #fff;\r\n background-color: #218838;\r\n border-color: #1e7e34;\r\n box-shadow: 0 0 0 0.2rem rgba(72,180,97,.5);\r\n}\r\n.btn.focus, .btn:focus {\r\n outline: 0;\r\n box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\r\n}","\n.svg-icon[data-v-61d4d952] {\r\n width: 1em;\r\n height: 1em;\r\n vertical-align: -0.15em;\r\n fill: currentColor;\r\n overflow: hidden;\n}\r\n","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n/* @import url(\"https://use.fontawesome.com/releases/v5.13.0/css/all.css\"); */\ndiv[data-v-353e9c9c] {\r\n width: 100%;\n}\r\n/* Limit image width to avoid overflow the container */\nimg[data-v-353e9c9c] {\r\n max-width: 100%; /* This rule is very important, please do not ignore this! */\n}\n.container[data-v-353e9c9c] {\r\n display: flex;\r\n justify-content: flex-start;\n}\n.container .img[data-v-353e9c9c] {\r\n flex: 1;\n}\n.preview-container[data-v-353e9c9c] {\r\n display: flex;\r\n flex-direction: column;\r\n flex-wrap: wrap;\r\n width: 240px;\r\n padding: 012px;\n}\n.preview-container .preview[data-v-353e9c9c] {\r\n height: 120px;\r\n overflow: hidden;\n}\n.preview-container .lg[data-v-353e9c9c] {\r\n width: 100%;\n}\n.preview-container .md[data-v-353e9c9c] {\r\n width: 50%;\n}\n.preview-container .sm[data-v-353e9c9c] {\r\n width: 20%;\n}\n.wl-groups[data-v-353e9c9c] {\r\n padding: 4px 0;\n}\n.f-r[data-v-353e9c9c] {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n padding: 0 0 4px 0;\n}\n.f-r > .btn-group[data-v-353e9c9c] {\r\n width: 90px;\n}\r\n"],"sourceRoot":""}