@lapis-notes/api 0.1.0

package/dist/components/configuration/object-array-setting.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+  import { DragDropProvider } from "@dnd-kit/svelte";
+  import type {
+    DragEndEvent,
+    DragOverEvent,
+    DragStartEvent,
+  } from "@dnd-kit/dom";
+  import { cn } from "@lapis-notes/ui";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import { tableReorderSensors } from "@lapis-notes/ui/table-dnd/sensors";
+  import type { ArrayType, ObjectType } from "../../configuration.svelte";
+  import type { ObjectMapOption } from "./object-map-setting.svelte";
+  import ObjectArrayRow from "./object-array-row.svelte";
+  import {
+    parseTableDragData,
+    resolveTableDragTargetIndex,
+    SETTINGS_TABLE_COL_TYPE,
+    SETTINGS_TABLE_ROW_TYPE,
+    type SettingsTableDragSource,
+  } from "./object-array-table-dnd";
+  import {
+    columnLabel,
+    createDefaultRow,
+    moveArrayItem,
+    sortedObjectProperties,
+  } from "./object-array-utils";
+  import "./configuration.css";
+
+  let {
+    schema,
+    value = $bindable<Record<string, unknown>[]>([]),
+    columnOptions = {},
+    columnOnQueryChange = {},
+    onValueChange,
+  }: {
+    schema: ArrayType & { items: ObjectType };
+    value?: Record<string, unknown>[];
+    columnOptions?: Record<string, ObjectMapOption[]>;
+    columnOnQueryChange?: Record<string, (query: string) => void>;
+    onValueChange?: (value: Record<string, unknown>[]) => void;
+  } = $props();
+
+  const objectSchema = $derived(schema.items);
+  const columns = $derived(sortedObjectProperties(objectSchema));
+  const minItems = $derived(schema.minItems ?? 0);
+  const maxItems = $derived(schema.maxItems);
+  const canAddRow = $derived(
+    maxItems === undefined ? true : value.length < maxItems,
+  );
+  const canRemoveRow = $derived(value.length > minItems);
+  const canReorderRows = $derived(value.length > 1);
+
+  let rowKeys = $state<string[]>([]);
+  let dragSource = $state<SettingsTableDragSource | null>(null);
+  let dragOverIndex = $state<number | null>(null);
+
+  $effect(() => {
+    while (rowKeys.length < value.length) {
+      rowKeys.push(crypto.randomUUID());
+    }
+    while (rowKeys.length > value.length) {
+      rowKeys.pop();
+    }
+  });
+
+  function emit(next: Record<string, unknown>[]): void {
+    value = next;
+    onValueChange?.(next);
+  }
+
+  function updateField(index: number, key: string, fieldValue: unknown): void {
+    const next = value.map((row, rowIndex) =>
+      rowIndex === index ? { ...row, [key]: fieldValue } : row,
+    );
+    emit(next);
+  }
+
+  function addRow(): void {
+    if (!canAddRow) {
+      return;
+    }
+    emit([...value, createDefaultRow(objectSchema, columnOptions)]);
+  }
+
+  function removeRow(index: number): void {
+    if (!canRemoveRow) {
+      return;
+    }
+    rowKeys.splice(index, 1);
+    emit(value.filter((_, rowIndex) => rowIndex !== index));
+  }
+
+  function moveRow(from: number, to: number): void {
+    emit(moveArrayItem(value, from, to));
+    rowKeys = moveArrayItem(rowKeys, from, to);
+  }
+
+  function handleDragOver(event: DragOverEvent): void {
+    const target = event.operation.target?.data as
+      | { type: string; index: number }
+      | undefined;
+    if (
+      target &&
+      dragSource &&
+      target.type === dragSource.type &&
+      target.index !== dragSource.index
+    ) {
+      dragOverIndex = target.index;
+    }
+  }
+
+  function handleDragStart(event: DragStartEvent): void {
+    const data = parseTableDragData(
+      event.operation.source,
+      SETTINGS_TABLE_ROW_TYPE,
+      SETTINGS_TABLE_COL_TYPE,
+    );
+    if (data?.type === SETTINGS_TABLE_ROW_TYPE) {
+      dragSource = { type: data.type, index: data.index };
+    }
+  }
+
+  function handleDragEnd(event: DragEndEvent): void {
+    const source = parseTableDragData(
+      event.operation.source,
+      SETTINGS_TABLE_ROW_TYPE,
+      SETTINGS_TABLE_COL_TYPE,
+    );
+    const targetIndex = resolveTableDragTargetIndex(
+      event,
+      dragOverIndex,
+      SETTINGS_TABLE_ROW_TYPE,
+      SETTINGS_TABLE_COL_TYPE,
+    );
+
+    if (source?.type === SETTINGS_TABLE_ROW_TYPE && targetIndex !== null) {
+      moveRow(source.index, targetIndex);
+    }
+
+    dragSource = null;
+    dragOverIndex = null;
+  }
+</script>
+
+<DragDropProvider
+  sensors={tableReorderSensors}
+  onDragStart={handleDragStart}
+  onDragOver={handleDragOver}
+  onDragEnd={handleDragEnd}
+>
+  <div
+    class={cn("config-array-table", dragSource && "is-table-chrome-dragging")}
+    data-ui-component="configuration"
+    data-ui-part="stack"
+    data-testid="object-array-setting"
+  >
+    <Table.Root class="configuration-table">
+      <Table.Header>
+        <Table.Row>
+          {#if canReorderRows}
+            <Table.Head class="configuration-grip-head"></Table.Head>
+          {/if}
+          {#each columns as [key, field] (key)}
+            <Table.Head>{columnLabel(key, field)}</Table.Head>
+          {/each}
+          <Table.Head class="configuration-actions-head">Actions</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {#each value as row, index (rowKeys[index])}
+          <ObjectArrayRow
+            {row}
+            {index}
+            {columns}
+            {columnOptions}
+            {columnOnQueryChange}
+            {dragSource}
+            {dragOverIndex}
+            showGrip={canReorderRows}
+            removeDisabled={!canRemoveRow}
+            onFieldChange={(key, fieldValue) => updateField(index, key, fieldValue)}
+            onRemove={() => removeRow(index)}
+          />
+        {/each}
+      </Table.Body>
+    </Table.Root>
+    <Button
+      variant="outline"
+      size="sm"
+      data-testid="object-array-add-button"
+      disabled={!canAddRow}
+      onclick={addRow}>Add row</Button
+    >
+  </div>
+</DragDropProvider>

package/dist/components/configuration/object-array-setting.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ArrayType, ObjectType } from "../../configuration.svelte";
+import type { ObjectMapOption } from "./object-map-setting.svelte";
+import "./configuration.css";
+type $$ComponentProps = {
+    schema: ArrayType & {
+        items: ObjectType;
+    };
+    value?: Record<string, unknown>[];
+    columnOptions?: Record<string, ObjectMapOption[]>;
+    columnOnQueryChange?: Record<string, (query: string) => void>;
+    onValueChange?: (value: Record<string, unknown>[]) => void;
+};
+declare const ObjectArraySetting: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ObjectArraySetting = ReturnType<typeof ObjectArraySetting>;
+export default ObjectArraySetting;

package/dist/components/configuration/object-array-table-dnd.d.ts

@@ -0,0 +1,8 @@
+import { parseTableDragData, resolveTableDragTargetIndex, type TableDragData, type TableDragSource } from "@lapis-notes/ui/table-dnd/utils";
+export declare const SETTINGS_TABLE_ROW_TYPE: string;
+export declare const SETTINGS_TABLE_COL_TYPE: string;
+export type SettingsTableDragSource = TableDragSource;
+export type SettingsTableDragData = TableDragData;
+export { parseTableDragData, resolveTableDragTargetIndex };
+export declare function dropIndicatorClasses(dragSource: SettingsTableDragSource | null, dragOverIndex: number | null, rowIndex: number): string;
+export declare function isRowDragSource(dragSource: SettingsTableDragSource | null, rowIndex: number): boolean;

package/dist/components/configuration/object-array-table-dnd.js

@@ -0,0 +1,10 @@
+import { dropIndicatorClasses as dropIndicatorClassesBase, isRowDragSource as isRowDragSourceBase, parseTableDragData, resolveTableDragTargetIndex, tableColDragType, tableRowDragType, } from "@lapis-notes/ui/table-dnd/utils";
+export const SETTINGS_TABLE_ROW_TYPE = tableRowDragType("settings");
+export const SETTINGS_TABLE_COL_TYPE = tableColDragType("settings");
+export { parseTableDragData, resolveTableDragTargetIndex };
+export function dropIndicatorClasses(dragSource, dragOverIndex, rowIndex) {
+    return dropIndicatorClassesBase(dragSource, dragOverIndex, rowIndex, 0, SETTINGS_TABLE_ROW_TYPE, SETTINGS_TABLE_COL_TYPE);
+}
+export function isRowDragSource(dragSource, rowIndex) {
+    return isRowDragSourceBase(dragSource, rowIndex, SETTINGS_TABLE_ROW_TYPE);
+}

package/dist/components/configuration/object-array-utils.d.ts

@@ -0,0 +1,11 @@
+import type { ObjectType, SchemaType } from "../../configuration.svelte";
+import type { ObjectMapOption } from "./object-map-types";
+export declare function compareSchemaEntriesByOrder(a: [string, SchemaType], b: [string, SchemaType]): number;
+export declare function sortedObjectProperties(objectSchema: ObjectType): Array<[string, SchemaType]>;
+export declare function columnLabel(key: string, field: SchemaType): string;
+export declare function createDefaultCellValue(fieldSchema: SchemaType, columnOptions?: ObjectMapOption[]): unknown;
+export declare function createDefaultRow(objectSchema: ObjectType, columnOptions?: Record<string, ObjectMapOption[]>): Record<string, unknown>;
+export declare function moveArrayItem<T>(items: T[], from: number, to: number): T[];
+export declare function isOptionsSourceComboboxField(field: SchemaType): boolean;
+export declare function filterComboboxOptions(options: ObjectMapOption[], currentValue: unknown, filterQuery: string, limit?: number): ObjectMapOption[];
+export declare function buildSelectOptionsForValue(baseOptions: ObjectMapOption[], currentValue: unknown, allowUnknownOptions?: boolean): ObjectMapOption[];

package/dist/components/configuration/object-array-utils.js

@@ -0,0 +1,103 @@
+import { fuzzySearch } from "@lapis-notes/ui";
+function schemaOrder(schema) {
+    return "order" in schema && typeof schema.order === "number"
+        ? schema.order
+        : Number.MAX_SAFE_INTEGER;
+}
+export function compareSchemaEntriesByOrder(a, b) {
+    const orderA = schemaOrder(a[1]);
+    const orderB = schemaOrder(b[1]);
+    if (orderA !== orderB) {
+        return orderA - orderB;
+    }
+    return a[0].localeCompare(b[0]);
+}
+export function sortedObjectProperties(objectSchema) {
+    return Object.entries(objectSchema.properties ?? {}).sort(compareSchemaEntriesByOrder);
+}
+export function columnLabel(key, field) {
+    return "title" in field && typeof field.title === "string"
+        ? field.title
+        : key;
+}
+export function createDefaultCellValue(fieldSchema, columnOptions) {
+    if ("default" in fieldSchema && fieldSchema.default !== undefined) {
+        return structuredClone(fieldSchema.default);
+    }
+    if (fieldSchema.type === "string") {
+        if ("enum" in fieldSchema && fieldSchema.enum.length > 0) {
+            return fieldSchema.enum[0];
+        }
+        if (columnOptions && columnOptions.length > 0) {
+            return columnOptions[0].value;
+        }
+        return "";
+    }
+    if (fieldSchema.type === "boolean") {
+        return false;
+    }
+    if (fieldSchema.type === "number" || fieldSchema.type === "integer") {
+        return 0;
+    }
+    return undefined;
+}
+export function createDefaultRow(objectSchema, columnOptions = {}) {
+    if (objectSchema.default &&
+        typeof objectSchema.default === "object" &&
+        !Array.isArray(objectSchema.default)) {
+        return structuredClone(objectSchema.default);
+    }
+    const row = {};
+    for (const [key, field] of Object.entries(objectSchema.properties ?? {})) {
+        row[key] = createDefaultCellValue(field, columnOptions[key]);
+    }
+    return row;
+}
+export function moveArrayItem(items, from, to) {
+    if (from === to ||
+        from < 0 ||
+        to < 0 ||
+        from >= items.length ||
+        to >= items.length) {
+        return items;
+    }
+    const next = [...items];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    return next;
+}
+export function isOptionsSourceComboboxField(field) {
+    return (field.type === "string" &&
+        "optionsSource" in field &&
+        typeof field.optionsSource === "string" &&
+        field.optionsSource.length > 0 &&
+        field.allowUnknownOptions === true);
+}
+export function filterComboboxOptions(options, currentValue, filterQuery, limit = 50) {
+    const merged = buildSelectOptionsForValue(options, currentValue, true);
+    const normalizedQuery = filterQuery.trim();
+    if (!normalizedQuery) {
+        return merged.slice(0, limit);
+    }
+    return fuzzySearch(merged.map((option) => ({
+        ...option,
+        searchText: `${option.label} ${option.value}`,
+    })), normalizedQuery, { keys: ["searchText"] })
+        .map((result) => result.item)
+        .slice(0, limit);
+}
+export function buildSelectOptionsForValue(baseOptions, currentValue, allowUnknownOptions = false) {
+    const optionValues = new Set(baseOptions.map((item) => item.value));
+    const value = String(currentValue ?? "");
+    if (!value || optionValues.has(value)) {
+        return baseOptions;
+    }
+    return [
+        ...baseOptions,
+        {
+            value,
+            label: allowUnknownOptions ? `${value} (custom)` : `${value} (missing)`,
+            disabled: !allowUnknownOptions,
+        },
+    ];
+}

package/dist/components/configuration/object-grid-setting.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import { Switch } from "@lapismd/design-core/shadcn/switch";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import type { ObjectType, SchemaType } from "../../configuration.svelte";
+  import "./configuration.css";
+
+  let {
+    schema,
+    value = $bindable<Record<string, unknown>>({}),
+    onValueChange,
+  }: {
+    schema: ObjectType;
+    value?: Record<string, unknown>;
+    onValueChange?: (value: Record<string, unknown>) => void;
+  } = $props();
+
+  const entries = $derived(Object.entries(schema.properties));
+
+  function emit(next: Record<string, unknown>): void {
+    value = next;
+    onValueChange?.(next);
+  }
+
+  function updateField(key: string, fieldValue: unknown): void {
+    emit({ ...value, [key]: fieldValue });
+  }
+
+  function cellLabel(key: string, field: SchemaType): string {
+    return field.title ?? key;
+  }
+</script>
+
+<Table.Root class="configuration-table">
+  <Table.Header>
+    <Table.Row>
+      <Table.Head class="configuration-property-head">Property</Table.Head>
+      <Table.Head>Value</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    {#each entries as [key, field] (key)}
+      <Table.Row>
+        <Table.Cell class="configuration-cell-label"
+          >{cellLabel(key, field)}</Table.Cell
+        >
+        <Table.Cell class="configuration-cell">
+          {#if field.type === "boolean"}
+            <Switch
+              checked={Boolean(value[key])}
+              onCheckedChange={(checked) => updateField(key, checked)}
+            />
+          {:else if field.type === "number" || field.type === "integer"}
+            <Input
+              type="number"
+              class="configuration-control"
+              value={String(value[key] ?? 0)}
+              oninput={(event) => {
+                const target = event.currentTarget as HTMLInputElement;
+                const parsed = Number(target.value);
+                updateField(key, Number.isFinite(parsed) ? parsed : 0);
+              }}
+            />
+          {:else}
+            <Input
+              type="text"
+              class="configuration-control"
+              value={String(value[key] ?? "")}
+              oninput={(event) => {
+                const target = event.currentTarget as HTMLInputElement;
+                updateField(key, target.value);
+              }}
+            />
+          {/if}
+        </Table.Cell>
+      </Table.Row>
+    {/each}
+  </Table.Body>
+</Table.Root>

package/dist/components/configuration/object-grid-setting.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ObjectType } from "../../configuration.svelte";
+import "./configuration.css";
+type $$ComponentProps = {
+    schema: ObjectType;
+    value?: Record<string, unknown>;
+    onValueChange?: (value: Record<string, unknown>) => void;
+};
+declare const ObjectGridSetting: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ObjectGridSetting = ReturnType<typeof ObjectGridSetting>;
+export default ObjectGridSetting;

package/dist/components/configuration/object-map-row.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import Trash2 from "@lucide/svelte/icons/trash-2";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Input } from "@lapismd/design-core/shadcn/input";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import { Select } from "../select";
+  import type { SchemaType } from "../../configuration.svelte";
+  import type { ObjectMapOption } from "./object-map-setting.svelte";
+  import OptionsComboboxSetting from "./options-combobox-setting.svelte";
+  import {
+    buildSelectOptionsForValue,
+    isOptionsSourceComboboxField,
+  } from "./object-array-utils";
+
+  let {
+    pattern,
+    entryValue,
+    valueSchema,
+    selectOptions,
+    onValueQueryChange,
+    onPatternChange,
+    onValueChange,
+    onRemove,
+  }: {
+    pattern: string;
+    entryValue: unknown;
+    valueSchema: SchemaType;
+    selectOptions: ObjectMapOption[];
+    onValueQueryChange?: (query: string) => void;
+    onPatternChange: (nextPattern: string) => boolean;
+    onValueChange: (nextValue: unknown) => void;
+    onRemove: () => void;
+  } = $props();
+
+  let draftPattern = $state("");
+
+  $effect(() => {
+    draftPattern = pattern;
+  });
+
+  function commitPattern(): void {
+    const trimmed = draftPattern.trim();
+    if (!trimmed) {
+      draftPattern = pattern;
+      return;
+    }
+
+    if (trimmed === pattern) {
+      draftPattern = trimmed;
+      return;
+    }
+
+    if (!onPatternChange(trimmed)) {
+      draftPattern = pattern;
+      return;
+    }
+
+    draftPattern = trimmed;
+  }
+
+  function handlePatternKeydown(event: KeyboardEvent): void {
+    if (event.key === "Enter") {
+      event.currentTarget instanceof HTMLInputElement &&
+        event.currentTarget.blur();
+    }
+  }
+</script>
+
+<Table.Row>
+  <Table.Cell class="configuration-cell">
+    <Input
+      type="text"
+      class="configuration-control"
+      data-testid="object-map-pattern-input"
+      bind:value={draftPattern}
+      placeholder="*.md"
+      onblur={commitPattern}
+      onkeydown={handlePatternKeydown}
+    />
+  </Table.Cell>
+  <Table.Cell class="configuration-cell">
+    {#if isOptionsSourceComboboxField(valueSchema)}
+      <OptionsComboboxSetting
+        value={String(entryValue ?? "")}
+        options={selectOptions}
+        placeholder="Enter or select"
+        onValueChange={(nextValue) => onValueChange(nextValue)}
+        onQueryChange={onValueQueryChange}
+      />
+    {:else if valueSchema.type === "string" && selectOptions.length > 0}
+      <Select
+        type="single"
+        value={String(entryValue ?? "")}
+        items={buildSelectOptionsForValue(
+          selectOptions,
+          entryValue,
+          "allowUnknownOptions" in valueSchema &&
+            valueSchema.allowUnknownOptions === true,
+        )}
+        placeholder="Select editor view"
+        onValueChange={(nextValue) => onValueChange(nextValue)}
+      />
+    {:else if valueSchema.type === "boolean"}
+      <Input
+        type="checkbox"
+        checked={Boolean(entryValue)}
+        onchange={(event) => {
+          const target = event.currentTarget as HTMLInputElement;
+          onValueChange(target.checked);
+        }}
+      />
+    {:else if valueSchema.type === "number" || valueSchema.type === "integer"}
+      <Input
+        type="number"
+        class="configuration-control"
+        value={String(entryValue ?? 0)}
+        oninput={(event) => {
+          const target = event.currentTarget as HTMLInputElement;
+          const parsed = Number(target.value);
+          onValueChange(Number.isFinite(parsed) ? parsed : 0);
+        }}
+      />
+    {:else}
+      <Input
+        type="text"
+        class="configuration-control"
+        value={String(entryValue ?? "")}
+        oninput={(event) => {
+          const target = event.currentTarget as HTMLInputElement;
+          onValueChange(target.value);
+        }}
+      />
+    {/if}
+  </Table.Cell>
+  <Table.Cell class="configuration-cell-actions">
+    <Button
+      variant="ghost"
+      size="icon"
+      class="configuration-icon-button"
+      data-testid="object-map-remove-button"
+      aria-label="Remove association"
+      onclick={onRemove}
+    >
+      <Trash2 class="configuration-icon" />
+    </Button>
+  </Table.Cell>
+</Table.Row>

package/dist/components/configuration/object-map-row.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SchemaType } from "../../configuration.svelte";
+import type { ObjectMapOption } from "./object-map-setting.svelte";
+type $$ComponentProps = {
+    pattern: string;
+    entryValue: unknown;
+    valueSchema: SchemaType;
+    selectOptions: ObjectMapOption[];
+    onValueQueryChange?: (query: string) => void;
+    onPatternChange: (nextPattern: string) => boolean;
+    onValueChange: (nextValue: unknown) => void;
+    onRemove: () => void;
+};
+declare const ObjectMapRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type ObjectMapRow = ReturnType<typeof ObjectMapRow>;
+export default ObjectMapRow;