@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.8

package/es/control/dashboard/portlet/menu-portlet/menu-portlet.provider.mjs

@@ -0,0 +1,21 @@
+import { MenuPortletController } from '@ibiz-template/runtime';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class MenuPortletProvider {
+  constructor() {
+    __publicField(this, "component", "IBizMenuPortlet");
+  }
+  async createController(portletModel, dashboard, parent) {
+    const c = new MenuPortletController(portletModel, dashboard, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { MenuPortletProvider };

package/es/control/dashboard/portlet/portlet-layout/portlet-layout.css

@@ -0,0 +1 @@
+.ibiz-portlet-layout{--ibiz-portlet-layout-bg-color:transparent;--ibiz-portlet-layout-header-height:50px;--ibiz-portlet-layout-header-padding:14px 16px;--ibiz-portlet-layout-header-margin:0;--ibiz-portlet-layout-header-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-layout-header-border-bottom:var(--ibiz-border);--ibiz-portlet-layout-caption-max-width:300px;--ibiz-portlet-layout-caption-font-weight:var(--ibiz-font-weight-regular);--ibiz-portlet-layout-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-portlet-layout-caption-color:var(--ibiz-text-color-primary);--ibiz-portlet-layout-content-bg-color:var(--ibiz-color-bg-1);--ibiz-portlet-layout-content-padding:0;--ibiz-portlet-layout-content-margin:0;--ibiz-portlet-layout-padding:var(--ibiz-spacing-tight);width:100%;height:100%;padding:var(--ibiz-portlet-layout-padding);background-color:var(--ibiz-portlet-layout-bg-color)}.ibiz-portlet-layout__caption{max-width:var(--ibiz-portlet-layout-caption-max-width);height:100%;padding:0 0 0 var(--ibiz-spacing-base)}.ibiz-portlet-layout__caption-text{font-size:var(--ibiz-portlet-layout-caption-font-size);font-weight:var(--ibiz-portlet-layout-caption-font-weight);line-height:var(--ibiz-portlet-layout-caption-font-size);color:var(--ibiz-portlet-layout-caption-color)}.ibiz-portlet-layout__caption::before{position:absolute;top:50%;left:0;width:4px;height:20px;content:"";background-color:var(--ibiz-color-primary);border-radius:2px;transform:translateY(-50%)}.ibiz-portlet-layout.is-no-header>.ibiz-portlet-layout-content{height:100%}.ibiz-portlet-layout-header{display:flex;justify-content:space-between;height:var(--ibiz-portlet-layout-header-height);padding:var(--ibiz-portlet-layout-header-padding);margin:var(--ibiz-portlet-layout-header-margin);background-color:var(--ibiz-portlet-layout-header-bg-color);border-bottom:var(--ibiz-portlet-layout-header-border-bottom)}.ibiz-portlet-layout-header__left{position:relative}.ibiz-portlet-layout-content{height:calc(100% - var(--ibiz-portlet-layout-header-height));padding:var(--ibiz-portlet-layout-content-padding);margin:var(--ibiz-portlet-layout-content-margin);overflow-y:scroll;background-color:var(--ibiz-portlet-layout-content-bg-color)}

package/es/control/dashboard/portlet/portlet-layout/portlet-layout.mjs

@@ -0,0 +1,70 @@
+import { computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './portlet-layout.css';
+import { PortletPartController } from '@ibiz-template/runtime';
+
+"use strict";
+const PortletLayout = /* @__PURE__ */ defineComponent({
+  name: "IBizPortletLayout",
+  props: {
+    controller: {
+      type: PortletPartController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("portlet-layout");
+    const c = props.controller;
+    const isShowHeader = computed(() => {
+      return c.model.showTitleBar && (c.model.title || c.model.sysImage) || c.model.uiactionGroup;
+    });
+    const onActionClick = async (detail, event) => {
+      await props.controller.onActionClick(detail, event);
+    };
+    return {
+      c,
+      ns,
+      isShowHeader,
+      onActionClick
+    };
+  },
+  render() {
+    var _a, _b;
+    const {
+      model,
+      state
+    } = this.controller;
+    let title = model.title;
+    if (model.titleLanguageRes) {
+      title = ibiz.i18n.t(model.titleLanguageRes.lanResTag, model.title);
+    }
+    return createVNode("div", {
+      "class": [this.ns.b(), this.ns.is("no-header", !this.isShowHeader)]
+    }, [this.isShowHeader && createVNode("div", {
+      "key": "header",
+      "class": this.ns.b("header")
+    }, [createVNode("div", {
+      "class": this.ns.be("header", "left")
+    }, [model.showTitleBar && createVNode("div", {
+      "class": this.ns.e("caption")
+    }, [createVNode(resolveComponent("iBizIcon"), {
+      "class": this.ns.e("caption-icon"),
+      "icon": model.sysImage
+    }, null), createVNode("span", {
+      "class": this.ns.e("caption-text"),
+      "title": title
+    }, [title])])]), createVNode("div", {
+      "class": this.ns.be("header", "right")
+    }, [model.uiactionGroup && createVNode(resolveComponent("iBizActionToolbar"), {
+      "class": this.ns.e("toolbar"),
+      "action-details": model.uiactionGroup.uiactionGroupDetails,
+      "actions-state": state.actionGroupState,
+      "onActionClick": this.onActionClick
+    }, null)])]), createVNode("div", {
+      "key": "content",
+      "class": this.ns.b("content")
+    }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]);
+  }
+});
+
+export { PortletLayout };

package/es/control/dashboard/portlet/rawitem-portlet/index.mjs

@@ -0,0 +1,15 @@
+import { registerPortletProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { RawItemPortlet } from './rawitem-portlet.mjs';
+import { RawItemPortletProvider } from './rawitem-portlet.provider.mjs';
+
+"use strict";
+const IBizRawItemPortlet = withInstall(
+  RawItemPortlet,
+  function(v) {
+    v.component(RawItemPortlet.name, RawItemPortlet);
+    registerPortletProvider("RAWITEM", () => new RawItemPortletProvider());
+  }
+);
+
+export { IBizRawItemPortlet, RawItemPortlet, IBizRawItemPortlet as default };

package/es/control/dashboard/portlet/rawitem-portlet/rawitem-portlet.mjs

@@ -0,0 +1,44 @@
+import { isVNode, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { RawItemPortletController } from '@ibiz-template/runtime';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const RawItemPortlet = /* @__PURE__ */ defineComponent({
+  name: "IBizRawItemPortlet",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: RawItemPortletController,
+      required: true
+    }
+  },
+  setup(props) {
+    var _a;
+    const ns = useNamespace(`portlet-${(_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()}`);
+    const rawItem = props.modelData;
+    return {
+      ns,
+      rawItem
+    };
+  },
+  render() {
+    let _slot;
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass];
+    return createVNode(resolveComponent("iBizPortletLayout"), {
+      "controller": this.controller,
+      "class": classArr
+    }, _isSlot(_slot = h(resolveComponent("iBizRawItem"), {
+      rawItem: this.rawItem
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+export { RawItemPortlet };

package/es/control/dashboard/portlet/rawitem-portlet/rawitem-portlet.provider.mjs

@@ -0,0 +1,21 @@
+import { RawItemPortletController } from '@ibiz-template/runtime';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class RawItemPortletProvider {
+  constructor() {
+    __publicField(this, "component", "IBizRawItemPortlet");
+  }
+  async createController(portletModel, dashboard, parent) {
+    const c = new RawItemPortletController(portletModel, dashboard, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { RawItemPortletProvider };

package/es/control/dashboard/portlet/view-portlet/index.mjs

@@ -0,0 +1,12 @@
+import { registerPortletProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { ViewPortlet } from './view-portlet.mjs';
+import { ViewPortletProvider } from './view-portlet.provider.mjs';
+
+"use strict";
+const IBizViewPortlet = withInstall(ViewPortlet, function(v) {
+  v.component(ViewPortlet.name, ViewPortlet);
+  registerPortletProvider("VIEW", () => new ViewPortletProvider());
+});
+
+export { IBizViewPortlet, ViewPortlet, IBizViewPortlet as default };

package/es/control/dashboard/portlet/view-portlet/view-portlet.mjs

@@ -0,0 +1,50 @@
+import { isVNode, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { ViewPortletController } from '@ibiz-template/runtime';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ViewPortlet = /* @__PURE__ */ defineComponent({
+  name: "IBizViewPortlet",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: ViewPortletController,
+      required: true
+    }
+  },
+  setup(props) {
+    var _a;
+    const ns = useNamespace(`portlet-${(_a = props.modelData.portletType) == null ? void 0 : _a.toLowerCase()}`);
+    const view = props.modelData.portletAppView;
+    return {
+      ns,
+      view
+    };
+  },
+  render() {
+    let _slot;
+    const classArr = [this.ns.b(), this.ns.m(this.modelData.codeName), ...this.controller.containerClass];
+    const {
+      context,
+      params
+    } = this.controller;
+    return createVNode(resolveComponent("iBizPortletLayout"), {
+      "controller": this.controller,
+      "class": classArr
+    }, _isSlot(_slot = h(resolveComponent("IBizViewShell"), {
+      context,
+      params,
+      modelData: this.view
+    })) ? _slot : {
+      default: () => [_slot]
+    });
+  }
+});
+
+export { ViewPortlet };

package/es/control/dashboard/portlet/view-portlet/view-portlet.provider.mjs

@@ -0,0 +1,21 @@
+import { ViewPortletController } from '@ibiz-template/runtime';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ViewPortletProvider {
+  constructor() {
+    __publicField(this, "component", "IBizViewPortlet");
+  }
+  async createController(portletModel, dashboard, parent) {
+    const c = new ViewPortletController(portletModel, dashboard, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { ViewPortletProvider };

package/es/control/data-view/data-view.css

@@ -0,0 +1 @@
+.ibiz-control-dataview{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;height:100%}.ibiz-control-dataview__content{flex-grow:1;height:100%}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview-scroll{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-base-tight);align-content:flex-start;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview-item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview-item{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px;color:var(--ibiz-control-dataview-text-color);cursor:pointer}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{--ibiz-control-dataview-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-hover-bg-color:var(--ibiz-color-fill-1);--ibiz-control-dataview-active-bg-color:var(--ibiz-color-fill-2);--ibiz-control-dataview-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base) 0;--ibiz-control-dataview-page-height:50px}.ibiz-control-dataview-item-content__top--title{text-align:center}.ibiz-control-dataview-item-content__top--description{min-width:150px;text-align:justify;text-justify:newspaper;word-break:break-all}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-group-content{--ibiz-control-dataview-group-item-header-bg-color:transparent;--ibiz-control-dataview-group-item-header-padding:var(--ibiz-spacing-base-tight);--ibiz-control-dataview-group-item-header-border-color:var(--ibiz-color-border);--ibiz-control-dataview-group-item-caption-text-color:var(--ibiz-color-text-0);--ibiz-control-dataview-group-item-caption-font-size:var(--ibiz-font-size-header-5);--ibiz-control-dataview-group-item-caption-font-weight:var(--ibiz-font-weight-bold);--ibiz-control-dataview-group-item-content-bg-color:transparent;--ibiz-control-dataview-group-item-content-padding:var(--ibiz-spacing-tight);width:100%}.ibiz-control-dataview-group-content__item .el-collapse-item__content{display:flex;flex-wrap:wrap}.ibiz-control-dataview-group-content__item--empty{width:100%;text-align:center}.ibiz-control-dataview-group-content__item-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ibiz-control-dataview-group-item-header-padding);border-bottom:1px solid var(--ibiz-control-dataview-group-item-header-border-color)}.ibiz-control-dataview-group-content__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-control-dataview-group-item-caption-font-size);font-weight:var(--ibiz-control-dataview-group-item-caption-font-weight);color:var(--ibiz-control-dataview-group-item-caption-text-color)}.ibiz-control-dataview-group-content__item-content{display:flex;flex-wrap:wrap;gap:var(--ibiz-spacing-base-tight);padding:var(--ibiz-control-dataview-group-item-content-padding);background-color:var(--ibiz-control-dataview-group-item-content-bg-color)}.ibiz-control-dataview-group-content__item-row{padding:var(--ibiz-control-dataview-group-item-content-padding)}.ibiz-control-dataview-group-content__item-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}

package/es/control/data-view/data-view.mjs

@@ -0,0 +1,293 @@
+import { isVNode, computed, resolveComponent, createVNode, createTextVNode, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import { DataViewControlController } from '@ibiz-template/runtime';
+import './data-view.css';
+import '../../util/index.mjs';
+import { usePagination } from '../../util/pagination/use-pagination.mjs';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const DataViewControl = /* @__PURE__ */ defineComponent({
+  name: "IBizDataViewControl",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      required: true
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    provider: {
+      type: Object
+    },
+    /**
+     * 部件行数据默认激活模式
+     * - 0 不激活
+     * - 1 单击激活
+     * - 2 双击激活(默认值)
+     *
+     * @type {(number | 0 | 1 | 2)}
+     */
+    mdctrlActiveMode: {
+      type: Number,
+      default: void 0
+    },
+    singleSelect: {
+      type: Boolean,
+      default: void 0
+    },
+    loadDefault: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const c = useControlController((...args) => new DataViewControlController(...args));
+    const ns = useNamespace(`control-${c.model.controlType.toLowerCase()}`);
+    const classNames = computed(() => {
+      return [ns.is("enable-page", c.model.enablePagingBar === true)];
+    });
+    const isLodeMoreDisabled = computed(() => {
+      if (c.model.enablePagingBar === true) {
+        return true;
+      }
+      return c.state.items.length >= c.state.total || c.state.isLoading || c.state.total <= c.state.size;
+    });
+    const {
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
+    } = usePagination(c);
+    const onRowClick = (item, event) => {
+      event.stopPropagation();
+      return c.onRowClick(item);
+    };
+    const onDbRowClick = (item, event) => {
+      event.stopPropagation();
+      return c.onDbRowClick(item);
+    };
+    const renderPanelItem = (item, modelData) => {
+      const {
+        context,
+        params
+      } = c;
+      return createVNode(resolveComponent("iBizControlShell"), {
+        "data": item,
+        "modelData": modelData,
+        "context": context,
+        "params": params,
+        "onClick": (event) => onRowClick(item, event),
+        "onDblclick": (event) => onDbRowClick(item, event)
+      }, null);
+    };
+    const renderItemAction = (item) => {
+      var _a;
+      return createVNode(resolveComponent("iBizActionToolbar"), {
+        "class": ns.bem("item-content", "bottom", "actions"),
+        "action-details": (_a = c.getOptItemModel().deuiactionGroup) == null ? void 0 : _a.uiactionGroupDetails,
+        "actions-state": c.getOptItemAction(item),
+        "onActionClick": (detail, event) => c.onActionClick(detail, item, event)
+      }, null);
+    };
+    const renderDefaultItem = (item) => {
+      return createVNode("div", {
+        "class": ns.b("item-content")
+      }, [createVNode("div", {
+        "class": ns.be("item-content", "top")
+      }, [createVNode("div", {
+        "class": ns.bem("item-content", "top", "title")
+      }, [item.srfmajortext]), createVNode("div", {
+        "class": ns.bem("item-content", "top", "description")
+      }, [item.content])]), c.getOptItemModel() ? createVNode("div", {
+        "class": ns.be("item-content", "bottom")
+      }, [renderItemAction(item)]) : null]);
+    };
+    const renderCard = (item) => {
+      const findIndex = c.state.selectedData.findIndex((data) => {
+        return data.srfkey === item.srfkey;
+      });
+      const cardClass = [ns.b("item"), ns.is("active", findIndex !== -1)];
+      const cardStyle = {};
+      if (c.model.cardWidth) {
+        Object.assign(cardStyle, {
+          width: `${c.model.cardWidth}px`
+        });
+      }
+      if (c.model.cardHeight) {
+        Object.assign(cardStyle, {
+          height: `${c.model.cardHeight}px`
+        });
+      }
+      const panel = props.modelData.itemLayoutPanel;
+      return createVNode(resolveComponent("el-card"), {
+        "shadow": "hover",
+        "class": cardClass,
+        "body-style": cardStyle,
+        "onClick": (event) => onRowClick(item, event),
+        "onDblclick": (event) => onDbRowClick(item, event)
+      }, {
+        default: () => [panel ? renderPanelItem(item, panel) : renderDefaultItem(item)]
+      });
+    };
+    const renderGroup = (group) => {
+      const {
+        cardColXS,
+        cardColSM,
+        cardColMD,
+        cardColLG
+      } = c.model;
+      return createVNode("div", {
+        "class": ns.be("group-content", "item")
+      }, [createVNode("div", {
+        "class": ns.be("group-content", "item-header")
+      }, [createVNode("span", {
+        "class": ns.be("group-content", "item-title")
+      }, [group.caption]), createVNode("span", {
+        "class": ns.be("group-content", "item-action")
+      }, [c.model.groupUIActionGroup && group.groupActionGroupState && createVNode(resolveComponent("iBizActionToolbar"), {
+        "class": ns.be("group-content", "header-actions"),
+        "action-details": c.model.groupUIActionGroup.uiactionGroupDetails,
+        "actions-state": group.groupActionGroupState,
+        "onActionClick": (detail, event) => {
+          c.onGroupToolbarClick(detail, event, group);
+        }
+      }, null)])]), cardColXS || cardColSM || cardColMD || cardColLG ? createVNode(resolveComponent("el-row"), {
+        "class": ns.be("group-content", "item-row")
+      }, {
+        default: () => [group.children.length > 0 ? group.children.map((child) => {
+          let _slot;
+          return createVNode(resolveComponent("el-col"), {
+            "xs": cardColXS,
+            "sm": cardColSM,
+            "md": cardColMD,
+            "lg": cardColLG,
+            "class": ns.be("group-content", "item-col")
+          }, _isSlot(_slot = renderCard(child)) ? _slot : {
+            default: () => [_slot]
+          });
+        }) : createVNode("div", {
+          "class": ns.bem("group-content", "item", "empty")
+        }, [createTextVNode("\u65E0\u6570\u636E")])]
+      }) : createVNode("div", {
+        "class": ns.be("group-content", "item-content")
+      }, [group.children.length > 0 ? group.children.map((child) => {
+        return renderCard(child);
+      }) : createVNode("div", {
+        "class": ns.bem("group-content", "item", "empty")
+      }, [createTextVNode("\u65E0\u6570\u636E")])])]);
+    };
+    const renderDataViewContent = () => {
+      const {
+        cardColXS,
+        cardColSM,
+        cardColMD,
+        cardColLG
+      } = c.model;
+      if (c.model.enableGroup) {
+        return createVNode("div", {
+          "class": ns.b("group-content")
+        }, [c.state.groups.map((group) => {
+          return createVNode("div", {
+            "class": [ns.b("scroll-item")]
+          }, [renderGroup(group)]);
+        })]);
+      }
+      if (cardColXS || cardColSM || cardColMD || cardColLG) {
+        let _slot3;
+        return createVNode(resolveComponent("el-row"), {
+          "class": [ns.b("item-row")]
+        }, _isSlot(_slot3 = c.state.items.map((item) => {
+          let _slot2;
+          return createVNode(resolveComponent("el-col"), {
+            "xs": cardColXS,
+            "sm": cardColSM,
+            "md": cardColMD,
+            "lg": cardColLG,
+            "class": [ns.b("item-col")]
+          }, _isSlot(_slot2 = renderCard(item)) ? _slot2 : {
+            default: () => [_slot2]
+          });
+        })) ? _slot3 : {
+          default: () => [_slot3]
+        });
+      }
+      return c.state.items.map((item) => {
+        return createVNode("div", {
+          "class": [ns.b("scroll-item")]
+        }, [renderCard(item)]);
+      });
+    };
+    const renderHasData = () => {
+      return withDirectives(createVNode("div", {
+        "class": [ns.b("scroll"), ns.e("content")],
+        "infinite-scroll-distance": 10,
+        "infinite-scroll-disabled": isLodeMoreDisabled.value
+      }, [renderDataViewContent()]), [[resolveDirective("infinite-scroll"), () => c.loadMore()]]);
+    };
+    const renderNoData = () => {
+      const {
+        isLoaded
+      } = c.state;
+      if (!isLoaded) {
+        return;
+      }
+      return createVNode(resolveComponent("iBizNoData"), {
+        "class": ns.e("content"),
+        "text": c.model.emptyText,
+        "emptyTextLanguageRes": c.model.emptyTextLanguageRes
+      }, null);
+    };
+    return {
+      c,
+      ns,
+      classNames,
+      renderHasData,
+      renderNoData,
+      onPageChange,
+      onPageRefresh,
+      onPageSizeChange
+    };
+  },
+  render() {
+    const {
+      items,
+      isCreated
+    } = this.c.state;
+    const {
+      enablePagingBar
+    } = this.c.model;
+    let content = null;
+    if (isCreated) {
+      content = [this.c.state.noSort ? null : createVNode(resolveComponent("iBizSortBar"), {
+        "onSortChange": (item, order) => {
+          this.c.setSort(item.key, order);
+          this.c.load();
+        },
+        "sortItems": this.c.state.sortItems
+      }, null), items.length > 0 ? this.renderHasData() : this.renderNoData(), enablePagingBar ? createVNode(resolveComponent("iBizPagination"), {
+        "class": this.ns.e("pagination"),
+        "total": this.c.state.total,
+        "curPage": this.c.state.curPage,
+        "size": this.c.state.size,
+        "onChange": this.onPageChange,
+        "onPageSizeChange": this.onPageSizeChange,
+        "onPageRefresh": this.onPageRefresh
+      }, null) : null];
+    }
+    return createVNode(resolveComponent("iBizControlBase"), {
+      "class": [this.ns.is("enable-page", !!enablePagingBar)],
+      "controller": this.c
+    }, _isSlot(content) ? content : {
+      default: () => [content]
+    });
+  }
+});
+
+export { DataViewControl };

package/es/control/data-view/data-view.provider.mjs

@@ -0,0 +1,14 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class DataViewControlProvider {
+  constructor() {
+    __publicField(this, "component", "IBizDataViewControl");
+  }
+}
+
+export { DataViewControlProvider };

package/es/control/data-view/index.mjs

@@ -0,0 +1,18 @@
+import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { DataViewControl } from './data-view.mjs';
+import { DataViewControlProvider } from './data-view.provider.mjs';
+
+"use strict";
+const IBizDataViewControl = withInstall(
+  DataViewControl,
+  function(v) {
+    v.component(DataViewControl.name, DataViewControl);
+    registerControlProvider(
+      ControlType.DATAVIEW,
+      () => new DataViewControlProvider()
+    );
+  }
+);
+
+export { DataViewControlProvider, IBizDataViewControl, IBizDataViewControl as default };