@ngbplatform/ui 1.3.0

package/src/ngb/primitives/NgbLookup.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="w-full">
+    <label v-if="label" class="block text-xs font-semibold text-ngb-muted mb-1">{{ label }}</label>
+
+    <Combobox
+      :modelValue="modelValue"
+      @update:modelValue="onSelect"
+      :disabled="comboboxDisabled"
+      by="id"
+    >
+      <div class="relative" :title="tooltipText || undefined">
+        <ComboboxInput
+          ref="inputRef"
+          :class="[inputClass, comboboxDisabled ? 'opacity-60 cursor-not-allowed' : '']"
+          :displayValue="displayValue"
+          :placeholder="placeholder"
+          :disabled="comboboxDisabled"
+          :readonly="readonly"
+          :title="tooltipText || undefined"
+          @input="onInput(($event.target as HTMLInputElement).value)"
+          @mousedown.capture="updatePosition"
+          @focus.capture="updatePosition"
+          @keydown.arrow-down.capture="updatePosition"
+          @keydown.enter.capture="updatePosition"
+        />
+
+        <div class="absolute inset-y-0 right-0 flex items-center pr-1">
+          <button
+            v-if="showOpen"
+            type="button"
+            :class="actionButtonClass"
+            :disabled="disabled || !modelValue"
+            aria-label="Open"
+            title="Open"
+            @mousedown.prevent.stop
+            @click.prevent.stop="emit('open')"
+          >
+            <NgbIcon name="open-in-new" :size="actionIconSize" />
+          </button>
+
+          <button
+            v-if="showClear"
+            type="button"
+            :class="actionButtonClass"
+            :disabled="disabled || !modelValue"
+            aria-label="Clear"
+            title="Clear"
+            @mousedown.prevent.stop
+            @click.prevent.stop="clearSelection"
+          >
+            <NgbIcon name="x" :size="actionIconSize" />
+          </button>
+
+          <ComboboxButton
+            :class="[dropdownButtonClass, comboboxDisabled ? 'pointer-events-none' : '']"
+            aria-label="Show options"
+            @mousedown.capture="updatePosition"
+          >
+            ▾
+          </ComboboxButton>
+        </div>
+
+        <!--
+          Teleport dropdown to body to avoid clipping inside tables/scroll regions.
+          Position is computed from the input's viewport rect.
+        -->
+        <Teleport to="body">
+          <ComboboxOptions
+            v-if="filteredItems.length > 0"
+            ref="optionsRef"
+            :style="floatingStyle"
+            class="fixed z-[1000] max-h-72 overflow-auto rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-card p-1 focus:outline-none"
+          >
+            <ComboboxOption
+              v-for="item in filteredItems"
+              :key="item.id"
+              :value="item"
+              v-slot="{ active, selected }"
+            >
+              <div
+                class="px-3 py-2 rounded-[var(--ngb-radius)] text-sm flex items-start justify-between gap-3"
+                :class="active ? 'bg-[var(--ngb-row-hover)]' : ''"
+                :title="optionTooltip(item) || undefined"
+              >
+                <div class="min-w-0">
+                  <div class="truncate" :class="selected ? 'font-semibold' : ''">{{ item.label }}</div>
+                  <div v-if="item.meta" class="text-xs text-ngb-muted truncate mt-0.5">{{ item.meta }}</div>
+                </div>
+                <div v-if="selected" class="text-ngb-blue shrink-0">✓</div>
+              </div>
+            </ComboboxOption>
+          </ComboboxOptions>
+
+          <div
+            v-else-if="query && !comboboxDisabled"
+            ref="emptyRef"
+            :style="floatingStyle"
+            class="fixed z-[1000] rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-card p-3 text-sm text-ngb-muted"
+          >
+            <span v-if="isSearching">Searching…</span>
+            <span v-else>No results</span>
+          </div>
+        </Teleport>
+      </div>
+    </Combobox>
+
+    <div v-if="hint" class="mt-1 text-xs text-ngb-muted">{{ hint }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch, type ComponentPublicInstance } from 'vue'
+import { Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption } from '@headlessui/vue'
+import NgbIcon from './NgbIcon.vue'
+import { useFloatingDropdownPosition } from './useFloatingDropdownPosition'
+import { useAsyncComboboxQuery } from './useAsyncComboboxQuery'
+
+export type LookupItem = { id: string; label: string; meta?: string }
+type LookupVariant = 'default' | 'grid' | 'compact'
+type FloatingTarget = HTMLElement | ComponentPublicInstance | null
+
+const props = withDefaults(defineProps<{
+  modelValue: LookupItem | null
+  items: LookupItem[]
+  label?: string
+  hint?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  showOpen?: boolean
+  showClear?: boolean
+  // Visual variant.
+  // - default: standard input (bordered)
+  // - grid: borderless cell-style input (used inside line grids)
+  // - compact: compact bordered input (used in page headers/toolbars)
+  variant?: LookupVariant
+}>(), {
+  label: '',
+  hint: '',
+  placeholder: '',
+  disabled: false,
+  readonly: false,
+  showOpen: false,
+  showClear: false,
+  variant: 'default',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: LookupItem | null): void
+  (e: 'query', v: string): void
+  (e: 'open'): void
+}>()
+
+const comboboxDisabled = computed(() => !!props.disabled || !!props.readonly)
+
+const actionCount = computed(() => 1 + (props.showOpen ? 1 : 0) + (props.showClear ? 1 : 0))
+
+function inputPaddingClass(count: number, variant: LookupVariant): string {
+  if (variant === 'grid') {
+    if (count >= 3) return 'pr-20'
+    if (count === 2) return 'pr-14'
+    return 'pr-9'
+  }
+
+  if (variant === 'compact') {
+    if (count >= 3) return 'pr-20'
+    if (count === 2) return 'pr-14'
+    return 'pr-8'
+  }
+
+  if (count >= 3) return 'pr-24'
+  if (count === 2) return 'pr-16'
+  return 'pr-10'
+}
+
+const inputClass = computed(() => {
+  if (props.variant === 'grid') {
+    return `h-8 w-full rounded-none border border-transparent bg-transparent px-2 text-sm text-ngb-text placeholder:text-ngb-muted/70 ngb-focus ${inputPaddingClass(actionCount.value, props.variant)}`
+  }
+
+  if (props.variant === 'compact') {
+    return `h-[26px] w-full rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card px-3 text-xs text-ngb-text placeholder:text-ngb-muted/70 shadow-card ngb-focus ${inputPaddingClass(actionCount.value, props.variant)}`
+  }
+
+  return `h-9 w-full rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card px-3 text-sm text-ngb-text placeholder:text-ngb-muted/70 ngb-focus ${inputPaddingClass(actionCount.value, props.variant)}`
+})
+
+const actionButtonClass = computed(() => {
+  const base = 'inline-flex items-center justify-center text-ngb-muted transition-colors hover:text-ngb-text disabled:cursor-not-allowed disabled:opacity-40'
+  if (props.variant === 'grid') return `${base} h-8 w-6`
+  if (props.variant === 'compact') return `${base} h-[26px] w-6 text-[11px]`
+  return `${base} h-9 w-8`
+})
+
+const dropdownButtonClass = computed(() => {
+  if (props.variant === 'grid') return `${actionButtonClass.value} text-[11px]`
+  if (props.variant === 'compact') return `${actionButtonClass.value} text-[10px]`
+  return actionButtonClass.value
+})
+
+const actionIconSize = computed(() => (props.variant === 'compact' ? 13 : 14))
+const tooltipText = computed(() => {
+  const label = String(props.modelValue?.label ?? '').trim()
+  return label.length > 0 ? label : ''
+})
+
+const {
+  query,
+  isSearching,
+  clearPendingState,
+  onInput,
+  resetQueryState,
+} = useAsyncComboboxQuery({
+  disabled: comboboxDisabled,
+  items: computed(() => props.items),
+  emitQuery: (value) => emit('query', value),
+})
+
+const filteredItems = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return props.items.slice(0, 50)
+  return props.items
+    .filter((item) => `${item.label} ${item.meta ?? ''}`.toLowerCase().includes(q))
+    .slice(0, 50)
+})
+
+function displayValue(item: LookupItem | null) {
+  return item?.label ?? ''
+}
+
+function optionTooltip(item: LookupItem): string {
+  const label = String(item.label ?? '').trim()
+  const meta = String(item.meta ?? '').trim()
+  if (!meta) return label
+  if (!label) return meta
+  return `${label} - ${meta}`
+}
+
+onBeforeUnmount(() => clearPendingState())
+
+function onSelect(v: LookupItem | null) {
+  emit('update:modelValue', v)
+  resetQueryState()
+}
+
+function clearSelection() {
+  if (!props.modelValue) return
+  emit('update:modelValue', null)
+  resetQueryState({ emitEmptyQuery: true })
+}
+
+const inputRef = ref<FloatingTarget>(null)
+const optionsRef = ref<FloatingTarget>(null)
+const emptyRef = ref<FloatingTarget>(null)
+
+const { floatingStyle, updatePosition } = useFloatingDropdownPosition(inputRef, [optionsRef, emptyRef])
+
+watch(
+  () => [filteredItems.value.length, query.value, isSearching.value] as const,
+  () => {
+    updatePosition()
+  },
+)
+</script>

