@ibiz-template/vue3-util 0.7.41-alpha.111 → 0.7.41-alpha.113

package/lib/panel-component/nav-pos/nav-pos.cjs

@@ -7,6 +7,7 @@ require('./nav-pos.css');
 require('../../use/index.cjs');
 require('../../util/index.cjs');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 var route = require('../../util/route/route.cjs');
 
 "use strict";
@@ -34,6 +35,10 @@ const NavPos = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const c = props.controller;
     const ns = namespace.useNamespace("nav-pos");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const onViewCreated = (event) => {
       c.onViewCreated(event);
     };
@@ -62,7 +67,9 @@ const NavPos = /* @__PURE__ */ vue.defineComponent({
       ns,
       c,
       isPresetView,
-      onViewCreated
+      onViewCreated,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -79,9 +86,14 @@ const NavPos = /* @__PURE__ */ vue.defineComponent({
     let content = null;
     if (state.routeOpen) {
       if (this.isPresetView) {
-        return vue.createVNode(vueRouter.RouterView, null, null);
+        return vue.createVNode(vueRouter.RouterView, {
+          "class": this.semanticClass("content"),
+          "style": this.semanticStyle("content")
+        }, null);
       }
       content = vue.createVNode(vue.resolveComponent("iBizRouterView"), {
+        "class": this.semanticClass("content"),
+        "style": this.semanticStyle("content"),
         "manualKey": currentKey,
         "modal": viewModals[currentKey],
         "onCreated": this.onViewCreated
@@ -101,6 +113,8 @@ const NavPos = /* @__PURE__ */ vue.defineComponent({
       });
     } else {
       const view = currentKey && navViewMsgs[currentKey] ? vue.h(vue.resolveComponent("IBizViewShell"), {
+        class: this.semanticClass("content"),
+        style: this.semanticStyle("content"),
         context: navViewMsgs[currentKey].context,
         params: navViewMsgs[currentKey].params,
         key: !this.c.ignoreEmbedKey ? currentKey : void 0,
@@ -116,7 +130,8 @@ const NavPos = /* @__PURE__ */ vue.defineComponent({
       }) : view;
     }
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass]
+      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.semanticClass("root"), ...this.controller.containerClass],
+      "style": this.semanticStyle("root")
     }, [content]);
   }
 });

package/lib/panel-component/panel-container/panel-container.cjs

@@ -5,6 +5,7 @@ var runtime = require('@ibiz-template/runtime');
 require('../../use/index.cjs');
 require('./panel-container.css');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 function _isSlot(s) {
@@ -33,6 +34,10 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
     const {
       id
     } = props.modelData;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const classArr = vue.computed(() => {
       let result = [ns.b(), ns.m(id)];
       result = [...result, ...props.controller.containerClass, ns.is("hidden", !props.controller.state.visible)];
@@ -40,7 +45,9 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      classArr
+      classArr,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -49,6 +56,8 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     const content = vue.createVNode(vue.resolveComponent("iBizRow"), {
       "slot": "content",
+      "class": this.semanticClass("content"),
+      "style": this.semanticStyle("content"),
       "layout": this.modelData.layout
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;
@@ -57,7 +66,13 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
       }
       return vue.createVNode(vue.resolveComponent("iBizCol"), {
         "layoutPos": props.modelData.layoutPos,
-        "state": props.controller.state
+        "state": props.controller.state,
+        "class": this.semanticClass("item", {
+          props
+        }),
+        "style": this.semanticStyle("item", {
+          props
+        })
       }, _isSlot(slot) ? slot : {
         default: () => [slot]
       });
@@ -76,7 +91,8 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
       }, attributes), {
         default: () => {
           return vue.createVNode("div", vue.mergeProps({
-            "class": this.classArr,
+            "class": [this.classArr, this.semanticClass("root")],
+            "style": this.semanticStyle("root"),
             "onClick": () => {
               this.controller.onClick();
             }
@@ -86,14 +102,16 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
         },
         content: () => {
           return vue.createVNode("div", {
-            "class": this.ns.e("dynamic-tooltip-content"),
+            "class": [this.ns.e("dynamic-tooltip-content"), this.semanticClass("tooltip")],
+            "style": this.semanticStyle("tooltip"),
             "innerHTML": attrs.dynamictooltip.content
           }, null);
         }
       });
     }
     return vue.withDirectives(vue.createVNode("div", {
-      "class": this.classArr,
+      "class": [this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "element-loading-text": this.controller.state.loadingText,
       "onClick": (event) => this.controller.onClick(event)
     }, [this.controller.model.cssStyle ? vue.createVNode("style", {

package/lib/panel-component/panel-container-image/panel-container-image.cjs

@@ -6,6 +6,7 @@ require('../../use/index.cjs');
 var panelContainerImage_controller = require('./panel-container-image.controller.cjs');
 require('./panel-container-image.css');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 function _isSlot(s) {
@@ -34,6 +35,10 @@ const PanelContainerImage = /* @__PURE__ */ vue.defineComponent({
     const {
       id
     } = props.modelData;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const classArr = vue.computed(() => {
       let result = [ns.b(), ns.m(id)];
       result = [...result, ...props.controller.containerClass, ns.is("hidden", !props.controller.state.visible)];
@@ -63,7 +68,9 @@ const PanelContainerImage = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       classArr,
-      backgroundStyle
+      backgroundStyle,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -72,6 +79,8 @@ const PanelContainerImage = /* @__PURE__ */ vue.defineComponent({
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     const content = vue.createVNode(vue.resolveComponent("iBizRow"), {
       "slot": "content",
+      "class": this.semanticClass("content"),
+      "style": this.semanticStyle("content"),
       "layout": this.modelData.layout
     }, _isSlot(_slot = defaultSlots.map((slot) => {
       const props = slot.props;
@@ -80,7 +89,13 @@ const PanelContainerImage = /* @__PURE__ */ vue.defineComponent({
       }
       return vue.createVNode(vue.resolveComponent("iBizCol"), {
         "layoutPos": props.modelData.layoutPos,
-        "state": props.controller.state
+        "state": props.controller.state,
+        "class": this.semanticClass("item", {
+          props
+        }),
+        "style": this.semanticStyle("item", {
+          props
+        })
       }, _isSlot(slot) ? slot : {
         default: () => [slot]
       });
@@ -88,10 +103,10 @@ const PanelContainerImage = /* @__PURE__ */ vue.defineComponent({
       default: () => [_slot]
     });
     return vue.withDirectives(vue.createVNode("div", {
-      "class": this.classArr,
+      "class": [this.classArr, this.semanticClass("root")],
       "element-loading-text": this.controller.state.loadingText,
       "onClick": (event) => this.controller.onClick(event),
-      "style": this.backgroundStyle
+      "style": [this.backgroundStyle, this.semanticStyle("root")]
     }, [this.controller.model.cssStyle ? vue.createVNode("style", {
       "type": "text/css"
     }, [this.controller.model.cssStyle]) : null, content]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);

package/lib/panel-component/panel-ctrl-pos/panel-ctrl-pos.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 require('../../use/index.cjs');
 require('./panel-ctrl-pos.css');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 const PanelCtrlPos = /* @__PURE__ */ vue.defineComponent({
@@ -25,15 +26,21 @@ const PanelCtrlPos = /* @__PURE__ */ vue.defineComponent({
     }
   },
   setup(props) {
+    const ns = namespace.useNamespace("panel-ctrl-pos");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const ctx = vue.inject("ctx");
     ctx.evt.on("onRegister", (name, c) => {
       if (name === props.modelData.id) {
         props.controller.bindControl(c);
       }
     });
-    const ns = namespace.useNamespace("panel-ctrl-pos");
     return {
-      ns
+      ns,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -42,10 +49,15 @@ const PanelCtrlPos = /* @__PURE__ */ vue.defineComponent({
     } = this.controller;
     let content;
     if (this.$slots.default) {
-      content = this.$slots.default();
+      const props = {
+        class: this.semanticClass("content"),
+        style: this.semanticStyle("content")
+      };
+      content = this.$slots.default(props);
     }
     return vue.createVNode("div", {
-      "class": [this.ns.b(), this.ns.m(this.modelData.id), ...this.controller.containerClass, this.ns.is("hidden", !state.visible)]
+      "class": [this.ns.b(), this.ns.m(this.modelData.id), this.semanticClass("root"), ...this.controller.containerClass, this.ns.is("hidden", !state.visible)],
+      "style": this.semanticStyle("root")
     }, [content || (ibiz.env.dev ? ibiz.i18n.t("vue3Util.panelComponent.noProvidedSlot", {
       id: this.modelData.id
     }) : "")]);

package/lib/panel-component/panel-ctrl-view-page-caption/panel-ctrl-view-page-caption.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 require('../../use/index.cjs');
 require('./panel-ctrl-view-page-caption.css');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 const PanelCtrlViewPageCaption = /* @__PURE__ */ vue.defineComponent({
@@ -26,6 +27,10 @@ const PanelCtrlViewPageCaption = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = namespace.useNamespace("panel-ctrl-view-page-caption");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const classArr = vue.computed(() => {
       const {
         id
@@ -36,18 +41,22 @@ const PanelCtrlViewPageCaption = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      classArr
+      classArr,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     let editor = null;
     if (this.controller.data) {
       editor = vue.createVNode("span", {
-        "class": this.ns.b("content")
+        "class": [this.ns.b("content"), this.semanticClass("content")],
+        "style": this.semanticStyle("content")
       }, [this.controller.state.caption]);
     }
     return vue.createVNode("div", {
-      "class": this.classArr,
+      "class": [this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "onClick": (event) => this.controller.onClick(event)
     }, [editor]);
   }

package/lib/panel-component/panel-field/panel-field.cjs

@@ -6,6 +6,7 @@ var panelField_controller = require('./panel-field.controller.cjs');
 require('./panel-field.css');
 var tooltip = require('../../use/tooltip/tooltip.cjs');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 const PanelField = /* @__PURE__ */ vue.defineComponent({
@@ -35,12 +36,15 @@ const PanelField = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = namespace.useNamespace("panel-field");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const classArr = vue.computed(() => {
       const {
         id
       } = props.modelData;
       const result = [ns.b(), ns.m(id), ns.is("error", !!props.controller.state.error), ns.is("mob", window.Environment && window.Environment.isMob)];
-      result.push(...props.controller.containerClass);
       return result;
     });
     const onValueChange = (val, name) => {
@@ -57,7 +61,9 @@ const PanelField = /* @__PURE__ */ vue.defineComponent({
       ns,
       classArr,
       showTitle,
-      onValueChange
+      onValueChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -68,7 +74,8 @@ const PanelField = /* @__PURE__ */ vue.defineComponent({
         data: this.controller.data,
         controller: this.controller.editor,
         disabled: this.controller.state.disabled,
-        class: this.ns.b("content"),
+        class: [this.ns.b("content"), ibiz.config.common.enhancedUI === true ? this.controller.containerClass : "", this.semanticClass("content")],
+        style: [this.semanticStyle("content")],
         showTitle: this.showTitle,
         readonly: this.controller.state.readonly,
         onChange: this.onValueChange,
@@ -91,10 +98,12 @@ const PanelField = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return vue.withDirectives(vue.createVNode("div", {
-      "class": this.classArr,
+      "class": [this.classArr, ibiz.config.common.enhancedUI === false ? this.controller.containerClass : "", this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "onClick": (event) => this.controller.onClick(event)
     }, [editor, this.controller.state.error && vue.createVNode("div", {
-      "class": this.ns.e("error")
+      "class": [this.ns.e("error"), this.semanticClass("error")],
+      "style": this.semanticStyle("error")
     }, [this.controller.state.error])]), [[vue.resolveDirective("tooltip"), tooltip.renderTooltip(this.controller.data, this.controller.model, this.controller.panel)]]);
   }
 });

package/lib/panel-component/panel-item-render/panel-item-render.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 require('../../use/index.cjs');
 var panelItemRender_controller = require('./panel-item-render.controller.cjs');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 const PanelItemRender = /* @__PURE__ */ vue.defineComponent({
@@ -27,6 +28,10 @@ const PanelItemRender = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     var _a;
     const ns = namespace.useNamespace("panel-item-render");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const nsType = namespace.useNamespace("panel-".concat((_a = props.modelData.itemType) == null ? void 0 : _a.toLowerCase()));
     const {
       id
@@ -41,12 +46,15 @@ const PanelItemRender = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       classArr,
-      htmlCode
+      htmlCode,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     return vue.createVNode("div", {
-      "class": this.classArr,
+      "class": [this.classArr, this.semanticClass("content")],
+      "style": this.semanticStyle("content"),
       "innerHTML": this.htmlCode,
       "onClick": (event) => this.controller.onClick(event)
     }, null);

package/lib/panel-component/panel-rawitem/panel-rawitem.cjs

@@ -5,6 +5,7 @@ require('../../use/index.cjs');
 var panelRawitem_controller = require('./panel-rawitem.controller.cjs');
 require('./panel-rawitem.css');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 const PanelRawItem = /* @__PURE__ */ vue.defineComponent({
@@ -28,6 +29,10 @@ const PanelRawItem = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = namespace.useNamespace("panel-rawitem");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(c);
     const content = vue.ref("");
     const tempStyle = vue.ref("");
     const {
@@ -41,7 +46,6 @@ const PanelRawItem = /* @__PURE__ */ vue.defineComponent({
         id
       } = props.modelData;
       const result = [ns.b(), ns.m(id)];
-      result.push(...props.controller.containerClass);
       return result;
     });
     vue.watch(() => c.data, async (newVal) => {
@@ -75,17 +79,21 @@ const PanelRawItem = /* @__PURE__ */ vue.defineComponent({
       ns,
       classArr,
       tempStyle,
-      content
+      content,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     if (!this.controller.state.visible)
       return;
     return vue.createVNode("div", {
-      "class": this.classArr,
-      "style": this.tempStyle,
+      "class": [this.classArr, ibiz.config.common.enhancedUI === false ? this.controller.containerClass : "", this.semanticClass("root")],
+      "style": [ibiz.config.common.enhancedUI === false ? this.tempStyle : "", this.semanticStyle("root")],
       "onClick": (event) => this.controller.onClick(event)
     }, [vue.createVNode(vue.resolveComponent("iBizRawItem"), {
+      "class": [ibiz.config.common.enhancedUI === true ? this.controller.containerClass : "", this.semanticClass("content")],
+      "style": [ibiz.config.common.enhancedUI === true ? this.tempStyle : "", this.semanticStyle("content")],
       "rawItem": this.modelData,
       "content": this.content
     }, null)]);

package/lib/panel-component/panel-tab-page/panel-tab-page.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 var runtime = require('@ibiz-template/runtime');
 require('../../use/index.cjs');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 function _isSlot(s) {
@@ -30,6 +31,10 @@ const PanelTabPage = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = namespace.useNamespace("panel-tab-page");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const classArr = vue.computed(() => {
       const {
         id
@@ -40,7 +45,9 @@ const PanelTabPage = /* @__PURE__ */ vue.defineComponent({
     });
     return {
       ns,
-      classArr
+      classArr,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -48,7 +55,8 @@ const PanelTabPage = /* @__PURE__ */ vue.defineComponent({
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     return vue.withDirectives(vue.createVNode(vue.resolveComponent("iBizRow"), {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.classArr],
+      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "layout": this.modelData.layout,
       "element-loading-text": this.controller.state.loadingText
     }, _isSlot(_slot = defaultSlots.map((slot) => {
@@ -58,6 +66,12 @@ const PanelTabPage = /* @__PURE__ */ vue.defineComponent({
       }
       const c = props.controller;
       return vue.createVNode(vue.resolveComponent("iBizCol"), {
+        "class": this.semanticClass("item", {
+          props
+        }),
+        "style": this.semanticStyle("item", {
+          props
+        }),
         "layoutPos": c.model.layoutPos,
         "state": c.state
       }, _isSlot(slot) ? slot : {

package/lib/panel-component/scroll-container/scroll-container/scroll-container.cjs

@@ -5,6 +5,7 @@ require('../../../use/index.cjs');
 var scrollContainer_controller = require('./scroll-container.controller.cjs');
 require('./scroll-container.css');
 var namespace = require('../../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 const ScrollContainer = /* @__PURE__ */ vue.defineComponent({
@@ -30,13 +31,19 @@ const ScrollContainer = /* @__PURE__ */ vue.defineComponent({
     const {
       id
     } = props.modelData;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const classArr = vue.computed(() => {
       const result = [ns.b(), ns.m(id), ...props.controller.containerClass, ns.is("hidden", !props.controller.state.visible)];
       return result;
     });
     return {
       ns,
-      classArr
+      classArr,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -98,24 +105,27 @@ const ScrollContainer = /* @__PURE__ */ vue.defineComponent({
       }
     }
     return vue.withDirectives(vue.createVNode("div", {
-      "class": this.classArr,
+      "class": [this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "element-loading-text": this.controller.state.loadingText
     }, [vue.createVNode("div", {
-      "class": [this.ns.e("header")],
-      "style": slotStylle.top
+      "class": [this.ns.e("header"), this.semanticClass("header")],
+      "style": [slotStylle.top, this.semanticStyle("header")]
     }, [top]), vue.createVNode("div", {
-      "class": [this.ns.b("content")]
+      "class": [this.ns.b("content"), this.semanticClass("content")],
+      "style": this.semanticStyle("content")
     }, [vue.createVNode("div", {
-      "class": this.ns.be("content", "left"),
-      "style": slotStylle.left
+      "class": [this.ns.be("content", "left"), this.semanticClass("left")],
+      "style": [slotStylle.left, this.semanticStyle("left")]
     }, [left]), vue.createVNode("div", {
-      "class": this.ns.be("content", "center")
+      "class": [this.ns.be("content", "center"), this.semanticClass("center")],
+      "style": this.semanticStyle("center")
     }, [center]), vue.createVNode("div", {
-      "class": this.ns.be("content", "right"),
-      "style": slotStylle.right
+      "class": [this.ns.be("content", "right"), this.semanticClass("right")],
+      "style": [slotStylle.right, this.semanticStyle("right")]
     }, [right])]), vue.createVNode("div", {
-      "class": [this.ns.e("footer")],
-      "style": slotStylle.bottom
+      "class": [this.ns.e("footer"), this.semanticClass("footer")],
+      "style": [slotStylle.bottom, this.semanticStyle("footer")]
     }, [bottom])]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);
   }
 });

package/lib/panel-component/scroll-container/scroll-container-item/scroll-container-item.cjs

@@ -5,6 +5,7 @@ require('../../../use/index.cjs');
 var scrollContainerItem_controller = require('./scroll-container-item.controller.cjs');
 require('./scroll-container-item.css');
 var namespace = require('../../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 function _isSlot(s) {
@@ -33,13 +34,19 @@ const ScrollContainerItem = /* @__PURE__ */ vue.defineComponent({
     const {
       id
     } = props.modelData;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const classArr = vue.computed(() => {
       const result = [ns.b(), ns.m(id), ns.is("hidden", !props.controller.state.visible)];
       return result;
     });
     return {
       ns,
-      classArr
+      classArr,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -47,7 +54,8 @@ const ScrollContainerItem = /* @__PURE__ */ vue.defineComponent({
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     return vue.withDirectives(vue.createVNode(vue.resolveComponent("iBizRow"), {
-      "class": this.classArr,
+      "class": [this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
       "layout": {
         layout: "FLEX"
       },
@@ -59,6 +67,12 @@ const ScrollContainerItem = /* @__PURE__ */ vue.defineComponent({
       }
       props.modelData.layoutPos.layout = "FLEX";
       return vue.createVNode(vue.resolveComponent("iBizCol"), {
+        "class": this.semanticClass("item", {
+          props
+        }),
+        "style": this.semanticStyle("item", {
+          props
+        }),
         "layoutPos": props.modelData.layoutPos,
         "state": props.controller.state
       }, _isSlot(slot) ? slot : {