@window-splitter/vue 0.8.5

package/src/VueWindowSplitter.test.ts

@@ -0,0 +1,275 @@
+import "../.storybook/preview.css";
+
+import { test, expect, describe, vi } from "vitest";
+import { cleanup, getByText, waitFor } from "@testing-library/vue";
+import { fireEvent } from "@testing-library/dom";
+import { composeStories } from "@storybook/vue3";
+import { createTestUtils, dragHandle } from "@window-splitter/interface/test";
+import * as Cookies from "tiny-cookie";
+
+import * as stories from "./VueWindowSplitter.stories.js";
+import { PanelGroupHandle, PanelHandle } from "@window-splitter/interface";
+
+const {
+  Simple,
+  Collapsible,
+  VerticalLayout,
+  ConditionalPanel,
+  DynamicConstraints,
+  Autosave,
+  AutosaveCollapsible,
+  AutosaveCookie,
+} = composeStories(stories);
+
+const { waitForMeasurement, expectTemplate, waitForCondition } =
+  createTestUtils({
+    waitFor,
+  });
+
+test("horizontal layout", async () => {
+  const handle = { value: null } as { value: PanelGroupHandle | null };
+  await Simple.run({ args: { handle } });
+
+  await waitForMeasurement(handle.value!);
+
+  expect(getByText(document.body, "Panel 1")).toBeInTheDocument();
+  expect(getByText(document.body, "Panel 2")).toBeInTheDocument();
+
+  await expectTemplate(handle.value!, "244px 10px 244px");
+
+  // Should respect the min
+  await dragHandle({ delta: 300 });
+  await expectTemplate(handle.value!, "388px 10px 100px");
+});
+
+test("vertical layout", async () => {
+  const handle = { value: null } as { value: PanelGroupHandle | null };
+  await VerticalLayout.run({ args: { handle } });
+  await waitForMeasurement(handle.value!);
+
+  expect(getByText(document.body, "top")).toBeInTheDocument();
+  expect(getByText(document.body, "middle")).toBeInTheDocument();
+  expect(getByText(document.body, "bottom")).toBeInTheDocument();
+
+  await expectTemplate(handle.value!, "96px 10px 108px 10px 96px");
+
+  // Should respect the min
+  await dragHandle({ delta: 100, orientation: "vertical" });
+  await expectTemplate(handle.value!, "172px 10px 64px 10px 64px");
+});
+
+test("Conditional Panels", async () => {
+  const handle = { value: null } as { value: PanelGroupHandle | null };
+  await ConditionalPanel.run({ args: { handle } });
+  await waitForMeasurement(handle.value!);
+
+  await expectTemplate(handle.value!, "244px 10px 244px");
+
+  getByText(document.body, "Expand").click();
+  await expectTemplate(handle.value!, "244px 10px 134px 10px 100px");
+
+  getByText(document.body, "Close").click();
+  await expectTemplate(handle.value!, "244px 10px 244px");
+});
+
+test("Dynamic constraints", async () => {
+  const handle = { value: null } as { value: PanelGroupHandle | null };
+  await DynamicConstraints.run({ args: { handle } });
+  await waitForMeasurement(handle.value!);
+
+  await waitForMeasurement(handle.value!);
+  await expectTemplate(handle.value!, "100px 10px 178px 10px 700px");
+
+  getByText(document.body, "Toggle Custom").click();
+  await expectTemplate(handle.value!, "500px 10px 178px 10px 300px");
+
+  getByText(document.body, "Toggle Custom").click();
+  await expectTemplate(handle.value!, "400px 10px 178px 10px 400px");
+});
+
+describe("Autosave", () => {
+  test("localStorage", async () => {
+    localStorage.clear();
+
+    const handle = { value: null } as { value: PanelGroupHandle | null };
+    await Autosave.run({ args: { handle } });
+
+    await waitForMeasurement(handle.value!);
+    await expectTemplate(handle.value!, "244px 10px 244px");
+
+    await dragHandle({ delta: 100 });
+    await expectTemplate(handle.value!, "342px 10px 146px");
+
+    await waitForCondition(() =>
+      Boolean(localStorage.getItem("autosave-example-vue")),
+    );
+    const obj = JSON.parse(
+      localStorage.getItem("autosave-example-vue") || "{}",
+    );
+    expect(obj.items).toMatchSnapshot();
+  });
+
+  test("callback", async () => {
+    localStorage.clear();
+
+    const handle = { value: null } as { value: PanelGroupHandle | null };
+    const spy = vi.fn();
+
+    await AutosaveCollapsible.run({ args: { handle, onCollapseChange: spy } });
+
+    await dragHandle({ delta: -200 });
+    await expectTemplate(handle.value!, "100px 10px 388px");
+    expect(spy).toHaveBeenCalledWith(true);
+
+    cleanup();
+
+    const spy2 = vi.fn();
+    await AutosaveCollapsible.run({ args: { handle, onCollapseChange: spy2 } });
+
+    await expectTemplate(handle.value!, "100px 10px 388px");
+    await dragHandle({ delta: 200 });
+    expect(spy2).toHaveBeenCalledWith(false);
+  });
+
+  test("cookie", async () => {
+    // clear cookies
+    document.cookie = "test=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+
+    const handle = { value: null } as { value: PanelGroupHandle | null };
+    await AutosaveCookie.run({ args: { handle } });
+
+    await waitForMeasurement(handle.value!);
+    await expectTemplate(handle.value!, "245px 10px 245px");
+
+    await dragHandle({ delta: 100 });
+    await expectTemplate(handle.value!, "343px 10px 147px");
+
+    await waitForCondition(() =>
+      document.cookie.includes("autosave-cookie-vue"),
+    );
+
+    expect(document.cookie).toMatchSnapshot();
+
+    const snapshot = Cookies.get("autosave-cookie-vue");
+
+    cleanup();
+
+    const handle2 = { value: null } as { value: PanelGroupHandle | null };
+    await AutosaveCookie.run({
+      args: { handle: handle2, snapshot: JSON.parse(snapshot!) },
+    });
+
+    await expectTemplate(handle2.value!, "343px 10px 147px");
+  });
+});
+
+test("Keyboard interactions with collapsed panels", async () => {
+  const handle = { value: null } as { value: PanelGroupHandle | null };
+  await Collapsible.run({ args: { handle } });
+
+  await waitForMeasurement(handle.value!);
+  await expectTemplate(handle.value!, "209px 10px 209px 10px 60px");
+
+  const resizer2 = document.getElementById("resizer-2")!;
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(handle.value!, "209px 10px 169px 10px 100px");
+
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  await expectTemplate(handle.value!, "209px 10px 165px 10px 104px");
+
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft", shiftKey: true });
+  await expectTemplate(
+    handle.value!,
+    "209.03125px 10px 149.984375px 10px 118.984375px",
+  );
+
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(handle.value!, "209.03125px 10px 208.96875px 10px 60px");
+
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(
+    handle.value!,
+    "209.0625px 10px 149.96875px 10px 118.96875px",
+  );
+});
+
+describe("imperative panel API", async () => {
+  test("panel group", async () => {
+    const handle = { value: null } as { value: PanelGroupHandle | null };
+
+    await Collapsible.run({ args: { handle } });
+    await waitForMeasurement(handle.value!);
+
+    expect(handle.value!.getPercentageSizes()).toMatchInlineSnapshot(`
+      [
+        0.5,
+        0.020080321285140562,
+        0.5,
+        0.020080321285140562,
+        0.12048192771084337,
+      ]
+    `);
+
+    expect(handle.value!.getPixelSizes()).toMatchInlineSnapshot(`
+      [
+        209,
+        10,
+        209,
+        10,
+        60,
+      ]
+    `);
+
+    await expectTemplate(handle.value!, "209px 10px 209px 10px 60px");
+  });
+
+  test("panel", async () => {
+    const handle = { value: null } as { value: PanelGroupHandle | null };
+    const rightHandle = { value: null } as { value: PanelHandle | null };
+    const leftHandle = { value: null } as { value: PanelHandle | null };
+
+    await Collapsible.run({ args: { handle, leftHandle, rightHandle } });
+    await waitForMeasurement(handle.value!);
+
+    expect(rightHandle.value!.isCollapsed()).toBe(true);
+    expect(rightHandle.value!.isExpanded()).toBe(false);
+
+    rightHandle.value!.expand();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(rightHandle.value!.isCollapsed()).toBe(false);
+    expect(rightHandle.value!.isExpanded()).toBe(true);
+
+    rightHandle.value!.collapse();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(rightHandle.value!.isCollapsed()).toBe(true);
+    expect(rightHandle.value!.isExpanded()).toBe(false);
+
+    // Test the non controlled version
+
+    expect(leftHandle.value!.isCollapsed()).toBe(false);
+    expect(leftHandle.value!.isExpanded()).toBe(true);
+
+    leftHandle.value!.collapse();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(leftHandle.value!.isCollapsed()).toBe(true);
+    expect(leftHandle.value!.isExpanded()).toBe(false);
+    expect(rightHandle.value!.getPercentageSize()).toBe(
+      leftHandle.value!.getPercentageSize(),
+    );
+    expect(rightHandle.value!.getPixelSize()).toBe(
+      leftHandle.value!.getPixelSize(),
+    );
+
+    leftHandle.value!.expand();
+    await new Promise((resolve) => setTimeout(resolve, 5000));
+
+    expect(leftHandle.value!.isCollapsed()).toBe(false);
+    expect(leftHandle.value!.isExpanded()).toBe(true);
+  });
+});