package/src/ngb/primitives/NgbMonthPicker.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import NgbPickerPopover from './NgbPickerPopover.vue'
+import NgbPickerNavButton from './NgbPickerNavButton.vue'
+import {
+  currentMonthValue,
+  formatMonthValue,
+  normalizeMonthValue,
+  parseMonthValue,
+  toMonthValue,
+} from '../utils/dateValues'
+
+const props = defineProps<{
+  modelValue: string | null | undefined
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  grouped?: boolean
+  displayFormat?: 'short' | 'long'
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string | null): void
+}>()
+
+function toDisplay(v: string | null | undefined, format: 'short' | 'long'): string {
+  if (!v) return ''
+  return formatMonthValue(v, { month: format, year: 'numeric' }) ?? String(v)
+}
+
+const months = [
+  { value: 1, label: 'Jan' },
+  { value: 2, label: 'Feb' },
+  { value: 3, label: 'Mar' },
+  { value: 4, label: 'Apr' },
+  { value: 5, label: 'May' },
+  { value: 6, label: 'Jun' },
+  { value: 7, label: 'Jul' },
+  { value: 8, label: 'Aug' },
+  { value: 9, label: 'Sep' },
+  { value: 10, label: 'Oct' },
+  { value: 11, label: 'Nov' },
+  { value: 12, label: 'Dec' },
+] as const
+
+const selected = computed(() => parseMonthValue(props.modelValue ?? null))
+const viewYear = ref<number>(selected.value?.year ?? parseMonthValue(currentMonthValue())?.year ?? new Date().getFullYear())
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    const ym = parseMonthValue(normalizeMonthValue(v) ?? null)
+    if (!ym) return
+    viewYear.value = ym.year
+  }
+)
+
+const displayValue = computed(() => toDisplay(props.modelValue ?? null, props.displayFormat ?? 'long'))
+
+function prevYear() {
+  viewYear.value -= 1
+}
+
+function nextYear() {
+  viewYear.value += 1
+}
+
+function pick(month: number, close: () => void) {
+  emit('update:modelValue', toMonthValue(viewYear.value, month))
+  close()
+}
+
+function clear(close: () => void) {
+  emit('update:modelValue', null)
+  close()
+}
+
+function setCurrent(close: () => void) {
+  emit('update:modelValue', currentMonthValue())
+  close()
+}
+
+function isSelected(month: number): boolean {
+  return selected.value?.year === viewYear.value && selected.value?.month === month
+}
+
+function isCurrent(month: number): boolean {
+  const ym = parseMonthValue(currentMonthValue())
+  return ym?.year === viewYear.value && ym.month === month
+}
+</script>
+
+<template>
+  <NgbPickerPopover
+    :display-value="displayValue"
+    :placeholder="placeholder ?? 'Select month'"
+    :disabled="disabled"
+    :readonly="readonly"
+    :grouped="grouped"
+  >
+    <template #header>
+      <NgbPickerNavButton direction="prev" @click="prevYear" />
+      <div class="text-sm font-semibold text-ngb-text">{{ viewYear }}</div>
+      <NgbPickerNavButton direction="next" @click="nextYear" />
+    </template>
+
+    <template #default="{ close }">
+      <div class="grid grid-cols-4 gap-2">
+        <button
+          v-for="month in months"
+          :key="month.value"
+          type="button"
+          class="h-10 rounded-md border text-sm transition-colors"
+          :class="[
+            isSelected(month.value)
+              ? 'border-ngb-primary/50 bg-ngb-primary/20 text-ngb-text'
+              : 'border-ngb-border bg-transparent text-ngb-text hover:bg-ngb-muted/10',
+            isCurrent(month.value) ? 'ring-1 ring-ngb-primary/40' : ''
+          ]"
+          @click="pick(month.value, close)"
+        >
+          {{ month.label }}
+        </button>
+      </div>
+    </template>
+
+    <template #footer="{ close }">
+      <button type="button" class="text-ngb-primary hover:underline" @click="clear(close)">Clear</button>
+      <button type="button" class="text-ngb-primary hover:underline" @click="setCurrent(close)">This month</button>
+    </template>
+  </NgbPickerPopover>
+</template>

