@ibiz-template/vue3-util 0.4.4 → 0.4.5

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

@@ -0,0 +1,43 @@
+import { PanelItemController } from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelContainerGroupState } from './panel-container-group.state';
+
+/**
+ * 面板分组容器控制器
+ *
+ * @export
+ * @class PanelContainerGroupController
+ * @extends {PanelItemController}
+ */
+export class PanelContainerGroupController extends PanelItemController<IPanelContainer> {
+  declare state: PanelContainerGroupState;
+
+  protected createState(): PanelContainerGroupState {
+    return new PanelContainerGroupState(this.parent?.state);
+  }
+
+  /**
+   * 禁用关闭
+   *
+   * @author chitanda
+   * @date 2022-09-14 14:09:51
+   * @readonly
+   * @type {boolean}
+   */
+  get disableClose(): boolean {
+    const { titleBarCloseMode: mode } = this.model;
+    return mode === 0 || mode === undefined;
+  }
+
+  /**
+   * 是否默认展开分组
+   *
+   * @author chitanda
+   * @date 2022-09-14 14:09:09
+   * @readonly
+   */
+  get defaultExpansion(): boolean {
+    const { titleBarCloseMode: mode } = this.model;
+    return this.disableClose || mode === 1;
+  }
+}

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

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

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

@@ -0,0 +1,91 @@
+$panel-container-group: (
+  'bg-color': transparent,
+);
+
+$panel-container-group-header: (
+  'bg-color': transparent,
+  'padding': getCssVar(spacing, base, tight),
+  'border-color': getCssVar('color', 'border'),
+  'height': 49px,
+);
+
+$panel-container-group-caption: (
+  'text-color': getCssVar(color, text, 0),
+  'font-size': getCssVar('font-size', 'header-5'),
+  'font-weight': getCssVar(font-weight, bold),
+);
+
+$panel-container-group-content: (
+  'bg-color': transparent,
+  'padding': getCssVar(spacing, tight),
+);
+
+@include b(panel-container-group) {
+  @include set-component-css-var('panel-container-group', $panel-container-group);
+  @include set-component-css-var('panel-container-group-header', $panel-container-group-header);
+  @include set-component-css-var('panel-container-group-caption', $panel-container-group-caption);
+  @include set-component-css-var('panel-container-group-content', $panel-container-group-content);
+}
+
+@include b(panel-container-group) {
+  height: 100%;
+  background-color: getCssVar('panel-container-group', 'bg-color');
+  border-radius: getCssVar('border-radius', 'base');
+
+  @include e(caption) {
+    @include utils-ellipsis;
+
+    font-size: getCssVar('panel-container-group-caption', 'font-size');
+    font-weight: getCssVar('panel-container-group-caption', 'font-weight');
+    color: getCssVar('panel-container-group-caption', 'text-color');
+  }
+}
+
+// 折叠相关样式
+@include b(panel-container-group-collapse) {
+  > .#{bem(panel-container-group-content)} {
+    display: block;
+  }
+
+  @include when(collapse) {
+    > .#{bem(panel-container-group-content)} {
+      display: none;
+    }
+  }
+}
+
+@include b(panel-container-group-header) {
+  @include flex;
+
+  height: getCssVar('panel-container-group-header', 'height');
+  padding: getCssVar('panel-container-group-header', 'padding');
+  margin: getCssVar('panel-container-group-header', 'margin');
+  border-bottom: 1px solid getCssVar('panel-container-group-header', 'border-color');
+
+  @include e((left, right)) {
+    display: inline-block;
+    width: 50%;
+  }
+
+  @include e(right) {
+    text-align: right;
+    @include flex(row, flex-end, center);
+  }
+}
+
+@include b(panel-container-group-content) {
+  width: 100%;
+  height: 100%;
+  @include e(row){
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{bem('panel-container-group', '', 'show-header')} {
+  > .#{bem('panel-container-group-content')} {
+    height: calc(100% - getCssVar('panel-container-group-header', 'height'));
+    padding: getCssVar('panel-container-group-content', 'padding');
+    background-color: getCssVar('panel-container-group-content', 'bg-color');
+  }
+}

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

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

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

@@ -0,0 +1,112 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, ref, VNode } from 'vue';
+import { PanelContainerGroupController } from './panel-container-group.controller';
+import './panel-container-group.scss';
+import { useNamespace } from '../../use';
+
+export const PanelContainerGroup = defineComponent({
+  name: 'IBizPanelContainerGroup',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: PanelContainerGroupController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-container-group');
+
+    const isCollapse = ref(!props.controller.defaultExpansion);
+
+    const changeCollapse = (): void => {
+      if (!props.controller.disableClose) {
+        isCollapse.value = !isCollapse.value;
+      }
+    };
+
+    const captionText = computed(() => {
+      const { captionItemName, caption, capLanguageRes } = props.modelData;
+      if (captionItemName) {
+        return props.controller.data[captionItemName];
+      }
+      let text = caption;
+      if (capLanguageRes) {
+        text = ibiz.i18n.t(capLanguageRes.lanResTag!, caption);
+      }
+      return text;
+    });
+
+    return { ns, captionText, changeCollapse, isCollapse };
+  },
+  render() {
+    const classArr: string[] = [
+      this.ns.b(),
+      this.ns.m(this.modelData.id),
+      ...this.controller.containerClass,
+      this.ns.is('hidden', !this.controller.state.visible),
+    ];
+    if (this.modelData.showCaption === true) {
+      classArr.push(this.ns.m('show-header'));
+      classArr.push(this.ns.b('collapse'));
+      classArr.push(this.ns.is('collapse', this.isCollapse));
+      if (this.controller.disableClose) {
+        classArr.push(this.ns.bm('collapse', 'disable-close'));
+      }
+    }
+
+    // 内容区默认插槽处理，封装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>
+    );
+
+    // 头部绘制
+    let header: unknown = null;
+    if (this.modelData.showCaption) {
+      header = (
+        <div class={[this.ns.b('header')]} onClick={this.changeCollapse}>
+          <div class={[this.ns.be('header', 'left')]}>
+            <div class={[this.ns.e('caption'), ...this.controller.labelClass]}>
+              {this.captionText}
+            </div>
+          </div>
+          <div class={[this.ns.be('header', 'right')]}>
+            {this.modelData.titleBarCloseMode !== undefined &&
+              this.modelData.titleBarCloseMode !== 0 &&
+              (this.isCollapse ? (
+                <ion-icon name='caret-forward-sharp' />
+              ) : (
+                <ion-icon name='caret-down-sharp' />
+              ))}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div class={classArr}>
+        {header}
+        <div class={[this.ns.b('content')]}>{content}</div>
+      </div>
+    );
+  },
+});

