element-plus
Version:
A Component Library for Vue 3
1 lines • 10 kB
Source Map (JSON)
{"version":3,"file":"split-panel.vue2.mjs","sources":["../../../../../../packages/components/splitter/src/split-panel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\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 } from './split-panel'\nimport { getPct, getPx, isPct, isPx } from './hooks'\nimport { splitterRootContextKey } from './type'\n\nimport type { SplitterPanelProps } from './split-panel'\n\nconst ns = useNamespace('splitter-panel')\n\nconst COMPONENT_NAME = 'ElSplitterPanel'\ndefineOptions({\n name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<SplitterPanelProps>(), {\n resizable: true,\n})\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 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","_createBlock","SplitBar"],"mappings":"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"}