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 untrusted user: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 31 additions and 4 deletions

View file

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

View file

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