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

package/src/panel-component/nav-pos/nav-pos.tsx

@@ -1,121 +0,0 @@
-import {
-  defineComponent,
-  h,
-  PropType,
-  resolveComponent,
-  VNode,
-  watch,
-} from 'vue';
-import { IPanelRawItem } from '@ibiz/model-core';
-import { EventBase } from '@ibiz-template/runtime';
-import { useRoute, useRouter } from 'vue-router';
-import { NavPosController } from './nav-pos.controller';
-import './nav-pos.scss';
-import { useNamespace } from '../../use';
-import { getNestedRoutePath } from '../../util';
-
-export const NavPos = defineComponent({
-  name: 'IBizNavPos',
-  props: {
-    modelData: {
-      type: Object as PropType<IPanelRawItem>,
-      required: true,
-    },
-    controller: {
-      type: NavPosController,
-      required: true,
-    },
-  },
-  setup(props) {
-    const c = props.controller;
-    const ns = useNamespace('nav-pos');
-    const onViewCreated = (event: EventBase): void => {
-      c.onViewCreated(event);
-    };
-
-    const router = useRouter();
-    const route = useRoute();
-
-    c.setRouter(router);
-
-    if (c.routeDepth) {
-      // 计算当前导航视图对应层级路由的路径，删除了srfnav
-      const expViewRoutePath = getNestedRoutePath(route, c.routeDepth!);
-      watch(
-        () => route.fullPath,
-        () => {
-          const currentRoutePath = getNestedRoutePath(route, c.routeDepth!);
-          // 前面路由不是当前导航视图的不走
-          // 路由跳转匹配层级不比导航视图层级高的不走。如分页关系的表单对应的事导航视图的路由。
-          if (
-            expViewRoutePath === currentRoutePath &&
-            route.matched.length > c.routeDepth!
-          ) {
-            c.onRouteChange(route);
-          }
-        },
-        { immediate: true },
-      );
-    }
-
-    return { ns, c, onViewCreated };
-  },
-  render() {
-    const { viewModals, state } = this.c;
-    const { currentKey, cacheKeys, navViewMsgs, cache } = state;
-    let content: VNode | null = null;
-    if (state.routeOpen) {
-      content = (
-        <iBizRouterView
-          manualKey={currentKey}
-          modal={viewModals[currentKey]}
-          onCreated={this.onViewCreated}
-        >
-          {({ Component }: { Component: string }): VNode | null => {
-            const routerContent =
-              currentKey === '' || !Component
-                ? null
-                : ((<Component />) as VNode);
-
-            return cache ? (
-              <keepAlive include={cacheKeys} max={30} isKey>
-                {routerContent}
-              </keepAlive>
-            ) : (
-              routerContent
-            );
-          }}
-        </iBizRouterView>
-      );
-    } else {
-      const view = currentKey
-        ? h(resolveComponent('IBizViewShell'), {
-            context: navViewMsgs[currentKey].context,
-            params: navViewMsgs[currentKey].params,
-            key: currentKey,
-            viewId: navViewMsgs[currentKey].viewId,
-            onCreated: this.onViewCreated,
-          })
-        : null;
-      content = cache ? (
-        <keepAlive include={cacheKeys} max={30} isKey>
-          {view}
-        </keepAlive>
-      ) : (
-        view
-      );
-    }
-
-    return (
-      <div
-        class={[
-          this.ns.b(),
-          this.ns.m(this.modelData.id),
-          ...this.controller.containerClass,
-        ]}
-      >
-        {content}
-      </div>
-    );
-  },
-});

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

