@yh-ui/components 0.1.0

package/dist/dialog/__tests__/dialog.test.mjs

@@ -0,0 +1,388 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick, h, defineComponent } from "vue";
+import { YhDialog } from "../index.mjs";
+import { useDialog } from "../src/use-dialog.mjs";
+describe("Dialog", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+  it("should render incorrectly when modelValue is false", () => {
+    mount(YhDialog, { props: { modelValue: false, title: "Test Dialog" } });
+    expect(document.querySelector(".yh-dialog")).toBeFalsy();
+  });
+  it("should render title and content correctly when open", async () => {
+    mount(YhDialog, {
+      props: { modelValue: true, title: "Hello Dialog" },
+      slots: { default: () => h("div", { class: "dialog-content" }, "Content Here") }
+    });
+    await nextTick();
+    const dialog = document.querySelector(".yh-dialog");
+    expect(dialog).toBeTruthy();
+    expect(dialog?.querySelector(".yh-dialog__title")?.textContent).toBe("Hello Dialog");
+    expect(dialog?.querySelector(".dialog-content")).toBeTruthy();
+  });
+  it("should support center mode", async () => {
+    mount(YhDialog, { props: { modelValue: true, center: true } });
+    await nextTick();
+    expect(document.querySelector(".yh-dialog")?.classList.contains("yh-dialog--center")).toBe(true);
+  });
+  it("should support glass mode", async () => {
+    mount(YhDialog, { props: { modelValue: true, glass: true } });
+    await nextTick();
+    expect(document.querySelector(".yh-dialog")?.classList.contains("yh-dialog--glass")).toBe(true);
+  });
+  it("should call beforeClose when closing", async () => {
+    const beforeClose = vi.fn((done) => done());
+    mount(YhDialog, { props: { modelValue: true, beforeClose } });
+    await nextTick();
+    const closeBtn = document.querySelector(".yh-dialog__headerbtn");
+    closeBtn.click();
+    expect(beforeClose).toHaveBeenCalled();
+  });
+  it("should support custom close icon", async () => {
+    mount(YhDialog, { props: { modelValue: true, closeIcon: "custom-close" } });
+    await nextTick();
+    expect(document.querySelector(".yh-dialog__headerbtn .yh-icon")).toBeTruthy();
+  });
+  it("should support headerAlign, contentAlign and footerAlign", async () => {
+    mount(YhDialog, {
+      props: {
+        modelValue: true,
+        headerAlign: "right",
+        contentAlign: "center",
+        footerAlign: "left"
+      }
+    });
+    await nextTick();
+    const header = document.querySelector(".yh-dialog__header");
+    const body = document.querySelector(".yh-dialog__body");
+    const footer = document.querySelector(".yh-dialog__footer");
+    expect(header.style.justifyContent).toBe("flex-end");
+    expect(body.style.textAlign).toBe("center");
+    expect(footer.style.justifyContent).toBe("flex-start");
+  });
+  it("should support swapFooterButtons", async () => {
+    mount(YhDialog, {
+      props: { modelValue: true, swapFooterButtons: true, footerAlign: "right" }
+    });
+    await nextTick();
+    const footer = document.querySelector(".yh-dialog__footer");
+    expect(footer.style.flexDirection).toBe("row-reverse");
+    expect(footer.style.justifyContent).toBe("flex-start");
+  });
+  it("should emit confirm and cancel events", async () => {
+    const onConfirm = vi.fn();
+    const onCancel = vi.fn();
+    mount(YhDialog, { props: { modelValue: true, onConfirm, onCancel } });
+    await nextTick();
+    const btns = document.querySelectorAll(".yh-dialog__footer .yh-button");
+    if (btns.length >= 2) {
+      ;
+      btns[1].click();
+      await nextTick();
+      expect(onConfirm).toHaveBeenCalled();
+    }
+  });
+  it("should support draggable dialog via prop", async () => {
+    mount(YhDialog, { props: { modelValue: true, draggable: true, title: "Drag Me" } });
+    await nextTick();
+    const header = document.querySelector(".yh-dialog__header");
+    expect(header).toBeTruthy();
+    expect(document.querySelector(".yh-dialog")).toBeTruthy();
+  });
+  it("should support fullscreen mode class", async () => {
+    mount(YhDialog, { props: { modelValue: true, fullscreen: true } });
+    await nextTick();
+    const dialog = document.querySelector(".yh-dialog");
+    expect(dialog).toBeTruthy();
+    const hasFullscreen = dialog?.classList.contains("is-fullscreen") || dialog?.classList.contains("yh-dialog--fullscreen") || dialog?.style.width === "100%";
+    expect(document.querySelector(".yh-dialog")).toBeTruthy();
+  });
+  it("should support custom width, top and z-index", async () => {
+    mount(YhDialog, {
+      props: { modelValue: true, width: "600px", top: "20vh", zIndex: 3e3 }
+    });
+    await nextTick();
+    const dialog = document.querySelector(".yh-dialog");
+    expect(dialog.style.width).toBe("600px");
+  });
+  it("should render footer slot", async () => {
+    mount(YhDialog, {
+      props: { modelValue: true },
+      slots: { footer: () => h("div", { class: "custom-footer" }, "My Footer") }
+    });
+    await nextTick();
+    expect(document.querySelector(".custom-footer")).toBeTruthy();
+  });
+  it("should render header slot", async () => {
+    mount(YhDialog, {
+      props: { modelValue: true },
+      slots: { header: () => h("span", { class: "custom-header" }, "My Header") }
+    });
+    await nextTick();
+    expect(document.querySelector(".custom-header")).toBeTruthy();
+  });
+  describe("Complex Interactions", () => {
+    it("should support draggable logic", async () => {
+      const onDragStart = vi.fn();
+      const onDragEnd = vi.fn();
+      mount(YhDialog, {
+        props: { modelValue: true, draggable: true, onDragStart, onDragEnd }
+      });
+      await nextTick();
+      const header = document.querySelector(".yh-dialog__header");
+      const mousedown = new MouseEvent("mousedown", { button: 0, bubbles: true });
+      header.dispatchEvent(mousedown);
+      expect(onDragStart).toHaveBeenCalled();
+      const mousemove = new MouseEvent("mousemove", { clientX: 100, clientY: 100, bubbles: true });
+      document.dispatchEvent(mousemove);
+      const mouseup = new MouseEvent("mouseup", { bubbles: true });
+      document.dispatchEvent(mouseup);
+      expect(onDragEnd).toHaveBeenCalled();
+    });
+    it("should trap focus when tabbing", async () => {
+      mount(YhDialog, {
+        props: { modelValue: true },
+        slots: {
+          default: () => [
+            h("input", { id: "input1", tabIndex: 0 }),
+            h("button", { id: "btn2", tabIndex: 0 })
+          ]
+        }
+      });
+      await nextTick();
+      const dialog = document.querySelector(".yh-dialog");
+      const input1 = document.getElementById("input1");
+      const btn2 = document.getElementById("btn2");
+      btn2.focus();
+      const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true });
+      dialog.dispatchEvent(event);
+    });
+    it("should close on Escape key", async () => {
+      const onUpdateModelValue = vi.fn();
+      mount(YhDialog, {
+        props: {
+          modelValue: true,
+          closeOnPressEscape: true,
+          "onUpdate:modelValue": onUpdateModelValue
+        }
+      });
+      await nextTick();
+      const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true });
+      window.dispatchEvent(event);
+      expect(onUpdateModelValue).toHaveBeenCalledWith(false);
+    });
+    it("should close on modal click", async () => {
+      const onUpdateModelValue = vi.fn();
+      mount(YhDialog, {
+        props: {
+          modelValue: true,
+          closeOnClickModal: true,
+          "onUpdate:modelValue": onUpdateModelValue
+        }
+      });
+      await nextTick();
+      const wrapper = document.querySelector(".yh-dialog__wrapper");
+      const mousedown = new MouseEvent("mousedown", { bubbles: true });
+      wrapper.dispatchEvent(mousedown);
+      const click = new MouseEvent("click", { bubbles: true });
+      wrapper.dispatchEvent(click);
+      expect(onUpdateModelValue).toHaveBeenCalledWith(false);
+    });
+    it("should parse style string correctly", async () => {
+      mount(YhDialog, {
+        props: { modelValue: true, style: "color: blue; font-size: 20px;" }
+      });
+      await nextTick();
+      const dialog = document.querySelector(".yh-dialog");
+      expect(dialog.style.color).toBe("blue");
+      expect(dialog.style.fontSize).toBe("20px");
+    });
+    it("should handle type icons", async () => {
+      mount(YhDialog, {
+        props: { modelValue: true, type: "success", showIcon: true }
+      });
+      await nextTick();
+      expect(document.querySelector(".yh-dialog--success")).toBeTruthy();
+      expect(document.querySelector(".yh-dialog__type-icon")).toBeTruthy();
+    });
+    it("should destroy content on close when destroyOnClose is true", async () => {
+      const wrapper = mount(YhDialog, {
+        props: { modelValue: true, destroyOnClose: true },
+        slots: { default: () => h("div", { class: "destroy-me" }, "I will be destroyed") }
+      });
+      await nextTick();
+      expect(document.querySelector(".destroy-me")).toBeTruthy();
+      await wrapper.setProps({ modelValue: false });
+      await nextTick();
+    });
+    it("should handle dragging boundaries when overflow is false", async () => {
+      mount(YhDialog, {
+        props: { modelValue: true, draggable: true, overflow: false }
+      });
+      await nextTick();
+      const header = document.querySelector(".yh-dialog__header");
+      const dialog = document.querySelector(".yh-dialog");
+      vi.spyOn(dialog, "getBoundingClientRect").mockReturnValue({
+        left: 100,
+        right: 500,
+        top: 100,
+        bottom: 400,
+        width: 400,
+        height: 300,
+        x: 100,
+        y: 100,
+        toJSON: () => {
+        }
+      });
+      const mousedown = new MouseEvent("mousedown", { button: 0, bubbles: true });
+      header.dispatchEvent(mousedown);
+      const mousemove = new MouseEvent("mousemove", { clientX: 2e3, clientY: 2e3, bubbles: true });
+      document.dispatchEvent(mousemove);
+      expect(document.querySelector(".yh-dialog")).toBeTruthy();
+    });
+    it("should trap focus with Shift+Tab", async () => {
+      mount(YhDialog, {
+        props: { modelValue: true },
+        slots: {
+          default: () => [
+            h("input", { id: "input1", tabIndex: 0 }),
+            h("button", { id: "btn2", tabIndex: 0 })
+          ]
+        }
+      });
+      await nextTick();
+      const dialog = document.querySelector(".yh-dialog");
+      const input1 = document.getElementById("input1");
+      const btn2 = document.getElementById("btn2");
+      input1.focus();
+      const event = new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true });
+      window.dispatchEvent(event);
+    });
+    it("should handle transformOrigin: mouse", async () => {
+      const clickEvent = new MouseEvent("click", { clientX: 100, clientY: 100 });
+      document.dispatchEvent(clickEvent);
+      mount(YhDialog, {
+        props: { modelValue: true, transformOrigin: "mouse" }
+      });
+      await nextTick();
+      const dialog = document.querySelector(".yh-dialog");
+      expect(dialog.style.transformOrigin).toBeDefined();
+    });
+    it("should prevent modal close if mousedown was inside dialog", async () => {
+      const onUpdateModelValue = vi.fn();
+      mount(YhDialog, {
+        props: {
+          modelValue: true,
+          closeOnClickModal: true,
+          "onUpdate:modelValue": onUpdateModelValue
+        }
+      });
+      await nextTick();
+      const dialog = document.querySelector(".yh-dialog");
+      const wrapper = document.querySelector(".yh-dialog__wrapper");
+      const mousedown = new MouseEvent("mousedown", { bubbles: true });
+      dialog.dispatchEvent(mousedown);
+      const click = new MouseEvent("click", { bubbles: true });
+      wrapper.dispatchEvent(click);
+      expect(onUpdateModelValue).not.toHaveBeenCalled();
+    });
+  });
+});
+describe("useDialog", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+  it("should show dialog and resolve when confirm clicked", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { showDialog } = useDialog();
+        const open = async () => {
+          return showDialog({ title: "\u6D4B\u8BD5\u5BF9\u8BDD\u6846" });
+        };
+        return { open };
+      },
+      template: '<button id="open-btn" @click="open">Open</button>'
+    });
+    const wrapper = mount(TestComponent);
+    wrapper.vm.open();
+    await nextTick();
+    const dialog = document.querySelector(".yh-dialog");
+    expect(dialog).toBeTruthy();
+    const btns = document.querySelectorAll(".yh-dialog__footer .yh-button");
+    if (btns.length >= 2) {
+      ;
+      btns[1].click();
+      await nextTick();
+    }
+  });
+  it("should show dialog and resolve when cancel clicked", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { showDialog } = useDialog();
+        const open = () => showDialog({ title: "\u53D6\u6D88\u6D4B\u8BD5" });
+        return { open };
+      },
+      template: '<button @click="open">Open</button>'
+    });
+    mount(TestComponent).vm.open();
+    await nextTick();
+    const btns = document.querySelectorAll(".yh-dialog__footer .yh-button");
+    if (btns.length >= 1) {
+      ;
+      btns[0].click();
+      await nextTick();
+    }
+    expect(document.querySelector(".yh-dialog")).toBeTruthy();
+  });
+  it("should show dialog with string content", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { showDialog } = useDialog();
+        const open = () => showDialog({
+          title: "\u5185\u5BB9\u6D4B\u8BD5",
+          content: "\u8FD9\u662F\u5185\u5BB9"
+        });
+        return { open };
+      },
+      template: '<button @click="open">Open</button>'
+    });
+    mount(TestComponent).vm.open();
+    await nextTick();
+    expect(document.querySelector(".yh-dialog")).toBeTruthy();
+  });
+  it("should show dialog with slot-like options", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { showDialog } = useDialog();
+        const open = () => showDialog({
+          title: "\u63D2\u69FD\u6D4B\u8BD5",
+          header: () => h("span", "Custom Header"),
+          default: () => h("span", "Custom Body"),
+          footer: () => h("span", "Custom Footer")
+        });
+        return { open };
+      },
+      template: '<button @click="open">Open</button>'
+    });
+    mount(TestComponent).vm.open();
+    await nextTick();
+    expect(document.querySelector(".yh-dialog")).toBeTruthy();
+  });
+  it("should call onClosed callback", async () => {
+    const onClosed = vi.fn();
+    const TestComponent = defineComponent({
+      setup() {
+        const { showDialog } = useDialog();
+        const open = () => showDialog({ title: "Closed Test", onClosed });
+        return { open };
+      },
+      template: '<button @click="open">Open</button>'
+    });
+    mount(TestComponent).vm.open();
+    await nextTick();
+    const closeBtn = document.querySelector(".yh-dialog__headerbtn");
+    if (closeBtn) closeBtn.click();
+  });
+});

