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

package/src/common/tab-page-exp/tab-page-exp.tsx

@@ -1,125 +0,0 @@
-import { defineComponent, ref, watch } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
-import './tab-page-exp.scss';
-import { TabPaneName, TabsPaneContext } from 'element-plus';
-
-interface RouteMsg {
-  key: string;
-  fullPath: string;
-  modelPath?: string;
-  caption?: string;
-}
-interface dropdownAction {
-  text: string;
-  value?: string;
-}
-
-export const TabPageExp = defineComponent({
-  name: 'TabPageExp',
-  props: {
-    routeMsgs: {
-      type: Array<RouteMsg>,
-      required: true,
-    },
-    currentKey: {
-      type: String,
-      required: true,
-    },
-  },
-  emits: ['tab-delete', 'tab-click', 'close-all', 'close-other'],
-  setup(props, { emit }) {
-    const ns = useNamespace('tab-page-exp');
-    const tabsValue = ref(0);
-    const actions: dropdownAction[] = [
-      { text: '关闭所有', value: 'closeAll' },
-      { text: '关闭其他', value: 'closeOther' },
-    ];
-
-    // 监听currentVal确认当前激活tab
-    watch(
-      () => props.currentKey,
-      (newVal, _oldVal) => {
-        const currentRouteMsgIndex = props.routeMsgs.findIndex(
-          (msg: RouteMsg) => msg.key === newVal,
-        );
-        if (currentRouteMsgIndex !== -1) {
-          tabsValue.value = currentRouteMsgIndex;
-        }
-      },
-    );
-
-    // 点击tab
-    const changePage = (pane: TabsPaneContext, _ev: Event) => {
-      const index = Number(pane.index);
-      tabsValue.value = index;
-      emit('tab-click', index);
-    };
-
-    // 关闭tab
-    const onClose = (name: TabPaneName) => {
-      emit('tab-delete', name);
-    };
-
-    // 处理下拉点击
-    const handleCommand = (command: dropdownAction) => {
-      if (command.value === 'closeAll') {
-        emit('close-all');
-      } else if (command.value === 'closeOther') {
-        emit('close-other');
-      }
-    };
-
-    return { ns, tabsValue, actions, changePage, onClose, handleCommand };
-  },
-  render() {
-    return (
-      <div class={this.ns.b()}>
-        <div class={this.ns.e('left')}>
-          <el-tabs
-            type='card'
-            v-model={this.tabsValue}
-            closable
-            onTabClick={this.changePage}
-            onTabRemove={this.onClose}
-          >
-            {this.routeMsgs?.map((msg: RouteMsg, index: number) => {
-              return (
-                <el-tab-pane
-                  name={index}
-                  key={index}
-                  label={msg.caption}
-                ></el-tab-pane>
-              );
-            })}
-          </el-tabs>
-        </div>
-        <div class={this.ns.e('right')}>
-          <el-dropdown onCommand={this.handleCommand}>
-            {{
-              default: () => {
-                return (
-                  <el-button size='small' type='primary'>
-                    更多 <ion-icon name='arrow-down'></ion-icon>
-                  </el-button>
-                );
-              },
-              dropdown: () => {
-                return (
-                  <el-dropdown-menu>
-                    {this.actions.map((action: dropdownAction) => {
-                      return (
-                        <el-dropdown-item command={action}>
-                          {action.text}
-                        </el-dropdown-item>
-                      );
-                    })}
-                  </el-dropdown-menu>
-                );
-              },
-            }}
-          </el-dropdown>
-        </div>
-      </div>
-    );
-  },
-});

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

