@lapis-notes/bases 0.1.0

package/dist/bases-view/table-view/components/table-header.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import type { Header } from "@tanstack/table-core";
+  import { createSortable } from "@dnd-kit/svelte/sortable";
+  import GripVertical from "@lucide/svelte/icons/grip-vertical";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { styleObjectToString } from "./dnd-style";
+  import { cn } from "@lapis-notes/api";
+  import { Icon } from "@lapis-notes/api/icon";
+  import ArrowUpDownIcon from "@lucide/svelte/icons/arrow-up-down";
+  import ArrowDown from "@lucide/svelte/icons/chevron-down";
+  import ArrowUp from "@lucide/svelte/icons/chevron-up";
+
+  let {
+    header,
+    icon = "lucide-info",
+    text,
+    width = header.getSize(),
+  }: {
+    header: Header<any, unknown>;
+    icon?: string;
+    text?: string;
+    width?: number;
+  } = $props();
+  let label = $derived(
+    text ?? header.column.columnDef.meta?.displayName?.toString() ?? header.id,
+  );
+  let direction = $derived(header.column.getIsSorted());
+  let isActive = $state(false);
+
+  const sortable = createSortable({
+    get id() {
+      return header.column.id;
+    },
+    get index() {
+      return header.index;
+    },
+    type: "bases-table-column",
+    accept: "bases-table-column",
+    get data() {
+      return {
+        type: "bases-table-column",
+        id: header.column.id,
+        index: header.index,
+      };
+    },
+  });
+
+  let style = $derived(
+    styleObjectToString({
+      opacity: sortable.isDragging ? 0.8 : 1,
+      position: "relative",
+      transition: "transform 0.2s ease-in-out",
+      "--ui-bases-table-cell-radius-active": 0,
+      "--ui-bases-table-cell-shadow-active":
+        "calc(var(--ui-bases-table-column-border-width) * -1) 0 0 var(--table-border-color)",
+      whiteSpace: "nowrap",
+      flex: `0 0 ${width}px`,
+      width: `${width}px`,
+      "z-index": sortable.isDragging ? 1 : 0,
+    }),
+  );
+</script>
+
+<div
+  {@attach sortable.attach}
+  {style}
+  data-column-id={header.id}
+  class={cn(
+    "bases-td group/header bases-style-z-1000-9e4878 bases-style-justify-between-8ef226 bases-style-overflow-hidden-2cd02d bases-style-px-0-5a270a bases-style-text-nowrap-621d3b bases-style-overflow-ellipsis-5b2ef5 bases-style-transition-colors-ceb69a",
+    isActive ? "bases-style-bg-accent-interactive-30-0c9f68" : "bases-style-hover-bg-border-2e3f11",
+  )}
+  onfocusin={() => {
+    isActive = true;
+  }}
+  onfocusout={(event) => {
+    const currentTarget = event.currentTarget;
+    const relatedTarget = event.relatedTarget;
+
+    if (
+      currentTarget instanceof HTMLElement &&
+      relatedTarget instanceof Node &&
+      currentTarget.contains(relatedTarget)
+    ) {
+      return;
+    }
+
+    isActive = false;
+  }}
+>
+  <div class="relative bases-style-flex-60fbb7 bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-items-center-3960ff bases-style-justify-between-8ef226 bases-style-gap-1-44ee8b">
+    <div class="bases-style-w-full-6da6a3 bases-style-pr-10-b70031">
+      {#if !header.isPlaceholder}
+        <Button
+          class="bases-style-flex-60fbb7 bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-justify-between-8ef226 bases-style-rounded-none-0c5e91 bases-style-p-2-7660b4 bases-style-pr-0-5431db bases-style-hover-bg-transparent-de520d bases-style-focus-visible-border-transparent-917fe2 bases-style-focus-visible-bg-transparent-23dcc5 bases-style-focus-visible-shadow-none-1697ce bases-style-focus-visible-ring-0-464a99 bases-style-focus-visible-ring-transparent-4358b1 bases-style-focus-visible-ring-offset-0-63ff32"
+          variant="ghost"
+          onclick={header.column.getToggleSortingHandler()}
+        >
+          <span class="bases-style-flex-60fbb7 bases-style-items-center-3960ff" data-tooltip={label}>
+            <Icon name={[icon, "lucide-info"]} class="bases-style-mr-1-618162" />
+            <span class="shrink bases-style-overflow-x-hidden-e271e6 bases-style-text-ellipsis-6e2e11">{label}</span>
+          </span>
+        </Button>
+      {/if}
+    </div>
+    <div class="absolute bases-style-top-0-216740 bases-style-right-0-d8cdca bases-style-flex-60fbb7 bases-style-h-full-668b21 bases-style-items-center-3960ff bases-style-bg-transparent-7f19cd">
+      <Button
+        variant="ghost"
+        data-grab-handle=""
+        aria-label={`Sort ${label}`}
+        class="bases-style-px-0-5a270a bases-style-hover-bg-transparent-de520d bases-style-focus-visible-border-transparent-917fe2 bases-style-focus-visible-bg-transparent-23dcc5 bases-style-focus-visible-shadow-none-1697ce bases-style-focus-visible-ring-0-464a99 bases-style-focus-visible-ring-transparent-4358b1 bases-style-focus-visible-ring-offset-0-63ff32"
+        size="xs"
+        onclick={header.column.getToggleSortingHandler()}
+      >
+        {#if direction === "asc"}
+          <ArrowUp class="" />
+        {:else if direction === "desc"}
+          <ArrowDown class="" />
+        {:else}
+          <ArrowUpDownIcon class="" />
+        {/if}
+      </Button>
+      <Button
+        {@attach sortable.attachHandle}
+        variant="ghost"
+        data-grab-handle=""
+        aria-label={`Reorder ${label} column`}
+        class="bases-style-px-0-5a270a bases-style-hover-bg-transparent-de520d bases-style-focus-visible-border-transparent-917fe2 bases-style-focus-visible-bg-transparent-23dcc5 bases-style-focus-visible-shadow-none-1697ce bases-style-focus-visible-ring-0-464a99 bases-style-focus-visible-ring-transparent-4358b1 bases-style-focus-visible-ring-offset-0-63ff32"
+        size="xs"
+      >
+        <GripVertical />
+      </Button>
+      <div
+        role="button"
+        aria-label={`Resize ${label} column`}
+        tabindex="-1"
+        ondblclick={() => header.column.resetSize()}
+        onmousedown={header.getResizeHandler()}
+        ontouchstart={header.getResizeHandler()}
+        class={cn(
+          "bases-style-bg-accent-interactive-8255bb absolute bases-style-top-0-216740 bases-style-right-0-d8cdca bases-style-h-full-668b21 bases-style-w-1-0b0057 bases-style-cursor-col-resize-1ee417 touch-none bases-style-opacity-0-706549 bases-style-select-none-7f6912 bases-style-hover-opacity-100-5da1d5",
+          header.column.getIsResizing() && "bases-style-opacity-100-3972e9",
+        )}
+      ></div>
+    </div>
+  </div>
+</div>

package/dist/bases-view/table-view/components/table-header.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Header } from "@tanstack/table-core";
+type $$ComponentProps = {
+    header: Header<any, unknown>;
+    icon?: string;
+    text?: string;
+    width?: number;
+};
+declare const TableHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/bases-view/table-view/components/table-placeholder.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" generics="TData">
+  import { type Table as TanstackTable } from "@tanstack/table-core";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import TableHeader from "./table-header.svelte";
+  import type { BasesView } from "../../bases.svelte";
+
+  type DataTableProps<TData> = {
+    view: BasesView;
+    table: TanstackTable<TData>;
+  };
+
+  let { table, view = $bindable() }: DataTableProps<TData> = $props();
+
+  let colSpan = $derived(
+    table.getAllColumns().filter((it) => it.getIsVisible()).length,
+  );
+</script>
+
+<div
+  class="bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-flex-grow-95a3df bases-style-overflow-auto-73fc3f bases-style-pb-16-db15dd"
+  style="scrollbar-gutter: stable; transform: translate3d(0,0,0)"
+  data-layout="table"
+>
+  <div
+    class="relative bases-style-pb-100px-03c580"
+  >
+    <Table.Root class="bases-style-overflow-visible-5b5e83 contain-layout">
+      <Table.Header class="bases-style-bg-secondary-ba939e sticky bases-style-top-0-216740 bases-style-z-100-db5a36">
+        <Table.Row class="bases-style-th-td-last-border-r-0-7a1990">
+          {#each table.getFlatHeaders() as header (header.id)}
+            <TableHeader {header} width={header.column.getSize()} />
+          {/each}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        <Table.Row class="bases-style-border-b-65fdba">
+          <Table.Cell colspan={colSpan} class="bases-style-h-24-9678c6 bases-style-border-b-65fdba bases-style-text-center-ca6bf6">
+            <div class="bases-style-flex-60fbb7 bases-style-w-full-6da6a3 bases-style-items-center-3960ff bases-style-justify-center-86843c">
+              <div class="loader"></div>
+            </div>
+          </Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table.Root>
+  </div>
+</div>

package/dist/bases-view/table-view/components/table-placeholder.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type Table as TanstackTable } from "@tanstack/table-core";
+import type { BasesView } from "../../bases.svelte";
+type DataTableProps<TData> = {
+    view: BasesView;
+    table: TanstackTable<TData>;
+};
+declare function $$render<TData>(): {
+    props: DataTableProps<TData>;
+    exports: {};
+    bindings: "view";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "view";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TablePlaceholder: $$IsomorphicComponent;
+type TablePlaceholder<TData> = InstanceType<typeof TablePlaceholder<TData>>;
+export default TablePlaceholder;

package/dist/bases-view/table-view/components/table-virtualizer-core.d.ts

@@ -0,0 +1,13 @@
+type VirtualRowLike = {
+    index: number;
+};
+type KeyedDisplayItem = {
+    key: string;
+};
+export type VisibleVirtualRow<TItem extends KeyedDisplayItem> = {
+    virtualRow: VirtualRowLike;
+    item: TItem;
+};
+export declare function resolveVisibleVirtualRows<TItem extends KeyedDisplayItem>(virtualRows: VirtualRowLike[], displayItems: TItem[]): Array<VisibleVirtualRow<TItem>>;
+export declare function resolveVirtualTotalSize(displayItemCount: number, totalSize: number): number;
+export {};

package/dist/bases-view/table-view/components/table-virtualizer-core.js

@@ -0,0 +1,12 @@
+export function resolveVisibleVirtualRows(virtualRows, displayItems) {
+    if (!displayItems.length) {
+        return [];
+    }
+    return virtualRows.flatMap((virtualRow) => {
+        const item = displayItems[virtualRow.index];
+        return item ? [{ virtualRow, item }] : [];
+    });
+}
+export function resolveVirtualTotalSize(displayItemCount, totalSize) {
+    return displayItemCount ? totalSize : 0;
+}