@cedar-design/ui-vue 1.1.0 → 1.1.1

package/es/checkbox/base.mjs

@@ -0,0 +1,6 @@
+import { withPropsDefaultsSetter } from "../_utils/maple/components.mjs";
+import Checkbox from "./presentation.mjs";
+const _Checkbox = withPropsDefaultsSetter(Checkbox, Checkbox.props);
+export {
+  _Checkbox as default
+};

package/es/checkbox/checkbox-group.vue.mjs

@@ -6,7 +6,7 @@ import { ChoiceLabel } from "./choice-label.mjs";
 import { normalizeChoiceOptions } from "./choice-options.mjs";
 import { useChoiceState, choiceLimit } from "./choice-state.mjs";
 import { checkboxGroupKey } from "./context.mjs";
-import _Checkbox from "./presentation.mjs";
+import Checkbox from "./presentation.mjs";
 import { checkboxGroupProps } from "./props.mjs";
 import { useCheckboxGroupMethods } from "./use-checkbox-group-methods.mjs";
 import { useChoiceForm } from "./use-choice-form.mjs";
@@ -75,7 +75,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "aria-disabled": unref(mergedDisabled) || void 0
       }), [
         props.options !== void 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(normalizedOptions.value, (option) => {
-          return openBlock(), createBlock(unref(_Checkbox), {
+          return openBlock(), createBlock(unref(Checkbox), {
             key: `${typeof option.value}:${String(option.value)}`,
             "edit-mode": "direct",
             value: option.value,

package/es/checkbox/index.mjs

@@ -1,6 +1,6 @@
 import { withInstall } from "../_utils/global-config.mjs";
 import CheckboxGroup from "./group-presentation.mjs";
-import _Checkbox from "./presentation.mjs";
+import _Checkbox from "./base.mjs";
 import { checkboxGroupProps, checkboxProps } from "./props.mjs";
 const Checkbox = withInstall(
   _Checkbox,

package/es/checkbox/presentation.mjs

@@ -1,6 +1,6 @@
 import { withFieldPresentation } from "../_components/field-presentation/with-field-presentation.mjs";
 import _sfc_main from "./checkbox.vue.mjs";
-const _Checkbox = withFieldPresentation(_sfc_main, { methods: ["toggle", "focus", "blur"] });
+const Checkbox = withFieldPresentation(_sfc_main, { methods: ["toggle", "focus", "blur"] });
 export {
-  _Checkbox as default
+  Checkbox as default
 };

package/es/checkbox/style/index.css

@@ -4,7 +4,7 @@
 :root,
 :where([data-c-theme]) {
   --c-checkbox-control-color: var(--c-sys-color-content-secondary);
-  --c-checkbox-control-color-checked: var(--c-sys-color-content-brand);
+  --c-checkbox-control-color-checked: var(--c-sys-color-action-primary);
   --c-checkbox-control-color-disabled: var(--c-sys-color-content-disabled);
   --c-checkbox-control-color-error: var(--c-sys-color-content-danger);
   --c-checkbox-control-size: 14px;

package/es/countdown/use-countdown.mjs

@@ -52,9 +52,12 @@ function useCountdown(props, emit) {
   let resumeOnActivate = false;
   let generation = 0;
   let handle;
-  function display() {
+  function updateDisplay() {
     timeData.value = splitTime(remaining);
     showTime.value = parseFormat(props.format, timeData.value);
+  }
+  function display() {
+    updateDisplay();
     emit("change", timeData.value);
   }
   function cancel() {
@@ -91,9 +94,11 @@ function useCountdown(props, emit) {
   }
   function pause() {
     resumeOnActivate = false;
-    if (running) remaining = Math.max(0, deadline - performance.now());
+    const wasRunning = running;
+    if (wasRunning) remaining = Math.max(0, deadline - performance.now());
     running = false;
     cancel();
+    if (wasRunning && mounted) updateDisplay();
   }
   function reset() {
     if (!mounted) return;

package/es/date/DatePanelActions.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot, normalizeProps, guardReactiveProps, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { Button } from "../button/index.mjs";
+import Button from "../button/base.mjs";
 import { createNamespace } from "../_utils/global-config.mjs";
 import { usePanelActionsLocale } from "./presentation/use-panel-actions-locale.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/es/date/DateShortcuts.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, Fragment, renderList, createBlock, withCtx, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
-import { Button } from "../button/index.mjs";
+import Button from "../button/base.mjs";
 import { createNamespace } from "../_utils/global-config.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: createNamespace("date-shortcuts").name },

package/es/date/picker/panels/Footer2.vue.mjs

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue";
 import { Link } from "../../../link/index.mjs";
-import { Button } from "../../../button/index.mjs";
+import Button from "../../../button/base.mjs";
 import useDatePickerTransform from "../hooks/use-inject-datepicker-transform.mjs";
 import { createNamespace } from "../../../_utils/global-config.mjs";
 const _sfc_main = defineComponent({

package/es/date/picker/panels/Shortcuts2.vue.mjs

@@ -1,6 +1,6 @@
 import { createNamespace } from "../../../_utils/global-config.mjs";
 import { defineComponent } from "vue";
-import { Button } from "../../../button/index.mjs";
+import Button from "../../../button/base.mjs";
 import RenderFunction from "../../../_components/render-function.mjs";
 import { isFunction } from "../../../_utils/is.mjs";
 import useDatePickerTransform from "../hooks/use-inject-datepicker-transform.mjs";

package/es/date/picker/style/index.css

@@ -99,7 +99,7 @@
   --c-date-picker-shortcuts-placement-item-margin-vertical: 5px;
   --c-date-picker-shortcuts-inline-item-margin-vertical: 5px;
   --c-date-picker-shortcuts-inline-item-margin-right: var(--c-spacing-5);
-  --c-date-picker-shortcuts-active-text-color: var(--c-sys-color-content-brand);
+  --c-date-picker-shortcuts-active-text-color: var(--c-sys-color-action-primary);
   --c-date-picker-transition-duration-1: var(--c-transition-duration-1);
   --c-date-picker-transition-timing-function-linear: var(--c-transition-timing-function-linear);
 }

package/es/dialog/Dialog.vue.mjs

@@ -10,7 +10,7 @@ import IconHover from "../_components/IconHover.vue.mjs";
 import { getPrefixCls, createNamespace } from "../_utils/global-config.mjs";
 import { isNumber } from "../_utils/is.mjs";
 import { useModalSurface } from "../_utils/modal-surface.mjs";
-import { Button } from "../button/index.mjs";
+import Button from "../button/base.mjs";
 import { useI18n } from "../locale/index.mjs";
 import { dialogProps } from "./props.mjs";
 import { useDialog } from "./use-dialog.mjs";

package/es/ellipsis/style/index.css

@@ -3,7 +3,7 @@
 }
 :root,
 :where([data-c-theme]) {
-  --c-ellipsis-focus-color: var(--c-sys-color-content-brand);
+  --c-ellipsis-focus-color: var(--c-sys-color-action-primary);
   --c-ellipsis-focus-width: 2px;
   --c-ellipsis-focus-offset: 2px;
 }

package/es/form/FormItem2.vue.mjs

@@ -16,6 +16,7 @@ import { provideFormErrorDescription } from "./error-description.mjs";
 import { provideFormItemLabel } from "./label-context.mjs";
 import { resolveFormItemStatus } from "./item-decoration.mjs";
 import { formItemProps } from "./item-props.mjs";
+import { VALIDATE_STATUSES } from "./types.mjs";
 import { useFormItemLayout } from "./use-form-item-layout.mjs";
 import { getFinalValidateStatus, getFinalValidateMessage } from "./utils.mjs";
 import { hasValidateTrigger } from "./validate-trigger.mjs";
@@ -137,14 +138,38 @@ const _sfc_main = defineComponent({
     const isRequired = computed(
       () => mergedRules.value.some((item) => item.required)
     );
-    const formItemCtx = props.noStyle ? inject(formItemInjectionKey, void 0) : void 0;
-    const updateValidateState = (field2, { status, message }) => {
-      validateStatus[field2] = status;
-      validateMessage[field2] = message;
+    const formItemCtx = inject(formItemInjectionKey, void 0);
+    const feedbackOwner = Symbol("form-item-feedback");
+    const feedbackSources = /* @__PURE__ */ new Map();
+    const updateValidateState = (field2, { status, message }, owner = feedbackOwner) => {
+      let sources = feedbackSources.get(field2);
+      if (!sources) {
+        sources = /* @__PURE__ */ new Map();
+        feedbackSources.set(field2, sources);
+      }
+      if (status || message) {
+        sources.delete(owner);
+        sources.set(owner, { status, message });
+      } else sources.delete(owner);
+      let effective = { status: "", message: "" };
+      for (const candidate of sources.values()) {
+        const rank = candidate.status ? VALIDATE_STATUSES.indexOf(candidate.status) : -1;
+        const currentRank = effective.status ? VALIDATE_STATUSES.indexOf(effective.status) : -1;
+        if (rank >= currentRank) effective = candidate;
+      }
+      if (!sources.size) feedbackSources.delete(field2);
+      validateStatus[field2] = effective.status;
+      validateMessage[field2] = effective.message;
       if (props.noStyle) {
-        formItemCtx?.updateValidateState(field2, { status, message });
+        formItemCtx?.updateValidateState(field2, effective, feedbackOwner);
       }
     };
+    watch(() => props.noStyle, (noStyle) => {
+      if (!formItemCtx) return;
+      for (const name of Object.keys(validateStatus)) {
+        formItemCtx.updateValidateState(name, noStyle ? { status: validateStatus[name], message: validateMessage[name] ?? "" } : { status: "", message: "" }, feedbackOwner);
+      }
+    }, { flush: "sync" });
     const computedFeedback = computed(
       () => props.feedback && computedValidateStatus.value ? computedValidateStatus.value : void 0
     );
@@ -359,8 +384,6 @@ const _sfc_main = defineComponent({
       validateDisabled.value = false;
       for (const name of Object.keys(validateStatus)) {
         updateValidateState(name, { status: "", message: "" });
-        delete validateStatus[name];
-        delete validateMessage[name];
       }
       captureInitialValue();
       registerCurrentField();
@@ -374,6 +397,11 @@ const _sfc_main = defineComponent({
       active = false;
       fieldMounted = false;
       validation.invalidate();
+      if (props.noStyle && formItemCtx) {
+        for (const name of Object.keys(validateStatus)) {
+          formItemCtx.updateValidateState(name, { status: "", message: "" }, feedbackOwner);
+        }
+      }
       unregisterCurrentField();
     });
     const cls = computed(() => [

package/es/form/FormItemLabel.vue.mjs

@@ -1,6 +1,7 @@
-import { defineComponent, ref, openBlock, createElementBlock, Fragment, createBlock, resolveDynamicComponent, mergeProps, withCtx, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, unref, withModifiers, createVNode } from "vue";
+import { defineComponent, ref, openBlock, createElementBlock, Fragment, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, withModifiers, createVNode } from "vue";
 import { IconQuestionCircle } from "@cedar-design/icons-vue";
 import { Tooltip } from "../tooltip/index.mjs";
+import { focusExplicitSlider } from "./focus-explicit-label.mjs";
 import { formItemDecorationProps } from "./item-decoration.mjs";
 import { useFormLabelMeasurement } from "./use-form-label-width.mjs";
 const _hoisted_1 = ["aria-label"];
@@ -28,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref_key: "labelRef",
           ref: labelRef,
           class: __props.labelClass
-        }, __props.attrs), {
+        }, __props.attrs, { onClick: unref(focusExplicitSlider) }), {
           default: withCtx(() => [
             __props.required && __props.asteriskPosition === "start" ? (openBlock(), createElementBlock("strong", {
               key: 0,
@@ -60,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createTextVNode(" " + toDisplayString(__props.showColon ? ":" : ""), 1)
           ]),
           _: 3
-        }, 16, ["class"])),
+        }, 16, ["class", "onClick"])),
         __props.tooltip ? (openBlock(), createBlock(unref(Tooltip), {
           key: 0,
           content: __props.tooltip,

package/es/form/focus-explicit-label.mjs

@@ -0,0 +1,28 @@
+function focusExplicitSlider(event) {
+  if (event.defaultPrevented || event.button !== 0) return;
+  const label = event.currentTarget;
+  if (!label || label.nodeType !== 1 || label.tagName !== "LABEL") return;
+  const origin = event.target;
+  const interactive = origin?.nodeType === 1 ? origin.closest('a[href],button,input,select,textarea,[contenteditable]:not([contenteditable="false"]),[role="button"],[role="link"],[role="checkbox"],[role="radio"],[role="switch"],[role="textbox"],[role="combobox"],[role="slider"]') : null;
+  if (interactive && interactive !== label && label.contains(interactive)) return;
+  const id = label.getAttribute("for");
+  if (!id || label.control) return;
+  const root = label.getRootNode();
+  if (typeof root.getElementById !== "function") return;
+  const target = root.getElementById(id);
+  if (!target) return;
+  const previous = root.activeElement;
+  const previousDocument = label.ownerDocument.activeElement;
+  setTimeout(() => {
+    if (event.defaultPrevented || !label.isConnected || label.getAttribute("for") !== id || root.getElementById(id) !== target || root.activeElement !== previous || label.ownerDocument.activeElement !== previousDocument) return;
+    const sliders = target.matches('[role="slider"]') ? [target] : Array.from(target.querySelectorAll('[role="slider"]'));
+    if (sliders.length !== 1) return;
+    const slider = sliders[0];
+    if (target !== slider && !Array.from(target.classList).some((name) => name.endsWith("-slider") && slider.classList.contains(`${name}__thumb`))) return;
+    if (slider.tabIndex < 0 || slider.getAttribute("aria-disabled") === "true" || slider.closest('[inert], [aria-hidden="true"]')) return;
+    slider.focus();
+  }, 0);
+}
+export {
+  focusExplicitSlider
+};

package/es/form/style/index.css

@@ -76,7 +76,7 @@
   --c-form-status-validating-focus-bg: var(--c-color-bg-2);
   --c-form-status-validating-border-color: transparent;
   --c-form-status-validating-hover-border-color: transparent;
-  --c-form-status-validating-focus-border-color: var(--c-sys-color-content-brand);
+  --c-form-status-validating-focus-border-color: var(--c-sys-color-action-primary);
   --c-form-status-validating-focus-shadow-size: var(--c-shadow-distance-none);
   --c-form-status-validating-focus-shadow-color: var(--c-color-primary-light-2);
   --c-form-status-validating-tip-text-color: var(--c-sys-color-content-brand);

package/es/input/base.mjs

@@ -0,0 +1,7 @@
+import { withPropsDefaultsSetter } from "../_utils/maple/components.mjs";
+import _sfc_main from "./input.vue.mjs";
+import { inputProps } from "./props.mjs";
+const SearchInput = withPropsDefaultsSetter(_sfc_main, inputProps);
+export {
+  SearchInput as default
+};

package/es/input/index.mjs

@@ -1,27 +1,27 @@
 import { withInstall } from "../_utils/global-config.mjs";
-import _sfc_main from "./input.vue.mjs";
-import _sfc_main$1 from "./InputGroup.vue.mjs";
-import _sfc_main$3 from "./InputGroupLabel.vue.mjs";
-import _sfc_main$2 from "./InputPassword.vue.mjs";
+import SearchInput from "./base.mjs";
+import _sfc_main from "./InputGroup.vue.mjs";
+import _sfc_main$2 from "./InputGroupLabel.vue.mjs";
+import _sfc_main$1 from "./InputPassword.vue.mjs";
 import { inputGroupProps, inputPasswordProps, inputProps } from "./props.mjs";
 const Input = withInstall(
-  _sfc_main,
-  Object.assign(_sfc_main, {
-    Password: _sfc_main$2,
-    Group: _sfc_main$1,
-    GroupLabel: _sfc_main$3
+  SearchInput,
+  Object.assign(SearchInput, {
+    Password: _sfc_main$1,
+    Group: _sfc_main,
+    GroupLabel: _sfc_main$2
   }),
-  { components: [_sfc_main, _sfc_main$1, _sfc_main$2, _sfc_main$3] }
+  { components: [SearchInput, _sfc_main, _sfc_main$1, _sfc_main$2] }
 );
 const _InputComponent = Input;
-const _InputPasswordComponent = _sfc_main$2;
-const _InputGroupComponent = _sfc_main$1;
-const _InputGroupLabelComponent = _sfc_main$3;
+const _InputPasswordComponent = _sfc_main$1;
+const _InputGroupComponent = _sfc_main;
+const _InputGroupLabelComponent = _sfc_main$2;
 export {
   Input,
-  _sfc_main$1 as InputGroup,
-  _sfc_main$3 as InputGroupLabel,
-  _sfc_main$2 as InputPassword,
+  _sfc_main as InputGroup,
+  _sfc_main$2 as InputGroupLabel,
+  _sfc_main$1 as InputPassword,
   _InputComponent,
   _InputGroupComponent,
   _InputGroupLabelComponent,

package/es/layout/style/index.css

@@ -4,7 +4,7 @@
 :root,
 :where([data-c-theme]) {
   --c-layout-border-color: var(--c-color-border-2);
-  --c-layout-focus-color: var(--c-sys-color-content-brand);
+  --c-layout-focus-color: var(--c-sys-color-action-primary);
   --c-layout-trigger-height: var(--c-size-12);
   --c-layout-font-color: var(--c-color-text-1);
   --c-layout-sider-background-light: var(--c-color-bg-2);

package/es/nav-menu/style/index.css

@@ -9,7 +9,7 @@
   --c-nav-menu-light-item-bg-hover: var(--c-color-fill-2);
   --c-nav-menu-light-item-bg-selected: var(--c-color-fill-2);
   --c-nav-menu-light-item-text-color: var(--c-color-text-2);
-  --c-nav-menu-light-item-text-color-selected: var(--c-sys-color-content-brand);
+  --c-nav-menu-light-item-text-color-selected: var(--c-sys-color-action-primary);
   --c-nav-menu-light-item-text-color-disabled: var(--c-color-text-4);
   --c-nav-menu-row-height: 40px;
   --c-nav-menu-row-height-xs: 28px;

package/es/pagination/PageInput.vue.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref, withKeys, withModifiers } from "vue";
-import { Input } from "../input/index.mjs";
+import SearchInput from "../input/base.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PageInput",
   props: {
@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Input), {
+      return openBlock(), createBlock(unref(SearchInput), {
         "edit-mode": "direct",
         "model-value": __props.modelValue,
         size: __props.size,

package/es/pagination/style/index.css

@@ -21,11 +21,11 @@
   --c-pagination-touch-size: 44px;
   --c-pagination-focus-width: 2px;
   --c-pagination-focus-offset: 1px;
-  --c-pagination-focus-color: var(--c-sys-color-content-brand);
+  --c-pagination-focus-color: var(--c-sys-color-action-primary);
   --c-pagination-item-background: transparent;
   --c-pagination-hover-background: var(--c-color-fill-1);
   --c-pagination-active-background: var(--c-color-primary-light-1);
-  --c-pagination-active-color: var(--c-sys-color-content-brand);
+  --c-pagination-active-color: var(--c-sys-color-action-primary);
   --c-pagination-disabled-color: var(--c-color-text-4);
   --c-pagination-disabled-background: var(--c-color-fill-1);
 }

package/es/people-select/PeopleSelect.mjs

@@ -1,6 +1,6 @@
 import { peopleSelectEmits } from "./emits.mjs";
 import { useEmptyValues } from "../_utils/empty-value.mjs";
-import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, h } from "vue";
+import { defineComponent, computed, ref, onMounted, watch, onBeforeUnmount, h } from "vue";
 import { useAsyncData } from "@cedar-design/use-vue";
 import { useFieldPresentation } from "../_components/field-presentation/context.mjs";
 import { usePresentationForm } from "../_components/field-presentation/form-bridge.mjs";
@@ -8,6 +8,7 @@ import { createNamespace } from "../_utils/global-config.mjs";
 import _sfc_main from "./Person.vue.mjs";
 import Presented from "./presentation.mjs";
 import { peopleSelectProps } from "./props.mjs";
+import { useSelectedPeople } from "./selection.mjs";
 const _PeopleSelect = defineComponent({
   name: createNamespace("people-select").name,
   inheritAttrs: false,
@@ -38,44 +39,16 @@ const _PeopleSelect = defineComponent({
     const options = computed(
       () => Array.isArray(props.options) ? props.options : source.data.value
     );
-    const selectedCache = ref();
-    watch(
-      [options, value],
-      () => {
-        const person = options.value.find(
-          (person2) => person2.value === value.value
-        );
-        if (person) selectedCache.value = person;
-        else if (selectedCache.value?.value !== value.value)
-          selectedCache.value = void 0;
-      },
-      { immediate: true }
-    );
-    const selected = computed(() => {
-      const current = options.value.find(
-        (person) => person.value === value.value
-      );
-      if (current) return current;
-      if (typeof props.fallbackOption === "function" && value.value != null) {
-        return props.fallbackOption(value.value);
-      }
-      if (props.fallbackOption !== false && props.label)
-        return {
-          ...selectedCache.value,
-          value: value.value ?? "",
-          label: props.label
-        };
-      if (props.fallbackOption !== false && selectedCache.value?.value === value.value)
-        return selectedCache.value;
-      return {
-        value: value.value ?? "",
-        label: props.fallbackOption === false ? props.defaultText : props.label || value.value || props.defaultText
-      };
+    const selection = useSelectedPeople(props, value, options);
+    const selected = computed(() => selection.people.value[0] ?? {
+      value: "",
+      label: props.label || props.defaultText
     });
     const readScope = computed(() => ({
       value: value.value,
-      text: emptyPolicy.isEmpty(value.value) ? emptyPolicy.emptyText.value : selected.value.label,
-      person: selected.value
+      text: emptyPolicy.isEmpty(value.value) ? emptyPolicy.emptyText.value : selection.people.value.map((person) => person.label).join(", "),
+      person: selected.value,
+      ...props.multiple ? { people: selection.people.value } : {}
     }));
     const childOptions = options;
     async function load(query) {
@@ -111,15 +84,15 @@ const _PeopleSelect = defineComponent({
       if (emptyPolicy.isEmpty(value.value)) {
         return emptyPolicy.emptyText.value;
       }
-      const scope = {
-        person: selected.value,
-        disabled: form.mergedDisabled.value || !value.value || !!selected.value.disabled
-      };
-      const actions = slots.actions ? slots.actions(scope) : props.renderActions?.(scope);
-      return h(
-        _sfc_main,
-        {
-          person: selected.value,
+      const renderPerson = (person) => {
+        const scope = {
+          person,
+          disabled: form.mergedDisabled.value || !person.value || !!person.disabled
+        };
+        const actions = slots.actions ? slots.actions(scope) : props.renderActions?.(scope);
+        return h(_sfc_main, {
+          key: person.value,
+          person,
           showAvatar: props.showAvatar,
           disabled: scope.disabled,
           showPhone: props.showPhone,
@@ -127,9 +100,9 @@ const _PeopleSelect = defineComponent({
           call: props.call,
           chat: props.chat,
           onActionError: (error, action) => emit("action-error", error, action)
-        },
-        actions == null ? void 0 : { default: () => actions }
-      );
+        }, actions == null ? void 0 : { default: () => actions });
+      };
+      return props.multiple ? h("span", { class: "c-people-select-people" }, selection.people.value.map(renderPerson)) : renderPerson(selected.value);
     };
     const personSlots = () => ({
       ...slots,
@@ -151,8 +124,8 @@ const _PeopleSelect = defineComponent({
         ref: control,
         modelValue: value.value,
         options: childOptions.value,
-        label: selected.value.label,
-        fallbackOption: props.fallbackOption === false ? false : () => selected.value,
+        label: props.multiple ? "" : selected.value.label,
+        fallbackOption: props.fallbackOption === false ? false : selection.resolve,
         loading: props.loading || source.loading.value,
         filterOption: props.filterOption ?? !remote.value,
         "onUpdate:modelValue": update,

package/es/people-select/Person.vue.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, reactive, openBlock, createElementBlock, normalizeClass, unref, createCommentVNode, createElementVNode, toDisplayString, withModifiers, renderSlot, createBlock, withCtx } from "vue";
 import { usePeopleTexts } from "./use-people-texts.mjs";
-import { Button } from "../button/index.mjs";
+import Button from "../button/base.mjs";
 import { createNamespace } from "../_utils/global-config.mjs";
 const _hoisted_1 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/es/people-select/emits.mjs

@@ -1,4 +1,4 @@
-const identity = (value) => value === null || typeof value === "string";
+const identity = (value) => value === null || typeof value === "string" || Array.isArray(value) && value.every((id) => typeof id === "string");
 const peopleSelectEmits = {
   "update:modelValue": identity,
   "update:open": (open) => typeof open === "boolean",

package/es/people-select/people-select.mjs

@@ -2,6 +2,8 @@ import { defineComponent, ref, computed, inject, createVNode, mergeProps } from
 import { selectionEditorSurface } from "../_components/selected-options/context.mjs";
 import { useFormItem } from "../_hooks/use-form-item.mjs";
 import { Select } from "../select/index.mjs";
+import { peopleSelectEmits } from "./emits.mjs";
+import { peopleText } from "./selection.mjs";
 import { peopleSelectProps } from "./props.mjs";
 import { createNamespace } from "../_utils/global-config.mjs";
 const {
@@ -11,12 +13,7 @@ const Base = /* @__PURE__ */ defineComponent({
   name,
   inheritAttrs: false,
   props: peopleSelectProps,
-  emits: {
-    "update:modelValue": (value) => value === null || typeof value === "string",
-    change: (value) => value === null || typeof value === "string",
-    clear: () => true,
-    search: (query) => typeof query === "string"
-  },
+  emits: peopleSelectEmits,
   setup(props, {
     emit,
     attrs,
@@ -42,10 +39,10 @@ const Base = /* @__PURE__ */ defineComponent({
       ...option
     })));
     const blocked = () => mergedDisabled.value || mergedReadonly.value || props.loading;
-    const label = computed(() => (Array.isArray(props.options) ? props.options : []).find((option) => option.value === value.value)?.label || props.label || value.value || props.defaultText);
+    const label = computed(() => peopleText(value.value, props));
     const commit = (next) => {
       if (blocked()) return;
-      const text = next === null ? null : typeof next === "string" ? next : "";
+      const text = next === null ? null : props.multiple ? Array.isArray(next) ? next.filter((id) => typeof id === "string") : [] : typeof next === "string" ? next : "";
       if (props.modelValue === void 0) localValue.value = text;
       emit("update:modelValue", text);
       emit("change", text);
@@ -56,6 +53,7 @@ const Base = /* @__PURE__ */ defineComponent({
       name: props.name
     }, {
       "placeholder": props.placeholder,
+      "multiple": props.multiple,
       "clearable": props.clearable,
       "emptyValue": props.emptyValue,
       "filterable": props.filterable,

package/es/people-select/presentation.mjs

@@ -2,9 +2,11 @@ import { h } from "vue";
 import { withFieldPresentation } from "../_components/field-presentation/with-field-presentation.mjs";
 import _sfc_main from "../_components/selected-options/SelectionEditor.vue.mjs";
 import Base from "./people-select.mjs";
+import { peopleText } from "./selection.mjs";
 const Presented = withFieldPresentation(Base, {
+  selectionConfirmation: "update",
   methods: ["focus", "blur"],
-  text: (value, props) => props.options?.find((option) => option.value === value)?.label || props.label || value || props.defaultText || "",
+  text: peopleText,
   editor: ({ props, attrs, value, update, emit, slots, disabled, readonly }) => h(
     _sfc_main,
     { kind: "people-select" },

package/es/people-select/props.mjs

@@ -4,6 +4,8 @@ import { selectProps } from "../select/props.mjs";
 import { fieldPresentationProps } from "../_components/field-presentation/props.mjs";
 const peopleSelectProps = {
   ...fieldLoadingProps,
+  /** 弹出编辑是否需要确认；未设置时单选即提交，多选保留确认。 */
+  needConfirm: { type: Boolean, default: void 0 },
   ...fieldPresentationProps,
   emptyValue: emptyValueProp(),
   /** Reactive display data for a selected value absent from options. */
@@ -41,9 +43,13 @@ const peopleSelectProps = {
     type: String,
     default: "-"
   },
-  modelValue: { type: String, default: void 0 },
-  /** 非受控初始选中人员标识，仅创建时读取。 */
-  defaultValue: { type: String, default: "" },
+  multiple: selectProps.multiple,
+  modelValue: { type: [String, Array], default: void 0 },
+  /** 非受控初始选中人员 ID 或 ID 数组，仅创建时读取。 */
+  defaultValue: {
+    type: [String, Array],
+    default: (props) => props.multiple ? [] : ""
+  },
   isLabel: {
     type: Boolean,
     default: false