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

A Component Library for Vue 3

import { isVNode, ref, onUnmounted, defineComponent, createVNode, createTextVNode, mergeProps } from 'vue';
import { observer } from '@formily/reactive-vue';
import '../../form-grid/index.mjs';
import { autorun } from '@formily/reactive';
import { FragmentComponent } from '@formily/vue';
import '../../submit/index.mjs';
import '../../reset/index.mjs';
import '../../form-button-group/index.mjs';
import { ElButton } from 'element-plus';
import '../../form/index.mjs';
import '../../__builtins__/index.mjs';
import { buildProps } from 'element-plus/es/utils/vue/props/runtime';
import { formProps, Form } from '../../form/src/index.mjs';
import { formGridProps, FormGrid } from '../../form-grid/src/index.mjs';
import { Submit } from '../../submit/src/index.mjs';
import { Reset } from '../../reset/src/index.mjs';
import { FormButtonGroup } from '../../form-button-group/src/index.mjs';
import { composeExport } from '../../__builtins__/shared/utils.mjs';

function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const searchFormProps = {
  ...formProps,
  ...formGridProps,
  ...buildProps({
    /**
     * 查询回调方法
     */
    onSubmit: {
      type: Function
    },
    /**
     * 重置回调方法
     */
    onReset: {
      type: Function
    }
  })
};
const useCollapseGrid = (options) => {
  var _a;
  const maxRows = (_a = options == null ? void 0 : options.maxRows) != null ? _a : 1;
  const grid = FormGrid.createFormGrid({
    maxColumns: [1, 2, 4],
    minColumns: [1, 2, 4],
    maxRows,
    ...options,
    shouldVisible: (node, grid2) => {
      if (node.index === grid2.childSize - 1)
        return true;
      if (grid2.maxRows === Infinity)
        return true;
      return (node.shadowRow || 0) < maxRows + 1;
    }
  });
  const expanded = ref(false);
  const type = ref("");
  const takeType = (realRows, computeRows) => {
    if (realRows < maxRows + 1)
      return "incomplete-wrap";
    if (computeRows > maxRows)
      return "collapsible";
    return "complete-wrap";
  };
  const dispose = autorun(() => {
    expanded.value = grid.maxRows === Infinity;
    const realRows = grid.shadowRows;
    const computeRows = grid.fullnessLastColumn ? grid.shadowRows - 1 : grid.shadowRows;
    type.value = takeType(realRows, computeRows);
  });
  onUnmounted(dispose);
  const toggle = () => {
    if (grid.maxRows === Infinity) {
      grid.maxRows = maxRows;
    } else {
      grid.maxRows = Infinity;
    }
  };
  return {
    grid,
    expanded,
    toggle,
    type
  };
};
const SearchFormInner = observer(defineComponent({
  name: "FSearchForm",
  props: searchFormProps,
  setup(props, {
    slots
  }) {
    const {
      onSubmit,
      onReset,
      ...reset
    } = props;
    const {
      grid,
      expanded,
      toggle,
      type
    } = useCollapseGrid(reset);
    const renderActions = () => {
      if (slots.actions)
        return slots.actions();
      return createVNode(FragmentComponent, null, {
        default: () => [createVNode(Submit, {
          "onSubmit": onSubmit
        }, {
          default: () => [createTextVNode("\u67E5\u8BE2")]
        }), createVNode(Reset, {
          "onClick": onReset
        }, {
          default: () => [createTextVNode("\u91CD\u7F6E")]
        })]
      });
    };
    const renderButtonGroup = () => {
      let _slot2;
      if (type.value === "incomplete-wrap") {
        let _slot;
        return createVNode(FormButtonGroup, {
          "align": "left"
        }, _isSlot(_slot = renderActions()) ? _slot : {
          default: () => [_slot]
        });
      }
      if (type.value === "collapsible") {
        return createVNode(FormButtonGroup, {
          "align": "right"
        }, {
          default: () => [createVNode(FragmentComponent, null, {
            default: () => [createVNode(ElButton, {
              "type": "primary",
              "onClick": toggle,
              "text": true
            }, {
              default: () => [expanded.value ? "\u6536\u8D77" : "\u5C55\u5F00"]
            }), renderActions()]
          })]
        });
      }
      return createVNode(FormButtonGroup, {
        "align": "right",
        "style": {
          display: "flex",
          width: "100%"
        }
      }, _isSlot(_slot2 = renderActions()) ? _slot2 : {
        default: () => [_slot2]
      });
    };
    return () => {
      let _slot3;
      return (
        // @ts-ignore
        createVNode(Form, mergeProps(reset, {
          "feedbackLayout": "terse"
        }), {
          default: () => [createVNode(FormGrid, {
            "grid": grid
          }, {
            default: () => [slots.default && slots.default(), createVNode(FormGrid.GridColumn, {
              "gridSpan": -1
            }, _isSlot(_slot3 = renderButtonGroup()) ? _slot3 : {
              default: () => [_slot3]
            })]
          })]
        })
      );
    };
  }
}));
const SearchForm = composeExport(SearchFormInner, {
  useCollapseGrid
});

export { SearchForm, SearchForm as default, searchFormProps };
//# sourceMappingURL=index.mjs.map