214 lines
9.0 KiB
JavaScript
214 lines
9.0 KiB
JavaScript
Vue.component('tt-icon-select', {
|
|
props: {
|
|
options: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
label: String, // Kept as per request, though unused in original template
|
|
value: [String, Array, Number, null], // Allowed types
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isOpen: false,
|
|
observer: null,
|
|
};
|
|
},
|
|
computed: {
|
|
/**
|
|
* Internal representation of the value, ensuring it's an array in multiple mode.
|
|
* Uses computed property for cleaner prop sync than watchers.
|
|
*/
|
|
internalValue: {
|
|
get() {
|
|
return this.multiple
|
|
? (Array.isArray(this.value) ? this.value : []) // Use value if array, else empty array
|
|
: this.value; // Use value directly in single mode
|
|
},
|
|
set(newValue) {
|
|
// Emit the change only if it's different to prevent potential loops
|
|
if (JSON.stringify(newValue) !== JSON.stringify(this.value)) {
|
|
this.$emit('input', newValue);
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* Determines what to display in the trigger area based on selection mode and value.
|
|
* Returns an object { icon?: string, title?: string, text?: string, showCaret?: boolean }
|
|
*/
|
|
triggerDisplay() {
|
|
if (this.multiple) {
|
|
const count = this.internalValue.length;
|
|
if (count === 0) {
|
|
return { text: 'Alle', showCaret: true };
|
|
} else if (count === 1) {
|
|
const opt = this.options.find(o => o.value?.toString() === this.internalValue[0]?.toString());
|
|
// Show icon if exactly one is selected and found
|
|
return opt ? { icon: opt.icon, title: opt.text } : { text: '1 selected', showCaret: true };
|
|
} else {
|
|
// Show count for multiple items
|
|
return { text: `${count}/${this.options.length}`, showCaret: true };
|
|
}
|
|
} else {
|
|
// Single selection mode: Find the corresponding option
|
|
const opt = this.options.find(o => o.value?.toString() === this.internalValue?.toString());
|
|
// Return icon/title if found, otherwise the default "Alle" text
|
|
return opt ? { icon: opt.icon, title: opt.text } : { text: 'Alle', showCaret: true };
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// Add minimal CSS dynamically if not present
|
|
if (!document.getElementById('tt-icon-select-style')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'tt-icon-select-style';
|
|
style.innerHTML = `
|
|
.tt-select .dropdown-toggle::after { display: none; }
|
|
/* Minimal style for selected items in dropdown */
|
|
.tt-select .dropdown-item:hover { background-color: #f8f9fa; } /* Subtle hover */
|
|
.tt-select .dropdown-item.active { background-color: #e9ecef; font-weight: 500; } /* Subtle active */
|
|
`;
|
|
document.head.appendChild(style); // Append to head
|
|
}
|
|
|
|
// Global click listener to close dropdown
|
|
document.addEventListener('click', this.handleGlobalClick);
|
|
|
|
// Resize observer for positioning (references the container div 'select')
|
|
if (this.$refs.select) {
|
|
this.observer = new ResizeObserver(this.calculateOffset);
|
|
this.observer.observe(this.$refs.select);
|
|
// Ensure initial calculation happens after mount
|
|
this.$nextTick(this.calculateOffset);
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
// Clean up global listener and observer
|
|
document.removeEventListener('click', this.handleGlobalClick);
|
|
if (this.observer) {
|
|
this.observer.disconnect();
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* Toggles the dropdown visibility.
|
|
*/
|
|
toggleDropdown() {
|
|
this.isOpen = !this.isOpen;
|
|
if (this.isOpen) {
|
|
// Recalculate offset when opening
|
|
this.$nextTick(this.calculateOffset);
|
|
}
|
|
},
|
|
/**
|
|
* Handles selection of an option from the dropdown.
|
|
*/
|
|
selectOption(option) {
|
|
const selectedVal = option ? option.value : ''; // `null` represents the "Alle" option
|
|
|
|
if (this.multiple) {
|
|
let currentValues = [...this.internalValue]; // Work with a copy
|
|
const index = currentValues.findIndex(v => v?.toString() === selectedVal?.toString());
|
|
|
|
if (selectedVal === '') { // "Alle" clears selection in multi-mode
|
|
currentValues = [];
|
|
this.isOpen = false; // Close after clearing
|
|
} else if (index > -1) { // Item exists, remove it
|
|
currentValues.splice(index, 1);
|
|
// Keep open to allow more selections/deselections
|
|
} else { // Item doesn't exist, add it
|
|
currentValues.push(selectedVal);
|
|
// Keep open
|
|
}
|
|
this.internalValue = currentValues; // Update via computed setter
|
|
} else {
|
|
// Single selection mode
|
|
this.internalValue = selectedVal; // Set the value directly
|
|
this.isOpen = false; // Close dropdown after selection
|
|
}
|
|
},
|
|
/**
|
|
* Checks if a given option is currently selected.
|
|
* Used for applying the 'active' class.
|
|
*/
|
|
isSelected(option) {
|
|
const checkVal = option ? option.value : null;
|
|
if (this.multiple) {
|
|
// Check if the value exists in the internal array
|
|
return this.internalValue.some(v => v?.toString() === checkVal?.toString());
|
|
} else {
|
|
// Simple comparison for single mode
|
|
return this.internalValue?.toString() === checkVal?.toString();
|
|
}
|
|
},
|
|
/**
|
|
* Calculates the dropdown menu's left offset to center it.
|
|
* Based on original logic using the ref="select" container width.
|
|
*/
|
|
calculateOffset() {
|
|
// Ensure refs are available
|
|
if (this.$refs.select && this.$refs.dropdownMenu) {
|
|
// Original calculation: (container width - approx menu item width) / 2
|
|
// Let's refine slightly to use actual menu width if available
|
|
const containerWidth = this.$refs.select.offsetWidth;
|
|
const menuWidth = this.$refs.dropdownMenu.offsetWidth;
|
|
// Adjust if needed, default uses original fixed width logic approx
|
|
const offset = menuWidth > 0
|
|
? (containerWidth - menuWidth) / 2
|
|
: (containerWidth - 64.41) / 2; // Fallback to original approx offset
|
|
this.$refs.dropdownMenu.style.left = `${offset}px`;
|
|
}
|
|
},
|
|
/**
|
|
* Closes the dropdown if a click occurs outside the component.
|
|
*/
|
|
handleGlobalClick(event) {
|
|
if (this.$el && !this.$el.contains(event.target)) {
|
|
this.isOpen = false;
|
|
}
|
|
}
|
|
},
|
|
template: `
|
|
<div class="form-group tt-select" style="user-select: none; margin-bottom: 0; margin-top: 6px; position: relative;">
|
|
<div class="dropdown" :class="{'show': isOpen}">
|
|
|
|
<span @click="toggleDropdown" ref="trigger" style="cursor: pointer; display: inline-block; min-width: 40px; text-align: center;">
|
|
<i v-if="triggerDisplay.icon"
|
|
:class="triggerDisplay.icon"
|
|
style="font-size: 18px;"
|
|
:title="triggerDisplay.title">
|
|
</i>
|
|
<span v-else>
|
|
{{ triggerDisplay.text }}
|
|
<i v-if="triggerDisplay.showCaret" class="ml-1 fas fa-caret-down"></i>
|
|
</span>
|
|
</span>
|
|
|
|
<div style="display: grid; justify-items: center;" ref="select">
|
|
<div class="dropdown-menu"
|
|
ref="dropdownMenu"
|
|
:class="{'show': isOpen}"
|
|
style="min-width: unset !important; position: absolute;"
|
|
@click.stop> <a class="dropdown-item text-center" href="#"
|
|
:class="{ active: isSelected(null) }"
|
|
@click.prevent="selectOption(null)">
|
|
{{ multiple ? 'Alle abwählen' : 'Alle' }}
|
|
</a>
|
|
|
|
<a v-for="(option, index) in options"
|
|
:key="option.value?.toString() + '-' + index"
|
|
class="dropdown-item text-center" href="#"
|
|
:class="{ active: isSelected(option) }"
|
|
@click.prevent="selectOption(option)">
|
|
<i :class="option.icon" style="font-size: 18px" :title="option.text || ''"></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}); |