Clean up: remove duplicate TagInput, delete quasar-migration branch
- Removed src/components/shared/TagInput.vue (exact duplicate of src/components/TagInput.vue) - Deleted feature/quasar-migration branch from local and remote - Verified build + deploy: design intact Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
louispaulb
parent
5e6f20d871
commit
141ed947d6
|
|
@ -1,137 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modelValue: { type: Array, default: () => [] }, // current tag labels
|
|
||||||
allTags: { type: Array, default: () => [] }, // { label, color, category }
|
|
||||||
getColor: { type: Function, default: () => '#6b7280' },
|
|
||||||
placeholder:{ type: String, default: 'Ajouter un tag…' },
|
|
||||||
canCreate: { type: Boolean, default: true },
|
|
||||||
})
|
|
||||||
const emit = defineEmits(['update:modelValue', 'create'])
|
|
||||||
|
|
||||||
const query = ref('')
|
|
||||||
const focused = ref(false)
|
|
||||||
const inputEl = ref(null)
|
|
||||||
|
|
||||||
const filtered = computed(() => {
|
|
||||||
const q = query.value.trim().toLowerCase()
|
|
||||||
if (!q) return props.allTags.filter(t => !props.modelValue.includes(t.label)).slice(0, 12)
|
|
||||||
return props.allTags
|
|
||||||
.filter(t => !props.modelValue.includes(t.label) && t.label.toLowerCase().includes(q))
|
|
||||||
.slice(0, 12)
|
|
||||||
})
|
|
||||||
|
|
||||||
const showCreate = computed(() => {
|
|
||||||
if (!props.canCreate) return false
|
|
||||||
const q = query.value.trim()
|
|
||||||
if (!q || q.length < 2) return false
|
|
||||||
return !props.allTags.some(t => t.label.toLowerCase() === q.toLowerCase())
|
|
||||||
})
|
|
||||||
|
|
||||||
function addTag (label) {
|
|
||||||
if (!label || props.modelValue.includes(label)) return
|
|
||||||
emit('update:modelValue', [...props.modelValue, label])
|
|
||||||
query.value = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeTag (label) {
|
|
||||||
emit('update:modelValue', props.modelValue.filter(t => t !== label))
|
|
||||||
}
|
|
||||||
|
|
||||||
function createAndAdd () {
|
|
||||||
const label = query.value.trim()
|
|
||||||
if (!label) return
|
|
||||||
emit('create', label)
|
|
||||||
addTag(label)
|
|
||||||
}
|
|
||||||
|
|
||||||
function onBlur () {
|
|
||||||
setTimeout(() => { focused.value = false }, 180)
|
|
||||||
}
|
|
||||||
|
|
||||||
function onKeydown (e) {
|
|
||||||
if (e.key === 'Enter' && query.value.trim()) {
|
|
||||||
e.preventDefault()
|
|
||||||
if (filtered.value.length) addTag(filtered.value[0].label)
|
|
||||||
else if (showCreate.value) createAndAdd()
|
|
||||||
}
|
|
||||||
if (e.key === 'Backspace' && !query.value && props.modelValue.length) {
|
|
||||||
removeTag(props.modelValue[props.modelValue.length - 1])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="ti-wrap" :class="{ 'ti-focused': focused }">
|
|
||||||
<!-- Existing tags as chips -->
|
|
||||||
<span v-for="t in modelValue" :key="t" class="ti-chip" :style="'background:'+getColor(t)">
|
|
||||||
{{ t }}
|
|
||||||
<button class="ti-chip-rm" @click.stop="removeTag(t)">×</button>
|
|
||||||
</span>
|
|
||||||
<!-- Input -->
|
|
||||||
<input ref="inputEl" class="ti-input" type="text"
|
|
||||||
v-model="query" :placeholder="modelValue.length ? '' : placeholder"
|
|
||||||
@focus="focused=true" @blur="onBlur" @keydown="onKeydown" />
|
|
||||||
<!-- Dropdown -->
|
|
||||||
<div v-if="focused && (filtered.length || showCreate)" class="ti-dropdown">
|
|
||||||
<div v-for="t in filtered" :key="t.label" class="ti-option" @mousedown.prevent="addTag(t.label)">
|
|
||||||
<span class="ti-opt-dot" :style="'background:'+getColor(t.label)"></span>
|
|
||||||
<span class="ti-opt-label">{{ t.label }}</span>
|
|
||||||
<span class="ti-opt-cat">{{ t.category }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="showCreate" class="ti-option ti-option-create" @mousedown.prevent="createAndAdd">
|
|
||||||
<span class="ti-create-plus">+</span>
|
|
||||||
<span>Créer « <strong>{{ query.trim() }}</strong> »</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.ti-wrap {
|
|
||||||
display:flex; flex-wrap:wrap; gap:3px; align-items:center;
|
|
||||||
background:#181c2e; border:1px solid rgba(255,255,255,0.06); border-radius:6px;
|
|
||||||
padding:3px 6px; min-height:28px; position:relative; cursor:text;
|
|
||||||
transition: border-color 0.12s;
|
|
||||||
}
|
|
||||||
.ti-wrap.ti-focused { border-color:rgba(99,102,241,0.4); }
|
|
||||||
.ti-chip {
|
|
||||||
display:inline-flex; align-items:center; gap:2px;
|
|
||||||
font-size:0.58rem; font-weight:600; color:#fff;
|
|
||||||
padding:1px 6px; border-radius:10px; white-space:nowrap;
|
|
||||||
}
|
|
||||||
.ti-chip-rm {
|
|
||||||
background:none; border:none; color:rgba(255,255,255,0.6); cursor:pointer;
|
|
||||||
font-size:0.7rem; padding:0 1px; margin-left:1px; line-height:1;
|
|
||||||
}
|
|
||||||
.ti-chip-rm:hover { color:#fff; }
|
|
||||||
.ti-input {
|
|
||||||
flex:1; min-width:60px; background:none; border:none; outline:none;
|
|
||||||
color:#e2e4ef; font-size:0.72rem; padding:2px 0;
|
|
||||||
}
|
|
||||||
.ti-input::placeholder { color:#7b80a0; }
|
|
||||||
.ti-dropdown {
|
|
||||||
position:absolute; top:100%; left:0; right:0; z-index:50;
|
|
||||||
background:#181c2e; border:1px solid rgba(99,102,241,0.3); border-radius:6px;
|
|
||||||
max-height:180px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.45);
|
|
||||||
margin-top:2px;
|
|
||||||
}
|
|
||||||
.ti-dropdown::-webkit-scrollbar { width:3px; }
|
|
||||||
.ti-dropdown::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); }
|
|
||||||
.ti-option {
|
|
||||||
display:flex; align-items:center; gap:6px;
|
|
||||||
padding:5px 10px; cursor:pointer; font-size:0.72rem; color:#e2e4ef;
|
|
||||||
transition:background 0.1s;
|
|
||||||
}
|
|
||||||
.ti-option:hover { background:rgba(99,102,241,0.12); }
|
|
||||||
.ti-opt-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
|
|
||||||
.ti-opt-label { flex:1; }
|
|
||||||
.ti-opt-cat { font-size:0.55rem; color:#7b80a0; }
|
|
||||||
.ti-option-create { color:#6366f1; font-weight:600; border-top:1px solid rgba(255,255,255,0.06); }
|
|
||||||
.ti-create-plus {
|
|
||||||
width:18px; height:18px; border-radius:50%; background:rgba(99,102,241,0.2);
|
|
||||||
display:flex; align-items:center; justify-content:center;
|
|
||||||
font-size:0.75rem; font-weight:800; color:#6366f1; flex-shrink:0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user