@voltro/ui 0.85.0 → 0.87.0

package/dist/dataTable.js

@@ -0,0 +1,60 @@
+import { useUiStrings as e } from "./strings.js";
+import { memo as t, useMemo as n } from "react";
+import { useDataTable as r } from "@voltro/client";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/dataTable.tsx
+var s = (e) => e == null ? "" : typeof e == "boolean" ? e ? "✓" : "✗" : String(e), c = (e, t) => e ? t === "asc" ? "ascending" : "descending" : "none";
+function l({ row: e, columns: t, renderCell: n, rowActions: r }) {
+	return /* @__PURE__ */ o("tr", { children: [t.map((t) => /* @__PURE__ */ a("td", {
+		"data-column": t.name,
+		children: n ? n(e, t) : s(e[t.name])
+	}, t.name)), r ? /* @__PURE__ */ a("td", { children: r(e) }) : null] });
+}
+var u = t(l);
+function d(t) {
+	let { api: s, query: l, emptyText: d, loadingText: f, loadMoreText: p, renderCell: m, rowActions: h, rowKey: g, ..._ } = t, v = e().dataTable, y = r(s, l, _), b = n(() => y.loading ? null : y.rows.map((e, t) => /* @__PURE__ */ a(u, {
+		row: e,
+		columns: y.columns,
+		renderCell: m,
+		rowActions: h
+	}, g ? g(e) : String(e.id ?? t))), [
+		y.loading,
+		y.rows,
+		y.columns,
+		m,
+		h,
+		g
+	]);
+	return y.loading ? /* @__PURE__ */ a("p", {
+		"data-voltro-datatable-loading": !0,
+		"aria-busy": "true",
+		children: f ?? "Loading…"
+	}) : y.rows.length === 0 ? /* @__PURE__ */ a("p", {
+		"data-voltro-datatable-empty": !0,
+		children: d ?? "No rows."
+	}) : /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("table", {
+		"data-voltro-datatable": l,
+		children: [/* @__PURE__ */ a("thead", { children: /* @__PURE__ */ o("tr", { children: [y.columns.map((e) => {
+			let t = y.sort?.column === e.name, n = y.sort?.direction ?? "asc";
+			return /* @__PURE__ */ a("th", {
+				"aria-sort": c(t, n),
+				scope: "col",
+				children: /* @__PURE__ */ o("button", {
+					type: "button",
+					onClick: () => y.toggleSort(e.name),
+					children: [e.label, t ? n === "asc" ? " ▲" : " ▼" : ""]
+				})
+			}, e.name);
+		}), h ? /* @__PURE__ */ a("th", {
+			scope: "col",
+			children: v.actions
+		}) : null] }) }), /* @__PURE__ */ a("tbody", { children: b })]
+	}), y.hasMore ? /* @__PURE__ */ a("button", {
+		type: "button",
+		"data-voltro-datatable-more": !0,
+		onClick: () => y.loadMore(),
+		children: p ?? "Load more"
+	}) : null] });
+}
+//#endregion
+export { d as DataTable };

package/dist/filters.js

