@extclp/vexip-ui/es/components/alert/alert.vue2.mjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"alert.vue2.mjs","sources":["../../../components/alert/alert.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { CollapseTransition } from '@/components/collapse-transition'\nimport { Icon } from '@/components/icon'\nimport { Renderer } from '@/components/renderer'\n\nimport { computed, onMounted, ref, watch } from 'vue'\n\nimport { emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\nimport { adjustAlpha, getRangeWidth, isClient, mixColor, parseColorToRgba } from '@vexip-ui/utils'\nimport { alertProps } from './props'\nimport { alertTypes } from './symbol'\n\nimport type { AlertSlots } from './symbol'\n\ndefineOptions({ name: 'Alert' })\n\nconst _props = defineProps(alertProps)\nconst props = useProps('alert', _props, {\n  type: {\n    default: 'primary',\n    validator: value => alertTypes.includes(value)\n  },\n  title: '',\n  colorfulText: false,\n  icon: {\n    isFunc: true,\n    default: false\n  },\n  closable: false,\n  iconColor: '',\n  noBorder: false,\n  banner: false,\n  manual: false,\n  scroll: false,\n  scrollSpeed: 1,\n  color: null,\n  slots: () => ({})\n})\n\nconst slots = defineSlots<AlertSlots>()\n\nconst nh = useNameHelper('alert')\nconst icons = useIcons()\n\nconst predefinedIcons = computed(() => ({\n  default: icons.value.alert,\n  primary: icons.value.info,\n  info: icons.value.info,\n  success: icons.value.success,\n  warning: icons.value.warning,\n  error: icons.value.error\n}))\n\nconst closed = ref(false)\nconst hidden = ref(false)\nconst scrollDuration = ref(0)\nconst scrollOffset = ref(0)\nconst scrollWidth = ref(0)\n\nconst content = ref<HTMLElement>()\nconst scrollEl = ref<HTMLElement>()\n\nconst hasTitle = computed(() => {\n  return !!(props.title || slots.title)\n})\nconst hasIcon = computed(() => {\n  return !!(props.icon || slots.icon)\n})\nconst className = computed(() => {\n  return {\n    [nh.b()]: true,\n    [nh.bs('vars')]: true,\n    [nh.bm('inherit')]: props.inherit,\n    [nh.bm(props.type)]: props.type,\n    [nh.bm('colorful-text')]: props.colorfulText,\n    [nh.bm('has-title')]: hasTitle.value,\n    [nh.bm('has-icon')]: hasIcon.value,\n    [nh.bm('closable')]: props.closable,\n    [nh.bm('no-border')]: !props.banner && props.noBorder,\n    [nh.bm('banner')]: props.banner\n  }\n})\nconst style = computed(() => {\n  if (!props.color) return undefined\n\n  const rootStyle = isClient ? getComputedStyle(document.documentElement) : null\n  const black = parseColorToRgba(rootStyle?.getPropertyValue(nh.nv('color-black')) || '#000')\n  const baseColor = parseColorToRgba(props.color)\n\n  return nh.cvm({\n    'bg-color': adjustAlpha(baseColor, 0.2).toString(),\n    'b-color': adjustAlpha(baseColor, 0.5).toString(),\n    'icon-color': mixColor(black, baseColor, 0.2).toString(),\n    ...(props.colorfulText\n      ? {\n          'text-color': mixColor(black, baseColor, 0.2).toString(),\n          'title-color': mixColor(black, baseColor, 0.2).toString()\n        }\n      : {})\n  })\n})\nconst iconComp = computed(() => {\n  if (typeof props.icon === 'boolean') {\n    return predefinedIcons.value[props.type] ?? {}\n  }\n\n  return { icon: props.icon }\n})\nconst scrollStyle = computed(() => {\n  return {\n    width: `${scrollWidth.value}px`,\n    transitionDuration: `${scrollDuration.value}ms`,\n    transform: `translateX(${scrollOffset.value}px)`\n  }\n})\n\nwatch(\n  () => props.scroll,\n  value => {\n    value && startScroll()\n  }\n)\n\nonMounted(() => {\n  props.scroll && startScroll()\n})\n\nfunction handleClose() {\n  if (!props.manual) {\n    closed.value = true\n  }\n\n  emitEvent(props.onClose)\n}\n\nfunction handleAfterLeave() {\n  emitEvent(props.onHide)\n  hidden.value = true\n}\n\nfunction startScroll() {\n  if (content.value && scrollEl.value) {\n    const contentRect = content.value.getBoundingClientRect()\n    const rangeWidth = getRangeWidth(scrollEl.value)\n    const duration = ((contentRect.width + rangeWidth) * 12) / (Math.max(props.scrollSpeed, 0) || 1)\n\n    scrollDuration.value = 0\n    scrollOffset.value = contentRect.width\n    scrollWidth.value = rangeWidth\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        scrollDuration.value = duration\n        scrollOffset.value = -rangeWidth\n      })\n    })\n  }\n}\n\nfunction handleScrollEnd() {\n  emitEvent(props.onScrollEnd)\n  requestAnimationFrame(startScroll)\n}\n</script>\n\n<template>\n  <CollapseTransition v-if=\"!hidden\" fade-effect @after-leave=\"handleAfterLeave\">\n    <div\n      v-if=\"!closed\"\n      :class=\"className\"\n      role=\"alert\"\n      :style=\"style\"\n    >\n      <div :class=\"nh.be('wrapper')\">\n        <div v-if=\"hasTitle\" :class=\"nh.be('title')\">\n          <slot name=\"title\">\n            <Renderer :renderer=\"props.slots.title\">\n              {{ title }}\n            </Renderer>\n          </slot>\n        </div>\n        <div ref=\"content\" :class=\"[nh.be('content'), props.scroll && nh.bem('content', 'scroll')]\">\n          <span\n            v-if=\"props.scroll\"\n            ref=\"scrollEl\"\n            :class=\"nh.be('scroll')\"\n            :style=\"scrollStyle\"\n            @transitionend=\"handleScrollEnd\"\n          >\n            <slot>\n              <Renderer :renderer=\"props.slots.default\"></Renderer>\n            </slot>\n          </span>\n          <slot v-else>\n            <Renderer :renderer=\"props.slots.default\"></Renderer>\n          </slot>\n        </div>\n      </div>\n      <button\n        v-if=\"props.closable\"\n        type=\"button\"\n        :class=\"nh.be('close')\"\n        @click=\"handleClose\"\n      >\n        <slot name=\"close\">\n          <Renderer :renderer=\"props.slots.close\">\n            <Icon v-bind=\"icons.close\" label=\"close\"></Icon>\n          </Renderer>\n        </slot>\n      </button>\n      <div v-if=\"hasIcon\" :class=\"nh.be('icon')\">\n        <slot name=\"icon\">\n          <Renderer :renderer=\"props.slots.icon\">\n            <Icon\n              v-bind=\"iconComp\"\n              :scale=\"hasTitle ? 2 : 1\"\n              :style=\"{ color: props.iconColor }\"\n            ></Icon>\n          </Renderer>\n        </slot>\n      </div>\n    </div>\n  </CollapseTransition>\n</template>\n"],"names":["props","useProps","__props","value","alertTypes","slots","_useSlots","nh","useNameHelper","icons","useIcons","predefinedIcons","computed","closed","ref","hidden","scrollDuration","scrollOffset","scrollWidth","content","scrollEl","hasTitle","hasIcon","className","style","rootStyle","isClient","black","parseColorToRgba","baseColor","adjustAlpha","mixColor","iconComp","scrollStyle","watch","startScroll","onMounted","handleClose","emitEvent","handleAfterLeave","contentRect","rangeWidth","getRangeWidth","duration","handleScrollEnd"],"mappings":"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"}