cnhis-design-vue 3.3.1-beta.7 → 3.3.1-release.4

package/es/components/form-render/src/components/renderer/date.js

@@ -1 +1,210 @@
-import{defineComponent as e,computed as t,watch as a,ref as n,onMounted as o,inject as r,createVNode as i,mergeProps as l}from"vue";import{generateTimeFormat as u}from"../../../../../shared/utils/index.js";import{connect as s,mapProps as d}from"@formily/vue";import{isObject as c,useEventListener as m}from"@vueuse/core";import{promiseTimeout as v}from"@vueuse/shared";import{format as p}from"date-fns";import f from"naive-ui/es/_mixins/use-locale";import y from"../../../../date-picker/index.js";import{InjectionFormGlobalProps as b}from"../../constants/index.js";import{useCommonInjection as D}from"../../hooks/useCommonInjection.js";import"@formily/core";import"@formily/path";import"@vicons/ionicons5";import"@vue/shared";import"lodash-es";import"naive-ui";import"./text.js";import"../../utils/business.js";import{assignUpdateValue as h,assignClearBindVisited as w}from"../../utils/schema.js";import x from"../../../../../shared/components/DateIcon/DateIcon.vue.js";const _=s(e({props:{onChange:{},disabled:{type:Boolean},value:{type:String},validate:{type:Object},valueFormat:{type:String,default:"yyyy-MM-dd"},allowedInvalidValue:{type:String,default:"-"},placeholder:String,dbclickToCurrent:{type:Boolean,default:!0}},emits:["update:value"],setup(e,{emit:s,attrs:d}){const{injectValueValidate:h,injectValueBindKey:w}=D();function _(){var t;return"currTime"===(null==(t=e.validate)?void 0:t.min_date)}function j(){var t;return"currTime"===(null==(t=e.validate)?void 0:t.max_date)}function k(e){return _()&&e<Date.now()-864e5||j()&&e>Date.now()}function M(e){const t=new Date(e),a=new Date,n=new Date(t);n.setHours(0),n.setMinutes(0),n.setSeconds(0);const o=new Date(t);o.setHours(23),o.setMinutes(59),o.setSeconds(59);const r=n>a,i=o<a,l=t.getHours(),u=a.getHours(),s=a.getMinutes();return{isHourDisabled:function(e){return _()&&!r&&e<u||j()&&!i&&e>u},isMinuteDisabled:function(e){if(l===u)return _()&&!r&&e<s||j()&&!i&&e>s;return _()&&!r&&l<u||j()&&!i&&l>u}}}h((()=>e.value));const g=t((()=>{const t={};if(c(e.validate)){const{min_date:a,max_date:n}=e.validate;(a||n)&&(t.isDateDisabled=k,t.isTimeDisabled=M)}return t})),F=t((()=>({valueFormat:e.valueFormat,format:e.valueFormat,timePickerProps:{format:u(e.valueFormat)}})));function I(t){return t?t===e.allowedInvalidValue?t:p(new Date(t),e.valueFormat):null}a((()=>e.value),(e=>{e&&I(e)!==e&&s("update:value",I(e))}));const S=t({get:()=>I(e.value),set:e=>{s("update:value",e)}}),V=w(S),H=n();let P=!1;function T(){var t;if(!e.dbclickToCurrent||P)return;const a=null==(t=H.value)?void 0:t.$el;if(!a)return;const n=a.querySelector("input");n&&(m(a,"dblclick",(()=>function(t){e.disabled||(t.value=p(Date.now(),e.valueFormat),t.dispatchEvent(new Event("input")))}(n))),P=!0)}o(T);const C=r(b),B=n(!0);async function q(){var e;B.value=!1,await v(0);const t=null==(e=H.value)?void 0:e.$el;if(!t)return;const a=t.querySelector("input");a&&(a.click(),T())}const{localeRef:E}=f("DatePicker");return()=>{var t;return(null==C?void 0:C.lazyRender)&&B.value?i("div",{class:["form-render__textMode--input n-input",{"form-render__textMode--inputDisabled":e.disabled}],tabindex:0,onFocus:q},[[S.value?i("span",null,[S.value]):i("span",{class:"form-render__textMode--inputPlaceholder"},[e.placeholder||(null==(t=E.value)?void 0:t.datetimePlaceholder)]),i(x,{class:"form-render__textMode--dateIcon n-base-icon n-date-picker-icon"},null)]]):i(y,l({ref:H,key:V.value,disabled:e.disabled,allowedInvalidValue:e.allowedInvalidValue},g.value,F.value,{"formatted-value":S.value,"onUpdate:formatted-value":e=>S.value=e}),null)}}}),d(h,w));export{_ as DATE};
+import { defineComponent, computed, watch, ref, onMounted, inject, createVNode, mergeProps } from 'vue';
+import { generateTimeFormat } from '../../../../../shared/utils/index.js';
+import { connect, mapProps } from '@formily/vue';
+import { isObject, useEventListener } from '@vueuse/core';
+import { promiseTimeout } from '@vueuse/shared';
+import { format } from 'date-fns';
+import useLocale from 'naive-ui/es/_mixins/use-locale';
+import DatePicker from '../../../../date-picker/index.js';
+import { InjectionFormGlobalProps } from '../../constants/index.js';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import '@formily/core';
+import '@formily/path';
+import '@vicons/ionicons5';
+import '@vue/shared';
+import 'lodash-es';
+import 'naive-ui';
+import './text.js';
+import '../../utils/business.js';
+import { assignUpdateValue, assignClearBindVisited } from '../../utils/schema.js';
+import script$1 from '../../../../../shared/components/DateIcon/DateIcon.vue.js';
+
+const script = /* @__PURE__ */ defineComponent({
+  props: {
+    onChange: {},
+    disabled: {
+      type: Boolean
+    },
+    value: {
+      type: String
+    },
+    validate: {
+      type: Object
+    },
+    valueFormat: {
+      type: String,
+      default: "yyyy-MM-dd"
+    },
+    allowedInvalidValue: {
+      type: String,
+      default: "-"
+    },
+    placeholder: String,
+    dbclickToCurrent: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:value"],
+  setup(props, {
+    emit,
+    attrs
+  }) {
+    const {
+      injectValueValidate,
+      injectValueBindKey
+    } = useCommonInjection();
+    injectValueValidate(() => props.value);
+    function minCurrentDate() {
+      var _a;
+      return ((_a = props.validate) == null ? void 0 : _a.min_date) === "currTime";
+    }
+    function maxCurrentDate() {
+      var _a;
+      return ((_a = props.validate) == null ? void 0 : _a.max_date) === "currTime";
+    }
+    function isDateDisabled(time) {
+      return minCurrentDate() && time < yesterday() || maxCurrentDate() && time > Date.now();
+      function yesterday() {
+        return Date.now() - 24 * 60 * 60 * 1e3;
+      }
+    }
+    function isTimeDisabled(time) {
+      const checkDate = new Date(time);
+      const currentDate = new Date();
+      const startCheckDateDuplicate = new Date(checkDate);
+      startCheckDateDuplicate.setHours(0);
+      startCheckDateDuplicate.setMinutes(0);
+      startCheckDateDuplicate.setSeconds(0);
+      const endCheckDateDuplicate = new Date(checkDate);
+      endCheckDateDuplicate.setHours(23);
+      endCheckDateDuplicate.setMinutes(59);
+      endCheckDateDuplicate.setSeconds(59);
+      const isOverDate = startCheckDateDuplicate > currentDate;
+      const isBeforeDate = endCheckDateDuplicate < currentDate;
+      const checkHour = checkDate.getHours();
+      const currentHour = currentDate.getHours();
+      const currentMinute = currentDate.getMinutes();
+      return {
+        isHourDisabled,
+        isMinuteDisabled
+      };
+      function isHourDisabled(hour) {
+        return minCurrentDate() && !isOverDate && hour < currentHour || maxCurrentDate() && !isBeforeDate && hour > currentHour;
+      }
+      function isMinuteDisabled(minute) {
+        if (checkHour === currentHour) {
+          return minCurrentDate() && !isOverDate && minute < currentMinute || maxCurrentDate() && !isBeforeDate && minute > currentMinute;
+        }
+        return minCurrentDate() && !isOverDate && checkHour < currentHour || maxCurrentDate() && !isBeforeDate && checkHour > currentHour;
+      }
+    }
+    const validateConfig = computed(() => {
+      const result = {};
+      if (isObject(props.validate)) {
+        const {
+          min_date,
+          max_date
+        } = props.validate;
+        if (min_date || max_date) {
+          result.isDateDisabled = isDateDisabled;
+          result.isTimeDisabled = isTimeDisabled;
+        }
+      }
+      return result;
+    });
+    const formatConfig = computed(() => {
+      return {
+        valueFormat: props.valueFormat,
+        format: props.valueFormat,
+        timePickerProps: {
+          format: generateTimeFormat(props.valueFormat)
+        }
+      };
+    });
+    function formatDate(value) {
+      if (!value)
+        return null;
+      if (value === props.allowedInvalidValue)
+        return value;
+      return format(new Date(value), props.valueFormat);
+    }
+    watch(() => props.value, (value) => {
+      if (!value || formatDate(value) === value)
+        return;
+      emit("update:value", formatDate(value));
+    });
+    const valueRef = computed({
+      get: () => formatDate(props.value),
+      set: (value) => {
+        emit("update:value", value);
+      }
+    });
+    const key = injectValueBindKey(valueRef);
+    const datePickerRef = ref();
+    function onDbclick(inputEle) {
+      if (props.disabled)
+        return;
+      inputEle.value = format(Date.now(), props.valueFormat);
+      inputEle.dispatchEvent(new Event("input"));
+    }
+    let hasBind = false;
+    function bindDbClick() {
+      var _a;
+      if (!props.dbclickToCurrent || hasBind)
+        return;
+      const ele = (_a = datePickerRef.value) == null ? void 0 : _a.$el;
+      if (!ele)
+        return;
+      const inputEle = ele.querySelector("input");
+      if (!inputEle)
+        return;
+      useEventListener(ele, "dblclick", () => onDbclick(inputEle));
+      hasBind = true;
+    }
+    onMounted(bindDbClick);
+    const globProps = inject(InjectionFormGlobalProps);
+    const showText = ref(true);
+    async function onFocus() {
+      var _a;
+      showText.value = false;
+      await promiseTimeout(0);
+      const ele = (_a = datePickerRef.value) == null ? void 0 : _a.$el;
+      if (!ele)
+        return;
+      const inputEle = ele.querySelector("input");
+      if (!inputEle)
+        return;
+      inputEle.click();
+      bindDbClick();
+    }
+    const {
+      localeRef
+    } = useLocale("DatePicker");
+    return () => {
+      var _a;
+      return (globProps == null ? void 0 : globProps.lazyRender) && showText.value ? createVNode("div", {
+        "class": ["form-render__textMode--input n-input", {
+          "form-render__textMode--inputDisabled": props.disabled
+        }],
+        "tabindex": 0,
+        "onFocus": onFocus
+      }, [[valueRef.value ? createVNode("span", null, [valueRef.value]) : createVNode("span", {
+        "class": "form-render__textMode--inputPlaceholder"
+      }, [props.placeholder || ((_a = localeRef.value) == null ? void 0 : _a.datetimePlaceholder)]), createVNode(script$1, {
+        "class": "form-render__textMode--dateIcon n-base-icon n-date-picker-icon"
+      }, null)]]) : createVNode(DatePicker, mergeProps({
+        "ref": datePickerRef,
+        "key": key.value,
+        "disabled": props.disabled,
+        "allowedInvalidValue": props.allowedInvalidValue
+      }, validateConfig.value, formatConfig.value, {
+        "formatted-value": valueRef.value,
+        "onUpdate:formatted-value": ($event) => valueRef.value = $event
+      }), null);
+    };
+  }
+});
+const DATE = connect(script, mapProps(assignUpdateValue, assignClearBindVisited));
+
+export { DATE };

package/es/components/form-render/src/components/renderer/formItem.js

@@ -1 +1,370 @@
-import{defineComponent as e,inject as l,computed as t,ref as r,onUnmounted as o,createVNode as a,mergeProps as i,unref as n,withModifiers as d,createTextVNode as u}from"vue";import{arrayed as s,getStringWidth as m,widthAppend as f}from"../../../../../shared/utils/index.js";import{isVoidField as v}from"@formily/core";import{observe as c,autorun as p}from"@formily/reactive";import{connect as b,mapProps as h}from"@formily/vue";import{useDebounceFn as _}from"@vueuse/core";import{isString as y,isArray as g,isObject as k,isNumber as I,isFunction as x,uniq as F}from"lodash-es";import{NFormItem as T,NTooltip as w,NButton as O}from"naive-ui";import P from"../../../../annotation-edit/index.js";import"../../../index.js";import R from"../tooltipMessage.vue.js";import{InjectionFormGlobalProps as j,InjectionFormGlobalEmit as E,InjectionFormUUID as L,InjectionFormGraph as M,InjectionAnnotation as S,InjectionAnnotationShortcuts as C,InjectionFormColumnWidth as A}from"../../constants/index.js";import{useComplexOptionsSpan as U}from"../../hooks/useComplexOptions.js";import{validateMessageParser as W,editorUnescape as N}from"../../utils/index.js";import{dotEscape as q,createFieldAddressId as B}from"../../utils/schema.js";import{useFormField as H}from"../../hooks/useFormField.js";const K=b(e({name:"FormRenderItem",props:{label:String,propertyKey:String,remark:String,remarkTo:{},span:{type:Number,default:6},suffixFields:{type:Array},labelRender:Function,annotation:{},isOptionChildField:Boolean,feedback:String,showFeedback:{type:Boolean,default:void 0},fieldItem:{type:Object},showTooltipFeedback:{type:Boolean,default:!0}},setup(e,{slots:s,attrs:b}){const h=l(j),W=l(E),{field:K,fieldKey:V,fieldAddress:D}=H(),G=l(L),$=t((()=>q(`${G}-${D.value}`))),z=r(!1);if(v(K.value)&&g(e.suffixFields)){const t=l(M);o(c(t,_((()=>{v(K.value)&&g(e.suffixFields)&&(z.value=e.suffixFields.some((e=>{const l=K.value.form.query(e).take();return l&&Reflect.get(l,"required")})))}),100)))}else o(p((()=>{z.value=Reflect.get(K.value,"required")})));const Y=l(S),J=t({get(){var l,t;return null!=(t=null==(l=Y.value)?void 0:l[e.propertyKey])?t:""},set(l){Y.value={property:e.propertyKey,value:l}}}),Q=l(C);const X=t((()=>{var l;const t={color:null==(l=e.fieldItem)?void 0:l.labelColor};return k(b.labelStyle)&&Object.assign(t,b.labelStyle),t})),Z=t((()=>Y.value&&!1!==e.annotation)),ee=t((()=>{var l;return y(null==(l=e.fieldItem)?void 0:l.editor_title)&&e.fieldItem.editor_title&&["POPUP_ALERT","HOVER_TOOLTIP"].includes(e.fieldItem.editor_title_mode)})),le=r(!1);const te=t((()=>e.label&&" "!==e.label)),re=t((()=>{let l=0;return Z.value&&(l+=18),e.remark&&(l+=18),ee.value&&(l+=32),l})),oe=l(j,{}),ae=t((()=>{var l;const t=null==(l=e.fieldItem)?void 0:l.bordered;return null==t?oe.bordered:t})),ie=l("n-form",{}),ne=t((()=>{var e,l,t,r;if("left"!==(null!=(l=b.labelPlacement)?l:null==(e=ie.props)?void 0:e.labelPlacement))return"";let o=null!=(r=b.labelWidth)?r:null==(t=ie.props)?void 0:t.labelWidth;return o&&"auto"!==o?(o=parseInt(o+""),isNaN(o)||!I(o)?"":o-12-re.value-(z.value?11:0)):""})),de=t((()=>x(e.labelRender)?"":y(e.label)?e.label:"")),ue=t((()=>{var l;return null==(l=e.fieldItem)?void 0:l.fieldTitleColor}));function se(){return te.value?a("section",{class:"form-render__formItemLabel"},[a("span",{class:"form-render__formItemLabel--text",style:{marginRight:f(re.value),maxWidth:f(ne.value),color:ue.value},title:de.value},[x(e.labelRender)?e.labelRender(e.label):e.label]),re.value?a("section",{class:"form-render__formItemLabel--operation"},[e.remark?a("div",{class:"form-render__formItemLabel--tooltip"},[a(R,{message:e.remark,to:e.remarkTo},null)]):null,Z.value?a(P,{class:"form-render__formItemLabel--annotation",modelValue:J.value,"onUpdate:modelValue":e=>J.value=e,shortcuts:n(Q)},null):null,ee.value?a(w,{zIndex:3e3,raw:!0,showArrow:!1,trigger:"POPUP_ALERT"===e.fieldItem.editor_title_mode?"manual":"hover",placement:"top-start",show:"HOVER_TOOLTIP"===e.fieldItem.editor_title_mode?void 0:le.value,contentStyle:"background-color:white;color:rgb(51, 54, 57);padding:8px;position:relative;"},{trigger:()=>a(O,{onClick:d((()=>le.value=!le.value),["stop","prev"]),text:!0,type:"primary"},{default:()=>[a("span",{style:"display:inline-block;margin-left:4px"},[u("提示")])]}),default:()=>{var l,t;return[a("div",{innerHTML:N(null!=(t=null==(l=e.fieldItem)?void 0:l.editor_title)?t:"")},null),a(O,{text:!0,onClick:()=>le.value=!le.value,style:"position:absolute;right:2px;top:2px;line-height:1;height:12px;transform:scaleY(0.9)"},{default:()=>[u("x")]})]}}):null]):null]):null}const me=t((()=>{let l=re.value;return z.value&&(l+=11),y(e.label)&&(l+=ne.value||m(e.label)),l})),fe=l(A),{getSpan:ve}=U();function ce(){var l,t,r,o,a,i,d;const u="inner"===(null==(l=e.fieldItem)?void 0:l.childWidthMode)?e.span:ve(G,K.value.address,!1)+e.span;if("left"!==(null!=(r=b.labelPlacement)?r:null==(t=ie.props)?void 0:t.labelPlacement)||!n(fe)||!(null==h?void 0:h.autoWidth)||"INPUT_GROUP"===(null==(a=null==(o=K.value.parent)?void 0:o.component)?void 0:a[0]))return u;if("INPUT_GROUP"===(null==(d=null==(i=K.value.parent)?void 0:i.component)?void 0:d[0]))return u;const s=16+fe.value;let m=u*s-16-me.value;const f=I(null==h?void 0:h.autoWidth)?h.autoWidth:120;let v=u;for(;m<f&&v<12;)v++,m+=s;return v}function pe(){var l;return"tooltip"!==(null==h?void 0:h.feedbackType)?null==(l=s.default)?void 0:l.call(s):a(w,{to:"body",trigger:"manual",show:!!e.feedback&&e.showTooltipFeedback,raw:!0,animated:!1,showArrow:!1,placement:"top-start",contentStyle:"background-color:#e88080;color:white;padding:8px;border-radius:4px"},{trigger(){var e;return null==(e=s.default)?void 0:e.call(s)},default:()=>e.feedback})}function be(){var l,t,r;const o=null==(l=e.fieldItem)?void 0:l.editor_title,i=!(null==(t=e.fieldItem)?void 0:t.editor_title_mode)||"EMBEDDED_FORM"===(null==(r=e.fieldItem)?void 0:r.editor_title_mode);return y(o)&&o&&i?a("section",{style:"display:flex;flex-direction:column;gap:4px;width:100%"},[pe(),a("div",{innerHTML:N(o)},null)]):pe()}function he(){const e=[K.value.path+""];return K.value.form.query("*").forEach((l=>{(l.address+"").includes(K.value.address+"")&&((l.path+"").includes(K.value.path+"")||e.push(l.path+""))})),e}const _e=t({get:()=>!(!(null==h?void 0:h.selectMode)||!g(null==h?void 0:h.selectedFields))&&h.selectedFields.includes(K.value.path+""),set(e){if(!g(null==h?void 0:h.selectedFields))return;let l=[...h.selectedFields];e?(l.push(...he()),l=F(l)):he().forEach((e=>{const t=l.indexOf(e);t>-1&&l.splice(t,1)})),null==W||W("update:selectedFields",l)}}),ye=t((()=>(null==h?void 0:h.selectMode)&&!(K.value.parent&&"LINEBAR"!==K.value.parent.componentType)));function ge(){(null==h?void 0:h.selectMode)&&(_e.value=!_e.value)}const ke=t((()=>e.isOptionChildField?!!e.feedback&&" "!==e.feedback&&e.showFeedback:e.showFeedback));return()=>a(T,i({class:["form-render__formItem",{"form-render--no-border":!ae.value,"form-render--underline":"underline"===ae.value,"form-render__formItemMask":ye.value,"form-render__formItemMask--selected":ye.value&&_e.value}],style:{"--form-item-column":ce()},showFeedback:ke.value,feedback:"tooltip"===(null==h?void 0:h.feedbackType)?"":e.feedback,labelStyle:X.value},{id:$.value,uuid:G,onClick:ge,"widget-type":K.value.componentType,"field-key":q(V.value),"field-address":B(D.value),required:z.value}),{...s,default:be,label:se})}}),h({title:"label"},((e,l)=>{const t=v(l)?void 0:s(l.selfErrors).length?function(e,l){if(!y(l.defined_error_msg)||!l.defined_error_msg)return e.map((e=>W(e,l))).join(",");return W(l.defined_error_msg,l)}(s(l.selfErrors),e.fieldItem):void 0;return{...e,fieldItem:void 0,feedback:t,"validation-status":t?"error":void 0}})));export{K as FORM_ITEM};
+import { defineComponent, inject, computed, ref, onUnmounted, createVNode, mergeProps, unref, withModifiers, createTextVNode } from 'vue';
+import { arrayed, getStringWidth, widthAppend } from '../../../../../shared/utils/index.js';
+import { isVoidField } from '@formily/core';
+import { observe, autorun } from '@formily/reactive';
+import { connect, mapProps } from '@formily/vue';
+import { useDebounceFn } from '@vueuse/core';
+import { isString, isArray, isObject, isNumber, isFunction, uniq } from 'lodash-es';
+import { NFormItem, NTooltip, NButton } from 'naive-ui';
+import Annotation from '../../../../annotation-edit/index.js';
+import '../../../index.js';
+import TooltipMessage from '../tooltipMessage.vue.js';
+import { InjectionFormGlobalProps, InjectionFormGlobalEmit, InjectionFormUUID, InjectionFormGraph, InjectionAnnotation, InjectionAnnotationShortcuts, InjectionFormColumnWidth } from '../../constants/index.js';
+import { useComplexOptionsSpan } from '../../hooks/useComplexOptions.js';
+import { validateMessageParser, editorUnescape } from '../../utils/index.js';
+import { dotEscape, createFieldAddressId } from '../../utils/schema.js';
+import { useFormField } from '../../hooks/useFormField.js';
+
+const script = /* @__PURE__ */ defineComponent({
+  name: "FormRenderItem",
+  props: {
+    label: String,
+    propertyKey: String,
+    remark: String,
+    remarkTo: {},
+    span: {
+      type: Number,
+      default: 6
+    },
+    suffixFields: {
+      type: Array
+    },
+    labelRender: Function,
+    annotation: {},
+    isOptionChildField: Boolean,
+    feedback: String,
+    showFeedback: {
+      type: Boolean,
+      default: void 0
+    },
+    fieldItem: {
+      type: Object
+    },
+    showTooltipFeedback: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const globProps = inject(InjectionFormGlobalProps);
+    const globEmit = inject(InjectionFormGlobalEmit);
+    const {
+      field,
+      fieldKey,
+      fieldAddress
+    } = useFormField();
+    const uuid = inject(InjectionFormUUID);
+    const id = computed(() => {
+      return dotEscape(`${uuid}-${fieldAddress.value}`);
+    });
+    const required = ref(false);
+    if (isVoidField(field.value) && isArray(props.suffixFields)) {
+      const observeFormGraph = inject(InjectionFormGraph);
+      onUnmounted(observe(observeFormGraph, useDebounceFn(() => {
+        if (!isVoidField(field.value) || !isArray(props.suffixFields))
+          return;
+        required.value = props.suffixFields.some((fieldKey2) => {
+          const childField = field.value.form.query(fieldKey2).take();
+          return childField && Reflect.get(childField, "required");
+        });
+      }, 100)));
+    } else {
+      onUnmounted(autorun(() => {
+        required.value = Reflect.get(field.value, "required");
+      }));
+    }
+    const annotation = inject(InjectionAnnotation);
+    const annotationContent = computed({
+      get() {
+        var _a, _b;
+        return (_b = (_a = annotation.value) == null ? void 0 : _a[props.propertyKey]) != null ? _b : "";
+      },
+      set(value) {
+        annotation.value = {
+          property: props.propertyKey,
+          value
+        };
+      }
+    });
+    const annotationShortcuts = inject(InjectionAnnotationShortcuts);
+    function renderAnnotation() {
+      return createVNode(Annotation, {
+        "class": "form-render__formItemLabel--annotation",
+        "modelValue": annotationContent.value,
+        "onUpdate:modelValue": ($event) => annotationContent.value = $event,
+        "shortcuts": unref(annotationShortcuts)
+      }, null);
+    }
+    const labelStyle = computed(() => {
+      var _a;
+      const result = {
+        color: (_a = props.fieldItem) == null ? void 0 : _a.labelColor
+      };
+      if (isObject(attrs.labelStyle)) {
+        Object.assign(result, attrs.labelStyle);
+      }
+      return result;
+    });
+    const showAnnotation = computed(() => {
+      return annotation.value && props.annotation !== false;
+    });
+    const showEditorTitleToolTip = computed(() => {
+      var _a;
+      return isString((_a = props.fieldItem) == null ? void 0 : _a.editor_title) && props.fieldItem.editor_title && ["POPUP_ALERT", "HOVER_TOOLTIP"].includes(props.fieldItem.editor_title_mode);
+    });
+    const editorTitleShowRef = ref(false);
+    function renderEditorTitle() {
+      return createVNode(NTooltip, {
+        "zIndex": 3e3,
+        "raw": true,
+        "showArrow": false,
+        "trigger": props.fieldItem.editor_title_mode === "POPUP_ALERT" ? "manual" : "hover",
+        "placement": "top-start",
+        "show": props.fieldItem.editor_title_mode === "HOVER_TOOLTIP" ? void 0 : editorTitleShowRef.value,
+        "contentStyle": "background-color:white;color:rgb(51, 54, 57);padding:8px;position:relative;"
+      }, {
+        trigger: () => createVNode(NButton, {
+          "onClick": withModifiers(() => editorTitleShowRef.value = !editorTitleShowRef.value, ["stop", "prev"]),
+          "text": true,
+          "type": "primary"
+        }, {
+          default: () => [createVNode("span", {
+            "style": "display:inline-block;margin-left:4px"
+          }, [createTextVNode("\u63D0\u793A")])]
+        }),
+        default: () => {
+          var _a, _b;
+          return [createVNode("div", {
+            "innerHTML": editorUnescape((_b = (_a = props.fieldItem) == null ? void 0 : _a.editor_title) != null ? _b : "")
+          }, null), createVNode(NButton, {
+            "text": true,
+            "onClick": () => editorTitleShowRef.value = !editorTitleShowRef.value,
+            "style": "position:absolute;right:2px;top:2px;line-height:1;height:12px;transform:scaleY(0.9)"
+          }, {
+            default: () => [createTextVNode("x")]
+          })];
+        }
+      });
+    }
+    const needRenderLabel = computed(() => props.label && props.label !== " ");
+    const marginRight = computed(() => {
+      let result = 0;
+      showAnnotation.value && (result += 18);
+      props.remark && (result += 18);
+      showEditorTitleToolTip.value && (result += 32);
+      return result;
+    });
+    const globalProps = inject(InjectionFormGlobalProps, {});
+    const borderedRef = computed(() => {
+      var _a;
+      const bordered = (_a = props.fieldItem) == null ? void 0 : _a.bordered;
+      return bordered == null ? globalProps.bordered : bordered;
+    });
+    const formProps = inject("n-form", {});
+    const maxWidth = computed(() => {
+      var _a, _b, _c, _d;
+      const labelPlacement = (_b = attrs.labelPlacement) != null ? _b : (_a = formProps.props) == null ? void 0 : _a.labelPlacement;
+      if (labelPlacement !== "left")
+        return "";
+      let labelWidth = (_d = attrs.labelWidth) != null ? _d : (_c = formProps.props) == null ? void 0 : _c.labelWidth;
+      if (!labelWidth || labelWidth === "auto")
+        return "";
+      labelWidth = parseInt(labelWidth + "");
+      if (isNaN(labelWidth) || !isNumber(labelWidth))
+        return "";
+      return labelWidth - 12 - marginRight.value - (required.value ? 11 : 0);
+    });
+    const title = computed(() => {
+      if (isFunction(props.labelRender))
+        return "";
+      return isString(props.label) ? props.label : "";
+    });
+    const labelColor = computed(() => {
+      var _a;
+      return (_a = props.fieldItem) == null ? void 0 : _a.fieldTitleColor;
+    });
+    function renderLabel() {
+      return needRenderLabel.value ? createVNode("section", {
+        "class": "form-render__formItemLabel"
+      }, [createVNode("span", {
+        "class": "form-render__formItemLabel--text",
+        "style": {
+          marginRight: widthAppend(marginRight.value),
+          maxWidth: widthAppend(maxWidth.value),
+          color: labelColor.value
+        },
+        "title": title.value
+      }, [isFunction(props.labelRender) ? props.labelRender(props.label) : props.label]), marginRight.value ? createVNode("section", {
+        "class": "form-render__formItemLabel--operation"
+      }, [props.remark ? createVNode("div", {
+        "class": "form-render__formItemLabel--tooltip"
+      }, [createVNode(TooltipMessage, {
+        "message": props.remark,
+        "to": props.remarkTo
+      }, null)]) : null, showAnnotation.value ? renderAnnotation() : null, showEditorTitleToolTip.value ? renderEditorTitle() : null]) : null]) : null;
+    }
+    const renderLabelWidth = computed(() => {
+      let result = marginRight.value;
+      if (required.value)
+        result += 11;
+      if (isString(props.label)) {
+        result += maxWidth.value || getStringWidth(props.label);
+      }
+      return result;
+    });
+    const formColWidth = inject(InjectionFormColumnWidth);
+    const {
+      getSpan
+    } = useComplexOptionsSpan();
+    const GAP_WIDTH = 16;
+    function getSchemaSpan() {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const baseSpan = ((_a = props.fieldItem) == null ? void 0 : _a.childWidthMode) === "inner" ? props.span : getSpan(uuid, field.value.address, false) + props.span;
+      const labelPlacement = (_c = attrs.labelPlacement) != null ? _c : (_b = formProps.props) == null ? void 0 : _b.labelPlacement;
+      if (labelPlacement !== "left" || !unref(formColWidth) || !(globProps == null ? void 0 : globProps.autoWidth) || ((_e = (_d = field.value.parent) == null ? void 0 : _d.component) == null ? void 0 : _e[0]) === "INPUT_GROUP")
+        return baseSpan;
+      if (((_g = (_f = field.value.parent) == null ? void 0 : _f.component) == null ? void 0 : _g[0]) === "INPUT_GROUP")
+        return baseSpan;
+      const colWidth = GAP_WIDTH + formColWidth.value;
+      let widgetWidth = baseSpan * colWidth - GAP_WIDTH - renderLabelWidth.value;
+      const minWidth = isNumber(globProps == null ? void 0 : globProps.autoWidth) ? globProps.autoWidth : 120;
+      let resultSpan = baseSpan;
+      while (widgetWidth < minWidth && resultSpan < 12) {
+        resultSpan++;
+        widgetWidth += colWidth;
+      }
+      return resultSpan;
+    }
+    function renderInnerContent() {
+      var _a;
+      if ((globProps == null ? void 0 : globProps.feedbackType) !== "tooltip")
+        return (_a = slots.default) == null ? void 0 : _a.call(slots);
+      return createVNode(NTooltip, {
+        "to": "body",
+        "trigger": "manual",
+        "show": !!props.feedback && props.showTooltipFeedback,
+        "raw": true,
+        "animated": false,
+        "showArrow": false,
+        "placement": "top-start",
+        "contentStyle": "background-color:#e88080;color:white;padding:8px;border-radius:4px"
+      }, {
+        trigger() {
+          var _a2;
+          return (_a2 = slots.default) == null ? void 0 : _a2.call(slots);
+        },
+        default() {
+          return props.feedback;
+        }
+      });
+    }
+    function renderContent() {
+      var _a, _b, _c;
+      const editorTitle = (_a = props.fieldItem) == null ? void 0 : _a.editor_title;
+      const showEditorTitle = !((_b = props.fieldItem) == null ? void 0 : _b.editor_title_mode) || ((_c = props.fieldItem) == null ? void 0 : _c.editor_title_mode) === "EMBEDDED_FORM";
+      if (!isString(editorTitle) || !editorTitle || !showEditorTitle)
+        return renderInnerContent();
+      return createVNode("section", {
+        "style": "display:flex;flex-direction:column;gap:4px;width:100%"
+      }, [renderInnerContent(), createVNode("div", {
+        "innerHTML": editorUnescape(editorTitle)
+      }, null)]);
+    }
+    function getPathArr() {
+      const result = [field.value.path + ""];
+      field.value.form.query("*").forEach((_field) => {
+        if (!(_field.address + "").includes(field.value.address + ""))
+          return;
+        if ((_field.path + "").includes(field.value.path + ""))
+          return;
+        result.push(_field.path + "");
+      });
+      return result;
+    }
+    const selected = computed({
+      get() {
+        if (!(globProps == null ? void 0 : globProps.selectMode) || !isArray(globProps == null ? void 0 : globProps.selectedFields))
+          return false;
+        return globProps.selectedFields.includes(field.value.path + "");
+      },
+      set(value) {
+        if (!isArray(globProps == null ? void 0 : globProps.selectedFields))
+          return;
+        let nv = [...globProps.selectedFields];
+        if (value) {
+          nv.push(...getPathArr());
+          nv = uniq(nv);
+        } else {
+          getPathArr().forEach((path) => {
+            const index = nv.indexOf(path);
+            index > -1 && nv.splice(index, 1);
+          });
+        }
+        globEmit == null ? void 0 : globEmit("update:selectedFields", nv);
+      }
+    });
+    const showMask = computed(() => {
+      return (globProps == null ? void 0 : globProps.selectMode) && !(field.value.parent && field.value.parent.componentType !== "LINEBAR");
+    });
+    function onClick() {
+      if (globProps == null ? void 0 : globProps.selectMode) {
+        selected.value = !selected.value;
+      }
+    }
+    const showFeedback = computed(() => {
+      if (!props.isOptionChildField)
+        return props.showFeedback;
+      return !!props.feedback && props.feedback !== " " && props.showFeedback;
+    });
+    return () => {
+      return createVNode(NFormItem, mergeProps({
+        "class": ["form-render__formItem", {
+          "form-render--no-border": !borderedRef.value,
+          "form-render--underline": borderedRef.value === "underline",
+          "form-render__formItemMask": showMask.value,
+          "form-render__formItemMask--selected": showMask.value && selected.value
+        }],
+        "style": {
+          "--form-item-column": getSchemaSpan()
+        },
+        "showFeedback": showFeedback.value,
+        "feedback": (globProps == null ? void 0 : globProps.feedbackType) === "tooltip" ? "" : props.feedback,
+        "labelStyle": labelStyle.value
+      }, {
+        id: id.value,
+        uuid,
+        onClick,
+        "widget-type": field.value.componentType,
+        "field-key": dotEscape(fieldKey.value),
+        "field-address": createFieldAddressId(fieldAddress.value),
+        required: required.value
+      }), {
+        ...slots,
+        default: renderContent,
+        label: renderLabel
+      });
+    };
+  }
+});
+const FORM_ITEM = connect(script, mapProps({
+  title: "label"
+}, (props, field) => {
+  const feedback = !isVoidField(field) ? arrayed(field.selfErrors).length ? parseFeedback(arrayed(field.selfErrors), props.fieldItem) : void 0 : void 0;
+  return {
+    ...props,
+    fieldItem: void 0,
+    feedback,
+    "validation-status": feedback ? "error" : void 0
+  };
+}));
+function parseFeedback(selfErrors, fieldItem) {
+  if (!isString(fieldItem.defined_error_msg) || !fieldItem.defined_error_msg) {
+    return selfErrors.map((message) => validateMessageParser(message, fieldItem)).join(",");
+  }
+  return validateMessageParser(fieldItem.defined_error_msg, fieldItem);
+}
+
+export { FORM_ITEM };

package/es/components/form-render/src/components/renderer/index.js

@@ -1 +1,45 @@
-import*as s from"./combination/index.js";import*as t from"./complex.js";import*as r from"./date.js";import*as o from"./formItem.js";import*as e from"./input.js";import*as m from"./inputGroup.js";import*as i from"./inputNumber.js";import*as a from"./levelSearchCascader/index.js";import*as p from"./lineBar/index.js";import*as x from"./radio_checkbox.js";import*as n from"./remoteSearch.js";import*as c from"./searchCascade.js";import*as f from"./select.js";import*as j from"./simpleComponent.js";import*as d from"./slider.js";import*as l from"./switch.js";import*as u from"./text.js";import*as h from"./textarea.js";import*as b from"./time.js";import{separateMetaModule as C}from"../../../../../shared/utils/index.js";var S=C(Object.assign({"./combination/index.ts":s,"./complex.tsx":t,"./date.tsx":r,"./formItem.tsx":o,"./input.tsx":e,"./inputGroup.ts":m,"./inputNumber.tsx":i,"./levelSearchCascader/index.tsx":a,"./lineBar/index.ts":p,"./radio&checkbox.tsx":x,"./remoteSearch.tsx":n,"./searchCascade.tsx":c,"./select.tsx":f,"./simpleComponent.tsx":j,"./slider.tsx":d,"./switch.tsx":l,"./text.tsx":u,"./textarea.tsx":h,"./time.tsx":b}));export{S as default};
+import * as index from './combination/index.js';
+import * as complex from './complex.js';
+import * as date from './date.js';
+import * as formItem from './formItem.js';
+import * as input from './input.js';
+import * as inputGroup from './inputGroup.js';
+import * as inputNumber from './inputNumber.js';
+import * as index$1 from './levelSearchCascader/index.js';
+import * as index$2 from './lineBar/index.js';
+import * as radio_checkbox from './radio_checkbox.js';
+import * as remoteSearch from './remoteSearch.js';
+import * as searchCascade from './searchCascade.js';
+import * as select from './select.js';
+import * as simpleComponent from './simpleComponent.js';
+import * as slider from './slider.js';
+import * as _switch from './switch.js';
+import * as text from './text.js';
+import * as textarea from './textarea.js';
+import * as time from './time.js';
+import { separateMetaModule } from '../../../../../shared/utils/index.js';
+
+const modules = Object.assign({
+  "./combination/index.ts": index,
+  "./complex.tsx": complex,
+  "./date.tsx": date,
+  "./formItem.tsx": formItem,
+  "./input.tsx": input,
+  "./inputGroup.ts": inputGroup,
+  "./inputNumber.tsx": inputNumber,
+  "./levelSearchCascader/index.tsx": index$1,
+  "./lineBar/index.ts": index$2,
+  "./radio&checkbox.tsx": radio_checkbox,
+  "./remoteSearch.tsx": remoteSearch,
+  "./searchCascade.tsx": searchCascade,
+  "./select.tsx": select,
+  "./simpleComponent.tsx": simpleComponent,
+  "./slider.tsx": slider,
+  "./switch.tsx": _switch,
+  "./text.tsx": text,
+  "./textarea.tsx": textarea,
+  "./time.tsx": time
+});
+var components = separateMetaModule(modules);
+
+export { components as default };