@ngbplatform/ui 1.3.0

package/src/ngb/primitives/NgbPickerNavButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-ngb-muted/10"
+    @click="emit('click')"
+  >
+    <svg
+      class="h-5 w-5 text-ngb-muted"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.7"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path v-if="direction === 'prev'" d="M15 18l-6-6 6-6" />
+      <path v-else d="M9 6l6 6-6 6" />
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  direction: 'prev' | 'next'
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+</script>

package/src/ngb/primitives/NgbPickerPopover.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+
+const props = withDefaults(defineProps<{
+  displayValue: string
+  placeholder: string
+  disabled?: boolean
+  readonly?: boolean
+  grouped?: boolean
+  panelClass?: string
+}>(), {
+  panelClass: 'w-[320px]',
+})
+
+const triggerClass = computed(() => {
+  const base = 'relative flex w-full items-center justify-start text-left ngb-focus'
+  const disabled = props.disabled || props.readonly ? ' opacity-60 cursor-not-allowed' : ''
+  if (props.grouped) {
+    return `${base} h-full min-h-full bg-transparent px-3 py-0 pr-8 text-xs text-ngb-text placeholder:text-ngb-muted/70${disabled}`
+  }
+  return `${base} h-9 rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card px-3 py-0 pr-10 text-sm text-ngb-text placeholder:text-ngb-muted/70${disabled}`
+})
+
+const popoverClass = computed(() => (props.grouped ? 'relative block h-full w-full' : 'relative block w-full'))
+const panelClasses = computed(() => [
+  'absolute right-0 z-50 mt-2 max-w-[calc(100vw-2rem)] overflow-hidden rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-lg',
+  props.panelClass,
+])
+</script>
+
+<template>
+  <Popover v-slot="{ close }" :class="popoverClass">
+    <PopoverButton
+      as="button"
+      type="button"
+      :class="triggerClass"
+      :disabled="disabled || readonly"
+    >
+      <span
+        v-if="displayValue"
+        class="inline-flex h-full min-w-0 flex-1 items-center truncate leading-none"
+      >
+        {{ displayValue }}
+      </span>
+      <span
+        v-else
+        class="inline-flex h-full min-w-0 flex-1 items-center truncate leading-none text-ngb-muted/70"
+      >
+        {{ placeholder }}
+      </span>
+
+      <span class="pointer-events-none absolute right-2 top-1/2 inline-flex -translate-y-1/2 items-center">
+        <svg class="h-4 w-4 text-ngb-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" />
+          <path d="M16 2v4" />
+          <path d="M3 9h18" />
+          <path d="M5 6h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z" />
+        </svg>
+      </span>
+    </PopoverButton>
+
+    <PopoverPanel :class="panelClasses">
+      <div class="p-3">
+        <div v-if="$slots.header" class="flex items-center justify-between gap-2">
+          <slot name="header" :close="close" />
+        </div>
+
+        <div :class="$slots.header ? 'mt-3' : ''">
+          <slot :close="close" />
+        </div>
+
+        <div v-if="$slots.footer" class="mt-3 flex items-center justify-between text-sm">
+          <slot name="footer" :close="close" />
+        </div>
+      </div>
+    </PopoverPanel>
+  </Popover>
+</template>

package/src/ngb/primitives/NgbRadioGroup.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="w-full">
+    <div v-if="label" class="block text-xs font-semibold text-ngb-muted mb-1">{{ label }}</div>
+
+    <div class="flex flex-col gap-2">
+      <label
+        v-for="o in options"
+        :key="o.value"
+        class="inline-flex items-center gap-2 select-none"
+        :class="disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'"
+      >
+        <input
+          class="sr-only"
+          type="radio"
+          :name="name"
+          :value="o.value"
+          :checked="modelValue === o.value"
+          :disabled="disabled"
+          @change="$emit('update:modelValue', o.value)"
+        />
+
+        <span
+          class="h-4 w-4 rounded-full border border-ngb-border bg-white flex items-center justify-center"
+          :class="modelValue === o.value ? 'border-[rgba(11,60,93,.55)] bg-[rgba(11,60,93,.06)]' : ''"
+          aria-hidden="true"
+        >
+          <span v-if="modelValue === o.value" class="h-2 w-2 rounded-full bg-ngb-blue" />
+        </span>
+
+        <span class="text-sm text-ngb-text">{{ o.label }}</span>
+      </label>
+    </div>
+
+    <div v-if="hint" class="mt-1 text-xs text-ngb-muted">{{ hint }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export type RadioOption = { value: string; label: string };
+
+defineProps<{
+  modelValue: string;
+  options: RadioOption[];
+  name?: string;
+  label?: string;
+  hint?: string;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'update:modelValue', v: string): void;
+}>();
+</script>

