diff --git a/src/components/Selector.vue b/src/components/Selector.vue index 6e8a900..81a3914 100644 --- a/src/components/Selector.vue +++ b/src/components/Selector.vue @@ -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; }