@cedar-design/ui-vue 1.1.0 → 1.1.1

package/lib/trigger/positioner.js

@@ -9,9 +9,11 @@ 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;
     }
@@ -29,8 +31,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 = () => {
@@ -41,6 +45,7 @@ function rafThrottle(callback, ownerView) {
     frame = void 0;
     frameView = void 0;
     latest = void 0;
+    latestTarget = void 0;
   };
   return run;
 }
@@ -56,6 +61,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;
@@ -144,10 +150,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
@@ -192,11 +198,26 @@ function useTriggerPositioner(options, context) {
     for (const element of scrollElements)
       element.removeEventListener("scroll", scrolling);
     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([...position.getScrollElements(reference), ...position.getScrollElements(popup)])];
+    const nextViews = [.../* @__PURE__ */ new Set([...position.getScrollViews(reference), ...position.getScrollViews(popup)])];
+    const nextRoots = [.../* @__PURE__ */ new Set([...position.getSlotChangeRoots(reference), ...position.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();
+    vue.nextTick(update);
+  }
   function bindScroll() {
     unbindScroll();
     const reference = context.reference.value;
@@ -204,6 +225,8 @@ function useTriggerPositioner(options, context) {
     const active = options.updateAtScroll || options.scrollToClose || context.globalUpdateAtScroll.value || context.globalScrollToClose.value;
     if (!active || !reference || !popup || !context.visible.value || suspended)
       return;
+    slotRoots = [.../* @__PURE__ */ new Set([...position.getSlotChangeRoots(reference), ...position.getSlotChangeRoots(popup)])];
+    for (const slot of slotRoots) slot.addEventListener("slotchange", onSlotChange);
     scrollElements = [
       .../* @__PURE__ */ new Set([
         ...position.getScrollElements(reference),

package/lib/trigger/trigger.js

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

package/lib/upload/composables/use-upload-queue.js

@@ -4,10 +4,13 @@ const vue = require("vue");
 function useUploadQueue(options) {
   const inner = vue.ref((options.defaultValue?.() ?? []).map((file) => ({ ...file })));
   const fileList = vue.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) inner.value = next;
@@ -18,7 +21,7 @@ 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) commit([...mutationList(), ...files], files[0]);
@@ -57,6 +60,11 @@ function useUploadQueue(options) {
   }
   function reset() {
     if (fileList.value.length) commit([]);
+    else {
+      revision++;
+      pending = void 0;
+      pendingBase = void 0;
+    }
   }
   return {
     fileList,

package/lib/upload/composables/use-uploader.js

@@ -11,6 +11,7 @@ const useFilePicker = require("./use-file-picker.js");
 const useUploadQueue = require("./use-upload-queue.js");
 function useUploader(options) {
   const feedback = usePendingFeedback.usePendingFeedback();
+  const preparation = usePendingFeedback.usePendingFeedback();
   let active = true;
   let inactive = false;
   let generation = 0;
@@ -28,7 +29,8 @@ function useUploader(options) {
     modelValue: options.modelValue,
     defaultValue: options.defaultValue,
     onChange: options.onChange,
-    onUpdateModelValue: options.onUpdateModelValue
+    onUpdateModelValue: options.onUpdateModelValue,
+    isActive: () => active && !inactive
   });
   const replacementTarget = vue.ref();
   const metadataVersion = vue.ref(0);
@@ -166,8 +168,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) {
@@ -179,7 +181,9 @@ function useUploader(options) {
         candidates = await feedback.track(() => options.beforeAdd(files));
         for (const file of files) if (!candidates.includes(file)) rejected.push({ file, reason: "before-add" });
       } catch {
-        reject([...rejected, ...files.map((file) => ({ file, reason: "before-add" }))]);
+        if (valid(epoch)) {
+          reject([...rejected, ...files.map((file) => ({ file, reason: "before-add" }))]);
+        }
         return;
       }
     }
@@ -250,7 +254,15 @@ 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;
     if (previous) {
       if (!sameTarget(previous)) {
@@ -270,9 +282,13 @@ 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?.(vue.reactive(file)));
+    for (const file of items) {
+      if (!valid(epoch)) return;
+      options.onRead?.(vue.reactive(file));
+    }
     await vue.nextTick();
   }
   async function submit(file) {
@@ -282,6 +298,7 @@ function useUploader(options) {
   }
   async function uploadFile(file) {
     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(
@@ -332,7 +349,7 @@ function useUploader(options) {
           status: changed.status,
           percent: changed.percent
         });
-        options.onProgress?.(changed, event);
+        if (valid(epoch) && current()) options.onProgress?.(changed, event);
       };
       const handleSuccess = (response) => {
         if (!current()) return;
@@ -348,7 +365,7 @@ function useUploader(options) {
           percent: changed.percent,
           response
         });
-        options.onSuccess?.(changed);
+        if (valid(epoch)) options.onSuccess?.(changed);
       };
       const handleError = (error) => {
         if (!current()) return;
@@ -364,7 +381,7 @@ function useUploader(options) {
           percent: changed.percent,
           error
         });
-        options.onError?.(changed);
+        if (valid(epoch)) options.onError?.(changed);
       };
       const requestOptions = {
         action: options.action?.(),
@@ -394,7 +411,7 @@ 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) {
@@ -423,7 +440,7 @@ 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) removals.delete(file.uid);
@@ -446,8 +463,9 @@ function useUploader(options) {
     });
   }
   function reset() {
-    feedback.cancel();
     if (disabled.value) return;
+    feedback.cancel();
+    preparation.cancel();
     generation++;
     replacementTarget.value = void 0;
     adding = Promise.resolve();
@@ -488,6 +506,8 @@ function useUploader(options) {
   });
   return {
     guardPending: feedback.pending,
+    /** @internal Coordinates deferred field confirmation with file preparation. */
+    editorPending: vue.computed(() => feedback.pending.value || preparation.pending.value),
     fileList: queue.fileList,
     maxReached,
     disabled,

package/lib/upload/upload.vue.js

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const PendingFeedback_vue_vue_type_script_setup_true_lang = require("../_components/pending-feedback/PendingFeedback.vue.js");
+const editorPending = require("../_components/field-presentation/editor-pending.js");
 const iconsVue = require("@cedar-design/icons-vue");
 const globalConfig = require("../_utils/global-config.js");
 const previewApi = require("../image/preview-api.js");
@@ -135,6 +136,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       }
     });
+    const editorPending$1 = vue.inject(editorPending.fieldEditorControlPending, void 0);
+    vue.watch(uploader.editorPending, (value) => {
+      if (editorPending$1) editorPending$1.value = value;
+    }, { flush: "sync" });
+    vue.onBeforeUnmount(() => {
+      if (editorPending$1) editorPending$1.value = false;
+    });
     const {
       fileList,
       maxReached,
@@ -250,7 +258,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass(vue.unref(n)("input")),
           type: "file",
           accept: _ctx.accept,
-          capture: _ctx.capture,
+          capture: _ctx.capture === false ? void 0 : _ctx.capture === true ? "" : _ctx.capture,
           multiple: !vue.unref(replacementTarget) && (_ctx.multiple || _ctx.directory),
           disabled: vue.unref(disabledState),
           webkitdirectory: !vue.unref(replacementTarget) && _ctx.directory || void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedar-design/ui-vue",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "lib/index.js",
   "module": "es/index.mjs",
   "types": "types/index.d.ts",
@@ -64,9 +64,9 @@
     "scroll-into-view-if-needed": "^3.1.0",
     "sortablejs": "^1.15.3",
     "zod": "^4.1.12",
-    "@cedar-design/icons-vue": "1.1.1",
-    "@cedar-design/shared-vue": "1.1.0",
-    "@cedar-design/use-vue": "1.1.0"
+    "@cedar-design/icons-vue": "1.1.2",
+    "@cedar-design/shared-vue": "1.1.1",
+    "@cedar-design/use-vue": "1.1.1"
   },
   "lint-staged": {
     "src/**/*.{js,ts,tsx,vue}": [
@@ -153,8 +153,8 @@
     "vuepress": "2.0.0-rc.18",
     "vuepress-plugin-md-enhance": "^2.0.0-rc.43",
     "vuepress-theme-hope": "2.0.0-rc.61",
-    "@cedar-design/cli-vue": "1.1.0",
-    "@cedar-design/resolver-vue": "1.1.0"
+    "@cedar-design/resolver-vue": "1.1.1",
+    "@cedar-design/cli-vue": "1.1.1"
   },
   "peerDependencies": {
     "vue": "^3.5.12"

package/types/_components/field-presentation/editor-pending.d.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey, Ref } from 'vue';
+/** Internal pending work of the control currently rendered by a field editor. */
+export declare const fieldEditorControlPending: InjectionKey<Ref<boolean>>;

package/types/_components/field-presentation/with-field-presentation.d.ts

@@ -11,6 +11,8 @@ export interface FieldEditorContext {
     readonly: boolean;
 }
 export interface FieldPresentationAdapter {
+    /** Selection editors commit on a completed choice when confirmation is disabled. */
+    selectionConfirmation?: 'update' | 'select';
     /** Pause selection mutations during loading while leaving search text editable. */
     pauseSelectionWhileLoading?: boolean;
     /** Explicit completion notifications owned by final deferred acceptance. */

package/types/_components/picker-field/range-labels.d.ts

@@ -0,0 +1 @@
+export declare function usePickerRangeLabels(kind: () => 'date' | 'time'): import("vue").ComputedRef<string[]>;

package/types/_utils/modal-focus.d.ts

@@ -1,6 +1,7 @@
 /** Modal ownership follows the popup stack, including teleported child Triggers. */
 export declare function useModalFocus(root: () => HTMLElement | undefined, active: () => boolean, isTop: (event?: Event) => boolean, lockScroll?: () => boolean, ownerDocument?: () => Document | undefined): {
     focus: () => void;
+    focusAfterEnter: () => void;
     restore: () => void;
     trap: (event: KeyboardEvent) => void;
 };

package/types/auto-complete/auto-complete.d.ts

@@ -110,6 +110,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
     defaultOpen: BooleanConstructor;
+    needConfirm: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     searchDelay: {
         type: NumberConstructor;
         default: number;
@@ -244,6 +248,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
     defaultOpen: BooleanConstructor;
+    needConfirm: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     searchDelay: {
         type: NumberConstructor;
         default: number;
@@ -287,6 +295,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     defaultValue: string;
     maxLength: import("../_utils/text-input-value").TextInputMaxLength;
     showWordLimit: boolean;
+    needConfirm: boolean;
     options: readonly (import("..").SelectOptionGroup | AutoCompleteOption)[] | import("../_hooks/use-option-request").OptionsLoader<import("..").SelectOptionGroup | AutoCompleteOption>;
     searchDelay: number;
     filterOption: import("./props").AutoCompleteFilterOption;

package/types/auto-complete/index.d.ts

@@ -112,6 +112,10 @@ declare const AutoComplete: import("../_utils/global-config").CedarComponentWith
             default: undefined;
         };
         defaultOpen: BooleanConstructor;
+        needConfirm: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
         searchDelay: {
             type: NumberConstructor;
             default: number;
@@ -168,6 +172,7 @@ declare const AutoComplete: import("../_utils/global-config").CedarComponentWith
         defaultValue: string;
         maxLength: import("../_utils/text-input-value").TextInputMaxLength;
         showWordLimit: boolean;
+        needConfirm: boolean;
         options: readonly (import("..").SelectOptionGroup | import("./props").AutoCompleteOption)[] | import("../_hooks/use-option-request").OptionsLoader<import("..").SelectOptionGroup | import("./props").AutoCompleteOption>;
         searchDelay: number;
         filterOption: import("./props").AutoCompleteFilterOption;
@@ -292,6 +297,10 @@ declare const AutoComplete: import("../_utils/global-config").CedarComponentWith
             default: undefined;
         };
         defaultOpen: BooleanConstructor;
+        needConfirm: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
         searchDelay: {
             type: NumberConstructor;
             default: number;
@@ -335,6 +344,7 @@ declare const AutoComplete: import("../_utils/global-config").CedarComponentWith
         defaultValue: string;
         maxLength: import("../_utils/text-input-value").TextInputMaxLength;
         showWordLimit: boolean;
+        needConfirm: boolean;
         options: readonly (import("..").SelectOptionGroup | import("./props").AutoCompleteOption)[] | import("../_hooks/use-option-request").OptionsLoader<import("..").SelectOptionGroup | import("./props").AutoCompleteOption>;
         searchDelay: number;
         filterOption: import("./props").AutoCompleteFilterOption;
@@ -456,6 +466,10 @@ declare const AutoComplete: import("../_utils/global-config").CedarComponentWith
         default: undefined;
     };
     defaultOpen: BooleanConstructor;
+    needConfirm: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     searchDelay: {
         type: NumberConstructor;
         default: number;
@@ -512,6 +526,7 @@ declare const AutoComplete: import("../_utils/global-config").CedarComponentWith
     defaultValue: string;
     maxLength: import("../_utils/text-input-value").TextInputMaxLength;
     showWordLimit: boolean;
+    needConfirm: boolean;
     options: readonly (import("..").SelectOptionGroup | import("./props").AutoCompleteOption)[] | import("../_hooks/use-option-request").OptionsLoader<import("..").SelectOptionGroup | import("./props").AutoCompleteOption>;
     searchDelay: number;
     filterOption: import("./props").AutoCompleteFilterOption;
@@ -634,6 +649,10 @@ export declare const _AutoCompleteComponent: import("../_utils/global-config").C
             default: undefined;
         };
         defaultOpen: BooleanConstructor;
+        needConfirm: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
         searchDelay: {
             type: NumberConstructor;
             default: number;
@@ -690,6 +709,7 @@ export declare const _AutoCompleteComponent: import("../_utils/global-config").C
         defaultValue: string;
         maxLength: import("../_utils/text-input-value").TextInputMaxLength;
         showWordLimit: boolean;
+        needConfirm: boolean;
         options: readonly (import("..").SelectOptionGroup | import("./props").AutoCompleteOption)[] | import("../_hooks/use-option-request").OptionsLoader<import("..").SelectOptionGroup | import("./props").AutoCompleteOption>;
         searchDelay: number;
         filterOption: import("./props").AutoCompleteFilterOption;
@@ -814,6 +834,10 @@ export declare const _AutoCompleteComponent: import("../_utils/global-config").C
             default: undefined;
         };
         defaultOpen: BooleanConstructor;
+        needConfirm: {
+            type: BooleanConstructor;
+            default: undefined;
+        };
         searchDelay: {
             type: NumberConstructor;
             default: number;
@@ -857,6 +881,7 @@ export declare const _AutoCompleteComponent: import("../_utils/global-config").C
         defaultValue: string;
         maxLength: import("../_utils/text-input-value").TextInputMaxLength;
         showWordLimit: boolean;
+        needConfirm: boolean;
         options: readonly (import("..").SelectOptionGroup | import("./props").AutoCompleteOption)[] | import("../_hooks/use-option-request").OptionsLoader<import("..").SelectOptionGroup | import("./props").AutoCompleteOption>;
         searchDelay: number;
         filterOption: import("./props").AutoCompleteFilterOption;
@@ -978,6 +1003,10 @@ export declare const _AutoCompleteComponent: import("../_utils/global-config").C
         default: undefined;
     };
     defaultOpen: BooleanConstructor;
+    needConfirm: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     searchDelay: {
         type: NumberConstructor;
         default: number;
@@ -1034,6 +1063,7 @@ export declare const _AutoCompleteComponent: import("../_utils/global-config").C
     defaultValue: string;
     maxLength: import("../_utils/text-input-value").TextInputMaxLength;
     showWordLimit: boolean;
+    needConfirm: boolean;
     options: readonly (import("..").SelectOptionGroup | import("./props").AutoCompleteOption)[] | import("../_hooks/use-option-request").OptionsLoader<import("..").SelectOptionGroup | import("./props").AutoCompleteOption>;
     searchDelay: number;
     filterOption: import("./props").AutoCompleteFilterOption;

package/types/auto-complete/presentation.d.ts

@@ -109,6 +109,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
     defaultOpen: BooleanConstructor;
+    needConfirm: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     searchDelay: {
         type: NumberConstructor;
         default: number;
@@ -243,6 +247,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: undefined;
     };
     defaultOpen: BooleanConstructor;
+    needConfirm: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     searchDelay: {
         type: NumberConstructor;
         default: number;
@@ -286,6 +294,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     defaultValue: string;
     maxLength: import("../_utils/text-input-value").TextInputMaxLength;
     showWordLimit: boolean;
+    needConfirm: boolean;
     options: readonly (import("..").SelectOptionGroup | import("./props").AutoCompleteOption)[] | import("../_hooks/use-option-request").OptionsLoader<import("..").SelectOptionGroup | import("./props").AutoCompleteOption>;
     searchDelay: number;
     filterOption: import("./props").AutoCompleteFilterOption;

package/types/auto-complete/props.d.ts

@@ -161,6 +161,11 @@ export declare const autoCompleteProps: {
         default: undefined;
     };
     defaultOpen: BooleanConstructor;
+    /** 弹出编辑是否需要确认；默认选中候选项即提交，自定义文本通过确认提交。 */
+    needConfirm: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     searchDelay: {
         type: NumberConstructor;
         default: number;