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

package/src/panel-component/panel-container/index.ts

@@ -0,0 +1,30 @@
+import { App } from 'vue';
+import {
+  PanelContainerController,
+  PanelContainerState,
+  registerPanelItemProvider,
+} from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { PanelContainer } from './panel-container';
+import { PanelContainerProvider } from './panel-container.provider';
+
+// 适配老版本面板容器通过该包导出
+export { PanelContainerState, PanelContainerController };
+
+export const IBizPanelContainer = withInstall(
+  PanelContainer,
+  function (v: App) {
+    v.component(PanelContainer.name!, PanelContainer);
+    registerPanelItemProvider('CONTAINER', () => new PanelContainerProvider());
+    registerPanelItemProvider(
+      'CONTAINER_DEFAULT',
+      () => new PanelContainerProvider(),
+    );
+    // registerPanelItemProvider(
+    //   'CONTAINER_CONTAINER_GRID',
+    //   () => new PanelContainerProvider(),
+    // );
+  },
+);
+
+export default IBizPanelContainer;

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

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

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

@@ -0,0 +1,21 @@
+$panel: (
+  scroll: auto,
+);
+
+// 默认样式
+@include b(panel-container) {
+  @include set-component-css-var(panel, $panel);
+  
+  width: 100%;
+  height: 100%;
+
+  > .#{bem('row')} {
+    height: 100%;
+    overflow: hidden getCssVar(panel, scroll);
+
+  }
+
+  @include when(hidden) {
+    display: none;
+  }
+}

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

@@ -0,0 +1,138 @@
+import { PanelContainerController } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { useNamespace, useSemanticNode } from '../../use';
+import './panel-container.scss';
+
+/**
+ * 面板容器
+ * @primary
+ * @description 面板中最常见容器控件，承载面板组件，可以配置布局来控制内容呈现方式。
+ */
+export const PanelContainer = defineComponent({
+  name: 'IBizPanelContainer',
+  props: {
+    /**
+     * @description 面板容器模型
+     */
+    modelData: { type: Object as PropType<IPanelContainer>, required: true },
+    /**
+     * @description 面板容器控制器
+     */
+    controller: {
+      type: PanelContainerController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-container');
+    const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
+    // 类名控制
+    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;
+    });
+
+    return { ns, classArr, semanticClass, semanticStyle };
+  },
+  render() {
+    // 内容区默认插槽处理，封装app-col
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+    const content = (
+      <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) {
+            return slot;
+          }
+
+          return (
+            <iBizCol
+              layoutPos={props.modelData.layoutPos}
+              state={props.controller.state}
+              class={this.semanticClass('item', { props })}
+              style={this.semanticStyle('item', { props })}
+            >
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+    const attrs = this.$attrs?.attrs as IData;
+
+    // 动态tooltip
+    if (attrs && attrs.dynamictooltip) {
+      const attributes = { ...attrs.dynamictooltip };
+      delete attributes.content;
+      return (
+        <el-tooltip
+          placement='right'
+          popper-class={this.ns.e('dynamic-tooltip')}
+          {...attributes}
+        >
+          {{
+            default: () => {
+              return (
+                <div
+                  class={[this.classArr, this.semanticClass('root')]}
+                  style={this.semanticStyle('root')}
+                  onClick={() => {
+                    this.controller.onClick();
+                  }}
+                  {...this.$attrs}
+                >
+                  {this.controller.model.cssStyle ? (
+                    <style type='text/css'>
+                      {this.controller.model.cssStyle}
+                    </style>
+                  ) : null}
+                  {content}
+                </div>
+              );
+            },
+            content: () => {
+              return (
+                <div
+                  class={[
+                    this.ns.e('dynamic-tooltip-content'),
+                    this.semanticClass('tooltip'),
+                  ]}
+                  style={this.semanticStyle('tooltip')}
+                  v-html={attrs.dynamictooltip.content}
+                ></div>
+              );
+            },
+          }}
+        </el-tooltip>
+      );
+    }
+
+    return (
+      <div
+        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)}
+      >
+        {this.controller.model.cssStyle ? (
+          <style type='text/css'>{this.controller.model.cssStyle}</style>
+        ) : null}
+        {content}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,22 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { PanelContainerImage } from './panel-container-image';
+import { PanelContainerImageProvider } from './panel-container-image.provider';
+import { PanelContainerImageState } from './panel-container-image.state';
+import { PanelContainerImageController } from './panel-container-image.controller';
+
+export { PanelContainerImageState, PanelContainerImageController };
+
+export const IBizPanelContainerImage = withInstall(
+  PanelContainerImage,
+  function (v: App) {
+    v.component(PanelContainerImage.name!, PanelContainerImage);
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_IMAGE',
+      () => new PanelContainerImageProvider(),
+    );
+  },
+);
+
+export default IBizPanelContainerImage;

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

@@ -0,0 +1,24 @@
+import { PanelContainerController } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelContainerImageState } from './panel-container-image.state';
+
+/**
+ * 面板图片容器控制器
+ *
+ * @export
+ * @class PanelContainerImageController
+ * @extends {PanelContainerController}
+ */
+export class PanelContainerImageController extends PanelContainerController<IPanelContainer> {
+  /**
+   * @description 状态
+   * @exposedoc
+   * @type {PanelContainerImageState}
+   * @memberof PanelContainerImageController
+   */
+  declare state: PanelContainerImageState;
+
+  protected createState(): PanelContainerImageState {
+    return new PanelContainerImageState(this.parent?.state);
+  }
+}

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,17 @@
+// 默认样式
+@include b(panel-container-image) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  > .#{bem('row')} {
+    height: 100%;
+    overflow: hidden auto;
+  }
+
+  @include when(hidden) {
+    display: none;
+  }
+
+}

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

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

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

