@rimelight/ui 0.0.57 → 0.0.60

package/src/components/splitter/RLASplitter.astro

@@ -1,230 +1,217 @@
----
-import type { SplitterProps } from "./splitter"
-import { splitterTheme } from "./splitter.theme"
-
-import RLAIcon from "../icon/RLAIcon.astro"
-
-
-const {
-  direction = "horizontal",
-  defaultSizes = [50, 50],
-  ...rest
-} = Astro.props as SplitterProps
-
-const classes = splitterTheme(Astro.props)
-
-// Normalise sizes so they sum to 100
-const total = defaultSizes.reduce((s, v) => s + v, 0)
-const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
-
-const panelCount = sizes.length
-const id = `splitter-${Math.random().toString(36).substring(2, 9)}`
-
-const panelContents: string[] = []
-await Promise.all(
-  sizes.map(async (_, i) => {
-    if (Astro.slots.has(`panel-${i}`)) {
-      panelContents[i] = await Astro.slots.render(`panel-${i}`)
-    }
-  })
-)
----
-
-<rla-splitter {...rest}>
-  <div
-    class:list={[classes.root, id]}
-    data-slot="root"
-    data-resizable
-    data-direction={direction}
-  >
-    {sizes.map((_size, i) => (
-      <>
-        <div
-          class={classes.panel}
-          data-slot="panel"
-          data-resizable-panel={i}
-        >
-          {Astro.slots.has(`panel-${i}`) ? (
-            <Fragment set:html={panelContents[i]} />
-          ) : (
-            i === 0
-              ? <slot />
-              : <slot name="panel" />
-          )}
-        </div>
-
-        {/* Render a handle between panels, not after the last one */}
-        {i < panelCount - 1 && (
-          <div
-            class={classes.handle}
-            data-slot="handle"
-            data-resizable-handle={i}
-            role="separator"
-            aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
-            tabindex={0}
-            aria-label="Resize panels"
-          >
-            <RLAIcon
-              name={direction === "horizontal" ? "gripVertical" : "gripHorizontal"}
-              class="size-3.5 text-muted/50"
-              aria-hidden="true"
-            />
-          </div>
-        )}
-      </>
-    ))}
-  </div>
-</rla-splitter>
-
-<script>
-  class RLASplitter extends HTMLElement {
-    private splitterCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const container = this.querySelector("[data-resizable]") as HTMLElement | null;
-      if (!container) return;
-
-      const direction = container.dataset["direction"] ?? "horizontal";
-      const isHorizontal = direction === "horizontal";
-
-      const panels = Array.from(
-        container.querySelectorAll("[data-resizable-panel]")
-      ) as HTMLElement[];
-
-      const handles = Array.from(
-        container.querySelectorAll("[data-resizable-handle]")
-      ) as HTMLElement[];
-
-      const cleanupFns: (() => void)[] = [];
-
-      handles.forEach((handle, idx) => {
-        const panelA = panels[idx];
-        const panelB = panels[idx + 1];
-        if (!panelA || !panelB) return;
-
-        const containerSize = () =>
-          isHorizontal
-            ? container.clientWidth
-            : container.clientHeight;
-
-        let isDragging = false;
-        let startPos = 0;
-        let startASize = 0;
-        let startBSize = 0;
-
-        const getSize = (el: HTMLElement) =>
-          isHorizontal ? el.offsetWidth : el.offsetHeight;
-
-        const setSize = (el: HTMLElement, px: number) => {
-          const pct = (px / containerSize()) * 100;
-          if (isHorizontal) {
-            el.style.width = `${pct}%`;
-          } else {
-            el.style.height = `${pct}%`;
-          }
-        };
-
-        const onMouseMove = (e: MouseEvent) => {
-          if (!isDragging) return;
-          const delta = isHorizontal
-            ? e.clientX - startPos
-            : e.clientY - startPos;
-
-          const newASize = Math.max(48, startASize + delta);
-          const newBSize = Math.max(48, startBSize - delta);
-
-          // Only resize if both panels have enough space
-          if (startASize + startBSize - newASize < 48) return;
-
-          setSize(panelA, newASize);
-          setSize(panelB, newBSize);
-        };
-
-        const onMouseUp = () => {
-          isDragging = false;
-          document.body.style.cursor = "";
-          document.body.style.userSelect = "";
-          handle.classList.remove("bg-primary/30");
-          panels.forEach(p => p.style.transition = "");
-          document.removeEventListener("mousemove", onMouseMove);
-          document.removeEventListener("mouseup", onMouseUp);
-        };
-
-        const onMouseDown = (e: MouseEvent) => {
-          e.preventDefault();
-          isDragging = true;
-          startPos = isHorizontal ? e.clientX : e.clientY;
-          startASize = getSize(panelA);
-          startBSize = getSize(panelB);
-          document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
-          document.body.style.userSelect = "none";
-          handle.classList.add("bg-primary/30");
-          panels.forEach(p => p.style.transition = "none");
-          document.addEventListener("mousemove", onMouseMove);
-          document.addEventListener("mouseup", onMouseUp);
-        };
-
-        handle.addEventListener("mousedown", onMouseDown);
-        cleanupFns.push(() => {
-          handle.removeEventListener("mousedown", onMouseDown);
-          document.removeEventListener("mousemove", onMouseMove);
-          document.removeEventListener("mouseup", onMouseUp);
-        });
-
-        // Keyboard resize: arrow keys shift by 2%
-        const onKeyDown = (e: KeyboardEvent) => {
-          const step = containerSize() * 0.02;
-          const forward = isHorizontal
-            ? e.key === "ArrowRight"
-            : e.key === "ArrowDown";
-          const backward = isHorizontal
-            ? e.key === "ArrowLeft"
-            : e.key === "ArrowUp";
-
-          if (!forward && !backward) return;
-          e.preventDefault();
-
-          const aSize = getSize(panelA);
-          const bSize = getSize(panelB);
-          const delta = forward ? step : -step;
-
-          setSize(panelA, Math.max(48, aSize + delta));
-          setSize(panelB, Math.max(48, bSize - delta));
-        };
-
-        handle.addEventListener("keydown", onKeyDown);
-        cleanupFns.push(() => {
-          handle.removeEventListener("keydown", onKeyDown);
-        });
-      });
-
-      this.splitterCleanup = () => {
-        cleanupFns.forEach(fn => fn());
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.splitterCleanup) {
-        this.splitterCleanup();
-        this.splitterCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-splitter')) {
-    customElements.define('rla-splitter', RLASplitter);
-  }
-</script>
-
-<style is:inline set:html={`
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="0"] { width: ${sizes[0] ?? 50}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="1"] { width: ${sizes[1] ?? 50}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="2"] { width: ${sizes[2] ?? 0}%; }
-  .${id}[data-direction="horizontal"] > [data-resizable-panel="3"] { width: ${sizes[3] ?? 0}%; }
-
-  .${id}[data-direction="vertical"] > [data-resizable-panel="0"] { height: ${sizes[0] ?? 50}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="1"] { height: ${sizes[1] ?? 50}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="2"] { height: ${sizes[2] ?? 0}%; }
-  .${id}[data-direction="vertical"] > [data-resizable-panel="3"] { height: ${sizes[3] ?? 0}%; }
-`} />
+---
+import type { SplitterProps } from "./splitter"
+import { splitterTheme } from "./splitter.theme"
+
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  direction = "horizontal",
+  defaultSizes = [50, 50],
+  ...rest
+} = Astro.props as SplitterProps
+
+const classes = splitterTheme(Astro.props)
+
+// Normalise sizes so they sum to 100
+const total = defaultSizes.reduce((s, v) => s + v, 0)
+const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
+
+const panelCount = sizes.length
+
+const panelContents: string[] = []
+await Promise.all(
+  sizes.map(async (_, i) => {
+    if (Astro.slots.has(`panel-${i}`)) {
+      panelContents[i] = await Astro.slots.render(`panel-${i}`)
+    }
+  })
+)
+---
+
+<rla-splitter {...rest}>
+  <div
+    class:list={[classes.root]}
+    data-slot="root"
+    data-resizable
+    data-direction={direction}
+  >
+    {sizes.map((_size, i) => (
+      <>
+        <div
+          class:list={[classes.panel, direction === "horizontal" ? `w-[${sizes[i]}%]` : `h-[${sizes[i]}%]`]}
+          data-slot="panel"
+          data-resizable-panel={i}
+        >
+          {Astro.slots.has(`panel-${i}`) ? (
+            <Fragment set:html={panelContents[i]} />
+          ) : (
+            i === 0
+              ? <slot />
+              : <slot name="panel" />
+          )}
+        </div>
+
+        {/* Render a handle between panels, not after the last one */}
+        {i < panelCount - 1 && (
+          <div
+            class={classes.handle}
+            data-slot="handle"
+            data-resizable-handle={i}
+            role="separator"
+            aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+            tabindex={0}
+            aria-label="Resize panels"
+          >
+            <RLAIcon
+              name={direction === "horizontal" ? "gripVertical" : "gripHorizontal"}
+              class="size-3.5 text-muted/50"
+              aria-hidden="true"
+            />
+          </div>
+        )}
+      </>
+    ))}
+  </div>
+</rla-splitter>
+
+<script>
+  class RLASplitter extends HTMLElement {
+    private splitterCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const container = this.querySelector("[data-resizable]") as HTMLElement | null;
+      if (!container) return;
+
+      const direction = container.dataset["direction"] ?? "horizontal";
+      const isHorizontal = direction === "horizontal";
+
+      const panels = Array.from(
+        container.querySelectorAll("[data-resizable-panel]")
+      ) as HTMLElement[];
+
+      const handles = Array.from(
+        container.querySelectorAll("[data-resizable-handle]")
+      ) as HTMLElement[];
+
+      const cleanupFns: (() => void)[] = [];
+
+      handles.forEach((handle, idx) => {
+        const panelA = panels[idx];
+        const panelB = panels[idx + 1];
+        if (!panelA || !panelB) return;
+
+        const containerSize = () =>
+          isHorizontal
+            ? container.clientWidth
+            : container.clientHeight;
+
+        let isDragging = false;
+        let startPos = 0;
+        let startASize = 0;
+        let startBSize = 0;
+
+        const getSize = (el: HTMLElement) =>
+          isHorizontal ? el.offsetWidth : el.offsetHeight;
+
+        const setSize = (el: HTMLElement, px: number) => {
+          const pct = (px / containerSize()) * 100;
+          if (isHorizontal) {
+            el.style.width = `${pct}%`;
+          } else {
+            el.style.height = `${pct}%`;
+          }
+        };
+
+        const onMouseMove = (e: MouseEvent) => {
+          if (!isDragging) return;
+          const delta = isHorizontal
+            ? e.clientX - startPos
+            : e.clientY - startPos;
+
+          const newASize = Math.max(48, startASize + delta);
+          const newBSize = Math.max(48, startBSize - delta);
+
+          // Only resize if both panels have enough space
+          if (startASize + startBSize - newASize < 48) return;
+
+          setSize(panelA, newASize);
+          setSize(panelB, newBSize);
+        };
+
+        const onMouseUp = () => {
+          isDragging = false;
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+          handle.classList.remove("bg-primary/30");
+          panels.forEach(p => p.style.transition = "");
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+          e.preventDefault();
+          isDragging = true;
+          startPos = isHorizontal ? e.clientX : e.clientY;
+          startASize = getSize(panelA);
+          startBSize = getSize(panelB);
+          document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+          document.body.style.userSelect = "none";
+          handle.classList.add("bg-primary/30");
+          panels.forEach(p => p.style.transition = "none");
+          document.addEventListener("mousemove", onMouseMove);
+          document.addEventListener("mouseup", onMouseUp);
+        };
+
+        handle.addEventListener("mousedown", onMouseDown);
+        cleanupFns.push(() => {
+          handle.removeEventListener("mousedown", onMouseDown);
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        });
+
+        // Keyboard resize: arrow keys shift by 2%
+        const onKeyDown = (e: KeyboardEvent) => {
+          const step = containerSize() * 0.02;
+          const forward = isHorizontal
+            ? e.key === "ArrowRight"
+            : e.key === "ArrowDown";
+          const backward = isHorizontal
+            ? e.key === "ArrowLeft"
+            : e.key === "ArrowUp";
+
+          if (!forward && !backward) return;
+          e.preventDefault();
+
+          const aSize = getSize(panelA);
+          const bSize = getSize(panelB);
+          const delta = forward ? step : -step;
+
+          setSize(panelA, Math.max(48, aSize + delta));
+          setSize(panelB, Math.max(48, bSize - delta));
+        };
+
+        handle.addEventListener("keydown", onKeyDown);
+        cleanupFns.push(() => {
+          handle.removeEventListener("keydown", onKeyDown);
+        });
+      });
+
+      this.splitterCleanup = () => {
+        cleanupFns.forEach(fn => fn());
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.splitterCleanup) {
+        this.splitterCleanup();
+        this.splitterCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-splitter')) {
+    customElements.define('rla-splitter', RLASplitter);
+  }
+</script>

package/src/components/splitter/RLSSplitter.tsx

@@ -121,10 +121,7 @@ const RLSSplitter: Component<RLSSplitterProps> = (allProps) => {
     setSizes(next)
   }
 
-  const panelStyle = (size: number) =>
-    isHorizontal()
-      ? { "flex": `0 0 ${size}%` as const, "min-width": "0" }
-      : { "flex": `0 0 ${size}%` as const, "min-height": "0" }
+  const panelClass = (size: number) => (isHorizontal() ? `w-[${size}%]` : `h-[${size}%]`)
 
   return (
     <div
@@ -139,10 +136,9 @@ const RLSSplitter: Component<RLSSplitterProps> = (allProps) => {
         {(size, i) => (
           <>
             <div
-              class={resolvedClasses().panel}
+              class={`${resolvedClasses().panel} ${panelClass(size)}`}
               data-slot="panel"
               data-resizable-panel={i()}
-              style={panelStyle(size)}
             >
               {panelContents()[i()]}
             </div>