@ngbplatform/ui 1.3.0

package/src/ngb/command-palette/types.ts

@@ -0,0 +1,120 @@
+import type { Router } from 'vue-router'
+
+export type CommandPaletteScope = 'commands' | 'pages' | 'reports' | 'documents' | 'catalogs'
+
+export type CommandPaletteGroupCode = 'actions' | 'go-to' | 'documents' | 'catalogs' | 'reports' | 'recent'
+
+export type CommandPaletteItemKind = 'page' | 'document' | 'catalog' | 'report' | 'command' | 'recent'
+
+export type CommandPaletteExecutionMode = 'default' | 'new-tab'
+
+export type CommandPaletteAction = () => void | Promise<void>
+
+export type CommandPaletteItem = {
+  key: string
+  group: CommandPaletteGroupCode
+  kind: CommandPaletteItemKind
+  scope: CommandPaletteScope
+  title: string
+  subtitle?: string | null
+  icon?: string | null
+  badge?: string | null
+  hint?: string | null
+  route?: string | null
+  commandCode?: string | null
+  status?: string | null
+  openInNewTabSupported?: boolean
+  keywords?: string[]
+  perform?: CommandPaletteAction
+  defaultRank: number
+  score: number
+  isCurrentContext?: boolean
+  isFavorite?: boolean
+  isRecent?: boolean
+  source: 'local' | 'remote'
+}
+
+export type CommandPaletteItemSeed = Omit<CommandPaletteItem, 'score' | 'source'>
+
+export type CommandPaletteGroup = {
+  code: CommandPaletteGroupCode
+  label: string
+  items: CommandPaletteItem[]
+}
+
+export type CommandPaletteExplicitContext = {
+  entityType?: 'document' | 'catalog' | 'report' | 'page'
+  documentType?: string | null
+  catalogType?: string | null
+  entityId?: string | null
+  title?: string | null
+  actions: CommandPaletteItemSeed[]
+}
+
+export type CommandPaletteRecentEntry = {
+  key: string
+  kind: CommandPaletteItemKind
+  scope: CommandPaletteScope
+  title: string
+  subtitle?: string | null
+  icon?: string | null
+  badge?: string | null
+  route?: string | null
+  status?: string | null
+  openInNewTabSupported?: boolean
+  timestamp: string
+}
+
+export type CommandPaletteSearchContextDto = {
+  entityType?: string | null
+  documentType?: string | null
+  catalogType?: string | null
+  entityId?: string | null
+}
+
+export type CommandPaletteSearchRequestDto = {
+  query: string
+  scope?: CommandPaletteScope | null
+  limit?: number
+  currentRoute?: string | null
+  context?: CommandPaletteSearchContextDto | null
+}
+
+export type CommandPaletteResultItemDto = {
+  key: string
+  kind: CommandPaletteItemKind | 'page'
+  title: string
+  subtitle?: string | null
+  icon?: string | null
+  badge?: string | null
+  route?: string | null
+  commandCode?: string | null
+  status?: string | null
+  openInNewTabSupported: boolean
+  score: number
+}
+
+export type CommandPaletteGroupDto = {
+  code: 'documents' | 'catalogs' | 'reports' | 'go-to' | 'actions' | 'recent'
+  label: string
+  items: CommandPaletteResultItemDto[]
+}
+
+export type CommandPaletteSearchResponseDto = {
+  groups: CommandPaletteGroupDto[]
+}
+
+export type CommandPaletteStoreConfig = {
+  router: Router
+  recentStorageKey: string
+  searchRemote?: (
+    request: CommandPaletteSearchRequestDto,
+    signal?: AbortSignal,
+  ) => Promise<CommandPaletteSearchResponseDto>
+  loadReportItems?: () => Promise<CommandPaletteItemSeed[]>
+  buildHeuristicCurrentActions?: (fullRoute: string) => CommandPaletteItemSeed[]
+  favoriteItems?: CommandPaletteItemSeed[]
+  createItems?: CommandPaletteItemSeed[]
+  specialPageItems?: CommandPaletteItemSeed[]
+}
+

package/src/ngb/command-palette/useCommandPaletteHotkeys.ts

