{"version":3,"file":"useResponsiveFormLayout.mjs","sources":["../../../../../packages/formily/form-layout/useResponsiveFormLayout.ts"],"sourcesContent":["import { onMounted, ref } from 'vue'\nimport { isArr, isValid } from '@formily/shared'\nimport type { Ref } from 'vue'\n\ninterface IProps {\n  breakpoints?: number[]\n  layout?:\n    | 'vertical'\n    | 'horizontal'\n    | 'inline'\n    | ('vertical' | 'horizontal' | 'inline')[]\n  labelCol?: number | number[]\n  wrapperCol?: number | number[]\n  labelAlign?: 'right' | 'left' | ('right' | 'left')[]\n  wrapperAlign?: 'right' | 'left' | ('right' | 'left')[]\n  [props: string]: any\n}\n\ninterface ICalculateProps {\n  (target: Element, props: IProps): IProps\n}\n\ninterface IUseResponsiveFormLayout {\n  (props: IProps, root: Ref<Element>): {\n    props: Ref<IProps>\n  }\n}\n\nconst calcBreakpointIndex = (breakpoints: number[], width: number) => {\n  for (const [i, breakpoint] of breakpoints.entries()) {\n    if (width <= breakpoint) {\n      return i\n    }\n  }\n}\n\nconst calcFactor = <T>(value: T | T[], breakpointIndex: number): T => {\n  if (Array.isArray(value)) {\n    if (breakpointIndex === -1) return value[0]\n    return value[breakpointIndex] ?? value[value.length - 1]\n  } else {\n    return value\n  }\n}\n\nconst factor = <T>(value: T | T[], breakpointIndex: number | undefined): T =>\n  isValid(value) ? calcFactor(value, breakpointIndex as number) : (value as T)\n\nconst calculateProps: ICalculateProps = (target, props) => {\n  const { clientWidth } = target\n  const {\n    breakpoints = [],\n    layout,\n    labelAlign,\n    wrapperAlign,\n    labelCol,\n    wrapperCol,\n    ...otherProps\n  } = props\n  const breakpointIndex = calcBreakpointIndex(breakpoints, clientWidth)\n\n  return {\n    layout: factor(layout, breakpointIndex),\n    labelAlign: factor(labelAlign, breakpointIndex),\n    wrapperAlign: factor(wrapperAlign, breakpointIndex),\n    labelCol: factor(labelCol, breakpointIndex),\n    wrapperCol: factor(wrapperCol, breakpointIndex),\n    ...otherProps,\n  }\n}\n\nexport const useResponsiveFormLayout: IUseResponsiveFormLayout = (\n  props,\n  root\n) => {\n  const { breakpoints } = props\n  if (!isArr(breakpoints)) {\n    return { props: ref(props) }\n  }\n  const layoutProps = ref<IProps>(props)\n\n  const updateUI = () => {\n    if (root.value) {\n      layoutProps.value = calculateProps(root.value, props)\n    }\n  }\n\n  onMounted(() => {\n    const observer = () => {\n      updateUI()\n    }\n    const resizeObserver = new ResizeObserver(observer)\n    if (root.value) {\n      resizeObserver.observe(root.value)\n    }\n\n    updateUI()\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  })\n\n  return {\n    props: layoutProps,\n  }\n}\n"],"names":[],"mappings":"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"}