@@ -1,141 +0,0 @@
-{
-  "layoutMode": "FLEX",
-  "rootPanelItems": [
-    {
-      "panelItems": [
-        {
-          "panelItems": [
-            {
-              "allowEmpty": true,
-              "caption": "页面标题",
-              "itemStyle": "DEFAULT",
-              "itemType": "FIELD",
-              "layoutPos": {
-                "layout": "FLEX"
-              },
-              "id": "view_pagecaption"
-            }
-          ],
-          "layout": {
-            "layout": "FLEX"
-          },
-          "dataRegionType": "INHERIT",
-          "caption": "容器",
-          "itemStyle": "DEFAULT",
-          "itemType": "CONTAINER",
-          "layoutPos": {
-            "layout": "FLEX"
-          },
-          "id": "container7"
-        },
-        {
-          "panelItems": [
-            {
-              "caption": "工具栏",
-              "itemStyle": "DEFAULT",
-              "itemType": "CTRLPOS",
-              "layoutPos": {
-                "layout": "FLEX"
-              },
-              "showCaption": true,
-              "id": "toolbar"
-            },
-            {
-              "caption": "搜索栏",
-              "itemStyle": "DEFAULT",
-              "itemType": "CTRLPOS",
-              "layoutPos": {
-                "layout": "FLEX"
-              },
-              "showCaption": true,
-              "id": "663c3dab99740d1417cb4d8d7e47b4e0"
-            }
-          ],
-          "layout": {
-            "dir": "row-reverse",
-            "layout": "FLEX"
-          },
-          "dataRegionType": "INHERIT",
-          "caption": "容器",
-          "itemStyle": "DEFAULT",
-          "itemType": "CONTAINER",
-          "layoutPos": {
-            "layout": "FLEX"
-          },
-          "id": "container3"
-        }
-      ],
-      "layout": {
-        "align": "space-between",
-        "dir": "row",
-        "layout": "FLEX"
-      },
-      "dataRegionType": "INHERIT",
-      "caption": "容器",
-      "itemStyle": "DEFAULT",
-      "itemType": "CONTAINER",
-      "layoutPos": {
-        "layout": "FLEX"
-      },
-      "id": "container6"
-    },
-    {
-      "panelItems": [
-        {
-          "caption": "搜索表单",
-          "itemStyle": "DEFAULT",
-          "itemType": "CTRLPOS",
-          "layoutPos": {
-            "layout": "FLEX"
-          },
-          "showCaption": true,
-          "id": "searchform"
-        }
-      ],
-      "layout": {
-        "layout": "FLEX"
-      },
-      "dataRegionType": "INHERIT",
-      "caption": "容器",
-      "itemStyle": "DEFAULT",
-      "itemType": "CONTAINER",
-      "layoutPos": {
-        "layout": "FLEX"
-      },
-      "id": "container4"
-    },
-    {
-      "panelItems": [
-        {
-          "caption": "表格",
-          "itemStyle": "DEFAULT",
-          "itemType": "CTRLPOS",
-          "layoutPos": {
-            "layout": "FLEX"
-          },
-          "showCaption": true,
-          "id": "grid"
-        }
-      ],
-      "layout": {
-        "layout": "FLEX"
-      },
-      "dataRegionType": "INHERIT",
-      "caption": "容器",
-      "itemStyle": "DEFAULT",
-      "itemType": "CONTAINER",
-      "layoutPos": {
-        "layout": "FLEX"
-      },
-      "id": "container5"
-    }
-  ],
-  "layoutPanel": true,
-  "codeName": "GridViewLayout",
-  "controlType": "VIEWLAYOUTPANEL",
-  "logicName": "表格视图布局(预置模型)",
-  "appDataEntityId": "web.viewlayoutmodelrepository",
-  "controlParam": {},
-  "name": "layoutpanel",
-  "id": "gridviewlayout"
-}

package/src/layout/app-layout/app-layout.scss

