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