xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 10.2 kB
Source Map (JSON)
{"version":3,"file":"alert.mjs","sources":["../../src/alert/alert.tsx"],"sourcesContent":["import { defineComponent, VNode, ref, onMounted, onBeforeUnmount } from 'vue';\nimport isString from 'lodash/isString';\nimport isArray from 'lodash/isArray';\n\nimport { on, off, addClass } from '../utils/dom';\nimport props from './props';\nimport { SlotReturnValue } from '../common';\nimport { useIcon } from '../hooks/icon';\nimport { useConfig, usePrefixClass } from '../hooks/useConfig';\n\nimport { useTNodeJSX } from '../hooks/tnode';\n\nexport default defineComponent({\n name: 'XAlert',\n props,\n setup(props) {\n const { globalConfig, classPrefix } = useConfig('alert');\n\n const COMPONENT_NAME = usePrefixClass('alert');\n const renderTNodeJSX = useTNodeJSX();\n\n const renderIconTNode = useIcon();\n const alertRef = ref<HTMLElement | null>(null);\n // description的dom引用\n const descriptionRef = ref<HTMLElement | null>(null);\n // desc高度\n const descHeight = ref(0);\n // 是否可见，关闭后置为false\n const visible = ref(true);\n // 是否已收起，使用折叠功能时有效，用于表示是否已折叠；默认折叠\n const collapsed = ref(true);\n\n const renderIcon = () => {\n const Component = {\n info: <icon-ri-information-fill />,\n success: <icon-ri-checkbox-circle-fill />,\n warning: <icon-ri-error-warning-fill />,\n error: <icon-ri-error-warning-fill />,\n question: <icon-ri-question-fill />,\n };\n const iconContent = renderIconTNode('icon', Component);\n return iconContent ? <div class={`${COMPONENT_NAME.value}__icon`}>{iconContent}</div> : null;\n };\n\n const renderClose = () => {\n const { close } = props;\n let closeContent = null;\n if (close === true || close === '') {\n closeContent = <icon-ri-close-fill />;\n } else if (isString(close)) {\n closeContent = close;\n } else {\n closeContent = renderIconTNode('close');\n }\n return closeContent ? (\n <div class={`${COMPONENT_NAME.value}__close`} onClick={handleClose}>\n {closeContent}\n </div>\n ) : null;\n };\n\n const renderTitle = () => {\n const titleContent = renderTNodeJSX('title');\n return titleContent ? <div class={`${COMPONENT_NAME.value}__title`}> {titleContent}</div> : null;\n };\n\n const renderMessage = () => {\n const operationContent = renderTNodeJSX('operation');\n return (\n <div class={`${COMPONENT_NAME.value}__message`}>\n {renderDescription()}\n {operationContent ? <div class={`${COMPONENT_NAME.value}__operation`}>{operationContent}</div> : null}\n </div>\n );\n };\n\n const renderDescription = () => {\n let messageContent;\n\n messageContent = renderTNodeJSX('default');\n if (!messageContent) {\n messageContent = renderTNodeJSX('message');\n }\n const contentLength = isArray(messageContent) ? (messageContent as Array<SlotReturnValue>).length : 1;\n const hasCollapse = props.maxLine > 0 && props.maxLine < contentLength;\n const height = (descriptionRef.value?.children[0] as HTMLElement)?.offsetHeight;\n if (hasCollapse && collapsed.value) {\n // 折叠\n messageContent = (messageContent as Array<SlotReturnValue>).slice(0, props.maxLine as number);\n height && (descriptionRef.value.style.height = `${descHeight.value}px`);\n } else if (hasCollapse) {\n // 展开\n height &&\n (descriptionRef.value.style.height = `${height * (contentLength - props.maxLine) + descHeight.value}px`);\n }\n\n // 如果需要折叠，则元素之间补<br/>；否则不补\n return (\n <div class={`${COMPONENT_NAME.value}__description`} ref={descriptionRef}>\n {hasCollapse\n ? (messageContent as Array<string | VNode>).map((content) => <div>{content}</div>)\n : messageContent}\n {hasCollapse ? (\n <div\n class={`${COMPONENT_NAME.value}__collapse`}\n onClick={() => {\n collapsed.value = !collapsed.value;\n }}\n >\n {collapsed.value ? globalConfig.value.expandText : globalConfig.value.collapseText}\n </div>\n ) : null}\n </div>\n );\n };\n const renderContent = () => {\n return (\n <div class={`${COMPONENT_NAME.value}__content`}>\n {renderTitle()}\n {renderMessage()}\n </div>\n );\n };\n const handleClose = (e: MouseEvent) => {\n props.onClose?.({ e });\n addClass(alertRef.value, `${COMPONENT_NAME.value}--closing`);\n };\n\n const handleCloseEnd = (e: TransitionEvent) => {\n const isTransitionTarget = e.target === alertRef.value;\n // 防止子元素冒泡触发\n if (e.propertyName === 'opacity' && isTransitionTarget) {\n visible.value = false;\n props.onClosed?.({ e });\n }\n };\n\n onMounted(() => {\n on(alertRef.value, 'transitionend', handleCloseEnd);\n descHeight.value = descriptionRef.value.offsetHeight;\n });\n onBeforeUnmount(() => {\n off(alertRef.value, 'transitionend', handleCloseEnd);\n });\n\n return () => (\n <div\n ref={alertRef}\n class={[\n `${COMPONENT_NAME.value}`,\n `${COMPONENT_NAME.value}--${props.theme}`,\n {\n [`${classPrefix.value}-is-hidden`]: !visible.value,\n },\n ]}\n >\n {renderIcon()}\n {renderContent()}\n {renderClose()}\n </div>\n );\n },\n});\n"],"names":["name","props","info","_resolveComponent","success","warning","error","closeContent","isString","_createVNode","messageContent","height","collapsed","e","onMounted","descHeight","onBeforeUnmount"],"mappings":"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"}