package/src/ngb/primitives/NgbMultiSelect.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="w-full">
+    <label v-if="label" class="block text-xs font-semibold text-ngb-muted mb-1">{{ label }}</label>
+
+    <Combobox
+      multiple
+      :modelValue="modelValue"
+      @update:modelValue="onSelect"
+      :disabled="disabled"
+      by="id"
+    >
+      <div ref="anchorRef" class="relative">
+        <div
+          class="min-h-9 w-full rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card px-2 py-1 flex flex-wrap items-center gap-1 ngb-focus"
+          :class="disabled ? 'opacity-60 cursor-not-allowed' : ''"
+        >
+          <span
+            v-for="item in modelValue"
+            :key="item.id"
+            class="inline-flex items-center gap-1 rounded-full border border-ngb-border bg-[var(--ngb-row-hover)] px-2 py-0.5 text-[11px] font-semibold"
+            :title="multiSelectItemTooltip(item) || undefined"
+          >
+            <span class="truncate max-w-[180px]">{{ item.label }}</span>
+            <button
+              v-if="!disabled"
+              type="button"
+              class="text-ngb-muted hover:text-ngb-text"
+              aria-label="Remove"
+              @click.stop="remove(item)"
+            >
+              ×
+            </button>
+          </span>
+
+          <ComboboxInput
+            class="h-7 flex-1 min-w-[120px] bg-transparent px-2 text-sm text-ngb-text placeholder:text-ngb-muted/70 outline-none"
+            :displayValue="() => ''"
+            :placeholder="modelValue.length === 0 ? placeholder : ''"
+            @input="onQueryInput(($event.target as HTMLInputElement).value)"
+            @mousedown.capture="updatePosition"
+            @focus.capture="updatePosition"
+            @keydown.arrow-down.capture="updatePosition"
+            @keydown.enter.capture="updatePosition"
+            @keydown.backspace.capture="onBackspace"
+          />
+        </div>
+
+        <Teleport to="body">
+          <ComboboxOptions
+            v-if="filteredItems.length > 0"
+            ref="optionsRef"
+            :style="floatingStyle"
+            class="fixed z-[1000] max-h-72 overflow-auto rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-card p-1 focus:outline-none"
+          >
+            <ComboboxOption
+              v-for="item in filteredItems"
+              :key="item.id"
+              :value="item"
+              v-slot="{ active, selected }"
+            >
+              <div
+                class="px-3 py-2 rounded-[var(--ngb-radius)] text-sm flex items-center justify-between gap-3"
+                :class="active ? 'bg-[var(--ngb-row-hover)]' : ''"
+                :title="multiSelectItemTooltip(item) || undefined"
+              >
+                <div class="min-w-0">
+                  <div class="truncate" :class="selected ? 'font-semibold' : ''">{{ item.label }}</div>
+                  <div v-if="item.meta" class="text-xs text-ngb-muted truncate mt-0.5">{{ item.meta }}</div>
+                </div>
+                <div v-if="selected" class="text-ngb-blue shrink-0">✓</div>
+              </div>
+            </ComboboxOption>
+          </ComboboxOptions>
+
+          <div
+            v-else-if="query.trim() && !disabled"
+            ref="emptyRef"
+            :style="floatingStyle"
+            class="fixed z-[1000] rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-card p-3 text-sm text-ngb-muted"
+          >
+            <span v-if="isSearching">Searching…</span>
+            <span v-else>No results</span>
+          </div>
+        </Teleport>
+      </div>
+    </Combobox>
+
+    <div v-if="hint" class="mt-1 text-xs text-ngb-muted">{{ hint }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch, type ComponentPublicInstance } from 'vue'
+import { Combobox, ComboboxInput, ComboboxOptions, ComboboxOption } from '@headlessui/vue'
+
+import { useFloatingDropdownPosition } from './useFloatingDropdownPosition'
+import { useAsyncComboboxQuery } from './useAsyncComboboxQuery'
+
+export type MultiSelectItem = { id: string; label: string; meta?: string }
+type FloatingTarget = HTMLElement | ComponentPublicInstance | null
+
+const props = defineProps<{
+  modelValue: MultiSelectItem[]
+  items: MultiSelectItem[]
+  label?: string
+  hint?: string
+  placeholder?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: MultiSelectItem[]): void
+  (e: 'query', v: string): void
+}>()
+
+const {
+  query,
+  isSearching,
+  resetQueryState,
+  onInput,
+} = useAsyncComboboxQuery({
+  disabled: computed(() => !!props.disabled),
+  items: computed(() => props.items),
+  emitQuery: (value) => emit('query', value),
+})
+
+const filteredItems = computed(() => {
+  const normalizedQuery = query.value.trim().toLowerCase()
+  const selectedIds = new Set(props.modelValue.map((item) => item.id))
+  const source = props.items.filter((item) => !selectedIds.has(item.id))
+  if (!normalizedQuery) return source.slice(0, 50)
+
+  return source
+    .filter((item) => `${item.label} ${item.meta ?? ''}`.toLowerCase().includes(normalizedQuery))
+    .slice(0, 50)
+})
+const anchorRef = ref<FloatingTarget>(null)
+const optionsRef = ref<FloatingTarget>(null)
+const emptyRef = ref<FloatingTarget>(null)
+
+const { floatingStyle, updatePosition } = useFloatingDropdownPosition(anchorRef, [optionsRef, emptyRef])
+
+function remove(item: MultiSelectItem) {
+  emit('update:modelValue', props.modelValue.filter((entry) => entry.id !== item.id))
+}
+
+function multiSelectItemTooltip(item: MultiSelectItem): string {
+  const label = String(item.label ?? '').trim()
+  const meta = String(item.meta ?? '').trim()
+  if (!meta) return label
+  if (!label) return meta
+  return `${label} - ${meta}`
+}
+
+function onQueryInput(value: string) {
+  onInput(value)
+  updatePosition()
+}
+
+function onSelect(value: MultiSelectItem[]) {
+  emit('update:modelValue', value)
+  resetQueryState({ emitEmptyQuery: true })
+}
+
+function onBackspace(event: KeyboardEvent) {
+  if (query.value.trim().length > 0 || props.modelValue.length === 0) return
+  event.stopPropagation()
+  remove(props.modelValue[props.modelValue.length - 1]!)
+}
+
+watch(
+  () => filteredItems.value.length,
+  () => {
+    updatePosition()
+  },
+)
+
+onBeforeUnmount(() => resetQueryState())
+</script>

