@lapis-notes/bases 0.1.0

package/dist/bases-view/components/filters/filter-group.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import * as Select from "@lapismd/design-core/shadcn/select";
+  import {
+    filterGroupType,
+    filterGroupValues,
+    isFilterGroup,
+    isFilterLine,
+    type Filters,
+  } from "../..";
+  import FilterRow from "./filter-row.svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import PlusIcon from "@lucide/svelte/icons/plus";
+  import Self from "./filter-group.svelte";
+  import { cn } from "@lapis-notes/api";
+  import Trash from "@lucide/svelte/icons/trash-2";
+  import type { QueryController } from "../../bases.svelte";
+
+  let {
+    filter = $bindable(),
+    controller,
+    class: className,
+    deleteFilterGroup,
+  }: {
+    filter: Filters;
+    controller: QueryController;
+    class?: string;
+    deleteFilterGroup?: () => void;
+  } = $props();
+  const filterTypes = [
+    { label: "All of the following are true", value: "and" },
+    { label: "Any of the following are true", value: "or" },
+    { label: "None of the following are true", value: "not" },
+  ];
+  let filterType = $derived(filterGroupType(filter));
+  let filterValues = $derived(filterGroupValues(filter));
+  let empty: string = $state("");
+
+  $effect(() => {
+    if (!filterValues.length && empty) {
+      filterValues.push(empty);
+      empty = "";
+    }
+  });
+
+  const triggerContent = $derived(
+    filterTypes.find((f) => f.value === filterType)?.label ??
+      "Select a filter type",
+  );
+
+  function addFilter() {
+    if (!filterValues.length) {
+      filterValues.push(empty);
+      empty = "";
+    }
+    filterValues.push("");
+  }
+
+  function addGroup() {
+    filterValues.push({ and: [""] });
+  }
+
+  function deleteFilter(index: number) {
+    filterValues.splice(index, 1);
+  }
+
+  function getFilterType() {
+    return filterType;
+  }
+
+  function setFilterType(newValue: string) {
+    (filter as any) = { [newValue]: filterValues };
+  }
+</script>
+
+<div class={cn("filter-group", className)}>
+  <div class="filter-group-header bases-style-flex-60fbb7 bases-style-items-center-3960ff bases-style-justify-between-8ef226">
+    <Select.Root type="single" bind:value={getFilterType, setFilterType}>
+      <Select.Trigger data-bases-filter-control="group-type-trigger">
+        {triggerContent}
+      </Select.Trigger>
+      <Select.Content
+        align="start"
+        data-bases-filter-control="group-type-content"
+      >
+        <Select.Group>
+          {#each filterTypes as filterType (filterType.value)}
+            <Select.Item value={filterType.value} label={filterType.label}
+              >{filterType.label}</Select.Item
+            >
+          {/each}
+        </Select.Group>
+      </Select.Content>
+    </Select.Root>
+    {#if deleteFilterGroup}
+      <Button
+        variant="ghost"
+        size="sm"
+        class="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={() => deleteFilterGroup?.()}
+      >
+        <Trash />
+      </Button>
+    {/if}
+  </div>
+  <div class="filter-group-statements bases-style-grid-f3c543 bases-style-gap-2-77a2a2 bases-style-pt-1-6b7d6e">
+    {#if !filterValues.length}
+      <FilterRow
+        label="where"
+        {controller}
+        bind:value={empty}
+        deleteFilter={() => {
+          empty = "";
+        }}
+      />
+    {/if}
+    {#each filterValues as predicate, i}
+      {#if typeof predicate === "string" || isFilterLine(predicate)}
+        <FilterRow
+          label={i === 0 ? "where" : filterType}
+          {controller}
+          bind:value={filterValues[i] as any}
+          deleteFilter={() => deleteFilter(i)}
+        />
+      {:else if isFilterGroup(predicate)}
+        <Self
+          bind:filter={filterValues[i] as Filters}
+          {controller}
+          class={cn("bases-style-bg-accent-40-fb8b4c bases-style-m-2-e9a778 bases-style-rounded-sm-36d446 border bases-style-p-2-7660b4")}
+          deleteFilterGroup={() => deleteFilter(i)}
+        />
+      {/if}
+    {/each}
+  </div>
+  <div class="filter-group-actions bases-style-mt-2-50d0d2">
+    <Button size="sm" variant="ghost" onclick={(evt) => addFilter()}>
+      <PlusIcon /> Add Filter
+    </Button>
+    <Button size="sm" variant="ghost" onclick={(evt) => addGroup()}>
+      <PlusIcon /> Add Filter Group
+    </Button>
+  </div>
+</div>

package/dist/bases-view/components/filters/filter-group.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Filters } from "../..";
+import type { QueryController } from "../../bases.svelte";
+type $$ComponentProps = {
+    filter: Filters;
+    controller: QueryController;
+    class?: string;
+    deleteFilterGroup?: () => void;
+};
+declare const FilterGroup: import("svelte").Component<$$ComponentProps, {}, "filter">;
+type FilterGroup = ReturnType<typeof FilterGroup>;
+export default FilterGroup;

package/dist/bases-view/components/filters/filter-properties.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Command from "@lapismd/design-core/shadcn/command";
+  import { cn } from "@lapis-notes/api";
+  import { Icon } from "@lapis-notes/api/icon";
+  import ArrowUpDown from "@lucide/svelte/icons/chevrons-up-down";
+  import CheckIcon from "@lucide/svelte/icons/check";
+  import type { QueryController } from "../../bases.svelte";
+
+  let {
+    controller,
+    value = $bindable(),
+  }: { value: any; controller: QueryController } = $props();
+
+  let col = $derived(determineColumn(value));
+  let isOpen: boolean = $derived(false);
+
+  function determineColumn(id: string) {
+    const column = controller.getAllColumns().find((it) => it.id === id);
+    if (!column) {
+      return { name: id, icon: "lucide-info" };
+    }
+    return {
+      name: column.displayName ?? id,
+      icon: column.icon ?? "lucide-info",
+    };
+  }
+</script>
+
+<Popover.Root bind:open={isOpen}>
+  <Popover.Trigger class="">
+    {#snippet child({ props }: { props: Record<string, any> })}
+      <Button
+        {...props}
+        variant="outline"
+        size="sm"
+        class="bases-style-flex-60fbb7 bases-style-h-8-ed8a5d grow bases-style-justify-between-8ef226 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"
+      >
+        <span class="bases-style-flex-60fbb7 bases-style-h-full-668b21 bases-style-w-full-6da6a3 bases-style-items-center-3960ff">
+          <Icon name={col.icon} class="bases-style-mr-1-618162" />
+          {col.name}
+        </span>
+        <ArrowUpDown />
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content class="bases-style-w-310px-8357f2 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()
+          .filter((col) => col.id.startsWith("note.")) as column (column.id)}
+          <Command.Item
+            onSelect={() => {
+              value = column.id;
+              isOpen = false;
+            }}
+          >
+            <div
+              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",
+                value === column.id ? "" : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
+              )}
+            >
+              <CheckIcon class="bases-style-size-4-f7b5fa" />
+            </div>
+            <Icon name={[column.icon ?? "lucide-info"]} />
+            <span>{column.displayName}</span>
+          </Command.Item>
+        {/each}
+      </Command.List>
+    </Command.Root>
+  </Popover.Content>
+</Popover.Root>

package/dist/bases-view/components/filters/filter-properties.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { QueryController } from "../../bases.svelte";
+type $$ComponentProps = {
+    value: any;
+    controller: QueryController;
+};
+declare const FilterProperties: import("svelte").Component<$$ComponentProps, {}, "value">;
+type FilterProperties = ReturnType<typeof FilterProperties>;
+export default FilterProperties;

package/dist/bases-view/components/filters/filter-root.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import LucideListFilter from "@lucide/svelte/icons/list-filter";
+  import * as Accordion from "@lapismd/design-core/shadcn/accordion";
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import FilterGroupComponent from "./filter-group.svelte";
+  import { filterCount, type Filters } from "../..";
+  import { cn } from "@lapis-notes/api";
+  import type { QueryController } from "../../bases.svelte";
+
+  let {
+    table,
+    controller = table as QueryController,
+    currentFilter = $bindable(),
+    globalFilter = $bindable(),
+    class: className,
+  }: {
+    controller?: QueryController;
+    table?: any;
+    globalFilter: Filters;
+    currentFilter: Filters;
+    class?: string;
+  } = $props();
+
+  let globalCount = $derived(filterCount(globalFilter));
+  let currentCount = $derived(filterCount(currentFilter));
+  let totalCount = $derived(globalCount + currentCount);
+  let defaultOpenSection = $derived(
+    currentCount > 0
+      ? "this-view"
+      : globalCount > 0
+        ? "all-views"
+        : "this-view",
+  );
+</script>
+
+<Popover.Root>
+  <Popover.Trigger>
+    {#snippet child({ props }: { props: Record<string, any> })}
+      <Button
+        {...props}
+        variant="outline"
+        size="sm"
+        class={cn("bases-style-h-8-ed8a5d bases-style-border-dashed-a29b7a", {
+          "bases-style-text-var-text-accent-69c994 bases-style-hover-bg-color-mix-in-srgb-var-interactive-4e3e8a bases-style-hover-text-var-text-accent-5b2cb5":
+            totalCount > 0,
+        })}
+      >
+        <LucideListFilter /> Filter
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content
+    class={cn(
+      "bases-query-popover bases-filter-popover bases-style-mr-2-d2347e",
+      className,
+    )}
+    data-bases-popover="filter"
+    align="start"
+  >
+    <Accordion.Root type="single" value={defaultOpenSection}>
+      <Accordion.Item value="all-views">
+        <Accordion.Trigger
+          indicatorPosition="start"
+          indicatorVariant="disclosure"
+          class="bases-style-py-1-660d2e bases-style-font-bold-69450e hover:no-underline"
+        >
+          <span>
+            All views
+            <Badge
+              variant="secondary"
+              class={cn({ invisible: globalCount == 0 })}>{globalCount}</Badge
+            >
+          </span>
+        </Accordion.Trigger>
+        <Accordion.Content class="">
+          <ScrollArea
+            orientation="both"
+            class="bases-style-h-full-668b21 bases-style-max-w-55svw-8a9ecb bases-style-data-scroll-area-viewport-max-h-55svh-15dd46"
+          >
+            <FilterGroupComponent {controller} bind:filter={globalFilter} />
+          </ScrollArea>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="this-view">
+        <Accordion.Trigger
+          indicatorPosition="start"
+          indicatorVariant="disclosure"
+          class="bases-style-py-1-660d2e bases-style-font-bold-69450e hover:no-underline"
+        >
+          <span>
+            This view
+            <Badge
+              variant="secondary"
+              class={cn({ invisible: currentCount == 0 })}>{currentCount}</Badge
+            >
+          </span>
+        </Accordion.Trigger>
+        <Accordion.Content class="">
+          <ScrollArea
+            orientation="both"
+            class="bases-style-h-full-668b21 bases-style-max-w-55svw-8a9ecb bases-style-data-scroll-area-viewport-max-h-55svh-15dd46"
+          >
+            <FilterGroupComponent {controller} bind:filter={currentFilter} />
+          </ScrollArea>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  </Popover.Content>
+</Popover.Root>

package/dist/bases-view/components/filters/filter-root.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Filters } from "../..";
+import type { QueryController } from "../../bases.svelte";
+type $$ComponentProps = {
+    controller?: QueryController;
+    table?: any;
+    globalFilter: Filters;
+    currentFilter: Filters;
+    class?: string;
+};
+declare const FilterRoot: import("svelte").Component<$$ComponentProps, {}, "globalFilter" | "currentFilter">;
+type FilterRoot = ReturnType<typeof FilterRoot>;
+export default FilterRoot;