@manohub/ui 0.6.0

package/dist/components/list-view/index.js

@@ -0,0 +1,221 @@
+import { defineComponent, createVNode, h } from "vue";
+import { Card } from "../card/index.js";
+import { QueryState } from "../query-state/index.js";
+const ListViewCardItem = /* @__PURE__ */ defineComponent({
+  name: "ListViewCardItem",
+  inheritAttrs: false,
+  props: {
+    icon: {
+      type: [String, Function, Object],
+      default: void 0
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      default: void 0
+    },
+    description: {
+      type: String,
+      default: void 0
+    },
+    tags: {
+      type: Array,
+      default: void 0
+    },
+    status: {
+      type: Object,
+      default: void 0
+    },
+    /** 尾部左侧自定义内容（如状态徽标）；与 `footer` 插槽等价 */
+    footer: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    /** 尾部右侧统计（如下载量）；渲染在操作位之前 */
+    extra: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    /** 操作位：**默认隐藏、卡片悬浮（或卡内获得焦点）时显形**；点击不冒泡到整卡 */
+    actions: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots
+  }) {
+    const renderSlotValue = (slotFn, propValue) => {
+      if (slotFn) return slotFn();
+      if (typeof propValue === "function") return propValue();
+      return propValue;
+    };
+    const renderIcon = () => {
+      if (props.icon === void 0 || props.icon === null) return null;
+      if (typeof props.icon === "function") return props.icon();
+      return createVNode("img", {
+        "class": "mh-list-view__card-icon-img",
+        "src": String(props.icon),
+        "alt": ""
+      }, null);
+    };
+    return () => {
+      const footer = renderSlotValue(slots.footer, props.footer);
+      const extra = renderSlotValue(slots.extra, props.extra);
+      const actions = renderSlotValue(slots.actions, props.actions);
+      const tags = props.tags ?? [];
+      const hasFoot = !!footer || !!extra || !!actions || tags.length > 0;
+      const head = createVNode("div", {
+        "class": "mh-list-view__card-head"
+      }, [props.icon ? createVNode("span", {
+        "class": "mh-list-view__card-icon"
+      }, [renderIcon()]) : null, createVNode("span", {
+        "class": "mh-list-view__card-title-block"
+      }, [createVNode("span", {
+        "class": "mh-list-view__card-title"
+      }, [props.title]), props.subtitle ? createVNode("span", {
+        "class": "mh-list-view__card-subtitle"
+      }, [props.subtitle]) : null]), props.status ? createVNode("span", {
+        "class": ["mh-list-view__card-status", `mh-list-view__card-status--${props.status.tone ?? "primary"}`].join(" ")
+      }, [props.status.dot ? createVNode("span", {
+        "class": "mh-list-view__card-status-dot"
+      }, null) : null, props.status.label]) : null]);
+      const description = props.description ? createVNode("div", {
+        "class": "mh-list-view__card-desc"
+      }, [props.description]) : null;
+      const foot = hasFoot ? createVNode("div", {
+        "class": "mh-list-view__card-foot"
+      }, [createVNode("span", {
+        "class": "mh-list-view__card-foot-main"
+      }, [footer, tags.length > 0 ? createVNode("span", {
+        "class": "mh-list-view__card-tags"
+      }, [tags.map((tag) => createVNode("span", {
+        "class": "mh-list-view__card-tag",
+        "key": tag
+      }, [tag]))]) : null]), createVNode("span", {
+        "class": "mh-list-view__card-foot-side"
+      }, [extra ? createVNode("span", {
+        "class": "mh-list-view__card-extra"
+      }, [extra]) : null, actions ? createVNode("span", {
+        "class": "mh-list-view__card-actions",
+        "onClick": (event) => event.stopPropagation()
+      }, [actions]) : null])]) : null;
+      return h(Card, {
+        interactive: true,
+        class: "mh-list-view__card",
+        onClick: props.onClick
+      }, {
+        default: () => [head, description, foot].filter(Boolean)
+      });
+    };
+  }
+});
+const ListViewRoot = /* @__PURE__ */ defineComponent({
+  name: "ListView",
+  inheritAttrs: false,
+  props: {
+    minItemWidth: {
+      type: Number,
+      default: void 0
+    },
+    /** 固定列数（>0 时不再按容器宽度自适应；窄屏要锁死列数时用） */
+    columns: {
+      type: Number,
+      default: 0
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: [String, Boolean, Object, Number, Array],
+      default: void 0
+    },
+    empty: {
+      type: [Boolean, String],
+      default: false
+    },
+    emptyDescription: {
+      type: String,
+      default: void 0
+    },
+    emptyActionText: {
+      type: String,
+      default: void 0
+    },
+    onEmptyAction: {
+      type: Function,
+      default: void 0
+    },
+    errorTitle: {
+      type: String,
+      default: void 0
+    },
+    errorDescription: {
+      type: String,
+      default: void 0
+    },
+    errorActionText: {
+      type: String,
+      default: void 0
+    },
+    onErrorAction: {
+      type: Function,
+      default: void 0
+    },
+    skeletonCount: {
+      type: Number,
+      default: 8
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      if (props.error || props.empty) {
+        return createVNode(QueryState, {
+          "error": props.error,
+          "errorTitle": props.errorTitle,
+          "errorDescription": props.errorDescription ?? (typeof props.error === "string" ? props.error : void 0),
+          "errorActionText": props.errorActionText,
+          "onErrorAction": props.onErrorAction,
+          "empty": props.empty,
+          "emptyDescription": props.emptyDescription,
+          "emptyActionText": props.emptyActionText,
+          "onEmptyAction": props.onEmptyAction
+        }, null);
+      }
+      const style = [attrs.style, props.minItemWidth === void 0 ? void 0 : {
+        "--mh-list-view-min": `${props.minItemWidth}px`
+      }, props.columns > 0 ? {
+        "--mh-list-view-columns": String(props.columns)
+      } : void 0];
+      return createVNode("div", {
+        "class": ["mh-list-view", props.columns > 0 ? "mh-list-view--fixed" : "", attrs.class].filter(Boolean).join(" "),
+        "style": style
+      }, [props.loading ? Array.from({
+        length: props.skeletonCount
+      }).map((_, index) => createVNode("div", {
+        "class": "mh-list-view__skeleton",
+        "key": index
+      }, null)) : slots.default?.()]);
+    };
+  }
+});
+const ListView = Object.assign(ListViewRoot, {
+  CardItem: ListViewCardItem
+});
+export {
+  ListView,
+  ListViewCardItem
+};

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

