@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/ContextPanel.vue

@@ -1,66 +1,66 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-defineProps({
-    visible: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['update:visible']);
-
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-
-function close() {
-    emit('update:visible', false);
-}
-</script>
-
-<template>
-    <transition
-        enter-active-class="transition-all duration-300 ease-out"
-        leave-active-class="transition-all duration-200 ease-in"
-        enter-from-class="translate-x-full opacity-0"
-        enter-to-class="translate-x-0 opacity-100"
-        leave-from-class="translate-x-0 opacity-100"
-        leave-to-class="translate-x-full opacity-0"
-    >
-        <div
-            v-if="visible"
-            :class="[
-                'fixed inset-y-0 right-0 z-40 w-80 overflow-y-auto border-l shadow-2xl backdrop-blur-sm lg:static lg:block lg:overflow-visible lg:shadow-none',
-                escDark ? 'border-white/[0.06] bg-neutral-900/95' : 'border-gray-200 bg-white',
-            ]"
-        >
-            <!-- Header -->
-            <div
-                :class="[
-                    'flex items-center justify-between border-b px-4 py-3',
-                    escDark ? 'border-white/[0.06]' : 'border-gray-200',
-                ]"
-            >
-                <h3 :class="['text-sm font-semibold', escDark ? 'text-neutral-200' : 'text-gray-900']">Context</h3>
-                <button
-                    type="button"
-                    :class="[
-                        'rounded p-1 lg:hidden',
-                        escDark
-                            ? 'text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300'
-                            : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
-                    ]"
-                    @click="close"
-                >
-                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
-            </div>
-
-            <!-- Sections -->
-            <div>
-                <slot />
-            </div>
-        </div>
-    </transition>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+defineProps({
+    visible: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:visible']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+function close() {
+    emit('update:visible', false);
+}
+</script>
+
+<template>
+    <transition
+        enter-active-class="transition-all duration-300 ease-out"
+        leave-active-class="transition-all duration-200 ease-in"
+        enter-from-class="translate-x-full opacity-0"
+        enter-to-class="translate-x-0 opacity-100"
+        leave-from-class="translate-x-0 opacity-100"
+        leave-to-class="translate-x-full opacity-0"
+    >
+        <div
+            v-if="visible"
+            :class="[
+                'fixed inset-y-0 right-0 z-40 w-80 overflow-y-auto border-l shadow-2xl backdrop-blur-sm lg:static lg:block lg:overflow-visible lg:shadow-none',
+                escDark ? 'border-white/[0.06] bg-neutral-900/95' : 'border-gray-200 bg-white',
+            ]"
+        >
+            <!-- Header -->
+            <div
+                :class="[
+                    'flex items-center justify-between border-b px-4 py-3',
+                    escDark ? 'border-white/[0.06]' : 'border-gray-200',
+                ]"
+            >
+                <h3 :class="['text-sm font-semibold', escDark ? 'text-neutral-200' : 'text-gray-900']">Context</h3>
+                <button
+                    type="button"
+                    :class="[
+                        'rounded p-1 lg:hidden',
+                        escDark
+                            ? 'text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300'
+                            : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                    ]"
+                    @click="close"
+                >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Sections -->
+            <div>
+                <slot />
+            </div>
+        </div>
+    </transition>
+</template>

package/src/components/ContextPanelSection.vue

