@ibiz-template/vue3-util 0.2.11 → 0.2.12

package/src/common/control-shell/control-shell.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable vue/no-mutating-props */
+import {
+  CTX,
+  getControlProvider,
+  IControlProvider,
+} from '@ibiz-template/runtime';
+import {
+  defineComponent,
+  h,
+  inject,
+  PropType,
+  ref,
+  resolveComponent,
+} from 'vue';
+import './control-shell.scss';
+import { IControl } from '@ibiz/model-core';
+import { useNamespace } from '../../use';
+
+export const IBizControlShell = defineComponent({
+  name: 'IBizControlShell',
+  props: {
+    modelData: { type: Object as PropType<IControl>, required: true },
+  },
+  setup(props) {
+    // 上下文里提前预告部件
+    const ctx = inject('ctx') as CTX;
+
+    ctx.evt.emit('onForecast', props.modelData.name!);
+
+    const isComplete = ref(false);
+    const errMsg = ref('');
+    const provider = ref<IControlProvider>();
+    getControlProvider(props.modelData)
+      .then(item => {
+        if (!item) {
+          errMsg.value = `未找到对应部件的适配器`;
+        } else {
+          provider.value = item;
+        }
+        isComplete.value = true;
+      })
+      .catch(err => {
+        ibiz.log.error(err);
+        errMsg.value = err.message;
+        isComplete.value = true;
+      });
+    const ns = useNamespace('control-shell');
+
+    return { ns, isComplete, errMsg, provider };
+  },
+  render() {
+    if (this.isComplete && this.provider) {
+      return h(
+        resolveComponent(this.provider.component) as string,
+        {
+          provider: this.provider,
+          ...this.$props,
+          ...this.$attrs,
+        },
+        this.$slots,
+      );
+    }
+    return (
+      <div class={this.ns.b()} v-loading={!this.isComplete}>
+        {this.isComplete ? this.errMsg : null}
+      </div>
+    );
+  },
+});

package/src/common/icon/icon.tsx

@@ -0,0 +1,69 @@
+import { defineComponent, PropType, VNode, computed } from 'vue';
+import { ISysImage } from '@ibiz/model-core';
+import { IIcon } from '@ibiz-template/runtime';
+import { isSvg } from '@ibiz-template/core';
+import { useNamespace } from '../../use';
+
+export const IBizIcon = defineComponent({
+  name: 'IBizIcon',
+  props: {
+    icon: {
+      type: Object as PropType<ISysImage | IIcon>,
+    },
+    size: {
+      type: String as PropType<'small' | 'medium' | 'large'>,
+    },
+    baseDir: {
+      type: String,
+      default: 'images',
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('icon');
+    const BaseUrl = `${ibiz.env.assetsUrl}/${props.baseDir}/`;
+
+    function getContent(icon?: IData): VNode | null {
+      if (icon) {
+        if (icon.htmlStr) {
+          return <span class={ns.b()} v-html={icon.htmlStr}></span>;
+        }
+        if (icon.cssClass) {
+          if (icon.cssClass.indexOf('fa-') !== -1) {
+            return <i class={[ns.b(), icon.cssClass]} />;
+          }
+          return <ion-icon class={ns.b()} name={icon.cssClass}></ion-icon>;
+        }
+        if (icon.imagePath) {
+          if (icon.imagePath.endsWith('svg')) {
+            if (icon.imagePath.startsWith('http')) {
+              return <img class={ns.b()} src={icon.imagePath}></img>;
+            }
+            return (
+              <ion-icon
+                src={BaseUrl + icon.imagePath}
+                class={ns.b()}
+              ></ion-icon>
+            );
+          }
+          if (icon.imagePath.startsWith('http')) {
+            return <img class={ns.b()} src={icon.imagePath} />;
+          }
+          return <img class={ns.b()} src={BaseUrl + icon.imagePath} />;
+        }
+        if (icon.rawContent) {
+          if (isSvg(icon.rawContent)) {
+            return <div class={ns.b()} v-html={icon.rawContent}></div>;
+          }
+          return <img class={ns.b()} src={icon.rawContent} />;
+        }
+      }
+      return null;
+    }
+
+    const content = computed<VNode | null>(() => {
+      return getContent(props.icon);
+    });
+
+    return (): VNode | null => content.value;
+  },
+});

package/src/common/index.ts

@@ -0,0 +1,8 @@
+export * from './icon/icon';
+export * from './router-view/router-view';
+export * from './control-base/control-base';
+export * from './control-shell/control-shell';
+export * from './view-shell/view-shell';
+export * from './code-list/code-list';
+export * from './code-list/code-list';
+export * from './control-loading-placeholder/control-loading-placeholder';

package/src/common/router-view/router-view.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { isNotNil } from 'ramda';
+import { defineComponent, h, PropType, VNode, watch } from 'vue';
+import { RouteLocationNormalizedLoaded } from 'vue-router';
+
+/**
+ * 只会第一次绘制的时候绘制路由相关的内容，后面路由导致的router-view的回调都屏蔽了。
+ * 通过变更manualKey,来强制刷新router-view的slot回调。并且吧manualKey传给Component的key，搭配AppKeepAlive可以缓存组件
+ */
+
+export const IBizRouterView = defineComponent({
+  name: 'IBizRouterView',
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String as PropType<string>,
+      default: 'default',
+    },
+    route: Object as PropType<RouteLocationNormalizedLoaded>,
+    manualKey: {
+      type: String,
+    },
+  },
+  setup(props, { attrs }) {
+    const cache: { vNode?: VNode } = {};
+
+    let isActive = true;
+
+    watch(
+      () => props.manualKey,
+      (newVal, oldVal) => {
+        if (isNotNil(newVal) && newVal !== oldVal) {
+          isActive = true;
+        }
+      },
+    );
+
+    const renderComp = (Component: VNode, _route: any): VNode | undefined => {
+      // 非激活时返回缓存
+      if (!isActive) {
+        return cache.vNode;
+      }
+      isActive = false;
+      if (Component) {
+        const tempProps = { ...Component.props };
+        delete tempProps.onVnodeUnmounted;
+        delete tempProps.ref;
+        const hNode = h(Component.type as string, {
+          ...tempProps,
+          ...attrs,
+          key: props.manualKey,
+        });
+        cache.vNode = hNode;
+        return hNode;
+      }
+      return undefined;
+    };
+
+    return { renderComp };
+  },
+  render() {
+    return (
+      <router-view name={this.name} route={this.route}>
+        {({ Component, route }: any): VNode | VNode[] | undefined => {
+          const newComp = this.renderComp(Component, route);
+          if (this.$slots.default) {
+            return this.$slots.default({ Component: newComp, route });
+          }
+          return newComp;
+        }}
+      </router-view>
+    );
+  },
+});

