@ngbplatform/ui 1.3.0

package/src/ngb/components/forms/NgbFormLayout.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="space-y-4">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+// Wrapper for form sections.
+</script>
+
+<style scoped>
+/* no-op */
+</style>

package/src/ngb/components/forms/NgbFormRow.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-3" :class="dense ? 'sm:grid-cols-[180px_minmax(0,1fr)]' : 'sm:grid-cols-[220px_minmax(0,1fr)]'">
+    <div class="pt-0 sm:pt-2">
+      <div class="text-sm font-medium text-ngb-text">{{ label }}</div>
+      <div v-if="hint" class="text-xs text-ngb-muted mt-1">{{ hint }}</div>
+    </div>
+    <div class="min-w-0">
+      <slot />
+      <div v-if="error" class="text-xs text-ngb-danger mt-1">{{ error }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  hint?: string;
+  error?: string;
+  dense?: boolean;
+}>();
+</script>

package/src/ngb/components/forms/NgbFormSection.vue

@@ -0,0 +1,16 @@
+<template>
+  <section class="ngb-card p-4">
+    <div v-if="title" class="text-sm font-semibold text-ngb-text">{{ title }}</div>
+    <div v-if="description" class="text-xs text-ngb-muted mt-1">{{ description }}</div>
+    <div class="mt-4 space-y-3">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string;
+  description?: string;
+}>();
+</script>

package/src/ngb/components/forms/NgbValidationSummary.vue

@@ -0,0 +1,18 @@
+<template>
+  <div
+    v-if="messages?.length"
+    role="alert"
+    aria-live="assertive"
+    aria-atomic="true"
+    class="rounded-[var(--ngb-radius)] border border-ngb-border bg-[#FFFBEB] dark:bg-[rgba(251,191,36,.10)] dark:border-[rgba(251,191,36,.25)] px-4 py-3"
+  >
+    <div class="text-sm font-semibold text-ngb-text">Please fix the following</div>
+    <ul class="mt-2 space-y-1 text-sm text-ngb-muted list-disc pl-5">
+      <li v-for="(m, idx) in messages" :key="idx">{{ m }}</li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ messages: string[] }>();
+</script>

package/src/ngb/components/navigation/NgbNavigationTree.vue

@@ -0,0 +1,68 @@
+<template>
+  <aside class="w-full h-full bg-white border-r border-ngb-border">
+    <div class="p-3 border-b border-ngb-border">
+      <div class="text-xs font-semibold text-ngb-muted mb-2">Navigation</div>
+      <input
+        v-model="q"
+        class="h-9 w-full rounded-[var(--ngb-radius)] border border-ngb-border bg-white px-3 text-sm text-ngb-text placeholder:text-ngb-muted/70 ngb-focus"
+        placeholder="Search…"
+        aria-label="Search navigation"
+      />
+    </div>
+
+    <div class="p-2 overflow-auto h-[calc(100%-61px)]" role="tree" aria-label="Navigation">
+      <NgbTreeNode
+        v-for="n in visibleNodes"
+        :key="n.id"
+        :node="n"
+        :level="0"
+        :expanded="expanded"
+        :selectedId="modelValue ?? null"
+        @toggle="toggle"
+        @select="select"
+      />
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import NgbTreeNode, { type NavNode } from './NgbTreeNode.vue';
+
+const props = defineProps<{
+  nodes: NavNode[];
+  modelValue?: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string | null): void;
+  (e: 'select', node: NavNode): void;
+}>();
+
+const q = ref('');
+const expanded = ref<Set<string>>(new Set(['documents', 'catalogs', 'reports']));
+
+function toggle(id: string) {
+  const s = new Set(expanded.value);
+  if (s.has(id)) s.delete(id);
+  else s.add(id);
+  expanded.value = s;
+}
+
+function select(node: NavNode) {
+  emit('update:modelValue', node.id);
+  emit('select', node);
+}
+
+function matchNode(node: NavNode, query: string): boolean {
+  const hit = node.label.toLowerCase().includes(query);
+  const childHit = (node.children ?? []).some(c => matchNode(c, query));
+  return hit || childHit;
+}
+
+const visibleNodes = computed(() => {
+  const query = q.value.trim().toLowerCase();
+  if (!query) return props.nodes;
+  return props.nodes.filter(n => matchNode(n, query));
+});
+</script>

