plus-pro-components
Version:
Page level components developed based on Element Plus.
253 lines (248 loc) • 9.4 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var index$1 = require('../../form/index.js');
var iconsVue = require('@element-plus/icons-vue');
require('../../../hooks/index.js');
var elementPlus = require('element-plus');
var lodashEs = require('lodash-es');
var index = require('../../utils/index.js');
var useLocale = require('../../../hooks/useLocale.js');
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "PlusSearch"
},
__name: "index",
props: {
modelValue: { default: () => ({}) },
defaultValues: { default: () => ({}) },
columns: { default: () => [] },
hasFooter: { type: Boolean, default: true },
hasReset: { type: Boolean, default: true },
hasUnfold: { type: Boolean, default: true },
defaultUnfold: { type: Boolean, default: false },
searchText: { default: "" },
resetText: { default: "" },
retractText: { default: "" },
expandText: { default: "" },
searchLoading: { type: Boolean, default: false },
inline: { type: Boolean, default: true },
showNumber: { default: 2 },
labelPosition: { default: void 0 },
rowProps: { default: () => ({
gutter: 20
}) },
colProps: { default: () => ({
xs: 24,
sm: 12,
md: 8,
lg: 8,
xl: 6
}) },
needValidate: { type: Boolean, default: false }
},
emits: ["update:modelValue", "search", "change", "reset", "collapse"],
setup(__props, { expose: __expose, emit: __emit }) {
var _a;
const props = __props;
const emit = __emit;
const { t } = useLocale.useLocale();
const plusFormInstance = vue.ref();
const isShowUnfold = vue.ref((_a = props.defaultUnfold) != null ? _a : false);
const values = vue.ref({});
const slots = vue.useSlots();
const attrs = vue.useAttrs();
const rules = vue.computed(
() => props.needValidate ? attrs.rules : void 0
);
const unfoldText = vue.computed(
() => isShowUnfold.value ? props.retractText || t("plus.search.retract") : props.expandText || t("plus.search.expand")
);
const labelSlots = index.filterSlots(slots, index.getLabelSlotName());
const fieldSlots = index.filterSlots(slots, index.getFieldSlotName());
const extraSlots = index.filterSlots(slots, index.getExtraSlotName());
const originData = vue.computed(() => {
const filterData = props.columns.filter((item) => vue.unref(item.hideInSearch) !== true).map((item) => ({ ...item, hideInForm: false })).map((item) => ({ ...item, order: (item == null ? void 0 : item.order) ? vue.unref(item.order) : 0 }));
return lodashEs.orderBy(filterData, ["order"], ["desc"]);
});
const subColumns = vue.computed(() => {
if (props.hasUnfold && !isShowUnfold.value) {
return originData.value.slice(0, props.showNumber);
} else {
return originData.value;
}
});
vue.watch(
() => props.modelValue,
(val) => {
values.value = val;
},
{
immediate: true
}
);
const handleChange = async (values2, column) => {
emit("update:modelValue", values2);
emit("change", values2, column);
};
const handleSearchDefault = () => {
emit("search", values.value);
};
const handleSearchValidate = async () => {
var _a2;
const isValid = await ((_a2 = plusFormInstance.value) == null ? void 0 : _a2.handleSubmit());
if (isValid) {
emit("search", values.value);
}
};
const handleSearch = vue.computed(
() => props.needValidate ? handleSearchValidate : handleSearchDefault
);
const handleReset = () => {
values.value = { ...props.defaultValues };
emit("update:modelValue", values.value);
emit("reset", values.value);
};
const handleUnfold = (e) => {
e.preventDefault();
isShowUnfold.value = !isShowUnfold.value;
emit("collapse", isShowUnfold.value);
};
__expose({
plusFormInstance,
handleReset,
handleSearch: handleSearch.value,
handleUnfold
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusForm), vue.mergeProps({
ref_key: "plusFormInstance",
ref: plusFormInstance
}, _ctx.$attrs, {
modelValue: values.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => values.value = $event),
inline: _ctx.inline,
rules: rules.value,
"label-position": _ctx.labelPosition,
"row-props": _ctx.rowProps,
"col-props": _ctx.colProps,
columns: subColumns.value,
class: "plus-search",
"has-footer": false,
onChange: handleChange
}), vue.createSlots({
"search-footer": vue.withCtx(() => [
_ctx.hasFooter ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElFormItem), {
key: 0,
class: "plus-search__button__wrapper",
label: _ctx.labelPosition === "top" ? "placeholder" : ""
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "footer", {
isShowUnfold: isShowUnfold.value,
handleReset,
handleSearch: handleSearch.value,
handleUnfold,
searchLoading: _ctx.searchLoading
}, () => [
_ctx.hasReset ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
key: 0,
icon: vue.unref(iconsVue.RefreshRight),
onClick: handleReset
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.resetText || vue.unref(t)("plus.search.resetText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["icon"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(elementPlus.ElButton), {
type: "primary",
loading: _ctx.searchLoading,
icon: vue.unref(iconsVue.Search),
onClick: handleSearch.value
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.searchText || vue.unref(t)("plus.search.searchText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading", "icon", "onClick"]),
_ctx.hasUnfold && originData.value.length > _ctx.showNumber ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElLink), {
key: 1,
class: "plus-search__unfold",
type: "primary",
underline: vue.unref(index.versionIsLessThan299) ? false : "never",
href: "javaScript:;",
onClick: handleUnfold
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(unfoldText.value) + " ",
1
/* TEXT */
),
vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
default: vue.withCtx(() => [
isShowUnfold.value ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.ArrowUp), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.ArrowDown), { key: 1 }))
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
}, 8, ["underline"])) : vue.createCommentVNode("v-if", true)
])
]),
_: 3
/* FORWARDED */
}, 8, ["label"])) : vue.createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
}, [
vue.renderList(vue.unref(labelSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(fieldSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
vue.renderList(vue.unref(extraSlots), (_, key) => {
return {
name: key,
fn: vue.withCtx((data) => [
vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.guardReactiveProps(data)))
])
};
}),
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "tooltip-icon")
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "inline", "rules", "label-position", "row-props", "col-props", "columns"]);
};
}
});
exports.default = _sfc_main;