@ibiz-template/vue3-util 0.6.0 → 0.6.1-dev.1

package/src/panel-component/panel-item-render/panel-item-render.controller.ts

@@ -1,52 +0,0 @@
-import { IControlRender, IPanelContainer } from '@ibiz/model-core';
-import {
-  PanelItemController,
-  ScriptFactory,
-  ViewLayoutPanelController,
-} from '@ibiz-template/runtime';
-
-/**
- * 面板绘制器控制器
- *
- * @author zk
- * @date 2024-01-15 06:01:08
- * @export
- * @class PanelItemRenderController
- * @extends {PanelItemController<IPanelContainer>}
- */
-export class PanelItemRenderController extends PanelItemController<IPanelContainer> {
-  /**
-   * 面板控制器
-   *
-   * @author lxm
-   * @date 2022-08-24 22:08:59
-   * @type {PanelController}
-   */
-  declare panel: ViewLayoutPanelController;
-
-  /**
-   * 获取面板绘制器自定义html
-   *
-   * @author zk
-   * @date 2024-01-15 01:01:11
-   * @export
-   * @param {IControlRender[]} controlRenders
-   * @return {*}  {(string | undefined)}
-   */
-  getPanelItemCustomHtml(
-    controlRenders: IControlRender[],
-    data: IData | undefined,
-  ): string | undefined {
-    if (controlRenders.length === 0) {
-      return undefined;
-    }
-    const controlRender = controlRenders[0];
-    if (controlRender.layoutPanelModel) {
-      return ScriptFactory.execScriptFn(
-        { data: data || {} },
-        controlRender.layoutPanelModel,
-        { singleRowReturn: true, isAsync: false },
-      ) as string;
-    }
-  }
-}

package/src/panel-component/panel-item-render/panel-item-render.provider.ts

@@ -1,30 +0,0 @@
-import {
-  IPanelItemProvider,
-  PanelController,
-  PanelItemController,
-} from '@ibiz-template/runtime';
-import { IPanelContainer } from '@ibiz/model-core';
-import { PanelItemRenderController } from './panel-item-render.controller';
-
-/**
- * 面板绘制器适配器
- *
- * @author zk
- * @date 2024-01-15 06:01:32
- * @export
- * @class PanelItemRenderProvider
- * @implements {IPanelItemProvider}
- */
-export class PanelItemRenderProvider implements IPanelItemProvider {
-  component: string = 'IBizPanelItemRender';
-
-  async createController(
-    panelItem: IPanelContainer,
-    panel: PanelController,
-    parent: PanelItemController | undefined,
-  ): Promise<PanelItemRenderController> {
-    const c = new PanelItemRenderController(panelItem, panel, parent);
-    await c.init();
-    return c;
-  }
-}

package/src/panel-component/panel-item-render/panel-item-render.tsx

