@qin-ui/element-plus-pro 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI-CONTEXT.md +1 -1
- package/api.json +1 -1
- package/es/__tests__/cross-package.spec.d.ts +2 -0
- package/es/__tests__/cross-package.spec.d.ts.map +1 -0
- package/es/element-plus-pro.css +12 -12
- package/es/index.js +95 -245
- package/es/index.js.map +1 -1
- package/es/src/components/component-provider/components/index.vue.d.ts.map +1 -1
- package/es/src/components/component-provider/constants/index.d.ts +2 -2
- package/es/src/components/component-provider/constants/index.d.ts.map +1 -1
- package/es/src/components/form/components/BaseField/index.vue.d.ts.map +1 -1
- package/es/src/components/form/components/BaseField/utils/index.d.ts +1 -0
- package/es/src/components/form/components/BaseField/utils/index.d.ts.map +1 -1
- package/es/src/components/form/components/BaseFormItem/index.vue.d.ts.map +1 -1
- package/es/src/components/form/components/ProForm/index.vue.d.ts.map +1 -1
- package/es/src/components/form/components/SlotComponent/index.vue.d.ts.map +1 -1
- package/es/src/components/form/hooks/useGroupFieldAttrs.d.ts.map +1 -1
- package/es/src/components/table/components/ColumnControl.vue.d.ts.map +1 -1
- package/es/src/components/table/components/ProTable.vue.d.ts +4 -1
- package/es/src/components/table/components/ProTable.vue.d.ts.map +1 -1
- package/es/src/components/table/components/SearchForm.vue.d.ts.map +1 -1
- package/es/src/components/table/components/TableColumnRenderer.vue.d.ts.map +1 -1
- package/es/src/components/table/types/index.d.ts +3 -0
- package/es/src/components/table/types/index.d.ts.map +1 -1
- package/es/src/locale/index.d.ts +1 -1
- package/es/src/locale/index.d.ts.map +1 -1
- package/es/src/shared/core/index.d.ts +1 -1
- package/es/src/shared/core/index.d.ts.map +1 -1
- package/es/src/shared/ui/index.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/component-provider/components/index.vue +4 -3
- package/src/components/component-provider/constants/index.ts +4 -3
- package/src/components/form/components/BaseField/index.vue +3 -6
- package/src/components/form/components/BaseField/utils/index.ts +11 -0
- package/src/components/form/components/BaseFormItem/index.vue +2 -1
- package/src/components/form/components/ProForm/index.vue +12 -22
- package/src/components/form/components/SlotComponent/index.vue +9 -6
- package/src/components/form/hooks/useGroupFieldAttrs.ts +5 -2
- package/src/components/table/components/ColumnControl.vue +15 -16
- package/src/components/table/components/ProTable.vue +39 -36
- package/src/components/table/components/SearchForm.vue +4 -182
- package/src/components/table/components/TableColumnRenderer.vue +4 -2
- package/src/components/table/types/index.ts +3 -0
- package/src/locale/en-US.ts +1 -1
- package/src/locale/index.ts +1 -5
- package/src/locale/zh-CN.ts +1 -1
- package/src/locale/zh-TW.ts +1 -1
- package/src/shared/core/index.ts +11 -0
- package/src/shared/ui/index.ts +9 -4
package/es/index.js
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import "./element-plus-pro.css";
|
|
2
|
-
import { inject, computed, toValue, mergeProps, defineComponent, resolveComponent, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList, createVNode, createSlots, toRaw, ref, useAttrs, createCommentVNode, resolveDynamicComponent, renderSlot, normalizeProps,
|
|
3
|
-
import { ElTable, ElPagination,
|
|
4
|
-
import { isPlainObject, getObject, normalizePathKey, useForm as useForm$1, zhCN as zhCN$1, zhTW as zhTW$1, enUS as enUS$1, resolveLocaleName, format, cloneDeep, InjectionFormSlotsKey, InjectionFormKey, camelizeProperties, useFields as useFields$1, useFormRef as useFormRef$1, get, pick, isPromise, useTable as useTable$1 } from "@qin-ui/pro-components-core";
|
|
2
|
+
import { inject, computed, toValue, mergeProps, defineComponent, resolveComponent, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList, createVNode, createSlots, toRaw, ref, useAttrs, createCommentVNode, resolveDynamicComponent, renderSlot, normalizeProps, createTextVNode, toDisplayString, provide, useSlots, withModifiers, createElementVNode, normalizeStyle, useModel, watch, mergeModels, onMounted, resolveDirective, normalizeClass, withDirectives, guardReactiveProps, nextTick } from "vue";
|
|
3
|
+
import { ElTable, ElPagination, ElCol, ElFormItem, useFormDisabled, ElTransfer, ElTreeSelect, ElSlider, ElSwitch, ElRadioGroup, ElCheckboxGroup, ElTimeSelect, ElTimePicker, ElDatePicker, ElCascader, ElSelect, ElAutocomplete, ElInputNumber, ElInput, ElRow, localeContextKey, useLocale as useLocale$1, ElForm, ElSpace, ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElCheckbox, ElTableColumn, ElLoading } from "element-plus";
|
|
4
|
+
import { isPlainObject, getObject, normalizePathKey, useForm as useForm$1, zhCN as zhCN$1, zhTW as zhTW$1, enUS as enUS$1, resolveLocaleName, format, cloneDeep, InjectionFormSlotsKey, createFormProxy, InjectionFormKey, camelizeProperties, useFields as useFields$1, useFormRef as useFormRef$1, useSearchFormExpand, get, pick, isPromise, useTable as useTable$1 } from "@qin-ui/pro-components-core";
|
|
5
5
|
import { useFormData } from "@qin-ui/pro-components-core";
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
6
|
+
const _tableProps = ElTable.props || {};
|
|
7
|
+
const _paginationProps = ElPagination.props || {};
|
|
8
|
+
const _gridItemProps = ElCol.props || {};
|
|
9
|
+
const _formItemProps = ElFormItem.props || {};
|
|
10
|
+
const tableProps = () => _tableProps;
|
|
11
|
+
const paginationProps = () => _paginationProps;
|
|
12
|
+
const gridItemProps = () => _gridItemProps;
|
|
13
|
+
const formItemProps = () => _formItemProps;
|
|
10
14
|
const DisabledContextKey = Symbol.for("pro-form-disabled-context");
|
|
11
15
|
const useDisabledContext = () => {
|
|
12
16
|
const formDisabled = useFormDisabled();
|
|
@@ -68,7 +72,7 @@ const INJECT_CONFIG = {
|
|
|
68
72
|
injectionKey: Symbol(""),
|
|
69
73
|
default: {
|
|
70
74
|
max: 10 ** 15 - 1,
|
|
71
|
-
min: -
|
|
75
|
+
min: -999999999999999,
|
|
72
76
|
controls: false,
|
|
73
77
|
style: { width: "100%" }
|
|
74
78
|
}
|
|
@@ -206,6 +210,8 @@ const formItemPropKeys = Object.keys(formItemProps()).filter(
|
|
|
206
210
|
(k) => k !== "disabled"
|
|
207
211
|
);
|
|
208
212
|
const gridItemPropKeys = Object.keys(gridItemProps());
|
|
213
|
+
const gridItemPropKeySet = new Set(gridItemPropKeys);
|
|
214
|
+
const formItemPropKeySet = new Set(formItemPropKeys);
|
|
209
215
|
function useGroupFieldAttrs(validFields) {
|
|
210
216
|
const config = INJECT_CONFIG["pro-form-item"];
|
|
211
217
|
const injectFormItemProps = inject(config.injectionKey, config.default);
|
|
@@ -240,9 +246,9 @@ function useGroupFieldAttrs(validFields) {
|
|
|
240
246
|
);
|
|
241
247
|
const container = formItemContainer ?? injectFormItemContainer;
|
|
242
248
|
Object.keys(rest).forEach((k) => {
|
|
243
|
-
if (
|
|
249
|
+
if (gridItemPropKeySet.has(k)) {
|
|
244
250
|
gridItemProps2[k] = rest[k];
|
|
245
|
-
} else if (
|
|
251
|
+
} else if (formItemPropKeySet.has(k)) {
|
|
246
252
|
formItemProps2[k] = rest[k];
|
|
247
253
|
} else {
|
|
248
254
|
componentProps[k] = rest[k];
|
|
@@ -289,7 +295,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
|
289
295
|
setup(__props) {
|
|
290
296
|
const props = __props;
|
|
291
297
|
const validFields = computed(
|
|
292
|
-
() => (
|
|
298
|
+
() => (
|
|
299
|
+
// hidden 支持 Ref/ComputedRef/getter 等响应式形态(统一使用 toValue 取值)
|
|
300
|
+
(props.fields ?? []).filter((field) => !toValue(field.hidden))
|
|
301
|
+
)
|
|
293
302
|
);
|
|
294
303
|
const config = INJECT_CONFIG["pro-form"];
|
|
295
304
|
const injectFormConfig = inject(config.injectionKey, config.default);
|
|
@@ -405,7 +414,7 @@ const _export_sfc = (sfc, props) => {
|
|
|
405
414
|
}
|
|
406
415
|
return target;
|
|
407
416
|
};
|
|
408
|
-
const BaseFormItem = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-
|
|
417
|
+
const BaseFormItem = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-e8f152ee"]]);
|
|
409
418
|
function useForm(...args) {
|
|
410
419
|
return useForm$1(...args);
|
|
411
420
|
}
|
|
@@ -458,6 +467,14 @@ const getInitProps = (field, injectProps = {}, t) => {
|
|
|
458
467
|
}
|
|
459
468
|
return {};
|
|
460
469
|
};
|
|
470
|
+
const warnedUnknownComponents = /* @__PURE__ */ new Set();
|
|
471
|
+
function warnUnknownComponent(name) {
|
|
472
|
+
if (warnedUnknownComponents.has(name)) return;
|
|
473
|
+
warnedUnknownComponents.add(name);
|
|
474
|
+
console.warn(
|
|
475
|
+
`[pro-components] 未识别的组件类型 "${name}",已降级为原生元素渲染。如为自定义组件请在 componentMap 或 ProComponentProvider 中注册。`
|
|
476
|
+
);
|
|
477
|
+
}
|
|
461
478
|
const zhCN = {
|
|
462
479
|
...zhCN$1,
|
|
463
480
|
// 日期/时间选择器占位符(对应 INJECT_CONFIG 中 date-picker.* 的占位默认值)
|
|
@@ -572,7 +589,6 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
572
589
|
initProps,
|
|
573
590
|
attrs,
|
|
574
591
|
{ class: attrs.componentClass, style: attrs.componentStyle },
|
|
575
|
-
{ class: initProps.componentClass, style: initProps.componentStyle },
|
|
576
592
|
{ disabled: effectiveDisabled },
|
|
577
593
|
{ modelProp: modelPropName }
|
|
578
594
|
);
|
|
@@ -588,14 +604,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
|
588
604
|
const formSlots = inject(InjectionFormSlotsKey, void 0);
|
|
589
605
|
const customComponents = inject(INJECT_COMPONENTS, {});
|
|
590
606
|
const is = computed(() => {
|
|
607
|
+
var _a;
|
|
591
608
|
const teleportSlot = props.path && (formSlots == null ? void 0 : formSlots[props.path]);
|
|
592
609
|
if (teleportSlot) return teleportSlot;
|
|
593
610
|
if (typeof props.component === "string") {
|
|
594
|
-
const resolved = customComponents[props.component] || componentMap[props.component];
|
|
611
|
+
const resolved = ((_a = toValue(customComponents)) == null ? void 0 : _a[props.component]) || componentMap[props.component];
|
|
595
612
|
if (resolved) return resolved;
|
|
596
|
-
|
|
597
|
-
`[pro-components] 未识别的组件类型 "${props.component}",已降级为原生元素渲染。如为自定义组件请在 componentMap 或 ProComponentProvider 中注册。`
|
|
598
|
-
);
|
|
613
|
+
warnUnknownComponent(props.component);
|
|
599
614
|
return props.component;
|
|
600
615
|
}
|
|
601
616
|
return props.component;
|
|
@@ -658,8 +673,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
658
673
|
component: { type: [Object, Function, String, Number, Boolean, null] }
|
|
659
674
|
},
|
|
660
675
|
setup(__props) {
|
|
676
|
+
const isRenderable = (c) => c !== null && c !== void 0 && (typeof c === "function" || typeof c === "object");
|
|
661
677
|
return (_ctx, _cache) => {
|
|
662
|
-
return
|
|
678
|
+
return isRenderable(__props.component) ? (openBlock(), createBlock(resolveDynamicComponent(__props.component), normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), null, 16)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
663
679
|
createTextVNode(toDisplayString(__props.component), 1)
|
|
664
680
|
], 64));
|
|
665
681
|
};
|
|
@@ -678,28 +694,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
678
694
|
const currentForm = computed(
|
|
679
695
|
() => props.form ?? fallbackForm
|
|
680
696
|
);
|
|
681
|
-
const formProxy =
|
|
682
|
-
get(_, prop) {
|
|
683
|
-
const target = currentForm.value;
|
|
684
|
-
const val = target == null ? void 0 : target[prop];
|
|
685
|
-
if (typeof val === "function") {
|
|
686
|
-
return (...args) => {
|
|
687
|
-
var _a, _b;
|
|
688
|
-
return (_b = (_a = currentForm.value) == null ? void 0 : _a[prop]) == null ? void 0 : _b.call(_a, ...args);
|
|
689
|
-
};
|
|
690
|
-
}
|
|
691
|
-
return val;
|
|
692
|
-
},
|
|
693
|
-
set(_, prop, value) {
|
|
694
|
-
if (currentForm.value) {
|
|
695
|
-
currentForm.value[prop] = value;
|
|
696
|
-
}
|
|
697
|
-
return true;
|
|
698
|
-
},
|
|
699
|
-
has(_, prop) {
|
|
700
|
-
return Boolean(currentForm.value && prop in currentForm.value);
|
|
701
|
-
}
|
|
702
|
-
});
|
|
697
|
+
const formProxy = createFormProxy(() => currentForm.value);
|
|
703
698
|
provide(InjectionFormKey, formProxy);
|
|
704
699
|
const fields = computed(() => {
|
|
705
700
|
var _a;
|
|
@@ -731,6 +726,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
731
726
|
const { grid: _injectGrid, ...rest } = raw || {};
|
|
732
727
|
return rest;
|
|
733
728
|
});
|
|
729
|
+
const formAttrs = computed(() => {
|
|
730
|
+
return mergeProps(injectAttrs.value, camelizeProperties(attrs));
|
|
731
|
+
});
|
|
734
732
|
const slots = useSlots();
|
|
735
733
|
provide(InjectionFormSlotsKey, slots);
|
|
736
734
|
return (_ctx, _cache) => {
|
|
@@ -738,7 +736,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
738
736
|
key: formKey.value,
|
|
739
737
|
ref: setFormRef,
|
|
740
738
|
model: formData.value
|
|
741
|
-
},
|
|
739
|
+
}, formAttrs.value, {
|
|
742
740
|
class: "pro-form",
|
|
743
741
|
onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {
|
|
744
742
|
}, ["prevent"]))
|
|
@@ -797,149 +795,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
797
795
|
const { t } = useLocale();
|
|
798
796
|
const props = __props;
|
|
799
797
|
const emit = __emit;
|
|
800
|
-
const
|
|
801
|
-
const collapseHeight = ref(0);
|
|
802
|
-
const rowHeight = ref(32);
|
|
803
|
-
let resizeObserver = null;
|
|
804
|
-
let intersectionObserver = null;
|
|
805
|
-
const cleanupObservers = () => {
|
|
806
|
-
if (resizeObserver) {
|
|
807
|
-
resizeObserver.disconnect();
|
|
808
|
-
resizeObserver = null;
|
|
809
|
-
}
|
|
810
|
-
if (intersectionObserver) {
|
|
811
|
-
intersectionObserver.disconnect();
|
|
812
|
-
intersectionObserver = null;
|
|
813
|
-
}
|
|
814
|
-
};
|
|
815
|
-
onBeforeUnmount(() => {
|
|
816
|
-
cleanupObservers();
|
|
817
|
-
});
|
|
818
|
-
const computedExpand = computed(() => {
|
|
819
|
-
if (!props.expand) return false;
|
|
820
|
-
if (props.expand === true) return { minExpandRows: 2, expandStatus: false };
|
|
821
|
-
return {
|
|
822
|
-
minExpandRows: Math.max(Math.floor(props.expand.minExpandRows ?? 2), 1),
|
|
823
|
-
expandStatus: props.expand.expandStatus ?? false
|
|
824
|
-
};
|
|
825
|
-
});
|
|
826
|
-
const showExpandToggle = ref(false);
|
|
827
|
-
const expandStatus = ref(true);
|
|
828
|
-
const updateHeights = () => {
|
|
829
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
830
|
-
if (!props.expand || !((_b = (_a = props.form) == null ? void 0 : _a.formRef) == null ? void 0 : _b.value)) return;
|
|
831
|
-
const proFormEl = (_c = props.form.formRef.value) == null ? void 0 : _c.$el;
|
|
832
|
-
if (!proFormEl) return;
|
|
833
|
-
const itemHeight = (_f = (_e = (_d = proFormEl == null ? void 0 : proFormEl.querySelector("[class*='-form-item']")) == null ? void 0 : _d.getBoundingClientRect) == null ? void 0 : _e.call(_d)) == null ? void 0 : _f.height;
|
|
834
|
-
if (itemHeight && itemHeight > 0) {
|
|
835
|
-
rowHeight.value = itemHeight;
|
|
836
|
-
}
|
|
837
|
-
const naturalHeight = proFormEl.scrollHeight || ((_h = (_g = proFormEl.getBoundingClientRect) == null ? void 0 : _g.call(proFormEl)) == null ? void 0 : _h.height) || 0;
|
|
838
|
-
if (naturalHeight > 0) {
|
|
839
|
-
proFormHeight.value = naturalHeight;
|
|
840
|
-
}
|
|
841
|
-
};
|
|
842
|
-
const isManualToggle = ref(false);
|
|
843
|
-
const changeExpandStatus = () => {
|
|
844
|
-
isManualToggle.value = true;
|
|
845
|
-
expandStatus.value = !expandStatus.value;
|
|
846
|
-
};
|
|
847
|
-
const hasFieldValue = (val) => val !== null && val !== void 0 && val !== "" && !(Array.isArray(val) && val.length === 0) && !(typeof val === "object" && Object.keys(val).length === 0);
|
|
848
|
-
const setInitExpandStatus = () => {
|
|
849
|
-
var _a, _b, _c;
|
|
850
|
-
if (isManualToggle.value) return;
|
|
851
|
-
const initStatus = computedExpand.value ? computedExpand.value.expandStatus : false;
|
|
852
|
-
expandStatus.value = initStatus;
|
|
853
|
-
if (((_b = (_a = props.form) == null ? void 0 : _a.formRef) == null ? void 0 : _b.value) && computedExpand.value) {
|
|
854
|
-
const formEl = props.form.formRef.value.$el;
|
|
855
|
-
const formItemsEl = (_c = formEl == null ? void 0 : formEl.querySelectorAll) == null ? void 0 : _c.call(
|
|
856
|
-
formEl,
|
|
857
|
-
"[class*='-form-item'] [path]"
|
|
858
|
-
);
|
|
859
|
-
if (!formItemsEl || formItemsEl.length === 0) return;
|
|
860
|
-
if (intersectionObserver) {
|
|
861
|
-
intersectionObserver.disconnect();
|
|
862
|
-
}
|
|
863
|
-
intersectionObserver = new IntersectionObserver(
|
|
864
|
-
(entries) => {
|
|
865
|
-
if (isManualToggle.value) return;
|
|
866
|
-
expandStatus.value = entries.some((e) => {
|
|
867
|
-
var _a2, _b2;
|
|
868
|
-
if (e.intersectionRatio === 0) {
|
|
869
|
-
const path = e.target.getAttribute("path");
|
|
870
|
-
const searchFieldValue = path ? (_b2 = (_a2 = props.form) == null ? void 0 : _a2.getFormData) == null ? void 0 : _b2.call(_a2, path) : void 0;
|
|
871
|
-
return hasFieldValue(searchFieldValue);
|
|
872
|
-
}
|
|
873
|
-
return computedExpand.value ? computedExpand.value.expandStatus : false;
|
|
874
|
-
});
|
|
875
|
-
intersectionObserver == null ? void 0 : intersectionObserver.disconnect();
|
|
876
|
-
},
|
|
877
|
-
{ root: formEl }
|
|
878
|
-
);
|
|
879
|
-
formItemsEl.forEach((element) => {
|
|
880
|
-
intersectionObserver == null ? void 0 : intersectionObserver.observe(element);
|
|
881
|
-
});
|
|
882
|
-
}
|
|
883
|
-
};
|
|
884
|
-
watch(
|
|
885
|
-
[
|
|
886
|
-
() => {
|
|
887
|
-
var _a, _b, _c;
|
|
888
|
-
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;
|
|
889
|
-
},
|
|
890
|
-
() => {
|
|
891
|
-
var _a, _b;
|
|
892
|
-
return (_b = (_a = props.form) == null ? void 0 : _a.formRef) == null ? void 0 : _b.value;
|
|
893
|
-
},
|
|
894
|
-
() => props.expand
|
|
895
|
-
],
|
|
896
|
-
() => {
|
|
897
|
-
updateHeights();
|
|
898
|
-
},
|
|
899
|
-
{ flush: "post", immediate: true }
|
|
900
|
-
);
|
|
901
|
-
watch(
|
|
902
|
-
() => {
|
|
903
|
-
var _a, _b;
|
|
904
|
-
return (_b = (_a = props.form) == null ? void 0 : _a.formRef) == null ? void 0 : _b.value;
|
|
905
|
-
},
|
|
906
|
-
(val) => {
|
|
907
|
-
if (resizeObserver) {
|
|
908
|
-
resizeObserver.disconnect();
|
|
909
|
-
resizeObserver = null;
|
|
910
|
-
}
|
|
911
|
-
const formEl = val == null ? void 0 : val.$el;
|
|
912
|
-
if (formEl && typeof ResizeObserver !== "undefined") {
|
|
913
|
-
resizeObserver = new ResizeObserver(() => {
|
|
914
|
-
updateHeights();
|
|
915
|
-
});
|
|
916
|
-
resizeObserver.observe(formEl);
|
|
917
|
-
}
|
|
918
|
-
},
|
|
919
|
-
{ immediate: true }
|
|
920
|
-
);
|
|
921
|
-
watchEffect(
|
|
922
|
-
() => {
|
|
923
|
-
if (typeof proFormHeight.value !== "number") return;
|
|
924
|
-
if (props.layout === "grid" && computedExpand.value) {
|
|
925
|
-
const { minExpandRows } = computedExpand.value;
|
|
926
|
-
collapseHeight.value = Math.min(
|
|
927
|
-
minExpandRows * rowHeight.value + (minExpandRows - 1) * props.rowGap,
|
|
928
|
-
+proFormHeight.value
|
|
929
|
-
);
|
|
930
|
-
showExpandToggle.value = +proFormHeight.value - collapseHeight.value > 1;
|
|
931
|
-
if (showExpandToggle.value) {
|
|
932
|
-
setInitExpandStatus();
|
|
933
|
-
}
|
|
934
|
-
} else {
|
|
935
|
-
showExpandToggle.value = false;
|
|
936
|
-
}
|
|
937
|
-
},
|
|
938
|
-
{ flush: "post" }
|
|
939
|
-
);
|
|
798
|
+
const { showExpandToggle, expandStatus, changeExpandStatus, heightStyle } = useSearchFormExpand(props);
|
|
940
799
|
const layoutProps = computed(() => {
|
|
941
|
-
const currentHeight = expandStatus.value ? proFormHeight.value : collapseHeight.value;
|
|
942
|
-
const heightStyle = currentHeight !== "unset" && currentHeight !== void 0 ? `${currentHeight}px` : void 0;
|
|
943
800
|
return props.layout === "grid" ? {
|
|
944
801
|
grid: {
|
|
945
802
|
gutter: props.columnGap,
|
|
@@ -949,7 +806,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
949
806
|
display: "flex",
|
|
950
807
|
overflow: "hidden",
|
|
951
808
|
columnGap: `${props.columnGap}px`,
|
|
952
|
-
height: heightStyle
|
|
809
|
+
height: heightStyle.value
|
|
953
810
|
}
|
|
954
811
|
} : {
|
|
955
812
|
inline: true,
|
|
@@ -1015,29 +872,29 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
1015
872
|
], 64)) : createCommentVNode("", true)
|
|
1016
873
|
], true),
|
|
1017
874
|
renderSlot(_ctx.$slots, "expand-button", {
|
|
1018
|
-
expandStatus: expandStatus
|
|
1019
|
-
changeExpandStatus
|
|
875
|
+
expandStatus: unref(expandStatus),
|
|
876
|
+
changeExpandStatus: unref(changeExpandStatus)
|
|
1020
877
|
}, () => [
|
|
1021
|
-
props.expandButton !== false && showExpandToggle
|
|
878
|
+
props.expandButton !== false && unref(showExpandToggle) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
1022
879
|
props.expandButton ? (openBlock(), createBlock(resolveDynamicComponent(props.expandButton), {
|
|
1023
880
|
key: 0,
|
|
1024
|
-
"expand-status": expandStatus
|
|
1025
|
-
onClick: changeExpandStatus
|
|
1026
|
-
}, null, 8, ["expand-status"])) : (openBlock(), createBlock(unref(ElButton), {
|
|
881
|
+
"expand-status": unref(expandStatus),
|
|
882
|
+
onClick: unref(changeExpandStatus)
|
|
883
|
+
}, null, 8, ["expand-status", "onClick"])) : (openBlock(), createBlock(unref(ElButton), {
|
|
1027
884
|
key: 1,
|
|
1028
885
|
text: "",
|
|
1029
886
|
class: "pro-table_search-form_expand-toggle-button",
|
|
1030
|
-
onClick: changeExpandStatus
|
|
887
|
+
onClick: unref(changeExpandStatus)
|
|
1031
888
|
}, {
|
|
1032
889
|
default: withCtx(() => [
|
|
1033
|
-
createTextVNode(toDisplayString(expandStatus
|
|
890
|
+
createTextVNode(toDisplayString(unref(expandStatus) ? unref(t)("table.collapse") : unref(t)("table.expand")) + " ", 1),
|
|
1034
891
|
createVNode(DownOutlined, {
|
|
1035
892
|
class: "transition",
|
|
1036
|
-
style: normalizeStyle([{ "margin-left": "4px" }, { transform: `rotate(${expandStatus
|
|
893
|
+
style: normalizeStyle([{ "margin-left": "4px" }, { transform: `rotate(${unref(expandStatus) ? -180 : 0}deg)` }])
|
|
1037
894
|
}, null, 8, ["style"])
|
|
1038
895
|
]),
|
|
1039
896
|
_: 1
|
|
1040
|
-
}))
|
|
897
|
+
}, 8, ["onClick"]))
|
|
1041
898
|
], 64)) : createCommentVNode("", true)
|
|
1042
899
|
], true)
|
|
1043
900
|
]),
|
|
@@ -1049,7 +906,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
1049
906
|
};
|
|
1050
907
|
}
|
|
1051
908
|
});
|
|
1052
|
-
const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-
|
|
909
|
+
const SearchForm = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-9c362a11"]]);
|
|
1053
910
|
const _sfc_main$8 = {};
|
|
1054
911
|
const _hoisted_1$4 = { class: "pro-table_search-form-container" };
|
|
1055
912
|
function _sfc_render$3(_ctx, _cache) {
|
|
@@ -1174,7 +1031,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1174
1031
|
};
|
|
1175
1032
|
const checkedColumnsOptions = computed(
|
|
1176
1033
|
() => props.columns.map((item, index2) => {
|
|
1177
|
-
var _a, _b, _c, _d;
|
|
1034
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1178
1035
|
const key = getColumnKey(item, index2);
|
|
1179
1036
|
const excluded = (_b = (_a = props.columnControl) == null ? void 0 : _a.excludedKeys) == null ? void 0 : _b.some(
|
|
1180
1037
|
(ek) => String(ek) === key
|
|
@@ -1182,9 +1039,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1182
1039
|
const disabled = (_d = (_c = props.columnControl) == null ? void 0 : _c.disabledKeys) == null ? void 0 : _d.some(
|
|
1183
1040
|
(dk) => String(dk) === key
|
|
1184
1041
|
);
|
|
1185
|
-
const
|
|
1186
|
-
|
|
1187
|
-
);
|
|
1042
|
+
const rawTitle = item.label ?? item.title;
|
|
1043
|
+
const titleLabel = typeof rawTitle === "string" ? rawTitle : void 0;
|
|
1044
|
+
const propLabel = item.prop !== void 0 && item.prop !== null ? String(item.prop) : void 0;
|
|
1045
|
+
const label = ((_f = (_e = props.columnControl) == null ? void 0 : _e.labels) == null ? void 0 : _f[key]) ?? titleLabel ?? propLabel ?? key ?? t("table.columnFallback", { index: index2 + 1 });
|
|
1188
1046
|
return {
|
|
1189
1047
|
label,
|
|
1190
1048
|
value: key,
|
|
@@ -1218,7 +1076,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1218
1076
|
var _a;
|
|
1219
1077
|
const checked = !!(((_a = value == null ? void 0 : value.target) == null ? void 0 : _a.checked) ?? value);
|
|
1220
1078
|
checkedColumnKeys.value = checked ? controllableOptions.value.map((item) => item.value) : [];
|
|
1221
|
-
indeterminate.value = false;
|
|
1222
1079
|
};
|
|
1223
1080
|
const toggleColumnsItem = (val) => {
|
|
1224
1081
|
const item = checkedColumnsOptions.value.find((o) => o.value === val);
|
|
@@ -1242,13 +1099,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1242
1099
|
},
|
|
1243
1100
|
{ immediate: true }
|
|
1244
1101
|
);
|
|
1245
|
-
onMounted(() => {
|
|
1246
|
-
var _a, _b;
|
|
1247
|
-
(_b = (_a = props.columnControl) == null ? void 0 : _a.disabledKeys) == null ? void 0 : _b.forEach((key) => {
|
|
1248
|
-
var _a2;
|
|
1249
|
-
(_a2 = props.table) == null ? void 0 : _a2.setColumn(String(key), { hidden: false });
|
|
1250
|
-
});
|
|
1251
|
-
});
|
|
1252
1102
|
watch(
|
|
1253
1103
|
() => {
|
|
1254
1104
|
var _a;
|
|
@@ -1260,7 +1110,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1260
1110
|
(_a = props.table) == null ? void 0 : _a.setColumn(String(key), { hidden: false });
|
|
1261
1111
|
});
|
|
1262
1112
|
},
|
|
1263
|
-
{ deep: true }
|
|
1113
|
+
{ immediate: true, deep: true }
|
|
1264
1114
|
);
|
|
1265
1115
|
return (_ctx, _cache) => {
|
|
1266
1116
|
return openBlock(), createBlock(unref(ElDropdown), {
|
|
@@ -1332,7 +1182,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
1332
1182
|
};
|
|
1333
1183
|
}
|
|
1334
1184
|
});
|
|
1335
|
-
const ColumnControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-
|
|
1185
|
+
const ColumnControl = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-92c3fe41"]]);
|
|
1336
1186
|
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
1337
1187
|
...{ name: "TableColumnRenderer" },
|
|
1338
1188
|
__name: "TableColumnRenderer",
|
|
@@ -1388,13 +1238,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
1388
1238
|
default: withCtx((scope) => {
|
|
1389
1239
|
var _a;
|
|
1390
1240
|
return [
|
|
1391
|
-
(
|
|
1392
|
-
(_a = column.render) == null ? void 0 : _a.call(column, {
|
|
1241
|
+
createVNode(unref(_sfc_main$c), {
|
|
1242
|
+
component: (_a = column.render) == null ? void 0 : _a.call(column, {
|
|
1393
1243
|
...scope,
|
|
1394
1244
|
column,
|
|
1395
1245
|
cellValue: getCellValue(scope.row, column)
|
|
1396
1246
|
})
|
|
1397
|
-
)
|
|
1247
|
+
}, null, 8, ["component"])
|
|
1398
1248
|
];
|
|
1399
1249
|
}),
|
|
1400
1250
|
_: 2
|
|
@@ -1497,14 +1347,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1497
1347
|
"loadingModifiers": {}
|
|
1498
1348
|
}),
|
|
1499
1349
|
emits: ["update:size", "update:loading"],
|
|
1500
|
-
setup(__props) {
|
|
1350
|
+
setup(__props, { expose: __expose }) {
|
|
1351
|
+
const tableProperties = Object.keys(tableProps());
|
|
1352
|
+
const paginationProperties = Object.keys(paginationProps());
|
|
1501
1353
|
const props = __props;
|
|
1502
1354
|
const { t } = useLocale();
|
|
1503
1355
|
const config = INJECT_CONFIG["pro-table"];
|
|
1504
1356
|
const injectPropsRaw = inject(config.injectionKey, config.default);
|
|
1505
1357
|
const injectProps = computed(() => toValue(injectPropsRaw) || {});
|
|
1506
|
-
const tableProperties = Object.keys(tableProps());
|
|
1507
|
-
const paginationProperties = Object.keys(paginationProps());
|
|
1508
1358
|
const attrs = useAttrs();
|
|
1509
1359
|
const injectTableAttrs = computed(() => {
|
|
1510
1360
|
return pick(injectProps.value, tableProperties);
|
|
@@ -1517,14 +1367,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1517
1367
|
});
|
|
1518
1368
|
const size = useModel(__props, "size");
|
|
1519
1369
|
const loading = useModel(__props, "loading");
|
|
1370
|
+
let searchSequence = 0;
|
|
1520
1371
|
const _search = async () => {
|
|
1521
1372
|
var _a;
|
|
1373
|
+
const seq = ++searchSequence;
|
|
1522
1374
|
const searchPromise = (_a = props.search || attrs.onSearch) == null ? void 0 : _a();
|
|
1523
|
-
if (isPromise(searchPromise))
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1375
|
+
if (!isPromise(searchPromise)) return;
|
|
1376
|
+
loading.value = true;
|
|
1377
|
+
try {
|
|
1378
|
+
await searchPromise;
|
|
1379
|
+
} finally {
|
|
1380
|
+
if (seq === searchSequence) {
|
|
1528
1381
|
loading.value = false;
|
|
1529
1382
|
}
|
|
1530
1383
|
}
|
|
@@ -1536,22 +1389,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1536
1389
|
_search();
|
|
1537
1390
|
});
|
|
1538
1391
|
};
|
|
1392
|
+
const customSlotNames = [
|
|
1393
|
+
"search-form",
|
|
1394
|
+
"button-bar",
|
|
1395
|
+
"toolbar",
|
|
1396
|
+
"table"
|
|
1397
|
+
];
|
|
1539
1398
|
const slots = useSlots();
|
|
1540
|
-
const
|
|
1541
|
-
const buttonBarSlot = slots["button-bar"];
|
|
1542
|
-
const toolbarSlot = slots["toolbar"];
|
|
1543
|
-
const tableSlots = computed(() => {
|
|
1544
|
-
const customNames = /* @__PURE__ */ new Set([
|
|
1545
|
-
"search-form",
|
|
1546
|
-
"button-bar",
|
|
1547
|
-
"toolbar",
|
|
1548
|
-
"table"
|
|
1549
|
-
]);
|
|
1550
|
-
return Object.fromEntries(
|
|
1551
|
-
Object.entries(slots).filter(([name]) => !customNames.has(name))
|
|
1552
|
-
);
|
|
1553
|
-
});
|
|
1554
|
-
const tableSlotNames = computed(() => Object.keys(tableSlots.value));
|
|
1399
|
+
const forwardedSlotNames = () => Object.keys(slots).filter((name) => !customSlotNames.includes(name));
|
|
1555
1400
|
const searchPage1st = () => {
|
|
1556
1401
|
var _a, _b;
|
|
1557
1402
|
(_b = (_a = props.table) == null ? void 0 : _a.setPageParam) == null ? void 0 : _b.call(_a, { current: 1 });
|
|
@@ -1652,11 +1497,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1652
1497
|
var _a;
|
|
1653
1498
|
(_a = attrs.onChange) == null ? void 0 : _a.call(attrs, currentPage, pageSize);
|
|
1654
1499
|
};
|
|
1655
|
-
const
|
|
1500
|
+
const searchFormVisible = computed(() => {
|
|
1656
1501
|
var _a, _b, _c, _d, _e;
|
|
1657
1502
|
const searchFields = (_b = (_a = props.table) == null ? void 0 : _a.searchForm) == null ? void 0 : _b.fields;
|
|
1658
1503
|
const fieldList = (Array.isArray(searchFields) ? searchFields : searchFields == null ? void 0 : searchFields.value) ?? [];
|
|
1659
|
-
return !!(
|
|
1504
|
+
return !!(((_c = computedSearchFormConfig.value) == null ? void 0 : _c.hidden) !== true && ((_d = props.table) == null ? void 0 : _d.searchForm) && ((_e = fieldList.filter((item) => !toValue(item.hidden))) == null ? void 0 : _e.length) > 0);
|
|
1660
1505
|
});
|
|
1661
1506
|
const computedControl = computed(() => {
|
|
1662
1507
|
const mergedControl = props.control ?? injectProps.value.control;
|
|
@@ -1680,13 +1525,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1680
1525
|
_search();
|
|
1681
1526
|
}
|
|
1682
1527
|
});
|
|
1528
|
+
__expose({
|
|
1529
|
+
/** 手动触发一次查询(与内部搜索共用 loading 竞态守卫),便于外部刷新列表 */
|
|
1530
|
+
search: _search
|
|
1531
|
+
});
|
|
1683
1532
|
return (_ctx, _cache) => {
|
|
1684
1533
|
const _directive_loading = resolveDirective("loading");
|
|
1685
1534
|
return openBlock(), createElementBlock("div", {
|
|
1686
1535
|
class: normalizeClass(["pro-table", unref(attrs).class]),
|
|
1687
1536
|
style: normalizeStyle(unref(attrs).style)
|
|
1688
1537
|
}, [
|
|
1689
|
-
|
|
1538
|
+
searchFormVisible.value || _ctx.$slots["search-form"] ? (openBlock(), createBlock(unref(_sfc_main$d), {
|
|
1690
1539
|
key: 0,
|
|
1691
1540
|
component: computedSearchFormConfig.value.container
|
|
1692
1541
|
}, {
|
|
@@ -1709,10 +1558,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1709
1558
|
createVNode(unref(_sfc_main$d), { component: computedTableContainer.value }, {
|
|
1710
1559
|
default: withCtx(() => [
|
|
1711
1560
|
createElementVNode("div", _hoisted_1, [
|
|
1712
|
-
|
|
1561
|
+
_ctx.$slots["button-bar"] ? (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
1713
1562
|
renderSlot(_ctx.$slots, "button-bar", {}, void 0, true)
|
|
1714
1563
|
])) : createCommentVNode("", true),
|
|
1715
|
-
|
|
1564
|
+
_ctx.$slots["toolbar"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
|
|
1716
1565
|
renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
|
|
1717
1566
|
])) : createCommentVNode("", true),
|
|
1718
1567
|
computedControl.value.sizeControl ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
@@ -1739,7 +1588,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1739
1588
|
]),
|
|
1740
1589
|
_: 2
|
|
1741
1590
|
}, [
|
|
1742
|
-
renderList(
|
|
1591
|
+
renderList(forwardedSlotNames(), (name) => {
|
|
1743
1592
|
return {
|
|
1744
1593
|
name,
|
|
1745
1594
|
fn: withCtx((scoped) => [
|
|
@@ -1766,7 +1615,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
|
1766
1615
|
};
|
|
1767
1616
|
}
|
|
1768
1617
|
});
|
|
1769
|
-
const ProTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-
|
|
1618
|
+
const ProTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-e9641e7c"]]);
|
|
1770
1619
|
function useTable(params = {}) {
|
|
1771
1620
|
const { data, columns, ...rest } = params;
|
|
1772
1621
|
const coreTable = useTable$1({
|
|
@@ -1826,9 +1675,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
1826
1675
|
}
|
|
1827
1676
|
});
|
|
1828
1677
|
}
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1678
|
+
provide(
|
|
1679
|
+
INJECT_COMPONENTS,
|
|
1680
|
+
computed(() => props.componentMap)
|
|
1681
|
+
);
|
|
1832
1682
|
provide(
|
|
1833
1683
|
LOCALE_INJECT_KEY,
|
|
1834
1684
|
computed(() => props.locale)
|