@ibiz-template/vue3-components 0.7.40-alpha.9 → 0.7.40

package/lib/control/data-view/data-view.cjs

@@ -15,45 +15,66 @@ function _isSlot(s) {
 const DataViewControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDataViewControl",
   props: {
+    /**
+     * @description 数据视图（卡片）模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
     /**
-     * 部件行数据默认激活模式
-     * - 0 不激活
-     * - 1 单击激活
-     * - 2 双击激活(默认值)
-     *
-     * @type {(number | 0 | 1 | 2)}
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
      */
     mdctrlActiveMode: {
       type: Number,
       default: void 0
     },
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
       type: Boolean,
       default: void 0
     },
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
     isSimple: {
       type: Boolean,
       required: false
     },
+    /**
+     * @description 简单模式下传入的数据
+     */
     data: {
       type: Array,
       required: false
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true
@@ -77,7 +98,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     });
     const cardStyle = vue.computed(() => {
       var _a, _b;
-      return ((_b = (_a = c.model.controlParam) == null ? void 0 : _a.ctrlParams) == null ? void 0 : _b.CARDSTYLE) || "default";
+      return ((_b = (_a = c.model.controlParam) == null ? void 0 : _a.ctrlParams) == null ? void 0 : _b.CARDSTYLE) || c.controlParams.cardstyle || "default";
     });
     const showCollapseOrExpandIcon = vue.computed(() => {
       return !c.model.enableGroup && (c.model.pagingMode === 2 || c.model.pagingMode === 3);
@@ -381,63 +402,104 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }
       return icon;
     };
