@ibiz-template/vue3-components 0.7.38-alpha.56 → 0.7.39

package/lib/control/data-view/data-view.cjs

@@ -4,8 +4,8 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 var qxUtil = require('qx-util');
-require('./data-view.css');
 require('../../util/index.cjs');
+require('./data-view.css');
 var usePagination = require('../../util/pagination/use-pagination.cjs');
 
 "use strict";
@@ -75,6 +75,10 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }
       return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
     });
+    const cardStyle = vue.computed(() => {
+      var _a, _b;
+      return ((_b = (_a = c.model.controlParam) == null ? void 0 : _a.ctrlParams) == null ? void 0 : _b.CARDSTYLE) || "default";
+    });
     const showCollapseOrExpandIcon = vue.computed(() => {
       return !c.model.enableGroup && (c.model.pagingMode === 2 || c.model.pagingMode === 3);
     });
@@ -105,6 +109,22 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         c.state.isLoaded = true;
       }
     });
+    const isSelected = (item) => {
+      let selected = !!c.state.selectedData.find((data) => data.srfkey === item.srfkey);
+      if (c.view.model.viewType === "DEDATAVIEW" && c.state.mdctrlActiveMode === 1 && c.state.singleSelect === true)
+        selected = false;
+      return selected;
+    };
+    const toggleSelection = (item) => {
+      const selected = c.state.selectedData;
+      const index = selected.findIndex((data) => data.srfkey === item.srfkey);
+      if (index === -1) {
+        selected.push(item);
+      } else {
+        selected.splice(index, 1);
+      }
+      c.setSelection(selected);
+    };
     vue.watch(() => props.data, () => {
       if (props.isSimple) {
         initSimpleData();
@@ -162,25 +182,6 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, [renderItemAction(item)]) : null]);
     };
     const renderCard = (item) => {
-      const findIndex = c.state.selectedData.findIndex((data) => {
-        return data.srfkey === item.srfkey;
-      });
-      let showActive = findIndex !== -1;
-      if (c.view.model.viewType === "DEDATAVIEW" && c.state.mdctrlActiveMode === 1 && c.state.singleSelect === true) {
-        showActive = false;
-      }
-      const cardClass = [ns.b("item"), ns.is("active", showActive)];
-      const cardStyle = {};
-      if (c.model.cardWidth) {
-        Object.assign(cardStyle, {
-          width: "".concat(c.model.cardWidth, "px")
-        });
-      }
-      if (c.model.cardHeight) {
-        Object.assign(cardStyle, {
-          height: "".concat(c.model.cardHeight, "px")
-        });
-      }
       const itemStyle = ns.cssVarBlock({
         "item-bg-color": "".concat(item.bgcolor || ""),
         "text-color": "".concat(item.fontcolor || ""),
@@ -190,21 +191,62 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       const panel = props.modelData.itemLayoutPanel;
       return vue.createVNode(vue.resolveComponent("el-card"), {
         "shadow": "hover",
-        "class": cardClass,
+        "class": [ns.b("item"), ns.is("active", isSelected(item))],
         "style": itemStyle,
-        "body-style": cardStyle,
+        "body-style": {
+          width: c.model.cardWidth ? "".concat(c.model.cardWidth, "px") : "auto",
+          height: c.model.cardHeight ? "".concat(c.model.cardHeight, "px") : "auto"
+        },
         "onClick": (event) => onRowClick(item, event),
         "onDblclick": (event) => onDbRowClick(item, event)
       }, {
-        default: () => [panel ? renderPanelItem(item, panel) : renderDefaultItem(item)]
+        default: () => [vue.createVNode("div", {
+          "class": ns.be("item", "content")
+        }, [cardStyle.value === "style2" && !c.state.singleSelect && vue.createVNode(vue.resolveComponent("el-checkbox"), {
+          "size": "large",
+          "class": ns.bem("item", "content", "checkbox"),
+          "modelValue": isSelected(item),
+          "onClick": (e) => e.stopPropagation(),
+          "onChange": () => toggleSelection(item)
+        }, null), panel ? renderPanelItem(item, panel) : renderDefaultItem(item)])]
       });
     };
-    const renderGroup = (group) => {
+    const renderCardLayout = (items) => {
+      let _slot;
       const {
         cardColXS,
         cardColSM,
         cardColMD,
-        cardColLG,
+        cardColLG
+      } = c.model;
+      if (cardColXS || cardColSM || cardColMD || cardColLG)
+        return vue.createVNode(vue.resolveComponent("el-row"), {
+          "class": ns.e("layout-row")
+        }, _isSlot(_slot = items.map((item) => {
+          return vue.createVNode(vue.resolveComponent("el-col"), {
+            "xs": cardColXS,
+            "sm": cardColSM,
+            "md": cardColMD,
+            "lg": cardColLG,
+            "class": ns.e("layout-col")
+          }, {
+            default: () => [vue.createVNode("div", {
+              "class": ns.b("scroll-item")
+            }, [renderCard(item)])]
+          });
+        })) ? _slot : {
+          default: () => [_slot]
+        });
+      return vue.createVNode("div", {
+        "class": ns.e("layout-flex")
+      }, [items.map((item) => {
+        return vue.createVNode("div", {
+          "class": ns.b("scroll-item")
+        }, [renderCard(item)]);
+      })]);
+    };
+    const renderGroup = (group) => {
+      const {
         groupSysCss
       } = c.model;
       return vue.createVNode("div", {
@@ -222,75 +264,19 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "onActionClick": (detail, event) => {
           c.onGroupToolbarClick(detail, event, group);
         }
-      }, null)])]), cardColXS || cardColSM || cardColMD || cardColLG ? vue.createVNode(vue.resolveComponent("el-row"), {
-        "class": ns.be("group-content", "item-row")
-      }, {
-        default: () => [group.children.length > 0 ? group.children.map((child) => {
-          let _slot;
-          return vue.createVNode(vue.resolveComponent("el-col"), {
-            "xs": cardColXS,
-            "sm": cardColSM,
-            "md": cardColMD,
-            "lg": cardColLG,
-            "class": ns.be("group-content", "item-col")
-          }, _isSlot(_slot = renderCard(child)) ? _slot : {
-            default: () => [_slot]
-          });
-        }) : vue.createVNode("div", {
-          "class": ns.bem("group-content", "item", "empty")
-        }, [ibiz.i18n.t("app.noData")])]
-      }) : vue.createVNode("div", {
-        "class": ns.be("group-content", "item-content")
-      }, [group.children.length > 0 ? group.children.map((child) => {
-        return renderCard(child);
-      }) : vue.createVNode("div", {
+      }, null)])]), group.children.length > 0 ? renderCardLayout(group.children) : vue.createVNode("div", {
         "class": ns.bem("group-content", "item", "empty")
-      }, [ibiz.i18n.t("app.noData")])])]);
+      }, [ibiz.i18n.t("app.noData")])]);
     };
     const renderDataViewContent = () => {
-      const {
-        cardColXS,
-        cardColSM,
-        cardColMD,
-        cardColLG
-      } = c.model;
       if (c.model.enableGroup) {
         return vue.createVNode("div", {
           "class": ns.b("group-content")
         }, [c.state.groups.map((group) => {
-          return vue.createVNode("div", {
-            "class": [ns.b("scroll-item")]
-          }, [renderGroup(group)]);
+          return renderGroup(group);
         })]);
       }
-      let tempItems = c.state.items;
-      if (isCollapse.value) {
-        tempItems = c.state.items.slice(0, c.state.size);
-      }
-      if (cardColXS || cardColSM || cardColMD || cardColLG) {
-        let _slot3;
-        return vue.createVNode(vue.resolveComponent("el-row"), {
-          "class": [ns.b("item-row")]
-        }, _isSlot(_slot3 = tempItems.map((item) => {
-          let _slot2;
-          return vue.createVNode(vue.resolveComponent("el-col"), {
-            "xs": cardColXS,
-            "sm": cardColSM,
-            "md": cardColMD,
-            "lg": cardColLG,
-            "class": [ns.b("item-col")]
-          }, _isSlot(_slot2 = renderCard(item)) ? _slot2 : {
-            default: () => [_slot2]
-          });
-        })) ? _slot3 : {
-          default: () => [_slot3]
-        });
-      }
-      return tempItems.map((item) => {
-        return vue.createVNode("div", {
-          "class": [ns.b("scroll-item")]
-        }, [renderCard(item)]);
-      });
+      return renderCardLayout(isCollapse.value ? c.state.items.slice(0, c.state.size) : c.state.items);
     };
     const scrollToTop = () => {
       var _a;
@@ -341,10 +327,10 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
     const renderHasData = () => {
       return vue.withDirectives(vue.createVNode("div", {
-        "class": [ns.b("scroll"), ns.e("content")],
+        "class": ns.e("content"),
+        "ref": "infiniteScroll",
         "infinite-scroll-distance": 10,
         "infinite-scroll-disabled": isLodeMoreDisabled.value,
-        "ref": "infiniteScroll",
         "key": infiniteScrollKey.value
       }, [renderDataViewContent()]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
     };

package/lib/control/data-view/data-view.css

@@ -1 +1 @@
-.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-dataview__nav-icon{position:absolute;top:20px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-dataview__content{flex-grow:1;height:100%}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__load-more{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-scroll>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent;color:var(--ibiz-control-dataview-text-color);cursor:pointer;background-color:var(--ibiz-control-dataview-item-bg-color)}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}.ibiz-control-dataview-group-content__item-content{display:flex;flex-wrap:wrap;padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color);will-change:height}.ibiz-control-dataview-group-content__item-content>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-group-content__item-row{padding:var(--ibiz-control-dataview-group-item-content-padding)}.ibiz-control-dataview-group-content__item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}
+.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-dataview__nav-icon{position:absolute;top:20px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-dataview__content{flex-grow:1;height:100%;overflow:auto;padding:var(--ibiz-control-dataview-padding)}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__load-more{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__layout-row{padding:var(--ibiz-spacing-tight)}.ibiz-control-dataview__layout-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview__layout-flex{display:flex;flex-wrap:wrap;overflow:auto;align-content:flex-start}.ibiz-control-dataview__layout-flex>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent;cursor:pointer;color:var(--ibiz-control-dataview-text-color);background-color:var(--ibiz-control-dataview-item-bg-color)}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item__content{width:100%;height:100%;display:flex;align-items:center}.ibiz-control-dataview-item__content--checkbox{flex-shrink:0;margin-right:var(--ibiz-spacing-tight)!important}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;--ibiz-control-dataview-item-bg-color:transparent}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}

