UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 6.61 kB
{"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 { useNamespace } from '@element-plus/hooks'\nimport { useFormDisabled } from '@element-plus/components/form'\n\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 = useFormDisabled()\n const ns = useNamespace('button')\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 let buttonColor = props.color\n\n if (buttonColor) {\n const match = (buttonColor as string).match(/var\\((.*?)\\)/)\n if (match) {\n buttonColor = window\n .getComputedStyle(window.document.documentElement)\n .getPropertyValue(match[1])\n }\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 = ns.cssVarBlock({\n 'bg-color': props.dark\n ? darken(color, 90)\n : color.tint(90).toString(),\n 'text-color': buttonColor,\n 'border-color': props.dark\n ? darken(color, 50)\n : color.tint(50).toString(),\n 'hover-text-color': `var(${ns.cssVarName('color-white')})`,\n 'hover-bg-color': buttonColor,\n 'hover-border-color': buttonColor,\n 'active-bg-color': activeBgColor,\n 'active-text-color': `var(${ns.cssVarName('color-white')})`,\n 'active-border-color': activeBgColor,\n })\n\n if (_disabled.value) {\n styles[ns.cssVarBlockName('disabled-bg-color')] = props.dark\n ? darken(color, 90)\n : color.tint(90).toString()\n styles[ns.cssVarBlockName('disabled-text-color')] = props.dark\n ? darken(color, 50)\n : color.tint(50).toString()\n styles[ns.cssVarBlockName('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(${ns.cssVarName('color-white')})`\n : `var(${ns.cssVarName('color-black')})`\n styles = ns.cssVarBlock({\n 'bg-color': buttonColor,\n 'text-color': textColor,\n 'border-color': buttonColor,\n 'hover-bg-color': hoverBgColor,\n 'hover-text-color': textColor,\n 'hover-border-color': hoverBgColor,\n 'active-bg-color': activeBgColor,\n '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[ns.cssVarBlockName('disabled-bg-color')] = disabledButtonColor\n styles[ns.cssVarBlockName('disabled-text-color')] = props.dark\n ? 'rgba(255, 255, 255, 0.5)'\n : `var(${ns.cssVarName('color-white')})`\n styles[ns.cssVarBlockName('disabled-border-color')] =\n disabledButtonColor\n }\n }\n }\n\n return styles\n })\n}\n"],"names":[],"mappings":";;;;;AAOO,SAAS,MAAA,CAAO,KAAA,EAAkB,MAAA,GAAS,EAAA,EAAI;AACpD,EAAA,OAAO,KAAA,CAAM,GAAA,CAAI,SAAA,EAAW,MAAM,EAAE,QAAA,EAAS;AAC/C;AAEO,SAAS,qBAAqB,KAAA,EAAoB;AACvD,EAAA,MAAM,YAAY,eAAA,EAAgB;AAClC,EAAA,MAAM,EAAA,GAAK,aAAa,QAAQ,CAAA;AAIhC,EAAA,OAAO,SAAS,MAAM;AACpB,IAAA,IAAI,SAAiC,EAAC;AAEtC,IAAA,IAAI,cAAc,KAAA,CAAM,KAAA;AAExB,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,MAAM,KAAA,GAAS,WAAA,CAAuB,KAAA,CAAM,cAAc,CAAA;AAC1D,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,WAAA,GAAc,MAAA,CACX,iBAAiB,MAAA,CAAO,QAAA,CAAS,eAAe,CAAA,CAChD,gBAAA,CAAiB,KAAA,CAAM,CAAC,CAAC,CAAA;AAAA,MAC9B;AACA,MAAA,MAAM,KAAA,GAAQ,IAAI,SAAA,CAAU,WAAW,CAAA;AACvC,MAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,IAAA,GACxB,KAAA,CAAM,IAAA,CAAK,EAAE,CAAA,CAAE,QAAA,EAAS,GACxB,MAAA,CAAO,KAAA,EAAO,EAAE,CAAA;AAEpB,MAAA,IAAI,MAAM,KAAA,EAAO;AACf,QAAA,MAAA,GAAS,GAAG,WAAA,CAAY;AAAA,UACtB,UAAA,EAAY,KAAA,CAAM,IAAA,GACd,MAAA,CAAO,KAAA,EAAO,EAAE,CAAA,GAChB,KAAA,CAAM,IAAA,CAAK,EAAE,CAAA,CAAE,QAAA,EAAS;AAAA,UAC5B,YAAA,EAAc,WAAA;AAAA,UACd,cAAA,EAAgB,KAAA,CAAM,IAAA,GAClB,MAAA,CAAO,KAAA,EAAO,EAAE,CAAA,GAChB,KAAA,CAAM,IAAA,CAAK,EAAE,CAAA,CAAE,QAAA,EAAS;AAAA,UAC5B,kBAAA,EAAoB,CAAA,IAAA,EAAO,EAAA,CAAG,UAAA,CAAW,aAAa,CAAC,CAAA,CAAA,CAAA;AAAA,UACvD,gBAAA,EAAkB,WAAA;AAAA,UAClB,oBAAA,EAAsB,WAAA;AAAA,UACtB,iBAAA,EAAmB,aAAA;AAAA,UACnB,mBAAA,EAAqB,CAAA,IAAA,EAAO,EAAA,CAAG,UAAA,CAAW,aAAa,CAAC,CAAA,CAAA,CAAA;AAAA,UACxD,qBAAA,EAAuB;AAAA,SACxB,CAAA;AAED,QAAA,IAAI,UAAU,KAAA,EAAO;AACnB,UAAA,MAAA,CAAO,EAAA,CAAG,eAAA,CAAgB,mBAAmB,CAAC,IAAI,KAAA,CAAM,IAAA,GACpD,MAAA,CAAO,KAAA,EAAO,EAAE,CAAA,GAChB,KAAA,CAAM,IAAA,CAAK,EAAE,EAAE,QAAA,EAAS;AAC5B,UAAA,MAAA,CAAO,EAAA,CAAG,eAAA,CAAgB,qBAAqB,CAAC,IAAI,KAAA,CAAM,IAAA,GACtD,MAAA,CAAO,KAAA,EAAO,EAAE,CAAA,GAChB,KAAA,CAAM,IAAA,CAAK,EAAE,EAAE,QAAA,EAAS;AAC5B,UAAA,MAAA,CAAO,EAAA,CAAG,eAAA,CAAgB,uBAAuB,CAAC,IAAI,KAAA,CAAM,IAAA,GACxD,MAAA,CAAO,KAAA,EAAO,EAAE,CAAA,GAChB,KAAA,CAAM,IAAA,CAAK,EAAE,EAAE,QAAA,EAAS;AAAA,QAC9B;AAAA,MACF,CAAA,MAAO;AACL,QAAA,MAAM,YAAA,GAAe,KAAA,CAAM,IAAA,GACvB,MAAA,CAAO,KAAA,EAAO,EAAE,CAAA,GAChB,KAAA,CAAM,IAAA,CAAK,EAAE,CAAA,CAAE,QAAA,EAAS;AAC5B,QAAA,MAAM,SAAA,GAAY,KAAA,CAAM,MAAA,EAAO,GAC3B,OAAO,EAAA,CAAG,UAAA,CAAW,aAAa,CAAC,CAAA,CAAA,CAAA,GACnC,CAAA,IAAA,EAAO,EAAA,CAAG,UAAA,CAAW,aAAa,CAAC,CAAA,CAAA,CAAA;AACvC,QAAA,MAAA,GAAS,GAAG,WAAA,CAAY;AAAA,UACtB,UAAA,EAAY,WAAA;AAAA,UACZ,YAAA,EAAc,SAAA;AAAA,UACd,cAAA,EAAgB,WAAA;AAAA,UAChB,gBAAA,EAAkB,YAAA;AAAA,UAClB,kBAAA,EAAoB,SAAA;AAAA,UACpB,oBAAA,EAAsB,YAAA;AAAA,UACtB,iBAAA,EAAmB,aAAA;AAAA,UACnB,qBAAA,EAAuB;AAAA,SACxB,CAAA;AAED,QAAA,IAAI,UAAU,KAAA,EAAO;AACnB,UAAA,MAAM,mBAAA,GAAsB,KAAA,CAAM,IAAA,GAC9B,MAAA,CAAO,KAAA,EAAO,EAAE,CAAA,GAChB,KAAA,CAAM,IAAA,CAAK,EAAE,CAAA,CAAE,QAAA,EAAS;AAC5B,UAAA,MAAA,CAAO,EAAA,CAAG,eAAA,CAAgB,mBAAmB,CAAC,CAAA,GAAI,mBAAA;AAClD,UAAA,MAAA,CAAO,EAAA,CAAG,eAAA,CAAgB,qBAAqB,CAAC,CAAA,GAAI,KAAA,CAAM,IAAA,GACtD,0BAAA,GACA,CAAA,IAAA,EAAO,EAAA,CAAG,UAAA,CAAW,aAAa,CAAC,CAAA,CAAA,CAAA;AACvC,UAAA,MAAA,CAAO,EAAA,CAAG,eAAA,CAAgB,uBAAuB,CAAC,CAAA,GAChD,mBAAA;AAAA,QACJ;AAAA,MACF;AAAA,IACF;AAEA,IAAA,OAAO,MAAA;AAAA,EACT,CAAC,CAAA;AACH;;;;"}