@yh-ui/components 0.1.21 → 0.1.22

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

@@ -1,29 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderToString } from "@vue/server-renderer";
-import { h } from "vue";
-import { YhDialog } from "../index.mjs";
-describe("Dialog SSR", () => {
-  it("should render correctly on server side", async () => {
-    const app = h(YhDialog, {
-      modelValue: true,
-      title: "SSR Title",
-      content: "SSR Content"
-    });
-    try {
-      const html = await renderToString(app);
-      expect(html).toBeDefined();
-    } catch (e) {
-      expect(e).toBeUndefined();
-    }
-  });
-  it("should render teleport markers in SSR", async () => {
-    const app = h(YhDialog, {
-      modelValue: true,
-      type: "success",
-      title: "SSR Title"
-    });
-    const html = await renderToString(app);
-    expect(html).toContain("<!--teleport start-->");
-    expect(html).toContain("<!--teleport end-->");
-  });
-});

package/dist/dialog/__tests__/dialog.test.cjs

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