@ngbplatform/ui 1.3.0

package/src/ngb/primitives/toast.ts

@@ -0,0 +1,66 @@
+import { inject, provide, reactive } from 'vue';
+
+export type ToastTone = 'neutral' | 'success' | 'warn' | 'danger';
+
+export type Toast = {
+  id: string;
+  title: string;
+  message?: string;
+  tone?: ToastTone;
+  timeoutMs?: number;
+};
+
+export type ToastApi = {
+  toasts: Toast[];
+  push: (t: Omit<Toast, 'id'>) => void;
+  remove: (id: string) => void;
+};
+
+const KEY = Symbol('ngb-toasts');
+
+export function provideToasts(): ToastApi {
+  const state = reactive({
+    toasts: [] as Toast[],
+  });
+
+  function remove(id: string) {
+    state.toasts = state.toasts.filter(t => t.id !== id);
+  }
+
+  function push(t: Omit<Toast, 'id'>) {
+    const id = crypto?.randomUUID?.() ?? String(Date.now() + Math.random());
+    const toast: Toast = {
+      id,
+      tone: 'neutral',
+      timeoutMs: 3500,
+      ...t,
+    };
+    state.toasts = [toast, ...state.toasts].slice(0, 5);
+
+    const timeout = toast.timeoutMs ?? 0;
+    if (timeout > 0) {
+      window.setTimeout(() => remove(id), timeout);
+    }
+  }
+
+  const api: ToastApi = {
+    get toasts() {
+      return state.toasts;
+    },
+    push,
+    remove,
+  };
+
+  provide(KEY, api);
+  return api;
+}
+
+export function useToasts(): ToastApi {
+  const api = inject<ToastApi>(KEY);
+  if (!api) throw new Error('useToasts(): missing provideToasts()');
+  return api;
+}
+
+export function useOptionalToasts(): ToastApi | null {
+  return inject<ToastApi>(KEY, null);
+}

package/src/ngb/primitives/useAsyncComboboxQuery.ts

@@ -0,0 +1,85 @@
+import { computed, onBeforeUnmount, ref, watch, type ComputedRef } from 'vue'
+
+type UseAsyncComboboxQueryArgs<TItem> = {
+  disabled: ComputedRef<boolean>
+  items: ComputedRef<readonly TItem[]>
+  emitQuery: (query: string) => void
+  debounceMs?: number
+}
+
+type ResetOptions = {
+  emitEmptyQuery?: boolean
+}
+
+export function useAsyncComboboxQuery<TItem>(args: UseAsyncComboboxQueryArgs<TItem>) {
+  const query = ref('')
+  const pendingEmit = ref(false)
+  const pendingResults = ref(false)
+  const lastSentQuery = ref('')
+  const debounceMs = args.debounceMs ?? 220
+
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const isSearching = computed(() => pendingEmit.value || pendingResults.value)
+
+  function clearTimer(): void {
+    if (!timer) return
+    clearTimeout(timer)
+    timer = null
+  }
+
+  function clearPendingState(): void {
+    pendingEmit.value = false
+    pendingResults.value = false
+    lastSentQuery.value = ''
+  }
+
+  function resetQueryState(options: ResetOptions = {}): void {
+    query.value = ''
+    clearTimer()
+    clearPendingState()
+    if (options.emitEmptyQuery) args.emitQuery('')
+  }
+
+  function onInput(value: string): void {
+    if (args.disabled.value) return
+
+    query.value = value
+    const trimmed = value.trim()
+
+    if (!trimmed) {
+      resetQueryState({ emitEmptyQuery: true })
+      return
+    }
+
+    pendingEmit.value = true
+    pendingResults.value = false
+
+    clearTimer()
+    timer = setTimeout(() => {
+      pendingEmit.value = false
+      pendingResults.value = true
+      lastSentQuery.value = query.value
+      args.emitQuery(query.value)
+    }, debounceMs)
+  }
+
+  watch(
+    () => args.items.value,
+    () => {
+      if (pendingResults.value && query.value === lastSentQuery.value) {
+        pendingResults.value = false
+      }
+    },
+  )
+
+  onBeforeUnmount(() => clearTimer())
+
+  return {
+    query,
+    isSearching,
+    clearPendingState,
+    resetQueryState,
+    onInput,
+  }
+}

package/src/ngb/primitives/useFloatingDropdownPosition.ts