@@ -1,65 +1,65 @@
-<script setup>
-import { ref, inject, computed } from 'vue';
-
-const props = defineProps({
-    title: { type: String, required: true },
-    icon: { type: String, default: '' },
-    defaultOpen: { type: Boolean, default: true },
-});
-
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-
-const isOpen = ref(props.defaultOpen);
-</script>
-
-<template>
-    <div :class="['border-b last:border-b-0', escDark ? 'border-white/[0.06]' : 'border-gray-200']">
-        <button
-            type="button"
-            :aria-expanded="isOpen"
-            :class="[
-                'flex w-full items-center gap-2 px-4 py-3 text-left transition-colors',
-                escDark ? 'hover:bg-white/[0.02]' : 'hover:bg-gray-50',
-            ]"
-            @click="isOpen = !isOpen"
-        >
-            <svg
-                v-if="icon"
-                :class="['h-4 w-4 shrink-0', escDark ? 'text-neutral-500' : 'text-gray-400']"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                viewBox="0 0 24 24"
-            >
-                <path stroke-linecap="round" stroke-linejoin="round" :d="icon" />
-            </svg>
-            <span
-                :class="[
-                    'flex-1 text-xs font-semibold uppercase tracking-wider',
-                    escDark ? 'text-neutral-400' : 'text-gray-500',
-                ]"
-            >
-                {{ title }}
-            </span>
-            <svg
-                :class="[
-                    'h-4 w-4 transition-transform',
-                    escDark ? 'text-neutral-600' : 'text-gray-400',
-                    isOpen ? 'rotate-180' : '',
-                ]"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.5"
-                viewBox="0 0 24 24"
-            >
-                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-            </svg>
-        </button>
-        <div v-show="isOpen" class="px-4 pb-4">
-            <slot />
-        </div>
-    </div>
-</template>
+<script setup>
+import { ref, inject, computed } from 'vue';
+
+const props = defineProps({
+    title: { type: String, required: true },
+    icon: { type: String, default: '' },
+    defaultOpen: { type: Boolean, default: true },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const isOpen = ref(props.defaultOpen);
+</script>
+
+<template>
+    <div :class="['border-b last:border-b-0', escDark ? 'border-white/[0.06]' : 'border-gray-200']">
+        <button
+            type="button"
+            :aria-expanded="isOpen"
+            :class="[
+                'flex w-full items-center gap-2 px-4 py-3 text-left transition-colors',
+                escDark ? 'hover:bg-white/[0.02]' : 'hover:bg-gray-50',
+            ]"
+            @click="isOpen = !isOpen"
+        >
+            <svg
+                v-if="icon"
+                :class="['h-4 w-4 shrink-0', escDark ? 'text-neutral-500' : 'text-gray-400']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" :d="icon" />
+            </svg>
+            <span
+                :class="[
+                    'flex-1 text-xs font-semibold uppercase tracking-wider',
+                    escDark ? 'text-neutral-400' : 'text-gray-500',
+                ]"
+            >
+                {{ title }}
+            </span>
+            <svg
+                :class="[
+                    'h-4 w-4 transition-transform',
+                    escDark ? 'text-neutral-600' : 'text-gray-400',
+                    isOpen ? 'rotate-180' : '',
+                ]"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div v-show="isOpen" class="px-4 pb-4">
+            <slot />
+        </div>
+    </div>
+</template>

package/src/components/CustomFieldRenderer.vue

