@qin-ui/vant-pro 1.0.0

package/es/form/index.js

@@ -0,0 +1,530 @@
+import { Button, Signature, Area, Cascader, TimePicker, DatePicker, Picker, RadioGroup, CheckboxGroup, Uploader, Slider, Rate, Stepper, Switch, Field, Form, Popup } from "vant";
+import { inject, reactive, ref, computed, provide, defineComponent, toValue, useSlots, watchEffect, createBlock, openBlock, unref, mergeProps, withCtx, createVNode, renderSlot, createElementVNode, useAttrs, createElementBlock, Fragment, createCommentVNode, Teleport, resolveDynamicComponent, isRef, createSlots, renderList, normalizeProps, isVNode, createTextVNode, toDisplayString, guardReactiveProps, resolveComponent } from "vue";
+import { INJECT_CONFIG, getInjectConfig, INJECT_COMPONENTS } from "../component-provider/index.js";
+import { u as useForm$1, I as InjectionFormKey, c as camelizeProperties, a as InjectionPathKey, b as useFields$1, d as useFormRef$1 } from "../core/index-D-2iAH6o.js";
+import { e } from "../core/index-D-2iAH6o.js";
+import { o as omit, c as cloneDeep, i as isPlainObject, t as toPath } from "../vendor/utils/lodash-es-DN4QDiDm.js";
+const componentMap = {
+  field: Field,
+  switch: Switch,
+  stepper: Stepper,
+  rate: Rate,
+  slider: Slider,
+  uploader: Uploader,
+  "checkbox-group": CheckboxGroup,
+  "radio-group": RadioGroup,
+  picker: Picker,
+  "date-picker": DatePicker,
+  "time-picker": TimePicker,
+  cascader: Cascader,
+  area: Area,
+  signature: Signature,
+  button: Button
+};
+const TeleportComponentNamePrefix = "TeleportComponent_";
+const InjectionPopupKey = Symbol("form-popup");
+function useFormPopup(initRoot) {
+  if (!initRoot) {
+    const injectStore = inject(InjectionPopupKey, void 0);
+    if (injectStore) return injectStore;
+  }
+  const props = reactive({
+    safeAreaInsetBottom: true,
+    position: "bottom",
+    round: true
+  });
+  const popupFieldPath = ref();
+  const popupFieldValue = ref();
+  function open(path) {
+    popupFieldPath.value = path;
+  }
+  function close() {
+    popupFieldPath.value = void 0;
+    popupFieldValue.value = void 0;
+  }
+  const visible = computed(() => !!popupFieldPath.value);
+  function updateProps(_props) {
+    Object.assign(props, _props);
+  }
+  const store = {
+    props,
+    open,
+    close,
+    updateProps,
+    visible,
+    popupFieldPath,
+    popupFieldValue
+  };
+  provide(InjectionPopupKey, store);
+  return store;
+}
+function useForm(...args) {
+  let root = true;
+  if (args.length === 1) {
+    root = args[0];
+  } else if (args.length >= 2) {
+    root = args[2] ?? root;
+  }
+  const form = useForm$1(...args);
+  const formPopup = useFormPopup(root);
+  return { ...form, formPopup };
+}
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ProForm", inheritAttrs: false },
+  __name: "index",
+  props: {
+    form: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = props.form || useForm(true);
+    provide(InjectionFormKey, form);
+    const { fields, setFormRef, formPopup } = form;
+    const formFields = computed(() => {
+      const f = toValue(fields);
+      return Array.isArray(f) ? f : [];
+    });
+    const config = INJECT_CONFIG["pro-form"];
+    const injectAttrs = inject(config.injectionKey, config.default);
+    const slots = useSlots();
+    watchEffect(() => {
+      Object.keys(slots).forEach((name) => {
+        if (name === "default") return;
+        provide(`${TeleportComponentNamePrefix}${name}`, slots[name]);
+      });
+    });
+    const popupProps = computed(() => {
+      const { container, ...rest } = formPopup.props;
+      return rest;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Form), mergeProps({
+        ref: (el) => {
+          var _a;
+          return (_a = unref(setFormRef)) == null ? void 0 : _a(el);
+        }
+      }, mergeProps(unref(injectAttrs), unref(camelizeProperties)(_ctx.$attrs)), { class: "pro-form" }), {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main), { fields: formFields.value }, null, 8, ["fields"]),
+          createVNode(unref(Popup), mergeProps(popupProps.value, {
+            show: unref(formPopup).visible.value,
+            teleport: "#app",
+            onClose: unref(formPopup).close
+          }), {
+            default: withCtx(() => [..._cache[0] || (_cache[0] = [
+              createElementVNode("div", { id: "pro-form-popup-content" }, null, -1)
+            ])]),
+            _: 1
+          }, 16, ["show", "onClose"]),
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
+});
+const getInitProps = (field) => {
+  const { component } = field;
+  if (typeof component === "string") {
+    const config = getInjectConfig(component);
+    if (!config) return {};
+    const injectProps = inject(config.injectionKey, config.default);
+    return injectProps;
+  }
+  return {};
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{ name: "BaseField", inheritAttrs: false },
+  __name: "index",
+  props: {
+    component: { default: () => void 0 },
+    path: { default: "" }
+  },
+  setup(__props, { expose: __expose }) {
+    const uiFieldPropsKeys = Object.keys(Field.props || {});
+    const form = useForm(false);
+    const { getFormData, setFormData, formPopup } = form;
+    const { popupFieldPath, popupFieldValue } = formPopup;
+    const componentRef = ref();
+    const fieldRef = ref();
+    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);
+      }
+    });
+    const popupCloseEventName = computed(() => {
+      let confirm = "onConfirm";
+      let cancel = "onCancel";
+      if (__props.component === "cascader") {
+        confirm = "onFinish";
+        cancel = "onClose";
+      } else if (__props.component === "signature") {
+        confirm = "onSubmit";
+      }
+      return { confirm, cancel };
+    });
+    const groupedAttrs = computed(() => {
+      const initProps = getInitProps({
+        component: __props.component,
+        type: attrs.type
+      });
+      const modelPropName = attrs.modelProp ?? initProps.modelProp ?? "modelValue";
+      const mergedProps = mergeProps(
+        initProps,
+        attrs,
+        { disabled: attrs.disabled ?? initProps.disabled },
+        { modelProp: modelPropName }
+      );
+      const { valueFormatter, displayFormatter, modelProp, slots, fieldClass, fieldStyle, componentContainer, popup, ...rest } = mergedProps;
+      const modelBindingProp = modelProp ?? "modelValue";
+      const bindAttrs = omit(rest, [
+        modelBindingProp,
+        `onUpdate:${modelBindingProp}`
+      ]);
+      if (popup) {
+        const {
+          [popupCloseEventName.value.confirm]: confirmEvent,
+          [popupCloseEventName.value.cancel]: cancelEvent
+        } = bindAttrs;
+        Object.assign(bindAttrs, {
+          [popupCloseEventName.value.confirm]: (...args) => {
+            value.value = popupFieldValue.value;
+            formPopup.close();
+            confirmEvent == null ? void 0 : confirmEvent(...args);
+          },
+          [popupCloseEventName.value.cancel]: (...args) => {
+            formPopup.close();
+            cancelEvent == null ? void 0 : cancelEvent(...args);
+          }
+        });
+      }
+      const fieldAttrs = Object.keys(bindAttrs).reduce(
+        (acc, key) => {
+          if ((uiFieldPropsKeys.includes(key) || key.startsWith("on")) && key !== "type") {
+            acc[key] = bindAttrs[key];
+          }
+          return acc;
+        },
+        { class: fieldClass, style: fieldStyle }
+      );
+      return {
+        attrs: bindAttrs,
+        fieldAttrs,
+        slots,
+        componentContainer,
+        modelProp: modelBindingProp,
+        valueFormatter,
+        displayFormatter,
+        popup
+      };
+    });
+    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;
+    });
+    const popupAble = computed(() => !!groupedAttrs.value.popup);
+    const popupContainer = computed(
+      () => {
+        var _a;
+        return typeof groupedAttrs.value.popup === "boolean" ? void 0 : (_a = groupedAttrs.value.popup) == null ? void 0 : _a.container;
+      }
+    );
+    const displayValue = computed(() => {
+      const { displayFormatter } = groupedAttrs.value;
+      if (displayFormatter && typeof displayFormatter === "function") {
+        return displayFormatter(value.value);
+      }
+      return value.value;
+    });
+    const onFieldClick = () => {
+      const attrs2 = groupedAttrs.value.attrs;
+      if (!popupAble.value || attrs2.disabled || attrs2.readonly) return;
+      const popupProps = typeof groupedAttrs.value.popup === "object" ? groupedAttrs.value.popup : {};
+      formPopup.updateProps(popupProps);
+      popupFieldValue.value = value.value;
+      formPopup.open(__props.path);
+    };
+    __expose({
+      getComponentRef: () => componentRef.value || fieldRef.value,
+      getComponentComputedProps: () => groupedAttrs.value.attrs
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$4), {
+        component: groupedAttrs.value.componentContainer,
+        path: __props.path
+      }, {
+        default: withCtx(() => [
+          popupAble.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createVNode(unref(Field), mergeProps({
+              ref_key: "fieldRef",
+              ref: fieldRef
+            }, {
+              readonly: true,
+              clickable: true,
+              isLink: true,
+              ...groupedAttrs.value.fieldAttrs
+            }, {
+              "model-value": displayValue.value,
+              onClick: onFieldClick
+            }), null, 16, ["model-value"]),
+            unref(popupFieldPath) === __props.path ? (openBlock(), createBlock(unref(_sfc_main$4), {
+              key: 0,
+              component: Teleport,
+              to: "#pro-form-popup-content",
+              defer: ""
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(_sfc_main$4), {
+                  component: popupContainer.value,
+                  path: __props.path
+                }, {
+                  default: withCtx(() => [
+                    is.value ? (openBlock(), createBlock(resolveDynamicComponent(is.value), mergeProps({ key: 0 }, groupedAttrs.value.attrs, {
+                      [`${groupedAttrs.value.modelProp}`]: unref(popupFieldValue),
+                      [`onUpdate:${groupedAttrs.value.modelProp}`]: _cache[0] || (_cache[0] = ($event) => isRef(popupFieldValue) ? popupFieldValue.value = $event : null)
+                    }), createSlots({ _: 2 }, [
+                      renderList(groupedAttrs.value.slots, (slot, name) => {
+                        return {
+                          name,
+                          fn: withCtx((scoped) => [
+                            createVNode(unref(_sfc_main$3), mergeProps({ path: __props.path }, scoped, { component: slot }), null, 16, ["path", "component"])
+                          ])
+                        };
+                      })
+                    ]), 1040)) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 8, ["component", "path"])
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ], 64)) : typeof __props.component === "string" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            __props.component === "field" ? (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[1] || (_cache[1] = ($event) => value.value = $event),
+              name: __props.path
+            }), createSlots({ _: 2 }, [
+              renderList(groupedAttrs.value.slots, (slot, name) => {
+                return {
+                  name,
+                  fn: withCtx((scoped) => [
+                    createVNode(unref(_sfc_main$3), mergeProps({ path: __props.path }, scoped, { component: slot }), null, 16, ["path", "component"])
+                  ])
+                };
+              })
+            ]), 1040, ["name"])) : (openBlock(), createBlock(unref(Field), mergeProps({
+              key: 1,
+              ref_key: "fieldRef",
+              ref: fieldRef
+            }, groupedAttrs.value.fieldAttrs, { name: __props.path }), {
+              input: 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[2] || (_cache[2] = ($event) => value.value = $event)
+                }), createSlots({ _: 2 }, [
+                  renderList(groupedAttrs.value.slots, (slot, name) => {
+                    return {
+                      name,
+                      fn: withCtx((scoped) => [
+                        createVNode(unref(_sfc_main$3), mergeProps({ path: __props.path }, scoped, { component: slot }), null, 16, ["path", "component"])
+                      ])
+                    };
+                  })
+                ]), 1040)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 16, ["name"]))
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            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[3] || (_cache[3] = ($event) => value.value = $event)
+            }), createSlots({ _: 2 }, [
+              renderList(groupedAttrs.value.slots, (slot, name) => {
+                return {
+                  name,
+                  fn: withCtx((scoped) => [
+                    createVNode(unref(_sfc_main$3), mergeProps({ path: __props.path }, scoped, { component: slot }), null, 16, ["path", "component"])
+                  ])
+                };
+              })
+            ]), 1040)) : createCommentVNode("", true)
+          ], 64))
+        ]),
+        _: 1
+      }, 8, ["component", "path"]);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ContainerFragment", inheritAttrs: false },
+  __name: "index",
+  props: {
+    component: { type: [Object, Function, String, Symbol] }
+  },
+  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$3 = /* @__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$2 = /* @__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$1 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    field: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const groupedAttributes = computed(() => {
+      let componentProps = {};
+      if (isPlainObject(props.field)) {
+        const { path, formItemContainer, fields, hidden, extraProps, ...rest } = props.field;
+        componentProps = rest;
+      }
+      return { componentProps };
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(groupedAttributes.value)));
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "BaseFormItem", inheritAttrs: false },
+  __name: "index",
+  props: {
+    fields: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const validFields = computed(() => {
+      const f = toValue(props.fields);
+      if (!Array.isArray(f)) return [];
+      return f.filter((field) => !toValue(field.hidden));
+    });
+    return (_ctx, _cache) => {
+      const _component_BaseFormItem = resolveComponent("BaseFormItem");
+      return openBlock(true), createElementBlock(Fragment, null, renderList(validFields.value, (field, index) => {
+        return openBlock(), createBlock(unref(_sfc_main$2), {
+          key: unref(toPath)(toValue(field.path || index)).join(".") || index,
+          path: toValue(field.path)
+        }, {
+          default: withCtx(({ path }) => [
+            createVNode(unref(_sfc_main$1), { field }, {
+              default: withCtx(({ componentProps }) => [
+                field.fields ? (openBlock(), createBlock(unref(_sfc_main$4), mergeProps({
+                  key: 0,
+                  component: field.fieldContainer,
+                  path
+                }, { ref_for: true }, componentProps), {
+                  default: withCtx(() => [
+                    createVNode(_component_BaseFormItem, {
+                      fields: field.fields
+                    }, null, 8, ["fields"])
+                  ]),
+                  _: 2
+                }, 1040, ["component", "path"])) : (openBlock(), createBlock(unref(_sfc_main$5), mergeProps({
+                  key: 1,
+                  ref_for: true
+                }, componentProps, { path }), null, 16, ["path"]))
+              ]),
+              _: 2
+            }, 1032, ["field"])
+          ]),
+          _: 2
+        }, 1032, ["path"]);
+      }), 128);
+    };
+  }
+});
+const useFields = useFields$1;
+const useFormRef = useFormRef$1;
+export {
+  _sfc_main$5 as BaseField,
+  _sfc_main$6 as BaseForm,
+  _sfc_main as BaseFormItem,
+  _sfc_main$4 as ContainerFragment,
+  _sfc_main$1 as GroupedFieldAttrs,
+  InjectionFormKey,
+  InjectionPathKey,
+  InjectionPopupKey,
+  _sfc_main$2 as PathProvider,
+  _sfc_main$3 as SlotComponent,
+  TeleportComponentNamePrefix,
+  componentMap,
+  _sfc_main$6 as default,
+  getInitProps,
+  useFields,
+  useForm,
+  e as useFormData,
+  useFormPopup,
+  useFormRef
+};