From 3435f591eb0ed924804c2fbad81e11d11d503eb1 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Sun, 10 Apr 2022 01:57:39 +0200
Subject: [PATCH] Support for keep-open-on-item-click and icon URLs on dropdown
 elements

---
 .../src/components/elements/Dropdown.vue      |  5 ++++
 .../src/components/elements/DropdownItem.vue  | 30 ++++++++++++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/Dropdown.vue b/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
index 0ab11359..fd6de368 100644
--- a/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
+++ b/platypush/backend/http/webapp/src/components/elements/Dropdown.vue
@@ -37,6 +37,11 @@ export default {
     title: {
       type: String,
     },
+
+    keepOpenOnItemClick: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
diff --git a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
index ac8c8f4d..4698b704 100644
--- a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
+++ b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
@@ -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>