@ibiz-template/vue3-util 0.7.41-alpha.13 → 0.7.41-alpha.131

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("root"),
+          "style": this.semanticStyle("root")
+        }, 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/index.cjs

@@ -6,8 +6,6 @@ var runtime = require('@ibiz-template/runtime');
 require('../../util/index.cjs');
 var panelContainer = require('./panel-container.cjs');
 var panelContainer_provider = require('./panel-container.provider.cjs');
-var panelContainer_state = require('./panel-container.state.cjs');
-var panelContainer_controller = require('./panel-container.controller.cjs');
 var install = require('../../util/install.cjs');
 
 "use strict";
@@ -23,7 +21,13 @@ const IBizPanelContainer = install.withInstall(
   }
 );
 
-exports.PanelContainerState = panelContainer_state.PanelContainerState;
-exports.PanelContainerController = panelContainer_controller.PanelContainerController;
+Object.defineProperty(exports, "PanelContainerController", {
+  enumerable: true,
+  get: function () { return runtime.PanelContainerController; }
+});
+Object.defineProperty(exports, "PanelContainerState", {
+  enumerable: true,
+  get: function () { return runtime.PanelContainerState; }
+});
 exports.IBizPanelContainer = IBizPanelContainer;
 exports.default = IBizPanelContainer;

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

@@ -1,10 +1,11 @@
 'use strict';
 
 var vue = require('vue');
+var runtime = require('@ibiz-template/runtime');
 require('../../use/index.cjs');
-var panelContainer_controller = require('./panel-container.controller.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) {
@@ -24,7 +25,7 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
      * @description 面板容器控制器
      */
     controller: {
-      type: panelContainer_controller.PanelContainerController,
+      type: runtime.PanelContainerController,
       required: true
     }
   },
@@ -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]
       });
@@ -66,13 +81,18 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
     });
     const attrs = (_c = this.$attrs) == null ? void 0 : _c.attrs;
     if (attrs && attrs.dynamictooltip) {
-      return vue.createVNode(vue.resolveComponent("el-tooltip"), {
+      const attributes = {
+        ...attrs.dynamictooltip
+      };
+      delete attributes.content;
+      return vue.createVNode(vue.resolveComponent("el-tooltip"), vue.mergeProps({
         "placement": "right",
         "popper-class": this.ns.e("dynamic-tooltip")
-      }, {
+      }, 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();
             }
@@ -82,20 +102,21 @@ const PanelContainer = /* @__PURE__ */ vue.defineComponent({
         },
         content: () => {
           return vue.createVNode("div", {
-            "class": this.ns.e("dynamic-tooltip-content"),
-            "innerHTML": attrs.dynamictooltip
+            "class": [this.ns.e("dynamic-tooltip-content"), this.semanticClass("tooltip")],
+            "style": this.semanticStyle("tooltip"),
+            "innerHTML": attrs.dynamictooltip.content
           }, null);
         }
       });
     }
-    return vue.createVNode("div", {
-      "class": this.classArr,
-      "onClick": () => {
-        this.controller.onClick();
-      }
+    return vue.withDirectives(vue.createVNode("div", {
+      "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", {
       "type": "text/css"
-    }, [this.controller.model.cssStyle]) : null, content]);
+    }, [this.controller.model.cssStyle]) : null, content]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);
   }
 });
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var panelContainer_controller = require('./panel-container.controller.cjs');
+var runtime = require('@ibiz-template/runtime');
 
 "use strict";
 class PanelContainerProvider {
@@ -8,7 +8,7 @@ class PanelContainerProvider {
     this.component = "IBizPanelContainer";
   }
   async createController(panelItem, panel, parent) {
-    const c = new panelContainer_controller.PanelContainerController(panelItem, panel, parent);
+    const c = new runtime.PanelContainerController(panelItem, panel, parent);
     await c.init();
     return c;
   }

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,22 +89,27 @@ 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]
       });
     })) ? _slot : {
       default: () => [_slot]
     });
-    return vue.createVNode("div", {
-      "class": this.classArr,
-      "onClick": () => {
-        this.controller.onClick();
-      },
-      "style": this.backgroundStyle
+    return vue.withDirectives(vue.createVNode("div", {
+      "class": [this.classArr, this.semanticClass("root")],
+      "element-loading-text": this.controller.state.loadingText,
+      "onClick": (event) => this.controller.onClick(event),
+      "style": [this.backgroundStyle, this.semanticStyle("root")]
     }, [this.controller.model.cssStyle ? vue.createVNode("style", {
       "type": "text/css"
-    }, [this.controller.model.cssStyle]) : null, content]);
+    }, [this.controller.model.cssStyle]) : null, content]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);
   }
 });
 

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

