@lapis-notes/bases 0.2.0 → 0.3.0

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

@@ -1,19 +1,14 @@
 <script lang="ts">
-  const commandListId = $props.id();
   import { Icon } from "@lapis-notes/api/icon";
-  import { Label } from "@lapismd/design-core/shadcn/label";
+  import { ColorPicker } from "@lapismd/design-core/forms";
+  import PropertyPicker from "./components/property-picker.svelte";
+  import KanbanSettings from "./kanban-view/settings.svelte";
+  import * as Field from "@lapismd/design-core/shadcn/field";
   import { Input } from "@lapismd/design-core/shadcn/input";
   import { Textarea } from "@lapismd/design-core/shadcn/textarea";
   import * as Select from "@lapismd/design-core/shadcn/select";
   import { Slider } from "@lapismd/design-core/shadcn/slider";
   import { Switch } from "@lapismd/design-core/shadcn/switch";
-  import * as Popover from "@lapismd/design-core/shadcn/popover";
-  import * as Command from "@lapismd/design-core/shadcn/command";
-  import { Button } from "@lapismd/design-core/shadcn/button";
-  import ArrowUpDown from "@lucide/svelte/icons/chevrons-up-down";
-  import X from "@lucide/svelte/icons/x";
-  import CheckIcon from "@lucide/svelte/icons/check";
-  import { cn } from "@lapis-notes/api";
   import type {
     BasesAllOptions,
     BasesOptions,
@@ -48,7 +43,11 @@
       }
       if (item.shouldHide?.()) return [];
       return [
-        { kind: "group", key, displayName: item.displayName } satisfies OptionEntry,
+        {
+          kind: "group",
+          key,
+          displayName: item.displayName,
+        } satisfies OptionEntry,
         ...flattenOptions(item.items, key),
       ];
     });
@@ -57,7 +56,6 @@
   const selectedLayout = $derived(
     layoutOptions.find((f) => f.value === view.type) ?? layoutOptions[0],
   );