package/src/ngb/primitives/NgbPeriodPicker.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="w-full">
+    <label v-if="label" class="block text-xs font-semibold text-ngb-muted mb-1">{{ label }}</label>
+
+    <div class="flex items-center gap-3 flex-wrap">
+      <NgbTabs v-model="kind" :tabs="kindTabs" />
+
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-semibold text-ngb-muted">Year</span>
+        <div class="w-[112px]">
+          <NgbSelect
+            :model-value="year"
+            :options="yearOptions"
+            @update:model-value="onYear(String($event ?? ''))"
+          />
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-semibold text-ngb-muted">{{ periodLabel }}</span>
+        <div class="w-[112px]">
+          <NgbSelect
+            :model-value="period"
+            :options="periodOptions"
+            @update:model-value="onPeriod(String($event ?? ''))"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div v-if="hint" class="mt-1 text-xs text-ngb-muted">{{ hint }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import NgbSelect from './NgbSelect.vue'
+import NgbTabs from './NgbTabs.vue'
+
+export type PeriodKind = 'month' | 'quarter' | 'year'
+export type PeriodValue = {
+  kind: PeriodKind
+  year: number
+  period: number
+}
+
+const props = defineProps<{
+  modelValue: PeriodValue
+  label?: string
+  hint?: string
+  minYear?: number
+  maxYear?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: PeriodValue): void
+}>()
+
+const kindTabs = [
+  { key: 'month', label: 'Month' },
+  { key: 'quarter', label: 'Quarter' },
+  { key: 'year', label: 'Year' },
+]
+
+const years = computed(() => {
+  const now = new Date()
+  const min = props.minYear ?? (now.getUTCFullYear() - 5)
+  const max = props.maxYear ?? (now.getUTCFullYear() + 1)
+  const values: number[] = []
+
+  for (let year = max; year >= min; year -= 1) values.push(year)
+  return values
+})
+
+const yearOptions = computed(() => years.value.map((year) => ({ value: year, label: String(year) })))
+
+const kind = computed({
+  get: () => props.modelValue.kind,
+  set: (value: string) => {
+    const nextKind = value as PeriodKind
+    emit('update:modelValue', {
+      ...props.modelValue,
+      kind: nextKind,
+      period: 1,
+    })
+  },
+})
+
+const year = computed(() => props.modelValue.year)
+const period = computed(() => props.modelValue.period)
+
+const periodLabel = computed(() => {
+  if (props.modelValue.kind === 'month') return 'Month'
+  if (props.modelValue.kind === 'quarter') return 'Quarter'
+  return 'Period'
+})
+
+const periodOptions = computed(() => {
+  if (props.modelValue.kind === 'month') {
+    return Array.from({ length: 12 }, (_, index) => ({
+      value: index + 1,
+      label: String(index + 1).padStart(2, '0'),
+    }))
+  }
+
+  if (props.modelValue.kind === 'quarter') {
+    return [1, 2, 3, 4].map((quarter) => ({ value: quarter, label: `Q${quarter}` }))
+  }
+
+  return [{ value: 1, label: 'FY' }]
+})
+
+function onYear(value: string) {
+  const nextYear = Number(value)
+  if (!Number.isFinite(nextYear)) return
+  emit('update:modelValue', { ...props.modelValue, year: nextYear })
+}
+
+function onPeriod(value: string) {
+  const nextPeriod = Number(value)
+  if (!Number.isFinite(nextPeriod)) return
+  emit('update:modelValue', { ...props.modelValue, period: nextPeriod })
+}
+</script>