element-plus
Version:
A Component Library for Vue 3
1 lines • 10.4 kB
Source Map (JSON)
{"version":3,"file":"split-panel.mjs","sources":["../../../../../../packages/components/splitter/src/split-panel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n computed,\n getCurrentInstance,\n inject,\n nextTick,\n onBeforeUnmount,\n reactive,\n ref,\n toRefs,\n watch,\n} from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { throwError } from '@element-plus/utils'\nimport { getCollapsible, isCollapsible } from './hooks/usePanel'\nimport SplitBar from './split-bar.vue'\nimport { splitterPanelEmits, splitterPanelProps } from './split-panel'\nimport { getPct, getPx, isPct, isPx } from './hooks'\nimport { splitterRootContextKey } from './type'\n\nconst ns = useNamespace('splitter-panel')\n\nconst COMPONENT_NAME = 'ElSplitterPanel'\ndefineOptions({\n name: COMPONENT_NAME,\n})\n\nconst props = defineProps(splitterPanelProps)\n\nconst emits = defineEmits(splitterPanelEmits)\nconst splitterContext = inject(splitterRootContextKey)\nif (!splitterContext)\n throwError(\n COMPONENT_NAME,\n 'usage: <el-splitter><el-splitter-panel /></el-splitter/>'\n )\n\nconst { panels, layout, lazy, containerSize, pxSizes } = toRefs(splitterContext)\n\nconst {\n registerPanel,\n unregisterPanel,\n onCollapse,\n onMoveEnd,\n onMoveStart,\n onMoving,\n} = splitterContext\n\nconst panelEl = ref<HTMLDivElement>()\nconst instance = getCurrentInstance()!\nconst uid = instance.uid\n\nconst index = ref(0)\nconst panel = computed(() => panels.value[index.value])\n\nconst setIndex = (val: number) => {\n index.value = val\n}\n\nconst panelSize = computed(() => {\n if (!panel.value) return 0\n return pxSizes.value[index.value] ?? 0\n})\n\nconst nextSize = computed(() => {\n if (!panel.value) return 0\n return pxSizes.value[index.value + 1] ?? 0\n})\n\nconst nextPanel = computed(() => {\n if (panel.value) {\n return panels.value[index.value + 1]\n }\n return null\n})\n\nconst isResizable = computed(() => {\n if (!nextPanel.value) return false\n return (\n props.resizable &&\n nextPanel.value?.resizable &&\n // If it is 0, it means it is collapsed => check if the minimum value is set\n (panelSize.value !== 0 || !props.min) &&\n (nextSize.value !== 0 || !nextPanel.value.min)\n )\n})\n\n// The last panel doesn't need a drag bar\nconst isShowBar = computed(() => {\n if (!panel.value) return false\n return index.value !== panels.value.length - 1\n})\n\nconst startCollapsible = computed(() =>\n isCollapsible(panel.value, panelSize.value, nextPanel.value, nextSize.value)\n)\n\nconst endCollapsible = computed(() =>\n isCollapsible(nextPanel.value, nextSize.value, panel.value, panelSize.value)\n)\n\nfunction sizeToPx(str: string | number | undefined) {\n if (isPct(str)) {\n return getPct(str) * containerSize.value || 0\n } else if (isPx(str)) {\n return getPx(str)\n }\n return str ?? 0\n}\n\n// Two-way binding for size\nlet isSizeUpdating = false\nwatch(\n () => props.size,\n () => {\n if (!isSizeUpdating && panel.value) {\n if (!containerSize.value) {\n panel.value.size = props.size\n return\n }\n\n const size = sizeToPx(props.size)\n const maxSize = sizeToPx(props.max)\n const minSize = sizeToPx(props.min)\n\n // Ensure it is within the maximum and minimum value range\n const finalSize = Math.min(Math.max(size, minSize || 0), maxSize || size)\n\n if (finalSize !== size) {\n emits('update:size', finalSize)\n }\n\n panel.value.size = finalSize\n }\n }\n)\n\nwatch(\n () => panel.value?.size,\n (val) => {\n if (val !== props.size) {\n isSizeUpdating = true\n emits('update:size', val as number)\n nextTick(() => (isSizeUpdating = false))\n }\n }\n)\n\nwatch(\n () => props.resizable,\n (val) => {\n if (panel.value) {\n panel.value.resizable = val\n }\n }\n)\n\nconst _panel = reactive({\n el: panelEl.value!,\n uid,\n getVnode: () => instance.vnode,\n setIndex,\n ...props,\n collapsible: computed(() => getCollapsible(props.collapsible)),\n})\n\nregisterPanel(_panel)\n\nonBeforeUnmount(() => unregisterPanel(_panel))\n\ndefineExpose({\n /** @description splitter-panel html element */\n splitterPanelRef: panelEl,\n})\n</script>\n\n<template>\n <div\n ref=\"panelEl\"\n :class=\"[ns.b()]\"\n :style=\"{ flexBasis: `${panelSize}px` }\"\n v-bind=\"$attrs\"\n >\n <slot />\n </div>\n <SplitBar\n v-if=\"isShowBar\"\n :index=\"index\"\n :layout=\"layout\"\n :lazy=\"lazy\"\n :resizable=\"isResizable\"\n :start-collapsible=\"startCollapsible\"\n :end-collapsible=\"endCollapsible\"\n @move-start=\"onMoveStart\"\n @moving=\"onMoving\"\n @move-end=\"onMoveEnd\"\n @collapse=\"onCollapse\"\n >\n <template #start-collapsible>\n <slot name=\"start-collapsible\" />\n </template>\n <template #end-collapsible>\n <slot name=\"end-collapsible\" />\n </template>\n </SplitBar>\n</template>\n"],"names":["_createElementVNode","_mergeProps","_unref","$attrs","_renderSlot","_openBlock","_createBlock","_withCtx"],"mappings":"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"}