@manohub/ui 0.6.0

package/dist/components/nav/index.js

@@ -0,0 +1,164 @@
+import { defineComponent, createVNode } from "vue";
+import { Tree } from "../tree/index.js";
+const Nav = /* @__PURE__ */ defineComponent({
+  name: "Nav",
+  inheritAttrs: false,
+  props: {
+    /** 导航形态：`tree`（默认，层级 + 箭头）/ `list`（扁平，无箭头占位） */
+    variant: {
+      type: String,
+      default: "tree"
+    },
+    /** 导航节点（`list` 态传扁平数组）；结构与 `Tree` 同 */
+    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
+    },
+    /** 选中回调：给的是**节点对象**（不是主键值），口径同 `Tree` */
+    onSelect: {
+      type: Function,
+      default: void 0
+    },
+    /** 受控展开集（传了就完全受控） */
+    expandedKeys: {
+      type: Array,
+      default: void 0
+    },
+    /** 非受控展开初值 */
+    defaultExpandedKeys: {
+      type: Array,
+      default: () => []
+    },
+    onExpandChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 行尾操作区（新增 / 重命名 / 删除…）：悬浮显形 + 点击不冒泡，见 `Tree.renderActions` */
+    renderActions: {
+      type: Function,
+      default: void 0
+    },
+    /** 侧栏标题（可选；不传则只有导航体） */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 侧栏宽度（px 数字）：只下发 `--mh-nav-width`；**不传则填满所在栏**（列宽归 `Page.Split` / 外层布局） */
+    width: {
+      type: Number,
+      default: void 0
+    },
+    /** 尺寸档：`md`（行高 30，默认）/ `sm`（紧凑 28） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /** 空态文案 */
+    empty: {
+      type: String,
+      default: "暂无数据"
+    },
+    /** 空态操作按钮（如「新建」）；与 `onEmptyAction` 同时传才渲染 */
+    emptyActionText: {
+      type: String,
+      default: void 0
+    },
+    onEmptyAction: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * 错误态（truthy 即触发）。
+     *
+     * **构造器顺序同 `Tree.error`：`String` 必须排在 `Boolean` 前** —— 顺序写反时，成功态传的
+     * 空字符串会被 Vue 的布尔转换判成 `true`，侧栏永远停在错误态。
+     */
+    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
+    },
+    /** 右侧分隔线（侧栏与内容区之间；贴在页面容器里时用） */
+    bordered: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    return () => {
+      const style = props.width === void 0 ? attrs.style : [attrs.style, {
+        "--mh-nav-width": `${props.width}px`
+      }];
+      return createVNode("nav", {
+        "class": ["mh-nav", props.variant === "list" ? "mh-nav--list" : "", props.bordered ? "mh-nav--bordered" : "", attrs.class].filter(Boolean).join(" "),
+        "style": style
+      }, [props.title ? createVNode("div", {
+        "class": "mh-nav__title"
+      }, [props.title]) : null, createVNode("div", {
+        "class": "mh-nav__body"
+      }, [createVNode(Tree, {
+        "nodes": props.nodes,
+        "rowKey": props.rowKey,
+        "labelKey": props.labelKey,
+        "childrenKey": props.childrenKey,
+        "selected": props.selected,
+        "onSelect": props.onSelect,
+        "expandedKeys": props.expandedKeys,
+        "defaultExpandedKeys": props.defaultExpandedKeys,
+        "onExpandChange": props.onExpandChange,
+        "renderActions": props.renderActions,
+        "size": props.size,
+        "loading": props.loading,
+        "empty": props.empty,
+        "emptyActionText": props.emptyActionText,
+        "onEmptyAction": props.onEmptyAction,
+        "error": props.error,
+        "errorTitle": props.errorTitle,
+        "errorActionText": props.errorActionText,
+        "onErrorAction": props.onErrorAction
+      }, null)])]);
+    };
+  }
+});
+export {
+  Nav
+};

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

