element-plus/es/components/button/src/button-custom.mjs.map

A Component Library for Vue 3

{"version":3,"file":"button-custom.mjs","names":[],"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"],"mappings":";;;;;;AAOA,SAAgB,OAAO,OAAkB,SAAS,IAAI;AACpD,QAAO,MAAM,IAAI,WAAW,OAAO,CAAC,UAAU;;AAGhD,SAAgB,qBAAqB,OAAoB;CACvD,MAAM,YAAY,iBAAiB;CACnC,MAAM,KAAK,aAAa,SAAS;AAIjC,QAAO,eAAe;EACpB,IAAI,SAAiC,EAAE;EAEvC,IAAI,cAAc,MAAM;AAExB,MAAI,aAAa;GACf,MAAM,QAAS,YAAuB,MAAM,eAAe;AAC3D,OAAI,MACF,eAAc,OACX,iBAAiB,OAAO,SAAS,gBAAgB,CACjD,iBAAiB,MAAM,GAAG;GAE/B,MAAM,QAAQ,IAAI,UAAU,YAAY;GACxC,MAAM,gBAAgB,MAAM,OACxB,MAAM,KAAK,GAAG,CAAC,UAAU,GACzB,OAAO,OAAO,GAAG;AAErB,OAAI,MAAM,OAAO;AACf,aAAS,GAAG,YAAY;KACtB,YAAY,MAAM,OACd,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;KAC7B,cAAc;KACd,gBAAgB,MAAM,OAClB,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;KAC7B,oBAAoB,OAAO,GAAG,WAAW,cAAc,CAAC;KACxD,kBAAkB;KAClB,sBAAsB;KACtB,mBAAmB;KACnB,qBAAqB,OAAO,GAAG,WAAW,cAAc,CAAC;KACzD,uBAAuB;KACxB,CAAC;AAEF,QAAI,UAAU,OAAO;AACnB,YAAO,GAAG,gBAAgB,oBAAoB,IAAI,MAAM,OACpD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,sBAAsB,IAAI,MAAM,OACtD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,wBAAwB,IAAI,MAAM,OACxD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;;UAE1B;IACL,MAAM,eAAe,MAAM,OACvB,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;IAC7B,MAAM,YAAY,MAAM,QAAQ,GAC5B,OAAO,GAAG,WAAW,cAAc,CAAC,KACpC,OAAO,GAAG,WAAW,cAAc,CAAC;AACxC,aAAS,GAAG,YAAY;KACtB,YAAY;KACZ,cAAc;KACd,gBAAgB;KAChB,kBAAkB;KAClB,oBAAoB;KACpB,sBAAsB;KACtB,mBAAmB;KACnB,uBAAuB;KACxB,CAAC;AAEF,QAAI,UAAU,OAAO;KACnB,MAAM,sBAAsB,MAAM,OAC9B,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,oBAAoB,IAAI;AAClD,YAAO,GAAG,gBAAgB,sBAAsB,IAAI,MAAM,OACtD,6BACA,OAAO,GAAG,WAAW,cAAc,CAAC;AACxC,YAAO,GAAG,gBAAgB,wBAAwB,IAChD;;;;AAKR,SAAO;GACP"}