@ngbplatform/ui 1.3.0

package/src/ngb/metadata/useMetadataRegisterPageData.ts

@@ -0,0 +1,246 @@
+import { computed, ref, watch, type ComputedRef } from 'vue';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+
+import { prefetchLookupsForPage } from '../lookup/prefetch';
+import { normalizeSingleQueryValue } from '../router/queryParams';
+import { isGuidString } from '../utils/guid';
+import { stableStringify } from '../utils/stableValue';
+import { buildFilterOptionLabelsByKey, labelForResolvedLookup } from './filtering';
+import { isReferenceValue } from './entityModel';
+import { buildMetadataRegisterColumns, buildMetadataRegisterRows } from './register';
+import type {
+  ColumnMetadata,
+  JsonValue,
+  ListFilterField,
+  LookupHint,
+  LookupSource,
+  LookupStoreApi,
+  RecordFields,
+} from './types';
+
+export type MetadataRegisterPageItem = {
+  id: string;
+  payload?: {
+    fields?: RecordFields | null;
+  } | null;
+  isDeleted?: boolean;
+  isMarkedForDeletion?: boolean;
+  status?: unknown;
+};
+
+export type MetadataRegisterPageResponse<TItem extends MetadataRegisterPageItem = MetadataRegisterPageItem> = {
+  items: readonly TItem[];
+  total?: number | null;
+};
+
+export type MetadataRegisterPageMetadata<TField extends ListFilterField = ListFilterField> = {
+  displayName: string;
+  list?: {
+    columns: readonly ColumnMetadata[];
+    filters?: readonly TField[] | null;
+  } | null;
+};
+
+export type MetadataRegisterCellArgs<TItem extends MetadataRegisterPageItem = MetadataRegisterPageItem> = {
+  column: ColumnMetadata;
+  item: TItem;
+  rawValue: JsonValue | undefined;
+  defaultValue: unknown;
+  entityTypeCode: string;
+};
+
+export type UseMetadataPageReloadKeyArgs = {
+  route: RouteLocationNormalizedLoaded;
+  entityTypeCode: ComputedRef<string>;
+  ignoreQueryKey?: (key: string) => boolean;
+};
+
+export type UseMetadataRegisterPageDataArgs<
+  TField extends ListFilterField = ListFilterField,
+  TMeta extends MetadataRegisterPageMetadata<TField> = MetadataRegisterPageMetadata<TField>,
+  TItem extends MetadataRegisterPageItem = MetadataRegisterPageItem,
+  TPage extends MetadataRegisterPageResponse<TItem> = MetadataRegisterPageResponse<TItem>,
+> = {
+  route: RouteLocationNormalizedLoaded;
+  entityTypeCode: ComputedRef<string>;
+  reloadKey: ComputedRef<string>;
+  loadMetadata: (entityTypeCode: string) => Promise<TMeta>;
+  loadPage: (args: {
+    entityTypeCode: string;
+    metadata: TMeta;
+  }) => Promise<TPage>;
+  lookupStore?: LookupStoreApi;
+  resolveLookupHint?: (args: {
+    entityTypeCode: string;
+    fieldKey: string;
+    lookup?: LookupSource | null;
+  }) => LookupHint | null;
+  mapFieldValue?: (args: MetadataRegisterCellArgs<TItem>) => unknown;
+  formatError?: (cause: unknown) => string;
+};
+
+function defaultErrorMessage(cause: unknown): string {
+  return cause instanceof Error ? cause.message : String(cause);
+}
+
+export function useMetadataPageReloadKey(args: UseMetadataPageReloadKeyArgs) {
+  return computed(() =>
+    stableStringify({
+      path: args.route.path,
+      entityTypeCode: args.entityTypeCode.value,
+      query: Object.entries(args.route.query)
+        .filter(([key]) => !args.ignoreQueryKey?.(key))
+        .map(([key, value]) => [key, normalizeSingleQueryValue(value)] as const)
+        .sort(([left], [right]) => left.localeCompare(right)),
+    }),
+  );
+}
+
+export function useMetadataRegisterPageData<
+  TField extends ListFilterField = ListFilterField,
+  TMeta extends MetadataRegisterPageMetadata<TField> = MetadataRegisterPageMetadata<TField>,
+  TItem extends MetadataRegisterPageItem = MetadataRegisterPageItem,
+  TPage extends MetadataRegisterPageResponse<TItem> = MetadataRegisterPageResponse<TItem>,
+>(
+  args: UseMetadataRegisterPageDataArgs<TField, TMeta, TItem, TPage>,
+) {
+  const loading = ref(false);
+  const error = ref<string | null>(null);
+  const metadata = ref<TMeta | null>(null);
+  const page = ref<TPage | null>(null);
+  const loadSeq = ref(0);
+
+  const listFilters = computed<readonly TField[]>(() => metadata.value?.list?.filters ?? []);
+  const hasListFilters = computed(() => listFilters.value.length > 0);
+  const optionLabelsByColumnKey = computed(() => ({
+    ...buildFilterOptionLabelsByKey(metadata.value?.list?.columns ?? []),
+    ...buildFilterOptionLabelsByKey(listFilters.value),
+  }));
+
+  function resolveDefaultFieldValue(column: ColumnMetadata, rawValue: JsonValue | undefined): unknown {
+    if (isReferenceValue(rawValue)) return rawValue;
+    if (!args.lookupStore || !args.resolveLookupHint || !isGuidString(rawValue)) return rawValue;
+
+    const hint = args.resolveLookupHint({
+      entityTypeCode: args.entityTypeCode.value,
+      fieldKey: column.key,
+      lookup: column.lookup,
+    });
+    if (!hint) return rawValue;
+
+    return {
+      id: rawValue,
+      display: labelForResolvedLookup(args.lookupStore, hint, rawValue),
+    };
+  }
+
+  const columns = computed(() =>
+    buildMetadataRegisterColumns({
+      columns: metadata.value?.list?.columns ?? [],
+      optionLabelsByColumnKey: optionLabelsByColumnKey.value,
+    }),
+  );
+
+  const rows = computed(() =>
+    buildMetadataRegisterRows({
+      items: page.value?.items ?? [],
+      columns: metadata.value?.list?.columns ?? [],
+      mapFieldValue: (column, rawValue, item) => {
+        const defaultValue = resolveDefaultFieldValue(column, rawValue);
+        return args.mapFieldValue?.({
+          column,
+          item,
+          rawValue,
+          defaultValue,
+          entityTypeCode: args.entityTypeCode.value,
+        }) ?? defaultValue;
+      },
+    }),
+  );
+
+  async function prefetchReferenceLabels(): Promise<void> {
+    if (!args.lookupStore || !args.resolveLookupHint) return;
+
+    const entityTypeCode = String(args.entityTypeCode.value ?? '').trim();
+    const columns = metadata.value?.list?.columns ?? [];
+    const items = page.value?.items ?? [];
+    if (!entityTypeCode || columns.length === 0 || items.length === 0) return;
+
+    await prefetchLookupsForPage({
+      entityTypeCode,
+      columns,
+      items,
+      lookupStore: args.lookupStore,
+      resolveLookupHint: (nextEntityTypeCode, fieldKey, lookup) =>
+        args.resolveLookupHint?.({
+          entityTypeCode: nextEntityTypeCode,
+          fieldKey,
+          lookup,
+        }) ?? null,
+    });
+  }
+
+  async function load(): Promise<boolean> {
+    const entityTypeCode = String(args.entityTypeCode.value ?? '').trim();
+    const seq = ++loadSeq.value;
+
+    if (!entityTypeCode) {
+      if (seq === loadSeq.value) {
+        loading.value = false;
+        error.value = null;
+        metadata.value = null;
+        page.value = null;
+      }
+      return false;
+    }
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const nextMetadata = await args.loadMetadata(entityTypeCode);
+      if (seq !== loadSeq.value) return false;
+      metadata.value = nextMetadata;
+
+      const nextPage = await args.loadPage({
+        entityTypeCode,
+        metadata: nextMetadata,
+      });
+      if (seq !== loadSeq.value) return false;
+      page.value = nextPage;
+      return true;
+    } catch (cause) {
+      if (seq !== loadSeq.value) return false;
+      error.value = args.formatError?.(cause) ?? defaultErrorMessage(cause);
+      return false;
+    } finally {
+      if (seq === loadSeq.value) loading.value = false;
+    }
+  }
+
+  watch(args.reloadKey, () => {
+    void load();
+  }, { immediate: true });
+
+  watch(
+    () => [args.entityTypeCode.value, metadata.value?.list?.columns, page.value?.items],
+    () => {
+      void prefetchReferenceLabels();
+    },
+    { immediate: true, deep: true },
+  );
+
+  return {
+    loading,
+    error,
+    metadata,
+    page,
+    listFilters,
+    hasListFilters,
+    optionLabelsByColumnKey,
+    columns,
+    rows,
+    load,
+    prefetchReferenceLabels,
+  };
+}