@@ -4,7 +4,7 @@ var runtime = require('@ibiz-template/runtime');
 var panelContainerImage_state = require('./panel-container-image.state.cjs');
 
 "use strict";
-class PanelContainerImageController extends runtime.PanelItemController {
+class PanelContainerImageController extends runtime.PanelContainerController {
   createState() {
     var _a;
     return new panelContainerImage_state.PanelContainerImageState((_a = this.parent) == null ? void 0 : _a.state);

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

@@ -1 +1 @@
-.ibiz-panel-container-image{position:relative;width:100%;height:100%;background-repeat:no-repeat;background-position:center center}.ibiz-panel-container-image>.ibiz-row{height:100%;overflow-x:hidden;overflow-y:auto}.ibiz-panel-container-image.is-hidden{display:none}
+.ibiz-panel-container-image{position:relative;width:100%;height:100%;background-repeat:no-repeat;background-position:center center}.ibiz-panel-container-image>.ibiz-row{height:100%;overflow:hidden auto}.ibiz-panel-container-image.is-hidden{display:none}

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

@@ -3,7 +3,7 @@
 var runtime = require('@ibiz-template/runtime');
 
 "use strict";
-class PanelContainerImageState extends runtime.PanelItemState {
+class PanelContainerImageState extends runtime.PanelContainerState {
 }
 
 exports.PanelContainerImageState = PanelContainerImageState;

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

@@ -1,9 +1,9 @@
 'use strict';
 
+var runtime = require('@ibiz-template/runtime');
 var vue = require('vue');
 require('../../use/index.cjs');
 require('./panel-container-tabs.css');
-var panelContainer_controller = require('../panel-container/panel-container.controller.cjs');
 var namespace = require('../../use/namespace/namespace.cjs');
 
 "use strict";
@@ -21,7 +21,7 @@ const PanelContainerTabs = /* @__PURE__ */ vue.defineComponent({
      * @description 分页容器控制器
      */
     controller: {
-      type: panelContainer_controller.PanelContainerController,
+      type: runtime.PanelContainerController,
       required: true
     }
   },

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var panelContainer_controller = require('../panel-container/panel-container.controller.cjs');
+var runtime = require('@ibiz-template/runtime');
 
 "use strict";
 class PanelContainerTabsProvider {
@@ -8,7 +8,7 @@ class PanelContainerTabsProvider {
     this.component = "IBizPanelContainerTabs";
   }
   async createController(panelItem, panel, parent) {
-    const c = new panelContainer_controller.PanelContainerController(panelItem, panel, parent);
+    const c = new runtime.PanelContainerController(panelItem, panel, parent);
     await c.init();
     return c;
   }

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() {
@@ -45,7 +52,8 @@ const PanelCtrlPos = /* @__PURE__ */ vue.defineComponent({
       content = this.$slots.default();
     }
     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

@@ -2,7 +2,9 @@
 
 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({
@@ -25,31 +27,37 @@ 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
       } = props.modelData;
-      const result = [ns.b(), ns.m(id)];
+      const result = [ns.b(), ns.m(id), ns.is("mob", ibiz.env.isMob)];
       result.push(...props.controller.containerClass);
       return result;
     });
     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,
-      "onClick": () => {
-        this.controller.onClick();
-      }
+      "class": [this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
+      "onClick": (event) => this.controller.onClick(event)
     }, [editor]);
   }
 });

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

@@ -0,0 +1 @@
+.ibiz-panel-ctrl-view-page-caption.is-mob .ibiz-panel-ctrl-view-page-caption-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-view-page-caption-font-size);font-weight:var(--ibiz-view-page-caption-font-weight);line-height:var(--ibiz-view-page-caption-line-height);color:var(--ibiz-view-page-caption-color);text-align:var(--ibiz-view-page-caption-text-align)}

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

@@ -4,7 +4,9 @@ var vue = require('vue');
 require('../../use/index.cjs');
 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({
@@ -34,21 +36,34 @@ 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)];
-      result.push(...props.controller.containerClass);
+      const result = [ns.b(), ns.m(id), ns.is("error", !!props.controller.state.error), ns.is("mob", window.Environment && window.Environment.isMob)];
       return result;
     });
     const onValueChange = (val, name) => {
       props.controller.setDataValue(val, name);
     };
+    const showTitle = vue.computed(() => {
+      const {
+        controlRenders = [],
+        id
+      } = props.modelData;
+      return !controlRenders.some((renderItem) => renderItem.id === "".concat(id == null ? void 0 : id.toLowerCase(), "_tooltip"));
+    });
     return {
       ns,
       classArr,
-      onValueChange
+      showTitle,
+      onValueChange,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -59,7 +74,9 @@ 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,
         onFocus: (event) => this.controller.onFocus(event),
@@ -80,14 +97,14 @@ const PanelField = /* @__PURE__ */ vue.defineComponent({
         }, null);
       }
     }
