@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 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).em("overlay", "fade"),
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
- const barStyles = computed(() => {
19360
- const styles = {};
19361
- if (tabsRef.value) children.forEach((child, index) => {
19362
- const $el = tabsRef.value.querySelector(`#tab-${index}`);
19363
- if (!$el) return;
19364
- if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) return;
19365
- styles.width = `${$el.clientWidth}px`;
19366
- styles.left = `${$el.offsetLeft}px`;
19367
- });
19368
- return styles;
19369
- });
19370
- const lineStyles = computed(() => {
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
- if (tabsRef.value) children.forEach((child, index) => {
19373
- const $el = tabsRef.value.querySelector(`#tab-${index}`);
19374
- if (!$el) return;
19375
- if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) return;
19376
- const tabStyles = window.getComputedStyle($el);
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
- const isApplyingScale = ref(false);
20823
- async function applyImageScale(url) {
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
- isApplyingScale.value = true;
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 new Promise((resolve) => {
20834
- let observer = null;
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 imageNumber = [image.width, image.height];
20871
- const cropNumber = [cropperRef.value.cropW, cropperRef.value.cropH];
20872
- let scale = 1;
20873
- if (imageNumber[0] / imageNumber[1] >= cropNumber[0] / cropNumber[1]) scale = cropNumber[1] / imageNumber[1];
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("应用图片缩放失败:", error);
20938
+ console.error("应用初始裁剪框失败:", error);
20879
20939
  } finally {
20880
- isApplyingScale.value = false;
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) applyImageScale(filePath.value);
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: isApplyingScale.value,
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
- }, [isApplyingScale.value ? (openBlock(), createElementBlock("div", {
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-01619ce0"]]);
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).em("overlay", "fade"),
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
- const barStyles = (0, vue.computed)(() => {
19434
- const styles = {};
19435
- if (tabsRef.value) children.forEach((child, index) => {
19436
- const $el = tabsRef.value.querySelector(`#tab-${index}`);
19437
- if (!$el) return;
19438
- if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) return;
19439
- styles.width = `${$el.clientWidth}px`;
19440
- styles.left = `${$el.offsetLeft}px`;
19441
- });
19442
- return styles;
19443
- });
19444
- const lineStyles = (0, vue.computed)(() => {
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
- if (tabsRef.value) children.forEach((child, index) => {
19447
- const $el = tabsRef.value.querySelector(`#tab-${index}`);
19448
- if (!$el) return;
19449
- if (!child.exposed || !isTabContext(child.exposed) || !child.exposed.isActive.value) return;
19450
- const tabStyles = window.getComputedStyle($el);
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
- const isApplyingScale = (0, vue.ref)(false);
20901
- async function applyImageScale(url) {
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
- isApplyingScale.value = true;
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 new Promise((resolve) => {
20912
- let observer = null;
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 imageNumber = [image.width, image.height];
20949
- const cropNumber = [cropperRef.value.cropW, cropperRef.value.cropH];
20950
- let scale = 1;
20951
- if (imageNumber[0] / imageNumber[1] >= cropNumber[0] / cropNumber[1]) scale = cropNumber[1] / imageNumber[1];
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("应用图片缩放失败:", error);
21016
+ console.error("应用初始裁剪框失败:", error);
20957
21017
  } finally {
20958
- isApplyingScale.value = false;
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) applyImageScale(filePath.value);
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: isApplyingScale.value,
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
- }, [isApplyingScale.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
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-01619ce0"]]);
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-01619ce0] {
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-01619ce0] {
3640
+ .mt-image-copper__loading[data-v-47a8b76d] {
3640
3641
  position: absolute;
3641
3642
  top: 0;
3642
3643
  left: 0;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mingto/mt-ui",
3
3
  "type": "module",
4
- "version": "1.1.43",
4
+ "version": "1.1.45",
5
5
  "description": "UI组件库",
6
6
  "publishConfig": {
7
7
  "access": "public"