@@ -0,0 +1,27 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+import { useCommandPaletteStore } from './store'
+
+export function useCommandPaletteHotkeys(): void {
+  const store = useCommandPaletteStore()
+
+  function onKeyDown(event: KeyboardEvent): void {
+    const isCommandShortcut = (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'k'
+    if (!isCommandShortcut) return
+    if (!store.isOpen && isEditableTarget(event.target)) return
+
+    event.preventDefault()
+    store.open()
+  }
+
+  onMounted(() => window.addEventListener('keydown', onKeyDown))
+  onBeforeUnmount(() => window.removeEventListener('keydown', onKeyDown))
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  if (target.isContentEditable) return true
+
+  const closest = target.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]')
+  return closest instanceof HTMLElement
+}
+

package/src/ngb/command-palette/useCommandPalettePageContext.ts

@@ -0,0 +1,18 @@
+import { getCurrentInstance, onBeforeUnmount, watchEffect } from 'vue'
+import type { CommandPaletteExplicitContext } from './types'
+import { useCommandPaletteStore } from './store'
+
+export function useCommandPalettePageContext(resolve: () => CommandPaletteExplicitContext | null | undefined): void {
+  const store = useCommandPaletteStore()
+  const instance = getCurrentInstance()
+  const ownerId = `command-palette:${instance?.uid ?? Math.random().toString(36).slice(2)}`
+
+  watchEffect(() => {
+    store.setExplicitContext(ownerId, resolve() ?? null)
+  })
+
+  onBeforeUnmount(() => {
+    store.clearExplicitContext(ownerId)
+  })
+}
+

package/src/ngb/components/NgbConfirmDialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <NgbModalShell :open="open" max-width-class="max-w-[480px]" @close="cancel">
+    <div class="p-5">
+      <div class="flex items-start gap-3">
+        <div class="shrink-0 mt-0.5">
+          <div
+            class="w-9 h-9 rounded-full flex items-center justify-center"
+            :class="danger ? 'bg-[rgba(155,28,28,.08)] text-ngb-danger' : 'bg-[rgba(11,60,93,.08)] text-ngb-blue'"
+          >
+            <NgbIcon :name="danger ? 'trash' : 'help-circle'" />
+          </div>
+        </div>
+
+        <div class="min-w-0 flex-1">
+          <DialogTitle class="text-base font-semibold text-ngb-text">{{ title }}</DialogTitle>
+          <div class="text-sm text-ngb-muted mt-1 leading-5">{{ message }}</div>
+          <div v-if="$slots.default" class="mt-3">
+            <slot />
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-5 flex items-center justify-end gap-2">
+        <NgbButton variant="secondary" @click="cancel">{{ cancelTextComputed }}</NgbButton>
+        <NgbButton :variant="danger ? 'danger' : 'primary'" :loading="confirmLoading" @click="confirm">{{ confirmTextComputed }}</NgbButton>
+      </div>
+    </div>
+  </NgbModalShell>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DialogTitle } from '@headlessui/vue'
+import NgbModalShell from './NgbModalShell.vue'
+import NgbButton from '../primitives/NgbButton.vue'
+import NgbIcon from '../primitives/NgbIcon.vue'
+
+const props = defineProps<{
+  open: boolean
+  title: string
+  message: string
+  confirmText?: string
+  cancelText?: string
+  danger?: boolean
+  confirmLoading?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'confirm'): void
+}>()
+
+const confirmTextComputed = computed(() => props.confirmText ?? (props.danger ? 'Discard' : 'Confirm'))
+const cancelTextComputed = computed(() => props.cancelText ?? 'Cancel')
+
+function cancel() {
+  emit('update:open', false)
+}
+
+function confirm() {
+  emit('confirm')
+}
+</script>

package/src/ngb/components/NgbDialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <NgbModalShell :open="open" max-width-class="max-w-[560px]" @close="$emit('update:open', false)">
+    <div class="px-5 py-4 border-b border-ngb-border">
+      <DialogTitle class="text-base font-semibold text-ngb-text">{{ title }}</DialogTitle>
+      <div v-if="subtitle" class="text-sm text-ngb-muted mt-1">{{ subtitle }}</div>
+    </div>
+
+    <div class="px-5 py-4">
+      <slot />
+    </div>
+
+    <div class="px-5 py-4 border-t border-ngb-border flex items-center justify-end gap-2">
+      <slot name="footer">
+        <NgbButton variant="secondary" @click="$emit('update:open', false)">{{ cancelText }}</NgbButton>
+        <NgbButton :variant="danger ? 'danger' : 'primary'" :loading="confirmLoading" @click="$emit('confirm')">{{ confirmText }}</NgbButton>
+      </slot>
+    </div>
+  </NgbModalShell>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DialogTitle } from '@headlessui/vue'
+import NgbModalShell from './NgbModalShell.vue'
+import NgbButton from '../primitives/NgbButton.vue'
+
+const props = defineProps<{
+  open: boolean
+  title: string
+  subtitle?: string
+  confirmText?: string
+  cancelText?: string
+  danger?: boolean
+  confirmLoading?: boolean
+}>()
+
+defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'confirm'): void
+}>()
+
+const confirmText = computed(() => props.confirmText ?? 'Confirm')
+const cancelText = computed(() => props.cancelText ?? 'Cancel')
+</script>

