@manohub/ui 0.6.0

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

@@ -0,0 +1,224 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export type DialogWidth = 'md' | 'lg';
+/**
+ * 对话框（**自绘**；模态语义与遮罩全由原生 `<dialog>` 给）。
+ *
+ * ## JS 只做「原生做不到的那两件」
+ *
+ * 模态语义、Esc、焦点陷阱、`::backdrop` 遮罩、top layer 渲染 —— 都是浏览器给 `<dialog>` 的原生能力，
+ * 本件**不自建浮层**（不做定位计算、不做 focus trap、不写遮罩层），只做：
+ * ① 把**受控的 `open` 同步到原生 API**（`open` 变真 → `showModal()`，变假 → `close()`）；
+ * ② 内建底栏的「确定」在 `onOk` 返回 Promise 时自动进加载态并吞重复点击。
+ *
+ * ## 关闭是受控的
+ *
+ * 关闭位、Esc（原生 `cancel` 事件）与点遮罩都只回调：`update:open(false)` + `onClose()` / `onCancel()`。
+ * 可见性归消费方 —— 避免「组件自己消失、业务状态还以为开着」两套口径。
+ *
+ * ## 底栏三态（**由消费方按需选一**，不要混着用）
+ *
+ * | 用法 | 结果 |
+ * | --- | --- |
+ * | 给 `footer` 插槽 | 完全自绘底栏（要用别的按钮形态时选这条） |
+ * | 给 `okText` / `onOk` | 内建底栏：`[取消] [确定]`，按钮就是本包 `Button` |
+ * | `:show-footer="false"` | 不渲染底栏（纯提示 / 只有关闭位） |
+ *
+ * @example 内建底栏（最常用）
+ * <Dialog v-model:open="visible" title="删除确认" ok-text="删除" :on-ok="remove" :on-cancel="() => (visible = false)">
+ *   删除后不可恢复，确认继续？
+ * </Dialog>
+ *
+ * @example 自绘底栏
+ * <Dialog v-model:open="visible" title="详情">
+ *   正文
+ *   <template #footer><Button variant="text" @click="visible = false">关闭</Button></template>
+ * </Dialog>
+ */
+export declare const Dialog: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 受控开合 */
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 标题（复杂标题走 `title` 插槽） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 宽度：尺寸档 `md` 520 / `lg` 760，或直接给像素数 */
+    width: {
+        type: PropType<DialogWidth | number>;
+        default: string;
+    };
+    /** 是否显示右上关闭位 */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 点遮罩是否关闭（模态确认类弹窗通常**不**给，防误关） */
+    closeOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Esc 是否关闭（缺省关；表单类弹窗常关掉它，防手滑丢内容） */
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 大小档（如 `700px` / `min(720px, 90vw)`），给它就是唯一宽度来源 */
+    panelWidth: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 内建底栏：确定按钮文案 */
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 内建底栏：取消按钮文案 */
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 确定按钮的危险色（删除类确认） */
+    okDanger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 确定按钮的加载态（外部受控；`onOk` 返回 Promise 时本件也会自己管） */
+    confirmLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否渲染内建底栏；缺省 = 「给了 `onOk` 才渲染」 */
+    showFooter: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    /** 确定回调（返回 Promise 时按钮自动进加载态；返回值类型不限，非 thenable 一律忽略） */
+    onOk: {
+        type: PropType<() => unknown>;
+        default: undefined;
+    };
+    /** 取消回调（关闭位与 Esc 也会调它） */
+    onCancel: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 关闭回调（与 `onCancel` 同源，语义更宽） */
+    onClose: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:open': (value: boolean) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 受控开合 */
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 标题（复杂标题走 `title` 插槽） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 宽度：尺寸档 `md` 520 / `lg` 760，或直接给像素数 */
+    width: {
+        type: PropType<DialogWidth | number>;
+        default: string;
+    };
+    /** 是否显示右上关闭位 */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 点遮罩是否关闭（模态确认类弹窗通常**不**给，防误关） */
+    closeOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Esc 是否关闭（缺省关；表单类弹窗常关掉它，防手滑丢内容） */
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 大小档（如 `700px` / `min(720px, 90vw)`），给它就是唯一宽度来源 */
+    panelWidth: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 内建底栏：确定按钮文案 */
+    okText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 内建底栏：取消按钮文案 */
+    cancelText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 确定按钮的危险色（删除类确认） */
+    okDanger: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 确定按钮的加载态（外部受控；`onOk` 返回 Promise 时本件也会自己管） */
+    confirmLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否渲染内建底栏；缺省 = 「给了 `onOk` 才渲染」 */
+    showFooter: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    /** 确定回调（返回 Promise 时按钮自动进加载态；返回值类型不限，非 thenable 一律忽略） */
+    onOk: {
+        type: PropType<() => unknown>;
+        default: undefined;
+    };
+    /** 取消回调（关闭位与 Esc 也会调它） */
+    onCancel: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 关闭回调（与 `onCancel` 同源，语义更宽） */
+    onClose: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    title: string;
+    onCancel: () => void;
+    onClose: () => void;
+    width: number | DialogWidth;
+    closable: boolean;
+    closeOnBackdrop: boolean;
+    maskClosable: boolean;
+    keyboard: boolean;
+    panelWidth: string;
+    okText: string;
+    cancelText: string;
+    okDanger: boolean;
+    confirmLoading: boolean;
+    showFooter: boolean | undefined;
+    onOk: () => unknown;
+}, SlotsType<{
+    default?: () => VNodeChild;
+    title?: () => VNodeChild;
+    footer?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/dialog/index.js

@@ -0,0 +1,194 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, computed, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+import { Button } from "../button/index.js";
+const Dialog = /* @__PURE__ */ defineComponent({
+  name: "Dialog",
+  inheritAttrs: false,
+  props: {
+    /** 受控开合 */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /** 标题（复杂标题走 `title` 插槽） */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 宽度：尺寸档 `md` 520 / `lg` 760，或直接给像素数 */
+    width: {
+      type: [String, Number],
+      default: "md"
+    },
+    /** 是否显示右上关闭位 */
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    /** 点遮罩是否关闭（模态确认类弹窗通常**不**给，防误关） */
+    closeOnBackdrop: {
+      type: Boolean,
+      default: false
+    },
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    maskClosable: {
+      type: Boolean,
+      default: false
+    },
+    /** Esc 是否关闭（缺省关；表单类弹窗常关掉它，防手滑丢内容） */
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    /** 大小档（如 `700px` / `min(720px, 90vw)`），给它就是唯一宽度来源 */
+    panelWidth: {
+      type: String,
+      default: void 0
+    },
+    /** 内建底栏：确定按钮文案 */
+    okText: {
+      type: String,
+      default: "确定"
+    },
+    /** 内建底栏：取消按钮文案 */
+    cancelText: {
+      type: String,
+      default: "取消"
+    },
+    /** 确定按钮的危险色（删除类确认） */
+    okDanger: {
+      type: Boolean,
+      default: false
+    },
+    /** 确定按钮的加载态（外部受控；`onOk` 返回 Promise 时本件也会自己管） */
+    confirmLoading: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否渲染内建底栏；缺省 = 「给了 `onOk` 才渲染」 */
+    showFooter: {
+      type: Boolean,
+      default: void 0
+    },
+    /** 确定回调（返回 Promise 时按钮自动进加载态；返回值类型不限，非 thenable 一律忽略） */
+    onOk: {
+      type: Function,
+      default: void 0
+    },
+    /** 取消回调（关闭位与 Esc 也会调它） */
+    onCancel: {
+      type: Function,
+      default: void 0
+    },
+    /** 关闭回调（与 `onCancel` 同源，语义更宽） */
+    onClose: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:open": (value) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const dialogRef = ref(null);
+    const innerLoading = ref(false);
+    const requestClose = (kind = "close") => {
+      if (kind === "cancel") props.onCancel?.();
+      props.onClose?.();
+      emit("update:open", false);
+    };
+    const syncOpen = () => {
+      const el = dialogRef.value;
+      if (!el) return;
+      if (props.open) {
+        if (!el.open && typeof el.showModal === "function") el.showModal();
+      } else if (el.open && typeof el.close === "function") {
+        el.close();
+      }
+    };
+    watch(() => props.open, syncOpen, {
+      flush: "post"
+    });
+    onMounted(syncOpen);
+    onBeforeUnmount(() => {
+      const el = dialogRef.value;
+      if (el?.open && typeof el.close === "function") el.close();
+    });
+    const handleOk = () => {
+      const result = props.onOk?.();
+      if (result && typeof result.then === "function") {
+        innerLoading.value = true;
+        void result.finally(() => innerLoading.value = false);
+      }
+    };
+    const loading = computed(() => props.confirmLoading || innerLoading.value);
+    const showBuiltinFooter = computed(() => props.showFooter ?? props.onOk !== void 0);
+    const widthStyle = computed(() => {
+      if (props.panelWidth) return {
+        width: props.panelWidth,
+        maxWidth: props.panelWidth
+      };
+      if (typeof props.width === "number") return {
+        width: `${props.width}px`,
+        maxWidth: `${props.width}px`
+      };
+      return void 0;
+    });
+    return () => createVNode("dialog", {
+      "ref": dialogRef,
+      "class": ["mh-popup", "mh-dialog", props.width === "lg" ? "mh-dialog--lg" : "", attrs.class].filter(Boolean).join(" "),
+      "style": {
+        ...widthStyle.value,
+        ...attrs.style
+      },
+      "onCancel": (event) => {
+        event.preventDefault();
+        if (!props.keyboard) return;
+        requestClose("cancel");
+      },
+      "onClick": (event) => {
+        if ((props.closeOnBackdrop || props.maskClosable) && event.target === dialogRef.value) {
+          requestClose("close");
+        }
+      }
+    }, [props.title || slots.title || props.closable ? createVNode("div", {
+      "class": "mh-dialog__header"
+    }, [createVNode("span", {
+      "class": "mh-dialog__title"
+    }, [slots.title ? slots.title() : props.title]), props.closable ? createVNode("button", {
+      "type": "button",
+      "class": "mh-dialog__close",
+      "aria-label": "关闭",
+      "onClick": () => requestClose("cancel")
+    }, [createVNode(Icon, {
+      "name": "close",
+      "size": 14
+    }, null)]) : null]) : null, createVNode("div", {
+      "class": "mh-dialog__body"
+    }, [slots.default?.()]), slots.footer ? createVNode("div", {
+      "class": "mh-dialog__footer"
+    }, [slots.footer()]) : showBuiltinFooter.value ? createVNode("div", {
+      "class": "mh-dialog__footer"
+    }, [createVNode(Button, {
+      "variant": "secondary",
+      "onClick": () => requestClose("cancel")
+    }, {
+      default: () => props.cancelText
+    }), createVNode(Button, {
+      "variant": "primary",
+      "danger": props.okDanger,
+      "loading": loading.value,
+      "onClick": handleOk
+    }, {
+      default: () => props.okText
+    })]) : null]);
+  }
+});
+export {
+  Dialog
+};

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

@@ -0,0 +1,64 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export interface DividerProps {
+    /** 方向：`horizontal`（缺省，分隔上下内容）/ `vertical`（分隔左右内容，高度由父容器拉伸） */
+    direction?: 'horizontal' | 'vertical';
+    /** 虚线档（设计稿未覆盖 → 沿用「实线为默认」的惯例，虚线给弱分组用） */
+    dashed?: boolean;
+    /** 中段文字（只用水平档：给线让位，左段固定 24、右段吃剩余） */
+    label?: string;
+}
+/**
+ * 分隔线（水平 / 垂直 × 实线 / 虚线 × 可带中段文字）。
+ *
+ * 面里的线色取 `--ui-base-300`（本包唯一的「线 / 框」色），**不新造色值** ——
+ * 换主题时与页头下边线、表格线、卡片描边一起变。
+ *
+ * `vertical` 档的高度走 `align-self: stretch`：父级是 flex 行时自动占满整行高；
+ * 父级没有确定高度时退到 `1em`（不会塌成 0）。
+ *
+ * @example 水平分隔（筛选区与内容之间）
+ * <Divider />
+ *
+ * @example 带中段文字
+ * <Divider label="高级筛选" />
+ *
+ * @example 左侧树栏与主栏之间的一条竖线
+ * <div style="display:flex">
+ *   <aside>…</aside>
+ *   <Divider direction="vertical" />
+ *   <main>…</main>
+ * </div>
+ */
+export declare const Divider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<DividerProps["direction"]>;
+        default: string;
+    };
+    dashed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<DividerProps["direction"]>;
+        default: string;
+    };
+    dashed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    dashed: boolean;
+    label: string;
+    direction: "horizontal" | "vertical" | undefined;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/divider/index.js