package/src/ngb/metadata/useValidationFocus.ts

@@ -0,0 +1,49 @@
+import type { Ref } from 'vue'
+
+type UseValidationFocusOptions = {
+  attribute: string
+}
+
+function focusableElement(container: HTMLElement | null): HTMLElement | null {
+  if (!container) return null
+  return (
+    container.querySelector<HTMLElement>('input:not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])') ??
+    null
+  )
+}
+
+export function useValidationFocus(
+  rootRef: Ref<HTMLElement | null>,
+  options: UseValidationFocusOptions,
+) {
+  function containerFor(key: string): HTMLElement | null {
+    const root = rootRef.value
+    if (!root) return null
+
+    const selector = `[${options.attribute}]`
+    const nodes = Array.from(root.querySelectorAll<HTMLElement>(selector))
+    return nodes.find((node) => node.getAttribute(options.attribute) === key) ?? null
+  }
+
+  function scrollTo(key: string): boolean {
+    const container = containerFor(key)
+    if (!container) return false
+    container.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    return true
+  }
+
+  function focus(key: string): boolean {
+    const container = containerFor(key)
+    if (!container) return false
+    container.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    const target = focusableElement(container)
+    target?.focus({ preventScroll: true } as FocusOptions)
+    return true
+  }
+
+  return {
+    containerFor,
+    scrollTo,
+    focus,
+  }
+}

