vuestic-ui/dist/esm-node/src/components/va-alert/useAlertStyles.mjs.map

Vue 3 UI Framework

{"version":3,"file":"useAlertStyles.mjs","sources":["../../../../../src/components/va-alert/useAlertStyles.ts"],"sourcesContent":["import { computed, toRef } from 'vue'\nimport { useColors, useCurrentElement, useElementBackground, useElementTextColor, useTextColor } from '../../composables'\n\ntype AlertStyleProps = {\n  modelValue: boolean,\n  color: string,\n  textColor: string,\n  title: string,\n  description: string,\n  icon: string,\n  closeText: string,\n  closeable: boolean,\n  dense: boolean,\n  outline: boolean,\n  center: boolean,\n  borderColor: string,\n  border: string,\n}\n\nexport const useAlertStyles = (props: AlertStyleProps) => {\n  const { getColor } = useColors()\n\n  const isTransparentBackground = computed(() => Boolean(props.outline || props.border))\n  const { textColorComputed } = useTextColor(toRef(props, 'color'), isTransparentBackground)\n\n  const colorComputed = computed(() => getColor(props.color))\n\n  const alertStyle = computed(() => {\n    let background = colorComputed.value\n    let boxShadow = 'none'\n\n    if (props.outline) {\n      background = 'transparent'\n    }\n\n    if (props.border) {\n      background = 'var(--va-background-primary)'\n      boxShadow = 'var(--va-alert-box-shadow)'\n    }\n\n    return {\n      border: props.outline ? `1px solid ${colorComputed.value}` : '',\n      padding: props.dense ? 'var(--va-alert-padding-y-dense) var(--va-alert-padding-x)' : '',\n      backgroundColor: background,\n      boxShadow,\n    }\n  })\n\n  const currentColor = useElementTextColor(useElementBackground(useCurrentElement()))\n\n  const contentStyle = computed(() => {\n    return {\n      alignItems: props.center ? 'center' : '',\n      color: (props.border || props.outline) ? currentColor.value : textColorComputed.value,\n    }\n  })\n\n  const titleStyle = computed(() => {\n    return { color: textColorComputed.value }\n  })\n\n  const borderStyle = computed(() => ({\n    backgroundColor: props.borderColor\n      ? getColor(props.borderColor)\n      : colorComputed.value,\n  }))\n\n  return {\n    alertStyle,\n    contentStyle,\n    titleStyle,\n    borderStyle,\n  }\n}\n"],"names":[],"mappings":";;;;;;AAmBa,MAAA,iBAAiB,CAAC,UAA2B;AAClD,QAAA,EAAE,aAAa;AAEf,QAAA,0BAA0B,SAAS,MAAM,QAAQ,MAAM,WAAW,MAAM,MAAM,CAAC;AAC/E,QAAA,EAAE,kBAAsB,IAAA,aAAa,MAAM,OAAO,OAAO,GAAG,uBAAuB;AAEzF,QAAM,gBAAgB,SAAS,MAAM,SAAS,MAAM,KAAK,CAAC;AAEpD,QAAA,aAAa,SAAS,MAAM;AAChC,QAAI,aAAa,cAAc;AAC/B,QAAI,YAAY;AAEhB,QAAI,MAAM,SAAS;AACJ,mBAAA;AAAA,IACf;AAEA,QAAI,MAAM,QAAQ;AACH,mBAAA;AACD,kBAAA;AAAA,IACd;AAEO,WAAA;AAAA,MACL,QAAQ,MAAM,UAAU,aAAa,cAAc,KAAK,KAAK;AAAA,MAC7D,SAAS,MAAM,QAAQ,8DAA8D;AAAA,MACrF,iBAAiB;AAAA,MACjB;AAAA,IAAA;AAAA,EACF,CACD;AAED,QAAM,eAAe,oBAAoB,qBAAqB,kBAAA,CAAmB,CAAC;AAE5E,QAAA,eAAe,SAAS,MAAM;AAC3B,WAAA;AAAA,MACL,YAAY,MAAM,SAAS,WAAW;AAAA,MACtC,OAAQ,MAAM,UAAU,MAAM,UAAW,aAAa,QAAQ,kBAAkB;AAAA,IAAA;AAAA,EAClF,CACD;AAEK,QAAA,aAAa,SAAS,MAAM;AACzB,WAAA,EAAE,OAAO,kBAAkB;EAAM,CACzC;AAEK,QAAA,cAAc,SAAS,OAAO;AAAA,IAClC,iBAAiB,MAAM,cACnB,SAAS,MAAM,WAAW,IAC1B,cAAc;AAAA,EAClB,EAAA;AAEK,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}