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

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var vue$1 = require('@formily/vue');
require('../../__builtins__/index.js');
var useResponsiveFormLayout = require('./useResponsiveFormLayout.js');
var runtime = require('element-plus/es/utils/vue/props/runtime');
var index = require('../../__builtins__/configs/index.js');

const formLayoutProps = runtime.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 = () => vue.inject(FormLayoutDeepContext, vue.ref({}));
const useFormShallowLayout = () => vue.inject(FormLayoutShallowContext, vue.ref({}));
const useFormLayout = () => {
  const shallowLayout = useFormShallowLayout();
  const deepLayout = useFormDeepLayout();
  const formLayout = vue.ref({
    ...deepLayout.value,
    ...shallowLayout.value
  });
  vue.watch(
    [shallowLayout, deepLayout],
    () => {
      formLayout.value = {
        ...deepLayout.value,
        ...shallowLayout.value
      };
    },
    {
      deep: true
    }
  );
  return formLayout;
};
const FormLayout = vue.defineComponent({
  name: "FFormLayout",
  inheritAttrs: false,
  props: formLayoutProps,
  setup(customProps, { slots }) {
    const { props } = useResponsiveFormLayout.useResponsiveFormLayout(customProps);
    const deepLayout = useFormDeepLayout();
    const newDeepLayout = vue.ref({
      ...deepLayout.value
    });
    const shallowProps = vue.ref({});
    vue.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 }
    );
    vue.provide(FormLayoutDeepContext, newDeepLayout);
    vue.provide(FormLayoutShallowContext, shallowProps);
    const formPrefixCls = `${index.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 vue$1.h(
        "div",
        {
          ref: "root",
          class: classNames
        },
        slots
      );
    };
  }
});

exports.FormLayout = FormLayout;
exports.FormLayoutDeepContext = FormLayoutDeepContext;
exports.FormLayoutShallowContext = FormLayoutShallowContext;
exports.default = FormLayout;
exports.formLayoutProps = formLayoutProps;
exports.useFormDeepLayout = useFormDeepLayout;
exports.useFormLayout = useFormLayout;
exports.useFormShallowLayout = useFormShallowLayout;
//# sourceMappingURL=index.js.map