-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add
Edit Webhooks Modal on NotificationsManagementModal
Adding `BaseComponents` like `Forms` and `Buttons` See: BIDS-3014
- Loading branch information
MarcelBitfly
committed
Jul 23, 2024
1 parent
80c356a
commit 64f90c6
Showing
14 changed files
with
461 additions
and
18 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <script lang="ts" setup> | ||
| const props =defineProps<{ | ||
| /** | ||
| * ℹ️ should only be used rarely, e.g. in cases where the action should not be triggerd twice | ||
| */ | ||
| isDisabled?: boolean, | ||
| /** | ||
| * ♿️ buttons that are aria-disabled are still perceivable by screen readers | ||
| * as they can still be focused on | ||
| */ | ||
| isAriaDisabled?: boolean, | ||
| variant?: 'secondary' // | 'red' | ||
| }>() | ||
| const shouldAppearDisabled = computed(() => props.isDisabled || props.isAriaDisabled) | ||
| </script> | ||
|
|
||
| <template> | ||
| <Button | ||
| type="button" | ||
| :disabled="isDisabled" | ||
| :aria-disabled="isAriaDisabled" | ||
| :class="{ | ||
| 'bc-button--secondary': !shouldAppearDisabled && variant === 'secondary', | ||
| 'bc-button--disabled': shouldAppearDisabled, | ||
| // 'bc-button--red': variant === 'red' | ||
| }" | ||
| > | ||
| <slot/> | ||
| <span | ||
| v-if="$slots.icon" | ||
| class="bc-button__icon" | ||
| > | ||
| <slot name="icon"/> | ||
| </span> | ||
| </Button> | ||
|
|
||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .bc-button--secondary { | ||
| border-color: var(--button-secondary-border-color); | ||
| background-color: var(--button-secondary-background-color); | ||
| color: var(--button-secondary-color); | ||
| &:hover { | ||
| background-color: var(--button-secondary-background-color--hover); | ||
| border-color: var(--button-secondary-border-color); | ||
| } | ||
| &:active { | ||
| background-color: var(--button-secondary-background-color); | ||
| border-color: var(--button-secondary-border-color); | ||
| } | ||
| } | ||
| .bc-button--disabled { | ||
| &, | ||
| &:hover, | ||
| &:focus { | ||
| background-color: var(--button-color-disabled); | ||
| border-color: var(--button-color-disabled); | ||
| color: var(--button-text-color-disabled); | ||
| cursor: not-allowed; | ||
| } | ||
| } | ||
| .bc-button__icon { | ||
| margin-left: var(--padding-small); | ||
| } | ||
| </style> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <script lang="ts" setup> | ||
| </script> | ||
|
|
||
| <template> | ||
| <form class="bc-form"> | ||
| <slot/> | ||
| </form> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .bc-form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: var(--padding-small); | ||
| } | ||
| </style> |
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,23 @@ | ||
| <script lang="ts" setup> | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="bc-form-row"> | ||
| <slot/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .bc-form-row { | ||
| display: grid; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| grid-template-columns: 1fr auto; | ||
| row-gap: var(--padding-small); | ||
| grid-template-areas: | ||
| "label input" | ||
| "error error"; | ||
| } | ||
| </style> |
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,58 @@ | ||
| <script lang="ts" setup> | ||
| import { | ||
| faInfoCircle | ||
| } from '@fortawesome/pro-regular-svg-icons' | ||
| import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' | ||
| import type { BcInputError } from '~/components/bc/input/BcInputError.vue'; | ||
| const props = defineProps<{ | ||
| error?: BcInputError, | ||
| label?: string, | ||
| infoText?: string, | ||
| }>() | ||
| const id = props.label ? useId() : undefined | ||
| const input = defineModel<boolean>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <BcInputError :error> | ||
| <span> | ||
| <label | ||
| v-if="label" | ||
| class="label" | ||
| :for="id" | ||
| > | ||
| {{ label }} | ||
| </label> | ||
| <BcTooltip | ||
| v-if="infoText" | ||
| class="bc-input-checkbox__info" | ||
| tooltip-width="217px" | ||
| tooltip-text-align="left" | ||
| > | ||
| <FontAwesomeIcon :icon="faInfoCircle" /> | ||
| <template #tooltip> | ||
| {{ infoText }} | ||
| </template> | ||
| </BcTooltip> | ||
| </span> | ||
| <Checkbox | ||
| v-model="input" | ||
| :input-id="id" | ||
| v-bind="$attrs" | ||
| binary | ||
| class="bc-input-checkbox__input" | ||
| /> | ||
| </BcInputError> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| .label{ | ||
| cursor: pointer; | ||
| } | ||
| .bc-input-checkbox__info { | ||
| margin-left: var(--padding); | ||
| } | ||
| </style> |
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,32 @@ | ||
| <script lang="ts" setup> | ||
| const idError = useId(); | ||
| /** | ||
| * Spacing of error message will be removed by explicitly passing `false`. | ||
| * This should encourage to always think about the error message. | ||
| */ | ||
| export type BcInputError = false | string; | ||
| defineProps<{ | ||
| error?: BcInputError; | ||
| }>(); | ||
| </script> | ||
|
|
||
| <template> | ||
| <slot | ||
| :id-error | ||
| :aria-invalid="!!error" | ||
| :aria-describedby="idError" | ||
| /> | ||
| <div v-if="error !== false" :id="idError" class="bc-input-error"> | ||
| {{ error }} | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .bc-input-error { | ||
| color: var(--text-color--error); | ||
| grid-column: span 2; | ||
| margin-left: auto; // 1. | ||
| --line-height--default: 1.2; | ||
| min-height: calc(16px * var(--line-height--default)); | ||
| } | ||
| </style> |
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,36 @@ | ||
| <script lang="ts" setup> | ||
| import type { BcInputError } from '~/components/bc/input/BcInputError.vue'; | ||
| const idInput = useId(); | ||
| const input = defineModel<string>(); | ||
| defineProps<{ | ||
| error?: BcInputError; | ||
| inputWidth?: `${number}px`; | ||
| label: string; | ||
| placeholder?: string; | ||
| type?: HTMLInputElement['type']; | ||
| }>(); | ||
| </script> | ||
|
|
||
| <template> | ||
| <BcInputError :error> | ||
| <label :for="idInput">{{ label }}</label> | ||
| <InputText | ||
| :id="idInput" | ||
| v-model.trim="input" | ||
| v-bind="$attrs" | ||
| class="bc-input-text__input" | ||
| :placeholder | ||
| :type | ||
| /> | ||
| </BcInputError> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| // 1. the text is aligned right, but if the message is extra long | ||
| // it will start on the left side in the new line | ||
| .bc-input-text__input { | ||
| width: v-bind(inputWidth); | ||
| } | ||
| </style> |
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
Oops, something went wrong.