hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
407 lines (404 loc) • 16.3 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, createElementVNode, resolveComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, mergeProps, createCommentVNode, normalizeStyle, toDisplayString, createTextVNode, normalizeClass, createElementBlock, Fragment, renderList } from 'vue';
import { cloneDeep } from 'lodash-unified';
import { HlTooltip, HlTag, HlForm, HlFormItem, HlPanel, HlGroup, HlBadge, HlInput, HlSelect, HlOption, HlDatePicker, HlTimePicker, HlButton, HlIcon, SystemSearch } from 'hongluan-ui';
import { usePrefix } from '../../../utils/util.mjs';
import { Utils } from './utils.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
const _sfc_main = defineComponent({
name: "DataFilter",
components: { HlTooltip, HlTag, HlForm, HlFormItem, HlPanel, HlGroup, HlBadge, HlInput, HlSelect, HlOption, HlDatePicker, HlTimePicker, HlButton, HlIcon, SystemSearch },
inheritAttrs: false,
props: {
iconPosition: {
type: String,
default: "right"
},
title: {
type: String,
default: "\u6570\u636E\u7B5B\u9009"
},
width: {
type: [String, Number],
default: 380
},
maxHeight: {
type: String,
default: "300px"
},
fill: {
type: Boolean,
default: false
},
placement: {
type: String,
default: "bottom"
},
fallbackPlacements: {
type: Array,
default: () => []
},
items: {
type: Array,
default: () => []
},
selectedSection: Object,
max: {
type: Number,
default: 99
},
gap: String,
itemGap: String,
searchLabel: {
type: String,
default: " \u641C \u7D22 "
},
outsideIgnore: {
type: Array,
default: () => []
}
},
emits: ["search", "remove-selected-item"],
setup(props, { emit }) {
const { prefix } = usePrefix();
const popoverRef = ref(null);
const searchItems = ref(cloneDeep(props.items));
const displayItems = ref([]);
const popperPaneRefs = ref([]);
const selectedSectionOpt = computed(() => ({ show: true, closable: true, ...props.selectedSection || {} }));
const outsideIgnoreComputed = computed(() => popperPaneRefs.value);
const addRef = (compRef) => {
if (compRef) {
if (compRef.popperPaneRef) {
popperPaneRefs.value.push(compRef.popperPaneRef);
} else {
popperPaneRefs.value.push(compRef);
}
}
};
const isDatePicker = (type) => {
return "year/month/date/dates/week/datetime/datetimerange/daterange/monthrange".indexOf(type) !== -1;
};
const getDateTimeProps = (item) => {
const { value: __, label: ___, display: ____, ...others } = item;
return others;
};
const getSelectProps = (item) => {
const { options: _, value: __, prop: ___, type: ____, label: _____, display: ______, ...others } = item;
return others;
};
const getInputProps = (item) => {
const { label: _, type: __, display: ___, ...others } = item;
return others;
};
const changeValue = () => {
displayItems.value = Utils.getDisplayItems(searchItems.value);
};
const getDisplayItemsCount = () => displayItems.value.length;
const updateDisplayItem = (item) => {
const idx = displayItems.value.findIndex((di) => item.name === di.name);
if (idx == -1) {
displayItems.value.push(item);
} else {
displayItems.value[idx] = item;
}
};
const removeDisplayItem = (item) => {
displayItems.value = displayItems.value.filter((di) => di !== item);
Utils.syncDisplaySearchItems(displayItems.value, searchItems.value);
emit("remove-selected-item", item);
};
const emitChange = () => {
const mapParams = {};
const originalParams = {};
searchItems.value.filter((item) => item.type !== "slot").filter((item) => Array.isArray(item.value) ? item.value.length : item.value).forEach((item) => {
if (/range|dates/.test(item.type) || item["is-range"]) {
mapParams[item.name + "Start"] = item.value[0];
mapParams[item.name + "End"] = item.value[1];
} else {
mapParams[item.name] = item.value;
}
originalParams[item.name] = item.value;
});
let urlParams = "";
Object.keys(mapParams).forEach((k) => {
if (Array.isArray(mapParams[k])) {
urlParams = mapParams[k].reduce((prev, cur) => {
prev += `&${k}=${cur}`;
return prev;
}, urlParams);
} else {
urlParams += `&${k}=${mapParams[k]}`;
}
});
if (urlParams[0] === "&") {
urlParams = urlParams.slice(1);
}
emit("search", urlParams, mapParams, originalParams);
};
const search = () => {
changeValue();
emitChange();
popoverRef.value.hide();
};
const resetFields = (names = []) => {
searchItems.value.forEach((_, idx) => {
if (names.length) {
if (names.includes(searchItems.value[idx].name)) {
searchItems.value[idx].value = props.items[idx].value;
}
} else {
searchItems.value[idx].value = props.items[idx].value;
}
});
changeValue();
emitChange();
};
watch(() => {
var _a;
return (_a = props.items) == null ? void 0 : _a.length;
}, () => {
searchItems.value = cloneDeep(props.items);
});
watch(() => props.outsideIgnore, (newVal) => {
newVal == null ? void 0 : newVal.forEach((v) => {
addRef(v);
});
}, {
immediate: true
});
onMounted(() => {
displayItems.value = Utils.getDisplayItems(searchItems.value);
});
return {
prefix,
popoverRef,
searchItems,
displayItems,
outsideIgnoreComputed,
addRef,
selectedSectionOpt,
getKey: Utils.getKey,
getLabel: Utils.getLabel,
isDatePicker,
changeValue,
search,
getDisplayItemsCount,
removeDisplayItem,
updateDisplayItem,
getDateTimeProps,
getSelectProps,
getInputProps,
resetFields
};
}
});
const _hoisted_1 = { class: "panel-title" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", null, "\u5DF2\u9009\u62E9\uFF1A", -1);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_system_search = resolveComponent("system-search");
const _component_hl_icon = resolveComponent("hl-icon");
const _component_hl_badge = resolveComponent("hl-badge");
const _component_hl_button = resolveComponent("hl-button");
const _component_hl_tag = resolveComponent("hl-tag");
const _component_hl_group = resolveComponent("hl-group");
const _component_hl_form_item = resolveComponent("hl-form-item");
const _component_hl_time_picker = resolveComponent("hl-time-picker");
const _component_hl_date_picker = resolveComponent("hl-date-picker");
const _component_hl_option = resolveComponent("hl-option");
const _component_hl_select = resolveComponent("hl-select");
const _component_hl_input = resolveComponent("hl-input");
const _component_hl_form = resolveComponent("hl-form");
const _component_hl_scrollbar = resolveComponent("hl-scrollbar");
const _component_hl_panel = resolveComponent("hl-panel");
const _component_hl_tooltip = resolveComponent("hl-tooltip");
return openBlock(), createBlock(_component_hl_tooltip, {
ref: "popoverRef",
width: _ctx.width,
trigger: "click",
placement: _ctx.placement,
"fallback-placements": _ctx.fallbackPlacements,
"show-arrow": false,
"popper-class": _ctx.prefix + "-data-filter-popper",
"gpu-acceleration": false,
"outside-ignore": _ctx.outsideIgnoreComputed,
transition: "dropdown"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "reference", {}, () => [
createVNode(_component_hl_button, mergeProps({
type: "primary",
"icon-position": _ctx.iconPosition,
equal: !_ctx.$slots.default,
effect: "light",
class: _ctx.prefix + "-data-filter"
}, _ctx.$attrs), {
icon: withCtx(() => [
renderSlot(_ctx.$slots, "icon", {}, () => [
!_ctx.$slots.default && !_ctx.$slots.icon ? (openBlock(), createBlock(_component_hl_icon, { key: 0 }, {
default: withCtx(() => [
createVNode(_component_system_search)
]),
_: 1
})) : createCommentVNode("v-if", true)
])
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "default"),
createVNode(_component_hl_badge, {
type: "primary",
position: "rt",
hidden: !_ctx.displayItems.length,
value: _ctx.displayItems.length,
max: _ctx.max,
round: ""
}, null, 8, ["hidden", "value", "max"])
]),
_: 3
}, 16, ["icon-position", "equal", "class"])
])
]),
content: withCtx(() => [
createVNode(_component_hl_panel, {
"body-padding": "var(--xl)",
style: normalizeStyle({ height: _ctx.maxHeight, "--data-filter-panel-width": typeof _ctx.width === "number" ? _ctx.width + "px" : _ctx.width }),
"full-body": ""
}, {
header: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createElementVNode("h4", null, toDisplayString(_ctx.title), 1)
])
]),
footer: withCtx(() => [
renderSlot(_ctx.$slots, "footer", {}, () => [
createVNode(_component_hl_button, {
type: "primary",
onClick: _ctx.search
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.searchLabel), 1)
]),
_: 1
}, 8, ["onClick"])
])
]),
default: withCtx(() => [
createVNode(_component_hl_scrollbar, null, {
default: withCtx(() => [
createVNode(_component_hl_form, {
"label-suffix": "\uFF1A",
"item-gap": _ctx.itemGap,
gap: _ctx.gap,
style: { "padding": "var(--panel-padding)" }
}, {
default: withCtx(() => [
_ctx.displayItems.length && _ctx.selectedSectionOpt.show ? (openBlock(), createBlock(_component_hl_form_item, {
key: 0,
class: normalizeClass({ "no-selected-items": !_ctx.displayItems.length })
}, {
label: withCtx(() => [
_hoisted_2
]),
default: withCtx(() => [
createVNode(_component_hl_group, {
wrap: "",
gap: "var(--sm)",
class: "selected-items"
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.displayItems, (item) => {
return openBlock(), createBlock(_component_hl_tag, {
key: item.name,
type: "primary",
class: "selected-item-tag",
closable: _ctx.selectedSectionOpt.closable,
onClose: ($event) => _ctx.removeDisplayItem(item)
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(item.display), 1)
]),
_: 2
}, 1032, ["closable", "onClose"]);
}), 128))
]),
_: 1
})
]),
_: 1
}, 8, ["class"])) : createCommentVNode("v-if", true),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.searchItems, (item) => {
return openBlock(), createBlock(_component_hl_form_item, {
key: item.name,
label: item.label
}, {
default: withCtx(() => [
item.type === "timepicker" ? (openBlock(), createBlock(_component_hl_time_picker, mergeProps({
key: 0,
ref_for: true,
ref: (ref2) => _ctx.addRef(ref2),
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
block: "",
clearable: "",
fill: _ctx.fill
}, _ctx.getDateTimeProps(item)), null, 16, ["modelValue", "onUpdate:modelValue", "fill"])) : _ctx.isDatePicker(item.type) ? (openBlock(), createBlock(_component_hl_date_picker, mergeProps({
key: 1,
ref_for: true,
ref: (ref2) => _ctx.addRef(ref2),
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
type: item.type,
block: "",
clearable: "",
fill: _ctx.fill
}, _ctx.getDateTimeProps(item)), null, 16, ["modelValue", "onUpdate:modelValue", "type", "fill"])) : item.type === "select" ? (openBlock(), createBlock(_component_hl_select, mergeProps({
key: 2,
ref_for: true,
ref: (ref2) => _ctx.addRef(ref2),
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
fill: _ctx.fill,
block: "",
clearable: ""
}, _ctx.getSelectProps(item)), {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(item.options, (opt) => {
return openBlock(), createBlock(_component_hl_option, {
key: _ctx.getKey(item, opt),
label: _ctx.getLabel(item, opt),
value: _ctx.getKey(item, opt)
}, null, 8, ["label", "value"]);
}), 128))
]),
_: 2
}, 1040, ["modelValue", "onUpdate:modelValue", "fill"])) : item.type === "slot" ? renderSlot(_ctx.$slots, item.slotName, {
key: 3,
value: item.value,
item
}) : item.type === "input" || !item.type ? (openBlock(), createBlock(_component_hl_input, mergeProps({
key: 4,
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
fill: _ctx.fill,
block: "",
clearable: ""
}, _ctx.getInputProps(item)), null, 16, ["modelValue", "onUpdate:modelValue", "fill"])) : createCommentVNode("v-if", true)
]),
_: 2
}, 1032, ["label"]);
}), 128))
]),
_: 3
}, 8, ["item-gap", "gap"])
]),
_: 3
})
]),
_: 3
}, 8, ["style"])
]),
_: 3
}, 8, ["width", "placement", "fallback-placements", "popper-class", "outside-ignore"]);
}
var DataFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { DataFilter as default };
//# sourceMappingURL=index.mjs.map