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

A Component Library for Vue 3

import { inject, ref, watch, defineComponent, provide } from 'vue';
import { h } from '@formily/vue';
import '../../__builtins__/index.mjs';
import { useResponsiveFormLayout } from './useResponsiveFormLayout.mjs';
import { buildProps } from 'element-plus/es/utils/vue/props/runtime';
import { stylePrefix } from '../../__builtins__/configs/index.mjs';

const formLayoutProps = buildProps({
  className: {
    type: String
  },
  colon: {
    type: Boolean,
    default: true
  },
  labelAlign: {
    type: [String, Array]
  },
  wrapperAlign: {
    type: [String, Array]
  },
  labelWrap: {
    type: Boolean,
    default: false
  },
  labelWidth: {
    type: Number
  },
  wrapperWidth: {
    type: Number
  },
  wrapperWrap: {
    type: Boolean,
    default: false
  },
  labelCol: {
    type: [Number, Array]
  },
  wrapperCol: {
    type: [Number, Array]
  },
  fullness: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: "default"
  },
  layout: {
    type: [Array, String],
    default: "horizontal"
  },
  direction: {
    type: String,
    default: "ltr"
  },
  shallow: {
    type: Boolean,
    default: true
  },
  feedbackLayout: {
    type: String
  },
  tooltipLayout: {
    type: String
  },
  bordered: {
    type: Boolean,
    default: true
  },
  inset: {
    type: Boolean,
    default: false
  },
  breakpoints: {
    type: Array
  },
  spaceGap: {
    type: Number
  },
  gridColumnGap: {
    type: Number
  },
  gridRowGap: {
    type: Number
  }
});
const FormLayoutDeepContext = Symbol("FormLayoutDeepContext");
const FormLayoutShallowContext = Symbol(
  "FormLayoutShallowContext"
);
const useFormDeepLayout = () => inject(FormLayoutDeepContext, ref({}));
const useFormShallowLayout = () => inject(FormLayoutShallowContext, ref({}));
const useFormLayout = () => {
  const shallowLayout = useFormShallowLayout();
  const deepLayout = useFormDeepLayout();
  const formLayout = ref({
    ...deepLayout.value,
    ...shallowLayout.value
  });
  watch(
    [shallowLayout, deepLayout],
    () => {
      formLayout.value = {
        ...deepLayout.value,
        ...shallowLayout.value
      };
    },
    {
      deep: true
    }
  );
  return formLayout;
};
const FormLayout = defineComponent({
  name: "FFormLayout",
  inheritAttrs: false,
  props: formLayoutProps,
  setup(customProps, { slots }) {
    const { props } = useResponsiveFormLayout(customProps);
    const deepLayout = useFormDeepLayout();
    const newDeepLayout = ref({
      ...deepLayout.value
    });
    const shallowProps = ref({});
    watch(
      [props, deepLayout],
      () => {
        shallowProps.value = props.value.shallow ? props.value : void 0;
        if (!props.value.shallow) {
          Object.assign(newDeepLayout.value, props.value);
        } else {
          if (props.value.size) {
            newDeepLayout.value.size = props.value.size;
          }
          if (props.value.colon) {
            newDeepLayout.value.colon = props.value.colon;
          }
        }
      },
      { deep: true, immediate: true }
    );
    provide(FormLayoutDeepContext, newDeepLayout);
    provide(FormLayoutShallowContext, shallowProps);
    const formPrefixCls = `${stylePrefix}-form`;
    return () => {
      const classNames = {
        [`${formPrefixCls}-${props == null ? void 0 : props.value.layout}`]: true,
        [`${formPrefixCls}-rtl`]: (props == null ? void 0 : props.value.direction) === "rtl",
        [`${formPrefixCls}-${props == null ? void 0 : props.value.size}`]: (props == null ? void 0 : props.value.size) !== void 0,
        [`${props == null ? void 0 : props.value.className}`]: (props == null ? void 0 : props.value.className) !== void 0
      };
      return h(
        "div",
        {
          ref: "root",
          class: classNames
        },
        slots
      );
    };
  }
});

export { FormLayout, FormLayoutDeepContext, FormLayoutShallowContext, FormLayout as default, formLayoutProps, useFormDeepLayout, useFormLayout, useFormShallowLayout };
//# sourceMappingURL=index.mjs.map