@krollins/blueprint 0.1.12 → 0.1.14

package/dist/components/table.js

@@ -0,0 +1,642 @@
+import { css as v, LitElement as y, nothing as h, html as c } from "lit";
+import { property as n, state as g, customElement as m } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { repeat as f } from "lit/directives/repeat.js";
+import { m as k } from "../shared/memoize-DlOFy-92.js";
+import { b as S } from "../shared/boolean-converter-XDGfS9LC.js";
+const x = v`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    border-radius: var(--bp-border-radius);
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-sm);
+    color: var(--bp-color-text);
+    background: var(--bp-color-surface);
+  }
+
+  /* Header styles */
+  .header-row {
+    background: var(--bp-color-surface-subdued);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  .header-cell {
+    font-weight: var(--bp-font-weight-semibold);
+    text-align: left;
+    color: var(--bp-color-text);
+  }
+
+  .header-cell--sortable {
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--bp-transition-fast);
+    position: relative;
+  }
+
+  .header-cell--sortable::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: transparent;
+    transition: background var(--bp-transition-fast);
+  }
+
+  .header-cell--sortable:hover::after {
+    background: var(--bp-color-primary);
+    opacity: 0.3;
+  }
+
+  .header-cell--sortable:hover {
+    background: var(--bp-color-surface);
+  }
+
+  .header-cell--sortable:active {
+    background: var(--bp-color-surface-subdued);
+    transform: translateY(1px);
+  }
+
+  .header-cell__content {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-1);
+  }
+
+  .header-cell__label {
+    flex: 1;
+  }
+
+  /* Sort icon */
+  .sort-icon {
+    display: flex;
+    align-items: center;
+    color: var(--bp-color-text-muted);
+    transition: color var(--bp-transition-fast);
+  }
+
+  .sort-icon--active {
+    color: var(--bp-color-primary);
+  }
+
+  /* Cell styles */
+  .cell {
+    padding: var(--bp-spacing-3) var(--bp-spacing-4);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+    vertical-align: middle;
+  }
+
+  .cell--checkbox {
+    width: var(--bp-spacing-10);
+    text-align: center;
+    padding-left: var(--bp-spacing-3);
+    padding-right: 0;
+  }
+
+  .cell--checkbox input[type='checkbox'] {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+    cursor: pointer;
+  }
+
+  /* Row styles */
+  .row {
+    transition: background-color var(--bp-transition-fast);
+    content-visibility: auto;
+    contain-intrinsic-size: auto 48px;
+  }
+
+  .row--hoverable:hover {
+    background: var(--bp-color-surface-subdued);
+  }
+
+  .row--selected {
+    background: oklch(from var(--bp-color-primary) l c h / 0.15);
+  }
+
+  .row--selected:hover {
+    background: oklch(from var(--bp-color-primary) l c h / 0.2);
+  }
+
+  /* Remove border from last row */
+  tbody tr:last-child .cell {
+    border-bottom: none;
+  }
+
+  /* Variants */
+  .table--striped tbody tr:nth-child(even) {
+    background: var(--bp-color-surface-subdued);
+  }
+
+  .table--striped tbody tr:nth-child(even):hover {
+    background: var(--bp-color-surface);
+  }
+
+  .table--striped .row--selected {
+    background: oklch(from var(--bp-color-primary) l c h / 0.15) !important;
+  }
+
+  .table--striped .row--selected:hover {
+    background: oklch(from var(--bp-color-primary) l c h / 0.2) !important;
+  }
+
+  .table--bordered {
+    border: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  .table--bordered .cell {
+    border: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  /* Sizes */
+  .table--sm .cell {
+    padding: var(--bp-spacing-1) var(--bp-spacing-3);
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .table--sm .row {
+    contain-intrinsic-size: auto 36px;
+  }
+
+  .table--md .cell {
+    padding: var(--bp-spacing-3) var(--bp-spacing-4);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .table--md .row {
+    contain-intrinsic-size: auto 48px;
+  }
+
+  .table--lg .cell {
+    padding: var(--bp-spacing-4) var(--bp-spacing-5);
+    font-size: var(--bp-font-size-base);
+  }
+
+  .table--lg .row {
+    contain-intrinsic-size: auto 56px;
+  }
+
+  /* Sticky header */
+  .table--sticky-header thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .table--sticky-header .header-row {
+    box-shadow: var(--bp-shadow-sm);
+  }
+
+  /* Selectable - add pointer cursor */
+  .table--selectable .row {
+    cursor: pointer;
+  }
+
+  /* Loading state */
+  .table--loading {
+    opacity: var(--bp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  /* Empty state */
+  .empty-state {
+    text-align: center;
+    padding: var(--bp-spacing-10);
+    color: var(--bp-color-text-muted);
+    background: var(--bp-color-surface-subdued);
+  }
+
+  .state-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bp-spacing-3);
+    padding: var(--bp-spacing-5);
+  }
+
+  .sort-icon--inactive {
+    opacity: 0.4;
+  }
+
+  /* Focus styles for keyboard navigation */
+  .header-cell--sortable:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .row:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: calc(-1 * var(--bp-focus-offset));
+  }
+
+  .cell--checkbox input[type='checkbox']:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .row,
+    .header-cell--sortable,
+    .sort-icon {
+      transition: none;
+    }
+
+    .header-cell--sortable:active {
+      transform: none;
+    }
+
+    .header-cell--sortable::after {
+      transition: none;
+    }
+  }
+`;
+var R = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, o, l) => {
+  for (var r = l > 1 ? void 0 : l ? $(t, o) : t, d = e.length - 1, a; d >= 0; d--)
+    (a = e[d]) && (r = (l ? a(t, o, r) : a(r)) || r);
+  return l && r && R(t, o, r), r;
+};
+let s = class extends y {
+  constructor() {
+    super(), this.allSelected = !1, this.computeSortedRows = k(
+      (e, t) => {
+        if (!t || t.direction === "none")
+          return e;
+        const { column: o, direction: l } = t;
+        return [...e].sort((r, d) => {
+          const a = r[o], p = d[o];
+          if (a === p) return 0;
+          if (a == null) return 1;
+          if (p == null) return -1;
+          let b = 0;
+          return typeof a == "string" && typeof p == "string" ? b = a.localeCompare(p) : typeof a == "number" && typeof p == "number" ? b = a - p : b = String(a).localeCompare(String(p)), l === "desc" ? -b : b;
+        });
+      }
+    ), this.columns = [], this.rows = [], this.variant = "default", this.size = "md", this.selectable = !1, this.multiSelect = !1, this.selectedRows = [], this.sortState = null, this.stickyHeader = !1, this.hoverable = !0, this.loading = !1;
+  }
+  shouldUpdate(e) {
+    for (const t of e.keys())
+      if (!s.VISUAL_ONLY_PROPS.has(t))
+        return !0;
+    return !0;
+  }
+  updated(e) {
+    (e.has("selectedRows") || e.has("rows")) && (this.allSelected = this.rows.length > 0 && this.selectedRows.length === this.rows.length);
+  }
+  /**
+   * Get sorted rows based on current sort state (memoized).
+   */
+  get sortedRows() {
+    return this.computeSortedRows(this.rows, this.sortState);
+  }
+  /**
+   * Handles click on sortable column header.
+   * Cycles through sort directions: asc → desc → none.
+   * Manages focus on header after sort completes.
+   */
+  handleHeaderClick(e, t) {
+    if (!e.sortable) return;
+    let o = "asc";
+    this.sortState?.column === e.key && (this.sortState.direction === "asc" ? o = "desc" : this.sortState.direction === "desc" && (o = "none")), this.sortState = { column: e.key, direction: o }, this.dispatchEvent(
+      new CustomEvent("bp-sort", {
+        detail: { column: e.key, direction: o },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.updateComplete.then(() => {
+      t.target?.focus();
+    });
+  }
+  /**
+   * Handles click events on table rows.
+   * Dispatches bp-row-click event and toggles selection if selectable.
+   */
+  handleRowClick(e, t) {
+    this.dispatchEvent(
+      new CustomEvent("bp-row-click", {
+        detail: { row: e, originalEvent: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.selectable && this.toggleRowSelection(e);
+  }
+  /**
+   * Handles keyboard events on table rows.
+   * Triggers selection on Enter or Space key press when selectable.
+   */
+  handleRowKeyDown(e, t) {
+    this.selectable && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.toggleRowSelection(e));
+  }
+  /**
+   * Toggles selection state for a row.
+   * Respects multiSelect setting for single vs multiple selection.
+   */
+  toggleRowSelection(e) {
+    const t = e.id, o = this.selectedRows.includes(t);
+    let l;
+    this.multiSelect ? l = o ? this.selectedRows.filter((r) => r !== t) : [...this.selectedRows, t] : l = o ? [] : [t], this.selectedRows = l, this.dispatchEvent(
+      new CustomEvent("bp-select", {
+        detail: { selectedRows: l, row: e, selected: !o },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Handles select all checkbox toggle.
+   * Selects or deselects all rows based on current state.
+   */
+  handleSelectAll() {
+    this.allSelected ? this.selectedRows = [] : this.selectedRows = this.rows.map((e) => e.id), this.dispatchEvent(
+      new CustomEvent("bp-select", {
+        detail: {
+          selectedRows: this.selectedRows,
+          selectAll: !this.allSelected
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Handles checkbox click events.
+   * Stops propagation only on the checkbox itself to prevent row click.
+   */
+  handleCheckboxClick(e, t) {
+    e.target instanceof HTMLInputElement && e.stopPropagation(), t ? this.toggleRowSelection(t) : this.handleSelectAll();
+  }
+  /** Select all rows */
+  selectAll() {
+    this.selectedRows = this.rows.map((e) => e.id), this.dispatchEvent(
+      new CustomEvent("bp-select", {
+        detail: { selectedRows: this.selectedRows, selectAll: !0 },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** Deselect all rows */
+  deselectAll() {
+    this.selectedRows = [], this.dispatchEvent(
+      new CustomEvent("bp-select", {
+        detail: { selectedRows: [], selectAll: !1 },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** Clear sort state */
+  clearSort() {
+    this.sortState = null;
+  }
+  /**
+   * Renders the sort icon for sortable columns.
+   * Shows chevron-up for ascending, chevron-down for descending, unsorted icon otherwise.
+   */
+  renderSortIcon(e) {
+    if (!e.sortable) return h;
+    const t = this.sortState?.column === e.key, o = t ? this.sortState?.direction : "none", l = o === "asc" ? "chevron-up" : o === "desc" ? "chevron-down" : "chevron-up";
+    return c`
+      <span class=${u({
+      "sort-icon": !0,
+      "sort-icon--active": t && o !== "none",
+      "sort-icon--inactive": o === "none"
+    })} part="sort-icon" aria-hidden="true">
+        <bp-icon name=${l} size="sm"></bp-icon>
+      </span>
+    `;
+  }
+  /**
+   * Renders the table header with column labels and sort icons.
+   */
+  renderHeader() {
+    return c`
+      <thead part="thead">
+        <tr class="header-row" part="header-row">
+          ${this.selectable && this.multiSelect ? c`
+                <th class="cell cell--checkbox" part="header-cell">
+                  <input
+                    type="checkbox"
+                    part="checkbox"
+                    .checked=${this.allSelected}
+                    .indeterminate=${this.selectedRows.length > 0 && !this.allSelected}
+                    @click=${(e) => this.handleCheckboxClick(e)}
+                    aria-label="Select all rows"
+                  />
+                </th>
+              ` : this.selectable ? c`<th class="cell cell--checkbox" part="header-cell"></th>` : h}
+          ${f(
+      this.columns,
+      (e) => e.key,
+      (e) => c`
+              <th
+                class="cell header-cell ${e.sortable ? "header-cell--sortable" : ""}"
+                part="header-cell"
+                style=${e.width ? `width: ${e.width}` : ""}
+                @click=${(t) => this.handleHeaderClick(e, t)}
+                tabindex=${e.sortable ? 0 : -1}
+                @keydown=${(t) => {
+        e.sortable && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.handleHeaderClick(e, t));
+      }}
+                aria-sort=${this.sortState?.column === e.key ? this.sortState.direction === "asc" ? "ascending" : this.sortState.direction === "desc" ? "descending" : "none" : "none"}
+              >
+                <span
+                  class="header-cell__content"
+                  style="justify-content: ${e.align === "center" ? "center" : e.align === "right" ? "flex-end" : "flex-start"}"
+                >
+                  <span class="header-cell__label">${e.label}</span>
+                  ${this.renderSortIcon(e)}
+                </span>
+              </th>
+            `
+    )}
+        </tr>
+      </thead>
+    `;
+  }
+  /**
+   * Renders the table body with rows and cells.
+   * Handles loading and empty states.
+   */
+  renderBody() {
+    const e = this.sortedRows;
+    return this.loading ? c`
+        <tbody part="tbody">
+          <tr>
+            <td
+              colspan=${this.columns.length + (this.selectable ? 1 : 0)}
+              class="empty-state"
+              part="empty-state"
+            >
+              <slot name="loading">
+                <div class="state-content">Loading...</div>
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      ` : e.length === 0 ? c`
+        <tbody part="tbody">
+          <tr>
+            <td
+              colspan=${this.columns.length + (this.selectable ? 1 : 0)}
+              class="empty-state"
+              part="empty-state"
+            >
+              <slot name="empty">
+                <div class="state-content">No data available</div>
+              </slot>
+            </td>
+          </tr>
+        </tbody>
+      ` : c`
+      <tbody part="tbody">
+        ${f(
+      e,
+      (t) => t.id,
+      (t) => {
+        const o = this.selectedRows.includes(t.id), l = {
+          row: !0,
+          "row--selected": o,
+          "row--hoverable": this.hoverable
+        };
+        return c`
+              <tr
+                class=${u(l)}
+                part="row"
+                @click=${(r) => this.handleRowClick(t, r)}
+                @keydown=${(r) => this.handleRowKeyDown(t, r)}
+                tabindex=${this.selectable ? 0 : -1}
+                aria-selected=${w(
+          this.selectable ? o ? "true" : "false" : void 0
+        )}
+              >
+                ${this.selectable ? c`
+                      <td class="cell cell--checkbox" part="cell">
+                        <input
+                          type="checkbox"
+                          part="checkbox"
+                          .checked=${o}
+                          @click=${(r) => this.handleCheckboxClick(r, t)}
+                          aria-label="Select row"
+                        />
+                      </td>
+                    ` : h}
+                ${f(
+          this.columns,
+          (r) => r.key,
+          (r) => {
+            const d = t[r.key], a = r.render ? r.render(d, t) : d;
+            return c`
+                      <td
+                        class="cell"
+                        part="cell"
+                        style="text-align: ${r.align || "left"}"
+                      >
+                        ${a}
+                      </td>
+                    `;
+          }
+        )}
+              </tr>
+            `;
+      }
+    )}
+      </tbody>
+    `;
+  }
+  render() {
+    const e = {
+      table: !0,
+      [`table--${this.variant}`]: !0,
+      [`table--${this.size}`]: !0,
+      "table--sticky-header": this.stickyHeader,
+      "table--selectable": this.selectable,
+      "table--loading": this.loading
+    };
+    return c`
+      <div class="table-wrapper">
+        <table
+          class=${u(e)}
+          part="table"
+          role="grid"
+          aria-busy=${this.loading}
+        >
+          ${this.renderHeader()} ${this.renderBody()}
+        </table>
+      </div>
+    `;
+  }
+};
+s.VISUAL_ONLY_PROPS = /* @__PURE__ */ new Set([
+  "hoverable",
+  "stickyHeader"
+]);
+s.styles = [x];
+i([
+  n({ type: Array })
+], s.prototype, "columns", 2);
+i([
+  n({ type: Array })
+], s.prototype, "rows", 2);
+i([
+  n({
+    type: String,
+    reflect: !0,
+    converter: {
+      fromAttribute: (e) => e && ["default", "striped", "bordered"].includes(e) ? e : "default"
+    }
+  })
+], s.prototype, "variant", 2);
+i([
+  n({
+    type: String,
+    reflect: !0,
+    converter: {
+      fromAttribute: (e) => e && ["sm", "md", "lg"].includes(e) ? e : "md"
+    }
+  })
+], s.prototype, "size", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "selectable", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "multiSelect", 2);
+i([
+  n({ type: Array })
+], s.prototype, "selectedRows", 2);
+i([
+  n({ type: Object })
+], s.prototype, "sortState", 2);
+i([
+  n({ type: Boolean, reflect: !0, attribute: "sticky-header" })
+], s.prototype, "stickyHeader", 2);
+i([
+  n({ converter: S, reflect: !0 })
+], s.prototype, "hoverable", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "loading", 2);
+i([
+  g()
+], s.prototype, "allSelected", 2);
+s = i([
+  m("bp-table")
+], s);
+export {
+  s as BpTable
+};
+//# sourceMappingURL=table.js.map