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

multiselect : affiche le placeholder si la current value est null

Browse source
This commit is contained in:
isUnknown 2025-10-01 12:03:31 +02:00
parent ec1acc7671
commit 651774ac8a
1 changed files with 28 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/components/Selector.vue
View file

@ -11,7 +11,7 @@
v-model="currentValue" v-model="currentValue"
:options="items" :options="items"
optionLabel="title" optionLabel="title"
:placeholder="label" :placeholder="'Sélectionnez une déclinaison'"
:maxSelectedLabels="3" :maxSelectedLabels="3"
class="font-serif" class="font-serif"
:class="{ active: currentValue }" :class="{ active: currentValue }"
@ -94,7 +94,7 @@ watch(
() => isCompareModeEnabled, () => isCompareModeEnabled,
(newValue) => { (newValue) => {
if (newValue) { if (newValue) {
currentValue.value = currentValue.value ? [currentValue.value] : []; currentValue.value = currentValue.value ? [currentValue.value] : null;
} }
} }
); );
@ -200,40 +200,40 @@ function getFrontViewUrl(item) {
background-position: center; background-position: center;
} }
[role="combobox"], [role='combobox'],
[id*="select_list"] { [id*='select_list'] {
border: 1px solid var(--color-grey-200); border: 1px solid var(--color-grey-200);
} }
[role="combobox"]:hover { [role='combobox']:hover {
outline: 0px solid var(--color-grey-400); outline: 0px solid var(--color-grey-400);
border-color: var(--color-grey-400); border-color: var(--color-grey-400);
} }
[role="combobox"][aria-expanded="true"] { [role='combobox'][aria-expanded='true'] {
outline: 2px solid var(--color-focus-ring); outline: 2px solid var(--color-focus-ring);
outline-offset: -2px; outline-offset: -2px;
border-color: transparent; border-color: transparent;
} }
#selector-select, #selector-select,
#selector-multiselect, #selector-multiselect,
[role="combobox"] { [role='combobox'] {
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-64);
cursor: pointer; cursor: pointer;
} }
[role="combobox"] p { [role='combobox'] p {
max-height: 1lh; max-height: 1lh;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
#selector-select.active [role="combobox"] { #selector-select.active [role='combobox'] {
border-color: var(--color-focus-ring); border-color: var(--color-focus-ring);
} }
/* Icon */ /* Icon */
[data-pc-section="dropdown"] { [data-pc-section='dropdown'] {
display: none; /* Hide default component svg */ display: none; /* Hide default component svg */
} }
.selector-dropdown [data-icon]::before { .selector-dropdown [data-icon]::before {
@ -256,14 +256,14 @@ function getFrontViewUrl(item) {
} }
/* Options */ /* Options */
[id*="select_list"] { [id*='select_list'] {
margin-top: var(--space-4); margin-top: var(--space-4);
border-radius: var(--rounded-md); border-radius: var(--rounded-md);
background: var(--color-background); background: var(--color-background);
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: var(--space-8); padding: var(--space-8);
} }
[id*="select_list"] > * { [id*='select_list'] > * {
font-family: var(--font-serif); font-family: var(--font-serif);
padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48);
border-radius: var(--rounded-sm); border-radius: var(--rounded-sm);
@ -273,10 +273,10 @@ function getFrontViewUrl(item) {
height: 2.75rem; height: 2.75rem;
cursor: pointer; cursor: pointer;
} }
[id*="select_list"] > * + * { [id*='select_list'] > * + * {
margin-top: var(--space-4); margin-top: var(--space-4);
} }
[id*="select_list"] > *::before { [id*='select_list'] > *::before {
content: ''; content: '';
position: absolute; position: absolute;
left: var(--space-8); left: var(--space-8);
@ -289,16 +289,16 @@ function getFrontViewUrl(item) {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
[id*="select_list"] > *:hover { [id*='select_list'] > *:hover {
background-color: var(--color-grey-50); background-color: var(--color-grey-50);
} }
[id*="select_list"] > *:focus, [id*='select_list'] > *:focus,
[id*="select_list"] > *:focus-visible, [id*='select_list'] > *:focus-visible,
[id*="select_list"] > [data-p-focused="true"] { [id*='select_list'] > [data-p-focused='true'] {
outline: 2px solid var(--color-focus-ring); outline: 2px solid var(--color-focus-ring);
} }
/* Check */ /* Check */
#selector-multiselect_list input[type="checkbox"] { #selector-multiselect_list input[type='checkbox'] {
position: absolute; position: absolute;
left: var(--space-4); left: var(--space-4);
top: calc(var(--space-4) + 1px); top: calc(var(--space-4) + 1px);
@ -306,32 +306,34 @@ function getFrontViewUrl(item) {
height: 1.75rem; height: 1.75rem;
border-radius: var(--rounded-sm); border-radius: var(--rounded-sm);
} }
#selector-multiselect_list input[type="checkbox"]:checked { #selector-multiselect_list input[type='checkbox']:checked {
--icon-color: var(--color-focus-ring); --icon-color: var(--color-focus-ring);
} }
[id*="select_list"] > * > svg { [id*='select_list'] > * > svg {
position: absolute; position: absolute;
left: 0.875rem; left: 0.875rem;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
color: var(--color-grey-700); color: var(--color-grey-700);
} }
[id*="select_list"] img { [id*='select_list'] img {
position: absolute; position: absolute;
left: 0.5rem; left: 0.5rem;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
mix-blend-mode: multiply; mix-blend-mode: multiply;
} }
[id*="select_list"] [aria-selected="true"] img, [id*='select_list'] [aria-selected='true'] img,
#selector-multiselect_list input[type="checkbox"] + [data-pc-section="box"] { #selector-multiselect_list input[type='checkbox'] + [data-pc-section='box'] {
display: none; display: none;
} }
#selector-multiselect_list [aria-selected="false"] input[type="checkbox"]::before { #selector-multiselect_list
[aria-selected='false']
input[type='checkbox']::before {
--icon-color: transparent; --icon-color: transparent;
} }
/* Overlay */ /* Overlay */
[data-pc-section="overlay"] [data-pc-section="header"] { [data-pc-section='overlay'] [data-pc-section='header'] {
display: none; display: none;
} }
</style> </style>