package/src/ngb/components/NgbDrawer.vue

@@ -0,0 +1,156 @@
+<template>
+  <TransitionRoot appear :show="open" as="template" @after-leave="restoreLastFocus">
+    <Dialog as="div" class="relative z-40" @close="maybeClose">
+      <TransitionChild
+        as="template"
+        enter="duration-150 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-120 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+      <div data-testid="drawer-overlay" class="fixed inset-0 bg-[rgba(0,0,0,.18)]" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-hidden">
+        <div class="absolute inset-0 overflow-hidden">
+          <div
+            class="pointer-events-none fixed inset-y-0 flex max-w-full"
+            :class="side === 'left' ? 'left-0 pr-10' : 'right-0 pl-10'"
+          >
+            <TransitionChild
+              as="template"
+              enter="duration-150 ease-out"
+              :enter-from="side === 'left' ? '-translate-x-full' : 'translate-x-full'"
+              enter-to="translate-x-0"
+              leave="duration-120 ease-in"
+              leave-from="translate-x-0"
+              :leave-to="side === 'left' ? '-translate-x-full' : 'translate-x-full'"
+            >
+              <DialogPanel
+                data-testid="drawer-panel"
+                class="pointer-events-auto w-screen bg-ngb-card shadow-card"
+                :class="[side === 'left' ? 'border-r border-ngb-border' : 'border-l border-ngb-border', panelClass || 'max-w-[520px]']"
+              >
+                <DialogTitle v-if="hideHeader" class="sr-only">{{ title }}</DialogTitle>
+
+                <div class="h-full flex flex-col">
+                  <div v-if="!hideHeader" data-testid="drawer-header" class="px-5 py-4 border-b border-ngb-border flex items-center gap-3">
+                    <div class="min-w-0 flex-1">
+                      <DialogTitle class="text-base font-semibold text-ngb-text truncate">{{ title }}</DialogTitle>
+                      <div v-if="subtitle" class="text-sm text-ngb-muted mt-1 truncate">{{ subtitle }}</div>
+                    </div>
+
+                    <div class="flex items-center justify-end gap-2">
+                      <slot name="actions" />
+
+                      <button v-if="showClose" class="ngb-iconbtn" @click="maybeClose" title="Close">
+                        <NgbIcon name="x" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div data-testid="drawer-body" :class="['flex-1 overflow-auto', flushBody ? 'p-0' : 'px-5 py-4']">
+                    <slot />
+                  </div>
+
+                  <div v-if="$slots.footer" class="px-5 py-4 border-t border-ngb-border">
+                    <slot name="footer" />
+                  </div>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+
+import NgbIcon from '../primitives/NgbIcon.vue';
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean;
+    title: string;
+    subtitle?: string;
+    showClose?: boolean;
+    hideHeader?: boolean;
+    flushBody?: boolean;
+    side?: 'left' | 'right';
+    panelClass?: string;
+    // Allows parent to intercept drawer close (overlay click, Esc, or close button).
+    // Return false to prevent closing.
+    beforeClose?: (() => boolean | Promise<boolean>) | null;
+  }>(),
+  {
+    showClose: true,
+    hideHeader: false,
+    flushBody: false,
+    side: 'right',
+    panelClass: '',
+    beforeClose: null,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void;
+}>();
+
+const lastFocusedElement = ref<HTMLElement | null>(null);
+
+function onDocumentFocusIn(event: FocusEvent) {
+  if (props.open) return;
+  const target = event.target instanceof HTMLElement ? event.target : null;
+  if (!target || target === document.body) return;
+  lastFocusedElement.value = target;
+}
+
+onMounted(() => {
+  if (typeof document === 'undefined') return;
+  document.addEventListener('focusin', onDocumentFocusIn, true);
+});
+
+onBeforeUnmount(() => {
+  if (typeof document === 'undefined') return;
+  document.removeEventListener('focusin', onDocumentFocusIn, true);
+});
+
+watch(
+  () => props.open,
+  (open) => {
+    if (typeof window === 'undefined') return;
+
+    if (open) {
+      const activeElement = document.activeElement;
+      if (activeElement instanceof HTMLElement && activeElement !== document.body) {
+        lastFocusedElement.value = activeElement;
+      }
+    }
+  },
+);
+
+function restoreLastFocus() {
+  if (props.open) return;
+  window.setTimeout(() => {
+    if (props.open) return;
+    lastFocusedElement.value?.focus?.();
+  }, 0);
+}
+
+async function maybeClose() {
+  if (!props.showClose) return;
+
+  if (props.beforeClose) {
+    const ok = await props.beforeClose();
+    if (!ok) return;
+  }
+
+  emit('update:open', false);
+}
+</script>

