studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fix #175

Browse source
This commit is contained in:
Timothée Goguely 2025-10-07 15:41:48 +02:00
parent d3bab40167
commit 6d5899a6c7
1 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/Selector.vue
View file

@ -1,7 +1,8 @@
<template>
<div
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>
@ -228,6 +229,12 @@ function getFrontViewUrl(item) {
return item.files && item.files[0] ? item.files[0].url : '';
}
}
function setImage() {
return getFrontViewUrl(currentValue.value)
? '--image: url(\'' + getFrontViewUrl(currentValue.value) + '\')'
: undefined;
}
</script>
<style>
@ -240,9 +247,13 @@ function getFrontViewUrl(item) {
border-radius: var(--rounded-lg);
height: 3.75rem;
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: '';
position: absolute;
left: var(--space-8);
@ -275,7 +286,7 @@ function getFrontViewUrl(item) {
position: absolute;
inset: 0;
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;
}
[role='combobox'] p,