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

package/src/layout/view-base/view-base.tsx

@@ -1,147 +0,0 @@
-import { ViewController } from '@ibiz-template/runtime';
-import { EmptyVNode, useNamespace } from '@ibiz-template/vue3-util';
-import { kebabCase } from 'lodash-es';
-import { defineComponent, PropType } from 'vue';
-import './view-base.scss';
-
-export const ViewBase = defineComponent({
-  props: {
-    controller: {
-      type: Object as PropType<ViewController>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('view');
-    const { viewType, sysCss, codeName } = props.controller.model;
-    const typeClass = viewType!.toLowerCase();
-    const sysCssName = sysCss?.cssName;
-    const modelClass = kebabCase(codeName);
-
-    return { ns, typeClass, sysCssName, modelClass };
-  },
-  render() {
-    const c = this.controller;
-    const state = c.state;
-
-    const viewClassNames = [
-      this.ns.b(),
-      true && this.ns.b(this.typeClass),
-      true && this.ns.m(this.modelClass),
-      true && this.sysCssName,
-    ];
-
-    // 默认插槽
-    const inheritSlots: IData = {
-      caption: () => {
-        return (
-          <div class={this.ns.b('caption')}>
-            {true && c.model.sysImage ? (
-              [
-                <app-icon
-                  class={this.ns.be('caption', 'icon')}
-                  icon={c.model.sysImage}
-                ></app-icon>,
-                <span
-                  class={this.ns.be('caption', 'text')}
-                  title={state.caption}
-                >
-                  {state.caption}
-                </span>,
-              ]
-            ) : (
-              <span class={this.ns.be('caption', 'text')} title={state.caption}>
-                {state.caption}
-              </span>
-            )}
-          </div>
-        );
-      },
-      toolbar: ({ onNeuronInit }: IParams) => {
-        const toolbar = c.model.controls?.find(item => item.name === 'toolbar');
-        if (true && toolbar) {
-          // 合并面板和视图的神经元初始化
-          // const oldOnNeuronInit = c.nerve.onNeuronInit(toolbar.name!);
-          // const handleNeuronInit = (neuron: Neuron) => {
-          //   oldOnNeuronInit(neuron);
-          //   if (onNeuronInit) {
-          //     onNeuronInit(neuron);
-          //   }
-          // };
-          return (
-            <control-shell
-              modelData={toolbar}
-              context={c.context}
-              params={c.params}
-              // onNeuronInit={handleNeuronInit}
-              viewMode={c.modal.mode}
-            ></control-shell>
-          );
-        }
-        return EmptyVNode;
-      },
-    };
-    // 外面的插槽同样传给view-layout
-    Object.keys(this.$slots).forEach(key => {
-      inheritSlots[key] = (arg: IData) => this.$slots[key]!(arg);
-    });
-
-    // * 适配视图布局面板和默认布局
-    if (true) {
-      // 非默认布局的情况下使用视图布局面板
-      // if (!c.model.useDefaultLayout) {
-      //   const provider = c.providers.viewLayoutPanel;
-      //   const component = resolveComponent(
-      //     provider.component,
-      //   ) as ConcreteComponent;
-      //   const ViewLayoutPanel = h(
-      //     component,
-      //     {
-      //       modelData: c.model.viewLayoutPanel,
-      //       context: c.context,
-      //       params: c.params,
-      //       viewController: c,
-      //       onNeuronInit: c.nerve.onNeuronInit('viewLayoutPanel'),
-      //     },
-      //     inheritSlots,
-      //   );
-      //   return (
-      //     <div v-loading={state.isLoading} class={viewClassNames}>
-      //       {ViewLayoutPanel}
-      //     </div>
-      //   );
-      // }
-
-      // 默认布局，主要部件改成默认插槽传给view-layout
-      [
-        'form',
-        'grid',
-        'list',
-        'kanban',
-        'dataview',
-        'drtab',
-        'dashboard',
-        'wizardpanel',
-      ].find(key => {
-        if (inheritSlots[key]) {
-          inheritSlots.default = inheritSlots[key];
-          delete inheritSlots[key];
-          return true;
-        }
-        return false;
-      });
-    }
-
-    return (
-      <view-layout
-        class={viewClassNames}
-        isComplete={true}
-        modelData={c.model}
-        viewMode={c.modal.mode}
-        isLoading={state.isLoading}
-      >
-        {inheritSlots}
-      </view-layout>
-    );
-  },
-});

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

@@ -1,198 +0,0 @@
-// 通用样式
-@include b(view-layout) {
-  @include set-component-css-var('view-layout', $view-layout);
-  @include flex(column);
-
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  // 工具栏占位
-  @include e(toolbar) {
-    @include flex;
-  }
-}
-
-// 通用视图头部样式
-@include b(view-layout-header) {
-  flex-shrink: 0;
-  width: 100%;
-
-  @include b(view-layout-header-content) {
-    @include flex(row, space-between);
-
-    @include e(right) {
-      @include flex(row, space-between);
-    }
-
-    // 视图标题样式
-    @include e(caption) {
-      @include flex(row, flex-start, center);
-
-      height: 100%;
-    }
-  }
-}
-
-// 通用视图内容样式
-@include b(view-layout-content) {
-  @include flex;
-
-  flex: 1 1 auto;
-  overflow: auto;
-
-  @include e(body) {
-    flex: 1 1 auto;
-    overflow: auto;
-  }
-}
-
-// 根据变量决定是否把内容输出到根
-@mixin is-root($isRoot) {
-  @if $isRoot {
-    @at-root {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// 使用变量的通用样式
-@mixin view-layout-vars($type, $prefix) {
-  color: getCssVar($type, 'text-color');
-  background-color: getCssVar($type, 'bg-color');
-  @include is-root(($prefix == '')) {
-    // 通用视图头部样式
-    #{$prefix} .#{bem('view-layout-header')} {
-      padding: getCssVar($type, 'header-padding');
-      background: getCssVar($type, 'header-bg-color');
-      border-bottom: getCssVar($type, 'header-border-bottom');
-
-      // 视图标题样式
-      .#{bem('view-layout-header-content','caption')} {
-        max-width: getCssVar($type, 'caption-max-width');
-        font-size: getCssVar($type, 'caption-font-size');
-        font-weight: getCssVar($type, 'caption-font-weight');
-        color: getCssVar($type, 'caption-color');
-      }
-    }
-
-    // 通用视图内容样式
-    #{$prefix} .#{bem('view-layout-content')} {
-      padding: getCssVar($type, 'content-padding');
-      margin: getCssVar($type, 'content-margin');
-      background-color: getCssVar($type, 'content-bg-color');
-      border-radius: getCssVar($type, 'content-border-radius');
-    }
-  }
-}
-
-@include b(view-layout) {
-  // 通用视图布局样式变量引入
-  @include view-layout-vars('view-layout', '');
-
-  // 路由打开视图样式
-  @include m(route) {
-    @include set-component-css-var('view-layout-route', $view-layout-route);
-    @include view-layout-vars('view-layout-route', '>');
-
-    // 路由模式下的多层嵌套视图，去除margin
-    .#{bem(view-layout)} {
-      .#{bem(view-layout-content)}{
-        margin: 0;
-      }
-    }
-
-    > .#{bem(view-layout-top)} {
-      margin: getCssVar('view-layout-route', 'top-margin');
-      background-color: getCssVar('view-layout-route', 'top-bg-color');
-    }
-
-    // 分页关系视图分页放在头部
-    &.#{bem('view-deeditview3')},
-    &.#{bem('view-dewfdynaeditview3')} {
-      > .#{bem('view-layout-content')} {
-        padding: 0;
-        margin: -1px 0 0;
-        > .#{bem('view-layout-content','body')} > .el-tabs {
-          >.el-tabs__header {
-            padding-left: getCssVar(padding);
-            margin: 0;
-            background-color: getCssVar('bg-color', 'overlay');
-          }
-
-          // 每个分页内容给灰色栅格
-          >.el-tabs__content > .el-tab-pane {
-            padding: getCssVar('view-layout-route', 'content-padding');
-            background-color: getCssVar('bg-color', 'page');
-
-            // 第一个分页是表单不需要padding
-            &:first-child {
-              padding: 0;
-            }
-          }
-        }
-      }
-    }
-
-    // 编辑视图表单分页放在头部
-    &.#{bem('view-deeditview')} {
-      > .#{bem('view-layout-content')} {
-        > .#{bem('view-layout-content','body')}
-        > .#{bem('control-layout')}
-        > .#{bem('form')}
-        > .#{bem('form-page')} {
-          > .el-tabs__header  {
-            // padding-left: getCssVar(padding);
-            background-color: getCssVar('bg-color', 'overlay');
-          }
-
-          > .el-tabs__content > .#{bem('form-page-tab-item')} {
-            padding: 0;
-            > .#{bem('form-page-item')} {
-              padding: 0;
-            }
-          }
-        }
-      }
-    }
-
-    // 路由下的表单的第一个分组
-    @include b(form-page-item) {
-      // 表单分页里的第一层表单分组呈现栅格样式
-      > .#{bem('form-col','grouppanel')} {
-        background-color: getCssVar('bg-color', 'page');
-        > .#{bem('form-group')} {
-          width: calc(100% - getCssVar(margin) * 2);
-          height: calc(100% - getCssVar(margin) * 2);
-          margin: getCssVar('margin');
-        }
-        & + .#{bem('form-col','grouppanel')} {
-          > .#{bem('form-group')} {
-            height: calc(100% - getCssVar(margin));
-            margin-top: 0;
-          }
-        }
-      }
-    }
-  }
-
-  // 抽屉打开视图样式
-  @include m(drawer) {
-    @include set-component-css-var('view-layout-drawer', $view-layout-drawer);
-    @include view-layout-vars('view-layout-drawer', '>');
-  }
-
-  // 模态打开视图样式
-  @include m(modal) {
-    @include set-component-css-var('view-layout-modal', $view-layout-modal);
-    @include view-layout-vars('view-layout-modal', '>');
-  }
-
-  // 嵌入打开视图样式
-  @include m(embed) {
-    @include set-component-css-var('view-layout-embed', $view-layout-embed);
-    @include view-layout-vars('view-layout-embed', '>');
-  }
-}

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