package/src/ngb/primitives/NgbSelect.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="w-full">
+    <label v-if="label" class="block text-xs font-semibold text-ngb-muted mb-1">{{ label }}</label>
+
+    <Listbox :modelValue="modelValue" @update:modelValue="(value) => emit('update:modelValue', value)" :disabled="disabled">
+      <div class="relative">
+        <ListboxButton
+          ref="btnRef"
+          :class="[buttonClass, disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer']"
+          @mousedown.capture="updatePosition"
+          @keydown.enter.capture="updatePosition"
+          @keydown.space.capture="updatePosition"
+          @keydown.arrow-down.capture="updatePosition"
+        >
+          <span class="truncate">{{ displayValue }}</span>
+          <span class="text-ngb-muted">▾</span>
+        </ListboxButton>
+
+        <!--
+          IMPORTANT: this select is used inside line grids (tables) where ancestors often have overflow hidden.
+          HeadlessUI renders options as an absolutely positioned element under the button, which gets clipped.
+          We teleport the dropdown to <body> and position it using the button's viewport rect.
+        -->
+        <Teleport to="body">
+          <ListboxOptions
+            ref="optionsRef"
+            :style="floatingStyle"
+            class="fixed z-[1000] max-h-64 overflow-auto rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-card p-1 focus:outline-none"
+          >
+            <ListboxOption
+              v-for="o in options"
+              :key="o.value"
+              :value="o.value"
+              v-slot="{ active, selected }"
+            >
+              <div
+                class="px-3 py-2 rounded-[var(--ngb-radius)] text-sm flex items-center justify-between"
+                :class="active ? 'bg-[var(--ngb-row-hover)]' : ''"
+              >
+                <span class="truncate" :class="selected ? 'font-semibold' : ''">{{ o.label }}</span>
+                <span v-if="selected" class="text-ngb-blue">✓</span>
+              </div>
+            </ListboxOption>
+          </ListboxOptions>
+        </Teleport>
+      </div>
+    </Listbox>
+
+    <div v-if="hint" class="mt-1 text-xs text-ngb-muted">{{ hint }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type ComponentPublicInstance } from 'vue'
+import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
+import { useFloatingDropdownPosition } from './useFloatingDropdownPosition'
+
+export type SelectOption = {
+  value: unknown
+  label: string
+}
+
+type SelectVariant = 'default' | 'grid' | 'compact'
+type FloatingTarget = HTMLElement | ComponentPublicInstance | null
+
+const props = withDefaults(defineProps<{
+  modelValue: unknown
+  options: SelectOption[]
+  label?: string
+  hint?: string
+  disabled?: boolean
+  // Visual variant.
+  // - default: standard select (bordered)
+  // - grid: borderless cell-style select (used inside line grids)
+  // - compact: compact select (used in page headers/toolbars)
+  variant?: SelectVariant
+}>(), {
+  label: '',
+  hint: '',
+  disabled: false,
+  variant: 'default',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: unknown): void
+}>()
+
+const displayValue = computed(() => {
+  const found = props.options.find((option) => option.value === props.modelValue)
+  return found ? found.label : 'Select…'
+})
+
+const buttonClass = computed(() => {
+  if (props.variant === 'grid') {
+    return 'h-8 w-full rounded-none border border-transparent bg-transparent px-2 text-sm text-ngb-text flex items-center justify-between ngb-focus'
+  }
+
+  if (props.variant === 'compact') {
+    return 'h-[26px] w-full rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card px-2.5 text-xs text-ngb-text flex items-center justify-between shadow-card ngb-focus'
+  }
+  return 'h-9 w-full rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card px-3 text-sm text-ngb-text flex items-center justify-between ngb-focus'
+})
+
+const btnRef = ref<FloatingTarget>(null)
+const optionsRef = ref<FloatingTarget>(null)
+
+const { floatingStyle, updatePosition } = useFloatingDropdownPosition(btnRef, [optionsRef])
+</script>

package/src/ngb/primitives/NgbStatusIcon.vue

@@ -0,0 +1,63 @@
+<template>
+  <span
+    class="inline-flex items-center justify-center leading-none"
+    :title="title ?? defaultTitle"
+    :class="colorClass"
+    aria-hidden="true"
+  >
+    <svg
+      viewBox="0 0 24 24"
+      class="w-6 h-6 block"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <!-- Consistent, compact ERP-style status glyphs. -->
+      <circle cx="12" cy="12" r="7" />
+
+      <!-- Posted: check in the ring -->
+      <template v-if="status === 'posted'">
+        <path d="M8.7 12.1l2.0 2.1 4.6-4.8" />
+      </template>
+
+      <!-- Marked: X in the ring -->
+      <template v-else-if="status === 'marked'">
+        <path d="M9 9l6 6" />
+        <path d="M15 9l-6 6" />
+      </template>
+
+      <!-- Active/Saved: ring only -->
+    </svg>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  status: 'active' | 'saved' | 'posted' | 'marked';
+  title?: string;
+}>();
+
+const defaultTitle = computed(() => {
+  switch (props.status) {
+    case 'active':
+      return 'Active';
+    case 'saved':
+      return 'Saved';
+    case 'posted':
+      return 'Posted';
+    case 'marked':
+      return 'Marked for deletion';
+  }
+});
+
+const colorClass = computed(() => {
+  if (props.status === 'posted') return 'text-ngb-success';
+  if (props.status === 'marked') return 'text-ngb-danger';
+  // Keep the same subdued “active” color as catalogs.
+  return 'text-ngb-muted opacity-30';
+});
+</script>

