@ibiz-template/vue3-util 0.6.0 → 0.6.1-alpha.2

package/src/control/panel/index.ts

@@ -1,2 +0,0 @@
-export * from './view-layout-panel';
-export * from './panel';

package/src/control/panel/panel/index.ts

@@ -1,12 +0,0 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
-import { App } from 'vue';
-import { PanelControl } from './panel';
-import { PanelProvider } from './panel.provider';
-import { withInstall } from '../../../util';
-
-export const IBizPanelControl = withInstall(PanelControl, function (v: App) {
-  v.component(PanelControl.name, PanelControl);
-  registerControlProvider(ControlType.PANEL, () => new PanelProvider());
-});
-
-export default IBizPanelControl;

package/src/control/panel/panel/panel.provider.ts

@@ -1,14 +0,0 @@
-import { IControlProvider } from '@ibiz-template/runtime';
-
-/**
- * 面板部件适配器
- *
- * @author lxm
- * @date 2022-10-25 18:10:57
- * @export
- * @class ViewLayoutPanelProvider
- * @implements {IControlProvider}
- */
-export class PanelProvider implements IControlProvider {
-  component: string = 'IBizPanelControl';
-}

package/src/control/panel/panel/panel.scss

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

package/src/control/panel/panel/panel.tsx

@@ -1,166 +0,0 @@
-import {
-  defineComponent,
-  PropType,
-  resolveComponent,
-  h,
-  VNode,
-  reactive,
-  ComponentPublicInstance,
-  watch,
-} from 'vue';
-import {
-  IPanel,
-  IPanelContainer,
-  IPanelField,
-  IPanelItem,
-  IPanelTabPanel,
-} from '@ibiz/model-core';
-import './panel.scss';
-import {
-  IControlProvider,
-  IController,
-  PanelController,
-} from '@ibiz-template/runtime';
-import { useControlController, useNamespace } from '../../../use';
-
-/**
- * 绘制面板成员
- *
- * @author lxm
- * @date 2023-02-07 05:58:43
- * @param {IPanelItem} panelItem
- * @param {PanelController} c
- * @returns {*}  {(VNode | undefined)}
- */
-function renderPanelItem(
-  panelItem: IPanelItem,
-  c: PanelController,
-  ins: ComponentPublicInstance,
-): VNode | undefined {
-  if ((panelItem as IPanelField).hidden) {
-    return;
-  }
-  const { providers, panelItems } = c;
-  const provider = providers[panelItem.id!];
-  if (!provider) {
-    return (
-      <div>
-        暂未支持的面板项: {panelItem.id} - {panelItem.itemType}
-      </div>
-    );
-  }
-  const component = resolveComponent(provider.component);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let children: any;
-  // 占位类型成员填充外部对应的插槽。
-  if (panelItem.itemType === 'CTRLPOS' && ins.$slots[panelItem.id!]) {
-    children = (): VNode[] => {
-      return ins.$slots[panelItem.id!]!();
-    };
-  } else if (
-    panelItem.itemType === 'TABPANEL' &&
-    (panelItem as IPanelTabPanel).panelTabPages?.length
-  ) {
-    children = (): (VNode | undefined)[] => {
-      return (panelItem as IPanelTabPanel).panelTabPages!.map(child => {
-        return renderPanelItem(child, c, ins);
-      });
-    };
-  } else if ((panelItem as IPanelContainer).panelItems?.length) {
-    children = (): (VNode | undefined)[] => {
-      return (panelItem as IPanelContainer).panelItems!.map(child => {
-        return renderPanelItem(child, c, ins);
-      });
-    };
-  }
-
-  // 直接样式
-  let tempStyle = '';
-  if (panelItem.cssStyle) {
-    tempStyle = panelItem.cssStyle;
-  }
-  return h(
-    component,
-    {
-      modelData: panelItem,
-      controller: panelItems[panelItem.id!],
-      key: panelItem.id,
-      style: tempStyle,
-    },
-    children,
-  );
-}
-
-/**
- * 视图布局面板组件
- */
-export const PanelControl = defineComponent({
-  name: 'IBizPanelControl',
-  props: {
-    modelData: {
-      type: Object as PropType<IPanel>,
-      required: true,
-    },
-    context: { type: Object as PropType<IContext>, required: true },
-    params: { type: Object as PropType<IParams>, default: () => ({}) },
-    provider: { type: Object as PropType<IControlProvider> },
-    container: { type: Object as PropType<IController> },
-    data: Object as PropType<IData>,
-    loadDefault: { type: Boolean, default: true },
-  },
-  setup(props) {
-    const c = useControlController<PanelController>(
-      (...args) => new PanelController(...args, props.container),
-    );
-    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
-
-    watch(
-      () => props.data,
-      newVal => {
-        if (newVal) {
-          c.setInputData(newVal);
-          c.load();
-        }
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    c.evt.on('onCreated', () => {
-      // 面板成员state响应式
-      const keys = Object.keys(c.panelItems);
-      keys.forEach(key => {
-        const panelItem = c.panelItems[key];
-        panelItem.state = reactive(panelItem.state);
-      });
-    });
-
-    return { c, ns };
-  },
-  render() {
-    const { state, model } = this.c;
-    return (
-      <iBizControlBase controller={this.c}>
-        <iBizRow class={this.ns.b('content')} layout={{ layout: 'FLEX' }}>
-          {state.isCreated &&
-            (this.$slots.default
-              ? this.$slots.default({
-                  panelItems: this.c.panelItems,
-                })
-              : model.rootPanelItems?.map(panelItem => {
-                  const subC = this.c.panelItems[panelItem.id!];
-                  // 视图布局面板的子默认布局改成flex
-                  // eslint-disable-next-line no-param-reassign
-                  panelItem.layoutPos!.layout = 'FLEX';
-                  return (
-                    <iBizCol layoutPos={panelItem.layoutPos} state={subC.state}>
-                      {renderPanelItem(panelItem, this.c, this)}
-                    </iBizCol>
-                  );
-                }))}
-        </iBizRow>
-      </iBizControlBase>
-    );
-  },
-});

package/src/control/panel/view-layout-panel/index.ts

@@ -1,18 +0,0 @@
-import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
-import { App } from 'vue';
-import { ViewLayoutPanelControl } from './view-layout-panel';
-import { ViewLayoutPanelProvider } from './view-layout-panel.provider';
-import { withInstall } from '../../../util';
-
-export const IBizViewLayoutPanelControl = withInstall(
-  ViewLayoutPanelControl,
-  function (v: App) {
-    v.component(ViewLayoutPanelControl.name, ViewLayoutPanelControl);
-    registerControlProvider(
-      ControlType.VIEW_LAYOUT_PANEL,
-      () => new ViewLayoutPanelProvider(),
-    );
-  },
-);
-
-export default IBizViewLayoutPanelControl;

package/src/control/panel/view-layout-panel/view-layout-panel.provider.ts

@@ -1,14 +0,0 @@
-import { IControlProvider } from '@ibiz-template/runtime';
-
-/**
- * 视图布局面板部件适配器
- *
- * @author lxm
- * @date 2022-10-25 18:10:57
- * @export
- * @class ViewLayoutPanelProvider
- * @implements {IControlProvider}
- */
-export class ViewLayoutPanelProvider implements IControlProvider {
-  component: string = 'IBizViewLayoutPanelControl';
-}

package/src/control/panel/view-layout-panel/view-layout-panel.scss

@@ -1,9 +0,0 @@
-@include b(control-viewlayoutpanel) {
-  width: 100%;
-  height: 100%;
-}
-
-@include b(control-viewlayoutpanel-content) {
-  width: 100%;
-  height: 100%;
-}

package/src/control/panel/view-layout-panel/view-layout-panel.tsx

@@ -1,178 +0,0 @@
-import {
-  defineComponent,
-  PropType,
-  resolveComponent,
-  h,
-  VNode,
-  reactive,
-  watch,
-  provide,
-} from 'vue';
-import {
-  IPanelContainer,
-  IPanelField,
-  IPanelItem,
-  IPanelTabPanel,
-  IViewLayoutPanel,
-} from '@ibiz/model-core';
-import './view-layout-panel.scss';
-import {
-  IController,
-  IControlProvider,
-  IPanelItemController,
-  IPanelItemProvider,
-  isDataContainer,
-  ViewLayoutPanelController,
-} from '@ibiz-template/runtime';
-import { useControlController, useNamespace } from '../../../use';
-
-/**
- * 视图布局面板组件
- */
-export const ViewLayoutPanelControl = defineComponent({
-  name: 'IBizViewLayoutPanelControl',
-  props: {
-    modelData: {
-      type: Object as PropType<IViewLayoutPanel>,
-      required: true,
-    },
-    context: { type: Object as PropType<IContext>, required: true },
-    params: { type: Object as PropType<IParams>, default: () => ({}) },
-    provider: { type: Object as PropType<IControlProvider> },
-    container: { type: Object as PropType<IController> },
-    data: Object as PropType<IData>,
-  },
-  setup(props, { slots }) {
-    const c = useControlController(
-      (...args) => new ViewLayoutPanelController(...args, props.container),
-    );
-    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
-
-    watch(
-      () => props.data,
-      newVal => {
-        if (newVal) {
-          c.setInputData(newVal);
-          c.load();
-        }
-      },
-      {
-        immediate: true,
-      },
-    );
-
-    c.evt.on('onCreated', () => {
-      // 面板成员state响应式
-      const keys = Object.keys(c.panelItems);
-      keys.forEach(key => {
-        const panelItem = c.panelItems[key];
-        panelItem.state = reactive(panelItem.state);
-      });
-    });
-
-    /**
-     * 绘制面板成员
-     * @author lxm
-     * @date 2023-08-25 04:09:07
-     * @param {IPanelItem} panelItem
-     * @return {*}  {(VNode | null)}
-     */
-    const renderPanelItem = (
-      panelItem: IPanelItem,
-      options?: {
-        providers: {
-          [key: string]: IPanelItemProvider;
-        };
-        panelItems: {
-          [key: string]: IPanelItemController;
-        };
-      },
-    ): VNode | null => {
-      if ((panelItem as IPanelField).hidden) {
-        return null;
-      }
-      const { providers, panelItems } = options || c;
-      const provider = providers[panelItem.id!];
-      if (!provider) {
-        return (
-          <div>
-            暂未支持的面板项: {panelItem.id} - {panelItem.itemType}
-          </div>
-        );
-      }
-      const component = resolveComponent(provider.component);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let children: any;
-      // 占位类型成员填充外部对应的插槽。
-      if (panelItem.itemType === 'CTRLPOS' && slots[panelItem.id!]) {
-        children = () => {
-          return slots[panelItem.id!]!();
-        };
-      } else if (
-        panelItem.itemType === 'TABPANEL' &&
-        (panelItem as IPanelTabPanel).panelTabPages?.length
-      ) {
-        children = () => {
-          return (panelItem as IPanelTabPanel).panelTabPages!.map(child => {
-            return renderPanelItem(child, options);
-          });
-        };
-      } else if (isDataContainer(panelItem)) {
-        // 单项数据容器，多项数据容器不给子
-        children = undefined;
-      } else if ((panelItem as IPanelContainer).panelItems?.length) {
-        children = () => {
-          return (panelItem as IPanelContainer).panelItems!.map(child => {
-            return renderPanelItem(child, options);
-          });
-        };
-      }
-
-      // 直接样式
-      let tempStyle = '';
-      if (panelItem.cssStyle) {
-        tempStyle = panelItem.cssStyle;
-      }
-      return h(
-        component,
-        {
-          modelData: panelItem,
-          controller: panelItems[panelItem.id!],
-          key: panelItem.id,
-          style: tempStyle,
-        },
-        children,
-      );
-    };
-
-    provide('renderPanelItem', renderPanelItem);
-
-    return { c, ns, renderPanelItem };
-  },
-  render() {
-    const { state, model } = this.c;
-
-    return (
-      <iBizControlBase controller={this.c}>
-        <iBizRow class={this.ns.b('content')} layout={{ layout: 'FLEX' }}>
-          {state.isCreated &&
-            (this.$slots.default
-              ? this.$slots.default({
-                  panelItems: this.c.panelItems,
-                })
-              : model.rootPanelItems?.map(panelItem => {
-                  const subC = this.c.panelItems[panelItem.id!];
-                  // 视图布局面板的子默认布局改成flex
-                  // eslint-disable-next-line no-param-reassign
-                  panelItem.layoutPos!.layout = 'FLEX';
-                  return (
-                    <iBizCol layoutPos={panelItem.layoutPos} state={subC.state}>
-                      {this.renderPanelItem(panelItem)}
-                    </iBizCol>
-                  );
-                }))}
-        </iBizRow>
-      </iBizControlBase>
-    );
-  },
-});

package/src/hooks/app/app.hooks.ts

@@ -1,31 +0,0 @@
-import { SyncSeriesHook } from 'qx-util';
-import { App } from 'vue';
-
-/**
- * 应用钩子(内部使用)
- *
- * @author chitanda
- * @date 2024-02-04 17:02:18
- * @export
- * @class AppHooks
- */
-export class AppHooks {
-  /**
-   * 创建 Vue 应用实例
-   *
-   * @author chitanda
-   * @date 2024-02-04 17:02:41
-   * @static
-   */
-  static createApp = new SyncSeriesHook<App>();
-
-  /**
-   * 用于在多实例下，挂载到已经创建的 Vue 实例上插件
-   *
-   * @author chitanda
-   * @date 2024-02-04 18:02:49
-   * @static
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  static useComponent = new SyncSeriesHook<any>();
-}

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export { AppHooks } from './app/app.hooks';

package/src/index.ts

@@ -1,18 +0,0 @@
-import { App } from 'vue';
-
-export * from './hooks';
-export * from './common';
-export * from './panel-component';
-export * from './view';
-export * from './control';
-export * from './interface';
-export * from './plugin';
-export * from './use';
-export * from './util';
-export * from './props';
-
-declare global {
-  interface Window {
-    vueInstances: Map<App, App>;
-  }
-}

package/src/interface/index.ts

@@ -1 +0,0 @@
-export * from './util';

package/src/interface/util/index.ts

@@ -1 +0,0 @@
-export * from './route/route';

package/src/interface/util/route/route.ts

@@ -1,116 +0,0 @@
-import { IAppView } from '@ibiz/model-core';
-
-/**
- * 路由壳绘制需要的视图数据
- *
- * @author lxm
- * @date 2022-08-17 22:08:18
- * @export
- * @interface IRouteViewData
- */
-export interface IRouteViewData {
-  /**
-   * 视图模型
-   * @author lxm
-   * @date 2023-04-19 01:44:13
-   * @type {IAppView}
-   */
-  viewModel?: IAppView;
-
-  /**
-   *视图上下文
-   *
-   * @author lxm
-   * @date 2022-08-17 23:08:15
-   * @type {IParams}
-   */
-  context?: IParams;
-
-  /**
-   *视图参数
-   *
-   * @author lxm
-   * @date 2022-08-17 23:08:25
-   * @type {IParams}
-   */
-  params?: IParams;
-
-  /**
-   * 视图导航参数
-   * @author lxm
-   * @date 2023-03-14 08:41:50
-   * @type {string}
-   */
-  srfnav?: string;
-}
-
-/**
- * 路由路径每一级路径节点
- *
- * @author lxm
- * @date 2022-08-18 11:08:24
- * @export
- * @interface IRoutePathNode
- */
-export interface IRoutePathNode {
-  /**
-   * 视图名称
-   *
-   * @author lxm
-   * @date 2022-08-18 11:08:42
-   * @type {string}
-   */
-  viewName: string;
-
-  /**
-   * 上下文参数
-   *
-   * @author lxm
-   * @date 2022-08-18 11:08:53
-   * @type {IParams}
-   */
-  context?: IParams;
-
-  /**
-   * 视图参数对象
-   *
-   * @author lxm
-   * @date 2022-08-18 11:08:25
-   * @type {IParams}
-   */
-  params?: IParams;
-
-  /**
-   * 视图导航参数（视图自身解析的额外路由参数）
-   * @author lxm
-   * @date 2023-03-14 08:39:36
-   * @type {string}
-   */
-  srfnav?: string;
-}
-
-/**
- * 路由路径对象，按照路径定义描述
- *
- * @author lxm
- * @date 2022-08-18 11:08:40
- * @export
- * @interface IRoutePath
- */
-export interface IRoutePath {
-  /**
-   * 应用上下文
-   *
-   * @type {IParams}
-   * @memberof IRoutePath
-   */
-  appContext?: IParams;
-
-  /**
-   *
-   * @author lxm
-   * @date 2022-08-18 11:08:48
-   * @type {IRoutePathNode[]}
-   */
-  pathNodes: IRoutePathNode[];
-}

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

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

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

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

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

@@ -1,17 +0,0 @@
-$grid-container: (
-  'bg-color': getCssVar('bg-color', 'overlay'),
-  'padding': getCssVar('padding'),
-);
-
-// 默认样式
-@include b(grid-container) {
-  @include set-component-css-var('grid-container', $grid-container);
-
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-
-  @include when(hidden) {
-    display: none;
-  }
-}

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

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