cnhis-design-vue 3.3.1-beta.9 → 3.3.1-release.5

package/es/components/form-render/src/hooks/useFormEvent.js

@@ -1 +1,281 @@
-import{arrayed as e,findAncestor as t,targetStringIncludes as r}from"../../../../shared/utils/index.js";import{isField as o}from"@formily/core";import{Path as n}from"@formily/path";import{isObject as i}from"@vue/shared";import{promiseTimeout as a}from"@vueuse/shared";import{isFunction as s,isArray as l,castArray as d,isString as u}from"lodash-es";import{nextTick as c}from"vue";import"../../index.js";import{NESTED_FORM_ITEM_TYPE as m}from"../constants/index.js";import{formValueFormatter as f}from"../utils/valueFormatter.js";import{queryDecoratorByAddress as p,queryInput as g,queryDecoratorByFieldKey as v,findNextWidget as y}from"../utils/dom.js";import{validateMessageParser as h,combineExtendKey as S,splitExtendKey as b,isEnter as x}from"../utils/index.js";import{getParentLinebar as F}from"../utils/schema.js";import{useSelectedSetting as C}from"./useSelectedSetting.js";function E({formModel:t,formRenderRef:r,formUUID:a,getFieldList:m,formItemDepsCollector:y,businessCollector:x,wordbookSettingHandler:E,operationalFormHandler:D,changeContextCollector:I,emitFormChange:j}){const{applySelectedSetting:w}=C();return{validate(n,{force:c}={}){if(null==n&&(n="*"),s(n)){const e=Object.entries(t.fields).reduce(((e,[t,r])=>(n(r)&&e.push(t),e)),[]);if(!e.length)return Promise.resolve();n=e.length?`*(${e.join(",")})`:"*"}const m=[];c&&t.setFieldState(n,(e=>{"visible"===e.display&&"editable"!==e.pattern&&o(e)&&(m.push({pattern:e.pattern,state:e}),e.pattern="editable")}));const f=t.validate(n).catch((e=>Promise.reject(Array.isArray(e)?e.reduce(v,[]):e)));return c&&m.forEach((({pattern:e,state:t})=>t.pattern=e)),f;function v(t,r){if(!i(r))return t;let o=!1;return l(r.messages)&&r.messages.forEach((r=>{i(r)&&(t.push(...e(r).map(y)),o=!0)})),!o&&t.push(y(r)),t}function y(e){if(e.decoratorElement)return e;const o=t.query(e.path),n=o.get("title"),s=d(e.messages).map((e=>function(e,t){if(!t||!i(t.fieldItem))return e;const r=t.fieldItem.defined_error_msg;return h(r&&u(r)?r:e,t.fieldItem)}(e,o.get("decoratorProps")))),l=p(e.address,r.value,a);return{...e,messages:s,title:n,decoratorElement:l,...g(l)}}},getFormValues(e=!0){let r=t.getFormState().values;return e&&(r=S(m(),r)),r},async setFormValues(e,r){r=Object.assign({avoidDependKeyConnection:!0,needSplitExtendKey:!0,avoidWordbookSettingConnection:!0,avoidOperationalFormConnection:!0,dependKeyKeepValue:!1,avoidBusinessConnection:!1,avoidFormChangeEvent:!1,overwrite:!0},r),x.triggerDisabled=r.avoidBusinessConnection,y.triggerDisabled=r.avoidDependKeyConnection,y.keepValue=r.dependKeyKeepValue,E.triggerDisabled=r.avoidWordbookSettingConnection,D.triggerDisabled=r.avoidOperationalFormConnection,r.needSplitExtendKey&&(e=b(m(),e)),r.avoidFormChangeEvent&&(j.value=!1),t.setFieldState("*",(t=>{o(t)&&(r.overwrite||n.existIn(e,t.path))&&(t.value=n.getIn(e,t.path))})),await c(),j.value=!0,x.triggerDisabled=!1,y.triggerDisabled=!1,E.triggerDisabled=!1,D.triggerDisabled=!1,y.keepValue=!1},setFieldState(e,r){t.setFieldState(e,r)},resetFields:(e="*")=>t.reset(e),queryWidget:e=>async function(e,t,o){if(!r.value)return l();const i=v(e,t,a);if(i)return l(i);const s=F(e,o);return s?(y.trigger(n.parse(s),!0),await c(),l(v(e,t,a))):l();function l(e){return{decoratorElement:e,...g(e)}}}(e,r.value,m()),applySelectedSetting(e){const r=t.getFormState().values;w(r,e,((e,r)=>{t.setFieldState(e,(e=>{o(e)&&e.setValue(r)}))}))},getTextFormValues:()=>f(t,I)}}function D({props:e,formRenderRef:o,formModel:n,formUUID:i}){return{onKeydown:async function l(d){var u,c;if(!d.isComposing)if(x(d)){if(e.enterToNextWidget&&d.target){if("TEXTAREA"===d.target.tagName&&!d.ctrlKey)return;null==(u=d.preventDefault)||u.call(d)}if(await a(0),Reflect.get(d,"stopCapture")||!e.enterToNextWidget||!o.value)return;const r=t(d.target,(e=>e.classList.contains("form-render__formItem")));if(!r)return;const i=`.form-render__formItem${m.map((e=>`:not([widget-type=${e}])`)).join("")}`,p=Array.from(o.value.querySelectorAll(i)),g=p.findIndex((e=>e.id===r.id));if(!~g)return;const{widget:v,field:h}=y(p,g,d.target);if(!v)return;if(s(e.enterToNextWidget)){const t=h&&n.query(h).take();!t||e.enterToNextWidget(null==(c=t.decoratorProps)?void 0:c.fieldItem)?f(v,e.autoExpand):l({target:v,code:"Enter"})}else f(v,e.autoExpand)}else if("Tab"===d.code){if(!e.autoExpand)return;await a(0);const t=document.querySelector(":focus");if(!t)return;f(t,!0)}async function f(e,o){if(await a(0),e.focus(),!o)return;if(!t(e,(e=>e.getAttribute("uuid")===i)))return;if(!r(["radio","checkbox"],e.className))if(e.click(),"INPUT"!==e.tagName){const t=e.querySelector("input");if(!t)return;t.focus(),n(t)}else n(e);function n(e){if("INPUT"!==e.tagName)return;const t=e.value;t&&t.match(/^\d{4}-\d{2}/)&&e.setSelectionRange(0,4)}}}}}export{D as useFormDomEvent,E as useFormExposeEvent};
+import { arrayed, findAncestor, targetStringIncludes } from '../../../../shared/utils/index.js';
+import { isField } from '@formily/core';
+import { Path } from '@formily/path';
+import { isObject } from '@vue/shared';
+import { promiseTimeout } from '@vueuse/shared';
+import { isFunction, isArray, castArray, isString } from 'lodash-es';
+import { nextTick } from 'vue';
+import '../../index.js';
+import { NESTED_FORM_ITEM_TYPE } from '../constants/index.js';
+import { formValueFormatter } from '../utils/valueFormatter.js';
+import { queryDecoratorByAddress, queryInput, queryDecoratorByFieldKey, findNextWidget } from '../utils/dom.js';
+import { validateMessageParser, combineExtendKey, splitExtendKey, isEnter } from '../utils/index.js';
+import { getParentLinebar } from '../utils/schema.js';
+import { useSelectedSetting } from './useSelectedSetting.js';
+
+function useFormExposeEvent({
+  formModel,
+  formRenderRef,
+  formUUID,
+  getFieldList,
+  formItemDepsCollector,
+  businessCollector,
+  wordbookSettingHandler: wordbookSettingHandler2,
+  operationalFormHandler,
+  changeContextCollector,
+  emitFormChange
+}) {
+  async function queryWidget(key, wrapperElement, fieldList) {
+    if (!formRenderRef.value)
+      return createResult();
+    const decoratorElement = queryDecoratorByFieldKey(key, wrapperElement, formUUID);
+    if (decoratorElement)
+      return createResult(decoratorElement);
+    const parentLinebarKey = getParentLinebar(key, fieldList);
+    if (!parentLinebarKey)
+      return createResult();
+    formItemDepsCollector.trigger(Path.parse(parentLinebarKey), true);
+    await nextTick();
+    return createResult(queryDecoratorByFieldKey(key, wrapperElement, formUUID));
+    function createResult(decoratorElement2) {
+      return {
+        decoratorElement: decoratorElement2,
+        ...queryInput(decoratorElement2)
+      };
+    }
+  }
+  const {
+    applySelectedSetting
+  } = useSelectedSetting();
+  return {
+    validate(path, {
+      force
+    } = {}) {
+      path == null && (path = "*");
+      if (isFunction(path)) {
+        const validPaths = Object.entries(formModel.fields).reduce((res, [key, value]) => {
+          if (path(value))
+            res.push(key);
+          return res;
+        }, []);
+        if (!validPaths.length)
+          return Promise.resolve();
+        path = validPaths.length ? `*(${validPaths.join(",")})` : "*";
+      }
+      const notEditableFields = [];
+      if (force) {
+        formModel.setFieldState(path, (state) => {
+          if (state.display !== "visible" || state.pattern === "editable" || !isField(state))
+            return;
+          notEditableFields.push({
+            pattern: state.pattern,
+            state
+          });
+          state.pattern = "editable";
+        });
+      }
+      const result = formModel.validate(path).catch((err) => {
+        return Promise.reject(Array.isArray(err) ? err.reduce(errInfoNormalize, []) : err);
+      });
+      if (force) {
+        notEditableFields.forEach(({
+          pattern,
+          state
+        }) => state.pattern = pattern);
+      }
+      return result;
+      function errInfoNormalize(result2, error) {
+        if (!isObject(error))
+          return result2;
+        let hasChildMessage = false;
+        if (isArray(error.messages)) {
+          error.messages.forEach((message) => {
+            if (!isObject(message))
+              return;
+            result2.push(...arrayed(message).map(bindErrorInfo));
+            hasChildMessage = true;
+          });
+        }
+        !hasChildMessage && result2.push(bindErrorInfo(error));
+        return result2;
+      }
+      function bindErrorInfo(info) {
+        if (info.decoratorElement)
+          return info;
+        const pattern = formModel.query(info.path);
+        const title = pattern.get("title");
+        const messages = castArray(info.messages).map((message) => errMessageNormalize(message, pattern.get("decoratorProps")));
+        const decoratorElement = queryDecoratorByAddress(info.address, formRenderRef.value, formUUID);
+        return {
+          ...info,
+          messages,
+          title,
+          decoratorElement,
+          ...queryInput(decoratorElement)
+        };
+      }
+      function errMessageNormalize(message, decoratorProps) {
+        if (!decoratorProps || !isObject(decoratorProps.fieldItem))
+          return message;
+        const defined_error_msg = decoratorProps.fieldItem.defined_error_msg;
+        return validateMessageParser(defined_error_msg && isString(defined_error_msg) ? defined_error_msg : message, decoratorProps.fieldItem);
+      }
+    },
+    getFormValues(needCombineExtendKey = true) {
+      let result = formModel.getFormState().values;
+      if (needCombineExtendKey)
+        result = combineExtendKey(getFieldList(), result);
+      return result;
+    },
+    async setFormValues(values, options) {
+      options = Object.assign({
+        avoidDependKeyConnection: true,
+        needSplitExtendKey: true,
+        avoidWordbookSettingConnection: true,
+        avoidOperationalFormConnection: true,
+        dependKeyKeepValue: false,
+        avoidBusinessConnection: false,
+        avoidFormChangeEvent: false,
+        overwrite: true
+      }, options);
+      businessCollector.triggerDisabled = options.avoidBusinessConnection;
+      formItemDepsCollector.triggerDisabled = options.avoidDependKeyConnection;
+      formItemDepsCollector.keepValue = options.dependKeyKeepValue;
+      wordbookSettingHandler2.triggerDisabled = options.avoidWordbookSettingConnection;
+      operationalFormHandler.triggerDisabled = options.avoidOperationalFormConnection;
+      if (options.needSplitExtendKey) {
+        values = splitExtendKey(getFieldList(), values);
+      }
+      if (options.avoidFormChangeEvent) {
+        emitFormChange.value = false;
+      }
+      formModel.setFieldState("*", (state) => {
+        if (!isField(state))
+          return;
+        if (!options.overwrite && !Path.existIn(values, state.path))
+          return;
+        state.value = Path.getIn(values, state.path);
+      });
+      await nextTick();
+      emitFormChange.value = true;
+      businessCollector.triggerDisabled = false;
+      formItemDepsCollector.triggerDisabled = false;
+      wordbookSettingHandler2.triggerDisabled = false;
+      operationalFormHandler.triggerDisabled = false;
+      formItemDepsCollector.keepValue = false;
+    },
+    setFieldState(path, setter) {
+      formModel.setFieldState(path, setter);
+    },
+    resetFields(path = "*") {
+      return formModel.reset(path);
+    },
+    queryWidget(key) {
+      return queryWidget(key, formRenderRef.value, getFieldList());
+    },
+    applySelectedSetting(selectedSettings) {
+      const formData = formModel.getFormState().values;
+      applySelectedSetting(formData, selectedSettings, (key, value) => {
+        formModel.setFieldState(key, (state) => {
+          isField(state) && state.setValue(value);
+        });
+      });
+    },
+    getTextFormValues() {
+      return formValueFormatter(formModel, changeContextCollector);
+    }
+  };
+}
+function useFormDomEvent({
+  props,
+  formRenderRef,
+  formModel,
+  formUUID
+}) {
+  async function onKeydown(event) {
+    var _a, _b;
+    if (event.isComposing)
+      return;
+    if (isEnter(event)) {
+      if (props.enterToNextWidget) {
+        if (event.target) {
+          const isTextarea = event.target.tagName === "TEXTAREA";
+          if (isTextarea && !event.ctrlKey)
+            return;
+          (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+        }
+      }
+      await promiseTimeout(0);
+      if (Reflect.get(event, "stopCapture") || !props.enterToNextWidget || !formRenderRef.value)
+        return;
+      const ancestorFormItem = findAncestor(event.target, (ele) => ele.classList.contains("form-render__formItem"));
+      if (!ancestorFormItem)
+        return;
+      const selector = `.form-render__formItem${NESTED_FORM_ITEM_TYPE.map((type) => `:not([widget-type=${type}])`).join("")}`;
+      const formItemElements = Array.from(formRenderRef.value.querySelectorAll(selector));
+      const formItemIndex = formItemElements.findIndex((ele) => ele.id === ancestorFormItem.id);
+      if (!~formItemIndex)
+        return;
+      const {
+        widget,
+        field
+      } = findNextWidget(formItemElements, formItemIndex, event.target);
+      if (!widget)
+        return;
+      if (isFunction(props.enterToNextWidget)) {
+        const formItemInstance = field && formModel.query(field).take();
+        !formItemInstance || props.enterToNextWidget((_b = formItemInstance.decoratorProps) == null ? void 0 : _b.fieldItem) ? focus(widget, props.autoExpand) : onKeydown({
+          target: widget,
+          code: "Enter"
+        });
+      } else {
+        focus(widget, props.autoExpand);
+      }
+    } else if (event.code === "Tab") {
+      if (!props.autoExpand)
+        return;
+      await promiseTimeout(0);
+      const focusEle = document.querySelector(":focus");
+      if (!focusEle)
+        return;
+      focus(focusEle, true);
+    }
+    async function focus(widget, click) {
+      await promiseTimeout(0);
+      widget.focus();
+      if (!click)
+        return;
+      const inForm = findAncestor(widget, (ele) => {
+        return ele.getAttribute("uuid") === formUUID;
+      });
+      if (!inForm)
+        return;
+      const isRadioOrCheckbox = targetStringIncludes(["radio", "checkbox"], widget.className);
+      if (isRadioOrCheckbox)
+        return;
+      widget.click();
+      if (widget.tagName !== "INPUT") {
+        const input = widget.querySelector("input");
+        if (!input)
+          return;
+        input.focus();
+        timePickerFocus(input);
+      } else {
+        timePickerFocus(widget);
+      }
+      function timePickerFocus(input) {
+        if (input.tagName !== "INPUT")
+          return;
+        const value = input.value;
+        if (!value || !value.match(/^\d{4}-\d{2}/))
+          return;
+        input.setSelectionRange(0, 4);
+      }
+    }
+  }
+  return {
+    onKeydown
+  };
+}
+
+export { useFormDomEvent, useFormExposeEvent };

package/es/components/form-render/src/hooks/useFormField.js

@@ -1 +1,14 @@
-import{useField as e}from"@formily/vue";import{computed as t}from"vue";function r(){const r=e();return{field:r,title:t((()=>r.value.title)),fieldKey:t((()=>r.value.props.name.toString())),fieldAddress:t((()=>r.value.address.toString()))}}export{r as useFormField};
+import { useField } from '@formily/vue';
+import { computed } from 'vue';
+
+function useFormField() {
+  const field = useField();
+  return {
+    field,
+    title: computed(() => field.value.title),
+    fieldKey: computed(() => field.value.props.name.toString()),
+    fieldAddress: computed(() => field.value.address.toString())
+  };
+}
+
+export { useFormField };

package/es/components/form-render/src/hooks/useFormGraph.js

@@ -1 +1,18 @@
-import{observable as r}from"@formily/reactive";function e(){const e=r.shallow({});return{setGraph:function(r){e[r.address.toString()]=r},removeGraph:function(r){Reflect.deleteProperty(e,r.address.toString())},observeFormGraph:e}}export{e as useFormGraph};
+import { observable } from '@formily/reactive';
+
+function useFormGraph() {
+  const observeFormGraph = observable.shallow({});
+  function setGraph(field) {
+    observeFormGraph[field.address.toString()] = field;
+  }
+  function removeGraph(field) {
+    Reflect.deleteProperty(observeFormGraph, field.address.toString());
+  }
+  return {
+    setGraph,
+    removeGraph,
+    observeFormGraph
+  };
+}
+
+export { useFormGraph };

package/es/components/form-render/src/hooks/useFormItemDeps.js

@@ -1 +1,54 @@
-import{Path as e}from"@formily/path";import{isFunction as t,isString as r}from"lodash-es";import"../../index.js";import{getAbsoluteKey as i}from"../utils/index.js";import{traverseDependKey as s}from"../utils/schema.js";class o{constructor(){this.triggerDisabled=!1,this.keepValue=!1,this.collector=new Map}setDeps(e,t,r){s(t,((t,s,o)=>{const l=i(t,e),a=this.collector.get(l)||new Map;a.set(e,{dependKey:o,callback:r}),this.collector.set(l,a)}))}trigger(i,s){if(!0===this.triggerDisabled)return;const o=this.collector.get(i.toString());o&&[...o.entries()].forEach((([i,{dependKey:o,callback:l}])=>{if(!t(l)||this.triggerDisabled&&r(this.triggerDisabled)&&e.parse(this.triggerDisabled).match(i))return;l({keepValue:r(this.keepValue)?e.parse(this.keepValue).match(i):this.keepValue,...o},s)}))}}function l(){return{create:function(){return new o}}}export{o as FormItemDepsCollector,l as useFormItemDeps};
+import { Path } from '@formily/path';
+import { isFunction, isString } from 'lodash-es';
+import '../../index.js';
+import { getAbsoluteKey } from '../utils/index.js';
+import { traverseDependKey } from '../utils/schema.js';
+
+class FormItemDepsCollector {
+  constructor() {
+    this.triggerDisabled = false;
+    this.keepValue = false;
+    this.collector = /* @__PURE__ */ new Map();
+  }
+  setDeps(fieldPath, dependKeys, callback) {
+    traverseDependKey(dependKeys, (dependKey, _, dependKeyConfig) => {
+      const absoluteDependKey = getAbsoluteKey(dependKey, fieldPath);
+      const map = this.collector.get(absoluteDependKey) || /* @__PURE__ */ new Map();
+      map.set(fieldPath, {
+        dependKey: dependKeyConfig,
+        callback
+      });
+      this.collector.set(absoluteDependKey, map);
+    });
+  }
+  trigger(dependPath, payload) {
+    if (this.triggerDisabled === true)
+      return;
+    const depMap = this.collector.get(dependPath.toString());
+    if (!depMap)
+      return;
+    [...depMap.entries()].forEach(([key, {
+      dependKey,
+      callback
+    }]) => {
+      if (!isFunction(callback) || this.triggerDisabled && isString(this.triggerDisabled) && Path.parse(this.triggerDisabled).match(key)) {
+        return;
+      }
+      const keepValue = isString(this.keepValue) ? Path.parse(this.keepValue).match(key) : this.keepValue;
+      callback({
+        keepValue,
+        ...dependKey
+      }, payload);
+    });
+  }
+}
+function useFormItemDeps() {
+  function create() {
+    return new FormItemDepsCollector();
+  }
+  return {
+    create
+  };
+}
+
+export { FormItemDepsCollector, useFormItemDeps };

package/es/components/form-render/src/hooks/useFormRenderLifeCycle.js

@@ -1 +1,12 @@
-import{isFunction as e}from"lodash-es";function l(l){return{callLifeCycle:function(i,c){return l.lifeCycle&&e(l.lifeCycle[i])&&l.lifeCycle[i].apply(void 0,c||[])}}}export{l as useFormRenderLifeCycle};
+import { isFunction } from 'lodash-es';
+
+function useFormRenderLifeCycle(props) {
+  function callLifeCycle(lifeCycleName, payload) {
+    return props.lifeCycle && isFunction(props.lifeCycle[lifeCycleName]) && props.lifeCycle[lifeCycleName].apply(void 0, payload || []);
+  }
+  return {
+    callLifeCycle
+  };
+}
+
+export { useFormRenderLifeCycle };