package/src/ngb/primitives/NgbSwitch.vue

@@ -0,0 +1,42 @@
+<template>
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="modelValue ? 'true' : 'false'"
+    :disabled="disabled"
+    class="inline-flex items-center gap-2 select-none"
+    :class="disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'"
+    @click="toggle"
+  >
+    <span
+      class="relative inline-flex h-[1.125rem] w-8 rounded-full border bg-white transition-colors duration-150 dark:bg-ngb-card"
+      :class="modelValue
+        ? 'border-[rgba(11,60,93,.40)] dark:border-[rgba(147,197,253,.40)]'
+        : 'border-ngb-border dark:border-ngb-border'"
+      aria-hidden="true"
+    >
+      <span
+        class="absolute left-0.5 top-1/2 h-[0.875rem] w-[0.875rem] -translate-y-1/2 rounded-full bg-ngb-blue shadow-[0_0_0_1px_rgba(11,60,93,.04)] transition-transform duration-150 dark:bg-white dark:shadow-[0_0_0_1px_rgba(255,255,255,.10)]"
+        :class="modelValue ? 'translate-x-[0.75rem]' : 'translate-x-0'"
+      />
+    </span>
+    <span v-if="label" class="text-sm text-ngb-text">{{ label }}</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean;
+  label?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void;
+}>();
+
+function toggle() {
+  if (props.disabled) return;
+  emit('update:modelValue', !props.modelValue);
+}
+</script>

package/src/ngb/primitives/NgbTabs.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="fill ? 'w-full h-full flex flex-col min-h-0' : 'w-full'">
+    <div
+      ref="tablistRef"
+      role="tablist"
+      aria-orientation="horizontal"
+      :class="fullWidthBar ? 'flex w-full rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-1' : 'inline-flex rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-1'"
+    >
+      <button
+        v-for="(t, index) in tabs"
+        :key="keyOf(t)"
+        type="button"
+        role="tab"
+        :id="tabId(keyOf(t))"
+        :data-tab-index="index"
+        :aria-selected="keyOf(t) === modelValue"
+        :aria-controls="panelId"
+        :tabindex="keyOf(t) === modelValue ? 0 : -1"
+        class="h-8 px-3 rounded-[var(--ngb-radius)] text-sm font-medium transition-colors ngb-focus"
+        :class="keyOf(t) === modelValue
+          ? 'bg-ngb-bg text-ngb-text shadow-sm'
+          : 'bg-transparent text-ngb-muted hover:bg-ngb-bg hover:text-ngb-text'
+          "
+        @click="emit('update:modelValue', keyOf(t))"
+        @keydown="onTabKeyDown(index, $event)"
+      >
+        {{ t.label }}
+      </button>
+    </div>
+
+    <div
+      :id="panelId"
+      role="tabpanel"
+      :aria-labelledby="activeTabId"
+      :class="fill ? 'mt-3 flex-1 min-h-0' : 'mt-3'"
+    >
+      <slot :active="modelValue" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+
+export type TabItem = { key?: string; id?: string; label: string };
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    tabs: TabItem[];
+    fill?: boolean;
+    fullWidthBar?: boolean;
+  }>(),
+  {
+    fill: false,
+    fullWidthBar: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void;
+}>()
+
+const tablistRef = ref<HTMLElement | null>(null)
+const activeTabId = computed(() => tabId(props.modelValue))
+const panelId = computed(() => `${tabId(props.modelValue)}-panel`)
+
+function keyOf(t: TabItem) {
+  return t.key ?? t.id ?? '';
+}
+
+function tabId(key: string) {
+  const normalized = String(key ?? '').trim().replace(/[^a-z0-9_-]+/gi, '-')
+  return `ngb-tab-${normalized || 'item'}`
+}
+
+function focusTab(index: number) {
+  tablistRef.value
+    ?.querySelector<HTMLElement>(`[data-tab-index="${index}"]`)
+    ?.focus()
+}
+
+function emitActiveIndex(index: number) {
+  const tab = props.tabs[index]
+  if (!tab) return
+  emit('update:modelValue', keyOf(tab))
+  void nextTick(() => focusTab(index))
+}
+
+function onTabKeyDown(index: number, event: KeyboardEvent) {
+  if (!props.tabs.length) return
+
+  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+    event.preventDefault()
+    emitActiveIndex((index + 1) % props.tabs.length)
+    return
+  }
+
+  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+    event.preventDefault()
+    emitActiveIndex((index - 1 + props.tabs.length) % props.tabs.length)
+    return
+  }
+
+  if (event.key === 'Home') {
+    event.preventDefault()
+    emitActiveIndex(0)
+    return
+  }
+
+  if (event.key === 'End') {
+    event.preventDefault()
+    emitActiveIndex(props.tabs.length - 1)
+  }
+}
+</script>

