@johly/bits-ui 2.18.1

package/dist/bits/filter/components/filter-option-editor.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" generics="TData = unknown, TContext = any">
+	import DataSurface from "../../menu-data/components/data-surface.svelte";
+	import DataInput from "../../menu-data/components/data-input.svelte";
+	import DataList from "../../menu-data/components/data-list.svelte";
+	import DataEmpty from "../../menu-data/components/data-empty.svelte";
+	import type {
+		Column,
+		DataTableFilterActions,
+		FilterModel,
+		FilterStrategy,
+		Locale,
+	} from "../types.js";
+	import {
+		createMultiOptionMenu,
+		createOptionMenu,
+		type FilterCheckboxItemDef,
+		type FilterMenuNodeMeta,
+		type FilterNodeDef,
+	} from "../menu-nodes.js";
+	import { isMultiOptionColumn, isOptionColumn } from "../type-guards.js";
+	import FilterMenuNode from "./filter-menu-node.svelte";
+
+	let {
+		column,
+		actions,
+		filter,
+		locale = "en",
+		strategy = "client",
+		initialValues = [],
+		showSeparator = false,
+	}: {
+		column: Column<TData, "option"> | Column<TData, "multiOption">;
+		actions: DataTableFilterActions<TContext>;
+		filter?: FilterModel<"option"> | FilterModel<"multiOption">;
+		locale?: Locale;
+		strategy?: FilterStrategy;
+		initialValues?: Array<string | number | bigint | boolean | Date>;
+		showSeparator?: boolean;
+	} = $props();
+
+	function withSeparator(nodes: FilterCheckboxItemDef[]): FilterNodeDef[] {
+		if (!showSeparator || initialValues.length === 0) return nodes;
+		const initial = initialValues.map(String);
+		const selected = nodes.filter((node) => initial.includes(node.id));
+		const unselected = nodes.filter((node) => !initial.includes(node.id));
+		if (selected.length === 0 || unselected.length === 0) return nodes;
+		return [...selected, { kind: "separator", id: "selected-separator" }, ...unselected];
+	}
+
+	const nodes = $derived.by(() => {
+		if (isOptionColumn(column)) {
+			return withSeparator(
+				createOptionMenu({
+					column,
+					actions,
+					filter: filter as FilterModel<"option"> | undefined,
+				})
+			);
+		}
+		if (isMultiOptionColumn(column)) {
+			return withSeparator(
+				createMultiOptionMenu({
+					column,
+					actions,
+					filter: filter as FilterModel<"multiOption"> | undefined,
+				})
+			);
+		}
+		return [];
+	});
+
+	void strategy;
+</script>
+
+<DataSurface content={nodes}>
+	<DataInput placeholder={`Search ${column.displayName.toLowerCase()}...`} />
+	<DataList>
+		{#snippet children({ nodes: displayNodes })}
+			{#each displayNodes as node, index (`option-${index}-${"kind" in node ? node.kind : node.node.id}`)}
+				<FilterMenuNode displayNode={node} {actions} {locale} />
+			{/each}
+		{/snippet}
+	</DataList>
+	<DataEmpty>No matching options.</DataEmpty>
+</DataSurface>

package/dist/bits/filter/components/filter-option-editor.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Column, DataTableFilterActions, FilterModel, FilterStrategy, Locale } from "../types.js";
+declare class __sveltets_Render<TData = unknown, TContext = any> {
+    props(): {
+        column: Column<TData, "option"> | Column<TData, "multiOption">;
+        actions: DataTableFilterActions<TContext>;
+        filter?: FilterModel<"option"> | FilterModel<"multiOption">;
+        locale?: Locale;
+        strategy?: FilterStrategy;
+        initialValues?: Array<string | number | bigint | boolean | Date>;
+        showSeparator?: boolean;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = unknown, TContext = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TContext>['props']>, ReturnType<__sveltets_Render<TData, TContext>['events']>, ReturnType<__sveltets_Render<TData, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TContext>['exports']>;
+    <TData = unknown, TContext = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FilterOptionEditor: $$IsomorphicComponent;
+type FilterOptionEditor<TData = unknown, TContext = any> = InstanceType<typeof FilterOptionEditor<TData, TContext>>;
+export default FilterOptionEditor;

package/dist/bits/filter/components/filter-provider.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { FilterProviderProps } from "../types.js";
+	import { setFilterContext } from "../filter.svelte.js";
+
+	let {
+		columns,
+		filters,
+		actions,
+		strategy,
+		locale = "en",
+		entityName,
+		variant,
+		children,
+	}: FilterProviderProps = $props();
+
+	setFilterContext({
+		get columns() {
+			return columns;
+		},
+		get filters() {
+			return filters;
+		},
+		get actions() {
+			return actions;
+		},
+		get strategy() {
+			return strategy;
+		},
+		get locale() {
+			return locale;
+		},
+		get entityName() {
+			return entityName;
+		},
+		get variant() {
+			return variant;
+		},
+	});
+</script>
+
+{@render children?.()}

package/dist/bits/filter/components/filter-provider.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FilterProviderProps } from "../types.js";
+declare const FilterProvider: import("svelte").Component<FilterProviderProps, {}, "">;
+type FilterProvider = ReturnType<typeof FilterProvider>;
+export default FilterProvider;

package/dist/bits/filter/components/filter-remove.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import type { FilterRemoveProps } from "../types.js";
+	import { filterAttrs, useFilterActions, useFilterContext, useFilterItemContext } from "../filter.svelte.js";
+
+	let {
+		filter: filterProp,
+		actions: actionsProp,
+		children,
+		child,
+		ref = $bindable(null),
+		type = "button",
+		variant,
+		...restProps
+	}: FilterRemoveProps = $props();
+
+	const context = useFilterContext();
+	const itemContext = useFilterItemContext();
+	const filter = $derived(filterProp ?? itemContext?.filter);
+	const actions = $derived(actionsProp ?? itemContext?.actions ?? useFilterActions());
+	const resolvedVariant = $derived(variant ?? itemContext?.variant ?? context.variant);
+
+	function handleClick() {
+		if (!filter || !actions) return;
+		actions.removeFilter(filter.columnId);
+	}
+
+	const mergedProps = $derived(
+		mergeProps(restProps, {
+			type,
+			"data-variant": resolvedVariant,
+			onclick: handleClick,
+			[filterAttrs.remove]: "",
+		})
+	);
+</script>
+
+{#if !filter || !actions}
+	{@const _error = (() => {
+		throw new Error("Filter.Remove requires filter/actions props or must be used within Filter.Item");
+	})()}
+{:else if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{#if children}
+			{@render children()}
+		{:else}
+			Remove
+		{/if}
+	</button>
+{/if}

package/dist/bits/filter/components/filter-remove.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FilterRemoveProps } from "../types.js";
+declare const FilterRemove: import("svelte").Component<FilterRemoveProps, {}, "ref">;
+type FilterRemove = ReturnType<typeof FilterRemove>;
+export default FilterRemove;

package/dist/bits/filter/components/filter-root.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import type { FilterRootProps } from "../types.js";
+	import { filterAttrs } from "../filter.svelte.js";
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		...restProps
+	}: FilterRootProps = $props();
+
+	const mergedProps = $derived(mergeProps(restProps, { [filterAttrs.root]: "" }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/filter/components/filter-root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FilterRootProps } from "../types.js";
+declare const FilterRoot: import("svelte").Component<FilterRootProps, {}, "ref">;
+type FilterRoot = ReturnType<typeof FilterRoot>;
+export default FilterRoot;

package/dist/bits/filter/components/filter-subject.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import type { FilterSubjectProps } from "../types.js";
+	import { filterAttrs, useFilterContext, useFilterItemContext } from "../filter.svelte.js";
+	import { isBooleanColumn } from "../type-guards.js";
+	import FilterIcon from "./filter-icon.svelte";
+
+	let {
+		column: columnProp,
+		entityName: entityNameProp,
+		children,
+		child,
+		ref = $bindable(null),
+		variant,
+		...restProps
+	}: FilterSubjectProps = $props();
+
+	const context = useFilterContext();
+	const itemContext = useFilterItemContext();
+	const column = $derived(columnProp ?? itemContext?.column);
+	const entityName = $derived(entityNameProp ?? itemContext?.entityName ?? context.entityName);
+	const resolvedVariant = $derived(variant ?? itemContext?.variant ?? context.variant);
+	const subject = $derived(column && isBooleanColumn(column) ? entityName : column?.displayName);
+
+	const mergedProps = $derived(
+		mergeProps(restProps, {
+			"data-column-type": column?.type,
+			"data-variant": resolvedVariant,
+			[filterAttrs.subject]: "",
+		})
+	);
+</script>
+
+{#if !column}
+	{@const _error = (() => {
+		throw new Error("Filter.Subject requires a column prop or must be used within Filter.Item");
+	})()}
+{:else if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span bind:this={ref} {...mergedProps}>
+		{#if column.icon}
+			<FilterIcon icon={column.icon} part="subject" />
+		{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			{subject}
+		{/if}
+	</span>
+{/if}

package/dist/bits/filter/components/filter-subject.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FilterSubjectProps } from "../types.js";
+declare const FilterSubject: import("svelte").Component<FilterSubjectProps, {}, "ref">;
+type FilterSubject = ReturnType<typeof FilterSubject>;
+export default FilterSubject;

package/dist/bits/filter/components/filter-text-editor.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" generics="TData = unknown, TContext = any">
+	import DataSurface from "../../menu-data/components/data-surface.svelte";
+	import DataInput from "../../menu-data/components/data-input.svelte";
+	import DataList from "../../menu-data/components/data-list.svelte";
+	import { dataMenuAttrs } from "../../menu-data/menu-data.svelte.js";
+	import type { Column, DataTableFilterActions } from "../types.js";
+	import { createTextFilterItems, type FilterMenuNodeMeta } from "../menu-nodes.js";
+	import { filterAttrs } from "../filter.svelte.js";
+	import FilterMenuNode from "./filter-menu-node.svelte";
+
+	let {
+		column,
+		actions,
+	}: {
+		column: Column<TData, "text">;
+		actions: DataTableFilterActions<TContext>;
+	} = $props();
+
+	let query = $state("");
+	const nodes = $derived(createTextFilterItems({ query, column, actions }));
+</script>
+
+<DataSurface content={nodes} search={query}>
+	<DataInput placeholder="Type to filter..." onValueChange={(value) => (query = value)} />
+	<DataList>
+		{#snippet children({ nodes: displayNodes })}
+			{#if displayNodes.length > 0}
+				{#each displayNodes as node, index (`text-${index}-${"kind" in node ? node.kind : node.node.id}`)}
+					<FilterMenuNode displayNode={node} {actions} />
+				{/each}
+			{:else if query.trim()}
+				<div {...{ [dataMenuAttrs.empty]: "", [filterAttrs["menu-empty"]]: "" }}>
+					Press enter to filter by "{query}"
+				</div>
+			{/if}
+		{/snippet}
+	</DataList>
+</DataSurface>

package/dist/bits/filter/components/filter-text-editor.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Column, DataTableFilterActions } from "../types.js";
+declare class __sveltets_Render<TData = unknown, TContext = any> {
+    props(): {
+        column: Column<TData, "text">;
+        actions: DataTableFilterActions<TContext>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = unknown, TContext = any>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TContext>['props']>, ReturnType<__sveltets_Render<TData, TContext>['events']>, ReturnType<__sveltets_Render<TData, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TContext>['exports']>;
+    <TData = unknown, TContext = any>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FilterTextEditor: $$IsomorphicComponent;
+type FilterTextEditor<TData = unknown, TContext = any> = InstanceType<typeof FilterTextEditor<TData, TContext>>;
+export default FilterTextEditor;

package/dist/bits/filter/components/filter-trigger.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import type { FilterTriggerProps } from "../types.js";
+	import { filterAttrs } from "../filter.svelte.js";
+	import { t } from "../i18n.js";
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		type = "button",
+		hasVisibleFilters = false,
+		locale = "en",
+		variant,
+		...restProps
+	}: FilterTriggerProps = $props();
+
+	const menuState = $derived(restProps["data-state"]);
+
+	const mergedProps = $derived(
+		mergeProps(restProps, {
+			type,
+			"data-state": hasVisibleFilters ? "has-filters" : "empty",
+			"data-menu-state": menuState,
+			"data-variant": variant,
+			[filterAttrs.trigger]: "",
+		})
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{#if children}
+			{@render children()}
+		{:else}
+			{t("filter", locale)}
+		{/if}
+	</button>
+{/if}

package/dist/bits/filter/components/filter-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FilterTriggerProps } from "../types.js";
+declare const FilterTrigger: import("svelte").Component<FilterTriggerProps, {}, "ref">;
+type FilterTrigger = ReturnType<typeof FilterTrigger>;
+export default FilterTrigger;

package/dist/bits/filter/components/filter-value-display.svelte

@@ -0,0 +1,119 @@
+<script
+	lang="ts"
+	generics="TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType"
+>
+	import type { Column, FilterModel, Locale } from "../types.js";
+	import {
+		isBooleanColumn,
+		isBooleanFilter,
+		isDateColumn,
+		isDateFilter,
+		isMultiOptionColumn,
+		isMultiOptionFilter,
+		isNumberColumn,
+		isNumberFilter,
+		isOptionColumn,
+		isOptionFilter,
+		isTextColumn,
+		isTextFilter,
+	} from "../type-guards.js";
+	import { take } from "../array.js";
+	import { t } from "../i18n.js";
+	import FilterIcon from "./filter-icon.svelte";
+
+	let {
+		filter,
+		column,
+		locale = "en",
+	}: {
+		filter: FilterModel<TType>;
+		column: Column<TData, TType>;
+		locale?: Locale;
+		entityName?: string;
+	} = $props();
+
+	const monthNames = [
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec",
+	];
+
+	function formatDate(value: Date, includeYear = true) {
+		const label = `${monthNames[value.getMonth()]} ${value.getDate()}`;
+		return includeYear ? `${label}, ${value.getFullYear()}` : label;
+	}
+
+	function formatDateRange(start: Date, end: Date) {
+		const sameMonth = start.getMonth() === end.getMonth();
+		const sameYear = start.getFullYear() === end.getFullYear();
+		if (sameMonth && sameYear)
+			return `${formatDate(start, false)} - ${end.getDate()}, ${end.getFullYear()}`;
+		if (sameYear) return `${formatDate(start, false)} - ${formatDate(end)}`;
+		return `${formatDate(start)} - ${formatDate(end)}`;
+	}
+
+	const selectedOptions = $derived.by(() => {
+		if (!(isOptionColumn(column) || isMultiOptionColumn(column))) return [];
+		if (!(isOptionFilter(filter) || isMultiOptionFilter(filter))) return [];
+		return column.getOptions().filter((option) => filter.values.includes(option.value));
+	});
+
+	const optionDisplayName = $derived.by(() => {
+		const name = column.displayName.toLowerCase();
+		if (column.type !== "option") return name;
+		return name.endsWith("s") ? `${name}es` : `${name}s`;
+	});
+</script>
+
+{#if (isOptionColumn(column) && isOptionFilter(filter)) || (isMultiOptionColumn(column) && isMultiOptionFilter(filter))}
+	{#if selectedOptions.length === 1 && selectedOptions[0]}
+		<span>
+			{#if selectedOptions[0].icon}
+				<FilterIcon icon={selectedOptions[0].icon} part="value" />
+			{/if}
+			<span>{selectedOptions[0].label}</span>
+		</span>
+	{:else}
+		<span>
+			{#if selectedOptions.length > 0 && selectedOptions.every((option) => option.icon)}
+				<span>
+					{#each take(selectedOptions, 3) as option (option.value)}
+						<FilterIcon icon={option.icon} part="value" />
+					{/each}
+				</span>
+			{/if}
+			<span>{selectedOptions.length} {optionDisplayName}</span>
+		</span>
+	{/if}
+{:else if isDateColumn(column) && isDateFilter(filter)}
+	{#if filter.values.length === 0}
+		<span>...</span>
+	{:else if filter.values.length === 1 && filter.values[0]}
+		<span>{formatDate(filter.values[0])}</span>
+	{:else if filter.values.length === 2 && filter.values[0] && filter.values[1]}
+		<span>{formatDateRange(filter.values[0], filter.values[1])}</span>
+	{/if}
+{:else if isTextColumn(column) && isTextFilter(filter)}
+	{#if filter.values.length === 0 || !filter.values[0]?.trim()}
+		<span>...</span>
+	{:else}
+		<span>{filter.values[0]}</span>
+	{/if}
+{:else if isNumberColumn(column) && isNumberFilter(filter)}
+	{#if filter.operator === "is between" || filter.operator === "is not between"}
+		<span>{filter.values[0]} {t("and", locale)} {filter.values[1]}</span>
+	{:else}
+		<span>{filter.values[0]}</span>
+	{/if}
+{:else if isBooleanColumn(column) && isBooleanFilter(filter)}
+	<span>{column.toggledStateName}</span>
+{/if}

package/dist/bits/filter/components/filter-value-display.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Column, FilterModel, Locale } from "../types.js";
+declare class __sveltets_Render<TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType> {
+    props(): {
+        filter: FilterModel<TType>;
+        column: Column<TData, TType>;
+        locale?: Locale;
+        entityName?: string;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TType>['props']>, ReturnType<__sveltets_Render<TData, TType>['events']>, ReturnType<__sveltets_Render<TData, TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TType>['exports']>;
+    <TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TType>['props']> & {}): ReturnType<__sveltets_Render<TData, TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FilterValueDisplay: $$IsomorphicComponent;
+type FilterValueDisplay<TData = unknown, TType extends import('../types.js').ColumnDataType = import('../types.js').ColumnDataType> = InstanceType<typeof FilterValueDisplay<TData, TType>>;
+export default FilterValueDisplay;