@qin-ui/antd-vue-pro 1.0.41 → 1.1.0

package/README.md

@@ -10,6 +10,8 @@
 npm i @qin-ui/antd-vue-pro
 ```
 
+> 注意：从v1.0.x 升级至 v1.1.x 版本有api优化调整，主要涉及到pro-component-provider组件component-vars的参数扁平化，版本升级时需注意
+
 
 
 #### 1. pro-component-provider
@@ -153,7 +155,9 @@ ant-design-vue ui组件库form组件的二次封装
       /** 中文名称 */
       label?: SlotComponentType;
       /** 插槽，可包含formItem插槽和component插槽 */
-      slots?: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], SlotComponentType>;
+      slots?: Partial<
+        Record<(typeof FORM_ITEM_SLOT_KEYS)[number], SlotComponentType>
+      >;
       /** 网格布局属性 */
       grid?: Grid;
       /** 子字段 */
@@ -174,6 +178,11 @@ ant-design-vue ui组件库form组件的二次封装
       componentClassName?: string;
       /** component容器包裹组件 */
       componentContainer?: ContainerComponent;
+      /**
+       * 值处理函数，onUpdateValue前执行，函数返回值将作为更新值
+       * @example (val) => val?.trim()
+       */
+      valueFormatter?: (val: any) => any;
     }
     ```
 