@@ -0,0 +1,129 @@
+import { computed, onBeforeUnmount, onMounted, ref, type ComponentPublicInstance, type Ref } from 'vue'
+
+type FloatingHost = Element | ComponentPublicInstance | null
+type FloatingHostRef = Ref<FloatingHost>
+
+const DROPDOWN_GAP_PX = 8
+const VIEWPORT_PADDING_PX = 8
+const DEFAULT_DROPDOWN_HEIGHT_PX = 288
+
+function resolveHostElement(host: FloatingHost | undefined): HTMLElement | null {
+  const raw = host && '$el' in host ? host.$el : host
+  return raw instanceof HTMLElement ? raw : null
+}
+
+export function useFloatingDropdownPosition(anchorRef: FloatingHostRef, overlayRefs: FloatingHostRef[]) {
+  const floatingLeft = ref(0)
+  const floatingTop = ref(0)
+  const floatingWidth = ref(0)
+  const floatingMaxHeight = ref(DEFAULT_DROPDOWN_HEIGHT_PX)
+  let rafId: number | null = null
+
+  const floatingStyle = computed(() => ({
+    left: `${floatingLeft.value}px`,
+    top: `${floatingTop.value}px`,
+    width: `${floatingWidth.value}px`,
+    maxHeight: `${floatingMaxHeight.value}px`,
+  }))
+
+  function resolveViewportBounds() {
+    if (typeof window === 'undefined') {
+      return {
+        width: 0,
+        height: 0,
+      }
+    }
+
+    const viewport = window.visualViewport
+    return {
+      width: Math.round(viewport?.width ?? window.innerWidth ?? Number.MAX_SAFE_INTEGER),
+      height: Math.round(viewport?.height ?? window.innerHeight ?? Number.MAX_SAFE_INTEGER),
+    }
+  }
+
+  function resolveOverlayHeight() {
+    const overlayEl = overlayRefs
+      .map((overlayRef) => resolveHostElement(overlayRef.value))
+      .find((element) => !!element)
+
+    const renderedHeight = overlayEl?.offsetHeight ?? 0
+    return renderedHeight > 0 ? renderedHeight : DEFAULT_DROPDOWN_HEIGHT_PX
+  }
+
+  function computePosition() {
+    const anchorEl = resolveHostElement(anchorRef.value)
+    if (!anchorEl) return
+
+    const rect = anchorEl.getBoundingClientRect()
+    const viewport = resolveViewportBounds()
+    const overlayHeight = resolveOverlayHeight()
+    const maxWidth = Math.max(0, viewport.width - VIEWPORT_PADDING_PX * 2)
+    const width = Math.max(0, Math.min(Math.round(rect.width), maxWidth))
+    const left = Math.min(
+      Math.max(Math.round(rect.left), VIEWPORT_PADDING_PX),
+      Math.max(VIEWPORT_PADDING_PX, viewport.width - VIEWPORT_PADDING_PX - width),
+    )
+
+    const availableBelow = Math.max(0, viewport.height - rect.bottom - DROPDOWN_GAP_PX - VIEWPORT_PADDING_PX)
+    const availableAbove = Math.max(0, rect.top - DROPDOWN_GAP_PX - VIEWPORT_PADDING_PX)
+    const shouldOpenAbove = availableAbove > availableBelow && availableBelow < overlayHeight
+    const availableHeight = shouldOpenAbove ? availableAbove : availableBelow
+    const maxHeight = Math.max(0, Math.min(DEFAULT_DROPDOWN_HEIGHT_PX, Math.round(availableHeight)))
+    const renderedHeight = Math.min(overlayHeight, maxHeight || overlayHeight)
+    const top = shouldOpenAbove
+      ? Math.max(VIEWPORT_PADDING_PX, Math.round(rect.top - DROPDOWN_GAP_PX - renderedHeight))
+      : Math.round(rect.bottom + DROPDOWN_GAP_PX)
+
+    floatingLeft.value = left
+    floatingTop.value = top
+    floatingWidth.value = width
+    floatingMaxHeight.value = maxHeight
+  }
+
+  function schedulePositionRecalc() {
+    if (typeof window === 'undefined') return
+    if (typeof window.requestAnimationFrame !== 'function') {
+      computePosition()
+      return
+    }
+    if (rafId != null && typeof window.cancelAnimationFrame === 'function') {
+      window.cancelAnimationFrame(rafId)
+    }
+    rafId = window.requestAnimationFrame(() => {
+      rafId = null
+      computePosition()
+    })
+  }
+
+  function updatePosition() {
+    computePosition()
+    schedulePositionRecalc()
+  }
+
+  function onWindowChange() {
+    const hasVisibleOverlay = overlayRefs.some((overlayRef) => !!resolveHostElement(overlayRef.value))
+    if (!hasVisibleOverlay) return
+    computePosition()
+  }
+
+  onMounted(() => {
+    if (typeof window === 'undefined') return
+    window.addEventListener('resize', onWindowChange)
+    window.addEventListener('scroll', onWindowChange, true)
+  })
+
+  onBeforeUnmount(() => {
+    if (typeof window === 'undefined') return
+    window.removeEventListener('resize', onWindowChange)
+    window.removeEventListener('scroll', onWindowChange, true)
+    if (rafId != null && typeof window.cancelAnimationFrame === 'function') {
+      window.cancelAnimationFrame(rafId)
+    }
+    rafId = null
+  })
+
+  return {
+    floatingStyle,
+    updatePosition,
+  }
+}

