@spaethtech/svelte-ui 0.1.10

package/dist/components/TextArea/TextArea.svelte

@@ -0,0 +1,734 @@
+<script lang="ts">
+  import Icon from "../Icon/Icon.svelte";
+  import { faCopy } from "@fortawesome/free-solid-svg-icons";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+  import { DEV } from "esm-env";
+
+  interface Props extends HTMLTextareaAttributes {
+    value?: string;
+    lines?: string[];
+    class?: string;
+    textareaClass?: string;
+    validate?: (value: string) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLTextAreaElement;
+    minRows?: number;
+    maxRows?: number;
+    lineHeightRem?: number;
+    required?: boolean;
+    allowCopy?: boolean;
+  }
+
+  let {
+    value = $bindable(),
+    lines = $bindable(),
+    class: containerClass = "",
+    textareaClass = "",
+    validate,
+    valid = $bindable(true),
+    touched = $bindable(false),
+    element = $bindable(),
+    disabled = false,
+    minRows = 3,
+    maxRows,
+    lineHeightRem = 1.5,
+    required = false,
+    allowCopy = $bindable(true),
+    readonly = false,
+    ...restProps
+  }: Props = $props();
+
+  let textareaElement = $state<HTMLTextAreaElement>();
+  let containerElement = $state<HTMLDivElement>();
+  let isDragging = $state(false);
+  let dragStartY = 0;
+  let dragStartScrollTop = 0;
+  let thumbHeight = $state(20);
+  let thumbTop = $state(4);
+
+  // Development warnings for prop conflicts and empty content
+  if (DEV) {
+    if (value !== undefined && lines !== undefined) {
+      console.warn(
+        "TextArea: Both value and lines provided. Using value, ignoring lines."
+      );
+    }
+    if (value === undefined && !lines) {
+      console.warn(
+        "TextArea: No content provided (value or lines). TextArea will be empty."
+      );
+    }
+  }
+
+  // Determine content source and effective content
+  const hasValueProp = value !== undefined;
+  const hasLinesProp = lines !== undefined;
+
+  // Content precedence: value > lines
+  let effectiveContent = $derived(
+    hasValueProp ? value : hasLinesProp ? lines?.join("\n") || "" : ""
+  );
+
+  // Handle bidirectional binding for lines
+  $effect(() => {
+    if (hasLinesProp && !hasValueProp && textareaElement) {
+      const textValue = textareaElement.value;
+      if (textValue !== lines?.join("\n")) {
+        lines = textValue.split("\n");
+      }
+    }
+  });
+
+  // Enforce minimum rows and handle maxRows auto-sizing
+  const effectiveMinRows = Math.max(minRows, 2);
+  const effectiveMaxRows = maxRows ?? Infinity;
+  // disabled overrides both readonly and allowCopy
+  const effectiveReadonly = disabled ? true : readonly;
+  const effectiveAllowCopy = disabled ? false : allowCopy;
+
+  // Calculate initial rows based on content
+  // NOTE: This only counts explicit line breaks, not wrapped lines.
+  // The browser's native rows attribute has this same limitation.
+  // After mount, updateHeight() will calculate the precise height including wrapped text.
+  let initialRows = $derived.by(() => {
+    if (effectiveContent) {
+      // Count actual lines in the content (newline characters only)
+      const lineCount = effectiveContent.split("\n").length;
+      // Clamp between min and max
+      return Math.min(
+        Math.max(lineCount, effectiveMinRows, minRows),
+        effectiveMaxRows
+      );
+    }
+    // Default to minRows if no content
+    return Math.max(minRows, effectiveMinRows);
+  });
+
+  // Sync element binding
+  $effect(() => {
+    element = textareaElement;
+  });
+
+  // Validation logic
+  let validationResult = $state<boolean | string>(true);
+
+  function runValidation() {
+    if (!validate) {
+      valid = true;
+      validationResult = true;
+      return;
+    }
+
+    const result = validate(value || "");
+    validationResult = result;
+    valid = result === true;
+  }
+
+  // Run validation when value changes
+  $effect(() => {
+    runValidation();
+  });
+
+  // Calculate line height for proper sizing
+  let lineHeight = $state(0); // Will be calculated from actual element
+  let actualLineHeightRem = $state(0); // The rounded rem value we actually use
+
+  // Auto-resize functionality
+  function updateHeight() {
+    if (!textareaElement) return;
+    
+    
+
+    // Get line height - calculate from the prop value, ensuring whole pixels
+    if (lineHeight === 0) {
+      const rootFontSize = parseFloat(
+        getComputedStyle(document.documentElement).fontSize
+      );
+      // Round to nearest whole pixel, then convert back to rem for consistency
+      lineHeight = Math.round(lineHeightRem * rootFontSize);
+      actualLineHeightRem = lineHeight / rootFontSize;
+      
+    }
+
+    // Store current scroll position
+    const currentScroll = textareaElement.scrollTop;
+
+    // Force browser reflow by completely resetting styles
+    textareaElement.style.height = "";
+    textareaElement.style.overflow = "";
+    
+    // Force a layout reflow
+    textareaElement.offsetHeight;
+    
+    // Now set to auto for measurement
+    textareaElement.style.height = "auto";
+    textareaElement.style.overflow = "hidden";
+    
+    // Force another reflow to ensure measurement is accurate
+    const scrollHeight = textareaElement.scrollHeight;
+
+    // Calculate rows needed
+    const neededRows = Math.ceil(scrollHeight / lineHeight);
+    const actualRows = Math.min(
+      Math.max(neededRows, effectiveMinRows),
+      effectiveMaxRows
+    );
+    
+    // Update maxRows exceeded state
+    maxRowsExceeded = neededRows > effectiveMaxRows;
+
+    // Set the height
+    textareaElement.style.height = `${actualRows * lineHeight}px`;
+    textareaElement.style.overflow = ""; // Restore overflow
+
+    // Restore scroll position
+    textareaElement.scrollTop = currentScroll;
+
+    // Check if textarea is actually scrollable (after setting height)
+    // Only auto-sizing textareas (no maxRows) or those within maxRows bounds should allow page scrolling
+    // Need a brief delay to ensure DOM is updated
+    setTimeout(() => {
+      if (textareaElement && !effectiveReadonly) {
+        // If maxRows is not set (auto-sizing), never capture scroll events
+        if (maxRows === undefined) {
+          isScrollable = false;
+        } else {
+          // Only scrollable if content actually overflows the set height
+          isScrollable =
+            textareaElement.scrollHeight > textareaElement.clientHeight;
+        }
+      } else if (effectiveReadonly) {
+        // Readonly textareas are never scrollable in our context
+        isScrollable = false;
+      }
+    }, 0);
+
+    // Update scrollbar when content size changes
+    updateScrollbar();
+
+    // Force scrollbar update after DOM has settled, in case dimensions changed
+    setTimeout(() => updateScrollbar(), 0);
+  }
+
+  // Update height when value changes
+  $effect(() => {
+    if (textareaElement && value !== undefined) {
+      updateHeight();
+    }
+  });
+
+  // Initial height setup
+  $effect(() => {
+    if (textareaElement) {
+      // Don't set rows attribute - let our height calculation handle it
+      // Call immediately
+      updateHeight();
+
+      // Also call after a brief delay to ensure DOM is fully settled
+      setTimeout(() => updateHeight(), 0);
+
+      // Check if mouse is already over the element on mount (scrollbar for readonly too)
+      if (
+        containerElement?.matches(":hover") ||
+        textareaElement?.matches(":hover")
+      ) {
+        hovered = true;
+        updateScrollbar();
+      }
+    }
+  });
+
+  // Computed classes
+  let containerClasses = $derived.by(() => {
+    const base = "relative w-full";
+    return `${base} ${containerClass}`.trim();
+  });
+
+  let wrapperClasses = $derived.by(() => {
+    const base = "relative w-full rounded-md border-2 py-1 px-2";
+
+    // Use new semantic color system matching Input
+    const themeStyles = [
+      "bg-transparent",
+      "[border-color:var(--color-secondary)]",
+      "hover:[border-color:color-mix(in_srgb,var(--color-secondary)_80%,black)]",
+      "focus-within:[border-color:color-mix(in_srgb,var(--color-secondary)_90%,black)]",
+      "focus-within:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)]",
+      "focus-within:[outline-offset:0px]",
+    ].join(" ");
+
+    // Validation state overrides
+    let validationStyles = "";
+    if (touched && !valid) {
+      validationStyles =
+        "[border-color:var(--color-danger)] focus-within:[outline:2px_solid_color-mix(in_srgb,var(--color-danger)_70%,transparent)]";
+    }
+
+    // Disabled and readonly state
+    const disabledStyles = disabled
+      ? "![background-color:color-mix(in_srgb,var(--color-text)_5%,transparent)] [border-color:color-mix(in_srgb,var(--color-secondary)_50%,transparent)] !border !py-[calc(0.25rem+1px)] !px-[calc(0.5rem+1px)] cursor-not-allowed"
+      : effectiveReadonly
+        ? "[border-color:var(--color-secondary)] !border !py-[calc(0.25rem+1px)] !px-[calc(0.5rem+1px)]"
+        : "";
+
+    return `${base} ${themeStyles} ${validationStyles} ${disabledStyles}`.trim();
+  });
+
+  let textareaClasses = $derived.by(() => {
+    const base =
+      "w-full bg-transparent border-none outline-none text-sm resize-none custom-textarea";
+
+    // Use new semantic color system
+    const themeStyles = [
+      "[color:var(--color-text)]",
+      "placeholder:[color:var(--color-secondary)]",
+      "disabled:bg-transparent",
+      "disabled:[color:color-mix(in_srgb,var(--color-text)_40%,transparent)]",
+      "disabled:cursor-not-allowed",
+    ].join(" ");
+
+    // Padding adjustment for copy icon
+    const padding = effectiveAllowCopy ? "pr-8" : "";
+
+    // Cursor style based on allowCopy
+    const cursor = effectiveAllowCopy ? "" : "cursor-default";
+
+    return `${base} ${themeStyles} ${padding} ${cursor} ${textareaClass}`.trim();
+  });
+
+  let copyIconClasses = $derived.by(() => {
+    const base =
+      "absolute top-0 right-0 w-8 h-8 flex items-center justify-center flex-shrink-0 select-none z-20";
+    const interactive =
+      "cursor-pointer focus:outline-none transition-colors group";
+
+    return `${base} ${interactive}`.trim();
+  });
+
+  // Event handlers
+  function handleInput(event: Event) {
+    const target = event.target as HTMLTextAreaElement;
+    const newValue = target.value;
+
+    // Update the appropriate binding based on content source
+    if (hasValueProp) {
+      value = newValue;
+    } else if (hasLinesProp) {
+      lines = newValue.split("\n");
+    }
+    // For children mode, the textarea handles its own content
+
+    updateHeight();
+    if (restProps.oninput) restProps.oninput(event as any);
+  }
+
+  function handleFocus(event: FocusEvent) {
+    if (!effectiveAllowCopy) {
+      // Prevent focus when allowCopy is false
+      event.preventDefault();
+      if (textareaElement) {
+        textareaElement.blur();
+      }
+      return;
+    }
+    touched = true;
+    if (restProps.onfocus) restProps.onfocus(event as any);
+  }
+
+  // Copy functionality
+  async function copyToClipboard() {
+    if (!effectiveContent) return;
+    try {
+      await navigator.clipboard.writeText(effectiveContent);
+      // In a real app, you might show a toast notification here
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  }
+
+  function handleCopyKeydown(event: KeyboardEvent) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      copyToClipboard();
+    }
+  }
+
+  function handleCopyMouseDown(event: MouseEvent) {
+    event.preventDefault(); // Prevent text selection on double-click
+    event.stopPropagation(); // Prevent event from bubbling
+  }
+
+  function handleCopySelectStart(event: Event) {
+    event.preventDefault(); // Prevent text selection
+    return false;
+  }
+
+  function handleCopyDoubleClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    return false;
+  }
+
+  // Prevent text selection when allowCopy is false
+  function handleSelectStart(event: Event) {
+    if (!effectiveAllowCopy) {
+      event.preventDefault();
+      return false;
+    }
+  }
+
+  // Additional handlers for comprehensive text selection prevention
+  function handleDragStart(event: DragEvent) {
+    if (!effectiveAllowCopy) {
+      event.preventDefault();
+      return false;
+    }
+  }
+
+  function handleContextMenu(event: MouseEvent) {
+    if (!effectiveAllowCopy) {
+      event.preventDefault();
+      return false;
+    }
+  }
+
+  function handleMouseDown(event: MouseEvent) {
+    // Handle restProps mousedown first
+    if (restProps.onmousedown) restProps.onmousedown(event as any);
+
+    if (!effectiveAllowCopy) {
+      // Prevent clicking inside entirely - no focus, no selection
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    // Handle restProps keydown first
+    if (restProps.onkeydown) restProps.onkeydown(event as any);
+
+    if (!effectiveAllowCopy) {
+      // Prevent Ctrl+A (select all) and other selection shortcuts
+      if (
+        (event.ctrlKey || event.metaKey) &&
+        (event.key === "a" || event.key === "A")
+      ) {
+        event.preventDefault();
+        return false;
+      }
+    }
+  }
+
+  // Override browser validation
+  $effect(() => {
+    if (textareaElement) {
+      textareaElement.setCustomValidity("");
+      if (touched && !valid && typeof validationResult === "string") {
+        textareaElement.setCustomValidity(validationResult);
+      }
+    }
+  });
+
+  // Track hover state for scrollbar
+  let hovered = $state(false);
+
+  // Track if maxRows is exceeded
+  let maxRowsExceeded = $state(false);
+
+  // Track if the textarea is actually scrollable
+  let isScrollable = $state(false);
+
+  // Scrollbar functions
+  function showScrollbar() {
+    if (!textareaElement || !hovered || lineHeight === 0) return false;
+
+    // Show scrollbar only when textarea is actually scrollable and we're hovered
+    return isScrollable;
+  }
+
+  function updateScrollbar() {
+    if (!showScrollbar() || !textareaElement) {
+      thumbHeight = 20;
+      thumbTop = 0;
+      return;
+    }
+
+    const visibleRatio =
+      textareaElement.clientHeight / textareaElement.scrollHeight;
+    const trackHeight = textareaElement.clientHeight;
+    thumbHeight = Math.max(
+      20,
+      Math.min(trackHeight, visibleRatio * trackHeight)
+    );
+
+    const maxScrollTop =
+      textareaElement.scrollHeight - textareaElement.clientHeight;
+    if (maxScrollTop > 0) {
+      const scrollRatio = textareaElement.scrollTop / maxScrollTop;
+      const availableTrackHeight = trackHeight - thumbHeight;
+      thumbTop = scrollRatio * availableTrackHeight;
+    }
+  }
+
+  let isAdjustingScroll = false; // Prevent adjustment loops
+
+  function handleScroll() {
+    if (
+      textareaElement &&
+      lineHeight > 0 &&
+      !isAdjustingScroll &&
+      isScrollable &&
+      !effectiveReadonly
+    ) {
+      // Get the current scroll position
+      const currentScroll = textareaElement.scrollTop;
+
+      // Calculate the nearest line boundary (ensure whole pixels)
+      const nearestLineScroll = Math.round(
+        Math.round(currentScroll / lineHeight) * lineHeight
+      );
+
+      // Only adjust if we're more than 0.5px away from a line boundary
+      // Use a smaller threshold to reduce bounce but still snap effectively
+      if (Math.abs(currentScroll - nearestLineScroll) > 0.5) {
+        isAdjustingScroll = true;
+        textareaElement.scrollTop = nearestLineScroll;
+        // Reset flag after a brief delay to allow the adjustment to complete
+        setTimeout(() => {
+          isAdjustingScroll = false;
+        }, 10);
+      }
+
+      updateScrollbar();
+    } else if (textareaElement) {
+      // For non-scrollable textareas, just update the scrollbar without adjusting scroll
+      updateScrollbar();
+    }
+  }
+
+  function handleWheel(event: WheelEvent) {
+    if (!textareaElement || lineHeight === 0 || effectiveReadonly) return;
+
+    // Only handle wheel events if the textarea is actually scrollable
+    if (!isScrollable) return;
+
+    // Check if the scroll would stay within textarea bounds
+    const currentScroll = textareaElement.scrollTop;
+    const maxScrollTop =
+      textareaElement.scrollHeight - textareaElement.clientHeight;
+    const scrollingDown = event.deltaY > 0;
+    const scrollingUp = event.deltaY < 0;
+
+    // Only prevent default if the scroll would stay within bounds
+    const canScrollDown = scrollingDown && currentScroll < maxScrollTop;
+    const canScrollUp = scrollingUp && currentScroll > 0;
+
+    if (!canScrollDown && !canScrollUp) {
+      // Let the page handle the scroll if we're at the bounds
+      return;
+    }
+
+    // Prevent default scrolling behavior only when we can handle it
+    event.preventDefault();
+
+    // Calculate scroll step in terms of line heights
+    // Use 3 lines per wheel "tick" for smooth scrolling
+    const linesPerStep = 3;
+    const scrollStep = lineHeight * linesPerStep;
+
+    // Determine scroll direction
+    const scrollDelta = event.deltaY > 0 ? scrollStep : -scrollStep;
+
+    // Get current position snapped to line boundary
+    const currentLine = Math.round(currentScroll / lineHeight);
+
+    // Calculate new line position
+    const newLine = Math.max(
+      0,
+      currentLine + (scrollDelta > 0 ? linesPerStep : -linesPerStep)
+    );
+    const newScrollTop = newLine * lineHeight;
+
+    // Apply bounds checking
+    const boundedScrollTop = Math.max(0, Math.min(newScrollTop, maxScrollTop));
+
+    // Set the new scroll position (this will trigger handleScroll which will fine-tune if needed)
+    textareaElement.scrollTop = boundedScrollTop;
+  }
+
+  function handleThumbMouseDown(event: MouseEvent) {
+    if (!textareaElement) return;
+    event.preventDefault();
+    isDragging = true;
+    dragStartY = event.clientY;
+    dragStartScrollTop = textareaElement.scrollTop;
+
+    document.addEventListener("mousemove", handleThumbMouseMove);
+    document.addEventListener("mouseup", handleThumbMouseUp);
+  }
+
+  function handleThumbMouseMove(event: MouseEvent) {
+    if (!isDragging || !textareaElement) return;
+
+    const deltaY = event.clientY - dragStartY;
+    const trackHeight = textareaElement.clientHeight - thumbHeight;
+    const scrollRatio = deltaY / trackHeight;
+    const maxScrollTop =
+      textareaElement.scrollHeight - textareaElement.clientHeight;
+
+    textareaElement.scrollTop = Math.max(
+      0,
+      Math.min(maxScrollTop, dragStartScrollTop + scrollRatio * maxScrollTop)
+    );
+  }
+
+  function handleThumbMouseUp() {
+    isDragging = false;
+    document.removeEventListener("mousemove", handleThumbMouseMove);
+    document.removeEventListener("mouseup", handleThumbMouseUp);
+  }
+
+  // Use Svelte reactivity to track window size changes
+  let windowWidth = $state(0);
+  let windowHeight = $state(0);
+
+  // Initialize window dimensions
+  $effect(() => {
+    if (typeof window !== 'undefined') {
+      windowWidth = window.innerWidth;
+      windowHeight = window.innerHeight;
+
+      const handleResize = () => {
+        windowWidth = window.innerWidth;
+        windowHeight = window.innerHeight;
+      };
+
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }
+  });
+
+  // React to window size changes and update height immediately
+  $effect(() => {
+    if (textareaElement && windowWidth > 0) {
+      updateHeight();
+    }
+  });
+
+  // Update scrollbar when hover state changes
+  $effect(() => {
+    if (hovered !== undefined && !effectiveReadonly) {
+      updateScrollbar();
+    }
+  });
+</script>
+
+<div class={containerClasses}>
+  <div
+    bind:this={containerElement}
+    class={wrapperClasses}
+    onmouseenter={effectiveReadonly
+      ? undefined
+      : () => {
+          hovered = true;
+          updateScrollbar();
+        }}
+    onmouseleave={effectiveReadonly
+      ? undefined
+      : () => {
+          hovered = false;
+          updateScrollbar();
+        }}
+    role="group"
+    aria-label="Text area with controls"
+  >
+    <textarea
+      bind:this={textareaElement}
+      value={effectiveContent}
+      oninput={handleInput}
+      onfocus={handleFocus}
+      onscroll={handleScroll}
+      onwheel={effectiveReadonly ? undefined : handleWheel}
+      onselectstart={handleSelectStart}
+      onmousedown={handleMouseDown}
+      onkeydown={handleKeyDown}
+      ondragstart={handleDragStart}
+      oncontextmenu={handleContextMenu}
+      {...restProps}
+      class={textareaClasses}
+      style="line-height: {actualLineHeightRem ||
+        lineHeightRem}rem; margin: 0; padding: 0; vertical-align: top; {effectiveReadonly
+        ? ''
+        : 'scroll-snap-type: y mandatory; scroll-padding: 0; overscroll-behavior: contain;'}{effectiveAllowCopy
+        ? ''
+        : ' user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;'}"
+      rows={initialRows}
+      {disabled}
+      readonly={effectiveReadonly}
+      {required}
+      tabindex={effectiveAllowCopy ? undefined : -1}
+      aria-invalid={touched && !valid ? "true" : "false"}
+      aria-describedby={touched &&
+      !valid &&
+      typeof validationResult === "string"
+        ? "textarea-error"
+        : undefined}
+    ></textarea>
+
+    {#if effectiveAllowCopy && effectiveContent}
+      <div
+        class={copyIconClasses}
+        onclick={copyToClipboard}
+        onkeydown={handleCopyKeydown}
+        onmousedown={handleCopyMouseDown}
+        ondblclick={handleCopyDoubleClick}
+        onselectstart={handleCopySelectStart}
+        role="button"
+        tabindex="0"
+        style="user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;"
+        title="Copy to clipboard"
+      >
+        <Icon
+          icon={faCopy}
+          class="w-4 h-4 [color:var(--color-secondary)!important] group-hover:[color:color-mix(in_srgb,var(--color-secondary)_80%,black)!important] group-focus:[color:color-mix(in_srgb,currentColor_70%,transparent)!important] transition-colors"
+        />
+      </div>
+    {/if}
+
+    <!-- Custom scrollbar thumb -->
+    {#if showScrollbar()}
+      <div
+        class="absolute right-1 [background-color:var(--color-secondary)] rounded cursor-pointer hover:[background-color:color-mix(in_srgb,var(--color-secondary)_90%,black)] transition-colors z-10"
+        style="top: {thumbTop + 4}px; height: {thumbHeight}px; width: 6px;"
+        onmousedown={handleThumbMouseDown}
+        role="scrollbar"
+        aria-orientation="vertical"
+        aria-controls="textarea"
+        aria-valuenow={textareaElement
+          ? Math.round(
+              (textareaElement.scrollTop /
+                (textareaElement.scrollHeight - textareaElement.clientHeight)) *
+                100
+            )
+          : 0}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        tabindex="-1"
+        aria-label="Scroll thumb"
+      ></div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Hide default scrollbar */
+  .custom-textarea::-webkit-scrollbar {
+    display: none;
+  }
+
+  .custom-textarea {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+</style>