@quazardous/qdadm 1.19.3

package/src/components/editors/JsonStructuredField.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+/**
+ * JsonStructuredField - Reusable field with structured/JSON toggle
+ *
+ * A form field that shows either a structured view (slot) or raw JSON editor.
+ * Uses a mini SelectButton to toggle between views.
+ *
+ * Usage patterns:
+ *
+ * 1. Simple - same v-model for both views:
+ * <JsonStructuredField v-model="myData">
+ *   <MyStructuredEditor v-model="myData" />
+ * </JsonStructuredField>
+ *
+ * 2. With separate JSON binding (for complex computed mappings):
+ * <JsonStructuredField v-model="myData" :jsonValue="jsonComputed" @update:jsonValue="onJsonUpdate">
+ *   <MyStructuredEditor v-model="myData" />
+ * </JsonStructuredField>
+ *
+ * 3. Controlled mode (parent manages viewMode):
+ * <JsonStructuredField v-model="myData" v-model:mode="viewMode">
+ *   <MyStructuredEditor v-model="myData" />
+ * </JsonStructuredField>
+ *
+ * Props:
+ * - modelValue: The JSON object to edit (used for JSON view if jsonValue not provided)
+ * - jsonValue: Optional separate binding for JSON editor (for complex computed mappings)
+ * - mode: Optional v-model for view mode ('structured' or 'json')
+ * - label: Optional label for the field
+ * - jsonHeight: Height of JSON editor (default: 400px)
+ * - jsonMode: Mode for JSON editor - 'tree' or 'text' (default: 'text')
+ * - defaultMode: Initial mode if not using v-model:mode (default: 'structured')
+ * - showToggle: Whether to show the toggle (default: true, useful to hide in nested usage)
+ * - guardInvalidJson: Block switching to structured view while JSON is invalid (default: true)
+ * - invalidJsonMessage: Error message shown when JSON is invalid (default: 'Invalid JSON — fix errors before switching views')
+ *
+ * Events:
+ * - update:modelValue, update:jsonValue, update:mode: standard v-model
+ * - json-error: emitted with true when JSON becomes invalid, false when valid again
+ */
+
+import { ref, computed, watch } from 'vue'
+import SelectButton from 'primevue/selectbutton'
+import Message from 'primevue/message'
+import VanillaJsonEditor from './VanillaJsonEditor.vue'
+import type { Mode } from 'vanilla-jsoneditor'
+
+type JsonValue = Record<string, unknown> | unknown[] | string | null
+type ViewMode = 'structured' | 'json'
+
+interface ViewModeOption {
+  label: string
+  value: ViewMode
+  icon: string
+}
+
+interface Props {
+  modelValue?: JsonValue
+  jsonValue?: JsonValue | null
+  mode?: ViewMode | null
+  label?: string | null
+  jsonHeight?: string
+  jsonMode?: Mode
+  defaultMode?: ViewMode
+  showToggle?: boolean
+  guardInvalidJson?: boolean
+  invalidJsonMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({}),
+  jsonValue: null,
+  mode: null,
+  label: null,
+  jsonHeight: '400px',
+  jsonMode: 'text' as Mode,
+  defaultMode: 'structured',
+  showToggle: true,
+  guardInvalidJson: true,
+  invalidJsonMessage: 'Invalid JSON — fix errors before switching views'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: JsonValue]
+  'update:jsonValue': [value: JsonValue]
+  'update:mode': [value: ViewMode]
+  'json-error': [hasError: boolean]
+}>()
+
+// Internal view mode (used when not controlled externally)
+const internalMode = ref<ViewMode>(props.defaultMode)
+
+// Invalid JSON state, tracked from VanillaJsonEditor error/update events
+const hasJsonError = ref<boolean>(false)
+
+// Computed view mode - use external if provided, else internal
+const viewMode = computed<ViewMode>({
+  get: () => props.mode ?? internalMode.value,
+  set: (val: ViewMode) => {
+    // Guard: block json → structured while JSON is invalid
+    if (
+      props.guardInvalidJson &&
+      hasJsonError.value &&
+      (props.mode ?? internalMode.value) === 'json' &&
+      val === 'structured'
+    ) {
+      return
+    }
+    if (props.mode !== null) {
+      emit('update:mode', val)
+    } else {
+      internalMode.value = val
+    }
+  }
+})
+
+const viewModeOptions: ViewModeOption[] = [
+  { label: 'Structured', value: 'structured', icon: 'pi pi-list' },
+  { label: 'JSON', value: 'json', icon: 'pi pi-code' }
+]
+
+// Computed JSON value - use separate jsonValue if provided, else modelValue
+const effectiveJsonValue = computed<JsonValue>(() => {
+  return props.jsonValue !== null ? props.jsonValue : props.modelValue
+})
+
+// Handle JSON editor updates (fires only when JSON is valid)
+function onJsonUpdate(newValue: JsonValue): void {
+  if (hasJsonError.value) {
+    hasJsonError.value = false
+    emit('json-error', false)
+  }
+  if (props.jsonValue !== null) {
+    // Using separate jsonValue binding
+    emit('update:jsonValue', newValue)
+  } else {
+    // Using modelValue for both
+    emit('update:modelValue', newValue)
+  }
+}
+
+// Track invalid JSON state from the editor
+function onJsonError(): void {
+  if (!hasJsonError.value) {
+    hasJsonError.value = true
+    emit('json-error', true)
+  }
+}
+
+// Sync internal mode with prop if it changes
+watch(() => props.mode, (newMode: ViewMode | null | undefined) => {
+  if (newMode !== null && newMode !== undefined) {
+    internalMode.value = newMode
+  }
+})
+</script>
+
+<template>
+  <div class="json-structured-field">
+    <!-- Header with label and mode toggle -->
+    <div v-if="showToggle || label" class="field-header">
+      <label v-if="label" class="field-label">{{ label }}</label>
+      <SelectButton
+        v-if="showToggle"
+        v-model="viewMode"
+        :options="viewModeOptions"
+        optionLabel="label"
+        optionValue="value"
+        :allowEmpty="false"
+        class="mode-toggle"
+      >
+        <template #option="{ option }">
+          <i :class="option.icon"></i>
+          <span class="toggle-label">{{ option.label }}</span>
+        </template>
+      </SelectButton>
+    </div>
+
+    <!-- JSON View -->
+    <div v-if="viewMode === 'json'" class="json-view">
+      <Message
+        v-if="guardInvalidJson && hasJsonError"
+        severity="error"
+        :closable="false"
+        class="json-error"
+      >
+        {{ invalidJsonMessage }}
+      </Message>
+      <VanillaJsonEditor
+        :modelValue="effectiveJsonValue"
+        :mode="jsonMode"
+        :height="jsonHeight"
+        @update:modelValue="onJsonUpdate"
+        @error="onJsonError"
+      />
+    </div>
+
+    <!-- Structured View (slot) -->
+    <div v-else class="structured-view">
+      <slot></slot>
+    </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.).
+ */
+.json-structured-field {
+  width: 100%;
+}
+
+.field-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.field-label {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.mode-toggle {
+  flex-shrink: 0;
+}
+
+/* Smaller toggle buttons */
+.mode-toggle :deep(.p-button) {
+  padding: 0.35rem 0.6rem;
+  font-size: 0.8rem;
+}
+
+.mode-toggle :deep(.p-button i) {
+  font-size: 0.75rem;
+  margin-right: 0.25rem;
+}
+
+.toggle-label {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .toggle-label {
+    display: inline;
+  }
+}
+
+.json-view {
+  margin-top: 0.25rem;
+}
+
+.json-error {
+  margin-bottom: 0.5rem;
+}
+
+.structured-view {
+  margin-top: 0.25rem;
+}
+</style>

package/src/components/editors/JsonViewer.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/**
+ * JsonViewer - Reusable JSON viewer component
+ *
+ * Simple formatted JSON display with syntax highlighting.
+ *
+ * Usage:
+ * <JsonViewer :model-value="jsonData" height="300px" />
+ */
+
+import { computed } from 'vue'
+import { highlightJson } from '../../composables/useJsonSyntax'
+
+type JsonValue = Record<string, unknown> | unknown[] | string | number | boolean | null
+
+interface Props {
+  modelValue?: JsonValue
+  height?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({}),
+  height: '300px'
+})
+
+// Parse value if string
+const parsedValue = computed<JsonValue>(() => {
+  if (typeof props.modelValue === 'string') {
+    try {
+      return JSON.parse(props.modelValue) as JsonValue
+    } catch {
+      return props.modelValue
+    }
+  }
+  return props.modelValue
+})
+
+// Format JSON with syntax highlighting
+const formattedJson = computed<string>(() => {
+  if (parsedValue.value === null || parsedValue.value === undefined) {
+    return '<span class="json-null">null</span>'
+  }
+  return highlightJson(JSON.stringify(parsedValue.value, null, 2))
+})
+</script>
+
+<template>
+  <div class="json-viewer" :style="{ maxHeight: height }">
+    <pre class="json-content" v-html="formattedJson"></pre>
+  </div>
+</template>

