@quazardous/qdadm 1.19.3

package/src/components/editors/ScopeEditor.vue

@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch, inject } from 'vue'
+import AutoComplete from 'primevue/autocomplete'
+import Select from 'primevue/select'
+import Button from 'primevue/button'
+
+interface ScopeRow {
+  resource: string
+  action: string
+}
+
+interface ScopeDefinition {
+  resources: string[]
+  actions: string[]
+}
+
+interface ScopeConfig {
+  endpoint?: string
+  prefix?: string
+  resources?: string[]
+  actions?: string[]
+}
+
+interface ApiAdapter {
+  request: (method: string, url: string) => Promise<ScopeDefinition>
+}
+
+interface Props {
+  modelValue?: string[]
+  disabled?: boolean
+  scopeEndpoint?: string | null
+  scopePrefix?: string | null
+  defaultResources?: string[] | null
+  defaultActions?: string[] | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  disabled: false,
+  scopeEndpoint: null,
+  scopePrefix: null,
+  defaultResources: null,
+  defaultActions: null
+})
+
+// Get API adapter (optional)
+const api = inject<ApiAdapter | null>('apiAdapter', null)
+
+// Get global scope config (optional) - allows app-level configuration
+const globalScopeConfig = inject<ScopeConfig>('scopeConfig', {})
+
+// Computed config with priority: props > globalConfig > defaults
+const config = computed<Required<ScopeConfig>>(() => ({
+  endpoint: props.scopeEndpoint ?? globalScopeConfig.endpoint ?? '/reference/scopes',
+  prefix: props.scopePrefix ?? globalScopeConfig.prefix ?? 'app',
+  resources: props.defaultResources ?? globalScopeConfig.resources ?? ['api', 'users', 'roles', 'apikeys'],
+  actions: props.defaultActions ?? globalScopeConfig.actions ?? ['read', 'write', 'grant']
+}))
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]]
+}>()
+
+// Scope structure from API
+const scopeDefinition = ref<ScopeDefinition>({
+  resources: [],
+  actions: [],
+})
+const loading = ref<boolean>(true)
+
+// Local scopes state
+const scopeRows = ref<ScopeRow[]>([])
+
+// Resource suggestions for autocomplete
+const resourceSuggestions = ref<string[]>([])
+
+// All resources with * prefix
+const allResources = computed<string[]>(() => ['*', ...scopeDefinition.value.resources])
+
+// All actions with access prefix
+const allActions = computed<string[]>(() => ['access', ...scopeDefinition.value.actions])
+
+/**
+ * Search resources for autocomplete
+ */
+function searchResources(event: { query: string }): void {
+  const query = (event.query || '').toLowerCase()
+  if (!query) {
+    resourceSuggestions.value = [...allResources.value]
+  } else {
+    resourceSuggestions.value = allResources.value.filter(r =>
+      r.toLowerCase().includes(query)
+    )
+  }
+}
+
+/**
+ * Parse a scope string into resource and action
+ */
+function parseScope(scope: string): ScopeRow {
+  if (!scope) return { resource: '', action: '' }
+  // prefix.resource:action
+  const regex = new RegExp(`^${config.value.prefix}\\.([^:]+):(.+)$`)
+  const match = scope.match(regex)
+  if (match && match[1] && match[2]) {
+    return { resource: match[1], action: match[2] }
+  }
+  return { resource: '', action: '' }
+}
+
+/**
+ * Build scope string from resource and action
+ */
+function buildScope(resource: string, action: string): string {
+  if (!resource || !action) return ''
+  return `${config.value.prefix}.${resource}:${action}`
+}
+
+// Initialize from modelValue
+function initFromValue(): void {
+  if (!props.modelValue || props.modelValue.length === 0) {
+    scopeRows.value = []
+    return
+  }
+  scopeRows.value = props.modelValue.map(scope => {
+    const { resource, action } = parseScope(scope)
+    return { resource, action }
+  })
+}
+
+// Emit changes - only complete scopes
+function emitChanges(): void {
+  const scopes = scopeRows.value
+    .map(row => buildScope(row.resource, row.action))
+    .filter(s => s) // Filter out empty
+  emit('update:modelValue', scopes)
+}
+
+// Add new scope row
+function addRow(): void {
+  scopeRows.value.push({ resource: '', action: 'read' })
+}
+
+// Remove scope row
+function removeRow(index: number): void {
+  scopeRows.value.splice(index, 1)
+  emitChanges()
+}
+
+// Update resource
+function updateResource(index: number, value: string): void {
+  const row = scopeRows.value[index]
+  if (row) {
+    row.resource = value
+    if (value && row.action) {
+      emitChanges()
+    }
+  }
+}
+
+// Update action
+function updateAction(index: number, value: string): void {
+  const row = scopeRows.value[index]
+  if (row) {
+    row.action = value
+    if (row.resource && value) {
+      emitChanges()
+    }
+  }
+}
+
+// Check if row is complete
+function isRowComplete(row: ScopeRow): boolean {
+  return !!row.resource && !!row.action
+}
+
+// Load scope definition from API
+async function loadScopeDefinition(): Promise<void> {
+  loading.value = true
+  try {
+    if (!api) {
+      // No API adapter, use defaults
+      scopeDefinition.value = {
+        resources: [...config.value.resources],
+        actions: [...config.value.actions],
+      }
+      return
+    }
+
+    const data = await api.request('GET', config.value.endpoint)
+    scopeDefinition.value = {
+      resources: data.resources || [...config.value.resources],
+      actions: data.actions || [...config.value.actions],
+    }
+  } catch (error) {
+    console.error('[ScopeEditor] Failed to load scope definition:', error)
+    scopeDefinition.value = {
+      resources: [...config.value.resources],
+      actions: [...config.value.actions],
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// Watch for external changes
+watch(() => props.modelValue, (newVal: string[] | undefined) => {
+  // Compare to avoid loops
+  const currentScopes = scopeRows.value
+    .map(row => buildScope(row.resource, row.action))
+    .filter(s => s)
+    .sort()
+    .join(',')
+  const newScopes = (newVal || []).sort().join(',')
+
+  if (currentScopes !== newScopes) {
+    initFromValue()
+  }
+}, { deep: true })
+
+onMounted(async () => {
+  await loadScopeDefinition()
+  initFromValue()
+})
+</script>
+
+<template>
+  <div class="scope-editor">
+    <div v-if="scopeRows.length === 0" class="scope-empty">
+      <span class="text-surface-400">No scopes defined</span>
+    </div>
+
+    <div v-for="(row, index) in scopeRows" :key="index" class="scope-row">
+      <span class="scope-prefix">{{ scopePrefix }}.</span>
+      <AutoComplete
+        v-model="row.resource"
+        :suggestions="resourceSuggestions"
+        @complete="searchResources"
+        @change="updateResource(index, row.resource)"
+        @item-select="(e) => updateResource(index, e.value)"
+        :disabled="disabled || loading"
+        placeholder="resource"
+        class="scope-resource"
+        :dropdown="true"
+        :minLength="0"
+      />
+      <span class="scope-separator">:</span>
+      <Select
+        v-model="row.action"
+        :options="allActions"
+        @change="updateAction(index, row.action)"
+        :disabled="disabled || loading"
+        placeholder="action"
+        class="scope-action"
+      />
+      <span v-if="isRowComplete(row)" class="scope-valid">✓</span>
+      <span v-else class="scope-incomplete">...</span>
+      <Button
+        icon="pi pi-trash"
+        severity="danger"
+        text
+        rounded
+        size="small"
+        :disabled="disabled"
+        @click="removeRow(index)"
+        class="scope-remove"
+      />
+    </div>
+
+    <div class="scope-add">
+      <Button
+        label="Add Scope"
+        icon="pi pi-plus"
+        severity="secondary"
+        text
+        size="small"
+        :disabled="disabled"
+        @click="addRow"
+      />
+    </div>
+  </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.).
+ */
+.scope-editor {
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background: var(--p-surface-50);
+}
+
+.scope-empty {
+  padding: 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+.scope-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.scope-prefix {
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: var(--p-surface-500);
+  flex-shrink: 0;
+}
+
+.scope-separator {
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: var(--p-surface-500);
+  flex-shrink: 0;
+}
+
+.scope-resource {
+  flex: 1 1 auto !important;
+  min-width: 200px !important;
+}
+
+.scope-action {
+  width: 120px !important;
+  min-width: 120px !important;
+  flex: 0 0 120px !important;
+}
+
+.scope-valid {
+  color: var(--p-green-500);
+  font-weight: bold;
+  width: 20px;
+  text-align: center;
+}
+
+.scope-incomplete {
+  color: var(--p-surface-400);
+  width: 20px;
+  text-align: center;
+}
+
+.scope-remove {
+  flex-shrink: 0;
+}
+
+.scope-add {
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--p-surface-200);
+}
+
+:deep(.scope-resource .p-autocomplete) {
+  width: 100% !important;
+}
+
+:deep(.scope-resource .p-autocomplete-input) {
+  width: 100%;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+:deep(.scope-action .p-select) {
+  width: 120px !important;
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+</style>

package/src/components/editors/VanillaJsonEditor.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+/**
+ * VanillaJsonEditor - JSON editor using vanilla-jsoneditor
+ *
+ * Provides tree/text/table modes like jsoneditoronline.org
+ *
+ * Usage:
+ * <VanillaJsonEditor v-model="jsonData" mode="tree" />
+ */
+
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { JSONEditor, type Content, type ContentErrors, type OnChangeStatus, type Mode } from 'vanilla-jsoneditor'
+
+type JsonValue = Record<string, unknown> | unknown[] | string | null
+
+interface Props {
+  modelValue?: JsonValue
+  mode?: Mode
+  height?: string
+  readOnly?: boolean
+  mainMenuBar?: boolean
+  navigationBar?: boolean
+  statusBar?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({}),
+  mode: 'tree' as Mode,
+  height: '400px',
+  readOnly: false,
+  mainMenuBar: true,
+  navigationBar: true,
+  statusBar: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: JsonValue]
+  'change': [value: JsonValue]
+  'error': [errors: ContentErrors]
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+let editor: JSONEditor | null = null
+// Flag to prevent onChange from firing during programmatic updates (instance-specific)
+const updatingFromProp = ref<boolean>(false)
+
+// Parse value to ensure it's an object/array
+function parseValue(val: JsonValue): Record<string, unknown> | unknown[] {
+  if (val === null || val === undefined) {
+    return {}
+  }
+  if (typeof val === 'string') {
+    try {
+      return JSON.parse(val)
+    } catch {
+      return {}
+    }
+  }
+  return val as Record<string, unknown> | unknown[]
+}
+
+// Initialize editor
+onMounted(() => {
+  if (!containerRef.value) return
+
+  const content: Content = {
+    json: parseValue(props.modelValue)
+  }
+
+  editor = new JSONEditor({
+    target: containerRef.value,
+    props: {
+      content,
+      mode: props.mode,
+      readOnly: props.readOnly,
+      mainMenuBar: props.mainMenuBar,
+      navigationBar: props.navigationBar,
+      statusBar: props.statusBar,
+      onChange: (updatedContent: Content, _previousContent: Content, { contentErrors }: OnChangeStatus) => {
+        // Skip if this change came from a programmatic prop update
+        if (updatingFromProp.value) return
+
+        if (contentErrors) {
+          emit('error', contentErrors)
+          return
+        }
+
+        // Extract JSON from content
+        let newValue: JsonValue | undefined
+        if ('json' in updatedContent && updatedContent.json !== undefined) {
+          newValue = updatedContent.json as JsonValue
+        } else if ('text' in updatedContent && updatedContent.text !== undefined) {
+          try {
+            newValue = JSON.parse(updatedContent.text)
+          } catch {
+            // Invalid JSON in text mode, don't emit
+            return
+          }
+        }
+
+        if (newValue !== undefined) {
+          emit('update:modelValue', newValue)
+          emit('change', newValue)
+        }
+      }
+    }
+  })
+})
+
+// Watch for external changes
+watch(() => props.modelValue, (newVal: JsonValue | undefined) => {
+  if (!editor) return
+
+  const currentContent = editor.get()
+  const newParsed = parseValue(newVal ?? null)
+
+  // Only update if different (avoid loops)
+  const currentJson = 'json' in currentContent && currentContent.json !== undefined
+    ? currentContent.json
+    : ('text' in currentContent && currentContent.text ? JSON.parse(currentContent.text) : null)
+
+  if (JSON.stringify(currentJson) !== JSON.stringify(newParsed)) {
+    // Set flag to prevent onChange from emitting during this update
+    updatingFromProp.value = true
+    editor.set({ json: newParsed })
+    // Reset flag after the update is processed
+    nextTick(() => {
+      updatingFromProp.value = false
+    })
+  }
+}, { deep: true })
+
+// Watch mode changes
+watch(() => props.mode, (newMode: Mode | undefined) => {
+  if (editor && newMode) {
+    editor.updateProps({ mode: newMode })
+  }
+})
+
+// Watch readOnly changes
+watch(() => props.readOnly, (newReadOnly: boolean) => {
+  if (editor) {
+    editor.updateProps({ readOnly: newReadOnly })
+  }
+})
+
+// Cleanup
+onUnmounted(() => {
+  if (editor) {
+    editor.destroy()
+    editor = null
+  }
+})
+</script>
+
+<template>
+  <div class="vanilla-json-editor" :style="{ height }">
+    <div ref="containerRef" class="editor-container"></div>
+  </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.).
+ */
+.vanilla-json-editor {
+  width: 100%;
+  border: 1px solid var(--p-surface-300);
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+.editor-container {
+  height: 100%;
+}
+
+/* Override some vanilla-jsoneditor styles for dark mode compatibility */
+:deep(.jse-main) {
+  --jse-theme-color: var(--p-primary-color, #10b981);
+  --jse-theme-color-highlight: var(--p-primary-100, #d1fae5);
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,83 @@
+/**
+ * qdadm - Components exports
+ */
+
+// Layout
+export { default as AppLayout } from './layout/AppLayout.vue'
+export { default as BaseLayout } from './layout/BaseLayout.vue'
+export { default as PageLayout } from './layout/PageLayout.vue'
+export { default as PageHeader } from './layout/PageHeader.vue'
+export { default as Breadcrumb } from './layout/Breadcrumb.vue'
+export { default as PageNav } from './layout/PageNav.vue'
+export { default as Zone } from './layout/Zone.vue'
+export { default as SidebarBox } from './layout/SidebarBox.vue'
+
+// Default zone components
+export { default as DefaultHeader } from './layout/defaults/DefaultHeader.vue'
+export { default as DefaultMenu } from './layout/defaults/DefaultMenu.vue'
+export { default as DefaultFooter } from './layout/defaults/DefaultFooter.vue'
+export { default as DefaultUserInfo } from './layout/defaults/DefaultUserInfo.vue'
+export { default as DefaultBreadcrumb } from './layout/defaults/DefaultBreadcrumb.vue'
+
+// Item (shared between edit and show)
+export { default as FieldGroups } from './item/FieldGroups.vue'
+
+// Edit (form pages)
+export { default as FormPage } from './edit/FormPage.vue'
+export { default as FormField } from './edit/FormField.vue'
+export { default as FormInput } from './edit/FormInput.vue'
+export { default as FormActions } from './edit/FormActions.vue'
+export { default as FormTabs } from './edit/FormTabs.vue' // Deprecated: use FieldGroups with layout="tabs"
+export { default as FormTab } from './edit/FormTab.vue' // Deprecated: use FieldGroups with layout="tabs"
+export { default as LookupField } from './edit/LookupField.vue'
+export { default as LookupPickerDialog } from './edit/LookupPickerDialog.vue'
+
+// Show (read-only detail pages)
+export { default as ShowPage } from './show/ShowPage.vue'
+export { default as ShowField } from './show/ShowField.vue'
+export { default as ShowDisplay } from './show/ShowDisplay.vue'
+
+// Lists
+export { default as ListPage } from './lists/ListPage.vue'
+export { default as ActionButtons } from './lists/ActionButtons.vue'
+export { default as ActionColumn } from './lists/ActionColumn.vue'
+export { default as FilterBar } from './lists/FilterBar.vue'
+
+// Editors (vanilla-jsoneditor free)
+export { default as KeyValueEditor } from './editors/KeyValueEditor.vue'
+export { default as LanguageEditor } from './editors/LanguageEditor.vue'
+export { default as ScopeEditor } from './editors/ScopeEditor.vue'
+export { default as PermissionEditor } from './editors/PermissionEditor.vue'
+export { default as JsonEditorFoldable } from './editors/JsonEditorFoldable.vue'
+export { default as JsonViewer } from './editors/JsonViewer.vue'
+
+// NOTE: VanillaJsonEditor and JsonStructuredField require vanilla-jsoneditor
+// Import from '@quazardous/qdadm/editors' instead:
+// import { VanillaJsonEditor, JsonStructuredField } from '@quazardous/qdadm/editors'
+
+// Dialogs
+export { default as SimpleDialog } from './dialogs/SimpleDialog.vue'
+export { default as MultiStepDialog } from './dialogs/MultiStepDialog.vue'
+export { default as BulkStatusDialog } from './dialogs/BulkStatusDialog.vue'
+export { default as UnsavedChangesDialog } from './dialogs/UnsavedChangesDialog.vue'
+
+// Display
+export { default as CardsGrid } from './display/CardsGrid.vue'
+export { default as RichCardsGrid } from './display/RichCardsGrid.vue'
+export { default as CopyableId } from './display/CopyableId.vue'
+export { default as EmptyState } from './display/EmptyState.vue'
+export { default as IntensityBar } from './display/IntensityBar.vue'
+export { default as BoolCell } from './BoolCell.vue'
+export { default as SeverityTag } from './SeverityTag.vue'
+export { default as InfoBanner } from './InfoBanner.vue'
+export { default as BannerZone } from './display/BannerZone.vue'
+
+// Pages
+export { default as LoginPage } from './pages/LoginPage.vue'
+export { default as NotFoundPage } from './pages/NotFoundPage.vue'
+
+// Host integration helper — render in a host App.vue when using
+// `Kernel({ existingApp })` so qdadm's DOM extras (Toast,
+// ToastListener, DebugBar) appear without the Kernel-managed
+// WrappedRoot.
+export { default as QdadmRoot } from './QdadmRoot.vue'