@gct-paas/core-web 0.1.4-dev.12 → 0.1.4-dev.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/de_DE-CYotlhMS.js +1 -0
- package/dist/en_US-DjLwq3RF.js +1 -0
- package/dist/es_ES-0UhVFVHw.js +1 -0
- package/dist/fr_FR-Xgsbf3iG.js +1 -0
- package/dist/index.min.css +1 -1
- package/dist/ja_JP-3aUbzjBv.js +1 -0
- package/dist/loader.esm.min.js +1 -0
- package/dist/monaco-editor-DKwtDu2R.js +1 -0
- package/dist/objectSpread2-BL8YUfIz.js +1 -0
- package/dist/pt_PT-BzMPT58e.js +1 -0
- package/dist/ru_RU-BRHq1RXx.js +1 -0
- package/dist/tr_TR-CPqM558w.js +1 -0
- package/dist/useMonacoEditor-DrIqFqr0.js +1 -0
- package/dist/vi_VN-BOKGrWoY.js +1 -0
- package/dist/zh_CN-upOsz50m.js +1 -0
- package/dist/zh_TW-jlmatmAz.js +1 -0
- package/es/components/UserPick/index.d.ts +46 -0
- package/es/components/UserPick/index.mjs +113 -0
- package/es/components/UserPick/src/components/dept-item.vue.d.ts +11 -0
- package/es/components/UserPick/src/components/dept-item.vue.mjs +7 -0
- package/es/components/UserPick/src/components/dept-item.vue_vue_type_script_setup_true_lang.mjs +32 -0
- package/es/components/UserPick/src/components/dept-item.vue_vue_type_style_index_0_scoped_075b8ce7_lang.css +3 -0
- package/es/components/UserPick/src/components/user-item.vue.d.ts +11 -0
- package/es/components/UserPick/src/components/user-item.vue.mjs +7 -0
- package/es/components/UserPick/src/components/user-item.vue_vue_type_script_setup_true_lang.mjs +33 -0
- package/es/components/UserPick/src/components/user-item.vue_vue_type_style_index_0_scoped_1456f8b9_lang.css +3 -0
- package/es/components/UserPick/src/hooks.d.ts +1 -0
- package/es/components/UserPick/src/hooks.mjs +94 -0
- package/es/components/UserPick/src/user-pick.vue.d.ts +17 -0
- package/es/components/UserPick/src/user-pick.vue.mjs +7 -0
- package/es/components/UserPick/src/user-pick.vue_vue_type_script_setup_true_lang.mjs +280 -0
- package/es/components/UserPick/src/user-pick.vue_vue_type_style_index_0_scoped_081b9663_lang.css +39 -0
- package/es/components/field-upload/index.d.ts +2 -0
- package/es/components/field-upload/index.mjs +7 -0
- package/es/components/field-upload/src/FieldUpload.vue.d.ts +37 -0
- package/es/components/field-upload/src/FieldUpload.vue.mjs +5 -0
- package/es/components/field-upload/src/FieldUpload.vue_vue_type_script_setup_true_name_FieldUpload_lang.mjs +111 -0
- package/es/components/field-upload/src/components/base-upload.vue.d.ts +21 -0
- package/es/components/field-upload/src/components/base-upload.vue.mjs +7 -0
- package/es/components/field-upload/src/components/base-upload.vue_vue_type_script_name_baseUpload_setup_true_lang.mjs +227 -0
- package/es/components/field-upload/src/components/base-upload.vue_vue_type_style_index_0_scoped_f53b6ac6_lang.css +76 -0
- package/es/components/field-upload/src/components/file-list.vue.d.ts +17 -0
- package/es/components/field-upload/src/components/file-list.vue.mjs +7 -0
- package/es/components/field-upload/src/components/file-list.vue_vue_type_script_setup_true_name_fileList_lang.mjs +129 -0
- package/es/components/field-upload/src/components/file-list.vue_vue_type_style_index_0_scoped_3918aad0_lang.css +129 -0
- package/es/components/field-upload/src/components/upload-design.vue.d.ts +5 -0
- package/es/components/field-upload/src/components/upload-design.vue.mjs +7 -0
- package/es/components/field-upload/src/components/upload-design.vue_vue_type_script_name_UploadDesign_setup_true_lang.mjs +43 -0
- package/es/components/field-upload/src/components/upload-design.vue_vue_type_style_index_0_scoped_1e5189c1_lang.css +43 -0
- package/es/components/field-upload/src/hooks/hooks.d.ts +4 -0
- package/es/components/field-upload/src/hooks/hooks.mjs +47 -0
- package/es/components/field-upload/src/types/index.d.ts +42 -0
- package/es/components/field-upload/src/types/index.mjs +24 -0
- package/es/components/image-upload/index.d.ts +2 -0
- package/es/components/image-upload/index.mjs +7 -0
- package/es/components/image-upload/src/ImageUpload.vue.d.ts +32 -0
- package/es/components/image-upload/src/ImageUpload.vue.mjs +5 -0
- package/es/components/image-upload/src/ImageUpload.vue_vue_type_script_setup_true_name_ImageUpload_lang.mjs +74 -0
- package/es/components/image-upload/src/components/base-upload.vue.d.ts +24 -0
- package/es/components/image-upload/src/components/base-upload.vue.mjs +8 -0
- package/es/components/image-upload/src/components/base-upload.vue_vue_type_script_name_baseUpload_setup_true_lang.mjs +209 -0
- package/es/components/image-upload/src/components/base-upload.vue_vue_type_style_index_0_scoped_3248e630_lang.css +73 -0
- package/es/components/image-upload/src/components/base-upload.vue_vue_type_style_index_1_lang.css +3 -0
- package/es/components/image-upload/src/components/upload-design.vue.d.ts +6 -0
- package/es/components/image-upload/src/components/upload-design.vue.mjs +7 -0
- package/es/components/image-upload/src/components/upload-design.vue_vue_type_script_name_UploadDesign_setup_true_lang.mjs +33 -0
- package/es/components/image-upload/src/components/upload-design.vue_vue_type_style_index_0_scoped_575d3a1a_lang.css +33 -0
- package/es/components/image-upload/src/hooks/hooks.d.ts +2 -0
- package/es/components/image-upload/src/types/index.d.ts +34 -0
- package/es/components/image-upload/src/types/index.mjs +8 -0
- package/es/components/index.d.ts +5 -1
- package/es/components/index.mjs +3 -0
- package/es/create-app-vue.mjs +2 -0
- package/es/hooks/index.d.ts +1 -0
- package/es/hooks/index.mjs +1 -0
- package/es/hooks/useFile.mjs +22 -0
- package/es/hooks/useLocale.d.ts +365 -1
- package/es/hooks/useLocale.mjs +20 -24
- package/es/index.d.ts +1 -0
- package/es/index.mjs +12 -6
- package/es/loader.d.ts +1 -0
- package/es/loader.mjs +92 -0
- package/es/modules/Cropper/index.mjs +11 -0
- package/es/modules/Cropper/src/CopperFreeModal.vue.mjs +7 -0
- package/es/modules/Cropper/src/CopperFreeModal.vue_vue_type_script_setup_true_name_CropperModal_lang.mjs +299 -0
- package/es/modules/Cropper/src/CopperFreeModal.vue_vue_type_style_index_0_scoped_28afc2ab_lang.css +48 -0
- package/es/modules/Cropper/src/CopperModal.vue.mjs +7 -0
- package/es/modules/Cropper/src/CopperModal.vue_vue_type_script_setup_true_name_CropperModal_lang.mjs +283 -0
- package/es/modules/Cropper/src/CopperModal.vue_vue_type_style_index_0_scoped_f42f8311_lang.css +71 -0
- package/es/modules/Cropper/src/Cropper.vue.d.ts +3 -3
- package/es/modules/Cropper/src/Cropper.vue.mjs +25 -0
- package/es/modules/Cropper/src/Cropper.vue_vue_type_script_lang.mjs +173 -0
- package/es/modules/Cropper/src/Cropper.vue_vue_type_style_index_0_lang.css +4 -0
- package/es/modules/Cropper/src/CropperAvatar.vue.mjs +7 -0
- package/es/modules/Cropper/src/CropperAvatar.vue_vue_type_script_setup_true_name_CropperAvatar_lang.mjs +116 -0
- package/es/modules/Cropper/src/CropperAvatar.vue_vue_type_style_index_0_scoped_66052c52_lang.css +39 -0
- package/es/modules/Cropper/src/CropperFree.vue.mjs +7 -0
- package/es/modules/Cropper/src/CropperFree.vue_vue_type_script_setup_true_name_CropperPhoto_lang.mjs +166 -0
- package/es/modules/Cropper/src/CropperFree.vue_vue_type_style_index_0_scoped_dc019220_lang.css +83 -0
- package/es/modules/code-editor/index.d.ts +3 -3
- package/es/modules/code-editor/monaco-editor.vue.d.ts +1 -1
- package/es/modules/code-editor/monaco-editor.vue.mjs +2 -2
- package/es/modules/code-editor/monaco-editor.vue_vue_type_script_setup_true_name_code-editor_lang.mjs +4 -3
- package/es/modules/code-editor/{monaco-editor.vue_vue_type_style_index_0_scoped_254c9227_lang.css → monaco-editor.vue_vue_type_style_index_0_scoped_ccf22884_lang.css} +9 -9
- package/es/modules/gct-table/editor/gct-table-date/gct-table-date.mjs +1 -1
- package/es/modules/gct-table/editor/gct-table-text/gct-table-text.mjs +1 -1
- package/es/modules/global-modal/src/BasicModal.vue.d.ts +2 -2
- package/package.json +7 -14
- package/dist/index.esm.min.js +0 -9864
- package/dist/monaco-editor-BHuf3IVH.js +0 -280
- package/dist/useMonacoEditor-CfhCBaPa.js +0 -2852
- /package/es/{modules/Cropper/hooks → hooks}/useFile.d.ts +0 -0
- /package/es/modules/gct-table/editor/{gct-table-text/gct-table-text.css → gct-table-date/gct-table-date.css} +0 -0
package/es/modules/Cropper/src/CopperModal.vue_vue_type_script_setup_true_name_CropperModal_lang.mjs
ADDED
|
@@ -0,0 +1,283 @@
|
|
|
1
|
+
import { useDesign } from "../../../hooks/useDesign.mjs";
|
|
2
|
+
import "../../../hooks/index.mjs";
|
|
3
|
+
import { useModalInner } from "../../global-modal/src/hooks/useModal.mjs";
|
|
4
|
+
import { BasicModal } from "../../global-modal/index.mjs";
|
|
5
|
+
import Cropper_default from "./Cropper.vue.mjs";
|
|
6
|
+
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, resolveComponent, toDisplayString, unref, withCtx, withModifiers } from "vue";
|
|
7
|
+
import { isFunction } from "lodash-es";
|
|
8
|
+
import { dataURLtoBlob, t } from "@gct-paas/core";
|
|
9
|
+
import { Space, Tooltip, Upload, message } from "ant-design-vue";
|
|
10
|
+
import { ReloadOutlined } from "@ant-design/icons-vue";
|
|
11
|
+
//#region src/modules/Cropper/src/CopperModal.vue?vue&type=script&setup=true&name=CropperModal&lang.ts
|
|
12
|
+
var _hoisted_1 = {
|
|
13
|
+
key: 1,
|
|
14
|
+
class: "empty"
|
|
15
|
+
};
|
|
16
|
+
var _hoisted_2 = { class: "flex flex-col justify-center items-center" };
|
|
17
|
+
var _hoisted_3 = ["title"];
|
|
18
|
+
var _hoisted_4 = { class: "flex-col" };
|
|
19
|
+
var _hoisted_5 = { class: "flex-col" };
|
|
20
|
+
var _hoisted_6 = { class: "flex-col text-center" };
|
|
21
|
+
var CopperModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default = /* @__PURE__ */ defineComponent({
|
|
22
|
+
__name: "CopperModal",
|
|
23
|
+
props: {
|
|
24
|
+
circled: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
default: true
|
|
27
|
+
},
|
|
28
|
+
uploadApi: { type: Function },
|
|
29
|
+
src: { type: String },
|
|
30
|
+
sourceUrlValue: { type: String }
|
|
31
|
+
},
|
|
32
|
+
emits: ["uploadSuccess", "register"],
|
|
33
|
+
setup(__props, { emit: __emit }) {
|
|
34
|
+
const props = __props;
|
|
35
|
+
const emit = __emit;
|
|
36
|
+
const src = ref(props.src || "");
|
|
37
|
+
const previewSource = ref("");
|
|
38
|
+
const cropper = ref();
|
|
39
|
+
let scaleX = 1;
|
|
40
|
+
let scaleY = 1;
|
|
41
|
+
let filename = "";
|
|
42
|
+
const { prefixCls } = useDesign("cropper-am");
|
|
43
|
+
const [register, { closeModal, setModalProps }] = useModalInner();
|
|
44
|
+
function handleBeforeUpload(file) {
|
|
45
|
+
if (file.size / 1024 / 1024 > 4) {
|
|
46
|
+
message.warn(`【${file.name}】文件大小不能超过 4MB`);
|
|
47
|
+
return false;
|
|
48
|
+
}
|
|
49
|
+
console.log(file.type);
|
|
50
|
+
if (![
|
|
51
|
+
"image/jpg",
|
|
52
|
+
"image/jpeg",
|
|
53
|
+
"image/png",
|
|
54
|
+
"image/bmp"
|
|
55
|
+
].includes(file.type)) {
|
|
56
|
+
message.warning(`【${file.name}】${t("sys.component.cropper.acceptAvatarTypeTip")}`);
|
|
57
|
+
return false;
|
|
58
|
+
}
|
|
59
|
+
const reader = new FileReader();
|
|
60
|
+
reader.readAsDataURL(file);
|
|
61
|
+
src.value = "";
|
|
62
|
+
previewSource.value = "";
|
|
63
|
+
reader.onload = function(e) {
|
|
64
|
+
src.value = e.target?.result ?? "";
|
|
65
|
+
filename = file.name;
|
|
66
|
+
};
|
|
67
|
+
return false;
|
|
68
|
+
}
|
|
69
|
+
function handleCropend({ imgBase64 }) {
|
|
70
|
+
previewSource.value = imgBase64;
|
|
71
|
+
}
|
|
72
|
+
function handleReady(cropperInstance) {
|
|
73
|
+
cropper.value = cropperInstance;
|
|
74
|
+
}
|
|
75
|
+
function handlerToolbar(event, arg) {
|
|
76
|
+
if (event === "scaleX") scaleX = arg = scaleX === -1 ? 1 : -1;
|
|
77
|
+
if (event === "scaleY") scaleY = arg = scaleY === -1 ? 1 : -1;
|
|
78
|
+
cropper.value?.[event]?.(arg);
|
|
79
|
+
}
|
|
80
|
+
async function handleOk() {
|
|
81
|
+
const uploadApi = props.uploadApi;
|
|
82
|
+
if (uploadApi && isFunction(uploadApi)) {
|
|
83
|
+
const blob = dataURLtoBlob(previewSource.value);
|
|
84
|
+
try {
|
|
85
|
+
setModalProps({ confirmLoading: true });
|
|
86
|
+
const result = await uploadApi({
|
|
87
|
+
name: "file",
|
|
88
|
+
file: blob,
|
|
89
|
+
filename
|
|
90
|
+
});
|
|
91
|
+
emit("uploadSuccess", {
|
|
92
|
+
source: previewSource.value,
|
|
93
|
+
data: result.data.data
|
|
94
|
+
});
|
|
95
|
+
closeModal();
|
|
96
|
+
} finally {
|
|
97
|
+
setModalProps({ confirmLoading: false });
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
return (_ctx, _cache) => {
|
|
102
|
+
const _component_PlusOutlined = resolveComponent("PlusOutlined");
|
|
103
|
+
const _component_a_button = resolveComponent("a-button");
|
|
104
|
+
const _component_Avatar = resolveComponent("Avatar");
|
|
105
|
+
return openBlock(), createBlock(unref(BasicModal), mergeProps(_ctx.$attrs, {
|
|
106
|
+
title: unref(t)("sys.component.cropper.modalTitle"),
|
|
107
|
+
width: "600px",
|
|
108
|
+
"min-height": "570",
|
|
109
|
+
"can-fullscreen": false,
|
|
110
|
+
"ok-text": unref(t)("sys.okText"),
|
|
111
|
+
onRegister: unref(register),
|
|
112
|
+
onOk: handleOk
|
|
113
|
+
}), {
|
|
114
|
+
default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(prefixCls)) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-left`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-cropper`) }, [src.value ? (openBlock(), createBlock(Cropper_default, {
|
|
115
|
+
key: 0,
|
|
116
|
+
src: src.value,
|
|
117
|
+
height: "360px",
|
|
118
|
+
width: "360px",
|
|
119
|
+
circled: __props.circled,
|
|
120
|
+
onCropend: handleCropend,
|
|
121
|
+
onReady: handleReady
|
|
122
|
+
}, null, 8, ["src", "circled"])) : createCommentVNode("", true), !__props.sourceUrlValue && src.value === "/404.png" ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(Upload), {
|
|
123
|
+
"list-type": "picture-card",
|
|
124
|
+
"file-list": [],
|
|
125
|
+
accept: "image/*",
|
|
126
|
+
"before-upload": handleBeforeUpload
|
|
127
|
+
}, {
|
|
128
|
+
default: withCtx(() => [createElementVNode("div", _hoisted_2, [
|
|
129
|
+
createVNode(_component_PlusOutlined),
|
|
130
|
+
_cache[14] || (_cache[14] = createElementVNode("div", { class: "mt12px" }, "点击或将图片拖拽到这里上传", -1)),
|
|
131
|
+
_cache[15] || (_cache[15] = createElementVNode("div", { class: "color-[#8B8B8B] mt8px" }, " 仅支持JPG、PNG、JPEG、BMP格式,文件小于4M ", -1))
|
|
132
|
+
])]),
|
|
133
|
+
_: 1
|
|
134
|
+
})])) : createCommentVNode("", true)], 2), __props.sourceUrlValue || src.value !== "/404.png" ? (openBlock(), createElementBlock("div", {
|
|
135
|
+
key: 0,
|
|
136
|
+
class: normalizeClass(`${unref(prefixCls)}-toolbar`)
|
|
137
|
+
}, [createVNode(unref(Upload), {
|
|
138
|
+
"file-list": [],
|
|
139
|
+
accept: "image/*",
|
|
140
|
+
"before-upload": handleBeforeUpload
|
|
141
|
+
}, {
|
|
142
|
+
default: withCtx(() => [createElementVNode("a", {
|
|
143
|
+
title: unref(t)("sys.reUpload"),
|
|
144
|
+
placement: "bottom"
|
|
145
|
+
}, toDisplayString(unref(t)("sys.reUpload")), 9, _hoisted_3)]),
|
|
146
|
+
_: 1
|
|
147
|
+
}), createVNode(unref(Space), null, {
|
|
148
|
+
default: withCtx(() => [
|
|
149
|
+
createVNode(unref(Tooltip), {
|
|
150
|
+
title: unref(t)("sys.component.cropper.btn_zoom_in"),
|
|
151
|
+
placement: "bottom"
|
|
152
|
+
}, {
|
|
153
|
+
default: withCtx(() => [createVNode(_component_a_button, {
|
|
154
|
+
size: "small",
|
|
155
|
+
disabled: !src.value,
|
|
156
|
+
onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
|
|
157
|
+
onClick: _cache[1] || (_cache[1] = ($event) => handlerToolbar("zoom", .1))
|
|
158
|
+
}, {
|
|
159
|
+
icon: withCtx(() => [..._cache[16] || (_cache[16] = [createElementVNode("i", { class: "iconfont icon-fangda_zoom-in" }, null, -1)])]),
|
|
160
|
+
_: 1
|
|
161
|
+
}, 8, ["disabled"])]),
|
|
162
|
+
_: 1
|
|
163
|
+
}, 8, ["title"]),
|
|
164
|
+
createVNode(unref(Tooltip), {
|
|
165
|
+
title: unref(t)("sys.component.cropper.btn_zoom_out"),
|
|
166
|
+
placement: "bottom"
|
|
167
|
+
}, {
|
|
168
|
+
default: withCtx(() => [createVNode(_component_a_button, {
|
|
169
|
+
size: "small",
|
|
170
|
+
disabled: !src.value,
|
|
171
|
+
onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
|
|
172
|
+
onClick: _cache[3] || (_cache[3] = ($event) => handlerToolbar("zoom", -.1))
|
|
173
|
+
}, {
|
|
174
|
+
icon: withCtx(() => [..._cache[17] || (_cache[17] = [createElementVNode("i", { class: "iconfont icon-a-suoxiao_zoom-out1" }, null, -1)])]),
|
|
175
|
+
_: 1
|
|
176
|
+
}, 8, ["disabled"])]),
|
|
177
|
+
_: 1
|
|
178
|
+
}, 8, ["title"]),
|
|
179
|
+
createVNode(unref(Tooltip), {
|
|
180
|
+
title: unref(t)("sys.component.cropper.btn_rotate_left"),
|
|
181
|
+
placement: "bottom"
|
|
182
|
+
}, {
|
|
183
|
+
default: withCtx(() => [createVNode(_component_a_button, {
|
|
184
|
+
size: "small",
|
|
185
|
+
disabled: !src.value,
|
|
186
|
+
onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
|
|
187
|
+
onClick: _cache[5] || (_cache[5] = ($event) => handlerToolbar("rotate", -45))
|
|
188
|
+
}, {
|
|
189
|
+
icon: withCtx(() => [..._cache[18] || (_cache[18] = [createElementVNode("i", { class: "iconfont icon-xuanzhuan_rotate" }, null, -1)])]),
|
|
190
|
+
_: 1
|
|
191
|
+
}, 8, ["disabled"])]),
|
|
192
|
+
_: 1
|
|
193
|
+
}, 8, ["title"]),
|
|
194
|
+
createVNode(unref(Tooltip), {
|
|
195
|
+
title: unref(t)("sys.component.cropper.btn_rotate_right"),
|
|
196
|
+
placement: "bottom"
|
|
197
|
+
}, {
|
|
198
|
+
default: withCtx(() => [createVNode(_component_a_button, {
|
|
199
|
+
size: "small",
|
|
200
|
+
disabled: !src.value,
|
|
201
|
+
onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {}, ["prevent"])),
|
|
202
|
+
onClick: _cache[7] || (_cache[7] = ($event) => handlerToolbar("rotate", 45))
|
|
203
|
+
}, {
|
|
204
|
+
icon: withCtx(() => [..._cache[19] || (_cache[19] = [createElementVNode("i", { class: "iconfont icon-xuanzhuan_2" }, null, -1)])]),
|
|
205
|
+
_: 1
|
|
206
|
+
}, 8, ["disabled"])]),
|
|
207
|
+
_: 1
|
|
208
|
+
}, 8, ["title"]),
|
|
209
|
+
createVNode(unref(Tooltip), {
|
|
210
|
+
title: unref(t)("sys.component.cropper.btn_scale_x"),
|
|
211
|
+
placement: "bottom"
|
|
212
|
+
}, {
|
|
213
|
+
default: withCtx(() => [createVNode(_component_a_button, {
|
|
214
|
+
size: "small",
|
|
215
|
+
disabled: !src.value,
|
|
216
|
+
onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {}, ["prevent"])),
|
|
217
|
+
onClick: _cache[9] || (_cache[9] = ($event) => handlerToolbar("scaleX"))
|
|
218
|
+
}, {
|
|
219
|
+
icon: withCtx(() => [..._cache[20] || (_cache[20] = [createElementVNode("i", { class: "iconfont icon-shuipingfanzhuan_flip-horizontally" }, null, -1)])]),
|
|
220
|
+
_: 1
|
|
221
|
+
}, 8, ["disabled"])]),
|
|
222
|
+
_: 1
|
|
223
|
+
}, 8, ["title"]),
|
|
224
|
+
createVNode(unref(Tooltip), {
|
|
225
|
+
title: unref(t)("sys.component.cropper.btn_scale_y"),
|
|
226
|
+
placement: "bottom"
|
|
227
|
+
}, {
|
|
228
|
+
default: withCtx(() => [createVNode(_component_a_button, {
|
|
229
|
+
size: "small",
|
|
230
|
+
disabled: !src.value,
|
|
231
|
+
onMousedown: _cache[10] || (_cache[10] = withModifiers(() => {}, ["prevent"])),
|
|
232
|
+
onClick: _cache[11] || (_cache[11] = ($event) => handlerToolbar("scaleY"))
|
|
233
|
+
}, {
|
|
234
|
+
icon: withCtx(() => [..._cache[21] || (_cache[21] = [createElementVNode("i", { class: "iconfont icon-chuizhifanzhuan_flip-vertically" }, null, -1)])]),
|
|
235
|
+
_: 1
|
|
236
|
+
}, 8, ["disabled"])]),
|
|
237
|
+
_: 1
|
|
238
|
+
}, 8, ["title"]),
|
|
239
|
+
createVNode(unref(Tooltip), {
|
|
240
|
+
title: unref(t)("sys.component.cropper.btn_reset"),
|
|
241
|
+
placement: "bottom"
|
|
242
|
+
}, {
|
|
243
|
+
default: withCtx(() => [createVNode(_component_a_button, {
|
|
244
|
+
size: "small",
|
|
245
|
+
disabled: !src.value,
|
|
246
|
+
onMousedown: _cache[12] || (_cache[12] = withModifiers(() => {}, ["prevent"])),
|
|
247
|
+
onClick: _cache[13] || (_cache[13] = ($event) => handlerToolbar("reset"))
|
|
248
|
+
}, {
|
|
249
|
+
icon: withCtx(() => [createVNode(unref(ReloadOutlined))]),
|
|
250
|
+
_: 1
|
|
251
|
+
}, 8, ["disabled"])]),
|
|
252
|
+
_: 1
|
|
253
|
+
}, 8, ["title"])
|
|
254
|
+
]),
|
|
255
|
+
_: 1
|
|
256
|
+
})], 2)) : createCommentVNode("", true)], 2), createElementVNode("div", { class: normalizeClass([`${unref(prefixCls)}-right`, "text-center"]) }, [_cache[22] || (_cache[22] = createTextVNode(" 预览 ", -1)), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-group`) }, [
|
|
257
|
+
createElementVNode("div", _hoisted_4, [createVNode(_component_Avatar, {
|
|
258
|
+
src: previewSource.value,
|
|
259
|
+
size: 102
|
|
260
|
+
}, null, 8, ["src"])]),
|
|
261
|
+
createElementVNode("div", _hoisted_5, [createVNode(_component_Avatar, {
|
|
262
|
+
src: previewSource.value,
|
|
263
|
+
size: 78
|
|
264
|
+
}, null, 8, ["src"])]),
|
|
265
|
+
createElementVNode("div", _hoisted_6, [createVNode(_component_Avatar, {
|
|
266
|
+
src: previewSource.value,
|
|
267
|
+
size: 28
|
|
268
|
+
}, null, 8, ["src"])])
|
|
269
|
+
], 2)], 2)], 2), _cache[23] || (_cache[23] = createElementVNode("div", {
|
|
270
|
+
class: "absolute z-10 top-0 left-2/3 w-0 h-full",
|
|
271
|
+
style: { "border-left": "1px solid #e0e3ea" }
|
|
272
|
+
}, null, -1))]),
|
|
273
|
+
_: 1
|
|
274
|
+
}, 16, [
|
|
275
|
+
"title",
|
|
276
|
+
"ok-text",
|
|
277
|
+
"onRegister"
|
|
278
|
+
]);
|
|
279
|
+
};
|
|
280
|
+
}
|
|
281
|
+
});
|
|
282
|
+
//#endregion
|
|
283
|
+
export { CopperModal_vue_vue_type_script_setup_true_name_CropperModal_lang_default as default };
|
package/es/modules/Cropper/src/CopperModal.vue_vue_type_style_index_0_scoped_f42f8311_lang.css
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
.gct-cropper-am[data-v-f42f8311] {
|
|
2
|
+
display: flex;
|
|
3
|
+
}
|
|
4
|
+
.gct-cropper-am-left[data-v-f42f8311],
|
|
5
|
+
.gct-cropper-am-right[data-v-f42f8311] {
|
|
6
|
+
height: 340px;
|
|
7
|
+
}
|
|
8
|
+
.gct-cropper-am-left[data-v-f42f8311] {
|
|
9
|
+
width: 400px;
|
|
10
|
+
}
|
|
11
|
+
.gct-cropper-am-right[data-v-f42f8311] {
|
|
12
|
+
width: 150px;
|
|
13
|
+
}
|
|
14
|
+
.gct-cropper-am-cropper[data-v-f42f8311] {
|
|
15
|
+
position: relative;
|
|
16
|
+
width: 360px;
|
|
17
|
+
height: 360px;
|
|
18
|
+
background: #eee;
|
|
19
|
+
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.25) 0);
|
|
20
|
+
background-position: 0 0,
|
|
21
|
+
12px 12px;
|
|
22
|
+
background-size: 24px 24px;
|
|
23
|
+
}
|
|
24
|
+
.gct-cropper-am-toolbar[data-v-f42f8311] {
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: space-between;
|
|
28
|
+
width: 360px;
|
|
29
|
+
margin-top: 10px;
|
|
30
|
+
}
|
|
31
|
+
.gct-cropper-am-preview[data-v-f42f8311] {
|
|
32
|
+
width: 220px;
|
|
33
|
+
height: 220px;
|
|
34
|
+
margin: 0 auto;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
border: 1px solid var(--gct-color-border);
|
|
37
|
+
border-radius: 50%;
|
|
38
|
+
}
|
|
39
|
+
.gct-cropper-am-preview img[data-v-f42f8311] {
|
|
40
|
+
width: 100%;
|
|
41
|
+
height: 100%;
|
|
42
|
+
}
|
|
43
|
+
.gct-cropper-am-group[data-v-f42f8311] {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: space-around;
|
|
48
|
+
height: 100%;
|
|
49
|
+
margin-top: 8px;
|
|
50
|
+
padding-top: 8px;
|
|
51
|
+
}
|
|
52
|
+
.empty[data-v-f42f8311] {
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: 0;
|
|
55
|
+
left: 0;
|
|
56
|
+
width: 100%;
|
|
57
|
+
height: 100%;
|
|
58
|
+
}
|
|
59
|
+
.empty span[data-v-f42f8311] {
|
|
60
|
+
display: inline-block;
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 100%;
|
|
63
|
+
}
|
|
64
|
+
.empty span[data-v-f42f8311] .ant-upload-list {
|
|
65
|
+
width: 100%;
|
|
66
|
+
height: 100%;
|
|
67
|
+
}
|
|
68
|
+
.empty span[data-v-f42f8311] .ant-upload-list .ant-upload-select-picture-card {
|
|
69
|
+
width: 100%;
|
|
70
|
+
height: 100%;
|
|
71
|
+
}
|
|
@@ -38,13 +38,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
38
38
|
default: () => {};
|
|
39
39
|
};
|
|
40
40
|
}>, {
|
|
41
|
-
getClass: import('vue').ComputedRef<
|
|
41
|
+
getClass: import('vue').ComputedRef<import('vue').ClassValue[]>;
|
|
42
42
|
imgElRef: import('vue').Ref<HTMLImageElement | null | undefined, HTMLImageElement | null | undefined>;
|
|
43
43
|
getWrapperStyle: import('vue').ComputedRef<CSSProperties>;
|
|
44
44
|
getImageStyle: import('vue').ComputedRef<CSSProperties>;
|
|
45
45
|
isReady: import('vue').Ref<boolean, boolean>;
|
|
46
46
|
croppered: () => void;
|
|
47
|
-
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("
|
|
47
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("ready" | "cropend" | "cropendError")[], "ready" | "cropend" | "cropendError", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
48
48
|
src: {
|
|
49
49
|
type: StringConstructor;
|
|
50
50
|
required: boolean;
|
|
@@ -81,8 +81,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
81
81
|
default: () => {};
|
|
82
82
|
};
|
|
83
83
|
}>> & Readonly<{
|
|
84
|
-
onCropend?: ((...args: any[]) => any) | undefined;
|
|
85
84
|
onReady?: ((...args: any[]) => any) | undefined;
|
|
85
|
+
onCropend?: ((...args: any[]) => any) | undefined;
|
|
86
86
|
onCropendError?: ((...args: any[]) => any) | undefined;
|
|
87
87
|
}>, {
|
|
88
88
|
width: string | number;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
|
|
2
|
+
import Cropper_vue_vue_type_script_lang_default from "./Cropper.vue_vue_type_script_lang.mjs";
|
|
3
|
+
import './Cropper.vue_vue_type_style_index_0_lang.css';/* empty css */
|
|
4
|
+
import { createElementBlock, createElementVNode, normalizeClass, normalizeStyle, openBlock, vShow, withDirectives } from "vue";
|
|
5
|
+
//#region src/modules/Cropper/src/Cropper.vue
|
|
6
|
+
var _hoisted_1 = [
|
|
7
|
+
"src",
|
|
8
|
+
"alt",
|
|
9
|
+
"crossorigin"
|
|
10
|
+
];
|
|
11
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
12
|
+
return openBlock(), createElementBlock("div", {
|
|
13
|
+
class: normalizeClass(_ctx.getClass),
|
|
14
|
+
style: normalizeStyle(_ctx.getWrapperStyle)
|
|
15
|
+
}, [withDirectives(createElementVNode("img", {
|
|
16
|
+
ref: "imgElRef",
|
|
17
|
+
src: _ctx.src,
|
|
18
|
+
alt: _ctx.alt,
|
|
19
|
+
crossorigin: _ctx.crossorigin,
|
|
20
|
+
style: normalizeStyle(_ctx.getImageStyle)
|
|
21
|
+
}, null, 12, _hoisted_1), [[vShow, _ctx.isReady]])], 6);
|
|
22
|
+
}
|
|
23
|
+
var Cropper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Cropper_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
|
|
24
|
+
//#endregion
|
|
25
|
+
export { Cropper_default as default };
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { useDesign } from "../../../hooks/useDesign.mjs";
|
|
2
|
+
import "../../../hooks/index.mjs";
|
|
3
|
+
import { computed, defineComponent, onMounted, onUnmounted, ref, unref } from "vue";
|
|
4
|
+
import { useDebounceFn } from "@vueuse/core";
|
|
5
|
+
import Cropper from "cropperjs";
|
|
6
|
+
import "cropperjs/dist/cropper.css";
|
|
7
|
+
//#region src/modules/Cropper/src/Cropper.vue?vue&type=script&lang.ts
|
|
8
|
+
var defaultOptions = {
|
|
9
|
+
aspectRatio: 1,
|
|
10
|
+
zoomable: true,
|
|
11
|
+
zoomOnTouch: true,
|
|
12
|
+
zoomOnWheel: true,
|
|
13
|
+
cropBoxMovable: true,
|
|
14
|
+
cropBoxResizable: true,
|
|
15
|
+
toggleDragModeOnDblclick: true,
|
|
16
|
+
autoCrop: true,
|
|
17
|
+
background: true,
|
|
18
|
+
highlight: true,
|
|
19
|
+
center: true,
|
|
20
|
+
responsive: true,
|
|
21
|
+
restore: true,
|
|
22
|
+
checkCrossOrigin: true,
|
|
23
|
+
checkOrientation: true,
|
|
24
|
+
scalable: true,
|
|
25
|
+
modal: true,
|
|
26
|
+
guides: true,
|
|
27
|
+
movable: true,
|
|
28
|
+
rotatable: true
|
|
29
|
+
};
|
|
30
|
+
var Cropper_vue_vue_type_script_lang_default = defineComponent({
|
|
31
|
+
name: "CropperImage",
|
|
32
|
+
props: {
|
|
33
|
+
src: {
|
|
34
|
+
type: String,
|
|
35
|
+
required: true
|
|
36
|
+
},
|
|
37
|
+
alt: { type: String },
|
|
38
|
+
circled: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: false
|
|
41
|
+
},
|
|
42
|
+
realTimePreview: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: true
|
|
45
|
+
},
|
|
46
|
+
height: {
|
|
47
|
+
type: [String, Number],
|
|
48
|
+
default: "360px"
|
|
49
|
+
},
|
|
50
|
+
width: {
|
|
51
|
+
type: [String, Number],
|
|
52
|
+
default: "360px"
|
|
53
|
+
},
|
|
54
|
+
crossorigin: {
|
|
55
|
+
type: String,
|
|
56
|
+
default: void 0
|
|
57
|
+
},
|
|
58
|
+
imageStyle: {
|
|
59
|
+
type: Object,
|
|
60
|
+
default: () => ({})
|
|
61
|
+
},
|
|
62
|
+
options: {
|
|
63
|
+
type: Object,
|
|
64
|
+
default: () => ({})
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
emits: [
|
|
68
|
+
"cropend",
|
|
69
|
+
"ready",
|
|
70
|
+
"cropendError"
|
|
71
|
+
],
|
|
72
|
+
setup(props, { attrs, emit }) {
|
|
73
|
+
const imgElRef = ref();
|
|
74
|
+
const cropper = ref();
|
|
75
|
+
const isReady = ref(false);
|
|
76
|
+
const { prefixCls } = useDesign("cropper-image");
|
|
77
|
+
const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
|
|
78
|
+
const getImageStyle = computed(() => {
|
|
79
|
+
return {
|
|
80
|
+
height: props.height,
|
|
81
|
+
width: props.width,
|
|
82
|
+
maxWidth: "100%",
|
|
83
|
+
...props.imageStyle
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
const getClass = computed(() => {
|
|
87
|
+
return [
|
|
88
|
+
prefixCls,
|
|
89
|
+
attrs.class,
|
|
90
|
+
{ [`${prefixCls}--circled`]: props.circled }
|
|
91
|
+
];
|
|
92
|
+
});
|
|
93
|
+
const getWrapperStyle = computed(() => {
|
|
94
|
+
return {
|
|
95
|
+
height: `${props.height}`.replace(/px/, "") + "px",
|
|
96
|
+
width: `${props.width}`.replace(/px/, "") + "px"
|
|
97
|
+
};
|
|
98
|
+
});
|
|
99
|
+
onMounted(init);
|
|
100
|
+
onUnmounted(() => {
|
|
101
|
+
cropper.value?.destroy();
|
|
102
|
+
});
|
|
103
|
+
async function init() {
|
|
104
|
+
const imgEl = unref(imgElRef);
|
|
105
|
+
if (!imgEl) return;
|
|
106
|
+
cropper.value = new Cropper(imgEl, {
|
|
107
|
+
...defaultOptions,
|
|
108
|
+
ready: () => {
|
|
109
|
+
isReady.value = true;
|
|
110
|
+
realTimeCroppered();
|
|
111
|
+
emit("ready", cropper.value);
|
|
112
|
+
},
|
|
113
|
+
crop() {
|
|
114
|
+
debounceRealTimeCroppered();
|
|
115
|
+
},
|
|
116
|
+
zoom() {
|
|
117
|
+
debounceRealTimeCroppered();
|
|
118
|
+
},
|
|
119
|
+
cropmove() {
|
|
120
|
+
debounceRealTimeCroppered();
|
|
121
|
+
},
|
|
122
|
+
...props.options
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
function realTimeCroppered() {
|
|
126
|
+
props.realTimePreview && croppered();
|
|
127
|
+
}
|
|
128
|
+
function croppered() {
|
|
129
|
+
if (!cropper.value) return;
|
|
130
|
+
let imgInfo = cropper.value.getData();
|
|
131
|
+
(props.circled ? getRoundedCanvas() : cropper.value.getCroppedCanvas()).toBlob((blob) => {
|
|
132
|
+
if (!blob) return;
|
|
133
|
+
let fileReader = new FileReader();
|
|
134
|
+
fileReader.readAsDataURL(blob);
|
|
135
|
+
fileReader.onloadend = (e) => {
|
|
136
|
+
emit("cropend", {
|
|
137
|
+
imgBase64: e.target?.result ?? "",
|
|
138
|
+
imgInfo
|
|
139
|
+
});
|
|
140
|
+
};
|
|
141
|
+
fileReader.onerror = () => {
|
|
142
|
+
emit("cropendError");
|
|
143
|
+
};
|
|
144
|
+
}, "image/png");
|
|
145
|
+
}
|
|
146
|
+
function getRoundedCanvas() {
|
|
147
|
+
const sourceCanvas = cropper.value.getCroppedCanvas();
|
|
148
|
+
const canvas = document.createElement("canvas");
|
|
149
|
+
const context = canvas.getContext("2d");
|
|
150
|
+
const width = sourceCanvas.width;
|
|
151
|
+
const height = sourceCanvas.height;
|
|
152
|
+
canvas.width = width;
|
|
153
|
+
canvas.height = height;
|
|
154
|
+
context.imageSmoothingEnabled = true;
|
|
155
|
+
context.drawImage(sourceCanvas, 0, 0, width, height);
|
|
156
|
+
context.globalCompositeOperation = "destination-in";
|
|
157
|
+
context.beginPath();
|
|
158
|
+
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
|
|
159
|
+
context.fill();
|
|
160
|
+
return canvas;
|
|
161
|
+
}
|
|
162
|
+
return {
|
|
163
|
+
getClass,
|
|
164
|
+
imgElRef,
|
|
165
|
+
getWrapperStyle,
|
|
166
|
+
getImageStyle,
|
|
167
|
+
isReady,
|
|
168
|
+
croppered
|
|
169
|
+
};
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
//#endregion
|
|
173
|
+
export { Cropper_vue_vue_type_script_lang_default as default };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.mjs";
|
|
2
|
+
import CropperAvatar_vue_vue_type_script_setup_true_name_CropperAvatar_lang_default from "./CropperAvatar.vue_vue_type_script_setup_true_name_CropperAvatar_lang.mjs";
|
|
3
|
+
import './CropperAvatar.vue_vue_type_style_index_0_scoped_66052c52_lang.css';/* empty css */
|
|
4
|
+
//#region src/modules/Cropper/src/CropperAvatar.vue
|
|
5
|
+
var CropperAvatar_default = /* @__PURE__ */ _plugin_vue_export_helper_default(CropperAvatar_vue_vue_type_script_setup_true_name_CropperAvatar_lang_default, [["__scopeId", "data-v-66052c52"]]);
|
|
6
|
+
//#endregion
|
|
7
|
+
export { CropperAvatar_default as default };
|