@@ -0,0 +1,116 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { isSvg } from '@ibiz-template/core';
+import { useNamespace, useSemanticNode } from '../../use';
+import { PanelContainerImageController } from './panel-container-image.controller';
+import './panel-container-image.scss';
+
+/**
+ * 图片背景容器
+ * @primary
+ * @description 图片背景容器，可以配置容器的背景图片。
+ */
+export const PanelContainerImage = defineComponent({
+  name: 'IBizPanelContainerImage',
+  props: {
+    /**
+     * @description 图片背景容器模型数据
+     */
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    /**
+     * @description 图片背景容器控制器
+     */
+    controller: {
+      type: PanelContainerImageController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-container-image');
+    const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
+    // 类名控制
+    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)) {
+          // 删除中文，防止报错
+          const rawContent = image.rawContent.replace(/[\u4e00-\u9fff]/g, '');
+          imgStr = `url(data:image/svg+xml;base64,${btoa(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, semanticClass, semanticStyle };
+  },
+  render() {
+    // 内容区默认插槽处理，封装app-col
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+    const content = (
+      <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) {
+            return slot;
+          }
+
+          return (
+            <iBizCol
+              layoutPos={props.modelData.layoutPos}
+              state={props.controller.state}
+              class={this.semanticClass('item', { props })}
+              style={this.semanticStyle('item', { props })}
+            >
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+    return (
+      <div
+        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, this.semanticStyle('root')]}
+      >
+        {this.controller.model.cssStyle ? (
+          <style type='text/css'>{this.controller.model.cssStyle}</style>
+        ) : null}
+        {content}
+      </div>
+    );
+  },
+});

package/src/panel-component/panel-container-tabs/index.ts

@@ -0,0 +1,18 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { PanelContainerTabs } from './panel-container-tabs';
+import { PanelContainerTabsProvider } from './panel-container-tabs.provider';
+
+export const IBizPanelContainerTabs = withInstall(
+  PanelContainerTabs,
+  function (v: App) {
+    v.component(PanelContainerTabs.name!, PanelContainerTabs);
+    registerPanelItemProvider(
+      'CONTAINER_TABS',
+      () => new PanelContainerTabsProvider(),
+    );
+  },
+);
+
+export default IBizPanelContainerTabs;

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

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

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

@@ -0,0 +1,25 @@
+/* stylelint-disable selector-class-pattern */
+// 默认样式
+@include b(panel-container-tabs) {
+  position: relative;
+  
+  .el-tabs{
+    --el-tabs-header-height: 52px;
+  }
+
+  .el-tabs__nav-wrap::after{
+    display: none;
+  }
+
+  &::after{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: var(--el-index-normal);
+    width: 100%;
+    height: getCssVarName('spacing', 'super-tight');
+    content: "";
+    background-color: var(--el-border-color-light);
+  }
+
+}

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

@@ -0,0 +1,47 @@
+import { PanelContainerController } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { defineComponent, h, PropType, resolveComponent } from 'vue';
+import { useNamespace } from '../../use';
+import './panel-container-tabs.scss';
+
+/**
+ * 分页容器
+ * @primary
+ * @description 以分页的形式呈现容器内容，每个分页下为面板分页组件。
+ */
+export const PanelContainerTabs = defineComponent({
+  name: 'IBizPanelContainerTabs',
+  props: {
+    /**
+     * @description 分页容器模型
+     */
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    /**
+     * @description 分页容器控制器
+     */
+    controller: {
+      type: PanelContainerController,
+      required: true,
+    },
+  },
+  setup() {
+    const ns = useNamespace('panel-container-tabs');
+
+    return { ns };
+  },
+  render() {
+    // 完全用面板容器绘制，只加一个类名
+    return h(
+      resolveComponent('IBizPanelContainer') as string,
+      {
+        ...this.$props,
+        ...this.$attrs,
+        class: this.ns.b(),
+      },
+      this.$slots,
+    );
+  },
+});

package/src/panel-component/panel-ctrl-pos/index.ts

@@ -0,0 +1,14 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { PanelCtrlPos } from './panel-ctrl-pos';
+import { PanelCtrlPosProvider } from './panel-ctrl-pos.provider';
+import { PanelCtrlPosController } from './panel-ctrl-pos.controller';
+
+export { PanelCtrlPosController };
+export const IBizPanelCtrlPos = withInstall(PanelCtrlPos, function (v: App) {
+  v.component(PanelCtrlPos.name!, PanelCtrlPos);
+  registerPanelItemProvider('CTRLPOS', () => new PanelCtrlPosProvider());
+});
+
+export default IBizPanelCtrlPos;

package/src/panel-component/panel-ctrl-pos/panel-ctrl-pos.controller.ts

@@ -0,0 +1,50 @@
+import {
+  IControlController,
+  PanelItemController,
+  ViewLayoutPanelController,
+} from '@ibiz-template/runtime';
+import { IPanelCtrlPos } from '@ibiz/model-core';
+
+/**
+ * 面板控件占位控制器
+ *
+ * @author lxm
+ * @date 2023-02-07 06:05:23
+ * @export
+ * @class PanelButtonController
+ * @extends {PanelItemController}
+ */
+export class PanelCtrlPosController extends PanelItemController<IPanelCtrlPos> {
+  /**
+   * @description 面板控制器
+   * @exposedoc
+   * @type {PanelController}
+   */
+  declare panel: ViewLayoutPanelController;
+
+  /**
+   * @description 部件控制器
+   * @exposedoc
+   * @type {IControlController}
+   */
+  control?: IControlController;
+
+  /**
+   * 绑定部件控制器
+   * @author lxm
+   * @date 2023-08-09 10:42:30
+   * @param {IControlController} controller
+   */
+  bindControl(controller: IControlController): void {
+    this.control = controller;
+
+    // 绑定部件，并监听所有事件，通过面板转发部件的事件。
+    controller.evt.onAll((eventName, event) => {
+      this.panel.evt.emit('onControlEvent', {
+        triggerControlName: this.model.id!,
+        triggerEventName: eventName,
+        triggerEvent: event,
+      });
+    });
+  }
+}

package/src/panel-component/panel-ctrl-pos/panel-ctrl-pos.provider.ts

@@ -0,0 +1,30 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelCtrlPos } from '@ibiz/model-core';
+import { PanelCtrlPosController } from './panel-ctrl-pos.controller';
+
+/**
+ * 面板控件占位适配器
+ *
+ * @author lxm
+ * @date 2022-09-19 22:09:03
+ * @export
+ * @class PanelCtrlPosProvider
+ * @implements {EditorProvider}
+ */
+export class PanelCtrlPosProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelCtrlPos';
+
+  async createController(
+    panelItem: IPanelCtrlPos,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelCtrlPosController> {
+    const c = new PanelCtrlPosController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

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

@@ -0,0 +1,8 @@
+@include b(panel-ctrl-pos) {
+  width: 100%;
+  height: 100%;
+
+  @include when(hidden) {
+    display: none;
+  }
+}