qdadm 1.9.0 → 1.10.0

package/README.md

@@ -96,8 +96,8 @@ Options: `transformRequest`, `transformResponse`, `responseFormat`, `clientSideP
 | Doc | Purpose |
 |-----|---------|
 | [QDADM_CREDO](QDADM_CREDO.md) | Philosophy, patterns, concepts |
-| [Architecture](docs/architecture.md) | PAC pattern, layers |
-| [Extension](docs/extension.md) | Hooks, signals, zones |
+| [Architecture](../../docs/architecture.md) | PAC pattern, layers |
+| [Extension](../../docs/extension.md) | Hooks, signals, zones |
 
 ## Peer Dependencies
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/InfoBanner.vue

@@ -71,24 +71,3 @@ const iconClass = computed(() => {
     </div>
   </Message>
 </template>
-
-<style scoped>
-.info-banner-content {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-}
-
-.info-banner-icon {
-  font-size: 1.125rem;
-  flex-shrink: 0;
-}
-
-.info-banner-text {
-  flex: 1;
-}
-
-.info-banner-text :deep(strong) {
-  font-weight: 600;
-}
-</style>

package/src/components/dialogs/MultiStepDialog.vue

@@ -329,22 +329,3 @@ const slotActions = computed<SlotActions>(() => ({
     </div>
   </Dialog>
 </template>
-
-<style scoped>
-.multi-step-dialog {
-  padding: 0.5rem 0;
-}
-
-.step-content {
-  padding: 1rem 0;
-}
-
-.step-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 1.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--p-surface-200);
-}
-</style>

package/src/components/dialogs/UnsavedChangesDialog.vue

@@ -78,22 +78,3 @@ function onSaveAndLeave(): void {
     </template>
   </SimpleDialog>
 </template>
-
-<style scoped>
-.dialog-content {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-}
-
-.dialog-icon {
-  font-size: 2rem;
-  color: var(--p-orange-500);
-  flex-shrink: 0;
-}
-
-.dialog-content p {
-  margin: 0;
-  line-height: 1.5;
-}
-</style>

package/src/components/display/BannerZone.vue

@@ -35,6 +35,10 @@ const { banners, hideBanner } = useInfoBanner()
 </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.).
+ */
 .banner-zone {
   position: relative;
 }

package/src/components/display/CardsGrid.vue

@@ -70,98 +70,3 @@ function getSeverityClass(severity?: Severity): string {
     </template>
   </div>
 </template>
-
-<style scoped>
-.cards-grid {
-  display: grid;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.cards-grid--cols-auto {
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-}
-
-.cards-grid--cols-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.cards-grid--cols-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.cards-grid--cols-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.stat-card,
-.card-custom {
-  background: var(--p-surface-0);
-  border: 1px solid var(--p-surface-200);
-  border-radius: 0.5rem;
-  padding: 1.25rem;
-}
-
-.stat-card {
-  text-align: center;
-}
-
-.stat-card--clickable {
-  cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.stat-card--clickable:hover {
-  border-color: var(--p-primary-300);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.stat-value {
-  font-size: 2rem;
-  font-weight: 600;
-  color: var(--p-primary-500);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.stat-value--success {
-  color: var(--p-green-500);
-}
-
-.stat-value--danger {
-  color: var(--p-red-500);
-}
-
-.stat-value--warning {
-  color: var(--p-orange-500);
-}
-
-.stat-value--info {
-  color: var(--p-blue-500);
-}
-
-.stat-icon {
-  font-size: 1.5rem;
-}
-
-.stat-label {
-  font-size: 0.875rem;
-  color: var(--p-surface-600);
-  margin-top: 0.25rem;
-}
-
-@media (max-width: 768px) {
-  .cards-grid--cols-3,
-  .cards-grid--cols-4 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 480px) {
-  .cards-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

package/src/components/display/CopyableId.vue

@@ -57,6 +57,10 @@ async function copyToClipboard(): Promise<void> {
 </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.).
+ */
 .copyable-id {
   display: inline-flex;
   align-items: center;

package/src/components/display/EmptyState.vue

@@ -60,57 +60,3 @@ function getIconClass(icon: string): string {
     </div>
   </div>
 </template>
-
-<style scoped>
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 2rem;
-  color: var(--text-color-secondary);
-}
-
-.empty-state--sm {
-  padding: 1rem;
-}
-
-.empty-state--lg {
-  padding: 3rem;
-}
-
-.empty-state-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-  opacity: 0.5;
-}
-
-.empty-state--sm .empty-state-icon {
-  font-size: 1.5rem;
-}
-
-.empty-state--lg .empty-state-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-.empty-state-title {
-  margin: 0 0 0.25rem 0;
-  font-weight: 500;
-  color: var(--text-color-secondary);
-}
-
-.empty-state--lg .empty-state-title {
-  font-size: 1.1rem;
-}
-
-.empty-state-description {
-  opacity: 0.7;
-  max-width: 300px;
-}
-
-.empty-state-actions {
-  margin-top: 1rem;
-}
-</style>

package/src/components/display/IntensityBar.vue

@@ -134,6 +134,10 @@ onMounted(() => {
 </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.).
+ */
 .intensity-container {
   display: flex;
   align-items: center;

package/src/components/display/RichCardsGrid.vue

@@ -99,139 +99,3 @@ function getSeverityClass(severity: CardSeverity | undefined): string {
     </template>
   </div>
 </template>
-
-<style scoped>
-.rich-cards-grid {
-  display: grid;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.rich-cards-grid--cols-auto {
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-}
-
-.rich-cards-grid--cols-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.rich-cards-grid--cols-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.rich-cards-grid--cols-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.rich-cards-grid--cols-5 {
-  grid-template-columns: repeat(5, 1fr);
-}
-
-.rich-cards-grid--cols-6 {
-  grid-template-columns: repeat(6, 1fr);
-}
-
-.rich-card {
-  background: var(--p-surface-0);
-  border: 1px solid var(--p-surface-200);
-  border-radius: 0.5rem;
-  padding: 1.25rem;
-}
-
-.rich-card--clickable {
-  cursor: pointer;
-  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
-}
-
-.rich-card--clickable:hover {
-  border-color: var(--p-primary-300);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
-}
-
-.rich-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-}
-
-.rich-card-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--p-surface-600);
-}
-
-.rich-card-icon {
-  font-size: 1.25rem;
-  color: var(--p-surface-400);
-}
-
-.rich-card-value {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--p-surface-900);
-  line-height: 1.2;
-}
-
-.rich-card-subtitle {
-  font-size: 0.8rem;
-  color: var(--p-surface-500);
-  margin-top: 0.25rem;
-}
-
-/* Severity variants */
-.rich-card--success .rich-card-value {
-  color: var(--p-green-600);
-}
-
-.rich-card--success .rich-card-icon {
-  color: var(--p-green-500);
-}
-
-.rich-card--danger .rich-card-value {
-  color: var(--p-red-600);
-}
-
-.rich-card--danger .rich-card-icon {
-  color: var(--p-red-500);
-}
-
-.rich-card--warning .rich-card-value {
-  color: var(--p-orange-600);
-}
-
-.rich-card--warning .rich-card-icon {
-  color: var(--p-orange-500);
-}
-
-.rich-card--info .rich-card-value {
-  color: var(--p-blue-600);
-}
-
-.rich-card--info .rich-card-icon {
-  color: var(--p-blue-500);
-}
-
-@media (max-width: 1024px) {
-  .rich-cards-grid--cols-5,
-  .rich-cards-grid--cols-6 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .rich-cards-grid--cols-3,
-  .rich-cards-grid--cols-4,
-  .rich-cards-grid--cols-5,
-  .rich-cards-grid--cols-6 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 480px) {
-  .rich-cards-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

package/src/components/edit/FormActions.vue

@@ -73,31 +73,3 @@ const emit = defineEmits<{
     />
   </div>
 </template>
-
-<style scoped>
-.form-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--p-surface-200);
-}
-
-.form-actions-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dirty-indicator {
-  color: var(--p-orange-500);
-  font-size: 0.5rem;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-</style>

package/src/components/edit/FormField.vue

@@ -80,23 +80,3 @@ function onBlur(): void {
     <small v-else-if="hint" class="field-hint">{{ hint }}</small>
   </div>
 </template>
-
-<style scoped>
-/* .field-hint and .field-error are global (main.css) */
-
-.field-invalid :deep(input),
-.field-invalid :deep(textarea),
-.field-invalid :deep(.p-inputtext),
-.field-invalid :deep(.p-select),
-.field-invalid :deep(.p-dropdown) {
-  border-color: var(--p-red-500);
-}
-
-.field-invalid :deep(input:focus),
-.field-invalid :deep(textarea:focus),
-.field-invalid :deep(.p-inputtext:focus),
-.field-invalid :deep(.p-select:focus),
-.field-invalid :deep(.p-dropdown:focus) {
-  box-shadow: 0 0 0 1px var(--p-red-500);
-}
-</style>

package/src/components/edit/FormPage.vue

@@ -258,34 +258,3 @@ function onGuardStay(): void {
     />
   </div>
 </template>
-
-<style scoped>
-.form-page {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.loading-state {
-  display: flex;
-  justify-content: center;
-  padding: 3rem;
-}
-
-.form-error-message {
-  margin: 1rem 0;
-}
-
-.validation-summary {
-  margin-bottom: 1rem;
-}
-
-.validation-errors {
-  margin: 0;
-  padding-left: 1.5rem;
-}
-
-.validation-errors li {
-  margin: 0.25rem 0;
-}
-</style>

package/src/components/edit/FormTab.vue

@@ -155,6 +155,10 @@ function showBothCountAndBadge(): boolean {
 </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;
 }

package/src/components/edit/FormTabs.vue

@@ -63,6 +63,10 @@ function onTabChange(value: string | number): void {
 </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;
 }

package/src/components/editors/JsonEditorFoldable.vue

@@ -299,6 +299,10 @@ function isMultiline(value: unknown): boolean {
 </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.).
+ */
 .json-editor-foldable {
   display: flex;
   flex-direction: column;

package/src/components/editors/JsonStructuredField.vue

@@ -158,6 +158,10 @@ watch(() => props.mode, (newMode: ViewMode | null | undefined) => {
 </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.).
+ */
 .json-structured-field {
   width: 100%;
 }

package/src/components/editors/JsonViewer.vue

@@ -49,44 +49,3 @@ const formattedJson = computed<string>(() => {
     <pre class="json-content" v-html="formattedJson"></pre>
   </div>
 </template>
-
-<style scoped>
-.json-viewer {
-  background: var(--p-surface-50);
-  border: 1px solid var(--p-surface-200);
-  border-radius: 0.375rem;
-  overflow: auto;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-}
-
-.json-content {
-  padding: 1rem;
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-:deep(.json-key) {
-  color: #881391;
-}
-
-:deep(.json-string) {
-  color: #1a1aa6;
-}
-
-:deep(.json-number) {
-  color: #1c00cf;
-}
-
-:deep(.json-boolean) {
-  color: #0d22aa;
-  font-weight: 500;
-}
-
-:deep(.json-null) {
-  color: #808080;
-  font-style: italic;
-}
-</style>

package/src/components/editors/KeyValueEditor.vue

@@ -226,6 +226,10 @@ function updateItemValue(index: number, value: string | number): void {
 </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.).
+ */
 .kv-list {
   display: flex;
   flex-direction: column;

package/src/components/editors/LanguageEditor.vue

@@ -169,6 +169,10 @@ function updateFluency(index: number, fluency: number | number[]): void {
 </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.).
+ */
 .lang-list {
   display: flex;
   flex-direction: column;

package/src/components/editors/PermissionEditor.vue

@@ -463,6 +463,10 @@ function getSuggestionClass(item: Suggestion): string {
 </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.).
+ */
 /* Uses global .editor-box pattern */
 .permission-editor {
   border: 1px solid var(--p-surface-200);

package/src/components/editors/ScopeEditor.vue

@@ -282,6 +282,10 @@ onMounted(async () => {
 </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.).
+ */
 .scope-editor {
   border: 1px solid var(--p-surface-200);
   border-radius: 0.5rem;

package/src/components/editors/VanillaJsonEditor.vue

@@ -160,6 +160,10 @@ onUnmounted(() => {
 </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.).
+ */
 .vanilla-json-editor {
   width: 100%;
   border: 1px solid var(--p-surface-300);

package/src/components/item/FieldGroups.vue

@@ -322,6 +322,10 @@ function getBadgeValue(group: FieldGroup): string | number | null {
 </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.).
+ */
 .field-groups {
   display: flex;
   flex-direction: column;

package/src/components/layout/AppLayout.vue

@@ -423,6 +423,10 @@ const showBreadcrumb = computed<boolean>(() => {
 </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.).
+ */
 /* =============================================================================
    MODERN ADMIN LAYOUT - VSCode/Material-inspired styling