@ibiz-template/vue3-components 0.0.1-alpha.1 → 0.0.1-alpha.3

package/src/{control/panel → panel-component}/panel-container/panel-container.tsx

@@ -1,6 +1,5 @@
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { IPanelContainer } from '@ibiz/model-core';
-import { kebabCase } from 'lodash-es';
 import { computed, defineComponent, PropType, ref, VNode } from 'vue';
 import { PanelContainerController } from './panel-container.controller';
 import './panel-container.scss';
@@ -19,8 +18,7 @@ export const PanelContainer = defineComponent({
   },
   setup(props) {
     const ns = useNamespace('panel-container');
-    const { showCaption, titleBarCloseMode, codeName } = props.modelData;
-    const modelClass = kebabCase(codeName);
+    const { showCaption, titleBarCloseMode, id } = props.modelData;
     const collapsible = titleBarCloseMode !== 0;
     const isCollapse = ref(titleBarCloseMode === 2);
     const changeCollapse = () => {
@@ -31,7 +29,7 @@ export const PanelContainer = defineComponent({
 
     // 类名控制
     const classArr = computed(() => {
-      let result: Array<string | false> = [ns.b(), ns.m(modelClass)];
+      let result: Array<string | false> = [ns.b(), ns.m(id)];
       if (showCaption === true) {
         result = [
           ...result,

package/src/{control/panel → panel-component}/panel-ctrl-pos/index.ts

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

package/src/{control/panel → panel-component}/panel-ctrl-pos/panel-ctrl-pos-provider.ts

@@ -1,7 +1,6 @@
 import { IPanelItemProvider } from '@ibiz-template/runtime';
 import { IPanelCtrlPos } from '@ibiz/model-core';
-import { PanelItemController } from '../panel/panel-item.controller';
-import { PanelController } from '../panel/panel.controller';
+import { PanelController, PanelItemController } from '../../control';
 import { PanelCtrlPosController } from './panel-ctrl-pos.controller';
 
 /**
@@ -20,7 +19,7 @@ export class PanelCtrlPosProvider implements IPanelItemProvider {
     panelItem: IPanelCtrlPos,
     panel: PanelController,
     parent: PanelItemController | undefined,
-  ): Promise<PanelItemController> {
+  ): Promise<PanelCtrlPosController> {
     const c = new PanelCtrlPosController(panelItem, panel, parent);
     await c.init();
     return c;

package/src/{control/panel → panel-component}/panel-ctrl-pos/panel-ctrl-pos.controller.ts

@@ -1,6 +1,5 @@
 import { IPanelCtrlPos } from '@ibiz/model-core';
-import { PanelItemController } from '../panel/panel-item.controller';
-import { ViewLayoutPanelController } from '../view-layout-panel/view-layout-panel.controller';
+import { PanelItemController, ViewLayoutPanelController } from '../../control';
 
 /**
  * 面板控件占位控制器

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

@@ -0,0 +1,4 @@
+@include b(panel-ctrl-pos){
+  height: 100%;
+  width: 100%;
+}

package/src/{control/panel → panel-component}/panel-ctrl-pos/panel-ctrl-pos.tsx

@@ -2,6 +2,7 @@ import { useNamespace } from '@ibiz-template/vue3-util';
 import { IPanelCtrlPos } from '@ibiz/model-core';
 import { defineComponent, PropType, VNode } from 'vue';
 import { PanelCtrlPosController } from './panel-ctrl-pos.controller';
+import './panel-ctrl-pos.scss';
 
 export const PanelCtrlPos = defineComponent({
   name: 'PanelCtrlPos',
@@ -31,8 +32,8 @@ export const PanelCtrlPos = defineComponent({
     }
 
     return (
-      <div class={[this.ns.b()]}>
-        {content || '外部没有注入占位对应的插槽或者没有找到对应视图部件'}
+      <div class={[this.ns.b(), this.ns.m(this.modelData.id)]}>
+        {content || `未提供${this.modelData.id}插槽`}
       </div>
     );
   },

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

@@ -0,0 +1,44 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { App } from 'vue';
+import { ScrollContainerItem } from './scroll-container-item/scroll-container-item';
+import { ScrollContainerItemProvider } from './scroll-container-item/scroll-container-item-provider';
+import { ScrollContainer } from './scroll-container/scroll-container';
+import { ScrollContainerProvider } from './scroll-container/scroll-container-provider';
+
+export * from './scroll-container';
+export * from './scroll-container-item';
+
+export const IBizScrollContainer = withInstall(
+  ScrollContainer,
+  function (v: App) {
+    v.component(ScrollContainer.name, ScrollContainer);
+    v.component(ScrollContainerItem.name, ScrollContainerItem);
+    registerPanelItemProvider(
+      'CONTAINER_BORDER',
+      () => new ScrollContainerProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_BORDER_WEST',
+      () => new ScrollContainerItemProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_BORDER_NORTH',
+      () => new ScrollContainerItemProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_BORDER_EAST',
+      () => new ScrollContainerItemProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_BORDER_SOUTH',
+      () => new ScrollContainerItemProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_BORDER_CENTER',
+      () => new ScrollContainerItemProvider(),
+    );
+  },
+);
+
+export default IBizScrollContainer;

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

@@ -0,0 +1,3 @@
+export * from './scroll-container-provider';
+export * from './scroll-container.controller';
+export * from './scroll-container';

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

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

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

@@ -0,0 +1,32 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import {
+  PanelItemController,
+  ViewLayoutPanelController,
+} from '../../../control';
+
+/**
+ * 面板滚动容器控制器
+ *
+ * @author lxm
+ * @date 2023-02-07 06:05:23
+ * @export
+ * @class PanelButtonController
+ * @extends {PanelItemController}
+ */
+export class ScrollContainerController extends PanelItemController<IPanelContainer> {
+  /**
+   * 面板控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 22:08:59
+   * @type {PanelController}
+   */
+  declare panel: ViewLayoutPanelController;
+
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    // 滚动容器高宽默认占满
+    this.state.layoutController.width = '100%';
+    this.state.layoutController.height = '100%';
+  }
+}

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

@@ -0,0 +1,30 @@
+@include b(scroll-container) {
+  width: 100%;
+  height: 100%;
+  @include flex(column);
+
+}
+
+@include b(scroll-container-content){
+  flex-grow: 1;
+  overflow: auto;
+  @include flex();
+  @include e(center){
+    overflow: auto;
+    flex-grow: 1;
+  }
+  @include e(left) {
+    overflow: auto;
+  }
+  @include e(right) {
+    overflow: auto;
+  }
+}
+
+@include b(scroll-container-header){
+  overflow: auto;
+}
+@include b(scroll-container-footer){
+  overflow: auto;
+}
+

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

@@ -0,0 +1,108 @@
+/* eslint-disable no-restricted-syntax */
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { ScrollContainerController } from './scroll-container.controller';
+import './scroll-container.scss';
+
+export const ScrollContainer = defineComponent({
+  name: 'ScrollContainer',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: ScrollContainerController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('scroll-container');
+    const { id } = props.modelData;
+
+    // 类名控制
+    const classArr = computed(() => {
+      const result: Array<string | false> = [ns.b(), ns.m(id)];
+      return result;
+    });
+
+    return { ns, classArr };
+  },
+  render() {
+    if (!this.controller.state.visible) {
+      return null;
+    }
+    let left: VNode | null = null;
+    let top: VNode | null = null;
+    let right: VNode | null = null;
+    let bottom: VNode | null = null;
+    let center: VNode | null = null;
+
+    const slotStylle: IData = {};
+
+    // 内容区默认插槽处理,处理滚动容器项
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+    defaultSlots.forEach(slot => {
+      const props = slot.props as IData;
+      if (!props || !props.controller) {
+        return;
+      }
+
+      const layoutController = props.controller.state.layoutController;
+      switch (props.modelData.layoutPos.layoutPos) {
+        case 'WEST':
+          left = slot;
+          slotStylle.left = { width: layoutController.width };
+          break;
+        case 'EAST':
+          right = slot;
+          slotStylle.right = { width: layoutController.width };
+          break;
+        case 'NORTH':
+          top = slot;
+          slotStylle.top = { height: layoutController.height };
+          break;
+        case 'SOUTH':
+          bottom = slot;
+          slotStylle.bottom = { height: layoutController.height };
+          break;
+        case 'CENTER':
+          center = slot;
+          break;
+        default:
+          ibiz.log.debug(
+            `未适配的布局占位${props.modelData.layoutPos.layoutPos}`,
+          );
+          break;
+      }
+    });
+
+    // 如果配了高宽，默认给压缩比为0
+    for (const key in slotStylle) {
+      if (slotStylle[key].width || slotStylle[key].height) {
+        slotStylle[key].flexShrink = 0;
+      }
+    }
+
+    return (
+      <div class={this.classArr}>
+        <div class={[this.ns.e('header')]} style={slotStylle.top}>
+          {top}
+        </div>
+        <div class={[this.ns.b('content')]}>
+          <div class={this.ns.be('content', 'left')} style={slotStylle.left}>
+            {left}
+          </div>
+          <div class={this.ns.be('content', 'center')}>{center}</div>
+          <div class={this.ns.be('content', 'right')} style={slotStylle.right}>
+            {right}
+          </div>
+        </div>
+        <div class={[this.ns.e('footer')]} style={slotStylle.bottom}>
+          {bottom}
+        </div>
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,3 @@
+export * from './scroll-container-item-provider';
+export * from './scroll-container-item.controller';
+export * from './scroll-container-item';

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

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

package/src/panel-component/scroll-container/scroll-container-item/scroll-container-item.controller.ts

@@ -0,0 +1,25 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import {
+  PanelItemController,
+  ViewLayoutPanelController,
+} from '../../../control';
+
+/**
+ * 面板滚动容器项控制器
+ *
+ * @author lxm
+ * @date 2023-02-07 06:05:23
+ * @export
+ * @class PanelButtonController
+ * @extends {PanelItemController}
+ */
+export class ScrollContainerItemController extends PanelItemController<IPanelContainer> {
+  /**
+   * 面板控制器
+   *
+   * @author lxm
+   * @date 2022-08-24 22:08:59
+   * @type {PanelController}
+   */
+  declare panel: ViewLayoutPanelController;
+}

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

@@ -0,0 +1,5 @@
+@include b(scroll-container-item) {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}

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

@@ -0,0 +1,59 @@
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { ScrollContainerItemController } from './scroll-container-item.controller';
+import './scroll-container-item.scss';
+
+export const ScrollContainerItem = defineComponent({
+  name: 'ScrollContainerItem',
+  props: {
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    controller: {
+      type: ScrollContainerItemController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('scroll-container-item');
+    const { id } = props.modelData;
+
+    // 类名控制
+    const classArr = computed(() => {
+      const result: Array<string | false> = [ns.b(), ns.m(id)];
+      return result;
+    });
+
+    return { ns, classArr };
+  },
+  render() {
+    if (!this.controller.state.visible) {
+      return null;
+    }
+    // 内容区默认插槽处理，封装app-col
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+
+    return (
+      <app-row class={this.classArr} layout={{ layout: 'FLEX' }}>
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+
+          props.modelData.layoutPos.layout = 'FLEX';
+          return (
+            <app-col
+              layoutPos={props.modelData.layoutPos}
+              controller={props.controller.state.layoutController}
+            >
+              {slot}
+            </app-col>
+          );
+        })}
+      </app-row>
+    );
+  },
+});

package/src/view/ibiz-view.scss

@@ -0,0 +1,13 @@
+// 视图默认撑满父容器
+@include b(view) {
+  width: 100%;
+  height: 100%;
+}
+
+// 首页视图默认占满屏幕
+@include b(view-appindexview) {
+  &.#{bem(view)} {
+    width: 100vw;
+    height: 100vh;
+  }
+}

package/src/view/ibiz-view.tsx

@@ -0,0 +1,75 @@
+import { IModal, ViewController } from '@ibiz-template/runtime';
+import { useNamespace, useViewController } from '@ibiz-template/vue3-util';
+import { IAppView } from '@ibiz/model-core';
+import { defineComponent, h, PropType, resolveComponent } from 'vue';
+import './ibiz-view.scss';
+
+export const IBizView = defineComponent({
+  name: 'IBizView',
+  props: {
+    context: Object as PropType<IContext>,
+    params: { type: Object as PropType<IParams>, default: () => ({}) },
+    modelData: { type: Object as PropType<IAppView>, required: true },
+    modal: { type: Object as PropType<IModal> },
+  },
+  setup() {
+    const ns = useNamespace('view');
+    const c = useViewController((...args) => new ViewController(...args));
+    // 视图部件模型在viewlayoutPanel里面。
+    const controls = c.model.viewLayoutPanel?.controls;
+
+    const { viewType, sysCss, codeName } = c.model;
+    const typeClass = viewType!.toLowerCase();
+    const sysCssName = sysCss?.cssName;
+    const viewClassNames = [
+      ns.b(),
+      true && ns.b(typeClass),
+      true && ns.m(codeName),
+      true && sysCssName,
+    ];
+
+    return { c, controls, viewClassNames };
+  },
+  render() {
+    let layoutPanel = null;
+    if (this.c.state.complete) {
+      // 绘制部件插槽，外部插槽优先
+      const slots: IData = {
+        ...this.$slots,
+      };
+      if (this.controls?.length) {
+        this.controls.forEach(ctrl => {
+          // 已经有插槽的不用自己绘制了。
+          if (slots[ctrl.name!]) {
+            return;
+          }
+          const provider = this.c.providers[ctrl.name!];
+          if (provider) {
+            slots[ctrl.name!] = () => {
+              return h(resolveComponent(provider.component) as string, {
+                modelData: ctrl,
+                context: this.c.context,
+                params: this.params,
+              });
+            };
+          }
+        });
+      }
+
+      // 绘制视图布局面板
+      const viewLayoutPanel = this.c.model.viewLayoutPanel!;
+      const provider = this.c.providers[viewLayoutPanel.name!];
+      layoutPanel = h(
+        resolveComponent(provider.component) as string,
+        {
+          modelData: viewLayoutPanel,
+          context: this.c.context,
+          params: this.params,
+        },
+        slots,
+      );
+    }
+
+    return <div class={this.viewClassNames}>{layoutPanel}</div>;
+  },
+});

package/src/{views/view → view}/index.ts

@@ -1,6 +1,6 @@
-import { ViewType } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
 import { App } from 'vue';
-import { withInstall } from '../../util/install';
+import { registerViewProvider } from '@ibiz-template/runtime';
 import { ViewProvider } from './view-provider';
 import { IBizView as View } from './ibiz-view';
 
@@ -8,5 +8,5 @@ export { ViewProvider };
 
 export const IBizView = withInstall(View, function (v: App) {
   v.component(IBizView.name, IBizView);
-  ibiz.register.view.register(ViewType.DE_GRID_VIEW, new ViewProvider());
+  registerViewProvider('DEFAULT', () => new ViewProvider());
 });