@@ -1,50 +0,0 @@
-import { IPanelContainer } from '@ibiz/model-core';
-import { computed, defineComponent, PropType } from 'vue';
-import { useNamespace } from '../../use';
-import { PanelItemRenderController } from './panel-item-render.controller';
-
-export const PanelItemRender = defineComponent({
-  name: 'IBizPanelItemRender',
-  props: {
-    modelData: {
-      type: Object as PropType<IPanelContainer>,
-      required: true,
-    },
-    controller: {
-      type: PanelItemRenderController,
-      required: true,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('panel-item-render');
-
-    const nsType = useNamespace(
-      `panel-${props.modelData.itemType?.toLowerCase()}`,
-    );
-
-    const { id } = props.modelData;
-
-    // 类名控制
-    const classArr = computed(() => {
-      const result: Array<string | false> = [
-        ns.b(),
-        ns.m(id),
-        nsType.b(),
-        ns.is('hidden', !props.controller.state.visible),
-      ];
-      return result;
-    });
-
-    const htmlCode = computed(() => {
-      return props.controller.getPanelItemCustomHtml(
-        props.modelData.controlRenders!,
-        props.controller.data,
-      );
-    });
-
-    return { ns, classArr, htmlCode };
-  },
-  render() {
-    return <div class={this.classArr} v-html={this.htmlCode}></div>;
-  },
-});

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

@@ -1,26 +0,0 @@
-import { registerPanelItemProvider } from '@ibiz-template/runtime';
-import { App } from 'vue';
-import { withInstall } from '../../util';
-import { PanelRawItem } from './panel-rawitem';
-import { PanelRawItemProvider } from './panel-rawitem.provider';
-
-export * from './panel-rawitem.controller';
-
-export const IBizPanelRawItem = withInstall(PanelRawItem, function (v: App) {
-  v.component(PanelRawItem.name, PanelRawItem);
-  registerPanelItemProvider('RAWITEM', () => new PanelRawItemProvider());
-  registerPanelItemProvider(
-    'RAWITEM_STATIC_IMAGE',
-    () => new PanelRawItemProvider(),
-  );
-  registerPanelItemProvider(
-    'RAWITEM_STATIC_LABEL',
-    () => new PanelRawItemProvider(),
-  );
-  registerPanelItemProvider(
-    'RAWITEM_STATIC_TEXT',
-    () => new PanelRawItemProvider(),
-  );
-});
-
-export default IBizPanelRawItem;

package/src/panel-component/panel-rawitem/panel-rawitem.controller.ts

@@ -1,34 +0,0 @@
-import { IPanelRawItem } from '@ibiz/model-core';
-import { PanelItemController } from '@ibiz-template/runtime';
-
-/**
- * 面板按钮控制器
- *
- * @export
- * @class PanelRawItemController
- * @extends {PanelItemController<IPanelRawItem>}
- */
-export class PanelRawItemController extends PanelItemController<IPanelRawItem> {
-  /**
-   * 父容器数据对象数据
-   * @author lxm
-   * @date 2023-07-15 01:33:58
-   * @readonly
-   * @type {IData}
-   */
-  get data(): IData {
-    return this.dataParent.data!;
-  }
-
-  /**
-   * 初始化
-   *
-   * @author lxm
-   * @date 2022-08-24 20:08:42
-   * @protected
-   * @returns {*}  {Promise<void>}
-   */
-  protected async onInit(): Promise<void> {
-    await super.onInit();
-  }
-}

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

@@ -1,28 +0,0 @@
-import {
-  IPanelItemProvider,
-  PanelController,
-  PanelItemController,
-} from '@ibiz-template/runtime';
-import { IPanelItem } from '@ibiz/model-core';
-import { PanelRawItemController } from './panel-rawitem.controller';
-
-/**
- * 面板属性适配器
- *
- * @export
- * @class PanelRawItemProvider
- * @implements {IPanelItemProvider}
- */
-export class PanelRawItemProvider implements IPanelItemProvider {
-  component: string = 'IBizPanelRawItem';
-
-  async createController(
-    panelItem: IPanelItem,
-    panel: PanelController,
-    parent: PanelItemController | undefined,
-  ): Promise<PanelRawItemController> {
-    const c = new PanelRawItemController(panelItem, panel, parent);
-    await c.init();
-    return c;
-  }
-}

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

@@ -1,8 +0,0 @@
-@include b(panel-rawitem) {
-  width: 100%;
-  height: 100%;
-  
-  @include b(panel-rawitem-content) {
-    width: 100%;
-  }
-}

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

@@ -1,61 +0,0 @@
-import { IPanelRawItem } from '@ibiz/model-core';
-import { computed, defineComponent, PropType, ref } from 'vue';
-import { useNamespace } from '../../use';
-import { PanelRawItemController } from './panel-rawitem.controller';
-import './panel-rawitem.scss';
-
-export const PanelRawItem = defineComponent({
-  name: 'IBizPanelRawItem',
-  props: {
-    modelData: {
-      type: Object as PropType<IPanelRawItem>,
-      required: true,
-    },
-    controller: {
-      type: PanelRawItemController,
-      required: true,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('panel-rawitem');
-
-    const tempStyle = ref('');
-
-    const { rawItem } = props.modelData;
-
-    if (rawItem && rawItem.cssStyle) {
-      tempStyle.value = rawItem.cssStyle;
-    }
-
-    // 类名控制
-    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,
-      tempStyle,
-    };
-  },
-  render() {
-    // 动态控制显示
-    if (!this.controller.state.visible) {
-      return;
-    }
-    return (
-      <div
-        class={this.classArr}
-        style={this.tempStyle}
-        onClick={() => {
-          this.controller.onClick();
-        }}
-      >
-        <iBizRawItem rawItem={this.modelData}></iBizRawItem>
-      </div>
-    );
-  },
-});

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

@@ -1,12 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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/panel-component/scroll-container/index.ts

@@ -1,44 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-import { IPanelContainer } from '@ibiz/model-core';
-import {
-  PanelItemController,
-  ViewLayoutPanelController,
-} from '@ibiz-template/runtime';
-
-/**
- * 面板滚动容器控制器
- *
- * @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.layout.width = '100%';
-    this.state.layout.height = '100%';
-  }
-}

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

@@ -1,30 +0,0 @@
-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

@@ -1,34 +0,0 @@
-@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;
-  }
-  @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

@@ -1,110 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-import { IPanelContainer } from '@ibiz/model-core';
-import { computed, defineComponent, PropType, VNode } from 'vue';
-import { useNamespace } from '../../../use';
-import { ScrollContainerController } from './scroll-container.controller';
-import './scroll-container.scss';
-
-export const ScrollContainer = defineComponent({
-  name: 'IBizScrollContainer',
-  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),
-        ...props.controller.containerClass,
-        ns.is('hidden', !props.controller.state.visible),
-      ];
-      return result;
-    });
-
-    return { ns, classArr };
-  },
-  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(
-            `未适配的布局占位${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

@@ -1,2 +0,0 @@
-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

@@ -1,25 +0,0 @@
-import { IPanelContainer } from '@ibiz/model-core';
-import {
-  PanelItemController,
-  ViewLayoutPanelController,
-} from '@ibiz-template/runtime';
-
-/**
- * 面板滚动容器项控制器
- *
- * @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;
-}