sodialog 0.1.1

package/README.md

@@ -0,0 +1,120 @@
+# SoDialog
+
+基于 HTML5 `dialog` 的可复用弹窗库，支持 **Modal** 与 **Offcanvas**，并通过 JavaScript 动态创建 HTML 元素。
+
+## 安装
+
+```bash
+npm install sodialog
+```
+
+## 使用
+
+```ts
+import { openModal, openOffcanvas } from 'sodialog'
+import 'sodialog/style.css'
+
+openModal({
+  id: 'order-delete',
+  title: '提示',
+  position: 'center',
+  animation: 'fade',
+  useModal: true,
+  draggable: true,
+  dragHandle: 'header',
+  autoFitSize: true,
+  content: '<p>这是 Modal</p>',
+  confirmText: '确定',
+  cancelText: '取消',
+})
+
+openOffcanvas({
+  title: '侧边栏',
+  placement: 'end',
+  animation: 'slide',
+  content: '<p>这是 Offcanvas</p>',
+})
+```
+
+## API
+
+### `openModal(options)`
+
+- `title: string`
+- `content: string | Node`
+- `id?: string`（默认自动生成。传入后同 ID Modal 不重复创建，再次调用会唤起已有实例）
+- `onCreated?: (handle) => void`（仅新建时触发，可读取自动生成的 `handle.id`）
+- `onReused?: (handle) => void`（仅复用已有同 ID 实例时触发）
+- `handle.refit(): void`（手动触发一次尺寸重算）
+- `position?: 'center' | 'top' | 'bottom'` (默认 `center`)
+- `animation?: 'slide' | 'fade' | 'zoom'` (默认 `fade`)
+- `useModal?: boolean` (默认 `true`，`true` 使用 `showModal()`，`false` 使用 `show()`)
+- `draggable?: boolean` (默认 `false`)
+- `dragHandle?: 'header' | 'title' | 'body' | 'panel' | string` (默认 `header`，也可传 CSS 选择器)
+- `autoFitSize?: boolean` (默认 `true`，会根据 body 内容变化自动扩/缩尺寸，例如图片加载完成后)
+- `scrollMode?: 'body' | 'hybrid' | 'viewport' | 'none'` (默认 `body`)
+- `hybridSwitchRatio?: number` (默认 `1.35`，仅 `scrollMode: 'hybrid'` 时生效，最小值 `1`)
+- `autoFitUseScrollbar?: boolean` (兼容旧参数。`false` 等价于 `scrollMode: 'viewport'`)
+- `refitOnContentChange?: boolean` (默认 `true`，内容变化/图片加载后自动触发尺寸重算)
+- `autoFitMinWidth?: number` (默认 `280`)
+- `autoFitMinHeight?: number` (默认 `160`)
+- `confirmText?: string`
+- `cancelText?: string`
+- `confirmAction?: 'hide' | 'destroy'`（默认 `hide`；显式传入 `id` 时默认 `destroy`）
+- `closeOnBackdrop?: boolean` (默认 `true`)
+- `closeOnEsc?: boolean` (默认 `true`)
+- `onConfirm?: () => void`
+- `onCancel?: () => void`
+
+说明：
+
+- `hybrid` 表示先使用 body 内滚动；当内容高度远超可视区阈值时自动切到外层 viewport 滚动
+- `取消/关闭` 语义是 `dialog.close()`（隐藏）
+- `confirmAction: 'destroy'` 语义是 `dialog.remove()`（销毁）
+
+### `openOffcanvas(options)`
+
+在 `openModal` 参数基础上新增：
+
+- `placement?: 'start' | 'end' | 'top' | 'bottom'` (默认 `end`)
+- `animation?: 'slide' | 'fade' | 'zoom'` (默认 `slide`)
+
+示例（类似 Bootstrap Offcanvas 多位置）：
+
+```ts
+openOffcanvas({ title: 'Left', placement: 'start', animation: 'slide', content: '<p>Left</p>' })
+openOffcanvas({ title: 'Right', placement: 'end', animation: 'slide', content: '<p>Right</p>' })
+openOffcanvas({ title: 'Top', placement: 'top', animation: 'fade', content: '<p>Top</p>' })
+openOffcanvas({ title: 'Bottom', placement: 'bottom', animation: 'zoom', content: '<p>Bottom</p>' })
+```
+
+### `SoDialog.open(options)`
+
+通用入口，`options.kind` 可为 `modal` 或 `offcanvas`。
+
+## 开发
+
+```bash
+npm run dev
+npm run lint
+npm run build
+```
+
+Demo 中已包含：
+
+- 预设默认值：`center`、`zoom`、`medium`、`showModal`、不可拖动、自动适配
+- `Modal ID` 留空自动生成，输入后可复用唤醒同 ID
+- Modal 内切换不同尺寸图片，验证 `autoFitSize` 自动扩缩
+- 包含超大图（`xlarge`）、超长单词、超宽表格的溢出测试
+- Modal 内容按钮打开子窗口（支持 ID 复用唤起）
+- 子窗口包含多种表单元素（input/select/checkbox/textarea）演示
+- 新增 Markdown 编辑器子窗口（工具栏插入、实时预览）
+- 编辑器支持“仅编辑 / 编辑 + 预览”模式切换
+
+## 发布到 NPM
+
+1. 登录：`npm login`
+2. 检查包名可用性
+3. 发布：`npm publish --access public`
+
+> 当前样式均使用 `sod-` 前缀命名，避免污染全局 `body/:root/*`。

