@octabits-io/nuxt-ui-kit 0.6.0 → 0.8.0

package/dist/dates/index.d.ts

@@ -10,6 +10,11 @@ interface Period {
  * Example: `{ start: "2025-01-01", end: "2025-01-03" }` → 3 days.
  */
 declare function calculateDays(period: Period): number;
+/**
+ * Number of nights in a period whose `end` is **exclusive** (departure
+ * semantics). Example: `{ start: "2025-01-01", end: "2025-01-03" }` → 2 nights.
+ */
+declare function calculateNights(period: Period): number;
 /** Shift an ISO date string by n days; `''` stays `''`. */
 declare function shiftIso(iso: string, days: number): string;
 /**
@@ -39,4 +44,4 @@ declare function createDateFormatter(options: DateFormatterOptions): {
 };
 type DateFormatter = ReturnType<typeof createDateFormatter>;
 //#endregion
-export { DateFormatter, DateFormatterOptions, Period, calculateDays, createDateFormatter, shiftIso, useDateRangeInput };
+export { DateFormatter, DateFormatterOptions, Period, calculateDays, calculateNights, createDateFormatter, shiftIso, useDateRangeInput };

package/dist/dates/index.js

@@ -8,6 +8,13 @@ import { addDays, differenceInDays, eachDayOfInterval, format, parseISO } from "
 function calculateDays(period) {
 	return differenceInDays(new Date(period.end), new Date(period.start)) + 1;
 }
+/**
+* Number of nights in a period whose `end` is **exclusive** (departure
+* semantics). Example: `{ start: "2025-01-01", end: "2025-01-03" }` → 2 nights.
+*/
+function calculateNights(period) {
+	return differenceInDays(new Date(period.end), new Date(period.start));
+}
 /** Shift an ISO date string by n days; `''` stays `''`. */
 function shiftIso(iso, days) {
 	if (!iso || days === 0) return iso;
@@ -105,4 +112,4 @@ function createDateFormatter(options) {
 	};
 }
 //#endregion
-export { calculateDays, createDateFormatter, shiftIso, useDateRangeInput };
+export { calculateDays, calculateNights, createDateFormatter, shiftIso, useDateRangeInput };

package/dist/i18n/index.d.ts

@@ -6,9 +6,9 @@
  * harness toasts. Deep-merge a fragment into the app's own messages per
  * locale; app-specific keys (e.g. sign-in branding) stay app-side.
  *
- * German ships in both registers: `de` addresses the reader informally (du),
- * `deFormal` formally (Sie). Pick whichever matches the app's voice — both
- * merge under the app's `de` locale.
+ * Only English ships with the kit — it doubles as the reference for the full
+ * key set. Apps provide their other locales themselves as `KitMessages`
+ * objects, which keeps every translation (and its register/voice) app-side.
  */
 interface KitMessages {
   errors: {
@@ -44,7 +44,5 @@ interface KitMessages {
   };
 }
 declare const kitMessagesEn: KitMessages;
-declare const kitMessagesDe: KitMessages;
-declare const kitMessagesDeFormal: KitMessages;
 //#endregion
-export { KitMessages, kitMessagesDe, kitMessagesDeFormal, kitMessagesEn };
+export { KitMessages, kitMessagesEn };

package/dist/i18n/index.js

@@ -32,51 +32,5 @@ const kitMessagesEn = {
 		help: "Help"
 	}
 };
-const kitMessagesDe = {
-	errors: {
-		internal_server_error: "Ein unerwarteter Fehler ist aufgetreten",
-		not_found: "Ressource nicht gefunden",
-		forbidden: "Zugriff verweigert",
-		validation_error: "Validierungsfehler",
-		unique_violation: "Dieser Wert existiert bereits",
-		foreign_key_violation: "Der referenzierte Datensatz existiert nicht",
-		exclusion_violation: "Dieser Eintrag überschneidet sich mit einem bestehenden",
-		service_unavailable: "Dienst vorübergehend nicht verfügbar. Bitte versuche es später erneut."
-	},
-	auth: {
-		sessionRenewFailedTitle: "Sitzung konnte nicht erneuert werden",
-		sessionRenewFailedDescription: "Wir konnten deine Sitzung nicht erneuern. Eventuell musst du dich neu anmelden.",
-		sessionExpiredTitle: "Sitzung abgelaufen",
-		sessionExpiredDescription: "Deine Sitzung ist abgelaufen. Bitte melde dich erneut an.",
-		signingIn: "Anmeldung wird abgeschlossen..."
-	},
-	localeField: {
-		translate: "Fehlende Sprachen mit KI übersetzen",
-		translateDone: "Keine Übersetzungen eingefügt | {count} Übersetzung eingefügt | {count} Übersetzungen eingefügt",
-		inheritsBaseLocale: "Übernimmt die Basissprache",
-		translationStatus: {
-			complete: "Alle Übersetzungen vollständig",
-			missing: "Fehlende Übersetzungen — {details}"
-		}
-	},
-	pageChrome: {
-		back: "Zurück",
-		moreActions: "Weitere Aktionen",
-		help: "Hilfe"
-	}
-};
-const kitMessagesDeFormal = {
-	errors: {
-		...kitMessagesDe.errors,
-		service_unavailable: "Dienst vorübergehend nicht verfügbar. Bitte versuchen Sie es später erneut."
-	},
-	auth: {
-		...kitMessagesDe.auth,
-		sessionRenewFailedDescription: "Wir konnten Ihre Sitzung nicht erneuern. Eventuell müssen Sie sich neu anmelden.",
-		sessionExpiredDescription: "Ihre Sitzung ist abgelaufen. Bitte melden Sie sich erneut an."
-	},
-	localeField: kitMessagesDe.localeField,
-	pageChrome: kitMessagesDe.pageChrome
-};
 //#endregion
-export { kitMessagesDe, kitMessagesDeFormal, kitMessagesEn };
+export { kitMessagesEn };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octabits-io/nuxt-ui-kit",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "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",
@@ -75,7 +75,7 @@
     "vitest": "^4.1.10",
     "vue": "^3.5.40",
     "zod": "^4.4.3",
-    "@octabits-io/framework": "^0.4.0"
+    "@octabits-io/framework": "^0.7.0"
   },
   "peerDependencies": {
     "@elysiajs/eden": "^1.4.0",

package/src/components/FlexiblePeriodInput.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+// Shipped as source: the consumer's Vite compiles this SFC. All imports are
+// explicit — no reliance on the consumer's auto-import configuration.
+//
+// Flexible travel-period wish: a date *window* (earliest arrival → latest
+// departure) plus a desired stay length in nights — "between Jun 1 and
+// Jun 21 for 7 nights". Composes DateRangeInput (kind="travel") for the
+// window and adds a nights input, cross-field validation, and a metadata
+// line (window span, flexibility, example stay).
+//
+// i18n key contract: flexPeriod.* (earliestStart/latestEnd/nightsLabel/
+// clear/windowSpan/flexibility/example/errors.*) and period.travel.nights,
+// plus the composed DateRangeInput's dateRange.* keys.
+import { computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import UInputNumber from '@nuxt/ui/components/InputNumber.vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+import DateRangeInput from './DateRangeInput.vue'
+import {
+  calculateNights,
+  createDateFormatter,
+  shiftIso,
+  type Period,
+} from '@octabits-io/nuxt-ui-kit/dates'
+
+type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+const props = withDefaults(defineProps<{
+  /**
+   * The wish window in travel semantics: `start` = earliest possible
+   * arrival, `end` = latest possible departure (ISO YYYY-MM-DD, `''` =
+   * unset). Unlike DateRangeInput's booking-space model, both bounds are
+   * literal calendar dates — conversion happens at the inner boundary.
+   */
+  modelValue: Period
+  /** Desired stay length in nights; `null` = unset. */
+  nights: number | null
+  minNights?: number
+  maxNights?: number
+  disabled?: boolean
+  size?: InputSize
+  /** Calendar trigger icon, passed through to the window inputs. */
+  icon?: string
+  startLabel?: string
+  endLabel?: string
+  /** Show the built-in clear (X) button when anything is set. */
+  clearable?: boolean
+}>(), {
+  minNights: 1,
+  maxNights: 365,
+  disabled: false,
+  size: 'md',
+  icon: undefined,
+  startLabel: undefined,
+  endLabel: undefined,
+  clearable: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Period]
+  'update:nights': [value: number | null]
+  'change': [payload: { window: Period, nights: number | null, isValid: boolean }]
+}>()
+
+const { t, locale } = useI18n()
+const { formatDateMedium } = createDateFormatter({ getLocale: () => locale.value })
+
+const startAriaLabel = computed(() => props.startLabel || t('flexPeriod.earliestStart'))
+const endAriaLabel = computed(() => props.endLabel || t('flexPeriod.latestEnd'))
+
+// The inner DateRangeInput binds in booking semantics (end = last booked
+// day) and displays departure via kind="travel". Our model's end IS the
+// departure date, so convert ±1 day at this boundary only. shiftIso('')
+// stays '' — half-filled pairs pass through literally (never auto-fixed).
+const innerPeriod = computed<Period>({
+  get: () => ({
+    start: props.modelValue.start,
+    end: shiftIso(props.modelValue.end, -1),
+  }),
+  set: (v) => {
+    emit('update:modelValue', {
+      start: v.start,
+      end: shiftIso(v.end, 1),
+    })
+  },
+})
+
+const nightsValue = computed<number | null>({
+  get: () => props.nights,
+  set: v => emit('update:nights', v ?? null),
+})
+
+const hasAnyValue = computed(() =>
+  !!props.modelValue.start || !!props.modelValue.end || props.nights != null,
+)
+
+function clearAll() {
+  emit('update:modelValue', { start: '', end: '' })
+  emit('update:nights', null)
+}
+
+// --- Derived metadata ---
+
+const windowComplete = computed(() =>
+  !!props.modelValue.start
+  && !!props.modelValue.end
+  && props.modelValue.end > props.modelValue.start,
+)
+
+/** Nights the full window spans (arrival → departure, exclusive end). */
+const windowNights = computed<number | null>(() =>
+  windowComplete.value ? calculateNights(props.modelValue) : null,
+)
+
+/** Scheduling slack: how many nights the stay can shift inside the window. */
+const flexNights = computed<number | null>(() => {
+  if (windowNights.value === null || props.nights == null) return null
+  const flex = windowNights.value - props.nights
+  return flex > 0 ? flex : null
+})
+
+/** Example stay anchored at the earliest arrival, when start + nights known. */
+const exampleStay = computed(() => {
+  if (!props.modelValue.start || props.nights == null || props.nights < 1) return ''
+  // A stay that doesn't fit the window has no truthful example — the
+  // exceed-window error below explains the situation instead.
+  if (windowNights.value !== null && props.nights > windowNights.value) return ''
+  return t('flexPeriod.example', {
+    start: formatDateMedium(props.modelValue.start),
+    end: formatDateMedium(shiftIso(props.modelValue.start, props.nights)),
+  })
+})
+
+const metadataParts = computed<string[]>(() => {
+  const parts: string[] = []
+  if (windowNights.value !== null && windowNights.value > 0) {
+    parts.push(t('flexPeriod.windowSpan', { nights: t('period.travel.nights', windowNights.value) }))
+  }
+  if (flexNights.value !== null) {
+    parts.push(t('flexPeriod.flexibility', { nights: t('period.travel.nights', flexNights.value) }))
+  }
+  if (exampleStay.value) {
+    parts.push(exampleStay.value)
+  }
+  return parts
+})
+
+// --- Validation (nights axis only; window errors are the inner input's job) ---
+
+const nightsError = computed<string | null>(() => {
+  if (props.nights == null) return null
+  if (props.nights < props.minNights) {
+    return t('flexPeriod.errors.minNights', { n: props.minNights })
+  }
+  if (props.nights > props.maxNights) {
+    return t('flexPeriod.errors.maxNights', { n: props.maxNights })
+  }
+  if (windowNights.value !== null && props.nights > windowNights.value) {
+    return t('flexPeriod.errors.nightsExceedWindow', {
+      nights: t('period.travel.nights', props.nights),
+      window: t('period.travel.nights', windowNights.value),
+    })
+  }
+  return null
+})
+
+const nightsInputColor = computed<'error' | undefined>(() =>
+  nightsError.value !== null ? 'error' : undefined,
+)
+
+// A wish is progressive capture: fully empty is valid; a window, once
+// started, must be complete and ordered (in travel space, departure strictly
+// after arrival = at least one night).
+const windowValid = computed(() => {
+  const { start, end } = props.modelValue
+  if (!start && !end) return true
+  return windowComplete.value
+})
+
+const isValid = computed(() => windowValid.value && nightsError.value === null)
+
+watch(
+  () => [props.modelValue.start, props.modelValue.end, props.nights] as const,
+  ([start, end, nights]) => {
+    emit('change', { window: { start, end }, nights, isValid: isValid.value })
+  },
+)
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="flex items-start gap-2">
+      <DateRangeInput
+        v-model="innerPeriod"
+        kind="travel"
+        :disabled="disabled"
+        :size="size"
+        :icon="icon"
+        :start-label="startAriaLabel"
+        :end-label="endAriaLabel"
+        class="flex-1"
+      />
+      <UInputNumber
+        v-model="nightsValue"
+        :min="minNights"
+        :max="maxNights"
+        :size="size"
+        :disabled="disabled"
+        :color="nightsInputColor"
+        :aria-label="t('flexPeriod.nightsLabel')"
+        :placeholder="t('flexPeriod.nightsLabel')"
+        class="w-28 shrink-0"
+      />
+      <UButton
+        v-if="clearable && hasAnyValue"
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        :size="size"
+        :disabled="disabled"
+        :aria-label="t('flexPeriod.clear')"
+        @click="clearAll"
+      />
+    </div>
+
+    <!-- Slot for a derived summary shown between the inputs and the hints,
+         matching DateRangeInput's slot for layout parity. -->
+    <slot name="summary" />
+
+    <p v-if="metadataParts.length" class="text-xs text-muted">
+      {{ metadataParts.join(' · ') }}
+    </p>
+
+    <p v-if="nightsError" class="text-sm text-error">
+      {{ nightsError }}
+    </p>
+  </div>
+</template>