package/src/ngb/primitives/NgbBadge.vue

@@ -0,0 +1,31 @@
+<template>
+  <span :class="classes">
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type BadgeTone = 'neutral' | 'dev' | 'success' | 'warn' | 'danger'
+
+const props = withDefaults(defineProps<{
+  tone?: BadgeTone
+}>(), {
+  tone: 'neutral',
+})
+
+const classes = computed(() => {
+  const base = 'inline-flex shrink-0 whitespace-nowrap items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold tracking-[.02em]'
+
+  const tone = {
+    neutral: 'border-ngb-border bg-ngb-neutral-subtle text-ngb-text',
+    dev: 'border-ngb-border bg-ngb-card text-ngb-text',
+    success: 'border-ngb-success-border bg-ngb-success-subtle text-ngb-success',
+    warn: 'border-ngb-warn-border bg-ngb-warn-subtle text-ngb-warn',
+    danger: 'border-ngb-danger-border bg-ngb-danger-subtle text-ngb-danger',
+  }[props.tone] ?? 'border-ngb-border bg-ngb-neutral-subtle text-ngb-text'
+
+  return [base, tone].join(' ')
+})
+</script>

package/src/ngb/primitives/NgbButton.vue

@@ -0,0 +1,53 @@
+<template>
+  <button :type="type" :disabled="disabled || loading" :class="classes">
+    <span v-if="loading" class="ngb-spinner" aria-hidden="true"></span>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type ButtonVariant = 'secondary' | 'primary' | 'ghost' | 'danger'
+type ButtonSize = 'sm' | 'md' | 'lg'
+type NativeButtonType = 'button' | 'submit' | 'reset'
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  type?: NativeButtonType
+}>(), {
+  variant: 'secondary',
+  size: 'md',
+  disabled: false,
+  loading: false,
+  type: 'button',
+})
+
+const classes = computed(() => {
+  const base =
+    'inline-flex items-center justify-center gap-2 rounded-[var(--ngb-radius)] border text-sm font-medium select-none ' +
+    'transition-shadow transition-colors shadow-none ngb-focus';
+
+  const sizes = {
+    sm: 'h-8 px-3',
+    md: 'h-9 px-3.5',
+    lg: 'h-10 px-4',
+  }[props.size] ?? 'h-9 px-3.5'
+
+  const common = (props.disabled || props.loading)
+    ? 'opacity-60 cursor-not-allowed'
+    : 'cursor-pointer';
+
+  const variants = {
+    secondary: 'bg-ngb-card border-ngb-border text-ngb-text hover:bg-ngb-bg hover:border-[rgba(11,60,93,.35)] hover:shadow-[0_2px_10px_rgba(0,0,0,.06)]',
+    primary: 'bg-ngb-primary border-ngb-primary text-white hover:bg-ngb-primary-hover hover:border-ngb-primary-hover hover:shadow-[0_8px_22px_rgba(0,0,0,.10)]',
+    ghost: 'bg-transparent border-transparent text-ngb-text hover:bg-ngb-bg hover:border-ngb-border',
+    danger: 'bg-ngb-card border-ngb-border text-ngb-danger hover:bg-ngb-bg hover:border-[rgba(155,28,28,.35)] hover:shadow-[0_2px_10px_rgba(0,0,0,.06)]',
+  }[props.variant] ?? 'bg-ngb-card border-ngb-border text-ngb-text'
+
+  return [base, sizes, common, variants].join(' ')
+})
+</script>