@@ -1,133 +0,0 @@
-@include b(layout) {
-  @include set-component-css-var('layout', $app-layout);
-  @include set-component-css-var('layout-nav', $app-layout-nav);
-  @include set-component-css-var('layout-header', $app-layout-header);
-  @include set-component-css-var('layout-content', $app-layout-content);
-
-  justify-content: flex-start;
-  width: getCssVar('layout', 'width');
-  height: getCssVar('layout', 'height');
-  overflow: hidden;
-
-  @include e(logo) {
-    @include flex-center;
-
-    width: getCssVar('layout-nav', 'width');
-    height: getCssVar('layout-header', 'height');
-    cursor: pointer;
-  }
-
-  @include e(logo-caption) {
-    font-size: getCssVar('layout', 'caption-font-size');
-  }
-
-  @include when(collapse) {
-    @include b(layout-content) {
-      padding-left: getCssVar('layout-nav', 'collapse-width');
-    }
-  }
-
-  // 空白模式样式，隐藏侧边栏和切换图标
-  @include m(blank) {
-    &.#{bem('layout')} {
-      #{getCssVarName('layout-header', 'height')}: 0;
-    }
-
-    // 隐藏侧边栏
-    @include b(layout-nav) {
-      &.el-aside {
-        display: none;
-      }
-    }
-    @include b(layout-content) {
-      padding-left: 0;
-    }
-
-    // 隐藏切换图标
-    @include b(layout-header) {
-      display: none;
-    }
-  }
-}
-
-@include b(layout-nav) {
-  flex: 0 0 getCssVar('layout-nav', 'width') !important;
-  width: getCssVar('layout-nav', 'width') !important;
-  min-width: getCssVar('layout-nav', 'width') !important;
-  max-width: getCssVar('layout-nav', 'width') !important;
-
-  &.is-collapse {
-    flex: 0 0 getCssVar('layout-nav', 'collapse-width') !important;
-    width: getCssVar('layout-nav', 'collapse-width') !important;
-    min-width: getCssVar('layout-nav', 'collapse-width') !important;
-    max-width: getCssVar('layout-nav', 'collapse-width') !important;
-
-    > .el-menu--collapse {
-      width: 100%;
-    }
-  }
-
-  transition: all 0.25s;
-}
-
-@include b(layout-nav) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  height: 100%;
-  background-color: getCssVar('layout-nav', 'bg-color');
-  box-shadow: getCssVar('layout-nav', 'box-shadow');
-}
-
-@include b(layout-header) {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 14;
-  @include flex($horizontal: space-between);
-
-  width: 100%;
-  height: getCssVar('layout-header', 'height');
-  padding: 0;
-  line-height: getCssVar('layout-header', 'height');
-  color: getCssVar('layout-header', 'text-color');
-  background-color: getCssVar('layout-header', 'bg-color');
-  box-shadow: getCssVar('layout-header', 'box-shadow');
-  @include e(left) {
-    @include flex;
-  }
-
-  @include e(collapse-icon) {
-    @include flex-center;
-
-    width: 42px;
-    font-size: getCssVar('font-size', 'large');
-    cursor: pointer;
-
-    &:hover {
-      background: hsl(0deg 0% 100% / 5%);
-    }
-  }
-}
-
-@include b(layout-content) {
-  width: 100%;
-  padding-left: getCssVar('layout-nav', 'width');
-  background-color: getCssVar('layout-content', 'bg-color');
-  transition: all 0.2s ease-in-out;
-  @include e(main) {
-    height: calc(100% - getCssVar('layout-header', 'height'));
-    padding: getCssVar('layout-header', 'height') 0 0;
-
-    @include when(exp) {
-      > div:nth-child(2) {
-        height: calc(100% - 56px);
-      }
-    }
-  }
-
-  &.is-top {
-    padding-left: 0;
-  }
-}

package/src/layout/app-layout/app-layout.tsx

