vueless 1.4.9-beta.2 → 1.4.9

package/components.d.ts

@@ -54,6 +54,7 @@ export { default as UCard } from "./ui.container-card/UCard.vue";
 export { default as UModal } from "./ui.container-modal/UModal.vue";
 export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";
 export { default as UDrawer } from "./ui.container-drawer/UDrawer.vue";
+export { default as USplitter } from "./ui.container-splitter/USplitter.vue";
 export { default as UPage } from "./ui.container-page/UPage.vue";
 /* Images and Icons */
 export { default as UIcon } from "./ui.image-icon/UIcon.vue";

package/components.ts

@@ -54,6 +54,7 @@ export { default as UCard } from "./ui.container-card/UCard.vue";
 export { default as UModal } from "./ui.container-modal/UModal.vue";
 export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";
 export { default as UDrawer } from "./ui.container-drawer/UDrawer.vue";
+export { default as USplitter } from "./ui.container-splitter/USplitter.vue";
 export { default as UPage } from "./ui.container-page/UPage.vue";
 /* Images and Icons */
 export { default as UIcon } from "./ui.image-icon/UIcon.vue";

package/constants.d.ts

@@ -195,6 +195,7 @@ export namespace COMPONENTS {
     let UModalConfirm: string;
     let UPage: string;
     let UDrawer: string;
+    let USplitter: string;
     let UIcon: string;
     let UAvatar: string;
     let UAvatarGroup: string;

package/constants.js

@@ -305,6 +305,7 @@ export const COMPONENTS = {
   UModalConfirm: "ui.container-modal-confirm",
   UPage: "ui.container-page",
   UDrawer: "ui.container-drawer",
+  USplitter: "ui.container-splitter",
 
   /* Images and Icons */
   UIcon: "ui.image-icon",

package/icons/storybook/drag_handle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-381.87V-450h652.2v68.13h-652.2Zm0-128.13v-68.37h652.2V-510h-652.2Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.9-beta.2",
+  "version": "1.4.9",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-splitter/USplitter.vue

@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import { computed, useSlots, useTemplateRef, ref, watch, onMounted, onBeforeUnmount } from "vue";
+
+import { useUI } from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+
+import { COMPONENT_NAME } from "./constants";
+import defaultConfig from "./config";
+
+import type { Props, Config } from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: () => [],
+  minSizes: () => [],
+  maxSizes: () => [],
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when panel sizes change.
+   * @property {number[]} modelValue
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when resize starts.
+   */
+  "resize-start",
+
+  /**
+   * Triggers when resize ends.
+   * @property {number[]} sizes
+   */
+  "resize-end",
+]);
+
+const slots = useSlots();
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+
+const panelSlots = computed(() => {
+  return Object.keys(slots).filter((name) => name.startsWith("panel-"));
+});
+
+const panelCount = computed(() => panelSlots.value.length);
+
+const isDragging = ref(false);
+const activeGutterIndex = ref<number | null>(null);
+const dragStartPosition = ref(0);
+const dragCurrentPosition = ref(0);
+const containerSize = ref(0);
+const panelSizes = ref<number[]>([]);
+
+const isHorizontal = computed(() => !props.vertical);
+
+function parseSize(size: number | string, containerSize: number): number {
+  if (typeof size === "string") {
+    if (size.endsWith("%")) {
+      return (parseFloat(size) / 100) * containerSize;
+    }
+
+    if (size.endsWith("px")) {
+      return parseFloat(size);
+    }
+
+    return parseFloat(size);
+  }
+
+  return size;
+}
+
+function initializeSizes() {
+  if (props.stateKey) {
+    const storage = props.stateStorage === "local" ? localStorage : sessionStorage;
+    const stored = storage.getItem(props.stateKey);
+
+    if (stored) {
+      const parsedSizes = JSON.parse(stored);
+
+      if (Array.isArray(parsedSizes) && parsedSizes.length === panelCount.value) {
+        panelSizes.value = parsedSizes;
+
+        return;
+      }
+    }
+  }
+
+  if (props.modelValue && props.modelValue.length === panelCount.value) {
+    panelSizes.value = [...props.modelValue];
+  } else {
+    const equalSize = 100 / panelCount.value;
+
+    panelSizes.value = Array(panelCount.value).fill(equalSize);
+  }
+}
+
+function updateContainerSize() {
+  if (!wrapperRef.value) return;
+
+  const rect = wrapperRef.value.getBoundingClientRect();
+
+  containerSize.value = isHorizontal.value ? rect.width : rect.height;
+}
+
+function getMinSize(index: number): number {
+  if (!props.minSizes) return 0;
+
+  const minSize = Array.isArray(props.minSizes) ? props.minSizes[index] : props.minSizes;
+
+  if (minSize === undefined) return 0;
+
+  return parseSize(minSize, containerSize.value);
+}
+
+function getMaxSize(index: number): number {
+  if (!props.maxSizes) return containerSize.value;
+
+  const maxSize = Array.isArray(props.maxSizes) ? props.maxSizes[index] : props.maxSizes;
+
+  if (maxSize === undefined) return containerSize.value;
+
+  return parseSize(maxSize, containerSize.value);
+}
+
+function clampSize(size: number, index: number): number {
+  const minSize = getMinSize(index);
+  const maxSize = getMaxSize(index);
+
+  return Math.max(minSize, Math.min(maxSize, size));
+}
+
+function onPointerDown(event: PointerEvent, gutterIndex: number) {
+  if (props.disabled) return;
+
+  event.preventDefault();
+
+  isDragging.value = true;
+  activeGutterIndex.value = gutterIndex;
+
+  const clientPos = isHorizontal.value ? event.clientX : event.clientY;
+
+  dragStartPosition.value = clientPos;
+  dragCurrentPosition.value = clientPos;
+
+  updateContainerSize();
+
+  document.addEventListener("pointermove", onPointerMove);
+  document.addEventListener("pointerup", onPointerUp);
+  document.body.style.cursor = isHorizontal.value ? "col-resize" : "row-resize";
+  document.body.style.userSelect = "none";
+
+  emit("resize-start");
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!isDragging.value || activeGutterIndex.value === null) return;
+
+  event.preventDefault();
+
+  const clientPos = isHorizontal.value ? event.clientX : event.clientY;
+
+  dragCurrentPosition.value = clientPos;
+
+  const delta = dragCurrentPosition.value - dragStartPosition.value;
+  const deltaPercent = (delta / containerSize.value) * 100;
+
+  const leftIndex = activeGutterIndex.value;
+  const rightIndex = activeGutterIndex.value + 1;
+
+  const newLeftSize = panelSizes.value[leftIndex] + deltaPercent;
+  const newRightSize = panelSizes.value[rightIndex] - deltaPercent;
+
+  const leftSizePx = (newLeftSize / 100) * containerSize.value;
+  const rightSizePx = (newRightSize / 100) * containerSize.value;
+
+  const clampedLeftPx = clampSize(leftSizePx, leftIndex);
+  const clampedRightPx = clampSize(rightSizePx, rightIndex);
+
+  const clampedLeftPercent = (clampedLeftPx / containerSize.value) * 100;
+  const clampedRightPercent = (clampedRightPx / containerSize.value) * 100;
+
+  const totalClamped = clampedLeftPercent + clampedRightPercent;
+  const originalTotal = panelSizes.value[leftIndex] + panelSizes.value[rightIndex];
+
+  if (Math.abs(totalClamped - originalTotal) < 0.1) {
+    const newSizes = [...panelSizes.value];
+
+    newSizes[leftIndex] = clampedLeftPercent;
+    newSizes[rightIndex] = clampedRightPercent;
+
+    panelSizes.value = newSizes;
+    dragStartPosition.value = dragCurrentPosition.value;
+
+    emit("update:modelValue", newSizes);
+  }
+}
+
+function onPointerUp() {
+  if (!isDragging.value) return;
+
+  document.removeEventListener("pointermove", onPointerMove);
+  document.removeEventListener("pointerup", onPointerUp);
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+
+  isDragging.value = false;
+
+  if (props.stateKey) {
+    const storage = props.stateStorage === "local" ? localStorage : sessionStorage;
+
+    storage.setItem(props.stateKey, JSON.stringify(panelSizes.value));
+  }
+
+  emit("resize-end", panelSizes.value);
+
+  activeGutterIndex.value = null;
+}
+
+function onKeyDown(event: KeyboardEvent, gutterIndex: number) {
+  if (props.disabled) return;
+
+  const stepValue = event.shiftKey ? props.resizeStep : 1;
+  let delta = 0;
+
+  if (isHorizontal.value) {
+    if (event.key === "ArrowLeft") delta = -stepValue;
+    if (event.key === "ArrowRight") delta = stepValue;
+  } else {
+    if (event.key === "ArrowUp") delta = -stepValue;
+    if (event.key === "ArrowDown") delta = stepValue;
+  }
+
+  if (delta === 0) return;
+
+  event.preventDefault();
+
+  updateContainerSize();
+
+  const leftIndex = gutterIndex;
+  const rightIndex = gutterIndex + 1;
+
+  const newLeftSize = panelSizes.value[leftIndex] + delta;
+  const newRightSize = panelSizes.value[rightIndex] - delta;
+
+  const leftSizePx = (newLeftSize / 100) * containerSize.value;
+  const rightSizePx = (newRightSize / 100) * containerSize.value;
+
+  const clampedLeftPx = clampSize(leftSizePx, leftIndex);
+  const clampedRightPx = clampSize(rightSizePx, rightIndex);
+
+  const clampedLeftPercent = (clampedLeftPx / containerSize.value) * 100;
+  const clampedRightPercent = (clampedRightPx / containerSize.value) * 100;
+
+  const newSizes = [...panelSizes.value];
+
+  newSizes[leftIndex] = clampedLeftPercent;
+  newSizes[rightIndex] = clampedRightPercent;
+
+  panelSizes.value = newSizes;
+
+  emit("update:modelValue", newSizes);
+
+  if (props.stateKey) {
+    const storage = props.stateStorage === "local" ? localStorage : sessionStorage;
+
+    storage.setItem(props.stateKey, JSON.stringify(newSizes));
+  }
+}
+
+function onDoubleClick(gutterIndex: number) {
+  if (props.disabled) return;
+
+  const leftIndex = gutterIndex;
+  const rightIndex = gutterIndex + 1;
+
+  const totalSize = panelSizes.value[leftIndex] + panelSizes.value[rightIndex];
+  const equalSize = totalSize / 2;
+
+  const newSizes = [...panelSizes.value];
+
+  newSizes[leftIndex] = equalSize;
+  newSizes[rightIndex] = equalSize;
+
+  panelSizes.value = newSizes;
+
+  emit("update:modelValue", newSizes);
+
+  if (props.stateKey) {
+    const storage = props.stateStorage === "local" ? localStorage : sessionStorage;
+
+    storage.setItem(props.stateKey, JSON.stringify(newSizes));
+  }
+}
+
+function getPanelStyle(index: number) {
+  const size = panelSizes.value[index] || 0;
+
+  return {
+    flexBasis: `${size}%`,
+    flexGrow: 0,
+    flexShrink: 0,
+  };
+}
+
+function getGutterAriaValue(gutterIndex: number) {
+  return Math.round(panelSizes.value[gutterIndex] || 0);
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue && newValue.length === panelCount.value && !isDragging.value) {
+      panelSizes.value = [...newValue];
+    }
+  },
+);
+
+initializeSizes();
+
+onMounted(() => {
+  updateContainerSize();
+
+  window.addEventListener("resize", updateContainerSize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateContainerSize);
+  document.removeEventListener("pointermove", onPointerMove);
+  document.removeEventListener("pointerup", onPointerUp);
+});
+
+defineExpose({
+  /**
+   * A reference to the component's wrapper element for direct DOM manipulation.
+   * @property {HTMLDivElement}
+   */
+  wrapperRef,
+});
+
+const gutterStyle = computed(() => ({
+  "--gutter-size": `${props.gutterSize}px`,
+}));
+
+const { getDataTest, wrapperAttrs, panelAttrs, gutterAttrs } = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()">
+    <template v-for="(slotName, index) in panelSlots" :key="slotName">
+      <div
+        v-bind="panelAttrs"
+        :style="getPanelStyle(index)"
+        :data-test="getDataTest(`panel-${index + 1}`)"
+      >
+        <!--
+          @slot Use it to add panel content.
+          @binding {number} index
+          @binding {number} size
+        -->
+        <slot :name="slotName" :index="index" :size="panelSizes[index]" />
+      </div>
+
+      <div
+        v-if="index < panelSlots.length - 1"
+        role="separator"
+        tabindex="0"
+        :aria-orientation="vertical ? 'vertical' : 'horizontal'"
+        :aria-valuenow="getGutterAriaValue(index)"
+        :aria-valuemin="0"
+        :aria-valuemax="100"
+        :aria-label="`Resize panels ${index + 1} and ${index + 2}`"
+        :style="gutterStyle"
+        v-bind="gutterAttrs"
+        :data-test="getDataTest(`gutter-${index + 1}`)"
+        @pointerdown="onPointerDown($event, index)"
+        @keydown="onKeyDown($event, index)"
+        @dblclick="onDoubleClick(index)"
+      >
+        <!--
+          @slot Use it to add custom handle inside the divider.
+          @binding {boolean} is-dragging
+          @binding {number} index
+        -->
+        <slot name="handle" :is-dragging="isDragging" :index="index" />
+      </div>
+    </template>
+  </div>
+</template>

