element-plus/es/components/splitter/src/hooks/useSize.mjs.map

A Component Library for Vue 3

{"version":3,"file":"useSize.mjs","names":[],"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"],"mappings":";;;;AAMA,SAAgB,OAAO,KAAa;AAClC,QAAO,OAAO,IAAI,MAAM,GAAG,GAAG,CAAC,GAAG;;AAGpC,SAAgB,MAAM,KAAa;AACjC,QAAO,OAAO,IAAI,MAAM,GAAG,GAAG,CAAC;;AAGjC,SAAgB,MACd,UACoB;AACpB,QAAO,SAAS,SAAS,IAAI,SAAS,SAAS,IAAI;;AAGrD,SAAgB,KACd,UACoB;AACpB,QAAO,SAAS,SAAS,IAAI,SAAS,SAAS,KAAK;;AAGtD,SAAgB,QACd,QACA,eACA;CACA,MAAM,YAAY,eAAe,OAAO,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC;CAEjE,MAAM,cAAc,eAAe,OAAO,MAAM,OAAO;CAEvD,MAAM,eAAe,IAAc,EAAE,CAAC;AAEtC,OAAM;EAAC;EAAW;EAAa;EAAc,QAAQ;EACnD,IAAI,UAAkC,EAAE;EACxC,IAAI,aAAa;AAGjB,OAAK,IAAI,IAAI,GAAG,IAAI,YAAY,OAAO,KAAK,GAAG;GAC7C,MAAM,WAAW,OAAO,MAAM,IAAI;AAElC,OAAI,MAAM,SAAS,CACjB,SAAQ,KAAK,OAAO,SAAS;YACpB,KAAK,SAAS,CACvB,SAAQ,KAAK,MAAM,SAAS,GAAG,cAAc;YACpC,YAAY,aAAa,GAAG;IACrC,MAAM,MAAM,OAAO,SAAS;AAE5B,QAAI,CAAC,OAAO,MAAM,IAAI,CACpB,SAAQ,KAAK,MAAM,cAAc;UAE9B;AACL,kBAAc;AACd,YAAQ,KAAK;;;EAIjB,MAAM,WAAW,QAAQ,QAAgB,KAAK,QAAQ,OAAO,OAAO,IAAI,EAAE;AAE1E,MAAI,WAAW,KAAK,CAAC,YAAY;GAE/B,MAAM,QAAQ,IAAI;AAClB,aAAU,QAAQ,KAAK,QAAS,QAAQ,SAAY,IAAI,MAAM,MAAO;SAChE;GAEL,MAAM,WAAW,IAAI,YAAY;AACjC,aAAU,QAAQ,KAAK,QAAS,QAAQ,SAAY,UAAU,IAAK;;AAGrE,eAAa,QAAQ;GACrB;CAEF,MAAM,UAAU,QAAgB,MAAM,cAAc;AAGpD,QAAO;EAAE;EAAc,SAFP,eAAe,aAAa,MAAM,IAAI,OAAO,CAAC;EAE9B"}