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

package/src/panel-component/panel-ctrl-pos/panel-ctrl-pos.tsx

@@ -1,7 +1,7 @@
 import { CTX, IControlController } from '@ibiz-template/runtime';
 import { IPanelCtrlPos } from '@ibiz/model-core';
 import { defineComponent, inject, PropType, VNode } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { PanelCtrlPosController } from './panel-ctrl-pos.controller';
 import './panel-ctrl-pos.scss';
 
@@ -29,6 +29,8 @@ export const PanelCtrlPos = defineComponent({
     },
   },
   setup(props) {
+    const ns = useNamespace('panel-ctrl-pos');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
     // 上下文里提前预告部件
     const ctx = inject('ctx') as CTX;
     ctx.evt.on('onRegister', (name, c) => {
@@ -37,15 +39,18 @@ export const PanelCtrlPos = defineComponent({
       }
     });
 
-    const ns = useNamespace('panel-ctrl-pos');
-    return { ns };
+    return { ns, semanticClass, semanticStyle };
   },
   render() {
     const { state } = this.controller;
     let content: VNode | VNode[] | undefined;
 
     if (this.$slots.default) {
-      content = this.$slots.default();
+      const props = {
+        class: this.semanticClass('content'),
+        style: this.semanticStyle('content'),
+      };
+      content = this.$slots.default(props);
     }
 
     return (
@@ -53,9 +58,11 @@ export const PanelCtrlPos = defineComponent({
         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

package/src/panel-component/panel-ctrl-view-page-caption/panel-ctrl-view-page-caption.tsx

@@ -1,6 +1,6 @@
 import { IPanelCtrlPos } from '@ibiz/model-core';
 import { computed, defineComponent, PropType } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { PanelCtrlViewPageCaptionController } from './panel-ctrl-view-page-caption.controller';
 import './panel-ctrl-view-page-caption.scss';
 
@@ -29,6 +29,7 @@ export const PanelCtrlViewPageCaption = defineComponent({
   },
   setup(props) {
     const ns = useNamespace('panel-ctrl-view-page-caption');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 类名控制
     const classArr = computed(() => {
@@ -45,6 +46,8 @@ export const PanelCtrlViewPageCaption = defineComponent({
     return {
       ns,
       classArr,
+      semanticClass,
+      semanticStyle,
     };
   },
   render() {
@@ -52,7 +55,10 @@ export const PanelCtrlViewPageCaption = defineComponent({
     let editor = null;
     if (this.controller.data) {
       editor = (
-        <span class={this.ns.b('content')}>
+        <span
+          class={[this.ns.b('content'), this.semanticClass('content')]}
+          style={this.semanticStyle('content')}
+        >
           {this.controller.state.caption}
         </span>
       );
@@ -60,7 +66,8 @@ export const PanelCtrlViewPageCaption = defineComponent({
 
     return (
       <div
-        class={this.classArr}
+        class={[this.classArr, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
         onClick={event => this.controller.onClick(event)}
       >
         {editor}

package/src/panel-component/panel-field/panel-field.tsx

@@ -1,6 +1,6 @@
 import { IPanelField } from '@ibiz/model-core';
 import { computed, defineComponent, PropType, resolveComponent, h } from 'vue';
-import { renderTooltip, useNamespace } from '../../use';
+import { renderTooltip, useNamespace, useSemanticNode } from '../../use';
 import { PanelFieldController } from './panel-field.controller';
 import './panel-field.scss';
 
@@ -33,6 +33,7 @@ export const PanelField = defineComponent({
   },
   setup(props) {
     const ns = useNamespace('panel-field');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 类名控制
     const classArr = computed(() => {
@@ -43,7 +44,6 @@ export const PanelField = defineComponent({
         ns.is('error', !!props.controller.state.error),
         ns.is('mob', window.Environment && window.Environment.isMob),
       ];
-      result.push(...props.controller.containerClass);
       return result;
     });
 
@@ -63,6 +63,8 @@ export const PanelField = defineComponent({
       classArr,
       showTitle,
       onValueChange,
+      semanticClass,
+      semanticStyle,
     };
   },
   render() {
@@ -74,7 +76,14 @@ export const PanelField = 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,
@@ -99,7 +108,14 @@ export const PanelField = defineComponent({
 
     return (
       <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)}
         v-tooltip={renderTooltip(
           this.controller.data,
@@ -109,7 +125,12 @@ export const PanelField = defineComponent({
       >
         {editor}
         {this.controller.state.error && (
-          <div class={this.ns.e('error')}>{this.controller.state.error}</div>
+          <div
+            class={[this.ns.e('error'), this.semanticClass('error')]}
+            style={this.semanticStyle('error')}
+          >
+            {this.controller.state.error}
+          </div>
         )}
       </div>
     );

package/src/panel-component/panel-item-render/panel-item-render.tsx

@@ -1,6 +1,6 @@
 import { IPanelContainer } from '@ibiz/model-core';
 import { computed, defineComponent, PropType } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { PanelItemRenderController } from './panel-item-render.controller';
 
 /**
@@ -28,6 +28,7 @@ export const PanelItemRender = defineComponent({
   },
   setup(props) {
     const ns = useNamespace('panel-item-render');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     const nsType = useNamespace(
       `panel-${props.modelData.itemType?.toLowerCase()}`,
@@ -53,12 +54,13 @@ export const PanelItemRender = defineComponent({
       );
     });
 
-    return { ns, classArr, htmlCode };
+    return { ns, classArr, htmlCode, semanticClass, semanticStyle };
   },
   render() {
     return (
       <div
-        class={this.classArr}
+        class={[this.classArr, this.semanticClass('content')]}
+        style={this.semanticStyle('content')}
         v-html={this.htmlCode}
         onClick={event => this.controller.onClick(event)}
       ></div>

package/src/panel-component/panel-rawitem/panel-rawitem.tsx

@@ -1,6 +1,6 @@
 import { IHtmlItem, IPanelRawItem, ITextItem } from '@ibiz/model-core';
 import { computed, defineComponent, PropType, Ref, ref, watch } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { PanelRawItemController } from './panel-rawitem.controller';
 import './panel-rawitem.scss';
 
@@ -30,6 +30,7 @@ export const PanelRawItem = defineComponent({
   setup(props) {
     const ns = useNamespace('panel-rawitem');
     const c = props.controller;
+    const { semanticClass, semanticStyle } = useSemanticNode(c);
 
     // 传入内容
     const content: Ref<string | number | undefined> = ref('');
@@ -46,7 +47,6 @@ export const PanelRawItem = defineComponent({
     const classArr = computed(() => {
       const { id } = props.modelData;
       const result: Array<string | false> = [ns.b(), ns.m(id)];
-      result.push(...props.controller.containerClass);
       return result;
     });
 
@@ -84,6 +84,8 @@ export const PanelRawItem = defineComponent({
       classArr,
       tempStyle,
       content,
+      semanticClass,
+      semanticStyle,
     };
   },
   render() {
@@ -91,11 +93,30 @@ export const PanelRawItem = defineComponent({
     if (!this.controller.state.visible) return;
     return (
       <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)}
       >
         <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}
         ></iBizRawItem>

package/src/panel-component/panel-tab-page/panel-tab-page.tsx

@@ -1,7 +1,7 @@
 import { computed, defineComponent, PropType, VNode } from 'vue';
 import { IPanelContainer } from '@ibiz/model-core';
 import { PanelContainerController } from '@ibiz-template/runtime';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 
 /**
  * 面板分页
@@ -29,6 +29,8 @@ export const PanelTabPage = defineComponent({
   },
   setup(props) {
     const ns = useNamespace('panel-tab-page');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
     // 类名控制
     const classArr = computed(() => {
       const { id } = props.modelData;
@@ -39,13 +41,21 @@ export const PanelTabPage = defineComponent({
     return {
       ns,
       classArr,
+      semanticClass,
+      semanticStyle,
     };
   },
   render() {
     const defaultSlots: VNode[] = this.$slots.default?.() || [];
     return (
       <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}
         v-loading={this.controller.state.loading}
         element-loading-text={this.controller.state.loadingText}
@@ -57,7 +67,12 @@ export const PanelTabPage = defineComponent({
           }
           const c = props.controller;
           return (
-            <iBizCol layoutPos={c.model.layoutPos} state={c.state}>
+            <iBizCol
+              class={this.semanticClass('item', { props })}
+              style={this.semanticStyle('item', { props })}
+              layoutPos={c.model.layoutPos}
+              state={c.state}
+            >
               {slot}
             </iBizCol>
           );

package/src/panel-component/scroll-container/scroll-container/scroll-container.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-restricted-syntax */
 import { IPanelContainer } from '@ibiz/model-core';
 import { computed, defineComponent, PropType, VNode } from 'vue';
-import { useNamespace } from '../../../use';
+import { useNamespace, useSemanticNode } from '../../../use';
 import { ScrollContainerController } from './scroll-container.controller';
 import './scroll-container.scss';
 
@@ -31,6 +31,7 @@ export const ScrollContainer = defineComponent({
   setup(props) {
     const ns = useNamespace('scroll-container');
     const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 类名控制
     const classArr = computed(() => {
@@ -43,7 +44,7 @@ export const ScrollContainer = defineComponent({
       return result;
     });
 
-    return { ns, classArr };
+    return { ns, classArr, semanticClass, semanticStyle };
   },
   render() {
     let left: VNode | null = null;
@@ -102,23 +103,50 @@ export const ScrollContainer = defineComponent({
 
     return (
       <div
-        class={this.classArr}
+        class={[this.classArr, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
         v-loading={this.controller.state.loading}
         element-loading-text={this.controller.state.loadingText}
       >
-        <div class={[this.ns.e('header')]} style={slotStylle.top}>
+        <div
+          class={[this.ns.e('header'), this.semanticClass('header')]}
+          style={[slotStylle.top, this.semanticStyle('header')]}
+        >
           {top}
         </div>
-        <div class={[this.ns.b('content')]}>
-          <div class={this.ns.be('content', 'left')} style={slotStylle.left}>
+        <div
+          class={[this.ns.b('content'), this.semanticClass('content')]}
+          style={this.semanticStyle('content')}
+        >
+          <div
+            class={[this.ns.be('content', 'left'), this.semanticClass('left')]}
+            style={[slotStylle.left, this.semanticStyle('left')]}
+          >
             {left}
           </div>
-          <div class={this.ns.be('content', 'center')}>{center}</div>
-          <div class={this.ns.be('content', 'right')} style={slotStylle.right}>
+          <div
+            class={[
+              this.ns.be('content', 'center'),
+              this.semanticClass('center'),
+            ]}
+            style={this.semanticStyle('center')}
+          >
+            {center}
+          </div>
+          <div
+            class={[
+              this.ns.be('content', 'right'),
+              this.semanticClass('right'),
+            ]}
+            style={[slotStylle.right, this.semanticStyle('right')]}
+          >
             {right}
           </div>
         </div>
-        <div class={[this.ns.e('footer')]} style={slotStylle.bottom}>
+        <div
+          class={[this.ns.e('footer'), this.semanticClass('footer')]}
+          style={[slotStylle.bottom, this.semanticStyle('footer')]}
+        >
           {bottom}
         </div>
       </div>

package/src/panel-component/scroll-container/scroll-container-item/scroll-container-item.tsx

@@ -1,6 +1,6 @@
 import { IPanelContainer } from '@ibiz/model-core';
 import { computed, defineComponent, PropType, VNode } from 'vue';
-import { useNamespace } from '../../../use';
+import { useNamespace, useSemanticNode } from '../../../use';
 import { ScrollContainerItemController } from './scroll-container-item.controller';
 import './scroll-container-item.scss';
 
@@ -30,6 +30,7 @@ export const ScrollContainerItem = defineComponent({
   setup(props) {
     const ns = useNamespace('scroll-container-item');
     const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 类名控制
     const classArr = computed(() => {
@@ -41,7 +42,7 @@ export const ScrollContainerItem = defineComponent({
       return result;
     });
 
-    return { ns, classArr };
+    return { ns, classArr, semanticClass, semanticStyle };
   },
   render() {
     // 内容区默认插槽处理，封装app-col
@@ -49,7 +50,8 @@ export const ScrollContainerItem = defineComponent({
 
     return (
       <iBizRow
-        class={this.classArr}
+        class={[this.classArr, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
         layout={{ layout: 'FLEX' }}
         v-loading={this.controller.state.loading}
         element-loading-text={this.controller.state.loadingText}
@@ -63,6 +65,8 @@ export const ScrollContainerItem = defineComponent({
           props.modelData.layoutPos.layout = 'FLEX';
           return (
             <iBizCol
+              class={this.semanticClass('item', { props })}
+              style={this.semanticStyle('item', { props })}
               layoutPos={props.modelData.layoutPos}
               state={props.controller.state}
             >

package/src/panel-component/single-data-container/single-data-container.tsx

@@ -11,7 +11,7 @@ import {
   reactive,
   VNode,
 } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { SingleDataContainerController } from './single-data-container.controller';
 import './single-data-container.scss';
 
@@ -43,6 +43,7 @@ export const SingleDataContainer = defineComponent({
   setup(props) {
     const ns = useNamespace('single-data-container');
     const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 面板成员state响应式
     const keys = Object.keys(props.controller.panelItems);
@@ -76,7 +77,7 @@ export const SingleDataContainer = defineComponent({
       return result;
     });
 
-    return { ns, classArr, renderPanelItem };
+    return { ns, classArr, renderPanelItem, semanticClass, semanticStyle };
   },
   render() {
     let content: VNode | VNode[];
@@ -85,11 +86,17 @@ export const SingleDataContainer = defineComponent({
     } else {
       // 内容区默认插槽处理，封装app-col
       content = (
-        <iBizRow class={this.ns.b('content')} layout={this.modelData.layout}>
+        <iBizRow
+          class={[this.ns.b('content'), this.semanticClass('content')]}
+          style={this.semanticStyle('content')}
+          layout={this.modelData.layout}
+        >
           {this.modelData.panelItems?.map(panelItem => {
             const childController = this.controller.panelItems[panelItem.id!];
             return (
               <iBizCol
+                class={this.semanticClass('item', { item: childController })}
+                style={this.semanticStyle('item', { item: childController })}
                 layoutPos={panelItem.layoutPos}
                 state={childController.state}
               >
@@ -105,7 +112,8 @@ export const SingleDataContainer = defineComponent({
     }
     return (
       <div
-        class={this.classArr}
+        class={[this.classArr, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
         v-loading={this.controller.state.loading}
         element-loading-text={this.controller.state.loadingText}
       >

package/src/panel-component/teleport-placeholder/teleport-placeholder.tsx

@@ -1,6 +1,6 @@
 import { IPanelRawItem } from '@ibiz/model-core';
 import { computed, defineComponent, PropType, ref } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import './teleport-placeholder.scss';
 import { TeleportPlaceholderController } from './teleport-placeholder.controller';
 
@@ -31,6 +31,7 @@ export const TeleportPlaceholder = defineComponent({
   setup(props) {
     const ns = useNamespace('teleport-placeholder');
     const tempStyle = ref('');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     const { rawItem } = props.modelData;
 
@@ -46,7 +47,7 @@ export const TeleportPlaceholder = defineComponent({
       return result;
     });
 
-    return { ns, classArr, tempStyle };
+    return { ns, classArr, tempStyle, semanticClass, semanticStyle };
   },
   render() {
     // 动态控制显示
@@ -56,8 +57,8 @@ export const TeleportPlaceholder = defineComponent({
     return (
       <div
         id={this.controller.state.teleportTag}
-        class={this.classArr}
-        style={this.tempStyle}
+        class={[this.classArr, this.semanticClass('content')]}
+        style={[this.tempStyle, this.semanticStyle('content')]}
       ></div>
     );
   },

package/src/use/use-semantic-node/use-semantic-node.ts

@@ -1,10 +1,11 @@
 import {
+  ScriptFactory,
+  EditorController,
   ControlController,
   PanelItemController,
   PredefinedAttributes,
-  ScriptFactory,
 } from '@ibiz-template/runtime';
-import { IControl } from '@ibiz/model-core';
+import { IControl, IEditor } from '@ibiz/model-core';
 import { useAttrs } from 'vue';
 
 /** 语义化节点class */
@@ -25,23 +26,31 @@ export type UseSemanticStyleReturn = (
  * @returns
  */
 export function useSemanticNode(
-  controller: ControlController | PanelItemController,
+  controller: ControlController | PanelItemController | EditorController,
 ): {
   semanticClass: UseSemanticClassReturn;
   semanticStyle: UseSemanticStyleReturn;
 } {
+  const controlType = (controller.model as IControl).controlType;
+  const editorType = (controller.model as IEditor).editorType;
+
   // class埋点信息，可通过部件注入属性classNames设置，也可通过组件参数classNames设置，格式为字符串或函数，如 { root: 'semantic-mark-root' } 或 { root: (args) => 'semantic-mark-root' }
   let classItems: IData = {};
   const classNameAttr = controller.model.controlAttributes?.find(
     item => item.attrName === PredefinedAttributes.CLASSNAMES,
   );
   if (classNameAttr && classNameAttr.attrValue) {
-    const { controlType } = controller.model as IControl;
-    // 存在部件类型即为部件
     if (controlType) {
+      // 存在部件类型即为部件
       classItems = ScriptFactory.execSingleLine(classNameAttr.attrValue, {
         ...(controller as ControlController).getEventArgs(),
       }) as IData;
+    } else if (editorType) {
+      // 存在编辑器类型即为编辑器
+      const editor = controller as EditorController;
+      classItems = ScriptFactory.execSingleLine(classNameAttr.attrValue, {
+        ...editor.ctrl.getEventArgs(),
+      }) as IData;
     } else {
       const panelItem = controller as PanelItemController;
       classItems = ScriptFactory.execSingleLine(classNameAttr.attrValue, {
@@ -84,12 +93,17 @@ export function useSemanticNode(
     item => item.attrName === PredefinedAttributes.STYLES,
   );
   if (styleAttr && styleAttr.attrValue) {
-    const { controlType } = controller.model as IControl;
     // 存在部件类型即为部件
     if (controlType) {
       styleItems = ScriptFactory.execSingleLine(styleAttr.attrValue, {
         ...(controller as ControlController).getEventArgs(),
       }) as IData;
+    } else if (editorType) {
+      // 存在编辑器类型即为编辑器
+      const editor = controller as EditorController;
+      styleItems = ScriptFactory.execSingleLine(styleAttr.attrValue, {
+        ...editor.ctrl.getEventArgs(),
+      }) as IData;
     } else {
       const panelItem = controller as PanelItemController;
       styleItems = ScriptFactory.execSingleLine(styleAttr.attrValue, {

package/src/view/common/view.scss

@@ -1,6 +1,7 @@
+// 视图样式
 $view: (
-  bg-color: getCssVar(color, bg, 1),
-  border-radius: getCssVar(border-radius, medium),
+  bg-color: getCssVar(color, bg, 1),                  // 视图背景色  
+  border-radius: getCssVar(border-radius, medium),    // 视图圆角
 );
 
 // 视图默认撑满父容器