UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 4.76 kB
{"version":3,"file":"useSize.mjs","sources":["../../../../../../../packages/components/splitter/src/hooks/useSize.ts"],"sourcesContent":["import { computed, ref, watch } from 'vue'\nimport { isString } from '@element-plus/utils'\n\nimport type { ComputedRef, Ref } from 'vue'\nimport type { PanelItemState } from '../type'\n\nexport function getPct(str: string) {\n return Number(str.slice(0, -1)) / 100\n}\n\nexport function getPx(str: string) {\n return Number(str.slice(0, -2))\n}\n\nexport function isPct(\n itemSize: string | number | undefined\n): itemSize is string {\n return isString(itemSize) && itemSize.endsWith('%')\n}\n\nexport function isPx(\n itemSize: string | number | undefined\n): itemSize is string {\n return isString(itemSize) && itemSize.endsWith('px')\n}\n\nexport function useSize(\n panels: Ref<PanelItemState[]>,\n containerSize: ComputedRef<number>\n) {\n const propSizes = computed(() => panels.value.map((i) => i.size))\n\n const panelCounts = computed(() => panels.value.length)\n\n const percentSizes = ref<number[]>([])\n\n watch([propSizes, panelCounts, containerSize], () => {\n let ptgList: (number | undefined)[] = []\n let emptyCount = 0\n\n // Convert the passed props size to a percentage\n for (let i = 0; i < panelCounts.value; i += 1) {\n const itemSize = panels.value[i]?.size\n\n if (isPct(itemSize)) {\n ptgList[i] = getPct(itemSize)\n } else if (isPx(itemSize)) {\n ptgList[i] = getPx(itemSize) / containerSize.value\n } else if (itemSize || itemSize === 0) {\n const num = Number(itemSize)\n\n if (!Number.isNaN(num)) {\n ptgList[i] = num / containerSize.value\n }\n } else {\n emptyCount += 1\n ptgList[i] = undefined\n }\n }\n\n const totalPtg = ptgList.reduce<number>((acc, ptg) => acc + (ptg || 0), 0)\n\n if (totalPtg > 1 || !emptyCount) {\n // If it is greater than 1, the scaling ratio\n const scale = 1 / totalPtg\n ptgList = ptgList.map((ptg) => (ptg === undefined ? 0 : ptg * scale))\n } else {\n // If it is less than 1, the filling ratio\n const avgRest = (1 - totalPtg) / emptyCount\n ptgList = ptgList.map((ptg) => (ptg === undefined ? avgRest : ptg))\n }\n\n percentSizes.value = ptgList as number[]\n })\n\n const ptg2px = (ptg: number) => ptg * containerSize.value\n const pxSizes = computed(() => percentSizes.value.map(ptg2px))\n\n return { percentSizes, pxSizes }\n}\n"],"names":[],"mappings":"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"}