Feat: Spreadsheet

v2/pink-sb/src/lib/helpers/helpers.ts

@@ -8,3 +8,19 @@ export function clickOnEnter(
         event.currentTarget.click();
     }
 }
+
+export function clickOutside(node: HTMLElement, callback: () => void) {
+    const handleClick = (event: MouseEvent) => {
+        if (!node.contains(event.target as Node)) {
+            callback();
+        }
+    };
+
+    document.addEventListener('click', handleClick, true);
+
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

v2/pink-sb/src/lib/index.ts

@@ -52,3 +52,4 @@ export { default as Lights } from './lab/Lights.svelte';
 export { default as InlineInput } from './lab/InlineInput.svelte';
 export { default as Sonner } from './lab/Sonner.svelte';
 export { default as Logs } from './Logs.svelte';
+export { default as Spreadsheet } from './spreadsheet/index.js';

v2/pink-sb/src/lib/input/Textarea.svelte

@@ -44,6 +44,8 @@
             on:invalid
             on:change
             bind:value
+            on:blur
+            on:keydown
             rows={rows || value?.split('\n').length}
             {disabled}
             {readonly}

v2/pink-sb/src/lib/spreadsheet/Cell.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+    import Icon from '$lib/Icon.svelte';
+    import Textarea from '$lib/input/Textarea.svelte';
+    import type { Alignment, RootProp } from './index.js';
+    import { clickOutside } from '$lib/helpers/helpers.js';
+    import { createEventDispatcher, type ComponentType } from 'svelte';
+
+    export let root: RootProp;
+    export let value: string | undefined = undefined;
+    export let column: string | undefined = undefined;
+    export let alignment: Alignment = 'middle-middle';
+    export let icon: ComponentType | undefined = undefined;
+    export let id = `${column}-${Math.random().toString(36).substring(2, 9)}`;
+
+    export let isAction = false;
+    export let isHeader = false;
+    export let isEditable = true;
+
+    let width = 0;
+    let startX = 0;
+    let resizing = false;
+    let cellEl: HTMLElement;
+    let resizerEl: HTMLElement;
+
+    let isEditing = false;
+    let wasDraggable = false;
+    let originalValue = value;
+    const dispatch = createEventDispatcher();
+
+    $: isVerticalStart = alignment.startsWith('start');
+    $: isVerticalEnd = alignment.startsWith('end');
+    $: isHorizontalStart = alignment.endsWith('start');
+    $: isHorizontalEnd = alignment.endsWith('end');
+    $: options = typeof column !== 'undefined' ? root.columns?.[column] : undefined;
+    $: resizable = (options?.resizable ?? true) && column !== root.lastResizableColumnId;
+
+    $: isEditing = root.currentlyEditingCellId === id;
+    $: isSelect = (root.allowSelection && column?.includes('__select_')) || false;
+    $: isFixed = isSelect || isAction || options?.fixed;
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Escape') {
+            value = originalValue;
+            root.setEditing(null);
+        } else if (e.key === 'Enter' && !e.shiftKey) {
+            commitChange();
+        }
+    }
+
+    function commitChange() {
+        if (value !== originalValue) {
+            dispatch('change', { value });
+            originalValue = value;
+        }
+        root.setEditing(null);
+    }
+
+    function handlePointerDown(e: PointerEvent) {
+        if (!cellEl || typeof column !== 'string') return;
+
+        wasDraggable = cellEl.draggable;
+        cellEl.draggable = false;
+
+        resizing = true;
+        startX = e.clientX;
+        width = cellEl.offsetWidth;
+
+        document.body.style.userSelect = 'none';
+        resizerEl.setPointerCapture(e.pointerId);
+    }
+
+    function handlePointerMove(e: PointerEvent) {
+        if (!resizing || typeof column !== 'string') return;
+        const deltaX = e.clientX - startX;
+        const newWidth = Math.max(40, width + deltaX);
+        root.updateCells(column, newWidth);
+    }
+
+    function handlePointerUp() {
+        if (!resizing) return;
+        resizing = false;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+
+        if (wasDraggable) cellEl.draggable = true;
+    }
+
+    function handleContextMenu(event: MouseEvent) {
+        event.preventDefault();
+        dispatch('contextmenu', { event, id: isEditable ? id : undefined });
+    }
+</script>
+
+{#if !options || options?.hide !== true}
+    <div
+        role="cell"
+        tabindex="-1"
+        bind:this={cellEl}
+        data-fixed={isFixed}
+        data-select={isSelect}
+        data-action={isAction}
+        data-header={isHeader}
+        data-column-id={column}
+        data-editing-mode={isEditing}
+        draggable={!!options?.draggable && isHeader}
+        class:space-between={!!icon}
+        class:resizing-column={resizing}
+        class:vertical-end={isVerticalEnd}
+        class:vertical-start={isVerticalStart}
+        class:horizontal-end={isHorizontalEnd}
+        class:horizontal-start={isHorizontalStart}
+        class:dragging-column={root.draggingColumn === column}
+        style:left={isSelect ? '0' : undefined}
+        style:right={isAction ? '0' : undefined}
+        on:contextmenu={handleContextMenu}
+        use:clickOutside={() => {
+            if (isEditing) root.setEditing(null);
+        }}
+        on:dblclick={() => {
+            if (!isEditable) return;
+            originalValue = value;
+            root.setEditing(id);
+        }}
+        on:dragstart={(e) => root.startDrag(column, e)}
+        on:dragover={(e) => root.overDrag(column, e)}
+        on:drop={root.endDrag}
+    >
+        {#if value && !isAction}
+            {#if isEditing}
+                <Textarea bind:value on:keydown={handleKeydown} on:blur={commitChange} />
+            {:else}
+                {value}
+            {/if}
+        {:else}
+            <slot />
+        {/if}
+
+        {#if !isSelect}
+            {#if icon}
+                <Icon {icon} color="--fgcolor-neutral-weak" />
+            {/if}
+
+            {#if resizable}
+                <div
+                    role="presentation"
+                    class="column-resizer"
+                    aria-label="Resize column"
+                    bind:this={resizerEl}
+                    on:pointerup={handlePointerUp}
+                    on:pointerdown={handlePointerDown}
+                    on:pointermove={handlePointerMove}
+                />
+            {/if}
+        {/if}
+    </div>
+{/if}
+
+<style lang="scss">
+    [role='cell'] {
+        display: flex;
+        overflow: hidden;
+        position: relative;
+        align-items: center;
+        font-size: var(--font-size-s);
+        background: var(--bgcolor-neutral-primary);
+        padding: var(--space-4, 8px) var(--space-6, 12px);
+        border-bottom: var(--border-width-s) solid var(--border-neutral);
+
+        &[data-editing-mode='true'] {
+            min-height: 40px;
+        }
+
+        &[data-header='true'] {
+            background: var(--bgcolor-neutral-default);
+
+            &[data-action='true'] {
+                justify-content: center;
+            }
+        }
+
+        &[data-fixed='true'] {
+            z-index: 2;
+            position: sticky;
+            background: var(--bgcolor-neutral-default);
+
+            &[data-select='true'] {
+                left: 0;
+                border-right: var(--border-width-s) solid var(--border-neutral);
+            }
+
+            &[data-action='true'] {
+                right: 0;
+                border-left: var(--border-width-s) solid var(--border-neutral);
+            }
+        }
+
+        &.space-between {
+            justify-content: space-between;
+        }
+
+        &.horizontal-start {
+            justify-content: flex-start;
+        }
+        &.horizontal-end {
+            justify-content: flex-end;
+        }
+        &.vertical-start {
+            align-items: flex-start;
+        }
+        &.vertical-end {
+            align-items: flex-end;
+        }
+
+        &.resizing-column > .column-resizer {
+            border-left-color: #1e90ff; // var(--fgcolor-neutral-primary);
+        }
+
+        & > .column-resizer {
+            top: 0;
+            right: 0;
+            width: 2px;
+            height: 100%;
+            position: absolute;
+            cursor: col-resize;
+            touch-action: none;
+            background: transparent;
+            border-left: var(--border-width-s) solid var(--border-neutral);
+        }
+
+        &[draggable='true'] {
+            cursor: grab;
+        }
+
+        &.dragging-column {
+            cursor: grabbing;
+            background: var(--overlay-neutral-pressed);
+        }
+    }
+</style>