tristan
a6be7fb6a4
- DateFilter + SearchFilter sur Reception (identificationNumber, supplier.name, receptionType.id, receptionDate) - Prop width sur les colonnes du UiDataTable - Prop size compact sur UiTextInput/UiSelect/UiDateInput - Option placeholder re-sélectionnable sur UiSelect (clear du filtre) - Loader inline quand no items, overlay quand refetch Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<template>
|
|
<div :class="['flex flex-col', wrapperClass]">
|
|
<label
|
|
v-if="label"
|
|
:for="id"
|
|
class="font-bold uppercase text-xl text-primary-700"
|
|
:class="labelClass"
|
|
>
|
|
{{ label }}
|
|
</label>
|
|
<select
|
|
:id="id"
|
|
:value="modelValue ?? ''"
|
|
:disabled="disabled || loading"
|
|
v-bind="attrs"
|
|
class="w-full min-w-0 border-b border-primary-700 justify-self-start text-primary-700 bg-transparent"
|
|
:class="[
|
|
sizeClass,
|
|
isEmpty ? 'text-neutral-400' : 'text-primary-700',
|
|
disabled || loading ? 'cursor-not-allowed' : 'cursor-pointer',
|
|
selectClass
|
|
]"
|
|
@change="onChange"
|
|
>
|
|
<option value="" class="text-neutral-400">
|
|
{{ placeholderText }}
|
|
</option>
|
|
<option
|
|
v-for="option in options"
|
|
:key="option.value"
|
|
:value="option.value"
|
|
class="text-primary-700"
|
|
>
|
|
{{ option.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, useAttrs } from 'vue'
|
|
|
|
type SelectOption = {
|
|
value: string | number
|
|
label: string
|
|
}
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
id?: string
|
|
label?: string
|
|
placeholder?: string
|
|
modelValue: string | number | null | undefined
|
|
options: SelectOption[]
|
|
disabled?: boolean
|
|
loading?: boolean
|
|
size?: 'default' | 'compact'
|
|
wrapperClass?: string
|
|
labelClass?: string
|
|
selectClass?: string
|
|
}>(),
|
|
{
|
|
placeholder: 'Sélectionner',
|
|
disabled: false,
|
|
loading: false,
|
|
size: 'default',
|
|
wrapperClass: '',
|
|
labelClass: '',
|
|
selectClass: ''
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
const attrs = useAttrs()
|
|
|
|
const isEmpty = computed(() => props.modelValue === '' || props.modelValue === null || props.modelValue === undefined)
|
|
const placeholderText = computed(() => props.placeholder || 'Sélectionner')
|
|
const sizeClass = computed(() =>
|
|
props.size === 'compact'
|
|
? 'text-sm h-8 font-normal normal-case tracking-normal'
|
|
: 'text-xl py-[6px]'
|
|
)
|
|
|
|
const onChange = (event: Event) => {
|
|
const target = event.target as HTMLSelectElement
|
|
emit('update:modelValue', target.value)
|
|
}
|
|
</script>
|