-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #272 from marceloatg/feature/group-button
slds-group-button-dropdown created
- Loading branch information
Showing
3 changed files
with
199 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
src/components/slds-button-group/slds-button-group-dropdown.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,119 @@ | ||
| <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 { vOnClickOutside } from "@vueuse/components" | ||
| import { DropdownOption } from "../slds-dropdown/dropdown-option.ts" | ||
| export default defineComponent({ | ||
| name: "SldsButtonGroup", | ||
| components: { SldsButtonGroupDropdown, SldsButtonIcon }, | ||
| directives: { | ||
| ClickOutside: vOnClickOutside, | ||
| }, | ||
| props: { | ||
| /** | ||
| * Indicates whether this component is disabled. | ||
| */ | ||
| disabled: Boolean, | ||
| /** | ||
| * Dropdown options. | ||
| */ | ||
| 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. | ||
| */ | ||
| 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.$emit(option.value!) | ||
| this.hideDropdown() | ||
| }, | ||
| /** | ||
| * Handles the click event outside this component. | ||
| */ | ||
| handleClickOutside(): void { | ||
| this.hideDropdown() | ||
| }, | ||
| /** | ||
| * Hides the dropdown. | ||
| */ | ||
| hideDropdown(): void { | ||
| this.isOpen = false | ||
| }, | ||
| /** | ||
| * Shows the dropdown. | ||
| */ | ||
| showDropdown(): void { | ||
| this.isOpen = true | ||
| }, | ||
| }, | ||
| }) | ||
| </script> | ||
|
|