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

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

@@ -1 +1,87 @@
-import{defineComponent as e,inject as o,createVNode as t,ref as r,createTextVNode as n,nextTick as l}from"vue";import{useVModel as a}from"@vueuse/core";import{InjectionFormGlobalProps as i}from"../../constants/index.js";import{useCommonInjection as u}from"../../hooks/useCommonInjection.js";import{createInputSlot as s}from"../../utils/index.js";import{connect as p,mapProps as d}from"@formily/vue";import{NInput as c}from"naive-ui";import m from"naive-ui/es/_mixins/use-locale";import{assignUpdateValue as v,assignClearBindVisited as f}from"../../utils/schema.js";const x=p(e({name:"FormInput",props:{value:{type:String},prefix:{type:[String,Function,Object]},suffix:{type:[String,Function,Object]},placeholder:String,disabled:Boolean,password:{type:Boolean}},emits:["update:value"],setup(e,{emit:p}){const d=o(i),v=a(e,"value",p),f=u().injectValueBindKey(v),x=s(e,(e=>[t("i",{style:{color:"rgba(33,33,33,.4)"}},[e])]));function y(o){var r;return(null==(r=x.value)?void 0:r[o])?t("div",{class:`n-input__${o}`},[n(" "),x.value[o](e)]):""}const h=r(!0),b=r();async function _(){h.value=!1,await l(),b.value.focus()}const{localeRef:j}=m("Input");return()=>{var o;return(null==d?void 0:d.lazyRender)&&h.value?t("div",{class:["form-render__textMode--input n-input",{"form-render__textMode--inputDisabled":e.disabled}],tabindex:0,onFocus:_},[[y("prefix"),v.value?t("span",null,[v.value]):t("span",{class:"form-render__textMode--inputPlaceholder"},[e.placeholder||(null==(o=j.value)?void 0:o.placeholder)]),y("suffix")]]):t(c,{ref:b,type:e.password?"password":"text",key:f.value,disabled:e.disabled,placeholder:e.placeholder,value:v.value,"onUpdate:value":e=>v.value=e},x.value)}}}),d(((e,o)=>{const t=v(e,o);return t.allowInput=e=>!e.startsWith(" ")&&!e.endsWith(" "),t}),f));export{x as INPUT};
+import { defineComponent, inject, createVNode, ref, createTextVNode, nextTick } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { InjectionFormGlobalProps } from '../../constants/index.js';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { createInputSlot } from '../../utils/index.js';
+import { connect, mapProps } from '@formily/vue';
+import { NInput } from 'naive-ui';
+import useLocale from 'naive-ui/es/_mixins/use-locale';
+import { assignUpdateValue, assignClearBindVisited } from '../../utils/schema.js';
+
+const script = /* @__PURE__ */ defineComponent({
+  name: "FormInput",
+  props: {
+    value: {
+      type: String
+    },
+    prefix: {
+      type: [String, Function, Object]
+    },
+    suffix: {
+      type: [String, Function, Object]
+    },
+    placeholder: String,
+    disabled: Boolean,
+    password: {
+      type: Boolean
+    }
+  },
+  emits: ["update:value"],
+  setup(props, {
+    emit
+  }) {
+    const globProps = inject(InjectionFormGlobalProps);
+    const valueRef = useVModel(props, "value", emit);
+    const key = useCommonInjection().injectValueBindKey(valueRef);
+    const _slots = createInputSlot(props, (v) => {
+      return [createVNode("i", {
+        "style": {
+          color: "rgba(33,33,33,.4)"
+        }
+      }, [v])];
+    });
+    function renderSlotContent(slotName) {
+      var _a;
+      return ((_a = _slots.value) == null ? void 0 : _a[slotName]) ? createVNode("div", {
+        "class": `n-input__${slotName}`
+      }, [createTextVNode(" "), _slots.value[slotName](props)]) : "";
+    }
+    const showText = ref(true);
+    const inputRef = ref();
+    async function onFocus() {
+      showText.value = false;
+      await nextTick();
+      inputRef.value.focus();
+    }
+    const {
+      localeRef
+    } = useLocale("Input");
+    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
+      }, [[renderSlotContent("prefix"), valueRef.value ? createVNode("span", null, [valueRef.value]) : createVNode("span", {
+        "class": "form-render__textMode--inputPlaceholder"
+      }, [props.placeholder || ((_a = localeRef.value) == null ? void 0 : _a.placeholder)]), renderSlotContent("suffix")]]) : createVNode(NInput, {
+        "ref": inputRef,
+        "type": props.password ? "password" : "text",
+        "key": key.value,
+        "disabled": props.disabled,
+        "placeholder": props.placeholder,
+        "value": valueRef.value,
+        "onUpdate:value": ($event) => valueRef.value = $event
+      }, _slots.value);
+    };
+  }
+});
+const INPUT = connect(script, mapProps((props, field) => {
+  const _props = assignUpdateValue(props, field);
+  _props.allowInput = (value) => !value.startsWith(" ") && !value.endsWith(" ");
+  return _props;
+}, assignClearBindVisited));
+
+export { INPUT };

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

