Skip to content
Snippets Groups Projects

order liste submission et ajout background color si select

2 files
+ 41
3
Compare changes
  • Side-by-side
  • Inline
Files
2
@@ -2,8 +2,8 @@
<div
v-if="!option.children.length"
:id="option.id"
@click="select(option, option.i18n[locale] || option.naturalKey)"
style="padding: 5px 16px"
@click="select(option, option.i18n[locale] || option.naturalKey, option.id)"
>
<a>{{ option.i18n[locale] || option.naturalKey }}</a>
</div>
@@ -24,6 +24,7 @@
v-for="child in option.children"
:key="child.id"
:option="child"
:id-reference-scope="idReferenceScope"
@select-menu-item="select"
>
</CollapseMenuOneSelect>
@@ -43,17 +44,34 @@ export default {
type: Object,
required: true,
},
listSelect: Array,
idReferenceScope: String,
},
emits: ["select-menu-item"],
emits: ["select-menu-item", "change-style-if-selected"],
setup(props, { emit }) {
const isOpen = ref(false);
const locale = services.internationalisationService.getLocale();
const displayText = computed(() => props.option.i18n[locale] || props.option.naturalKey);
function select(option, localName) {
function changeStyleIfSelected(localID) {
const localElement = document.getElementById(localID);
if (localElement) {
console.log("selected", localID, props.idReferenceScope);
Array.from(document.querySelectorAll("div.colorSelected"))
.filter(el => el.id && el.id.includes(props.idReferenceScope + "K") && !el.id.includes(localID))
.forEach((element) => {
element.classList.remove("colorSelected");
});
localElement.classList.add("colorSelected");
}
}
function select(option, localName, localID) {
changeStyleIfSelected(localID);
option.localName = option.localName || localName;
emit("select-menu-item", option || { ...this.option, localName });
}
return {
select,
isOpen,
@@ -69,6 +87,10 @@ a {
color: black;
}
.colorSelected {
background-color: rgba(0, 100, 100, 0.4);
}
.card {
box-shadow: none;
Loading