@vrx-arco/pro-components/dist/SearchBar/SearchBar.mjs

<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>

import { defineComponent, toRef, ref, onMounted, createVNode, createTextVNode, toRaw } from "vue";
import { Form, Row, Space, Button } from "@arco-design/web-vue";
import { klona } from "klona/lite";
import { useAsyncLoading } from "@vrx/core";
import { useGrid } from "@vrx-arco/use";
import IconRefresh from "@vrx-arco/icons-vue/IconRefresh";
import IconSearch from "@vrx-arco/icons-vue/IconSearch";
import { style } from "../style/var.mjs";
import { provideSearchBar } from "./context.mjs";
const SearchBar = /* @__PURE__ */ defineComponent({
  name: "vrx-arco-search-bar",
  props: {
    /**
     * 数据源 * 如需要使用自动重置，自动验证功能 该选项必填*
     */
    model: {
      type: Object,
      default: () => ({})
    },
    /**
     * label 的栅格布局
     */
    labelColProps: Object,
    /**
     * content 的栅格布局
     */
    wrapperColProps: Object,
    /**
     * 禁用表单
     */
    disabled: Boolean,
    /**
     * 表单验证规则
     */
    rules: [Object, Array],
    /**
     * 点击重置按钮的时候根据`model` 初始值自动重置表单
     */
    resetOnButtonClick: {
      type: Boolean,
      default: false
    },
    /**
     * 点击搜索按钮的时候触发验证
     */
    validOnButtonClick: {
      type: Boolean,
      default: false
    },
    onSearch: Function,
    onReset: Function,
    /**
     * 表单栅格布局
     */
    column: {
      type: [Number, Object],
      default: () => ({
        xs: 1,
        sm: 2,
        md: 2,
        lg: 3,
        xl: 3,
        xxl: 4
      })
    },
    /**
     * 劫持`search-bar-item` 第一个元素 自动绑定 `v-model`
     */
    autoUpdate: {
      type: Boolean,
      default: false
    },
    /**
     * 隐藏重置按钮
     */
    hideReset: {
      type: Boolean,
      default: false
    },
    /**
     * 隐藏操作栏
     */
    hideAction: {
      type: Boolean,
      default: false
    }
  },
  emits: ["search", "reset"],
  setup: (props, {
    slots
  }) => {
    const {
      bemClass
    } = style("search-bar");
    const model = toRef(props, "model");
    const column = toRef(props, "column");
    const autoUpdate = toRef(props, "autoUpdate");
    const {
      gridProps
    } = useGrid(true, column);
    provideSearchBar({
      gridProps,
      model,
      autoUpdate
    });
    const formRef = ref();
    const resetModel = ref();
    const {
      loading: searchLoading,
      run: searchRun
    } = useAsyncLoading();
    const handleSearch = () => {
      if (!props.validOnButtonClick) {
        searchRun(Promise.resolve().then(() => {
          var _a;
          return (_a = props.onSearch) == null ? void 0 : _a.call(props, toRaw(model.value));
        }));
        return;
      }
      searchRun(formRef.value.validate().then((error) => error ? Promise.reject(error) : Promise.resolve()).then(() => {
        var _a;
        return (_a = props.onSearch) == null ? void 0 : _a.call(props, toRaw(model.value));
      }));
    };
    const {
      loading: resetLoading,
      run: resetRun
    } = useAsyncLoading();
    const handleReset = () => {
      if (props.resetOnButtonClick) {
        Object.keys(model.value).forEach((key) => {
          model.value[key] = klona(resetModel.value[key]);
        });
      }
      resetRun(Promise.resolve().then(() => {
        var _a;
        return (_a = props.onReset) == null ? void 0 : _a.call(props, toRaw(model.value));
      }));
    };
    onMounted(() => {
      resetModel.value = klona(model.value);
    });
    return () => {
      const {
        labelColProps,
        wrapperColProps,
        disabled,
        hideAction,
        hideReset
      } = props;
      const renderAction = () => {
        if (hideAction) {
          return;
        }
        return createVNode("div", {
          "class": bemClass("__button-box")
        }, [createVNode(Space, {
          "direction": "vertical"
        }, {
          default: () => [createVNode(Button, {
            "type": "primary",
            "onClick": handleSearch,
            "loading": searchLoading.value,
            "disabled": disabled || resetLoading.value,
            "htmlType": "submit"
          }, {
            default: () => [createTextVNode("搜索")],
            icon: () => createVNode(IconSearch, {
              "class": "arco-icon"
            }, null)
          }), !hideReset && createVNode(Button, {
            "onClick": handleReset,
            "loading": resetLoading.value,
            "disabled": disabled || searchLoading.value
          }, {
            default: () => [createTextVNode("重置")],
            icon: () => createVNode(IconRefresh, {
              "class": "arco-icon"
            }, null)
          })]
        })]);
      };
      return createVNode(Form, {
        "ref": formRef,
        "layout": "horizontal",
        "labelAlign": "left",
        "autoLabelWidth": true,
        "model": model.value,
        "wrapperColProps": wrapperColProps,
        "labelColProps": labelColProps,
        "disabled": disabled || resetLoading.value || searchLoading.value
      }, {
        default: () => [createVNode("div", {
          "class": bemClass()
        }, [createVNode(Row, {
          "align": "center",
          "class": bemClass("__form-row"),
          "gutter": [24, 8]
        }, {
          default: () => {
            var _a;
            return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
          }
        }), renderAction()])]
      });
    };
  }
});
export {
  SearchBar
};