@escalated-dev/escalated 0.4.0 → 0.6.0

package/src/components/StatusBadge.vue

@@ -1,46 +1,46 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-    status: { type: String, required: true },
-});
-
-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(() => {
-    const map = escDark.value ? darkConfig : lightConfig;
-    const fb = escDark.value ? darkFallback : fallback;
-    return map[props.status] || fb;
-});
-</script>
-
-<template>
-    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
-        {{ config.label }}
-    </span>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    status: { type: String, required: true },
+});
+
+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(() => {
+    const map = escDark.value ? darkConfig : lightConfig;
+    const fb = escDark.value ? darkFallback : fallback;
+    return map[props.status] || fb;
+});
+</script>
+
+<template>
+    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
+        {{ config.label }}
+    </span>
+</template>

package/src/components/TagSelect.vue

@@ -1,53 +1,53 @@
-<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-neutral-500' : '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-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:ring-1 focus:ring-white/10' : 'border-gray-300 focus:border-blue-500']" />
-        <div class="flex flex-wrap gap-1">
-            <button v-for="tag in filteredTags" :key="tag.id" @click="toggle(tag.id)"
-                    :class="['rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
-                             dark
-                                 ? (isSelected(tag.id) ? 'bg-white/[0.12] text-white ring-1 ring-white/20' : 'bg-white/[0.04] text-neutral-500 hover:bg-white/[0.08]')
-                                 : (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 } : {}">
-                {{ 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-neutral-500' : '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-white/10 bg-neutral-950 text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:ring-1 focus:ring-white/10' : 'border-gray-300 focus:border-blue-500']" />
+        <div class="flex flex-wrap gap-1">
+            <button v-for="tag in filteredTags" :key="tag.id" @click="toggle(tag.id)"
+                    :class="['rounded-full px-2 py-0.5 text-xs font-medium transition-colors',
+                             dark
+                                 ? (isSelected(tag.id) ? 'bg-white/[0.12] text-white ring-1 ring-white/20' : 'bg-white/[0.04] text-neutral-500 hover:bg-white/[0.08]')
+                                 : (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 } : {}">
+                {{ tag.name }}
+            </button>
+        </div>
+    </div>
+</template>

package/src/composables/useI18n.js

@@ -0,0 +1,80 @@
+import { ref, computed } from 'vue';
+import locales from '../locales/index.js';
+
+const currentLocale = ref('en');
+const customMessages = ref({});
+
+function resolve(obj, path) {
+    return path.split('.').reduce((acc, key) => acc?.[key], obj);
+}
+
+function applyReplacements(str, replacements) {
+    if (!replacements) return str;
+    return Object.entries(replacements).reduce(
+        (result, [key, value]) => result.replace(new RegExp(`:${key}`, 'g'), value),
+        str,
+    );
+}
+
+export function setLocale(locale) {
+    currentLocale.value = locale;
+}
+
+export function getLocale() {
+    return currentLocale.value;
+}
+
+export function mergeMessages(locale, messages) {
+    customMessages.value = {
+        ...customMessages.value,
+        [locale]: deepMerge(customMessages.value[locale] || {}, messages),
+    };
+}
+
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+        if (
+            source[key] &&
+            typeof source[key] === 'object' &&
+            !Array.isArray(source[key]) &&
+            target[key] &&
+            typeof target[key] === 'object'
+        ) {
+            result[key] = deepMerge(target[key], source[key]);
+        } else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+}
+
+export function useI18n() {
+    const locale = computed(() => currentLocale.value);
+
+    function t(key, replacements) {
+        const lang = currentLocale.value;
+
+        // Try custom messages for current locale
+        const custom = resolve(customMessages.value[lang], key);
+        if (typeof custom === 'string') return applyReplacements(custom, replacements);
+
+        // Try built-in messages for current locale
+        const msg = resolve(locales[lang], key);
+        if (typeof msg === 'string') return applyReplacements(msg, replacements);
+
+        // Fallback to English
+        if (lang !== 'en') {
+            const customEn = resolve(customMessages.value.en, key);
+            if (typeof customEn === 'string') return applyReplacements(customEn, replacements);
+
+            const fallback = resolve(locales.en, key);
+            if (typeof fallback === 'string') return applyReplacements(fallback, replacements);
+        }
+
+        // Return raw key
+        return key;
+    }
+
+    return { t, locale };
+}

package/src/composables/usePluginExtensions.js

@@ -0,0 +1,67 @@
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+
+/**
+ * Composable for reading plugin extensions from Inertia shared props.
+ *
+ * The Laravel backend (escalated-laravel) shares plugin UI extensions via
+ * `$page.props.escalated.plugins`, which contains:
+ * - menuItems: Array of navigation items injected by plugins
+ * - dashboardWidgets: Array of widget definitions for the agent dashboard
+ * - pageComponents: Object mapping slot names to arrays of component definitions
+ *
+ * @returns {Object} Plugin extension data and helper functions
+ */
+export function usePluginExtensions() {
+    const page = usePage();
+
+    const pluginData = computed(() => page.props?.escalated?.plugins || {});
+
+    /**
+     * Menu items injected by plugins, sorted by position.
+     * Each item: { label, route, icon, position, permission, badge, submenu }
+     */
+    const menuItems = computed(() => {
+        const items = pluginData.value.menuItems || [];
+        return [...items].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Dashboard widgets injected by plugins, sorted by position.
+     * Each widget: { id, title, component, plugin, data, position, width }
+     */
+    const dashboardWidgets = computed(() => {
+        const widgets = pluginData.value.dashboardWidgets || [];
+        return [...widgets].sort((a, b) => (a.position || 100) - (b.position || 100));
+    });
+
+    /**
+     * Get plugin components for a specific page slot, sorted by position.
+     *
+     * @param {string} pageName - The page name (e.g. 'dashboard', 'ticket.show')
+     * @param {string} slotName - The slot name (e.g. 'header', 'sidebar', 'footer')
+     * @returns {Array} Sorted array of component definitions for the given slot
+     */
+    function getPageComponents(pageName, slotName) {
+        const key = `${pageName}.${slotName}`;
+        const components = pluginData.value.pageComponents || {};
+        return [...(components[key] || [])].sort((a, b) => (a.position || 100) - (b.position || 100));
+    }
+
+    /**
+     * Check whether any plugins have registered extensions.
+     */
+    const hasPlugins = computed(() => {
+        return menuItems.value.length > 0
+            || dashboardWidgets.value.length > 0
+            || Object.keys(pluginData.value.pageComponents || {}).length > 0;
+    });
+
+    return {
+        pluginData,
+        menuItems,
+        dashboardWidgets,
+        getPageComponents,
+        hasPlugins,
+    };
+}

package/src/defineEscalatedPlugin.js

@@ -0,0 +1,50 @@
+/**
+ * Helper for plugin authors to define an Escalated plugin.
+ *
+ * Returns a Vue plugin object that registers components globally when installed.
+ *
+ * Usage in a plugin's main entry file:
+ *
+ *   import { defineEscalatedPlugin } from '@escalated-dev/escalated'
+ *   import SalesWidget from './Components/SalesWidget.vue'
+ *   import CustomSidebar from './Components/CustomSidebar.vue'
+ *
+ *   export default defineEscalatedPlugin({
+ *       name: 'my-plugin',
+ *       components: {
+ *           SalesWidget,
+ *           CustomSidebar,
+ *       },
+ *       setup(app) {
+ *           // Optional: run custom setup logic when the plugin is installed
+ *       },
+ *   })
+ *
+ * @param {Object} options
+ * @param {string} options.name - Plugin identifier
+ * @param {Object} [options.components] - Map of component name to component definition
+ * @param {Function} [options.setup] - Optional setup callback receiving the Vue app instance
+ * @returns {Object} A Vue plugin object with an install() method
+ */
+export function defineEscalatedPlugin(options = {}) {
+    return {
+        install(app) {
+            // Register all provided components globally
+            if (options.components) {
+                Object.entries(options.components).forEach(([name, component]) => {
+                    app.component(name, component);
+                });
+            }
+
+            // Run optional setup callback
+            if (typeof options.setup === 'function') {
+                options.setup(app);
+            }
+
+            // Provide the plugin name for debugging
+            if (options.name) {
+                app.provide(`escalated-plugin:${options.name}`, true);
+            }
+        },
+    };
+}

package/src/index.js

@@ -12,6 +12,7 @@ export { default as FollowButton } from './components/FollowButton.vue'
 export { default as KeyboardShortcutHelp } from './components/KeyboardShortcutHelp.vue'
 export { default as MacroDropdown } from './components/MacroDropdown.vue'
 export { default as PinnedNotes } from './components/PinnedNotes.vue'
+export { default as PluginSlot } from './components/PluginSlot.vue'
 export { default as PresenceIndicator } from './components/PresenceIndicator.vue'
 export { default as PriorityBadge } from './components/PriorityBadge.vue'
 export { default as QuickFilters } from './components/QuickFilters.vue'
@@ -28,3 +29,7 @@ export { default as TicketSidebar } from './components/TicketSidebar.vue'
 
 // Composables
 export { useKeyboardShortcuts } from './composables/useKeyboardShortcuts'
+export { usePluginExtensions } from './composables/usePluginExtensions'
+
+// Plugin authoring helper
+export { defineEscalatedPlugin } from './defineEscalatedPlugin'