@@ -1 +1,13 @@
-import{connect as o,mapProps as r}from"@formily/vue";import{NInputGroup as m}from"naive-ui";const e=o(m,r((o=>({style:{"--column":o.span},class:"form-render__inputGroup"}))));export{e as INPUT_GROUP};
+import { connect, mapProps } from '@formily/vue';
+import { NInputGroup } from 'naive-ui';
+
+const INPUT_GROUP = connect(NInputGroup, mapProps((props) => {
+  return {
+    style: {
+      "--column": props.span
+    },
+    class: "form-render__inputGroup"
+  };
+}));
+
+export { INPUT_GROUP };

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

@@ -1 +1,105 @@
-import{defineComponent as e,watch as n,computed as t,createVNode as r,mergeProps as o}from"vue";import u from"../../../../../shared/components/InputNumberSlash/InputNumberSlash.js";import{connect as i,mapProps as p}from"@formily/vue";import{isString as l,isNumber as a,isInteger as s}from"lodash-es";import{NInputNumber as m}from"naive-ui";import{useCommonInjection as c}from"../../hooks/useCommonInjection.js";import{createInputSlot as v,parseNumberFromMaybeString as f}from"../../utils/index.js";import{assignUpdateValue as y,assignClearBindVisited as g}from"../../utils/schema.js";const b=i(e({props:{value:{type:[Number,String]},onChange:{type:Function,required:!0},pureInteger:{type:Boolean},prefix:{type:[String,Function,Object]},suffix:{type:[String,Function,Object]},precision:{type:Number}},setup(e){const u=v(e);c().injectValueValidate((()=>e.value)),n((()=>e.value),(n=>{if(null!=n)return!l(n)&&!a(n)||Number.isNaN(+n)?e.onChange(null):void e.onChange(+n)}));const i=t({get:()=>""===e.value?null:f(e.value),set:n=>{var t;return null==(t=e.onChange)?void 0:t.call(e,n)}}),p=c().injectValueBindKey(i);return()=>{const n={};return e.pureInteger&&(n.format=n=>s(n)?n.toString():a(n)&&null!=e.precision?n.toFixed(e.precision):n),r(m,o(n,{precision:e.precision,key:p.value,value:i.value,"onUpdate:value":e=>i.value=e,"show-button":!1}),u.value)}}}),p(y,g)),d=i(e({props:{value:{type:[Number,String]},onChange:{type:Function,required:!0},prefix:{type:[String,Function,Object]},suffix:{type:[String,Function,Object]},precision:{type:Number}},setup(e){const n=c().injectValueBindKey((()=>e.value)),t=v(e);return()=>r(u,o(e,{key:n.value}),t.value)}}),p(y,g));export{b as INPUT_NUMBER,d as INPUT_NUMBER_SLASH};
+import { defineComponent, watch, computed, createVNode, mergeProps } from 'vue';
+import script$1 from '../../../../../shared/components/InputNumberSlash/InputNumberSlash.js';
+import { connect, mapProps } from '@formily/vue';
+import { isString, isNumber, isInteger } from 'lodash-es';
+import { NInputNumber } from 'naive-ui';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { createInputSlot, parseNumberFromMaybeString } from '../../utils/index.js';
+import { assignUpdateValue, assignClearBindVisited } from '../../utils/schema.js';
+
+const script = /* @__PURE__ */ defineComponent({
+  props: {
+    value: {
+      type: [Number, String]
+    },
+    onChange: {
+      type: Function,
+      required: true
+    },
+    pureInteger: {
+      type: Boolean
+    },
+    prefix: {
+      type: [String, Function, Object]
+    },
+    suffix: {
+      type: [String, Function, Object]
+    },
+    precision: {
+      type: Number
+    }
+  },
+  setup(props) {
+    const _slots = createInputSlot(props);
+    useCommonInjection().injectValueValidate(() => props.value);
+    watch(() => props.value, (value) => {
+      if (value == null)
+        return;
+      if (!isString(value) && !isNumber(value) || Number.isNaN(+value))
+        return props.onChange(null);
+      props.onChange(+value);
+    });
+    const valueRef = computed({
+      get: () => {
+        return props.value === "" ? null : parseNumberFromMaybeString(props.value);
+      },
+      set: (v) => {
+        var _a;
+        return (_a = props.onChange) == null ? void 0 : _a.call(props, v);
+      }
+    });
+    const key = useCommonInjection().injectValueBindKey(valueRef);
+    return () => {
+      const config = {};
+      if (props.pureInteger) {
+        config.format = (num) => {
+          if (isInteger(num))
+            return num.toString();
+          if (isNumber(num) && props.precision != null)
+            return num.toFixed(props.precision);
+          return num;
+        };
+      }
+      return createVNode(NInputNumber, mergeProps(config, {
+        "precision": props.precision,
+        "key": key.value,
+        "value": valueRef.value,
+        "onUpdate:value": ($event) => valueRef.value = $event,
+        "show-button": false
+      }), _slots.value);
+    };
+  }
+});
+const INPUT_NUMBER = connect(script, mapProps(assignUpdateValue, assignClearBindVisited));
+const scriptSlash = /* @__PURE__ */ defineComponent({
+  props: {
+    value: {
+      type: [Number, String]
+    },
+    onChange: {
+      type: Function,
+      required: true
+    },
+    prefix: {
+      type: [String, Function, Object]
+    },
+    suffix: {
+      type: [String, Function, Object]
+    },
+    precision: {
+      type: Number
+    }
+  },
+  setup(props) {
+    const key = useCommonInjection().injectValueBindKey(() => props.value);
+    const _slots = createInputSlot(props);
+    return () => {
+      return createVNode(script$1, mergeProps(props, {
+        "key": key.value
+      }), _slots.value);
+    };
+  }
+});
+const INPUT_NUMBER_SLASH = connect(scriptSlash, mapProps(assignUpdateValue, assignClearBindVisited));
+
+export { INPUT_NUMBER, INPUT_NUMBER_SLASH };

