@cedar-design/ui-vue 1.1.0 → 1.1.1

package/es/card/Card.vue.mjs

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, shallowRef, watch, nextTick, onBeforeUnmount, onDeactivated, onActivated, withDirectives, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createElementVNode, renderSlot, createCommentVNode, toDisplayString, createBlock, createVNode, withModifiers, withCtx } from "vue";
 import { IconClose } from "@cedar-design/icons-vue";
 import { getRect, doubleRaf } from "@cedar-design/shared-vue";
-import { Button } from "../button/index.mjs";
+import Button from "../button/base.mjs";
 import { useLock } from "../context/lock.mjs";
 import { useZIndex } from "../context/zIndex.mjs";
 import { Icon } from "../icon/index.mjs";
@@ -60,25 +60,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let stopInactiveFocusTracking;
     function trackInactiveFocus() {
       stopInactiveFocusTracking?.();
-      const document = card.value?.ownerDocument;
-      if (!document) return;
+      const document2 = card.value?.ownerDocument;
+      if (!document2) return;
       const remember = (target) => {
         const element = target;
-        if (element && typeof element.focus === "function" && !card.value?.contains(element) && element !== document.body && element !== document.documentElement) {
+        if (element && typeof element.focus === "function" && !card.value?.contains(element) && element !== document2.body && element !== document2.documentElement) {
           returnFocus = element;
         }
       };
-      remember(document.activeElement);
+      remember(document2.activeElement);
       const onFocus = (event) => remember(event.target);
-      document.addEventListener("focusin", onFocus, true);
-      stopInactiveFocusTracking = () => document.removeEventListener("focusin", onFocus, true);
+      document2.addEventListener("focusin", onFocus, true);
+      stopInactiveFocusTracking = () => document2.removeEventListener("focusin", onFocus, true);
     }
     function updateReturnFocus(open) {
-      const document = card.value?.ownerDocument;
-      if (!document) return;
-      const focused = document.activeElement;
+      const document2 = card.value?.ownerDocument;
+      if (!document2) return;
+      const focused = document2.activeElement;
       if (open) {
-        returnFocus = focused && focused !== document.body && focused !== document.documentElement ? focused : null;
+        returnFocus = focused && focused !== document2.body && focused !== document2.documentElement ? focused : null;
         return;
       }
       const target = returnFocus;
@@ -92,6 +92,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { onStackTop } = usePopupLayer(wantsFloating, zIndex, () => card.value?.ownerDocument, true);
     const available = () => active && !disposed;
     let openingWaiting = false;
+    let cancelOpeningFrames;
+    function waitForOwnerFrames(view) {
+      cancelOpeningFrames?.();
+      return new Promise((resolve) => {
+        let handle;
+        let settled = false;
+        const finish = (completed) => {
+          if (settled) return;
+          settled = true;
+          if (cancelOpeningFrames === cancel) cancelOpeningFrames = void 0;
+          resolve(completed);
+        };
+        const cancel = () => {
+          if (handle !== void 0) view.cancelAnimationFrame?.(handle);
+          finish(false);
+        };
+        cancelOpeningFrames = cancel;
+        handle = view.requestAnimationFrame(() => {
+          if (settled) return;
+          handle = view.requestAnimationFrame(() => finish(true));
+        });
+      });
+    }
     let reducedMotion = false;
     let stopMotionTracking;
     function trackMotion(element) {
@@ -127,6 +150,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       wantsFloating,
       (value) => {
         const token = ++generation;
+        cancelOpeningFrames?.();
         if (!active) {
           if (!disposed && value) trackInactiveFocus();
           else {
@@ -157,6 +181,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       const token = ++generation;
+      cancelOpeningFrames?.();
       const element = card.value;
       let consumed = false;
       clearTimeout(floater.value ?? void 0);
@@ -183,7 +208,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           dropdownFloaterTop = floaterTop.value;
           dropdownFloaterLeft = floaterLeft.value;
           showFloatingButtons.value = true;
-          if (!reducedMotion) await doubleRaf();
+          if (!reducedMotion) {
+            const view = element.ownerDocument.defaultView;
+            if (view && typeof document !== "undefined" && element.ownerDocument !== document && typeof view.requestAnimationFrame === "function") {
+              if (!await waitForOwnerFrames(view)) return;
+            } else {
+              await doubleRaf();
+            }
+          }
           if (!current(token, element) || !wantsFloating()) {
             return;
           }
@@ -205,6 +237,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return;
       }
       const token = ++generation;
+      cancelOpeningFrames?.();
       const element = card.value;
       let consumed = false;
       clearTimeout(dropper);
@@ -293,6 +326,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     function cleanup() {
+      cancelOpeningFrames?.();
       openingWaiting = false;
       active = false;
       generation++;

package/es/carousel/style/index.css

@@ -28,7 +28,7 @@
   --c-carousel-card-opacity: 0.6;
   --c-carousel-focus-width: 2px;
   --c-carousel-focus-offset: 2px;
-  --c-carousel-focus-color: var(--c-sys-color-content-brand);
+  --c-carousel-focus-color: var(--c-sys-color-action-primary);
 }
 .c-carousel {
   position: relative;

package/es/cascader/CascaderMenu.vue.mjs

@@ -4,7 +4,7 @@ import { isolateEditorForm } from "../_components/field-presentation/form-bridge
 import { provideFormErrorDescriptionBoundary } from "../form/error-description.mjs";
 import { selectionEditorSurface } from "../_components/selected-options/context.mjs";
 import _sfc_main$1 from "../_components/selected-options/SelectedOptions.vue.mjs";
-import { Input } from "../input/index.mjs";
+import SearchInput from "../input/base.mjs";
 import { createNamespace } from "../_utils/global-config.mjs";
 import BaseCascaderPanel from "./base-cascader-panel.mjs";
 import CascaderSearchPanel from "./cascader-search-panel.mjs";
@@ -44,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onClear: __props.controller.clearSelection
       }, {
         default: withCtx(() => [
-          __props.searchable ? (openBlock(), createBlock(unref(Input), {
+          __props.searchable ? (openBlock(), createBlock(unref(SearchInput), {
             key: 0,
             "model-value": __props.controller.computedInputValue,
             "edit-mode": "direct",

package/es/cascader/cascader-option.mjs

@@ -2,10 +2,12 @@ import { defineComponent, inject, useId, ref, computed, onDeactivated, onBeforeU
 import { IconCheck, IconLoading, IconRight } from "@cedar-design/icons-vue";
 import { isolateEditorForm } from "../_components/field-presentation/form-bridge.mjs";
 import { isFunction } from "../_utils/is.mjs";
-import { Checkbox } from "../checkbox/index.mjs";
+import _Checkbox from "../checkbox/base.mjs";
 import { getPrefixCls, createNamespace } from "../_utils/global-config.mjs";
 import { cascaderInjectionKey } from "./context.mjs";
 import { getCheckedStatus, getOptionLabel } from "./utils.mjs";
+const INTERACTIVE_ROLES = /* @__PURE__ */ new Set(["button", "link", "checkbox", "radio", "switch", "textbox", "combobox", "menuitem", "menuitemcheckbox", "menuitemradio", "option", "treeitem", "gridcell", "slider", "spinbutton", "tab"]);
+const CONCRETE_ROLES = new Set("alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox comment complementary contentinfo definition deletion directory document emphasis feed figure form generic grid gridcell group heading image img insertion link list listbox listitem log main mark marquee math menu menubar menuitem menuitemcheckbox menuitemradio meter navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox sectionfooter sectionheader separator slider spinbutton status strong suggestion subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem doc-abstract doc-acknowledgments doc-afterword doc-appendix doc-backlink doc-biblioentry doc-bibliography doc-biblioref doc-chapter doc-colophon doc-conclusion doc-cover doc-credit doc-credits doc-dedication doc-endnote doc-endnotes doc-epigraph doc-epilogue doc-errata doc-example doc-footnote doc-foreword doc-glossary doc-glossref doc-index doc-introduction doc-noteref doc-notice doc-pagebreak doc-pagefooter doc-pageheader doc-pagelist doc-part doc-preface doc-prologue doc-pullquote doc-qna doc-subtitle doc-tip doc-toc graphics-document graphics-object graphics-symbol".split(" "));
 function ownsOptionClick(event) {
   if (event.defaultPrevented) return false;
   const boundary = event.currentTarget;
@@ -23,7 +25,10 @@ function ownsOptionClick(event) {
     if (item === boundary) break;
     const element = item;
     if (element?.nodeType !== 1 || typeof element.matches !== "function") continue;
-    if (element.matches('li[data-cascader-key], button, a[href], input, select, textarea, summary, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="textbox"], [role="combobox"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="treeitem"], [role="gridcell"], [role="slider"], [role="spinbutton"], [role="tab"]')) return false;
+    const primaryRole = element.getAttribute("role")?.trim().split(/\s+/).find((role) => CONCRETE_ROLES.has(role));
+    if (primaryRole && INTERACTIVE_ROLES.has(primaryRole)) return false;
+    if (element.hasAttribute("tabindex") && element.tabIndex >= 0) return false;
+    if (element.matches('li[data-cascader-key], button, a[href], input, select, textarea, summary, audio[controls], video[controls], [contenteditable]:not([contenteditable="false"])')) return false;
     if (element.matches("label") && (element.htmlFor || element.querySelector("input, button, select, textarea"))) return false;
   }
   return true;
@@ -88,7 +93,9 @@ const CascaderOption = /* @__PURE__ */ defineComponent({
       },
       onMouseleave: (event) => {
         const element = event.currentTarget;
-        const focused = element.ownerDocument.activeElement;
+        const nodeRoot = element.getRootNode();
+        const focusRoot = "activeElement" in nodeRoot ? nodeRoot : element.ownerDocument;
+        const focused = focusRoot.activeElement;
         let focusedOption = focused?.closest("[data-cascader-key]");
         const panelSelector = `.${getPrefixCls("cascader")}-panel, .${getPrefixCls("cascader")}-editor-panel`;
         const panel = element.closest(panelSelector);
@@ -169,7 +176,7 @@ const CascaderOption = /* @__PURE__ */ defineComponent({
     }, events), [props.multiple && createVNode("span", {
       "class": `${prefixCls}-checkbox`,
       "onClick": (event) => event.stopPropagation()
-    }, [createVNode(Checkbox, {
+    }, [createVNode(_Checkbox, {
       "editMode": "direct",
       "uninjectGroupContext": true,
       "modelValue": Boolean(checkedStatus.value.checked),
@@ -181,9 +188,7 @@ const CascaderOption = /* @__PURE__ */ defineComponent({
         if (props.option.disabled || props.option.selectionDisabled) {
           return;
         }
-        const task = handlePathChange(new Event("change"));
         cascaderCtx.onClickOption?.(props.option, Boolean(checked));
-        return task;
       }
     }, null)]), createVNode("div", {
       "class": `${prefixCls}-label`

package/es/cascader/field-adapter.mjs

@@ -2,6 +2,7 @@ import { h } from "vue";
 import { optionValueText } from "../_components/field-presentation/option-labels.mjs";
 import _sfc_main from "./CascaderEditor.vue.mjs";
 const cascaderFieldAdapter = {
+  selectionConfirmation: "update",
   pauseSelectionWhileLoading: true,
   methods: ["focus", "blur", "refresh"],
   text: (value, props) => optionValueText(value, { ...props, showPathLabel: true }),

package/es/cascader/props.mjs

@@ -7,6 +7,8 @@ import { formControlVariants } from "../_utils/form-control.mjs";
 import { popupContainerProp } from "../_utils/popup-container.mjs";
 const cascaderProps = {
   ...fieldLoadingProps,
+  /** 弹出编辑是否需要确认；未设置时单选即提交，多选保留确认。 */
+  needConfirm: { type: Boolean, default: void 0 },
   openTriggerTarget: openTriggerTargetProp,
   /** 内置本地过滤是否区分大小写；自定义过滤函数优先。 */
   caseSensitive: { type: Boolean, default: false },

package/es/cascader/style/index.css

@@ -11,7 +11,7 @@
   --c-cascader-size-item-height: 36px;
   --c-cascader-font-item-size: var(--c-sys-font-size-md);
   --c-cascader-margin-item-icon-left: var(--c-sys-space-5);
-  --c-cascader-item-check-color: var(--c-sys-color-content-primary);
+  --c-cascader-item-check-color: var(--c-sys-color-action-primary);
   --c-cascader-item-check-size: var(--c-sys-font-size-md);
   --c-cascader-item-text-color: var(--c-sys-color-content-primary);
   --c-cascader-item-icon-color: var(--c-sys-color-content-secondary);
@@ -19,11 +19,11 @@
   --c-cascader-padding-item-right: var(--c-sys-space-5);
   --c-cascader-size-item-icon: 12px;
   --c-cascader-item-text-color-hover: var(--c-cascader-item-text-color);
-  --c-cascader-item-text-color-active: var(--c-cascader-item-text-color);
+  --c-cascader-item-text-color-active: var(--c-sys-color-action-primary);
   --c-cascader-item-text-color-disabled: var(--c-sys-color-content-disabled);
   --c-cascader-item-text-color-disabled-active: var(--c-sys-color-content-disabled);
-  --c-cascader-item-bg-active: var(--c-color-fill-2);
-  --c-cascader-item-bg-hover: var(--c-cascader-item-bg-active);
+  --c-cascader-item-bg-active: transparent;
+  --c-cascader-item-bg-hover: var(--c-color-fill-2);
   --c-cascader-item-bg-disabled: transparent;
   --c-cascader-item-bg-disabled-active: var(--c-color-fill-2);
   --c-cascader-checkbox-bg-hover: var(--c-color-fill-3);
@@ -222,17 +222,44 @@
 .c-cascader-search-option-disabled:hover .c-cascader-option-check {
   color: var(--c-cascader-item-text-color-disabled);
 }
-.c-cascader-option-active {
-  color: var(--c-cascader-item-text-color-active);
-  background-color: var(--c-cascader-item-bg-active);
+.c-cascader-option-active,
+.c-cascader-search-option-active {
+  color: var(--c-cascader-item-text-color-hover);
+  background-color: var(--c-cascader-item-bg-hover);
   transition: all var(--c-sys-motion-duration-standard) var(--c-sys-motion-easing-standard);
 }
-.c-cascader-option-active:hover {
+.c-cascader-option-selected,
+.c-cascader-search-option-selected {
   color: var(--c-cascader-item-text-color-active);
   background-color: var(--c-cascader-item-bg-active);
 }
+.c-cascader-option-selected:hover,
+.c-cascader-search-option-selected:hover,
+.c-cascader-option-selected.c-cascader-option-active,
+.c-cascader-search-option-selected.c-cascader-option-active,
+.c-cascader-option-selected.c-cascader-search-option-active,
+.c-cascader-search-option-selected.c-cascader-search-option-active,
+.c-cascader-option-selected.c-cascader-search-option-hover,
+.c-cascader-search-option-selected.c-cascader-search-option-hover {
+  color: var(--c-cascader-item-text-color-active);
+  background-color: var(--c-cascader-item-bg-hover);
+}
 .c-cascader-option-active.c-cascader-option-disabled,
-.c-cascader-option-active.c-cascader-option-disabled:hover {
+.c-cascader-option-active.c-cascader-search-option-disabled,
+.c-cascader-search-option-active.c-cascader-option-disabled,
+.c-cascader-search-option-active.c-cascader-search-option-disabled,
+.c-cascader-option-active.c-cascader-option-disabled:hover,
+.c-cascader-option-active.c-cascader-search-option-disabled:hover,
+.c-cascader-search-option-active.c-cascader-option-disabled:hover,
+.c-cascader-search-option-active.c-cascader-search-option-disabled:hover,
+.c-cascader-option-selected.c-cascader-option-disabled,
+.c-cascader-option-selected.c-cascader-search-option-disabled,
+.c-cascader-search-option-selected.c-cascader-option-disabled,
+.c-cascader-search-option-selected.c-cascader-search-option-disabled,
+.c-cascader-option-selected.c-cascader-option-disabled:hover,
+.c-cascader-option-selected.c-cascader-search-option-disabled:hover,
+.c-cascader-search-option-selected.c-cascader-option-disabled:hover,
+.c-cascader-search-option-selected.c-cascader-search-option-disabled:hover {
   color: var(--c-cascader-item-text-color-disabled-active);
   background-color: var(--c-cascader-item-bg-disabled-active);
 }

package/es/cascader/use-cascader-focus.mjs

@@ -6,9 +6,11 @@ function useCascaderFocus(activeKey) {
   onBeforeUnmount(() => cancelPendingFocus?.());
   return (root, option, originPanel, panelSelector) => {
     const key = activeKey.value;
-    if (!key || !root.contains(option) || root.ownerDocument.activeElement !== option) return;
-    cancelPendingFocus?.();
     const document = root.ownerDocument;
+    const nodeRoot = root.getRootNode();
+    const focusRoot = "activeElement" in nodeRoot ? nodeRoot : document;
+    if (!key || !root.contains(option) || focusRoot.activeElement !== option) return;
+    cancelPendingFocus?.();
     const view = document.defaultView;
     if (!view) return;
     let observer;
@@ -24,13 +26,14 @@ function useCascaderFocus(activeKey) {
       if (cancelPendingFocus === cleanup) cancelPendingFocus = void 0;
     };
     const onFocus = (next) => {
-      if (next.target !== option) cleanup();
+      if (next.target !== option && !next.composedPath().includes(option)) cleanup();
     };
     const attempt = () => {
       if (done) return;
-      const focused = document.activeElement;
-      const lostToRemoval = !option.isConnected && (focused === document.body || focused === document.documentElement);
-      if (!root.isConnected || activeKey.value !== key || focused !== option && !lostToRemoval) {
+      const focused = focusRoot.activeElement;
+      const docFocus = document.activeElement;
+      const lostToRemoval = !option.isConnected && (docFocus === document.body || docFocus === document.documentElement) && (focused === null || focused === document.body || focused === document.documentElement);
+      if (!root.isConnected || root.getRootNode() !== nodeRoot || activeKey.value !== key || focused !== option && !lostToRemoval) {
         cleanup();
         return;
       }