+    const renderNavIcon = () => {
+      const {
+        enableNavView,
+        showNavIcon,
+        showNavView
+      } = c.state;
+      if (enableNavView && showNavIcon)
+        return !showNavView ? vue.createVNode("ion-icon", {
+          "name": "eye-outline",
+          "class": ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.showNav"),
+          "onClick": () => c.onShowNavViewChange()
+        }, null) : vue.createVNode("ion-icon", {
+          "name": "eye-off-outline",
+          "class": ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
+          "onClick": () => c.onShowNavViewChange()
+        }, null);
+    };
+    const renderSortBar = () => {
+      if (!c.state.noSort)
+        return vue.createVNode(vue.resolveComponent("iBizSortBar"), {
+          "onSortChange": (item, order) => {
+            c.setSort(item.key, order);
+            c.load({
+              isInitialLoad: c.model.pagingMode === 2 || c.model.pagingMode === 3
+            });
+          },
+          "sortItems": c.state.sortItems
+        }, null);
+    };
+    const renderContent = () => {
+      return [c.state.items.length > 0 ? renderHasData() : renderNoData(), renderNavIcon(), renderCollapseExpandIcon()];
+    };
+    const renderPagingBar = () => {
+      if (c.state.enablePagingBar && c.model.pagingMode === 1)
+        return vue.createVNode(vue.resolveComponent("iBizPagination"), {
+          "class": ns.e("pagination"),
+          "total": c.state.total,
+          "curPage": c.state.curPage,
+          "size": c.state.size,
+          "totalPages": c.state.totalPages,
+          "onChange": onPageChange,
+          "onPageSizeChange": onPageSizeChange,
+          "onPageRefresh": onPageRefresh
+        }, null);
+    };
+    const renderSearchBar = () => {
+      const searchbar = runtime.getControl(c.view.model, "searchbar");
+      if (!searchbar)
+        return;
+      const id = searchbar.name || searchbar.id;
+      const provider = c.view.providers[id];
+      return vue.h(vue.resolveComponent((provider == null ? void 0 : provider.component) || "IBizControlShell"), {
+        context: c.view.context,
+        params: c.view.params,
+        modelData: searchbar,
+        ...c.view.slotProps[id] || {},
+        provider
+      });
+    };
+    const renderDefaultStyle = () => {
+      if (c.state.isCreated)
+        return [renderSortBar(), ...renderContent(), renderPagingBar()];
+    };
+    const renderUserStyle = () => {
+      return {
+        sortbar: () => renderSortBar(),
+        searchbar: () => renderSearchBar(),
+        dataview: () => vue.createVNode("div", {
+          "class": ns.e("layout-content")
+        }, [renderContent()]),
+        pagingbar: () => renderPagingBar()
+      };
+    };
+    const renderLayoutByStyle = () => {
+      if (cardStyle.value === "userstyle")
+        return renderUserStyle();
+      return renderDefaultStyle();
+    };
     return {
       c,
       ns,
       classNames,
       infiniteScroll,
-      renderHasData,
-      renderNoData,
-      onPageChange,
-      onPageRefresh,
-      onPageSizeChange,
-      renderCollapseExpandIcon
+      renderLayoutByStyle
     };
   },
   render() {
-    const {
-      items,
-      isCreated
-    } = this.c.state;
-    let content = null;
-    if (isCreated) {
-      content = [this.c.state.noSort ? null : vue.createVNode(vue.resolveComponent("iBizSortBar"), {
-        "onSortChange": (item, order) => {
-          this.c.setSort(item.key, order);
-          this.c.load({
-            isInitialLoad: this.c.model.pagingMode === 2 || this.c.model.pagingMode === 3
-          });
-        },
-        "sortItems": this.c.state.sortItems
-      }, null), items.length > 0 ? this.renderHasData() : this.renderNoData(), this.c.state.enablePagingBar && this.c.model.pagingMode === 1 ? vue.createVNode(vue.resolveComponent("iBizPagination"), {
-        "class": this.ns.e("pagination"),
-        "total": this.c.state.total,
-        "curPage": this.c.state.curPage,
-        "size": this.c.state.size,
-        "totalPages": this.c.state.totalPages,
-        "onChange": this.onPageChange,
-        "onPageSizeChange": this.onPageSizeChange,
-        "onPageRefresh": this.onPageRefresh
-      }, null) : null];
-    }
+    let _slot2;
     return vue.createVNode(vue.resolveComponent("iBizControlNavigation"), {
       "controller": this.c
     }, {
       default: () => [vue.createVNode(vue.resolveComponent("iBizControlBase"), {
         "class": [this.ns.is("enable-page", !!this.c.state.enablePagingBar)],
         "controller": this.c
-      }, {
-        default: () => [content, this.c.state.enableNavView && this.c.state.showNavIcon ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {
-          "class": this.ns.e("nav-icon"),
-          "title": ibiz.i18n.t("component.controlNavigation.showNav"),
-          "name": "eye-outline",
-          "onClick": () => this.c.onShowNavViewChange()
-        }, null) : vue.createVNode("ion-icon", {
-          "class": this.ns.e("nav-icon"),
-          "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
-          "name": "eye-off-outline",
-          "onClick": () => this.c.onShowNavViewChange()
-        }, null) : null, this.renderCollapseExpandIcon()]
+      }, _isSlot(_slot2 = this.renderLayoutByStyle()) ? _slot2 : {
+        default: () => [_slot2]
       })]
     });
   }

package/lib/control/drbar/drbar.cjs

