@quazardous/qdadm 1.22.0 → 2.1.0

package/src/kernel/Kernel.types.ts

@@ -11,6 +11,7 @@ import type { EntityManager } from '../entity/EntityManager'
 import type { EntityAuthAdapter } from '../entity/auth/EntityAuthAdapter'
 import type { RoleProvider } from '../security/RolesProvider'
 import type { I18nOptions } from '../i18n/types'
+import type { ApiClientSource } from '../api/apiClient'
 
 /**
  * Auth adapter interface (app-level authentication)
@@ -183,6 +184,14 @@ export interface KernelOptions {
   debug?: boolean
   onAuthExpired?: (payload: unknown) => void
   i18n?: I18nOptions
+  /**
+   * Default API HTTP client (axios-compatible `HttpClient`, or a factory),
+   * provided to composables/widgets as `qdadmApiClient`. Relative-endpoint
+   * lookups (`useOptionsLookup` endpoint mode, `ScopeEditor` fallback) route
+   * through it so the app's base URL + auth headers apply without per-call
+   * wiring. Typically the same client your ApiStorages use.
+   */
+  apiClient?: ApiClientSource
   /**
    * Existing Vue app to install qdadm onto. When provided, the Kernel
    * skips its own `createApp(WrappedRoot)` and reuses the supplied

package/src/kernel/Kernel.vue.ts

@@ -205,6 +205,12 @@ export function applyVueMethods(KernelClass: { prototype: any }): void {
     app.provide('qdadmActiveStack', this.activeStack)
     app.provide('qdadmStackHydrator', this.stackHydrator)
 
+    if (this.options.apiClient) {
+      // Default API client for composables/widgets (useOptionsLookup,
+      // ScopeEditor) — relative endpoints get base URL + auth (#1198).
+      app.provide('qdadmApiClient', this.options.apiClient)
+    }
+
     if (this.options.debug && typeof window !== 'undefined') {
       const self = this
       // Single namespaced surface for browser-console & agent introspection.

package/src/utils/formatters.ts

@@ -16,22 +16,27 @@
  * Format a date string to localized date+time
  * Default format: toLocaleString() (e.g., "20/12/2025, 14:30:00")
  *
+ * The locale defaults to the browser locale everywhere in qdadm — pass
+ * `locale` only for an explicit per-field override.
+ *
  * @param dateStr - ISO date string or Date object
  * @param options - Intl.DateTimeFormat options
+ * @param locale - Explicit locale override (default: browser locale)
  * @returns Formatted date string or '-' if empty
  */
 export function formatDate(
   dateStr: string | Date | null | undefined,
-  options: Intl.DateTimeFormatOptions = {}
+  options: Intl.DateTimeFormatOptions = {},
+  locale?: string
 ): string {
   if (!dateStr) return '-'
   const date = new Date(dateStr)
   if (isNaN(date.getTime())) return '-'
 
   if (Object.keys(options).length === 0) {
-    return date.toLocaleString()
+    return date.toLocaleString(locale)
   }
-  return date.toLocaleString(undefined, options)
+  return date.toLocaleString(locale, options)
 }
 
 /**
@@ -61,15 +66,23 @@ export function formatDateTimeShort(dateStr: string | Date | null | undefined):
 
 /**
  * Format to date only (20/12/2025)
+ *
+ * @param options - Intl.DateTimeFormat overrides merged over the defaults
+ * @param locale - Explicit locale override (default: browser locale)
  */
