vue-admin-core/es/formily/form-layout/src/useResponsiveFormLayout.mjs

A Component Library for Vue 3

import { isValid, isArr } from '@formily/shared';
import { getCurrentInstance, ref, onMounted } from 'vue';

const calcBreakpointIndex = (breakpoints, width) => {
  for (let i = 0; i < breakpoints.length; i++) {
    if (width <= breakpoints[i]) {
      return i;
    }
  }
  return -1;
};
const calcFactor = (value, breakpointIndex) => {
  var _a;
  if (Array.isArray(value)) {
    if (breakpointIndex === -1)
      return value[0];
    return (_a = value[breakpointIndex]) != null ? _a : value[value.length - 1];
  } else {
    return value;
  }
};
const factor = (value, breakpointIndex) => isValid(value) ? calcFactor(value, breakpointIndex) : value;
const calculateProps = (target, props) => {
  const { clientWidth } = target;
  const { breakpoints, layout, labelAlign, wrapperAlign, labelCol, wrapperCol, ...otherProps } = props;
  const breakpointIndex = calcBreakpointIndex(breakpoints, clientWidth);
  return {
    layout: factor(layout, breakpointIndex),
    labelAlign: factor(labelAlign, breakpointIndex),
    wrapperAlign: factor(wrapperAlign, breakpointIndex),
    labelCol: factor(labelCol, breakpointIndex),
    wrapperCol: factor(wrapperCol, breakpointIndex),
    ...otherProps
  };
};
const useRefs = () => {
  const vm = getCurrentInstance();
  return (vm == null ? void 0 : vm.refs) || {};
};
const useResponsiveFormLayout = (props) => {
  const { breakpoints } = props;
  if (!isArr(breakpoints)) {
    return {
      props: ref(props)
    };
  }
  const layoutProps = ref({});
  const updateUI = (target) => {
    layoutProps.value = calculateProps(target, props);
  };
  onMounted(() => {
    const { root } = useRefs();
    const observer = () => {
      updateUI(root);
    };
    const resizeObserver = new ResizeObserver(observer);
    if (root) {
      resizeObserver.observe(root);
    }
    updateUI(root);
    return () => {
      resizeObserver.disconnect();
    };
  });
  return {
    props: layoutProps
  };
};

export { useResponsiveFormLayout };
//# sourceMappingURL=useResponsiveFormLayout.mjs.map