plus-pro-components
Version:
Page level components developed based on Element Plus.
249 lines (246 loc) • 9.24 kB
JavaScript
import { defineComponent, ref, useSlots, useAttrs, computed, unref, watch, openBlock, createBlock, mergeProps, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, renderList, normalizeProps, guardReactiveProps } from 'vue';
import { PlusForm } from '../../form/index.mjs';
import { RefreshRight, Search, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import '../../../hooks/index.mjs';
import { ElFormItem, ElButton, ElLink, ElIcon } from 'element-plus';
import { orderBy } from 'lodash-es';
import { filterSlots, getLabelSlotName, getFieldSlotName, getExtraSlotName, versionIsLessThan299 } from '../../utils/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
var _sfc_main = /* @__PURE__ */ 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();
const plusFormInstance = ref();
const isShowUnfold = ref((_a = props.defaultUnfold) != null ? _a : false);
const values = ref({});
const slots = useSlots();
const attrs = useAttrs();
const rules = computed(
() => props.needValidate ? attrs.rules : void 0
);
const unfoldText = computed(
() => isShowUnfold.value ? props.retractText || t("plus.search.retract") : props.expandText || t("plus.search.expand")
);
const labelSlots = filterSlots(slots, getLabelSlotName());
const fieldSlots = filterSlots(slots, getFieldSlotName());
const extraSlots = filterSlots(slots, getExtraSlotName());
const originData = computed(() => {
const filterData = props.columns.filter((item) => unref(item.hideInSearch) !== true).map((item) => ({ ...item, hideInForm: false })).map((item) => ({ ...item, order: (item == null ? void 0 : item.order) ? unref(item.order) : 0 }));
return orderBy(filterData, ["order"], ["desc"]);
});
const subColumns = computed(() => {
if (props.hasUnfold && !isShowUnfold.value) {
return originData.value.slice(0, props.showNumber);
} else {
return originData.value;
}
});
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 = 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 openBlock(), createBlock(unref(PlusForm), 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
}), createSlots({
"search-footer": withCtx(() => [
_ctx.hasFooter ? (openBlock(), createBlock(unref(ElFormItem), {
key: 0,
class: "plus-search__button__wrapper",
label: _ctx.labelPosition === "top" ? "placeholder" : ""
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "footer", {
isShowUnfold: isShowUnfold.value,
handleReset,
handleSearch: handleSearch.value,
handleUnfold,
searchLoading: _ctx.searchLoading
}, () => [
_ctx.hasReset ? (openBlock(), createBlock(unref(ElButton), {
key: 0,
icon: unref(RefreshRight),
onClick: handleReset
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.resetText || unref(t)("plus.search.resetText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["icon"])) : createCommentVNode("v-if", true),
createVNode(unref(ElButton), {
type: "primary",
loading: _ctx.searchLoading,
icon: unref(Search),
onClick: handleSearch.value
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.searchText || unref(t)("plus.search.searchText")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading", "icon", "onClick"]),
_ctx.hasUnfold && originData.value.length > _ctx.showNumber ? (openBlock(), createBlock(unref(ElLink), {
key: 1,
class: "plus-search__unfold",
type: "primary",
underline: unref(versionIsLessThan299) ? false : "never",
href: "javaScript:;",
onClick: handleUnfold
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(unfoldText.value) + " ",
1
/* TEXT */
),
createVNode(unref(ElIcon), null, {
default: withCtx(() => [
isShowUnfold.value ? (openBlock(), createBlock(unref(ArrowUp), { key: 0 })) : (openBlock(), createBlock(unref(ArrowDown), { key: 1 }))
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
}, 8, ["underline"])) : createCommentVNode("v-if", true)
])
]),
_: 3
/* FORWARDED */
}, 8, ["label"])) : createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
}, [
renderList(unref(labelSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
renderList(unref(fieldSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
renderList(unref(extraSlots), (_, key) => {
return {
name: key,
fn: withCtx((data) => [
renderSlot(_ctx.$slots, key, normalizeProps(guardReactiveProps(data)))
])
};
}),
_ctx.$slots["tooltip-icon"] ? {
name: "tooltip-icon",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "tooltip-icon")
]),
key: "0"
} : void 0
]), 1040, ["modelValue", "inline", "rules", "label-position", "row-props", "col-props", "columns"]);
};
}
});
export { _sfc_main as default };