package/lib/control/drtab/drtab-control.util.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var vue = require('vue');
-var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.38-alpha.57_axios@1.7.7_lodash-es@4.17.21_qs@6.13.0_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.cjs');
+var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.39_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.cjs');
 
 "use strict";
 function useAppDRTab(c, controlRef, counterData) {

package/lib/control/form/edit-form/edit-form.cjs

@@ -3,6 +3,8 @@
 var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
+var lodashEs = require('lodash-es');
+require('./edit-form.css');
 
 "use strict";
 function _isSlot(s) {
@@ -43,6 +45,8 @@ const EditFormControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.EditFormController(...args), {
       excludePropsKeys: ["data"]
     });
+    const ns = vue3Util.useNamespace("control-edit-form");
+    const filter = vue.ref("");
     const anchorList = vue.ref([]);
     const anchorTargetRef = vue.ref();
     if (props.isSimple) {
@@ -61,7 +65,6 @@ const EditFormControl = /* @__PURE__ */ vue.defineComponent({
         deep: true
       });
     }
-    const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     c.evt.on("onCreated", () => {
       const keys = Object.keys(c.details);
       keys.forEach((key) => {
@@ -86,23 +89,42 @@ const EditFormControl = /* @__PURE__ */ vue.defineComponent({
         navbarHeight
       };
     };
+    const handleInput = lodashEs.debounce((val) => {
+      c.filterDetail(val);
+    }, 300, {
+      leading: true
+    });
     return {
       c,
       ns,
+      filter,
       anchorList,
       anchorTargetRef,
+      handleInput,
       calcNavBarConfig
     };
   },
   render() {
-    const content = vue.createVNode(vue.resolveComponent("iBizFormControl"), {
+    const {
+      showFormNavBar,
+      enableItemFilter
+    } = this.c.model;
+    const content = vue.createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("item-filter", enableItemFilter)]
+    }, [enableItemFilter && vue.createVNode(vue.resolveComponent("el-input"), {
+      "clearable": true,
+      "modelValue": this.filter,
+      "onUpdate:modelValue": ($event) => this.filter = $event,
+      "onInput": this.handleInput,
+      "class": this.ns.e("quick-search"),
+      "placeholder": ibiz.i18n.t("app.search")
+    }, null), vue.createVNode(vue.resolveComponent("iBizFormControl"), {
       "ref": "anchorTargetRef",
-      "class": this.ns.b(),
       "controller": this.c
     }, {
       ...this.$slots
-    });
-    if (this.c.model.showFormNavBar) {
+    })]);
+    if (showFormNavBar) {
       return vue.createVNode(vue.resolveComponent("iBizAnchorContainer"), {
         "anchorList": this.anchorList.filter((item) => item.pageId === this.c.state.activeTab),
         "anchorTargetEle": this.anchorTargetRef,

package/lib/control/form/edit-form/edit-form.css

@@ -0,0 +1 @@
+.ibiz-control-edit-form{width:100%;height:100%;padding-bottom:var(--ibiz-spacing-tight)}.ibiz-control-edit-form.is-item-filter .ibiz-control-form{overflow-y:auto;height:calc(100% - 32px)}

package/lib/control/form/form/form.cjs

@@ -131,7 +131,7 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "class": [this.ns.b()],
+      "class": this.ns.b(),
       "controller": this.c
     }, _isSlot(slots) ? slots : {
       default: () => [slots]

package/lib/control/form/form/form.css

@@ -1 +1 @@
-.ibiz-control-form{width:100%;height:100%;padding-bottom:var(--ibiz-spacing-tight)}
+.ibiz-control-form{width:100%;height:100%}

package/lib/control/form/form-detail/form-button/form-button.cjs

@@ -5,8 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
 var vue3Util = require('@ibiz-template/vue3-util');
-require('./form-button.css');
 var core = require('@ibiz-template/core');
+require('../../../../util/index.cjs');
+require('./form-button.css');
+var buttonUtil = require('../../../../util/button-util/button-util.cjs');
 
 "use strict";
 const FormButton = /* @__PURE__ */ vue.defineComponent({
@@ -47,6 +49,7 @@ const FormButton = /* @__PURE__ */ vue.defineComponent({
     }, [vue.createVNode(vue.resolveComponent("el-button"), {
       "sime": "small",
       "onClick": this.controller.onClick.bind(this.controller),
+      "type": buttonUtil.convertBtnType(this.modelData.buttonStyle),
       "loading": this.controller.state.loading,
       "disabled": this.controller.state.disabled,
       "title": core.showTitle(this.modelData.tooltip)

package/lib/control/form/form-detail/form-button-list/form-button-list.cjs

@@ -21,11 +21,15 @@ const FormButtonList = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup(props) {
+    var _a;
     const ns = vue3Util.useNamespace("form-button-list");
     const c = props.controller;
-    const handleClick = async (e, actionId) => {
-      e.stopPropagation();
-      c.doUIAction(actionId, e);
+    const isDesignPreview = ((_a = c.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
+    const handleClick = async (id, e) => {
+      e == null ? void 0 : e.stopPropagation();
+      if (isDesignPreview)
+        return;
+      c.handleClick(id, e);
     };
     return {
       ns,

package/lib/control/form/form-detail/form-druipart/form-druipart.cjs

@@ -21,13 +21,16 @@ const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup(props) {
+    var _a;
     const ns = vue3Util.useNamespace("form-druipart");
     vue3Util.useController(props.controller);
+    const isDesignPreview = ((_a = props.controller.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
     const onCreated = (event) => {
       props.controller.setEmbedView(event.view);
     };
     return {
       ns,
+      isDesignPreview,
       onCreated
     };
   },
@@ -35,6 +38,13 @@ const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
     if (!this.controller.state.visible && !this.controller.state.keepAlive || !this.controller.state.viewComponentKey) {
       return null;
     }
+    if (this.isDesignPreview) {
+      return vue.createVNode("div", {
+        "class": this.ns.b()
+      }, [vue.createVNode("div", {
+        "class": this.ns.b("preview-content")
+      }, [ibiz.i18n.t("control.form.formDruipart.defaultText")])]);
+    }
     const viewShell = vue.resolveComponent("IBizViewShell");
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],

package/lib/control/form/form-detail/form-druipart/form-druipart.css

@@ -1 +1 @@
-.ibiz-form-druipart{position:relative;width:100%;height:100%}.ibiz-form-druipart__mask{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;color:var(--ibiz-color-primary-text);background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.ibiz-form-druipart>.el-loading-parent--relative{min-height:100px}
+.ibiz-form-druipart{position:relative;width:100%;height:100%}.ibiz-form-druipart__mask{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;color:var(--ibiz-color-primary-text);background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}.ibiz-form-druipart>.el-loading-parent--relative{min-height:100px}.ibiz-form-druipart-preview-content{display:flex;align-items:center;justify-content:center;min-height:100px;margin:var(--ibiz-spacing-tight);box-shadow:0 0 0 1px var(--ibiz-color-border) inset}

package/lib/control/form/form-detail/form-item/composite-form-item/composite-form-item.cjs

@@ -76,19 +76,18 @@ const CompositeFormItem = /* @__PURE__ */ vue.defineComponent({
       onClick: (event, params) => this.controller.onClick(event, params),
       ...this.attrs
     };
-    if (this.c.form.state.isLoaded) {
-      if (this.$slots.default) {
-        editor = this.$slots.default(editorProps);
-      } else if (this.controller.editorProvider) {
-        const component = vue.resolveComponent(this.controller.editorProvider.formEditor);
-        editor = vue.h(component, {
-          ...editorProps
-        });
-      } else {
-        editor = vue.createVNode(vue.resolveComponent("not-supported-editor"), {
-          "modelData": this.modelData.editor
-        }, null);
-      }
+    if (this.$slots.default) {
+      editor = this.$slots.default(editorProps);
+    } else if (this.controller.editorProvider) {
+      const component = vue.resolveComponent(this.controller.editorProvider.formEditor);
+      editor = vue.h(component, {
+        ...editorProps
+      });
+    } else {
+      editor = vue.createVNode(vue.resolveComponent("not-supported-editor"), {
+        "modelData": this.modelData.editor,
+        "context": this.controller.context
+      }, null);
     }
     return editor;
   }

package/lib/control/form/form-detail/form-item/form-item-container/form-item-container.cjs

@@ -2,125 +2,98 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
-require('./form-item-container.css');
 var core = require('@ibiz-template/core');
+require('./form-item-container.css');
 
 "use strict";
 const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
   name: "IBizFormItemContainer",
   props: {
-    required: {
-      type: Boolean,
-      required: true
-    },
-    error: {
-      type: String
-    },
-    label: {
-      type: String
-    },
-    labelClass: {
-      type: Array
-    },
-    labelPos: {
-      type: String,
+    controller: {
+      type: Object,
       required: true
-    },
-    labelWidth: {
-      type: Number,
-      default: 130
-    },
-    enableInputTip: {
-      type: Boolean
-    },
-    inputTip: {
-      type: String
-    },
-    inputTipUrl: {
-      type: String
-    },
-    inputTipClosable: {
-      type: Boolean
-    },
-    labelSysImg: {
-      type: Object
     }
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-item-container");
-    const tooltip = vue.ref();
-    const cssVars = vue.computed(() => {
-      if (props.labelWidth !== 130) {
-        return ns.cssVarBlock({
-          "label-width": "".concat(props.labelWidth, "px")
-        });
-      }
-      return {};
+    const c = props.controller;
+    const visible = vue.ref(false);
+    const {
+      sysImage,
+      enableInputTip,
+      labelPos
+    } = c.model;
+    vue.watch(() => visible.value, () => {
+      if (visible.value)
+        c.loadInputTip();
     });
-    const hiddenTooltip = () => {
-      if (tooltip.value) {
-        tooltip.value.hide();
-      }
+    const renderInputTip = () => {
+      return vue.createVNode(vue.resolveComponent("el-tooltip"), {
+        "effect": "light",
+        "visible": visible.value,
+        "onUpdate:visible": ($event) => visible.value = $event,
+        "popper-class": ns.e("popper"),
+        "disabled": !enableInputTip,
+        "placement": labelPos === "RIGHT" ? "right" : "left"
+      }, {
+        default: () => {
+          return vue.createVNode("div", {
+            "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
+          }, [enableInputTip && vue.createVNode("ion-icon", {
+            "name": "bulb-outline",
+            "class": ns.em("label", "icon")
+          }, null), sysImage && vue.createVNode(vue3Util.IBizIcon, {
+            "class": ns.em("label", "icon"),
+            "icon": sysImage
+          }, null), vue.createVNode("div", {
+            "class": ns.em("label", "text")
+          }, [c.labelCaption])]);
+        },
+        content: () => {
+          return vue.createVNode("div", {
+            "class": ns.em("popper", "content")
+          }, [vue.createVNode("div", {
+            "class": ns.em("popper", "tooltip"),
+            "innerHTML": c.state.inputTip
+          }, null), c.state.inputTipUrl && vue.createVNode("a", {
+            "target": "_blank",
+            "href": c.state.inputTipUrl,
+            "title": ibiz.i18n.t("component.formItemContainer.more")
+          }, [ibiz.i18n.t("component.formItemContainer.more")])]);
+        }
+      });
     };
     const renderLabel = () => {
-      const classList = [ns.e("label"), ...props.labelClass || []];
-      if (props.enableInputTip) {
-        return vue.createVNode(vue.resolveComponent("el-tooltip"), {
-          "effect": "light",
-          "offset": 4,
-          "popper-class": ns.e("popper"),
-          "ref": "tooltip"
-        }, {
-          default: () => {
-            return vue.createVNode("div", {
-              "class": classList
-            }, [props.labelSysImg && vue.createVNode(vue3Util.IBizIcon, {
-              "class": ns.em("label", "icon"),
-              "icon": props.labelSysImg
-            }, null), props.label]);
-          },
-          content: () => {
-            return vue.createVNode("div", {
-              "class": ns.em("label", "tooltip")
-            }, [props.inputTip || props.label, props.inputTipUrl && vue.createVNode("a", {
-              "href": props.inputTipUrl,
-              "target": "_blank"
-            }, [ibiz.i18n.t("component.formItemContainer.more")]), props.inputTipClosable && vue.createVNode("ion-icon", {
-              "name": "close-circle",
-              "onClick": hiddenTooltip
-            }, null)]);
-          }
-        });
-      }
       return vue.createVNode("div", {
-        "class": classList,
-        "title": core.showTitle(props.label)
-      }, [props.labelSysImg && vue.createVNode(vue3Util.IBizIcon, {
-        "class": ns.em("label", "icon"),
-        "icon": props.labelSysImg
-      }, null), props.label]);
+        "title": enableInputTip ? void 0 : core.showTitle(c.labelCaption),
+        "class": [ns.e("label"), ...c.labelClass || []]
+      }, [renderInputTip()]);
     };
     return {
       ns,
-      cssVars,
-      tooltip,
       renderLabel
     };
   },
   render() {
     var _a, _b;
+    const {
+      labelPos,
+      labelWidth
+    } = this.controller.model;
     const content = vue.createVNode("div", {
-      "class": [this.ns.e("content"), this.ns.em("content", "label-".concat(this.labelPos.toLowerCase()))]
+      "class": [this.ns.e("content"), this.ns.em("content", "label-".concat(labelPos == null ? void 0 : labelPos.toLowerCase()))]
     }, [vue.createVNode("div", {
       "class": [this.ns.e("editor")]
-    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.error ? vue.createVNode("div", {
-      "title": core.showTitle(this.error),
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.controller.state.error ? vue.createVNode("div", {
+      "title": core.showTitle(this.controller.state.error),
       "class": [this.ns.e("error")]
-    }, [this.error]) : null]);
+    }, [this.controller.state.error]) : null]);
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.labelPos.toLowerCase()), this.ns.is("required", this.required), this.ns.is("error", !!this.error)],
-      "style": this.cssVars
-    }, [this.labelPos === "LEFT" || this.labelPos === "TOP" ? this.renderLabel() : null, content, this.labelPos === "RIGHT" || this.labelPos === "BOTTOM" ? this.renderLabel() : null]);
+      "class": [this.ns.b(), this.ns.m(labelPos == null ? void 0 : labelPos.toLowerCase()), this.ns.is("required", this.controller.state.required), this.ns.is("error", !!this.controller.state.error)],
+      "style": this.ns.cssVarBlock({
+        "label-width": "".concat(labelWidth || 130, "px")
+      })
+    }, [labelPos && ["LEFT", "TOP"].includes(labelPos) && this.renderLabel(), content, labelPos && ["RIGHT", "BOTTOM"].includes(labelPos) && this.renderLabel()]);
   }
 });