package/src/common/view-shell/view-shell.scss

@@ -0,0 +1,5 @@
+@include b(view-shell) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

package/src/common/view-shell/view-shell.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable vue/no-mutating-props */
+import { getViewProvider, IViewProvider } from '@ibiz-template/runtime';
+import { defineComponent, h, PropType, ref, resolveComponent } from 'vue';
+import './view-shell.scss';
+import { IAppView } from '@ibiz/model-core';
+import { RuntimeError } from '@ibiz-template/core';
+import { useNamespace } from '../../use';
+
+export const IBizViewShell = defineComponent({
+  name: 'IBizViewShell',
+  props: {
+    context: { type: Object as PropType<IContext>, required: true },
+    params: { type: Object as PropType<IParams> },
+    modelData: { type: Object as PropType<IAppView> },
+    viewId: { type: String },
+  },
+  setup(props) {
+    const ns = useNamespace('view-shell');
+    const isComplete = ref(false);
+    const errMsg = ref('');
+    const provider = ref<IViewProvider>();
+    const viewModelData = ref<IAppView | undefined>();
+    // 初始化方法
+    const init = async (): Promise<void> => {
+      let viewModel: IAppView | undefined;
+      if (props.modelData) {
+        viewModel = props.modelData;
+      } else {
+        viewModel = await ibiz.hub.getAppView(props.viewId!);
+      }
+      if (!viewModel) {
+        throw new RuntimeError('未找到视图模型');
+      }
+      viewModelData.value = viewModel;
+      try {
+        provider.value = await getViewProvider(viewModel);
+      } catch (error) {
+        ibiz.log.error(error);
+        errMsg.value = (error as IData).message;
+      } finally {
+        isComplete.value = true;
+      }
+    };
+
+    init();
+
+    return { ns, isComplete, errMsg, viewModelData, provider };
+  },
+  render() {
+    if (this.isComplete && this.provider) {
+      return h(
+        resolveComponent(this.provider.component) as string,
+        {
+          context: this.$props.context,
+          params: this.$props.params,
+          modelData: this.viewModelData,
+          ...this.$attrs,
+          provider: this.provider,
+        },
+        this.$slots,
+      );
+    }
+    return (
+      <div class={this.ns.b()} v-loading={!this.isComplete}>
+        {this.isComplete ? this.errMsg : null}
+      </div>
+    );
+  },
+});

package/src/index.ts

@@ -1,5 +1,8 @@
 import { App } from 'vue';
 
+export * from './common';
+export * from './panel-component';
+export * from './view';
 export * from './interface';
 export * from './plugin';
 export * from './use';

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

@@ -0,0 +1,18 @@
+import { PanelItemController } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { GridContainerState } from './grid-container.state';
+
+/**
+ * 面板栅格容器控制器
+ *
+ * @export
+ * @class GridContainerController
+ * @extends {PanelItemController}
+ */
+export class GridContainerController extends PanelItemController<IPanelContainer> {
+  declare state: GridContainerState;
+
+  protected createState(): GridContainerState {
+    return new GridContainerState(this.parent?.state);
+  }
+}

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

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

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

