From 9e2c7c2565aba9539793848f3fa8f8e4b17deb6f Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Wed, 15 Feb 2023 15:18:10 +1000
Subject: [PATCH] initial dropdown support

---
 resources/js/components/SMButton.vue | 70 +++++++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue
index 5668325..9eeb6dd 100644
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -22,9 +22,22 @@
             classType,
             { 'button-block': block },
         ]"
-        :type="buttonType">
+        :type="buttonType"
+        @click="handleClick">
         {{ label }}
-        <ion-icon v-if="icon" :icon="icon" />
+        <ion-icon v-if="icon && dropdown == null" :icon="icon" />
+        <ion-icon
+            v-if="dropdown != null"
+            name="caret-down-outline"
+            @click="handleToggleDropdown" />
+        <ul v-if="dropdown != null" v-show="showDropdown">
+            <li
+                v-for="(dropdownLabel, dropdownItem) in dropdown"
+                :key="dropdownItem"
+                @click="handleClickItem(dropdownItem)">
+                {{ dropdownLabel }}
+            </li>
+        </ul>
     </button>
     <router-link
         v-else
@@ -42,6 +55,8 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
+
 const props = defineProps({
     label: { type: String, default: "Button", required: false },
     type: { type: String, default: "primary", required: false },
@@ -71,14 +86,38 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    dropdown: {
+        type: Object,
+        default: null,
+        required: false,
+        validator: (prop) => typeof prop === "object" || prop === null,
+    },
 });
 
+const showDropdown = ref(false);
 const buttonType = props.type == "submit" ? "submit" : "button";
 const classType = props.type == "submit" ? "primary" : props.type;
+
+const emits = defineEmits(["click"]);
+const handleClick = () => {
+    showDropdown.value = false;
+    emits("click", "");
+};
+
+const handleToggleDropdown = () => {
+    showDropdown.value = !showDropdown.value;
+};
+
+const handleClickItem = (item: string) => {
+    showDropdown.value = false;
+    emits("click", item);
+};
 </script>
 
 <style lang="scss">
 .button {
+    cursor: pointer;
+
     &.button-block {
         display: block;
         width: 100%;
@@ -88,6 +127,33 @@ const classType = props.type == "submit" ? "primary" : props.type;
         height: 1.2rem;
         width: 1.2rem;
         vertical-align: middle;
+        cursor: pointer;
     }
 }
+
+// New content here
+.dropdown {
+    position: relative;
+}
+
+ul {
+    position: absolute;
+    z-index: 1;
+    top: 100%;
+    left: 0;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+}
+
+li {
+    padding: 12px 16px;
+    cursor: pointer;
+}
+
+li:hover {
+    background-color: #f1f1f1;
+}
 </style>