@oiij/naive-ui
Version:
Some Composable Functions And Components for Vue 3
213 lines (211 loc) • 8.53 kB
JavaScript
import MageMultiplyCircleFill_default from "../icons/MageMultiplyCircleFill.js";
import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, reactive, ref, renderSlot, toDisplayString, toRaw, toValue, unref, watch, withCtx, withModifiers } from "vue";
import { NBadge, NButton, NButtonGroup, NModal, NTooltip } from "naive-ui";
import { cloneDeep } from "es-toolkit/object";
//#region src/components/preset-picker/PresetPicker.vue
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "PresetPicker",
props: {
value: {},
fallbackLabel: { type: [String, Function] },
multiple: { type: Boolean },
disabled: { type: Boolean },
clearable: { type: Boolean },
tooltip: {
type: Boolean,
default: true
},
placeholder: { default: "请选择" },
type: {},
columns: {},
selectionOptions: {},
fields: {},
buttonProps: {},
clearButtonProps: {},
badgeProps: {},
modalProps: {}
},
emits: [
"update:value",
"afterEnter",
"afterLeave",
"esc",
"maskClick",
"update:show",
"close",
"negativeClick",
"positiveClick"
],
setup(__props, { expose: __expose, emit: __emit }) {
const emit = __emit;
const _fields = {
label: "label",
value: "value",
...__props.fields
};
const checkedRowKeys = ref([]);
const checkedRows = ref([]);
const selectionColumn = reactive({
type: "selection",
multiple: __props.multiple,
width: 60,
fixed: "left",
...__props.selectionOptions
});
watch(() => __props.multiple, () => {
selectionColumn.multiple = __props.multiple;
});
const _columns = reactive([selectionColumn, ...__props.columns ?? []]);
const showModalFlag = ref(false);
function showModal() {
checkedRowKeys.value = cloneDeep(Array.isArray(__props.value) ? __props.value : __props.value ? [__props.value] : []);
showModalFlag.value = true;
}
function clickRowEffect(row) {
if (__props.multiple) if (checkedRowKeys.value.includes(row?.[_fields.value])) {
checkedRowKeys.value = checkedRowKeys.value.filter((f) => f !== row?.[_fields.value]);
checkedRows.value = checkedRows.value.filter((f) => f?.[_fields.value] !== row?.[_fields.value]);
} else {
checkedRowKeys.value.push(row?.[_fields.value]);
checkedRows.value.push(row);
}
else {
checkedRowKeys.value = [row?.[_fields.value]];
checkedRows.value = [row];
}
}
function updateCheckedRowKeysEffect(keys, rows, meta, currentData) {
if (meta.action === "checkAll") {
const allKeys = keys.filter((f) => !checkedRowKeys.value.includes(f));
checkedRowKeys.value.push(...allKeys);
const allRows = rows.filter((f) => !checkedRows.value.some((s) => s?.[_fields.value] === f?.[_fields.value]));
checkedRows.value.push(...allRows);
return;
}
if (meta.action === "uncheckAll") {
checkedRowKeys.value = checkedRowKeys.value.filter((f) => !currentData?.some((s) => s?.[_fields.value] === f));
checkedRows.value = checkedRows.value.filter((f) => !currentData?.some((s) => s?.[_fields.value] === f?.[_fields.value]));
}
}
function onNegativeClick() {
emit("negativeClick");
showModalFlag.value = false;
}
function onPositiveClick() {
emit("positiveClick");
if (__props.multiple) {
const keys = toRaw(toValue(checkedRowKeys));
emit("update:value", keys, keys.map((m) => toRaw(toValue(checkedRows.value.find((f) => f?.[_fields.value] === m)))));
} else {
const key = checkedRowKeys.value[0] ?? null;
emit("update:value", key, toRaw(toValue(checkedRows.value.find((f) => f?.[_fields.value] === key))));
}
showModalFlag.value = false;
}
function clearValue() {
emit("update:value", null, null);
}
const _label = computed(() => {
if (Array.isArray(__props.value) && __props.value.length > 0) return typeof __props.fallbackLabel === "string" ? __props.fallbackLabel : __props.value.map((m) => {
const item = checkedRows.value.find((f) => f?.[_fields.value] === m);
return item && item?.[_fields.label] ? item[_fields.label] : typeof __props.fallbackLabel === "function" ? __props.fallbackLabel(m) : m;
}).join(",");
if (__props.value && !Array.isArray(__props.value)) {
const item = checkedRows.value.find((f) => f?.[_fields.value] === __props.value);
return item && item?.[_fields.label] ? item?.[_fields.label] : typeof __props.fallbackLabel === "function" ? __props.fallbackLabel(__props.value) : __props.fallbackLabel ?? __props.value;
}
return __props.placeholder;
});
const showClearButton = computed(() => {
return __props.clearable && (Array.isArray(__props.value) ? __props.value.length > 0 : !!__props.value);
});
const checkedCount = computed(() => Array.isArray(__props.value) ? __props.value.length : void 0);
const expose = {
showModalFlag,
checkedRowKeys,
checkedRows,
columns: _columns,
showModal,
updateCheckedRowKeysEffect,
clickRowEffect,
clearValue,
setCheckedRowKeys: (keys) => {
checkedRowKeys.value = keys;
},
setCheckedRows: (rows) => {
checkedRows.value = rows;
}
};
const templateBind = computed(() => {
return {
...expose,
showModalFlag: toValue(showModalFlag),
checkedRowKeys: toValue(checkedRowKeys),
checkedRows: toValue(checkedRows),
columns: toValue(_columns)
};
});
__expose(expose);
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(NBadge), mergeProps({ value: checkedCount.value }, __props.badgeProps), {
default: withCtx(() => [createVNode(unref(NButtonGroup), null, {
default: withCtx(() => [
createVNode(unref(NTooltip), {
disabled: !__props.tooltip || !Array.isArray(__props.value) ? true : false,
trigger: Array.isArray(__props.value) ? "hover" : "manual"
}, {
trigger: withCtx(() => [createVNode(unref(NButton), mergeProps({
type: __props.type,
disabled: __props.disabled
}, __props.buttonProps, { onClick: showModal }), {
icon: withCtx(() => [renderSlot(_ctx.$slots, "button-icon")]),
default: withCtx(() => [renderSlot(_ctx.$slots, "button", {}, () => [createElementVNode("span", null, toDisplayString(Array.isArray(__props.value) ? "已选择" : _label.value), 1)])]),
_: 3
}, 16, ["type", "disabled"])]),
default: withCtx(() => [createElementVNode("div", null, toDisplayString(Array.isArray(__props.value) ? _label.value : ""), 1)]),
_: 3
}, 8, ["disabled", "trigger"]),
renderSlot(_ctx.$slots, "clear-button", {}, () => [showClearButton.value ? (openBlock(), createBlock(unref(NButton), mergeProps({
key: 0,
circle: "",
type: __props.type
}, __props.clearButtonProps, { onClick: withModifiers(clearValue, ["stop"]) }), {
icon: withCtx(() => [renderSlot(_ctx.$slots, "clear-icon", {}, () => [createVNode(MageMultiplyCircleFill_default)])]),
_: 3
}, 16, ["type"])) : createCommentVNode("v-if", true)]),
createVNode(unref(NModal), mergeProps({
show: showModalFlag.value,
"onUpdate:show": _cache[0] || (_cache[0] = ($event) => showModalFlag.value = $event),
style: { "width": "auto" },
preset: "dialog",
title: __props.placeholder,
"positive-text": "确认",
"negative-text": "取消"
}, __props.modalProps, {
onPositiveClick,
onNegativeClick,
onClose: _cache[1] || (_cache[1] = ($event) => emit("close")),
onAfterEnter: _cache[2] || (_cache[2] = ($event) => emit("afterEnter")),
onAfterLeave: _cache[3] || (_cache[3] = ($event) => emit("afterLeave")),
onEsc: _cache[4] || (_cache[4] = ($event) => emit("esc")),
onMaskClick: _cache[5] || (_cache[5] = ($event) => emit("maskClick")),
"onUpdate:show": _cache[6] || (_cache[6] = (val) => emit("update:show", val))
}), {
action: withCtx(() => [renderSlot(_ctx.$slots, "modal-action")]),
header: withCtx(() => [renderSlot(_ctx.$slots, "modal-header")]),
icon: withCtx(() => [renderSlot(_ctx.$slots, "modal-icon")]),
close: withCtx(() => [renderSlot(_ctx.$slots, "modal-close")]),
default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(templateBind.value)))]),
_: 3
}, 16, ["show", "title"])
]),
_: 3
})]),
_: 3
}, 16, ["value"]);
};
}
});
var PresetPicker_default = _sfc_main;
//#endregion
export { PresetPicker_default as default };