package/src/panel-component/panel-tab-page/index.ts

@@ -0,0 +1,12 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { PanelTabPage } from './panel-tab-page';
+import { PanelTabPageProvider } from './panel-tab-page.provider';
+import { withInstall } from '../../util';
+
+export const IBizPanelTabPage = withInstall(PanelTabPage, function (v: App) {
+  v.component(PanelTabPage.name, PanelTabPage);
+  registerPanelItemProvider('TABPAGE', () => new PanelTabPageProvider());
+});
+
+export default IBizPanelTabPage;

package/src/panel-component/panel-tab-page/panel-tab-page.provider.ts

@@ -0,0 +1,27 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+
+/**
+ * 面板分页适配器
+ *
+ * @export
+ * @class PanelTabPageController
+ * @implements {IPanelItemProvider}
+ */
+export class PanelTabPageProvider implements IPanelItemProvider {
+  component: string = 'IBizPanelTabPage';
+
+  async createController(
+    panelItem: IPanelItem,
+    panel: PanelController,
+    parent: PanelItemController | undefined,
+  ): Promise<PanelItemController> {
+    const c = new PanelItemController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}

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

@@ -0,0 +1,55 @@
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { IPanelContainer } from '@ibiz/model-core';
+import { PanelItemController } from '@ibiz-template/runtime';
+import { useNamespace } from '../../use';
+
+export const PanelTabPage = defineComponent({
+  name: 'IBizPanelTabPage',
+  props: {
+    modelData: {
+      // IPanelTabPage 不能使用 IPanelTabPage模型 否则会类型报错
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: PanelItemController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('panel-tab-page');
+    // 类名控制
+    const classArr = computed(() => {
+      const { id } = props.modelData;
+      const result: Array<string | false> = [ns.b(), ns.m(id)];
+      result.push(...props.controller.containerClass);
+      return result;
+    });
+    return {
+      ns,
+      classArr,
+    };
+  },
+  render() {
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+    return (
+      <iBizRow
+        class={[this.ns.b(), this.ns.m(this.modelData.codeName), this.classArr]}
+        layout={this.modelData.layout}
+      >
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+          const c = props.controller;
+          return (
+            <iBizCol layoutPos={c.model.layoutPos} state={c.state}>
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+  },
+});

package/src/plugin/plugin-factory/plugin-factory.ts

@@ -77,6 +77,16 @@ export class PluginFactory implements IPluginFactory {
    */
   protected ignoreRules: (string | RegExp)[] = [];
 
+  /**
+   * 插件加载队列
+   *
+   * @author chitanda
+   * @date 2023-12-05 16:12:04
+   * @protected
+   * @type {Map<string, Promise<boolean>>}
+   */
+  protected loadQueue: Map<string, Promise<boolean>> = new Map();
+
   /**
    * 是否忽略插件加载
    *
@@ -174,13 +184,35 @@ export class PluginFactory implements IPluginFactory {
     if (plugin.runtimeObject === true) {
       const pluginRef = plugin as unknown as IAppPFPluginRef;
       if (pluginRef) {
+        const rtObjectName = pluginRef.rtobjectName!;
+        const rtObjectRepo = pluginRef.rtobjectRepo!;
+        if (this.isIgnore(rtObjectRepo)) {
+          return true;
+        }
+        if (this.pluginCache.has(rtObjectName)) {
+          return true;
+        }
+        if (this.loadQueue.has(rtObjectRepo)) {
+          const p = await this.loadQueue.get(rtObjectRepo)!;
+          try {
+            const result = await p;
+            return result;
+          } catch (error) {
+            return false;
+          }
+        }
         try {
-          await this.loadPluginRef(
+          const p = this.loadPluginRef(
             pluginRef.rtobjectName!,
             pluginRef.rtobjectRepo!,
           );
+          this.loadQueue.set(rtObjectRepo, p);
+          const result = await p;
+          return result;
         } catch (error) {
           throw new RuntimeModelError(pluginRef, `配置加载失败`);
+        } finally {
+          this.loadQueue.delete(rtObjectRepo);
         }
       }
     }
@@ -249,15 +281,9 @@ export class PluginFactory implements IPluginFactory {
    */
   protected async loadScript(remotePlugin: RemotePluginItem): Promise<void> {
     const pluginPath: string = remotePlugin.repo;
-    const { name, system, module, styles } = remotePlugin.config;
+    const { name, system, styles = [] } = remotePlugin.config;
     let scriptUrl = '';
-    if (ibiz.env.dev) {
-      scriptUrl = this.urlReg.test(pluginPath)
-        ? `${pluginPath}/${join(module)}`
-        : `${ibiz.env.pluginBaseUrl}/${pluginPath}/${join(module)}`;
-    } else {
-      scriptUrl = join(pluginPath, system);
-    }
+    scriptUrl = join(pluginPath, system);
     if (scriptUrl) {
       if (this.cache.has(scriptUrl)) {
         return;
@@ -267,20 +293,16 @@ export class PluginFactory implements IPluginFactory {
       const styleUrls = (typeof styles === 'string' ? [styles] : styles).map(
         styleUrl => this.parseUrl(path.join(pluginPath, styleUrl)),
       );
-      if (ibiz.env.dev) {
-        data = await import(/* @vite-ignore */ scriptUrl);
-      } else {
-        System.addImportMap({
-          imports: {
-            [name]: url,
-          },
-          styles: {
-            [name]: styleUrls,
-          },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        } as any);
-        data = await System.import(name);
-      }
+      System.addImportMap({
+        imports: {
+          [name]: url,
+        },
+        styles: {
+          [name]: styleUrls,
+        },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any);
+      data = await System.import(name);
       if (data) {
         if (data.default) {
           this.setPluginCode(data.default);