-  let openPropertyKey = $state<string | null>(null);
 
   function dropDownOptions(data: Record<string, string>) {
     return Object.entries(data).map(([value, label]) => {
@@ -66,9 +64,9 @@
   }
 </script>
 
-<div class="bases-style-pb-6-fe985c">
-  <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">
-    <Label for="layout" class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50">Layout</Label>
+<Field.Group class="bases-view-settings">
+  <Field.Field class="bases-view-setting">
+    <Field.Label for="layout">Layout</Field.Label>
     <Select.Root
       type="single"
       name="layout"
@@ -95,7 +93,10 @@
         </Select.Group>
       </Select.Content>
     </Select.Root>
-  </div>
+  </Field.Field>
+  {#if view.type === "kanban" || view.type === "activity"}<KanbanSettings
+      {controller}
+    />{/if}
   {#each optionEntries as entry (entry.key)}
     {#if entry.kind === "group"}
       <h3 class="bases-view-settings__group" data-ui-part="option-group">
@@ -103,245 +104,220 @@
       </h3>
     {:else}
       {@const option = entry.option}
-    {#if option.type === "dropdown"}
-      {@const selectOptions = dropDownOptions(option.options)}
-      {@const selectedOption =
-        selectOptions.find(
-          (it) =>
-            it.value ===
-            (controller.view.config.get(option.key) ?? option.default),
-        ) ?? selectOptions[0]}
-      <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" data-ui-part="view-option" data-option-type="dropdown">
-        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
-          >{option.displayName}</Label
+      {#if option.type === "dropdown"}
+        {@const selectOptions = dropDownOptions(option.options)}
+        {@const selectedOption =
+          selectOptions.find(
+            (it) =>
+              it.value ===
+              (controller.view.config.get(option.key) ?? option.default),
+          ) ?? selectOptions[0]}
+        <Field.Field
+          class="bases-view-setting"
+          data-option-type="dropdown"
         >
-        <Select.Root
-          type="single"
-          name={option.key}
-          bind:value={
-            () => {
-              return (controller.view.config.get(option.key) ||
-                option.default) as string;
-            },
-            (value) => {
-              controller.view.config.set(option.key, value);
+          <Field.Label for={option.key}>{option.displayName}</Field.Label>
+          <Select.Root
+            type="single"
+            name={option.key}
+            bind:value={
+              () => {
+                return (controller.view.config.get(option.key) ||
+                  option.default) as string;
+              },
+              (value) => {
+                controller.view.config.set(option.key, value);
+              }
             }
-          }
-        >
-          <Select.Trigger aria-label={option.displayName} class="bases-style-w-full-6da6a3">
-            {selectedOption.label}
-          </Select.Trigger>
-          <Select.Content>
-            <Select.Group>
-              <Select.Label>{option.displayName}</Select.Label>
-              {#each selectOptions as opt (opt.value)}
-                <Select.Item value={opt.value} label={opt.label}>
-                  {opt.label}
-                </Select.Item>
-              {/each}
-            </Select.Group>
-          </Select.Content>
-        </Select.Root>
-      </div>
-    {:else if option.type === "slider"}
-      <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-py-2-03b4dd" data-ui-part="view-option" data-option-type="slider">
-        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
-          >{option.displayName}</Label
+          >
+            <Select.Trigger
+              aria-label={option.displayName}
+              class="bases-style-w-full-6da6a3"
+            >
+              {selectedOption.label}
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Group>
+                <Select.Label>{option.displayName}</Select.Label>
+                {#each selectOptions as opt (opt.value)}
+                  <Select.Item value={opt.value} label={opt.label}>
+                    {opt.label}
+                  </Select.Item>
+                {/each}
+              </Select.Group>
+            </Select.Content>
+          </Select.Root>
+        </Field.Field>
+      {:else if option.type === "slider"}
+        <Field.Field
+          class="bases-view-setting"
+          data-option-type="slider"
         >
-        <Slider
-          data-tooltip={controller.view.config.get(option.key)}
-          type="single"
-          bind:value={
-            () => {
-              return (controller.view.config.get(option.key) ||
-                option.default) as number;
-            },
-            (value) => {
-              controller.view.config.set(option.key, value);
+          <Field.Label for={option.key}>{option.displayName}</Field.Label>
+          <Slider
+            data-tooltip={controller.view.config.get(option.key)}
+            type="single"
+            bind:value={
+              () => {
+                return (controller.view.config.get(option.key) ||
+                  option.default) as number;
+              },
+              (value) => {
+                controller.view.config.set(option.key, value);
+              }
             }
-          }
-          min={option.min}
-          max={option.max}
-          step={option.step}
-          class="bases-style-w-full-6da6a3"
-        />
-      </div>
-    {:else if option.type === "text"}
-      <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" data-ui-part="view-option" data-option-type="text">
-        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
-          >{option.displayName}</Label
+            min={option.min}
+            max={option.max}
+            step={option.step}
+            class="bases-style-w-full-6da6a3"
+          />
+        </Field.Field>
+      {:else if option.type === "text"}
+        <Field.Field
+          class="bases-view-setting"
+          data-option-type="text"
         >
-        <Input
-          bind:value={
-            () => {
-              return (controller.view.config.get(option.key) ??
+          <Field.Label for={option.key}>{option.displayName}</Field.Label>
+          {#if option.key === "badgeColor" && (view.type === "kanban" || view.type === "activity")}
+            <ColorPicker
+              value={String(controller.view.config.get(option.key) ?? "")}
+              placeholder="#15803d"
+              ariaLabel={option.displayName}
+              onChange={(value) =>
+                controller.view.config.set(option.key, value)}
+            />
+          {:else}
+            <Input
+              bind:value={
+                () => {
+                  return (controller.view.config.get(option.key) ??
+                    option.default ??
+                    "") as string;
+                },
+                (value) => {
+                  controller.view.config.set(option.key, value);
+                }
+              }
+              id={option.key}
+              placeholder={option.placeholder}
+            />
+          {/if}
+        </Field.Field>
+      {:else if option.type === "multitext"}
+        <Field.Field
+          class="bases-view-setting"
+          data-option-type="multitext"
+        >
+          <Field.Label for={option.key}>{option.displayName}</Field.Label>
+          <Input
+            id={option.key}
+            value={(
+              (controller.view.config.get(option.key) ??
                 option.default ??
-                "") as string;
-            },
-            (value) => {
-              controller.view.config.set(option.key, value);
+                []) as string[]
+            ).join(", ")}
+            onblur={(event) => {
+              controller.view.config.set(
+                option.key,
+                event.currentTarget.value
+                  .split(",")
+                  .map((value) => value.trim())
+                  .filter(Boolean),
+              );
+            }}
+          />
+        </Field.Field>
+      {:else if option.type === "toggle"}
+        <Field.Field
+          class="bases-view-setting"
+          data-option-type="toggle"
+        >
+          <Field.Label for={option.key}>{option.displayName}</Field.Label>
+          <Switch
+            bind:checked={
+              () => {
+                return Boolean(
+                  controller.view.config.get(option.key) ?? option.default,
+                );
+              },
+              (value) => {
+                controller.view.config.set(option.key, value);
+              }
             }
-          }
-          id={option.key}
-          placeholder={option.placeholder}
-        />
-      </div>
-    {:else if option.type === "multitext"}
-      <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" data-ui-part="view-option" data-option-type="multitext">
-        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50">{option.displayName}</Label>
-        <Input
-          id={option.key}
-          value={((controller.view.config.get(option.key) ?? option.default ?? []) as string[]).join(", ")}
-          onblur={(event) => {
-            controller.view.config.set(
-              option.key,
-              event.currentTarget.value
-                .split(",")
-                .map((value) => value.trim())
-                .filter(Boolean),
-            );
-          }}
-        />
-      </div>
-    {:else if option.type === "toggle"}
-      <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" data-ui-part="view-option" data-option-type="toggle">
-        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
-          >{option.displayName}</Label
+            id={option.key}
+          />
+        </Field.Field>
+      {:else if option.type === "file" || option.type === "folder"}
+        <Field.Field
+          class="bases-view-setting"
+          data-option-type={option.type}
         >
-        <Switch
-          bind:checked={
-            () => {
-              return Boolean(
-                controller.view.config.get(option.key) ?? option.default,
-              );
-            },
-            (value) => {
-              controller.view.config.set(option.key, value);
+          <Field.Label for={option.key}>{option.displayName}</Field.Label>
+          <Input
+            id={option.key}
+            placeholder={option.placeholder}
+            bind:value={
+              () =>
+                (controller.view.config.get(option.key) ??
+                  option.default ??
+                  "") as string,
+              (value) => controller.view.config.set(option.key, value)
             }
-          }
-          id={option.key}
-        />
-      </div>
-    {:else if option.type === "file" || option.type === "folder"}
-      <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" data-ui-part="view-option" data-option-type={option.type}>
-        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50">{option.displayName}</Label>
-        <Input
-          id={option.key}
-          placeholder={option.placeholder}
-          bind:value={
-            () => (controller.view.config.get(option.key) ?? option.default ?? "") as string,
-            (value) => controller.view.config.set(option.key, value)
-          }
-        />
-      </div>
-    {:else if option.type === "formula"}
-      <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" data-ui-part="view-option" data-option-type="formula">
-        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50">{option.displayName}</Label>
-        <Textarea
-          id={option.key}
-          placeholder={option.placeholder}
-          bind:value={
-            () => (controller.view.config.get(option.key) ?? option.default ?? "") as string,
-            (value) => controller.view.config.set(option.key, value)
-          }
-        />
-      </div>
-    {:else if option.type === "property"}
-      <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" data-ui-part="view-option" data-option-type="property">
-        <Label for={option.key} class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
-          >{option.displayName}</Label
+          />
+        </Field.Field>
+      {:else if option.type === "formula"}
+        <Field.Field
+          class="bases-view-setting"
+          data-option-type="formula"
         >
-        <Popover.Root
-          bind:open={
-            () => openPropertyKey === option.key,
-            (value) => {
-              openPropertyKey = value ? option.key : null;
+          <Field.Label for={option.key}>{option.displayName}</Field.Label>
+          <Textarea
+            id={option.key}
+            placeholder={option.placeholder}
+            bind:value={
+              () =>
+                (controller.view.config.get(option.key) ??
+                  option.default ??
+                  "") as string,
+              (value) => controller.view.config.set(option.key, value)
             }
-          }
+          />
+        </Field.Field>
+      {:else if option.type === "property"}
+        <Field.Field
+          class="bases-view-setting"
+          data-option-type="property"
         >
-          <Popover.Trigger>
-            {#snippet child({ props }: { props: Record<string, any> })}
-              {@const selectedProperty = (controller.view.config.get(
-                option.key,
-              ) ?? option.default) as BasesPropertyId | undefined}
-              {@const column = selectedProperty
-                ? controller.getColumn(selectedProperty)
-                : undefined}
-              <div class="relative bases-style-flex-60fbb7">
-                <Button
-                  {...props}
-                  id={option.key}
-                  variant="outline"
-                  size="sm"
-                  class="bases-style-h-8-ed8a5d grow bases-style-justify-between-8ef226 bases-style-rounded-none-0c5e91 bases-style-border-none-4a5f0e bases-style-shadow-none-ad47d1 bases-style-outline-none-df37b1"
-                >
-                  <Icon name={[column?.icon ?? "lucide-file"]} />
-                  {#if column?.displayName}
-                    {column.displayName}
-                  {:else}
-                    <span class="bases-style-text-muted-foreground-bfa603"
-                      >{option.placeholder ?? "Property"}</span
-                    >{/if}
-                  <ArrowUpDown />
-                </Button>
-                <X
-                  onclick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    controller.view.config.set(option.key, "");
-                    openPropertyKey = null;
-                  }}
-                  class="absolute bases-style-top-2-9a2db8 bases-style-right-6-82d7e5 bases-style-size-4-f7b5fa"
-                />
-              </div>
-            {/snippet}
-          </Popover.Trigger>
-          <Popover.Content class="bases-style-w-310px-8357f2 bases-style-p-0-8a539c" align="start">
-            <Command.Root>
-              <Command.Input aria-controls={`${commandListId}-${option.key}`} placeholder="Find or create" />
-              <Command.List id={`${commandListId}-${option.key}`} class="bases-style-p-1-eb6a3c">
-                <Command.Empty>No results found.</Command.Empty>
-                {#each controller
-                  .getAllColumns()
-                  .filter((p) => !option.filter || option.filter(p.id)) as column (column.id)}
-                  <Command.Item
-                    onSelect={() => {
-                      controller.view.config.set(option.key, column.id);
-                      openPropertyKey = null;
-                    }}
-                  >
-                    <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",
-                        (controller.view.config.get(option.key) ??
-                          option.default) === 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 ?? column.id}</span>
-                    <Command.Shortcut class="bases-style-font-mono-0e6570 bases-style-text-0-75em-c425cc"
-                      >{column.id}</Command.Shortcut
-                    >
-                  </Command.Item>
-                {/each}
-              </Command.List>
-            </Command.Root>
-          </Popover.Content>
-        </Popover.Root>
-      </div>
-    {/if}
+          <Field.Label for={option.key}>{option.displayName}</Field.Label>
+          <PropertyPicker
+            id={option.key}
+            label={option.displayName}
+            columns={controller
+              .getAllColumns()
+              .filter((column) => !option.filter || option.filter(column.id))}
+            value={(controller.view.config.get(option.key) ??
+              option.default) as BasesPropertyId | undefined}
+            placeholder={option.placeholder ?? "Property"}
+            onChange={(value) => controller.view.config.set(option.key, value)}
+          />
+        </Field.Field>
+      {/if}
     {/if}
   {/each}
-</div>
+</Field.Group>
 
 <style>
+  :global(.bases-view-settings) {
+    gap: 1rem;
+  }
+
+  :global(.bases-view-setting) {
+    min-width: 0;
+    gap: 0.5rem;
+  }
+
   .bases-view-settings__group {
-    margin: 0.75rem 0 0.25rem;
-    padding: 0 0.5rem;
+    margin: 0;
     color: var(--ui-workspace-muted-foreground);
     font-size: 0.75rem;
     font-weight: 600;

package/dist/index.d.ts

@@ -5,6 +5,6 @@ export { default as manifest } from "@lapis-notes/bases/manifest.json";
 export { BasesPlugin };
 export { default as BasesViewSurface } from "./bases-view-surface.svelte";
 export { BasesViewType, parseBasesDocument, serializeBasesDocument, } from "./bases-view";
-export type { AnyBasesView, BasesDocument, BasesViewBase, CardsView, CustomBasesView, FilterLine, Filters, ListView, MapView, SortColumn, TableView, } from "./bases-view/models";
+export type { ActivityBasesViewDocument, MarkdownCardViewOptions, AnyBasesView, BasesDocument, BasesViewBase, CardsView, CustomBasesView, FilterLine, Filters, KanbanBasesViewDocument, ListView, MapView, SortColumn, TableView, } from "./bases-view/models";
 export type { BasesViewRegistration } from "./bases-view/bases.svelte";
 export default BasesPlugin;