useButton.ts
85 lines
| 1 | import { computed } from "vue"; |
| 2 | |
| 3 | import { |
| 4 | BUTTON_ICON_CONFIGURATION, |
| 5 | BUTTON_LOADER_DIMENSION_CONFIGURATION, |
| 6 | BUTTON_SIZE_CONFIGURATION, |
| 7 | BUTTON_VARIANT_CONFIGURATION |
| 8 | } from "@/components/Button/configuration"; |
| 9 | import type { Color, IButtonPropsMandatory } from "@/types"; |
| 10 | import { wrapInCssVar } from "@/utils/helpers"; |
| 11 | |
| 12 | export const useButton = (props: IButtonPropsMandatory) => { |
| 13 | if (!BUTTON_VARIANT_CONFIGURATION[props.variant][props.color]) { |
| 14 | throw new Error( |
| 15 | `Invalid variant and color combination: ${props.variant} ${props.color}` |
| 16 | ); |
| 17 | } |
| 18 | |
| 19 | const tag = computed(() => { |
| 20 | if (typeof props.to === "string") { |
| 21 | return "a"; |
| 22 | } |
| 23 | |
| 24 | if (props.to) { |
| 25 | return "router-link"; |
| 26 | } |
| 27 | |
| 28 | return "button"; |
| 29 | }); |
| 30 | |
| 31 | const configuration = computed( |
| 32 | () => BUTTON_VARIANT_CONFIGURATION[props.variant][props.color] |
| 33 | ); |
| 34 | |
| 35 | const iconConfiguration = computed(() => { |
| 36 | const color = props.isDisabled |
| 37 | ? configuration.value.disabled.color |
| 38 | : configuration.value.color; |
| 39 | |
| 40 | return { |
| 41 | size: BUTTON_ICON_CONFIGURATION[props.size].size, |
| 42 | color |
| 43 | }; |
| 44 | }); |
| 45 | |
| 46 | const getColorConfiguration = () => wrapInCssVar(configuration.value.color); |
| 47 | |
| 48 | const getBackgroundConfiguration = () => |
| 49 | wrapInCssVar(configuration.value.backgroundColor); |
| 50 | |
| 51 | const getLoaderBorderColor = (): Color | undefined => { |
| 52 | if (props.variant === "contain") { |
| 53 | return "white"; |
| 54 | } |
| 55 | |
| 56 | return undefined; |
| 57 | }; |
| 58 | |
| 59 | const style = computed(() => ({ |
| 60 | border: configuration.value.border, |
| 61 | padding: BUTTON_SIZE_CONFIGURATION[props.size].padding, |
| 62 | backgroundColor: getBackgroundConfiguration(), |
| 63 | color: getColorConfiguration(), |
| 64 | colorDisabled: wrapInCssVar(configuration.value.disabled.color), |
| 65 | backgroundColorDisabled: wrapInCssVar( |
| 66 | configuration.value.disabled.backgroundColor |
| 67 | ), |
| 68 | backgroundHoverColor: wrapInCssVar( |
| 69 | configuration.value.hoverBackgroundColor |
| 70 | ), |
| 71 | icon: iconConfiguration.value, |
| 72 | loader: { |
| 73 | borderColor: getLoaderBorderColor(), |
| 74 | size: BUTTON_LOADER_DIMENSION_CONFIGURATION[props.size].size, |
| 75 | border: BUTTON_LOADER_DIMENSION_CONFIGURATION[props.size].border |
| 76 | } |
| 77 | })); |
| 78 | |
| 79 | return { |
| 80 | style: style.value, |
| 81 | tag, |
| 82 | configuration |
| 83 | }; |
| 84 | }; |
| 85 |