package/dist/sodialog.css

@@ -0,0 +1 @@
+.sod-dialog{border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.sod-dialog::backdrop{background:#0000007f}.sod-panel{box-sizing:border-box;background:#fff;color:#212529;border-radius:.5rem;box-shadow:0 .5rem 1rem #00000040;min-width:min(520px,calc(100vw - 2rem));max-width:min(520px,calc(100vw - 2rem))}.sod-modal .sod-panel{position:relative;margin:0}.sod-modal[open]{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.sod-modal[open].sod-modal-viewport-scroll{align-items:flex-start;overflow:auto;padding:1rem 0}.sod-modal .sod-panel.sod-modal-pos-center{align-self:center}.sod-modal .sod-panel.sod-modal-pos-top{align-self:flex-start;margin-top:1rem}.sod-modal .sod-panel.sod-modal-pos-bottom{align-self:flex-end;margin-bottom:1rem}.sod-modal .sod-panel.sod-modal-autofit{min-width:0;width:auto;height:auto;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);display:flex;flex-direction:column}.sod-modal .sod-panel.sod-modal-draggable{touch-action:none}.sod-modal .sod-panel.sod-is-dragging{animation:none!important;transition:none!important}.sod-modal .sod-panel .sod-drag-handle{cursor:move;-webkit-user-select:none;user-select:none}.sod-modal .sod-panel .sod-drag-handle.is-dragging{cursor:grabbing}.sod-modal .sod-panel.sod-modal-anim-fade{animation:sod-fade-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-fade.is-closing{animation:sod-fade-out .18s ease-in forwards}.sod-modal .sod-panel.sod-modal-anim-zoom{animation:sod-modal-zoom-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-zoom.is-closing{animation:sod-modal-zoom-out .18s ease-in forwards}.sod-modal .sod-panel.sod-modal-anim-slide{animation:sod-modal-slide-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-slide.is-closing{animation:sod-modal-slide-out .18s ease-in forwards}.sod-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .75rem;border-bottom:1px solid #dee2e6}.sod-title{margin:0;font-size:1.1rem}.sod-close{border:0;background:transparent;color:#6c757d;font-size:1.5rem;line-height:1;cursor:pointer}.sod-body{box-sizing:border-box;padding:1rem;overflow-wrap:anywhere;word-break:break-word}.sod-body>*{max-width:100%}.sod-body input,.sod-body select,.sod-body textarea,.sod-body button{max-width:100%;box-sizing:border-box}.sod-body img,.sod-body video,.sod-body canvas,.sod-body iframe,.sod-body table{max-width:100%}.sod-modal .sod-panel.sod-modal-autofit .sod-body{flex:1 1 auto;min-height:0}.sod-body p{margin:0 0 .5rem}.sod-body ul{margin:.5rem 0 0;padding-left:1.2rem}.sod-footer{padding:.75rem 1rem 1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end;gap:.5rem}.sod-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;border:1px solid transparent;padding:.5rem 1rem;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .15s ease-in-out}.sod-btn:focus-visible{outline:2px solid #86b7fe;outline-offset:1px}.sod-btn-primary{background:#0d6efd;color:#fff;border-color:#0d6efd}.sod-btn-primary:hover{background:#0b5ed7;border-color:#0a58ca}.sod-btn-outline{background:transparent;color:#6c757d;border-color:#6c757d}.sod-btn-outline:hover{color:#fff;background:#6c757d}.sod-offcanvas[open]{width:100vw;height:100vh}.sod-offcanvas .sod-panel{position:fixed;margin:0;min-width:0;max-width:none;border-radius:0;width:min(360px,90vw);height:100vh}.sod-offcanvas .sod-panel.sod-placement-start{left:0;top:0}.sod-offcanvas .sod-panel.sod-placement-end{right:0;top:0}.sod-offcanvas .sod-panel.sod-placement-top{top:0;left:0;width:100vw;height:300px}.sod-offcanvas .sod-panel.sod-placement-bottom{bottom:0;left:0;width:100vw;height:300px}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-start{animation:sod-slide-in-start .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-start.is-closing{animation:sod-slide-out-start .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-end{animation:sod-slide-in-end .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-end.is-closing{animation:sod-slide-out-end .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-top{animation:sod-slide-in-top .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-top.is-closing{animation:sod-slide-out-top .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-bottom{animation:sod-slide-in-bottom .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-bottom.is-closing{animation:sod-slide-out-bottom .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-fade{animation:sod-fade-in .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-fade.is-closing{animation:sod-fade-out .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-zoom{animation:sod-zoom-in .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-zoom.is-closing{animation:sod-zoom-out .18s ease-in forwards}@keyframes sod-modal-zoom-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes sod-modal-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}@keyframes sod-modal-slide-in{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes sod-modal-slide-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}@keyframes sod-slide-in-start{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sod-slide-out-start{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sod-slide-in-end{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sod-slide-out-end{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes sod-slide-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sod-slide-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes sod-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sod-slide-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes sod-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sod-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sod-zoom-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes sod-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}

package/dist/sodialog.es.js

@@ -0,0 +1,202 @@
+function A(t, e) {
+  if (typeof e == "string") {
+    t.innerHTML = e;
+    return;
+  }
+  t.append(e);
+}
+function I(t, e = "hide") {
+  if (e === "destroy") {
+    t.dataset.sodDestroy = "true", t.open && t.close(), t.remove();
+    return;
+  }
+  t.open && t.close();
+}
+function N(t, e) {
+  const i = e ?? "header";
+  return i === "panel" ? t : i === "header" ? t.querySelector(".sod-header") : i === "title" ? t.querySelector(".sod-title") : i === "body" ? t.querySelector(".sod-body") : t.querySelector(i) ?? t.querySelector(".sod-header");
+}
+function F(t, e) {
+  const i = N(t, e);
+  if (!i)
+    return;
+  t.classList.add("sod-modal-draggable"), i.classList.add("sod-drag-handle");
+  let s = !1, H = 0, v = 0, d = null, g = 0, L = 0, o = 0;
+  const x = document.body.style.userSelect, c = (r, m) => {
+    const a = t.getBoundingClientRect(), M = Math.max(0, window.innerWidth - a.width), w = Math.max(0, window.innerHeight - a.height), p = Math.min(0, window.innerWidth - a.width), l = Math.min(0, window.innerHeight - a.height);
+    return {
+      left: Math.min(M, Math.max(p, r)),
+      top: Math.min(w, Math.max(l, m))
+    };
+  }, h = (r) => {
+    if (!s)
+      return;
+    const m = c(r.clientX - H, r.clientY - v);
+    L = m.left, o = m.top, g === 0 && (g = window.requestAnimationFrame(() => {
+      g = 0, t.style.inset = "auto", t.style.left = `${L}px`, t.style.top = `${o}px`, t.style.right = "auto", t.style.bottom = "auto", t.style.margin = "0", t.style.transform = "none";
+    }));
+  }, u = () => {
+    s = !1, i.classList.remove("is-dragging"), t.classList.remove("sod-is-dragging"), t.style.willChange = "", document.body.style.userSelect = x, g !== 0 && (window.cancelAnimationFrame(g), g = 0), d !== null && i.hasPointerCapture && i.hasPointerCapture(d) && i.releasePointerCapture(d), d = null, window.removeEventListener("pointermove", h), window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u);
+  };
+  i.addEventListener("pointerdown", (r) => {
+    if (r.button !== 0 || r.target?.closest("button, input, select, textarea, a"))
+      return;
+    r.preventDefault(), t.classList.add("sod-is-dragging"), t.style.animation = "none", t.style.transition = "none", t.style.transform = "none";
+    const a = t.getBoundingClientRect();
+    H = r.clientX - a.left, v = r.clientY - a.top, s = !0, d = r.pointerId, i.setPointerCapture(r.pointerId), t.style.position = "fixed", t.style.left = `${a.left}px`, t.style.top = `${a.top}px`, t.style.width = `${Math.round(a.width)}px`, t.style.height = `${Math.round(a.height)}px`, t.style.inset = "auto", t.style.right = "auto", t.style.bottom = "auto", t.style.margin = "0", t.style.willChange = "left, top", i.classList.add("is-dragging"), document.body.style.userSelect = "none", window.addEventListener("pointermove", h), window.addEventListener("pointerup", u), window.addEventListener("pointercancel", u);
+  });
+}
+function Y(t, e, i, s, H, v) {
+  const g = Math.max(1, v?.hybridSwitchRatio ?? 1.35), L = v?.refitOnContentChange ?? !0, o = Math.max(120, v?.autoFitMinWidth ?? 280), x = Math.max(100, v?.autoFitMinHeight ?? 160), c = v?.scrollMode ? v.scrollMode : v?.autoFitUseScrollbar === !1 ? "viewport" : "body";
+  let h = 0;
+  const u = (n, f, E) => Math.min(E, Math.max(f, n)), r = () => {
+    if (h = 0, !t.isConnected || !t.open)
+      return;
+    const n = Math.max(o, window.innerWidth - 32), f = Math.max(x, window.innerHeight - 32);
+    e.style.width = "auto", e.style.height = "auto", e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible";
+    const E = Math.ceil(e.scrollWidth), $ = Math.ceil(e.scrollHeight), W = E > n, S = $ > f;
+    if (c === "body") {
+      const b = u(E, o, n), y = u($, x, f);
+      e.style.width = `${b}px`, e.style.maxWidth = `${n}px`, e.style.height = `${y}px`, e.style.maxHeight = `${f}px`;
+      const C = i.offsetHeight, R = H.offsetHeight, D = Math.max(64, y - C - R);
+      S ? (s.style.maxHeight = `${D}px`, s.style.overflowY = "auto") : (s.style.maxHeight = "none", s.style.overflowY = "hidden"), s.style.overflowX = W ? "auto" : "hidden", t.classList.remove("sod-modal-viewport-scroll");
+    } else if (c === "hybrid")
+      if ($ > f * g) {
+        const y = Math.max(E, o), C = Math.max($, x);
+        e.style.width = `${y}px`, e.style.maxWidth = "none", e.style.height = `${C}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", t.classList.add("sod-modal-viewport-scroll");
+      } else {
+        const y = u(E, o, n), C = u($, x, f);
+        e.style.width = `${y}px`, e.style.maxWidth = `${n}px`, e.style.height = `${C}px`, e.style.maxHeight = `${f}px`;
+        const R = i.offsetHeight, D = H.offsetHeight, P = Math.max(64, C - R - D);
+        S ? (s.style.maxHeight = `${P}px`, s.style.overflowY = "auto") : (s.style.maxHeight = "none", s.style.overflowY = "hidden"), s.style.overflowX = W ? "auto" : "hidden", t.classList.remove("sod-modal-viewport-scroll");
+      }
+    else if (c === "viewport") {
+      const b = Math.max(E, o), y = Math.max($, x);
+      e.style.width = `${b}px`, e.style.maxWidth = "none", e.style.height = `${y}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", y > f ? t.classList.add("sod-modal-viewport-scroll") : t.classList.remove("sod-modal-viewport-scroll");
+    } else {
+      const b = W ? Math.max(E, o) : u(E, o, n);
+      if (W || S) {
+        const y = Math.max($, x);
+        e.style.width = `${b}px`, e.style.maxWidth = "none", e.style.height = `${y}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", t.classList.add("sod-modal-viewport-scroll");
+      } else
+        e.style.width = `${b}px`, e.style.maxWidth = `${n}px`, e.style.height = "auto", e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", t.classList.remove("sod-modal-viewport-scroll");
+    }
+  }, m = () => {
+    h === 0 && (h = window.requestAnimationFrame(r));
+  }, a = new ResizeObserver(() => {
+    m();
+  }), M = new MutationObserver(() => {
+    m();
+  }), w = () => {
+    m();
+  }, p = () => {
+    m();
+  };
+  t.addEventListener("sod:refit", p), a.observe(s), a.observe(i), a.observe(H), L && (M.observe(s, {
+    subtree: !0,
+    childList: !0,
+    characterData: !0,
+    attributes: !0
+  }), s.addEventListener("load", w, !0), s.addEventListener("error", w, !0));
+  const l = () => {
+    m();
+  };
+  return window.addEventListener("resize", l), m(), () => {
+    h !== 0 && (window.cancelAnimationFrame(h), h = 0), a.disconnect(), M.disconnect(), window.removeEventListener("resize", l), t.removeEventListener("sod:refit", p), s.removeEventListener("load", w, !0), s.removeEventListener("error", w, !0), t.classList.remove("sod-modal-viewport-scroll"), s.style.maxHeight = "", s.style.overflowY = "", s.style.overflowX = "";
+  };
+}
+class O {
+  static modalRegistry = /* @__PURE__ */ new Map();
+  static modalIdSeed = 0;
+  static createAutoModalId() {
+    return this.modalIdSeed += 1, `sod-modal-${this.modalIdSeed}`;
+  }
+  static revealExisting(e, i) {
+    if (!e.isConnected)
+      return;
+    const s = e.querySelector(".sod-panel");
+    s?.classList.remove("is-closing"), document.body.append(e), e.open || (i ? e.showModal() : e.show()), e.dispatchEvent(new Event("sod:refit")), s?.focus();
+  }
+  static open(e) {
+    const i = e.kind ?? "modal", s = "useModal" in e ? e.useModal ?? !0 : !0, H = i === "modal" ? e : void 0, v = i === "modal" && ("autoFitSize" in e ? e.autoFitSize !== !1 : !0);
+    let d, g = !1, L = e.confirmAction ?? "hide";
+    if (i === "modal") {
+      const l = "id" in e && e.id?.trim() ? e.id.trim() : void 0;
+      if (g = !!l, d = l ?? this.createAutoModalId(), e.confirmAction === void 0 && g && (L = "destroy"), l) {
+        const n = this.modalRegistry.get(d);
+        if (n && n.isConnected) {
+          this.revealExisting(n, s);
+          const f = {
+            dialog: n,
+            close: () => I(n),
+            refit: () => n.dispatchEvent(new Event("sod:refit")),
+            id: d
+          };
+          return "onReused" in e && e.onReused?.(f), f;
+        }
+      }
+      this.modalRegistry.delete(d);
+    }
+    const o = document.createElement("dialog");
+    o.className = `sod-dialog sod-${i}`;
+    const x = [];
+    d && (o.dataset.sodId = d, g && (o.dataset.sodPersistent = "true"));
+    const c = document.createElement("section");
+    if (c.className = "sod-panel", c.tabIndex = -1, i === "offcanvas") {
+      const l = "placement" in e ? e.placement ?? "end" : "end", n = "animation" in e ? e.animation ?? "slide" : "slide";
+      c.classList.add(`sod-placement-${l}`), c.classList.add(`sod-anim-${n}`);
+    } else {
+      const l = "position" in e ? e.position ?? "center" : "center", n = "animation" in e ? e.animation ?? "fade" : "fade";
+      c.classList.add(`sod-modal-pos-${l}`), c.classList.add(`sod-modal-anim-${n}`), v && c.classList.add("sod-modal-autofit");
+    }
+    const h = document.createElement("header");
+    h.className = "sod-header";
+    const u = document.createElement("h2");
+    u.className = "sod-title", u.textContent = e.title;
+    const r = document.createElement("button");
+    r.type = "button", r.className = "sod-close", r.setAttribute("aria-label", "Close"), r.textContent = "×", r.addEventListener("click", () => I(o)), h.append(u, r);
+    const m = document.createElement("div");
+    m.className = "sod-body", A(m, e.content);
+    const a = document.createElement("footer");
+    a.className = "sod-footer";
+    const M = document.createElement("button");
+    M.type = "button", M.className = "sod-btn sod-btn-outline", M.textContent = e.cancelText ?? "取消", M.addEventListener("click", () => {
+      e.onCancel?.(), I(o);
+    });
+    const w = document.createElement("button");
+    w.type = "button", w.className = "sod-btn sod-btn-primary", w.textContent = e.confirmText ?? "确认", w.addEventListener("click", () => {
+      e.onConfirm?.(), I(o, L);
+    }), a.append(M, w), c.append(h, m, a), v && x.push(Y(o, c, h, m, a, H)), i === "modal" && "draggable" in e && e.draggable && F(c, e.dragHandle), o.append(c), (e.closeOnBackdrop ?? !0) && o.addEventListener("click", (l) => {
+      l.target === o && I(o);
+    }), (e.closeOnEsc ?? !0) || o.addEventListener("cancel", (l) => {
+      l.preventDefault();
+    }), o.addEventListener("close", () => {
+      const l = o.dataset.sodPersistent === "true", n = o.dataset.sodDestroy === "true";
+      (!l || n) && (x.forEach((f) => f()), o.remove(), d && this.modalRegistry.delete(d), delete o.dataset.sodDestroy);
+    }), document.body.append(o), s ? o.showModal() : o.show(), o.dispatchEvent(new Event("sod:refit")), d && this.modalRegistry.set(d, o);
+    const p = {
+      dialog: o,
+      close: () => I(o),
+      refit: () => o.dispatchEvent(new Event("sod:refit")),
+      id: d
+    };
+    return i === "modal" && "onCreated" in e && e.onCreated?.(p), p;
+  }
+  static openModal(e) {
+    return this.open({ ...e, kind: "modal" });
+  }
+  static openOffcanvas(e) {
+    return this.open({ ...e, kind: "offcanvas" });
+  }
+}
+function k(t) {
+  return O.openModal(t);
+}
+function T(t) {
+  return O.openOffcanvas(t);
+}
+export {
+  O as SoDialog,
+  k as openModal,
+  T as openOffcanvas
+};

package/dist/sodialog.umd.js

@@ -0,0 +1 @@
+(function(H,W){typeof exports=="object"&&typeof module<"u"?W(exports):typeof define=="function"&&define.amd?define(["exports"],W):(H=typeof globalThis<"u"?globalThis:H||self,W(H.SoDialog={}))})(this,(function(H){"use strict";function W(t,e){if(typeof e=="string"){t.innerHTML=e;return}t.append(e)}function I(t,e="hide"){if(e==="destroy"){t.dataset.sodDestroy="true",t.open&&t.close(),t.remove();return}t.open&&t.close()}function N(t,e){const i=e??"header";return i==="panel"?t:i==="header"?t.querySelector(".sod-header"):i==="title"?t.querySelector(".sod-title"):i==="body"?t.querySelector(".sod-body"):t.querySelector(i)??t.querySelector(".sod-header")}function T(t,e){const i=N(t,e);if(!i)return;t.classList.add("sod-modal-draggable"),i.classList.add("sod-drag-handle");let s=!1,L=0,v=0,d=null,g=0,p=0,o=0;const y=document.body.style.userSelect,c=(r,m)=>{const a=t.getBoundingClientRect(),M=Math.max(0,window.innerWidth-a.width),w=Math.max(0,window.innerHeight-a.height),$=Math.min(0,window.innerWidth-a.width),l=Math.min(0,window.innerHeight-a.height);return{left:Math.min(M,Math.max($,r)),top:Math.min(w,Math.max(l,m))}},h=r=>{if(!s)return;const m=c(r.clientX-L,r.clientY-v);p=m.left,o=m.top,g===0&&(g=window.requestAnimationFrame(()=>{g=0,t.style.inset="auto",t.style.left=`${p}px`,t.style.top=`${o}px`,t.style.right="auto",t.style.bottom="auto",t.style.margin="0",t.style.transform="none"}))},f=()=>{s=!1,i.classList.remove("is-dragging"),t.classList.remove("sod-is-dragging"),t.style.willChange="",document.body.style.userSelect=y,g!==0&&(window.cancelAnimationFrame(g),g=0),d!==null&&i.hasPointerCapture&&i.hasPointerCapture(d)&&i.releasePointerCapture(d),d=null,window.removeEventListener("pointermove",h),window.removeEventListener("pointerup",f),window.removeEventListener("pointercancel",f)};i.addEventListener("pointerdown",r=>{if(r.button!==0||r.target?.closest("button, input, select, textarea, a"))return;r.preventDefault(),t.classList.add("sod-is-dragging"),t.style.animation="none",t.style.transition="none",t.style.transform="none";const a=t.getBoundingClientRect();L=r.clientX-a.left,v=r.clientY-a.top,s=!0,d=r.pointerId,i.setPointerCapture(r.pointerId),t.style.position="fixed",t.style.left=`${a.left}px`,t.style.top=`${a.top}px`,t.style.width=`${Math.round(a.width)}px`,t.style.height=`${Math.round(a.height)}px`,t.style.inset="auto",t.style.right="auto",t.style.bottom="auto",t.style.margin="0",t.style.willChange="left, top",i.classList.add("is-dragging"),document.body.style.userSelect="none",window.addEventListener("pointermove",h),window.addEventListener("pointerup",f),window.addEventListener("pointercancel",f)})}function F(t,e,i,s,L,v){const g=Math.max(1,v?.hybridSwitchRatio??1.35),p=v?.refitOnContentChange??!0,o=Math.max(120,v?.autoFitMinWidth??280),y=Math.max(100,v?.autoFitMinHeight??160),c=v?.scrollMode?v.scrollMode:v?.autoFitUseScrollbar===!1?"viewport":"body";let h=0;const f=(n,u,E)=>Math.min(E,Math.max(u,n)),r=()=>{if(h=0,!t.isConnected||!t.open)return;const n=Math.max(o,window.innerWidth-32),u=Math.max(y,window.innerHeight-32);e.style.width="auto",e.style.height="auto",e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible";const E=Math.ceil(e.scrollWidth),b=Math.ceil(e.scrollHeight),D=E>n,R=b>u;if(c==="body"){const C=f(E,o,n),x=f(b,y,u);e.style.width=`${C}px`,e.style.maxWidth=`${n}px`,e.style.height=`${x}px`,e.style.maxHeight=`${u}px`;const S=i.offsetHeight,P=L.offsetHeight,A=Math.max(64,x-S-P);R?(s.style.maxHeight=`${A}px`,s.style.overflowY="auto"):(s.style.maxHeight="none",s.style.overflowY="hidden"),s.style.overflowX=D?"auto":"hidden",t.classList.remove("sod-modal-viewport-scroll")}else if(c==="hybrid")if(b>u*g){const x=Math.max(E,o),S=Math.max(b,y);e.style.width=`${x}px`,e.style.maxWidth="none",e.style.height=`${S}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",t.classList.add("sod-modal-viewport-scroll")}else{const x=f(E,o,n),S=f(b,y,u);e.style.width=`${x}px`,e.style.maxWidth=`${n}px`,e.style.height=`${S}px`,e.style.maxHeight=`${u}px`;const P=i.offsetHeight,A=L.offsetHeight,X=Math.max(64,S-P-A);R?(s.style.maxHeight=`${X}px`,s.style.overflowY="auto"):(s.style.maxHeight="none",s.style.overflowY="hidden"),s.style.overflowX=D?"auto":"hidden",t.classList.remove("sod-modal-viewport-scroll")}else if(c==="viewport"){const C=Math.max(E,o),x=Math.max(b,y);e.style.width=`${C}px`,e.style.maxWidth="none",e.style.height=`${x}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",x>u?t.classList.add("sod-modal-viewport-scroll"):t.classList.remove("sod-modal-viewport-scroll")}else{const C=D?Math.max(E,o):f(E,o,n);if(D||R){const x=Math.max(b,y);e.style.width=`${C}px`,e.style.maxWidth="none",e.style.height=`${x}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",t.classList.add("sod-modal-viewport-scroll")}else e.style.width=`${C}px`,e.style.maxWidth=`${n}px`,e.style.height="auto",e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",t.classList.remove("sod-modal-viewport-scroll")}},m=()=>{h===0&&(h=window.requestAnimationFrame(r))},a=new ResizeObserver(()=>{m()}),M=new MutationObserver(()=>{m()}),w=()=>{m()},$=()=>{m()};t.addEventListener("sod:refit",$),a.observe(s),a.observe(i),a.observe(L),p&&(M.observe(s,{subtree:!0,childList:!0,characterData:!0,attributes:!0}),s.addEventListener("load",w,!0),s.addEventListener("error",w,!0));const l=()=>{m()};return window.addEventListener("resize",l),m(),()=>{h!==0&&(window.cancelAnimationFrame(h),h=0),a.disconnect(),M.disconnect(),window.removeEventListener("resize",l),t.removeEventListener("sod:refit",$),s.removeEventListener("load",w,!0),s.removeEventListener("error",w,!0),t.classList.remove("sod-modal-viewport-scroll"),s.style.maxHeight="",s.style.overflowY="",s.style.overflowX=""}}class O{static modalRegistry=new Map;static modalIdSeed=0;static createAutoModalId(){return this.modalIdSeed+=1,`sod-modal-${this.modalIdSeed}`}static revealExisting(e,i){if(!e.isConnected)return;const s=e.querySelector(".sod-panel");s?.classList.remove("is-closing"),document.body.append(e),e.open||(i?e.showModal():e.show()),e.dispatchEvent(new Event("sod:refit")),s?.focus()}static open(e){const i=e.kind??"modal",s="useModal"in e?e.useModal??!0:!0,L=i==="modal"?e:void 0,v=i==="modal"&&("autoFitSize"in e?e.autoFitSize!==!1:!0);let d,g=!1,p=e.confirmAction??"hide";if(i==="modal"){const l="id"in e&&e.id?.trim()?e.id.trim():void 0;if(g=!!l,d=l??this.createAutoModalId(),e.confirmAction===void 0&&g&&(p="destroy"),l){const n=this.modalRegistry.get(d);if(n&&n.isConnected){this.revealExisting(n,s);const u={dialog:n,close:()=>I(n),refit:()=>n.dispatchEvent(new Event("sod:refit")),id:d};return"onReused"in e&&e.onReused?.(u),u}}this.modalRegistry.delete(d)}const o=document.createElement("dialog");o.className=`sod-dialog sod-${i}`;const y=[];d&&(o.dataset.sodId=d,g&&(o.dataset.sodPersistent="true"));const c=document.createElement("section");if(c.className="sod-panel",c.tabIndex=-1,i==="offcanvas"){const l="placement"in e?e.placement??"end":"end",n="animation"in e?e.animation??"slide":"slide";c.classList.add(`sod-placement-${l}`),c.classList.add(`sod-anim-${n}`)}else{const l="position"in e?e.position??"center":"center",n="animation"in e?e.animation??"fade":"fade";c.classList.add(`sod-modal-pos-${l}`),c.classList.add(`sod-modal-anim-${n}`),v&&c.classList.add("sod-modal-autofit")}const h=document.createElement("header");h.className="sod-header";const f=document.createElement("h2");f.className="sod-title",f.textContent=e.title;const r=document.createElement("button");r.type="button",r.className="sod-close",r.setAttribute("aria-label","Close"),r.textContent="×",r.addEventListener("click",()=>I(o)),h.append(f,r);const m=document.createElement("div");m.className="sod-body",W(m,e.content);const a=document.createElement("footer");a.className="sod-footer";const M=document.createElement("button");M.type="button",M.className="sod-btn sod-btn-outline",M.textContent=e.cancelText??"取消",M.addEventListener("click",()=>{e.onCancel?.(),I(o)});const w=document.createElement("button");w.type="button",w.className="sod-btn sod-btn-primary",w.textContent=e.confirmText??"确认",w.addEventListener("click",()=>{e.onConfirm?.(),I(o,p)}),a.append(M,w),c.append(h,m,a),v&&y.push(F(o,c,h,m,a,L)),i==="modal"&&"draggable"in e&&e.draggable&&T(c,e.dragHandle),o.append(c),(e.closeOnBackdrop??!0)&&o.addEventListener("click",l=>{l.target===o&&I(o)}),(e.closeOnEsc??!0)||o.addEventListener("cancel",l=>{l.preventDefault()}),o.addEventListener("close",()=>{const l=o.dataset.sodPersistent==="true",n=o.dataset.sodDestroy==="true";(!l||n)&&(y.forEach(u=>u()),o.remove(),d&&this.modalRegistry.delete(d),delete o.dataset.sodDestroy)}),document.body.append(o),s?o.showModal():o.show(),o.dispatchEvent(new Event("sod:refit")),d&&this.modalRegistry.set(d,o);const $={dialog:o,close:()=>I(o),refit:()=>o.dispatchEvent(new Event("sod:refit")),id:d};return i==="modal"&&"onCreated"in e&&e.onCreated?.($),$}static openModal(e){return this.open({...e,kind:"modal"})}static openOffcanvas(e){return this.open({...e,kind:"offcanvas"})}}function Y(t){return O.openModal(t)}function k(t){return O.openOffcanvas(t)}H.SoDialog=O,H.openModal=Y,H.openOffcanvas=k,Object.defineProperty(H,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/lib.d.ts

@@ -0,0 +1,60 @@
+import './sodialog.css';
+export type SoPanelKind = 'modal' | 'offcanvas';
+export type SoOffcanvasPlacement = 'start' | 'end' | 'top' | 'bottom';
+export type SoOffcanvasAnimation = 'slide' | 'fade' | 'zoom';
+export type SoModalPosition = 'center' | 'top' | 'bottom';
+export type SoModalAnimation = 'slide' | 'fade' | 'zoom';
+export type SoModalDragHandle = 'header' | 'title' | 'body' | 'panel' | string;
+export type SoModalScrollMode = 'body' | 'viewport' | 'none' | 'hybrid';
+export interface SoDialogBaseOptions {
+    title: string;
+    content: string | Node;
+    confirmText?: string;
+    cancelText?: string;
+    confirmAction?: 'hide' | 'destroy';
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+export interface SoDialogModalOptions extends SoDialogBaseOptions {
+    id?: string;
+    kind?: 'modal';
+    position?: SoModalPosition;
+    animation?: SoModalAnimation;
+    useModal?: boolean;
+    draggable?: boolean;
+    dragHandle?: SoModalDragHandle;
+    autoFitSize?: boolean;
+    scrollMode?: SoModalScrollMode;
+    hybridSwitchRatio?: number;
+    autoFitUseScrollbar?: boolean;
+    refitOnContentChange?: boolean;
+    autoFitMinWidth?: number;
+    autoFitMinHeight?: number;
+    onCreated?: (handle: SoDialogHandle) => void;
+    onReused?: (handle: SoDialogHandle) => void;
+}
+export interface SoDialogOffcanvasOptions extends SoDialogBaseOptions {
+    kind: 'offcanvas';
+    placement?: SoOffcanvasPlacement;
+    animation?: SoOffcanvasAnimation;
+}
+export type SoDialogOptions = SoDialogModalOptions | SoDialogOffcanvasOptions;
+export interface SoDialogHandle {
+    dialog: HTMLDialogElement;
+    close: () => void;
+    refit: () => void;
+    id?: string;
+}
+export declare class SoDialog {
+    private static modalRegistry;
+    private static modalIdSeed;
+    private static createAutoModalId;
+    private static revealExisting;
+    static open(options: SoDialogOptions): SoDialogHandle;
+    static openModal(options: SoDialogModalOptions): SoDialogHandle;
+    static openOffcanvas(options: Omit<SoDialogOffcanvasOptions, 'kind'>): SoDialogHandle;
+}
+export declare function openModal(options: SoDialogModalOptions): SoDialogHandle;
+export declare function openOffcanvas(options: Omit<SoDialogOffcanvasOptions, 'kind'>): SoDialogHandle;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "sodialog",
+  "version": "0.1.1",
+  "description": "A reusable HTML5 dialog-based modal and offcanvas library.",
+  "keywords": [
+    "dialog",
+    "modal",
+    "offcanvas",
+    "typescript",
+    "html5"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/sodialog.es.js",
+  "module": "./dist/sodialog.es.js",
+  "types": "./dist/types/lib.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/lib.d.ts",
+      "import": "./dist/sodialog.es.js",
+      "default": "./dist/sodialog.es.js"
+    },
+    "./style.css": "./dist/sodialog.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && npm run build:types",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:demo": "vite build --mode demo",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run lint && npm run build"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.0.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1"
+  }
+}