@@ -1,149 +0,0 @@
-import { computed, defineComponent, PropType, ref, useSlots } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
-import { useRouter, useRoute } from 'vue-router';
-import './app-layout.scss';
-import { IAppIndexView } from '@ibiz/model-core';
-
-export const AppLayout = defineComponent({
-  name: 'AppLayout',
-  props: {
-    modelData: { type: Object as PropType<IAppIndexView>, required: true },
-    // 视图是否完成加载
-    isComplete: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { emit }) {
-    const ns = useNamespace('layout');
-    const router = useRouter();
-    const route = useRoute();
-
-    // 菜单收缩变化
-    const isCollapse = ref(false);
-
-    const collapseMenus = () => {
-      isCollapse.value = !isCollapse.value;
-      emit('collapseChange', isCollapse.value);
-    };
-
-    const isBlank = computed(() => props.modelData.blankMode === true);
-
-    const menuAlign = computed(() => {
-      return props.modelData.mainMenuAlign || 'LEFT';
-    });
-
-    const redirectToIndex = () => {
-      const fullPath = route.fullPath;
-      let index = fullPath.indexOf('/');
-      for (let i = 0; i < 2; i++) {
-        index = fullPath.indexOf('/', index + 1);
-      }
-      const indexPath = `${fullPath.substring(0, index)}/-`;
-
-      router.push(indexPath);
-      setTimeout(() => {
-        window.location.reload();
-      });
-    };
-
-    const slots = useSlots();
-    // 是否存在多标签导航
-    const hasTabPageExp = computed(() => {
-      if (slots.tabPageExp) {
-        return true;
-      }
-      return false;
-    });
-
-    const renderLogo = () => {
-      return (
-        <div class={ns.e('logo')} onClick={redirectToIndex}>
-          {props.modelData.appIconPath ? (
-            <img
-              class={ns.e('logo-img')}
-              src={props.modelData.appIconPath}
-            ></img>
-          ) : null}
-          <div class={ns.e('logo-caption')}>{props.modelData.caption}</div>
-        </div>
-      );
-    };
-
-    return {
-      ns,
-      isCollapse,
-      isBlank,
-      collapseMenus,
-      menuAlign,
-      redirectToIndex,
-      renderLogo,
-      hasTabPageExp,
-    };
-  },
-  render() {
-    return this.isComplete ? (
-      <el-container
-        class={[
-          this.ns.b(),
-          this.isBlank ? this.ns.m('blank') : '',
-          this.ns.is('collapse', this.isCollapse),
-        ]}
-      >
-        {this.menuAlign === 'LEFT' ? (
-          <el-aside
-            hide-trigger
-            class={[this.ns.b('nav'), this.ns.is('collapse', this.isCollapse)]}
-            value={this.isCollapse}
-          >
-            {this.renderLogo()}
-            {this.$slots.menu && this.$slots.menu()}
-          </el-aside>
-        ) : null}
-        <el-container
-          class={[
-            this.ns.b('content'),
-            this.ns.is(this.menuAlign.toLowerCase(), true),
-          ]}
-        >
-          <el-header class={this.ns.b('header')}>
-            <div class={this.ns.be('header', 'left')}>
-              {this.renderLogo()}
-              {this.menuAlign === 'LEFT' ? (
-                <div class={this.ns.be('header', 'collapse-icon')}>
-                  {!this.isCollapse ? (
-                    <ion-icon
-                      src={'./assets/img/menu-fold.svg'}
-                      onClick={() => this.collapseMenus()}
-                    />
-                  ) : (
-                    <ion-icon
-                      src={'./assets/img/menu-unfold.svg'}
-                      onClick={() => this.collapseMenus()}
-                    />
-                  )}
-                </div>
-              ) : null}
-              {this.menuAlign === 'TOP'
-                ? this.$slots.menu && this.$slots.menu()
-                : null}
-            </div>
-            <div class={this.ns.be('header', 'right')}>
-              <app-user />
-            </div>
-          </el-header>
-          <el-main
-            class={[
-              this.ns.be('content', 'main'),
-              this.ns.is('exp', this.hasTabPageExp),
-            ]}
-          >
-            {this.$slots.tabPageExp && this.$slots.tabPageExp()}
-            {this.$slots.default && this.$slots.default()}
-          </el-main>
-          {/* <el-footer class={this.ns.b('footer')}>Footer</el-footer> */}
-        </el-container>
-      </el-container>
-    ) : null;
-  },
-});

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

