mirror of
https://github.com/OliveTin/OliveTin
synced 2025-12-23 14:20:16 +00:00
fix: #672 Empty execution tracking ID in InternalLogEntry (backport to release/2k)
This commit is contained in:
jamesread
512
frontend/node_modules/picocrank/vue/components/QuickSearch.vue
generated
vendored
Normal file
512
frontend/node_modules/picocrank/vue/components/QuickSearch.vue
generated
vendored
Normal file
@@ -0,0 +1,512 @@
|
||||
<template>
|
||||
<div class="quick-search">
|
||||
<div class="search-container">
|
||||
<input
|
||||
ref="searchInput"
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="search-input"
|
||||
:placeholder="placeholder"
|
||||
@input="onSearch"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@keydown="onKeydown"
|
||||
/>
|
||||
<div class="search-icon">
|
||||
<HugeiconsIcon :icon="SearchIcon" width="1em" height="1em" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showResults && filteredItems.length > 0" class="search-results">
|
||||
<div
|
||||
v-for="(item, index) in filteredItems"
|
||||
:key="item.id"
|
||||
:class="['search-result-item', { active: selectedIndex === index }]"
|
||||
@click="selectItem(item)"
|
||||
@mouseenter="selectedIndex = index"
|
||||
>
|
||||
<div class="result-content">
|
||||
<div class="result-title" v-html="highlightText(item.title, searchQuery)"></div>
|
||||
<div v-if="item.description" class="result-description" v-html="highlightText(item.description, searchQuery)"></div>
|
||||
<div v-if="item.category" class="result-category">{{ item.category }}</div>
|
||||
</div>
|
||||
<div v-if="item.icon" class="result-icon">
|
||||
<HugeiconsIcon :icon="item.icon" width="1.2em" height="1.2em" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showResults && searchQuery && filteredItems.length === 0" class="no-results">
|
||||
<div class="no-results-content">
|
||||
<HugeiconsIcon :icon="SearchRemoveIcon" width="2em" height="2em" />
|
||||
<p>No results found for "{{ searchQuery }}"</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { HugeiconsIcon } from '@hugeicons/vue'
|
||||
import { SearchIcon } from '@hugeicons/core-free-icons'
|
||||
import { SearchRemoveIcon } from '@hugeicons/core-free-icons'
|
||||
import { ViewIcon } from '@hugeicons/core-free-icons'
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Search...'
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
searchFields: {
|
||||
type: Array,
|
||||
default: () => ['title', 'description']
|
||||
},
|
||||
maxResults: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
debounceMs: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
enableGlobalShortcut: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoImportRoutes: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['select', 'search', 'focus', 'blur'])
|
||||
|
||||
const router = useRouter()
|
||||
const searchInput = ref(null)
|
||||
const searchQuery = ref('')
|
||||
const showResults = ref(false)
|
||||
const selectedIndex = ref(-1)
|
||||
const items = ref([...props.items])
|
||||
const debounceTimer = ref(null)
|
||||
|
||||
function importRoutesFromRouter() {
|
||||
const routeItems = router.getRoutes()
|
||||
.filter(route => route.name) // Exclude unnamed routes
|
||||
.map(route => ({
|
||||
id: `route-${route.name}`,
|
||||
title: route.meta.title || route.name,
|
||||
description: `Navigate to ${route.path}`,
|
||||
category: 'Navigation',
|
||||
path: route.path,
|
||||
icon: route.meta.icon || ViewIcon,
|
||||
type: 'route'
|
||||
}))
|
||||
|
||||
// Add the items to the search
|
||||
routeItems.forEach(item => addItem(item))
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!searchQuery.value.trim()) {
|
||||
return []
|
||||
}
|
||||
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
const filtered = items.value.filter(item => {
|
||||
return props.searchFields.some(field => {
|
||||
const value = item[field]
|
||||
return value && value.toLowerCase().includes(query)
|
||||
})
|
||||
})
|
||||
|
||||
return filtered.slice(0, props.maxResults)
|
||||
})
|
||||
|
||||
function handleGlobalKeydown(event) {
|
||||
// Check if Ctrl+K is pressed
|
||||
if (event.ctrlKey && event.key === 'k') {
|
||||
event.preventDefault()
|
||||
|
||||
// Don't trigger if user is typing in an input/textarea
|
||||
if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
|
||||
return
|
||||
}
|
||||
|
||||
focus()
|
||||
}
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
clearTimeout(debounceTimer.value)
|
||||
debounceTimer.value = setTimeout(() => {
|
||||
selectedIndex.value = -1
|
||||
showResults.value = true
|
||||
emit('search', searchQuery.value)
|
||||
}, props.debounceMs)
|
||||
}
|
||||
|
||||
function onFocus() {
|
||||
showResults.value = true
|
||||
emit('focus')
|
||||
}
|
||||
|
||||
function onBlur() {
|
||||
// Delay hiding results to allow for click events
|
||||
setTimeout(() => {
|
||||
showResults.value = false
|
||||
selectedIndex.value = -1
|
||||
emit('blur')
|
||||
}, 150)
|
||||
}
|
||||
|
||||
function onKeydown(event) {
|
||||
if (!showResults.value || filteredItems.value.length === 0) return
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault()
|
||||
selectedIndex.value = Math.min(selectedIndex.value + 1, filteredItems.value.length - 1)
|
||||
break
|
||||
case 'ArrowUp':
|
||||
event.preventDefault()
|
||||
selectedIndex.value = Math.max(selectedIndex.value - 1, -1)
|
||||
break
|
||||
case 'Enter':
|
||||
event.preventDefault()
|
||||
if (selectedIndex.value >= 0) {
|
||||
selectItem(filteredItems.value[selectedIndex.value])
|
||||
}
|
||||
break
|
||||
case 'Escape':
|
||||
showResults.value = false
|
||||
selectedIndex.value = -1
|
||||
searchInput.value.blur()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function selectItem(item) {
|
||||
switch(item.type) {
|
||||
case 'route':
|
||||
router.push({ path: item.path })
|
||||
break
|
||||
case 'callback':
|
||||
item.callback()
|
||||
break
|
||||
default:
|
||||
emit('select', item)
|
||||
}
|
||||
|
||||
searchQuery.value = ''
|
||||
showResults.value = false
|
||||
selectedIndex.value = -1
|
||||
}
|
||||
|
||||
function highlightText(text, query) {
|
||||
if (!query || !text) return text
|
||||
|
||||
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
|
||||
return text.replace(regex, '<mark>$1</mark>')
|
||||
}
|
||||
|
||||
// API Methods
|
||||
function addItem(item) {
|
||||
const existingIndex = items.value.findIndex(i => i.id === item.id)
|
||||
if (existingIndex >= 0) {
|
||||
items.value[existingIndex] = { ...item }
|
||||
} else {
|
||||
items.value.push({ ...item })
|
||||
}
|
||||
}
|
||||
|
||||
function removeItem(itemId) {
|
||||
items.value = items.value.filter(item => item.id !== itemId)
|
||||
}
|
||||
|
||||
function clearItems() {
|
||||
items.value = []
|
||||
}
|
||||
|
||||
function getItems() {
|
||||
return [...items.value]
|
||||
}
|
||||
|
||||
function setItems(newItems) {
|
||||
items.value = [...newItems]
|
||||
}
|
||||
|
||||
function focus() {
|
||||
searchInput.value?.focus()
|
||||
}
|
||||
|
||||
function blur() {
|
||||
searchInput.value?.blur()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
searchQuery.value = ''
|
||||
showResults.value = false
|
||||
selectedIndex.value = -1
|
||||
}
|
||||
|
||||
function refreshRoutes() {
|
||||
if (props.autoImportRoutes) {
|
||||
importRoutesFromRouter()
|
||||
}
|
||||
}
|
||||
|
||||
// Global shortcut management
|
||||
onMounted(() => {
|
||||
if (props.enableGlobalShortcut) {
|
||||
document.addEventListener('keydown', handleGlobalKeydown)
|
||||
}
|
||||
|
||||
// Auto-import routes on mount
|
||||
if (props.autoImportRoutes) {
|
||||
importRoutesFromRouter()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (props.enableGlobalShortcut) {
|
||||
document.removeEventListener('keydown', handleGlobalKeydown)
|
||||
}
|
||||
})
|
||||
|
||||
// Watch for external items changes
|
||||
watch(() => props.items, (newItems) => {
|
||||
items.value = [...newItems]
|
||||
}, { deep: true })
|
||||
|
||||
defineExpose({
|
||||
addItem,
|
||||
removeItem,
|
||||
clearItems,
|
||||
getItems,
|
||||
setItems,
|
||||
focus,
|
||||
blur,
|
||||
clear,
|
||||
refreshRoutes,
|
||||
searchQuery,
|
||||
filteredItems,
|
||||
showResults
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.quick-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.4em;
|
||||
border: none;
|
||||
border-radius: .4em;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
color: #6b7280;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-top: none;
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.search-result-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.search-result-item:hover,
|
||||
.search-result-item.active {
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.result-description {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.result-category {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
margin-left: 0.75rem;
|
||||
color: #6b7280;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-top: none;
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.no-results-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem 1rem;
|
||||
color: #6b7280;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-results-content p {
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
padding: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.search-input {
|
||||
background-color: #1f2937;
|
||||
border-color: #374151;
|
||||
color: #f9fafb;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #60a5fa;
|
||||
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
background: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
|
||||
.search-result-item:hover,
|
||||
.search-result-item.active {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
color: #f9fafb;
|
||||
}
|
||||
|
||||
.result-description {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.result-category {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
background: #1f2937;
|
||||
border-color: #374151;
|
||||
}
|
||||
|
||||
.no-results-content {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #451a03;
|
||||
color: #fbbf24;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.quick-search {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user