@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.e6NGwmyk.mjs

@@ -0,0 +1,680 @@
+import { ref, computed, watch, defineComponent, useId, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, Fragment, renderList, toDisplayString, withModifiers, createVNode, createBlock, Teleport, normalizeStyle, renderSlot, createTextVNode } from 'vue';
+import { u as usePositioning } from './components.DqdBSuxX.mjs';
+import { I as Icon } from './components.D3on6_fI.mjs';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const selectProps = {
+  /** 受控值：单选标量 / 多选数组；未传即非受控（组件内自维护） */
+  modelValue: {
+    type: [String, Number, Array],
+    default: void 0
+  },
+  /** 选项数据源（也可用 option 插槽完全自定义渲染） */
+  options: { type: Array, default: () => [] },
+  /** 多选模式 */
+  multiple: { type: Boolean, default: false },
+  /** 可搜索过滤（输入过滤本地选项） */
+  filterable: { type: Boolean, default: false },
+  /** 远程搜索模式（过滤交由父级，输入触发 search 事件） */
+  remote: { type: Boolean, default: false },
+  /** 远程搜索加载态 */
+  loading: { type: Boolean, default: false },
+  /** 禁用整个触发器 */
+  disabled: { type: Boolean, default: false },
+  /** 占位文案 */
+  placeholder: { type: String, default: "\u8BF7\u9009\u62E9" },
+  /** 可清除（hover 显示清除按钮） */
+  clearable: { type: Boolean, default: false },
+  /** 多选折叠（超出显示 +N） */
+  collapseTags: { type: Boolean, default: false },
+  /** 无匹配空态文案（i18n 预埋，05-T1 接入语言包） */
+  emptyText: { type: String, default: "\u6682\u65E0\u5339\u914D\u9009\u9879" }
+};
+
+const SEARCH_DEBOUNCE_MS = 300;
+function useSelect(options) {
+  const {
+    modelValue,
+    options: optionsRef,
+    filterable,
+    remote,
+    multiple,
+    disabled,
+    emitUpdate,
+    emitChange,
+    emitSearch
+  } = options;
+  const open = ref(false);
+  const activeIndex = ref(-1);
+  const searchKeyword = ref("");
+  const lastEmittedKeyword = ref("");
+  let searchTimer = null;
+  const visibleOptions = computed(() => {
+    if (remote.value || !filterable.value)
+      return optionsRef.value;
+    const kw = searchKeyword.value.trim().toLowerCase();
+    if (!kw)
+      return optionsRef.value;
+    return optionsRef.value.filter(
+      (opt) => String(opt.label ?? opt.value).toLowerCase().includes(kw)
+    );
+  });
+  const groups = computed(() => {
+    const list = visibleOptions.value;
+    if (!list.some((opt) => opt.group))
+      return [{ group: null, options: list }];
+    const names = [...new Set(list.map((opt) => opt.group).filter(Boolean))];
+    const result = [];
+    const ungrouped = list.filter((opt) => !opt.group);
+    if (ungrouped.length)
+      result.push({ group: null, options: ungrouped });
+    for (const name of names)
+      result.push({ group: name, options: list.filter((opt) => opt.group === name) });
+    return result;
+  });
+  const selectedOptions = computed(() => {
+    const value = modelValue.value;
+    if (multiple.value) {
+      const arr = Array.isArray(value) ? value : [];
+      return arr.map((v) => optionsRef.value.find((opt2) => opt2.value === v)).filter((opt2) => Boolean(opt2));
+    }
+    const opt = optionsRef.value.find((o) => o.value === value);
+    return opt ? [opt] : [];
+  });
+  const hasValue = computed(() => {
+    const value = modelValue.value;
+    if (multiple.value)
+      return Array.isArray(value) && value.length > 0;
+    return value !== void 0 && value !== "";
+  });
+  function openPanel() {
+    if (disabled.value)
+      return;
+    open.value = true;
+  }
+  function close() {
+    open.value = false;
+  }
+  function toggleOpen() {
+    if (disabled.value)
+      return;
+    if (open.value)
+      close();
+    else openPanel();
+  }
+  watch(open, (val) => {
+    if (!val)
+      return;
+    if (activeIndex.value >= 0)
+      return;
+    const list = visibleOptions.value;
+    if (!multiple.value && hasValue.value) {
+      const idx = list.findIndex((opt) => opt.value === modelValue.value);
+      activeIndex.value = idx >= 0 ? idx : -1;
+    } else {
+      activeIndex.value = -1;
+    }
+  });
+  function move(delta) {
+    const list = visibleOptions.value;
+    if (list.length === 0)
+      return;
+    const len = list.length;
+    let i = activeIndex.value;
+    for (let step = 0; step < len; step++) {
+      i = (i + delta + len) % len;
+      if (!list[i].disabled) {
+        activeIndex.value = i;
+        return;
+      }
+    }
+  }
+  function handleTriggerKeydown(event) {
+    if (disabled.value)
+      return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!open.value) {
+          openPanel();
+          move(1);
+        } else {
+          move(1);
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open.value) {
+          openPanel();
+          move(-1);
+        } else {
+          move(-1);
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        if (open.value)
+          activeIndex.value = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        if (open.value) {
+          const list = visibleOptions.value;
+          activeIndex.value = list.length - 1;
+        }
+        break;
+      case "Enter": {
+        event.preventDefault();
+        if (!open.value) {
+          openPanel();
+          return;
+        }
+        const list = visibleOptions.value;
+        const idx = activeIndex.value;
+        if (idx >= 0 && idx < list.length && !list[idx].disabled)
+          selectOption(list[idx]);
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        if (open.value)
+          close();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  }
+  function setActiveIndex(index) {
+    activeIndex.value = index;
+  }
+  function selectOption(option) {
+    if (option.disabled || disabled.value)
+      return;
+    if (multiple.value) {
+      const cur = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
+      const idx = cur.indexOf(option.value);
+      if (idx >= 0)
+        cur.splice(idx, 1);
+      else cur.push(option.value);
+      emitUpdate(cur);
+      emitChange(cur);
+    } else {
+      emitUpdate(option.value);
+      emitChange(option.value);
+      close();
+    }
+  }
+  function clear() {
+    if (disabled.value)
+      return;
+    if (multiple.value) {
+      emitUpdate([]);
+      emitChange([]);
+    } else {
+      emitUpdate("");
+      emitChange("");
+    }
+  }
+  function handleInput(keyword) {
+    searchKeyword.value = keyword;
+    if (!open.value)
+      openPanel();
+    if (!remote.value)
+      return;
+    if (searchTimer)
+      clearTimeout(searchTimer);
+    const seqKeyword = keyword;
+    searchTimer = setTimeout(() => {
+      searchTimer = null;
+      lastEmittedKeyword.value = seqKeyword;
+      emitSearch(seqKeyword);
+    }, SEARCH_DEBOUNCE_MS);
+  }
+  function dispose() {
+    if (searchTimer) {
+      clearTimeout(searchTimer);
+      searchTimer = null;
+    }
+  }
+  return {
+    open,
+    activeIndex,
+    searchKeyword,
+    lastEmittedKeyword,
+    visibleOptions,
+    groups,
+    selectedOptions,
+    hasValue,
+    toggleOpen,
+    openPanel,
+    close,
+    handleTriggerKeydown,
+    setActiveIndex,
+    selectOption,
+    clear,
+    handleInput,
+    dispose
+  };
+}
+function optionLabel(option) {
+  return option ? String(option.label ?? option.value) : "";
+}
+function isMultipleValue(value) {
+  return Array.isArray(value);
+}
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmSelect" },
+  __name: "select",
+  props: selectProps,
+  emits: ["update:modelValue", "change", "search", "focus", "blur"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const uid = useId();
+    const listboxId = `qm-select-listbox-${uid}`;
+    const rootRef = ref(null);
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const modelValue = computed(() => props.modelValue);
+    const optionsRef = computed(() => props.options);
+    const filterable = computed(() => props.filterable);
+    const remote = computed(() => props.remote);
+    const multiple = computed(() => props.multiple);
+    const disabled = computed(() => props.disabled);
+    const select = useSelect({
+      modelValue,
+      options: optionsRef,
+      filterable,
+      remote,
+      multiple,
+      disabled,
+      emitUpdate: (value) => emit("update:modelValue", value),
+      emitChange: (value) => emit("change", value),
+      emitSearch: (keyword) => emit("search", keyword)
+    });
+    const { open, activeIndex, searchKeyword, groups, selectedOptions, hasValue, visibleOptions } = select;
+    const inputValue = computed(() => {
+      if (multiple.value)
+        return searchKeyword.value;
+      return searchKeyword.value || optionLabel(selectedOptions.value[0]);
+    });
+    const visibleTags = computed(
+      () => props.collapseTags ? selectedOptions.value.slice(0, 1) : selectedOptions.value
+    );
+    const collapsedCount = computed(() => selectedOptions.value.length - visibleTags.value.length);
+    const flatIndexMap = computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      visibleOptions.value.forEach((opt, i) => map.set(opt, i));
+      return map;
+    });
+    function isSelected(opt) {
+      if (multiple.value)
+        return Array.isArray(modelValue.value) && modelValue.value.includes(opt.value);
+      return modelValue.value === opt.value;
+    }
+    const activeDescendantId = computed(() => {
+      if (!open.value || activeIndex.value < 0)
+        return void 0;
+      const opt = visibleOptions.value[activeIndex.value];
+      return opt ? `${listboxId}-opt-${flatIndexMap.value.get(opt)}` : void 0;
+    });
+    const {
+      positionStyle,
+      updatePosition,
+      startAutoReposition,
+      stopAutoReposition,
+      dispose: disposePositioning
+    } = usePositioning({
+      triggerRef,
+      panelRef,
+      placement: ref("bottom"),
+      offset: 4,
+      flip: true,
+      matchTriggerWidth: true
+    });
+    function onDocumentMouseDown(event) {
+      const target = event.target;
+      if (rootRef.value?.contains(target) || panelRef.value?.contains(target))
+        return;
+      select.close();
+    }
+    watch(
+      open,
+      (val) => {
+        if (val) {
+          void updatePosition();
+          startAutoReposition();
+          document.addEventListener("mousedown", onDocumentMouseDown, true);
+        } else {
+          stopAutoReposition();
+          document.removeEventListener("mousedown", onDocumentMouseDown, true);
+        }
+      },
+      { flush: "post" }
+    );
+    onMounted(() => {
+      if (open.value)
+        void updatePosition();
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", onDocumentMouseDown, true);
+      disposePositioning();
+      select.dispose();
+    });
+    function onTriggerKeydown(event) {
+      select.handleTriggerKeydown(event);
+    }
+    function onTriggerClick() {
+      select.toggleOpen();
+    }
+    function onTriggerFocus() {
+      if (props.filterable)
+        select.openPanel();
+      emit("focus");
+    }
+    function onInput(event) {
+      select.handleInput(event.target.value);
+    }
+    function onOptionMouseEnter(opt) {
+      const idx = flatIndexMap.value.get(opt);
+      if (idx !== void 0)
+        select.setActiveIndex(idx);
+    }
+    function onOptionClick(opt) {
+      select.selectOption(opt);
+    }
+    function onTriggerBlur() {
+      emit("blur");
+    }
+    function removeTag(value) {
+      const cur = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
+      const idx = cur.indexOf(value);
+      if (idx >= 0) {
+        cur.splice(idx, 1);
+        emit("update:modelValue", cur);
+        emit("change", cur);
+      }
+    }
+    const __returned__ = { props, emit, uid, listboxId, rootRef, triggerRef, panelRef, modelValue, optionsRef, filterable, remote, multiple, disabled, select, open, activeIndex, searchKeyword, groups, selectedOptions, hasValue, visibleOptions, inputValue, visibleTags, collapsedCount, flatIndexMap, isSelected, activeDescendantId, positionStyle, updatePosition, startAutoReposition, stopAutoReposition, disposePositioning, onDocumentMouseDown, onTriggerKeydown, onTriggerClick, onTriggerFocus, onInput, onOptionMouseEnter, onOptionClick, onTriggerBlur, removeTag, get QmIcon() {
+      return Icon;
+    }, get optionLabel() {
+      return optionLabel;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"role",
+	"tabindex",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-disabled",
+	"aria-label"
+];
+const _hoisted_2 = { class: "qm-select__tag-label" };
+const _hoisted_3 = [
+	"aria-label",
+	"disabled",
+	"onClick"
+];
+const _hoisted_4 = {
+	key: 0,
+	class: "qm-select__tag qm-select__tag--collapse"
+};
+const _hoisted_5 = [
+	"value",
+	"placeholder",
+	"aria-label",
+	"aria-expanded",
+	"aria-activedescendant",
+	"disabled"
+];
+const _hoisted_6 = [
+	"value",
+	"placeholder",
+	"aria-label",
+	"aria-expanded",
+	"aria-activedescendant",
+	"disabled"
+];
+const _hoisted_7 = {
+	class: "qm-select__arrow",
+	"aria-hidden": "true"
+};
+const _hoisted_8 = {
+	key: 0,
+	class: "qm-select__group-title",
+	role: "presentation"
+};
+const _hoisted_9 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onMouseenter",
+	"onClick"
+];
+const _hoisted_10 = {
+	key: 0,
+	class: "qm-select__empty qm-select__empty--loading",
+	role: "status"
+};
+const _hoisted_11 = {
+	key: 1,
+	class: "qm-select__empty"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			ref: "rootRef",
+			class: normalizeClass(["qm-select", { "qm-select--disabled": $setup.disabled }])
+		},
+		[
+			createCommentVNode(" 触发器 "),
+			createElementVNode("div", {
+				ref: "triggerRef",
+				class: normalizeClass(["qm-select__trigger", { "qm-select__trigger--filterable": $setup.filterable }]),
+				role: $setup.filterable ? undefined : "combobox",
+				tabindex: $setup.disabled ? -1 : 0,
+				"aria-expanded": $setup.filterable ? undefined : $setup.open,
+				"aria-controls": $setup.filterable ? undefined : $setup.listboxId,
+				"aria-activedescendant": $setup.filterable ? undefined : $setup.activeDescendantId,
+				"aria-disabled": $setup.filterable ? undefined : $setup.disabled || undefined,
+				"aria-label": $setup.filterable ? undefined : _ctx.placeholder,
+				onClick: $setup.onTriggerClick,
+				onKeydown: $setup.onTriggerKeydown,
+				onFocus: $setup.onTriggerFocus,
+				onBlur: $setup.onTriggerBlur
+			}, [
+				createCommentVNode(" 多选：tags + 输入 "),
+				$setup.multiple ? (openBlock(), createElementBlock(
+					Fragment,
+					{ key: 0 },
+					[
+						(openBlock(true), createElementBlock(
+							Fragment,
+							null,
+							renderList($setup.visibleTags, (tag) => {
+								return openBlock(), createElementBlock("span", {
+									key: tag.value,
+									class: "qm-select__tag"
+								}, [createElementVNode(
+									"span",
+									_hoisted_2,
+									toDisplayString($setup.optionLabel(tag)),
+									1
+									/* TEXT */
+								), createElementVNode("button", {
+									type: "button",
+									class: "qm-select__tag-remove",
+									"aria-label": `移除 ${$setup.optionLabel(tag)}`,
+									disabled: $setup.disabled,
+									onClick: withModifiers(($event) => $setup.removeTag(tag.value), ["stop"])
+								}, [createVNode($setup["QmIcon"], {
+									name: "close",
+									class: "qm-select__tag-remove-icon",
+									style: { "font-size": "10px" }
+								})], 8, _hoisted_3)]);
+							}),
+							128
+							/* KEYED_FRAGMENT */
+						)),
+						$setup.collapsedCount > 0 ? (openBlock(), createElementBlock(
+							"span",
+							_hoisted_4,
+							"+" + toDisplayString($setup.collapsedCount),
+							1
+							/* TEXT */
+						)) : createCommentVNode("v-if", true),
+						$setup.filterable ? (openBlock(), createElementBlock("input", {
+							key: 1,
+							class: "qm-select__input",
+							type: "text",
+							role: "combobox",
+							value: $setup.searchKeyword,
+							placeholder: $setup.selectedOptions.length ? "" : _ctx.placeholder,
+							"aria-label": _ctx.placeholder,
+							"aria-expanded": $setup.open,
+							"aria-controls": $setup.listboxId,
+							"aria-activedescendant": $setup.activeDescendantId,
+							disabled: $setup.disabled,
+							onInput: $setup.onInput,
+							onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+							onKeydown: $setup.onTriggerKeydown,
+							onFocus: $setup.onTriggerFocus,
+							onBlur: $setup.onTriggerBlur
+						}, null, 40, _hoisted_5)) : createCommentVNode("v-if", true)
+					],
+					64
+					/* STABLE_FRAGMENT */
+				)) : (openBlock(), createElementBlock(
+					Fragment,
+					{ key: 1 },
+					[createCommentVNode(" 单选 "), $setup.filterable ? (openBlock(), createElementBlock("input", {
+						key: 0,
+						class: "qm-select__input qm-select__input--single",
+						type: "text",
+						role: "combobox",
+						value: $setup.inputValue,
+						placeholder: $setup.hasValue ? "" : _ctx.placeholder,
+						"aria-label": _ctx.placeholder,
+						"aria-expanded": $setup.open,
+						"aria-controls": $setup.listboxId,
+						"aria-activedescendant": $setup.activeDescendantId,
+						disabled: $setup.disabled,
+						onInput: $setup.onInput,
+						onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+						onKeydown: $setup.onTriggerKeydown,
+						onFocus: $setup.onTriggerFocus,
+						onBlur: $setup.onTriggerBlur
+					}, null, 40, _hoisted_6)) : (openBlock(), createElementBlock(
+						"span",
+						{
+							key: 1,
+							class: normalizeClass(["qm-select__value", { "qm-select__value--placeholder": !$setup.hasValue }])
+						},
+						toDisplayString($setup.hasValue ? $setup.optionLabel($setup.selectedOptions[0]) : _ctx.placeholder),
+						3
+						/* TEXT, CLASS */
+					))],
+					64
+					/* STABLE_FRAGMENT */
+				)),
+				createCommentVNode(" 清除 / 箭头 "),
+				_ctx.clearable && $setup.hasValue && !$setup.disabled ? (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					class: "qm-select__clear",
+					"aria-label": "清除",
+					onClick: _cache[2] || (_cache[2] = withModifiers(($event) => $setup.select.clear(), ["stop"]))
+				}, [createVNode($setup["QmIcon"], {
+					name: "close",
+					class: "qm-select__clear-icon",
+					style: { "font-size": "12px" }
+				})])) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_7, [createVNode($setup["QmIcon"], {
+					name: "chevron-down",
+					class: "qm-select__arrow-icon",
+					style: { "font-size": "14px" }
+				})])
+			], 42, _hoisted_1),
+			createCommentVNode(" 弹出层（Teleport 到 body，fixed 定位 + 视口翻转） "),
+			(openBlock(), createBlock(Teleport, { to: "body" }, [$setup.open ? (openBlock(), createElementBlock(
+				"div",
+				{
+					key: 0,
+					id: $setup.listboxId,
+					ref: "panelRef",
+					class: "qm-select__panel",
+					style: normalizeStyle($setup.positionStyle),
+					role: "listbox"
+				},
+				[(openBlock(true), createElementBlock(
+					Fragment,
+					null,
+					renderList($setup.groups, (group) => {
+						return openBlock(), createElementBlock(
+							Fragment,
+							{ key: group.group ?? "__ungrouped__" },
+							[group.group ? (openBlock(), createElementBlock(
+								"div",
+								_hoisted_8,
+								toDisplayString(group.group),
+								1
+								/* TEXT */
+							)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(
+								Fragment,
+								null,
+								renderList(group.options, (opt) => {
+									return openBlock(), createElementBlock("div", {
+										id: `${$setup.listboxId}-opt-${$setup.flatIndexMap.get(opt)}`,
+										key: opt.value,
+										class: normalizeClass(["qm-select__option", {
+											"qm-select__option--selected": $setup.isSelected(opt),
+											"qm-select__option--active": $setup.flatIndexMap.get(opt) === $setup.activeIndex,
+											"qm-select__option--disabled": opt.disabled
+										}]),
+										role: "option",
+										"aria-selected": $setup.isSelected(opt),
+										"aria-disabled": opt.disabled || undefined,
+										onMouseenter: ($event) => $setup.onOptionMouseEnter(opt),
+										onClick: ($event) => $setup.onOptionClick(opt)
+									}, [renderSlot(_ctx.$slots, "option", { option: opt }, () => [createTextVNode(
+										toDisplayString($setup.optionLabel(opt)),
+										1
+										/* TEXT */
+									)])], 42, _hoisted_9);
+								}),
+								128
+								/* KEYED_FRAGMENT */
+							))],
+							64
+							/* STABLE_FRAGMENT */
+						);
+					}),
+					128
+					/* KEYED_FRAGMENT */
+				)), _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_10, " 加载中… ")) : $setup.visibleOptions.length === 0 ? (openBlock(), createElementBlock(
+					"div",
+					_hoisted_11,
+					toDisplayString(_ctx.emptyText),
+					1
+					/* TEXT */
+				)) : createCommentVNode("v-if", true)],
+				4
+				/* STYLE */
+			)) : createCommentVNode("v-if", true)]))
+		],
+		2
+		/* CLASS */
+	);
+}
+const Select = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\select\\select.vue"]]);
+
+export { Select as S, SEARCH_DEBOUNCE_MS as a, isMultipleValue as i, optionLabel as o, selectProps as s, useSelect as u };