From 97421023e454e36a595948ff2a8eb9836f118723 Mon Sep 17 00:00:00 2001
From: Gustavo Gomes <gustavo.gomes@bluebear.app>
Date: Tue, 30 Jul 2024 10:25:51 -0300
Subject: [PATCH 1/5] Added modal attribute binding

---
 src/components/slds-modal/slds-modal.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/slds-modal/slds-modal.vue b/src/components/slds-modal/slds-modal.vue
index b2e32d2..8452f54 100644
--- a/src/components/slds-modal/slds-modal.vue
+++ b/src/components/slds-modal/slds-modal.vue
@@ -8,7 +8,7 @@
 
         <!-- Modal -->
         <transition appear :name="transitionName">
-            <section tabindex="-1" :class="modalClassNames">
+            <section tabindex="-1" :class="modalClassNames" v-bind="modalAttributes">
                 <div class="slds-modal__container">
 
                     <!-- Header -->
@@ -84,10 +84,18 @@ export default defineComponent({
 
     computed: {
         /**
-         * Transition name, if any.
+         * Bindable modal attributes.
          */
-        transitionName(): string {
-            return this.noAnimation ? "" : "blow-up"
+        modalAttributes(): Record<string, unknown> {
+            const attributes: Record<string, unknown> = {}
+
+            for (const attribute in this.$attrs) {
+                if (attribute.startsWith("data-") || attribute === "class") {
+                    attributes[attribute] = this.$attrs[attribute]
+                }
+            }
+
+            return attributes
         },
 
         /**
@@ -139,6 +147,13 @@ export default defineComponent({
 
             return classNames
         },
+
+        /**
+         * Transition name, if any.
+         */
+        transitionName(): string {
+            return this.noAnimation ? "" : "blow-up"
+        },
     },
 
     mounted() {

From 2c2b93b19df2388db87f9860401a3dab28c11a87 Mon Sep 17 00:00:00 2001
From: Gustavo Gomes <gustavo.gomes@bluebear.app>
Date: Fri, 18 Oct 2024 18:51:24 -0300
Subject: [PATCH 2/5] Slds-svg added to export file

---
 src/components/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/index.ts b/src/components/index.ts
index ede74ba..1ef2b1c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -59,6 +59,7 @@ export { default as SldsScopedNotification } from "./slds-scoped-notification/sl
 export { default as SldsScopedTabs } from "./slds-scoped-tabs/slds-scoped-tabs.vue"
 export { default as SldsSpinner } from "./slds-spinner/slds-spinner.vue"
 export { default as SldsSpinnerContainer } from "./slds-spinner/slds-spinner-container.vue"
+export { default as SldsSvg } from "./slds-svg/slds-svg.vue"
 export { default as SldsTab } from "./slds-tabs/slds-tab.vue"
 export { default as SldsTabContent } from "./slds-tabs/slds-tab-content.vue"
 export { default as SldsTabs } from "./slds-tabs/slds-tabs.vue"

From 4ee4119d110fb31680ded7c02392bfc4fcb9dc5e Mon Sep 17 00:00:00 2001
From: Gustavo Gomes <gustavo.gomes@bluebear.app>
Date: Wed, 6 Nov 2024 16:03:30 -0300
Subject: [PATCH 3/5] slds-group-button-dropdown created

---
 docs/examples/test.vue                        |  70 +++++++++++-
 .../slds-button-group-dropdown.vue            |  55 ++++++++++
 .../slds-button-group/slds-button-group.vue   | 103 +++++++++++++++++-
 3 files changed, 225 insertions(+), 3 deletions(-)
 create mode 100644 src/components/slds-button-group/slds-button-group-dropdown.vue

diff --git a/docs/examples/test.vue b/docs/examples/test.vue
index dee3f87..b74eec9 100644
--- a/docs/examples/test.vue
+++ b/docs/examples/test.vue
@@ -1,5 +1,51 @@
 <template>
 
+    <example-container class="slds-m-bottom_medium">
+        <slds-button-group
+            :dropdown-options="dropdownOptions"
+        >
+            <slds-button
+                disabled
+                label="foo"
+                neutral
+            />
+        </slds-button-group>
+    </example-container>
+
+    <example-container class="slds-m-bottom_medium">
+        <slds-button-group
+            :dropdown-options="dropdownOptions"
+            @delete="foo"
+        >
+            <slds-button
+                label="foo"
+                neutral
+            />
+            <slds-button
+                disabled
+                label="foo"
+                neutral
+            />
+            <slds-button
+                disabled
+                label="foo"
+                neutral
+            />
+        </slds-button-group>
+    </example-container>
+
+    <example-container class="slds-m-bottom_medium">
+        <slds-menu
+            :options="dropdownOptions"
+        />
+    </example-container>
+
+    <example-container class="slds-m-bottom_medium">
+        <span class="slds-icon_container slds-icon-utility-add slds-current-color" @click="foo">
+            <slds-svg class="slds-icon slds-icon_x-small slds-cursor_not-allowed" icon="utility:add"/>
+        </span>
+    </example-container>
+
     <!-- Checkbox output group -->
     <example-container class="slds-m-bottom_medium">
         <slds-checkbox-output-group
@@ -421,8 +467,7 @@ import SldsMenu from "../../src/components/slds-menu/slds-menu.vue"
 import SldsCheckboxButtonGroup from "../../src/components/slds-checkbox-button-group/slds-checkbox-button-group.vue"
 import SldsVerticalNavigation from "../../src/components/slds-vertical-navigation/slds-vertical-navigation.vue"
 import SldsVerticalNavigationItem from "../../src/components/slds-vertical-navigation/slds-vertical-navigation-item.vue"
-import SldsVerticalNavigationSection
-    from "../../src/components/slds-vertical-navigation/slds-vertical-navigation-section.vue"
+import SldsVerticalNavigationSection from "../../src/components/slds-vertical-navigation/slds-vertical-navigation-section.vue"
 import SldsTabs from "../../src/components/slds-tabs/slds-tabs.vue"
 import SldsPanel from "../../src/components/slds-panel/slds-panel.vue"
 import SldsScopedTabs from "../../src/components/slds-scoped-tabs/slds-scoped-tabs.vue"
@@ -439,11 +484,17 @@ import SldsColumn from "../../src/components/slds-grid/slds-column.vue"
 import SldsInput from "../../src/components/slds-input/slds-input.vue"
 import SldsCheckboxGroup from "../../src/components/slds-checkbox-group/slds-checkbox-group.vue"
 import SldsCheckboxOutputGroup from "../../src/components/slds-checkbox-output-group/slds-checkbox-output-group.vue"
+import SldsSvg from "../../src/components/slds-svg/slds-svg.vue"
+import SldsButtonGroup from "../../src/components/slds-button-group/slds-button-group.vue"
+import SldsButtonIcon from "../../src/components/slds-button-icon/slds-button-icon.vue"
 
 export default {
     name: "test",
 
     components: {
+        SldsButtonIcon,
+        SldsButtonGroup,
+        SldsSvg,
         SldsCheckboxOutputGroup,
         SldsCheckboxGroup,
         SldsInput,
@@ -477,6 +528,17 @@ export default {
         return {
             activeTab: "details",
 
+            dropdownOptions: [
+                {
+                    label: "Cancel",
+                    value: "cancel",
+                },
+                {
+                    label: "Delete",
+                    value: "delete",
+                },
+            ],
+
             activeScopedTab: "first",
 
             checkboxButtonOptions: [
@@ -622,6 +684,10 @@ export default {
                 subject: "A title test1",
             })
         },
+
+        foo() {
+            console.log(1)
+        },
     },
 }
 </script>
diff --git a/src/components/slds-button-group/slds-button-group-dropdown.vue b/src/components/slds-button-group/slds-button-group-dropdown.vue
new file mode 100644
index 0000000..2b32759
--- /dev/null
+++ b/src/components/slds-button-group/slds-button-group-dropdown.vue
@@ -0,0 +1,55 @@
+<template>
+    <transition name="dropdown-right">
+        <div v-if="isOpen" class="slds-dropdown slds-dropdown_right slds-dropdown_actions">
+            <ul class="slds-dropdown__list" role="menu">
+                <li
+                    v-for="(option, index) in dropdownOptions"
+                    :key="index"
+                    class="slds-dropdown__item"
+                    role="presentation"
+                    @click="handleClickOption(option)"
+                >
+                    <a role="menuitem" tabindex="0">
+                        <span class="slds-truncate">
+                            {{ option.label }}
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+import { DropdownOption } from "../slds-dropdown/dropdown-option"
+import { EVENTS } from "../../constants"
+
+export default defineComponent({
+    name: "SldsButtonGroupDropdown",
+
+    props: {
+        /**
+         * Dropdown options.
+         */
+        dropdownOptions: { type: Array as PropType<DropdownOption[]>, default: () => [] as DropdownOption[] },
+
+        /**
+         * Indicates whether the dropdown is open.
+         */
+        isOpen: { type: Boolean, required: true },
+    },
+
+    methods: {
+        /**
+         * Handles the click event on the option.
+         * @param option Clicked option.
+         */
+        handleClickOption(option: DropdownOption): void {
+            if (option.isDivider || option.isHeading) return
+            this.$emit(EVENTS.CLICK_OPTION, option)
+        },
+    },
+})
+</script>
+
diff --git a/src/components/slds-button-group/slds-button-group.vue b/src/components/slds-button-group/slds-button-group.vue
index edf9485..4c87994 100644
--- a/src/components/slds-button-group/slds-button-group.vue
+++ b/src/components/slds-button-group/slds-button-group.vue
@@ -1,13 +1,114 @@
 <template>
     <div class="slds-button-group" role="group">
+
         <slot/>
+
+        <div
+            v-if="showDropdownButton"
+            v-click-outside="handleClickOutside"
+            class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open slds-button_last"
+        >
+
+            <slds-button-icon
+                bordered
+                :disabled="disabled"
+                icon-name="utility:down"
+                @click="handleClickButton"
+            />
+
+            <slds-button-group-dropdown
+                :is-open="isOpen"
+                :dropdown-options="dropdownOptions"
+                @click-option="handleClickOption"
+            />
+
+        </div>
+
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, PropType } from "vue"
+import SldsButtonIcon from "../slds-button-icon/slds-button-icon.vue"
+import SldsButtonGroupDropdown from "./slds-button-group-dropdown.vue"
+import HasDropdownMixin from "../../mixins/has-dropdown-mixin.ts"
+import { vOnClickOutside } from "@vueuse/components"
+import { DropdownOption } from "../slds-dropdown/dropdown-option.ts"
 
 export default defineComponent({
     name: "SldsButtonGroup",
+
+    components: { SldsButtonGroupDropdown, SldsButtonIcon },
+
+    directives: {
+        ClickOutside: vOnClickOutside,
+    },
+
+    mixins: [
+        HasDropdownMixin,
+    ],
+
+    props: {
+        /**
+         * Indicates whether this component is disabled.
+         */
+        disabled: Boolean,
+
+        /**
+         * Dropdown options.
+         */
+        dropdownOptions: { type: Array as PropType<DropdownOption[]>, default: () => [] as DropdownOption[] },
+    },
+
+    computed: {
+        /**
+         * Indicates whether the dropdown button is visible.
+         */
+        showDropdownButton(): boolean {
+            return Boolean(this.dropdownOptions && this.dropdownOptions.length > 0)
+        },
+    },
+
+    methods: {
+        /**
+         * Handles the click event on the button.
+         */
+        handleClickButton(): void {
+            if (this.isOpen) {
+                this.hideDropdown()
+            }
+            else if (!this.disabled) {
+                this.showDropdown()
+            }
+        },
+
+        /**
+         * Handles the click event on an option.
+         * @param option The clicked option.
+         */
+        handleClickOption(option: DropdownOption): void {
+            if (this.disabled || option.disabled) return
+            this.selectOption(option)
+        },
+
+        /**
+         * Handles the click event outside this component.
+         */
+        handleClickOutside(): void {
+            this.hideDropdown()
+        },
+
+        /**
+         * Selects an option.
+         * @param selectedOption Selected option.
+         */
+        selectOption(selectedOption: DropdownOption): void {
+            this.$emit(selectedOption.value!)
+            this.hideDropdown()
+
+            this.clearFocusedOption()
+        },
+    },
 })
 </script>
+

From 3e829ecc18dd64da7a89583e51a430ea5a438e03 Mon Sep 17 00:00:00 2001
From: Gustavo Gomes <gustavo.gomes@bluebear.app>
Date: Wed, 6 Nov 2024 16:06:54 -0300
Subject: [PATCH 4/5] Lint fix

---
 docs/examples/test.vue | 33 +--------------------------------
 1 file changed, 1 insertion(+), 32 deletions(-)

diff --git a/docs/examples/test.vue b/docs/examples/test.vue
index b74eec9..d97ffe9 100644
--- a/docs/examples/test.vue
+++ b/docs/examples/test.vue
@@ -1,36 +1,11 @@
 <template>
 
     <example-container class="slds-m-bottom_medium">
-        <slds-button-group
-            :dropdown-options="dropdownOptions"
-        >
-            <slds-button
-                disabled
-                label="foo"
-                neutral
-            />
-        </slds-button-group>
-    </example-container>
-
-    <example-container class="slds-m-bottom_medium">
-        <slds-button-group
-            :dropdown-options="dropdownOptions"
-            @delete="foo"
-        >
+        <slds-button-group :dropdown-options="dropdownOptions">
             <slds-button
                 label="foo"
                 neutral
             />
-            <slds-button
-                disabled
-                label="foo"
-                neutral
-            />
-            <slds-button
-                disabled
-                label="foo"
-                neutral
-            />
         </slds-button-group>
     </example-container>
 
@@ -486,13 +461,11 @@ import SldsCheckboxGroup from "../../src/components/slds-checkbox-group/slds-che
 import SldsCheckboxOutputGroup from "../../src/components/slds-checkbox-output-group/slds-checkbox-output-group.vue"
 import SldsSvg from "../../src/components/slds-svg/slds-svg.vue"
 import SldsButtonGroup from "../../src/components/slds-button-group/slds-button-group.vue"
-import SldsButtonIcon from "../../src/components/slds-button-icon/slds-button-icon.vue"
 
 export default {
     name: "test",
 
     components: {
-        SldsButtonIcon,
         SldsButtonGroup,
         SldsSvg,
         SldsCheckboxOutputGroup,
@@ -684,10 +657,6 @@ export default {
                 subject: "A title test1",
             })
         },
-
-        foo() {
-            console.log(1)
-        },
     },
 }
 </script>

From 7783b980b9319e501543e27a1622b673409dfc20 Mon Sep 17 00:00:00 2001
From: Gustavo Gomes <gustavo.gomes@bluebear.app>
Date: Wed, 6 Nov 2024 16:34:36 -0300
Subject: [PATCH 5/5] PR updated

---
 .../slds-button-group/slds-button-group.vue   | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/slds-button-group/slds-button-group.vue b/src/components/slds-button-group/slds-button-group.vue
index 4c87994..c03ec41 100644
--- a/src/components/slds-button-group/slds-button-group.vue
+++ b/src/components/slds-button-group/slds-button-group.vue
@@ -31,7 +31,6 @@
 import { defineComponent, PropType } from "vue"
 import SldsButtonIcon from "../slds-button-icon/slds-button-icon.vue"
 import SldsButtonGroupDropdown from "./slds-button-group-dropdown.vue"
-import HasDropdownMixin from "../../mixins/has-dropdown-mixin.ts"
 import { vOnClickOutside } from "@vueuse/components"
 import { DropdownOption } from "../slds-dropdown/dropdown-option.ts"
 
@@ -44,10 +43,6 @@ export default defineComponent({
         ClickOutside: vOnClickOutside,
     },
 
-    mixins: [
-        HasDropdownMixin,
-    ],
-
     props: {
         /**
          * Indicates whether this component is disabled.
@@ -60,6 +55,15 @@ export default defineComponent({
         dropdownOptions: { type: Array as PropType<DropdownOption[]>, default: () => [] as DropdownOption[] },
     },
 
+    data() {
+        return {
+            /**
+             * Indicates whether the dropdown is open.
+             */
+            isOpen: false,
+        }
+    },
+
     computed: {
         /**
          * Indicates whether the dropdown button is visible.
@@ -74,12 +78,8 @@ export default defineComponent({
          * Handles the click event on the button.
          */
         handleClickButton(): void {
-            if (this.isOpen) {
-                this.hideDropdown()
-            }
-            else if (!this.disabled) {
-                this.showDropdown()
-            }
+            if (this.isOpen) this.hideDropdown()
+            else if (!this.disabled) this.showDropdown()
         },
 
         /**
@@ -88,7 +88,9 @@ export default defineComponent({
          */
         handleClickOption(option: DropdownOption): void {
             if (this.disabled || option.disabled) return
-            this.selectOption(option)
+
+            this.$emit(option.value!)
+            this.hideDropdown()
         },
 
         /**
@@ -99,14 +101,17 @@ export default defineComponent({
         },
 
         /**
-         * Selects an option.
-         * @param selectedOption Selected option.
+         * Hides the dropdown.
          */
-        selectOption(selectedOption: DropdownOption): void {
-            this.$emit(selectedOption.value!)
-            this.hideDropdown()
+        hideDropdown(): void {
+            this.isOpen = false
+        },
 
-            this.clearFocusedOption()
+        /**
+         * Shows the dropdown.
+         */
+        showDropdown(): void {
+            this.isOpen = true
         },
     },
 })