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

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

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const webVue = require("@arco-design/web-vue");
const lite = require("klona/lite");
const core = require("@vrx/core");
const use = require("@vrx-arco/use");
const IconRefresh = require("@vrx-arco/icons-vue/IconRefresh");
const IconSearch = require("@vrx-arco/icons-vue/IconSearch");
const _var = require("../style/var.js");
const context = require("./context.js");
const SearchBar = /* @__PURE__ */ vue.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
    } = _var.style("search-bar");
    const model = vue.toRef(props, "model");
    const column = vue.toRef(props, "column");
    const autoUpdate = vue.toRef(props, "autoUpdate");
    const {
      gridProps
    } = use.useGrid(true, column);
    context.provideSearchBar({
      gridProps,
      model,
      autoUpdate
    });
    const formRef = vue.ref();
    const resetModel = vue.ref();
    const {
      loading: searchLoading,
      run: searchRun
    } = core.useAsyncLoading();
    const handleSearch = () => {
      if (!props.validOnButtonClick) {
        searchRun(Promise.resolve().then(() => {
          var _a;
          return (_a = props.onSearch) == null ? void 0 : _a.call(props, vue.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, vue.toRaw(model.value));
      }));
    };
    const {
      loading: resetLoading,
      run: resetRun
    } = core.useAsyncLoading();
    const handleReset = () => {
      if (props.resetOnButtonClick) {
        Object.keys(model.value).forEach((key) => {
          model.value[key] = lite.klona(resetModel.value[key]);
        });
      }
      resetRun(Promise.resolve().then(() => {
        var _a;
        return (_a = props.onReset) == null ? void 0 : _a.call(props, vue.toRaw(model.value));
      }));
    };
    vue.onMounted(() => {
      resetModel.value = lite.klona(model.value);
    });
    return () => {
      const {
        labelColProps,
        wrapperColProps,
        disabled,
        hideAction,
        hideReset
      } = props;
      const renderAction = () => {
        if (hideAction) {
          return;
        }
        return vue.createVNode("div", {
          "class": bemClass("__button-box")
        }, [vue.createVNode(webVue.Space, {
          "direction": "vertical"
        }, {
          default: () => [vue.createVNode(webVue.Button, {
            "type": "primary",
            "onClick": handleSearch,
            "loading": searchLoading.value,
            "disabled": disabled || resetLoading.value,
            "htmlType": "submit"
          }, {
            default: () => [vue.createTextVNode("搜索")],
            icon: () => vue.createVNode(IconSearch, {
              "class": "arco-icon"
            }, null)
          }), !hideReset && vue.createVNode(webVue.Button, {
            "onClick": handleReset,
            "loading": resetLoading.value,
            "disabled": disabled || searchLoading.value
          }, {
            default: () => [vue.createTextVNode("重置")],
            icon: () => vue.createVNode(IconRefresh, {
              "class": "arco-icon"
            }, null)
          })]
        })]);
      };
      return vue.createVNode(webVue.Form, {
        "ref": formRef,
        "layout": "horizontal",
        "labelAlign": "left",
        "autoLabelWidth": true,
        "model": model.value,
        "wrapperColProps": wrapperColProps,
        "labelColProps": labelColProps,
        "disabled": disabled || resetLoading.value || searchLoading.value
      }, {
        default: () => [vue.createVNode("div", {
          "class": bemClass()
        }, [vue.createVNode(webVue.Row, {
          "align": "center",
          "class": bemClass("__form-row"),
          "gutter": [24, 8]
        }, {
          default: () => {
            var _a;
            return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
          }
        }), renderAction()])]
      });
    };
  }
});
exports.SearchBar = SearchBar;