package/es/components/form-render/src/components/renderer/levelSearchCascader/index.d.ts

@@ -56,6 +56,10 @@ export declare const LEVEL_SEARCH_CASCADER: import("vue").DefineComponent<{
         default: string;
     };
     onChange: {};
+    validateLastNode: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: boolean;
+    };
     value: {
         type: PropType<string | AnyObject[]>;
     };
@@ -115,6 +119,10 @@ export declare const LEVEL_SEARCH_CASCADER: import("vue").DefineComponent<{
         default: string;
     };
     onChange: {};
+    validateLastNode: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: boolean;
+    };
     value: {
         type: PropType<string | AnyObject[]>;
     };
@@ -127,4 +135,5 @@ export declare const LEVEL_SEARCH_CASCADER: import("vue").DefineComponent<{
     lazyRequest: boolean;
     requestCache: boolean;
     checkAbleLevel: number | "last";
+    validateLastNode: string | boolean;
 }>;

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

@@ -1 +1,154 @@
-import{defineComponent as e,inject as o,createVNode as a}from"vue";import t from"../../../../../../shared/components/no-data/NoData.vue.js";import"../../../../../../shared/utils/index.js";import"naive-ui";import"@vueuse/core";import"date-fns";import"lodash-es";import"@vue/shared";import{useLevelSearchCascader as l}from"../../../../../../shared/hooks/useLevelSearchCascader.js";import"@vueuse/shared";import"../../../../../../shared/hooks/selectHooks/useSearchContent.js";import"@vicons/ionicons5";import"../../../../../../shared/hooks/useScrollLoading.js";import{connect as r,mapProps as s}from"@formily/vue";import"../../../../index.js";import{InjectionAsyncQueue as u,InjectionChangeContextCollector as i}from"../../../constants/index.js";import{useCommonInjection as n}from"../../../hooks/useCommonInjection.js";import d from"../../../../../search-cascader/index.js";import{assignUpdateValue as m}from"../../../utils/schema.js";import{useFormField as p}from"../../../hooks/useFormField.js";const c=r(e({name:"FormSearchCascade",props:{options:{type:Array,default:()=>[]},labelField:{type:String,default:"text"},valueField:{type:String,default:"value"},autograph:{type:String,required:!0},lazyRequest:{type:Boolean,default:!0},requestCache:{type:Boolean,default:!0},wordbook:{type:Object,required:!0},checkAbleLevel:{type:[Number,String],default:"last"},onChange:{},value:{type:[String,Array]}},emits:["update:value"],setup(e,{emit:r}){const s=o(u),{field:m,fieldKey:c}=p(),{valueRef:v,labelKey:h,valueKey:f,optionsRef:y,showRef:j,fetchData:k,menuWidth:b,searchCascaderRef:S}=l(e,r,{fieldKey:c,asyncQueue:s,getRequestPayload:()=>({field:m.value})}),g=o(i),C=h.value,F=f.value;function x(){b.value=150}g.setContext(c.value,(()=>({labelField:C,valueField:F})));const{injectValueValidate:K,injectValueBindKey:R}=n();K(v);const q=R(v);return()=>a(d,{ref:S,value:v.value,"onUpdate:value":e=>v.value=e,show:j.value,"onUpdate:show":e=>j.value=e,options:y.value,key:q.value,checkAbleLevel:e.checkAbleLevel,labelKey:h.value,valueKey:f.value,search:k,onFocus:x,menuWidth:b.value},{empty:()=>a(t,null,null)})}}),s({dataSource:"options"},m));export{c as LEVEL_SEARCH_CASCADER};
+import { defineComponent, inject, onMounted, createVNode } from 'vue';
+import script$1 from '../../../../../../shared/components/no-data/NoData.vue.js';
+import '../../../../../../shared/utils/index.js';
+import 'naive-ui';
+import '@vueuse/core';
+import 'date-fns';
+import { castArray, isArray, last, isString } from 'lodash-es';
+import { isObject } from '@vue/shared';
+import { useLevelSearchCascader } from '../../../../../../shared/hooks/useLevelSearchCascader.js';
+import '@vueuse/shared';
+import '../../../../../../shared/hooks/selectHooks/useSearchContent.js';
+import '@vicons/ionicons5';
+import '../../../../../../shared/hooks/useScrollLoading.js';
+import { isField } from '@formily/core';
+import { connect, mapProps } from '@formily/vue';
+import '../../../../index.js';
+import { InjectionAsyncQueue, InjectionChangeContextCollector } from '../../../constants/index.js';
+import { useCommonInjection } from '../../../hooks/useCommonInjection.js';
+import SearchCascader from '../../../../../search-cascader/index.js';
+import { assignUpdateValue } from '../../../utils/schema.js';
+import { useFormField } from '../../../hooks/useFormField.js';
+
+const script = /* @__PURE__ */ defineComponent({
+  name: "FormSearchCascade",
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    labelField: {
+      type: String,
+      default: "text"
+    },
+    valueField: {
+      type: String,
+      default: "value"
+    },
+    autograph: {
+      type: String,
+      required: true
+    },
+    lazyRequest: {
+      type: Boolean,
+      default: true
+    },
+    requestCache: {
+      type: Boolean,
+      default: true
+    },
+    wordbook: {
+      type: Object,
+      required: true
+    },
+    checkAbleLevel: {
+      type: [Number, String],
+      default: "last"
+    },
+    onChange: {},
+    validateLastNode: {
+      type: [Boolean, String],
+      default: false
+    },
+    value: {
+      type: [String, Array]
+    }
+  },
+  emits: ["update:value"],
+  setup(props, {
+    emit
+  }) {
+    const asyncQueue = inject(InjectionAsyncQueue);
+    const {
+      field,
+      fieldKey
+    } = useFormField();
+    const {
+      valueRef,
+      nodeHasChild,
+      labelKey,
+      valueKey,
+      optionsRef,
+      showRef,
+      fetchData,
+      menuWidth,
+      searchCascaderRef
+    } = useLevelSearchCascader(props, emit, {
+      fieldKey,
+      asyncQueue,
+      getRequestPayload: () => ({
+        field: field.value
+      })
+    });
+    const changeContextCollector = inject(InjectionChangeContextCollector);
+    const labelField = labelKey.value;
+    const valueField = valueKey.value;
+    changeContextCollector.setContext(fieldKey.value, () => {
+      return {
+        labelField,
+        valueField
+      };
+    });
+    function handleFocus() {
+      menuWidth.value = 150;
+    }
+    const {
+      injectValueValidate,
+      injectValueBindKey
+    } = useCommonInjection();
+    injectValueValidate(valueRef);
+    const key = injectValueBindKey(valueRef);
+    onMounted(() => {
+      if (!props.validateLastNode || !isField(field.value))
+        return;
+      const tempValidator = field.value.validator ? castArray(field.value.validator) : [];
+      if (tempValidator.some((item) => isObject(item) && item.isLastOptionValidator))
+        return;
+      field.value.validator = [{
+        async validator() {
+          if (!isArray(valueRef.value) || !valueRef.value.length)
+            return;
+          try {
+            if (await nodeHasChild(last(valueRef.value)))
+              return isString(props.validateLastNode) ? props.validateLastNode : "\u8BF7\u9009\u62E9\u6700\u540E\u4E00\u7EA7\u9009\u9879";
+          } catch (e) {
+            return "";
+          }
+        },
+        isLastOptionValidator: true
+      }, ...tempValidator];
+    });
+    return () => createVNode(SearchCascader, {
+      "ref": searchCascaderRef,
+      "value": valueRef.value,
+      "onUpdate:value": ($event) => valueRef.value = $event,
+      "show": showRef.value,
+      "onUpdate:show": ($event) => showRef.value = $event,
+      "options": optionsRef.value,
+      "key": key.value,
+      "checkAbleLevel": props.checkAbleLevel,
+      "labelKey": labelKey.value,
+      "valueKey": valueKey.value,
+      "search": fetchData,
+      "onFocus": handleFocus,
+      "menuWidth": menuWidth.value
+    }, {
+      empty: () => createVNode(script$1, null, null)
+    });
+  }
+});
+const LEVEL_SEARCH_CASCADER = connect(script, mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+
+export { LEVEL_SEARCH_CASCADER };

package/es/components/form-render/src/components/renderer/lineBar/FormCollapse.vue.js

@@ -1 +1,6 @@
-import e from"./FormCollapse.vue2.js";import r from"../../../../../../_virtual/_plugin-vue_export-helper.js";var o=r(e,[["__file","FormCollapse.vue"]]);export{o as default};
+import _sfc_main from './FormCollapse.vue2.js';
+import _export_sfc from '../../../../../../_virtual/_plugin-vue_export-helper.js';
+
+var FormCollapse = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "FormCollapse.vue"]]);
+
+export { FormCollapse as default };

