@quazardous/qdadm 2.13.0 → 2.15.0

package/README.md

@@ -6,6 +6,7 @@
 
 ```bash
 npm install @quazardous/qdadm primevue @primeuix/themes primeicons vue-router pinia
+npm install -D sass-embedded   # compiles qdadm's shipped .scss styles (or `sass`)
 ```
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quazardous/qdadm",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
@@ -51,16 +51,15 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@quazardous/qdcore": "^1.0.0",
-    "@types/pluralize": "^0.0.33",
+    "@quazardous/qdcore": "^1.1.0",
     "@quazardous/qddebug": "^1.0.0",
     "@quazardous/quarkernel": "^2.1.0",
-    "pluralize": "^8.0.0",
     "yaml": "^2.8.4"
   },
   "peerDependencies": {
     "pinia": "^2.0.0 || ^3.0.0 || ^4.0.0",
     "primevue": "^4.0.0",
+    "sass-embedded": "^1.0.0",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
     "vue": "^3.3.0",
     "vue-router": "^4.0.0 || ^5.0.0"
@@ -74,6 +73,9 @@
     },
     "primevue": {
       "optional": true
+    },
+    "sass-embedded": {
+      "optional": "true"
     }
   },
   "optionalDependencies": {

package/src/chain/index.ts

@@ -7,6 +7,11 @@
  * - useActiveStack: Composable to build and access the sync stack
  * - useStackHydrator: Composable to access hydrated data
  *
+ * @experimental Navigation-stack plumbing that happens to be exported: the
+ * level shape and the hydration payloads may change in a minor release. The
+ * parent/child routing built on top of it is stable — see
+ * docs/API_STABILITY.md.
+ *
  * @module chain
  */
 

package/src/components/InfoBanner.vue

@@ -20,7 +20,7 @@
  *   Just some information.
  * </InfoBanner>
  */
-import Message from 'primevue/message'
+import QdMessage from './base/QdMessage.vue'
 import { computed } from 'vue'
 
 type Severity = 'info' | 'success' | 'warn' | 'error' | 'secondary' | 'contrast'
@@ -58,7 +58,7 @@ const iconClass = computed(() => {
 </script>
 
 <template>
-  <Message
+  <QdMessage
     :severity="severity"
     :closable="closable"
     class="info-banner"
@@ -69,5 +69,5 @@ const iconClass = computed(() => {
         <slot />
       </span>
     </div>
-  </Message>
+  </QdMessage>
 </template>

package/src/components/base/QdButton.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * QdButton — the single indirection point over the widget library's Button
+ * (#1391 exit-readiness). Generic pass-through: every attr/prop/listener and
+ * every slot is forwarded verbatim, so swapping or shimming the underlying
+ * widget is a one-file change. Imports `primevue/button`, which the
+ * qdadmVitePlugin flavor alias (#1393) traverses.
+ */
+import Button from 'primevue/button'
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <Button v-bind="$attrs">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps ?? {}" />
+    </template>
+  </Button>
+</template>

package/src/components/base/QdMessage.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/**
+ * QdMessage — the single indirection point over the widget library's Message
+ * (#1391 exit-readiness). Generic pass-through, same contract as QdButton.
+ */
+import Message from 'primevue/message'
+
+defineOptions({ inheritAttrs: false })
+</script>
+
+<template>
+  <Message v-bind="$attrs">
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps ?? {}" />
+    </template>
+  </Message>
+</template>

package/src/components/dialogs/MultiStepDialog.vue

@@ -58,7 +58,7 @@
  */
 import { computed, watch, type PropType } from 'vue'
 import Dialog from 'primevue/dialog'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import Stepper from 'primevue/stepper'
 import StepList from 'primevue/steplist'
 import Step from 'primevue/step'
@@ -284,7 +284,7 @@ const slotActions = computed<SlotActions>(() => ({
               <div class="step-actions">
                 <slot name="actions" v-bind="slotActions">
                   <!-- Back button -->
-                  <Button
+                  <QdButton
                     v-if="!isFirstStep || showBackOnFirst"
                     :label="backLabel"
                     icon="pi pi-arrow-left"
@@ -294,7 +294,7 @@ const slotActions = computed<SlotActions>(() => ({
                   />
 
                   <!-- Cancel button -->
-                  <Button
+                  <QdButton
                     :label="cancelLabel"
                     severity="secondary"
                     @click="cancel"
@@ -302,7 +302,7 @@ const slotActions = computed<SlotActions>(() => ({
                   />
 
                   <!-- Next button (not on last step) -->
-                  <Button
+                  <QdButton
                     v-if="!isLastStep"
                     :label="nextLabel"
                     icon="pi pi-arrow-right"
@@ -312,7 +312,7 @@ const slotActions = computed<SlotActions>(() => ({
                   />
 
                   <!-- Submit button (only on last step) -->
-                  <Button
+                  <QdButton
                     v-if="isLastStep"
                     :label="submitLabel"
                     icon="pi pi-check"

package/src/components/dialogs/SimpleDialog.vue

@@ -26,13 +26,13 @@
  *   <SimpleDialog v-model:visible="showDialog" title="View Key" :showConfirm="false">
  *     <p>{{ key }}</p>
  *     <template #actions>
- *       <Button label="Copy" icon="pi pi-copy" @click="copyKey" />
+ *       <QdButton label="Copy" icon="pi pi-copy" @click="copyKey" />
  *     </template>
  *   </SimpleDialog>
  */
 import { computed } from 'vue'
 import Dialog from 'primevue/dialog'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 
 interface Props {
   visible?: boolean
@@ -101,14 +101,14 @@ const canClose = computed((): boolean => props.closable && !props.loading)
 
     <template #footer v-if="showCancel || showConfirm || $slots.actions">
       <slot name="actions" />
-      <Button
+      <QdButton
         v-if="showCancel"
         :label="cancelLabel"
         severity="secondary"
         @click="onCancel"
         :disabled="loading"
       />
-      <Button
+      <QdButton
         v-if="showConfirm"
         :label="confirmLabel"
         :icon="confirmIcon"

package/src/components/dialogs/UnsavedChangesDialog.vue

@@ -8,7 +8,7 @@
  * - Stay: cancels navigation
  */
 import SimpleDialog from './SimpleDialog.vue'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 
 interface Props {
   visible?: boolean
@@ -67,7 +67,7 @@ function onSaveAndLeave(): void {
     </div>
 
     <template #actions>
-      <Button
+      <QdButton
         v-if="hasOnSave"
         label="Save & Leave"
         icon="pi pi-save"

package/src/components/display/CopyableId.vue

@@ -7,7 +7,7 @@
  *   <CopyableId :value="apiKey" label="API Key" />
  */
 import { ref, inject } from 'vue'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import type { Orchestrator } from '../../orchestrator/Orchestrator'
 
 interface Props {
@@ -40,7 +40,7 @@ async function copyToClipboard(): Promise<void> {
   <div class="form-field">
     <label class="form-field-label">{{ label }}</label>
     <div class="copyable-id">
-      <Button
+      <QdButton
         type="button"
         :icon="copied ? 'pi pi-check' : 'pi pi-copy'"
         :severity="copied ? 'success' : 'secondary'"

package/src/components/edit/FormActions.vue

@@ -13,7 +13,7 @@
  * - cancel: Cancel/close without saving
  */
 
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import { useI18n } from '../../i18n/useI18n'
 
 const { t } = useI18n()
@@ -42,7 +42,7 @@ const emit = defineEmits<{
 <template>
   <div class="form-actions">
     <div class="form-actions-left">
-      <Button
+      <QdButton
         type="button"
         :label="isEdit ? t('core.actions.update') : t('core.actions.create')"
         :loading="saving"
@@ -51,7 +51,7 @@ const emit = defineEmits<{
         @click="emit('save')"
         v-tooltip.top="t('core.tooltips.saveAndContinue')"
       />
-      <Button
+      <QdButton
         v-if="showSaveAndClose"
         type="button"
         :label="isEdit ? t('core.actions.updateAndClose') : t('core.actions.createAndClose')"
@@ -66,7 +66,7 @@ const emit = defineEmits<{
         <i class="pi pi-circle-fill"></i>
       </span>
     </div>
-    <Button
+    <QdButton
       type="button"
       :label="t('core.actions.cancel')"
       severity="secondary"

package/src/components/edit/FormPage.vue

@@ -38,8 +38,8 @@ import FormActions from './FormActions.vue'
 import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
 import CardShell from '../layout/CardShell.vue'
 import { formatFetchError } from '../../utils/errors'
-import Button from 'primevue/button'
-import Message from 'primevue/message'
+import QdButton from '../base/QdButton.vue'
+import QdMessage from '../base/QdMessage.vue'
 import type { ResolvedAction, ResolvedFieldConfig } from '../../composables/useEntityItemFormPage'
 import type { GuardDialogState } from '../../composables/useUnsavedChangesGuard'
 
@@ -151,7 +151,7 @@ function onGuardStay(): void {
       <template #actions>
         <slot name="header-actions" />
         <!-- Header actions from builder (excludes save/delete/cancel) -->
-        <Button
+        <QdButton
           v-for="action in headerActions"
           :key="action.name"
           :label="action.label"
@@ -180,16 +180,16 @@ function onGuardStay(): void {
     <!-- Error State (fetch error) -->
     <template v-else-if="fetchError">
       <slot name="error" :error="fetchError">
-        <Message severity="error" :closable="false" class="form-error-message">
+        <QdMessage severity="error" :closable="false" class="form-error-message">
           {{ fetchErrorMessage }}
-        </Message>
+        </QdMessage>
       </slot>
     </template>
 
     <!-- Form Content -->
     <template v-else>
       <!-- Validation Error Summary -->
-      <Message
+      <QdMessage
         v-if="errorSummary && errorSummary.length > 0"
         severity="warn"
         :closable="false"
@@ -200,7 +200,7 @@ function onGuardStay(): void {
             <strong>{{ error.label }}:</strong> {{ error.message }}
           </li>
         </ul>
-      </Message>
+      </QdMessage>
 
       <!-- Single content body; Card wrapper is conditional (#1193) -->
       <CardShell :card="cardWrapper">

package/src/components/edit/LookupPickerDialog.vue

@@ -12,7 +12,7 @@ import Dialog from 'primevue/dialog'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
 import InputText from 'primevue/inputtext'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import { useI18n } from '../../i18n/useI18n'
 
 const { t } = useI18n()
@@ -208,12 +208,12 @@ const confirmLabel = computed(() => {
     </DataTable>
 
     <template #footer>
-      <Button
+      <QdButton
         :label="t('core.actions.cancel')"
         severity="secondary"
         @click="onCancel"
       />
-      <Button
+      <QdButton
         :label="confirmLabel"
         icon="pi pi-check"
         :disabled="confirmDisabled"

package/src/components/editors/JsonEditorFoldable.vue

@@ -10,10 +10,10 @@
  */
 
 import { ref, computed, watch } from 'vue'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import Textarea from 'primevue/textarea'
 import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
+import QdMessage from '../base/QdMessage.vue'
 import { getJsonValueType, getJsonPreview } from '../../composables/useJsonSyntax'
 
 interface Props {
@@ -165,7 +165,7 @@ function isMultiline(value: unknown): boolean {
     <!-- Toolbar -->
     <div class="editor-toolbar">
       <div class="toolbar-left">
-        <Button
+        <QdButton
           :icon="rawJsonMode ? 'pi pi-list' : 'pi pi-code'"
           :label="rawJsonMode ? 'Structured' : 'Raw JSON'"
           size="small"
@@ -175,7 +175,7 @@ function isMultiline(value: unknown): boolean {
         />
       </div>
       <div class="toolbar-right" v-if="!rawJsonMode">
-        <Button
+        <QdButton
           icon="pi pi-plus"
           label="Expand All"
           size="small"
@@ -183,7 +183,7 @@ function isMultiline(value: unknown): boolean {
           text
           @click="expandAll"
         />
-        <Button
+        <QdButton
           icon="pi pi-minus"
           label="Collapse All"
           size="small"
@@ -282,12 +282,12 @@ function isMultiline(value: unknown): boolean {
         spellcheck="false"
       ></textarea>
       <div v-if="parseError" class="raw-json-actions">
-        <Message severity="error" :closable="false" class="parse-error">
+        <QdMessage severity="error" :closable="false" class="parse-error">
           {{ parseError }}
-        </Message>
+        </QdMessage>
       </div>
       <div v-else class="raw-json-actions">
-        <Button
+        <QdButton
           label="Apply Changes"
           icon="pi pi-check"
           size="small"

package/src/components/editors/JsonStructuredField.vue

@@ -42,7 +42,7 @@
 
 import { ref, computed, watch } from 'vue'
 import SelectButton from 'primevue/selectbutton'
-import Message from 'primevue/message'
+import QdMessage from '../base/QdMessage.vue'
 import VanillaJsonEditor from './VanillaJsonEditor.vue'
 import type { Mode } from 'vanilla-jsoneditor'
 
@@ -179,14 +179,14 @@ watch(() => props.mode, (newMode: ViewMode | null | undefined) => {
 
     <!-- JSON View -->
     <div v-if="viewMode === 'json'" class="json-view">
-      <Message
+      <QdMessage
         v-if="guardInvalidJson && hasJsonError"
         severity="error"
         :closable="false"
         class="json-error"
       >
         {{ invalidJsonMessage }}
-      </Message>
+      </QdMessage>
       <VanillaJsonEditor
         :modelValue="effectiveJsonValue"
         :mode="jsonMode"

package/src/components/editors/KeyValueEditor.vue

@@ -18,7 +18,7 @@
  */
 
 import { ref, computed } from 'vue'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import InputText from 'primevue/inputtext'
 import AutoComplete from 'primevue/autocomplete'
 import Slider from 'primevue/slider'
@@ -161,7 +161,7 @@ function updateItemValue(index: number, value: string | number): void {
             />
           </template>
         </div>
-        <Button
+        <QdButton
           icon="pi pi-times"
           severity="danger"
           text
@@ -172,7 +172,7 @@ function updateItemValue(index: number, value: string | number): void {
       </div>
     </div>
     <div class="kv-add">
-      <Button
+      <QdButton
         icon="pi pi-plus"
         @click="addItem"
         :disabled="!newItem.key || (isTextMode && !newItem.value)"

package/src/components/editors/LanguageEditor.vue

@@ -9,7 +9,7 @@
  */
 
 import { ref, computed } from 'vue'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import InputText from 'primevue/inputtext'
 import Slider from 'primevue/slider'
 import Checkbox from 'primevue/checkbox'
@@ -113,7 +113,7 @@ function updateFluency(index: number, fluency: number | number[]): void {
             style="width: 100px"
           />
         </div>
-        <Button
+        <QdButton
           v-if="lang.primary"
           icon="pi pi-star-fill"
           severity="warning"
@@ -122,7 +122,7 @@ function updateFluency(index: number, fluency: number | number[]): void {
           size="small"
           v-tooltip.top="'Primary language'"
         />
-        <Button
+        <QdButton
           v-else
           icon="pi pi-star"
           severity="secondary"
@@ -132,7 +132,7 @@ function updateFluency(index: number, fluency: number | number[]): void {
           @click="setPrimaryLanguage(index)"
           v-tooltip.top="'Set as primary'"
         />
-        <Button
+        <QdButton
           icon="pi pi-times"
           severity="danger"
           text
@@ -143,7 +143,7 @@ function updateFluency(index: number, fluency: number | number[]): void {
       </div>
     </div>
     <div class="lang-add">
-      <Button
+      <QdButton
         icon="pi pi-plus"
         @click="addLanguage"
         :disabled="!newLanguage.code"

package/src/components/editors/ScopeEditor.vue

@@ -3,7 +3,7 @@ import { ref, computed, onMounted, watch, inject } from 'vue'
 import type { HttpClient } from '../../entity/storage/ApiStorage'
 import AutoComplete from 'primevue/autocomplete'
 import Select from 'primevue/select'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 
 interface ScopeRow {
   resource: string
@@ -266,7 +266,7 @@ onMounted(async () => {
       />
       <span v-if="isRowComplete(row)" class="scope-valid">✓</span>
       <span v-else class="scope-incomplete">...</span>
-      <Button
+      <QdButton
         icon="pi pi-trash"
         severity="danger"
         text
@@ -279,7 +279,7 @@ onMounted(async () => {
     </div>
 
     <div class="scope-add">
-      <Button
+      <QdButton
         label="Add Scope"
         icon="pi pi-plus"
         severity="secondary"

package/src/components/index.ts

@@ -3,6 +3,10 @@
  */
 
 // Layout
+// Base widget wrappers — the single indirection points over the widget
+// library (#1391 exit-readiness)
+export { default as QdButton } from './base/QdButton.vue'
+export { default as QdMessage } from './base/QdMessage.vue'
 export { default as AppLayout } from './layout/AppLayout.vue'
 export { default as BaseLayout } from './layout/BaseLayout.vue'
 export { default as PageLayout } from './layout/PageLayout.vue'

package/src/components/layout/AppLayout.vue

@@ -21,7 +21,7 @@ import { useApp } from '../../composables/useApp'
 import { useAuth } from '../../composables/useAuth'
 import { useGuardDialog } from '../../composables/useGuardStore'
 import { useNavContext, type BreadcrumbItem, type NavLinkItem } from '../../composables/useNavContext'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import Breadcrumb from 'primevue/breadcrumb'
 import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
 import SidebarBox from './SidebarBox.vue'
@@ -366,7 +366,7 @@ const showBreadcrumb = computed<boolean>(() => {
     <main class="main-content" :class="{ 'main-content--sidebar-collapsed': sidebarCollapsed }">
       <!-- Mobile header bar -->
       <div class="mobile-header">
-        <Button
+        <QdButton
           icon="pi pi-bars"
           severity="secondary"
           text

package/src/components/layout/PageLayout.vue

@@ -17,7 +17,7 @@
  */
 import PageHeader from './PageHeader.vue'
 import CardsGrid from '../display/CardsGrid.vue'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 
 interface TitleParts {
   action?: string
@@ -89,7 +89,7 @@ function resolveLabel(label: string | (() => string)): string {
       </template>
       <template #actions>
         <slot name="header-actions" ></slot>
-        <Button
+        <QdButton
           v-for="action in headerActions"
           :key="action.name"
           :label="resolveLabel(action.label)"

package/src/components/layout/defaults/DefaultUserInfo.vue

@@ -11,7 +11,7 @@ import { computed, type ComputedRef } from 'vue'
 import { useRouter } from 'vue-router'
 import { prettifyRole } from '../../../utils/formatters'
 import { useAuth } from '../../../composables/useAuth'
-import Button from 'primevue/button'
+import QdButton from '../../base/QdButton.vue'
 
 interface UserData {
   username?: string
@@ -56,7 +56,7 @@ function handleLogout(): void {
       <div class="user-name">{{ userDisplayName }}</div>
       <div class="user-role">{{ userSubtitle }}</div>
     </div>
-    <Button
+    <QdButton
       icon="pi pi-sign-out"
       severity="secondary"
       text

package/src/components/lists/ActionButtons.vue

@@ -12,7 +12,7 @@
  * - handler: Click handler function
  * - isDisabled: Boolean disabled state
  */
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 
 interface Action {
   name: string
@@ -32,7 +32,7 @@ defineProps<Props>()
 
 <template>
   <div class="table-actions">
-    <Button
+    <QdButton
       v-for="action in actions"
       :key="action.name"
       :icon="action.icon"

package/src/components/lists/ListPage.vue

@@ -21,7 +21,7 @@ import FilterBar from './FilterBar.vue'
 import ActionButtons from './ActionButtons.vue'
 import DataTable from 'primevue/datatable'
 import Column from 'primevue/column'
-import Button from 'primevue/button'
+import QdButton from '../base/QdButton.vue'
 import Select from 'primevue/select'
 import AutoComplete from 'primevue/autocomplete'
 import SplitButton from 'primevue/splitbutton'
@@ -333,7 +333,7 @@ function getFilterClass(filter: FilterConfig): Record<string, boolean> {
         <!-- Mobile: split button (primary action + dropdown) -->
         <template v-if="isMobile && headerActions.length > 0 && primaryHeaderAction">
           <!-- Single action: just a button -->
-          <Button
+          <QdButton
             v-if="headerActions.length === 1"
             :label="resolveLabel(primaryHeaderAction.label)"
             :icon="primaryHeaderAction.icon"
@@ -355,7 +355,7 @@ function getFilterClass(filter: FilterConfig): Record<string, boolean> {
         </template>
         <!-- Desktop: individual buttons -->
         <template v-else>
-          <Button
+          <QdButton
             v-for="action in headerActions"
             :key="action.name"
             :label="resolveLabel(action.label)"
@@ -417,7 +417,7 @@ function getFilterClass(filter: FilterConfig): Record<string, boolean> {
           />
         </template>
         <slot name="filters" ></slot>
-        <Button
+        <QdButton
           v-if="hasActiveFilters"
           icon="pi pi-filter-slash"
           severity="secondary"