package/src/ngb/components/NgbHeaderActionCluster.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="inline-flex max-w-full items-center gap-1">
+    <div v-if="primaryActions.length > 0" class="flex min-w-0 items-center gap-1">
+      <button
+        v-for="item in primaryActions"
+        :key="item.key"
+        type="button"
+        class="flex h-8 w-8 items-center justify-center rounded-[calc(var(--ngb-radius)-1px)] text-ngb-muted transition-colors hover:bg-ngb-bg hover:text-ngb-text ngb-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-ngb-muted"
+        :title="item.title"
+        :aria-label="item.title"
+        :disabled="item.disabled"
+        @click="emit('action', item.key)"
+      >
+        <NgbIcon :name="item.icon" :size="17" />
+      </button>
+    </div>
+
+    <Menu v-if="hasMoreActions" as="div" class="relative shrink-0">
+      <MenuButton
+        class="flex h-8 w-8 items-center justify-center rounded-[calc(var(--ngb-radius)-1px)] text-ngb-muted transition-colors hover:bg-ngb-bg hover:text-ngb-text ngb-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-ngb-muted"
+        title="More actions"
+        aria-label="More actions"
+      >
+        <NgbIcon name="more-vertical" :size="17" />
+      </MenuButton>
+
+      <MenuItems class="absolute right-0 z-20 mt-2 w-64 rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-1.5 shadow-card focus:outline-none">
+        <div v-for="(group, groupIndex) in visibleMoreGroups" :key="group.key">
+          <div v-if="group.label" class="px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-ngb-muted">
+            {{ group.label }}
+          </div>
+
+          <MenuItem
+            v-for="item in group.items"
+            :key="item.key"
+            as="template"
+            :disabled="item.disabled"
+            v-slot="{ active, disabled, close }"
+          >
+            <button
+              type="button"
+              class="flex w-full items-center gap-3 rounded-[var(--ngb-radius)] px-2.5 py-2 text-left text-sm transition-colors"
+              :class="[
+                disabled ? 'cursor-not-allowed opacity-40' : '',
+                active && !disabled ? 'bg-ngb-bg text-ngb-text' : 'text-ngb-text',
+              ]"
+              :disabled="disabled"
+              @click="close(); emit('action', item.key)"
+            >
+              <span class="flex h-4 w-4 items-center justify-center text-ngb-muted">
+                <NgbIcon :name="item.icon" :size="16" />
+              </span>
+              <span class="truncate">{{ item.title }}</span>
+            </button>
+          </MenuItem>
+
+          <div v-if="groupIndex < visibleMoreGroups.length - 1" class="my-1 h-px bg-ngb-border" />
+        </div>
+      </MenuItems>
+    </Menu>
+
+    <div class="mx-1 h-6 w-px shrink-0 bg-ngb-border" />
+
+    <button
+      type="button"
+      class="flex h-8 w-8 shrink-0 items-center justify-center rounded-[calc(var(--ngb-radius)-1px)] text-ngb-muted transition-colors hover:bg-ngb-bg hover:text-ngb-text ngb-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-ngb-muted"
+      title="Close"
+      aria-label="Close"
+      :disabled="closeDisabled"
+      @click="emit('close')"
+    >
+      <NgbIcon name="x" :size="17" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+
+import NgbIcon from '../primitives/NgbIcon.vue'
+
+type HeaderActionIconName =
+  | 'panel-right'
+  | 'open-in-new'
+  | 'copy'
+  | 'printer'
+  | 'trash'
+  | 'trash-restore'
+  | 'save'
+  | 'check'
+  | 'undo'
+  | 'file-apply'
+  | 'share'
+  | 'history'
+  | 'effects-flow'
+  | 'document-flow'
+
+type HeaderActionItem = {
+  key: string
+  title: string
+  icon: HeaderActionIconName
+  disabled?: boolean
+}
+
+type HeaderActionGroup = {
+  key: string
+  label?: string
+  items: HeaderActionItem[]
+}
+
+const props = withDefaults(
+  defineProps<{
+    primaryActions?: HeaderActionItem[]
+    moreGroups?: HeaderActionGroup[]
+    closeDisabled?: boolean
+  }>(),
+  {
+    primaryActions: () => [],
+    moreGroups: () => [],
+    closeDisabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'action', key: string): void
+  (e: 'close'): void
+}>()
+
+const visibleMoreGroups = computed(() =>
+  props.moreGroups
+    .map((group) => ({
+      ...group,
+      items: (group.items ?? []).filter(Boolean),
+    }))
+    .filter((group) => group.items.length > 0),
+)
+
+const hasMoreActions = computed(() => visibleMoreGroups.value.length > 0)
+</script>