package/dist/dialog/index.cjs

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  YhDialog: true,
+  YhDialogMethod: true
+};
+module.exports = exports.YhDialogMethod = exports.YhDialog = void 0;
+var _utils = require("@yh-ui/utils");
+var _dialog = _interopRequireDefault(require("./src/dialog.vue"));
+var _method = _interopRequireDefault(require("./src/method.cjs"));
+var _dialog2 = require("./src/dialog.cjs");
+Object.keys(_dialog2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _dialog2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dialog2[key];
+    }
+  });
+});
+var _useDialog = require("./src/use-dialog.cjs");
+Object.keys(_useDialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useDialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useDialog[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const YhDialog = exports.YhDialog = (0, _utils.withInstall)(_dialog.default);
+const YhDialogMethod = exports.YhDialogMethod = (0, _utils.withInstallFunction)(_method.default, "$dialog");
+module.exports = YhDialog;

package/dist/dialog/index.d.ts

@@ -0,0 +1,8 @@
+import Dialog from './src/dialog.vue';
+export declare const YhDialog: any;
+export declare const YhDialogMethod: import("@yh-ui/utils").SFCWithInstall<import("./src/method").DialogMethod>;
+export default YhDialog;
+export * from './src/dialog';
+export * from './src/use-dialog';
+export type { DialogMethod } from './src/method';
+export type DialogInstance = InstanceType<typeof Dialog>;

package/dist/dialog/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall, withInstallFunction } from "@yh-ui/utils";
+import Dialog from "./src/dialog.vue";
+import DialogMethod from "./src/method.mjs";
+export const YhDialog = withInstall(Dialog);
+export const YhDialogMethod = withInstallFunction(DialogMethod, "$dialog");
+export default YhDialog;
+export * from "./src/dialog.mjs";
+export * from "./src/use-dialog.mjs";

package/dist/dialog/src/dialog.cjs

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dialogProps = exports.dialogEmits = void 0;
+const dialogProps = exports.dialogProps = {
+  /** 是否显示 */
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  /** 标题 */
+  title: {
+    type: [String, Function, Object]
+  },
+  /** 是否显示 icon */
+  showIcon: {
+    type: Boolean,
+    default: true
+  },
+  /** 整体样式 */
+  style: {
+    type: [String, Object]
+  },
+  /** 标题类名 */
+  titleClass: String,
+  /** 标题样式 */
+  titleStyle: [Object, String],
+  /** 动画起源 */
+  transformOrigin: {
+    type: String,
+    default: "mouse"
+  },
+  /** 对话框类型 */
+  type: {
+    type: String,
+    default: "default"
+  },
+  /** 是否显示 loading 状态 */
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  /** 对话框内容 */
+  content: {
+    type: [String, Function, Object]
+  },
+  /** 内容类名 */
+  contentClass: String,
+  /** 内容样式 */
+  contentStyle: [Object, String],
+  /** 操作区域内容（渲染函数） */
+  action: {
+    type: [Function, Object]
+  },
+  /** 操作区域类名 */
+  actionClass: String,
+  /** 操作区域样式 */
+  actionStyle: [Object, String],
+  /** 是否自动聚焦第一个可聚焦元素 */
+  autoFocus: {
+    type: Boolean,
+    default: true
+  },
+  /** 宽度 */
+  width: {
+    type: [String, Number],
+    default: "50%"
+  },
+  /** 距离顶部距离 */
+  top: {
+    type: String,
+    default: "15vh"
+  },
+  /** 是否全屏 */
+  fullscreen: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否垂直居中显示 */
+  alignCenter: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否整体居中 (标题、内容、底部都居中) */
+  center: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否开启亚克力玻璃模式 */
+  glass: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否开启拖拽功能 */
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否锁定视口滚动 */
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否显示遮罩层 */
+  modal: {
+    type: Boolean,
+    default: true
+  },
+  /** 点击遮罩层是否关闭 */
+  closeOnClickModal: {
+    type: Boolean,
+    default: true
+  },
+  /** 按下 ESC 是否关闭 */
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
+  },
+  /** 是否显示关闭按钮 */
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  /** 自定义关闭图标 */
+  closeIcon: {
+    type: String,
+    default: "close"
+  },
+  /** 是否在关闭时销毁内容 */
+  destroyOnClose: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否允许拖拽超出边界 */
+  overflow: {
+    type: Boolean,
+    default: false
+  },
+  /** 是否显示默认页脚按钮 */
+  showFooter: {
+    type: Boolean,
+    default: true
+  },
+  cancelText: {
+    type: String,
+    default: ""
+  },
+  confirmText: {
+    type: String,
+    default: ""
+  },
+  /** 遮罩层自定义类名 */
+  modalClass: String,
+  /** 对话框自定义类名 */
+  customClass: String,
+  /** z-index 层级 */
+  zIndex: {
+    type: Number,
+    default: 2e3
+  },
+  /** 关闭前的钩子 */
+  beforeClose: {
+    type: Function
+  },
+  /** 挂载节点 */
+  teleportTo: {
+    type: [String, Object],
+    default: "body"
+  },
+  /** 标题对齐方式 (开启 center 后失效) */
+  headerAlignCenter: {
+    type: Boolean,
+    default: false
+  },
+  /** 标题对齐方式 */
+  headerAlign: {
+    type: String,
+    default: "left"
+  },
+  /** 内容对齐方式 */
+  contentAlign: {
+    type: String,
+    default: "left"
+  },
+  /** 底部对齐方式 (开启 center 后失效) */
+  footerAlignCenter: {
+    type: Boolean,
+    default: false
+  },
+  /** 底部按钮对齐方式 */
+  footerAlign: {
+    type: String,
+    default: "right"
+  },
+  /** 是否交换确认和取消按钮的位置 */
+  swapFooterButtons: {
+    type: Boolean,
+    default: false
+  },
+  /** 主题覆盖变量 */
+  themeOverrides: {
+    type: Object,
+    default: void 0
+  }
+};
+const dialogEmits = exports.dialogEmits = {
+  "update:modelValue": value => typeof value === "boolean",
+  open: () => true,
+  opened: () => true,
+  close: () => true,
+  closed: () => true,
+  confirm: () => true,
+  cancel: () => true,
+  dragStart: evt => evt instanceof MouseEvent,
+  dragMove: evt => evt instanceof MouseEvent,
+  dragEnd: evt => evt instanceof MouseEvent
+};