package/ui.container-splitter/config.ts

@@ -0,0 +1,35 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "flex w-full h-full",
+    variants: {
+      vertical: {
+        false: "flex-row",
+        true: "flex-col",
+      },
+    },
+  },
+  panel: "",
+  gutter: {
+    base: `
+      flex items-center justify-center shrink-0 select-none rounded-medium
+      focus-visible:outline-2 focus-visible:outline-grayscale-accented
+    `,
+    variants: {
+      vertical: {
+        false: "cursor-col-resize w-[var(--gutter-size)] h-full",
+        true: "cursor-row-resize h-[var(--gutter-size)] w-full",
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+      },
+    },
+  },
+  defaults: {
+    vertical: false,
+    gutterSize: 8,
+    disabled: false,
+    stateKey: null,
+    stateStorage: "session",
+    resizeStep: 5,
+  },
+};

package/ui.container-splitter/constants.ts

@@ -0,0 +1 @@
+export const COMPONENT_NAME = "USplitter";

package/ui.container-splitter/storybook/docs.mdx

@@ -0,0 +1,17 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />
+

package/ui.container-splitter/storybook/stories.ts

@@ -0,0 +1,171 @@
+import { getArgTypes, getDocsDescription } from "../../utils/storybook";
+
+import USplitter from "../USplitter.vue";
+import UPlaceholder from "../../ui.container-placeholder/UPlaceholder.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types.ts";
+
+interface USplitterArgs extends Props {
+  slotTemplate?: string;
+}
+
+export default {
+  id: "5085",
+  title: "Containers / Splitter",
+  component: USplitter,
+  argTypes: {
+    ...getArgTypes(USplitter.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(USplitter.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<USplitterArgs> = (args: USplitterArgs) => ({
+  components: { USplitter, UPlaceholder },
+  setup: () => {
+    const sizes = args.modelValue || [40, 60];
+
+    return { args, sizes };
+  },
+  template: `
+    <div class="h-80">
+      <USplitter v-bind="args" v-model="sizes">
+        <template #panel-1>
+          <UPlaceholder label="Panel 1" />
+        </template>
+        <template #panel-2>
+          <UPlaceholder label="Panel 2" />
+        </template>
+      </USplitter>
+    </div>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const VerticalOrientation = DefaultTemplate.bind({});
+VerticalOrientation.args = { vertical: true };
+
+export const GutterSize = DefaultTemplate.bind({});
+GutterSize.args = { gutterSize: 16 };
+
+export const MinSizes = DefaultTemplate.bind({});
+MinSizes.args = { minSizes: "30%", modelValue: [50, 50] };
+MinSizes.parameters = {
+  docs: {
+    description: {
+      story: [
+        "Caps how small each panel can get while dragging.",
+        "Use one value for every panel or an array for per-panel limits.",
+        "Numbers are treated as pixels; strings can use `%` of the splitter axis or a `px` length.",
+        "Here each panel stays at least 30% wide.",
+      ].join(" "),
+    },
+  },
+};
+
+export const MaxSizes = DefaultTemplate.bind({});
+MaxSizes.args = { maxSizes: "65%", modelValue: [50, 50] };
+MaxSizes.parameters = {
+  docs: {
+    description: {
+      story: [
+        "Caps how large each panel can grow. Omitted means a panel may use the full container.",
+        "Here neither panel can exceed 65% width.",
+      ].join(" "),
+    },
+  },
+};
+
+export const ResizeStep = DefaultTemplate.bind({});
+ResizeStep.args = { resizeStep: 10 };
+ResizeStep.parameters = {
+  docs: {
+    description: {
+      story: "Increments/decrements the size of the panels while pressing the arrow keys.",
+    },
+  },
+};
+
+export const StateKeyAndStorage = DefaultTemplate.bind({});
+StateKeyAndStorage.args = { stateKey: "splitter-state", stateStorage: "local" };
+StateKeyAndStorage.parameters = {
+  docs: {
+    description: {
+      story: [
+        "`stateKey` is the storage entry name: when set, the splitter saves panel sizes after each resize",
+        "and restores them on the next visit.",
+        "`stateStorage` chooses where that data lives—`session` (sessionStorage, cleared when the tab closes)",
+        "or `local` (localStorage, persists across sessions).",
+        "This story uses local storage so you can reload the page and keep your layout.",
+      ].join(" "),
+    },
+  },
+};
+
+export const Nested: StoryFn<USplitterArgs> = (args: USplitterArgs) => ({
+  components: { USplitter, UPlaceholder },
+  setup: () => {
+    const sizes = args.modelValue || [35, 65];
+
+    return { args, sizes };
+  },
+  template: `
+    <div class="h-80">
+      <USplitter v-bind="args" v-model="sizes">
+        <template #panel-1>
+          <UPlaceholder label="Panel 1" />
+        </template>
+        <template #panel-2>
+          <USplitter v-bind="args" v-model="sizes" vertical>
+            <template #panel-1>
+              <UPlaceholder label="Panel 2" />
+            </template>
+            <template #panel-2>
+              <UPlaceholder label="Panel 3" />
+            </template>
+          </USplitter>
+        </template>
+      </USplitter>
+    </div>
+  `,
+});
+
+export const HandleSlot: StoryFn<USplitterArgs> = (args: USplitterArgs) => ({
+  components: { USplitter, UPlaceholder, UIcon },
+  setup: () => {
+    const sizes = args.modelValue || [40, 60];
+
+    return { args, sizes };
+  },
+  template: `
+    <div class="h-80">
+      <USplitter v-bind="args" v-model="sizes">
+        <template #panel-1>
+          <UPlaceholder label="Panel 1" />
+        </template>
+        <template #panel-2>
+          <UPlaceholder label="Panel 2" />
+        </template>
+        <template #handle>
+          <UIcon
+            name="drag_handle"
+            size="sm"
+            color="neutral"
+            interactive
+            class="rotate-90 cursor-col-resize text-muted"
+          />
+        </template>
+      </USplitter>
+    </div>
+  `,
+});

package/ui.container-splitter/tests/USplitter.test.ts

@@ -0,0 +1,347 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+
+import USplitter from "../USplitter.vue";
+
+function dispatchPointerDown(target: Element, clientX: number, clientY: number) {
+  target.dispatchEvent(
+    new PointerEvent("pointerdown", {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY,
+      pointerId: 1,
+      pointerType: "mouse",
+    }),
+  );
+}
+
+describe("USplitter", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    localStorage.clear();
+  });
+
+  describe("Props", () => {
+    it("ModelValue – initializes with provided sizes", () => {
+      const modelValue = [30, 70];
+
+      const component = mount(USplitter, {
+        props: {
+          modelValue,
+        },
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+      });
+
+      const panels = component.findAll("[vl-key='panel']");
+
+      expect(panels).toHaveLength(2);
+      expect(panels[0].attributes("style")).toMatch(/(^|;)\s*flex(-basis)?:[^;]*30%/);
+      expect(panels[1].attributes("style")).toMatch(/(^|;)\s*flex(-basis)?:[^;]*70%/);
+    });
+
+    it("Vertical – applies horizontal layout by default", () => {
+      const component = mount(USplitter, {
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+      });
+
+      const wrapper = component.find("[vl-key='wrapper']");
+
+      expect(wrapper.attributes("class")).toContain("flex-row");
+    });
+
+    it("Vertical – applies vertical layout when true", () => {
+      const component = mount(USplitter, {
+        props: {
+          vertical: true,
+        },
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+      });
+
+      const wrapper = component.find("[vl-key='wrapper']");
+
+      expect(wrapper.attributes("class")).toContain("flex-col");
+    });
+
+    it("GutterSize – applies custom gutter size", () => {
+      const gutterSize = 10;
+
+      const component = mount(USplitter, {
+        props: {
+          gutterSize,
+        },
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+      });
+
+      const gutter = component.find("[vl-key='gutter']");
+
+      expect(gutter.attributes("style")).toContain("--gutter-size: 10px");
+    });
+
+    it("Disabled – applies disabled state", () => {
+      const component = mount(USplitter, {
+        props: {
+          disabled: true,
+        },
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+      });
+
+      const gutter = component.find("[vl-key='gutter']");
+
+      expect(gutter.attributes("class")).toContain("cursor-not-allowed");
+      expect(gutter.attributes("class")).toContain("opacity-50");
+    });
+  });
+
+  describe("Slots", () => {
+    it("Panel slots – renders multiple panels", () => {
+      const component = mount(USplitter, {
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+          "panel-3": "<div>Panel 3</div>",
+        },
+      });
+
+      const panels = component.findAll("[vl-key='panel']");
+
+      expect(panels).toHaveLength(3);
+      expect(component.text()).toContain("Panel 1");
+      expect(component.text()).toContain("Panel 2");
+      expect(component.text()).toContain("Panel 3");
+    });
+
+    it("Handle slot – renders custom handle", () => {
+      const component = mount(USplitter, {
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+          handle: "<div class='custom-handle'>Custom</div>",
+        },
+      });
+
+      expect(component.find(".custom-handle").exists()).toBe(true);
+      expect(component.text()).toContain("Custom");
+    });
+  });
+
+  describe("Events", () => {
+    it("Update:modelValue – emits when resizing", async () => {
+      const component = mount(USplitter, {
+        props: {
+          modelValue: [50, 50],
+        },
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+        attachTo: document.body,
+      });
+
+      const gutter = component.find("[vl-key='gutter']");
+      const wrapper = component.find("[vl-key='wrapper']");
+
+      vi.spyOn(wrapper.element, "getBoundingClientRect").mockReturnValue({
+        width: 1000,
+        height: 500,
+        top: 0,
+        left: 0,
+        right: 1000,
+        bottom: 500,
+      } as DOMRect);
+
+      dispatchPointerDown(gutter.element, 500, 250);
+
+      const pointerMoveEvent = new PointerEvent("pointermove", {
+        clientX: 600,
+        clientY: 250,
+      });
+
+      document.dispatchEvent(pointerMoveEvent);
+
+      await component.vm.$nextTick();
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+
+      component.unmount();
+    });
+
+    it("Resize-start – emits when drag starts", async () => {
+      const component = mount(USplitter, {
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+        attachTo: document.body,
+      });
+
+      const gutter = component.find("[vl-key='gutter']");
+
+      dispatchPointerDown(gutter.element, 500, 250);
+
+      expect(component.emitted("resize-start")).toBeTruthy();
+
+      component.unmount();
+    });
+
+    it("Resize-end – emits when drag ends", async () => {
+      const component = mount(USplitter, {
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+        attachTo: document.body,
+      });
+
+      const gutter = component.find("[vl-key='gutter']");
+
+      dispatchPointerDown(gutter.element, 500, 250);
+
+      const pointerUpEvent = new PointerEvent("pointerup");
+
+      document.dispatchEvent(pointerUpEvent);
+
+      await component.vm.$nextTick();
+
+      expect(component.emitted("resize-end")).toBeTruthy();
+
+      component.unmount();
+    });
+  });
+
+  describe("Interaction", () => {
+    it("Gutter – renders between panels", () => {
+      const component = mount(USplitter, {
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+          "panel-3": "<div>Panel 3</div>",
+        },
+      });
+
+      const gutters = component.findAll("[vl-key='gutter']");
+
+      expect(gutters).toHaveLength(2);
+    });
+
+    it("Keyboard – handles arrow key navigation", async () => {
+      const component = mount(USplitter, {
+        props: {
+          modelValue: [50, 50],
+        },
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+        attachTo: document.body,
+      });
+
+      const gutter = component.find("[vl-key='gutter']");
+      const wrapper = component.find("[vl-key='wrapper']");
+
+      vi.spyOn(wrapper.element, "getBoundingClientRect").mockReturnValue({
+        width: 1000,
+        height: 500,
+        top: 0,
+        left: 0,
+        right: 1000,
+        bottom: 500,
+      } as DOMRect);
+
+      await gutter.trigger("keydown", {
+        key: "ArrowRight",
+      });
+
+      await component.vm.$nextTick();
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+
+      component.unmount();
+    });
+
+    it("Double click – resets to equal sizes", async () => {
+      const component = mount(USplitter, {
+        props: {
+          modelValue: [30, 70],
+        },
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+      });
+
+      const gutter = component.find("[vl-key='gutter']");
+
+      await gutter.trigger("dblclick");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toBeTruthy();
+
+      if (!emitted) {
+        throw new Error("expected update:modelValue");
+      }
+
+      const lastEmit = emitted[emitted.length - 1][0] as number[];
+
+      expect(lastEmit[0]).toBeCloseTo(50, 0);
+      expect(lastEmit[1]).toBeCloseTo(50, 0);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("ARIA – gutter has proper ARIA attributes", () => {
+      const component = mount(USplitter, {
+        props: {
+          modelValue: [40, 60],
+        },
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+      });
+
+      const gutter = component.find("[vl-key='gutter']");
+
+      expect(gutter.attributes("role")).toBe("separator");
+      expect(gutter.attributes("aria-orientation")).toBe("horizontal");
+      expect(gutter.attributes("aria-valuenow")).toBe("40");
+      expect(gutter.attributes("aria-valuemin")).toBe("0");
+      expect(gutter.attributes("aria-valuemax")).toBe("100");
+      expect(gutter.attributes("tabindex")).toBe("0");
+    });
+  });
+
+  describe("Exposed refs", () => {
+    it("WrapperRef – exposes wrapper element ref", () => {
+      const component = mount(USplitter, {
+        slots: {
+          "panel-1": "<div>Panel 1</div>",
+          "panel-2": "<div>Panel 2</div>",
+        },
+      });
+
+      expect(component.vm.wrapperRef).toBeDefined();
+      expect(component.vm.wrapperRef instanceof HTMLDivElement).toBe(true);
+    });
+  });
+});

package/ui.container-splitter/types.ts

@@ -0,0 +1,62 @@
+import defaultConfig from "./config";
+
+import type { ComponentConfig } from "../types";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Panel sizes (percentage or px).
+   */
+  modelValue?: number[];
+
+  /**
+   * Makes the splitter vertical (panels stacked top-to-bottom).
+   */
+  vertical?: boolean;
+
+  /**
+   * Minimum sizes per panel (percentage or px). Can be a single value for all panels or an array of values per panel.
+   */
+  minSizes?: number | string | (number | string)[];
+
+  /**
+   * Maximum sizes per panel (percentage or px). Can be a single value for all panels or an array of values per panel.
+   */
+  maxSizes?: number | string | (number | string)[];
+
+  /**
+   * Gutter (divider) size in pixels.
+   */
+  gutterSize?: number;
+
+  /**
+   * Disable resizing.
+   */
+  disabled?: boolean;
+
+  /**
+   * Storage identifier of a stateful Splitter.
+   */
+  stateKey?: string | null;
+
+  /**
+   * Defines where a stateful splitter keeps its state, valid values are 'session' for sessionStorage and 'local' for localStorage.
+   */
+  stateStorage?: "session" | "local";
+
+  /**
+   * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
+   */
+  resizeStep?: number;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}