vue-admin-core/lib/formily/form-layout/src/useResponsiveFormLayout.js

A Component Library for Vue 3

'use strict';

var shared = require('@formily/shared');
var vue = require('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) => shared.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 = vue.getCurrentInstance();
  return (vm == null ? void 0 : vm.refs) || {};
};
const useResponsiveFormLayout = (props) => {
  const { breakpoints } = props;
  if (!shared.isArr(breakpoints)) {
    return {
      props: vue.ref(props)
    };
  }
  const layoutProps = vue.ref({});
  const updateUI = (target) => {
    layoutProps.value = calculateProps(target, props);
  };
  vue.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
  };
};

exports.useResponsiveFormLayout = useResponsiveFormLayout;
//# sourceMappingURL=useResponsiveFormLayout.js.map