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

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

@@ -0,0 +1,44 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { App } from 'vue';
+import { withInstall } from '../../util';
+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_CONTAINER_SCROLL',
+      () => new ScrollContainerProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_SCROLL_LEFT',
+      () => new ScrollContainerItemProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_SCROLL_HEADER',
+      () => new ScrollContainerItemProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_SCROLL_RIGHT',
+      () => new ScrollContainerItemProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_SCROLL_BOTTOM',
+      () => new ScrollContainerItemProvider(),
+    );
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_SCROLL_MAIN',
+      () => new ScrollContainerItemProvider(),
+    );
+  },
+);
+
+export default IBizScrollContainer;

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

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

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

@@ -0,0 +1,29 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import {
+  PanelContainerController,
+  ViewLayoutPanelController,
+} from '@ibiz-template/runtime';
+
+/**
+ * @description 面板滚动容器控制器
+ * @export
+ * @class ScrollContainerController
+ * @extends {PanelContainerController<IPanelContainer>}
+ */
+export class ScrollContainerController extends PanelContainerController<IPanelContainer> {
+  /**
+   * @description 视图布局面板部件控制器
+   * @exposedoc
+   * @export
+   * @type {ViewLayoutPanelController}
+   * @memberof ScrollContainerController
+   */
+  declare panel: ViewLayoutPanelController;
+
+  protected async onInit(): Promise<void> {
+    await super.onInit();
+    // 滚动容器高宽默认占满
+    this.state.layout.width = '100%';
+    this.state.layout.height = '100%';
+  }
+}

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

@@ -0,0 +1,30 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+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 = 'IBizScrollContainer';
+
+  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.scss