package/src/ngb/primitives/NgbCheckbox.vue

@@ -0,0 +1,33 @@
+<template>
+  <label class="inline-flex items-center gap-2 select-none" :class="disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'">
+    <input
+      class="sr-only"
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+    />
+
+    <span
+      class="h-4 w-4 border border-ngb-border bg-ngb-card flex items-center justify-center"
+      :class="modelValue ? 'border-[rgba(11,60,93,.55)] bg-[rgba(11,60,93,.06)] dark:border-[rgba(147,197,253,.55)] dark:bg-[rgba(147,197,253,.10)]' : ''"
+      aria-hidden="true"
+    >
+      <span v-if="modelValue" class="text-[color:var(--ngb-logo)] text-[12px] leading-none">✓</span>
+    </span>
+
+    <span v-if="label" class="text-sm text-ngb-text">{{ label }}</span>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean;
+  label?: string;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'update:modelValue', v: boolean): void;
+}>();
+</script>

package/src/ngb/primitives/NgbDatePicker.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import NgbPickerPopover from './NgbPickerPopover.vue'
+import NgbPickerNavButton from './NgbPickerNavButton.vue'
+import { parseDateOnlyValue, toDateOnlyValue } from '../utils/dateValues'
+
+const props = defineProps<{
+  modelValue: string | null | undefined
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  grouped?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string | null): void
+}>()
+
+function toDisplay(v: string | null | undefined): string {
+  if (!v) return ''
+  const dt = parseDateOnlyValue(v)
+  if (!dt) return String(v)
+  const mm = String(dt.getMonth() + 1).padStart(2, '0')
+  const dd = String(dt.getDate()).padStart(2, '0')
+  const yy = String(dt.getFullYear())
+  return `${mm}/${dd}/${yy}`
+}
+
+const selected = computed(() => parseDateOnlyValue(props.modelValue ?? null))
+
+const today = () => {
+  const n = new Date()
+  return new Date(n.getFullYear(), n.getMonth(), n.getDate())
+}
+
+const viewYear = ref<number>(selected.value?.getFullYear() ?? today().getFullYear())
+const viewMonth = ref<number>(selected.value?.getMonth() ?? today().getMonth())
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    const dt = parseDateOnlyValue(v ?? null)
+    if (!dt) return
+    viewYear.value = dt.getFullYear()
+    viewMonth.value = dt.getMonth()
+  }
+)
+
+const monthLabel = computed(() => {
+  const dt = new Date(viewYear.value, viewMonth.value, 1)
+  return dt.toLocaleString(undefined, { month: 'long', year: 'numeric' })
+})
+
+const grid = computed(() => {
+  const first = new Date(viewYear.value, viewMonth.value, 1)
+  const firstDow = first.getDay()
+  const daysInMonth = new Date(viewYear.value, viewMonth.value + 1, 0).getDate()
+
+  const cells: Array<{ dt: Date | null; label: string }> = []
+  for (let i = 0; i < firstDow; i++) cells.push({ dt: null, label: '' })
+  for (let d = 1; d <= daysInMonth; d++) cells.push({ dt: new Date(viewYear.value, viewMonth.value, d), label: String(d) })
+  while (cells.length % 7 !== 0) cells.push({ dt: null, label: '' })
+  return cells
+})
+
+const isSameDay = (a: Date, b: Date) =>
+  a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+
+function prevMonth() {
+  const dt = new Date(viewYear.value, viewMonth.value - 1, 1)
+  viewYear.value = dt.getFullYear()
+  viewMonth.value = dt.getMonth()
+}
+
+function nextMonth() {
+  const dt = new Date(viewYear.value, viewMonth.value + 1, 1)
+  viewYear.value = dt.getFullYear()
+  viewMonth.value = dt.getMonth()
+}
+
+function pick(dt: Date, close: () => void) {
+  emit('update:modelValue', toDateOnlyValue(dt))
+  close()
+}
+
+function clear(close: () => void) {
+  emit('update:modelValue', null)
+  close()
+}
+
+function setToday(close: () => void) {
+  emit('update:modelValue', toDateOnlyValue(today()))
+  close()
+}
+
+const displayValue = computed(() => toDisplay(props.modelValue ?? null))
+</script>
+
+<template>
+  <NgbPickerPopover
+    :display-value="displayValue"
+    :placeholder="placeholder ?? 'mm/dd/yyyy'"
+    :disabled="disabled"
+    :readonly="readonly"
+    :grouped="grouped"
+  >
+    <template #header>
+      <NgbPickerNavButton direction="prev" @click="prevMonth" />
+      <div class="text-sm font-semibold text-ngb-text">{{ monthLabel }}</div>
+      <NgbPickerNavButton direction="next" @click="nextMonth" />
+    </template>
+
+    <template #default="{ close }">
+      <div class="grid grid-cols-7 gap-1 text-center text-xs text-ngb-muted">
+        <div>Su</div><div>Mo</div><div>Tu</div><div>We</div><div>Th</div><div>Fr</div><div>Sa</div>
+      </div>
+
+      <div class="mt-2 grid grid-cols-7 gap-1">
+        <button
+          v-for="(c, i) in grid"
+          :key="i"
+          type="button"
+          class="h-9 rounded-md text-sm"
+          :class="[
+            !c.dt ? 'pointer-events-none opacity-0' : '',
+            c.dt && selected && isSameDay(c.dt, selected) ? 'bg-ngb-primary/20 text-ngb-text' : 'text-ngb-text hover:bg-ngb-muted/10',
+            c.dt && isSameDay(c.dt, today()) ? 'ring-1 ring-ngb-primary/40' : ''
+          ]"
+          @click="c.dt && pick(c.dt, close)"
+        >
+          {{ c.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="setToday(close)">Today</button>
+    </template>
+  </NgbPickerPopover>
+</template>