@@ -0,0 +1,17 @@
+$grid-container: (
+  'bg-color': getCssVar('bg-color', 'overlay'),
+  'padding': getCssVar('padding'),
+);
+
+// 默认样式
+@include b(grid-container) {
+  @include set-component-css-var('grid-container', $grid-container);
+
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  @include when(hidden) {
+    display: none;
+  }
+}

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

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

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

@@ -0,0 +1,119 @@
+import { IFlexLayoutPos, IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, ref, Ref, VNode } from 'vue';
+import { useNamespace } from '../../use';
+import { GridContainerController } from './grid-container.controller';
+import './grid-container.scss';
+
+export const GridContainer = defineComponent({
+  name: 'IBizGridContainer',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: GridContainerController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('grid-container');
+    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 layoutModel = computed(() => {
+      return { ...props.modelData.layout, layout: 'TABLE_12COL' };
+    });
+
+    const convertLayoutPos = (
+      layoutPos: IFlexLayoutPos,
+      adaptGrow: number,
+    ): IFlexLayoutPos => {
+      const result = {
+        ...layoutPos,
+        layout: 'TABLE_12COL',
+        colXS: layoutPos.grow || adaptGrow,
+        colSM: layoutPos.grow || adaptGrow,
+        colMD: layoutPos.grow || adaptGrow,
+        colLG: layoutPos.grow || adaptGrow,
+      };
+      delete result.grow;
+      return result;
+    };
+
+    // 自适应列个数, 算一次记录下来，后续不用计算
+    const adaptCols: Ref<undefined | number> = ref(undefined);
+    // 自适应列默认占据的grow
+    const adaptGrow: Ref<number> = ref(12);
+
+    return {
+      ns,
+      classArr,
+      layoutModel,
+      convertLayoutPos,
+      adaptGrow,
+      adaptCols,
+    };
+  },
+  render() {
+    // 内容区默认插槽处理，封装app-col
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+
+    if (this.adaptCols === undefined) {
+      // 当前已经配置的grow
+      let currentGrow = 0;
+      // 自适应列个数
+      let adaptCols = 0;
+      defaultSlots.forEach(slot => {
+        const props = slot.props as IData;
+        if (props && props.modelData && props.modelData.layoutPos) {
+          if (typeof props.modelData.layoutPos.grow === 'number') {
+            currentGrow += props.modelData.layoutPos.grow;
+          } else if (typeof props.modelData.layoutPos.grow === 'undefined') {
+            adaptCols += 1;
+          }
+        }
+      });
+      // 自适应列默认占据的grow
+      let adaptGrow = 12;
+      if (adaptCols > 0) {
+        adaptGrow = (12 - currentGrow) / adaptCols;
+      }
+      this.adaptCols = adaptCols;
+      this.adaptGrow = adaptGrow;
+    }
+
+    return (
+      <iBizRow class={this.classArr} layout={this.layoutModel}>
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+
+          return (
+            <iBizCol
+              layoutPos={this.convertLayoutPos(
+                props.modelData.layoutPos,
+                this.adaptGrow,
+              )}
+              state={props.controller.state}
+            >
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+  },
+});

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

@@ -0,0 +1,19 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { GridContainer } from './grid-container';
+import { GridContainerProvider } from './grid-container.provider';
+import { GridContainerState } from './grid-container.state';
+import { GridContainerController } from './grid-container.controller';
+
+export { GridContainerProvider, GridContainerState, GridContainerController };
+
+export const IBizGridContainer = withInstall(GridContainer, function (v: App) {
+  v.component(GridContainer.name, GridContainer);
+  registerPanelItemProvider(
+    'CONTAINER_CONTAINER_GRID',
+    () => new GridContainerProvider(),
+  );
+});
+
+export default IBizGridContainer;

package/src/panel-component/index.ts

@@ -0,0 +1,9 @@
+export * from './panel-container';
+export * from './panel-ctrl-pos';
+export * from './scroll-container';
+export * from './nav-pos';
+export * from './panel-field';
+export * from './panel-rawitem';
+export * from './multi-data-container';
+export * from './single-data-container';
+export * from './grid-container';

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

@@ -0,0 +1,26 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { MultiDataContainer } from './multi-data-container';
+import { MultiDataContainerProvider } from './multi-data-container.provider';
+import { MultiDataContainerState } from './multi-data-container.state';
+import { MultiDataContainerController } from './multi-data-container.controller';
+
+export {
+  MultiDataContainerProvider,
+  MultiDataContainerState,
+  MultiDataContainerController,
+};
+
+export const IBizMultiDataContainer = withInstall(
+  MultiDataContainer,
+  function (v: App) {
+    v.component(MultiDataContainer.name, MultiDataContainer);
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_MULTIDATA',
+      () => new MultiDataContainerProvider(),
+    );
+  },
+);
+
+export default IBizMultiDataContainer;