package/es/components/form-render/src/components/renderer/lineBar/FormCollapse.vue2.js

@@ -1 +1,131 @@
-import{defineComponent as e,ref as r,inject as l,computed as i,openBlock as t,createElementBlock as a,createElementVNode as n,normalizeClass as o,unref as s,normalizeStyle as d,renderSlot as u,createTextVNode as m,toDisplayString as f,createBlock as v,createCommentVNode as b,Fragment as c,createVNode as p,withCtx as h}from"vue";import{widthAppend as _}from"../../../../../../shared/utils/index.js";import"../../../../index.js";import y from"../../tooltipMessage.vue.js";import{InjectionFormGlobalEmit as g,InjectionFormItemDepsCollector as k,InjectionFormGlobalProps as x}from"../../../constants/index.js";import{ChevronDown as w,ChevronUp as D}from"@vicons/ionicons5";import{NCollapseTransition as S}from"naive-ui";import{useFormField as j}from"../../../hooks/useFormField.js";const z={class:"form-render__linebar"};var T=e({__name:"FormCollapse",props:{show:{type:Boolean,default:!0},title:{type:String,default:""},remark:String,disabled:{type:Boolean,default:!1},linebarDirection:{type:String},linebarWidth:{type:[Number,String]},linebarTextDirection:{type:String}},setup(e){const T=e,B=r(T.show),C=l(g);function F(){!T.disabled&&$.value&&(B.value=!B.value,null==C||C("linebarChange",{field:H.value,fieldKey:W.value,show:B.value,showRef:B}))}const{field:H,fieldKey:W}=j();l(k).setDeps(H.value.path,H.value.path.toString(),((e,r=!0)=>{B.value=r}));const K=l(x,{}),$=i((()=>{var e;return"horizontal"!==(null!=(e=T.linebarDirection)?e:K.linebarDirection)})),I=i((()=>$.value?"":["form-render__linebar--horizontal","form-render__linebar--horizontalBorder"])),M=i((()=>{var e,r;return null!=(r=null!=(e=T.linebarWidth)?e:K.linebarWidth)?r:120})),N=i((()=>$.value?{}:{"--form-render-linebar-width":_(M.value),"border-right":"1px solid black"})),R=i((()=>["form-render__linebarHeader",{"form-render__linebarHeader--disabled":!!T.disabled}])),q=i((()=>{var e,r;return null!=(r=null!=(e=T.linebarTextDirection)?e:K.linebarTextDirection)?r:"horizontal"})),A=i((()=>"vertical"!==q.value||$.value?{}:{"writing-mode":"vertical-lr","text-orientation":"upright"}));return(r,l)=>(t(),a("section",z,[n("section",{class:o(s(I))},[n("header",{class:o(s(R)),onClick:F,style:d(s(N))},[n("div",{class:"form-render__linebarHeaderTitle",style:d(s(A))},[u(r.$slots,"title",{},(()=>[m(f(e.title),1)])),e.remark?(t(),v(y,{key:0,message:e.remark},null,8,["message"])):b("v-if",!0)],4),!e.disabled&&s($)?(t(),a(c,{key:0},[B.value?(t(),v(s(w),{key:0})):(t(),v(s(D),{key:1}))],64)):b("v-if",!0)],6),p(s(S),{class:"form-render__linebarItem",show:B.value},{default:h((()=>[u(r.$slots,"default")])),_:3},8,["show"])],2)]))}});export{T as default};
+import { defineComponent, ref, inject, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createBlock, createCommentVNode, Fragment, createVNode, withCtx } from 'vue';
+import { widthAppend } from '../../../../../../shared/utils/index.js';
+import '../../../../index.js';
+import TooltipMessage from '../../tooltipMessage.vue.js';
+import { InjectionFormGlobalEmit, InjectionFormItemDepsCollector, InjectionFormGlobalProps } from '../../../constants/index.js';
+import { ChevronDown, ChevronUp } from '@vicons/ionicons5';
+import { NCollapseTransition } from 'naive-ui';
+import { useFormField } from '../../../hooks/useFormField.js';
+
+const _hoisted_1 = {
+  class: "form-render__linebar"
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FormCollapse",
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    remark: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    linebarDirection: {
+      type: String
+    },
+    linebarWidth: {
+      type: [Number, String]
+    },
+    linebarTextDirection: {
+      type: String
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const _show = ref(props.show);
+    const globEmit = inject(InjectionFormGlobalEmit);
+    function toggleShow() {
+      if (props.disabled || !isVerticalLinebar.value)
+        return;
+      _show.value = !_show.value;
+      globEmit == null ? void 0 : globEmit("linebarChange", {
+        field: field.value,
+        fieldKey: fieldKey.value,
+        show: _show.value,
+        showRef: _show
+      });
+    }
+    const {
+      field,
+      fieldKey
+    } = useFormField();
+    const formItemDepsCollector = inject(InjectionFormItemDepsCollector);
+    formItemDepsCollector.setDeps(field.value.path, field.value.path.toString(), (_, v = true) => {
+      _show.value = v;
+    });
+    const globProps = inject(InjectionFormGlobalProps, {});
+    const isVerticalLinebar = computed(() => {
+      var _a;
+      return ((_a = props.linebarDirection) != null ? _a : globProps.linebarDirection) !== "horizontal";
+    });
+    const wrapperClass = computed(() => {
+      if (isVerticalLinebar.value)
+        return "";
+      return ["form-render__linebar--horizontal", "form-render__linebar--horizontalBorder"];
+    });
+    const width = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.linebarWidth) != null ? _a : globProps.linebarWidth) != null ? _b : 120;
+    });
+    const headerStyle = computed(() => {
+      if (isVerticalLinebar.value)
+        return {};
+      return {
+        "--form-render-linebar-width": widthAppend(width.value),
+        "border-right": "1px solid black"
+      };
+    });
+    const headerClass = computed(() => {
+      return ["form-render__linebarHeader", {
+        "form-render__linebarHeader--disabled": !!props.disabled
+      }];
+    });
+    const textDirection = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.linebarTextDirection) != null ? _a : globProps.linebarTextDirection) != null ? _b : "horizontal";
+    });
+    const textStyle = computed(() => {
+      if (textDirection.value !== "vertical" || isVerticalLinebar.value)
+        return {};
+      return {
+        "writing-mode": "vertical-lr",
+        "text-orientation": "upright"
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", _hoisted_1, [createElementVNode("section", {
+        class: normalizeClass(unref(wrapperClass))
+      }, [createElementVNode("header", {
+        class: normalizeClass(unref(headerClass)),
+        onClick: toggleShow,
+        style: normalizeStyle(unref(headerStyle))
+      }, [createElementVNode("div", {
+        class: "form-render__linebarHeaderTitle",
+        style: normalizeStyle(unref(textStyle))
+      }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)]), __props.remark ? (openBlock(), createBlock(TooltipMessage, {
+        key: 0,
+        message: __props.remark
+      }, null, 8, ["message"])) : createCommentVNode("v-if", true)], 4), !__props.disabled && unref(isVerticalLinebar) ? (openBlock(), createElementBlock(Fragment, {
+        key: 0
+      }, [_show.value ? (openBlock(), createBlock(unref(ChevronDown), {
+        key: 0
+      })) : (openBlock(), createBlock(unref(ChevronUp), {
+        key: 1
+      }))], 64)) : createCommentVNode("v-if", true)], 6), createVNode(unref(NCollapseTransition), {
+        class: "form-render__linebarItem",
+        show: _show.value
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, ["show"])], 2)]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

@@ -1 +1,11 @@
-import{connect as o,mapProps as t}from"@formily/vue";import r from"./FormCollapse.vue.js";const e=o(r,t(((o,t)=>({...o,title:t.title}))));export{e as LINEBAR};
+import { connect, mapProps } from '@formily/vue';
+import FormCollapse from './FormCollapse.vue.js';
+
+const LINEBAR = connect(FormCollapse, mapProps((props, field) => {
+  return {
+    ...props,
+    title: field.title
+  };
+}));
+
+export { LINEBAR };