@ibiz-template/vue3-util 0.3.1 → 0.3.3

package/src/panel-component/panel-container-image/panel-container-image.provider.ts

@@ -0,0 +1,30 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelContainerImageController } from './panel-container-image.controller';
+
+/**
+ * 面板图片容器适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class PanelContainerImageProvider
+ * @implements {EditorProvider}
+ */
+export class PanelContainerImageProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelContainerImage';
+
+  async createController(
+    panelItem: IPanelContainer,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelItemController> {
+    const c = new PanelContainerImageController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

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

@@ -0,0 +1,18 @@
+// 默认样式
+@include b(panel-container-image) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  > .#{bem('row')} {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  @include when(hidden) {
+    display: none;
+  }
+
+}

package/src/panel-component/panel-container-image/panel-container-image.state.ts

@@ -0,0 +1,12 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+
+/**
+ * 面板图片容器状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class PanelContainerImageState
+ * @extends {PanelItemState}
+ */
+export class PanelContainerImageState extends PanelItemState {}

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

@@ -0,0 +1,95 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { isSvg } from '@ibiz-template/core';
+import { useNamespace } from '../../use';
+import { PanelContainerImageController } from './panel-container-image.controller';
+import './panel-container-image.scss';
+
+export const PanelContainerImage = defineComponent({
+  name: 'IBizPanelContainerImage',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: PanelContainerImageController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-container-image');
+    const { id } = props.modelData;
+
+    // 类名控制
+    const classArr = computed(() => {
+      let result: Array<string | false> = [ns.b(), ns.m(id)];
+      result = [
+        ...result,
+        ...props.controller.containerClass,
+        ns.is('hidden', !props.controller.state.visible),
+      ];
+      return result;
+    });
+
+    const backgroundStyle = computed(() => {
+      const image = props.controller.model.sysImage;
+      const styles = {};
+      let imgStr = '';
+      if (image?.rawContent) {
+        if (isSvg(image.rawContent)) {
+          imgStr = `url(data:image/svg+xml;base64,${btoa(image.rawContent)})`;
+        } else {
+          imgStr = `url(${image.rawContent})`;
+        }
+      } else if (image?.imagePath) {
+        imgStr = `url(${image.imagePath})`;
+      }
+      if (imgStr) {
+        Object.assign(styles, {
+          backgroundImage: imgStr,
+        });
+      }
+      return styles;
+    });
+
+    return { ns, classArr, backgroundStyle };
+  },
+  render() {
+    // 内容区默认插槽处理，封装app-col
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+    const content = (
+      <iBizRow slot='content' layout={this.modelData.layout}>
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+
+          return (
+            <iBizCol
+              layoutPos={props.modelData.layoutPos}
+              state={props.controller.state}
+            >
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+    return (
+      <div
+        class={this.classArr}
+        onClick={() => {
+          this.controller.onClick();
+        }}
+        style={this.backgroundStyle}
+      >
+        {this.controller.model.cssStyle ? (
+          <style type='text/css'>{this.controller.model.cssStyle}</style>
+        ) : null}
+        {content}
+      </div>
+    );
+  },
+});

package/src/props/editor/common.ts

@@ -27,6 +27,7 @@ export function getEditorProps<C>() {
       type: Boolean,
       default: false,
     },
+    overflowMode: { type: String },
   };
 }
 
@@ -49,6 +50,8 @@ export function getEditorEmits<V>() {
     focus: (_event?: IData) => true,
     /** 回车事件 */
     enter: (_event?: IData) => true,
+    /** 信息文本变更事件 */
+    infoTextChange: (_text: string) => true,
   };
 }
 

package/src/view/common/view.tsx

@@ -158,6 +158,7 @@ export const View = defineComponent({
             context: this.c.context,
             params: this.c.params,
             provider,
+            container: this.c,
             onControllerAppear: this.onLayoutPanelCreated,
           },
           slots,