@lapis-notes/bases 0.1.0

package/dist/bases-view/components/sort/sort-row.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  import { createDraggable, createDroppable } from "@dnd-kit/svelte";
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import * as Command from "@lapismd/design-core/shadcn/command";
+  import { Icon } from "@lapis-notes/api/icon";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import Trash from "@lucide/svelte/icons/trash-2";
+  import ArrowUpDown from "@lucide/svelte/icons/chevrons-up-down";
+  import * as Select from "@lapismd/design-core/shadcn/select";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import type { SortColumn } from "../..";
+  import { cn } from "@lapis-notes/api";
+  import type { HTMLAttributes } from "svelte/elements";
+  import GripVertical from "@lucide/svelte/icons/grip-vertical";
+  import type { QueryController } from "../../bases.svelte";
+  import { getSortDirectionLabels } from "./sort-direction-labels";
+
+  type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+  };
+
+  let {
+    sort = $bindable(),
+    index,
+    controller,
+    deleteSort,
+    children,
+    class: className,
+    ...rest
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    sort: SortColumn;
+    index?: number;
+    controller: QueryController;
+    deleteSort?: () => void;
+  } = $props();
+
+  let column = $derived(
+    sort.property ? controller.getColumn(sort.property) : undefined,
+  );
+  let filterTypes = $derived.by(() => {
+    return getSortDirectionLabels(column?.type);
+  });
+
+  const filterLabel = $derived(
+    filterTypes.find((f) => f.value === sort.direction)?.label ?? "",
+  );
+
+  $effect(() => {
+    if (!sort.direction) {
+      sort.direction = filterTypes[0].value;
+    }
+  });
+
+  const draggable = createDraggable({
+    get id() {
+      return `bases-sort-row:${index ?? "empty"}`;
+    },
+    type: "bases-sort-row",
+    get disabled() {
+      return index === undefined;
+    },
+    get data() {
+      return {
+        type: "bases-sort-row",
+        index,
+      };
+    },
+  });
+
+  const droppable = createDroppable({
+    get id() {
+      return `bases-sort-row-drop:${index ?? "empty"}`;
+    },
+    accept: "bases-sort-row",
+    get disabled() {
+      return index === undefined;
+    },
+    get data() {
+      return {
+        type: "bases-sort-row",
+        index,
+      };
+    },
+  });
+</script>
+
+<div
+  {@attach draggable.attach}
+  {@attach droppable.attach}
+  class={cn(className, {
+    "bases-style-ring-ring-3e1868 bases-style-rounded-md-421ac2 bases-style-ring-1-3daca9": droppable.isDropTarget,
+    "bases-style-opacity-75-f85473": draggable.isDragging,
+  })}
+>
+  <div class="filter-row bases-style-mb-1-652817 bases-style-flex-60fbb7 bases-style-items-center-3960ff bases-style-gap-0-63a285" {...rest}>
+    <Button
+      {@attach draggable.attachHandle}
+      size="sm"
+      class="drag-handle bases-style-mr-0-5-1caf26"
+      variant="ghost"
+    >
+      <GripVertical />
+    </Button>
+    <div class="bases-style-flex-60fbb7 bases-style-h-9-e7a768 grow bases-style-items-center-3960ff bases-style-rounded-md-421ac2 bases-style-border-2-65935d">
+      <Popover.Root>
+        <Popover.Trigger class="">
+          {#snippet child({ props }: { props: Record<string, any> })}
+            <Button
+              {...props}
+              variant="outline"
+              size="sm"
+              class="bases-style-h-8-ed8a5d grow bases-style-rounded-none-0c5e91 bases-style-rounded-l-md-9b2e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
+            >
+              {#if column}
+                <Icon name={[column?.icon ?? "lucide-file"]} />
+                {column.displayName}
+              {:else}
+                <span class="bases-style-opacity-50-0b8c50">Property</span>
+              {/if}
+              <ArrowUpDown />
+            </Button>
+          {/snippet}
+        </Popover.Trigger>
+        <Popover.Content class="bases-style-w-max-2f935d bases-style-p-0-8a539c" align="start">
+          <Command.Root>
+            <Command.Input placeholder="Find or create" />
+            <Command.List class="bases-style-p-1-eb6a3c">
+              <Command.Empty>No results found.</Command.Empty>
+              {#each controller.getAllColumns() as column (column.id)}
+                <Command.Item
+                  onSelect={() => {
+                    sort.property = column.id;
+                  }}
+                >
+                  <div
+                    data-ui-part="bases-option-indicator"
+                    data-selected={sort.property === column.id}
+                    class={cn(
+                      "bases-style-mr-2-d2347e bases-style-flex-60fbb7 bases-style-size-4-f7b5fa bases-style-items-center-3960ff bases-style-justify-center-86843c bases-style-rounded-sm-36d446 border bases-style-border-var-interactive-accent-f46c93",
+                      sort.property === column.id
+                        ? "bases-style-ring-ring-3e1868 bases-style-border-none-4a5f0e bases-style-bg-var-interactive-accent-c58cc0 bases-style-text-var-text-on-accent-22b2b1 hover:ring"
+                        : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
+                    )}
+                  >
+                    <CheckIcon class="bases-style-size-4-f7b5fa" />
+                  </div>
+                  <Icon name={[column.icon ?? "lucide-info"]} />
+                  <span class="bases-style-overflow-hidden-2cd02d bases-style-text-ellipsis-6e2e11"
+                    >{column.displayName}</span
+                  >
+                  {#if !column.id.startsWith("note.")}
+                    <Command.Shortcut class="bases-style-font-mono-0e6570 bases-style-text-0-75em-c425cc"
+                      >{column.id}</Command.Shortcut
+                    >
+                  {/if}
+                </Command.Item>
+              {/each}
+            </Command.List>
+          </Command.Root>
+        </Popover.Content>
+      </Popover.Root>
+      <Select.Root type="single" bind:value={sort.direction}>
+        <Select.Trigger
+          size="sm"
+          class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-rounded-none-0c5e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
+        >
+          {filterLabel}
+          <ArrowUpDown />
+        </Select.Trigger>
+        <Select.Content>
+          {#each filterTypes as filterType (filterType.value)}
+            <Select.Item value={filterType.value} label={filterType.label}
+              >{filterType.label}</Select.Item
+            >
+          {/each}
+        </Select.Content>
+      </Select.Root>
+      {#if deleteSort}
+        <Button
+          variant="ghost"
+          size="sm"
+          class="bases-style-bg-background-e6f9e3 bases-style-h-8-ed8a5d bases-style-rounded-none-0c5e91 bases-style-rounded-r-md-d4eb07 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
+          onclick={() => deleteSort()}
+        >
+          <Trash />
+        </Button>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/bases-view/components/sort/sort-row.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SortColumn } from "../..";
+import type { HTMLAttributes } from "svelte/elements";
+import type { QueryController } from "../../bases.svelte";
+type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    sort: SortColumn;
+    index?: number;
+    controller: QueryController;
+    deleteSort?: () => void;
+};
+declare const SortRow: import("svelte").Component<$$ComponentProps, {}, "sort">;
+type SortRow = ReturnType<typeof SortRow>;
+export default SortRow;

package/dist/bases-view/components/summary-strip.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { cn } from "@lapis-notes/api";
+  import type { BasesPropertyId } from "../bases.svelte";
+  import type { BasesView } from "../bases.svelte";
+  import {
+    resolveConfiguredSummaries,
+    formatSummaryLabel,
+  } from "../summary-core";
+
+  let {
+    view,
+    class: className,
+  }: {
+    view: BasesView;
+    class?: string;
+  } = $props();
+
+  let queryResults = $derived(view.data);
+  let summaries = $derived.by(() => {
+    return resolveConfiguredSummaries(
+      view.config.getOrder(),
+      view.controller.doc.summaries,
+      view.config.get("summaries") as Record<string, string> | undefined,
+    ).map(({ propertyId, summaryKey }) => ({
+      propertyId,
+      label: formatSummaryLabel(summaryKey),
+      displayName: view.config.getDisplayName(propertyId as BasesPropertyId),
+      value: queryResults
+        .getSummaryValue(
+          view.controller,
+          queryResults.data,
+          propertyId as BasesPropertyId,
+          summaryKey,
+        )
+        .toString(),
+    }));
+  });
+</script>
+
+{#if summaries.length}
+  <div class={cn("bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-gap-2-77a2a2", className)}>
+    {#each summaries as summary (`${summary.propertyId}_${summary.label}`)}
+      <div
+        class="bases-summary-strip__item bases-style-min-w-28-4460ce bases-style-rounded-md-421ac2 border bases-style-px-3-0e17f2 bases-style-py-2-03b4dd bases-style-text-xs-359090"
+      >
+        <div class="bases-summary-strip__label truncate">
+          {summary.displayName}
+          {summary.label}
+        </div>
+        <div class="bases-summary-strip__value truncate bases-style-text-sm-fc7473 bases-style-font-medium-2689f3">
+          {summary.value}
+        </div>
+      </div>
+    {/each}
+  </div>
+{/if}

package/dist/bases-view/components/summary-strip.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BasesView } from "../bases.svelte";
+type $$ComponentProps = {
+    view: BasesView;
+    class?: string;
+};
+declare const SummaryStrip: import("svelte").Component<$$ComponentProps, {}, "">;
+type SummaryStrip = ReturnType<typeof SummaryStrip>;
+export default SummaryStrip;

package/dist/bases-view/components/tag-chip.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  let {
+    class: className,
+    name,
+    value,
+    hrefPrefix = "#",
+    target = "_blank",
+    rel = "noopener nofollow",
+    ...props
+  }: {
+    class?: string;
+    name?: string;
+    value?: string;
+    hrefPrefix?: string;
+    target?: string;
+    rel?: string;
+    [key: string]: unknown;
+  } = $props();
+
+  let label = $derived((name ?? value ?? "").toString());
+  let parts = $derived(
+    label
+      .replace(/^#/, "")
+      .split("/")
+      .filter((part) => part.trim()),
+  );
+  let segments = $derived.by(() =>
+    parts.map((segment, index) => ({
+      name: segment,
+      path: parts.slice(0, index + 1).join("/"),
+    })),
+  );
+</script>
+
+<span
+  class={["bases-tag", className].filter(Boolean).join(" ")}
+  data-ui-component="bases-tag"
+  data-ui-part="root"
+>
+  <span aria-hidden="true" data-ui-part="hash">#</span>
+  {#each segments as segment, index}
+    {#if index > 0}<span aria-hidden="true" data-ui-part="separator">/</span>{/if}
+    <a href={hrefPrefix + segment.path} {target} {rel} {...props}>
+      {segment.name}
+    </a>
+  {/each}
+</span>

package/dist/bases-view/components/tag-chip.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    class?: string;
+    name?: string;
+    value?: string;
+    hrefPrefix?: string;
+    target?: string;
+    rel?: string;
+    [key: string]: unknown;
+};
+declare const TagChip: import("svelte").Component<$$ComponentProps, {}, "">;
+type TagChip = ReturnType<typeof TagChip>;
+export default TagChip;

package/dist/bases-view/components/views.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import * as Command from "@lapismd/design-core/shadcn/command";
+  import * as DropdownMenu from "@lapismd/design-core/shadcn/dropdown-menu";
+
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+  import Ellipsis from "@lucide/svelte/icons/ellipsis";
+  import Plus from "@lucide/svelte/icons/plus";
+  import ArrowUpDown from "@lucide/svelte/icons/chevrons-up-down";
+
+  import { cn } from "@lapis-notes/api";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Icon } from "@lapis-notes/api/icon";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import type { BasesViewBase } from "../models";
+  import type { QueryController } from "../bases.svelte";
+  import ViewSettings from "../view-settings.svelte";
+
+  let {
+    views = $bindable(),
+    value = $bindable(),
+    show = $bindable(),
+    table,
+    controller = table as QueryController,
+  }: {
+    views: BasesViewBase[];
+    value: BasesViewBase;
+    controller?: QueryController;
+    table?: any;
+    show: boolean;
+  } = $props();
+
+  let selected: BasesViewBase | null = $state(null);
+  let open: boolean = $state(false);
+
+  function addView(evt: MouseEvent) {
+    views.push({
+      name: "Table",
+      type: "table",
+      order: ["file.name"],
+      sort: [],
+      limit: null,
+      filter: { and: [] },
+    });
+  }
+
+  function deleteView() {
+    const index = views.findIndex((v) => v == selected);
+    if (index !== -1) {
+      views.splice(index, 1);
+    }
+  }
+
+  function duplicateView() {
+    if (selected) {
+      const value = { ...$state.snapshot(selected) };
+      views.push(value);
+    }
+  }
+
+  function changeDisplayName(evt: FocusEvent) {
+    const target = evt.target as HTMLInputElement;
+    if (target && selected && target.value) {
+      selected.name = target.value;
+    }
+  }
+
+  function viewIcon(view?: BasesViewBase | null) {
+    if (!view) return "table";
+    const config = controller.views.get(view.type);
+    if (config) {
+      return config.icon;
+    }
+    return "table";
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props }: { props: Record<string, unknown> })}
+      <Button {...props} variant="outline" size="sm" class="bases-style-h-8-ed8a5d bases-style-border-dashed-a29b7a">
+        <Icon name={viewIcon(selected)} />
+        {value.name}
+        <ArrowUpDown />
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content class="bases-style-w-270px-448793 bases-style-min-w-220px-cbc208 bases-style-p-0-8a539c" align="start">
+    {#if selected}
+      <Command.Root>
+        <div class="bases-style-p-2-7660b4">
+          <div class="bases-style-flex-60fbb7 bases-style-justify-between-8ef226">
+            <Button
+              variant="ghost"
+              size="sm"
+              class="bases-style-flex-60fbb7 grow bases-style-justify-start-4b5cc1"
+              onclick={(evt) => {
+                selected = null;
+              }}
+            >
+              <ChevronLeft /> Edit {selected.name}
+            </Button>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                {#snippet child({ props }: { props: Record<string, unknown> })}
+                  <Button {...props} size="sm" variant="ghost"
+                    aria-label={`View actions for ${selected!.name}`}
+                    ><Ellipsis /></Button
+                  >
+                {/snippet}
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content>
+                <DropdownMenu.Item onclick={() => deleteView()}
+                  >Delete view</DropdownMenu.Item
+                >
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item onclick={() => duplicateView()}
+                  >Duplicate view</DropdownMenu.Item
+                >
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          </div>
+          <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e">
+            <Input
+              id="column_name"
+              aria-label="View name"
+              onblur={(evt) => changeDisplayName(evt)}
+              value={selected.name}
+              class={cn("bases-style-col-span-2-40efc0 bases-style-h-8-ed8a5d")}
+            />
+          </div>
+          <ViewSettings {controller} bind:view={selected} />
+        </div>
+      </Command.Root>
+    {:else}
+      <Command.Root>
+        <Command.Input placeholder="Find or create" aria-controls="bases-view-selector-list" />
+        <Command.List id="bases-view-selector-list" class="bases-style-p-1-eb6a3c">
+          <Command.Empty>No views found.</Command.Empty>
+          {#each views as view}
+            <Command.Item
+              class={cn("bases-style-mb-1-652817")}
+              onSelect={() => {
+                show = false;
+                open = false;
+                value = view;
+                setTimeout(() => (show = true));
+              }}
+            >
+              <Icon name={viewIcon(view)} />
+              <span>{view.name}</span>
+            </Command.Item>
+          {/each}
+        </Command.List>
+      </Command.Root>
+    {/if}
+    {#if !selected}
+      <div class="bases-style-flex-60fbb7 bases-style-w-full-6da6a3 bases-style-flex-col-8dddea bases-style-gap-1-44ee8b bases-style-border-t-b950dd bases-style-p-1-eb6a3c">
+        <Button
+          size="sm"
+          onclick={() => (selected = value)}
+          class="bases-style-w-full-6da6a3 bases-style-justify-start-4b5cc1"
+          variant="ghost"
+        >
+          <Ellipsis /> Edit current view
+        </Button>
+        <Button
+          size="sm"
+          onclick={(evt) => addView(evt)}
+          class="bases-style-w-full-6da6a3 bases-style-justify-start-4b5cc1"
+          variant="ghost"
+        >
+          <Plus /> Add view
+        </Button>
+      </div>
+    {/if}
+  </Popover.Content>
+</Popover.Root>

package/dist/bases-view/components/views.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { BasesViewBase } from "../models";
+import type { QueryController } from "../bases.svelte";
+type $$ComponentProps = {
+    views: BasesViewBase[];
+    value: BasesViewBase;
+    controller?: QueryController;
+    table?: any;
+    show: boolean;
+};
+declare const Views: import("svelte").Component<$$ComponentProps, {}, "value" | "show" | "views">;
+type Views = ReturnType<typeof Views>;
+export default Views;

package/dist/bases-view/data-table-adapter/data-table.svelte.d.ts

@@ -0,0 +1,45 @@
+import { type RowData, type TableOptions } from "@tanstack/table-core";
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ *
+ * @example
+ *   ```svelte
+ *   <script>
+ *     const table = createSvelteTable({ ... })
+ *   </script>
+ *
+ *   <table>
+ *     <thead>
+ *       {#each table.getHeaderGroups() as headerGroup}
+ *         <tr>
+ *           {#each headerGroup.headers as header}
+ *             <th colspan={header.colSpan}>
+ *           	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *           	 </th>
+ *           {/each}
+ *         </tr>
+ *       {/each}
+ *     </thead>
+ *   	 <!-- ... -->
+ *   </table>
+ *   ```;
+ *
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ */
+export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [
+    infer H,
+    ...infer R
+] ? H & Intersection<R> : unknown) & {};
+/**
+ * Lazily merges several objects (or thunks) while preserving getter semantics
+ * from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
+    [K in keyof Sources]: Sources[K];
+}>;
+export {};

package/dist/bases-view/data-table-adapter/data-table.svelte.js

@@ -0,0 +1,112 @@
+import { createTable, } from "@tanstack/table-core";
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ *
+ * @example
+ *   ```svelte
+ *   <script>
+ *     const table = createSvelteTable({ ... })
+ *   </script>
+ *
+ *   <table>
+ *     <thead>
+ *       {#each table.getHeaderGroups() as headerGroup}
+ *         <tr>
+ *           {#each headerGroup.headers as header}
+ *             <th colspan={header.colSpan}>
+ *           	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *           	 </th>
+ *           {/each}
+ *         </tr>
+ *       {/each}
+ *     </thead>
+ *   	 <!-- ... -->
+ *   </table>
+ *   ```;
+ *
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ */
+export function createSvelteTable(options) {
+    const resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        },
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function updateOptions() {
+        table.setOptions((prev) => {
+            return mergeObjects(prev, options, {
+                state: mergeObjects(state, options.state || {}),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                },
+            });
+        });
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    return table;
+}
+/**
+ * Lazily merges several objects (or thunks) while preserving getter semantics
+ * from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects(...sources) {
+    const resolve = (src) => typeof src === "function" ? (src() ?? undefined) : src;
+    const findSourceWithKey = (key) => {
+        for (let i = sources.length - 1; i >= 0; i--) {
+            const obj = resolve(sources[i]);
+            if (obj && key in obj)
+                return obj;
+        }
+        return undefined;
+    };
+    return new Proxy(Object.create(null), {
+        get(_, key) {
+            const src = findSourceWithKey(key);
+            return src?.[key];
+        },
+        has(_, key) {
+            return !!findSourceWithKey(key);
+        },
+        ownKeys() {
+            const all = new Set();
+            for (const s of sources) {
+                const obj = resolve(s);
+                if (obj) {
+                    for (const k of Reflect.ownKeys(obj)) {
+                        all.add(k);
+                    }
+                }
+            }
+            return [...all];
+        },
+        getOwnPropertyDescriptor(_, key) {
+            const src = findSourceWithKey(key);
+            if (!src)
+                return undefined;
+            return {
+                configurable: true,
+                enumerable: true,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                value: src[key],
+                writable: true,
+            };
+        },
+    });
+}