This commit is contained in:
Timothée Goguely 2025-10-07 15:41:48 +02:00
parent d3bab40167
commit 6d5899a6c7

View file

@ -1,7 +1,8 @@
<template> <template>
<div <div
class="selector-dropdown | flex flex-col" class="selector-dropdown | flex flex-col"
:style="'--image: url(\'' + getFrontViewUrl(currentValue) + '\')'" :class="{ 'has-image': getFrontViewUrl(currentValue) }"
:style="setImage()"
> >
<label for="selector-select" class="text-sm">{{ label }}</label> <label for="selector-select" class="text-sm">{{ label }}</label>
@ -228,6 +229,12 @@ function getFrontViewUrl(item) {
return item.files && item.files[0] ? item.files[0].url : ''; return item.files && item.files[0] ? item.files[0].url : '';
} }
} }
function setImage() {
return getFrontViewUrl(currentValue.value)
? '--image: url(\'' + getFrontViewUrl(currentValue.value) + '\')'
: undefined;
}
</script> </script>
<style> <style>
@ -240,9 +247,13 @@ function getFrontViewUrl(item) {
border-radius: var(--rounded-lg); border-radius: var(--rounded-lg);
height: 3.75rem; height: 3.75rem;
min-width: var(--selector-width, 21rem); min-width: var(--selector-width, 21rem);
padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64); padding: var(--space-8) var(--space-48) var(--space-8) var(--space-16);
} }
.selector-dropdown::before { .selector-dropdown.has-image,
.selector-dropdown.has-image :is(#selector-select, #selector-multiselect, [role='combobox']) {
padding-left: var(--space-64);
}
.selector-dropdown.has-image:before {
content: ''; content: '';
position: absolute; position: absolute;
left: var(--space-8); left: var(--space-8);
@ -275,7 +286,7 @@ function getFrontViewUrl(item) {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: inherit; border-radius: inherit;
padding: 1.875rem var(--space-48) var(--space-8) var(--space-64); padding: 1.875rem var(--space-48) var(--space-8) var(--space-16);
cursor: pointer; cursor: pointer;
} }
[role='combobox'] p, [role='combobox'] p,