vue-admin-core/lib/formily/form-grid/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');
var reactiveVue = require('@formily/reactive-vue');
var reactive = require('@formily/reactive');
var grid = require('@formily/grid');
require('../../__builtins__/index.js');
require('../../form-layout/index.js');
var runtime = require('element-plus/es/utils/vue/props/runtime');
var index = require('../../form-layout/src/index.js');
var index$1 = require('../../__builtins__/configs/index.js');
var utils = require('../../__builtins__/shared/utils.js');

const FormGridSymbol = Symbol("FormGridContext");
const createFormGrid = (props) => {
  return reactive.markRaw(new grid.Grid(props));
};
const useFormGrid = () => vue.inject(FormGridSymbol);
const useGridSpan = (gridSpan) => {
  return gridSpan;
};
const useGridColumn = (gridSpan = "span 1") => {
  return gridSpan;
};
const formGridProps = runtime.buildProps({
  columnGap: {
    type: Number
  },
  rowGap: {
    type: Number
  },
  minColumns: {
    type: [Number, Array]
  },
  minWidth: {
    type: [Number, Array]
  },
  maxColumns: {
    type: [Number, Array]
  },
  maxWidth: {
    type: [Number, Array]
  },
  breakpoints: {
    type: Array
  },
  colWrap: {
    type: Boolean,
    default: true
  },
  strictAutoFit: {
    type: Boolean,
    default: false
  },
  shouldVisible: {
    type: Function,
    default() {
      return () => true;
    }
  },
  grid: {
    type: Object
  }
});
const useRefs = () => {
  const vm = vue.getCurrentInstance();
  return (vm == null ? void 0 : vm.refs) || {};
};
const FormGridInner = reactiveVue.observer(
  vue.defineComponent({
    name: "FFormGrid",
    props: {
      columnGap: {
        type: Number
      },
      rowGap: {
        type: Number
      },
      minColumns: {
        type: [Number, Array]
      },
      minWidth: {
        type: [Number, Array]
      },
      maxColumns: {
        type: [Number, Array]
      },
      maxWidth: {
        type: [Number, Array]
      },
      breakpoints: {
        type: Array
      },
      colWrap: {
        type: Boolean,
        default: true
      },
      strictAutoFit: {
        type: Boolean,
        default: false
      },
      shouldVisible: {
        type: Function,
        default() {
          return () => true;
        }
      },
      grid: {
        type: Object
      }
    },
    setup(props, { slots }) {
      const layout = index.useFormLayout();
      const gridInstance = vue.computed(() => {
        var _a, _b, _c, _d;
        const newProps = {};
        Object.keys(props).forEach((key) => {
          if (typeof props[key] !== "undefined") {
            newProps[key] = props[key];
          }
        });
        const options = {
          columnGap: (_b = (_a = layout.value) == null ? void 0 : _a.gridColumnGap) != null ? _b : 8,
          rowGap: (_d = (_c = layout.value) == null ? void 0 : _c.gridRowGap) != null ? _d : 4,
          ...newProps
        };
        return reactive.markRaw((options == null ? void 0 : options.grid) ? options.grid : new grid.Grid(options));
      });
      const prefixCls = `${index$1.stylePrefix}-form-grid`;
      vue.provide(FormGridSymbol, gridInstance);
      vue.onMounted(() => {
        const refs = useRefs();
        vue.watchEffect((onInvalidate) => {
          const dispose = gridInstance.value.connect(refs.root);
          onInvalidate(() => {
            dispose();
          });
        });
      });
      return () => {
        return vue$1.h(
          "div",
          {
            class: `${prefixCls}`,
            style: {
              gridTemplateColumns: gridInstance.value.templateColumns,
              gap: gridInstance.value.gap
            },
            ref: "root"
          },
          slots
        );
      };
    }
  })
);
const FormGridColumn = reactiveVue.observer(
  vue.defineComponent({
    name: "FFormGridColumn",
    props: {
      gridSpan: {
        type: Number,
        default: 1
      }
    },
    setup(props, { slots }) {
      return () => {
        return vue$1.h(
          "div",
          {
            "data-grid-span": props.gridSpan
          },
          slots
        );
      };
    }
  })
);
const FormGrid = utils.composeExport(FormGridInner, {
  GridColumn: FormGridColumn,
  useGridSpan,
  useFormGrid,
  createFormGrid
});

exports.FormGrid = FormGrid;
exports.createFormGrid = createFormGrid;
exports.default = FormGrid;
exports.formGridProps = formGridProps;
exports.useFormGrid = useFormGrid;
exports.useGridColumn = useGridColumn;
//# sourceMappingURL=index.js.map