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

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

@@ -5,6 +5,7 @@ require('../../use/index.cjs');
 var singleDataContainer_controller = require('./single-data-container.controller.cjs');
 require('./single-data-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 SingleDataContainer = /* @__PURE__ */ vue.defineComponent({
     const {
       id
     } = props.modelData;
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const keys = Object.keys(props.controller.panelItems);
     keys.forEach((key) => {
       const panelItem = props.controller.panelItems[key];
@@ -46,7 +51,9 @@ const SingleDataContainer = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       classArr,
-      renderPanelItem
+      renderPanelItem,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -55,7 +62,8 @@ const SingleDataContainer = /* @__PURE__ */ vue.defineComponent({
       content = this.$slots.default();
     } else {
       content = vue.createVNode(vue.resolveComponent("iBizRow"), {
-        "class": this.ns.b("content"),
+        "class": [this.ns.b("content"), this.semanticClass("content")],
+        "style": this.semanticStyle("content"),
         "layout": this.modelData.layout
       }, {
         default: () => {
@@ -64,6 +72,12 @@ const SingleDataContainer = /* @__PURE__ */ vue.defineComponent({
             let _slot;
             const childController = this.controller.panelItems[panelItem.id];
             return vue.createVNode(vue.resolveComponent("iBizCol"), {
+              "class": this.semanticClass("item", {
+                item: childController
+              }),
+              "style": this.semanticStyle("item", {
+                item: childController
+              }),
               "layoutPos": panelItem.layoutPos,
               "state": childController.state
             }, _isSlot(_slot = this.renderPanelItem(panelItem, {
@@ -77,7 +91,8 @@ const SingleDataContainer = /* @__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
     }, [content]), [[vue.resolveDirective("loading"), this.controller.state.loading]]);
   }

package/lib/panel-component/teleport-placeholder/teleport-placeholder.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 require('../../use/index.cjs');
 require('./teleport-placeholder.css');
 var namespace = require('../../use/namespace/namespace.cjs');
+var useSemanticNode = require('../../use/use-semantic-node/use-semantic-node.cjs');
 
 "use strict";
 const TeleportPlaceholder = /* @__PURE__ */ vue.defineComponent({
@@ -27,6 +28,10 @@ const TeleportPlaceholder = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const ns = namespace.useNamespace("teleport-placeholder");
     const tempStyle = vue.ref("");
+    const {
+      semanticClass,
+      semanticStyle
+    } = useSemanticNode.useSemanticNode(props.controller);
     const {
       rawItem
     } = props.modelData;
@@ -44,7 +49,9 @@ const TeleportPlaceholder = /* @__PURE__ */ vue.defineComponent({
     return {
       ns,
       classArr,
-      tempStyle
+      tempStyle,
+      semanticClass,
+      semanticStyle
     };
   },
   render() {
@@ -53,8 +60,8 @@ const TeleportPlaceholder = /* @__PURE__ */ vue.defineComponent({
     }
     return vue.createVNode("div", {
       "id": this.controller.state.teleportTag,
-      "class": this.classArr,
-      "style": this.tempStyle
+      "class": [this.classArr, this.semanticClass("content")],
+      "style": [this.tempStyle, this.semanticStyle("content")]
     }, null);
   }
 });

package/lib/use/use-semantic-node/use-semantic-node.cjs

@@ -6,16 +6,22 @@ var vue = require('vue');
 "use strict";
 function useSemanticNode(controller) {
   var _a, _b;
+  const controlType = controller.model.controlType;
+  const editorType = controller.model.editorType;
   let classItems = {};
   const classNameAttr = (_a = controller.model.controlAttributes) == null ? void 0 : _a.find(
     (item) => item.attrName === runtime.PredefinedAttributes.CLASSNAMES
   );
   if (classNameAttr && classNameAttr.attrValue) {
-    const { controlType } = controller.model;
     if (controlType) {
       classItems = runtime.ScriptFactory.execSingleLine(classNameAttr.attrValue, {
         ...controller.getEventArgs()
       });
+    } else if (editorType) {
+      const editor = controller;
+      classItems = runtime.ScriptFactory.execSingleLine(classNameAttr.attrValue, {
+        ...editor.ctrl.getEventArgs()
+      });
     } else {
       const panelItem = controller;
       classItems = runtime.ScriptFactory.execSingleLine(classNameAttr.attrValue, {
@@ -46,11 +52,15 @@ function useSemanticNode(controller) {
     (item) => item.attrName === runtime.PredefinedAttributes.STYLES
   );
   if (styleAttr && styleAttr.attrValue) {
-    const { controlType } = controller.model;
     if (controlType) {
       styleItems = runtime.ScriptFactory.execSingleLine(styleAttr.attrValue, {
         ...controller.getEventArgs()
       });
+    } else if (editorType) {
+      const editor = controller;
+      styleItems = runtime.ScriptFactory.execSingleLine(styleAttr.attrValue, {
+        ...editor.ctrl.getEventArgs()
+      });
     } else {
       const panelItem = controller;
       styleItems = runtime.ScriptFactory.execSingleLine(styleAttr.attrValue, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-util",
-  "version": "0.7.41-alpha.111",
+  "version": "0.7.41-alpha.113",
   "description": "通用组件库(vue3)",
   "main": "lib/index.cjs",
   "types": "es/index.d.ts",
@@ -38,10 +38,10 @@
   "license": "MIT",
   "devDependencies": {
     "@ibiz-template/cli": "^0.3.23",
-    "@ibiz-template/core": "^0.7.41-alpha.106",
-    "@ibiz-template/runtime": "^0.7.41-alpha.111",
+    "@ibiz-template/core": "^0.7.41-alpha.113",
+    "@ibiz-template/runtime": "^0.7.41-alpha.113",
     "@ibiz-template/theme": "^0.7.39",
-    "@ibiz/model-core": "^0.1.87",
+    "@ibiz/model-core": "^0.1.88",
     "@types/path-browserify": "^1.0.2",
     "@types/qs": "^6.9.11",
     "@types/systemjs": "^6.13.5",
@@ -58,7 +58,7 @@
   "peerDependencies": {
     "@ibiz-template/core": "^0.6.0",
     "@ibiz-template/runtime": "^0.6.0",
-    "@ibiz/model-core": "^0.1.87",
+    "@ibiz/model-core": "^0.1.88",
     "dayjs": "^1.11.10",
     "path-browserify": "^1.0.1",
     "pinia": "^2.1.7",
@@ -68,5 +68,5 @@
     "vue": "^3.3.8",
     "vue-router": "^4.2.4"
   },
-  "gitHead": "2c908d8a4d16897d7e1a1beea2f3ac9f4ac0bfdc"
+  "gitHead": "74e0e6c2da67e6310ccca411945b5cf172a77955"
 }

package/src/control/panel/view-layout-panel/view-layout-panel.tsx

@@ -169,14 +169,20 @@ export const ViewLayoutPanelControl = defineComponent({
           panelItemC.parent &&
           isSimpleDataContainer(panelItemC.parent.model)
         ) {
-          children = () => {
+          children = (event: IData = {}) => {
             return slots[panelItem.id!]!({
               isSimple: true,
               data: panelItemC.data,
+              class: event.class,
+              style: event.style,
             });
           };
         } else {
-          children = () => slots[panelItem.id!]!();
+          children = (event: IData = {}) =>
+            slots[panelItem.id!]!({
+              class: event.class,
+              style: event.style,
+            });
         }
       } else if (
         panelItem.itemType === 'TABPANEL' &&

package/src/panel-component/auth-wxmp-qrcode/auth-wxmp-qrcode.scss

@@ -10,6 +10,8 @@ $auth-wxmp-qrcode: (
 @include b(auth-wxmp-qrcode) {
   @include set-component-css-var('auth-wxmp-qrcode',$auth-wxmp-qrcode);
 
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   @include e(content) {

package/src/panel-component/auth-wxmp-qrcode/auth-wxmp-qrcode.tsx

@@ -2,7 +2,7 @@ import { watch, PropType, onUnmounted, defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
 import { IPanelRawItem } from '@ibiz/model-core';
 import { AuthWxmpQrcodeController } from './auth-wxmp-qrcode.controller';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import './auth-wxmp-qrcode.scss';
 
 /**
@@ -36,6 +36,7 @@ export const AuthWxmpQrcode = defineComponent({
     const { state } = props.controller;
     const route = useRoute();
     props.controller.setRouter(route);
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     /**
      * 加载二维码
@@ -66,20 +67,27 @@ export const AuthWxmpQrcode = defineComponent({
       props.controller.destroy();
     });
 
-    return { ns, loadQrcode };
+    return { ns, loadQrcode, semanticClass, semanticStyle };
   },
   render() {
     return (
-      <div class={this.ns.b()}>
+      <div
+        class={[this.ns.b(), this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
+      >
         <div class={this.ns.e('content')}>
           {this.controller.state.qrcode && (
             <img
-              class={this.ns.e('qrcode')}
+              class={[this.ns.e('qrcode'), this.semanticClass('content')]}
+              style={this.semanticStyle('content')}
               src={this.controller.state.qrcode?.url}
             ></img>
           )}
           {!this.controller.state.qrcode?.expirein && (
-            <div class={this.ns.e('mask')}>
+            <div
+              class={[this.ns.e('mask'), this.semanticClass('mask')]}
+              style={this.semanticStyle('mask')}
+            >
               <ion-icon
                 title={ibiz.i18n.t('vue3Util.panelComponent.refresh')}
                 name='reload-outline'
@@ -89,7 +97,12 @@ export const AuthWxmpQrcode = defineComponent({
             </div>
           )}
         </div>
-        <div class={this.ns.e('caption')}>{this.controller.state.tips}</div>
+        <div
+          class={[this.ns.e('caption'), this.semanticClass('caption')]}
+          style={this.semanticStyle('caption')}
+        >
+          {this.controller.state.tips}
+        </div>
       </div>
     );
   },

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

@@ -1,6 +1,6 @@
 import { IFlexLayoutPos, IPanelContainer } from '@ibiz/model-core';
 import { computed, defineComponent, PropType, ref, Ref, VNode } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { GridContainerController } from './grid-container.controller';
 import './grid-container.scss';
 
@@ -30,6 +30,7 @@ export const GridContainer = defineComponent({
   setup(props) {
     const ns = useNamespace('grid-container');
     const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 类名控制
     const classArr = computed(() => {
@@ -74,6 +75,8 @@ export const GridContainer = defineComponent({
       convertLayoutPos,
       adaptGrow,
       adaptCols,
+      semanticClass,
+      semanticStyle,
     };
   },
   render() {
@@ -106,7 +109,8 @@ export const GridContainer = defineComponent({
 
     return (
       <iBizRow
-        class={this.classArr}
+        class={[this.classArr, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
         layout={this.layoutModel}
         v-loading={this.controller.state.loading}
         element-loading-text={this.controller.state.loadingText}
@@ -119,6 +123,8 @@ export const GridContainer = defineComponent({
 
           return (
             <iBizCol
+              class={this.semanticClass('item')}
+              style={this.semanticStyle('item')}
               layoutPos={this.convertLayoutPos(
                 props.modelData.layoutPos,
                 this.adaptGrow,

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

@@ -12,7 +12,7 @@ import {
   VNode,
   watch,
 } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { MultiDataContainerController } from './multi-data-container.controller';
 import './multi-data-container.scss';
 
@@ -42,6 +42,7 @@ export const MultiDataContainer = defineComponent({
   setup(props) {
     const ns = useNamespace('multi-data-container');
     const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 面板成员state响应式
     watch(
@@ -85,7 +86,7 @@ export const MultiDataContainer = defineComponent({
       return result;
     });
 
-    return { ns, classArr, renderPanelItem };
+    return { ns, classArr, renderPanelItem, semanticClass, semanticStyle };
   },
   render() {
     let content: VNode | VNode[];
@@ -96,7 +97,14 @@ export const MultiDataContainer = defineComponent({
       content = this.controller.state.items.map((_item, index) => {
         const itemController = this.controller.dataItems[index];
         return (
-          <iBizRow class={this.ns.b('content')} layout={this.modelData.layout}>
+          <iBizRow
+            class={[
+              this.ns.b('content'),
+              this.semanticClass('item', { data: _item }),
+            ]}
+            style={this.semanticStyle('item', { data: _item })}
+            layout={this.modelData.layout}
+          >
             {this.modelData.panelItems?.map(panelItem => {
               const childController = itemController.panelItems[panelItem.id!];
               return (
@@ -117,7 +125,8 @@ export const MultiDataContainer = 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/multi-data-container-raw/multi-data-container-raw.tsx

@@ -12,7 +12,7 @@ import {
   VNode,
   watch,
 } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { MultiDataContainerRawController } from './multi-data-container-raw.controller';
 import './multi-data-container-raw.scss';
 
@@ -42,6 +42,7 @@ export const MultiDataContainerRaw = defineComponent({
   setup(props) {
     const ns = useNamespace('multi-data-container-raw');
     const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 面板成员state响应式
     watch(
@@ -81,7 +82,7 @@ export const MultiDataContainerRaw = defineComponent({
       return result;
     });
 
-    return { ns, classArr, renderPanelItem };
+    return { ns, classArr, renderPanelItem, semanticClass, semanticStyle };
   },
   render() {
     let content: VNode | VNode[];
@@ -90,13 +91,19 @@ export const MultiDataContainerRaw = 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
                 layoutPos={panelItem.layoutPos}
                 state={childController.state}
+                class={this.semanticClass('item', { item: childController })}
+                style={this.semanticStyle('item', { item: childController })}
               >
                 {this.renderPanelItem(panelItem, {
                   providers: this.controller.providers,
@@ -110,7 +117,8 @@ export const MultiDataContainerRaw = 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/nav-pos/nav-pos.tsx

@@ -12,7 +12,7 @@ import { EventBase } from '@ibiz-template/runtime';
 import { RouterView, useRoute, useRouter } from 'vue-router';
 import { NavPosController } from './nav-pos.controller';
 import './nav-pos.scss';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { getNestedRoutePath } from '../../util';
 
 /**
@@ -46,6 +46,8 @@ export const NavPos = defineComponent({
   setup(props) {
     const c = props.controller;
     const ns = useNamespace('nav-pos');
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
     const onViewCreated = (event: EventBase): void => {
       c.onViewCreated(event);
     };
@@ -84,7 +86,7 @@ export const NavPos = defineComponent({
       );
     }
 
-    return { ns, c, isPresetView, onViewCreated };
+    return { ns, c, isPresetView, onViewCreated, semanticClass, semanticStyle };
   },
   render() {
     const { viewModals, state } = this.c;
@@ -92,11 +94,18 @@ export const NavPos = defineComponent({
     let content: VNode | null = null;
     if (state.routeOpen) {
       if (this.isPresetView) {
-        return <RouterView />;
+        return (
+          <RouterView
+            class={this.semanticClass('content')}
+            style={this.semanticStyle('content')}
+          />
+        );
       }
 
       content = (
         <iBizRouterView
+          class={this.semanticClass('content')}
+          style={this.semanticStyle('content')}
           manualKey={currentKey}
           modal={viewModals[currentKey]}
           onCreated={this.onViewCreated}
@@ -121,6 +130,8 @@ export const NavPos = defineComponent({
       const view =
         currentKey && navViewMsgs[currentKey]
           ? h(resolveComponent('IBizViewShell'), {
+              class: this.semanticClass('content'),
+              style: this.semanticStyle('content'),
               context: navViewMsgs[currentKey].context,
               params: navViewMsgs[currentKey].params,
               key: !this.c.ignoreEmbedKey ? currentKey : undefined,
@@ -142,8 +153,10 @@ export const NavPos = defineComponent({
         class={[
           this.ns.b(),
           this.ns.m(this.modelData.id),
+          this.semanticClass('root'),
           ...this.controller.containerClass,
         ]}
+        style={this.semanticStyle('root')}
         // v-loading={this.c.state.isLoading}
       >
         {content}

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

@@ -1,7 +1,7 @@
 import { PanelContainerController } from '@ibiz-template/runtime';
 import { IPanelContainer } from '@ibiz/model-core';
 import { computed, defineComponent, PropType, VNode } from 'vue';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import './panel-container.scss';
 
 /**
@@ -27,6 +27,7 @@ export const PanelContainer = defineComponent({
   setup(props) {
     const ns = useNamespace('panel-container');
     const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 类名控制
     const classArr = computed(() => {
@@ -39,13 +40,18 @@ export const PanelContainer = defineComponent({
       return result;
     });
 
-    return { ns, classArr };
+    return { ns, classArr, semanticClass, semanticStyle };
   },
   render() {
     // 内容区默认插槽处理，封装app-col
     const defaultSlots: VNode[] = this.$slots.default?.() || [];
     const content = (
-      <iBizRow slot='content' layout={this.modelData.layout}>
+      <iBizRow
+        slot='content'
+        class={this.semanticClass('content')}
+        style={this.semanticStyle('content')}
+        layout={this.modelData.layout}
+      >
         {defaultSlots.map(slot => {
           const props = slot.props as IData;
           if (!props || !props.controller) {
@@ -56,6 +62,8 @@ export const PanelContainer = defineComponent({
             <iBizCol
               layoutPos={props.modelData.layoutPos}
               state={props.controller.state}
+              class={this.semanticClass('item', { props })}
+              style={this.semanticStyle('item', { props })}
             >
               {slot}
             </iBizCol>
@@ -79,7 +87,8 @@ export const PanelContainer = defineComponent({
             default: () => {
               return (
                 <div
-                  class={this.classArr}
+                  class={[this.classArr, this.semanticClass('root')]}
+                  style={this.semanticStyle('root')}
                   onClick={() => {
                     this.controller.onClick();
                   }}
@@ -97,7 +106,11 @@ export const PanelContainer = defineComponent({
             content: () => {
               return (
                 <div
-                  class={this.ns.e('dynamic-tooltip-content')}
+                  class={[
+                    this.ns.e('dynamic-tooltip-content'),
+                    this.semanticClass('tooltip'),
+                  ]}
+                  style={this.semanticStyle('tooltip')}
                   v-html={attrs.dynamictooltip.content}
                 ></div>
               );
@@ -109,7 +122,8 @@ export const PanelContainer = 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}
         onClick={event => this.controller.onClick(event)}

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

@@ -1,7 +1,7 @@
 import { IPanelContainer } from '@ibiz/model-core';
 import { computed, defineComponent, PropType, VNode } from 'vue';
 import { isSvg } from '@ibiz-template/core';
-import { useNamespace } from '../../use';
+import { useNamespace, useSemanticNode } from '../../use';
 import { PanelContainerImageController } from './panel-container-image.controller';
 import './panel-container-image.scss';
 
@@ -31,6 +31,7 @@ export const PanelContainerImage = defineComponent({
   setup(props) {
     const ns = useNamespace('panel-container-image');
     const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
 
     // 类名控制
     const classArr = computed(() => {
@@ -66,13 +67,18 @@ export const PanelContainerImage = defineComponent({
       return styles;
     });
 
-    return { ns, classArr, backgroundStyle };
+    return { ns, classArr, backgroundStyle, semanticClass, semanticStyle };
   },
   render() {
     // 内容区默认插槽处理，封装app-col
     const defaultSlots: VNode[] = this.$slots.default?.() || [];
     const content = (
-      <iBizRow slot='content' layout={this.modelData.layout}>
+      <iBizRow
+        slot='content'
+        class={this.semanticClass('content')}
+        style={this.semanticStyle('content')}
+        layout={this.modelData.layout}
+      >
         {defaultSlots.map(slot => {
           const props = slot.props as IData;
           if (!props || !props.controller) {
@@ -83,6 +89,8 @@ export const PanelContainerImage = defineComponent({
             <iBizCol
               layoutPos={props.modelData.layoutPos}
               state={props.controller.state}
+              class={this.semanticClass('item', { props })}
+              style={this.semanticStyle('item', { props })}
             >
               {slot}
             </iBizCol>
@@ -92,11 +100,11 @@ export const PanelContainerImage = defineComponent({
     );
     return (
       <div
-        class={this.classArr}
+        class={[this.classArr, this.semanticClass('root')]}
         v-loading={this.controller.state.loading}
         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 ? (
           <style type='text/css'>{this.controller.model.cssStyle}</style>