@@ -0,0 +1,137 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export type NoticeTone = 'info' | 'success' | 'warning' | 'error';
+/**
+ * 说明条 / 警告提示（**自建**，不封装 farris）。
+ *
+ * ## 为什么自建
+ *
+ * 它要的是**嵌在页面里的一行说明**（通栏、语义三件套「底 / 边 / 字」、操作为文字按钮）——
+ * 与 `Notification`（有标题与头像的卡片）、`Toast`（浮出后自己消失）都不是一回事，
+ * 三者的判据是**出现方式**（见 `Toast` 的「与 Notice / Notification 的判据」）。
+ * 上游没有可复用的形态，故自建并定为本包的一族。
+ *
+ * ## 口径（取自主题包 Alert 规范）
+ *
+ * - **警示 / 错误须常驻**（不渲染关闭按钮），只有通知类信息才可关闭 —— 故 `closable` 默认 `false`，
+ *   由消费方显式开启；
+ * - 位置：页面顶部通栏（页面主体顶部），静态展示、不随滚动消失。
+ *
+ * ## 两种排版（按内容量选）
+ *
+ * | 内容 | 写法 | 排布 |
+ * | --- | --- | --- |
+ * | 一行话 | 默认插槽 / `description` | 单行，图标与文字同行 |
+ * | 有标题 | `message` + `description`（或插槽） | **标题行 + 描述行**两行 |
+ *
+ * @example 可关闭的说明条（列表页顶部）
+ * <Notice closable onClose={() => (visible = false)} show-icon>值映射用于将来源向量转换为目标值。</Notice>
+ *
+ * @example 带标题与操作
+ * <Notice tone="warning" show-icon message="尚未完成实名认证" description="使用该服务前须完成认证"
+ *   action="立即认证" :on-action="goAuth" />
+ */
+export declare const Notice: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 语义类型；决定底/边/字三件套与图标 */
+    tone: {
+        type: PropType<NoticeTone>;
+        default: string;
+    };
+    /** 标题行（给了就切换成「标题 + 描述」两行排版） */
+    message: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 描述行（无 `message` 时就是正文本身） */
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 是否显示语义图标 */
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否渲染右上关闭按钮（规范：仅通知类信息可关闭） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 自定义关闭位文案（缺省只出图标） */
+    closeText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 右侧文字按钮文案（不传则不渲染操作位） */
+    action: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 文字按钮点击 */
+    onAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 关闭回调（配合 `closable`；关闭动作由消费方决定可见性） */
+    onClose: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 语义类型；决定底/边/字三件套与图标 */
+    tone: {
+        type: PropType<NoticeTone>;
+        default: string;
+    };
+    /** 标题行（给了就切换成「标题 + 描述」两行排版） */
+    message: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 描述行（无 `message` 时就是正文本身） */
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 是否显示语义图标 */
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否渲染右上关闭按钮（规范：仅通知类信息可关闭） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 自定义关闭位文案（缺省只出图标） */
+    closeText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 右侧文字按钮文案（不传则不渲染操作位） */
+    action: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 文字按钮点击 */
+    onAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 关闭回调（配合 `closable`；关闭动作由消费方决定可见性） */
+    onClose: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    onClose: () => void;
+    message: string;
+    tone: NoticeTone;
+    closable: boolean;
+    description: string;
+    showIcon: boolean;
+    closeText: string;
+    action: string;
+    onAction: () => void;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/notice/index.js

@@ -0,0 +1,101 @@
+import { defineComponent, createVNode, Fragment, createTextVNode } from "vue";
+import { Icon } from "@manohub/icon";
+const TONE_ICON = {
+  info: "info",
+  success: "check",
+  warning: "alert",
+  error: "close"
+};
+const Notice = /* @__PURE__ */ defineComponent({
+  name: "Notice",
+  inheritAttrs: false,
+  props: {
+    /** 语义类型；决定底/边/字三件套与图标 */
+    tone: {
+      type: String,
+      default: "info"
+    },
+    /** 标题行（给了就切换成「标题 + 描述」两行排版） */
+    message: {
+      type: String,
+      default: void 0
+    },
+    /** 描述行（无 `message` 时就是正文本身） */
+    description: {
+      type: String,
+      default: void 0
+    },
+    /** 是否显示语义图标 */
+    showIcon: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否渲染右上关闭按钮（规范：仅通知类信息可关闭） */
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    /** 自定义关闭位文案（缺省只出图标） */
+    closeText: {
+      type: String,
+      default: void 0
+    },
+    /** 右侧文字按钮文案（不传则不渲染操作位） */
+    action: {
+      type: String,
+      default: void 0
+    },
+    /** 文字按钮点击 */
+    onAction: {
+      type: Function,
+      default: void 0
+    },
+    /** 关闭回调（配合 `closable`；关闭动作由消费方决定可见性） */
+    onClose: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const body = () => {
+      const fallback = props.description ?? slots.default?.();
+      if (!props.message) return fallback;
+      return createVNode(Fragment, null, [createVNode("span", {
+        "class": "mh-notice__message"
+      }, [props.message]), createVNode("span", {
+        "class": "mh-notice__description"
+      }, [props.description ?? slots.default?.()])]);
+    };
+    return () => createVNode("div", {
+      "class": [attrs.class, "mh-notice", `mh-notice--${props.tone}`, props.message ? "mh-notice--titled" : ""].filter(Boolean).join(" "),
+      "role": "alert"
+    }, [props.showIcon ? createVNode(Icon, {
+      "name": TONE_ICON[props.tone],
+      "class": "mh-notice__icon"
+    }, null) : null, createVNode("div", {
+      "class": "mh-notice__body"
+    }, [body()]), props.action ? createVNode("button", {
+      "type": "button",
+      "class": "mh-notice__action",
+      "onClick": () => props.onAction?.()
+    }, [props.action]) : null, props.closable ? createVNode("button", {
+      "type": "button",
+      "class": "mh-notice__close",
+      "onClick": () => props.onClose?.()
+    }, [props.closeText ? createVNode("span", {
+      "class": "mh-notice__close-text"
+    }, [props.closeText]) : createVNode(Fragment, null, [createVNode(Icon, {
+      "name": "close",
+      "class": "mh-notice__close-icon"
+    }, null), createVNode("span", {
+      "class": "mh-notice__visually-hidden"
+    }, [createTextVNode("关闭")])])]) : null]);
+  }
+});
+export {
+  Notice
+};

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

