inl-ui 0.1.72 → 0.1.73

package/dist/components/index.cjs

@@ -11296,7 +11296,7 @@ const defaultPropNames = {
   peopleUserName: "userName"
 };
 const PeopleSelect = vue.defineComponent({
-  emits: ["update:value"],
+  emits: ["update:value", "update:open", "change", "close"],
   props: {
     list: {
       type: Array,
@@ -11306,6 +11306,14 @@ const PeopleSelect = vue.defineComponent({
       type: Array,
       default: () => []
     },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    renderBtn: {
+      type: Boolean,
+      default: true
+    },
     buttonText: {
       type: String,
       default: "\u6DFB\u52A0\u4EBA\u5458"
@@ -11336,7 +11344,11 @@ const PeopleSelect = vue.defineComponent({
   }) {
     const mixPropNames = Object.assign(defaultPropNames, props.propNames);
     vue.provide("propNames", mixPropNames);
-    const isVisible = vue.ref(false);
+    const modalOpen = vue.ref(false);
+    vue.watch(() => props.open, val => {
+      if (val === void 0) return;
+      modalOpen.value = val;
+    });
     const formatList = vue.computed(() => {
       const copyList = ___default["default"].cloneDeep(props.list);
       formatTree(copyList, props.renderNameTree, mixPropNames.peopleList, mixPropNames.peopleId);
@@ -11355,8 +11367,8 @@ const PeopleSelect = vue.defineComponent({
     const initSelect = () => {
       selectPeopleList.value = getUserListById(formatList.value, props.value, mixPropNames.peopleId);
     };
-    vue.watch([() => props.value, formatList, isVisible], () => {
-      if (isVisible.value) initSelect();
+    vue.watch([() => props.value, formatList, modalOpen], () => {
+      if (modalOpen.value) initSelect();
     });
     const selectedKeys = vue.computed(() => selectPeopleList.value.map(item => item.id));
     const handleSelect = (val, e) => {
@@ -11408,100 +11420,114 @@ const PeopleSelect = vue.defineComponent({
     const handleCommit = () => {
       const idList = selectPeopleList.value.map(item => item[mixPropNames.peopleId]);
       emit("update:value", idList);
-      isVisible.value = false;
+      emit("change", idList);
+      modalOpen.value = false;
+      emit("update:open", modalOpen.value);
     };
-    const onClose = () => selectPeopleList.value = [];
-    return () => vue.createVNode("div", {
-      "class": "people-select-cpn"
-    }, [typeof slots.default === "function" ? vue.createVNode("div", {
-      "onClick": () => isVisible.value = true
-    }, [slots.default()]) : vue.createVNode(vue.resolveComponent("a-button"), {
-      "type": "primary",
-      "onClick": () => isVisible.value = true
-    }, {
-      default: () => [props.buttonText]
-    }), vue.createVNode(vue.resolveComponent("a-modal"), {
-      "wrapClassName": "people-select-cpn-modal",
-      "title": "\u6DFB\u52A0\u4EBA\u5458",
-      "centered": true,
-      "width": 900,
-      "onOk": handleCommit,
-      "afterClose": onClose,
-      "visible": isVisible.value,
-      "onUpdate:visible": $event => isVisible.value = $event
-    }, {
-      default: () => [vue.createVNode("div", {
-        "class": "container"
-      }, [vue.createVNode("div", {
-        "class": "left"
-      }, [vue.createVNode(SearchPeopleInput, {
-        "list": formatList.value,
-        "renderName": props.renderNameSearch,
-        "onSelect": handleSelect
-      }, null), vue.createVNode(DepBreadcrumb, {
-        "list": formatList.value,
-        "zoomedDep": zoomedList.value?.[0],
-        "onCheck": handleSelectNode
-      }, null), vue.createVNode(vue.resolveComponent("a-tree"), {
-        "class": "tree",
-        "checkable": true,
-        "showLine": true,
-        "blockNode": true,
-        "autoExpandParent": true,
-        "fieldNames": {
-          children: "subList",
-          key: "id",
-          title: "name"
-        },
-        "treeData": zoomedList.value || formatList.value,
-        "checkedKeys": selectedKeys.value,
-        "onCheck": handleSelect,
-        "onSelect": (keys, {
-          node
-        }) => handleSelectNode(node),
-        "expandedKeys": expandKeys.value,
-        "onUpdate:expandedKeys": $event => expandKeys.value = $event
-      }, {
-        title: node => vue.createVNode("div", {
-          "class": "node-title"
-        }, [vue.createVNode("span", {
-          "class": "name"
-        }, [node.name]), node.isDep && vue.createVNode("span", {
-          "class": "count"
-        }, [node.peopleCount, "\u4EBA"])])
-      })]), vue.createVNode("div", {
-        "class": "right"
-      }, [vue.createVNode("div", {
-        "class": "header"
-      }, [vue.createVNode("h2", {
-        "class": "title"
-      }, ["\u5DF2\u9009\u4EBA\u5458", vue.createVNode("span", {
-        "class": "select-text"
-      }, ["\uFF08\u5DF2\u9009\u62E9", vue.createVNode("em", null, [selectPeopleList.value.length]), "\u4EBA\uFF09"])]), vue.createVNode(vue.resolveComponent("a-button"), {
-        "type": "link",
-        "disabled": !selectPeopleList.value.length,
-        "onClick": handleClear
+    const onClose = () => {
+      selectPeopleList.value = [];
+      emit("close");
+    };
+    return () => {
+      let trigger = null;
+      if (props.renderBtn || slots.default) {
+        trigger = vue.createVNode("div", {
+          "style": "display: inline-block;",
+          "onClick": () => {
+            modalOpen.value = true;
+          }
+        }, [typeof slots.default === "function" ? slots.default() : vue.createVNode(vue.resolveComponent("a-button"), {
+          "type": "primary"
+        }, {
+          default: () => [props.buttonText]
+        })]);
+      }
+      return vue.createVNode("div", {
+        "class": "people-select-cpn"
+      }, [trigger, vue.createVNode(vue.resolveComponent("a-modal"), {
+        "wrapClassName": "people-select-cpn-modal",
+        "title": "\u6DFB\u52A0\u4EBA\u5458",
+        "centered": true,
+        "width": 900,
+        "onOk": handleCommit,
+        "onCancel": () => emit("update:open", false),
+        "afterClose": onClose,
+        "visible": modalOpen.value,
+        "onUpdate:visible": $event => modalOpen.value = $event
       }, {
-        default: () => ["\u6E05\u7A7A"]
-      })]), vue.createVNode("div", {
-        "class": "selected-container"
-      }, [selectPeopleList.value.length ? selectPeopleList.value.map(people => {
-        let _slot;
-        return vue.createVNode(vue.resolveComponent("a-tag"), {
-          "key": people.userId,
-          "closable": true,
-          "onClose": () => handleDelete(people)
-        }, _isSlot$6(_slot = props.renderNameTag(people)) ? _slot : {
-          default: () => [_slot]
-        });
-      }) : vue.createVNode(vue.resolveComponent("a-empty"), {
-        "style": {
-          width: "100%",
-          paddingTop: "10%"
-        },
-        "description": "\u6682\u65E0"
-      }, null)])])])]
-    })]);
+        default: () => [vue.createVNode("div", {
+          "class": "container"
+        }, [vue.createVNode("div", {
+          "class": "left"
+        }, [vue.createVNode(SearchPeopleInput, {
+          "list": formatList.value,
+          "renderName": props.renderNameSearch,
+          "onSelect": handleSelect
+        }, null), vue.createVNode(DepBreadcrumb, {
+          "list": formatList.value,
+          "zoomedDep": zoomedList.value?.[0],
+          "onCheck": handleSelectNode
+        }, null), vue.createVNode(vue.resolveComponent("a-tree"), {
+          "class": "tree",
+          "checkable": true,
+          "showLine": true,
+          "blockNode": true,
+          "autoExpandParent": true,
+          "fieldNames": {
+            children: "subList",
+            key: "id",
+            title: "name"
+          },
+          "treeData": zoomedList.value || formatList.value,
+          "checkedKeys": selectedKeys.value,
+          "onCheck": handleSelect,
+          "onSelect": (keys, {
+            node
+          }) => handleSelectNode(node),
+          "expandedKeys": expandKeys.value,
+          "onUpdate:expandedKeys": $event => expandKeys.value = $event
+        }, {
+          title: node => vue.createVNode("div", {
+            "class": "node-title"
+          }, [vue.createVNode("span", {
+            "class": "name"
+          }, [node.name]), node.isDep && vue.createVNode("span", {
+            "class": "count"
+          }, [node.peopleCount, "\u4EBA"])])
+        })]), vue.createVNode("div", {
+          "class": "right"
+        }, [vue.createVNode("div", {
+          "class": "header"
+        }, [vue.createVNode("h2", {
+          "class": "title"
+        }, ["\u5DF2\u9009\u4EBA\u5458", vue.createVNode("span", {
+          "class": "select-text"
+        }, ["\uFF08\u5DF2\u9009\u62E9", vue.createVNode("em", null, [selectPeopleList.value.length]), "\u4EBA\uFF09"])]), vue.createVNode(vue.resolveComponent("a-button"), {
+          "type": "link",
+          "disabled": !selectPeopleList.value.length,
+          "onClick": handleClear
+        }, {
+          default: () => ["\u6E05\u7A7A"]
+        })]), vue.createVNode("div", {
+          "class": "selected-container"
+        }, [selectPeopleList.value.length ? selectPeopleList.value.map(people => {
+          let _slot;
+          return vue.createVNode(vue.resolveComponent("a-tag"), {
+            "key": people.userId,
+            "closable": true,
+            "onClose": () => handleDelete(people)
+          }, _isSlot$6(_slot = props.renderNameTag(people)) ? _slot : {
+            default: () => [_slot]
+          });
+        }) : vue.createVNode(vue.resolveComponent("a-empty"), {
+          "style": {
+            width: "100%",
+            paddingTop: "10%"
+          },
+          "description": "\u6682\u65E0"
+        }, null)])])])]
+      })]);
+    };
   }
 });
 var index$3 = installComponent(PeopleSelect, "people-select");

package/dist/components/index.d.ts

@@ -848,6 +848,14 @@ declare const _default$3: vue.DefineComponent<{
         type: PropType<string[]>;
         default: () => never[];
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    renderBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     buttonText: {
         type: StringConstructor;
         default: string;
@@ -868,7 +876,7 @@ declare const _default$3: vue.DefineComponent<{
         type: PropType<RenderName>;
         default: (people: any, dep: any) => string;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:value"[], "update:value", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "close" | "update:value" | "update:open")[], "change" | "close" | "update:value" | "update:open", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     list: {
         type: PropType<any[]>;
         default: () => never[];
@@ -877,6 +885,14 @@ declare const _default$3: vue.DefineComponent<{
         type: PropType<string[]>;
         default: () => never[];
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    renderBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     buttonText: {
         type: StringConstructor;
         default: string;
@@ -898,10 +914,15 @@ declare const _default$3: vue.DefineComponent<{
         default: (people: any, dep: any) => string;
     };
 }>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }, {
     value: string[];
     list: any[];
+    open: boolean;
+    renderBtn: boolean;
     buttonText: string;
     propNames: PropNames;
     renderNameTree: RenderName;

package/dist/components/index.js

@@ -11268,7 +11268,7 @@ const defaultPropNames = {
   peopleUserName: "userName"
 };
 const PeopleSelect = defineComponent({
-  emits: ["update:value"],
+  emits: ["update:value", "update:open", "change", "close"],
   props: {
     list: {
       type: Array,
@@ -11278,6 +11278,14 @@ const PeopleSelect = defineComponent({
       type: Array,
       default: () => []
     },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    renderBtn: {
+      type: Boolean,
+      default: true
+    },
     buttonText: {
       type: String,
       default: "\u6DFB\u52A0\u4EBA\u5458"
@@ -11308,7 +11316,11 @@ const PeopleSelect = defineComponent({
   }) {
     const mixPropNames = Object.assign(defaultPropNames, props.propNames);
     provide("propNames", mixPropNames);
-    const isVisible = ref(false);
+    const modalOpen = ref(false);
+    watch(() => props.open, val => {
+      if (val === void 0) return;
+      modalOpen.value = val;
+    });
     const formatList = computed(() => {
       const copyList = _.cloneDeep(props.list);
       formatTree(copyList, props.renderNameTree, mixPropNames.peopleList, mixPropNames.peopleId);
@@ -11327,8 +11339,8 @@ const PeopleSelect = defineComponent({
     const initSelect = () => {
       selectPeopleList.value = getUserListById(formatList.value, props.value, mixPropNames.peopleId);
     };
-    watch([() => props.value, formatList, isVisible], () => {
-      if (isVisible.value) initSelect();
+    watch([() => props.value, formatList, modalOpen], () => {
+      if (modalOpen.value) initSelect();
     });
     const selectedKeys = computed(() => selectPeopleList.value.map(item => item.id));
     const handleSelect = (val, e) => {
@@ -11380,100 +11392,114 @@ const PeopleSelect = defineComponent({
     const handleCommit = () => {
       const idList = selectPeopleList.value.map(item => item[mixPropNames.peopleId]);
       emit("update:value", idList);
-      isVisible.value = false;
+      emit("change", idList);
+      modalOpen.value = false;
+      emit("update:open", modalOpen.value);
     };
-    const onClose = () => selectPeopleList.value = [];
-    return () => createVNode("div", {
-      "class": "people-select-cpn"
-    }, [typeof slots.default === "function" ? createVNode("div", {
-      "onClick": () => isVisible.value = true
-    }, [slots.default()]) : createVNode(resolveComponent("a-button"), {
-      "type": "primary",
-      "onClick": () => isVisible.value = true
-    }, {
-      default: () => [props.buttonText]
-    }), createVNode(resolveComponent("a-modal"), {
-      "wrapClassName": "people-select-cpn-modal",
-      "title": "\u6DFB\u52A0\u4EBA\u5458",
-      "centered": true,
-      "width": 900,
-      "onOk": handleCommit,
-      "afterClose": onClose,
-      "visible": isVisible.value,
-      "onUpdate:visible": $event => isVisible.value = $event
-    }, {
-      default: () => [createVNode("div", {
-        "class": "container"
-      }, [createVNode("div", {
-        "class": "left"
-      }, [createVNode(SearchPeopleInput, {
-        "list": formatList.value,
-        "renderName": props.renderNameSearch,
-        "onSelect": handleSelect
-      }, null), createVNode(DepBreadcrumb, {
-        "list": formatList.value,
-        "zoomedDep": zoomedList.value?.[0],
-        "onCheck": handleSelectNode
-      }, null), createVNode(resolveComponent("a-tree"), {
-        "class": "tree",
-        "checkable": true,
-        "showLine": true,
-        "blockNode": true,
-        "autoExpandParent": true,
-        "fieldNames": {
-          children: "subList",
-          key: "id",
-          title: "name"
-        },
-        "treeData": zoomedList.value || formatList.value,
-        "checkedKeys": selectedKeys.value,
-        "onCheck": handleSelect,
-        "onSelect": (keys, {
-          node
-        }) => handleSelectNode(node),
-        "expandedKeys": expandKeys.value,
-        "onUpdate:expandedKeys": $event => expandKeys.value = $event
-      }, {
-        title: node => createVNode("div", {
-          "class": "node-title"
-        }, [createVNode("span", {
-          "class": "name"
-        }, [node.name]), node.isDep && createVNode("span", {
-          "class": "count"
-        }, [node.peopleCount, "\u4EBA"])])
-      })]), createVNode("div", {
-        "class": "right"
-      }, [createVNode("div", {
-        "class": "header"
-      }, [createVNode("h2", {
-        "class": "title"
-      }, ["\u5DF2\u9009\u4EBA\u5458", createVNode("span", {
-        "class": "select-text"
-      }, ["\uFF08\u5DF2\u9009\u62E9", createVNode("em", null, [selectPeopleList.value.length]), "\u4EBA\uFF09"])]), createVNode(resolveComponent("a-button"), {
-        "type": "link",
-        "disabled": !selectPeopleList.value.length,
-        "onClick": handleClear
+    const onClose = () => {
+      selectPeopleList.value = [];
+      emit("close");
+    };
+    return () => {
+      let trigger = null;
+      if (props.renderBtn || slots.default) {
+        trigger = createVNode("div", {
+          "style": "display: inline-block;",
+          "onClick": () => {
+            modalOpen.value = true;
+          }
+        }, [typeof slots.default === "function" ? slots.default() : createVNode(resolveComponent("a-button"), {
+          "type": "primary"
+        }, {
+          default: () => [props.buttonText]
+        })]);
+      }
+      return createVNode("div", {
+        "class": "people-select-cpn"
+      }, [trigger, createVNode(resolveComponent("a-modal"), {
+        "wrapClassName": "people-select-cpn-modal",
+        "title": "\u6DFB\u52A0\u4EBA\u5458",
+        "centered": true,
+        "width": 900,
+        "onOk": handleCommit,
+        "onCancel": () => emit("update:open", false),
+        "afterClose": onClose,
+        "visible": modalOpen.value,
+        "onUpdate:visible": $event => modalOpen.value = $event
       }, {
-        default: () => ["\u6E05\u7A7A"]
-      })]), createVNode("div", {
-        "class": "selected-container"
-      }, [selectPeopleList.value.length ? selectPeopleList.value.map(people => {
-        let _slot;
-        return createVNode(resolveComponent("a-tag"), {
-          "key": people.userId,
-          "closable": true,
-          "onClose": () => handleDelete(people)
-        }, _isSlot$6(_slot = props.renderNameTag(people)) ? _slot : {
-          default: () => [_slot]
-        });
-      }) : createVNode(resolveComponent("a-empty"), {
-        "style": {
-          width: "100%",
-          paddingTop: "10%"
-        },
-        "description": "\u6682\u65E0"
-      }, null)])])])]
-    })]);
+        default: () => [createVNode("div", {
+          "class": "container"
+        }, [createVNode("div", {
+          "class": "left"
+        }, [createVNode(SearchPeopleInput, {
+          "list": formatList.value,
+          "renderName": props.renderNameSearch,
+          "onSelect": handleSelect
+        }, null), createVNode(DepBreadcrumb, {
+          "list": formatList.value,
+          "zoomedDep": zoomedList.value?.[0],
+          "onCheck": handleSelectNode
+        }, null), createVNode(resolveComponent("a-tree"), {
+          "class": "tree",
+          "checkable": true,
+          "showLine": true,
+          "blockNode": true,
+          "autoExpandParent": true,
+          "fieldNames": {
+            children: "subList",
+            key: "id",
+            title: "name"
+          },
+          "treeData": zoomedList.value || formatList.value,
+          "checkedKeys": selectedKeys.value,
+          "onCheck": handleSelect,
+          "onSelect": (keys, {
+            node
+          }) => handleSelectNode(node),
+          "expandedKeys": expandKeys.value,
+          "onUpdate:expandedKeys": $event => expandKeys.value = $event
+        }, {
+          title: node => createVNode("div", {
+            "class": "node-title"
+          }, [createVNode("span", {
+            "class": "name"
+          }, [node.name]), node.isDep && createVNode("span", {
+            "class": "count"
+          }, [node.peopleCount, "\u4EBA"])])
+        })]), createVNode("div", {
+          "class": "right"
+        }, [createVNode("div", {
+          "class": "header"
+        }, [createVNode("h2", {
+          "class": "title"
+        }, ["\u5DF2\u9009\u4EBA\u5458", createVNode("span", {
+          "class": "select-text"
+        }, ["\uFF08\u5DF2\u9009\u62E9", createVNode("em", null, [selectPeopleList.value.length]), "\u4EBA\uFF09"])]), createVNode(resolveComponent("a-button"), {
+          "type": "link",
+          "disabled": !selectPeopleList.value.length,
+          "onClick": handleClear
+        }, {
+          default: () => ["\u6E05\u7A7A"]
+        })]), createVNode("div", {
+          "class": "selected-container"
+        }, [selectPeopleList.value.length ? selectPeopleList.value.map(people => {
+          let _slot;
+          return createVNode(resolveComponent("a-tag"), {
+            "key": people.userId,
+            "closable": true,
+            "onClose": () => handleDelete(people)
+          }, _isSlot$6(_slot = props.renderNameTag(people)) ? _slot : {
+            default: () => [_slot]
+          });
+        }) : createVNode(resolveComponent("a-empty"), {
+          "style": {
+            width: "100%",
+            paddingTop: "10%"
+          },
+          "description": "\u6682\u65E0"
+        }, null)])])])]
+      })]);
+    };
   }
 });
 var index$3 = installComponent(PeopleSelect, "people-select");