fix: reset base components to use default props

This commit is contained in:
Johnpaul
2025-09-12 20:55:03 +01:00
parent 1864b1c9bb
commit 482dfcc0c7
3 changed files with 5 additions and 53 deletions

View File

@@ -9,7 +9,7 @@
-->
<MultiSelect
v-model="selectedItems"
v-bind="{ ...$attrs, options: filteredOptions }"
v-bind="$attrs"
option-label="name"
unstyled
:max-selected-labels="0"
@@ -100,12 +100,11 @@
</template>
<script setup lang="ts">
import Fuse from 'fuse.js'
import Button from 'primevue/button'
import MultiSelect, {
MultiSelectPassThroughMethodOptions
} from 'primevue/multiselect'
import { computed, toRefs, useAttrs } from 'vue'
import { computed } from 'vue'
import SearchBox from '@/components/input/SearchBox.vue'
import { usePopoverSizing } from '@/composables/usePopoverSizing'
@@ -139,7 +138,6 @@ interface Props {
// Note: options prop is intentionally omitted.
// It's passed via $attrs to maximize PrimeVue API compatibility
}
const props = defineProps<Props>()
const {
label,
showSearchBox = false,
@@ -154,7 +152,7 @@ const {
const selectedItems = defineModel<Option[]>({
required: true
})
const searchQuery = defineModel<string>('searchQuery', { default: '' })
const searchQuery = defineModel<string>('searchQuery')
const selectedCount = computed(() => selectedItems.value.length)
const popoverStyle = usePopoverSizing({
@@ -185,14 +183,9 @@ const pt = computed(() => ({
dropdown: {
class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
},
listContainer: {
style: 'max-height: 460px;'
},
header: () => ({
class:
showSearchBox.value || showSelectedCount.value || showClearButton.value
? 'block'
: 'hidden'
showSearchBox || showSelectedCount || showClearButton ? 'block' : 'hidden'
}),
// Overlay & list visuals unchanged
overlay: {

View File

@@ -1,5 +1,5 @@
<template>
<i :class="icon" class="text-xs text-neutral" />
<i :class="icon" class="text-sm text-neutral" />
</template>
<script setup lang="ts">

View File

@@ -27,45 +27,4 @@ const { icon, active, onClick } = defineProps<{
active?: boolean
onClick: () => void
}>()
// Icon map matching getCategoryIcon function exactly
const iconMap = {
// Main categories
list: ILucideList,
'graduation-cap': ILucideGraduationCap,
// Generation types
image: ILucideImage,
film: ILucideFilm,
box: ILucideBox,
'volume-2': ILucideVolume2,
// API and models
'hand-coins': ILucideHandCoins,
// LLMs and AI
'message-square-text': ILucideMessageSquareText,
// Performance and hardware
zap: ILucideZap,
command: ILucideCommand,
// Training
dumbbell: ILucideDumbbell,
// Extensions and tools
puzzle: ILucidePuzzle,
wrench: ILucideWrench,
// Fallbacks for common patterns
'maximize-2': ILucideMaximize2,
'sliders-horizontal': ILucideSlidersHorizontal,
'layout-grid': ILucideLayoutGrid,
folder: ILucideFolder
}
const iconComponent = computed(() => {
if (!icon) return ILucideFolder
return iconMap[icon as keyof typeof iconMap] || ILucideFolder
})
</script>