-
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 #245 from marceloatg/feature/checkbox-group
SldsCheckboxGroup created
- Loading branch information
Showing
8 changed files
with
246 additions
and
10 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
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
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
17 changes: 17 additions & 0 deletions
17
src/components/slds-checkbox-group/checkbox-group-option.ts
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,17 @@ | ||
| export interface CheckboxGroupOption { | ||
| /** | ||
| * Checkbox option label. | ||
| */ | ||
| label: string | ||
|
|
||
| /** | ||
| * Checkbox option value. | ||
| * This property is used as the v-for key. | ||
| */ | ||
| value: string | ||
|
|
||
| /** | ||
| * Indicates whether this option is disabled. | ||
| */ | ||
| disabled: boolean | ||
| } |
72 changes: 72 additions & 0 deletions
72
src/components/slds-checkbox-group/slds-checkbox-group-option.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,72 @@ | ||
| <template> | ||
| <div class="slds-checkbox" @click="handleClick"> | ||
|
|
||
| <!-- Input --> | ||
| <input | ||
| type="checkbox" | ||
| :checked="checked" | ||
| :disabled="disabled" | ||
| :class="inputClassNames" | ||
| > | ||
|
|
||
| <!-- Faux --> | ||
| <label class="slds-checkbox__label"> | ||
|
|
||
| <span class="slds-checkbox_faux"/> | ||
|
|
||
| <span class="slds-form-element__label"> | ||
| {{ label }} | ||
| </span> | ||
|
|
||
| </label> | ||
|
|
||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from "vue" | ||
| export default defineComponent({ | ||
| name: "SldsCheckboxGroupOption", | ||
| props: { | ||
| /** | ||
| * Indicates whether this option is checked. | ||
| */ | ||
| checked: Boolean, | ||
| /** | ||
| * Indicates whether this option is disabled. | ||
| */ | ||
| disabled: Boolean, | ||
| /** | ||
| * Option label. | ||
| */ | ||
| label: { type: String, required: true }, | ||
| }, | ||
| computed: { | ||
| /** | ||
| * The CSS class names for the input. | ||
| */ | ||
| inputClassNames(): string { | ||
| let classNames = "" | ||
| if (this.disabled) classNames += " disabled" | ||
| return classNames | ||
| }, | ||
| }, | ||
| methods: { | ||
| /** | ||
| * Handles the click event on the checkbox button. | ||
| * @param event The fired event. | ||
| */ | ||
| handleClick(event: Event): void { | ||
| if (this.disabled) event.preventDefault() | ||
| }, | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
109 changes: 109 additions & 0 deletions
109
src/components/slds-checkbox-group/slds-checkbox-group.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,109 @@ | ||
| <template> | ||
| <slds-form-element | ||
| :errors="errors" | ||
| :help="help" | ||
| :label="label" | ||
| :required="required" | ||
| :stacked="stacked" | ||
| :tooltip="tooltip" | ||
| > | ||
|
|
||
| <!-- Tooltip --> | ||
| <template v-if="$slots.tooltip" #tooltip> | ||
| <slot name="tooltip"/> | ||
| </template> | ||
|
|
||
| <!-- Default slot --> | ||
| <template #default> | ||
| <slot> | ||
| <slds-checkbox-group-option | ||
| v-for="option in options" | ||
| :key="option.value" | ||
| :checked="modelValue.includes(option.value)" | ||
| :label="option.label" | ||
| :disabled="option.disabled || disabled" | ||
| @click="handleClick($event, option)" | ||
| /> | ||
| </slot> | ||
| </template> | ||
|
|
||
| <!-- Inline help --> | ||
| <template #help> | ||
| <slot name="help"/> | ||
| </template> | ||
|
|
||
| <!-- Error messages --> | ||
| <template #error> | ||
| <slot name="error"/> | ||
| </template> | ||
|
|
||
| </slds-form-element> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import SldsFormElement from "../slds-form-element/slds-form-element.vue" | ||
| import SldsCheckboxGroupOption from "../slds-checkbox-group/slds-checkbox-group-option.vue" | ||
| import { defineComponent, type PropType } from "vue" | ||
| import { type ValidationError } from "../slds-form-element/validation-error" | ||
| import { type CheckboxGroupOption } from "./checkbox-group-option" | ||
| import { EVENTS } from "../../constants" | ||
| export default defineComponent ({ | ||
| name: "SldsCheckboxGroup", | ||
| components: { SldsCheckboxGroupOption, SldsFormElement }, | ||
| props: { | ||
| disabled: Boolean, | ||
| /** | ||
| * Array of error objects from vuelidate. | ||
| */ | ||
| errors: { type: Array as PropType<ValidationError[]>, default: () => [] as ValidationError[] }, | ||
| /** | ||
| * Inline help text. | ||
| * When using the help slot this prop is ignored. | ||
| */ | ||
| help: String, | ||
| label: String, | ||
| modelValue: { type: Array as PropType<string[]>, default: () => [] }, | ||
| options: { type: Array as PropType<CheckboxGroupOption[]>, default: () => [] }, | ||
| required: Boolean, | ||
| /** | ||
| * Indicates whether the input is stacked among other inputs. | ||
| */ | ||
| stacked: Boolean, | ||
| tooltip: String, | ||
| }, | ||
| methods: { | ||
| /** | ||
| * Handles the click event on the checkbox group. | ||
| * @param event The fired event. | ||
| * @param option The clicked option. | ||
| */ | ||
| handleClick(event: Event, option: CheckboxGroupOption): void { | ||
| if (!event || this.disabled || option.disabled) { | ||
| event.preventDefault() | ||
| return | ||
| } | ||
| const value = [...this.modelValue] | ||
| const index = value.indexOf(option.value) | ||
| if (index === -1) value.push(option.value) | ||
| else value.splice(index, 1) | ||
| this.$emit(EVENTS.UPDATE_MODEL_VALUE, value) | ||
| }, | ||
| }, | ||
| }) | ||
| </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
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