@@ -1,29 +0,0 @@
-import { defineComponent, PropType } from 'vue';
-import { useNamespace } from '@ibiz-template/vue3-util';
-import './control-layout.scss';
-import { IControl } from '@ibiz/model-core';
-
-/**
- * 部件布局
- */
-export const ControlLayout = defineComponent({
-  name: 'ControlLayout',
-  props: {
-    modelData: { type: Object as PropType<IControl>, required: true },
-  },
-  setup() {
-    const ns = useNamespace('control-layout');
-    return { ns };
-  },
-  render() {
-    return (
-      <div
-        class={{
-          [this.ns.b()]: true,
-        }}
-      >
-        {this.$slots.default?.()}
-      </div>
-    );
-  },
-});

package/src/layout/index.ts

@@ -1,15 +0,0 @@
-import { AppLayout } from './app-layout/app-layout';
-import { ControlLayout } from './control-layout/control-layout';
-import { ViewBase } from './view-base/view-base';
-import { MDViewBase } from './md-view-base/md-view-base';
-import { ViewLayout } from './view-layout/view-layout';
-import { ControlBase } from './control-base/control-base';
-
-export {
-  AppLayout,
-  ViewLayout,
-  ViewBase,
-  MDViewBase,
-  ControlLayout,
-  ControlBase,
-};

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

@@ -1,69 +0,0 @@
-import { ViewController } from '@ibiz-template/runtime';
-import { EmptyVNode } from '@ibiz-template/vue3-util';
-import { defineComponent, PropType } from 'vue';
-
-export const MDViewBase = defineComponent({
-  props: {
-    controller: {
-      type: Object as PropType<ViewController>,
-      required: true,
-    },
-  },
-  setup() {
-    return {};
-  },
-  render() {
-    const c = this.controller;
-    const state = c.state;
-
-    // 外面的插槽同样传给view-layout
-    const inheritSlots: IData = {};
-    Object.keys(this.$slots).forEach(key => {
-      inheritSlots[key] = (arg: IData) => this.$slots[key]!(arg);
-    });
-
-    return (
-      <view-base controller={c}>
-        {{
-          quickSearch: () => {
-            // if (state.complete && c.model.enableQuickSearch) {
-            //   return (
-            //     <quick-search
-            //       value={state.query}
-            //       viewMode={c.modal.mode}
-            //       // todo 搜索提示
-            //       // placeholder={c.model.placeholder}
-            //       onUpdate={(val: string) => {
-            //         state.query = val;
-            //       }}
-            //       onSearch={() => c.onSearch()}
-            //     ></quick-search>
-            //   );
-            // }
-            return EmptyVNode;
-          },
-          searchForm: () => {
-            // if (
-            //   c.state.complete &&
-            //   c.model.searchForm &&
-            //   c.state.showSearchForm
-            // ) {
-            //   return (
-            //     <search-form-control
-            //       modelData={c.model.searchForm}
-            //       context={c.context}
-            //       params={c.params}
-            //       onNeuronInit={c.nerve.onNeuronInit(
-            //         c.model.searchForm.source.name,
-            //       )}
-            //     ></search-form-control>
-            //   );
-            // }
-            return EmptyVNode;
-          },
-          ...inheritSlots,
-        }}
-      </view-base>
-    );
-  },
-});

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

@@ -1,11 +0,0 @@
-@include b(view) {
-  @include b(view-caption) {
-    @include utils-ellipsis;
-
-    @include e(icon) {
-      display: inline-block;
-      margin: getCssVar('view-caption-icon', 'margin');
-      vertical-align: middle;
-    }
-  }
-}