@mingto/mt-ui 1.1.43 → 1.1.45
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/index.es.js +134 -74
- package/dist/index.umd.js +134 -74
- package/dist/style.css +3 -2
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -8300,7 +8300,7 @@ var dialog_default = /* @__PURE__ */ defineComponent({
|
|
|
8300
8300
|
return (_ctx, _cache) => {
|
|
8301
8301
|
return openBlock(), createBlock(unref(MtTeleport), { to: props.appendTo }, {
|
|
8302
8302
|
default: withCtx(() => [createVNode(Transition, {
|
|
8303
|
-
name: unref(ns).
|
|
8303
|
+
name: `${unref(ns).e("overlay")}-fade`,
|
|
8304
8304
|
onAfterLeave: handleAfterLeave
|
|
8305
8305
|
}, {
|
|
8306
8306
|
default: withCtx(() => [withDirectives(createVNode(unref(MtOverlay), {
|
|
@@ -19342,6 +19342,8 @@ var MtTabs = withInstall$1(/* @__PURE__ */ defineComponent({
|
|
|
19342
19342
|
const emits = __emit;
|
|
19343
19343
|
const ns = useNamespace("tabs");
|
|
19344
19344
|
const tabsRef = ref();
|
|
19345
|
+
const barStyles = ref({});
|
|
19346
|
+
const lineStyles = ref({});
|
|
19345
19347
|
const currentTabName = computed({
|
|
19346
19348
|
get() {
|
|
19347
19349
|
return props.modelValue;
|
|
@@ -19356,35 +19358,51 @@ var MtTabs = withInstall$1(/* @__PURE__ */ defineComponent({
|
|
|
19356
19358
|
onChange,
|
|
19357
19359
|
type: props.type
|
|
19358
19360
|
});
|
|
19359
|
-
|
|
19360
|
-
|
|
19361
|
-
|
|
19362
|
-
const
|
|
19363
|
-
if (
|
|
19364
|
-
|
|
19365
|
-
|
|
19366
|
-
|
|
19367
|
-
|
|
19368
|
-
|
|
19369
|
-
|
|
19370
|
-
|
|
19361
|
+
function getActiveTabElement() {
|
|
19362
|
+
if (!tabsRef.value) return null;
|
|
19363
|
+
for (let index = 0; index < children.length; index++) {
|
|
19364
|
+
const child = children[index];
|
|
19365
|
+
if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) continue;
|
|
19366
|
+
return tabsRef.value.querySelector(`#tab-${index}`);
|
|
19367
|
+
}
|
|
19368
|
+
return null;
|
|
19369
|
+
}
|
|
19370
|
+
async function updateActiveStyles() {
|
|
19371
|
+
await nextTick();
|
|
19372
|
+
const $el = getActiveTabElement();
|
|
19373
|
+
if (!$el) {
|
|
19374
|
+
barStyles.value = {};
|
|
19375
|
+
lineStyles.value = {};
|
|
19376
|
+
return;
|
|
19377
|
+
}
|
|
19378
|
+
barStyles.value = {
|
|
19379
|
+
width: `${$el.clientWidth}px`,
|
|
19380
|
+
left: `${$el.offsetLeft}px`
|
|
19381
|
+
};
|
|
19371
19382
|
const styles = {};
|
|
19372
|
-
|
|
19373
|
-
|
|
19374
|
-
|
|
19375
|
-
|
|
19376
|
-
|
|
19377
|
-
styles.width = `${$el.clientWidth - beParsedAsNumber(tabStyles.paddingLeft) - beParsedAsNumber(tabStyles.paddingRight)}px`;
|
|
19378
|
-
styles.left = `${$el.offsetLeft + beParsedAsNumber(tabStyles.paddingLeft)}px`;
|
|
19379
|
-
});
|
|
19380
|
-
return styles;
|
|
19381
|
-
});
|
|
19383
|
+
const tabStyles = window.getComputedStyle($el);
|
|
19384
|
+
styles.width = `${$el.clientWidth - beParsedAsNumber(tabStyles.paddingLeft) - beParsedAsNumber(tabStyles.paddingRight)}px`;
|
|
19385
|
+
styles.left = `${$el.offsetLeft + beParsedAsNumber(tabStyles.paddingLeft)}px`;
|
|
19386
|
+
lineStyles.value = styles;
|
|
19387
|
+
}
|
|
19382
19388
|
const tabsClasses = computed(() => {
|
|
19383
19389
|
return [ns.b(), ns.m(props.type)];
|
|
19384
19390
|
});
|
|
19385
19391
|
function onChange(tabName) {
|
|
19386
19392
|
currentTabName.value = tabName;
|
|
19387
19393
|
}
|
|
19394
|
+
watch(() => [
|
|
19395
|
+
currentTabName.value,
|
|
19396
|
+
children.length,
|
|
19397
|
+
props.type
|
|
19398
|
+
], updateActiveStyles, { flush: "post" });
|
|
19399
|
+
onMounted(() => {
|
|
19400
|
+
updateActiveStyles();
|
|
19401
|
+
window.addEventListener("resize", updateActiveStyles);
|
|
19402
|
+
});
|
|
19403
|
+
onBeforeUnmount(() => {
|
|
19404
|
+
window.removeEventListener("resize", updateActiveStyles);
|
|
19405
|
+
});
|
|
19388
19406
|
return (_ctx, _cache) => {
|
|
19389
19407
|
return openBlock(), createElementBlock("div", {
|
|
19390
19408
|
ref_key: "tabsRef",
|
|
@@ -20819,10 +20837,88 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
|
|
|
20819
20837
|
copperPromiseDeferred?.resolve(newFile);
|
|
20820
20838
|
});
|
|
20821
20839
|
}
|
|
20822
|
-
|
|
20823
|
-
|
|
20840
|
+
function fitSize(maxWidth, maxHeight, aspectRatio) {
|
|
20841
|
+
let width = maxWidth;
|
|
20842
|
+
let height = width / aspectRatio;
|
|
20843
|
+
if (height > maxHeight) {
|
|
20844
|
+
height = maxHeight;
|
|
20845
|
+
width = height * aspectRatio;
|
|
20846
|
+
}
|
|
20847
|
+
return {
|
|
20848
|
+
width: Math.max(Math.round(width), 1),
|
|
20849
|
+
height: Math.max(Math.round(height), 1)
|
|
20850
|
+
};
|
|
20851
|
+
}
|
|
20852
|
+
function getInitialCropSize(image) {
|
|
20853
|
+
const cropper = cropperRef.value;
|
|
20854
|
+
const containerWidth = cropper?.w || 0;
|
|
20855
|
+
const containerHeight = cropper?.h || 0;
|
|
20856
|
+
const maxWidth = containerWidth * .82;
|
|
20857
|
+
const maxHeight = containerHeight * .82;
|
|
20858
|
+
const cropWidth = Number(cropperProps.value.autoCropWidth || 0);
|
|
20859
|
+
const cropHeight = Number(cropperProps.value.autoCropHeight || 0);
|
|
20860
|
+
if (cropWidth > 0 && cropHeight > 0) return {
|
|
20861
|
+
width: Math.min(cropWidth, containerWidth),
|
|
20862
|
+
height: Math.min(cropHeight, containerHeight)
|
|
20863
|
+
};
|
|
20864
|
+
const fixedNumber = cropperProps.value.fixedNumber || [1, 1];
|
|
20865
|
+
const aspectRatio = cropperProps.value.fixed ? fixedNumber[0] / fixedNumber[1] : image.width / image.height;
|
|
20866
|
+
const fittedSize = fitSize(maxWidth, maxHeight, aspectRatio);
|
|
20867
|
+
if (cropWidth > 0) return fitSize(Math.min(cropWidth, containerWidth), maxHeight, aspectRatio);
|
|
20868
|
+
if (cropHeight > 0) return fitSize(maxWidth, Math.min(cropHeight, containerHeight), aspectRatio);
|
|
20869
|
+
return fittedSize;
|
|
20870
|
+
}
|
|
20871
|
+
function centerCropBox(width, height) {
|
|
20872
|
+
const cropper = cropperRef.value;
|
|
20873
|
+
if (!cropper?.goAutoCrop) return;
|
|
20874
|
+
const nextWidth = width || cropper.cropW;
|
|
20875
|
+
const nextHeight = height || cropper.cropH;
|
|
20876
|
+
if (!nextWidth || !nextHeight) return;
|
|
20877
|
+
cropper.goAutoCrop(nextWidth, nextHeight);
|
|
20878
|
+
}
|
|
20879
|
+
function fitImageToCropBox() {
|
|
20880
|
+
const cropper = cropperRef.value;
|
|
20881
|
+
if (!cropper?.trueWidth || !cropper?.trueHeight || !cropper?.cropW || !cropper?.cropH) return;
|
|
20882
|
+
const scale = Math.min(cropper.cropW / cropper.trueWidth, cropper.cropH / cropper.trueHeight);
|
|
20883
|
+
const scaledWidth = cropper.trueWidth * scale;
|
|
20884
|
+
const scaledHeight = cropper.trueHeight * scale;
|
|
20885
|
+
cropper.scale = scale;
|
|
20886
|
+
cropper.x = cropper.cropOffsertX + (cropper.cropW - scaledWidth) / 2 - (cropper.trueWidth - scaledWidth) / 2;
|
|
20887
|
+
cropper.y = cropper.cropOffsertY + (cropper.cropH - scaledHeight) / 2 - (cropper.trueHeight - scaledHeight) / 2;
|
|
20888
|
+
enlarge.value = 1 / scale;
|
|
20889
|
+
}
|
|
20890
|
+
function waitCropperReady() {
|
|
20891
|
+
return new Promise((resolve) => {
|
|
20892
|
+
let observer = null;
|
|
20893
|
+
const cleanup = () => {
|
|
20894
|
+
observer?.disconnect();
|
|
20895
|
+
if (scaleIntervalId) {
|
|
20896
|
+
clearInterval(scaleIntervalId);
|
|
20897
|
+
scaleIntervalId = null;
|
|
20898
|
+
}
|
|
20899
|
+
};
|
|
20900
|
+
const check = () => {
|
|
20901
|
+
const cropper = cropperRef.value;
|
|
20902
|
+
if (cropper?.w && cropper?.h && cropper?.trueWidth && cropper?.trueHeight) {
|
|
20903
|
+
cleanup();
|
|
20904
|
+
resolve();
|
|
20905
|
+
}
|
|
20906
|
+
};
|
|
20907
|
+
observer = new MutationObserver(check);
|
|
20908
|
+
const cropperElement = cropperRef.value?.$el;
|
|
20909
|
+
if (cropperElement) observer.observe(cropperElement, {
|
|
20910
|
+
childList: true,
|
|
20911
|
+
subtree: true,
|
|
20912
|
+
attributes: true
|
|
20913
|
+
});
|
|
20914
|
+
scaleIntervalId = setInterval(check, 50);
|
|
20915
|
+
check();
|
|
20916
|
+
});
|
|
20917
|
+
}
|
|
20918
|
+
const isApplyingInitialCrop = ref(false);
|
|
20919
|
+
async function applyInitialCrop(url) {
|
|
20824
20920
|
try {
|
|
20825
|
-
|
|
20921
|
+
isApplyingInitialCrop.value = true;
|
|
20826
20922
|
const image = new Image();
|
|
20827
20923
|
image.crossOrigin = "anonymous";
|
|
20828
20924
|
await new Promise((resolve, reject) => {
|
|
@@ -20830,54 +20926,18 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
|
|
|
20830
20926
|
image.onerror = () => reject(/* @__PURE__ */ new Error(`Failed to load image: ${url}`));
|
|
20831
20927
|
image.src = url;
|
|
20832
20928
|
});
|
|
20833
|
-
await
|
|
20834
|
-
|
|
20835
|
-
const cleanup = () => {
|
|
20836
|
-
observer?.disconnect();
|
|
20837
|
-
if (scaleIntervalId) {
|
|
20838
|
-
clearInterval(scaleIntervalId);
|
|
20839
|
-
scaleIntervalId = null;
|
|
20840
|
-
}
|
|
20841
|
-
};
|
|
20842
|
-
const checkCropper = () => {
|
|
20843
|
-
if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
|
|
20844
|
-
cleanup();
|
|
20845
|
-
resolve();
|
|
20846
|
-
return;
|
|
20847
|
-
}
|
|
20848
|
-
observer = new MutationObserver(() => {
|
|
20849
|
-
if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
|
|
20850
|
-
cleanup();
|
|
20851
|
-
resolve();
|
|
20852
|
-
}
|
|
20853
|
-
});
|
|
20854
|
-
if (cropperRef.value?.$el) observer.observe(cropperRef.value.$el, {
|
|
20855
|
-
childList: true,
|
|
20856
|
-
subtree: true,
|
|
20857
|
-
attributes: true
|
|
20858
|
-
});
|
|
20859
|
-
scaleIntervalId = setInterval(() => {
|
|
20860
|
-
if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
|
|
20861
|
-
cleanup();
|
|
20862
|
-
resolve();
|
|
20863
|
-
}
|
|
20864
|
-
}, 50);
|
|
20865
|
-
checkCropper();
|
|
20866
|
-
};
|
|
20867
|
-
checkCropper();
|
|
20868
|
-
});
|
|
20929
|
+
await nextTick();
|
|
20930
|
+
await waitCropperReady();
|
|
20869
20931
|
if (cropperRef.value) {
|
|
20870
|
-
const
|
|
20871
|
-
|
|
20872
|
-
|
|
20873
|
-
|
|
20874
|
-
else scale = cropNumber[0] / imageNumber[0];
|
|
20875
|
-
cropperRef.value.scale = scale;
|
|
20932
|
+
const cropSize = getInitialCropSize(image);
|
|
20933
|
+
centerCropBox(cropSize.width, cropSize.height);
|
|
20934
|
+
await nextTick();
|
|
20935
|
+
fitImageToCropBox();
|
|
20876
20936
|
}
|
|
20877
20937
|
} catch (error) {
|
|
20878
|
-
console.error("
|
|
20938
|
+
console.error("应用初始裁剪框失败:", error);
|
|
20879
20939
|
} finally {
|
|
20880
|
-
|
|
20940
|
+
isApplyingInitialCrop.value = false;
|
|
20881
20941
|
}
|
|
20882
20942
|
}
|
|
20883
20943
|
__expose({
|
|
@@ -20896,7 +20956,7 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
|
|
|
20896
20956
|
}
|
|
20897
20957
|
dialogVisible.value = true;
|
|
20898
20958
|
copperPromiseDeferred = new Deferred();
|
|
20899
|
-
if (cropperProps.value.autoCropScale)
|
|
20959
|
+
if (cropperProps.value.autoCropScale) applyInitialCrop(filePath.value);
|
|
20900
20960
|
const newFile = await copperPromiseDeferred.promise;
|
|
20901
20961
|
copperPromiseDeferred = null;
|
|
20902
20962
|
URL.revokeObjectURL(filePath.value);
|
|
@@ -20922,7 +20982,7 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
|
|
|
20922
20982
|
}, {
|
|
20923
20983
|
default: withCtx(() => [createVNode(unref(MtDialogConfirmLayout), {
|
|
20924
20984
|
loading: loading.value,
|
|
20925
|
-
disabled:
|
|
20985
|
+
disabled: isApplyingInitialCrop.value,
|
|
20926
20986
|
"confirm-text": unref(t)("mt.upload.confirm"),
|
|
20927
20987
|
"cancel-text": unref(t)("mt.upload.cancel"),
|
|
20928
20988
|
onCancel: handleCancel,
|
|
@@ -20931,7 +20991,7 @@ var upload_image_copper_vue_vue_type_script_setup_true_lang_default = /* @__PURE
|
|
|
20931
20991
|
default: withCtx(() => [filePath.value ? (openBlock(), createElementBlock("div", {
|
|
20932
20992
|
key: 0,
|
|
20933
20993
|
class: normalizeClass(unref(ns).e("content"))
|
|
20934
|
-
}, [
|
|
20994
|
+
}, [isApplyingInitialCrop.value ? (openBlock(), createElementBlock("div", {
|
|
20935
20995
|
key: 0,
|
|
20936
20996
|
class: normalizeClass(unref(ns).e("loading"))
|
|
20937
20997
|
}, [createVNode(unref(MtLoading), { size: 80 })], 2)) : createCommentVNode("", true), createVNode(unref(M), mergeProps({
|
|
@@ -20968,7 +21028,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
|
|
|
20968
21028
|
};
|
|
20969
21029
|
//#endregion
|
|
20970
21030
|
//#region src/upload/src/upload-image-copper.vue
|
|
20971
|
-
var upload_image_copper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_image_copper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
21031
|
+
var upload_image_copper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_image_copper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-47a8b76d"]]);
|
|
20972
21032
|
//#endregion
|
|
20973
21033
|
//#region src/upload/src/layout/upload-image-grid-layout.vue
|
|
20974
21034
|
var upload_image_grid_layout_default = /* @__PURE__ */ defineComponent({
|
package/dist/index.umd.js
CHANGED
|
@@ -8355,7 +8355,7 @@
|
|
|
8355
8355
|
return (_ctx, _cache) => {
|
|
8356
8356
|
return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(MtTeleport), { to: props.appendTo }, {
|
|
8357
8357
|
default: (0, vue.withCtx)(() => [(0, vue.createVNode)(vue.Transition, {
|
|
8358
|
-
name: (0, vue.unref)(ns).
|
|
8358
|
+
name: `${(0, vue.unref)(ns).e("overlay")}-fade`,
|
|
8359
8359
|
onAfterLeave: handleAfterLeave
|
|
8360
8360
|
}, {
|
|
8361
8361
|
default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(MtOverlay), {
|
|
@@ -19416,6 +19416,8 @@ triggerRef });
|
|
|
19416
19416
|
const emits = __emit;
|
|
19417
19417
|
const ns = useNamespace("tabs");
|
|
19418
19418
|
const tabsRef = (0, vue.ref)();
|
|
19419
|
+
const barStyles = (0, vue.ref)({});
|
|
19420
|
+
const lineStyles = (0, vue.ref)({});
|
|
19419
19421
|
const currentTabName = (0, vue.computed)({
|
|
19420
19422
|
get() {
|
|
19421
19423
|
return props.modelValue;
|
|
@@ -19430,35 +19432,51 @@ triggerRef });
|
|
|
19430
19432
|
onChange,
|
|
19431
19433
|
type: props.type
|
|
19432
19434
|
});
|
|
19433
|
-
|
|
19434
|
-
|
|
19435
|
-
|
|
19436
|
-
const
|
|
19437
|
-
if (
|
|
19438
|
-
|
|
19439
|
-
|
|
19440
|
-
|
|
19441
|
-
|
|
19442
|
-
|
|
19443
|
-
|
|
19444
|
-
|
|
19435
|
+
function getActiveTabElement() {
|
|
19436
|
+
if (!tabsRef.value) return null;
|
|
19437
|
+
for (let index = 0; index < children.length; index++) {
|
|
19438
|
+
const child = children[index];
|
|
19439
|
+
if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) continue;
|
|
19440
|
+
return tabsRef.value.querySelector(`#tab-${index}`);
|
|
19441
|
+
}
|
|
19442
|
+
return null;
|
|
19443
|
+
}
|
|
19444
|
+
async function updateActiveStyles() {
|
|
19445
|
+
await (0, vue.nextTick)();
|
|
19446
|
+
const $el = getActiveTabElement();
|
|
19447
|
+
if (!$el) {
|
|
19448
|
+
barStyles.value = {};
|
|
19449
|
+
lineStyles.value = {};
|
|
19450
|
+
return;
|
|
19451
|
+
}
|
|
19452
|
+
barStyles.value = {
|
|
19453
|
+
width: `${$el.clientWidth}px`,
|
|
19454
|
+
left: `${$el.offsetLeft}px`
|
|
19455
|
+
};
|
|
19445
19456
|
const styles = {};
|
|
19446
|
-
|
|
19447
|
-
|
|
19448
|
-
|
|
19449
|
-
|
|
19450
|
-
|
|
19451
|
-
styles.width = `${$el.clientWidth - (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingLeft) - (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingRight)}px`;
|
|
19452
|
-
styles.left = `${$el.offsetLeft + (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingLeft)}px`;
|
|
19453
|
-
});
|
|
19454
|
-
return styles;
|
|
19455
|
-
});
|
|
19457
|
+
const tabStyles = window.getComputedStyle($el);
|
|
19458
|
+
styles.width = `${$el.clientWidth - (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingLeft) - (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingRight)}px`;
|
|
19459
|
+
styles.left = `${$el.offsetLeft + (0, _mingto_tools.beParsedAsNumber)(tabStyles.paddingLeft)}px`;
|
|
19460
|
+
lineStyles.value = styles;
|
|
19461
|
+
}
|
|
19456
19462
|
const tabsClasses = (0, vue.computed)(() => {
|
|
19457
19463
|
return [ns.b(), ns.m(props.type)];
|
|
19458
19464
|
});
|
|
19459
19465
|
function onChange(tabName) {
|
|
19460
19466
|
currentTabName.value = tabName;
|
|
19461
19467
|
}
|
|
19468
|
+
(0, vue.watch)(() => [
|
|
19469
|
+
currentTabName.value,
|
|
19470
|
+
children.length,
|
|
19471
|
+
props.type
|
|
19472
|
+
], updateActiveStyles, { flush: "post" });
|
|
19473
|
+
(0, vue.onMounted)(() => {
|
|
19474
|
+
updateActiveStyles();
|
|
19475
|
+
window.addEventListener("resize", updateActiveStyles);
|
|
19476
|
+
});
|
|
19477
|
+
(0, vue.onBeforeUnmount)(() => {
|
|
19478
|
+
window.removeEventListener("resize", updateActiveStyles);
|
|
19479
|
+
});
|
|
19462
19480
|
return (_ctx, _cache) => {
|
|
19463
19481
|
return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
19464
19482
|
ref_key: "tabsRef",
|
|
@@ -20897,10 +20915,88 @@ triggerRef });
|
|
|
20897
20915
|
copperPromiseDeferred?.resolve(newFile);
|
|
20898
20916
|
});
|
|
20899
20917
|
}
|
|
20900
|
-
|
|
20901
|
-
|
|
20918
|
+
function fitSize(maxWidth, maxHeight, aspectRatio) {
|
|
20919
|
+
let width = maxWidth;
|
|
20920
|
+
let height = width / aspectRatio;
|
|
20921
|
+
if (height > maxHeight) {
|
|
20922
|
+
height = maxHeight;
|
|
20923
|
+
width = height * aspectRatio;
|
|
20924
|
+
}
|
|
20925
|
+
return {
|
|
20926
|
+
width: Math.max(Math.round(width), 1),
|
|
20927
|
+
height: Math.max(Math.round(height), 1)
|
|
20928
|
+
};
|
|
20929
|
+
}
|
|
20930
|
+
function getInitialCropSize(image) {
|
|
20931
|
+
const cropper = cropperRef.value;
|
|
20932
|
+
const containerWidth = cropper?.w || 0;
|
|
20933
|
+
const containerHeight = cropper?.h || 0;
|
|
20934
|
+
const maxWidth = containerWidth * .82;
|
|
20935
|
+
const maxHeight = containerHeight * .82;
|
|
20936
|
+
const cropWidth = Number(cropperProps.value.autoCropWidth || 0);
|
|
20937
|
+
const cropHeight = Number(cropperProps.value.autoCropHeight || 0);
|
|
20938
|
+
if (cropWidth > 0 && cropHeight > 0) return {
|
|
20939
|
+
width: Math.min(cropWidth, containerWidth),
|
|
20940
|
+
height: Math.min(cropHeight, containerHeight)
|
|
20941
|
+
};
|
|
20942
|
+
const fixedNumber = cropperProps.value.fixedNumber || [1, 1];
|
|
20943
|
+
const aspectRatio = cropperProps.value.fixed ? fixedNumber[0] / fixedNumber[1] : image.width / image.height;
|
|
20944
|
+
const fittedSize = fitSize(maxWidth, maxHeight, aspectRatio);
|
|
20945
|
+
if (cropWidth > 0) return fitSize(Math.min(cropWidth, containerWidth), maxHeight, aspectRatio);
|
|
20946
|
+
if (cropHeight > 0) return fitSize(maxWidth, Math.min(cropHeight, containerHeight), aspectRatio);
|
|
20947
|
+
return fittedSize;
|
|
20948
|
+
}
|
|
20949
|
+
function centerCropBox(width, height) {
|
|
20950
|
+
const cropper = cropperRef.value;
|
|
20951
|
+
if (!cropper?.goAutoCrop) return;
|
|
20952
|
+
const nextWidth = width || cropper.cropW;
|
|
20953
|
+
const nextHeight = height || cropper.cropH;
|
|
20954
|
+
if (!nextWidth || !nextHeight) return;
|
|
20955
|
+
cropper.goAutoCrop(nextWidth, nextHeight);
|
|
20956
|
+
}
|
|
20957
|
+
function fitImageToCropBox() {
|
|
20958
|
+
const cropper = cropperRef.value;
|
|
20959
|
+
if (!cropper?.trueWidth || !cropper?.trueHeight || !cropper?.cropW || !cropper?.cropH) return;
|
|
20960
|
+
const scale = Math.min(cropper.cropW / cropper.trueWidth, cropper.cropH / cropper.trueHeight);
|
|
20961
|
+
const scaledWidth = cropper.trueWidth * scale;
|
|
20962
|
+
const scaledHeight = cropper.trueHeight * scale;
|
|
20963
|
+
cropper.scale = scale;
|
|
20964
|
+
cropper.x = cropper.cropOffsertX + (cropper.cropW - scaledWidth) / 2 - (cropper.trueWidth - scaledWidth) / 2;
|
|
20965
|
+
cropper.y = cropper.cropOffsertY + (cropper.cropH - scaledHeight) / 2 - (cropper.trueHeight - scaledHeight) / 2;
|
|
20966
|
+
enlarge.value = 1 / scale;
|
|
20967
|
+
}
|
|
20968
|
+
function waitCropperReady() {
|
|
20969
|
+
return new Promise((resolve) => {
|
|
20970
|
+
let observer = null;
|
|
20971
|
+
const cleanup = () => {
|
|
20972
|
+
observer?.disconnect();
|
|
20973
|
+
if (scaleIntervalId) {
|
|
20974
|
+
clearInterval(scaleIntervalId);
|
|
20975
|
+
scaleIntervalId = null;
|
|
20976
|
+
}
|
|
20977
|
+
};
|
|
20978
|
+
const check = () => {
|
|
20979
|
+
const cropper = cropperRef.value;
|
|
20980
|
+
if (cropper?.w && cropper?.h && cropper?.trueWidth && cropper?.trueHeight) {
|
|
20981
|
+
cleanup();
|
|
20982
|
+
resolve();
|
|
20983
|
+
}
|
|
20984
|
+
};
|
|
20985
|
+
observer = new MutationObserver(check);
|
|
20986
|
+
const cropperElement = cropperRef.value?.$el;
|
|
20987
|
+
if (cropperElement) observer.observe(cropperElement, {
|
|
20988
|
+
childList: true,
|
|
20989
|
+
subtree: true,
|
|
20990
|
+
attributes: true
|
|
20991
|
+
});
|
|
20992
|
+
scaleIntervalId = setInterval(check, 50);
|
|
20993
|
+
check();
|
|
20994
|
+
});
|
|
20995
|
+
}
|
|
20996
|
+
const isApplyingInitialCrop = (0, vue.ref)(false);
|
|
20997
|
+
async function applyInitialCrop(url) {
|
|
20902
20998
|
try {
|
|
20903
|
-
|
|
20999
|
+
isApplyingInitialCrop.value = true;
|
|
20904
21000
|
const image = new Image();
|
|
20905
21001
|
image.crossOrigin = "anonymous";
|
|
20906
21002
|
await new Promise((resolve, reject) => {
|
|
@@ -20908,54 +21004,18 @@ triggerRef });
|
|
|
20908
21004
|
image.onerror = () => reject(/* @__PURE__ */ new Error(`Failed to load image: ${url}`));
|
|
20909
21005
|
image.src = url;
|
|
20910
21006
|
});
|
|
20911
|
-
await
|
|
20912
|
-
|
|
20913
|
-
const cleanup = () => {
|
|
20914
|
-
observer?.disconnect();
|
|
20915
|
-
if (scaleIntervalId) {
|
|
20916
|
-
clearInterval(scaleIntervalId);
|
|
20917
|
-
scaleIntervalId = null;
|
|
20918
|
-
}
|
|
20919
|
-
};
|
|
20920
|
-
const checkCropper = () => {
|
|
20921
|
-
if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
|
|
20922
|
-
cleanup();
|
|
20923
|
-
resolve();
|
|
20924
|
-
return;
|
|
20925
|
-
}
|
|
20926
|
-
observer = new MutationObserver(() => {
|
|
20927
|
-
if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
|
|
20928
|
-
cleanup();
|
|
20929
|
-
resolve();
|
|
20930
|
-
}
|
|
20931
|
-
});
|
|
20932
|
-
if (cropperRef.value?.$el) observer.observe(cropperRef.value.$el, {
|
|
20933
|
-
childList: true,
|
|
20934
|
-
subtree: true,
|
|
20935
|
-
attributes: true
|
|
20936
|
-
});
|
|
20937
|
-
scaleIntervalId = setInterval(() => {
|
|
20938
|
-
if (cropperRef.value && cropperRef.value.cropW && cropperRef.value.cropH) {
|
|
20939
|
-
cleanup();
|
|
20940
|
-
resolve();
|
|
20941
|
-
}
|
|
20942
|
-
}, 50);
|
|
20943
|
-
checkCropper();
|
|
20944
|
-
};
|
|
20945
|
-
checkCropper();
|
|
20946
|
-
});
|
|
21007
|
+
await (0, vue.nextTick)();
|
|
21008
|
+
await waitCropperReady();
|
|
20947
21009
|
if (cropperRef.value) {
|
|
20948
|
-
const
|
|
20949
|
-
|
|
20950
|
-
|
|
20951
|
-
|
|
20952
|
-
else scale = cropNumber[0] / imageNumber[0];
|
|
20953
|
-
cropperRef.value.scale = scale;
|
|
21010
|
+
const cropSize = getInitialCropSize(image);
|
|
21011
|
+
centerCropBox(cropSize.width, cropSize.height);
|
|
21012
|
+
await (0, vue.nextTick)();
|
|
21013
|
+
fitImageToCropBox();
|
|
20954
21014
|
}
|
|
20955
21015
|
} catch (error) {
|
|
20956
|
-
console.error("
|
|
21016
|
+
console.error("应用初始裁剪框失败:", error);
|
|
20957
21017
|
} finally {
|
|
20958
|
-
|
|
21018
|
+
isApplyingInitialCrop.value = false;
|
|
20959
21019
|
}
|
|
20960
21020
|
}
|
|
20961
21021
|
__expose({
|
|
@@ -20974,7 +21034,7 @@ triggerRef });
|
|
|
20974
21034
|
}
|
|
20975
21035
|
dialogVisible.value = true;
|
|
20976
21036
|
copperPromiseDeferred = new Deferred();
|
|
20977
|
-
if (cropperProps.value.autoCropScale)
|
|
21037
|
+
if (cropperProps.value.autoCropScale) applyInitialCrop(filePath.value);
|
|
20978
21038
|
const newFile = await copperPromiseDeferred.promise;
|
|
20979
21039
|
copperPromiseDeferred = null;
|
|
20980
21040
|
URL.revokeObjectURL(filePath.value);
|
|
@@ -21000,7 +21060,7 @@ triggerRef });
|
|
|
21000
21060
|
}, {
|
|
21001
21061
|
default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(MtDialogConfirmLayout), {
|
|
21002
21062
|
loading: loading.value,
|
|
21003
|
-
disabled:
|
|
21063
|
+
disabled: isApplyingInitialCrop.value,
|
|
21004
21064
|
"confirm-text": (0, vue.unref)(t)("mt.upload.confirm"),
|
|
21005
21065
|
"cancel-text": (0, vue.unref)(t)("mt.upload.cancel"),
|
|
21006
21066
|
onCancel: handleCancel,
|
|
@@ -21009,7 +21069,7 @@ triggerRef });
|
|
|
21009
21069
|
default: (0, vue.withCtx)(() => [filePath.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
21010
21070
|
key: 0,
|
|
21011
21071
|
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("content"))
|
|
21012
|
-
}, [
|
|
21072
|
+
}, [isApplyingInitialCrop.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
|
|
21013
21073
|
key: 0,
|
|
21014
21074
|
class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("loading"))
|
|
21015
21075
|
}, [(0, vue.createVNode)((0, vue.unref)(MtLoading), { size: 80 })], 2)) : (0, vue.createCommentVNode)("", true), (0, vue.createVNode)((0, vue.unref)(M), (0, vue.mergeProps)({
|
|
@@ -21046,7 +21106,7 @@ triggerRef });
|
|
|
21046
21106
|
};
|
|
21047
21107
|
//#endregion
|
|
21048
21108
|
//#region src/upload/src/upload-image-copper.vue
|
|
21049
|
-
var upload_image_copper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_image_copper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
21109
|
+
var upload_image_copper_default = /* @__PURE__ */ _plugin_vue_export_helper_default(upload_image_copper_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-47a8b76d"]]);
|
|
21050
21110
|
//#endregion
|
|
21051
21111
|
//#region src/upload/src/layout/upload-image-grid-layout.vue
|
|
21052
21112
|
var upload_image_grid_layout_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
package/dist/style.css
CHANGED
|
@@ -3468,6 +3468,7 @@
|
|
|
3468
3468
|
}
|
|
3469
3469
|
.mt-tab--card.is-active {
|
|
3470
3470
|
color: var(--mt-color-blue-5d89f7);
|
|
3471
|
+
background-color: var(--mt-color-white-ffffff);
|
|
3471
3472
|
}
|
|
3472
3473
|
.mt-tab--line {
|
|
3473
3474
|
height: 40px;
|
|
@@ -3631,12 +3632,12 @@
|
|
|
3631
3632
|
.mt-upload-file-list-layout--empty {
|
|
3632
3633
|
margin-bottom: 0;
|
|
3633
3634
|
}.vue-cropper[data-v-a742df44]{position:relative;width:100%;height:100%;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;direction:ltr;touch-action:none;text-align:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-box[data-v-a742df44],.cropper-box-canvas[data-v-a742df44],.cropper-drag-box[data-v-a742df44],.cropper-crop-box[data-v-a742df44],.cropper-face[data-v-a742df44]{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none}.cropper-box-canvas img[data-v-a742df44]{position:relative;text-align:left;-webkit-user-select:none;user-select:none;transform:none;max-width:none;max-height:none}.cropper-box[data-v-a742df44]{overflow:hidden}.cropper-move[data-v-a742df44]{cursor:move}.cropper-crop[data-v-a742df44]{cursor:crosshair}.cropper-modal[data-v-a742df44]{background:rgba(0,0,0,.5)}.cropper-view-box[data-v-a742df44]{display:block;overflow:hidden;width:100%;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;-webkit-user-select:none;user-select:none}.cropper-view-box img[data-v-a742df44]{-webkit-user-select:none;user-select:none;text-align:left;max-width:none;max-height:none}.cropper-face[data-v-a742df44]{top:0;left:0;background-color:#fff;opacity:.1}.crop-info[data-v-a742df44]{position:absolute;left:0;min-width:65px;text-align:center;color:#fff;line-height:20px;background-color:#000c;font-size:12px}.crop-line[data-v-a742df44]{position:absolute;display:block;width:100%;height:100%;opacity:.1}.line-w[data-v-a742df44]{top:-3px;left:0;height:5px;cursor:n-resize}.line-a[data-v-a742df44]{top:0;left:-3px;width:5px;cursor:w-resize}.line-s[data-v-a742df44]{bottom:-3px;left:0;height:5px;cursor:s-resize}.line-d[data-v-a742df44]{top:0;right:-3px;width:5px;cursor:e-resize}.crop-point[data-v-a742df44]{position:absolute;width:8px;height:8px;opacity:.75;background-color:#39f;border-radius:100%}.point1[data-v-a742df44]{top:-4px;left:-4px;cursor:nw-resize}.point2[data-v-a742df44]{top:-5px;left:50%;margin-left:-3px;cursor:n-resize}.point3[data-v-a742df44]{top:-4px;right:-4px;cursor:ne-resize}.point4[data-v-a742df44]{top:50%;left:-4px;margin-top:-3px;cursor:w-resize}.point5[data-v-a742df44]{top:50%;right:-4px;margin-top:-3px;cursor:e-resize}.point6[data-v-a742df44]{bottom:-5px;left:-4px;cursor:sw-resize}.point7[data-v-a742df44]{bottom:-5px;left:50%;margin-left:-3px;cursor:s-resize}.point8[data-v-a742df44]{bottom:-5px;right:-4px;cursor:se-resize}@media screen and (max-width: 500px){.crop-point[data-v-a742df44]{position:absolute;width:20px;height:20px;opacity:.45;background-color:#39f;border-radius:100%}.point1[data-v-a742df44]{top:-10px;left:-10px}.point2[data-v-a742df44],.point4[data-v-a742df44],.point5[data-v-a742df44],.point7[data-v-a742df44]{display:none}.point3[data-v-a742df44]{top:-10px;right:-10px}.point4[data-v-a742df44]{top:0;left:0}.point6[data-v-a742df44]{bottom:-10px;left:-10px}.point8[data-v-a742df44]{bottom:-10px;right:-10px}}
|
|
3634
|
-
.mt-image-copper__content[data-v-
|
|
3635
|
+
.mt-image-copper__content[data-v-47a8b76d] {
|
|
3635
3636
|
position: relative;
|
|
3636
3637
|
width: 80vh;
|
|
3637
3638
|
height: 80vh;
|
|
3638
3639
|
}
|
|
3639
|
-
.mt-image-copper__loading[data-v-
|
|
3640
|
+
.mt-image-copper__loading[data-v-47a8b76d] {
|
|
3640
3641
|
position: absolute;
|
|
3641
3642
|
top: 0;
|
|
3642
3643
|
left: 0;
|