@@ -0,0 +1,40 @@
+@include b(scroll-container) {
+  width: 100%;
+  height: 100%;
+  @include flex(column);
+
+  @include when(hidden) {
+    display: none;
+  }
+
+}
+
+@include b(scroll-container-content){
+  flex-grow: 1;
+  overflow: auto;
+  @include flex;
+  @include e(center){
+    flex-grow: 1;
+    overflow: auto;
+
+    >.#{bem(scroll-container-item)} {
+      >.#{bem(col)} {
+        flex: none;
+      }
+    }
+  }
+  @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,155 @@
+/* eslint-disable no-restricted-syntax */
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { useNamespace, useSemanticNode } from '../../../use';
+import { ScrollContainerController } from './scroll-container.controller';
+import './scroll-container.scss';
+
+/**
+ * 滚动容器
+ * @primary
+ * @description 撑满父容器，并为内部元素提供超出滚动效果，可配置上下左右元素。
+ */
+export const ScrollContainer = defineComponent({
+  name: 'IBizScrollContainer',
+  props: {
+    /**
+     * @description 滚动容器模型
+     */
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    /**
+     * @description 滚动容器控制器
+     */
+    controller: {
+      type: ScrollContainerController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('scroll-container');
+    const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
+    // 类名控制
+    const classArr = computed(() => {
+      const result: Array<string | false> = [
+        ns.b(),
+        ns.m(id),
+        ...props.controller.containerClass,
+        ns.is('hidden', !props.controller.state.visible),
+      ];
+      return result;
+    });
+
+    return { ns, classArr, semanticClass, semanticStyle };
+  },
+  render() {
+    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 { width, height } = props.controller.state.layout;
+      switch (props.modelData.layoutPos.layoutPos) {
+        case 'WEST':
+          left = slot;
+          slotStylle.left = { width };
+          break;
+        case 'EAST':
+          right = slot;
+          slotStylle.right = { width };
+          break;
+        case 'NORTH':
+          top = slot;
+          slotStylle.top = { height };
+          break;
+        case 'SOUTH':
+          bottom = slot;
+          slotStylle.bottom = { height };
+          break;
+        case 'CENTER':
+          center = slot;
+          break;
+        default:
+          ibiz.log.debug(
+            ibiz.i18n.t('vue3Util.panelComponent.unadaptedLayout', {
+              layoutPos: 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, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
+        v-loading={this.controller.state.loading}
+        element-loading-text={this.controller.state.loadingText}
+      >
+        <div
+          class={[this.ns.e('header'), this.semanticClass('header')]}
+          style={[slotStylle.top, this.semanticStyle('header')]}
+        >
+          {top}
+        </div>
+        <div
+          class={[this.ns.b('content'), this.semanticClass('content')]}
+          style={this.semanticStyle('content')}
+        >
+          <div
+            class={[this.ns.be('content', 'left'), this.semanticClass('left')]}
+            style={[slotStylle.left, this.semanticStyle('left')]}
+          >
+            {left}
+          </div>
+          <div
+            class={[
+              this.ns.be('content', 'center'),
+              this.semanticClass('center'),
+            ]}
+            style={this.semanticStyle('center')}
+          >
+            {center}
+          </div>
+          <div
+            class={[
+              this.ns.be('content', 'right'),
+              this.semanticClass('right'),
+            ]}
+            style={[slotStylle.right, this.semanticStyle('right')]}
+          >
+            {right}
+          </div>
+        </div>
+        <div
+          class={[this.ns.e('footer'), this.semanticClass('footer')]}
+          style={[slotStylle.bottom, this.semanticStyle('footer')]}
+        >
+          {bottom}
+        </div>
+      </div>
+    );
+  },
+});

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

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

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

@@ -0,0 +1,21 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import {
+  PanelContainerController,
+  ViewLayoutPanelController,
+} from '@ibiz-template/runtime';
+
+/**
+ * @description 面板滚动容器项控制器
+ * @export
+ * @class ScrollContainerItemController
+ * @extends {PanelContainerController<IPanelContainer>}
+ */
+export class ScrollContainerItemController extends PanelContainerController<IPanelContainer> {
+  /**
+   * @description 视图布局面板部件控制器
+   * @exposedoc
+   * @type {ViewLayoutPanelController}
+   * @memberof ScrollContainerItemController
+   */
+  declare panel: ViewLayoutPanelController;
+}

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

@@ -0,0 +1,30 @@
+import {
+  IPanelItemProvider,
+  PanelController,
+  PanelItemController,
+} from '@ibiz-template/runtime';
+import { IPanelContainer } from '@ibiz/model-core';
+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 = 'IBizScrollContainerItem';
+
+  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.scss

@@ -0,0 +1,9 @@
+@include b(scroll-container-item) {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  @include when(hidden) {
+    display: none;
+  }
+}

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

@@ -0,0 +1,80 @@
+import { IPanelContainer } from '@ibiz/model-core';
+import { computed, defineComponent, PropType, VNode } from 'vue';
+import { useNamespace, useSemanticNode } from '../../../use';
+import { ScrollContainerItemController } from './scroll-container-item.controller';
+import './scroll-container-item.scss';
+
+/**
+ * 面板滚动容器项
+ * @primary
+ * @description 用于绘制面板滚动容器项。
+ */
+export const ScrollContainerItem = defineComponent({
+  name: 'IBizScrollContainerItem',
+  props: {
+    /**
+     * @description 面板滚动容器项模型数据
+     */
+    modelData: {
+      type: Object as PropType<IPanelContainer>,
+      required: true,
+    },
+    /**
+     * @description 面板滚动容器项控制器
+     */
+    controller: {
+      type: ScrollContainerItemController,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace('scroll-container-item');
+    const { id } = props.modelData;
+    const { semanticClass, semanticStyle } = useSemanticNode(props.controller);
+
+    // 类名控制
+    const classArr = computed(() => {
+      const result: Array<string | false> = [
+        ns.b(),
+        ns.m(id),
+        ns.is('hidden', !props.controller.state.visible),
+      ];
+      return result;
+    });
+
+    return { ns, classArr, semanticClass, semanticStyle };
+  },
+  render() {
+    // 内容区默认插槽处理，封装app-col
+    const defaultSlots: VNode[] = this.$slots.default?.() || [];
+
+    return (
+      <iBizRow
+        class={[this.classArr, this.semanticClass('root')]}
+        style={this.semanticStyle('root')}
+        layout={{ layout: 'FLEX' }}
+        v-loading={this.controller.state.loading}
+        element-loading-text={this.controller.state.loadingText}
+      >
+        {defaultSlots.map(slot => {
+          const props = slot.props as IData;
+          if (!props || !props.controller) {
+            return slot;
+          }
+
+          props.modelData.layoutPos.layout = 'FLEX';
+          return (
+            <iBizCol
+              class={this.semanticClass('item', { props })}
+              style={this.semanticStyle('item', { props })}
+              layoutPos={props.modelData.layoutPos}
+              state={props.controller.state}
+            >
+              {slot}
+            </iBizCol>
+          );
+        })}
+      </iBizRow>
+    );
+  },
+});

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

@@ -0,0 +1,22 @@
+import { App } from 'vue';
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '../../util';
+import { SingleDataContainer } from './single-data-container';
+import { SingleDataContainerProvider } from './single-data-container.provider';
+import { SingleDataContainerState } from './single-data-container.state';
+import { SingleDataContainerController } from './single-data-container.controller';
+
+export { SingleDataContainerState, SingleDataContainerController };
+
+export const IBizSingleDataContainer = withInstall(
+  SingleDataContainer,
+  function (v: App) {
+    v.component(SingleDataContainer.name!, SingleDataContainer);
+    registerPanelItemProvider(
+      'CONTAINER_CONTAINER_SINGLEDATA',
+      () => new SingleDataContainerProvider(),
+    );
+  },
+);
+
+export default IBizSingleDataContainer;