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

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

@@ -1 +1,246 @@
-import{defineComponent as e,computed as t,inject as l,createVNode as a,mergeProps as o,isVNode as n}from"vue";import i from"../../../../../shared/components/CancelRadio/CancelRadio.js";import{connect as r,mapProps as u}from"@formily/vue";import{cloneDeep as s,isArray as d,xor as c,isNumber as p,isEmpty as v}from"lodash-es";import{NCheckboxGroup as m,NCheckbox as f,NRadioGroup as h}from"naive-ui";import"../../../index.js";import{InjectionChangeContextCollector as y}from"../../constants/index.js";import{useComplexOptions as g}from"../../hooks/useComplexOptions.js";import"../../../../../shared/utils/index.js";import"@formily/core";import"@formily/path";import"@vicons/ionicons5";import"@vue/shared";import"@vueuse/core";import"./text.js";import"../../utils/business.js";import{assignUpdateValue as j,createVisitedSetter as b}from"../../utils/schema.js";import{useUrlConfigOptions as x,useAutographOptions as C}from"../../hooks/useFormRenderOptions.js";import{useCommonInjection as F}from"../../hooks/useCommonInjection.js";import{useFormField as k}from"../../hooks/useFormField.js";function S(i,r,u){return e({name:i,props:{value:{type:[String,Number,Object,Array]},options:{type:Array,default:()=>[]},urlConfig:{type:Object},autograph:{type:String},lazyRequest:{type:Boolean,default:!1},requestCache:{type:Boolean,default:!0},labelField:{type:String,default:"text"},valueField:{type:String,default:"value"},wordbook:{type:Object},vertical:{type:Boolean,default:!1},childFieldStrategy:{type:String,default:"checked"},childWidthMode:{type:String,default:"outer"},clearable:Boolean,selectAll:Boolean,onChange:{}},emits:["update:value"],setup(e,{emit:i,attrs:h}){const{field:j,fieldKey:S}=k();const w=t({get(){return t=e.value,p(t)?t+"":t;var t},set(e){i("update:value",e)}}),{renderComplexOption:O}=g(e,w),{labelKey:B,valueKey:_,fullOptions:K}=e.urlConfig?x(e,w):C(e,w);l(y).setContext(S.value,(e=>{return{currentOption:s((t=e,d(t)?function(e){const t=K.value.reduce(((e,t)=>(e[t[_.value]]=t,e)),{});return e.map((e=>t[e]))}(t):(l=t,K.value.find((e=>e[_.value]===l))))),labelField:B.value,valueField:_.value};var t,l}));const{injectValueBindKey:W,injectValueValidate:R}=F();R(w);const A=W(w);function I(){w.value=null}const M=t({get:()=>d(w.value)&&w.value.length===K.value.length,set(e){const t=e?K.value.map((e=>e[_.value])):[];c(t,w.value).length&&(w.value=t)}}),V=t((()=>d(e.value)&&e.value.length&&e.value.length<K.value.length));function P(t){let l;const o={display:"flex",alignItems:"center"};if(t.__spanPercent&&"inner"===e.childWidthMode){const e=`${t.__spanPercent}%`;o.maxWidth=e,function(e,t){return!v(t.childrenFields)&&(d(e)?e.includes(t[_.value]):e===t[_.value])}(w.value,t)&&(o.width=e)}return a(u,{key:t[_.value],value:t[_.value],disabled:t.disabled,currentValue:w.value,cancelable:e.clearable,onCancel:I,style:o},"function"==typeof(i=l=O({value:w.value,option:t,valueKey:_.value,labelKey:B.value,childFieldStrategy:e.childFieldStrategy,childWidthMode:e.childWidthMode}))||"[object Object]"===Object.prototype.toString.call(i)&&!n(i)?l:{default:()=>[l]});var i}return()=>{const t=K.value.map((e=>{var t;const l=null==(t=e.childrenFields)?void 0:t.reduce(((e,t)=>e+ +(t.elem_width||3)),0);return{...e,__spanPercent:(l||0)/12*100}})),l={display:"flex",flexDirection:e.vertical?"column":"row",flexWrap:"wrap",justifyItems:"flex-start",alignItems:e.vertical?"flex-start":"center",width:"100%"},n=a(r,o({key:A.value,value:w.value,"onUpdate:value":e=>w.value=e,onClick:b(j),style:{width:"100%"}},h),{default:()=>[a("section",{style:l},[t.map(P)])]});return e.selectAll?a("section",null,[[r!==m?null:a(f,{checked:M.value,"onUpdate:checked":e=>M.value=e,indeterminate:V.value},{default:()=>{var e;return(null==(e=window.getLanguageByCode)?void 0:e.call(window,"10010.1.37"))||"全选"}}),n]]):n}}})}const w=r(S("FormRadio",h,i),u({dataSource:"options"},j)),O=r(S("FormCheckbox",m,f),u({dataSource:"options"},j));export{O as CHECKBOX,w as RADIO};
+import { defineComponent, computed, inject, createVNode, mergeProps, isVNode } from 'vue';
+import script from '../../../../../shared/components/CancelRadio/CancelRadio.js';
+import { connect, mapProps } from '@formily/vue';
+import { cloneDeep, isArray, xor, isNumber, isEmpty } from 'lodash-es';
+import { NCheckboxGroup, NCheckbox, NRadioGroup } from 'naive-ui';
+import '../../../index.js';
+import { InjectionChangeContextCollector } from '../../constants/index.js';
+import { useComplexOptions } from '../../hooks/useComplexOptions.js';
+import '../../../../../shared/utils/index.js';
+import '@formily/core';
+import '@formily/path';
+import '@vicons/ionicons5';
+import '@vue/shared';
+import '@vueuse/core';
+import './text.js';
+import '../../utils/business.js';
+import { assignUpdateValue, createVisitedSetter } from '../../utils/schema.js';
+import { useUrlConfigOptions, useAutographOptions } from '../../hooks/useFormRenderOptions.js';
+import { useCommonInjection } from '../../hooks/useCommonInjection.js';
+import { useFormField } from '../../hooks/useFormField.js';
+
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function createComponent(name, Wrapper, Item) {
+  return /* @__PURE__ */ defineComponent({
+    name,
+    props: {
+      value: {
+        type: [String, Number, Object, Array]
+      },
+      options: {
+        type: Array,
+        default: () => []
+      },
+      urlConfig: {
+        type: Object
+      },
+      autograph: {
+        type: String
+      },
+      lazyRequest: {
+        type: Boolean,
+        default: false
+      },
+      requestCache: {
+        type: Boolean,
+        default: true
+      },
+      labelField: {
+        type: String,
+        default: "text"
+      },
+      valueField: {
+        type: String,
+        default: "value"
+      },
+      wordbook: {
+        type: Object
+      },
+      vertical: {
+        type: Boolean,
+        default: false
+      },
+      childFieldStrategy: {
+        type: String,
+        default: "checked"
+      },
+      childWidthMode: {
+        type: String,
+        default: "outer"
+      },
+      clearable: Boolean,
+      selectAll: Boolean,
+      onChange: {}
+    },
+    emits: ["update:value"],
+    setup(props, {
+      emit,
+      attrs
+    }) {
+      const {
+        field,
+        fieldKey
+      } = useFormField();
+      function dangerousTypeTransform(value) {
+        if (isNumber(value))
+          return value + "";
+        return value;
+      }
+      const valueRef = computed({
+        get() {
+          return dangerousTypeTransform(props.value);
+        },
+        set(value) {
+          emit("update:value", value);
+        }
+      });
+      const {
+        renderComplexOption
+      } = useComplexOptions(props, valueRef);
+      const {
+        labelKey,
+        valueKey,
+        fullOptions
+      } = props.urlConfig ? useUrlConfigOptions(props, valueRef) : useAutographOptions(props, valueRef);
+      const changeContextCollector = inject(InjectionChangeContextCollector);
+      changeContextCollector.setContext(fieldKey.value, (v) => {
+        return {
+          currentOption: cloneDeep(getCurrentOption(v)),
+          labelField: labelKey.value,
+          valueField: valueKey.value
+        };
+        function getCurrentOption(v2) {
+          return isArray(v2) ? findArrayOption(v2) : findOption(v2);
+          function findOption(value) {
+            return fullOptions.value.find((option) => option[valueKey.value] === value);
+          }
+          function findArrayOption(value) {
+            const fullOptionMap = fullOptions.value.reduce((res, option) => {
+              res[option[valueKey.value]] = option;
+              return res;
+            }, {});
+            return value.map((item) => fullOptionMap[item]);
+          }
+        }
+      });
+      const {
+        injectValueBindKey,
+        injectValueValidate
+      } = useCommonInjection();
+      injectValueValidate(valueRef);
+      const key = injectValueBindKey(valueRef);
+      function onCancel() {
+        valueRef.value = null;
+      }
+      function valueMatcher(value, option) {
+        if (isEmpty(option.childrenFields))
+          return false;
+        return isArray(value) ? value.includes(option[valueKey.value]) : value === option[valueKey.value];
+      }
+      const selectAllState = computed({
+        get() {
+          return isArray(valueRef.value) && valueRef.value.length === fullOptions.value.length;
+        },
+        set(value) {
+          const resValue = value ? fullOptions.value.map((item) => item[valueKey.value]) : [];
+          if (!xor(resValue, valueRef.value).length)
+            return;
+          valueRef.value = resValue;
+        }
+      });
+      const indeterminate = computed(() => isArray(props.value) && props.value.length && props.value.length < fullOptions.value.length);
+      function renderSelectAll() {
+        if (Wrapper !== NCheckboxGroup)
+          return null;
+        return createVNode(NCheckbox, {
+          "checked": selectAllState.value,
+          "onUpdate:checked": ($event) => selectAllState.value = $event,
+          "indeterminate": indeterminate.value
+        }, {
+          default: () => {
+            var _a;
+            return ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.37")) || "\u5168\u9009";
+          }
+        });
+      }
+      function renderOption(option) {
+        let _slot;
+        const childInnerWidthMode = option.__spanPercent && props.childWidthMode === "inner";
+        const style = {
+          display: "flex",
+          alignItems: "center"
+        };
+        if (childInnerWidthMode) {
+          const percentWidth = `${option.__spanPercent}%`;
+          style.maxWidth = percentWidth;
+          if (valueMatcher(valueRef.value, option)) {
+            style.width = percentWidth;
+          }
+        }
+        return createVNode(Item, {
+          "key": option[valueKey.value],
+          "value": option[valueKey.value],
+          "disabled": option.disabled,
+          "currentValue": valueRef.value,
+          "cancelable": props.clearable,
+          "onCancel": onCancel,
+          "style": style
+        }, _isSlot(_slot = renderComplexOption({
+          value: valueRef.value,
+          option,
+          valueKey: valueKey.value,
+          labelKey: labelKey.value,
+          childFieldStrategy: props.childFieldStrategy,
+          childWidthMode: props.childWidthMode
+        })) ? _slot : {
+          default: () => [_slot]
+        });
+      }
+      return () => {
+        const optionsWithSpan = fullOptions.value.map((option) => {
+          var _a;
+          const span = (_a = option.childrenFields) == null ? void 0 : _a.reduce((res, child) => {
+            return res + +(child.elem_width || 3);
+          }, 0);
+          return {
+            ...option,
+            __spanPercent: (span || 0) / 12 * 100
+          };
+        });
+        const elementStyle = {
+          display: "flex",
+          flexDirection: props.vertical ? "column" : "row",
+          flexWrap: "wrap",
+          justifyItems: "flex-start",
+          alignItems: props.vertical ? "flex-start" : "center",
+          width: "100%"
+        };
+        const _Wrapper = Wrapper;
+        const content = createVNode(_Wrapper, mergeProps({
+          "key": key.value,
+          "value": valueRef.value,
+          "onUpdate:value": ($event) => valueRef.value = $event,
+          "onClick": createVisitedSetter(field),
+          "style": {
+            width: "100%"
+          }
+        }, attrs), {
+          default: () => [createVNode("section", {
+            "style": elementStyle
+          }, [optionsWithSpan.map(renderOption)])]
+        });
+        return props.selectAll ? createVNode("section", null, [[renderSelectAll(), content]]) : content;
+      };
+    }
+  });
+}
+const RADIO = connect(createComponent("FormRadio", NRadioGroup, script), mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+const CHECKBOX = connect(createComponent("FormCheckbox", NCheckboxGroup, NCheckbox), mapProps({
+  dataSource: "options"
+}, assignUpdateValue));
+
+export { CHECKBOX, RADIO };

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

@@ -1 +1,227 @@
-import{defineComponent as e,watch as l,inject as a,computed as o,ref as t,createVNode as n}from"vue";import{connect as u,mapProps as r}from"@formily/vue";import{HelpCircleSharp as i}from"@vicons/ionicons5";import{useVModel as s,useDebounceFn as v}from"@vueuse/core";import{cloneDeep as p,isString as d}from"lodash-es";import{NSelect as m,NSpin as c,NEmpty as f,NTooltip as y,NIcon as g,NTag as h}from"naive-ui";import"../../../index.js";import{InjectionChangeContextCollector as C}from"../../constants/index.js";import{useCommonInjection as b,useSelectOptionProps as F}from"../../hooks/useCommonInjection.js";import{assignUpdateValue as j,assignClearBindVisited as w,createVisitedSetter as B}from"../../utils/schema.js";import{useFormField as S}from"../../hooks/useFormField.js";import{useUrlConfigOptions as x,useAutographOptions as K}from"../../hooks/useFormRenderOptions.js";const k=u(e({name:"FormRemoteSearch",props:{value:{type:[String,Number,Array]},requestCache:{type:Boolean,default:!0},options:{type:Array,default:()=>[]},allowCreate:Boolean,labelField:{type:String,default:"text"},valueField:{type:String,default:"value"},showField:{type:String},urlConfig:{type:Object},autograph:{type:String},wordbook:{type:Object},onChange:{},useLoading:{type:Boolean,default:!0},lazyRequest:{type:Boolean,default:!0},multiple:Boolean,deletable:Boolean},emits:["update:value"],setup(e,{slots:u,emit:r}){const j=s(e,"value",r),{field:w,fieldKey:k}=S(),{injectValueValidate:O,injectValueBindKey:D}=b();O(j);const L=D(j),R={onRequestConfigChange:({fetchData:e,valueKey:l})=>e(j.value,{[l]:j.value}),onDepsChange:({fetchData:e,valueKey:l})=>e(j.value,{[l]:j.value})},{labelKey:q,valueKey:P,showKey:V,fetchData:A,searchContent:I,fullOptions:U,loading:z}=e.urlConfig?x(e,j,R):K(e,j,R),N=v(((e,l="label")=>A(e,{["value"===l?P.value:"keyword"]:e},{avoidSearchContent:!1})),300);l(j,(e=>{if(e&&!U.value.find((l=>l[P.value]===e)))return N(e,"value")}),{immediate:!0});a(C).setContext(k.value,(e=>{return{currentOption:p((l=e,U.value.find((e=>e[P.value]===l)))),labelField:q.value,valueField:P.value};var l}));const{menuProps:T,nodeProps:$}=F(),E=o((()=>U.value.length||!e.allowCreate?U.value:I.value?[{[q.value]:I.value,[P.value]:I.value},...U.value]:U.value));async function G(e){z.value=e,e&&N()}function H(e){const l=e.alias||e[q.value];if(!l||!d(l))return"";const a=l;return e.desc?n("section",{style:{display:"flex",alignItems:"center",gap:"4px"}},[a,e.desc?n(y,null,{trigger:()=>n(g,{component:i},null),default:()=>e.desc}):null]):a}function J({option:l,handleClose:a}){var o;const t=null!=(o=V.value&&l[V.value])?o:l[q.value];if(!e.multiple)return M.value=t,t;return M.value="",e.deletable?n(h,{closable:!0,onClose:function(e){e.stopPropagation(),a()}},{default:()=>t}):`${t};`}const M=t("");return()=>n(m,{title:M.value,remote:!0,filterable:!0,key:L.value,value:j.value,"onUpdate:value":e=>j.value=e,labelField:q.value,valueField:P.value,"menu-props":T,"node-props":$,onSearch:N,"onUpdate:show":G,options:E.value,onFocus:B(w),renderLabel:H,renderTag:J},{empty(){var l;return e.useLoading&&z.value?n(c,null,null):n(f,{description:(null==(l=window.getLanguageByCode)?void 0:l.call(window,"10010.1.380"))||"无数据"},null)},...u})}}),r(j,w));export{k as REMOTE_SEARCH};
+import { defineComponent, watch, inject, computed, ref, createVNode } from 'vue';
+import { connect, mapProps } from '@formily/vue';
+import { HelpCircleSharp } from '@vicons/ionicons5';
+import { useVModel, useDebounceFn } from '@vueuse/core';
+import { cloneDeep, isString } from 'lodash-es';
+import { NSelect, NSpin, NEmpty, NTooltip, NIcon, NTag } from 'naive-ui';
+import '../../../index.js';
+import { InjectionChangeContextCollector } from '../../constants/index.js';
+import { useCommonInjection, useSelectOptionProps } from '../../hooks/useCommonInjection.js';
+import { assignUpdateValue, assignClearBindVisited, createVisitedSetter } from '../../utils/schema.js';
+import { useFormField } from '../../hooks/useFormField.js';
+import { useUrlConfigOptions, useAutographOptions } from '../../hooks/useFormRenderOptions.js';
+
+const script = /* @__PURE__ */ defineComponent({
+  name: "FormRemoteSearch",
+  props: {
+    value: {
+      type: [String, Number, Array]
+    },
+    requestCache: {
+      type: Boolean,
+      default: true
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    allowCreate: Boolean,
+    labelField: {
+      type: String,
+      default: "text"
+    },
+    valueField: {
+      type: String,
+      default: "value"
+    },
+    showField: {
+      type: String
+    },
+    urlConfig: {
+      type: Object
+    },
+    autograph: {
+      type: String
+    },
+    wordbook: {
+      type: Object
+    },
+    onChange: {},
+    useLoading: {
+      type: Boolean,
+      default: true
+    },
+    lazyRequest: {
+      type: Boolean,
+      default: true
+    },
+    multiple: Boolean,
+    deletable: Boolean
+  },
+  emits: ["update:value"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const valueRef = useVModel(props, "value", emit);
+    const {
+      field,
+      fieldKey
+    } = useFormField();
+    const {
+      injectValueValidate,
+      injectValueBindKey
+    } = useCommonInjection();
+    injectValueValidate(valueRef);
+    const key = injectValueBindKey(valueRef);
+    const optionHooks = {
+      onRequestConfigChange: ({
+        fetchData: fetchData2,
+        valueKey: valueKey2
+      }) => {
+        return fetchData2(valueRef.value, {
+          [valueKey2]: valueRef.value
+        });
+      },
+      onDepsChange: ({
+        fetchData: fetchData2,
+        valueKey: valueKey2
+      }) => {
+        return fetchData2(valueRef.value, {
+          [valueKey2]: valueRef.value
+        });
+      }
+    };
+    const {
+      labelKey,
+      valueKey,
+      showKey,
+      fetchData: fetchOptions,
+      searchContent,
+      fullOptions,
+      loading
+    } = props.urlConfig ? useUrlConfigOptions(props, valueRef, optionHooks) : useAutographOptions(props, valueRef, optionHooks);
+    const fetchData = useDebounceFn((content, contentType = "label") => {
+      return fetchOptions(content, {
+        [contentType === "value" ? valueKey.value : "keyword"]: content
+      }, {
+        avoidSearchContent: false
+      });
+    }, 300);
+    watch(valueRef, (value) => {
+      if (!value || fullOptions.value.find((option) => option[valueKey.value] === value))
+        return;
+      return fetchData(value, "value");
+    }, {
+      immediate: true
+    });
+    const changeContextCollector = inject(InjectionChangeContextCollector);
+    changeContextCollector.setContext(fieldKey.value, (v) => {
+      return {
+        currentOption: cloneDeep(getCurrentOption(v)),
+        labelField: labelKey.value,
+        valueField: valueKey.value
+      };
+      function getCurrentOption(v2) {
+        return fullOptions.value.find((option) => option[valueKey.value] === v2);
+      }
+    });
+    const {
+      menuProps,
+      nodeProps
+    } = useSelectOptionProps();
+    const renderOptions = computed(() => {
+      if (fullOptions.value.length || !props.allowCreate) {
+        return fullOptions.value;
+      }
+      if (searchContent.value) {
+        return [{
+          [labelKey.value]: searchContent.value,
+          [valueKey.value]: searchContent.value
+        }, ...fullOptions.value];
+      }
+      return fullOptions.value;
+    });
+    async function onUpdateShow(show) {
+      loading.value = show;
+      if (!show)
+        return;
+      fetchData();
+    }
+    function renderLabel(option) {
+      const label = option.alias || option[labelKey.value];
+      if (!label || !isString(label))
+        return "";
+      const labelNode = label;
+      if (!option.desc) {
+        return labelNode;
+      }
+      return createVNode("section", {
+        "style": {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px"
+        }
+      }, [labelNode, option.desc ? createVNode(NTooltip, null, {
+        trigger: () => createVNode(NIcon, {
+          "component": HelpCircleSharp
+        }, null),
+        default: () => option.desc
+      }) : null]);
+    }
+    function renderTag({
+      option,
+      handleClose
+    }) {
+      var _a;
+      const content = (_a = showKey.value && option[showKey.value]) != null ? _a : option[labelKey.value];
+      if (!props.multiple) {
+        titleRef.value = content;
+        return content;
+      }
+      titleRef.value = "";
+      function onClose(e) {
+        e.stopPropagation();
+        handleClose();
+      }
+      return props.deletable ? createVNode(NTag, {
+        "closable": true,
+        "onClose": onClose
+      }, {
+        default: () => content
+      }) : `${content};`;
+    }
+    const titleRef = ref("");
+    return () => {
+      return createVNode(NSelect, {
+        "title": titleRef.value,
+        "remote": true,
+        "filterable": true,
+        "key": key.value,
+        "value": valueRef.value,
+        "onUpdate:value": ($event) => valueRef.value = $event,
+        "labelField": labelKey.value,
+        "valueField": valueKey.value,
+        "menu-props": menuProps,
+        "node-props": nodeProps,
+        "onSearch": fetchData,
+        "onUpdate:show": onUpdateShow,
+        "options": renderOptions.value,
+        "onFocus": createVisitedSetter(field),
+        "renderLabel": renderLabel,
+        "renderTag": renderTag
+      }, {
+        empty() {
+          var _a;
+          return props.useLoading && loading.value ? createVNode(NSpin, null, null) : createVNode(NEmpty, {
+            "description": ((_a = window.getLanguageByCode) == null ? void 0 : _a.call(window, "10010.1.380")) || "\u65E0\u6570\u636E"
+          }, null);
+        },
+        ...slots
+      });
+    };
+  }
+});
+const REMOTE_SEARCH = connect(script, mapProps(assignUpdateValue, assignClearBindVisited));
+
+export { REMOTE_SEARCH };