@@ -0,0 +1,105 @@
+import { useUiStrings as e } from "./strings.js";
+import { useQueryFilters as t } from "@voltro/client";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/filters.tsx
+var i = (e) => e == null ? "" : String(e);
+function a(t) {
+	let { filter: a, value: o, onChange: s } = t, c = e().filters, l = {
+		"data-filter": a.name,
+		"aria-label": a.label
+	};
+	switch (a.kind) {
+		case "select": return /* @__PURE__ */ r("select", {
+			...l,
+			value: i(o),
+			onChange: (e) => s(e.target.value || void 0),
+			children: [/* @__PURE__ */ n("option", {
+				value: "",
+				children: c.anyOption(a.label)
+			}), (a.options ?? []).map((e) => /* @__PURE__ */ n("option", {
+				value: e.value,
+				children: e.label
+			}, e.value))]
+		});
+		case "multi-select": return /* @__PURE__ */ n("select", {
+			...l,
+			multiple: !0,
+			value: Array.isArray(o) ? o : [],
+			onChange: (e) => s(Array.from(e.target.selectedOptions, (e) => e.value)),
+			children: (a.options ?? []).map((e) => /* @__PURE__ */ n("option", {
+				value: e.value,
+				children: e.label
+			}, e.value))
+		});
+		case "boolean": return /* @__PURE__ */ n("input", {
+			...l,
+			type: "checkbox",
+			checked: o === !0,
+			onChange: (e) => s(e.target.checked ? !0 : void 0)
+		});
+		case "number-range":
+		case "date-range": {
+			let e = a.kind === "number-range" ? "number" : "date", t = o ?? {};
+			return /* @__PURE__ */ r("span", {
+				"data-filter": a.name,
+				"data-range": a.kind,
+				children: [/* @__PURE__ */ n("input", {
+					"aria-label": `${a.label} from`,
+					type: e,
+					value: i(t.gte),
+					onChange: (e) => s({
+						...t,
+						gte: e.target.value || void 0
+					})
+				}), /* @__PURE__ */ n("input", {
+					"aria-label": `${a.label} to`,
+					type: e,
+					value: i(t.lte),
+					onChange: (e) => s({
+						...t,
+						lte: e.target.value || void 0
+					})
+				})]
+			});
+		}
+		default: return /* @__PURE__ */ n("input", {
+			...l,
+			type: "text",
+			value: i(o),
+			onChange: (e) => s(e.target.value || void 0)
+		});
+	}
+}
+function o(i) {
+	let o = t(i.api, i.query, i.initial ? { initial: i.initial } : {}), s = e().filters;
+	return /* @__PURE__ */ r("div", {
+		"data-voltro-query-filters": i.query,
+		children: [/* @__PURE__ */ r("div", {
+			"data-filter-controls": !0,
+			role: "group",
+			"aria-label": s.filtersLabel,
+			children: [
+				o.filters.map((e) => /* @__PURE__ */ r("label", {
+					"data-filter-label": !0,
+					children: [/* @__PURE__ */ n("span", { children: e.label }), /* @__PURE__ */ n(a, {
+						filter: e,
+						value: o.values[e.name],
+						onChange: (t) => o.setFilter(e.name, t)
+					})]
+				}, e.name)),
+				/* @__PURE__ */ n("button", {
+					type: "button",
+					"data-filter-clear": !0,
+					onClick: () => o.clear(),
+					children: s.clear
+				}),
+				i.showCount ?? !0 ? /* @__PURE__ */ n("span", {
+					"data-filter-count": !0,
+					children: s.resultCount(o.count ?? "…")
+				}) : null
+			]
+		}), i.children ? i.children(o) : null]
+	});
+}
+//#endregion
+export { o as QueryFilters };

package/dist/index.d.ts

@@ -13,6 +13,21 @@ import { UseDataTableOptions } from '@voltro/client';
 import { WidgetKind } from '@voltro/client';
 import { WorkflowRunStatus } from '@voltro/client';
 
+export declare interface AchievementUiStrings {
+    readonly title: string;
+    readonly loading: string;
+    readonly empty: string;
+    readonly unavailable: string;
+    readonly invalid: string;
+    readonly locked: string;
+    readonly unlocked: string;
+    readonly tier: (id: string) => string;
+    readonly progress: (stat: string, value: string, target: string) => string;
+    readonly unlockedDate: (date: string) => string;
+}
+
+export declare const achievementUiStrings: Readonly<Record<'en' | 'de', AchievementUiStrings>>;
+
 /** Kit-styled default chat surface. Streaming bubbles, the live typewriter
  *  row, an input box wired to `<agent>.send`. */
 export declare function AgentChat(props: AgentChatProps): ReactNode;
@@ -327,6 +342,27 @@ export declare interface QueryFiltersProps<Row> {
     readonly children?: (state: QueryFiltersState<Row>) => ReactNode;
 }
 
+export declare interface QuestUiStrings {
+    readonly title: string;
+    readonly loading: string;
+    readonly empty: string;
+    readonly unavailable: string;
+    readonly active: string;
+    readonly completed: string;
+    readonly expired: string;
+    readonly reroll: string;
+    readonly rerollPending: string;
+    readonly recover: string;
+    readonly recoverPending: string;
+    readonly rerollError: string;
+    readonly invalid: string;
+    readonly objective: (name: string, progress: number, target: number) => string;
+    readonly expires: (date: string) => string;
+    readonly remaining: (count: number) => string;
+}
+
+export declare const questUiStrings: Readonly<Record<'en' | 'de', QuestUiStrings>>;
+
 export declare function RecordView<R extends Record<string, unknown> = Record<string, unknown>>(props: RecordViewProps<R>): ReactNode;
 
 export declare interface RecordViewProps<R extends Record<string, unknown>> {
@@ -397,6 +433,8 @@ export declare interface TableSkeletonProps {
  *  that interpolates a value (count, name, label) is a function so a locale can
  *  reorder/pluralize. English defaults live in {@link defaultUiStrings}. */
 export declare interface UiStrings {
+    readonly achievements: AchievementUiStrings;
+    readonly quests: QuestUiStrings;
     /** <QueryFilters> — the reset button, the "Any <label>" option, the result
      *  count, and the group's aria-label. */
     readonly filters: {