package/src/components/editors/KeyValueEditor.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+/**
+ * KeyValueEditor - Reusable component for editing key-value pairs
+ *
+ * Props:
+ * - modelValue: Array of {key, value} objects
+ * - label: Field label
+ * - help: Help text
+ * - keyPlaceholder: Placeholder for key input
+ * - valuePlaceholder: Placeholder for value input (text mode only)
+ * - keySuggestions: Array of strings for autocomplete on key input
+ * - valueType: 'number' (default) or 'text'
+ * - min: Minimum value (default: 0, number mode only)
+ * - max: Maximum value (default: 1, number mode only)
+ * - step: Slider step (default: 0.1, number mode only)
+ * - showSign: Show +/- sign for values (default: false, number mode only)
+ * - colorize: Color negative/positive values (default: false, number mode only)
+ */
+
+import { ref, computed } from 'vue'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import AutoComplete from 'primevue/autocomplete'
+import Slider from 'primevue/slider'
+
+interface KeyValueItem {
+  key: string
+  value: string | number
+}
+
+interface Props {
+  modelValue?: KeyValueItem[]
+  label?: string
+  help?: string
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  keySuggestions?: string[]
+  valueType?: 'number' | 'text'
+  min?: number
+  max?: number
+  step?: number
+  showSign?: boolean
+  colorize?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  label: 'Key-Value Pairs',
+  help: '',
+  keyPlaceholder: 'Key',
+  valuePlaceholder: 'Value',
+  keySuggestions: () => [],
+  valueType: 'number',
+  min: 0,
+  max: 1,
+  step: 0.1,
+  showSign: false,
+  colorize: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: KeyValueItem[]]
+}>()
+
+const items = computed<KeyValueItem[]>({
+  get: () => props.modelValue || [],
+  set: (value: KeyValueItem[]) => emit('update:modelValue', value)
+})
+
+const isTextMode = computed<boolean>(() => props.valueType === 'text')
+const hasKeySuggestions = computed<boolean>(() => props.keySuggestions.length > 0)
+const filteredKeySuggestions = ref<string[]>([])
+
+const newItem = ref<KeyValueItem>({
+  key: '',
+  value: props.valueType === 'text' ? '' : (props.min + props.max) / 2
+})
+
+// Filter key suggestions for autocomplete (exclude already used keys)
+function searchKeys(event: { query: string }): void {
+  const query = event.query.toLowerCase()
+  const usedKeys = items.value.map(item => item.key)
+  filteredKeySuggestions.value = props.keySuggestions
+    .filter(k => !usedKeys.includes(k))
+    .filter(k => k.toLowerCase().includes(query))
+}
+
+function formatValue(value: string | number): string {
+  if (isTextMode.value) {
+    return String(value)
+  }
+  const formatted = Number(value).toFixed(2)
+  if (props.showSign && Number(value) > 0) {
+    return '+' + formatted
+  }
+  return formatted
+}
+
+function addItem(): void {
+  if (!newItem.value.key) return
+  if (isTextMode.value && !newItem.value.value) return
+  const updated = [...items.value, { ...newItem.value }]
+  emit('update:modelValue', updated)
+  newItem.value = {
+    key: '',
+    value: isTextMode.value ? '' : (props.min + props.max) / 2
+  }
+}
+
+function removeItem(index: number): void {
+  const updated = items.value.filter((_, i) => i !== index)
+  emit('update:modelValue', updated)
+}
+
+function updateItemValue(index: number, value: string | number): void {
+  const updated = [...items.value]
+  const item = updated[index]
+  if (item) {
+    updated[index] = { key: item.key, value }
+    emit('update:modelValue', updated)
+  }
+}
+</script>
+
+<template>
+  <div class="form-field">
+    <label>{{ label }}</label>
+    <div class="kv-list">
+      <div v-if="items.length === 0" class="kv-empty">
+        No items added yet
+      </div>
+      <div v-for="(item, index) in items" :key="index" class="kv-item">
+        <span class="kv-key">{{ item.key }}</span>
+        <div class="kv-value-container">
+          <!-- Text mode: show text input -->
+          <template v-if="isTextMode">
+            <InputText
+              :modelValue="String(item.value)"
+              @update:modelValue="(v: string | undefined) => v !== undefined && updateItemValue(index, v)"
+              class="kv-text-input"
+            />
+          </template>
+          <!-- Number mode: show slider -->
+          <template v-else>
+            <span
+              class="kv-value"
+              :class="{
+                negative: colorize && Number(item.value) < 0,
+                positive: colorize && Number(item.value) > 0
+              }"
+            >
+              {{ formatValue(item.value) }}
+            </span>
+            <Slider
+              :modelValue="Number(item.value)"
+              @update:modelValue="(v: number | number[]) => updateItemValue(index, Array.isArray(v) ? v[0] ?? 0 : v)"
+              :min="min"
+              :max="max"
+              :step="step"
+              style="width: 100px"
+            />
+          </template>
+        </div>
+        <Button
+          icon="pi pi-times"
+          severity="danger"
+          text
+          rounded
+          size="small"
+          @click="removeItem(index)"
+        />
+      </div>
+    </div>
+    <div class="kv-add">
+      <Button
+        icon="pi pi-plus"
+        @click="addItem"
+        :disabled="!newItem.key || (isTextMode && !newItem.value)"
+        v-tooltip.top="'Add item'"
+      />
+      <!-- With autocomplete suggestions -->
+      <AutoComplete
+        v-if="hasKeySuggestions"
+        v-model="newItem.key"
+        :suggestions="filteredKeySuggestions"
+        @complete="searchKeys"
+        :placeholder="keyPlaceholder"
+        class="kv-add-input"
+        @keyup.enter="addItem"
+      />
+      <!-- Without suggestions: plain input -->
+      <InputText
+        v-else
+        v-model="newItem.key"
+        :placeholder="keyPlaceholder"
+        class="kv-add-input"
+        @keyup.enter="addItem"
+      />
+      <!-- Text mode: show text input for value -->
+      <template v-if="isTextMode">
+        <InputText
+          :modelValue="String(newItem.value)"
+          @update:modelValue="(v: string | undefined) => newItem.value = v ?? ''"
+          :placeholder="valuePlaceholder"
+          class="kv-add-value"
+          @keyup.enter="addItem"
+        />
+      </template>
+      <!-- Number mode: show slider -->
+      <template v-else>
+        <div class="kv-slider">
+          <span>{{ formatValue(newItem.value) }}</span>
+          <Slider
+            :modelValue="Number(newItem.value)"
+            @update:modelValue="(v: number | number[]) => newItem.value = Array.isArray(v) ? v[0] ?? 0 : v"
+            :min="min"
+            :max="max"
+            :step="step"
+            style="width: 100px"
+          />
+        </div>
+      </template>
+    </div>
+    <small v-if="help" class="form-field-help">{{ help }}</small>
+  </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.).
+ */
+.kv-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.kv-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--p-surface-50);
+  border-radius: 0.25rem;
+}
+
+.kv-key {
+  font-weight: 500;
+  min-width: 120px;
+}
+
+.kv-value-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.kv-value {
+  min-width: 50px;
+  text-align: right;
+  font-family: monospace;
+}
+
+.kv-value.negative {
+  color: var(--p-red-500);
+}
+
+.kv-value.positive {
+  color: var(--p-green-500);
+}
+
+.kv-add {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kv-add-input {
+  flex: 1;
+}
+
+.kv-add-value {
+  flex: 1;
+  min-width: 150px;
+}
+
+.kv-text-input {
+  flex: 1;
+}
+
+.kv-slider {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kv-slider span {
+  min-width: 50px;
+  text-align: right;
+  font-family: monospace;
+}
+
+.kv-empty {
+  padding: 0.75rem;
+  color: var(--p-text-secondary);
+  font-style: italic;
+  background: var(--p-surface-50);
+  border-radius: 0.25rem;
+  text-align: center;
+}
+</style>