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