@@ -1,159 +1,159 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-    fields: { type: Array, required: true },
-    modelValue: { type: Object, default: () => ({}) },
-    errors: { type: Object, default: () => ({}) },
-    conditions: { type: Array, default: () => [] },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-function updateField(name, value) {
-    emit('update:modelValue', { ...props.modelValue, [name]: value });
-}
-
-function toggleMultiSelect(name, option) {
-    const current = props.modelValue[name] || [];
-    const idx = current.indexOf(option);
-    const updated = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, option];
-    updateField(name, updated);
-}
-
-const sortedFields = computed(() => [...props.fields].sort((a, b) => (a.position || 0) - (b.position || 0)));
-
-/**
- * Evaluate whether a field should be visible based on conditions.
- * Conditions can come from the `conditions` prop or from the field's own `conditions` property.
- */
-function isFieldVisible(field) {
-    // Merge global conditions and field-level conditions
-    const allConditions = [
-        ...props.conditions.filter((c) => c.target_field === field.name || c.target_field === field.slug),
-        ...(field.conditions || []).filter((c) => c.target_field === field.name || c.target_field === field.slug),
-    ];
-
-    // If no conditions target this field, it's always visible
-    if (allConditions.length === 0) {
-        return true;
-    }
-
-    // All conditions must be met (AND logic)
-    return allConditions.every((condition) => {
-        const currentValue = props.modelValue[condition.field];
-
-        switch (condition.operator) {
-            case 'equals':
-                return String(currentValue || '') === String(condition.value || '');
-            case 'not_equals':
-                return String(currentValue || '') !== String(condition.value || '');
-            case 'contains':
-                return String(currentValue || '').includes(String(condition.value || ''));
-            case 'is_empty':
-                return (
-                    !currentValue || currentValue === '' || (Array.isArray(currentValue) && currentValue.length === 0)
-                );
-            case 'is_not_empty':
-                return (
-                    currentValue && currentValue !== '' && !(Array.isArray(currentValue) && currentValue.length === 0)
-                );
-            default:
-                return true;
-        }
-    });
-}
-</script>
-
-<template>
-    <div class="space-y-4">
-        <div v-for="field in sortedFields" v-show="isFieldVisible(field)" :key="field.id">
-            <label class="block text-sm font-medium text-neutral-300">
-                {{ field.label || field.name }}
-                <span v-if="field.required" class="text-rose-400">*</span>
-            </label>
-            <p v-if="field.description" class="mt-0.5 text-xs text-neutral-500">{{ field.description }}</p>
-
-            <!-- Text -->
-            <input
-                v-if="field.type === 'text'"
-                type="text"
-                :value="modelValue[field.name] || ''"
-                :placeholder="field.placeholder"
-                :required="field.required"
-                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
-                @input="updateField(field.name, $event.target.value)"
-            />
-
-            <!-- Textarea -->
-            <textarea
-                v-else-if="field.type === 'textarea'"
-                :value="modelValue[field.name] || ''"
-                :placeholder="field.placeholder"
-                :required="field.required"
-                rows="3"
-                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
-                @input="updateField(field.name, $event.target.value)"
-            ></textarea>
-
-            <!-- Number -->
-            <input
-                v-else-if="field.type === 'number'"
-                type="number"
-                :value="modelValue[field.name] || ''"
-                :placeholder="field.placeholder"
-                :required="field.required"
-                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
-                @input="updateField(field.name, $event.target.value)"
-            />
-
-            <!-- Date -->
-            <input
-                v-else-if="field.type === 'date'"
-                type="date"
-                :value="modelValue[field.name] || ''"
-                :required="field.required"
-                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
-                @input="updateField(field.name, $event.target.value)"
-            />
-
-            <!-- Checkbox -->
-            <label v-else-if="field.type === 'checkbox'" class="mt-1 flex items-center gap-2">
-                <input
-                    type="checkbox"
-                    :checked="!!modelValue[field.name]"
-                    class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
-                    @change="updateField(field.name, $event.target.checked)"
-                />
-                <span class="text-sm text-neutral-300">{{ field.placeholder || 'Yes' }}</span>
-            </label>
-
-            <!-- Select -->
-            <select
-                v-else-if="field.type === 'select'"
-                :value="modelValue[field.name] || ''"
-                :required="field.required"
-                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
-                @change="updateField(field.name, $event.target.value)"
-            >
-                <option value="" disabled class="text-neutral-500">{{ field.placeholder || 'Select...' }}</option>
-                <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
-            </select>
-
-            <!-- Multi-select (checkboxes) -->
-            <div v-else-if="field.type === 'multi_select'" class="mt-1 space-y-1">
-                <label v-for="opt in field.options" :key="opt" class="flex items-center gap-2">
-                    <input
-                        type="checkbox"
-                        :checked="(modelValue[field.name] || []).includes(opt)"
-                        class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
-                        @change="toggleMultiSelect(field.name, opt)"
-                    />
-                    <span class="text-sm text-neutral-300">{{ opt }}</span>
-                </label>
-            </div>
-
-            <div v-if="errors[field.name]" class="mt-1 text-sm text-rose-400">{{ errors[field.name] }}</div>
-        </div>
-    </div>
-</template>
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    fields: { type: Array, required: true },
+    modelValue: { type: Object, default: () => ({}) },
+    errors: { type: Object, default: () => ({}) },
+    conditions: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function updateField(name, value) {
+    emit('update:modelValue', { ...props.modelValue, [name]: value });
+}
+
+function toggleMultiSelect(name, option) {
+    const current = props.modelValue[name] || [];
+    const idx = current.indexOf(option);
+    const updated = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, option];
+    updateField(name, updated);
+}
+
+const sortedFields = computed(() => [...props.fields].sort((a, b) => (a.position || 0) - (b.position || 0)));
+
+/**
+ * Evaluate whether a field should be visible based on conditions.
+ * Conditions can come from the `conditions` prop or from the field's own `conditions` property.
+ */
+function isFieldVisible(field) {
+    // Merge global conditions and field-level conditions
+    const allConditions = [
+        ...props.conditions.filter((c) => c.target_field === field.name || c.target_field === field.slug),
+        ...(field.conditions || []).filter((c) => c.target_field === field.name || c.target_field === field.slug),
+    ];
+
+    // If no conditions target this field, it's always visible
+    if (allConditions.length === 0) {
+        return true;
+    }
+
+    // All conditions must be met (AND logic)
+    return allConditions.every((condition) => {
+        const currentValue = props.modelValue[condition.field];
+
+        switch (condition.operator) {
+            case 'equals':
+                return String(currentValue || '') === String(condition.value || '');
+            case 'not_equals':
+                return String(currentValue || '') !== String(condition.value || '');
+            case 'contains':
+                return String(currentValue || '').includes(String(condition.value || ''));
+            case 'is_empty':
+                return (
+                    !currentValue || currentValue === '' || (Array.isArray(currentValue) && currentValue.length === 0)
+                );
+            case 'is_not_empty':
+                return (
+                    currentValue && currentValue !== '' && !(Array.isArray(currentValue) && currentValue.length === 0)
+                );
+            default:
+                return true;
+        }
+    });
+}
+</script>
+
+<template>
+    <div class="space-y-4">
+        <div v-for="field in sortedFields" v-show="isFieldVisible(field)" :key="field.id">
+            <label class="block text-sm font-medium text-neutral-300">
+                {{ field.label || field.name }}
+                <span v-if="field.required" class="text-rose-400">*</span>
+            </label>
+            <p v-if="field.description" class="mt-0.5 text-xs text-neutral-500">{{ field.description }}</p>
+
+            <!-- Text -->
+            <input
+                v-if="field.type === 'text'"
+                type="text"
+                :value="modelValue[field.name] || ''"
+                :placeholder="field.placeholder"
+                :required="field.required"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="updateField(field.name, $event.target.value)"
+            />
+
+            <!-- Textarea -->
+            <textarea
+                v-else-if="field.type === 'textarea'"
+                :value="modelValue[field.name] || ''"
+                :placeholder="field.placeholder"
+                :required="field.required"
+                rows="3"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="updateField(field.name, $event.target.value)"
+            ></textarea>
+
+            <!-- Number -->
+            <input
+                v-else-if="field.type === 'number'"
+                type="number"
+                :value="modelValue[field.name] || ''"
+                :placeholder="field.placeholder"
+                :required="field.required"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="updateField(field.name, $event.target.value)"
+            />
+
+            <!-- Date -->
+            <input
+                v-else-if="field.type === 'date'"
+                type="date"
+                :value="modelValue[field.name] || ''"
+                :required="field.required"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="updateField(field.name, $event.target.value)"
+            />
+
+            <!-- Checkbox -->
+            <label v-else-if="field.type === 'checkbox'" class="mt-1 flex items-center gap-2">
+                <input
+                    type="checkbox"
+                    :checked="!!modelValue[field.name]"
+                    class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                    @change="updateField(field.name, $event.target.checked)"
+                />
+                <span class="text-sm text-neutral-300">{{ field.placeholder || 'Yes' }}</span>
+            </label>
+
+            <!-- Select -->
+            <select
+                v-else-if="field.type === 'select'"
+                :value="modelValue[field.name] || ''"
+                :required="field.required"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @change="updateField(field.name, $event.target.value)"
+            >
+                <option value="" disabled class="text-neutral-500">{{ field.placeholder || 'Select...' }}</option>
+                <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
+            </select>
+
+            <!-- Multi-select (checkboxes) -->
+            <div v-else-if="field.type === 'multi_select'" class="mt-1 space-y-1">
+                <label v-for="opt in field.options" :key="opt" class="flex items-center gap-2">
+                    <input
+                        type="checkbox"
+                        :checked="(modelValue[field.name] || []).includes(opt)"
+                        class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                        @change="toggleMultiSelect(field.name, opt)"
+                    />
+                    <span class="text-sm text-neutral-300">{{ opt }}</span>
+                </label>
+            </div>
+
+            <div v-if="errors[field.name]" class="mt-1 text-sm text-rose-400">{{ errors[field.name] }}</div>
+        </div>
+    </div>
+</template>