@manohub/ui 0.6.0

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

@@ -0,0 +1,226 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+/** 贴哪一侧滑出：`right`（缺省，属性 / 详情面板）/ `left`（导航 / 目录） */
+export type DrawerSide = 'left' | 'right';
+/**
+ * 抽屉（**自绘**；模态语义与遮罩全由原生 `<dialog>` 给，与 `Dialog` 同一条路子）。
+ *
+ * ## 与 `Dialog` 的关系：同一套行为，只换落位
+ *
+ * 模态语义、Esc、焦点陷阱、`::backdrop` 遮罩、top layer 渲染都是**原生 `<dialog>`** 给的，
+ * 本件因此与 `Dialog` 共用同一条「JS 只做原生做不到的那两件」的取舍：
+ * ① 把受控的 `open` 同步到原生 API（`open` 变真 → `showModal()`，变假 → `close()`）；
+ * ② 内建底栏的「确定」在 `onOk` 返回 Promise 时自动进加载态并吞重复点击。
+ * 差异只有一条：本件贴屏幕某一侧、**整屏高**，而不是视口居中。
+ *
+ * **不另开一套浮层机制**：抽屉不是「新的定位体系」，是同一张面板换个落位 ——
+ * 所以类名同样并列 `.mh-popup`（操作层状态根）+ 本族皮肤，开合、遮罩、UA 装饰归零全部免费继承。
+ *
+ * ## 关闭是受控的
+ *
+ * 关闭位、Esc（原生 `cancel` 事件）与点遮罩都只回调：`update:open(false)` + `onClose()` / `onCancel()`。
+ * 可见性归消费方 —— 避免「组件自己消失、业务状态还以为开着」两套口径。
+ *
+ * ## 底栏三态（**由消费方按需选一**，不要混着用）
+ *
+ * | 用法 | 结果 |
+ * | --- | --- |
+ * | 给 `footer` 插槽 | 完全自绘底栏（要用别的按钮形态时选这条） |
+ * | 给 `okText` / `onOk` | 内建底栏：`[取消] [确定]`，按钮就是本包 `Button` |
+ * | `:show-footer="false"` | 不渲染底栏（纯展示抽屉） |
+ *
+ * @example 内建底栏
+ * <Drawer v-model:open="visible" title="MCP 配置" width={640} :on-ok="save" :on-cancel="() => (visible = false)">
+ *   …抽屉内容…
+ * </Drawer>
+ *
+ * @example 右侧属性面板（窄、无底栏、自绘关闭位）
+ * <Drawer v-model:open="visible" title="属性" :width="320" :show-footer="false">…</Drawer>
+ */
+export declare const Drawer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 受控开合 */
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 标题（复杂标题走 `title` 插槽） */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 贴哪一侧滑出 */
+    side: {
+        type: PropType<DrawerSide>;
+        default: string;
+    };
+    /** 抽屉宽度：像素数（按 px）或任意合法宽度串（如 `min(520px, 90vw)`） */
+    width: {
+        type: PropType<number | string>;
+        default: number;
+    };
+    /** 是否显示关闭位 */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 点遮罩是否关闭（表单类抽屉通常**不**给，防误关） */
+    closeOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Esc 是否关闭（缺省开；表单类抽屉常关掉它，防手滑丢内容） */
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 内建底栏：确定按钮文案 */
+    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;
+    };
+    /** 贴哪一侧滑出 */
+    side: {
+        type: PropType<DrawerSide>;
+        default: string;
+    };
+    /** 抽屉宽度：像素数（按 px）或任意合法宽度串（如 `min(520px, 90vw)`） */
+    width: {
+        type: PropType<number | string>;
+        default: number;
+    };
+    /** 是否显示关闭位 */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 点遮罩是否关闭（表单类抽屉通常**不**给，防误关） */
+    closeOnBackdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Esc 是否关闭（缺省开；表单类抽屉常关掉它，防手滑丢内容） */
+    keyboard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 内建底栏：确定按钮文案 */
+    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: string | number;
+    closable: boolean;
+    closeOnBackdrop: boolean;
+    maskClosable: boolean;
+    keyboard: boolean;
+    okText: string;
+    cancelText: string;
+    okDanger: boolean;
+    confirmLoading: boolean;
+    showFooter: boolean | undefined;
+    onOk: () => unknown;
+    side: DrawerSide;
+}, SlotsType<{
+    default?: () => VNodeChild;
+    title?: () => VNodeChild;
+    footer?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/drawer/index.js

@@ -0,0 +1,190 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, computed, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+import { Button } from "../button/index.js";
+const Drawer = /* @__PURE__ */ defineComponent({
+  name: "Drawer",
+  inheritAttrs: false,
+  props: {
+    /** 受控开合 */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /** 标题（复杂标题走 `title` 插槽） */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 贴哪一侧滑出 */
+    side: {
+      type: String,
+      default: "right"
+    },
+    /** 抽屉宽度：像素数（按 px）或任意合法宽度串（如 `min(520px, 90vw)`） */
+    width: {
+      type: [Number, String],
+      default: 480
+    },
+    /** 是否显示关闭位 */
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    /** 点遮罩是否关闭（表单类抽屉通常**不**给，防误关） */
+    closeOnBackdrop: {
+      type: Boolean,
+      default: false
+    },
+    /** `closeOnBackdrop` 的别名（主流库的通行叫法，两者取或） */
+    maskClosable: {
+      type: Boolean,
+      default: false
+    },
+    /** Esc 是否关闭（缺省开；表单类抽屉常关掉它，防手滑丢内容） */
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    /** 内建底栏：确定按钮文案 */
+    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(() => {
+      const width = typeof props.width === "number" ? `${props.width}px` : props.width;
+      return {
+        width,
+        maxWidth: width
+      };
+    });
+    return () => createVNode("dialog", {
+      "ref": dialogRef,
+      "class": ["mh-popup", "mh-drawer", props.side === "left" ? "mh-drawer--left" : "", 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-drawer__header"
+    }, [createVNode("span", {
+      "class": "mh-drawer__title"
+    }, [slots.title ? slots.title() : props.title]), props.closable ? createVNode("button", {
+      "type": "button",
+      "class": "mh-drawer__close",
+      "aria-label": "关闭",
+      "onClick": () => requestClose("cancel")
+    }, [createVNode(Icon, {
+      "name": "close",
+      "size": 14
+    }, null)]) : null]) : null, createVNode("div", {
+      "class": "mh-drawer__body"
+    }, [slots.default?.()]), slots.footer ? createVNode("div", {
+      "class": "mh-drawer__footer"
+    }, [slots.footer()]) : showBuiltinFooter.value ? createVNode("div", {
+      "class": "mh-drawer__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 {
+  Drawer
+};