@qin-ui/antd-vue-pro
Version:
1,317 lines • 50.6 kB
JavaScript
import "./antd-vue-pro.css";
import { defineComponent, computed, provide, renderSlot, inject, mergeProps, toValue, normalizeProps, guardReactiveProps, resolveComponent, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList, createVNode, createSlots, ref, useAttrs, createCommentVNode, resolveDynamicComponent, isVNode, createTextVNode, toDisplayString, useSlots, watchEffect, createElementVNode, watch, normalizeStyle, useModel, withModifiers, mergeModels, onMounted, normalizeClass, nextTick } from "vue";
import { InjectionPathKey, isPlainObject, getObject, toPath, useForm as useForm$1, omit, cloneDeep, InjectionFormKey, camelizeProperties, useFields as useFields$1, useFormRef as useFormRef$1, pick, useTable as useTable$1 } from "@qin-ui/pro-components-core";
import { useFormData } from "@qin-ui/pro-components-core";
import { Transfer, TreeSelect, Slider, Switch, RadioGroup, CheckboxGroup, TimePicker, RangePicker, DatePicker, Cascader, Select, InputNumber, InputPassword, InputSearch, Textarea, Input, Row, Col, FormItem, Form, Space, Button, theme, Dropdown, Menu, MenuItem, Checkbox, MenuDivider, Table } from "ant-design-vue";
import { formItemProps, useInjectFormItemContext } from "ant-design-vue/es/form";
import { colProps } from "ant-design-vue/es/grid/Col";
import { useProviderDisabled, useInjectDisabled } from "ant-design-vue/es/config-provider/DisabledContext";
import { useConfigContextInject } from "ant-design-vue/es/config-provider/context";
import { tableProps } from "ant-design-vue/es/table";
const getPopupContainer = (triggerNode) => triggerNode.closest("form[class*='-form']");
const INJECT_COMPONENTS = Symbol("INJECT_COMPONENTS");
const INJECT_CONFIG = {
"pro-table": {
injectionKey: Symbol(""),
default: {
pagination: {
showTotal: (total) => `共 ${total} 条`,
showSizeChanger: true,
pageSizeOptions: ["10", "20", "30", "40", "50", "100"],
showQuickJumper: true
},
searchFormConfig: {
layout: "grid",
expand: { minExpandRows: 2, expandStatus: false }
},
control: true,
addIndexColumn: true
}
},
"pro-form": {
injectionKey: Symbol(""),
default: { grid: { gutter: { xs: 8, sm: 16, md: 16, lg: 24 } } }
},
"pro-form-item": {
injectionKey: Symbol(""),
default: { validateFirst: true, span: 8 }
},
// field
input: {
injectionKey: Symbol(""),
default: { maxlength: 100, allowClear: true, placeholder: "请输入" }
},
textarea: {
injectionKey: Symbol(""),
default: {
maxlength: 200,
autoSize: { minRows: 3, maxRows: 6 },
showCount: true,
allowClear: true,
placeholder: "请输入"
}
},
"input-password": {
injectionKey: Symbol(""),
default: { maxlength: 100, allowClear: true, placeholder: "请输入" }
},
"input-search": {
injectionKey: Symbol(""),
default: {}
},
"input-number": {
injectionKey: Symbol(""),
default: {
max: 10 ** 15 - 1,
min: -1000000000000001,
controls: false,
placeholder: "请输入",
style: { width: "100%" }
}
},
select: {
injectionKey: Symbol(""),
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
},
cascader: {
injectionKey: Symbol(""),
default: { allowClear: true, placeholder: "请选择", getPopupContainer }
},
"date-picker": {
injectionKey: Symbol(""),
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
},
"date-picker.date": {
injectionKey: Symbol(""),
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
},
"date-picker.week": {
injectionKey: Symbol(""),
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
},
"date-picker.month": {
injectionKey: Symbol(""),
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
},
"date-picker.year": {
injectionKey: Symbol(""),
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
},
"date-picker.quarter": {
injectionKey: Symbol(""),
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
},
"range-picker": {
injectionKey: Symbol(""),
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
},
"time-picker": {
injectionKey: Symbol(""),
default: { allowClear: true, getPopupContainer, style: { width: "100%" } }
},
"checkbox-group": {
injectionKey: Symbol(""),
default: {}
},
"radio-group": {
injectionKey: Symbol(""),
default: {}
},
switch: {
injectionKey: Symbol(""),
default: { modelProp: "checked" }
},
slider: {
injectionKey: Symbol(""),
default: {}
},
"tree-select": {
injectionKey: Symbol(""),
default: {}
},
transfer: {
injectionKey: Symbol(""),
default: {}
}
};
const DYNAMIC_INJECT_CONFIG = /* @__PURE__ */ Object.create(null);
const getInjectConfig = (key) => {
return INJECT_CONFIG[key] || DYNAMIC_INJECT_CONFIG[key];
};
const ensureInjectConfig = (key) => {
const existing = getInjectConfig(key);
if (existing) return existing;
const created = {
injectionKey: Symbol(`dynamic:${key}`),
default: {}
};
DYNAMIC_INJECT_CONFIG[key] = created;
return created;
};
const FORM_ITEM_SLOT_KEYS = [
"label",
"extra",
"help",
"tooltip"
];
const componentMap = {
"input": Input,
"textarea": Textarea,
"input-search": InputSearch,
"input-password": InputPassword,
"input-number": InputNumber,
"select": Select,
"cascader": Cascader,
"date-picker": DatePicker,
"range-picker": RangePicker,
"time-picker": TimePicker,
"checkbox-group": CheckboxGroup,
"radio-group": RadioGroup,
"switch": Switch,
"slider": Slider,
"tree-select": TreeSelect,
"transfer": Transfer
};
const TeleportComponentNamePrefix = "TeleportComponent_";
const _sfc_main$g = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
path: {}
},
setup(__props) {
const props = __props;
const namePath = computed(() => {
return Array.isArray(props.path) ? props.path.join(".") : props.path;
});
provide(InjectionPathKey, namePath);
return (_ctx, _cache) => {
return renderSlot(_ctx.$slots, "default", { path: namePath.value });
};
}
});
const _sfc_main$f = /* @__PURE__ */ defineComponent({
__name: "index",
props: {
field: {}
},
setup(__props) {
const formItemPropKeys = Object.keys(formItemProps()).concat([
"formItemContainer"
]);
const gridItemPropKeys = Object.keys(colProps());
const props = __props;
const config = INJECT_CONFIG["pro-form-item"];
const injectFormItemProps = inject(config.injectionKey, config.default);
const groupedAttributes = computed(() => {
let gridItemProps2 = {};
let formItemProps2 = {};
const componentProps = { slots: {} };
const formItemSlots = {};
if (isPlainObject(props.field)) {
const { path, name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } = props.field;
const {
class: injectClassName,
style: injectStyle,
span: injectSpan,
xs,
sm,
md,
lg,
xl,
xxl,
...injectRest
} = injectFormItemProps;
const initGridItemProps = span || span === 0 ? { span } : { xs, sm, md, lg, xl, xxl, span: injectSpan };
gridItemProps2 = fields ? { span: span ?? 24 } : initGridItemProps;
formItemProps2 = mergeProps(
injectRest,
{ class: injectClassName, style: injectStyle },
{ class: toValue(formItemClass), style: toValue(formItemStyle) },
formItemDataAttrs
);
Object.keys(rest).forEach((k) => {
if (gridItemPropKeys.includes(k)) {
gridItemProps2[k] = rest[k];
} else if (formItemPropKeys.includes(k)) {
formItemProps2[k] = rest[k];
} else {
componentProps[k] = rest[k];
}
});
Object.assign(componentProps, componentDataAttrs);
Object.keys(slots).forEach((k) => {
if (FORM_ITEM_SLOT_KEYS.includes(k)) {
formItemSlots[k] = slots[k];
} else {
componentProps["slots"][k] = slots[k];
}
});
}
return { gridItemProps: gridItemProps2, formItemProps: formItemProps2, componentProps, formItemSlots };
});
return (_ctx, _cache) => {
return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(groupedAttributes.value)));
};
}
});
const _sfc_main$e = /* @__PURE__ */ defineComponent({
...{ name: "BaseFormItem", inheritAttrs: false },
__name: "index",
props: {
grid: { type: [Boolean, Object], default: () => void 0 },
fields: { default: () => [] },
disabled: { type: Boolean, default: () => void 0 }
},
setup(__props) {
const validFields = computed(() => {
var _a, _b;
return (_b = (_a = __props.fields).filter) == null ? void 0 : _b.call(_a, (field) => !field.hidden);
});
useProviderDisabled(computed(() => __props.disabled));
const config = INJECT_CONFIG["pro-form"];
const { grid: injectGrid } = inject(config.injectionKey, config.default);
const enableGrid = computed(() => {
if (__props.grid !== void 0) return !!__props.grid;
return !!injectGrid;
});
const computedGridProps = computed(() => {
return enableGrid.value ? { ...getObject(injectGrid), ...getObject(__props.grid) } : {};
});
const formItemRefs = [];
const componentRefs = [];
const onFormItemMounted = (index2, formItemProps2) => {
const field = validFields.value[index2];
Object.assign(field, {
getFormItemRef: () => formItemRefs[index2],
getFormItemComputedProps: () => formItemProps2
});
};
const onComponentMounted = (index2) => {
const field = validFields.value[index2];
Object.assign(field, {
getComponentRef: () => {
var _a;
return (_a = componentRefs[index2]) == null ? void 0 : _a.getComponentRef();
},
getComponentComputedProps: () => {
var _a;
return (_a = componentRefs[index2]) == null ? void 0 : _a.getComponentComputedProps();
}
});
};
return (_ctx, _cache) => {
const _component_BaseFormItem = resolveComponent("BaseFormItem");
return openBlock(), createBlock(unref(_sfc_main$c), mergeProps({
component: enableGrid.value ? unref(Row) : void 0
}, computedGridProps.value), {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(validFields.value, ({ path: _path, name: _name, ...field }, index2) => {
return openBlock(), createBlock(_sfc_main$g, mergeProps({
key: unref(toPath)(toValue(_name ?? _path)).join(".") || index2
}, { ref_for: true }, { path: _name ?? _path }), {
default: withCtx(({ path }) => [
createVNode(_sfc_main$f, { field }, {
default: withCtx(({
gridItemProps,
formItemProps: { formItemContainer, ...formItemProps2 },
componentProps,
formItemSlots
}) => [
createVNode(unref(_sfc_main$c), mergeProps({
component: enableGrid.value ? unref(Col) : void 0
}, { ref_for: true }, gridItemProps), {
default: withCtx(() => [
createVNode(unref(_sfc_main$c), {
component: formItemContainer,
path
}, {
default: withCtx(() => [
createVNode(unref(FormItem), mergeProps({ ref_for: true }, formItemProps2, {
ref_for: true,
ref: (el) => formItemRefs[index2] = el,
name: unref(toPath)(path),
path,
onVnodeMounted: ($event) => onFormItemMounted(index2, formItemProps2)
}), createSlots({
default: withCtx(() => [
field.fields ? (openBlock(), createBlock(_component_BaseFormItem, {
key: 0,
grid: field.grid ?? __props.grid,
fields: field.fields,
disabled: toValue(field.disabled)
}, null, 8, ["grid", "fields", "disabled"])) : (openBlock(), createBlock(unref(_sfc_main$d), mergeProps({
key: 1,
ref_for: true,
ref: (el) => componentRefs[index2] = el
}, { ref_for: true }, componentProps, {
path,
onVnodeMounted: ($event) => onComponentMounted(index2)
}), null, 16, ["path", "onVnodeMounted"]))
]),
_: 2
}, [
renderList(formItemSlots, (slot, name) => {
return {
name,
fn: withCtx((scoped) => [
createVNode(unref(_sfc_main$b), mergeProps({
path,
component: slot
}, { ref_for: true }, scoped), null, 16, ["path", "component"])
])
};
})
]), 1040, ["name", "path", "onVnodeMounted"])
]),
_: 2
}, 1032, ["component", "path"])
]),
_: 2
}, 1040, ["component"])
]),
_: 2
}, 1032, ["field"])
]),
_: 2
}, 1040);
}), 128))
]),
_: 1
}, 16, ["component"]);
};
}
});
function useForm(...args) {
return useForm$1(...args);
}
const getInitProps = (field) => {
const { component } = field;
const picker = component === "date-picker" ? "" : field.picker;
if (typeof component === "string") {
const k = [component, picker].filter(Boolean).join(".");
const config = getInjectConfig(k);
if (!config) return {};
const injectProps = inject(config.injectionKey, config.default);
return injectProps;
}
return {};
};
const _sfc_main$d = /* @__PURE__ */ defineComponent({
...{ name: "BaseField", inheritAttrs: false },
__name: "index",
props: {
component: { default: () => void 0 },
path: { default: "" }
},
setup(__props, { expose: __expose }) {
const form = useForm(false);
const { getFormData, setFormData } = form;
const componentRef = ref();
const formItemContext = useInjectFormItemContext();
const triggerFormItemChange = () => {
formItemContext.onFieldChange();
};
const attrs = useAttrs();
function getOldValue() {
return cloneDeep(getFormData == null ? void 0 : getFormData(__props.path));
}
const value = computed({
get() {
let val = getFormData == null ? void 0 : getFormData(__props.path);
const { valueFormatter } = groupedAttrs.value;
if (typeof valueFormatter === "object" && typeof valueFormatter.get === "function") {
val = valueFormatter.get(val);
}
return val;
},
set(val) {
let newVal = val;
const { valueFormatter } = groupedAttrs.value;
if (valueFormatter) {
if (typeof valueFormatter === "function") {
newVal = valueFormatter(val, getOldValue());
} else if (typeof valueFormatter.set === "function") {
newVal = valueFormatter.set(val, getOldValue());
}
}
setFormData == null ? void 0 : setFormData(__props.path, newVal);
triggerFormItemChange();
}
});
const parentDisabled = useInjectDisabled();
const groupedAttrs = computed(() => {
const initProps = getInitProps({
component: __props.component,
picker: attrs.picker
});
const mergedProps = mergeProps(
initProps,
attrs,
{ class: attrs.componentClass, style: attrs.componentStyle },
{ class: initProps.componentClass, style: initProps.componentStyle },
{ disabled: attrs.disabled ?? parentDisabled.value ?? initProps.disabled },
{ modelProp: attrs.modelProp ?? initProps.modelProp ?? "value" }
);
const { valueFormatter, modelProp, slots, componentClass, componentStyle, componentContainer, ...rest } = mergedProps;
const bindAttrs = omit(rest, [modelProp, `onUpdate:${modelProp}`]);
return {
attrs: bindAttrs,
slots,
componentContainer,
modelProp,
valueFormatter
};
});
const teleportComponent = inject(
`${TeleportComponentNamePrefix}${__props.path}`,
void 0
);
const customComponents = inject(INJECT_COMPONENTS, {});
const is = computed(() => {
if (teleportComponent) return teleportComponent;
if (typeof __props.component === "string") {
return customComponents[__props.component] || componentMap[__props.component] || __props.component;
}
return __props.component;
});
__expose({
getComponentRef: () => componentRef.value,
getComponentComputedProps: () => groupedAttrs.value.attrs
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(_sfc_main$c), {
component: groupedAttrs.value.componentContainer,
path: __props.path
}, {
default: withCtx(() => [
is.value ? (openBlock(), createBlock(resolveDynamicComponent(is.value), mergeProps({ key: 0 }, groupedAttrs.value.attrs, {
ref_key: "componentRef",
ref: componentRef,
[`${groupedAttrs.value.modelProp}`]: value.value,
[`onUpdate:${groupedAttrs.value.modelProp}`]: _cache[0] || (_cache[0] = ($event) => value.value = $event),
path: __props.path
}), createSlots({ _: 2 }, [
renderList(groupedAttrs.value.slots, (slot, name) => {
return {
name,
fn: withCtx((scoped) => [
createVNode(unref(_sfc_main$b), mergeProps({ path: __props.path }, scoped, { component: slot }), null, 16, ["path", "component"])
])
};
})
]), 1040, ["path"])) : createCommentVNode("", true)
]),
_: 1
}, 8, ["component", "path"]);
};
}
});
const _sfc_main$c = /* @__PURE__ */ defineComponent({
...{ name: "ContainerFragment", inheritAttrs: false },
__name: "index",
props: {
component: { type: [Object, Function] }
},
setup(__props) {
return (_ctx, _cache) => {
return __props.component ? (openBlock(), createBlock(resolveDynamicComponent(__props.component), normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16)) : renderSlot(_ctx.$slots, "default", { key: 1 });
};
}
});
const _sfc_main$b = /* @__PURE__ */ defineComponent({
...{ name: "SlotComponent", inheritAttrs: false },
__name: "index",
props: {
component: { type: [Object, Function, String, Number, Boolean, null] }
},
setup(__props) {
return (_ctx, _cache) => {
return isVNode(__props.component) || typeof __props.component === "function" ? (openBlock(), createBlock(resolveDynamicComponent(__props.component), normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), null, 16)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createTextVNode(toDisplayString(__props.component), 1)
], 64));
};
}
});
const _sfc_main$a = /* @__PURE__ */ defineComponent({
...{ name: "ProForm", inheritAttrs: false },
__name: "index",
props: {
grid: { type: [Boolean, Object], default: false },
form: { default: () => ({}) }
},
setup(__props) {
provide(InjectionFormKey, __props.form);
const { formData, fields, setFormRef } = __props.form;
const config = INJECT_CONFIG["pro-form"];
const { grid: _injectGrid, ...injectAttrs } = inject(
config.injectionKey,
config.default
);
const slots = useSlots();
watchEffect(() => {
Object.keys(slots).forEach((name) => {
if (name === "default") return;
provide(`${TeleportComponentNamePrefix}${name}`, slots[name]);
});
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Form), mergeProps({
ref: (el) => {
var _a;
return (_a = unref(setFormRef)) == null ? void 0 : _a(el);
},
model: unref(formData)
}, mergeProps(injectAttrs, unref(camelizeProperties)(_ctx.$attrs)), { class: "pro-form" }), {
default: withCtx(() => [
createVNode(unref(_sfc_main$e), {
fields: unref(fields),
grid: __props.grid
}, null, 8, ["fields", "grid"]),
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["model"]);
};
}
});
function useFields(initFields) {
return useFields$1(initFields);
}
function useFormRef() {
return useFormRef$1();
}
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _sfc_main$9 = {};
const _hoisted_1$3 = {
focusable: "false",
"data-icon": "down",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
};
function _sfc_render$2(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
createElementVNode("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }, null, -1)
])]);
}
const DownOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$2]]);
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
...{ name: "SearchForm" },
__name: "SearchForm",
props: {
form: {},
layout: { default: "grid" },
expand: { type: [Boolean, Object], default: true },
searchButton: { type: [Object, Function, Boolean], default: void 0 },
resetButton: { type: [Object, Function, Boolean], default: void 0 },
expandButton: { type: [Object, Function, Boolean], default: void 0 },
rowGap: { default: 16 },
columnGap: { default: 24 },
class: {},
style: {}
},
emits: ["search", "reset"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const proFormHeight = ref("unset");
const collapseHeight = ref(0);
let rowHeight = 32;
const computedExpand = computed(() => {
if (!__props.expand) return false;
if (__props.expand === true) return { minExpandRows: 2, expandStatus: false };
return {
minExpandRows: Math.max(Math.floor(__props.expand.minExpandRows ?? 2), 1),
expandStatus: __props.expand.expandStatus ?? false
};
});
const showExpandToggle = ref(false);
const expandStatus = ref(true);
const changeExpandStatus = () => {
expandStatus.value = !expandStatus.value;
};
const { formRef, getFormData } = __props.form;
const setInitExpandStatus = () => {
expandStatus.value = false;
if (formRef.value && __props.expand) {
const formEl = formRef.value.$el;
const formItemsEl = formEl.querySelectorAll(
"[class*='-form-item'] > [path]"
);
const observer = new IntersectionObserver(
(entries) => {
expandStatus.value = entries.some((e) => {
if (e.intersectionRatio === 0) {
const path = e.target.getAttribute("path");
const searchFieldValue = path ? getFormData == null ? void 0 : getFormData(path) : void 0;
return ![null, void 0].includes(searchFieldValue);
}
return __props.expand.expandStatus;
});
observer.disconnect();
},
{ root: formEl }
);
formItemsEl.forEach((element) => {
observer.observe(element);
});
}
};
watch(
[
() => {
var _a, _b, _c;
return (_c = (_b = (_a = __props.form) == null ? void 0 : _a.fields.value) == null ? void 0 : _b.filter((f) => !f.hidden)) == null ? void 0 : _c.length;
},
() => formRef.value,
() => __props.expand
],
() => {
var _a, _b, _c, _d, _e;
if (!__props.expand || !expandStatus.value || !formRef.value) return;
const proFormEl = (_a = formRef.value) == null ? void 0 : _a.$el;
const { height = 0 } = ((_b = proFormEl == null ? void 0 : proFormEl.getBoundingClientRect) == null ? void 0 : _b.call(proFormEl)) || {};
proFormHeight.value = height;
rowHeight = (_e = (_d = (_c = proFormEl == null ? void 0 : proFormEl.querySelector("[class*='-form-item']")) == null ? void 0 : _c.getBoundingClientRect) == null ? void 0 : _d.call(_c)) == null ? void 0 : _e.height;
},
{ flush: "post", immediate: true }
);
watchEffect(
() => {
if (typeof proFormHeight.value !== "number") return;
if (__props.layout === "grid" && computedExpand.value) {
const { minExpandRows } = computedExpand.value;
collapseHeight.value = Math.min(
minExpandRows * rowHeight + (minExpandRows - 1) * __props.rowGap,
+proFormHeight.value
);
showExpandToggle.value = +proFormHeight.value - collapseHeight.value > 1;
if (showExpandToggle.value) {
setInitExpandStatus();
}
} else {
showExpandToggle.value = false;
}
},
{ flush: "post" }
);
const layoutProps = computed(
() => __props.layout === "grid" ? {
grid: {
gutter: [__props.columnGap, __props.rowGap],
style: { flex: 1, marginRight: "12px" }
},
style: {
display: "flex",
overflow: "hidden",
height: `${expandStatus.value ? proFormHeight.value : collapseHeight.value}px`
}
} : {
layout: "inline",
style: { gap: `${__props.rowGap}px ${__props.columnGap}px` },
grid: false
}
);
const onReset = () => {
emit("reset");
};
const onSearch = () => {
emit("search");
};
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(_sfc_main$a), mergeProps(layoutProps.value, {
form: __props.form,
class: "pro-table_search-form transition"
}), {
default: withCtx(() => [
createVNode(unref(Space), {
align: "start",
class: "pro-table_search-form_button-group"
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "reset-button", { onClick: onReset }, () => [
__props.resetButton !== false ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
__props.resetButton ? (openBlock(), createBlock(resolveDynamicComponent(__props.resetButton), {
key: 0,
onClick: onReset
})) : (openBlock(), createBlock(unref(Button), {
key: 1,
class: "pro-table_search-form_reset-button",
onClick: onReset
}, {
default: withCtx(() => [..._cache[0] || (_cache[0] = [
createTextVNode("重置", -1)
])]),
_: 1
}))
], 64)) : createCommentVNode("", true)
], true),
renderSlot(_ctx.$slots, "search-button", { onClick: onSearch }, () => [
__props.searchButton !== false ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
__props.searchButton ? (openBlock(), createBlock(resolveDynamicComponent(__props.searchButton), {
key: 0,
onClick: onSearch
})) : (openBlock(), createBlock(unref(Button), {
key: 1,
class: "pro-table_search-form_search-button",
type: "primary",
"html-type": "submit",
onClick: onSearch
}, {
default: withCtx(() => [..._cache[1] || (_cache[1] = [
createTextVNode("查询 ", -1)
])]),
_: 1
}))
], 64)) : createCommentVNode("", true)
], true),
renderSlot(_ctx.$slots, "expand-button", { onClick: changeExpandStatus }, () => [
__props.expandButton !== false && showExpandToggle.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
__props.expandButton ? (openBlock(), createBlock(resolveDynamicComponent(__props.expandButton), {
key: 0,
"expand-status": expandStatus.value,
onClick: changeExpandStatus
}, null, 8, ["expand-status"])) : (openBlock(), createBlock(unref(Button), {
key: 1,
type: "link",
class: "pro-table_search-form_expand-toggle-button",
onClick: changeExpandStatus
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(expandStatus.value ? "收起" : "展开") + " ", 1),
createVNode(DownOutlined, {
class: "transition",
style: normalizeStyle([{ "margin-left": "4px" }, { transform: `rotate(${expandStatus.value ? -180 : 0}deg)` }])
}, null, 8, ["style"])
]),
_: 1
}))
], 64)) : createCommentVNode("", true)
], true)
]),
_: 3
})
]),
_: 3
}, 16, ["form"]);
};
}
});
const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-aee49e85"]]);
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
__name: "DefaultSearchFormContainer",
setup(__props) {
const { token } = theme.useToken();
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "pro-table_search-form-container",
style: normalizeStyle({ backgroundColor: unref(token).colorBgContainer })
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 4);
};
}
});
const DefaultSearchFormContainer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-c385cd54"]]);
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
__name: "DefaultTableContainer",
setup(__props) {
const { token } = theme.useToken();
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: "pro-table_table-container",
style: normalizeStyle({ backgroundColor: unref(token).colorBgContainer })
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 4);
};
}
});
const DefaultTableContainer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-ac3cdb51"]]);
const _sfc_main$5 = {};
const _hoisted_1$2 = {
focusable: "false",
"data-icon": "column-height",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
};
function _sfc_render$1(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
createElementVNode("path", { d: "M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" }, null, -1)
])]);
}
const ColumnHeightOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$1]]);
const _sfc_main$4 = /* @__PURE__ */ defineComponent({
__name: "SizeControl",
props: {
"size": {},
"sizeModifiers": {}
},
emits: ["update:size"],
setup(__props) {
var _a;
const configContext = useConfigContextInject();
const size = useModel(__props, "size");
size.value = size.value ?? ((_a = configContext.componentSize) == null ? void 0 : _a.value) ?? "large";
const onSizeChange = (val) => {
size.value = val.key;
};
const sizeOptions = [
{ label: "默认", key: "large" },
{ label: "中等", key: "middle" },
{ label: "紧凑", key: "small" }
];
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Dropdown), {
arrow: "",
placement: "bottomRight"
}, {
overlay: withCtx(() => [
createVNode(unref(Menu), {
style: { "width": "100px", "text-align": "center" },
"selected-keys": size.value ? [size.value] : [],
items: sizeOptions,
onClick: onSizeChange
}, null, 8, ["selected-keys"])
]),
default: withCtx(() => [
createVNode(unref(Button), {
type: "text",
class: "pro-table_size-control_button"
}, {
default: withCtx(() => [
createVNode(ColumnHeightOutlined)
]),
_: 1
})
]),
_: 1
});
};
}
});
const SizeControl = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-db17998d"]]);
const _sfc_main$3 = {};
const _hoisted_1$1 = {
focusable: "false",
"data-icon": "filter",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
};
function _sfc_render(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [
createElementVNode("path", { d: "M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z" }, null, -1)
])]);
}
const FilterOutlined = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
__name: "ColumnControl",
props: {
columns: {},
table: { default: () => void 0 }
},
setup(__props) {
const open = ref(false);
const checkAll = ref(false);
const indeterminate = ref(false);
const checkedColumnsOptions = computed(
() => __props.columns.flatMap(
(item) => item.key && item.title ? {
label: item.title,
value: item.key,
checked: !item.hidden
} : []
)
);
const checkedColumnKeys = computed({
get() {
return checkedColumnsOptions.value.flatMap(
(item) => item.checked ? item.value : []
) || [];
},
set(val) {
var _a;
(_a = checkedColumnsOptions.value) == null ? void 0 : _a.forEach((item) => {
var _a2, _b;
(_b = (_a2 = __props.table) == null ? void 0 : _a2.setColumn) == null ? void 0 : _b.call(_a2, item.value, {
hidden: !val.includes(item.value)
});
});
}
});
const onCheckAllChange = (e) => {
checkedColumnKeys.value = e.target.checked ? checkedColumnsOptions.value.map((item) => item.value) : [];
indeterminate.value = false;
};
const checkColumnsMenuItemClick = (val) => {
if (checkedColumnKeys.value.includes(val)) {
checkedColumnKeys.value = checkedColumnKeys.value.filter(
(item) => item !== val
);
} else {
checkedColumnKeys.value = [...checkedColumnKeys.value, val];
}
};
watch(
checkedColumnKeys,
(val) => {
indeterminate.value = !!val.length && val.length < checkedColumnsOptions.value.length;
checkAll.value = val.length === checkedColumnsOptions.value.length;
},
{ immediate: true }
);
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Dropdown), {
open: open.value,
"onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
arrow: "",
placement: "bottomRight"
}, {
overlay: withCtx(() => [
createVNode(unref(Menu), {
style: { "min-width": "100px", "max-height": "500px", "overflow-y": "scroll" },
selectable: false
}, {
default: withCtx(() => [
(openBlock(), createBlock(unref(MenuItem), { key: 0 }, {
default: withCtx(() => [
createElementVNode("div", null, [
createVNode(unref(Checkbox), {
checked: checkAll.value,
indeterminate: indeterminate.value,
onChange: onCheckAllChange
}, {
default: withCtx(() => [..._cache[2] || (_cache[2] = [
createTextVNode(" 全选 ", -1)
])]),
_: 1
}, 8, ["checked", "indeterminate"])
])
]),
_: 1
})),
createVNode(unref(MenuDivider)),
(openBlock(true), createElementBlock(Fragment, null, renderList(checkedColumnsOptions.value, (item) => {
return openBlock(), createBlock(unref(MenuItem), {
key: item.value,
onClick: ($event) => checkColumnsMenuItemClick(item.value)
}, {
default: withCtx(() => [
createVNode(unref(Checkbox), {
checked: checkedColumnKeys.value.includes(item.value)
}, {
default: withCtx(() => [
createElementVNode("div", {
onClick: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["stop"]))
}, toDisplayString(item.label), 1)
]),
_: 2
}, 1032, ["checked"])
]),
_: 2
}, 1032, ["onClick"]);
}), 128))
]),
_: 1
})
]),
default: withCtx(() => [
createVNode(unref(Button), {
type: "text",
class: "pro-table_column-control_button"
}, {
default: withCtx(() => [
createVNode(FilterOutlined)
]),
_: 1
})
]),
_: 1
}, 8, ["open"]);
};
}
});
const ColumnControl = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d503f78a"]]);
const _hoisted_1 = { class: "pro-table_header" };
const _hoisted_2 = {
key: 0,
class: "pro-table_header_button-bar"
};
const _hoisted_3 = {
key: 1,
class: "pro-table_header_toolbar"
};
const _hoisted_4 = {
key: 2,
class: "pro-table_header_size-control"
};
const _hoisted_5 = {
key: 3,
class: "pro-table_header_column-control"
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
...{ name: "ProTable", inheritAttrs: false },
__name: "ProTable",
props: /* @__PURE__ */ mergeModels({
table: { default: () => void 0 },
search: { type: Function, default: void 0 },
addIndexColumn: { type: Boolean, default: () => void 0 },
immediateSearch: { type: Boolean, default: () => void 0 },
control: { type: [Boolean, Object], default: () => void 0 },
searchFormConfig: { default: () => void 0 },
tableContainer: { type: [Object, Function, Boolean], default: void 0 }
}, {
"size": {},
"sizeModifiers": {},
"loading": { type: Boolean },
"loadingModifiers": {}
}),
emits: ["update:size", "update:loading"],
setup(__props) {
const config = INJECT_CONFIG["pro-table"];
const injectProps = inject(config.injectionKey, config.default);
const tableProperties = Object.keys(tableProps());
const injectAttrs = pick(injectProps, tableProperties);
const computedSearchFormConfig = computed(() => {
var _a, _b;
const container = ((_a = __props.searchFormConfig) == null ? void 0 : _a.container) ?? ((_b = injectProps.searchFormConfig) == null ? void 0 : _b.container) ?? DefaultSearchFormContainer;
return {
...injectProps.searchFormConfig,
...getObject(__props.searchFormConfig),
container: container ? container : void 0
};
});
const attrs = useAttrs();
const tableAttrs = computed(() => {
return pick(camelizeProperties(attrs), tableProperties);
});
const { columns, dataSource, searchForm, pageParam, setPageParam } = __props.table || {};
const size = useModel(__props, "size");
const loading = useModel(__props, "loading");
const _search = async () => {
var _a;
try {
loading.value = true;
await ((_a = __props.search) == null ? void 0 : _a.call(__props));
} finally {
loading.value = false;
}
};
const reset = () => {
var _a;
(_a = __props.table) == null ? void 0 : _a.resetQueryParams();
nextTick(() => {
_search();
});
};
const slots = useSlots();
const {
"search-form": searchFormSlot,
"button-bar": buttonBarSlot,
toolbar: toolbarSlot,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
table: tableSlot,
...tableSlots
} = slots;
const searchPage1st = () => {
setPageParam == null ? void 0 : setPageParam({ current: 1 });
_search();
};
const computedTableProps = computed(() => {
return {
...injectAttrs,
...tableAttrs.value,
pagination: void 0,
onChange: void 0
};
});
const computedTableContainer = computed(() => {
const container = __props.tableContainer ?? injectProps.tableContainer ?? DefaultTableContainer;
return container ? container : void 0;
});
const indexColumn = {
title: "序号",
dataIndex: "_index",
width: 80,
customRender: ({ index: index2 }) => index2 + 1
};
const computedColumns = computed(
() => [
...__props.addIndexColumn ?? injectProps.addIndexColumn ? [indexColumn] : [],
...(tableAttrs.value.columns ?? (columns == null ? void 0 : columns.value) ?? []).flatMap(
(item, index2) => {
if (item.key) return [{ ...item, key: item.key }];
if (item.dataIndex) {
const dataIndexKey = Array.isArray(item.dataIndex) ? item.dataIndex.join(".") : item.dataIndex;
return [{ ...item, key: dataIndexKey }];
}
return [{ ...item, key: index2 }];
}
)
]
);
const visibleComputedColumns = computed(() => {
return computedColumns.value.filter((item) => !item.hidden);
});
const computedDataSource = computed(() => {
return tableAttrs.value.dataSource ?? (dataSource == null ? void 0 : dataSource.value);
});
const computedPagination = computed(() => {
if (tableAttrs.value.pagination === false) return false;
return {
...injectAttrs.pagination,
...pageParam,
...tableAttrs.value.pagination
};
});
const onTableChange = (...args) => {
var _a;
setPageParam == null ? void 0 : setPageParam(args[0]);
(_a = attrs.onChange) == null ? void 0 : _a.call(attrs, ...args);
_search();
};
const showSearch = computed(() => {
var _a, _b;
return !!(searchFormSlot || ((_a = computedSearchFormConfig.value) == null ? void 0 : _a.hidden) !== true && searchForm && ((_b = searchForm.fields.value.filter((item) => !item.hidden)) == null ? void 0 : _b.length) > 0);
});
const computedControl = computed(() => {
const mergedControl = __props.control ?? injectProps.control;
const sizeControl = (mergedControl == null ? void 0 : mergedControl.sizeControl) ?? mergedControl;
const columnControl = (mergedControl == null ? void 0 : mergedControl.columnControl) ?? mergedControl;
return { sizeControl, columnControl };
});
onMounted(() => {
if (__props.immediateSearch ?? injectProps.immediateSearch) {
_search();
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["pro-table", _ctx.$attrs.class]),
style: normalizeStyle(_ctx.$attrs.style)
}, [
showSearch.value ? (openBlock(), createBlock(unref(_sfc_main$c), {
key: 0,
component: computedSearchFormConfig.value.container
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "search-form", {}, () => [
unref(searchForm) ? (openBlock(), createBlock(SearchForm, mergeProps({
key: 0,
form: unref(searchForm)
}, computedSearchFormConfig.value, {
onSearch: searchPage1st,
onReset: reset
}), null, 16, ["form"])) : createCommentVNode("", true)
], true)
]),
_: 3
}, 8, ["component"])) : createCommentVNode("", true),
createVNode(unref(_sfc_main$c), { component: computedTableContainer.value }, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
unref(buttonBarSlot) ? (openBlock(), createElementBlock("div", _hoisted_2, [
renderSlot(_ctx.$slots, "button-bar", {}, void 0, true)
])) : createCommentVNode("", true),
unref(toolbarSlot) ? (openBlock(), createElementBlock("div", _hoisted_3, [
renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
])) : createCommentVNode("", true),
computedControl.value.sizeControl ? (openBlock(), createElementBlock("div", _hoisted_4, [
createVNode(unref(SizeControl), {
size: size.value,
"onUpdate:size": _cache[0] || (_cache[0] = ($event) => size.value = $event)
}, null, 8, ["size"])
])) : createCommentVNode("", true),
computedControl.value.columnControl ? (openBlock(), createElementBlock("div", _hoisted_5, [
createVNode(unref(ColumnControl), {
columns: computedColumns.value,
table: __props.table
}, null, 8, ["columns", "table"])
])) : createCommentVNode("", true)
]),
renderSlot(_ctx.$slots, "table", {}, () => [
createVNode(unref(Table), mergeProps({ class: "pro-table_content" }, computedTableProps.value, {
size: size.value,
loading: loading.value,
columns: visibleComputedColumns.value,
"data-source": computedDataSource.value,
pagination: computedPagination.value,
onChange: onTableChange
}), createSlots({ _: 2 }, [
renderList(tableSlots, (_, name) => {
return {
name,
fn: withCtx((scoped) => [
renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(scoped)), void 0, true)
])
};
})
]), 1040, ["size", "loading", "columns", "data-source", "pagination"])
], true)
]),
_: 3
}, 8, ["component"])
], 6);
};
}
});
const ProTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-856c096b"]]);
function useTable(params) {
return useTable$1(params);
}
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "ProComponentProvider",
inheritAttrs: false
},
__name: "index",
props: {
componentVars: {},
componentMap: {}
},
setup(__props) {
const props = __props;
if (props.componentVars) {
Object.entries(props.componentVars).forEach(([key, val]) => {
const config = ensureInjectConfig(key);
provide(config.injectionKey, { ...config.default, ...getObject(val) });
});
}
if (props.componentMap) {
provide(INJECT_COMPONENTS, props.componentMap);
}
return (_ctx, _cache) => {
return renderSlot(_ctx.$slots, "default");
};
}
});
const index = {
/**
* @qin-ui/antd-vue-pro 安装方法
* @description 全局注册所有组件（ProForm、ProTable、ProComponentProvider）
*
* @param {App} app - Vue 应用实例
*
* @example
* ```ts
* import { createApp } from 'vue'
* import ProComponents from '@qin