| 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, |
| 81 |
tag, |
| 82 |
configuration, |
| 83 |
}; |
| 84 |
}; |
| 85 |
|
