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

package/es/control/form/form/form.mjs

@@ -1,6 +1,6 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, renderSlot, h } from 'vue';
-import { ControlType, ScriptFactory, findChildFormDetails } from '@ibiz-template/runtime';
-import { useNamespace, useControlPopoverzIndex } from '@ibiz-template/vue3-util';
+import { ControlType, filterPresetAttrs, ScriptFactory, findChildFormDetails } from '@ibiz-template/runtime';
+import { useNamespace, useControlPopoverzIndex, useSemanticNode } from '@ibiz-template/vue3-util';
 import './form.css';
 
 "use strict";
@@ -28,9 +28,8 @@ const FormControl = /* @__PURE__ */ defineComponent({
       form: c
     };
     const renderAttrs = (model) => {
-      var _a;
       const attrs = {};
-      (_a = model.controlAttributes) == null ? void 0 : _a.forEach((item) => {
+      filterPresetAttrs(model.controlAttributes).forEach((item) => {
         if (item.attrName && item.attrValue) {
           attrs[item.attrName] = ScriptFactory.execSingleLine(item.attrValue, {
             ...props.controller.getEventArgs(),
@@ -40,6 +39,10 @@ const FormControl = /* @__PURE__ */ defineComponent({
       });
       return attrs;
     };
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c);
     const renderByDetailType = (detail, isRoot = false) => {
       const {
         hidden,
@@ -98,7 +101,9 @@ const FormControl = /* @__PURE__ */ defineComponent({
       c,
       FormDetail,
       slotProps,
-      renderByDetailType
+      renderByDetailType,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -137,7 +142,8 @@ const FormControl = /* @__PURE__ */ defineComponent({
       }
     }
     return createVNode(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/es/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/es/control/form/form-detail/form-button/form-button.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, createVNode, resolveComponent, computed } from 'vue';
 import { FormButtonController } from '@ibiz-template/runtime';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import '../../../../util/index.mjs';
 import './form-button.css';
@@ -21,6 +21,11 @@ const FormButton = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const ns = useNamespace("form-button");
+    const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c.form);
     const captionText = computed(() => {
       const {
         caption,
@@ -33,7 +38,9 @@ const FormButton = /* @__PURE__ */ defineComponent({
     });
     return {
       ns,
-      captionText
+      captionText,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -41,7 +48,8 @@ const FormButton = /* @__PURE__ */ defineComponent({
       return null;
     }
     return 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)
     }, [createVNode(resolveComponent("el-button"), {
       "sime": "small",
       "onClick": this.controller.onClick.bind(this.controller),

package/es/control/form/form-detail/form-button-list/form-button-list.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, createVNode, resolveComponent } from 'vue';
 import { FormButtonListController } from '@ibiz-template/runtime';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import './form-button-list.css';
 
 "use strict";
@@ -20,6 +20,10 @@ const FormButtonList = /* @__PURE__ */ defineComponent({
     var _a;
     const ns = useNamespace("form-button-list");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = 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();
@@ -29,7 +33,9 @@ const FormButtonList = /* @__PURE__ */ defineComponent({
     };
     return {
       ns,
-      handleClick
+      handleClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -38,7 +44,8 @@ const FormButtonList = /* @__PURE__ */ defineComponent({
     } = this.controller;
     if (state.visible) {
       return createVNode(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/es/control/form/form-detail/form-druipart/form-druipart.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode, resolveComponent, h } from 'vue';
-import { useNamespace, useController } from '@ibiz-template/vue3-util';
+import { useNamespace, useController, useSemanticNode } from '@ibiz-template/vue3-util';
 import { FormDRUIPartController } from '@ibiz-template/runtime';
 import './form-druipart.css';
 
@@ -20,6 +20,11 @@ const FormDRUIPart = /* @__PURE__ */ defineComponent({
     var _a;
     const ns = useNamespace("form-druipart");
     useController(props.controller);
+    const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c.form);
     const isDesignPreview = ((_a = props.controller.context) == null ? void 0 : _a.srfrunmode) === "DESIGN";
     const onCreated = (event) => {
       props.controller.setEmbedView(event.view);
@@ -27,7 +32,9 @@ const FormDRUIPart = /* @__PURE__ */ defineComponent({
     return {
       ns,
       isDesignPreview,
-      onCreated
+      onCreated,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -43,7 +50,8 @@ const FormDRUIPart = /* @__PURE__ */ defineComponent({
     }
     const viewShell = resolveComponent("IBizViewShell");
     return 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)
     }, [h(viewShell, {
       context: this.controller.navContext,

package/es/control/form/form-detail/form-group-panel/form-group-panel.mjs

@@ -1,6 +1,6 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, withDirectives, resolveDirective, computed } from 'vue';
 import { FormGroupPanelController } from '@ibiz-template/runtime';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import './form-group-panel.css';
 
 "use strict";
@@ -22,6 +22,10 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
   setup(props) {
     const ns = useNamespace("form-group");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c.form);
     const zIndex = props.controller.form.state.zIndex;
     const changeCollapse = () => {
       if (!c.disableClose) {
@@ -49,7 +53,9 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
       zIndex,
       captionText,
       changeCollapse,
-      onActionClick
+      onActionClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -76,7 +82,7 @@ const FormGroupPanel = /* @__PURE__ */ 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"));
@@ -91,9 +97,9 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
     let header = null;
     if (this.modelData.showCaption) {
       header = 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)]
       }, [createVNode("div", {
         "class": [this.ns.be("header", "left")]
       }, [createVNode("div", {
@@ -105,7 +111,8 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
         "class": [this.ns.be("header", "right")]
       }, [this.modelData.uiactionGroup && createVNode(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,
@@ -134,7 +141,8 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
     let footer = null;
     if (this.modelData.showMoreMode === 2) {
       footer = 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)
       }, [createVNode("div", {
         "class": this.ns.be("footer", "show-more-button"),
         "onClick": () => {
@@ -144,12 +152,13 @@ const FormGroupPanel = /* @__PURE__ */ defineComponent({
     }
     return withDirectives(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, 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]), [[resolveDirective("loading"), this.controller.state.loading]]);
   }
 });

package/es/control/form/form-detail/form-iframe/form-iframe.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, withDirectives, createVNode, resolveDirective, ref, computed } from 'vue';
-import { useNamespace, useController } from '@ibiz-template/vue3-util';
+import { useNamespace, useController, useSemanticNode } from '@ibiz-template/vue3-util';
 import { FormIFrameController } from '@ibiz-template/runtime';
 import './form-iframe.css';
 
@@ -20,6 +20,10 @@ const FormIFrame = /* @__PURE__ */ defineComponent({
     const c = props.controller;
     const ns = useNamespace("form-iframe");
     useController(c);
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c.form);
     const loading = ref(true);
     const url = computed(() => {
       return c.calcIFrameUrl();
@@ -31,7 +35,9 @@ const FormIFrame = /* @__PURE__ */ defineComponent({
       ns,
       url,
       loading,
-      onLoad
+      onLoad,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -39,7 +45,8 @@ const FormIFrame = /* @__PURE__ */ defineComponent({
       return null;
     }
     return withDirectives(createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.semanticClass("iframe", this.controller)],
+      "style": this.semanticStyle("iframe", this.controller)
     }, [createVNode("iframe", {
       "class": this.ns.e("iframe"),
       "src": this.url,

package/es/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/es/control/form/form-detail/form-item/form-item-container/form-item-container.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode, withDirectives, resolveDirective, ref, watch, onUnmounted, computed, resolveComponent } from 'vue';
-import { renderTooltip, useNamespace, IBizIcon } from '@ibiz-template/vue3-util';
+import { renderTooltip, useNamespace, useSemanticNode, IBizIcon } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import './form-item-container.css';
 
@@ -15,6 +15,10 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
   setup(props) {
     const ns = useNamespace("form-item-container");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c.form);
     const visible = ref(false);
     const {
       sysImage,
@@ -104,7 +108,8 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
         },
         content: () => {
           return createVNode("div", {
-            "class": ns.em("popper", "content")
+            "class": [ns.em("popper", "content"), semanticClass("item.tooltip", props.controller)],
+            "style": semanticStyle("item.tooltip", props.controller)
           }, [createVNode("div", {
             "class": ns.em("popper", "tooltip")
           }, [renderTipContent()]), c.state.inputTipUrl && createVNode("a", {
@@ -119,7 +124,8 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
       const form = props.controller.form;
       const showTipsIcon = enableInputTip && form.showTipsIcon;
       return 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 && createVNode("div", {
         "class": [ns.em("label", "content"), ns.is("tooltip", enableInputTip)]
       }, [renderTipsIcon(), sysImage && createVNode(IBizIcon, {
@@ -133,7 +139,9 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
     return {
       ns,
       showError,
-      renderLabel
+      renderLabel,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -145,10 +153,12 @@ const IBizFormItemContainer = /* @__PURE__ */ defineComponent({
     const content = createVNode("div", {
       "class": [this.ns.e("content"), this.ns.em("content", "label-".concat(labelPos == null ? void 0 : labelPos.toLowerCase()))]
     }, [withDirectives(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)]), [[resolveDirective("tooltip"), renderTooltip(this.controller.data, this.controller.model, this.controller.form)]]), this.showError && this.controller.state.error ? createVNode("div", {
       "title": 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 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/es/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/es/control/form/form-detail/form-item/form-item.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, createTextVNode, resolveComponent, h, withDirectives, resolveDirective, computed } from 'vue';
-import { renderTooltip, useNamespace, computedAsync } from '@ibiz-template/vue3-util';
+import { renderTooltip, useNamespace, useSemanticNode, computedAsync } from '@ibiz-template/vue3-util';
 import { CompositeFormItem } from './composite-form-item/composite-form-item.mjs';
 import './form-item.css';
 
@@ -26,6 +26,10 @@ const FormItem = /* @__PURE__ */ defineComponent({
   setup(props) {
     const ns = useNamespace("form-item");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c.form);
     const onValueChange = (val, name, ignore = false) => {
       props.controller.setDataValue(val, name, ignore);
     };
@@ -45,7 +49,9 @@ const FormItem = /* @__PURE__ */ defineComponent({
       c,
       showTitle,
       CustomHtml,
-      onValueChange
+      onValueChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -110,13 +116,14 @@ const FormItem = /* @__PURE__ */ defineComponent({
     }
     if (this.c.isCustomCode)
       return withDirectives(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), [[resolveDirective("tooltip"), renderTooltip(this.c.data, this.c.model, this.c.form)]]);
     return createVNode(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/es/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/es/control/form/form-detail/form-mdctrl/form-mdctrl-form/form-mdctrl-form.mjs

@@ -1,6 +1,6 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, h, computed } from 'vue';
 import { FormMDCtrlFormController } from '@ibiz-template/runtime';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import './form-mdctrl-form.css';
 
 "use strict";
@@ -17,13 +17,18 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const ns = useNamespace("form-mdctrl-form");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.form);
     const showActions = computed(() => {
       return props.controller.enableCreate || props.controller.enableDelete;
     });
     const renderAddBtn = () => {
       let _slot;
       return createVNode(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]
@@ -36,7 +41,9 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
       ns,
       showActions,
       onCreated,
-      renderAddBtn
+      renderAddBtn,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -47,6 +54,8 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
     } = this.controller;
     if (model.detailStyle === "STYLE2") {
       return createVNode(resolveComponent("iBizMDCtrlContainer2"), {
+        "class": this.semanticClass("mdctrl", this.controller),
+        "style": this.semanticStyle("mdctrl", this.controller),
         "controller": this.controller,
         "items": state.items
       }, {
@@ -57,7 +66,8 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
             return createVNode("div", null, [ibiz.i18n.t("control.form.formMDctrlForm.noFindProvider")]);
           }
           const formComponent = h(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,
@@ -71,8 +81,10 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
       });
     }
     return createVNode(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(),
@@ -86,7 +98,8 @@ const FormMDCtrlForm = /* @__PURE__ */ defineComponent({
           return createVNode("div", null, [ibiz.i18n.t("control.form.formMDctrlForm.noFindProvider")]);
         }
         const formComponent = h(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/es/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/es/control/form/form-detail/form-mdctrl/form-mdctrl-md/form-mdctrl-md.mjs

@@ -1,6 +1,6 @@
 import { isVNode, defineComponent, h, resolveComponent, createVNode, computed, ref } from 'vue';
 import { FormMDCtrlMDController } from '@ibiz-template/runtime';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import './form-mdctrl-md.css';
 import { showTitle } from '@ibiz-template/core';
 
@@ -18,6 +18,10 @@ const FormMDCtrlMD = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const ns = useNamespace("form-mdctrl-md");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.form);
     const showActions = computed(() => {
       return props.controller.enableCreate || props.controller.enableDelete;
     });
@@ -48,7 +52,8 @@ const FormMDCtrlMD = /* @__PURE__ */ defineComponent({
             return createVNode(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]
             });
@@ -58,7 +63,8 @@ const FormMDCtrlMD = /* @__PURE__ */ defineComponent({
       return createVNode(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]
@@ -69,7 +75,9 @@ const FormMDCtrlMD = /* @__PURE__ */ defineComponent({
       showActions,
       onCreated,
       onSelectionChange,
-      renderRemoveBtn
+      renderRemoveBtn,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -80,7 +88,8 @@ const FormMDCtrlMD = /* @__PURE__ */ 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,
@@ -93,11 +102,13 @@ const FormMDCtrlMD = /* @__PURE__ */ defineComponent({
     }
     controlComponent = h(resolveComponent(mdProvider.component), controlProps);
     return createVNode("div", {
-      "class": this.ns.b()
+      "class": [this.ns.b(), this.semanticClass("mdctrl", this.controller)],
+      "style": this.semanticStyle("mdctrl", this.controller)
     }, [controlComponent, this.showActions && createVNode("div", {
       "class": this.ns.b("actions")
     }, [this.controller.enableCreate && createVNode(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]