@lapis-notes/bases 0.1.0

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

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

package/dist/bases-view/table-view/index.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { BasesOptions } from "@lapis-notes/api";
+import { BasesView, QueryController } from "../bases.svelte";
+export declare class TableView extends BasesView {
+    readonly controller: QueryController;
+    readonly scrollEl: HTMLElement;
+    type: string;
+    constructor(controller: QueryController, scrollEl: HTMLElement);
+    onDataUpdated(): void;
+    static getViewOptions(): BasesOptions[];
+}

package/dist/bases-view/table-view/index.svelte.js

@@ -0,0 +1,30 @@
+import { BasesView, QueryController } from "../bases.svelte";
+import TableViewComponent from "./components/table.svelte";
+export class TableView extends BasesView {
+    controller;
+    scrollEl;
+    type = "table";
+    constructor(controller, scrollEl) {
+        super(controller);
+        this.controller = controller;
+        this.scrollEl = scrollEl;
+        this.mountViewComponent(TableViewComponent, { view: this }, scrollEl);
+    }
+    onDataUpdated() { }
+    static getViewOptions() {
+        return [
+            {
+                key: "rowHeight",
+                displayName: "Row Height",
+                type: "dropdown",
+                default: "short",
+                options: {
+                    short: "Short",
+                    medium: "Medium",
+                    tall: "Tall",
+                    extra: "Extra tall",
+                },
+            },
+        ];
+    }
+}

package/dist/bases-view/unknown-view/index.d.ts

@@ -0,0 +1,10 @@
+import type { BasesOptions } from "@lapis-notes/api";
+import { BasesView, QueryController } from "../bases.svelte";
+export declare class UnknownView extends BasesView {
+    readonly controller: QueryController;
+    readonly scrollEl: HTMLElement;
+    type: string;
+    constructor(controller: QueryController, scrollEl: HTMLElement);
+    onDataUpdated(): void;
+    static getViewOptions(): BasesOptions[];
+}

package/dist/bases-view/unknown-view/index.js

@@ -0,0 +1,19 @@
+import { BasesView, QueryController } from "../bases.svelte";
+import UnknownViewComponent from "./view.svelte";
+export class UnknownView extends BasesView {
+    controller;
+    scrollEl;
+    type = "unknown";
+    constructor(controller, scrollEl) {
+        super(controller);
+        this.controller = controller;
+        this.scrollEl = scrollEl;
+        this.mountViewComponent(UnknownViewComponent, {
+            type: controller.selectedView?.type ?? "unknown",
+        }, scrollEl);
+    }
+    onDataUpdated() { }
+    static getViewOptions() {
+        return [];
+    }
+}

package/dist/bases-view/unknown-view/view.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  let { type }: { type: string } = $props();
+</script>
+
+<div
+  class="bases-view bases-error bases-style-w-full-6da6a3 bases-style-border-t-b950dd bases-style-px-2-d5eab2 bases-style-py-1-660d2e bases-style-text-sm-fc7473"
+  data-ui-component="bases-unknown-view"
+  data-ui-part="fallback"
+>
+  <p>Base configured with an unknown view type: {type}</p>
+</div>

package/dist/bases-view/unknown-view/view.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    type: string;
+};
+declare const View: import("svelte").Component<$$ComponentProps, {}, "">;
+type View = ReturnType<typeof View>;
+export default View;

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

