@maple-design/ui-vue 1.1.0 → 1.1.1

package/es/trigger/position.mjs

@@ -97,14 +97,29 @@ function getScrollElements(element) {
   const visited = /* @__PURE__ */ new Set();
   while (root && !visited.has(root.ownerDocument)) {
     visited.add(root.ownerDocument);
-    let current = root.parentElement;
+    const parent = (node) => {
+      if (node.assignedSlot) {
+        return node.assignedSlot;
+      }
+      if (node.parentElement) {
+        return node.parentElement;
+      }
+      const tree = node.getRootNode();
+      return tree.nodeType === 11 && "host" in tree ? tree.host : null;
+    };
+    let current = parent(root);
+    const ancestors = /* @__PURE__ */ new Set();
     while (current && current !== current.ownerDocument.documentElement) {
+      if (ancestors.has(current)) {
+        break;
+      }
+      ancestors.add(current);
       const style = current.ownerDocument.defaultView?.getComputedStyle(current);
       const overflow = `${style?.overflow ?? ""}${style?.overflowX ?? ""}${style?.overflowY ?? ""}`;
       if (/(auto|scroll|overlay)/.test(overflow)) {
         result.push(current);
       }
-      current = current.parentElement;
+      current = parent(current);
     }
     try {
       root = root.ownerDocument.defaultView?.frameElement ?? void 0;
@@ -114,6 +129,36 @@ function getScrollElements(element) {
   }
   return result;
 }
+function getSlotChangeRoots(element) {
+  const roots = [];
+  const visited = /* @__PURE__ */ new Set();
+  let current = element;
+  while (current && !visited.has(current)) {
+    visited.add(current);
+    const parentShadow = current.parentElement?.shadowRoot;
+    if (parentShadow) {
+      roots.push(parentShadow);
+    }
+    if (current.assignedSlot) {
+      current = current.assignedSlot;
+    } else if (current.parentElement) {
+      current = current.parentElement;
+    } else {
+      const tree = current.getRootNode();
+      if (tree.nodeType === 11 && "host" in tree) {
+        roots.push(tree);
+        current = tree.host;
+      } else {
+        try {
+          current = current.ownerDocument.defaultView?.frameElement;
+        } catch {
+          current = void 0;
+        }
+      }
+    }
+  }
+  return roots;
+}
 function getScrollViews(element) {
   const result = [];
   let document = element?.ownerDocument;
@@ -135,5 +180,6 @@ function getScrollViews(element) {
 export {
   calculatePopupPosition,
   getScrollElements,
-  getScrollViews
+  getScrollViews,
+  getSlotChangeRoots
 };

package/es/trigger/positioner.mjs

@@ -1,15 +1,17 @@
 import { ref, watch, nextTick, onMounted, onActivated, onDeactivated, onBeforeUnmount } from "vue";
 import { getArrowStyle } from "./arrow.mjs";
 import { getPositioningSpace, translateRectBetweenDocuments, getRelativeRect, getTransformOrigin } from "./geometry.mjs";
-import { getScrollElements, getScrollViews, calculatePopupPosition } from "./position.mjs";
+import { getSlotChangeRoots, getScrollElements, getScrollViews, calculatePopupPosition } from "./position.mjs";
 import { useElementResize } from "../utils/resize-observer.mjs";
 function rafThrottle(callback, ownerView) {
   let frame;
   let frameView;
   let latest;
+  let latestTarget;
   let generation = 0;
   const run = (event) => {
     latest = event;
+    latestTarget = event?.currentTarget ?? event?.target;
     if (frame !== void 0) {
       return;
     }
@@ -27,8 +29,10 @@ function rafThrottle(callback, ownerView) {
       frame = void 0;
       frameView = void 0;
       const currentEvent = latest;
+      const currentTarget = latestTarget;
       latest = void 0;
-      callback(currentEvent);
+      latestTarget = void 0;
+      callback(currentEvent, currentTarget);
     });
   };
   run.cancel = () => {
@@ -39,6 +43,7 @@ function rafThrottle(callback, ownerView) {
     frame = void 0;
     frameView = void 0;
     latest = void 0;
+    latestTarget = void 0;
   };
   return run;
 }
@@ -54,6 +59,7 @@ function useTriggerPositioner(options, context) {
   let scrollPositions = /* @__PURE__ */ new WeakMap();
   let windowPositions = /* @__PURE__ */ new WeakMap();
   let scrollViews = [];
+  let slotRoots = [];
   function update() {
     const reference = context.reference.value;
     const popup = context.popup.value;
@@ -139,10 +145,10 @@ function useTriggerPositioner(options, context) {
     }
   }
   const scrolling = rafThrottle(
-    (event) => {
+    (_event, eventTarget) => {
       const shouldClose = options.scrollToClose || context.globalScrollToClose.value;
-      if (shouldClose && event?.target) {
-        const target = event.target;
+      if (shouldClose && eventTarget) {
+        const target = eventTarget;
         const previous = scrollPositions.get(target) ?? [target.scrollTop, target.scrollLeft];
         scrollPositions.set(target, previous);
         if (Math.abs(target.scrollTop - previous[0]) >= options.scrollToCloseDistance || Math.abs(target.scrollLeft - previous[1]) >= options.scrollToCloseDistance) {
@@ -189,11 +195,30 @@ function useTriggerPositioner(options, context) {
     for (const view of scrollViews) {
       view.removeEventListener("scroll", onWindowScroll);
     }
+    for (const slot of slotRoots) {
+      slot.removeEventListener("slotchange", onSlotChange);
+    }
+    slotRoots = [];
     scrollViews = [];
     scrollElements = [];
     scrollPositions = /* @__PURE__ */ new WeakMap();
     windowPositions = /* @__PURE__ */ new WeakMap();
   }
+  function onSlotChange() {
+    positionGeneration++;
+    const reference = context.reference.value;
+    const popup = context.popup.value;
+    const nextElements = [.../* @__PURE__ */ new Set([...getScrollElements(reference), ...getScrollElements(popup)])];
+    const nextViews = [.../* @__PURE__ */ new Set([...getScrollViews(reference), ...getScrollViews(popup)])];
+    const nextRoots = [.../* @__PURE__ */ new Set([...getSlotChangeRoots(reference), ...getSlotChangeRoots(popup)])];
+    function changed(before, after) {
+      return before.length !== after.length || before.some((item, index) => item !== after[index]);
+    }
+    if (changed(scrollElements, nextElements) || changed(scrollViews, nextViews) || changed(slotRoots, nextRoots)) {
+      bindScroll();
+    }
+    nextTick(update);
+  }
   function bindScroll() {
     unbindScroll();
     const reference = context.reference.value;
@@ -202,6 +227,10 @@ function useTriggerPositioner(options, context) {
     if (!active || !reference || !popup || !context.visible.value || suspended) {
       return;
     }
+    slotRoots = [.../* @__PURE__ */ new Set([...getSlotChangeRoots(reference), ...getSlotChangeRoots(popup)])];
+    for (const slot of slotRoots) {
+      slot.addEventListener("slotchange", onSlotChange);
+    }
     scrollElements = [.../* @__PURE__ */ new Set([...getScrollElements(reference), ...getScrollElements(popup)])];
     for (const element of scrollElements) {
       scrollPositions.set(element, [element.scrollTop, element.scrollLeft]);

package/es/trigger/trigger.mjs

@@ -162,7 +162,7 @@ const Trigger = /* @__PURE__ */ defineComponent({
     });
     return () => {
       const referenceNodes = mergeFirstReferenceClass(slots.default?.() ?? [], visible.value ? props.openedClass : void 0);
-      const contentNodes = slots.content?.() ?? [];
+      const contentNodes = renderState.rendered.value ? slots.content?.() ?? [] : [];
       const hiddenByEmpty = props.hideEmpty && isEmptyContent(contentNodes);
       nodes.value = referenceNodes;
       return createVNode(Fragment, null, [referenceNodes, createVNode(Teleport, {

package/es/upload/Upload.vue.mjs

@@ -1,5 +1,6 @@
-import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, createVNode, withDirectives, renderSlot, toDisplayString, createCommentVNode, Fragment, renderList, mergeProps, normalizeStyle } from "vue";
+import { defineComponent, ref, inject, watch, onBeforeUnmount, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, createVNode, withDirectives, renderSlot, toDisplayString, createCommentVNode, Fragment, renderList, mergeProps, normalizeStyle } from "vue";
 import { IconEye, IconDownload, IconClose, IconRefresh } from "@maple-design/icons-vue";
+import { fieldEditorControlPending } from "../_components/field-presentation/editor-pending.mjs";
 import _sfc_main$1 from "../_components/pending-feedback/PendingFeedback.vue.mjs";
 import { useFormErrorDescription } from "../form/error-description.mjs";
 import { ImagePreviewFn as previewImage } from "../image/preview.mjs";
@@ -133,6 +134,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     });
+    const editorPending = inject(fieldEditorControlPending, void 0);
+    watch(
+      uploader.editorPending,
+      (value) => {
+        if (editorPending) {
+          editorPending.value = value;
+        }
+      },
+      { flush: "sync" }
+    );
+    onBeforeUnmount(() => {
+      if (editorPending) {
+        editorPending.value = false;
+      }
+    });
     const {
       fileList,
       maxReached,
@@ -253,7 +269,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: normalizeClass(unref(n)("input")),
           type: "file",
           accept: _ctx.accept,
-          capture: _ctx.capture,
+          capture: _ctx.capture === false ? void 0 : _ctx.capture === true ? "" : _ctx.capture,
           multiple: !unref(replacementTarget) && (_ctx.multiple || _ctx.directory),
           disabled: unref(disabledState),
           webkitdirectory: !unref(replacementTarget) && _ctx.directory || void 0,

package/es/upload/composables/use-upload-queue.mjs

@@ -2,10 +2,13 @@ import { ref, computed, nextTick } from "vue";
 function useUploadQueue(options) {
   const inner = ref((options.defaultValue?.() ?? []).map((file) => ({ ...file })));
   const fileList = computed(() => options.modelValue?.() ?? inner.value);
+  let revision = 0;
   let pending;
   let pendingBase;
   const mutationList = () => pending && fileList.value === pendingBase ? pending : fileList.value;
   function commit(next, changed) {
+    const currentRevision = ++revision;
+    const startedActive = options.isActive?.() ?? true;
     pendingBase = fileList.value;
     pending = next;
     if (options.modelValue?.() === void 0) {
@@ -18,7 +21,9 @@ function useUploadQueue(options) {
       }
     });
     options.onUpdateModelValue?.(next);
-    options.onChange?.(next, changed);
+    if (revision === currentRevision && (!startedActive || (options.isActive?.() ?? true))) {
+      options.onChange?.(next, changed);
+    }
   }
   function append(files) {
     if (files.length) {
@@ -64,6 +69,10 @@ function useUploadQueue(options) {
   function reset() {
     if (fileList.value.length) {
       commit([]);
+    } else {
+      revision++;
+      pending = void 0;
+      pendingBase = void 0;
     }
   }
   return {

package/es/upload/composables/use-uploader.mjs

@@ -9,6 +9,7 @@ import { useFilePicker } from "./use-file-picker.mjs";
 import { useUploadQueue } from "./use-upload-queue.mjs";
 function useUploader(options) {
   const feedback = usePendingFeedback();
+  const preparation = usePendingFeedback();
   let active = true;
   let inactive = false;
   let generation = 0;
@@ -26,7 +27,8 @@ function useUploader(options) {
     modelValue: options.modelValue,
     defaultValue: options.defaultValue,
     onChange: options.onChange,
-    onUpdateModelValue: options.onUpdateModelValue
+    onUpdateModelValue: options.onUpdateModelValue,
+    isActive: () => active && !inactive
   });
   const replacementTarget = ref();
   const metadataVersion = ref(0);
@@ -202,8 +204,8 @@ function useUploader(options) {
   }
   function enqueue(files, rejected, previous) {
     const epoch = generation;
-    adding = adding.then(() => prepareFiles(files, rejected, epoch, previous)).catch(() => {
-    });
+    adding = preparation.track(() => adding.then(() => prepareFiles(files, rejected, epoch, previous)).catch(() => {
+    }));
     return adding;
   }
   async function prepareFiles(files, initialRejected, epoch, previous) {
@@ -221,7 +223,9 @@ function useUploader(options) {
           }
         }
       } catch {
-        reject([...rejected, ...files.map((file) => ({ file, reason: "before-add" }))]);
+        if (valid(epoch)) {
+          reject([...rejected, ...files.map((file) => ({ file, reason: "before-add" }))]);
+        }
         return;
       }
     }
@@ -308,9 +312,17 @@ function useUploader(options) {
       return;
     }
     reject(rejected);
+    if (!valid(epoch)) {
+      items.forEach((item) => release(item.uid));
+      return;
+    }
     if (rejected.some((file) => file.reason === "max-files")) {
       options.onExceed?.(candidates, queue.fileList.value);
     }
+    if (!valid(epoch)) {
+      items.forEach((item) => release(item.uid));
+      return;
+    }
     if (!items.length) {
       return;
     }
@@ -332,11 +344,19 @@ function useUploader(options) {
     items.forEach((file) => pendingAuto.add(file.uid));
     if (previous) {
       queue.replace(previous, items[0]);
+      if (!valid(epoch)) {
+        return;
+      }
       options.onReplace?.(items[0], previous);
     } else {
       queue.append(items);
     }
-    items.forEach((file) => options.onRead?.(reactive(file)));
+    for (const file of items) {
+      if (!valid(epoch)) {
+        return;
+      }
+      options.onRead?.(reactive(file));
+    }
     await nextTick();
   }
   async function submit(file) {
@@ -350,6 +370,7 @@ function useUploader(options) {
     if (attempts.has(file.uid)) {
       return;
     }
+    const epoch = generation;
     const attempt = {};
     attempts.set(file.uid, attempt);
     const current = () => active && !inactive && attempts.get(file.uid) === attempt && queue.fileList.value.some(
@@ -394,7 +415,9 @@ function useUploader(options) {
         }
         const changed = { ...item, status: "uploading", percent: event.percent };
         queue.patch(file.uid, { status: changed.status, percent: changed.percent });
-        options.onProgress?.(changed, event);
+        if (valid(epoch) && current()) {
+          options.onProgress?.(changed, event);
+        }
       };
       const handleSuccess = (response) => {
         if (!current()) {
@@ -403,7 +426,9 @@ function useUploader(options) {
         attempts.delete(file.uid);
         const changed = { ...item, status: "success", percent: 100, response };
         queue.patch(file.uid, { status: changed.status, percent: changed.percent, response });
-        options.onSuccess?.(changed);
+        if (valid(epoch)) {
+          options.onSuccess?.(changed);
+        }
       };
       const handleError = (error) => {
         if (!current()) {
@@ -412,7 +437,9 @@ function useUploader(options) {
         attempts.delete(file.uid);
         const changed = { ...item, status: "error", percent: 0, error };
         queue.patch(file.uid, { status: changed.status, percent: changed.percent, error });
-        options.onError?.(changed);
+        if (valid(epoch)) {
+          options.onError?.(changed);
+        }
       };
       const requestOptions = {
         action: options.action?.(),
@@ -445,7 +472,9 @@ function useUploader(options) {
       attempts.delete(file.uid);
       const changed = { ...item, status: "error", percent: 0, error };
       queue.patch(file.uid, changed);
-      options.onError?.(changed);
+      if (valid(epoch)) {
+        options.onError?.(changed);
+      }
     }
   }
   function abort(file) {
@@ -481,7 +510,9 @@ function useUploader(options) {
       cancelAttempt(file.uid);
       pendingAuto.delete(file.uid);
       queue.remove(file);
-      options.onRemove?.(file);
+      if (valid(epoch)) {
+        options.onRemove?.(file);
+      }
     } catch {
     } finally {
       if (removals.get(file.uid) === token) {
@@ -508,10 +539,11 @@ function useUploader(options) {
     });
   }
   function reset() {
-    feedback.cancel();
     if (disabled.value) {
       return;
     }
+    feedback.cancel();
+    preparation.cancel();
     generation++;
     replacementTarget.value = void 0;
     adding = Promise.resolve();
@@ -562,6 +594,8 @@ function useUploader(options) {
   });
   return {
     guardPending: feedback.pending,
+    /** @internal Coordinates deferred field confirmation with file preparation. */
+    editorPending: computed(() => feedback.pending.value || preparation.pending.value),
     fileList: queue.fileList,
     maxReached,
     disabled,

package/es/upload/use-upload-locale.mjs

@@ -1,18 +1,22 @@
 import { computed } from "vue";
-import "../locale/index.mjs";
-import { t } from "../locale/state.mjs";
+import { t, defaultLocaleReady } from "../locale/state.mjs";
+import { defaultUploadClose, defaultUploadDelete, defaultUploadRetry, defaultUploadCancel, defaultUploadDownload, defaultUploadPreview, defaultUploadDrag, defaultUploadButtonText, defaultUploadDuration, defaultUploadReplace } from "../locale/zh-CN.mjs";
+function text(key, fallback) {
+  const value = t(key);
+  return String(defaultLocaleReady.value ? value : value ?? fallback);
+}
 function useUploadLocale() {
   return computed(() => ({
-    replace: String(t("upload.replace")),
-    duration: String(t("upload.duration")),
-    upload: String(t("upload.buttonText")),
-    dropFiles: String(t("upload.drag")),
-    preview: String(t("upload.preview")),
-    download: String(t("upload.download")),
-    cancel: String(t("upload.cancel")),
-    retry: String(t("upload.retry")),
-    remove: String(t("upload.delete")),
-    close: String(t("upload.close"))
+    replace: text("upload.replace", defaultUploadReplace),
+    duration: text("upload.duration", defaultUploadDuration),
+    upload: text("upload.buttonText", defaultUploadButtonText),
+    dropFiles: text("upload.drag", defaultUploadDrag),
+    preview: text("upload.preview", defaultUploadPreview),
+    download: text("upload.download", defaultUploadDownload),
+    cancel: text("upload.cancel", defaultUploadCancel),
+    retry: text("upload.retry", defaultUploadRetry),
+    remove: text("upload.delete", defaultUploadDelete),
+    close: text("upload.close", defaultUploadClose)
   }));
 }
 export {

package/es/utils/modal-focus.mjs

@@ -70,6 +70,13 @@ function useModalFocus(root, active, isTop, lockScroll = () => true, ownerDocume
       target.focus({ preventScroll: true });
     }
   }
+  function focusAfterEnter() {
+    const doc = root()?.ownerDocument;
+    const current = doc?.activeElement;
+    if (!current || current === doc?.body || current === doc?.documentElement || previous.includes(current)) {
+      focus();
+    }
+  }
   function restore() {
     const focused = owner?.activeElement;
     const target = previous.find(restorable);
@@ -174,7 +181,7 @@ function useModalFocus(root, active, isTop, lockScroll = () => true, ownerDocume
         unbind();
         bind();
       }
-      if (value) {
+      if (value && (!captured || root() !== element)) {
         capture();
       }
     },
@@ -205,7 +212,7 @@ function useModalFocus(root, active, isTop, lockScroll = () => true, ownerDocume
     unbind();
     restore();
   });
-  return { focus, restore, trap };
+  return { focus, focusAfterEnter, restore, trap };
 }
 export {
   useModalFocus

package/es/utils/modal-surface.mjs

@@ -40,7 +40,7 @@ function useModalSurface(options) {
   const { zIndex } = useZIndex(layerActive, 3);
   const mergedZIndex = computed(() => options.zIndex() ?? zIndex.value);
   const { onStackTop } = usePopupLayer(layerActive, mergedZIndex, modalDocument);
-  const { focus, restore } = useModalFocus(
+  const { focus, focusAfterEnter, restore } = useModalFocus(
     () => options.root.value?.querySelector("[data-modal-focus-root]") ?? options.root.value,
     () => mergedOpen.value,
     onStackTop,
@@ -50,7 +50,13 @@ function useModalSurface(options) {
   watch(
     [popupContainerTarget, () => options.popupContainer() === false],
     () => {
-      nextTick(focus);
+      nextTick(() => {
+        const doc = modalDocument();
+        const current = doc?.activeElement;
+        if (!current || current === doc?.body || current === doc?.documentElement) {
+          focus();
+        }
+      });
     },
     { flush: "post" }
   );
@@ -126,7 +132,7 @@ function useModalSurface(options) {
   onBeforeUnmount(unbind);
   function opened() {
     if (mergedOpen.value) {
-      focus();
+      focusAfterEnter();
       transition.opened();
     }
   }