@@ -0,0 +1,77 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+/** 覆盖档：`area` = 铺满最近定位祖先（区域级）；`screen` = 铺满视口（全屏）。不传即行内居中 */
+export type LoadingOverlay = 'area' | 'screen';
+export interface LoadingProps {
+    /** 文案（缺省只有转圈；复杂内容走默认插槽） */
+    text?: string;
+    /** 尺寸档（转圈直径按全局图标档派生） */
+    size?: ControlSize;
+    /** 覆盖档；不传即行内居中（与文字并排的小转圈） */
+    overlay?: LoadingOverlay;
+}
+/**
+ * 加载态（转圈 + 可选文案；三种形态）。
+ *
+ * ## 三态与三个不同的东西
+ *
+ * | 形态 | 用什么 | 为什么不是本件 |
+ * | --- | --- | --- |
+ * | 区域/页面的加载中 | `QueryState` 的 `loading` | 那件带骨架屏与三态切换，是「容器」 |
+ * | 内容占位 | `Skeleton` | 骨架屏表达「这里将出现什么」，不是「正在忙」 |
+ * | **正在忙、请等待** | 本件 | 遮罩 + 转圈，**拦住交互**才是它的职责 |
+ *
+ * ## 覆盖档必须由消费方给出定位上下文
+ *
+ * `overlay="area"` 走 `position: absolute`：它铺的是**最近的定位祖先**，所以宿主元素要有
+ * `position: relative`（`Panel.Body` / `Card.Body` 这类件自带）。宿主没有定位上下文时它会跑到
+ * 更外层去 —— 这是 CSS 的规则，不是本件的缺陷；界面上看不出错位但覆盖范围不对时，先查这一条。
+ *
+ * `overlay="screen"` 走 `position: fixed`：铺整个视口，层级压在 `Toast` 堆叠（1080）之上、
+ * 模态层（原生 `<dialog>` 的 top layer）之下。
+ *
+ * 转圈走 `@manohub/icon` 的 `loading` 字形 + CSS 旋转（**不手绘 SVG**）；尺寸按全局图标档
+ * `--ui-font-icon` 用 `calc()` 派生，换主题时与其它图标一起缩放。
+ *
+ * @example 行内：小转圈 + 文案
+ * <Loading text="加载中" />
+ *
+ * @example 区域遮罩（宿主需自带 position: relative）
+ * <Panel.Body><Loading overlay="area" text="保存中" /></Panel.Body>
+ *
+ * @example 全屏遮罩
+ * <Loading overlay="screen" text="正在导入，请勿关闭页面" />
+ */
+export declare const Loading: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    overlay: {
+        type: PropType<LoadingOverlay>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    overlay: {
+        type: PropType<LoadingOverlay>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    overlay: LoadingOverlay;
+    text: string;
+    size: ControlSize;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/loading/index.js

@@ -0,0 +1,40 @@
+import { defineComponent, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+const Loading = /* @__PURE__ */ defineComponent({
+  name: "Loading",
+  inheritAttrs: false,
+  props: {
+    text: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    overlay: {
+      type: String,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-loading", props.size === "md" ? "" : `mh-loading--${props.size}`, props.overlay ? `mh-loading--${props.overlay}` : "", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style,
+      "role": "status",
+      "aria-live": "polite"
+    }, [createVNode(Icon, {
+      "name": "loading",
+      "class": "mh-loading__spinner"
+    }, null), props.text || slots.default ? createVNode("span", {
+      "class": "mh-loading__text"
+    }, [slots.default ? slots.default() : props.text]) : null]);
+  }
+});
+export {
+  Loading
+};

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

@@ -0,0 +1,293 @@
+import { type PropType } from 'vue';
+import { type TreeNode } from '../tree';
+/** 导航形态：`tree` 层级导航（可展开）/ `list` 扁平导航 */
+export type NavVariant = 'tree' | 'list';
+/**
+ * 侧栏导航（单列、固定宽、内滚）：**`tree` / `list` 两态，行渲染完全复用 `Tree`**。
+ *
+ * ## 为什么不是 `Tree` 的一个 prop
+ *
+ * `Tree` 是**展示件**（层级数据怎么显示）；导航是另一种语义：选中驱动右侧内容、单列固定宽、
+ * 外壳自己滚动。两者对**行**的几何要求完全一致，所以本件不重写行渲染 —— 数据、展开态、选中态、
+ * 缩进、三态全部交给 `Tree`，改一处两处同时生效（不存在第二棵树）。
+ * 两态的差异只有一处：`variant="list"` 隐藏箭头占位（扁平导航没有层级，不需要那一段缩进）。
+ *
+ * ## 滚动归属
+ *
+ * 根件 `overflow: hidden`，**只有 `mh-nav__body` 滚**（与 `Panel.Body` 同一口径）：
+ * 侧栏滚动不再由应用侧写 `overflow-y: auto` 的应用侧类来顶。
+ *
+ * ## 宽度
+ *
+ * 缺省**填满所在栏**（`width: var(--mh-nav-width, 100%)`）：列宽由 `Page.Split` 的侧栏列
+ * 或外层布局决定，导航件不重复锁一个可能与栏宽不符的数；独立使用需要固定宽时传 `width`（px 数字）。
+ *
+ * ## 行尾操作
+ *
+ * `renderActions` 直接透传给 `Tree`：默认隐藏、行悬浮或行内获得焦点时显形、点击不冒泡（§4.16）。
+ * 应用侧只给节点，不要自己写显隐 CSS，也不要把它塞进 `renderNode`（那是常驻附加内容）。
+ *
+ * @example 分类导航树（选中驱动右侧 + 行尾管理操作）
+ * <Nav variant="tree" nodes={categoryNodes.value} rowKey="id" labelKey="name" width={220}
+ *   selected={categoryId.value} onSelect={(node) => (categoryId.value = node.id)}
+ *   expandedKeys={expandedKeys.value} onExpandChange={(keys) => (expandedKeys.value = keys)}
+ *   loading={query.isPending.value} error={query.isError.value} empty="暂无分类"
+ *   renderActions={(node) => <Button title="删除" onClick={() => removeCategory(node.id)} />} />
+ */
+export declare const Nav: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 导航形态：`tree`（默认，层级 + 箭头）/ `list`（扁平，无箭头占位） */
+    variant: {
+        type: PropType<NavVariant>;
+        default: string;
+    };
+    /** 导航节点（`list` 态传扁平数组）；结构与 `Tree` 同 */
+    nodes: {
+        type: PropType<TreeNode[]>;
+        required: true;
+    };
+    /** 节点主键：字段名或取值函数 */
+    rowKey: {
+        type: PropType<string | ((node: TreeNode) => string)>;
+        required: true;
+    };
+    /** 标签字段名（默认 'label'） */
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 子节点字段名（默认 'children'） */
+    childrenKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 受控选中（行主键值） */
+    selected: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 选中回调：给的是**节点对象**（不是主键值），口径同 `Tree` */
+    onSelect: {
+        type: PropType<(node: TreeNode) => void>;
+        default: undefined;
+    };
+    /** 受控展开集（传了就完全受控） */
+    expandedKeys: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** 非受控展开初值 */
+    defaultExpandedKeys: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    onExpandChange: {
+        type: PropType<(keys: string[]) => void>;
+        default: undefined;
+    };
+    /** 行尾操作区（新增 / 重命名 / 删除…）：悬浮显形 + 点击不冒泡，见 `Tree.renderActions` */
+    renderActions: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
+    /** 侧栏标题（可选；不传则只有导航体） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 侧栏宽度（px 数字）：只下发 `--mh-nav-width`；**不传则填满所在栏**（列宽归 `Page.Split` / 外层布局） */
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** 尺寸档：`md`（行高 30，默认）/ `sm`（紧凑 28） */
+    size: {
+        type: PropType<"md" | "sm">;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 空态文案 */
+    empty: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 空态操作按钮（如「新建」）；与 `onEmptyAction` 同时传才渲染 */
+    emptyActionText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onEmptyAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /**
+     * 错误态（truthy 即触发）。
+     *
+     * **构造器顺序同 `Tree.error`：`String` 必须排在 `Boolean` 前** —— 顺序写反时，成功态传的
+     * 空字符串会被 Vue 的布尔转换判成 `true`，侧栏永远停在错误态。
+     */
+    error: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** 错误态标题（默认「加载失败」） */
+    errorTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 错误态操作按钮（如「重试」）；与 `onErrorAction` 同时传才渲染 */
+    errorActionText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onErrorAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 右侧分隔线（侧栏与内容区之间；贴在页面容器里时用） */
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 导航形态：`tree`（默认，层级 + 箭头）/ `list`（扁平，无箭头占位） */
+    variant: {
+        type: PropType<NavVariant>;
+        default: string;
+    };
+    /** 导航节点（`list` 态传扁平数组）；结构与 `Tree` 同 */
+    nodes: {
+        type: PropType<TreeNode[]>;
+        required: true;
+    };
+    /** 节点主键：字段名或取值函数 */
+    rowKey: {
+        type: PropType<string | ((node: TreeNode) => string)>;
+        required: true;
+    };
+    /** 标签字段名（默认 'label'） */
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 子节点字段名（默认 'children'） */
+    childrenKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 受控选中（行主键值） */
+    selected: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 选中回调：给的是**节点对象**（不是主键值），口径同 `Tree` */
+    onSelect: {
+        type: PropType<(node: TreeNode) => void>;
+        default: undefined;
+    };
+    /** 受控展开集（传了就完全受控） */
+    expandedKeys: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    /** 非受控展开初值 */
+    defaultExpandedKeys: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    onExpandChange: {
+        type: PropType<(keys: string[]) => void>;
+        default: undefined;
+    };
+    /** 行尾操作区（新增 / 重命名 / 删除…）：悬浮显形 + 点击不冒泡，见 `Tree.renderActions` */
+    renderActions: {
+        type: PropType<(node: TreeNode) => unknown>;
+        default: undefined;
+    };
+    /** 侧栏标题（可选；不传则只有导航体） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 侧栏宽度（px 数字）：只下发 `--mh-nav-width`；**不传则填满所在栏**（列宽归 `Page.Split` / 外层布局） */
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** 尺寸档：`md`（行高 30，默认）/ `sm`（紧凑 28） */
+    size: {
+        type: PropType<"md" | "sm">;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 空态文案 */
+    empty: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 空态操作按钮（如「新建」）；与 `onEmptyAction` 同时传才渲染 */
+    emptyActionText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onEmptyAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /**
+     * 错误态（truthy 即触发）。
+     *
+     * **构造器顺序同 `Tree.error`：`String` 必须排在 `Boolean` 前** —— 顺序写反时，成功态传的
+     * 空字符串会被 Vue 的布尔转换判成 `true`，侧栏永远停在错误态。
+     */
+    error: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** 错误态标题（默认「加载失败」） */
+    errorTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 错误态操作按钮（如「重试」）；与 `onErrorAction` 同时传才渲染 */
+    errorActionText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onErrorAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 右侧分隔线（侧栏与内容区之间；贴在页面容器里时用） */
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: "sm" | "md";
+    title: string;
+    onSelect: (node: TreeNode) => void;
+    error: any;
+    loading: boolean;
+    width: number;
+    variant: NavVariant;
+    selected: string;
+    empty: string;
+    errorTitle: string;
+    emptyActionText: string;
+    onEmptyAction: () => void;
+    errorActionText: string;
+    onErrorAction: () => void;
+    labelKey: string;
+    childrenKey: string;
+    renderActions: (node: TreeNode) => unknown;
+    expandedKeys: string[];
+    defaultExpandedKeys: string[];
+    onExpandChange: (keys: string[]) => void;
+    bordered: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;