element-plus
Version:
A Component Library for Vue 3
1 lines • 5.79 kB
Source Map (JSON)
{"version":3,"file":"button-custom.mjs","sources":["../../../../../../packages/components/button/src/button-custom.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { TinyColor } from '@ctrl/tinycolor'\nimport { useDisabled } from '@element-plus/hooks'\nimport type { ButtonProps } from './button'\n\nexport function darken(color: TinyColor, amount = 20) {\n return color.mix('#141414', amount).toString()\n}\n\nexport function useButtonCustomStyle(props: ButtonProps) {\n const _disabled = useDisabled()\n\n // calculate hover & active color by custom color\n // only work when custom color\n return computed(() => {\n let styles: Record<string, string> = {}\n\n const buttonColor = props.color\n\n if (buttonColor) {\n const color = new TinyColor(buttonColor)\n const activeBgColor = props.dark\n ? color.tint(20).toString()\n : darken(color, 20)\n\n if (props.plain) {\n styles = {\n '--el-button-bg-color': props.dark\n ? darken(color, 90)\n : color.tint(90).toString(),\n '--el-button-text-color': buttonColor,\n '--el-button-border-color': props.dark\n ? darken(color, 50)\n : color.tint(50).toString(),\n '--el-button-hover-text-color': 'var(--el-color-white)',\n '--el-button-hover-bg-color': buttonColor,\n '--el-button-hover-border-color': buttonColor,\n '--el-button-active-bg-color': activeBgColor,\n '--el-button-active-text-color': 'var(--el-color-white)',\n '--el-button-active-border-color': activeBgColor,\n }\n\n if (_disabled.value) {\n styles['--el-button-disabled-bg-color'] = props.dark\n ? darken(color, 90)\n : color.tint(90).toString()\n styles['--el-button-disabled-text-color'] = props.dark\n ? darken(color, 50)\n : color.tint(50).toString()\n styles['--el-button-disabled-border-color'] = props.dark\n ? darken(color, 80)\n : color.tint(80).toString()\n }\n } else {\n const hoverBgColor = props.dark\n ? darken(color, 30)\n : color.tint(30).toString()\n const textColor = color.isDark()\n ? 'var(--el-color-white)'\n : 'var(--el-color-black)'\n styles = {\n '--el-button-bg-color': buttonColor,\n '--el-button-text-color': textColor,\n '--el-button-border-color': buttonColor,\n '--el-button-hover-bg-color': hoverBgColor,\n '--el-button-hover-text-color': textColor,\n '--el-button-hover-border-color': hoverBgColor,\n '--el-button-active-bg-color': activeBgColor,\n '--el-button-active-border-color': activeBgColor,\n }\n\n if (_disabled.value) {\n const disabledButtonColor = props.dark\n ? darken(color, 50)\n : color.tint(50).toString()\n styles['--el-button-disabled-bg-color'] = disabledButtonColor\n styles['--el-button-disabled-text-color'] = props.dark\n ? 'rgba(255, 255, 255, 0.5)'\n : 'var(--el-color-white)'\n styles['--el-button-disabled-border-color'] = disabledButtonColor\n }\n }\n }\n\n return styles\n })\n}\n"],"names":[],"mappings":"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"}