-export function formatDateOnly(dateStr: string | Date | null | undefined): string {
+export function formatDateOnly(
+  dateStr: string | Date | null | undefined,
+  options: Intl.DateTimeFormatOptions = {},
+  locale?: string
+): string {
   if (!dateStr) return '-'
   const date = new Date(dateStr)
   if (isNaN(date.getTime())) return '-'
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(locale, {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
+    ...options,
   })
 }
 
@@ -142,13 +155,31 @@ export function formatDurationBetween(
 
 /**
  * Format a number with locale-specific separators
+ *
+ * @param locale - Explicit locale override (default: browser locale)
  */
 export function formatNumber(
   value: number | null | undefined,
-  options: Intl.NumberFormatOptions = {}
+  options: Intl.NumberFormatOptions = {},
+  locale?: string
+): string {
+  if (value === null || value === undefined) return '-'
+  return value.toLocaleString(locale, options)
+}
+
+/**
+ * Format a currency amount (e.g., "$1,234.56")
+ *
+ * @param currencyCode - ISO 4217 code (default 'USD')
+ * @param locale - Explicit locale override (default: browser locale)
+ */
+export function formatCurrency(
+  value: number | null | undefined,
+  currencyCode = 'USD',
+  locale?: string
 ): string {
   if (value === null || value === undefined) return '-'
-  return value.toLocaleString(undefined, options)
+  return new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode }).format(value)
 }
 
 /**

package/src/utils/index.ts

@@ -13,6 +13,7 @@ export {
   formatDuration,
   formatDurationBetween,
   formatNumber,
+  formatCurrency,
   formatBytes,
   formatPercent,
 } from './formatters'

package/src/components/edit/FormTab.vue

@@ -1,217 +0,0 @@
-<script setup lang="ts">
-/**
- * FormTab - Normalized tab header component
- *
- * @deprecated Use FieldGroups with layout="tabs" instead. FieldGroups now supports
- * icon, badge, count, visible, and disabled options on groups.
- *
- * ```ts
- * // Before (deprecated)
- * <FormTab value="general" label="General" icon="pi-cog" :count="5" />
- *
- * // After (recommended)
- * form.group('general', ['field1'], { label: 'General', icon: 'cog', count: 5 })
- * ```
- */
-
-import { type PropType } from 'vue'
-import Tab from 'primevue/tab'
-import Tag from 'primevue/tag'
-
-type BadgeSeverity = 'secondary' | 'info' | 'success' | 'warn' | 'danger' | 'contrast'
-
-const props = defineProps({
-  /**
-   * Tab identifier (used for v-model matching)
-   */
-  value: {
-    type: String,
-    required: true
-  },
-
-  /**
-   * Display label
-   */
-  label: {
-    type: String,
-    required: true
-  },
-
-  /**
-   * PrimeIcon class (without 'pi' prefix or with full class)
-   * Examples: 'pi-cog', 'cog', 'pi pi-cog'
-   */
-  icon: {
-    type: String as () => string | null,
-    default: null
-  },
-
-  /**
-   * Count to display as badge (shows only if > 0)
-   */
-  count: {
-    type: Number as () => number | null,
-    default: null
-  },
-
-  /**
-   * Custom badge text (alternative to count)
-   */
-  badge: {
-    type: [String, Number] as unknown as PropType<string | number | null>,
-    default: null
-  },
-
-  /**
-   * Badge severity/color
-   */
-  badgeSeverity: {
-    type: String as () => BadgeSeverity,
-    default: 'secondary',
-    validator: (v: string) => ['secondary', 'info', 'success', 'warn', 'danger', 'contrast'].includes(v)
-  },
-
-  /**
-   * Show/hide the tab
-   */
-  visible: {
-    type: Boolean,
-    default: true
-  },
-
-  /**
-   * Disable tab interaction
-   */
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-})
-
-/**
- * Normalize icon class
- */
-function getIconClass(): string | null {
-  if (!props.icon) return null
-  // Already has 'pi' prefix
-  if (props.icon.startsWith('pi')) {
-    return props.icon.includes(' ') ? props.icon : `pi ${props.icon}`
-  }
-  // Just icon name
-  return `pi pi-${props.icon}`
-}
-
-/**
- * Get count value to display
- */
-function getCountValue(): number | null {
-  if (props.count !== null && props.count > 0) return props.count
-  return null
-}
-
-/**
- * Get badge value to display (separate from count)
- */
-function getBadgeValue(): string | number | null {
-  if (props.badge !== null) return props.badge
-  // If no badge but count provided, show count as badge (legacy behavior)
-  if (props.count !== null && props.count > 0 && props.badge === null) return props.count
-  return null
-}
-
-/**
- * Check if we should show count and badge separately
- */
-function showBothCountAndBadge(): boolean {
-  return props.count !== null && props.count > 0 && props.badge !== null
-}
-</script>
-
-<template>
-  <Tab
-    v-if="visible"
-    :value="value"
-    :disabled="disabled"
-  >
-    <i v-if="icon" :class="getIconClass()" class="tab-icon" ></i>
-    <span class="tab-label">{{ label }}</span>
-    <!-- When both count and badge are provided, show count first then badge indicator -->
-    <template v-if="showBothCountAndBadge()">
-      <Tag
-        :value="String(getCountValue())"
-        severity="secondary"
-        class="tab-badge"
-      />
-      <span class="tab-alert-dot" :class="`alert-${badgeSeverity}`"></span>
-    </template>
-    <!-- Otherwise show single badge (legacy behavior) -->
-    <Tag
-      v-else-if="getBadgeValue() !== null"
-      :value="String(getBadgeValue())"
-      :severity="badgeSeverity"
-      class="tab-badge"
-    />
-  </Tab>
-</template>
-
-<style scoped>
-/*
- * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
- * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
- */
-.tab-icon {
-  margin-right: 0.5rem;
-}
-
-.tab-label {
-  /* Ensure consistent text rendering */
-}
-
-.tab-badge {
-  margin-left: 0.5rem;
-  font-size: 0.7rem;
-  padding: 0.15rem 0.4rem;
-  min-width: 1.25rem;
-  text-align: center;
-}
-
-.tab-alert-dot {
-  display: inline-block;
-  width: 8px !important;
-  height: 8px !important;
-  min-width: 8px;
-  max-width: 8px;
-  border-radius: 50%;
-  margin-left: 0.35rem;
-  animation: pulse 1.5s infinite;
-}
-
-.alert-warn {
-  background-color: var(--p-orange-500);
-}
-
-.alert-danger {
-  background-color: var(--p-red-500);
-}
-
-.alert-info {
-  background-color: var(--p-blue-500);
-}
-
-.alert-success {
-  background-color: var(--p-green-500);
-}
-
-.alert-secondary {
-  background-color: var(--p-gray-500);
-}
-
-.alert-contrast {
-  background-color: var(--p-primary-500);
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-</style>

package/src/components/edit/FormTabs.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-/**
- * FormTabs - Normalized tab container for forms
- *
- * @deprecated Use FieldGroups with layout="tabs" instead. FieldGroups now supports
- * icon, badge, count, visible, and disabled options on groups.
- *
- * ```vue
- * <!-- Before (deprecated) -->
- * <FormTabs v-model="activeTab">
- *   <template #tabs>
- *     <FormTab value="general" label="General" icon="pi-cog" />
- *   </template>
- *   <template #panels>
- *     <TabPanel value="general">...</TabPanel>
- *   </template>
- * </FormTabs>
- *
- * <!-- After (recommended) -->
- * form.group('general', ['field1', 'field2'], { label: 'General', icon: 'cog' })
- * <FieldGroups :groups="form.groups.value" layout="tabs">
- *   <template #field="{ field }">
- *     <FormField :field="field" />
- *   </template>
- * </FieldGroups>
- * ```
- */
-
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
-import TabPanels from 'primevue/tabpanels'
-
-defineProps({
-  /**
-   * Active tab value (v-model)
-   */
-  modelValue: {
-    type: String,
-    required: true
-  }
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-function onTabChange(value: string | number): void {
-  emit('update:modelValue', String(value))
-}
-</script>
-
-<template>
-  <div class="form-tabs">
-    <Tabs :value="modelValue" @update:value="onTabChange">
-      <TabList class="form-tabs__list">
-        <slot name="tabs" ></slot>
-      </TabList>
-      <TabPanels class="form-tabs__panels">
-        <slot name="panels" ></slot>
-      </TabPanels>
-    </Tabs>
-  </div>
-</template>
-
-<style scoped>
-/*
- * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
- * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
- */
-.form-tabs {
-  margin-top: 1rem;
-}
-
-.form-tabs :deep(.form-tabs__list) {
-  border-bottom: 1px solid var(--p-surface-200);
-  gap: 0;
-}
-
-.form-tabs :deep(.form-tabs__panels) {
-  padding: 1.5rem 0;
-}
-
-/* Tab styling */
-.form-tabs :deep(.p-tab) {
-  padding: 0.75rem 1.25rem;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: all 0.2s ease;
-}
-
-.form-tabs :deep(.p-tab:hover) {
-  background: var(--p-surface-50);
-}
-
-.form-tabs :deep(.p-tab[data-p-active="true"]) {
-  border-bottom-color: var(--p-primary-500);
-  color: var(--p-primary-500);
-}
-
-/* Tab icon alignment */
-.form-tabs :deep(.p-tab .pi) {
-  margin-right: 0.5rem;
-}
-
-/* Tab badge/count styling */
-.form-tabs :deep(.tab-badge) {
-  margin-left: 0.5rem;
-  font-size: 0.7rem;
-  padding: 0.15rem 0.4rem;
-  min-width: 1.25rem;
-  text-align: center;
-}
-
-/* Disabled tab */
-.form-tabs :deep(.p-tab[data-p-disabled="true"]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-</style>

package/src/components/lists/ActionColumn.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-/**
- * ActionColumn - Reusable table action buttons (edit, delete)
- *
- * Slots:
- * - default: Extra actions (after edit/delete)
- *
- * Emits:
- * - edit: When edit button is clicked
- * - delete: When delete button is clicked
- */
-import Button from 'primevue/button'
-
-defineEmits<{
-  edit: []
-  delete: []
-}>()
-</script>
-
-<template>
-  <div class="table-actions">
-    <Button
-      icon="pi pi-pencil"
-      severity="secondary"
-      text
-      rounded
-      @click="$emit('edit')"
-      v-tooltip.top="'Edit'"
-    />
-    <Button
-      icon="pi pi-trash"
-      severity="danger"
-      text
-      rounded
-      @click="$emit('delete')"
-      v-tooltip.top="'Delete'"
-    />
-    <slot ></slot>
-  </div>
-</template>

package/src/composables/useCurrentEntity.ts

@@ -1,60 +0,0 @@
-/**
- * @deprecated Use useStackHydrator() instead
- *
- * Legacy composable for setting breadcrumb entity data.
- * This has been replaced by the activeStack + stackHydrator system.
- *
- * Migration:
- * ```ts
- * // Before (deprecated)
- * const { setBreadcrumbEntity } = useCurrentEntity()
- * setBreadcrumbEntity(data)
- *
- * // After
- * const hydrator = useStackHydrator()
- * hydrator.setCurrentData(data)
- * ```
- */
-import { useStackHydrator } from '../chain/useStackHydrator'
-
-/**
- * Return type for useCurrentEntity
- */
-export interface UseCurrentEntityReturn {
-  /** @deprecated Use hydrator.setCurrentData() instead */
-  setBreadcrumbEntity: (data: unknown, level?: number) => void
-  /** @deprecated Use hydrator.setCurrentData() instead */
-  setCurrentEntity: (data: unknown) => void
-}
-
-/**
- * @deprecated Use useStackHydrator() instead
- */
-export function useCurrentEntity(): UseCurrentEntityReturn {
-  console.warn(
-    '[qdadm] useCurrentEntity is deprecated. Use useStackHydrator() instead.'
-  )
-
-  const hydrator = useStackHydrator()
-
-  /**
-   * @deprecated Use hydrator.setCurrentData() instead
-   */
-  function setBreadcrumbEntity(data: unknown, level = 1): void {
-    if (level === 1) {
-      hydrator.setCurrentData(data)
-    } else {
-      // For parent levels, use setEntityData with entity name
-      // But we don't have entity name here - just set current
-      hydrator.setCurrentData(data)
-    }
-  }
-
-  // Backwards compat alias
-  const setCurrentEntity = (data: unknown): void => setBreadcrumbEntity(data, 1)
-
-  return {
-    setBreadcrumbEntity,
-    setCurrentEntity,
-  }
-}