Support for keep-open-on-item-click and icon URLs on dropdown elements

This commit is contained in:
Fabio Manganiello 2022-04-10 01:57:39 +02:00
parent 19223bbbe1
commit 3435f591eb
Signed by: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 31 additions and 4 deletions

View file

@ -37,6 +37,11 @@ export default {
title: {
type: String,
},
keepOpenOnItemClick: {
type: Boolean,
default: false,
},
},
data() {

View file

@ -1,20 +1,27 @@
<template>
<div class="row item" :class="itemClass" @click="clicked">
<div class="col-1 icon" v-if="iconClass">
<i :class="iconClass" />
<div class="col-1 icon" v-if="iconClass?.length || iconUrl?.length">
<Icon :class="iconClass" :url="iconUrl" />
</div>
<div class="text" :class="{'col-11': iconClass != null}" v-text="text" />
</div>
</template>
<script>
import Icon from "@/components/elements/Icon";
export default {
name: "DropdownItem",
components: {Icon},
props: {
iconClass: {
type: String,
},
iconUrl: {
type: String,
},
text: {
type: String,
},
@ -31,8 +38,12 @@ export default {
methods: {
clicked(event) {
if (this.disabled)
return false
this.$parent.$emit('click', event)
this.$parent.visible = false
if (!this.$parent.keepOpenOnItemClick)
this.$parent.visible = false
}
}
}
@ -55,7 +66,18 @@ export default {
}
.icon {
margin: 0 .5em;
display: inline-flex;
align-items: center;
}
::v-deep(.icon-container) {
width: 2em;
display: inline-flex;
align-items: center;
.icon {
margin: 0 1.5em 0 .5em;
}
}
}
</style>