-    return vue.createVNode("div", {
-      "class": this.classArr,
-      "onClick": () => {
-        this.controller.onClick();
-      }
+    return vue.withDirectives(vue.createVNode("div", {
+      "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")
-    }, [this.controller.state.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-field/panel-field.controller.cjs

@@ -4,7 +4,7 @@ var runtime = require('@ibiz-template/runtime');
 var panelField_state = require('./panel-field.state.cjs');
 
 "use strict";
-class PanelFieldController extends runtime.PanelItemController {
+const _PanelFieldController = class _PanelFieldController extends runtime.PanelItemController {
   constructor() {
     super(...arguments);
     /**
@@ -109,7 +109,10 @@ class PanelFieldController extends runtime.PanelItemController {
       this.state.readonly = ((_b = this.model.editor) == null ? void 0 : _b.readOnly) || false;
     }
     if (this.model.editor && this.model.editor.editorType !== "HIDDEN") {
-      this.editorProvider = await runtime.getEditorProvider(this.model.editor);
+      this.editorProvider = await runtime.getEditorProvider(
+        this.model.editor,
+        this.panel.model
+      );
       if (this.editorProvider) {
         this.editor = await this.editorProvider.createController(
           this.model.editor,
@@ -174,6 +177,37 @@ class PanelFieldController extends runtime.PanelItemController {
       event
     });
   }
-}
+  /**
+   * @description 点击事件
+   * @param {MouseEvent} [event]
+   * @memberof PanelFieldController
+   */
+  onClick(event) {
+    var _a;
+    if (ibiz.env.isMob) {
+      const disableEdit = this.state.readonly || this.state.disabled;
+      if (!disableEdit && ((_a = this.editor) == null ? void 0 : _a.model.editorType) && !_PanelFieldController.enableClickType.includes(
+        this.editor.model.editorType
+      )) {
+        event == null ? void 0 : event.stopPropagation();
+      }
+    }
+    super.onClick(event);
+  }
+};
+/**
+ * @description 可冒泡点击事件的编辑器类型
+ * @static
+ * @memberof PanelFieldController
+ */
+_PanelFieldController.enableClickType = [
+  "SPAN",
+  "SPAN_LINK",
+  "RAW",
+  "MOB2DBARCODEREADER",
+  "FIELD_CAROUSEL_PICTURE",
+  "FIELD_IMAGE_PICTURE_ONE"
+];
+let PanelFieldController = _PanelFieldController;
 
 exports.PanelFieldController = PanelFieldController;

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

@@ -1 +1 @@
-.ibiz-panel-field{--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);width:100%;height:100%;position:relative}.ibiz-panel-field__error{left:0;top:100%;line-height:1;font-size:var(--ibiz-font-size-small);padding-top:var(--ibiz-spacing-super-tight);position:absolute;color:var(--ibiz-color-danger)}.ibiz-panel-field.is-error .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-color-danger) inset}.ibiz-panel-field .ibiz-panel-field-content{line-height:inherit}
+.ibiz-panel-field{--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-panel-field-icon-margin:6px;--ibiz-panel-field-error-font-size:var(--ibiz-font-size-small);--ibiz-panel-field-error-padding-top:var(--ibiz-spacing-super-tight);--ibiz-panel-field-error-color:var(--ibiz-color-danger);width:100%;height:100%;position:relative}.ibiz-panel-field__error{left:0;top:100%;line-height:1;font-size:var(--ibiz-panel-field-error-font-size);padding-top:var(--ibiz-panel-field-error-padding-top);position:absolute;color:var(--ibiz-panel-field-error-color)}.ibiz-panel-field.is-error .el-input__wrapper{box-shadow:0 0 0 1px var(--ibiz-panel-field-error-color) inset}.ibiz-panel-field .ibiz-panel-field-content{line-height:inherit}.ibiz-panel-field.is-mob{--ibiz-panel-field-icon-margin:0.375rem;--ibiz-editor-default-text-align:left;--ibiz-editor-default-flex-justify-content:flex-start}.ibiz-panel-field.is-mob .ibiz-panel-field-content{line-height:var(--ibiz-editor-default-line-height)}

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,13 +46,17 @@ const PanelItemRender = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       classArr,
-      htmlCode
+      htmlCode,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
     return vue.createVNode("div", {
-      "class": this.classArr,
-      "innerHTML": this.htmlCode
+      "class": [this.classArr, this.semanticClass("root")],
+      "style": this.semanticStyle("root"),
+      "innerHTML": this.htmlCode,
+      "onClick": (event) => this.controller.onClick(event)
     }, null);
   }
 });