@manohub/ui 0.6.0

package/dist/components/tree/index.js

@@ -0,0 +1,251 @@
+import { defineComponent, ref, computed, watch, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+import { QueryState } from "../query-state/index.js";
+const Tree = /* @__PURE__ */ defineComponent({
+  name: "Tree",
+  inheritAttrs: false,
+  props: {
+    nodes: {
+      type: Array,
+      required: true
+    },
+    /** 节点主键：字段名或取值函数 */
+    rowKey: {
+      type: [String, Function],
+      required: true
+    },
+    /** 标签字段名（默认 'label'） */
+    labelKey: {
+      type: String,
+      default: "label"
+    },
+    /** 子节点字段名（默认 'children'） */
+    childrenKey: {
+      type: String,
+      default: "children"
+    },
+    /** 受控选中（行主键值） */
+    selected: {
+      type: String,
+      default: void 0
+    },
+    onSelect: {
+      type: Function,
+      default: void 0
+    },
+    /** 节点附加内容（计数徽标等），渲染在标签之后 */
+    renderNode: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * 行尾操作区（新增 / 重命名 / 删除等）。
+     *
+     * **默认隐藏、行悬浮或行内获得焦点时显形**（触屏无 hover 能力时恒显形），点击**不冒泡**到 `onSelect`
+     * —— 与 `ListView.CardItem` 的 `actions` 同一口径（几何与显隐归组件，应用侧只给节点）。
+     *
+     * 与 `renderNode` 的分工：**常驻**的附加内容（计数徽标）走 `renderNode`；**可点**的行尾操作走这里。
+     */
+    renderActions: {
+      type: Function,
+      default: void 0
+    },
+    /** 尺寸档：md 舒适（行高 30）/ sm 紧凑（行高 28），与主题包 Tree 的 M/S 档一致 */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 受控展开集（传了就完全受控，内部不再自持） */
+    expandedKeys: {
+      type: Array,
+      default: void 0
+    },
+    /** 非受控展开初值 */
+    defaultExpandedKeys: {
+      type: Array,
+      default: () => []
+    },
+    /** 初始展开全部（首次进入就要看全层级时用；与 `defaultExpandedKeys` 互斥，它优先） */
+    defaultExpandAll: {
+      type: Boolean,
+      default: false
+    },
+    onExpandChange: {
+      type: Function,
+      default: void 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /** 空态文案 */
+    empty: {
+      type: String,
+      default: "暂无数据"
+    },
+    /** 空态操作按钮（如「新建」）；与 `onEmptyAction` 同时传才渲染 */
+    emptyActionText: {
+      type: String,
+      default: void 0
+    },
+    onEmptyAction: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * 错误态（truthy 即触发）。
+     *
+     * **构造器顺序同 `表格.error`：`String` 必须排在 `Boolean` 前** —— 顺序写反时，成功态传的
+     * 空字符串会被 Vue 的布尔转换判成 `true`，树永远停在错误态。
+     *
+     * 有它之前，消费方只能把错误文案塞进 `empty`：错误被渲染成空态语义（无错误插画、无重试入口），
+     * 用户看不出「是没数据还是加载挂了」。
+     */
+    error: {
+      type: [String, Boolean, Object, Number, Array],
+      default: void 0
+    },
+    /** 错误态标题（默认「加载失败」）；字符串错误原文会自动作为副文案显示 */
+    errorTitle: {
+      type: String,
+      default: "加载失败"
+    },
+    /** 错误态操作按钮（如「重试」）；与 `onErrorAction` 同时传才渲染 */
+    errorActionText: {
+      type: String,
+      default: void 0
+    },
+    onErrorAction: {
+      type: Function,
+      default: void 0
+    },
+    /** 强制重挂逃生舱（正常数据刷新不需要它） */
+    treeKey: {
+      type: [String, Number],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const nodeKey = (node) => typeof props.rowKey === "function" ? props.rowKey(node) : String(node[props.rowKey] ?? "");
+    const childrenOf = (node) => {
+      const children = node[props.childrenKey];
+      return Array.isArray(children) ? children : [];
+    };
+    const collectKeys = (nodes) => nodes.flatMap((node) => {
+      const key = typeof props.rowKey === "function" ? props.rowKey(node) : String(node[props.rowKey] ?? "");
+      const children = node[props.childrenKey];
+      return [key, ...Array.isArray(children) ? collectKeys(children) : []];
+    });
+    const innerExpanded = ref(props.defaultExpandAll ? collectKeys(props.nodes) : [...props.defaultExpandedKeys]);
+    const expandedSet = computed(() => new Set(props.expandedKeys ?? innerExpanded.value));
+    const isExpanded = (key) => expandedSet.value.has(key);
+    const toggleExpand = (key) => {
+      const next = new Set(expandedSet.value);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      const list = [...next];
+      if (props.expandedKeys === void 0) innerExpanded.value = list;
+      props.onExpandChange?.(list);
+    };
+    watch(() => props.defaultExpandedKeys, (next) => {
+      if (props.expandedKeys === void 0) innerExpanded.value = [...next];
+    });
+    const handleSelect = (node) => {
+      props.onSelect?.(node);
+    };
+    const flatten = () => {
+      const rows = [];
+      const walk = (list, depth) => {
+        for (const node of list) {
+          const key = nodeKey(node);
+          rows.push({
+            node,
+            depth,
+            key
+          });
+          if (isExpanded(key)) walk(childrenOf(node), depth + 1);
+        }
+      };
+      walk(props.nodes, 0);
+      return rows;
+    };
+    return () => {
+      if (props.loading) {
+        return createVNode(QueryState, {
+          "loading": true,
+          "skeletonRows": 6
+        }, null);
+      }
+      if (props.error) {
+        return createVNode(QueryState, {
+          "error": props.error,
+          "errorTitle": props.errorTitle,
+          "errorDescription": typeof props.error === "string" ? props.error : void 0,
+          "errorActionText": props.errorActionText,
+          "onErrorAction": props.onErrorAction
+        }, null);
+      }
+      if (props.nodes.length === 0) {
+        return createVNode(QueryState, {
+          "empty": props.empty,
+          "emptyActionText": props.emptyActionText,
+          "onEmptyAction": props.onEmptyAction
+        }, null);
+      }
+      const rows = flatten().map(({
+        node,
+        depth,
+        key
+      }) => {
+        const children = childrenOf(node);
+        const hasChildren = children.length > 0;
+        const expanded = isExpanded(key);
+        const selected = props.selected !== void 0 && props.selected === key;
+        return createVNode("div", {
+          "class": "mh-tree__row",
+          "key": key,
+          "role": "treeitem",
+          "aria-selected": selected,
+          "aria-expanded": hasChildren ? expanded : void 0,
+          "data-selected": selected ? "true" : void 0,
+          "data-level": depth,
+          "style": {
+            "--mh-tree-level": depth
+          },
+          "onClick": () => handleSelect(node)
+        }, [hasChildren ? createVNode("span", {
+          "class": "mh-tree__caret",
+          "data-expanded": expanded ? "true" : "false",
+          "onClick": (event) => {
+            event.stopPropagation();
+            toggleExpand(key);
+          }
+        }, [createVNode(Icon, {
+          "name": "chevron-down",
+          "class": "mh-tree__caret-icon"
+        }, null)]) : createVNode("span", {
+          "class": "mh-tree__caret mh-tree__caret--empty"
+        }, null), createVNode("span", {
+          "class": "mh-tree__label"
+        }, [String(node[props.labelKey] ?? "")]), props.renderNode ? createVNode("span", {
+          "class": "mh-tree__extra"
+        }, [props.renderNode(node)]) : null, props.renderActions ? createVNode("span", {
+          "class": "mh-tree__actions",
+          "onClick": (event) => event.stopPropagation()
+        }, [props.renderActions(node)]) : null]);
+      });
+      return createVNode("div", {
+        "key": props.treeKey,
+        "class": [attrs.class, "mh-tree", props.size === "sm" ? "mh-tree--compact" : ""].filter(Boolean).join(" "),
+        "role": "tree"
+      }, [rows, slots.default?.()]);
+    };
+  }
+});
+export {
+  Tree
+};

package/dist/components/upload/index.d.ts

@@ -0,0 +1,384 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export interface UploadFile {
+    name: string;
+    /** 字节数（渲染成 B / KB / MB） */
+    size?: number;
+    /** 下载 / 预览地址（未实现时留空） */
+    url?: string;
+    /** 缩略图地址（图片类文件） */
+    thumb?: string;
+}
+/** 字节数格式化（组件与消费方共用一份口径；缺 `size` 给空串，不编造 0 B） */
+export declare function formatFileSize(bytes?: number): string;
+/**
+ * 上传（**自绘**；拖拽 / 点击上传区 + 已传文件列表；缩略图走 `Upload.Thumbs`）。
+ *
+ * ## 两半分工
+ *
+ * - **零 JS 的那半**：`<label>` 擎着隐身的 `<input type="file">`，点整块即唤起系统文件选择（原生行为）；
+ * - **需要 JS 的那半**：拖拽（`dragenter/dragover/drop`，原生给不了 CSS 状态，故下发
+ *   `data-state="dragover"`）、选完文件后清空 `input.value`（否则再选同一个文件不触发 `change`）。
+ *
+ * ## 本件不发起任何请求、不管文件集合
+ *
+ * 文件列表是**受控**的（`files` 由消费方持有）：选择 / 拖入回调 `onSelect`、删除回调 `onRemove`，
+ * 本件不做上传、不自己增删数组（也就不会出现「组件以为删了、业务还留着」的错位）。
+ *
+ * @example 基本
+ * <Upload :files="list" hint="支持 PDF / XLS，单个不超过 20MB"
+ *   @select="(fs) => (list = [...list, ...fs.map(toItem)])"
+ *   @remove="(_, i) => list.splice(i, 1)" />
+ */
+export declare const Upload: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 已选文件（受控；本件只渲染与回调） */
+    files: {
+        type: PropType<UploadFile[]>;
+        default: () => never[];
+    };
+    /** 原生 accept（如 `.pdf,.xls`） */
+    accept: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 主文案（缺省「点击上传，或将文件拖到此处」） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 副文案（类型 / 大小上限这类提示） */
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 选择（点击或拖拽都会走这里）回调 */
+    /** 数量上限（`0` = 不限）：超出部分由本件在入口截断，并回调 `onExceed` */
+    maxCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 超出上限（参数是本次被拒的全部文件） */
+    onExceed: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    onSelect: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    /** 拖拽落文件回调（需要与点击区分时用） */
+    onDrop: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    /** 删除某一行回调 */
+    onRemove: {
+        type: PropType<(file: UploadFile, index: number) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 已选文件（受控；本件只渲染与回调） */
+    files: {
+        type: PropType<UploadFile[]>;
+        default: () => never[];
+    };
+    /** 原生 accept（如 `.pdf,.xls`） */
+    accept: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 主文案（缺省「点击上传，或将文件拖到此处」） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 副文案（类型 / 大小上限这类提示） */
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 选择（点击或拖拽都会走这里）回调 */
+    /** 数量上限（`0` = 不限）：超出部分由本件在入口截断，并回调 `onExceed` */
+    maxCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 超出上限（参数是本次被拒的全部文件） */
+    onExceed: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    onSelect: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    /** 拖拽落文件回调（需要与点击区分时用） */
+    onDrop: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    /** 删除某一行回调 */
+    onRemove: {
+        type: PropType<(file: UploadFile, index: number) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    multiple: boolean;
+    disabled: boolean;
+    title: string;
+    onDrop: (files: File[]) => void;
+    onSelect: (files: File[]) => void;
+    hint: string;
+    files: UploadFile[];
+    accept: string;
+    maxCount: number;
+    onExceed: (files: File[]) => void;
+    onRemove: (file: UploadFile, index: number) => void;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const UploadCompound: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        /** 已选文件（受控；本件只渲染与回调） */
+        files: {
+            type: PropType<UploadFile[]>;
+            default: () => never[];
+        };
+        /** 原生 accept（如 `.pdf,.xls`） */
+        accept: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 主文案（缺省「点击上传，或将文件拖到此处」） */
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 副文案（类型 / 大小上限这类提示） */
+        hint: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 选择（点击或拖拽都会走这里）回调 */
+        /** 数量上限（`0` = 不限）：超出部分由本件在入口截断，并回调 `onExceed` */
+        maxCount: {
+            type: NumberConstructor;
+            default: number;
+        };
+        /** 超出上限（参数是本次被拒的全部文件） */
+        onExceed: {
+            type: PropType<(files: File[]) => void>;
+            default: undefined;
+        };
+        onSelect: {
+            type: PropType<(files: File[]) => void>;
+            default: undefined;
+        };
+        /** 拖拽落文件回调（需要与点击区分时用） */
+        onDrop: {
+            type: PropType<(files: File[]) => void>;
+            default: undefined;
+        };
+        /** 删除某一行回调 */
+        onRemove: {
+            type: PropType<(file: UploadFile, index: number) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        multiple: boolean;
+        disabled: boolean;
+        title: string;
+        onDrop: (files: File[]) => void;
+        onSelect: (files: File[]) => void;
+        hint: string;
+        files: UploadFile[];
+        accept: string;
+        maxCount: number;
+        onExceed: (files: File[]) => void;
+        onRemove: (file: UploadFile, index: number) => void;
+    }, true, {}, SlotsType<{
+        default?: () => VNodeChild;
+    }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        /** 已选文件（受控；本件只渲染与回调） */
+        files: {
+            type: PropType<UploadFile[]>;
+            default: () => never[];
+        };
+        /** 原生 accept（如 `.pdf,.xls`） */
+        accept: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        multiple: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 主文案（缺省「点击上传，或将文件拖到此处」） */
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 副文案（类型 / 大小上限这类提示） */
+        hint: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 选择（点击或拖拽都会走这里）回调 */
+        /** 数量上限（`0` = 不限）：超出部分由本件在入口截断，并回调 `onExceed` */
+        maxCount: {
+            type: NumberConstructor;
+            default: number;
+        };
+        /** 超出上限（参数是本次被拒的全部文件） */
+        onExceed: {
+            type: PropType<(files: File[]) => void>;
+            default: undefined;
+        };
+        onSelect: {
+            type: PropType<(files: File[]) => void>;
+            default: undefined;
+        };
+        /** 拖拽落文件回调（需要与点击区分时用） */
+        onDrop: {
+            type: PropType<(files: File[]) => void>;
+            default: undefined;
+        };
+        /** 删除某一行回调 */
+        onRemove: {
+            type: PropType<(file: UploadFile, index: number) => void>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        multiple: boolean;
+        disabled: boolean;
+        title: string;
+        onDrop: (files: File[]) => void;
+        onSelect: (files: File[]) => void;
+        hint: string;
+        files: UploadFile[];
+        accept: string;
+        maxCount: number;
+        onExceed: (files: File[]) => void;
+        onRemove: (file: UploadFile, index: number) => void;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    /** 已选文件（受控；本件只渲染与回调） */
+    files: {
+        type: PropType<UploadFile[]>;
+        default: () => never[];
+    };
+    /** 原生 accept（如 `.pdf,.xls`） */
+    accept: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 主文案（缺省「点击上传，或将文件拖到此处」） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 副文案（类型 / 大小上限这类提示） */
+    hint: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 选择（点击或拖拽都会走这里）回调 */
+    /** 数量上限（`0` = 不限）：超出部分由本件在入口截断，并回调 `onExceed` */
+    maxCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 超出上限（参数是本次被拒的全部文件） */
+    onExceed: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    onSelect: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    /** 拖拽落文件回调（需要与点击区分时用） */
+    onDrop: {
+        type: PropType<(files: File[]) => void>;
+        default: undefined;
+    };
+    /** 删除某一行回调 */
+    onRemove: {
+        type: PropType<(file: UploadFile, index: number) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    multiple: boolean;
+    disabled: boolean;
+    title: string;
+    onDrop: (files: File[]) => void;
+    onSelect: (files: File[]) => void;
+    hint: string;
+    files: UploadFile[];
+    accept: string;
+    maxCount: number;
+    onExceed: (files: File[]) => void;
+    onRemove: (file: UploadFile, index: number) => void;
+}, {}, string, SlotsType<{
+    default?: () => VNodeChild;
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    Thumbs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        files: {
+            type: PropType<UploadFile[]>;
+            default: () => never[];
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        files: {
+            type: PropType<UploadFile[]>;
+            default: () => never[];
+        };
+    }>> & Readonly<{}>, {
+        files: UploadFile[];
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type UploadCompoundType = typeof UploadCompound;