hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
322 lines (317 loc) • 12.8 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
var hongluanUi = require('hongluan-ui');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = vue.defineComponent({
name: "TableSearchbar",
components: { HlGroup: hongluanUi.HlGroup, HlInput: hongluanUi.HlInput, HlCollapseTransition: hongluanUi.HlCollapseTransition, HlRow: hongluanUi.HlRow, HlCol: hongluanUi.HlCol, HlSelect: hongluanUi.HlSelect, HlOption: hongluanUi.HlOption, HlDatePicker: hongluanUi.HlDatePicker, HlTimePicker: hongluanUi.HlTimePicker, HlButton: hongluanUi.HlButton, HlIcon: hongluanUi.HlIcon, SystemSearch: hongluanUi.SystemSearch, SystemArrowDown: hongluanUi.SystemArrowDown },
props: {
fill: {
type: Boolean,
default: false
},
searcher: {
type: Object,
default: () => ({})
},
selector: {
type: Object,
default: () => ({
items: []
})
},
padding: {
type: String,
default: ""
},
gap: {
type: String,
default: ""
}
},
emits: ["change"],
setup(props, { emit }) {
const searchItems = vue.ref(lodashUnified.cloneDeep(props.selector.items));
const searchValue = vue.ref("");
const showMore = vue.ref(false);
const hasMoreButton = vue.ref(false);
const hlRow = vue.ref(null);
const colCount = vue.computed(() => {
return props.selector.colCount || "xl:count-3 lg:count-2 md:count-1";
});
const getKey = (item, opt) => {
return item.prop ? opt[item.prop.value] : opt.value;
};
const getLabel = (item, opt) => {
return item.prop ? opt[item.prop.label] : opt.label;
};
const isDatePicker = (type) => {
return "year/month/date/dates/week/datetime/datetimerange/daterange/monthrange".indexOf(type) !== -1;
};
const toggle = () => {
showMore.value = !showMore.value;
};
const setMoreButton = () => {
if (searchItems.value.length) {
if (showMore.value) {
hasMoreButton.value = hlRow.value.$el.getBoundingClientRect().height > hlRow.value.$el.querySelector(".col").getBoundingClientRect().height;
} else {
hasMoreButton.value = hlRow.value.$el.scrollHeight > hlRow.value.$el.getBoundingClientRect().height;
}
} else {
hasMoreButton.value = false;
}
};
const getDateTimeProps = (item) => {
const { span: _, value: __, ...others } = item;
return others;
};
const getInputProps = (item) => {
const { span: _, value: __, ...others } = item;
return others;
};
const getSelectProps = (item) => {
const { options: _, value: __, prop: ___, ...others } = item;
return others;
};
const changeValue = () => {
const mapParams = {};
const originalParams = {};
mapParams[props.searcher.name || "search"] = searchValue.value;
originalParams[props.searcher.name || "search"] = searchValue.value;
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("change", urlParams, mapParams, originalParams);
};
const resetFields = (names = []) => {
searchItems.value.forEach((_, idx) => {
if (names.length) {
if (names.includes(searchItems.value[idx].name)) {
searchItems.value[idx].value = props.selector.items[idx].value;
}
} else {
searchItems.value[idx].value = props.selector.items[idx].value;
}
});
if (names.length) {
names.includes("searcher") && (searchValue.value = "");
} else {
searchValue.value = "";
}
changeValue();
};
vue.watch(() => {
var _a;
return (_a = props.selector.items) == null ? void 0 : _a.length;
}, () => {
searchItems.value = lodashUnified.cloneDeep(props.selector.items);
vue.nextTick(() => {
resizeFunc();
});
});
let resizeFunc = lodashUnified.throttle(setMoreButton, 300);
vue.onMounted(() => {
setMoreButton();
window.addEventListener("resize", resizeFunc);
});
vue.onUnmounted(() => {
window.removeEventListener("resize", resizeFunc);
resizeFunc = null;
});
return {
colCount,
hasMoreButton,
hlRow,
showMore,
toggle,
searchValue,
searchItems,
getKey,
getLabel,
isDatePicker,
changeValue,
getDateTimeProps,
getInputProps,
getSelectProps,
resetFields
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hl_time_picker = vue.resolveComponent("hl-time-picker");
const _component_hl_date_picker = vue.resolveComponent("hl-date-picker");
const _component_hl_input = vue.resolveComponent("hl-input");
const _component_hl_option = vue.resolveComponent("hl-option");
const _component_hl_select = vue.resolveComponent("hl-select");
const _component_hl_col = vue.resolveComponent("hl-col");
const _component_hl_row = vue.resolveComponent("hl-row");
const _component_hl_collapse_transition = vue.resolveComponent("hl-collapse-transition");
const _component_system_arrow_down = vue.resolveComponent("system-arrow-down");
const _component_hl_icon = vue.resolveComponent("hl-icon");
const _component_hl_button = vue.resolveComponent("hl-button");
const _component_hl_group = vue.resolveComponent("hl-group");
const _component_system_search = vue.resolveComponent("system-search");
return vue.openBlock(), vue.createBlock(_component_hl_group, {
full: "full-x",
align: "top between",
gap: _ctx.gap,
class: "hb-table-searchbar",
style: vue.normalizeStyle(_ctx.padding ? `--search-bar-padding: ${_ctx.padding}` : "")
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_collapse_transition, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_row, {
ref: "hlRow",
layout: "grid",
gap: _ctx.gap,
direction: "vertical",
count: _ctx.colCount,
class: vue.normalizeClass([
"searchbar-collapse",
{ "opened": _ctx.showMore }
])
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.searchItems, (item) => {
return vue.openBlock(), vue.createBlock(_component_hl_col, {
key: item.name,
class: "col",
span: item.span
}, {
default: vue.withCtx(() => [
item.type === "timepicker" ? (vue.openBlock(), vue.createBlock(_component_hl_time_picker, vue.mergeProps({
key: 0,
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
block: "",
clearable: ""
}, _ctx.getDateTimeProps(item), { onChange: _ctx.changeValue }), null, 16, ["modelValue", "onUpdate:modelValue", "onChange"])) : _ctx.isDatePicker(item.type) ? (vue.openBlock(), vue.createBlock(_component_hl_date_picker, vue.mergeProps({
key: 1,
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
type: "item.type",
block: "",
clearable: ""
}, _ctx.getDateTimeProps(item), { onChange: _ctx.changeValue }), null, 16, ["modelValue", "onUpdate:modelValue", "onChange"])) : item.type === "input" ? (vue.openBlock(), vue.createBlock(_component_hl_input, vue.mergeProps({
key: 2,
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
block: "",
clearable: ""
}, _ctx.getInputProps(item), { onChange: _ctx.changeValue }), null, 16, ["modelValue", "onUpdate:modelValue", "onChange"])) : item.type === "slot" ? vue.renderSlot(_ctx.$slots, item.slotName, {
key: 3,
value: item.value,
item
}) : item.type === "select" || !item.type ? (vue.openBlock(), vue.createBlock(_component_hl_select, vue.mergeProps({
key: 4,
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
block: "",
clearable: ""
}, _ctx.getSelectProps(item), { onChange: _ctx.changeValue }), {
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", "onChange"])) : vue.createCommentVNode("v-if", true)
]),
_: 2
}, 1032, ["span"]);
}), 128))
]),
_: 3
}, 8, ["gap", "count", "class"])
]),
_: 3
}),
vue.withDirectives(vue.createVNode(_component_hl_group, { class: "static" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_button, {
equal: "",
onClick: _ctx.toggle
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_icon, {
class: vue.normalizeClass({ more: _ctx.showMore })
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_arrow_down)
]),
_: 1
}, 8, ["class"])
]),
_: 1
}, 8, ["onClick"])
]),
_: 1
}, 512), [
[vue.vShow, _ctx.hasMoreButton]
]),
vue.createVNode(_component_hl_group, { style: { "flex-basis": "10%" } }),
vue.renderSlot(_ctx.$slots, "prefix"),
vue.createVNode(_component_hl_group, {
class: "static",
merge: "",
indent: ""
}, {
default: vue.withCtx(() => [
("show" in _ctx.searcher ? _ctx.searcher.show : true) ? (vue.openBlock(), vue.createBlock(_component_hl_input, vue.mergeProps({
key: 0,
modelValue: _ctx.searchValue,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.searchValue = $event)
}, _ctx.searcher, {
class: "input-search",
block: "",
onChange: _ctx.changeValue
}), {
suffix: vue.withCtx(() => [
vue.createVNode(_component_hl_icon, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_search)
]),
_: 1
})
]),
_: 1
}, 16, ["modelValue", "onChange"])) : vue.createCommentVNode("v-if", true)
]),
_: 1
}),
vue.renderSlot(_ctx.$slots, "suffix")
]),
_: 3
}, 8, ["gap", "style"]);
}
var TableSearchbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = TableSearchbar;
//# sourceMappingURL=index.js.map