@octabits-io/nuxt-ui-kit 0.2.0 → 0.2.1

package/dist/index.d.ts

@@ -397,19 +397,6 @@ interface ApiErrorMessengerOptions {
   /** Default `console.error`. Pass `() => {}` to silence. */
   log?: (message: string, error: unknown) => void;
 }
-/**
- * Map API error bodies to user-facing i18n strings using a fixed key
- * convention the consumer's locale files fulfil:
- *
- * - `errors.<key>` — one entry per API error key (fallback: the raw
- *   server `message`, and `errors.internal_server_error` for non-API errors)
- * - `validation.fields.<path>` — display names for validated fields
- * - `validation.messages.<snake_cased_message>` — validation message texts
- *
- * Framework-free: pass `t`/`te` from your i18n instance (the app-side
- * composable is typically `const { t, te } = useI18n()` + this factory).
- * Eden Treaty error envelopes (`{ value }`) are unwrapped automatically.
- */
 declare function createApiErrorMessenger(options: ApiErrorMessengerOptions): {
   getErrorMessage: (error: unknown) => string;
   isValidationError: (error: unknown) => error is ValidationApiErrorLike;

package/dist/index.js

@@ -421,13 +421,25 @@ function useConfirmState() {
 *
 * - `errors.<key>` — one entry per API error key (fallback: the raw
 *   server `message`, and `errors.internal_server_error` for non-API errors)
-* - `validation.fields.<path>` — display names for validated fields
-* - `validation.messages.<snake_cased_message>` — validation message texts
+* - `validation.fields.<slug>` — display names for validated fields
+* - `validation.messages.<slug>` — validation message texts
+*
+* `<slug>` is the path/message lowercased with every non-alphanumeric run
+* collapsed to a single `_` (e.g. path `items.0.name` → `items_0_name`,
+* message `Expected string to match 'email'` →
+* `expected_string_to_match_email`) — so every derivable key is a flat,
+* definable vue-i18n key. Raw paths/messages with dots or punctuation are
+* not definable (dots nest in vue-i18n), which previously made this branch
+* unimplementable for most real messages.
 *
 * Framework-free: pass `t`/`te` from your i18n instance (the app-side
 * composable is typically `const { t, te } = useI18n()` + this factory).
 * Eden Treaty error envelopes (`{ value }`) are unwrapped automatically.
 */
+/** Lowercase + collapse every non-alphanumeric run to `_` (trimmed) — a flat, definable vue-i18n key segment. */
+function i18nSlug(value) {
+	return value.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+}
 function createApiErrorMessenger(options) {
 	const { t, te } = options;
 	const log = options.log ?? ((message, error) => console.error(message, error));
@@ -442,9 +454,9 @@ function createApiErrorMessenger(options) {
 		let actualError = error;
 		if (typeof error === "object" && error !== null && "value" in error) actualError = error.value;
 		if (isValidationError(actualError)) return actualError.fields.map((f) => {
-			const fieldKey = `validation.fields.${f.path}`;
+			const fieldKey = `validation.fields.${i18nSlug(f.path)}`;
 			const fieldName = te(fieldKey) ? t(fieldKey) : f.path;
-			const messageKey = `validation.messages.${f.message.toLowerCase().replace(/\s+/g, "_")}`;
+			const messageKey = `validation.messages.${i18nSlug(f.message)}`;
 			return `${fieldName}: ${te(messageKey) ? t(messageKey) : f.message}`;
 		}).join(", ") || t("errors.validation_error");
 		if (!isApiError(actualError)) return t("errors.internal_server_error");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octabits-io/nuxt-ui-kit",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Frontend kit for Nuxt/Vue admin SPAs: OIDC session harness (oidc-client-ts), Eden Treaty client factory, auth/org store cores, and a route-guard builder — factory-style seams the app wires into its own plugins, stores, and middleware",
   "license": "MIT",
   "type": "module",

package/src/components/SubSidebar.vue

@@ -28,6 +28,15 @@ const route = useRoute()
 
 const buttonLabel = computed(() => props.toggleLabel ?? props.title)
 
+// A named handler rather than an inline `@click="open = true"`: Vue compiles an
+// inline assignment to `$event => (open = true)`, whose return type is
+// `boolean`. UButton types `onClick` as `(event) => void | Promise<void>` — a
+// *union*, so TS's "a function returning a value is assignable to a void-returning
+// signature" rule does not apply and the assignment errors (TS2322).
+function openSidebar() {
+  open.value = true
+}
+
 watch(
   () => [route.path, route.query[props.selectionQueryKey]],
   () => { open.value = false },
@@ -73,7 +82,7 @@ watch(
             color="neutral"
             variant="outline"
             size="sm"
-            @click="open = true"
+            @click="openSidebar"
           />
         </div>
         <div class="min-w-0 flex-1 overflow-y-auto">