@@ -0,0 +1,142 @@
+<script lang="ts" generics="TData, TValue">
+  import Properties from "./components/column-visibility.svelte";
+  import FilterComponent from "./components/filters/filter-root.svelte";
+  import Sort from "./components/sort/sort-root.svelte";
+  import Limit from "./components/limit.svelte";
+  import { cn } from "@lapis-notes/api";
+  import Views from "./components/views.svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import Plus from "@lucide/svelte/icons/plus";
+  import Search from "@lucide/svelte/icons/search";
+  import { onMount } from "svelte";
+  import type { QueryController } from "./bases.svelte";
+  import { serializeResultsToCsv } from "./export-core";
+
+  type DataTableProps<TData, TValue> = {
+    controller: QueryController;
+  };
+
+  let { controller = $bindable() }: DataTableProps<TData, TValue> = $props();
+
+  async function createFile() {
+    await controller.view?.createFileForView();
+  }
+
+  function buildCsv() {
+    const properties = controller.view?.config.getOrder() ?? [];
+    return serializeResultsToCsv(
+      controller.view?.data.data ?? [],
+      properties,
+      (propertyId) => controller.view.config.getDisplayName(propertyId),
+    );
+  }
+
+  async function copyCsv() {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+    await navigator.clipboard.writeText(buildCsv());
+  }
+
+  function exportCsv() {
+    if (typeof document === "undefined" || typeof URL === "undefined") return;
+    const blob = new Blob([buildCsv()], { type: "text/csv;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = `${controller.selectedView.name || "base"}.csv`;
+    anchor.click();
+    URL.revokeObjectURL(url);
+  }
+
+  let show = $state(false);
+  onMount(() => {
+    setTimeout(() => {
+      show = true;
+    });
+  });
+</script>
+
+<div
+  class="bases-view__toolbar bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-items-center-3960ff bases-style-justify-between-8ef226 bases-style-gap-1-44ee8b bases-style-px-2-d5eab2 bases-style-py-4-cb11fe"
+  data-ui-component="bases-toolbar"
+  data-ui-part="root"
+>
+  <div class="bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-gap-1-44ee8b">
+    <Views
+      bind:show
+      {controller}
+      bind:value={
+        () => controller.selectedView,
+        (value) => (controller.selectedView = value)
+      }
+      bind:views={
+        () => controller.doc.views, (views) => (controller.doc.views = views)
+      }
+    />
+    <Limit
+      bind:view={controller.selectedView}
+      class={cn({
+        "bases-view__toolbar-button--active":
+          controller.selectedView.limit && controller.selectedView.limit > 0,
+      })}
+      count={controller.count}
+      onCopyCsv={copyCsv}
+      onExportCsv={exportCsv}
+    />
+  </div>
+  <div class="bases-style-flex-60fbb7 bases-style-flex-wrap-1eb5c6 bases-style-gap-1-44ee8b">
+    <Button
+      variant="outline"
+      size="sm"
+      class={cn("bases-style-h-8-ed8a5d", {
+        "bases-view__toolbar-button--active":
+          controller.searchPanelOpen || !!controller.searchQuery.trim(),
+      })}
+      onclick={() => controller.toggleSearchPanel()}
+    >
+      <Search />
+      <span>Search</span>
+    </Button>
+    <Sort
+      bind:orderBy={
+        () => controller.selectedView.sort,
+        (orderBy) => (controller.selectedView.sort = orderBy)
+      }
+      {controller}
+      class={cn({
+        "bases-view__toolbar-button--active":
+          controller.selectedView.sort.length ||
+          !!controller.selectedView.groupBy?.property,
+      })}
+    />
+    <FilterComponent
+      bind:currentFilter={
+        () => controller.selectedView.filter,
+        (currentFilter) => (controller.selectedView.filter = currentFilter)
+      }
+      bind:globalFilter={
+        () => controller.doc.filters,
+        (globalFilter) => (controller.doc.filters = globalFilter)
+      }
+      {controller}
+    />
+    <Properties
+      bind:order={
+        () => controller.selectedView.order,
+        (order) => (controller.selectedView.order = order)
+      }
+      bind:formulas={
+        () => controller.formulas,
+        (formulas) => (controller.formulas = formulas)
+      }
+      bind:properties={
+        () => controller.properties,
+        (properties) => (controller.properties = properties)
+      }
+      {controller}
+    />
+    <Button variant="outline" size="sm" class="bases-style-h-8-ed8a5d" onclick={createFile}>
+      <Plus />
+      <span>New</span>
+    </Button>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+import type { QueryController } from "./bases.svelte";
+type DataTableProps<TData, TValue> = {
+    controller: QueryController;
+};
+declare function $$render<TData, TValue>(): {
+    props: DataTableProps<TData, TValue>;
+    exports: {};
+    bindings: "controller";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue> {
+    props(): ReturnType<typeof $$render<TData, TValue>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue>>['slots'];
+    bindings(): "controller";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue>['props']>, ReturnType<__sveltets_Render<TData, TValue>['events']>, ReturnType<__sveltets_Render<TData, TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    <TData, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ViewHeader: $$IsomorphicComponent;
+type ViewHeader<TData, TValue> = InstanceType<typeof ViewHeader<TData, TValue>>;
+export default ViewHeader;

package/dist/bases-view/view-registration-inventory.d.ts

@@ -0,0 +1,22 @@
+export declare const BUILT_IN_BASES_VIEW_ITEMS: readonly [{
+    readonly id: "table";
+    readonly name: "Table";
+    readonly icon: "lucide-table";
+}, {
+    readonly id: "unknown";
+    readonly name: "Unknown";
+    readonly icon: "lucide-file";
+}, {
+    readonly id: "cards";
+    readonly name: "Cards";
+    readonly icon: "lucide-layout-grid";
+}, {
+    readonly id: "list";
+    readonly name: "List";
+    readonly icon: "lucide-list";
+}, {
+    readonly id: "map";
+    readonly name: "Map";
+    readonly icon: "lucide-map";
+}];
+export type BuiltInBasesViewId = (typeof BUILT_IN_BASES_VIEW_ITEMS)[number]["id"];

package/dist/bases-view/view-registration-inventory.js

@@ -0,0 +1,7 @@
+export const BUILT_IN_BASES_VIEW_ITEMS = [
+    { id: "table", name: "Table", icon: "lucide-table" },
+    { id: "unknown", name: "Unknown", icon: "lucide-file" },
+    { id: "cards", name: "Cards", icon: "lucide-layout-grid" },
+    { id: "list", name: "List", icon: "lucide-list" },
+    { id: "map", name: "Map", icon: "lucide-map" },
+];