package/src/ngb/primitives/NgbToastHost.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    role="region"
+    aria-label="Notifications"
+    aria-live="polite"
+    aria-atomic="false"
+    aria-relevant="additions text"
+    class="fixed z-[60] top-4 right-4 w-[360px] max-w-[calc(100vw-32px)] flex flex-col gap-2"
+  >
+    <div
+      v-for="t in api.toasts"
+      :key="t.id"
+      class="ngb-card p-3"
+    >
+      <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+          <div class="text-sm font-semibold" :class="toneClass(t.tone)">
+            {{ t.title }}
+          </div>
+          <div v-if="t.message" class="text-sm text-ngb-muted mt-1">{{ t.message }}</div>
+        </div>
+
+        <button
+          type="button"
+          class="h-7 w-7 rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card text-ngb-muted hover:text-ngb-text hover:bg-ngb-bg transition-colors ngb-focus"
+          @click="api.remove(t.id)"
+          aria-label="Close"
+        >
+          ×
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToasts, type ToastTone } from './toast';
+
+const api = useToasts();
+
+function toneClass(tone: ToastTone | undefined) {
+  return {
+    neutral: 'text-ngb-text',
+    success: 'text-ngb-success',
+    warn: 'text-ngb-warn',
+    danger: 'text-ngb-danger',
+  }[tone ?? 'neutral'];
+}
+</script>

package/src/ngb/primitives/NgbTooltip.vue

@@ -0,0 +1,27 @@
+<template>
+  <span
+    class="relative inline-flex"
+    @mouseenter="open = true"
+    @mouseleave="open = false"
+    @focusin="open = true"
+    @focusout="open = false"
+  >
+    <slot />
+
+    <span
+      v-if="open"
+      class="absolute z-50 -top-2 left-1/2 -translate-x-1/2 -translate-y-full px-2 py-1 rounded-[var(--ngb-radius)] border border-ngb-border bg-white shadow-card text-xs text-ngb-text w-max max-w-[240px]"
+      role="tooltip"
+    >
+      {{ text }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps<{ text: string }>();
+
+const open = ref(false);
+</script>

package/src/ngb/primitives/iconNames.ts

@@ -0,0 +1,83 @@
+export const NGB_ICON_NAMES = [
+  'arrow-left',
+  'arrow-right',
+  'plus',
+  'minus',
+  'trash',
+  'trash-restore',
+  'check',
+  'undo',
+  'panel-left',
+  'panel-right',
+  'grip-vertical',
+  'bell',
+  'help-circle',
+  'settings',
+  'cogs',
+  'sun',
+  'moon',
+  'search',
+  'filter',
+  'composer',
+  'play',
+  'refresh',
+  'download',
+  'open-in-new',
+  'load-variant',
+  'x',
+  'save',
+  'edit',
+  'share',
+  'copy',
+  'printer',
+  'more-vertical',
+  'log-out',
+  'history',
+  'circle-x',
+  'eye',
+  'eye-off',
+  'home',
+  'grid',
+  'list',
+  'file-text',
+  'bar-chart',
+  'calculator',
+  'book-open',
+  'receipt',
+  'user',
+  'users',
+  'building-2',
+  'coins',
+  'wallet',
+  'wrench',
+  'clipboard-list',
+  'check-square',
+  'tag',
+  'landmark',
+  'calendar-check',
+  'scale',
+  'git-merge',
+  'shield',
+  'shield-check',
+  'heart-pulse',
+  'inspect-check',
+  'selected-check',
+  'close-month',
+  'chevrons-left',
+  'chevrons-right',
+  'effects-flow',
+  'file-apply',
+  'document-flow',
+] as const
+
+export type NgbIconName = typeof NGB_ICON_NAMES[number]
+
+const iconNameSet = new Set<string>(NGB_ICON_NAMES)
+
+export function isNgbIconName(value: string | null | undefined): value is NgbIconName {
+  return typeof value === 'string' && iconNameSet.has(value)
+}
+
+export function coerceNgbIconName(value: string | null | undefined, fallback: NgbIconName): NgbIconName {
+  return isNgbIconName(value) ? value : fallback
+}