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

Vue 3 UI Framework

{"version":3,"file":"useButtonBackground.mjs","sources":["../../../../../../src/components/va-button/hooks/useButtonBackground.ts"],"sourcesContent":["import { computed, Ref, ComputedRef, getCurrentInstance } from 'vue'\n\nimport { useColors } from '../../../composables'\n\nimport type { ButtonPropsTypes } from '../types'\n\ntype UseButtonBackground = (\n  colorComputed: Ref<string>,\n  isPressed: Ref<boolean>,\n  isHovered: Ref<boolean>,\n  ) => {\n  backgroundMaskOpacity: ComputedRef<number>;\n  backgroundMaskColor: ComputedRef<string>;\n  backgroundColor: ComputedRef<string>;\n  backgroundColorOpacity: ComputedRef<number>;\n}\n\nexport const useButtonBackground: UseButtonBackground = (\n  colorComputed,\n  isPressed,\n  isHovered,\n) => {\n  const instance = getCurrentInstance()\n  if (!instance) { throw new Error('`useButtonBackground` hook must be used only inside of setup function!') }\n  const props = instance.props as Required<ButtonPropsTypes>\n\n  const { getColor, getGradientBackground } = useColors()\n\n  const backgroundColor = computed(() => {\n    if (props.plain) { return 'transparent' }\n\n    return props.gradient\n      ? getGradientBackground(colorComputed.value)\n      : colorComputed.value\n  })\n\n  const hoveredBgState = computed(() => !props.plain && isHovered.value)\n  const pressedBgState = computed(() => !props.plain && isPressed.value)\n\n  const backgroundColorOpacity = computed(() => {\n    if (pressedBgState.value && props.pressedBehavior === 'opacity') { return props.pressedOpacity }\n    if (hoveredBgState.value && props.hoverBehavior === 'opacity') { return Number(props.hoverOpacity) }\n\n    return Number(props.backgroundOpacity)\n  })\n\n  const hoveredMaskState = computed(() => hoveredBgState.value && props.hoverBehavior === 'mask')\n  const pressedMaskState = computed(() => pressedBgState.value && props.pressedBehavior === 'mask')\n\n  const backgroundMaskOpacity = computed(() => {\n    if (pressedMaskState.value) { return props.pressedOpacity }\n    if (hoveredMaskState.value) { return Number(props.hoverOpacity) }\n\n    return 0\n  })\n  const backgroundMaskColor = computed(() => {\n    if (pressedMaskState.value) { return getColor(props.pressedMaskColor) }\n    if (hoveredMaskState.value) { return getColor(props.hoverMaskColor) }\n\n    return 'transparent'\n  })\n\n  return {\n    backgroundColor,\n    backgroundColorOpacity,\n    backgroundMaskOpacity,\n    backgroundMaskColor,\n  }\n}\n"],"names":[],"mappings":";;AAiBO,MAAM,sBAA2C,CACtD,eACA,WACA,cACG;AACH,QAAM,WAAW;AACjB,MAAI,CAAC,UAAU;AAAQ,UAAA,IAAI,MAAM,wEAAwE;AAAA,EAAE;AAC3G,QAAM,QAAQ,SAAS;AAEvB,QAAM,EAAE,UAAU,sBAAsB,IAAI,UAAU;AAEhD,QAAA,kBAAkB,SAAS,MAAM;AACrC,QAAI,MAAM,OAAO;AAAS,aAAA;AAAA,IAAc;AAExC,WAAO,MAAM,WACT,sBAAsB,cAAc,KAAK,IACzC,cAAc;AAAA,EAAA,CACnB;AAED,QAAM,iBAAiB,SAAS,MAAM,CAAC,MAAM,SAAS,UAAU,KAAK;AACrE,QAAM,iBAAiB,SAAS,MAAM,CAAC,MAAM,SAAS,UAAU,KAAK;AAE/D,QAAA,yBAAyB,SAAS,MAAM;AAC5C,QAAI,eAAe,SAAS,MAAM,oBAAoB,WAAW;AAAE,aAAO,MAAM;AAAA,IAAe;AAC/F,QAAI,eAAe,SAAS,MAAM,kBAAkB,WAAW;AAAS,aAAA,OAAO,MAAM,YAAY;AAAA,IAAE;AAE5F,WAAA,OAAO,MAAM,iBAAiB;AAAA,EAAA,CACtC;AAED,QAAM,mBAAmB,SAAS,MAAM,eAAe,SAAS,MAAM,kBAAkB,MAAM;AAC9F,QAAM,mBAAmB,SAAS,MAAM,eAAe,SAAS,MAAM,oBAAoB,MAAM;AAE1F,QAAA,wBAAwB,SAAS,MAAM;AAC3C,QAAI,iBAAiB,OAAO;AAAE,aAAO,MAAM;AAAA,IAAe;AAC1D,QAAI,iBAAiB,OAAO;AAAS,aAAA,OAAO,MAAM,YAAY;AAAA,IAAE;AAEzD,WAAA;AAAA,EAAA,CACR;AACK,QAAA,sBAAsB,SAAS,MAAM;AACzC,QAAI,iBAAiB,OAAO;AAAS,aAAA,SAAS,MAAM,gBAAgB;AAAA,IAAE;AACtE,QAAI,iBAAiB,OAAO;AAAS,aAAA,SAAS,MAAM,cAAc;AAAA,IAAE;AAE7D,WAAA;AAAA,EAAA,CACR;AAEM,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}