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

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/form-mdctrl-repeater.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, createVNode } from 'vue';
 import { FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { RepeaterSingleForm } from './repeater-single-form/repeater-single-form.mjs';
 import { RepeaterMultiForm } from './repeater-multi-form/repeater-multi-form.mjs';
 import { RepeaterGrid } from './repeater-grid/repeater-grid.mjs';
@@ -17,21 +17,29 @@ const FormMDCtrlRepeater = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const ns = useNamespace("form-mdctrl-repeater");
+    const {
+      semanticClass,
+      semanticStyle
+    } = 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 createVNode(RepeaterMultiForm, {
           "class": classNames,
+          "style": style,
           "onChange": this.onDataChange,
           "controller": this.controller
         }, null);
@@ -40,25 +48,29 @@ const FormMDCtrlRepeater = /* @__PURE__ */ defineComponent({
         if (gridStyle === "style2") {
           return createVNode(RepeaterGrid2, {
             "class": classNames,
+            "style": style,
             "controller": this.controller,
             "onChange": this.onDataChange
           }, null);
         }
         return createVNode(RepeaterGrid, {
           "class": classNames,
+          "style": style,
           "controller": this.controller,
           "onChange": this.onDataChange
         }, null);
       case "SingleForm":
         return createVNode(RepeaterSingleForm, {
           "class": classNames,
+          "style": style,
           "data": this.controller.value,
           "controller": this.controller,
           "onChange": this.onDataChange
         }, null);
       default:
         return createVNode("div", {
-          "class": classNames
+          "class": classNames,
+          "style": style
         }, [ibiz.i18n.t("control.form.formMDctrlRepeater.noSupportStyle", {
           repeaterStyle: this.controller.repeaterStyle
         })]);

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.css

@@ -1 +1 @@
-.ibiz-repeater-grid{position:relative;width:100%;--ibiz-grid-column-justify-content:center}.ibiz-repeater-grid__add-btn{position:absolute;top:0;right:0;z-index:2}.ibiz-repeater-grid__drag-icon{cursor:move}.ibiz-repeater-grid__sortable-ghost{opacity:.5}.ibiz-repeater-grid .el-table__row{height:57px}.ibiz-repeater-grid .el-table__cell:has(.is-editor-content-fixed){z-index:calc(var(--el-table-index) + 1)}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__text:last-child{display:none}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__remove{display:inline}.ibiz-repeater-grid .ibiz-repeater-grid-index__remove.el-button.el-button--danger{--el-button-text-color:var(--ibiz-color-danger)}.ibiz-repeater-grid-index .cell{padding:var(--ibiz-spacing-extra-tight)}.ibiz-repeater-grid-index__remove{display:none}
+.ibiz-repeater-grid{--ibiz-repeater-grid-remove-color:var(--ibiz-color-danger);--ibiz-repeater-grid-cell-padding:var(--ibiz-spacing-extra-tight);--ibiz-repeater-grid-row-height:57px;position:relative;width:100%;--ibiz-grid-column-justify-content:center}.ibiz-repeater-grid__add-btn{position:absolute;top:0;right:0;z-index:2}.ibiz-repeater-grid__drag-icon{cursor:move}.ibiz-repeater-grid__sortable-ghost{opacity:.5}.ibiz-repeater-grid .el-table__row{height:var(--ibiz-repeater-grid-row-height)}.ibiz-repeater-grid .el-table__cell:has(.is-editor-content-fixed){z-index:calc(var(--el-table-index) + 1)}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__text:last-child{display:none}.ibiz-repeater-grid .el-table__row:hover .ibiz-repeater-grid-index__remove{display:inline}.ibiz-repeater-grid .ibiz-repeater-grid-index__remove.el-button.el-button--danger{--el-button-text-color:var(--ibiz-repeater-grid-remove-color)}.ibiz-repeater-grid-index .cell{padding:var(--ibiz-repeater-grid-cell-padding)}.ibiz-repeater-grid-index__remove{display:none}

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.mjs

@@ -2,7 +2,7 @@ import { isVNode, defineComponent, createVNode, resolveComponent, mergeProps, wi
 import Sortable from '../../../../../../node_modules/.pnpm/sortablejs@1.15.6/node_modules/sortablejs/modular/sortable.esm.mjs';
 import { EditFormController, ControlVO, FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
-import { useNamespace, useCtx } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode, useCtx } from '@ibiz-template/vue3-util';
 import { recursiveIterate, showTitle } from '@ibiz-template/core';
 import { useLoadMore } from '../form-mdctrl-repeater.util.mjs';
 import './repeater-grid.css';
@@ -36,6 +36,10 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
       loadMore,
       updateTotalItems
     } = useLoadMore(props.controller.value, chunkSize);
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.form);
     recursiveIterate(props.controller.repeatedForm, (item) => {
       var _a2;
       if (item.detailType === "FORMITEM") {
@@ -140,7 +144,8 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
             return createVNode(resolveComponent("el-button"), {
               "text": true,
               "type": "danger",
-              "class": [ns.be("index", "remove")]
+              "style": semanticStyle("button", props.controller, "remove"),
+              "class": [ns.be("index", "remove"), semanticClass("button", props.controller, "remove")]
             }, _isSlot(_slot = ibiz.i18n.t("app.delete")) ? _slot : {
               default: () => [_slot]
             });
@@ -150,7 +155,8 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
       return createVNode(resolveComponent("el-button"), {
         "text": true,
         "type": "danger",
-        "class": [ns.be("index", "remove")],
+        "class": [ns.be("index", "remove"), semanticClass("repeater.button", props.controller, "remove")],
+        "style": semanticStyle("repeater.button", props.controller, "remove"),
         "onClick": () => props.controller.remove(index)
       }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
         default: () => [_slot2]
@@ -164,20 +170,30 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
       renderItems,
       formControllers,
       renderRemoveBtn,
-      loadMore
+      loadMore,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     var _a;
     let _slot3;
-    const tableHeight = (_a = this.controller.model.layoutPos) == null ? void 0 : _a.height;
+    let tableHeight = (_a = this.controller.model.layoutPos) == null ? void 0 : _a.height;
+    if (tableHeight) {
+      if (tableHeight > 0 && tableHeight <= 1) {
+        tableHeight = "".concat(tableHeight * 100, "%");
+      } else {
+        tableHeight = "".concat(tableHeight, "px");
+      }
+    }
     const heightObject = tableHeight ? {
       height: tableHeight
     } : {};
     return createVNode("div", {
       "class": this.ns.b()
     }, [this.controller.enableCreate && createVNode(resolveComponent("el-button"), {
-      "class": this.ns.e("add-btn"),
+      "class": [this.ns.e("add-btn"), this.semanticClass("repeater.button", this.controller, "create")],
+      "style": this.semanticStyle("repeater.button", this.controller, "create"),
       "onClick": () => {
         this.controller.create();
       }
@@ -187,7 +203,8 @@ const RepeaterGrid = /* @__PURE__ */ defineComponent({
       "ref": "tableRef",
       "key": this.tableKey,
       "show-header": true,
-      "class": this.ns.e("table"),
+      "class": [this.ns.e("table"), this.semanticClass("repeater.grid", this.controller)],
+      "style": this.semanticStyle("repeater.grid", this.controller),
       "data": this.renderItems,
       "cell-class-name": ({
         columnIndex

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid2/repeater-grid2.mjs

@@ -2,7 +2,7 @@ import { isVNode, defineComponent, createVNode, resolveComponent, mergeProps, wi
 import Sortable from '../../../../../../node_modules/.pnpm/sortablejs@1.15.6/node_modules/sortablejs/modular/sortable.esm.mjs';
 import { EditFormController, ControlVO, FormMDCtrlRepeaterController } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
-import { useNamespace, useCtx } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode, useCtx } from '@ibiz-template/vue3-util';
 import { recursiveIterate } from '@ibiz-template/core';
 import { useLoadMore } from '../form-mdctrl-repeater.util.mjs';
 import './repeater-grid2.css';
@@ -36,6 +36,10 @@ const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
       loadMore,
       updateTotalItems
     } = useLoadMore(props.controller.value, chunkSize);
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.form);
     recursiveIterate(props.controller.repeatedForm, (item) => {
       var _a2;
       if (item.detailType === "FORMITEM") {
@@ -131,7 +135,8 @@ const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
             return createVNode("ion-icon", {
               "name": "remove-outline",
               "title": ibiz.i18n.t("app.delete"),
-              "class": ns.b("remove-btn")
+              "class": [ns.b("remove-btn"), semanticClass("repeater.button", props.controller, "remove")],
+              "style": semanticStyle("repeater.button", props.controller, "remove")
             }, null);
           }
         });
@@ -139,7 +144,8 @@ const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
       return createVNode("ion-icon", {
         "name": "remove-outline",
         "title": ibiz.i18n.t("app.delete"),
-        "class": ns.b("remove-btn"),
+        "class": [ns.b("remove-btn"), semanticClass("repeater.button", props.controller, "remove")],
+        "style": semanticStyle("repeater.button", props.controller, "remove"),
         "onClick": () => {
           props.controller.remove(index);
           formControllers.splice(index, 1);
@@ -154,7 +160,9 @@ const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
       renderItems,
       formControllers,
       renderRemoveBtn,
-      loadMore
+      loadMore,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -170,7 +178,8 @@ const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
       "ref": "tableRef",
       "key": this.tableKey,
       "show-header": true,
-      "class": this.ns.e("table"),
+      "class": [this.ns.e("table"), this.semanticClass("repeater.grid", this.controller)],
+      "style": this.semanticStyle("repeater.grid", this.controller),
       "data": isEmpty && this.controller.enableCreate ? [{}] : this.renderItems,
       "cell-class-name": ({
         columnIndex
@@ -289,7 +298,8 @@ const RepeaterGrid2 = /* @__PURE__ */ defineComponent({
             }, [this.controller.enableCreate && createVNode("ion-icon", {
               "name": "add-outline",
               "title": ibiz.i18n.t("app.add"),
-              "class": this.ns.b("add-btn"),
+              "class": [this.ns.b("add-btn"), this.semanticClass("repeater.button", this.controller, "create")],
+              "style": this.semanticStyle("repeater.button", this.controller, "create"),
               "onClick": () => {
                 this.controller.create(isEmpty ? 0 : $index + 1);
               }

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.mjs

@@ -43,6 +43,7 @@ const RepeaterMultiForm = /* @__PURE__ */ defineComponent({
       "class": this.ns.b(),
       "userStyle": userStyle,
       "items": items,
+      "controller": this.controller,
       "enableCreate": this.controller.enableCreate,
       "enableDelete": this.controller.enableDelete,
       "enableSort": this.controller.enableSort,

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-single-form/repeater-single-form.css

@@ -1 +1 @@
-.ibiz-repeater-single-form{--ibiz-repeater-single-form-header-height:32px;width:100%}.ibiz-repeater-single-form__content{width:100%}.ibiz-repeater-single-form-header{height:var(--ibiz-repeater-single-form-header-height)}
+.ibiz-repeater-single-form{--ibiz-repeater-form-header-height:32px;width:100%}.ibiz-repeater-single-form__content{width:100%}.ibiz-repeater-single-form-header{height:var(--ibiz-repeater-form-header-height)}

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

@@ -1 +1 @@
-.ibiz-form-mdctrl{--ibiz-form-mdctrl-header-height:49px}.ibiz-form-mdctrl__toolbar{display:flex;justify-content:flex-end;width:50%}.ibiz-form-mdctrl__title{width:50%;font-size:var(--ibiz-font-size-header-5);font-weight:var(--ibiz-font-weight-bold)}.ibiz-form-mdctrl-header{display:flex;place-content:center space-between;align-items:center;height:var(--ibiz-form-mdctrl-header-height);padding:var(--ibiz-spacing-base-tight) 0;margin:calc(var(--ibiz-spacing-base-tight)/ 2) var(--ibiz-spacing-base-tight);line-height:var(--ibiz-form-mdctrl-header-height);border-bottom:1px solid var(--ibiz-color-border)}.ibiz-form-mdctrl-preview-content{display:flex;align-items:center;justify-content:center;min-height:100px;margin:var(--ibiz-spacing-tight);box-shadow:0 0 0 1px var(--ibiz-color-border) inset}
+.ibiz-form-mdctrl{--ibiz-form-mdctrl-font-size:var(--ibiz-font-size-header-5);--ibiz-form-mdctrl-font-weight:var(--ibiz-font-weight-bold);--ibiz-form-mdctrl-button-gap:var(--ibiz-spacing-tight);--ibiz-form-mdctrl-button-width:80px}.ibiz-form-mdctrl__toolbar{display:flex;justify-content:flex-end;width:50%}.ibiz-form-mdctrl__title{width:50%;font-size:var(--ibiz-form-mdctrl-font-size);font-weight:var(--ibiz-form-mdctrl-font-weight)}.ibiz-form-mdctrl-header{--ibiz-form-mdctrl-header-height:49px;--ibiz-form-mdctrl-header-padding:var(--ibiz-spacing-base-tight) 0;--ibiz-form-mdctrl-header-margin:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-tight);--ibiz-form-mdctrl-header-border-color:var(--ibiz-color-border);display:flex;place-content:center space-between;align-items:center;height:var(--ibiz-form-mdctrl-header-height);padding:var(--ibiz-form-mdctrl-header-padding);margin:var(--ibiz-form-mdctrl-header-margin);line-height:var(--ibiz-form-mdctrl-header-height);border-bottom:1px solid var(--ibiz-form-mdctrl-header-border-color)}.ibiz-form-mdctrl-preview-content{display:flex;align-items:center;justify-content:center;min-height:100px;margin:var(--ibiz-spacing-tight);box-shadow:0 0 0 1px var(--ibiz-color-border) inset}

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

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode, resolveComponent } from 'vue';
-import { useNamespace, useController } from '@ibiz-template/vue3-util';
+import { useNamespace, useController, useSemanticNode } from '@ibiz-template/vue3-util';
 import { FormMDCtrlController } from '@ibiz-template/runtime';
 import './form-mdctrl.css';
 
@@ -20,6 +20,10 @@ const FormMDCtrl = /* @__PURE__ */ defineComponent({
     var _a;
     const ns = useNamespace("form-mdctrl");
     useController(props.controller);
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.form);
     const c = props.controller;
     const zIndex = props.controller.form.state.zIndex;
     const hasCaption = c.model.showCaption && !!c.model.caption;
@@ -35,7 +39,9 @@ const FormMDCtrl = /* @__PURE__ */ defineComponent({
       hasHeader,
       hasCaption,
       isDesignPreview,
-      onActionClick
+      onActionClick,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -75,12 +81,15 @@ const FormMDCtrl = /* @__PURE__ */ defineComponent({
     return createVNode("div", {
       "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass, this.hasCaption ? this.ns.m("show-caption") : ""]
     }, [this.hasHeader && createVNode("div", {
-      "class": this.ns.b("header")
+      "class": [this.ns.b("header"), this.semanticClass("mdctrl.header", this.controller)],
+      "style": this.semanticStyle("mdctrl.header", this.controller)
     }, [createVNode("div", {
-      "class": this.ns.e("title")
+      "class": [this.ns.b("title"), this.semanticClass("mdctrl.title", this.controller)],
+      "style": this.semanticStyle("mdctrl.title", this.controller)
     }, [this.hasCaption ? this.c.model.caption : ""]), model.uiactionGroup && createVNode(resolveComponent("iBizActionToolbar"), {
       "zIndex": this.zIndex,
-      "class": this.ns.e("toolbar"),
+      "class": [this.ns.b("toolbar"), this.semanticClass("mdctrl.toolbar", this.controller)],
+      "style": this.semanticStyle("mdctrl.toolbar", this.controller),
       "action-details": model.uiactionGroup.uiactionGroupDetails,
       "actions-state": this.controller.state.actionGroupState,
       "onActionClick": this.onActionClick

package/es/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.css

@@ -1 +1 @@
-.ibiz-mdctrl-container-item{--ibiz-mdctrl-container-item-drag-chosen-color:rgba(var(--ibiz-grey-1), 1);display:flex}.ibiz-mdctrl-container-item__form{flex-grow:1}.ibiz-mdctrl-container-item__left{flex-shrink:0}.ibiz-mdctrl-container-item__right{flex-shrink:0;width:60px;margin-left:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-item__icon-drag{display:flex;align-items:center;min-height:var(--ibiz-height-control-default);max-height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-tight);cursor:move}.ibiz-mdctrl-container-item__icon-drag>svg{display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base);height:var(--ibiz-spacing-base);fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container-item.is-drag-chosen{background-color:var(--ibiz-mdctrl-container-item-drag-chosen-color)}.ibiz-mdctrl-container-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-mdctrl-container-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-no-data{width:100%;display:flex;justify-content:flex-end}.ibiz-mdctrl-container-style2-item-actions{flex:1;width:100%}.ibiz-mdctrl-container-style2-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-style2-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-style2-item-actions__create{width:100%;color:var(--ibiz-color-primary);background-color:transparent;border:1px dashed var(--ibiz-color-border);border-width:1px!important}.ibiz-mdctrl-container-style2-item-actions__create ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-mdctrl-container-style2-item-actions__create:focus{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__create:hover{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__remove{font-size:var(--ibiz-font-size-heder-6)}
+.ibiz-mdctrl-container-item{--ibiz-mdctrl-item-drag-chosen-color:rgba(var(--ibiz-grey-1), 1);--ibiz-mdctrl-button-width:60px;--ibiz-mdctrl-button-gap:var(--ibiz-spacing-tight);display:flex}.ibiz-mdctrl-container-item__form{flex-grow:1}.ibiz-mdctrl-container-item__left{flex-shrink:0}.ibiz-mdctrl-container-item__right{flex-shrink:0;width:var(--ibiz-mdctrl-button-width);margin-left:var(--ibiz-mdctrl-button-gap)}.ibiz-mdctrl-container-item__icon-drag{display:flex;align-items:center;min-height:var(--ibiz-height-control-default);max-height:var(--ibiz-height-control-default);margin-top:var(--ibiz-spacing-tight);cursor:move}.ibiz-mdctrl-container-item__icon-drag>svg{display:flex;align-items:center;justify-content:center;width:var(--ibiz-spacing-base);height:var(--ibiz-spacing-base);fill:var(--ibiz-color-text-3)}.ibiz-mdctrl-container-item.is-drag-chosen{background-color:var(--ibiz-mdctrl-item-drag-chosen-color)}.ibiz-mdctrl-container-item-actions{flex-shrink:0;width:80px;text-align:center}.ibiz-mdctrl-container-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-no-data{width:100%;display:flex;justify-content:flex-end}.ibiz-mdctrl-container-style2-item-actions{flex:1;width:100%}.ibiz-mdctrl-container-style2-item-actions .el-button+.el-button{margin-left:var(--ibiz-spacing-none)}.ibiz-mdctrl-container-style2-item-actions__btn{margin-top:var(--ibiz-spacing-tight)}.ibiz-mdctrl-container-style2-item-actions__create{width:100%;color:var(--ibiz-color-primary);background-color:transparent;border:1px dashed var(--ibiz-color-border);border-width:1px!important}.ibiz-mdctrl-container-style2-item-actions__create ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-mdctrl-container-style2-item-actions__create:focus{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__create:hover{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-mdctrl-container-style2-item-actions__remove{font-size:var(--ibiz-font-size-heder-6)}

package/es/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.mjs

@@ -1,8 +1,9 @@
 import { isVNode, defineComponent, createVNode, computed, resolveComponent } from 'vue';
 import draggable from 'vuedraggable';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import './mdctrl-container.css';
 import { showTitle } from '@ibiz-template/core';
+import { FormMDCtrlController } from '@ibiz-template/runtime';
 
 "use strict";
 function _isSlot(s) {
@@ -32,6 +33,10 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
     enableSort: {
       type: Boolean,
       required: false
+    },
+    controller: {
+      type: FormMDCtrlController,
+      required: true
     }
   },
   emits: {
@@ -44,6 +49,10 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
     slots
   }) {
     const ns = useNamespace("mdctrl-container");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.form);
     const dragClssName = ns.be("item", "icon-drag");
     const showActions = computed(() => {
       return props.enableCreate || props.enableDelete;
@@ -80,7 +89,8 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
     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": () => emit("addClick")
       }, _isSlot(_slot = ibiz.i18n.t("app.add")) ? _slot : {
         default: () => [_slot]
@@ -101,7 +111,8 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
             let _slot2;
             return createVNode(resolveComponent("el-button"), {
               "type": "danger",
-              "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")]
+              "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+              "style": semanticStyle("mdctrl.button", props.controller, "remove")
             }, _isSlot(_slot2 = ibiz.i18n.t("app.delete")) ? _slot2 : {
               default: () => [_slot2]
             });
@@ -110,7 +121,8 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
       }
       return createVNode(resolveComponent("el-button"), {
         "type": "danger",
-        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")],
+        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+        "style": semanticStyle("mdctrl.button", props.controller, "remove"),
         "onClick": () => emit("removeClick", item, index)
       }, _isSlot(_slot3 = ibiz.i18n.t("app.delete")) ? _slot3 : {
         default: () => [_slot3]
@@ -118,7 +130,8 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
     };
     const renderStyle2AddBtn = () => {
       return createVNode(resolveComponent("el-button"), {
-        "class": [ns.be("style2-item-actions", "create"), ns.be("style2-item-actions", "btn")],
+        "class": [ns.be("style2-item-actions", "create"), ns.be("style2-item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "create")],
+        "style": semanticStyle("mdctrl.button", props.controller, "create"),
         "title": ibiz.i18n.t("app.add"),
         "onClick": () => emit("addClick")
       }, {
@@ -141,7 +154,8 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
           reference: () => {
             return createVNode(resolveComponent("el-button"), {
               "type": "danger",
-              "class": [ns.be("style2-item-actions", "remove"), ns.be("style2-item-actions", "btn")],
+              "class": [ns.be("style2-item-actions", "remove"), ns.be("style2-item-actions", "btn"), semanticClass("mdctrl.button", props.controller, "remove")],
+              "style": semanticStyle("mdctrl.button", props.controller, "remove"),
               "title": ibiz.i18n.t("app.delete")
             }, {
               default: () => [createVNode("ion-icon", {
@@ -153,7 +167,8 @@ const MDCtrlContainer = /* @__PURE__ */ defineComponent({
       }
       return createVNode(resolveComponent("el-button"), {
         "type": "danger",
-        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn")],
+        "class": [ns.be("item-actions", "remove"), ns.be("item-actions", "btn"), semanticClass("button", props.controller, "remove")],
+        "style": semanticStyle("button", props.controller, "remove"),
         "onClick": () => emit("removeClick", item, index)
       }, _isSlot(_slot4 = ibiz.i18n.t("app.delete")) ? _slot4 : {
         default: () => [_slot4]

package/es/control/form/form-detail/form-mdctrl/mdctrl-container2/mdctrl-container2.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, createVNode, ref, watch, onMounted, onUnmounted } from 'vue';
 import { FormMDCtrlFormController } from '@ibiz-template/runtime';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import draggable from 'vuedraggable';
 import './mdctrl-container2.css';
 import { showTitle } from '@ibiz-template/core';
@@ -24,6 +24,10 @@ const MDCtrlContainer2 = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const ns = useNamespace("mdctrl-container2");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.form);
     const currentItem = ref("");
     watch(() => props.items, () => {
       var _a;
@@ -124,7 +128,9 @@ const MDCtrlContainer2 = /* @__PURE__ */ defineComponent({
       handleRemove,
       handleArrowClick,
       handleDragStart,
-      handleDragEnd
+      handleDragEnd,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -158,7 +164,8 @@ const MDCtrlContainer2 = /* @__PURE__ */ defineComponent({
         }, [dragIcon()]), createVNode("div", {
           "class": this.ns.be("header-item", "text")
         }, [element.title]), this.controller.enableDelete && createVNode("div", {
-          "class": this.ns.be("header-item", "btn"),
+          "class": [this.ns.be("header-item", "btn"), this.semanticClass("mdctrl.button", this.controller, "remove")],
+          "style": this.semanticStyle("mdctrl.button", this.controller, "remove"),
           "title": showTitle(ibiz.i18n.t("app.delete")),
           "onClick": (e) => {
             this.handleRemove(e, element);
@@ -167,7 +174,8 @@ const MDCtrlContainer2 = /* @__PURE__ */ defineComponent({
       },
       footer: () => {
         return [this.controller.enableCreate && createVNode("div", {
-          "class": [this.ns.b("header-item"), !this.isShowBorder && this.ns.bm("header-item", "hidden-border")],
+          "class": [this.ns.b("header-item"), this.semanticClass("mdctrl.button", this.controller, "create"), !this.isShowBorder && this.ns.bm("header-item", "hidden-border")],
+          "style": this.semanticStyle("mdctrl.button", this.controller, "create"),
           "onClick": (e) => {
             this.handleAdd(e);
           }

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

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import './form-page.css';
 
 "use strict";
@@ -20,6 +20,10 @@ const FormPage = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const ns = useNamespace("form-page");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller);
     let position = "top";
     if (props.modelData.tabHeaderPos) {
       position = props.modelData.tabHeaderPos.toLowerCase();
@@ -30,7 +34,9 @@ const FormPage = /* @__PURE__ */ defineComponent({
     return {
       ns,
       position,
-      onTabChange
+      onTabChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -42,11 +48,13 @@ const FormPage = /* @__PURE__ */ defineComponent({
     const defaultSlots = ((_c = (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)[0]) == null ? void 0 : _c.children) || [];
     if (defaultSlots.length === 1 || noTabHeader) {
       return createVNode("div", {
-        "class": [this.ns.b(), this.ns.m("no-tab-header")]
+        "class": [this.ns.b(), this.semanticClass("page"), this.ns.m("no-tab-header")],
+        "style": this.semanticStyle("page")
       }, [defaultSlots]);
     }
     return createVNode(resolveComponent("el-tabs"), {
-      "class": [this.ns.b(), this.ns.b("tab"), this.ns.e(this.position)],
+      "class": [this.ns.b(), this.ns.b("tab"), this.semanticClass("page", this.controller), this.ns.e(this.position)],
+      "style": this.semanticStyle("page", this.controller),
       "model-value": (_d = defaultSlots[0]) == null ? void 0 : _d.key,
       "tab-position": this.position,
       "onTabChange": this.onTabChange
@@ -60,14 +68,16 @@ const FormPage = /* @__PURE__ */ defineComponent({
         return null;
       }
       return createVNode(resolveComponent("el-tab-pane"), {
-        "class": this.ns.b("tab-item"),
+        "class": [this.ns.b("tab-item"), this.semanticClass("page.item", this.controller)],
         "name": c.model.id,
+        "style": this.semanticStyle("page.item", this.controller),
         "lazy": true
       }, {
         default: () => slot,
         label: () => {
           return createVNode("span", {
-            "class": c.labelClass
+            "class": [c.labelClass, this.ns.b("tab-label"), this.semanticClass("page.label", this.controller)],
+            "style": this.semanticStyle("page.label", this.controller)
           }, [c.model.sysImage ? createVNode(resolveComponent("iBizIcon"), {
             "icon": c.model.sysImage
           }, null) : null, c.model.caption]);

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

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, createVNode, resolveComponent, ref, computed, watch } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode } from '@ibiz-template/vue3-util';
 import { FormRawItemController } from '@ibiz-template/runtime';
 import './form-rawitem.css';
 
@@ -23,6 +23,10 @@ const FormRawItem = /* @__PURE__ */ defineComponent({
     var _a;
     const ns = useNamespace("form-raw-item");
     const c = props.controller;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(c.form);
     const content = ref("");
     const showFormDefaultContent = computed(() => {
       if (props.controller.form.controlParams && props.controller.form.controlParams.editmode === "hover") {
@@ -183,11 +187,13 @@ const FormRawItem = /* @__PURE__ */ defineComponent({
       content,
       showFormDefaultContent,
       isDesignPreview,
-      renderPreviewContent
+      renderPreviewContent,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
-    var _a;
+    var _a, _b, _c, _d, _e;
     if (!this.controller.state.visible) {
       return null;
     }
@@ -201,11 +207,14 @@ const FormRawItem = /* @__PURE__ */ defineComponent({
     return createVNode(resolveComponent("iBizRawItem"), {
       "class": [
         this.ns.b(),
+        this.semanticClass("rawitem", this.controller),
+        this.semanticClass("rawitem.".concat((_b = (_a = this.modelData.rawItem) == null ? void 0 : _a.contentType) == null ? void 0 : _b.toLowerCase()), this.controller),
         ...this.controller.containerClass,
         this.ns.is("show-default", this.showFormDefaultContent),
         // 表单直接内容文本类型与直接内容类型应具备与标签相同样式
-        this.ns.is("form-text", ["TEXT", "RAW"].includes(((_a = this.modelData.rawItem) == null ? void 0 : _a.contentType) || ""))
+        this.ns.is("form-text", ["TEXT", "RAW"].includes(((_c = this.modelData.rawItem) == null ? void 0 : _c.contentType) || ""))
       ],
+      "style": [this.semanticStyle("rawitem", this.controller), this.semanticStyle("rawitem.".concat((_e = (_d = this.modelData.rawItem) == null ? void 0 : _d.contentType) == null ? void 0 : _e.toLowerCase()), this.controller)],
       "rawItem": this.modelData,
       "content": this.content,
       "onClick": (event) => this.controller.onClick(event)

package/es/control/form/form-detail/form-tab-page/form-tab-page.mjs

@@ -1,5 +1,5 @@
 import { isVNode, defineComponent, withDirectives, createVNode, resolveComponent, resolveDirective } from 'vue';
-import { useNamespace, useController } from '@ibiz-template/vue3-util';
+import { useNamespace, useSemanticNode, useController } from '@ibiz-template/vue3-util';
 import './form-tab-page.css';
 import { FormTabPageController } from '@ibiz-template/runtime';
 
@@ -21,9 +21,15 @@ const FormTabPage = /* @__PURE__ */ defineComponent({
   },
   setup(props) {
     const ns = useNamespace("form-tab-page");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode(props.controller.form);
     useController(props.controller);
     return {
-      ns
+      ns,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -31,7 +37,8 @@ const FormTabPage = /* @__PURE__ */ defineComponent({
     let _slot;
     const defaultSlots = ((_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)) || [];
     return withDirectives(createVNode(resolveComponent("iBizRow"), {
-      "class": [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
+      "class": [this.ns.b(), this.semanticClass("tabpage", this.controller), this.ns.m(this.modelData.codeName), ...this.controller.containerClass],
+      "style": this.semanticStyle("tabpage", this.controller),
       "layout": this.modelData.layout,
       "element-loading-text": this.controller.state.loadingText,
       "onClick": (event) => this.controller.onClick(event)