@@ -0,0 +1,62 @@
+import { defineComponent, createVNode } from "vue";
+const Divider = /* @__PURE__ */ defineComponent({
+  name: "Divider",
+  inheritAttrs: false,
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    dashed: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    attrs,
+    slots
+  }) {
+    return () => {
+      const vertical = props.direction === "vertical";
+      const content = props.label ?? slots.default?.();
+      const withLabel = !vertical && content !== void 0 && content !== null;
+      const classes = () => ["mh-divider", vertical ? "mh-divider--vertical" : "mh-divider--horizontal", props.dashed ? "mh-divider--dashed" : void 0, withLabel ? "mh-divider--with-label" : void 0, attrs.class].filter(Boolean).join(" ");
+      if (vertical) {
+        return createVNode("span", {
+          "class": classes(),
+          "style": attrs.style,
+          "role": "separator",
+          "aria-orientation": "vertical"
+        }, null);
+      }
+      if (!withLabel) {
+        return createVNode("div", {
+          "class": classes(),
+          "style": attrs.style,
+          "role": "separator",
+          "aria-orientation": "horizontal"
+        }, null);
+      }
+      return createVNode("div", {
+        "class": classes(),
+        "style": attrs.style,
+        "role": "separator",
+        "aria-orientation": "horizontal"
+      }, [createVNode("span", {
+        "class": "mh-divider__line mh-divider__line--start"
+      }, null), createVNode("span", {
+        "class": "mh-divider__label"
+      }, [content]), createVNode("span", {
+        "class": "mh-divider__line"
+      }, null)]);
+    };
+  }
+});
+export {
+  Divider
+};