@@ -10,29 +10,52 @@ require('./drbar.css');
 const DRBarControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDrBarControl",
   props: {
+    /**
+     * @description 数据关系栏模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
+    /**
+     * @description  导航数据
+     */
     srfnav: {
       type: String,
       required: false
     },
+    /**
+     * @description  指定el-menu的菜单展示模式（mode）参数
+     * @default vertical
+     */
     showMode: {
       type: String,
       default: "vertical"
     },
+    /**
+     * @description  隐藏编辑项
+     */
     hideEditItem: {
       type: Boolean,
       default: void 0

package/lib/control/drtab/drtab-control.util.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var vue = require('vue');
-var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.40-alpha.7_axios@1.7.7_lodash-es@4.17.21_qs@6.13.0_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.cjs');
+var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.40_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.cjs');
 
 "use strict";
 function useAppDRTab(c, controlRef, counterData) {

package/lib/control/drtab/drtab.cjs

@@ -9,23 +9,37 @@ var core = require('@ibiz-template/core');
 var drtab_controller = require('./drtab.controller.cjs');
 var drtabControl_util = require('./drtab-control.util.cjs');
 require('./drtab.css');
+var flowDrtab = require('./flow-drtab.cjs');
 
 "use strict";
 const DRTabControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDrTabControl",
   props: {
+    /**
+     * @description 数据关系分页栏模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     }
@@ -152,6 +166,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
     return {
       c,
       ns,
+      activeTab,
       controlRef,
       counterData,
       visibleItems,
@@ -167,6 +182,17 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
       isCreated,
       isCalculatedPermission
     } = this.c.state;
+    if (this.tabPosition === "flow_noheader" || this.tabPosition === "flow") {
+      return vue.createVNode(flowDrtab.FlowDrtab, {
+        "pagesstate": this.visibleItems,
+        "drtabpages": this.modelData.dedrtabPages,
+        "context": this.c.context,
+        "params": this.c.params,
+        "showHeader": this.tabPosition === "flow",
+        "counterData": this.counterData,
+        "activeTab": this.activeTab
+      }, null);
+    }
     const moreTab = this.moreItems.find((tab) => tab.tag === this.c.state.activeName) || {};
     const more = vue.createVNode(vue.resolveComponent("el-dropdown"), {
       "trigger": "click",

package/lib/control/drtab/flow-drtab.cjs

@@ -0,0 +1,146 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+var ramda = require('ramda');
+var qxUtil = require('qx-util');
+require('./flow-drtab.css');
+
+"use strict";
+const FlowDrtab = /* @__PURE__ */ vue.defineComponent({
+  name: "FlowDrtab",
+  props: {
+    pagesstate: {
+      type: Array,
+      default: () => []
+    },
+    drtabpages: {
+      type: Array,
+      default: () => []
+    },
+    context: {
+      type: Object,
+      default: () => {
+      }
+    },
+    params: {
+      type: Object,
+      default: () => {
+      }
+    },
+    counterData: {
+      type: Array,
+      default: () => {
+      }
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    activeTab: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("flow-drtab");
+    const uuid = qxUtil.createUUID();
+    const navtag = vue.ref("");
+    const viewList = vue.ref([]);
+    const scrollToTarget = () => {
+      if (navtag.value) {
+        const el = document.getElementById("".concat(uuid, "_").concat(navtag.value));
+        if (el) {
+          el.scrollIntoView();
+        }
+      }
+    };
+    const onViewMounted = () => {
+      scrollToTarget();
+    };
+    vue.watch(() => props.activeTab, (newVal, oldVal) => {
+      if (newVal && newVal.tag !== (oldVal == null ? void 0 : oldVal.tag)) {
+        navtag.value = newVal.tag;
+        scrollToTarget();
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
+    vue.watch(() => props.drtabpages, (newVal) => {
+      if (newVal) {
+        Promise.all(newVal.map(async (item) => {
+          const view = await ibiz.hub.getAppView(item.appViewId);
+          return {
+            id: item.id,
+            height: view == null ? void 0 : view.height,
+            width: view == null ? void 0 : view.width
+          };
+        })).then((res) => {
+          viewList.value = res;
+        });
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
+    const calcStyle = (tag) => {
+      const target = viewList.value.find((item) => {
+        return item.id === tag;
+      });
+      if (target) {
+        return {
+          height: target.height ? "".concat(target.height, "px") : "100%",
+          width: target.width ? "".concat(target.width, "px") : "100%"
+        };
+      }
+    };
+    return {
+      ns,
+      uuid,
+      onViewMounted,
+      calcStyle
+    };
+  },
+  render() {
+    const tabs = this.pagesstate.map((item) => {
+      const counterNum = item.counterId ? this.counterData[item.counterId] : void 0;
+      const viewShell = vue.resolveComponent("IBizViewShell");
+      const target = this.drtabpages.find((page) => {
+        return page.id === item.tag;
+      });
+      if (!target || item.hidden) {
+        return null;
+      }
+      return vue.createVNode("div", {
+        "id": "".concat(this.uuid, "_").concat(item.tag),
+        "class": this.ns.e("tab-item")
+      }, [this.showHeader && vue.createVNode("div", {
+        "class": this.ns.em("tab-item", "label")
+      }, [item.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+        "class": this.ns.be("label", "icon"),
+        "icon": item.sysImage
+      }, null), vue.createVNode("span", {
+        "class": this.ns.be("label", "text")
+      }, [item.caption]), !ramda.isNil(counterNum) && vue.createVNode(vue.resolveComponent("iBizBadge"), {
+        "class": this.ns.e("counter"),
+        "value": counterNum,
+        "counterMode": item.counterMode
+      }, null)]), vue.createVNode("div", {
+        "class": this.ns.em("tab-item", "tab-view"),
+        "style": this.calcStyle(item.tag)
+      }, [vue.h(viewShell, {
+        context: this.context,
+        params: this.params,
+        viewId: target.appViewId,
+        onMounted: this.onViewMounted
+      })])]);
+    });
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [tabs]);
+  }
+});
+
+exports.FlowDrtab = FlowDrtab;

package/lib/control/drtab/flow-drtab.css

@@ -0,0 +1 @@
+.ibiz-flow-drtab{display:flex;flex-direction:column;gap:var(--ibiz-spacing-base);background-color:var(--ibiz-color-bg-0)}.ibiz-flow-drtab__tab-item{margin-right:var(--ibiz-spacing-base);background-color:var(--ibiz-color-bg-1);border-radius:var(--ibiz-border-radius-medium)}.ibiz-flow-drtab__tab-item--label{padding:var(--ibiz-spacing-base);font-size:var(--ibiz-font-size-header-5);border-bottom:1px solid var(--ibiz-color-fill-1)}.ibiz-flow-drtab__tab-item--tab-view{padding:var(--ibiz-spacing-tight) 0}.ibiz-flow-drtab__counter{font-size:var(--ibiz-font-size-regular);text-align:center}

package/lib/control/exp-bar/calendar-exp-bar/calendar-exp-bar.cjs

@@ -13,25 +13,45 @@ function _isSlot(s) {
 const CalendarExpBarControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizCalendarExpBarControl",
   props: {
+    /**
+     * @description 日历导航栏模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
+    /**
+     * @description 导航数据
+     */
     srfnav: {
       type: String,
       required: false
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true

package/lib/control/exp-bar/chart-exp-bar/chart-exp-bar.cjs

@@ -13,25 +13,45 @@ function _isSlot(s) {
 const ChartExpBarControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizChartExpBarControl",
   props: {
+    /**
+     * @description 图表导航栏模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
+    /**
+     * @description 导航数据
+     */
     srfnav: {
       type: String,
       required: false
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true

package/lib/control/exp-bar/data-view-exp-bar/data-view-view-exp-bar.cjs

@@ -13,25 +13,45 @@ function _isSlot(s) {
 const DataViewExpBarControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDataViewExpBarControl",
   props: {
+    /**
+     * @description 数据卡片导航栏模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
+    /**
+     * @description 导航数据
+     */
     srfnav: {
       type: String,
       required: false
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true

package/lib/control/exp-bar/grid-exp-bar/grid-exp-bar.cjs

@@ -13,25 +13,45 @@ function _isSlot(s) {
 const GridExpBarControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizGridExpBarControl",
   props: {
+    /**
+     * @description 表格导航栏模型数据
+     */
     modelData: {
       type: Object,
       required: true
     },
+    /**
+     * @description 应用上下文对象
+     */
     context: {
       type: Object,
       required: true
     },
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
       type: Object,
       default: () => ({})
     },
+    /**
+     * @description 部件适配器
+     */
     provider: {
       type: Object
     },
+    /**
+     * @description 导航数据
+     */
     srfnav: {
       type: String,
       required: false
     },
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
       type: Boolean,
       default: true