package/src/__snapshots__/VueWindowSplitter.test.ts.snap

@@ -0,0 +1,58 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Autosave > cookie 1`] = `"autosave-cookie-vue=%7B%22size%22%3A%7B%22x%22%3A0%2C%22y%22%3A0%2C%22width%22%3A500%2C%22height%22%3A198%2C%22top%22%3A0%2C%22right%22%3A500%2C%22bottom%22%3A198%2C%22left%22%3A0%7D%2C%22items%22%3A%5B%7B%22type%22%3A%22panel%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.7%22%7D%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsible%22%3Afalse%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%22panel-1%22%2C%22isStaticAtRest%22%3Afalse%7D%2C%7B%22type%22%3A%22handle%22%2C%22size%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%2210%22%7D%2C%22id%22%3A%22resizer1%22%7D%2C%7B%22type%22%3A%22panel%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.3%22%7D%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsible%22%3Afalse%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%22panel-2%22%2C%22isStaticAtRest%22%3Afalse%7D%5D%2C%22orientation%22%3A%22horizontal%22%2C%22dragOvershoot%22%3A%220%22%2C%22groupId%22%3A%22autosave-cookie-vue%22%2C%22autosaveStrategy%22%3A%22cookie%22%7D"`;
+
+exports[`Autosave > localStorage 1`] = `
+[
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "collapsible": false,
+    "currentValue": {
+      "type": "percent",
+      "value": "0.70081967213114754098",
+    },
+    "id": "panel-1",
+    "isStaticAtRest": false,
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onResize": {},
+    "type": "panel",
+  },
+  {
+    "id": "resizer",
+    "size": {
+      "type": "pixel",
+      "value": "10",
+    },
+    "type": "handle",
+  },
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "collapsible": false,
+    "currentValue": {
+      "type": "percent",
+      "value": "0.29918032786885245902",
+    },
+    "id": "panel-2",
+    "isStaticAtRest": false,
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onResize": {},
+    "type": "panel",
+  },
+]
+`;

package/src/index.ts

@@ -0,0 +1,6 @@
+export { default as Panel } from "./Panel.vue";
+export * from "./Panel.vue";
+export { default as PanelGroup } from "./PanelGroup.vue";
+export * from "./PanelGroup.vue";
+export { default as PanelResizer } from "./PanelResizer.vue";
+export * from "./PanelResizer.vue";

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": true,
+    "jsx": "react",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "target": "es2022",
+    "baseUrl": ".",
+    "types": ["@testing-library/jest-dom"]
+  },
+  "exclude": ["dist/**"]
+}

package/vite.config.js

@@ -0,0 +1,18 @@
+import vue from "@vitejs/plugin-vue";
+import dts from "vite-plugin-dts";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [vue(), dts()],
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: "./src/index.ts",
+      formats: ["es", "cjs"],
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: ["vue"],
+    },
+  },
+});

package/vitest.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from "vitest/config";
+import vuePlugin from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [vuePlugin()],
+  build: {
+    target: "esnext",
+  },
+  test: {
+    coverage: {
+      provider: "istanbul",
+      include: ["**/*.vue", "!**/*.stories.ts", "!**/*.test.ts"],
+      reporter: ["text", "html", "json-summary", "json"],
+      reportOnFailure: true,
+    },
+    browser: {
+      enabled: true,
+      provider: "playwright",
+      instances: [{ browser: "chromium" }],
+    },
+  },
+});