@@ -0,0 +1,118 @@
+import { type IconName } from '@manohub/icon';
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+/** 语义五档（`submit` 与 `success` 共用淡底，只换左边线 —— 与规范同构） */
+export type NotificationTone = 'info' | 'success' | 'warning' | 'error' | 'submit';
+/**
+ * 通知卡（**自绘**；标题 + 正文 + 图标 / 头像 / 标签 / 操作 / 关闭位）。
+ *
+ * ## 与 `Notice` 的判据（别互相顶替）
+ *
+ * - `Notice`（`.mh-notice*`）= **条状提示**：一行话 + 可选操作；
+ * - 本件（`.mh-notification*`）= **通知卡**：标题行（含关闭位）、可带头像与标签、多行正文。
+ *
+ * 类名前缀刻意不同：规范里两族都叫 `.notice*`，照抄会让本仓出现两套 `.mh-notice*` 互撞。
+ *
+ * ## 组合位（面各归其族，本件只给容器）
+ *
+ * - 图标：`icon` 布尔（按 `tone` 映射）或直接给图标名；
+ * - 头像：给 `avatar` 插槽 → 原样渲染（推荐塞 `<Avatar>`）；给 `avatar` 字符串 → 渲染字标兜底盒；
+ * - 标签：`tags` 插槽里放标签族的 `<Tag shape="status" tone="error">`；
+ * - 操作：`actions` 插槽里放按钮族的 `<Button size="sm" variant="primary">`。
+ *
+ * 关闭是**受控**的：本件只回调 `onClose`，不自己隐藏（可见性归消费方，避免「点了没反应」与
+ * 「组件自己消失」两套口径）。`duration` 到点也只回调 —— 与 `Toast` 同一口径。
+ *
+ * @example 基础
+ * <Notification tone="warning" title="待办超期" closable @close="dismiss">3 个任务已超期</Notification>
+ *
+ * @example 图标 + 自动消失 + 头像 + 标签
+ * <Notification icon duration={4000} tone="info" title="审批通知" avatar="张" @close="dismiss">
+ *   <Tag shape="status" tone="error">逾期</Tag>
+ *   {{ actions: () => <Button size="sm" variant="primary">去处理</Button> }}
+ * </Notification>
+ */
+export declare const Notification: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tone: {
+        type: PropType<NotificationTone>;
+        default: string;
+    };
+    /** 标题（复杂标题走 `title` 插槽） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 前置图标：`true` 按 `tone` 映射，或直接给图标名 */
+    icon: {
+        type: PropType<boolean | IconName>;
+        default: boolean;
+    };
+    /** 头像兜底：首字母 / 短字（有 `avatar` 插槽时以插槽为准） */
+    avatar: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 是否显示关闭位（可见性由消费方管，本件只回调） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 自动关闭毫秒数（`0` = 不自动；到点**只回调** `onClose`，不移除自己） */
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 关闭回调（关闭位与 `duration` 到点都走它） */
+    onClose: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tone: {
+        type: PropType<NotificationTone>;
+        default: string;
+    };
+    /** 标题（复杂标题走 `title` 插槽） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 前置图标：`true` 按 `tone` 映射，或直接给图标名 */
+    icon: {
+        type: PropType<boolean | IconName>;
+        default: boolean;
+    };
+    /** 头像兜底：首字母 / 短字（有 `avatar` 插槽时以插槽为准） */
+    avatar: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 是否显示关闭位（可见性由消费方管，本件只回调） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 自动关闭毫秒数（`0` = 不自动；到点**只回调** `onClose`，不移除自己） */
+    duration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 关闭回调（关闭位与 `duration` 到点都走它） */
+    onClose: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    icon: boolean | "filter" | "copy" | "help" | "table" | "menu" | "search" | "link" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "wrench" | "plus" | "bell" | "settings" | "logout" | "home" | "workbench" | "grid-dots" | "heart" | "heart-filled" | "edit" | "refresh" | "upload" | "save" | "more" | "eye" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "sparkles" | "shield-check" | "shield-alert" | "history";
+    title: string;
+    onClose: () => void;
+    tone: NotificationTone;
+    closable: boolean;
+    avatar: string;
+    duration: number;
+}, SlotsType<{
+    default?: () => VNodeChild;
+    title?: () => VNodeChild;
+    avatar?: () => VNodeChild;
+    tags?: () => VNodeChild;
+    actions?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/notification/index.js

@@ -0,0 +1,99 @@
+import { defineComponent, onMounted, onBeforeUnmount, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+const TONE_ICON = {
+  info: "info",
+  success: "check",
+  warning: "alert",
+  error: "close",
+  submit: "check"
+};
+const Notification = /* @__PURE__ */ defineComponent({
+  name: "Notification",
+  inheritAttrs: false,
+  props: {
+    tone: {
+      type: String,
+      default: "info"
+    },
+    /** 标题（复杂标题走 `title` 插槽） */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 前置图标：`true` 按 `tone` 映射，或直接给图标名 */
+    icon: {
+      type: [Boolean, String],
+      default: false
+    },
+    /** 头像兜底：首字母 / 短字（有 `avatar` 插槽时以插槽为准） */
+    avatar: {
+      type: String,
+      default: void 0
+    },
+    /** 是否显示关闭位（可见性由消费方管，本件只回调） */
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    /** 自动关闭毫秒数（`0` = 不自动；到点**只回调** `onClose`，不移除自己） */
+    duration: {
+      type: Number,
+      default: 0
+    },
+    /** 关闭回调（关闭位与 `duration` 到点都走它） */
+    onClose: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    let timer;
+    onMounted(() => {
+      if (props.duration > 0) timer = setTimeout(() => props.onClose?.(), props.duration);
+    });
+    onBeforeUnmount(() => {
+      if (timer) clearTimeout(timer);
+    });
+    return () => {
+      const hasTitleRow = Boolean(slots.title || props.title || props.closable);
+      const iconName = props.icon === true ? TONE_ICON[props.tone] : typeof props.icon === "string" ? props.icon : void 0;
+      return createVNode("div", {
+        "class": ["mh-notification", `mh-notification--${props.tone}`, attrs.class].filter(Boolean).join(" "),
+        "style": attrs.style
+      }, [slots.avatar ? slots.avatar() : props.avatar ? createVNode("span", {
+        "class": "mh-notification__avatar"
+      }, [props.avatar]) : null, createVNode("div", {
+        "class": "mh-notification__body"
+      }, [hasTitleRow ? createVNode("div", {
+        "class": "mh-notification__title"
+      }, [iconName ? createVNode(Icon, {
+        "name": iconName,
+        "class": "mh-notification__icon"
+      }, null) : null, createVNode("span", {
+        "class": "mh-notification__title-text"
+      }, [slots.title ? slots.title() : props.title]), props.closable ? createVNode("button", {
+        "type": "button",
+        "class": "mh-notification__close",
+        "aria-label": "关闭",
+        "onClick": () => props.onClose?.()
+      }, [createVNode(Icon, {
+        "name": "close",
+        "size": 12,
+        "class": "mh-notification__close-icon"
+      }, null)]) : null]) : null, createVNode("div", {
+        "class": "mh-notification__text"
+      }, [slots.default?.()]), slots.tags ? createVNode("div", {
+        "class": "mh-notification__tags"
+      }, [slots.tags()]) : null, slots.actions ? createVNode("div", {
+        "class": "mh-notification__actions"
+      }, [slots.actions()]) : null])]);
+    };
+  }
+});
+export {
+  Notification
+};