@@ -1,115 +0,0 @@
-import { computed, defineComponent, PropType, useSlots } from 'vue';
-import { isEmptyVNode, useNamespace } from '@ibiz-template/vue3-util';
-import './view-layout.scss';
-import { IAppView } from '@ibiz/model-core';
-
-export const ViewLayout = defineComponent({
-  name: 'ViewLayout',
-  props: {
-    modelData: {
-      type: Object as PropType<IAppView>,
-      required: true,
-    },
-    viewMode: {
-      type: String, // ViewMode 类型
-      default: 'ROUTE',
-    },
-    // 视图是否完成加载
-    isComplete: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const ns = useNamespace('view-layout');
-
-    const slots = useSlots();
-
-    // 是否显示头部
-    const isShowHeader = computed(() => {
-      return (
-        // 显示标题栏
-        props.modelData &&
-        (props.modelData.showCaptionBar ||
-          // toolbar或者quickSearch不为空节点
-          (slots &&
-            ((slots.quickSearch && !isEmptyVNode(slots.quickSearch({}))) ||
-              (slots.toolbar && !isEmptyVNode(slots.toolbar({}))))))
-      );
-    });
-
-    return { ns, isShowHeader };
-  },
-  render() {
-    return !this.isComplete ? (
-      <div
-        class={[this.ns.b(), this.ns.m(this.viewMode.toLowerCase())]}
-        v-loading={this.isLoading}
-      ></div>
-    ) : (
-      <div
-        class={[
-          this.ns.b(),
-          this.ns.m(this.viewMode.toLowerCase()),
-          this.ns.is('no-header', !this.isShowHeader),
-          this.ns.is('loading', this.isLoading),
-        ]}
-        v-loading={this.isLoading}
-      >
-        {this.isShowHeader ? (
-          <div key='header' class={this.ns.b('header')}>
-            <div class={this.ns.b('header-content')}>
-              <div class={this.ns.be('header-content', 'left')}>
-                {this.modelData && this.modelData.showCaptionBar ? (
-                  <div class={this.ns.be('header-content', 'caption')}>
-                    {this.$slots.caption && this.$slots.caption({})}
-                  </div>
-                ) : null}
-              </div>
-              <div class={this.ns.be('header-content', 'right')}>
-                {this.$slots.quickSearch &&
-                  !isEmptyVNode(this.$slots.quickSearch({})) && (
-                    <div class={this.ns.e('quick-search')}>
-                      {this.$slots.quickSearch({})}
-                    </div>
-                  )}
-                {this.$slots.toolbar &&
-                  !isEmptyVNode(this.$slots.toolbar({})) && (
-                    <div class={this.ns.e('toolbar')}>
-                      {this.$slots.toolbar({})}
-                    </div>
-                  )}
-              </div>
-            </div>
-            <div class={this.ns.b('header-exp')}></div>
-          </div>
-        ) : null}
-        {this.$slots.searchForm &&
-          !isEmptyVNode(this.$slots.searchForm({})) && (
-            <div key='top' class={this.ns.b('top')}>
-              <div class={this.ns.be('top', 'message')}></div>
-              <div class={this.ns.be('top', 'search-form')}>
-                {this.$slots.searchForm({})}
-              </div>
-            </div>
-          )}
-        <div key='content' class={this.ns.b('content')}>
-          <div class={this.ns.be('content', 'left')}></div>
-          <div class={this.ns.be('content', 'body')}>
-            {this.$slots.default && this.$slots.default({})}
-          </div>
-          <div class={this.ns.be('content', 'right')}></div>
-        </div>
-        {this.$slots.footer && (
-          <div key='footer' class={this.ns.b('footer')}>
-            {this.$slots.footer && this.$slots.footer({})}
-          </div>
-        )}
-      </div>
-    );
-  },
-});

