qdadm 0.13.0

package/src/components/editors/JsonViewer.vue

@@ -0,0 +1,91 @@
+<script setup>
+/**
+ * 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'
+
+const props = defineProps({
+  modelValue: {
+    type: [Object, Array, String, null],
+    default: () => ({})
+  },
+  height: {
+    type: String,
+    default: '300px'
+  }
+})
+
+// Parse value if string
+const parsedValue = computed(() => {
+  if (typeof props.modelValue === 'string') {
+    try {
+      return JSON.parse(props.modelValue)
+    } catch {
+      return props.modelValue
+    }
+  }
+  return props.modelValue
+})
+
+// Format JSON with syntax highlighting
+const formattedJson = computed(() => {
+  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>
+
+<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

@@ -0,0 +1,314 @@
+<script setup>
+/**
+ * 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'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  label: {
+    type: String,
+    default: 'Key-Value Pairs'
+  },
+  help: {
+    type: String,
+    default: ''
+  },
+  keyPlaceholder: {
+    type: String,
+    default: 'Key'
+  },
+  valuePlaceholder: {
+    type: String,
+    default: 'Value'
+  },
+  keySuggestions: {
+    type: Array,
+    default: () => []
+  },
+  valueType: {
+    type: String,
+    default: 'number',
+    validator: (v) => ['number', 'text'].includes(v)
+  },
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 1
+  },
+  step: {
+    type: Number,
+    default: 0.1
+  },
+  showSign: {
+    type: Boolean,
+    default: false
+  },
+  colorize: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const items = computed({
+  get: () => props.modelValue || [],
+  set: (value) => emit('update:modelValue', value)
+})
+
+const isTextMode = computed(() => props.valueType === 'text')
+const hasKeySuggestions = computed(() => props.keySuggestions.length > 0)
+const filteredKeySuggestions = ref([])
+
+const newItem = ref({
+  key: '',
+  value: props.valueType === 'text' ? '' : (props.min + props.max) / 2
+})
+
+// Filter key suggestions for autocomplete (exclude already used keys)
+function searchKeys(event) {
+  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) {
+  if (isTextMode.value) {
+    return value
+  }
+  const formatted = Number(value).toFixed(2)
+  if (props.showSign && value > 0) {
+    return '+' + formatted
+  }
+  return formatted
+}
+
+function addItem() {
+  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) {
+  const updated = items.value.filter((_, i) => i !== index)
+  emit('update:modelValue', updated)
+}
+
+function updateItemValue(index, value) {
+  const updated = [...items.value]
+  updated[index] = { ...updated[index], 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="item.value"
+              @update:modelValue="(v) => updateItemValue(index, v)"
+              class="kv-text-input"
+            />
+          </template>
+          <!-- Number mode: show slider -->
+          <template v-else>
+            <span
+              class="kv-value"
+              :class="{
+                negative: colorize && item.value < 0,
+                positive: colorize && item.value > 0
+              }"
+            >
+              {{ formatValue(item.value) }}
+            </span>
+            <Slider
+              :modelValue="item.value"
+              @update:modelValue="(v) => updateItemValue(index, 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
+          v-model="newItem.value"
+          :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 v-model="newItem.value" :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>
+.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>

package/src/components/editors/LanguageEditor.vue

@@ -0,0 +1,245 @@
+<script setup>
+/**
+ * LanguageEditor - Reusable component for editing language capabilities
+ *
+ * Props:
+ * - modelValue: Array of {code, fluency, primary} objects
+ * - label: Field label
+ * - help: Help text
+ */
+
+import { ref, computed } from 'vue'
+import Button from 'primevue/button'
+import InputText from 'primevue/inputtext'
+import Slider from 'primevue/slider'
+import Checkbox from 'primevue/checkbox'
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  label: {
+    type: String,
+    default: 'Languages'
+  },
+  help: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const languages = computed({
+  get: () => props.modelValue || [],
+  set: (value) => emit('update:modelValue', value)
+})
+
+const newLanguage = ref({ code: '', fluency: 0.8, primary: false })
+
+function addLanguage() {
+  if (!newLanguage.value.code) return
+  let updated = [...languages.value]
+
+  // If this is the first language, make it primary
+  if (updated.length === 0) {
+    newLanguage.value.primary = true
+  }
+
+  // If new language is primary, remove primary from others
+  if (newLanguage.value.primary) {
+    updated = updated.map(l => ({ ...l, primary: false }))
+  }
+
+  updated.push({ ...newLanguage.value })
+  emit('update:modelValue', updated)
+  newLanguage.value = { code: '', fluency: 0.8, primary: false }
+}
+
+function removeLanguage(index) {
+  const updated = [...languages.value]
+  const wasPrimary = updated[index].primary
+  updated.splice(index, 1)
+  // If we removed the primary, make the first one primary
+  if (wasPrimary && updated.length > 0) {
+    updated[0].primary = true
+  }
+  emit('update:modelValue', updated)
+}
+
+function setPrimaryLanguage(index) {
+  const updated = languages.value.map((l, i) => ({
+    ...l,
+    primary: i === index
+  }))
+  emit('update:modelValue', updated)
+}
+
+function updateFluency(index, fluency) {
+  const updated = [...languages.value]
+  updated[index] = { ...updated[index], fluency }
+  emit('update:modelValue', updated)
+}
+</script>
+
+<template>
+  <div class="form-field">
+    <label>{{ label }}</label>
+    <div class="lang-list">
+      <div v-if="languages.length === 0" class="lang-empty">
+        No languages added yet
+      </div>
+      <div v-for="(lang, index) in languages" :key="index" class="lang-item">
+        <span class="lang-code">{{ lang.code.toUpperCase() }}</span>
+        <div class="lang-fluency-container">
+          <span class="lang-fluency">{{ (lang.fluency * 100).toFixed(0) }}%</span>
+          <Slider
+            :modelValue="lang.fluency"
+            @update:modelValue="(v) => updateFluency(index, v)"
+            :min="0.1"
+            :max="1"
+            :step="0.1"
+            style="width: 100px"
+          />
+        </div>
+        <Button
+          v-if="lang.primary"
+          icon="pi pi-star-fill"
+          severity="warning"
+          text
+          rounded
+          size="small"
+          v-tooltip.top="'Primary language'"
+        />
+        <Button
+          v-else
+          icon="pi pi-star"
+          severity="secondary"
+          text
+          rounded
+          size="small"
+          @click="setPrimaryLanguage(index)"
+          v-tooltip.top="'Set as primary'"
+        />
+        <Button
+          icon="pi pi-times"
+          severity="danger"
+          text
+          rounded
+          size="small"
+          @click="removeLanguage(index)"
+        />
+      </div>
+    </div>
+    <div class="lang-add">
+      <Button
+        icon="pi pi-plus"
+        @click="addLanguage"
+        :disabled="!newLanguage.code"
+        v-tooltip.top="'Add language'"
+      />
+      <InputText
+        v-model="newLanguage.code"
+        placeholder="Code (e.g., en, fr)"
+        class="lang-add-input"
+        @keyup.enter="addLanguage"
+      />
+      <div class="lang-slider">
+        <span>{{ (newLanguage.fluency * 100).toFixed(0) }}%</span>
+        <Slider v-model="newLanguage.fluency" :min="0.1" :max="1" :step="0.1" style="width: 80px" />
+      </div>
+      <div class="lang-primary-toggle">
+        <Checkbox v-model="newLanguage.primary" :binary="true" inputId="newLangPrimary" />
+        <label for="newLangPrimary" class="lang-primary-label">Primary</label>
+      </div>
+    </div>
+    <small v-if="help" class="form-field-help">{{ help }}</small>
+  </div>
+</template>
+
+<style scoped>
+.lang-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.lang-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--p-surface-50);
+  border-radius: 0.25rem;
+}
+
+.lang-code {
+  font-weight: 600;
+  min-width: 40px;
+  padding: 0.25rem 0.5rem;
+  background: var(--p-primary-100);
+  color: var(--p-primary-700);
+  border-radius: 0.25rem;
+  text-align: center;
+}
+
+.lang-fluency-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.lang-fluency {
+  min-width: 40px;
+  text-align: right;
+  font-family: monospace;
+  color: var(--p-text-secondary);
+}
+
+.lang-add {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lang-add-input {
+  flex: 1;
+  max-width: 150px;
+}
+
+.lang-slider {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.lang-slider span {
+  min-width: 40px;
+  text-align: right;
+  font-family: monospace;
+}
+
+.lang-empty {
+  padding: 0.75rem;
+  color: var(--p-text-secondary);
+  font-style: italic;
+  background: var(--p-surface-50);
+  border-radius: 0.25rem;
+  text-align: center;
+}
+
+.lang-primary-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.lang-primary-label {
+  font-size: 0.875rem;
+  color: var(--p-text-secondary);
+  cursor: pointer;
+}
+</style>