package/src/ngb/components/NgbModalShell.vue

@@ -0,0 +1,99 @@
+<template>
+  <TransitionRoot appear :show="open" as="template" @after-leave="restoreLastFocus">
+    <Dialog as="div" class="relative z-50" @close="emit('close')">
+      <TransitionChild
+        as="template"
+        enter="duration-150 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-120 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-[rgba(0,0,0,.28)]" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div class="min-h-full flex items-center justify-center p-4">
+          <TransitionChild
+            as="template"
+            enter="duration-150 ease-out"
+            enter-from="opacity-0 translate-y-2 scale-[0.98]"
+            enter-to="opacity-100 translate-y-0 scale-100"
+            leave="duration-120 ease-in"
+            leave-from="opacity-100 translate-y-0 scale-100"
+            leave-to="opacity-0 translate-y-2 scale-[0.98]"
+          >
+            <DialogPanel
+              class="w-full rounded-[var(--ngb-radius)] bg-ngb-card border border-ngb-border shadow-card overflow-hidden"
+              :class="maxWidthClass"
+            >
+              <slot />
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+
+const props = withDefaults(defineProps<{
+  open: boolean
+  maxWidthClass?: string
+}>(), {
+  maxWidthClass: 'max-w-[560px]',
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const lastFocusedElement = ref<HTMLElement | null>(null)
+
+function onDocumentFocusIn(event: FocusEvent) {
+  if (props.open) return
+  const target = event.target instanceof HTMLElement ? event.target : null
+  if (!target || target === document.body) return
+  lastFocusedElement.value = target
+}
+
+onMounted(() => {
+  if (typeof document === 'undefined') return
+  document.addEventListener('focusin', onDocumentFocusIn, true)
+})
+
+onBeforeUnmount(() => {
+  if (typeof document === 'undefined') return
+  document.removeEventListener('focusin', onDocumentFocusIn, true)
+})
+
+watch(
+  () => props.open,
+  (open) => {
+    if (typeof window === 'undefined') return
+
+    if (open) {
+      const activeElement = document.activeElement
+      if (activeElement instanceof HTMLElement && activeElement !== document.body) {
+        lastFocusedElement.value = activeElement
+      }
+    }
+  },
+)
+
+function restoreLastFocus(attempt = 0) {
+  if (props.open) return
+  const restoreTarget = lastFocusedElement.value
+  window.setTimeout(() => {
+    if (props.open) return
+    restoreTarget?.focus?.()
+    if (document.activeElement === restoreTarget) return
+    if (attempt >= 4) return
+    restoreLastFocus(attempt + 1)
+  }, attempt === 0 ? 0 : 16)
+}
+</script>

package/src/ngb/components/NgbToolbar.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="ngb-card flex flex-col gap-3 rounded-[var(--ngb-radius)] px-4 py-3 shadow-none sm:flex-row sm:items-center">
+    <div class="flex w-full min-w-0 flex-wrap items-center gap-2 sm:flex-1">
+      <slot name="left" />
+    </div>
+    <div class="flex w-full flex-wrap items-center gap-2 sm:w-auto sm:justify-end">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Actions row for docs/registers/reports.
+</script>