hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
411 lines (406 loc) • 16.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var hongluanUi = require('hongluan-ui');
var util = require('../../../utils/util.js');
var utils = require('./utils.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = vue.defineComponent({
name: "DataFilter",
components: { HlTooltip: hongluanUi.HlTooltip, HlTag: hongluanUi.HlTag, HlForm: hongluanUi.HlForm, HlFormItem: hongluanUi.HlFormItem, HlPanel: hongluanUi.HlPanel, HlGroup: hongluanUi.HlGroup, HlBadge: hongluanUi.HlBadge, HlInput: hongluanUi.HlInput, HlSelect: hongluanUi.HlSelect, HlOption: hongluanUi.HlOption, HlDatePicker: hongluanUi.HlDatePicker, HlTimePicker: hongluanUi.HlTimePicker, HlButton: hongluanUi.HlButton, HlIcon: hongluanUi.HlIcon, SystemSearch: hongluanUi.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 } = util.usePrefix();
const popoverRef = vue.ref(null);
const searchItems = vue.ref(lodashUnified.cloneDeep(props.items));
const displayItems = vue.ref([]);
const popperPaneRefs = vue.ref([]);
const selectedSectionOpt = vue.computed(() => ({ show: true, closable: true, ...props.selectedSection || {} }));
const outsideIgnoreComputed = vue.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.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.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();
};
vue.watch(() => {
var _a;
return (_a = props.items) == null ? void 0 : _a.length;
}, () => {
searchItems.value = lodashUnified.cloneDeep(props.items);
});
vue.watch(() => props.outsideIgnore, (newVal) => {
newVal == null ? void 0 : newVal.forEach((v) => {
addRef(v);
});
}, {
immediate: true
});
vue.onMounted(() => {
displayItems.value = utils.Utils.getDisplayItems(searchItems.value);
});
return {
prefix,
popoverRef,
searchItems,
displayItems,
outsideIgnoreComputed,
addRef,
selectedSectionOpt,
getKey: utils.Utils.getKey,
getLabel: utils.Utils.getLabel,
isDatePicker,
changeValue,
search,
getDisplayItemsCount,
removeDisplayItem,
updateDisplayItem,
getDateTimeProps,
getSelectProps,
getInputProps,
resetFields
};
}
});
const _hoisted_1 = { class: "panel-title" };
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("span", null, "\u5DF2\u9009\u62E9\uFF1A", -1);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_system_search = vue.resolveComponent("system-search");
const _component_hl_icon = vue.resolveComponent("hl-icon");
const _component_hl_badge = vue.resolveComponent("hl-badge");
const _component_hl_button = vue.resolveComponent("hl-button");
const _component_hl_tag = vue.resolveComponent("hl-tag");
const _component_hl_group = vue.resolveComponent("hl-group");
const _component_hl_form_item = vue.resolveComponent("hl-form-item");
const _component_hl_time_picker = vue.resolveComponent("hl-time-picker");
const _component_hl_date_picker = vue.resolveComponent("hl-date-picker");
const _component_hl_option = vue.resolveComponent("hl-option");
const _component_hl_select = vue.resolveComponent("hl-select");
const _component_hl_input = vue.resolveComponent("hl-input");
const _component_hl_form = vue.resolveComponent("hl-form");
const _component_hl_scrollbar = vue.resolveComponent("hl-scrollbar");
const _component_hl_panel = vue.resolveComponent("hl-panel");
const _component_hl_tooltip = vue.resolveComponent("hl-tooltip");
return vue.openBlock(), vue.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: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "reference", {}, () => [
vue.createVNode(_component_hl_button, vue.mergeProps({
type: "primary",
"icon-position": _ctx.iconPosition,
equal: !_ctx.$slots.default,
effect: "light",
class: _ctx.prefix + "-data-filter"
}, _ctx.$attrs), {
icon: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon", {}, () => [
!_ctx.$slots.default && !_ctx.$slots.icon ? (vue.openBlock(), vue.createBlock(_component_hl_icon, { key: 0 }, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_search)
]),
_: 1
})) : vue.createCommentVNode("v-if", true)
])
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default"),
vue.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: vue.withCtx(() => [
vue.createVNode(_component_hl_panel, {
"body-padding": "var(--xl)",
style: vue.normalizeStyle({ height: _ctx.maxHeight, "--data-filter-panel-width": typeof _ctx.width === "number" ? _ctx.width + "px" : _ctx.width }),
"full-body": ""
}, {
header: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("h4", null, vue.toDisplayString(_ctx.title), 1)
])
]),
footer: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "footer", {}, () => [
vue.createVNode(_component_hl_button, {
type: "primary",
onClick: _ctx.search
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.searchLabel), 1)
]),
_: 1
}, 8, ["onClick"])
])
]),
default: vue.withCtx(() => [
vue.createVNode(_component_hl_scrollbar, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_form, {
"label-suffix": "\uFF1A",
"item-gap": _ctx.itemGap,
gap: _ctx.gap,
style: { "padding": "var(--panel-padding)" }
}, {
default: vue.withCtx(() => [
_ctx.displayItems.length && _ctx.selectedSectionOpt.show ? (vue.openBlock(), vue.createBlock(_component_hl_form_item, {
key: 0,
class: vue.normalizeClass({ "no-selected-items": !_ctx.displayItems.length })
}, {
label: vue.withCtx(() => [
_hoisted_2
]),
default: vue.withCtx(() => [
vue.createVNode(_component_hl_group, {
wrap: "",
gap: "var(--sm)",
class: "selected-items"
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.displayItems, (item) => {
return vue.openBlock(), vue.createBlock(_component_hl_tag, {
key: item.name,
type: "primary",
class: "selected-item-tag",
closable: _ctx.selectedSectionOpt.closable,
onClose: ($event) => _ctx.removeDisplayItem(item)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.display), 1)
]),
_: 2
}, 1032, ["closable", "onClose"]);
}), 128))
]),
_: 1
})
]),
_: 1
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.searchItems, (item) => {
return vue.openBlock(), vue.createBlock(_component_hl_form_item, {
key: item.name,
label: item.label
}, {
default: vue.withCtx(() => [
item.type === "timepicker" ? (vue.openBlock(), vue.createBlock(_component_hl_time_picker, vue.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) ? (vue.openBlock(), vue.createBlock(_component_hl_date_picker, vue.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" ? (vue.openBlock(), vue.createBlock(_component_hl_select, vue.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: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.options, (opt) => {
return vue.openBlock(), vue.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" ? vue.renderSlot(_ctx.$slots, item.slotName, {
key: 3,
value: item.value,
item
}) : item.type === "input" || !item.type ? (vue.openBlock(), vue.createBlock(_component_hl_input, vue.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"])) : vue.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__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = DataFilter;
//# sourceMappingURL=index.js.map