@manohub/ui 0.7.0 → 0.8.0

package/dist/components/select/select-tree.js

@@ -0,0 +1,263 @@
+import { defineComponent, ref, computed, watch, createVNode, createTextVNode, Fragment } from "vue";
+import { Tree } from "../tree/index.js";
+import { SelectPanel } from "./select-panel.js";
+import { SelectTrigger } from "./select-trigger.js";
+import { createSelectPanelId, createTriggerKeydown, showPanel, hidePanel } from "./select-shared.js";
+import { filterTreeNodes, findTreeNode, treeLabel, splitHighlight, treeChildren, treeNodeKey } from "./select-tree-filter.js";
+const SelectTree = /* @__PURE__ */ defineComponent({
+  name: "SelectTree",
+  inheritAttrs: false,
+  props: {
+    /** 树数据（与 `Tree` 同一个 `TreeNode` 类型，不另造节点形状） */
+    nodes: {
+      type: Array,
+      required: true
+    },
+    /** 节点主键：字段名或取值函数（与 `Tree` 同义） */
+    rowKey: {
+      type: [String, Function],
+      required: true
+    },
+    /** 标签字段名（默认 'label'） */
+    labelKey: {
+      type: String,
+      default: "label"
+    },
+    /** 子节点字段名（默认 'children'） */
+    childrenKey: {
+      type: String,
+      default: "children"
+    },
+    /** 受控值（选中叶子的主键；树选择只单选） */
+    modelValue: {
+      type: String,
+      default: void 0
+    },
+    /** 非受控初始值 */
+    defaultValue: {
+      type: String,
+      default: void 0
+    },
+    placeholder: {
+      type: String,
+      default: "请选择"
+    },
+    /** 搜索：`true` 强制开；不给时节点总数多于 8 自动开（与 `Select` 同口径） */
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    /** 自定义命中判定（缺省：标签区分大小写地包含关键词） */
+    filterNode: {
+      type: Function,
+      default: void 0
+    },
+    /** 命中文本是否高亮（默认开） */
+    highlight: {
+      type: Boolean,
+      default: true
+    },
+    /** 受控展开集（传了就完全受控；**过滤态下组件强制全展**，不受本 prop 约束） */
+    expandedKeys: {
+      type: Array,
+      default: void 0
+    },
+    /** 非受控展开初值 */
+    defaultExpandedKeys: {
+      type: Array,
+      default: () => []
+    },
+    /** 初始展开全部（与 `defaultExpandedKeys` 互斥，它优先） */
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    /** 展开集变化回调 */
+    onExpandChange: {
+      type: Function,
+      default: void 0
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 加载中（面板里出一行提示，不渲染树） */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    emptyText: {
+      type: String,
+      default: "暂无数据"
+    },
+    /** 尺寸档（24 / 28 / 32） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 校验状态（红 / 黄；与 `Input` 同一词表） */
+    status: {
+      type: String,
+      default: void 0
+    },
+    /** 值变更回调（选中叶子的主键） */
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 搜索词变更（远程换数据用；本地过滤不受它影响） */
+    onSearch: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (v) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const panelId = createSelectPanelId();
+    const panelRef = ref(null);
+    const inner = ref(props.defaultValue);
+    const keyword = ref("");
+    const keyOf = (node) => treeNodeKey(node, props.rowKey);
+    const childrenOf = (node) => treeChildren(node, props.childrenKey);
+    const current = computed(() => props.modelValue ?? inner.value);
+    const hasValue = computed(() => current.value !== void 0 && current.value !== "");
+    const nodeCount = computed(() => {
+      let count = 0;
+      const walk = (list) => {
+        for (const node of list) {
+          count += 1;
+          walk(childrenOf(node));
+        }
+      };
+      walk(props.nodes);
+      return count;
+    });
+    const showSearch = computed(() => props.searchable || nodeCount.value > 8);
+    const collectKeys = (list) => list.flatMap((node) => [keyOf(node), ...collectKeys(childrenOf(node))]);
+    const innerExpanded = ref(props.defaultExpandAll ? collectKeys(props.nodes) : [...props.defaultExpandedKeys]);
+    watch(() => props.defaultExpandedKeys, (next) => {
+      if (props.expandedKeys === void 0) innerExpanded.value = [...next];
+    });
+    const filtered = computed(() => keyword.value ? filterTreeNodes(props.nodes, {
+      rowKey: props.rowKey,
+      childrenKey: props.childrenKey,
+      labelKey: props.labelKey,
+      keyword: keyword.value,
+      match: props.filterNode
+    }) : void 0);
+    const visibleNodes = computed(() => filtered.value?.nodes ?? props.nodes);
+    const expandedKeys = computed(() => filtered.value ? filtered.value.keys : props.expandedKeys ?? innerExpanded.value);
+    const handleExpandChange = (keys) => {
+      if (props.expandedKeys === void 0) innerExpanded.value = keys;
+      props.onExpandChange?.(keys);
+    };
+    const displayLabel = computed(() => {
+      if (!hasValue.value) return void 0;
+      const found = findTreeNode(props.nodes, String(current.value), {
+        rowKey: props.rowKey,
+        childrenKey: props.childrenKey
+      });
+      return found ? treeLabel(found, props.labelKey) : String(current.value);
+    });
+    const commit = (value) => {
+      if (props.modelValue === void 0) inner.value = value;
+      emit("update:modelValue", value);
+      props.onChange?.(value);
+    };
+    const hide = () => hidePanel(panelRef.value);
+    const toggleExpand = (key) => {
+      const next = new Set(expandedKeys.value);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      handleExpandChange([...next]);
+    };
+    const pick = (node) => {
+      if (childrenOf(node).length > 0) {
+        toggleExpand(keyOf(node));
+        return;
+      }
+      commit(keyOf(node));
+      hide();
+    };
+    const clear = () => commit("");
+    const onTriggerKeydown = createTriggerKeydown({
+      clearable: props.clearable,
+      disabled: props.disabled,
+      clear,
+      openPanel: () => showPanel(panelRef.value)
+      /* 有意不给 `focusFirst`：树的行是 `div`、没有 tabindex，面板内不做 ↑↓ 行导航 */
+    });
+    const renderHitLabel = (node) => createVNode(Fragment, null, [splitHighlight(treeLabel(node, props.labelKey), keyword.value).map((segment, index) => segment.hit ? createVNode("span", {
+      "key": index,
+      "class": "mh-select__hit"
+    }, [segment.text]) : segment.text)]);
+    return () => {
+      const highlightLabel = props.highlight && !!keyword.value ? renderHitLabel : void 0;
+      return createVNode("div", {
+        "class": ["mh-popup-host", attrs.class].filter(Boolean).join(" "),
+        "style": attrs.style
+      }, [createVNode(SelectTrigger, {
+        "panelId": panelId,
+        "size": props.size,
+        "status": props.status,
+        "disabled": props.disabled,
+        "clearable": props.clearable,
+        "hasValue": hasValue.value,
+        "placeholder": props.placeholder,
+        "label": displayLabel.value,
+        "onKeydown": onTriggerKeydown,
+        "onClear": clear
+      }, null), createVNode(SelectPanel, {
+        "id": panelId,
+        "elementRef": panelRef,
+        "searchable": showSearch.value,
+        "keyword": keyword.value,
+        "onKeyword": (value) => {
+          keyword.value = value;
+          props.onSearch?.(value);
+        }
+      }, {
+        default: () => {
+          if (props.loading) {
+            return createVNode("span", {
+              "class": "mh-select__option mh-select__option--hint"
+            }, [createTextVNode("加载中…")]);
+          }
+          if (visibleNodes.value.length === 0) {
+            const custom = slots.empty?.();
+            return custom !== void 0 && custom !== null ? custom : createVNode("span", {
+              "class": "mh-select__option mh-select__option--empty"
+            }, [props.emptyText]);
+          }
+          return createVNode("div", {
+            "class": "mh-select__tree"
+          }, [createVNode(Tree, {
+            "nodes": visibleNodes.value,
+            "rowKey": props.rowKey,
+            "labelKey": props.labelKey,
+            "childrenKey": props.childrenKey,
+            "selected": current.value === "" ? void 0 : current.value,
+            "expandedKeys": expandedKeys.value,
+            "onExpandChange": handleExpandChange,
+            "onSelect": pick,
+            "renderLabel": highlightLabel
+          }, null)]);
+        }
+      })]);
+    };
+  }
+});
+export {
+  SelectTree
+};

package/dist/components/select/select-trigger.d.ts

@@ -0,0 +1,132 @@
+import { type PropType, type VNodeChild } from 'vue';
+import { type InputStatus } from '../input';
+import type { ControlSize } from '../control-size';
+export declare const SelectTrigger: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 面板 id（`popovertarget` 的目标，由 `createSelectPanelId()` 产出的全页唯一 id） */
+    panelId: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** 尺寸档（24 / 28 / 32）：框高与字号归输入面，本件只透传 */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 校验状态（红 / 黄；与输入框同一词表） */
+    status: {
+        type: PropType<InputStatus>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 显式判定清除位显隐（多选的值是数组、单选显示的是 label，都没有「一个字符串模型」可喂） */
+    hasValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 多选形态（控件上多一个 `mh-select--multiple`，标签不换行） */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 单选显示文本（无值时不渲染它，改渲染 `placeholder`） */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 触发器上的键盘契约（`createTriggerKeydown()` 产出，两件同源） */
+    onKeydown: {
+        type: PropType<(event: KeyboardEvent) => void>;
+        default: undefined;
+    };
+    /** 清除位被点击（输入面的内建清除位回调；本件只把它转给消费方） */
+    onClear: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 值区自定义渲染（多选标签收纳用；不给则走单选那一行） */
+    renderValue: {
+        type: PropType<() => VNodeChild>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 面板 id（`popovertarget` 的目标，由 `createSelectPanelId()` 产出的全页唯一 id） */
+    panelId: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** 尺寸档（24 / 28 / 32）：框高与字号归输入面，本件只透传 */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 校验状态（红 / 黄；与输入框同一词表） */
+    status: {
+        type: PropType<InputStatus>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 显式判定清除位显隐（多选的值是数组、单选显示的是 label，都没有「一个字符串模型」可喂） */
+    hasValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 多选形态（控件上多一个 `mh-select--multiple`，标签不换行） */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 单选显示文本（无值时不渲染它，改渲染 `placeholder`） */
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 触发器上的键盘契约（`createTriggerKeydown()` 产出，两件同源） */
+    onKeydown: {
+        type: PropType<(event: KeyboardEvent) => void>;
+        default: undefined;
+    };
+    /** 清除位被点击（输入面的内建清除位回调；本件只把它转给消费方） */
+    onClear: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 值区自定义渲染（多选标签收纳用；不给则走单选那一行） */
+    renderValue: {
+        type: PropType<() => VNodeChild>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: ControlSize;
+    multiple: boolean;
+    disabled: boolean;
+    label: string;
+    onKeydown: (event: KeyboardEvent) => void;
+    placeholder: string;
+    status: InputStatus;
+    clearable: boolean;
+    hasValue: boolean;
+    onClear: () => void;
+    renderValue: () => VNodeChild;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/select/select-trigger.js

@@ -0,0 +1,101 @@
+import { defineComponent, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+import { Input } from "../input/index.js";
+const SelectTrigger = /* @__PURE__ */ defineComponent({
+  name: "SelectTrigger",
+  inheritAttrs: false,
+  props: {
+    /** 面板 id（`popovertarget` 的目标，由 `createSelectPanelId()` 产出的全页唯一 id） */
+    panelId: {
+      type: String,
+      required: true
+    },
+    /** 尺寸档（24 / 28 / 32）：框高与字号归输入面，本件只透传 */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 校验状态（红 / 黄；与输入框同一词表） */
+    status: {
+      type: String,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    /** 显式判定清除位显隐（多选的值是数组、单选显示的是 label，都没有「一个字符串模型」可喂） */
+    hasValue: {
+      type: Boolean,
+      default: false
+    },
+    /** 多选形态（控件上多一个 `mh-select--multiple`，标签不换行） */
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: "请选择"
+    },
+    /** 单选显示文本（无值时不渲染它，改渲染 `placeholder`） */
+    label: {
+      type: String,
+      default: void 0
+    },
+    /** 触发器上的键盘契约（`createTriggerKeydown()` 产出，两件同源） */
+    onKeydown: {
+      type: Function,
+      default: void 0
+    },
+    /** 清除位被点击（输入面的内建清除位回调；本件只把它转给消费方） */
+    onClear: {
+      type: Function,
+      default: void 0
+    },
+    /** 值区自定义渲染（多选标签收纳用；不给则走单选那一行） */
+    renderValue: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const controlClass = () => ["mh-select", props.multiple ? "mh-select--multiple" : "", props.size === "md" ? "" : `mh-select--${props.size}`].filter(Boolean).join(" ");
+    return () => createVNode(Input, {
+      "as": "button",
+      "size": props.size,
+      "status": props.status,
+      "disabled": props.disabled,
+      "clearable": props.clearable,
+      "hasValue": props.hasValue,
+      "class": "mh-popup-anchor mh-select-host",
+      "controlClass": controlClass(),
+      "controlAttrs": {
+        popovertarget: props.panelId,
+        "aria-haspopup": "listbox",
+        /* 开合态由原生 popover 与 popup.css 的箭头转向承担，本件不维护第二份；
+           恒定 'false' 是既有口径（输入面的触发器形态不跟踪 popover 的开关状态） */
+        "aria-expanded": "false",
+        onKeydown: props.onKeydown
+      },
+      "onChange": () => props.onClear?.()
+    }, {
+      default: () => props.renderValue ? props.renderValue() : createVNode("span", {
+        "class": ["mh-select__value", props.hasValue ? "" : "mh-select__value--placeholder"].filter(Boolean).join(" ")
+      }, [props.hasValue ? props.label : props.placeholder]),
+      /* 箭头沿用输入框的右侧图标位（槽内尺寸收敛见 `select.css` 的 `.mh-select-host` 一节）；
+         展开转向由 `popup.css` 的 `.mh-popup-caret` 承担（含触发器进表壳后的兄弟档） */
+      suffix: () => createVNode(Icon, {
+        "name": "chevron-down",
+        "class": "mh-select__caret mh-popup-caret"
+      }, null)
+    });
+  }
+});
+export {
+  SelectTrigger
+};