@@ -1,27 +0,0 @@
-import { App } from 'vue';
-import { registerPanelItemProvider } from '@ibiz-template/runtime';
-import { withInstall } from '../../util';
-import { PanelContainer } from './panel-container';
-import { PanelContainerProvider } from './panel-container.provider';
-import { PanelContainerState } from './panel-container.state';
-import { PanelContainerController } from './panel-container.controller';
-
-export { PanelContainerState, PanelContainerController };
-
-export const IBizPanelContainer = withInstall(
-  PanelContainer,
-  function (v: App) {
-    v.component(PanelContainer.name, PanelContainer);
-    registerPanelItemProvider('CONTAINER', () => new PanelContainerProvider());
-    registerPanelItemProvider(
-      'CONTAINER_DEFAULT',
-      () => new PanelContainerProvider(),
-    );
-    // registerPanelItemProvider(
-    //   'CONTAINER_CONTAINER_GRID',
-    //   () => new PanelContainerProvider(),
-    // );
-  },
-);
-
-export default IBizPanelContainer;

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

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

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

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

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

@@ -1,15 +0,0 @@
-// 默认样式
-@include b(panel-container) {
-  width: 100%;
-  height: 100%;
-
-  > .#{bem('row')} {
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  @include when(hidden) {
-    display: none;
-  }
-}

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

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

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

@@ -1,72 +0,0 @@
-import { IPanelContainer } from '@ibiz/model-core';
-import { computed, defineComponent, PropType, VNode } from 'vue';
-import { useNamespace } from '../../use';
-import { PanelContainerController } from './panel-container.controller';
-import './panel-container.scss';
-
-export const PanelContainer = defineComponent({
-  name: 'IBizPanelContainer',
-  props: {
-    modelData: {
-      type: Object as PropType<IPanelContainer>,
-      required: true,
-    },
-    controller: {
-      type: PanelContainerController,
-      required: true,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('panel-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;
-    });
-
-    return { ns, classArr };
-  },
-  render() {
-    // 内容区默认插槽处理，封装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>
-    );
-    return (
-      <div
-        class={this.classArr}
-        onClick={() => {
-          this.controller.onClick();
-        }}
-      >
-        {this.controller.model.cssStyle ? (
-          <style type='text/css'>{this.controller.model.cssStyle}</style>
-        ) : null}
-        {content}
-      </div>
-    );
-  },
-});

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

@@ -1,22 +0,0 @@
-import { App } from 'vue';
-import { registerPanelItemProvider } from '@ibiz-template/runtime';
-import { PanelContainerGroupState } from './panel-container-group.state';
-import { PanelContainerGroupProvider } from './panel-container-group.provider';
-import { PanelContainerGroupController } from './panel-container-group.controller';
-import { PanelContainerGroup } from './panel-container-group';
-import { withInstall } from '../../util';
-
-export { PanelContainerGroupState, PanelContainerGroupController };
-
-export const IBizPanelContainerGroup = withInstall(
-  PanelContainerGroup,
-  function (v: App) {
-    v.component(PanelContainerGroup.name, PanelContainerGroup);
-    registerPanelItemProvider(
-      'CONTAINER_CONTAINER_GROUP',
-      () => new PanelContainerGroupProvider(),
-    );
-  },
-);
-
-export default IBizPanelContainerGroup;

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

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

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

@@ -1,91 +0,0 @@
-$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%;
-  > .#{bem('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

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

@@ -1,112 +0,0 @@
-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-container-image/index.ts

@@ -1,22 +0,0 @@
-import { App } from 'vue';
-import { registerPanelItemProvider } from '@ibiz-template/runtime';
-import { withInstall } from '../../util';
-import { PanelContainerImage } from './panel-container-image';
-import { PanelContainerImageProvider } from './panel-container-image.provider';
-import { PanelContainerImageState } from './panel-container-image.state';
-import { PanelContainerImageController } from './panel-container-image.controller';
-
-export { PanelContainerImageState, PanelContainerImageController };
-
-export const IBizPanelContainerImage = withInstall(
-  PanelContainerImage,
-  function (v: App) {
-    v.component(PanelContainerImage.name, PanelContainerImage);
-    registerPanelItemProvider(
-      'CONTAINER_CONTAINER_IMAGE',
-      () => new PanelContainerImageProvider(),
-    );
-  },
-);
-
-export default IBizPanelContainerImage;

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

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

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

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