package/src/util/install.ts

@@ -1,11 +0,0 @@
-/* eslint-disable no-param-reassign */
-import type { App, Plugin } from 'vue';
-
-export type TypeWithInstall<T> = T & Plugin;
-
-export const withInstall = <T>(main: T, install: (_v: App) => void) => {
-  (main as TypeWithInstall<T>).install = (app): void => {
-    install(app);
-  };
-  return main as TypeWithInstall<T>;
-};

package/src/views/grid-view/grid-view-engine.ts

@@ -1,68 +0,0 @@
-import { PresetViewEngine, ViewController } from '@ibiz-template/runtime';
-import { IAppDEGridView, IAppUIOpenDataLogic } from '@ibiz/model-core';
-import { GridController } from '../../control';
-import { SearchFormController } from '../../control/form/search-form/search-form.controller';
-
-export class GridViewEngine extends PresetViewEngine {
-  protected declare controller: ViewController<IAppDEGridView>;
-
-  get grid() {
-    return this.controller.getController('grid') as GridController;
-  }
-
-  get searchForm() {
-    return this.controller.getController('searchform') as SearchFormController;
-  }
-
-  /**
-   * 打开编辑数据视图
-   *
-   * @author lxm
-   * @date 2022-09-01 18:09:19
-   * @param {IData} data
-   * @param {MouseEvent} [event]
-   * @returns {*}
-   */
-  async openData(data: IData, event?: MouseEvent): Promise<void> {
-    const openAppViewLogic =
-      this.controller.model.viewLayoutPanel?.appViewLogics?.find(
-        item => item.id === 'opendata',
-      ) as IAppUIOpenDataLogic;
-    if (openAppViewLogic) {
-      await this.executeViewLogic(openAppViewLogic, [data], event);
-    }
-  }
-
-  load() {
-    this.grid.load();
-  }
-
-  init() {
-    super.init();
-    const { childNames, evt, model } = this.controller;
-    childNames.push('grid');
-    evt.on('onMounted', () => {
-      this.grid.evt.on('onActive', event => {
-        return this.openData(event);
-      });
-      this.grid.evt.on('onBeforeLoad', event => {
-        const params: IParams = {};
-        // 有搜索表单的整合相关参数
-        if (this.searchForm) {
-          const addParams = this.searchForm.data;
-          Object.assign(params, addParams);
-        }
-        this.grid.state.searchParams = params;
-        console.log('beforeload', event);
-      });
-
-      this.searchForm?.evt.on('onSearch', () => {
-        this.grid.load();
-      });
-
-      if (model.loadDefault) {
-        this.load();
-      }
-    });
-  }
-}

package/src/views/grid-view/index.ts

@@ -1,12 +0,0 @@
-import { App } from 'vue';
-import { ViewType } from '@ibiz-template/runtime';
-import { withInstall } from '../../util/install';
-import { GridViewEngine } from './grid-view-engine';
-import { ViewProvider } from '../view';
-
-export const IBizGridView = withInstall({}, function (_v: App) {
-  ibiz.register.view.register(ViewType.DE_GRID_VIEW, new ViewProvider());
-  ibiz.engine.registerPreset(ViewType.DE_GRID_VIEW, GridViewEngine);
-});
-
-export default IBizGridView;