@ibiz-template/vue3-components 0.7.41-alpha.97 → 0.7.41-alpha.99

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

@@ -30,9 +30,8 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       form: c
     };
     const renderAttrs = (model) => {
-      var _a;
       const attrs = {};
-      (_a = model.controlAttributes) == null ? void 0 : _a.forEach((item) => {
+      runtime.filterPresetAttrs(model.controlAttributes).forEach((item) => {
         if (item.attrName && item.attrValue) {
           attrs[item.attrName] = runtime.ScriptFactory.execSingleLine(item.attrValue, {
             ...props.controller.getEventArgs(),
@@ -42,6 +41,10 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       });
       return attrs;
     };
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c);
     const renderByDetailType = (detail, isRoot = false) => {
       const {
         hidden,
@@ -100,7 +103,9 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       c,
       FormDetail,
       slotProps,
-      renderByDetailType
+      renderByDetailType,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -139,7 +144,8 @@ const FormControl = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "class": this.ns.b(),
+      "class": [this.ns.b(), this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "controller": this.c
     }, _isSlot(slots) ? slots : {
       default: () => [slots]

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

@@ -25,6 +25,11 @@ const FormButton = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-button");
+    const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const captionText = vue.computed(() => {
       const {
         caption,
@@ -37,7 +42,9 @@ const FormButton = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      captionText
+      captionText,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -45,7 +52,8 @@ const FormButton = /* @__PURE__ */ vue.defineComponent({
       return null;
     }
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.ns.is("loading", this.controller.state.loading), this.ns.is("readonly", this.controller.state.readonly), this.modelData.detailStyle && this.ns.m(this.modelData.detailStyle.toLowerCase()), ...this.controller.containerClass]
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.ns.is("loading", this.controller.state.loading), this.ns.is("readonly", this.controller.state.readonly), this.semanticClass("button", this.controller), this.modelData.detailStyle && this.ns.m(this.modelData.detailStyle.toLowerCase()), ...this.controller.containerClass],
+      "style": this.semanticStyle("button", this.controller)
     }, [vue.createVNode(vue.resolveComponent("el-button"), {
       "sime": "small",
       "onClick": this.controller.onClick.bind(this.controller),

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

@@ -1 +1 @@
-.ibiz-form-button{--ibiz-form-button-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-form-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-form-button-icon-max-height:var(--ibiz-width-icon-medium);width:100%;height:100%;padding:var(--ibiz-spacing-tight);overflow:hidden}.ibiz-form-button .el-button{width:100%;height:100%}.ibiz-form-button .el-button .ibiz-form-button-content{display:flex;align-items:center;justify-content:flex-start}.ibiz-form-button .el-button .ibiz-form-button-content i,.ibiz-form-button .el-button .ibiz-form-button-content img{display:inline-block;max-width:var(--ibiz-form-button-icon-max-width);max-height:var(--ibiz-form-button-icon-max-height)}.ibiz-form-button .el-button .ibiz-form-button-content .ibiz-icon+.ibiz-form-button-content--caption{margin-left:var(--ibiz-form-button-icon-margin)}.ibiz-form-button.is-loading .el-button .ibiz-icon{display:none}.ibiz-form-button.is-readonly{display:none}
+.ibiz-form-button{--ibiz-form-button-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-form-button-icon-max-width:var(--ibiz-width-icon-medium);--ibiz-form-button-icon-max-height:var(--ibiz-width-icon-medium);--ibiz-form-button-padding:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-form-button-padding);overflow:hidden}.ibiz-form-button .el-button{width:100%;height:100%}.ibiz-form-button .el-button .ibiz-form-button-content{display:flex;align-items:center;justify-content:flex-start}.ibiz-form-button .el-button .ibiz-form-button-content i,.ibiz-form-button .el-button .ibiz-form-button-content img{display:inline-block;max-width:var(--ibiz-form-button-icon-max-width);max-height:var(--ibiz-form-button-icon-max-height)}.ibiz-form-button .el-button .ibiz-form-button-content .ibiz-icon+.ibiz-form-button-content--caption{margin-left:var(--ibiz-form-button-icon-margin)}.ibiz-form-button.is-loading .el-button .ibiz-icon{display:none}.ibiz-form-button.is-readonly{display:none}

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

@@ -24,6 +24,10 @@ const FormButtonList = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const ns = vue3Util.useNamespace("form-button-list");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const isDesignPreview = ((_a = c.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
     const handleClick = async (id, e) => {
       e == null ? void 0 : e.stopPropagation();
@@ -33,7 +37,9 @@ const FormButtonList = /* @__PURE__ */ vue.defineComponent({
     };
     return {
       ns,
-      handleClick
+      handleClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -42,7 +48,8 @@ const FormButtonList = /* @__PURE__ */ vue.defineComponent({
     } = this.controller;
     if (state.visible) {
       return vue.createVNode(vue.resolveComponent("iBizButtonList"), {
-        "class": [this.ns.b(), ...this.controller.containerClass],
+        "class": [this.ns.b(), this.semanticClass("button.list", this.controller), ...this.controller.containerClass],
+        "style": this.semanticStyle("button.list", this.controller),
         "model": this.modelData,
         "disabled": state.disabled,
         "buttonsState": state.buttonsState,

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

@@ -24,6 +24,11 @@ const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const ns = vue3Util.useNamespace("form-druipart");
     vue3Util.useController(props.controller);
+    const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const isDesignPreview = ((_a = props.controller.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
     const onCreated = (event) => {
       props.controller.setEmbedView(event.view);
@@ -31,7 +36,9 @@ const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       isDesignPreview,
-      onCreated
+      onCreated,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -47,7 +54,8 @@ const FormDRUIPart = /* @__PURE__ */ vue.defineComponent({
     }
     const viewShell = vue.resolveComponent("IBizViewShell");
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.semanticClass("druipart", this.controller), ...this.controller.containerClass],
+      "style": this.semanticStyle("druipart", this.controller),
       "onClick": (event) => this.controller.onClick(event)
     }, [vue.h(viewShell, {
       context: this.controller.navContext,

package/lib/control/form/form-detail/form-group-panel/form-group-panel.cjs

@@ -26,6 +26,10 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = vue3Util.useNamespace("form-group");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const zIndex = props.controller.form.state.zIndex;
     const changeCollapse = () => {
       if (!c.disableClose) {
@@ -53,7 +57,9 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
       zIndex,
       captionText,
       changeCollapse,
-      onActionClick
+      onActionClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -80,7 +86,7 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     })) ? _slot : {
       default: () => [_slot]
     });
-    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), this.modelData.detailStyle ? this.ns.m(this.modelData.detailStyle.toLowerCase()) : "", ...this.controller.containerClass];
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), this.semanticClass("group", this.controller), this.modelData.detailStyle ? this.ns.m(this.modelData.detailStyle.toLowerCase()) : "", ...this.controller.containerClass];
     if (this.modelData.showCaption === true) {
       classArr.push(this.ns.m("show-header"));
       classArr.push(this.ns.b("collapse"));
@@ -95,9 +101,9 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     let header = null;
     if (this.modelData.showCaption) {
       header = vue.createVNode("div", {
-        "class": [this.ns.b("header")],
+        "class": [this.ns.b("header"), this.semanticClass("group.header", this.controller)],
         "onClick": this.changeCollapse,
-        "style": this.controller.model.labelCssStyle
+        "style": [this.controller.model.labelCssStyle, this.semanticStyle("group.header", this.controller)]
       }, [vue.createVNode("div", {
         "class": [this.ns.be("header", "left")]
       }, [vue.createVNode("div", {
@@ -109,7 +115,8 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
         "class": [this.ns.be("header", "right")]
       }, [this.modelData.uiactionGroup && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
         "zIndex": this.zIndex,
-        "class": this.ns.e("toolbar"),
+        "class": [this.ns.e("toolbar"), this.semanticClass("group.action", this.controller)],
+        "style": this.semanticStyle("group.action", this.controller),
         "action-details": this.modelData.uiactionGroup.uiactionGroupDetails,
         "actions-state": state.actionGroupState,
         "onActionClick": this.onActionClick,
@@ -138,7 +145,8 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     let footer = null;
     if (this.modelData.showMoreMode === 2) {
       footer = vue.createVNode("div", {
-        "class": [this.ns.b("footer")]
+        "class": [this.ns.b("footer"), this.semanticClass("group.footer", this.controller)],
+        "style": this.semanticStyle("group.footer", this.controller)
       }, [vue.createVNode("div", {
         "class": this.ns.be("footer", "show-more-button"),
         "onClick": () => {
@@ -148,12 +156,13 @@ const FormGroupPanel = /* @__PURE__ */ vue.defineComponent({
     }
     return vue.withDirectives(vue.createVNode("div", {
       "class": classArr,
+      "style": this.semanticStyle("group", this.controller),
       "element-loading-text": this.controller.state.loadingText,
       "id": "".concat(this.controller.form.view.model.codeName, "_").concat(this.controller.form.model.codeName, "_").concat(this.modelData.codeName),
       "onClick": (event) => this.controller.onClick(event)
     }, [header, vue.createVNode("div", {
-      "class": this.ns.b("content"),
-      "style": this.controller.model.cssStyle
+      "class": [this.ns.b("content"), this.semanticClass("group.content", this.controller)],
+      "style": [this.controller.model.cssStyle, this.semanticStyle("group.content", this.controller)]
     }, [content]), footer]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);
   }
 });

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

@@ -24,6 +24,10 @@ const FormIFrame = /* @__PURE__ */ vue.defineComponent({
     const c = props.controller;
     const ns = vue3Util.useNamespace("form-iframe");
     vue3Util.useController(c);
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const loading = vue.ref(true);
     const url = vue.computed(() => {
       return c.calcIFrameUrl();
@@ -35,7 +39,9 @@ const FormIFrame = /* @__PURE__ */ vue.defineComponent({
       ns,
       url,
       loading,
-      onLoad
+      onLoad,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -43,7 +49,8 @@ const FormIFrame = /* @__PURE__ */ vue.defineComponent({
       return null;
     }
     return vue.withDirectives(vue.createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.semanticClass("iframe", this.controller)],
+      "style": this.semanticStyle("iframe", this.controller)
     }, [vue.createVNode("iframe", {
       "class": this.ns.e("iframe"),
       "src": this.url,

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

@@ -17,6 +17,10 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = vue3Util.useNamespace("form-item-container");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const visible = vue.ref(false);
     const {
       sysImage,
@@ -106,7 +110,8 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
         },
         content: () => {
           return vue.createVNode("div", {
-            "class": ns.em("popper", "content")
+            "class": [ns.em("popper", "content"), semanticClass("item.tooltip", props.controller)],
+            "style": semanticStyle("item.tooltip", props.controller)
           }, [vue.createVNode("div", {
             "class": ns.em("popper", "tooltip")
           }, [renderTipContent()]), c.state.inputTipUrl && vue.createVNode("a", {
@@ -121,7 +126,8 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
       const form = props.controller.form;
       const showTipsIcon = enableInputTip && form.showTipsIcon;
       return vue.createVNode("div", {
-        "class": [ns.e("label"), ...c.labelClass || []]
+        "class": [ns.e("label"), semanticClass("item.label", props.controller), ...c.labelClass || []],
+        "style": semanticStyle("item.label", props.controller)
       }, [showTipsIcon && vue.createVNode("div", {
         "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
       }, [renderTipsIcon(), sysImage && vue.createVNode(vue3Util.IBizIcon, {
@@ -135,7 +141,9 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       showError,
-      renderLabel
+      renderLabel,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -147,10 +155,12 @@ const IBizFormItemContainer = /* @__PURE__ */ vue.defineComponent({
     const content = vue.createVNode("div", {
       "class": [this.ns.e("content"), this.ns.em("content", "label-".concat(labelPos == null ? void 0 : labelPos.toLowerCase()))]
     }, [vue.withDirectives(vue.createVNode("div", {
-      "class": [this.ns.e("editor")]
+      "class": [this.ns.e("editor"), this.semanticClass("item.content", this.controller)],
+      "style": this.semanticStyle("item.content", this.controller)
     }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vue.resolveDirective("tooltip"), vue3Util.renderTooltip(this.controller.data, this.controller.model, this.controller.form)]]), this.showError && this.controller.state.error ? vue.createVNode("div", {
       "title": core.showTitle(this.controller.state.error),
-      "class": [this.ns.e("error")]
+      "class": [this.ns.e("error"), this.semanticClass("item.error", this.controller)],
+      "style": this.semanticStyle("item.error", this.controller)
     }, [this.controller.state.error]) : null]);
     return vue.createVNode("div", {
       "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)],

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

@@ -1 +1 @@
-.ibiz-form-item-container{--ibiz-form-item-container-label-width:130px;--ibiz-form-item-container-line-height:var(--ibiz-height-control-default);--ibiz-form-item-container-require-mark-color:var(--ibiz-color-danger);--ibiz-form-item-container-label-left-padding:0 var(--ibiz-spacing-base-tight) 0 0;--ibiz-form-item-container-label-right-padding:0 0 0 var(--ibiz-spacing-base-tight);--ibiz-form-item-container-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);--ibiz-form-item-container-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-container-label-color:var(--ibiz-color-text-1);--ibiz-form-item-container-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-container-error-color:var(--ibiz-color-danger);width:100%;height:100%;padding:var(--ibiz-form-item-container-padding)}.ibiz-form-item-container__label{flex-shrink:0;font-size:var(--ibiz-form-item-container-font-size);color:var(--ibiz-form-item-container-label-color)}.ibiz-form-item-container__label--content{display:flex;align-items:center;max-width:100%}.ibiz-form-item-container__label--content.is-tooltip{cursor:pointer}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__label--text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item-container__popper.el-popper{padding:var(--ibiz-spacing-extra-tight);border:1px solid var(--ibiz-color-border);border-radius:0;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-form-item-container__popper.el-popper table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popper.el-popper table tr td,.ibiz-form-item-container__popper.el-popper table tr th{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-form-item-container__popper.el-popper .el-popper__arrow{display:block}.ibiz-form-item-container__popper--content{max-width:500px;padding:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__popper--content a{color:var(--ibiz-color-link)}.ibiz-form-item-container__popper--tooltip{min-width:50px;min-height:20px}.ibiz-form-item-container__popper.is-md.el-popper.el-popper{padding:0}.ibiz-form-item-container__popper.is-md.el-popper.el-popper .ibiz-form-item-container__popper--content{padding:0}.ibiz-form-item-container__popper.is-md .ibiz-markdown{max-height:100vh;padding:0 calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight));overflow:auto}.ibiz-form-item-container__popper.is-md .ibiz-form-item-container__popper--tooltip{padding:calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight)) 0}.ibiz-form-item-container__popper.is-md .ibiz-markdown-cherry{width:auto!important}.ibiz-form-item-container__popper.is-md .cherry-previewer p:only-child{margin:0}.ibiz-form-item-container__popper.is-md .cherry-previewer>p:first-child{margin-top:0}.ibiz-form-item-container__popper.is-md .cherry-sidebar,.ibiz-form-item-container__popper.is-md .cherry-toolbar,.ibiz-form-item-container__popper.is-md .cherry-toolbar-button{display:none}.ibiz-form-item-container__popper.is-md .cherry{font-size:inherit;line-height:inherit}.ibiz-form-item-container__popper.is-md .cherry,.ibiz-form-item-container__popper.is-md .cherry .cherry-previewer{padding:0;background-color:transparent;border:none!important;box-shadow:none}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-container-label-width)}.ibiz-form-item-container--left .ibiz-form-item-container__content,.ibiz-form-item-container--right .ibiz-form-item-container__content{width:calc(100% - var(--ibiz-form-item-container-label-width))}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-left-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label--content{float:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-container-label-right-padding);line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item-container--right .ibiz-form-item-container__label--content{float:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label--content::before{display:inline-block;margin-right:4px;font-family:SimSun;line-height:1;color:var(--ibiz-form-item-container-require-mark-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-container-error-font-size);line-height:calc(var(--ibiz-form-item-container-error-font-size) + 2px);color:var(--ibiz-form-item-container-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .ibiz-form-item-container__editor .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-container-error-color) inset}
+.ibiz-form-item-container{width:100%;height:100%;padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__label{flex-shrink:0;font-size:var(--ibiz-form-item-label-font-size);color:var(--ibiz-form-item-label-color)}.ibiz-form-item-container__label--content{display:flex;align-items:center;max-width:100%}.ibiz-form-item-container__label--content.is-tooltip{cursor:pointer}.ibiz-form-item-container__label--icon{padding-right:var(--ibiz-form-item-icon-gap)}.ibiz-form-item-container__label--text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-form-item-container__popper.el-popper{padding:var(--ibiz-spacing-extra-tight);border:1px solid var(--ibiz-color-border);border-radius:0;box-shadow:var(--ibiz-shadow-elevated)}.ibiz-form-item-container__popper.el-popper table{border-spacing:0;border-collapse:collapse}.ibiz-form-item-container__popper.el-popper table tr td,.ibiz-form-item-container__popper.el-popper table tr th{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-tight);border:1px solid var(--ibiz-color-border)}.ibiz-form-item-container__popper.el-popper .el-popper__arrow{display:block}.ibiz-form-item-container__popper--content{max-width:500px;padding:var(--ibiz-spacing-extra-tight)}.ibiz-form-item-container__popper--content a{color:var(--ibiz-color-link)}.ibiz-form-item-container__popper--tooltip{min-width:50px;min-height:20px}.ibiz-form-item-container__popper.is-md.el-popper.el-popper{padding:0}.ibiz-form-item-container__popper.is-md.el-popper.el-popper .ibiz-form-item-container__popper--content{padding:0}.ibiz-form-item-container__popper.is-md .ibiz-markdown{max-height:100vh;padding:0 calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight));overflow:auto}.ibiz-form-item-container__popper.is-md .ibiz-form-item-container__popper--tooltip{padding:calc(var(--ibiz-spacing-extra-tight) + var(--ibiz-spacing-extra-tight)) 0}.ibiz-form-item-container__popper.is-md .ibiz-markdown-cherry{width:auto!important}.ibiz-form-item-container__popper.is-md .cherry-previewer p:only-child{margin:0}.ibiz-form-item-container__popper.is-md .cherry-previewer>p:first-child{margin-top:0}.ibiz-form-item-container__popper.is-md .cherry-sidebar,.ibiz-form-item-container__popper.is-md .cherry-toolbar,.ibiz-form-item-container__popper.is-md .cherry-toolbar-button{display:none}.ibiz-form-item-container__popper.is-md .cherry{font-size:inherit;line-height:inherit}.ibiz-form-item-container__popper.is-md .cherry,.ibiz-form-item-container__popper.is-md .cherry .cherry-previewer{padding:0;background-color:transparent;border:none!important;box-shadow:none}.ibiz-form-item-container--left,.ibiz-form-item-container--right{display:flex;min-height:var(--ibiz-form-item-label-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label,.ibiz-form-item-container--right .ibiz-form-item-container__label{width:var(--ibiz-form-item-label-width)}.ibiz-form-item-container--left .ibiz-form-item-container__content,.ibiz-form-item-container--right .ibiz-form-item-container__content{width:calc(100% - var(--ibiz-form-item-label-width))}.ibiz-form-item-container--bottom,.ibiz-form-item-container--top{display:flex;flex-flow:column nowrap}.ibiz-form-item-container--top .ibiz-form-item-container__label{margin-bottom:var(--ibiz-form-item-label-gap)}.ibiz-form-item-container--bottom .ibiz-form-item-container__label{margin-top:var(--ibiz-form-item-label-gap)}.ibiz-form-item-container--left .ibiz-form-item-container__label{padding:var(--ibiz-form-item-label-left-padding);line-height:var(--ibiz-form-item-label-line-height)}.ibiz-form-item-container--left .ibiz-form-item-container__label--content{float:right}.ibiz-form-item-container--right .ibiz-form-item-container__label{padding:var(--ibiz-form-item-label-right-padding);line-height:var(--ibiz-form-item-label-line-height)}.ibiz-form-item-container--right .ibiz-form-item-container__label--content{float:left}.ibiz-form-item-container.is-required .ibiz-form-item-container__label--content::before{display:inline-block;margin-right:var(--ibiz-form-item-label-require-gap);font-family:SimSun;line-height:1;color:var(--ibiz-form-item-label-require-color);content:"*"}.ibiz-form-item-container__content{display:flex;flex-flow:column nowrap;position:relative;flex-grow:1}.ibiz-form-item-container__content--label-left,.ibiz-form-item-container__content--label-none,.ibiz-form-item-container__content--label-right{height:100%}.ibiz-form-item-container__editor{position:relative;flex-grow:1;height:100%}.ibiz-form-item-container__error{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:absolute;top:100%;width:100%;font-size:var(--ibiz-form-item-error-font-size);line-height:calc(var(--ibiz-form-item-error-font-size) + 2px);color:var(--ibiz-form-item-error-color);word-wrap:break-word}.ibiz-form-item-container.is-error .ibiz-form-item-container__editor .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-form-item-error-color) inset}

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

@@ -30,6 +30,10 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = vue3Util.useNamespace("form-item");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(c.form);
     const onValueChange = (val, name, ignore = false) => {
       props.controller.setDataValue(val, name, ignore);
     };
@@ -49,7 +53,9 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
       c,
       showTitle,
       CustomHtml,
-      onValueChange
+      onValueChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -114,13 +120,14 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
     }
     if (this.c.isCustomCode)
       return vue.withDirectives(vue.createVNode("div", {
-        "class": [this.ns.b(), this.ns.e("script"), this.ns.m(this.modelData.id), this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
+        "class": [this.ns.b(), this.ns.e("script"), this.semanticClass("item", this.controller), this.ns.m(this.modelData.id), compositeItem ? this.semanticClass("compositeItem", this.controller) : "", this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
+        "style": [this.modelData.cssStyle, this.semanticStyle("item", this.controller), compositeItem ? this.semanticStyle("compositeItem", this.controller) : ""],
         "innerHTML": this.CustomHtml
       }, null), [[vue.resolveDirective("tooltip"), vue3Util.renderTooltip(this.c.data, this.c.model, this.c.form)]]);
     return vue.createVNode(vue.resolveComponent("iBizFormItemContainer"), {
       "id": "".concat(this.c.form.view.model.codeName, "_").concat(this.c.form.model.codeName, "_").concat(this.modelData.codeName),
-      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
-      "style": this.modelData.cssStyle,
+      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.semanticClass("item", this.controller), compositeItem ? this.semanticClass("compositeItem", this.controller) : "", this.ns.is("compositeItem", compositeItem), ...this.c.containerClass],
+      "style": [this.modelData.cssStyle, this.semanticStyle("item", this.controller), compositeItem ? this.semanticStyle("compositeItem", this.controller) : ""],
       "controller": this.c,
       "onClick": (event) => this.c.onClick(event)
     }, _isSlot(editor) ? editor : {

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

@@ -1 +1 @@
-.ibiz-form-item{border-color:var(--ibiz-color-border);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-text-color:var(--ibiz-color-text-2);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-3);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:var(--ibiz-color-disabled-fill);--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-item-hover-edit-padding:var(--ibiz-spacing-none) 11px}.ibiz-form-item.is-compositeItem{--ibiz-form-item-compositeItem-gap:var(--ibiz-spacing-tight)}.ibiz-form-item.is-compositeItem .ibiz-form-item__composite-separator{line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item.is-compositeItem .ibiz-form-item-container__editor{display:flex;gap:var(--ibiz-form-item-compositeItem-gap)}
+.ibiz-form-item{border-color:var(--ibiz-color-border);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-text-color:var(--ibiz-color-text-2);--ibiz-form-item-hover-color:var(--ibiz-color-text-0);--ibiz-form-item-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-form-item-readonly-color:var(--ibiz-color-disabled-text);--ibiz-form-item-border-color:transparent;--ibiz-form-item-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-placeholder-color:var(--ibiz-color-text-3);--ibiz-form-item-disabled-color:var(--ibiz-color-disabled-text);--ibiz-form-item-disabled-bg-color:var(--ibiz-color-disabled-fill);--ibiz-form-item-disabled-border-color:var(--ibiz-color-disabled-border);--ibiz-form-item-active-bg:var(--ibiz-color-fill-2);--ibiz-form-item-active-border:var(--ibiz-active-bg);--ibiz-form-item-focus-bg:var(--ibiz-color-fill-0);--ibiz-form-item-focus-border:var(--ibiz-color-focus-border);--ibiz-form-item-line-height:var(--ibiz-editor-default-line-height);--ibiz-form-item-font-weight:var(--ibiz-font-weight-regular);--ibiz-form-item-hover-edit-padding:var(--ibiz-spacing-none) 11px;--ibiz-form-item-label-font-size:var(--ibiz-font-size-regular);--ibiz-form-item-label-line-height:var(--ibiz-height-control-default);--ibiz-form-item-label-color:var(--ibiz-color-text-1);--ibiz-form-item-label-width:130px;--ibiz-form-item-label-left-padding:0 var(--ibiz-spacing-base-tight) 0 0;--ibiz-form-item-label-right-padding:0 0 0 var(--ibiz-spacing-base-tight);--ibiz-form-item-label-gap:var(--ibiz-spacing-extra-tight);--ibiz-form-item-label-require-color:var(--ibiz-color-danger);--ibiz-form-item-label-require-gap:var(--ibiz-spacing-extra-tight);--ibiz-form-item-icon-gap:var(--ibiz-spacing-extra-tight);--ibiz-form-item-error-font-size:var(--ibiz-font-size-small);--ibiz-form-item-error-color:var(--ibiz-color-danger)}.ibiz-form-item.is-compositeItem{--ibiz-form-compositeItem-gap:var(--ibiz-spacing-tight)}.ibiz-form-item.is-compositeItem .ibiz-form-item__composite-separator{line-height:var(--ibiz-form-item-container-line-height)}.ibiz-form-item.is-compositeItem .ibiz-form-item-container__editor{display:flex;gap:var(--ibiz-form-compositeItem-gap)}

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

@@ -19,13 +19,18 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-mdctrl-form");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const showActions = vue.computed(() => {
       return props.controller.enableCreate || props.controller.enableDelete;
     });
     const renderAddBtn = () => {
       let _slot;
       return vue.createVNode(vue.resolveComponent("el-button"), {
-        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn")],
+        "class": [ns.be("item-actions", "create"), ns.be("item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "create")],
+        "style": semanticStyle("mdctrl.button", props.controller, "create"),
         "onClick": () => props.controller.create()
       }, _isSlot(_slot = ibiz.i18n.t("app.add")) ? _slot : {
         default: () => [_slot]
@@ -38,7 +43,9 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
       ns,
       showActions,
       onCreated,
-      renderAddBtn
+      renderAddBtn,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -49,6 +56,8 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
     } = this.controller;
     if (model.detailStyle === "STYLE2") {
       return vue.createVNode(vue.resolveComponent("iBizMDCtrlContainer2"), {
+        "class": this.semanticClass("mdctrl", this.controller),
+        "style": this.semanticStyle("mdctrl", this.controller),
         "controller": this.controller,
         "items": state.items
       }, {
@@ -59,7 +68,8 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
             return vue.createVNode("div", null, [ibiz.i18n.t("control.form.formMDctrlForm.noFindProvider")]);
           }
           const formComponent = vue.h(vue.resolveComponent(formProvider.component), {
-            class: this.ns.be("item", "form"),
+            class: [this.ns.be("item", "form"), this.semanticClass("mdctrl.form", this.controller)],
+            style: this.semanticStyle("mdctrl.form", this.controller),
             key: data.id,
             modelData: model.contentControl,
             context: data.context,
@@ -73,8 +83,10 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
       });
     }
     return vue.createVNode(vue.resolveComponent("iBizMDCtrlContainer"), {
-      "class": this.ns.b(),
+      "class": [this.ns.b(), this.semanticClass("mdctrl", this.controller)],
+      "style": this.semanticStyle("mdctrl", this.controller),
       "items": state.items,
+      "controller": this.controller,
       "enableCreate": this.controller.enableCreate,
       "enableDelete": this.controller.enableDelete,
       "onAddClick": () => this.controller.create(),
@@ -88,7 +100,8 @@ const FormMDCtrlForm = /* @__PURE__ */ vue.defineComponent({
           return vue.createVNode("div", null, [ibiz.i18n.t("control.form.formMDctrlForm.noFindProvider")]);
         }
         const formComponent = vue.h(vue.resolveComponent(formProvider.component), {
-          class: this.ns.be("item", "form"),
+          class: [this.ns.be("item", "form"), this.semanticClass("mdctrl.form", this.controller)],
+          style: this.semanticStyle("mdctrl.form", this.controller),
           key: data.id,
           modelData: model.contentControl,
           mdCtrlFormIndex: index,

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

@@ -1 +1 @@
-.ibiz-form-mdctrl-form-item{display:flex}.ibiz-form-mdctrl-form-item__form{flex-grow:1}.ibiz-form-mdctrl-form-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-form-mdctrl-form-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-form-mdctrl-form-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-form-mdctrl-form-no-data{width:100%;display:flex;justify-content:flex-end}
+.ibiz-form-mdctrl-form-item{display:flex}.ibiz-form-mdctrl-form-item__form{flex-grow:1}.ibiz-form-mdctrl-form-item-actions{flex-shrink:0;width:var(--ibiz-form-mdctrl-button-width);text-align:center}.ibiz-form-mdctrl-form-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-form-mdctrl-form-item-actions__btn{margin-top:var(--ibiz-form-mdctrl-button-gap)}.ibiz-form-mdctrl-form-no-data{width:100%;display:flex;justify-content:flex-end}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.cjs

@@ -20,6 +20,10 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-mdctrl-md");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const showActions = vue.computed(() => {
       return props.controller.enableCreate || props.controller.enableDelete;
     });
@@ -50,7 +54,8 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
             return vue.createVNode(vue.resolveComponent("el-button"), {
               "type": "danger",
               "disabled": !isSelected.value,
-              "class": [ns.be("actions", "remove"), ns.be("actions", "btn")]
+              "class": [ns.be("actions", "remove"), ns.be("actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+              "style": semanticStyle("mdctrl.button", props.controller, "remove")
             }, _isSlot(_slot = ibiz.i18n.t("app.delete")) ? _slot : {
               default: () => [_slot]
             });
@@ -60,7 +65,8 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode(vue.resolveComponent("el-button"), {
         "type": "danger",
         "disabled": !isSelected.value,
-        "class": [ns.be("actions", "remove"), ns.be("actions", "btn")],
+        "class": [ns.be("actions", "remove"), ns.be("actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+        "style": semanticStyle("mdctrl.button", props.controller, "remove"),
         "onClick": () => handleRemove()
       }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
         default: () => [_slot2]
@@ -71,7 +77,9 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
       showActions,
       onCreated,
       onSelectionChange,
-      renderRemoveBtn
+      renderRemoveBtn,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -82,7 +90,8 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
     } = this.controller;
     let controlComponent = null;
     const controlProps = {
-      class: this.ns.b("content"),
+      class: [this.ns.b("content"), this.semanticClass("mdctrl.md", this.controller)],
+      style: this.semanticStyle("mdctrl.md", this.controller),
       modelData: model.contentControl,
       context: this.controller.form.context,
       params: this.controller.form.params,
@@ -95,11 +104,13 @@ const FormMDCtrlMD = /* @__PURE__ */ vue.defineComponent({
     }
     controlComponent = vue.h(vue.resolveComponent(mdProvider.component), controlProps);
     return vue.createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.semanticClass("mdctrl", this.controller)],
+      "style": this.semanticStyle("mdctrl", this.controller)
     }, [controlComponent, this.showActions && vue.createVNode("div", {
       "class": this.ns.b("actions")
     }, [this.controller.enableCreate && vue.createVNode(vue.resolveComponent("el-button"), {
-      "class": [this.ns.be("actions", "create"), this.ns.be("actions", "btn")],
+      "class": [this.ns.be("actions", "create"), this.ns.be("actions", "btn"), this.semanticClass("mdctrl.button", this.controller, "create")],
+      "style": this.semanticStyle("mdctrl.button", this.controller, "create"),
       "onClick": () => this.controller.create()
     }, _isSlot(_slot3 = ibiz.i18n.t("app.add")) ? _slot3 : {
       default: () => [_slot3]

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.css

@@ -1 +1 @@
-.ibiz-form-mdctrl-md{--ibiz-form-mdctrl-md-empty-image-width:64px;--ibiz-form-mdctrl-md-empty-padding:var(--ibiz-spacing-none);--ibiz-form-mdctrl-md-empty-margin-top:var(--ibiz-spacing-tight);display:flex}.ibiz-form-mdctrl-md-content{flex-grow:1}.ibiz-form-mdctrl-md-content .ibiz-no-data{--el-empty-image-width:var(--ibiz-form-mdctrl-md-empty-image-width);--el-empty-description-margin-top:var(--ibiz-form-mdctrl-md-empty-margin-top);--el-empty-padding:var(--ibiz-form-mdctrl-md-empty-padding);line-height:1}.ibiz-form-mdctrl-md-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-form-mdctrl-md-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-form-mdctrl-md-actions__btn{margin-bottom:var(--ibiz-spacing-tight)}
+.ibiz-form-mdctrl-md{--ibiz-form-mdctrl-md-empty-image-width:64px;--ibiz-form-mdctrl-md-empty-padding:var(--ibiz-spacing-none);--ibiz-form-mdctrl-md-empty-margin-top:var(--ibiz-spacing-tight);display:flex}.ibiz-form-mdctrl-md-content{flex-grow:1}.ibiz-form-mdctrl-md-content .ibiz-no-data{--el-empty-image-width:var(--ibiz-form-mdctrl-md-empty-image-width);--el-empty-description-margin-top:var(--ibiz-form-mdctrl-md-empty-margin-top);--el-empty-padding:var(--ibiz-form-mdctrl-md-empty-padding);line-height:1}.ibiz-form-mdctrl-md-actions{flex-shrink:0;width:var(--ibiz-form-mdctrl-button-width);text-align:center}.ibiz-form-mdctrl-md-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-form-mdctrl-md-actions__btn{margin-bottom:var(--ibiz-form-mdctrl-button-gap)}

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.cjs

@@ -19,21 +19,29 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("form-mdctrl-repeater");
+    const {
+      semanticClass,
+      semanticStyle
+    } = vue3Util.useSemanticNode(props.controller.form);
     const onDataChange = (data) => {
       props.controller.setValue(data);
     };
     return {
       ns,
-      onDataChange
+      onDataChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     var _a;
-    const classNames = [this.ns.b()];
+    const classNames = [this.ns.b(), this.semanticClass("repeater", this.controller)];
+    const style = this.semanticStyle("repeater", this.controller);
     switch (this.controller.repeaterStyle) {
       case "MultiForm":
         return vue.createVNode(repeaterMultiForm.RepeaterMultiForm, {
           "class": classNames,
+          "style": style,
           "onChange": this.onDataChange,
           "controller": this.controller
         }, null);
@@ -42,25 +50,29 @@ const FormMDCtrlRepeater = /* @__PURE__ */ vue.defineComponent({
         if (gridStyle === "style2") {
           return vue.createVNode(repeaterGrid2.RepeaterGrid2, {
             "class": classNames,
+            "style": style,
             "controller": this.controller,
             "onChange": this.onDataChange
           }, null);
         }
         return vue.createVNode(repeaterGrid.RepeaterGrid, {
           "class": classNames,
+          "style": style,
           "controller": this.controller,
           "onChange": this.onDataChange
         }, null);
       case "SingleForm":
         return vue.createVNode(repeaterSingleForm.RepeaterSingleForm, {
           "class": classNames,
+          "style": style,
           "data": this.controller.value,
           "controller": this.controller,
           "onChange": this.onDataChange
         }, null);
       default:
         return vue.createVNode("div", {
-          "class": classNames
+          "class": classNames,
+          "style": style
         }, [ibiz.i18n.t("control.form.formMDctrlRepeater.noSupportStyle", {
           repeaterStyle: this.controller.repeaterStyle
         })]);