@@ -222,11 +231,15 @@ ant-design-vue ui组件库form组件的二次封装
    */
   type UseFormData = (initFormData: FormData) => {
     /** 表单数据Ref */
-    formData: Ref<FormData>;
+    formData: Ref<D | FormData>;
     /** 获取指定字段数据路径的值 */
     getFormData: GetFormData;
     /** 设置指定字段数据路径的值 */
     setFormData: SetFormData;
+    /** 当前正在编辑的字段path */
+    activePath: Ref<string | undefined>;
+    /** 设置当前正在编辑的字段path */
+    setActivePath: SetActivePath;
   };
   ```
 
@@ -244,7 +257,7 @@ import {
   type ProFormInstance,
   type Field,
   type Fields,
-} from '@qin-ui/antd-vue-pro';
+} from '@qin-ui/antd-vue-pro/src';
 import { h, ref } from 'vue';
 
 const proFormRef = ref<ProFormInstance | null>(null);
@@ -272,11 +285,17 @@ const CodeContainer: Field['componentContainer'] = (p, ctx) => {
 };
 
 const initFields: Fields = [
+  {
+    label: '登记所在地（省/市/县、区）',
+    key: '登记所在地（省/市/县、区）',
+    component: 'cascader',
+    slots: {},
+    options: [],
+  },
   {
     label: '用户名',
     key: 'username',
     component: 'input',
-    maxlength: 20,
     rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
   },
   {
@@ -289,6 +308,7 @@ const initFields: Fields = [
       { min: 4, message: '密码最小长度为5个字符' },
       { max: 18, message: '密码最大长度为18个字符' },
     ],
+    valueFormatter: val => val?.trim()
   },
   {
     label: '验证码',
@@ -302,11 +322,9 @@ const initFields: Fields = [
 const form = useForm({}, initFields);
 
 const componentVars: ComponentVars = {
-  proFormField: {
-    input: { maxlength: 50 },
-    textarea: { maxlength: 1000 },
-    'input-number': { max: 10 ** 12 - 1 },
-  },
+  input: { maxlength: 50, valueFormatter: val => val?.trim() },
+  textarea: { maxlength: 1000, valueFormatter: val => val?.trim() },
+  'input-number': { max: 10 ** 12 - 1 },
 };
 
 const submit = () => {

package/es/component-provider/index.js

@@ -1,7 +1,65 @@
-import { defineComponent, provide, renderSlot } from "vue";
-import "ant-design-vue";
-import { I as INJECT_COMPONENT_PROPS_KEYS } from "../form/index-914194dc.js";
-import { PRO_TABLE_INJECT_COMPONENT_PROPS_KEYS } from "../table/index.js";
+import { inject, provide, defineComponent, renderSlot } from "vue";
+const INJECT_KEYS = {
+  "pro-table": Symbol(""),
+  "pro-form": Symbol(""),
+  "pro-form-item": Symbol(""),
+  // field
+  "input": Symbol(""),
+  "textarea": Symbol(""),
+  "input-password": Symbol(""),
+  "input-search": Symbol(""),
+  "input-number": Symbol(""),
+  "select": Symbol(""),
+  "cascader": Symbol(""),
+  "date-picker": Symbol(""),
+  "date-picker.date": Symbol(""),
+  "date-picker.week": Symbol(""),
+  "date-picker.month": Symbol(""),
+  "date-picker.year": Symbol(""),
+  "date-picker.quarter": Symbol(""),
+  "range-picker": Symbol(""),
+  "time-picker": Symbol(""),
+  "checkbox-group": Symbol(""),
+  "radio-group": Symbol(""),
+  "switch": Symbol(""),
+  "slider": Symbol(""),
+  "tree-select": Symbol(""),
+  "transfer": Symbol("")
+};
+const getPopupContainer = (triggerNode) => triggerNode.closest(".ant-form");
+const INIT_PROPS_MAP = /* @__PURE__ */ new Map([
+  [INJECT_KEYS["pro-table"], {}],
+  [INJECT_KEYS["pro-form"], {}],
+  [INJECT_KEYS["pro-form-item"], {}],
+  // field
+  [INJECT_KEYS["input"], { maxlength: 100, allowClear: true, placeholder: "请输入" }],
+  [INJECT_KEYS["textarea"], { maxlength: 200, autoSize: { minRows: 3, maxRows: 6 }, showCount: true, allowClear: true, placeholder: "请输入" }],
+  [INJECT_KEYS["input-password"], { maxlength: 100, allowClear: true, placeholder: "请输入" }],
+  [INJECT_KEYS["input-number"], { max: 10 ** 15 - 1, min: -(10 ** 15 + 1), controls: false, allowClear: true, placeholder: "请输入" }],
+  [INJECT_KEYS["select"], { allowClear: true, placeholder: "请选择", getPopupContainer }],
+  [INJECT_KEYS["cascader"], { allowClear: true, placeholder: "请选择", getPopupContainer }],
+  [INJECT_KEYS["date-picker"], { allowClear: true, getPopupContainer }],
+  [INJECT_KEYS["date-picker.week"], { allowClear: true, getPopupContainer }],
+  [INJECT_KEYS["date-picker.month"], { allowClear: true, getPopupContainer }],
+  [INJECT_KEYS["date-picker.year"], { allowClear: true, getPopupContainer }],
+  [INJECT_KEYS["date-picker.quarter"], { allowClear: true, getPopupContainer }],
+  [INJECT_KEYS["time-picker"], { allowClear: true, getPopupContainer }],
+  [INJECT_KEYS["range-picker"], { allowClear: true, getPopupContainer }],
+  [INJECT_KEYS["checkbox-group"], { allowClear: true, getPopupContainer }],
+  [INJECT_KEYS["radio-group"], {}],
+  [INJECT_KEYS["switch"], {}],
+  [INJECT_KEYS["slider"], {}],
+  [INJECT_KEYS["tree-select"], {}],
+  [INJECT_KEYS["transfer"], {}]
+]);
+const useInjectProps = (key) => {
+  const initProps = INIT_PROPS_MAP.get(key) ?? {};
+  const injectProps = inject(key, {});
+  return { ...initProps, ...injectProps };
+};
+const useProviderProps = (key, value) => {
+  provide(key, value);
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
@@ -10,16 +68,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     if (props.componentVars) {
-      Object.values(props.componentVars).forEach((item) => {
-        const injectKeys = {
-          ...INJECT_COMPONENT_PROPS_KEYS,
-          ...PRO_TABLE_INJECT_COMPONENT_PROPS_KEYS
-        };
-        Object.entries(item).forEach(([key, value]) => {
-          if (Object.hasOwn(injectKeys, key)) {
-            provide(injectKeys[key], value);
-          }
-        });
+      Object.entries(props.componentVars).forEach(([key, val]) => {
+        const injectKey = INJECT_KEYS[key];
+        useProviderProps(injectKey, val);
       });
     }
     return (_ctx, _cache) => {
@@ -28,5 +79,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main as default
+  INIT_PROPS_MAP,
+  INJECT_KEYS,
+  _sfc_main as default,
+  useInjectProps,
+  useProviderProps
 };

package/es/form/{index-914194dc.js → index-f7d9290e.js}

@@ -1,5 +1,6 @@
 import { inject, ref, h as h$1, getCurrentInstance, nextTick, reactive, defineComponent, createVNode, shallowRef, watch, unref, provide, watchEffect, onBeforeUnmount, computed, isRef, Fragment, Comment, Text, isVNode, onMounted, cloneVNode, Transition, withDirectives, resolveDirective, onUpdated, onUnmounted, toRef, withModifiers, vShow, onBeforeMount, Teleport, TransitionGroup, toRaw, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementBlock, renderList, resolveDynamicComponent, normalizeProps, createSlots, createTextVNode, createCommentVNode, useAttrs, renderSlot, toDisplayString, shallowReactive } from "vue";
 import { Input, Textarea, InputSearch, InputPassword, InputNumber, Select, Cascader, DatePicker as DatePicker$1, RangePicker, TimePicker as TimePicker$1, CheckboxGroup, RadioGroup, Switch, Slider, TreeSelect, Transfer, Row as Row$1, Col as Col$1, FormItem as FormItem$1, message, Form as Form$2 } from "ant-design-vue";
+import { INIT_PROPS_MAP, useInjectProps, INJECT_KEYS } from "../component-provider/index.js";
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 const freeGlobal$1 = freeGlobal;
 var freeSelf = typeof self == "object" && self && self.Object === Object && self;
@@ -7113,7 +7114,7 @@ const useConfigInject = (name, props) => {
     var _a, _b;
     return (_a = props.getTargetContainer) !== null && _a !== void 0 ? _a : (_b = configProvider.getTargetContainer) === null || _b === void 0 ? void 0 : _b.value;
   });
-  const getPopupContainer2 = computed(() => {
+  const getPopupContainer = computed(() => {
     var _a, _b, _c;
     return (_b = (_a = props.getContainer) !== null && _a !== void 0 ? _a : props.getPopupContainer) !== null && _b !== void 0 ? _b : (_c = configProvider.getPopupContainer) === null || _c === void 0 ? void 0 : _c.value;
   });
@@ -7144,7 +7145,7 @@ const useConfigInject = (name, props) => {
     direction,
     size,
     getTargetContainer,
-    getPopupContainer: getPopupContainer2,
+    getPopupContainer,
     space,
     pageHeader,
     form,
@@ -12198,15 +12199,15 @@ const Trigger = defineComponent({
     attachParent(popupContainer) {
       wrapperRaf.cancel(this.attachId);
       const {
-        getPopupContainer: getPopupContainer2,
+        getPopupContainer,
         getDocument: getDocument2
       } = this.$props;
       const domNode = this.getRootDomNode();
       let mountNode;
-      if (!getPopupContainer2) {
+      if (!getPopupContainer) {
         mountNode = getDocument2(this.getRootDomNode()).body;
-      } else if (domNode || getPopupContainer2.length === 0) {
-        mountNode = getPopupContainer2(domNode);
+      } else if (domNode || getPopupContainer.length === 0) {
+        mountNode = getPopupContainer(domNode);
       }
       if (mountNode) {
         mountNode.appendChild(popupContainer);
@@ -12400,7 +12401,7 @@ const Trigger = defineComponent({
     const children = filterEmpty(getSlot(this));
     const {
       alignPoint: alignPoint2,
-      getPopupContainer: getPopupContainer2
+      getPopupContainer
     } = this.$props;
     const child = children[0];
     this.childOriginEvents = getEvents(child);
@@ -12454,7 +12455,7 @@ const Trigger = defineComponent({
     }), true, true);
     const portal = createVNode(Portal, {
       "key": "portal",
-      "getContainer": getPopupContainer2 && (() => getPopupContainer2(this.getRootDomNode())),
+      "getContainer": getPopupContainer && (() => getPopupContainer(this.getRootDomNode())),
       "didUpdate": this.handlePortalUpdate,
       "visible": this.$data.sPopupVisible
     }, {
@@ -13479,7 +13480,7 @@ const ToolTip = defineComponent({
     }
     const {
       prefixCls,
-      getPopupContainer: getPopupContainer2,
+      getPopupContainer,
       direction,
       rootPrefixCls
     } = useConfigInject("tooltip", props);
@@ -13628,7 +13629,7 @@ const ToolTip = defineComponent({
       const arrowContentStyle = colorInfo.value.arrowStyle;
       const vcTooltipProps = _extends$1(_extends$1(_extends$1({}, attrs), props), {
         prefixCls: prefixCls.value,
-        getPopupContainer: getPopupContainer2 === null || getPopupContainer2 === void 0 ? void 0 : getPopupContainer2.value,
+        getPopupContainer: getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value,
         builtinPlacements: tooltipPlacements.value,
         visible: tempVisible,
         ref: tooltip,
@@ -15719,52 +15720,6 @@ const RULE_TYPE_MAP = /* @__PURE__ */ new Map([
 ]);
 const FunctionRegexp = /^\s*function\s*\w*\s*\([^)]*\)\s*{([\s\S]*)}/g;
 const ArrowFunctionRegexp = /^\s*(?:\([^)]*\)|\w+)\s*=>\s*\(?({[\s\S]*}|[^;]*)\)?/g;
-const INJECT_COMPONENT_PROPS_KEYS = {
-  "input": Symbol(""),
-  "textarea": Symbol(""),
-  "input-password": Symbol(""),
-  "input-search": Symbol(""),
-  "input-number": Symbol(""),
-  "select": Symbol(""),
-  "cascader": Symbol(""),
-  "date-picker": Symbol(""),
-  "date-picker.date": Symbol(""),
-  "date-picker.week": Symbol(""),
-  "date-picker.month": Symbol(""),
-  "date-picker.year": Symbol(""),
-  "date-picker.quarter": Symbol(""),
-  "range-picker": Symbol(""),
-  "time-picker": Symbol(""),
-  "checkbox-group": Symbol(""),
-  "radio-group": Symbol(""),
-  "switch": Symbol(""),
-  "slider": Symbol(""),
-  "tree-select": Symbol(""),
-  "transfer": Symbol("")
-};
-const PROPS_KEYS = INJECT_COMPONENT_PROPS_KEYS;
-const getPopupContainer = (triggerNode) => triggerNode.closest(".ant-form");
-const INIT_COMPONENT_PROPS_MAP = /* @__PURE__ */ new Map([
-  [PROPS_KEYS.input, { maxlength: 100, allowClear: true, placeholder: "请输入" }],
-  [PROPS_KEYS.textarea, { maxlength: 200, autoSize: { minRows: 3, maxRows: 6 }, showCount: true, allowClear: true, placeholder: "请输入" }],
-  [PROPS_KEYS["input-password"], { maxlength: 100, allowClear: true, placeholder: "请输入" }],
-  [PROPS_KEYS["input-number"], { max: 10 ** 15 - 1, min: -(10 ** 15 + 1), controls: false, allowClear: true, placeholder: "请输入" }],
-  [PROPS_KEYS.select, { allowClear: true, placeholder: "请选择", getPopupContainer }],
-  [PROPS_KEYS.cascader, { allowClear: true, placeholder: "请选择", getPopupContainer }],
-  [PROPS_KEYS["date-picker"], { allowClear: true, getPopupContainer }],
-  [PROPS_KEYS["date-picker.week"], { allowClear: true, getPopupContainer }],
-  [PROPS_KEYS["date-picker.month"], { allowClear: true, getPopupContainer }],
-  [PROPS_KEYS["date-picker.year"], { allowClear: true, getPopupContainer }],
-  [PROPS_KEYS["date-picker.quarter"], { allowClear: true, getPopupContainer }],
-  [PROPS_KEYS["time-picker"], { allowClear: true, getPopupContainer }],
-  [PROPS_KEYS["range-picker"], { allowClear: true, getPopupContainer }],
-  [PROPS_KEYS["checkbox-group"], { allowClear: true, getPopupContainer }],
-  [PROPS_KEYS["radio-group"], {}],
-  [PROPS_KEYS.switch, {}],
-  [PROPS_KEYS.slider, {}],
-  [PROPS_KEYS["tree-select"], {}],
-  [PROPS_KEYS.transfer, {}]
-]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...{
     name: "BaseFormItem"
@@ -16349,16 +16304,15 @@ const useCommand = ({ refs, form }) => {
 };
 const useInitProps = () => {
   const initPropsMap = /* @__PURE__ */ new Map();
-  INIT_COMPONENT_PROPS_MAP.forEach((val, key) => {
-    const injectProps = inject(key, {});
-    const mergedProps = { ...val, ...injectProps };
-    initPropsMap.set(key, mergedProps);
+  INIT_PROPS_MAP.forEach((val, key) => {
+    const injectProps = useInjectProps(key);
+    initPropsMap.set(key, injectProps);
   });
   const getInitProps = (field) => {
     const { component, type: type4 = "" } = field;
     if (COMPONENT_MAP.has(component)) {
-      const k2 = `${component}${type4}`;
-      return initPropsMap.get(INJECT_COMPONENT_PROPS_KEYS[k2]) || {};
+      const k2 = [component, type4].filter(Boolean).join(".");
+      return initPropsMap.get(INJECT_KEYS[k2]) || {};
     }
     return {};
   };
@@ -16387,6 +16341,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         return get$1(formData == null ? void 0 : formData.value, props.path);
       },
       set(val) {
+        const { valueFormatter } = mergedAttrs.value;
+        if (valueFormatter && typeof valueFormatter === "function") {
+          updateFormData == null ? void 0 : updateFormData(props.path, valueFormatter(val));
+          return;
+        }
         updateFormData == null ? void 0 : updateFormData(props.path, val);
       }
     });
@@ -16475,7 +16434,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             ref: setComponentRef,
             [modelName.value]: value.value,
             ["onUpdate:" + modelName.value]: _cache[0] || (_cache[0] = ($event) => value.value = $event),
-            [modelName.value + "Modifiers"]: { trim: true },
             class: [unref(attrs).componentClassName, "field-component"],
             style: unref(attrs).componentStyle,
             path: _ctx.path,
@@ -16499,7 +16457,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const index_vue_vue_type_style_index_0_scoped_faa8a304_lang = "";
+const index_vue_vue_type_style_index_0_scoped_ae4b888f_lang = "";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -16507,7 +16465,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const BaseField = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-faa8a304"]]);
+const BaseField = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-ae4b888f"]]);
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
     name: "ContainerFragment",
@@ -16561,6 +16519,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:formData", "update:activePath"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const injectProps = useInjectProps(INJECT_KEYS["pro-form"]);
+    const injectAttrs = omit$1(injectProps, Object.keys(props));
     const emit = __emit;
     const refs = {
       formItemRefs: {},
@@ -16620,11 +16580,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     provide(UPDATE_ACTIVE_PATH, updateActivePath);
     __expose(exposed);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Form$2), {
+      return openBlock(), createBlock(unref(Form$2), mergeProps({
         ref_key: "formInstanceRef",
         ref: formInstanceRef,
         model: _formData.value
-      }, {
+      }, { ...unref(injectAttrs), ..._ctx.$attrs }), {
         default: withCtx(() => [
           createVNode(unref(_sfc_main$4), {
             fields: _fields.value,
@@ -16634,7 +16594,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["model"]);
+      }, 16, ["model"]);
     };
   }
 });
@@ -16643,7 +16603,6 @@ export {
   BaseField as B,
   COMPONENT_MAP as C,
   FORM_ITEM_SLOT_KEYS as F,
-  INJECT_COMPONENT_PROPS_KEYS as I,
   RULE_TYPE_MAP as R,
   UPDATE_FORM_DATA as U,
   _sfc_main as _,
@@ -16659,14 +16618,13 @@ export {
   UPDATE_ACTIVE_PATH as j,
   FunctionRegexp as k,
   ArrowFunctionRegexp as l,
-  INIT_COMPONENT_PROPS_MAP as m,
-  isFunctionString as n,
+  isFunctionString as m,
+  jsonStringifyReplacer as n,
   omit$1 as o,
-  jsonStringifyReplacer as p,
-  jsonParseReviver as q,
-  useFields as r,
-  useFormData as s,
-  useCommand as t,
-  useForm as u,
-  useInitProps as v
+  jsonParseReviver as p,
+  useFields as q,
+  useFormData as r,
+  useCommand as s,
+  useInitProps as t,
+  useForm as u
 };

package/es/form/index.js

@@ -1,6 +1,7 @@
-import { l, B, d, i, C, b, f, F, k, m, I, R, e, j, U, h, _, n, q, p, t, r, u, s, v } from "./index-914194dc.js";
+import { l, B, d, i, C, b, f, F, k, R, e, j, U, h, _, m, p, n, s, q, u, r, t } from "./index-f7d9290e.js";
 import "vue";
 import "ant-design-vue";
+import "../component-provider/index.js";
 export {
   l as ArrowFunctionRegexp,
   B as BaseField,
@@ -11,20 +12,18 @@ export {
   f as FORM_DATA,
   F as FORM_ITEM_SLOT_KEYS,
   k as FunctionRegexp,
-  m as INIT_COMPONENT_PROPS_MAP,
-  I as INJECT_COMPONENT_PROPS_KEYS,
   R as RULE_TYPE_MAP,
   e as SlotComponent,
   j as UPDATE_ACTIVE_PATH,
   U as UPDATE_FORM_DATA,
   h as UPDATE_REFS,
   _ as default,
-  n as isFunctionString,
-  q as jsonParseReviver,
-  p as jsonStringifyReplacer,
-  t as useCommand,
-  r as useFields,
+  m as isFunctionString,
+  p as jsonParseReviver,
+  n as jsonStringifyReplacer,
+  s as useCommand,
+  q as useFields,
   u as useForm,
-  s as useFormData,
-  v as useInitProps
+  r as useFormData,
+  t as useInitProps
 };