package/src/ngb/components/navigation/NgbTreeNode.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="select-none">
+    <div
+      role="treeitem"
+      tabindex="0"
+      :aria-level="level + 1"
+      :aria-selected="selectedId === node.id"
+      :aria-expanded="hasChildren ? isExpanded : undefined"
+      class="h-9 rounded-[var(--ngb-radius)] flex items-center gap-2 px-2 text-sm cursor-pointer"
+      :class="selectedId === node.id ? 'bg-[#F1F5F9] border border-[#E2E8F0]' : 'hover:bg-[#F8FAFC]'"
+      :style="{ paddingLeft: `${8 + level * 14}px` }"
+      @click="$emit('select', node)"
+      @keydown="onRowKeyDown"
+    >
+      <button
+        v-if="hasChildren"
+        type="button"
+        class="w-6 h-6 inline-flex items-center justify-center rounded hover:bg-[#F1F5F9] text-ngb-muted"
+        @click.stop="$emit('toggle', node.id)"
+        aria-label="Toggle"
+      >
+        {{ isExpanded ? '▾' : '▸' }}
+      </button>
+      <span v-else class="w-6 h-6 inline-flex items-center justify-center text-ngb-muted">•</span>
+
+      <span class="truncate flex-1 text-ngb-text">{{ node.label }}</span>
+
+      <span
+        v-if="node.badge"
+        class="text-[11px] font-semibold px-2 py-0.5 rounded-full border border-ngb-border text-ngb-muted"
+      >
+        {{ node.badge }}
+      </span>
+    </div>
+
+    <div v-if="hasChildren && isExpanded" class="mt-1" role="group">
+      <NgbTreeNode
+        v-for="c in node.children"
+        :key="c.id"
+        :node="c"
+        :level="level + 1"
+        :expanded="expanded"
+        :selectedId="selectedId"
+        @toggle="$emit('toggle', $event)"
+        @select="$emit('select', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export type NavNode = {
+  id: string;
+  label: string;
+  children?: NavNode[];
+  badge?: string;
+};
+
+const props = defineProps<{
+  node: NavNode;
+  level: number;
+  expanded: Set<string>;
+  selectedId: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'toggle', id: string): void;
+  (e: 'select', node: NavNode): void;
+}>();
+
+const hasChildren = computed(() => !!(props.node.children && props.node.children.length));
+const isExpanded = computed(() => props.expanded.has(props.node.id));
+
+function onRowKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+    event.preventDefault();
+    emit('select', props.node);
+    return;
+  }
+
+  if (event.key === 'ArrowRight' && hasChildren.value && !isExpanded.value) {
+    event.preventDefault();
+    emit('toggle', props.node.id);
+    return;
+  }
+
+  if (event.key === 'ArrowLeft' && hasChildren.value && isExpanded.value) {
+    event.preventDefault();
+    emit('toggle', props.node.id);
+  }
+}
+</script>

package/src/ngb/components/register/NgbColumnChooser.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="relative" ref="root">
+    <NgbButton variant="ghost" @click="open = !open">Columns ▾</NgbButton>
+    <div v-if="open" class="absolute right-0 mt-2 w-72 rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-card p-2 z-10">
+      <div class="px-2 py-2 text-sm font-semibold text-ngb-text">Columns</div>
+      <div class="max-h-[320px] overflow-auto px-2 pb-2">
+        <label v-for="c in columns" :key="c.id" class="flex items-center gap-2 py-1.5 text-sm">
+          <input type="checkbox" :checked="visibleSet.has(c.id)" @change="toggle(c.id)" />
+          <span class="flex-1">{{ c.label }}</span>
+        </label>
+      </div>
+      <div class="px-2 pt-2 border-t border-ngb-border flex items-center justify-between gap-2">
+        <button class="text-sm text-ngb-muted hover:text-ngb-text" @click="reset">Reset</button>
+        <div class="flex items-center gap-2">
+          <NgbButton variant="secondary" @click="open = false">Close</NgbButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import NgbButton from '../../primitives/NgbButton.vue';
+import { loadJson, saveJson } from '../../utils/storage';
+
+export type ColumnDef = { id: string; label: string; };
+type PersistedColumnChooserState = string[] | {
+  visible?: string[];
+  order?: string[];
+  widths?: Record<string, number>;
+};
+
+const props = defineProps<{
+  columns: ColumnDef[];
+  modelValue: string[];
+  storageKey?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string[]): void;
+}>();
+
+const open = ref(false);
+const root = ref<HTMLElement | null>(null);
+
+const visibleSet = computed(() => new Set(props.modelValue));
+
+function readStoredVisibleColumns(storageKey: string): string[] | null {
+  const stored = loadJson<PersistedColumnChooserState | null>(storageKey, null);
+  if (!stored) return null;
+  if (Array.isArray(stored)) return [...stored];
+  return Array.isArray(stored.visible) ? [...stored.visible] : null;
+}
+
+function saveStoredVisibleColumns(storageKey: string, visible: string[]) {
+  const stored = loadJson<PersistedColumnChooserState | null>(storageKey, null);
+  if (stored && !Array.isArray(stored)) {
+    saveJson(storageKey, {
+      ...stored,
+      visible,
+    });
+    return;
+  }
+
+  saveJson(storageKey, {
+    visible,
+  });
+}
+
+function toggle(id: string) {
+  const next = new Set(props.modelValue);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  const list = props.columns.map(c => c.id).filter(cid => next.has(cid));
+  emit('update:modelValue', list);
+  if (props.storageKey) saveStoredVisibleColumns(props.storageKey, list);
+}
+
+function reset() {
+  const list = props.columns.map(c => c.id);
+  emit('update:modelValue', list);
+  if (props.storageKey) saveStoredVisibleColumns(props.storageKey, list);
+}
+
+function onDocClick(e: MouseEvent) {
+  if (!open.value) return;
+  const t = e.target as Node;
+  if (!root.value) return;
+  if (!root.value.contains(t)) open.value = false;
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', onDocClick);
+  if (props.storageKey) {
+    const stored = readStoredVisibleColumns(props.storageKey);
+    if (stored) emit('update:modelValue', stored);
+  }
+});
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick));
+</script>