package/src/ngb/reporting/NgbReportComposerCollectionSection.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts" generic="TItem">
+import type { VNodeChild } from 'vue'
+import NgbButton from '../primitives/NgbButton.vue'
+import NgbIcon from '../primitives/NgbIcon.vue'
+
+type ComposerCollectionColumn = {
+  title: string
+  width?: string
+}
+
+const props = withDefaults(defineProps<{
+  title: string
+  addLabel: string
+  items: TItem[]
+  columns: ComposerCollectionColumn[]
+  emptyMessage: string
+  section: string
+  rowKey: (item: TItem, index: number) => string
+  addDisabled?: boolean
+  tableClass?: string
+}>(), {
+  addDisabled: false,
+  tableClass: 'w-full table-fixed text-sm',
+})
+
+const emit = defineEmits<{
+  (e: 'add'): void
+  (e: 'remove', index: number): void
+  (e: 'dragstart', payload: { section: string; index: number; event: DragEvent }): void
+  (e: 'dragover', event: DragEvent): void
+  (e: 'drop', payload: { section: string; index: number; event: DragEvent }): void
+}>()
+
+defineSlots<{
+  cells(props: { item: TItem; index: number }): VNodeChild
+}>()
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between gap-3">
+      <div class="text-xs font-semibold uppercase tracking-wide text-ngb-muted">{{ title }}</div>
+      <NgbButton size="sm" :disabled="addDisabled" @click="emit('add')">
+        <NgbIcon name="plus" :size="16" />
+        <span>{{ addLabel }}</span>
+      </NgbButton>
+    </div>
+
+    <div class="overflow-x-auto overflow-y-hidden rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card">
+      <table v-if="items.length > 0" :class="tableClass">
+        <colgroup>
+          <col style="width: 28px" />
+          <col v-for="(column, index) in columns" :key="`${title}:col:${index}`" :style="column.width ? `width: ${column.width}` : undefined" />
+          <col style="width: 40px" />
+        </colgroup>
+        <thead class="bg-ngb-bg text-xs text-ngb-muted">
+          <tr>
+            <th class="px-2 py-2"></th>
+            <th
+              v-for="(column, index) in columns"
+              :key="`${title}:head:${index}`"
+              class="border-r border-dotted border-ngb-border px-3 py-2 text-left font-semibold truncate"
+            >
+              {{ column.title }}
+            </th>
+            <th class="px-2 py-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, index) in items"
+            :key="rowKey(item, index)"
+            class="border-t border-ngb-border transition-colors hover:bg-ngb-bg align-top"
+            draggable="true"
+            @dragstart="emit('dragstart', { section, index, event: $event })"
+            @dragover="emit('dragover', $event)"
+            @drop="emit('drop', { section, index, event: $event })"
+          >
+            <td class="px-1 py-1 align-middle">
+              <div class="flex h-8 w-6 items-center justify-center text-ngb-muted cursor-grab active:cursor-grabbing" title="Drag to reorder">
+                <NgbIcon name="grip-vertical" :size="16" />
+              </div>
+            </td>
+
+            <slot name="cells" :item="item" :index="index" />
+
+            <td class="px-1 py-1 align-middle">
+              <button
+                type="button"
+                class="flex h-8 w-8 items-center justify-center rounded-[var(--ngb-radius)] text-ngb-muted hover:bg-ngb-bg hover:text-ngb-text ngb-focus"
+                title="Delete"
+                @click="emit('remove', index)"
+              >
+                <NgbIcon name="trash" :size="16" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div v-else class="px-4 py-3 text-sm text-ngb-muted">
+        {{ emptyMessage }}
+      </div>
+    </div>
+  </div>
+</template>