@cedar-design/ui-vue 1.1.0 → 1.1.1

package/lib/countdown/use-countdown.js

@@ -54,9 +54,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() {
@@ -93,9 +96,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/lib/date/DatePanelActions.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const button_index = require("../button/index.js");
+const base = require("../button/base.js");
 const globalConfig = require("../_utils/global-config.js");
 const usePanelActionsLocale = require("./presentation/use-panel-actions-locale.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -29,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           selectNow: () => emit("select-now"),
           nowDisabled: __props.nowDisabled
         })), () => [
-          __props.showNow ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+          __props.showNow ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: 0,
             variant: "text",
             disabled: __props.nowDisabled,
@@ -40,7 +40,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"])) : vue.createCommentVNode("", true),
-          __props.showConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+          __props.showConfirm ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: 1,
             status: "primary",
             disabled: !__props.canConfirm,

package/lib/date/DateShortcuts.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const button_index = require("../button/index.js");
+const base = require("../button/base.js");
 const globalConfig = require("../_utils/global-config.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: globalConfig.createNamespace("date-shortcuts").name },
@@ -20,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         class: vue.normalizeClass(vue.unref(classes)(vue.unref(n)(), vue.unref(n)(`--${__props.position}`)))
       }, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.shortcuts, (shortcut, index) => {
-          return vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+          return vue.openBlock(), vue.createBlock(vue.unref(base.default), {
             key: index,
             variant: "text",
             disabled: __props.blocked || shortcut.disabled,

package/lib/date/picker/panels/Footer2.vue.js

@@ -2,14 +2,14 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const link_index = require("../../../link/index.js");
-const button_index = require("../../../button/index.js");
+const base = require("../../../button/base.js");
 const useInjectDatepickerTransform = require("../hooks/use-inject-datepicker-transform.js");
 const globalConfig = require("../../../_utils/global-config.js");
 const _sfc_main = vue.defineComponent({
   name: globalConfig.createNamespace("date-picker-footer").name,
   components: {
     Link: link_index.Link,
-    Button: button_index.Button
+    Button: base.default
   },
   props: {
     prefixCls: {

package/lib/date/picker/panels/Shortcuts2.vue.js

@@ -2,14 +2,14 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const globalConfig = require("../../../_utils/global-config.js");
 const vue = require("vue");
-const button_index = require("../../../button/index.js");
+const base = require("../../../button/base.js");
 const renderFunction = require("../../../_components/render-function.js");
 const is = require("../../../_utils/is.js");
 const useInjectDatepickerTransform = require("../hooks/use-inject-datepicker-transform.js");
 const _sfc_main = vue.defineComponent({
   name: globalConfig.createNamespace("date-picker-shortcuts").name,
   components: {
-    Button: button_index.Button,
+    Button: base.default,
     RenderFunction: renderFunction.default
   },
   props: {

package/lib/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/lib/dialog/Dialog.vue.js

@@ -12,7 +12,7 @@ const IconHover = require("../_components/IconHover.vue.js");
 const globalConfig = require("../_utils/global-config.js");
 const is = require("../_utils/is.js");
 const modalSurface = require("../_utils/modal-surface.js");
-const button_index = require("../button/index.js");
+const base = require("../button/base.js");
 const locale_index = require("../locale/index.js");
 const props = require("./props.js");
 const useDialog = require("./use-dialog.js");
@@ -264,7 +264,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       confirm: handleConfirm,
                       close: handleClose
                     }, () => [
-                      _ctx.cancelButton ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), vue.mergeProps({
+                      _ctx.cancelButton ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), vue.mergeProps({
                         key: 0,
                         variant: "text"
                       }, _ctx.cancelButtonProps, {
@@ -277,7 +277,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         ]),
                         _: 1
                       }, 16, ["loading", "disabled"])) : vue.createCommentVNode("", true),
-                      _ctx.confirmButton ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), vue.mergeProps({
+                      _ctx.confirmButton ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), vue.mergeProps({
                         key: 1,
                         variant: "text"
                       }, _ctx.confirmButtonProps, {

package/lib/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/lib/form/FormItem2.vue.js

@@ -18,6 +18,7 @@ const errorDescription = require("./error-description.js");
 const labelContext = require("./label-context.js");
 const itemDecoration = require("./item-decoration.js");
 const itemProps = require("./item-props.js");
+const types = require("./types.js");
 const useFormItemLayout = require("./use-form-item-layout.js");
 const utils = require("./utils.js");
 const validateTrigger = require("./validate-trigger.js");
@@ -139,14 +140,38 @@ const _sfc_main = vue.defineComponent({
     const isRequired = vue.computed(
       () => mergedRules.value.some((item) => item.required)
     );
-    const formItemCtx = props.noStyle ? vue.inject(context.formItemInjectionKey, void 0) : void 0;
-    const updateValidateState = (field2, { status, message }) => {
-      validateStatus[field2] = status;
-      validateMessage[field2] = message;
+    const formItemCtx = vue.inject(context.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 ? types.VALIDATE_STATUSES.indexOf(candidate.status) : -1;
+        const currentRank = effective.status ? types.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);
       }
     };
+    vue.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 = vue.computed(
       () => props.feedback && computedValidateStatus.value ? computedValidateStatus.value : void 0
     );
@@ -361,8 +386,6 @@ const _sfc_main = vue.defineComponent({
       validateDisabled.value = false;
       for (const name of Object.keys(validateStatus)) {
         updateValidateState(name, { status: "", message: "" });
-        delete validateStatus[name];
-        delete validateMessage[name];
       }
       captureInitialValue();
       registerCurrentField();
@@ -376,6 +399,11 @@ const _sfc_main = vue.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 = vue.computed(() => [

package/lib/form/FormItemLabel.vue.js

@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const iconsVue = require("@cedar-design/icons-vue");
 const tooltip_index = require("../tooltip/index.js");
+const focusExplicitLabel = require("./focus-explicit-label.js");
 const itemDecoration = require("./item-decoration.js");
 const useFormLabelWidth = require("./use-form-label-width.js");
 const _hoisted_1 = ["aria-label"];
@@ -30,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ref_key: "labelRef",
           ref: labelRef,
           class: __props.labelClass
-        }, __props.attrs), {
+        }, __props.attrs, { onClick: vue.unref(focusExplicitLabel.focusExplicitSlider) }), {
           default: vue.withCtx(() => [
             __props.required && __props.asteriskPosition === "start" ? (vue.openBlock(), vue.createElementBlock("strong", {
               key: 0,
@@ -62,7 +63,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             vue.createTextVNode(" " + vue.toDisplayString(__props.showColon ? ":" : ""), 1)
           ]),
           _: 3
-        }, 16, ["class"])),
+        }, 16, ["class", "onClick"])),
         __props.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(tooltip_index.Tooltip), {
           key: 0,
           content: __props.tooltip,

package/lib/form/focus-explicit-label.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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);
+}
+exports.focusExplicitSlider = focusExplicitSlider;

package/lib/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/lib/input/base.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const components = require("../_utils/maple/components.js");
+const input_vue_vue_type_script_setup_true_lang = require("./input.vue.js");
+const props = require("./props.js");
+const SearchInput = components.withPropsDefaultsSetter(input_vue_vue_type_script_setup_true_lang.default, props.inputProps);
+exports.default = SearchInput;

package/lib/input/index.js

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const globalConfig = require("../_utils/global-config.js");
-const input_vue_vue_type_script_setup_true_lang = require("./input.vue.js");
+const base = require("./base.js");
 const InputGroup_vue_vue_type_script_setup_true_lang = require("./InputGroup.vue.js");
 const InputGroupLabel_vue_vue_type_script_setup_true_lang = require("./InputGroupLabel.vue.js");
 const InputPassword_vue_vue_type_script_setup_true_lang = require("./InputPassword.vue.js");
 const props = require("./props.js");
 const Input = globalConfig.withInstall(
-  input_vue_vue_type_script_setup_true_lang.default,
-  Object.assign(input_vue_vue_type_script_setup_true_lang.default, {
+  base.default,
+  Object.assign(base.default, {
     Password: InputPassword_vue_vue_type_script_setup_true_lang.default,
     Group: InputGroup_vue_vue_type_script_setup_true_lang.default,
     GroupLabel: InputGroupLabel_vue_vue_type_script_setup_true_lang.default
   }),
-  { components: [input_vue_vue_type_script_setup_true_lang.default, InputGroup_vue_vue_type_script_setup_true_lang.default, InputPassword_vue_vue_type_script_setup_true_lang.default, InputGroupLabel_vue_vue_type_script_setup_true_lang.default] }
+  { components: [base.default, InputGroup_vue_vue_type_script_setup_true_lang.default, InputPassword_vue_vue_type_script_setup_true_lang.default, InputGroupLabel_vue_vue_type_script_setup_true_lang.default] }
 );
 const _InputComponent = Input;
 const _InputPasswordComponent = InputPassword_vue_vue_type_script_setup_true_lang.default;

package/lib/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/lib/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/lib/pagination/PageInput.vue.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const input_index = require("../input/index.js");
+const base = require("../input/base.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "PageInput",
   props: {
@@ -14,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(input_index.Input), {
+      return vue.openBlock(), vue.createBlock(vue.unref(base.default), {
         "edit-mode": "direct",
         "model-value": __props.modelValue,
         size: __props.size,

package/lib/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/lib/people-select/PeopleSelect.js

@@ -10,6 +10,7 @@ const globalConfig = require("../_utils/global-config.js");
 const Person_vue_vue_type_script_setup_true_lang = require("./Person.vue.js");
 const presentation = require("./presentation.js");
 const props = require("./props.js");
+const selection = require("./selection.js");
 const _PeopleSelect = vue.defineComponent({
   name: globalConfig.createNamespace("people-select").name,
   inheritAttrs: false,
@@ -40,44 +41,16 @@ const _PeopleSelect = vue.defineComponent({
     const options = vue.computed(
       () => Array.isArray(props2.options) ? props2.options : source.data.value
     );
-    const selectedCache = vue.ref();
-    vue.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 = vue.computed(() => {
-      const current = options.value.find(
-        (person) => person.value === value.value
-      );
-      if (current) return current;
-      if (typeof props2.fallbackOption === "function" && value.value != null) {
-        return props2.fallbackOption(value.value);
-      }
-      if (props2.fallbackOption !== false && props2.label)
-        return {
-          ...selectedCache.value,
-          value: value.value ?? "",
-          label: props2.label
-        };
-      if (props2.fallbackOption !== false && selectedCache.value?.value === value.value)
-        return selectedCache.value;
-      return {
-        value: value.value ?? "",
-        label: props2.fallbackOption === false ? props2.defaultText : props2.label || value.value || props2.defaultText
-      };
+    const selection$1 = selection.useSelectedPeople(props2, value, options);
+    const selected = vue.computed(() => selection$1.people.value[0] ?? {
+      value: "",
+      label: props2.label || props2.defaultText
     });
     const readScope = vue.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$1.people.value.map((person) => person.label).join(", "),
+      person: selected.value,
+      ...props2.multiple ? { people: selection$1.people.value } : {}
     }));
     const childOptions = options;
     async function load(query) {
@@ -113,15 +86,15 @@ const _PeopleSelect = vue.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) : props2.renderActions?.(scope);
-      return vue.h(
-        Person_vue_vue_type_script_setup_true_lang.default,
-        {
-          person: selected.value,
+      const renderPerson = (person) => {
+        const scope = {
+          person,
+          disabled: form.mergedDisabled.value || !person.value || !!person.disabled
+        };
+        const actions = slots.actions ? slots.actions(scope) : props2.renderActions?.(scope);
+        return vue.h(Person_vue_vue_type_script_setup_true_lang.default, {
+          key: person.value,
+          person,
           showAvatar: props2.showAvatar,
           disabled: scope.disabled,
           showPhone: props2.showPhone,
@@ -129,9 +102,9 @@ const _PeopleSelect = vue.defineComponent({
           call: props2.call,
           chat: props2.chat,
           onActionError: (error, action) => emit("action-error", error, action)
-        },
-        actions == null ? void 0 : { default: () => actions }
-      );
+        }, actions == null ? void 0 : { default: () => actions });
+      };
+      return props2.multiple ? vue.h("span", { class: "c-people-select-people" }, selection$1.people.value.map(renderPerson)) : renderPerson(selected.value);
     };
     const personSlots = () => ({
       ...slots,
@@ -153,8 +126,8 @@ const _PeopleSelect = vue.defineComponent({
         ref: control,
         modelValue: value.value,
         options: childOptions.value,
-        label: selected.value.label,
-        fallbackOption: props2.fallbackOption === false ? false : () => selected.value,
+        label: props2.multiple ? "" : selected.value.label,
+        fallbackOption: props2.fallbackOption === false ? false : selection$1.resolve,
         loading: props2.loading || source.loading.value,
         filterOption: props2.filterOption ?? !remote.value,
         "onUpdate:modelValue": update,

package/lib/people-select/Person.vue.js

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const usePeopleTexts = require("./use-people-texts.js");
-const button_index = require("../button/index.js");
+const base = require("../button/base.js");
 const globalConfig = require("../_utils/global-config.js");
 const _hoisted_1 = ["src"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -63,7 +63,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }, ["stop"]))
         }, [
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
-            __props.showPhone ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+            __props.showPhone ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
               key: 0,
               size: "xs",
               variant: "text",
@@ -90,7 +90,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ])]),
               _: 1
             }, 8, ["disabled", "aria-label", "loading"])) : vue.createCommentVNode("", true),
-            __props.showChat ? (vue.openBlock(), vue.createBlock(vue.unref(button_index.Button), {
+            __props.showChat ? (vue.openBlock(), vue.createBlock(vue.unref(base.default), {
               key: 1,
               size: "xs",
               variant: "text",

package/lib/people-select/emits.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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/lib/people-select/people-select.js

@@ -4,6 +4,8 @@ const vue = require("vue");
 const context = require("../_components/selected-options/context.js");
 const useFormItem = require("../_hooks/use-form-item.js");
 const select_index = require("../select/index.js");
+const emits = require("./emits.js");
+const selection = require("./selection.js");
 const props = require("./props.js");
 const globalConfig = require("../_utils/global-config.js");
 const {
@@ -13,12 +15,7 @@ const Base = /* @__PURE__ */ vue.defineComponent({
   name,
   inheritAttrs: false,
   props: 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: emits.peopleSelectEmits,
   setup(props2, {
     emit,
     attrs,
@@ -44,10 +41,10 @@ const Base = /* @__PURE__ */ vue.defineComponent({
       ...option
     })));
     const blocked = () => mergedDisabled.value || mergedReadonly.value || props2.loading;
-    const label = vue.computed(() => (Array.isArray(props2.options) ? props2.options : []).find((option) => option.value === value.value)?.label || props2.label || value.value || props2.defaultText);
+    const label = vue.computed(() => selection.peopleText(value.value, props2));
     const commit = (next) => {
       if (blocked()) return;
-      const text = next === null ? null : typeof next === "string" ? next : "";
+      const text = next === null ? null : props2.multiple ? Array.isArray(next) ? next.filter((id) => typeof id === "string") : [] : typeof next === "string" ? next : "";
       if (props2.modelValue === void 0) localValue.value = text;
       emit("update:modelValue", text);
       emit("change", text);
@@ -58,6 +55,7 @@ const Base = /* @__PURE__ */ vue.defineComponent({
       name: props2.name
     }, {
       "placeholder": props2.placeholder,
+      "multiple": props2.multiple,
       "clearable": props2.clearable,
       "emptyValue": props2.emptyValue,
       "filterable": props2.filterable,

package/lib/people-select/presentation.js

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

package/lib/people-select/props.js

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