vuestic-ui/dist/esm-node/src/components/va-button/hooks/useButtonTextColor.mjs.map

Vue 3 UI Framework

{"version":3,"file":"useButtonTextColor.mjs","sources":["../../../../../../src/components/va-button/hooks/useButtonTextColor.ts"],"sourcesContent":["import { computed, Ref, ComputedRef, getCurrentInstance } from 'vue'\n\nimport { useColors } from '../../../composables'\nimport { isServer } from '../../../utils/ssr'\n\nimport { ButtonPropsTypes } from '../types'\n\ntype ButtonTextColorStyles = {\n  color: string\n  background?: string\n  opacity?: number\n  'background-clip'?: 'text',\n  '-webkit-background-clip'?: 'text',\n}\n\ntype UseButtonTextColor = (\n  textColorComputed: Ref<string>,\n  colorComputed: Ref<string>,\n  isPressed: Ref<boolean>,\n  isHovered: Ref<boolean>,\n) => ComputedRef<ButtonTextColorStyles>\n\n/*\n* Inverts opacity depending on browser (webkit/chromium)\n* TODO: Check if Safari <16 version will be less then 1% and remove function\n*\n* @param {number} opacity - Opacity value\n* @returns {number} Inverted opacity value\n* */\nconst getOpacity = (opacity: number): number => {\n  if (isServer()) { return opacity }\n\n  if (opacity > 0) {\n    const userAgent = window?.navigator?.userAgent\n    const isSafari = userAgent && /^((?!chrome|android).)*safari/i.test(window?.navigator?.userAgent)\n    const isLatestSafari = userAgent && /(version.)15|16/i.test(window?.navigator?.userAgent)\n\n    if (isSafari && !isLatestSafari) {\n      return opacity < 1 ? 1 - opacity : opacity\n    }\n  }\n\n  return opacity\n}\n\nexport const useButtonTextColor: UseButtonTextColor = (\n  textColorComputed,\n  colorComputed,\n  isPressed,\n  isHovered,\n) => {\n  const instance = getCurrentInstance()\n  if (!instance) { throw new Error('`useButtonTextColor` hook must be used only inside of setup function!') }\n\n  const props = instance.props as Required<ButtonPropsTypes>\n\n  const { getColor, colorToRgba, getStateMaskGradientBackground } = useColors()\n\n  const plainColorStyles = computed(() => ({\n    background: 'transparent',\n    color: textColorComputed.value,\n    '-webkit-background-clip': 'text',\n    'background-clip': 'text',\n    opacity: getPlainTextOpacity.value,\n  }))\n\n  const getStateColor = (maskColor: string, stateOpacity: number, stateBehavior: string) => {\n    const maskStateColor = getColor(maskColor)\n    let stateStyles: Partial<ButtonTextColorStyles>\n\n    if (stateBehavior === 'opacity') {\n      stateStyles = { color: colorToRgba(textColorComputed.value, stateOpacity) }\n    } else {\n      stateStyles = {\n        background: getStateMaskGradientBackground(colorComputed.value, maskStateColor, stateOpacity),\n        color: stateOpacity < 1 ? colorToRgba(textColorComputed.value, getOpacity(stateOpacity)) : maskStateColor,\n      }\n    }\n\n    return { ...plainColorStyles.value, ...stateStyles }\n  }\n\n  const hoverTextColorComputed = computed(() => {\n    return getStateColor(props.hoverMaskColor, Number(props.hoverOpacity), props.hoverBehavior)\n  })\n\n  const pressedTextColorComputed = computed(() => {\n    return getStateColor(props.pressedMaskColor, props.pressedOpacity, props.pressedBehavior)\n  })\n\n  const getPlainTextOpacity = computed(() => {\n    if (props.disabled) { return undefined }\n    if (props.textOpacity === 1 || (isHovered.value && !isPressed.value)) { return 1 }\n    return isPressed.value ? 0.9 : props.textOpacity\n  })\n\n  return computed(() => {\n    const defaultColorStyles = {\n      color: textColorComputed.value,\n      background: 'transparent',\n    }\n\n    props.plain && Object.assign(defaultColorStyles, plainColorStyles.value, { background: textColorComputed.value })\n\n    if (!props.plain) { return defaultColorStyles }\n    if (isPressed.value) { return pressedTextColorComputed.value }\n    if (isHovered.value) { return hoverTextColorComputed.value }\n    return defaultColorStyles\n  })\n}\n"],"names":[],"mappings":";;;AA6BA,MAAM,aAAa,CAAC,YAA4B;;AAC9C,MAAI,YAAY;AAAS,WAAA;AAAA,EAAQ;AAEjC,MAAI,UAAU,GAAG;AACT,UAAA,aAAY,sCAAQ,cAAR,mBAAmB;AACrC,UAAM,WAAW,aAAa,iCAAiC,MAAK,sCAAQ,cAAR,mBAAmB,SAAS;AAChG,UAAM,iBAAiB,aAAa,mBAAmB,MAAK,sCAAQ,cAAR,mBAAmB,SAAS;AAEpF,QAAA,YAAY,CAAC,gBAAgB;AACxB,aAAA,UAAU,IAAI,IAAI,UAAU;AAAA,IACrC;AAAA,EACF;AAEO,SAAA;AACT;AAEO,MAAM,qBAAyC,CACpD,mBACA,eACA,WACA,cACG;AACH,QAAM,WAAW;AACjB,MAAI,CAAC,UAAU;AAAQ,UAAA,IAAI,MAAM,uEAAuE;AAAA,EAAE;AAE1G,QAAM,QAAQ,SAAS;AAEvB,QAAM,EAAE,UAAU,aAAa,mCAAmC,UAAU;AAEtE,QAAA,mBAAmB,SAAS,OAAO;AAAA,IACvC,YAAY;AAAA,IACZ,OAAO,kBAAkB;AAAA,IACzB,2BAA2B;AAAA,IAC3B,mBAAmB;AAAA,IACnB,SAAS,oBAAoB;AAAA,EAC7B,EAAA;AAEF,QAAM,gBAAgB,CAAC,WAAmB,cAAsB,kBAA0B;AAClF,UAAA,iBAAiB,SAAS,SAAS;AACrC,QAAA;AAEJ,QAAI,kBAAkB,WAAW;AAC/B,oBAAc,EAAE,OAAO,YAAY,kBAAkB,OAAO,YAAY;IAAE,OACrE;AACS,oBAAA;AAAA,QACZ,YAAY,+BAA+B,cAAc,OAAO,gBAAgB,YAAY;AAAA,QAC5F,OAAO,eAAe,IAAI,YAAY,kBAAkB,OAAO,WAAW,YAAY,CAAC,IAAI;AAAA,MAAA;AAAA,IAE/F;AAEA,WAAO,EAAE,GAAG,iBAAiB,OAAO,GAAG,YAAY;AAAA,EAAA;AAG/C,QAAA,yBAAyB,SAAS,MAAM;AACrC,WAAA,cAAc,MAAM,gBAAgB,OAAO,MAAM,YAAY,GAAG,MAAM,aAAa;AAAA,EAAA,CAC3F;AAEK,QAAA,2BAA2B,SAAS,MAAM;AAC9C,WAAO,cAAc,MAAM,kBAAkB,MAAM,gBAAgB,MAAM,eAAe;AAAA,EAAA,CACzF;AAEK,QAAA,sBAAsB,SAAS,MAAM;AACzC,QAAI,MAAM,UAAU;AAAS,aAAA;AAAA,IAAU;AACvC,QAAI,MAAM,gBAAgB,KAAM,UAAU,SAAS,CAAC,UAAU,OAAQ;AAAS,aAAA;AAAA,IAAE;AAC1E,WAAA,UAAU,QAAQ,MAAM,MAAM;AAAA,EAAA,CACtC;AAED,SAAO,SAAS,MAAM;AACpB,UAAM,qBAAqB;AAAA,MACzB,OAAO,kBAAkB;AAAA,MACzB,YAAY;AAAA,IAAA;AAGR,UAAA,SAAS,OAAO,OAAO,oBAAoB,iBAAiB,OAAO,EAAE,YAAY,kBAAkB,MAAO,CAAA;AAE5G,QAAA,CAAC,MAAM,OAAO;AAAS,aAAA;AAAA,IAAmB;AAC9C,QAAI,UAAU,OAAO;AAAE,aAAO,yBAAyB;AAAA,IAAM;AAC7D,QAAI,UAAU,OAAO;AAAE,aAAO,uBAAuB;AAAA,IAAM;AACpD,WAAA;AAAA,EAAA,CACR;AACH;"}