xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 8.71 kB
Source Map (JSON)
{"version":3,"file":"collapse-panel.mjs","sources":["../../src/collapse/collapse-panel.tsx"],"sourcesContent":["import { defineComponent, ref, computed, inject, Ref, toRefs, Transition } from 'vue';\nimport props from './collapse-panel-props';\nimport FakeArrow from '../common-components/fake-arrow';\nimport { CollapseValue, TdCollapsePanelProps } from './type';\nimport { useTNodeJSX, useContent } from '../hooks/tnode';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport useCollapseAnimation from '../hooks/useCollapseAnimation';\n\nexport default defineComponent({\n name: 'XCollapsePanel',\n props,\n setup(props: TdCollapsePanelProps, { slots }) {\n const renderTNodeJSX = useTNodeJSX();\n const renderContent = useContent();\n const componentName = usePrefixClass('collapse-panel');\n const disableClass = usePrefixClass('is-disabled');\n const clickableClass = usePrefixClass('is-clickable');\n const transitionClass = usePrefixClass('slide-down');\n const { value, disabled, destroyOnCollapse } = toRefs(props);\n const collapseValue: Ref<CollapseValue> = inject('collapseValue');\n const updateCollapseValue: Function = inject('updateCollapseValue');\n const getUniqId: Function = inject('getUniqId', () => undefined, false);\n const {\n defaultExpandAll,\n disabled: disableAll,\n expandIconPlacement,\n expandOnRowClick,\n } = inject<any>('collapseProps');\n const renderParentTNode: Function = inject('renderParentTNode');\n const innerValue = value.value || getUniqId();\n if (defaultExpandAll.value) {\n updateCollapseValue(innerValue);\n }\n const { beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave } = useCollapseAnimation();\n const iconRef = ref<HTMLElement>();\n const isDisabled = computed(() => disabled.value || disableAll.value);\n const isActive = computed(() =>\n collapseValue.value instanceof Array\n ? collapseValue.value.includes(innerValue)\n : collapseValue.value === innerValue,\n );\n const classes = computed(() => {\n return [componentName.value, { [disableClass.value]: isDisabled.value }];\n });\n const panelExpandIcon = computed(() => slots.expandIcon || props.expandIcon);\n const handleClick = (e: MouseEvent) => {\n const canExpand = expandOnRowClick.value || e.currentTarget === iconRef.value;\n if (canExpand && !isDisabled.value) {\n updateCollapseValue(innerValue);\n }\n e.stopPropagation();\n };\n const renderDefaultIcon = () => {\n return <FakeArrow overlayClassName={`${componentName.value}__icon--default`} />;\n };\n const renderIcon = () => {\n const tNodeRender = panelExpandIcon.value === undefined ? renderParentTNode : renderTNodeJSX;\n return (\n <div\n ref={iconRef}\n class={`${componentName.value}__icon ${componentName.value}__icon--${expandIconPlacement.value} ${\n isActive.value ? `${componentName.value}__icon--active` : ''\n }`}\n onClick={handleClick}\n >\n {tNodeRender('expandIcon', renderDefaultIcon())}\n </div>\n );\n };\n const renderBlank = () => {\n return <div class={`${componentName.value}__header--blank`}></div>;\n };\n const renderHeader = () => {\n const cls = [\n `${componentName.value}__header`,\n {\n [clickableClass.value]: expandOnRowClick.value && !isDisabled.value,\n },\n ];\n return (\n <div class={cls} onClick={handleClick}>\n {expandIconPlacement.value === 'left' && renderIcon()}\n {renderTNodeJSX('header')}\n {renderBlank()}\n {renderTNodeJSX('headerRightContent')}\n {expandIconPlacement.value === 'right' && renderIcon()}\n </div>\n );\n };\n const renderBodyByNormal = () => {\n return (\n <div v-show={isActive.value} class={`${componentName.value}__body`}>\n <div class={`${componentName.value}__content`}>{renderContent('default', 'content')}</div>\n </div>\n );\n };\n const renderBodyDestroyOnCollapse = () => {\n return isActive.value ? (\n <div class={`${componentName.value}__body`}>\n <div class={`${componentName.value}__content`}>{renderContent('default', 'content')}</div>\n </div>\n ) : null;\n };\n const renderBody = () => {\n return destroyOnCollapse.value ? renderBodyDestroyOnCollapse() : renderBodyByNormal();\n };\n return () => {\n return (\n <div class={classes.value}>\n <div class={`${componentName.value}__wrapper`}>\n {renderHeader()}\n <Transition\n name={transitionClass.value}\n onBeforeEnter={beforeEnter}\n onEnter={enter}\n onAfterEnter={afterEnter}\n onBeforeLeave={beforeLeave}\n onLeave={leave}\n onAfterLeave={afterLeave}\n >\n {renderBody()}\n </Transition>\n </div>\n </div>\n );\n };\n },\n});\n"],"names":["_isVNode","name","props","setup","_createVNode"],"mappings":"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"}