@joewinke/jatui 0.1.24 → 0.1.26

package/dist/components/ResizablePanel.svelte

@@ -0,0 +1,305 @@
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import { onMount } from "svelte"
+
+  let {
+    width = 320,
+    minWidth = 280,
+    maxWidth = 800,
+    position = "right",
+    enableResize = true,
+    enableDragToSwap = true,
+    color = "neutral",
+    animateWidth = false,
+    onResize,
+    onResizeEnd,
+    onSwap,
+    children,
+  } = $props<{
+    width?: number
+    minWidth?: number
+    maxWidth?: number
+    position?: "left" | "right"
+    enableResize?: boolean
+    enableDragToSwap?: boolean
+    color?: string
+    animateWidth?: boolean
+    onResize?: (width: number) => void
+    onResizeEnd?: (width: number) => void
+    onSwap?: (newPosition: "left" | "right") => void
+    children?: Snippet
+  }>()
+
+  let panel = $state<HTMLElement | null>(null)
+  let resizeSide = $state<"left" | "right" | null>(null)
+  let startWidth = $state(0)
+  let startX = $state(0)
+  let isResizing = $state(false)
+  let isDragging = $state(false)
+  let dragIndicatorPosition = $state<{ x: number; y: number } | null>(null)
+
+  onMount(() => {
+    if (panel) {
+      width = panel.offsetWidth
+    }
+  })
+
+  function handleResizeStart(e: MouseEvent | TouchEvent, side: "left" | "right") {
+    if (!enableResize) return
+
+    isResizing = true
+    startWidth = width
+    resizeSide = side
+
+    if ("touches" in e) {
+      startX = e.touches[0].clientX
+    } else {
+      startX = e.clientX
+    }
+
+    window.addEventListener("mousemove", handleResize)
+    window.addEventListener("touchmove", handleResize, { passive: false })
+    window.addEventListener("mouseup", handleResizeEnd)
+    window.addEventListener("touchend", handleResizeEnd)
+
+    document.body.style.userSelect = "none"
+    e.stopPropagation()
+  }
+
+  function handleResize(e: MouseEvent | TouchEvent) {
+    if (!isResizing || !resizeSide) return
+
+    if ("touches" in e) {
+      e.preventDefault()
+      const currentX = e.touches[0].clientX
+      const diff = resizeSide === "right" ? startX - currentX : currentX - startX
+      width = Math.max(minWidth, Math.min(maxWidth, startWidth + diff))
+    } else {
+      const currentX = e.clientX
+      const diff = resizeSide === "right" ? startX - currentX : currentX - startX
+      width = Math.max(minWidth, Math.min(maxWidth, startWidth + diff))
+    }
+
+    onResize?.(width)
+  }
+
+  function handleResizeEnd() {
+    if (!isResizing) return
+
+    isResizing = false
+    resizeSide = null
+
+    window.removeEventListener("mousemove", handleResize)
+    window.removeEventListener("touchmove", handleResize)
+    window.removeEventListener("mouseup", handleResizeEnd)
+    window.removeEventListener("touchend", handleResizeEnd)
+
+    document.body.style.userSelect = ""
+    onResizeEnd?.(width)
+  }
+
+  function handleDragStart(e: MouseEvent | TouchEvent) {
+    if (!enableDragToSwap) return
+
+    isDragging = true
+
+    if ("touches" in e) {
+      dragIndicatorPosition = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+    } else {
+      dragIndicatorPosition = { x: e.clientX, y: e.clientY }
+    }
+
+    window.addEventListener("mousemove", handleDrag)
+    window.addEventListener("touchmove", handleDrag, { passive: false })
+    window.addEventListener("mouseup", handleDragEnd)
+    window.addEventListener("touchend", handleDragEnd)
+
+    e.stopPropagation()
+  }
+
+  function handleDrag(e: MouseEvent | TouchEvent) {
+    if (!isDragging) return
+
+    if ("touches" in e) {
+      e.preventDefault()
+      dragIndicatorPosition = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+    } else {
+      dragIndicatorPosition = { x: e.clientX, y: e.clientY }
+    }
+  }
+
+  function handleDragEnd(e: MouseEvent | TouchEvent) {
+    if (!isDragging) return
+
+    isDragging = false
+    dragIndicatorPosition = null
+
+    window.removeEventListener("mousemove", handleDrag)
+    window.removeEventListener("touchmove", handleDrag)
+    window.removeEventListener("mouseup", handleDragEnd)
+    window.removeEventListener("touchend", handleDragEnd)
+
+    let clientX: number
+    if ("changedTouches" in e) {
+      clientX = e.changedTouches[0].clientX
+    } else {
+      clientX = e.clientX
+    }
+
+    const viewportWidth = window.innerWidth
+    const threshold = viewportWidth * 0.4
+
+    const shouldSwap =
+      (position === "right" && clientX < threshold) ||
+      (position === "left" && clientX > viewportWidth - threshold)
+
+    if (shouldSwap) {
+      onSwap?.(position === "right" ? "left" : "right")
+    }
+  }
+</script>
+
+<div
+  bind:this={panel}
+  class={`resizable-panel border-l border-r border-${color}/30 ${isResizing ? " resizing" : ""}${isDragging ? " dragging" : ""}${animateWidth && !isResizing ? " animate-width" : ""}`}
+  style="width: {width}px;"
+>
+  {#if enableResize}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="resize-handle left"
+      style="right: 0;"
+      onmousedown={(e) => handleResizeStart(e, "left")}
+      ontouchstart={(e) => handleResizeStart(e, "left")}
+    >
+      <div class="handle-indicator"></div>
+    </div>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="resize-handle right"
+      style="left: 0;"
+      onmousedown={(e) => handleResizeStart(e, "right")}
+      ontouchstart={(e) => handleResizeStart(e, "right")}
+    >
+      <div class="handle-indicator"></div>
+    </div>
+  {/if}
+
+  {#if enableDragToSwap}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="drag-handle"
+      onmousedown={handleDragStart}
+      ontouchstart={handleDragStart}
+    >
+      <div class="drag-indicator"></div>
+    </div>
+  {/if}
+
+  <div class="panel-content min-w-0">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+
+{#if isDragging && dragIndicatorPosition}
+  <div
+    class="drag-preview"
+    style="left: {dragIndicatorPosition.x}px; top: {dragIndicatorPosition.y}px;"
+  >
+    <div class="drag-preview-inner"></div>
+  </div>
+{/if}
+
+<style>
+  .resizable-panel {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease;
+  }
+
+  .resizable-panel.animate-width {
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .resizable-panel.resizing { user-select: none; }
+
+  .resize-handle {
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 100;
+  }
+
+  .resize-handle.right { left: 0; width: 15px; }
+  .resize-handle.left { right: 0; width: 15px; }
+
+  .handle-indicator {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 6px;
+    border-radius: 2px;
+    transform: translateX(-50%);
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+  }
+
+  .resize-handle:hover .handle-indicator,
+  .resizing .handle-indicator {
+    background-color: var(--color-accent);
+  }
+
+  .drag-handle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 10px;
+    cursor: move;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .drag-indicator {
+    width: 30px;
+    height: 4px;
+    border-radius: 2px;
+    background-color: var(--color-base-300, oklch(0.82 0.03 255));
+    transition: background-color 0.2s ease;
+  }
+
+  .drag-handle:hover .drag-indicator,
+  .dragging .drag-indicator {
+    background-color: var(--color-primary, oklch(0.64 0.18 259));
+  }
+
+  .panel-content {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .drag-preview {
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    transform: translate(-50%, -50%);
+  }
+
+  .drag-preview-inner {
+    width: 100px;
+    height: 60px;
+    background-color: var(--color-primary, oklch(0.64 0.18 259));
+    opacity: 0.3;
+    border-radius: 4px;
+    border: 2px solid var(--color-primary, oklch(0.64 0.18 259));
+  }
+</style>

package/dist/components/ResizablePanel.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    position?: "left" | "right";
+    enableResize?: boolean;
+    enableDragToSwap?: boolean;
+    color?: string;
+    animateWidth?: boolean;
+    onResize?: (width: number) => void;
+    onResizeEnd?: (width: number) => void;
+    onSwap?: (newPosition: "left" | "right") => void;
+    children?: Snippet;
+};
+declare const ResizablePanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResizablePanel = ReturnType<typeof ResizablePanel>;
+export default ResizablePanel;