@escalated-dev/escalated 0.7.0 → 0.8.0

package/src/components/StatusBadge.vue

@@ -1,78 +1,78 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-    status: { type: String, required: true },
-    customStatus: { type: Object, default: null },
-});
-
-const escDark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-
-const darkConfig = {
-    open: { label: 'Open', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
-    in_progress: { label: 'In Progress', color: 'bg-violet-500/10 text-violet-400 ring-1 ring-violet-500/20' },
-    waiting_on_customer: {
-        label: 'Waiting on Customer',
-        color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20',
-    },
-    waiting_on_agent: {
-        label: 'Waiting on Agent',
-        color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20',
-    },
-    escalated: { label: 'Escalated', color: 'bg-rose-500/10 text-rose-400 ring-1 ring-rose-500/20' },
-    resolved: { label: 'Resolved', color: 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20' },
-    closed: { label: 'Closed', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
-    reopened: { label: 'Reopened', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
-};
-
-const lightConfig = {
-    open: { label: 'Open', color: 'bg-blue-100 text-blue-800' },
-    in_progress: { label: 'In Progress', color: 'bg-purple-100 text-purple-800' },
-    waiting_on_customer: { label: 'Waiting on Customer', color: 'bg-yellow-100 text-yellow-800' },
-    waiting_on_agent: { label: 'Waiting on Agent', color: 'bg-orange-100 text-orange-800' },
-    escalated: { label: 'Escalated', color: 'bg-red-100 text-red-800' },
-    resolved: { label: 'Resolved', color: 'bg-green-100 text-green-800' },
-    closed: { label: 'Closed', color: 'bg-gray-100 text-gray-800' },
-    reopened: { label: 'Reopened', color: 'bg-blue-100 text-blue-800' },
-};
-
-const fallback = { label: props.status, color: 'bg-gray-100 text-gray-800' };
-const darkFallback = { label: props.status, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' };
-
-const config = computed(() => {
-    // When a customStatus object is provided, use its label and color directly
-    if (props.customStatus) {
-        const hex = props.customStatus.color || '#6b7280';
-        return {
-            label: props.customStatus.label || props.status,
-            color: '',
-            customColor: hex,
-        };
-    }
-    const map = escDark.value ? darkConfig : lightConfig;
-    const fb = escDark.value ? darkFallback : fallback;
-    return map[props.status] || fb;
-});
-</script>
-
-<template>
-    <span
-        role="status"
-        :aria-label="'Status: ' + config.label"
-        :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]"
-        :style="
-            config.customColor
-                ? {
-                      backgroundColor: config.customColor + '1a',
-                      color: config.customColor,
-                      boxShadow: 'inset 0 0 0 1px ' + config.customColor + '33',
-                  }
-                : {}
-        "
-    >
-        {{ config.label }}
-    </span>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    status: { type: String, required: true },
+    customStatus: { type: Object, default: null },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const darkConfig = {
+    open: { label: 'Open', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+    in_progress: { label: 'In Progress', color: 'bg-violet-500/10 text-violet-400 ring-1 ring-violet-500/20' },
+    waiting_on_customer: {
+        label: 'Waiting on Customer',
+        color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20',
+    },
+    waiting_on_agent: {
+        label: 'Waiting on Agent',
+        color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20',
+    },
+    escalated: { label: 'Escalated', color: 'bg-rose-500/10 text-rose-400 ring-1 ring-rose-500/20' },
+    resolved: { label: 'Resolved', color: 'bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20' },
+    closed: { label: 'Closed', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
+    reopened: { label: 'Reopened', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+};
+
+const lightConfig = {
+    open: { label: 'Open', color: 'bg-blue-100 text-blue-800' },
+    in_progress: { label: 'In Progress', color: 'bg-purple-100 text-purple-800' },
+    waiting_on_customer: { label: 'Waiting on Customer', color: 'bg-yellow-100 text-yellow-800' },
+    waiting_on_agent: { label: 'Waiting on Agent', color: 'bg-orange-100 text-orange-800' },
+    escalated: { label: 'Escalated', color: 'bg-red-100 text-red-800' },
+    resolved: { label: 'Resolved', color: 'bg-green-100 text-green-800' },
+    closed: { label: 'Closed', color: 'bg-gray-100 text-gray-800' },
+    reopened: { label: 'Reopened', color: 'bg-blue-100 text-blue-800' },
+};
+
+const fallback = { label: props.status, color: 'bg-gray-100 text-gray-800' };
+const darkFallback = { label: props.status, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' };
+
+const config = computed(() => {
+    // When a customStatus object is provided, use its label and color directly
+    if (props.customStatus) {
+        const hex = props.customStatus.color || '#6b7280';
+        return {
+            label: props.customStatus.label || props.status,
+            color: '',
+            customColor: hex,
+        };
+    }
+    const map = escDark.value ? darkConfig : lightConfig;
+    const fb = escDark.value ? darkFallback : fallback;
+    return map[props.status] || fb;
+});
+</script>
+
+<template>
+    <span
+        role="status"
+        :aria-label="'Status: ' + config.label"
+        :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]"
+        :style="
+            config.customColor
+                ? {
+                      backgroundColor: config.customColor + '1a',
+                      color: config.customColor,
+                      boxShadow: 'inset 0 0 0 1px ' + config.customColor + '33',
+                  }
+                : {}
+        "
+    >
+        {{ config.label }}
+    </span>
+</template>

package/src/components/TagSelect.vue

@@ -1,84 +1,84 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-
-const props = defineProps({
-    tags: { type: Array, required: true },
-    modelValue: { type: Array, default: () => [] },
-});
-
-const emit = defineEmits(['update:modelValue']);
-const dark = inject(
-    'esc-dark',
-    computed(() => false),
-);
-
-const search = ref('');
-
-const filteredTags = computed(() => {
-    if (!search.value) return props.tags;
-    const q = search.value.toLowerCase();
-    return props.tags.filter((t) => t.name.toLowerCase().includes(q));
-});
-
-function toggle(tagId) {
-    const current = [...props.modelValue];
-    const index = current.indexOf(tagId);
-    if (index >= 0) {
-        current.splice(index, 1);
-    } else {
-        current.push(tagId);
-    }
-    emit('update:modelValue', current);
-}
-
-function isSelected(tagId) {
-    return props.modelValue.includes(tagId);
-}
-</script>
-
-<template>
-    <div>
-        <label
-            :class="['mb-1 block text-xs font-medium', dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-600']"
-            >Tags</label
-        >
-        <input
-            v-model="search"
-            type="text"
-            placeholder="Filter tags..."
-            :class="[
-                'mb-2 w-full rounded-md border px-2 py-1 text-xs focus:outline-none',
-                dark
-                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
-                    : 'border-gray-300 focus:border-blue-500',
-            ]"
-        />
-        <div class="flex flex-wrap gap-1">
-            <button
-                v-for="tag in filteredTags"
-                :key="tag.id"
-                :class="[
-                    'rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
-                    dark
-                        ? isSelected(tag.id)
-                            ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-text)] ring-1 ring-[var(--esc-panel-border-input)]'
-                            : 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-active)]'
-                        : isSelected(tag.id)
-                          ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300'
-                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
-                ]"
-                :style="
-                    tag.color
-                        ? {
-                              backgroundColor: isSelected(tag.id) ? tag.color + '33' : undefined,
-                              color: isSelected(tag.id) ? tag.color : undefined,
-                          }
-                        : {}
-                "
-                @click="toggle(tag.id)"
-            >
-                {{ tag.name }}
-            </button>
-        </div>
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const props = defineProps({
+    tags: { type: Array, required: true },
+    modelValue: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const search = ref('');
+
+const filteredTags = computed(() => {
+    if (!search.value) return props.tags;
+    const q = search.value.toLowerCase();
+    return props.tags.filter((t) => t.name.toLowerCase().includes(q));
+});
+
+function toggle(tagId) {
+    const current = [...props.modelValue];
+    const index = current.indexOf(tagId);
+    if (index >= 0) {
+        current.splice(index, 1);
+    } else {
+        current.push(tagId);
+    }
+    emit('update:modelValue', current);
+}
+
+function isSelected(tagId) {
+    return props.modelValue.includes(tagId);
+}
+</script>
+
+<template>
+    <div>
+        <label
+            :class="['mb-1 block text-xs font-medium', dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-600']"
+            >Tags</label
+        >
+        <input
+            v-model="search"
+            type="text"
+            placeholder="Filter tags..."
+            :class="[
+                'mb-2 w-full rounded-md border px-2 py-1 text-xs focus:outline-none',
+                dark
+                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-surface-alt)] text-[var(--esc-panel-text-secondary)] placeholder-[var(--esc-panel-text-muted)] focus:border-[var(--esc-panel-border-input)] focus:ring-1 focus:ring-[var(--esc-panel-border-input)]'
+                    : 'border-gray-300 focus:border-blue-500',
+            ]"
+        />
+        <div class="flex flex-wrap gap-1">
+            <button
+                v-for="tag in filteredTags"
+                :key="tag.id"
+                :class="[
+                    'rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
+                    dark
+                        ? isSelected(tag.id)
+                            ? 'bg-[var(--esc-panel-active)] text-[var(--esc-panel-text)] ring-1 ring-[var(--esc-panel-border-input)]'
+                            : 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-active)]'
+                        : isSelected(tag.id)
+                          ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300'
+                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200',
+                ]"
+                :style="
+                    tag.color
+                        ? {
+                              backgroundColor: isSelected(tag.id) ? tag.color + '33' : undefined,
+                              color: isSelected(tag.id) ? tag.color : undefined,
+                          }
+                        : {}
+                "
+                @click="toggle(tag.id)"
+            >
+                {{ tag.name }}
+            </button>
+        </div>
+    </div>
+</template>