@deepfuture/dui-components 0.0.1

package/scroll-area/scroll-area.js

@@ -0,0 +1,453 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/scroll-area */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var _a;
+import { css, html, LitElement, nothing, } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    max-height: var(--scroll-area-max-height, none);
+  }
+
+  .ScrollArea {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    max-height: inherit;
+  }
+
+  .Viewport {
+    width: 100%;
+    height: 100%;
+    max-height: inherit;
+    overflow: auto;
+    overscroll-behavior: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .ScrollFade {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .Scrollbar {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+
+    &[data-hovering],
+    &[data-scrolling] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    &[data-scrolling] {
+      transition-duration: 0ms;
+    }
+  }
+
+  .Scrollbar::before {
+    content: "";
+    position: absolute;
+  }
+
+  .Scrollbar[data-orientation="vertical"] {
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    &::before {
+      width: 1.25rem;
+      height: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .Scrollbar[data-orientation="horizontal"] {
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    &::before {
+      width: 100%;
+      height: 1.25rem;
+      bottom: -0.25rem;
+    }
+  }
+
+  .Thumb[data-orientation="vertical"] {
+    width: 100%;
+    min-height: 1.25rem;
+  }
+
+  .Thumb[data-orientation="horizontal"] {
+    height: 100%;
+    min-width: 1.25rem;
+  }
+`;
+/**
+ * `<dui-scroll-area>` — A scroll container with custom styled scrollbar.
+ *
+ * Hides the native scrollbar and renders a custom track + thumb with
+ * auto-hide behavior. Supports vertical, horizontal, or both orientations.
+ *
+ * @slot - Default slot for scrollable content.
+ *
+ * @cssprop [--scroll-area-max-height] - Max-height constraint.
+ * @cssprop [--scroll-area-thumb-color] - Scrollbar thumb color.
+ * @cssprop [--scroll-fade-color] - Fade overlay color.
+ */
+export class DuiScrollArea extends LitElement {
+    static { this.tagName = "dui-scroll-area"; }
+    static { this.styles = [base, styles]; }
+    #orientation_accessor_storage = "vertical";
+    /** Scroll direction(s). */
+    get orientation() { return this.#orientation_accessor_storage; }
+    set orientation(value) { this.#orientation_accessor_storage = value; }
+    #fade_accessor_storage = false;
+    /** Show a fade overlay at the top when scrolled. */
+    get fade() { return this.#fade_accessor_storage; }
+    set fade(value) { this.#fade_accessor_storage = value; }
+    #maxHeight_accessor_storage = undefined;
+    /** Optional max-height constraint (CSS value). */
+    get maxHeight() { return this.#maxHeight_accessor_storage; }
+    set maxHeight(value) { this.#maxHeight_accessor_storage = value; }
+    willUpdate(changed) {
+        if (changed.has("maxHeight")) {
+            if (this.maxHeight)
+                this.style.setProperty("--scroll-area-max-height", this.maxHeight);
+            else
+                this.style.removeProperty("--scroll-area-max-height");
+        }
+    }
+    #hasOverflowX_accessor_storage = false;
+    // --- Internal state ---
+    get #hasOverflowX() { return this.#hasOverflowX_accessor_storage; }
+    set #hasOverflowX(value) { this.#hasOverflowX_accessor_storage = value; }
+    #hasOverflowY_accessor_storage = false;
+    get #hasOverflowY() { return this.#hasOverflowY_accessor_storage; }
+    set #hasOverflowY(value) { this.#hasOverflowY_accessor_storage = value; }
+    #hovering_accessor_storage = false;
+    get #hovering() { return this.#hovering_accessor_storage; }
+    set #hovering(value) { this.#hovering_accessor_storage = value; }
+    #scrolling_accessor_storage = false;
+    get #scrolling() { return this.#scrolling_accessor_storage; }
+    set #scrolling(value) { this.#scrolling_accessor_storage = value; }
+    #thumbHeightPercent_accessor_storage = 0;
+    get #thumbHeightPercent() { return this.#thumbHeightPercent_accessor_storage; }
+    set #thumbHeightPercent(value) { this.#thumbHeightPercent_accessor_storage = value; }
+    #thumbWidthPercent_accessor_storage = 0;
+    get #thumbWidthPercent() { return this.#thumbWidthPercent_accessor_storage; }
+    set #thumbWidthPercent(value) { this.#thumbWidthPercent_accessor_storage = value; }
+    #thumbTopPercent_accessor_storage = 0;
+    get #thumbTopPercent() { return this.#thumbTopPercent_accessor_storage; }
+    set #thumbTopPercent(value) { this.#thumbTopPercent_accessor_storage = value; }
+    #thumbLeftPercent_accessor_storage = 0;
+    get #thumbLeftPercent() { return this.#thumbLeftPercent_accessor_storage; }
+    set #thumbLeftPercent(value) { this.#thumbLeftPercent_accessor_storage = value; }
+    #isAtTop_accessor_storage = true;
+    get #isAtTop() { return this.#isAtTop_accessor_storage; }
+    set #isAtTop(value) { this.#isAtTop_accessor_storage = value; }
+    static #SCROLL_BOTTOM_TOLERANCE = 1;
+    #isAtBottom = true;
+    #prevScrollTop = 0;
+    #scrollEndTimer;
+    #resizeObserver;
+    #dragging;
+    #dragStartPointer = 0;
+    #dragStartScroll = 0;
+    // --- Lifecycle ---
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("pointerenter", this.#onPointerEnter);
+        this.addEventListener("pointerleave", this.#onPointerLeave);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("pointerenter", this.#onPointerEnter);
+        this.removeEventListener("pointerleave", this.#onPointerLeave);
+        this.#resizeObserver?.disconnect();
+        clearTimeout(this.#scrollEndTimer);
+    }
+    firstUpdated() {
+        const viewport = this.#viewport;
+        if (!viewport)
+            return;
+        this.#resizeObserver = new ResizeObserver(() => this.#measure());
+        this.#resizeObserver.observe(viewport);
+        const slot = viewport.querySelector("slot");
+        if (slot) {
+            slot.addEventListener("slotchange", () => {
+                requestAnimationFrame(() => this.#measure());
+            });
+        }
+        this.#measure();
+    }
+    // --- Public methods ---
+    /** Scroll the viewport to the bottom. */
+    async scrollToBottom() {
+        await this.updateComplete;
+        const viewport = this.#viewport;
+        if (viewport) {
+            viewport.scrollTop = viewport.scrollHeight;
+            this.#isAtBottom = true;
+            this.#prevScrollTop = viewport.scrollTop;
+        }
+    }
+    /** Whether the viewport is scrolled to the top. */
+    get isAtTop() {
+        return this.#isAtTop;
+    }
+    /** Whether the viewport is scrolled to the bottom. */
+    get isAtBottom() {
+        return this.#isAtBottom;
+    }
+    // --- Getters ---
+    get #viewport() {
+        return this.shadowRoot?.querySelector(".Viewport") ?? null;
+    }
+    get #showVertical() {
+        return this.orientation === "vertical" || this.orientation === "both";
+    }
+    get #showHorizontal() {
+        return this.orientation === "horizontal" || this.orientation === "both";
+    }
+    // --- Measurement ---
+    #measure = () => {
+        const vp = this.#viewport;
+        if (!vp)
+            return;
+        const hasOverflowY = vp.scrollHeight > vp.clientHeight;
+        const hasOverflowX = vp.scrollWidth > vp.clientWidth;
+        this.#hasOverflowY = hasOverflowY;
+        this.#hasOverflowX = hasOverflowX;
+        if (hasOverflowY) {
+            this.#thumbHeightPercent = (vp.clientHeight / vp.scrollHeight) * 100;
+        }
+        if (hasOverflowX) {
+            this.#thumbWidthPercent = (vp.clientWidth / vp.scrollWidth) * 100;
+        }
+        this.#updateThumbPosition(vp);
+    };
+    #updateThumbPosition = (vp) => {
+        if (this.#hasOverflowY) {
+            const maxScrollTop = vp.scrollHeight - vp.clientHeight;
+            this.#thumbTopPercent =
+                maxScrollTop > 0
+                    ? (vp.scrollTop / maxScrollTop) * (100 - this.#thumbHeightPercent)
+                    : 0;
+        }
+        if (this.#hasOverflowX) {
+            const maxScrollLeft = vp.scrollWidth - vp.clientWidth;
+            this.#thumbLeftPercent =
+                maxScrollLeft > 0
+                    ? (vp.scrollLeft / maxScrollLeft) * (100 - this.#thumbWidthPercent)
+                    : 0;
+        }
+    };
+    // --- Event handlers ---
+    #onScroll = () => {
+        const vp = this.#viewport;
+        if (!vp)
+            return;
+        this.#scrolling = true;
+        this.#updateThumbPosition(vp);
+        const wasAtBottom = this.#isAtBottom;
+        const scrolledUp = vp.scrollTop < this.#prevScrollTop;
+        this.#isAtTop = vp.scrollTop <= 0;
+        this.#isAtBottom =
+            vp.scrollTop + vp.clientHeight >=
+                vp.scrollHeight - _a.#SCROLL_BOTTOM_TOLERANCE;
+        if (scrolledUp && wasAtBottom && !this.#isAtBottom) {
+            this.dispatchEvent(new Event("scrolled-from-bottom", { bubbles: true, composed: true }));
+        }
+        else if (!wasAtBottom && this.#isAtBottom) {
+            this.dispatchEvent(new Event("scrolled-to-bottom", { bubbles: true, composed: true }));
+        }
+        this.#prevScrollTop = vp.scrollTop;
+        clearTimeout(this.#scrollEndTimer);
+        this.#scrollEndTimer = setTimeout(() => {
+            this.#scrolling = false;
+        }, 1000);
+    };
+    #onPointerEnter = () => {
+        this.#hovering = true;
+        this.#measure();
+    };
+    #onPointerLeave = () => {
+        this.#hovering = false;
+    };
+    // --- Track click (jump to position) ---
+    #onTrackPointerDown = (orientation, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const vp = this.#viewport;
+        if (!vp)
+            return;
+        if (orientation === "vertical") {
+            const track = this.shadowRoot?.querySelector('.Scrollbar[data-orientation="vertical"]');
+            if (!track)
+                return;
+            const rect = track.getBoundingClientRect();
+            const fraction = (event.clientY - rect.top) / rect.height;
+            vp.scrollTop = fraction * (vp.scrollHeight - vp.clientHeight);
+        }
+        else {
+            const track = this.shadowRoot?.querySelector('.Scrollbar[data-orientation="horizontal"]');
+            if (!track)
+                return;
+            const rect = track.getBoundingClientRect();
+            const fraction = (event.clientX - rect.left) / rect.width;
+            vp.scrollLeft = fraction * (vp.scrollWidth - vp.clientWidth);
+        }
+    };
+    // --- Thumb drag ---
+    #onThumbPointerDown = (orientation, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const vp = this.#viewport;
+        if (!vp)
+            return;
+        this.#dragging = orientation;
+        if (orientation === "vertical") {
+            this.#dragStartPointer = event.clientY;
+            this.#dragStartScroll = vp.scrollTop;
+        }
+        else {
+            this.#dragStartPointer = event.clientX;
+            this.#dragStartScroll = vp.scrollLeft;
+        }
+        document.addEventListener("pointermove", this.#onDragMove);
+        document.addEventListener("pointerup", this.#onDragEnd);
+    };
+    #onDragMove = (event) => {
+        const vp = this.#viewport;
+        if (!vp || !this.#dragging)
+            return;
+        if (this.#dragging === "vertical") {
+            const track = this.shadowRoot?.querySelector('.Scrollbar[data-orientation="vertical"]');
+            if (!track)
+                return;
+            const delta = event.clientY - this.#dragStartPointer;
+            const trackHeight = track.clientHeight;
+            const scrollRange = vp.scrollHeight - vp.clientHeight;
+            vp.scrollTop =
+                this.#dragStartScroll + (delta / trackHeight) * scrollRange;
+        }
+        else {
+            const track = this.shadowRoot?.querySelector('.Scrollbar[data-orientation="horizontal"]');
+            if (!track)
+                return;
+            const delta = event.clientX - this.#dragStartPointer;
+            const trackWidth = track.clientWidth;
+            const scrollRange = vp.scrollWidth - vp.clientWidth;
+            vp.scrollLeft =
+                this.#dragStartScroll + (delta / trackWidth) * scrollRange;
+        }
+    };
+    #onDragEnd = () => {
+        this.#dragging = undefined;
+        document.removeEventListener("pointermove", this.#onDragMove);
+        document.removeEventListener("pointerup", this.#onDragEnd);
+    };
+    // --- Render ---
+    #renderVerticalScrollbar() {
+        if (!this.#showVertical || !this.#hasOverflowY)
+            return nothing;
+        return html `
+      <div
+        class="Scrollbar"
+        part="scrollbar-vertical"
+        data-orientation="vertical"
+        ?data-hovering="${this.#hovering}"
+        ?data-scrolling="${this.#scrolling}"
+        @pointerdown="${(e) => this.#onTrackPointerDown("vertical", e)}"
+      >
+        <div
+          class="Thumb"
+          part="thumb-vertical"
+          data-orientation="vertical"
+          style="height: ${this.#thumbHeightPercent}%; top: ${this
+            .#thumbTopPercent}%; position: absolute;"
+          @pointerdown="${(e) => this.#onThumbPointerDown("vertical", e)}"
+        ></div>
+      </div>
+    `;
+    }
+    #renderHorizontalScrollbar() {
+        if (!this.#showHorizontal || !this.#hasOverflowX)
+            return nothing;
+        return html `
+      <div
+        class="Scrollbar"
+        part="scrollbar-horizontal"
+        data-orientation="horizontal"
+        ?data-hovering="${this.#hovering}"
+        ?data-scrolling="${this.#scrolling}"
+        @pointerdown="${(e) => this.#onTrackPointerDown("horizontal", e)}"
+      >
+        <div
+          class="Thumb"
+          part="thumb-horizontal"
+          data-orientation="horizontal"
+          style="width: ${this.#thumbWidthPercent}%; left: ${this
+            .#thumbLeftPercent}%; position: absolute;"
+          @pointerdown="${(e) => this.#onThumbPointerDown("horizontal", e)}"
+        ></div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div
+        class="ScrollArea"
+        part="root"
+        ?data-has-overflow-x="${this.#hasOverflowX}"
+        ?data-has-overflow-y="${this.#hasOverflowY}"
+        ?data-scrolling="${this.#scrolling}"
+      >
+        ${this.fade
+            ? html `<div
+              class="ScrollFade"
+              ?data-scrolled="${!this.#isAtTop}"
+            ></div>`
+            : nothing}
+        <div class="Viewport" part="viewport" @scroll="${this.#onScroll}">
+          <slot></slot>
+        </div>
+        ${this.#renderVerticalScrollbar()} ${this.#renderHorizontalScrollbar()}
+      </div>
+    `;
+    }
+}
+_a = DuiScrollArea;
+__decorate([
+    property({ reflect: true })
+], DuiScrollArea.prototype, "orientation", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiScrollArea.prototype, "fade", null);
+__decorate([
+    property({ attribute: "max-height" })
+], DuiScrollArea.prototype, "maxHeight", null);

package/select/index.d.ts

@@ -0,0 +1,2 @@
+export { DuiSelect } from "./select.js";
+export type { SelectOption } from "./select.js";

package/select/index.js

@@ -0,0 +1 @@
+export { DuiSelect } from "./select.js";

package/select/register.d.ts

@@ -0,0 +1 @@
+export {};

package/select/register.js

@@ -0,0 +1,4 @@
+import { DuiSelect } from "./select.js";
+if (!customElements.get(DuiSelect.tagName)) {
+    customElements.define(DuiSelect.tagName, DuiSelect);
+}

package/select/select.d.ts

@@ -0,0 +1,36 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/select */
+import { LitElement, type TemplateResult } from "lit";
+export type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type SelectValueChangeDetail = {
+    value: string;
+    option: SelectOption;
+};
+export declare const valueChangeEvent: (detail: SelectValueChangeDetail) => CustomEvent<SelectValueChangeDetail>;
+/**
+ * `<dui-select>` — A dropdown select for choosing from a list of options.
+ *
+ * @csspart trigger - The trigger button.
+ * @csspart value - The displayed value text.
+ * @fires value-change - Fired when the selected value changes.
+ *   Detail: { value: string, option: SelectOption }
+ */
+export declare class DuiSelect extends LitElement {
+    #private;
+    static tagName: "dui-select";
+    static styles: import("lit").CSSResult[];
+    /** The available options. */
+    accessor options: SelectOption[];
+    /** Currently selected value. */
+    accessor value: string;
+    /** Placeholder text shown when no value is selected. */
+    accessor placeholder: string;
+    /** Whether the select is disabled. */
+    accessor disabled: boolean;
+    /** Name for form submission. */
+    accessor name: string;
+    render(): TemplateResult;
+}