hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
318 lines (315 loc) • 12.4 kB
JavaScript
import { defineComponent, ref, computed, watch, nextTick, onMounted, onUnmounted, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, mergeProps, renderSlot, createCommentVNode, withDirectives, vShow } from 'vue';
import { cloneDeep, throttle } from 'lodash-unified';
import { HlGroup, HlInput, HlCollapseTransition, HlRow, HlCol, HlSelect, HlOption, HlDatePicker, HlTimePicker, HlButton, HlIcon, SystemSearch, SystemArrowDown } from 'hongluan-ui';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
const _sfc_main = defineComponent({
name: "TableSearchbar",
components: { HlGroup, HlInput, HlCollapseTransition, HlRow, HlCol, HlSelect, HlOption, HlDatePicker, HlTimePicker, HlButton, HlIcon, SystemSearch, 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 = ref(cloneDeep(props.selector.items));
const searchValue = ref("");
const showMore = ref(false);
const hasMoreButton = ref(false);
const hlRow = ref(null);
const colCount = 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();
};
watch(() => {
var _a;
return (_a = props.selector.items) == null ? void 0 : _a.length;
}, () => {
searchItems.value = cloneDeep(props.selector.items);
nextTick(() => {
resizeFunc();
});
});
let resizeFunc = throttle(setMoreButton, 300);
onMounted(() => {
setMoreButton();
window.addEventListener("resize", resizeFunc);
});
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 = resolveComponent("hl-time-picker");
const _component_hl_date_picker = resolveComponent("hl-date-picker");
const _component_hl_input = resolveComponent("hl-input");
const _component_hl_option = resolveComponent("hl-option");
const _component_hl_select = resolveComponent("hl-select");
const _component_hl_col = resolveComponent("hl-col");
const _component_hl_row = resolveComponent("hl-row");
const _component_hl_collapse_transition = resolveComponent("hl-collapse-transition");
const _component_system_arrow_down = resolveComponent("system-arrow-down");
const _component_hl_icon = resolveComponent("hl-icon");
const _component_hl_button = resolveComponent("hl-button");
const _component_hl_group = resolveComponent("hl-group");
const _component_system_search = resolveComponent("system-search");
return openBlock(), createBlock(_component_hl_group, {
full: "full-x",
align: "top between",
gap: _ctx.gap,
class: "hb-table-searchbar",
style: normalizeStyle(_ctx.padding ? `--search-bar-padding: ${_ctx.padding}` : "")
}, {
default: withCtx(() => [
createVNode(_component_hl_collapse_transition, null, {
default: withCtx(() => [
createVNode(_component_hl_row, {
ref: "hlRow",
layout: "grid",
gap: _ctx.gap,
direction: "vertical",
count: _ctx.colCount,
class: normalizeClass([
"searchbar-collapse",
{ "opened": _ctx.showMore }
])
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.searchItems, (item) => {
return openBlock(), createBlock(_component_hl_col, {
key: item.name,
class: "col",
span: item.span
}, {
default: withCtx(() => [
item.type === "timepicker" ? (openBlock(), createBlock(_component_hl_time_picker, 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) ? (openBlock(), createBlock(_component_hl_date_picker, 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" ? (openBlock(), createBlock(_component_hl_input, 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" ? renderSlot(_ctx.$slots, item.slotName, {
key: 3,
value: item.value,
item
}) : item.type === "select" || !item.type ? (openBlock(), createBlock(_component_hl_select, mergeProps({
key: 4,
modelValue: item.value,
"onUpdate:modelValue": ($event) => item.value = $event,
block: "",
clearable: ""
}, _ctx.getSelectProps(item), { onChange: _ctx.changeValue }), {
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", "onChange"])) : createCommentVNode("v-if", true)
]),
_: 2
}, 1032, ["span"]);
}), 128))
]),
_: 3
}, 8, ["gap", "count", "class"])
]),
_: 3
}),
withDirectives(createVNode(_component_hl_group, { class: "static" }, {
default: withCtx(() => [
createVNode(_component_hl_button, {
equal: "",
onClick: _ctx.toggle
}, {
default: withCtx(() => [
createVNode(_component_hl_icon, {
class: normalizeClass({ more: _ctx.showMore })
}, {
default: withCtx(() => [
createVNode(_component_system_arrow_down)
]),
_: 1
}, 8, ["class"])
]),
_: 1
}, 8, ["onClick"])
]),
_: 1
}, 512), [
[vShow, _ctx.hasMoreButton]
]),
createVNode(_component_hl_group, { style: { "flex-basis": "10%" } }),
renderSlot(_ctx.$slots, "prefix"),
createVNode(_component_hl_group, {
class: "static",
merge: "",
indent: ""
}, {
default: withCtx(() => [
("show" in _ctx.searcher ? _ctx.searcher.show : true) ? (openBlock(), createBlock(_component_hl_input, 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: withCtx(() => [
createVNode(_component_hl_icon, null, {
default: withCtx(() => [
createVNode(_component_system_search)
]),
_: 1
})
]),
_: 1
}, 16, ["modelValue", "onChange"])) : createCommentVNode("v-if", true)
]),
_: 1
}),
renderSlot(_ctx.$slots, "suffix")
]),
_: 3
}, 8, ["gap", "style"]);
}
var TableSearchbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { TableSearchbar as default };
//# sourceMappingURL=index.mjs.map