@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.21

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

@@ -4,6 +4,7 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 var runtime = require('@ibiz-template/runtime');
 var qxUtil = require('qx-util');
+var draggable = require('vuedraggable');
 require('../../util/index.cjs');
 require('./data-view.css');
 var usePagination = require('../../util/pagination/use-pagination.cjs');
@@ -14,6 +15,9 @@ function _isSlot(s) {
 }
 const DataViewControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizDataViewControl",
+  components: {
+    draggable
+  },
   props: {
     /**
      * @description 数据视图（卡片）模型数据
@@ -83,6 +87,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
   setup(props) {
     const c = vue3Util.useControlController((...args) => new runtime.DataViewControlController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
+    vue3Util.useControlPopoverzIndex(c);
     const classNames = vue.computed(() => {
       return [ns.is("enable-page", c.model.enablePagingBar === true)];
     });
@@ -101,7 +106,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       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);
+      return !c.state.enableGroup && (c.model.pagingMode === 2 || c.model.pagingMode === 3);
     });
     const infiniteScroll = vue.ref();
     const infiniteScrollKey = vue.ref(qxUtil.createUUID());
@@ -166,6 +171,49 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       event.stopPropagation();
       return c.onDbRowClick(item);
     };
+    let cacheInfo = null;
+    const onDraggableChange = (evt, groupKey) => {
+      if (evt.moved) {
+        c.onDragChange({
+          from: groupKey,
+          to: groupKey,
+          fromIndex: evt.moved.oldIndex,
+          toIndex: evt.moved.newIndex
+        });
+      }
+      if (evt.added) {
+        cacheInfo = {
+          to: groupKey,
+          toIndex: evt.added.newIndex
+        };
+      }
+      if (evt.removed) {
+        if (cacheInfo) {
+          cacheInfo.from = groupKey;
+          cacheInfo.fromIndex = evt.removed.oldIndex;
+          c.onDragChange(cacheInfo);
+        }
+        cacheInfo = null;
+      }
+    };
+    const renderNewCard = (group) => {
+      return vue.createVNode(vue.resolveComponent("el-card"), {
+        "shadow": "hover",
+        "class": [ns.b("item"), ns.be("item", "new")],
+        "title": ibiz.i18n.t("app.newlyBuild"),
+        "body-style": {
+          width: c.model.cardWidth ? "".concat(c.model.cardWidth, "px") : "auto",
+          height: c.model.cardHeight ? "".concat(c.model.cardHeight, "px") : "auto"
+        },
+        "onClick": (event) => {
+          c.onClickNew(event, group == null ? void 0 : group.key);
+        }
+      }, {
+        default: () => [vue.createVNode("ion-icon", {
+          "name": "add-outline"
+        }, null)]
+      });
+    };
     const renderPanelItem = (item, modelData) => {
       const {
         context,
@@ -181,15 +229,16 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, null);
     };
     const renderItemAction = (item) => {
-      var _a;
       return vue.createVNode(vue.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),
+        "action-details": c.getOptItemModel(),
+        "actions-state": c.state.uaState[item.srfkey],
+        "zIndex": c.state.zIndex,
         "onActionClick": (detail, event) => c.onActionClick(detail, item, event)
       }, null);
     };
     const renderDefaultItem = (item) => {
+      const actionModel = c.getOptItemModel();
       return vue.createVNode("div", {
         "class": ns.b("item-content")
       }, [vue.createVNode("div", {
@@ -198,7 +247,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "class": ns.bem("item-content", "top", "title")
       }, [item.srfmajortext]), vue.createVNode("div", {
         "class": ns.bem("item-content", "top", "description")
-      }, [item.content])]), c.getOptItemModel() ? vue.createVNode("div", {
+      }, [item.content])]), actionModel.length ? vue.createVNode("div", {
         "class": ns.be("item-content", "bottom")
       }, [renderItemAction(item)]) : null]);
     };
@@ -223,7 +272,23 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, {
         default: () => [vue.createVNode("div", {
           "class": ns.be("item", "content")
-        }, [cardStyle.value === "style2" && !c.state.singleSelect && vue.createVNode(vue.resolveComponent("el-checkbox"), {
+        }, [c.state.draggable && !c.state.readonly && vue.createVNode("svg", {
+          "viewBox": "0 0 16 16",
+          "xmlns": "http://www.w3.org/2000/svg",
+          "height": "1em",
+          "width": "1em",
+          "class": ns.e("drag-icon"),
+          "preserveAspectRatio": "xMidYMid meet",
+          "focusable": "false"
+        }, [vue.createVNode("g", {
+          "stroke-width": "1",
+          "fill-rule": "evenodd"
+        }, [vue.createVNode("g", {
+          "transform": "translate(5 1)",
+          "fill-rule": "nonzero"
+        }, [vue.createVNode("path", {
+          "d": "M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
+        }, null)])])]), cardStyle.value === "style2" && !c.state.singleSelect && vue.createVNode(vue.resolveComponent("el-checkbox"), {
           "size": "large",
           "class": ns.bem("item", "content", "checkbox"),
           "modelValue": isSelected(item),
@@ -232,8 +297,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         }, null), panel ? renderPanelItem(item, panel) : renderDefaultItem(item)])]
       });
     };
-    const renderCardLayout = (items) => {
-      let _slot;
+    const renderCardLayout = (items, group, disabled = true) => {
       const {
         cardColXS,
         cardColSM,
@@ -241,10 +305,18 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         cardColLG
       } = c.model;
       if (cardColXS || cardColSM || cardColMD || cardColLG)
-        return vue.createVNode(vue.resolveComponent("el-row"), {
-          "class": ns.e("layout-row")
-        }, _isSlot(_slot = items.map((item) => {
-          return vue.createVNode(vue.resolveComponent("el-col"), {
+        return vue.createVNode(draggable, {
+          "itemKey": "srfkey",
+          "modelValue": items,
+          "group": c.model.id,
+          "handle": ".".concat(ns.e("drag-icon")),
+          "class": ["el-row", ns.e("layout-row")],
+          "disabled": disabled || c.state.updating || c.state.readonly,
+          "onChange": (evt) => onDraggableChange(evt, group == null ? void 0 : group.key)
+        }, {
+          item: ({
+            element
+          }) => vue.createVNode(vue.resolveComponent("el-col"), {
             "xs": cardColXS,
             "sm": cardColSM,
             "md": cardColMD,
@@ -253,18 +325,43 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
           }, {
             default: () => [vue.createVNode("div", {
               "class": ns.b("scroll-item")
-            }, [renderCard(item)])]
-          });
-        })) ? _slot : {
-          default: () => [_slot]
+            }, [renderCard(element)])]
+          }),
+          footer: () => {
+            if (c.enableNew && !c.state.readonly)
+              return vue.createVNode(vue.resolveComponent("el-col"), {
+                "xs": cardColXS,
+                "sm": cardColSM,
+                "md": cardColMD,
+                "lg": cardColLG,
+                "class": ns.e("layout-col")
+              }, {
+                default: () => [vue.createVNode("div", {
+                  "class": ns.b("scroll-item")
+                }, [renderNewCard(group)])]
+              });
+          }
         });
-      return vue.createVNode("div", {
-        "class": ns.e("layout-flex")
-      }, [items.map((item) => {
-        return vue.createVNode("div", {
+      return vue.createVNode(draggable, {
+        "itemKey": "srfkey",
+        "modelValue": items,
+        "group": c.model.id,
+        "class": [ns.e("layout-flex"), ns.em("layout-flex", "draggable")],
+        "disabled": disabled || c.state.updating || c.state.readonly,
+        "onChange": (evt) => onDraggableChange(evt, group == null ? void 0 : group.key)
+      }, {
+        item: ({
+          element
+        }) => vue.createVNode("div", {
           "class": ns.b("scroll-item")
-        }, [renderCard(item)]);
-      })]);
+        }, [renderCard(element)]),
+        footer: () => {
+          if (c.enableNew && !c.state.readonly)
+            return vue.createVNode("div", {
+              "class": ns.b("scroll-item")
+            }, [renderNewCard(group)]);
+        }
+      });
     };
     const renderGroup = (group) => {
       const {
@@ -279,25 +376,26 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
       }, [group.caption]), vue.createVNode("span", {
         "class": ns.be("group-content", "item-action")
       }, [c.model.groupUIActionGroup && group.groupActionGroupState && vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
+        "zIndex": c.state.zIndex,
         "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)])]), group.children.length > 0 ? renderCardLayout(group.children) : vue.createVNode("div", {
+      }, null)])]), group.children.length > 0 ? renderCardLayout(group.children, group, !c.state.draggable) : vue.createVNode("div", {
         "class": ns.bem("group-content", "item", "empty")
       }, [ibiz.i18n.t("app.noData")])]);
     };
     const renderDataViewContent = () => {
-      if (c.model.enableGroup) {
+      if (c.state.enableGroup) {
         return vue.createVNode("div", {
           "class": ns.b("group-content")
         }, [c.state.groups.map((group) => {
           return renderGroup(group);
         })]);
       }
-      return renderCardLayout(isCollapse.value ? c.state.items.slice(0, c.state.size) : c.state.items);
+      return renderCardLayout(isCollapse.value ? c.state.items.slice(0, c.state.size) : c.state.items, void 0, !c.enableEditOrder);
     };
     const scrollToTop = () => {
       var _a;
@@ -355,12 +453,38 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         "key": infiniteScrollKey.value
       }, [renderDataViewContent()]), [[vue.resolveDirective("infinite-scroll"), () => c.loadMore()]]);
     };
+    const renderBatchToolBar = () => {
+      var _a;
+      const ctrlModel = (_a = c.model.controls) == null ? void 0 : _a.find((item) => {
+        return item.name === "".concat(c.model.name, "_batchtoolbar");
+      });
+      if (!ctrlModel)
+        return;
+      return vue.createVNode("div", {
+        "class": ns.e("batchtoolbar")
+      }, [vue.createVNode(vue.resolveComponent("iBizToolbarControl"), {
+        "modelData": ctrlModel,
+        "context": c.context,
+        "params": c.params
+      }, null)]);
+    };
     const renderNoData = () => {
+      var _a;
       const {
         isLoaded
       } = c.state;
-      if (!isLoaded) {
+      if (!isLoaded)
         return;
+      const ctrlModel = (_a = c.model.controls) == null ? void 0 : _a.find((item) => {
+        return item.name === "".concat(c.model.name, "_quicktoolbar");
+      });
+      if (ctrlModel) {
+        return vue.createVNode(vue.resolveComponent("iBizToolbarControl"), {
+          "modelData": ctrlModel,
+          "context": c.context,
+          "params": c.params,
+          "class": ns.e("quicktoolbar")
+        }, null);
       }
       const noDataSlots = {};
       if (vue3Util.hasEmptyPanelRenderer(c)) {
@@ -434,7 +558,7 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
         }, null);
     };
     const renderContent = () => {
-      return [c.state.items.length > 0 ? renderHasData() : renderNoData(), renderNavIcon(), renderCollapseExpandIcon()];
+      return [c.state.items.length > 0 ? renderHasData() : renderNoData(), renderBatchToolBar(), renderNavIcon(), renderCollapseExpandIcon()];
     };
     const renderPagingBar = () => {
       if (c.state.enablePagingBar && c.model.pagingMode === 1)
@@ -491,15 +615,15 @@ const DataViewControl = /* @__PURE__ */ vue.defineComponent({
     };
   },
   render() {
-    let _slot2;
+    let _slot;
     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
-      }, _isSlot(_slot2 = this.renderLayoutByStyle()) ? _slot2 : {
-        default: () => [_slot2]
+      }, _isSlot(_slot = this.renderLayoutByStyle()) ? _slot : {
+        default: () => [_slot]
       })]
     });
   }

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

@@ -1 +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;--ibiz-control-dataview-item-bg-color:transparent;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-dataview__nav-icon{position:absolute;top:20px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-dataview__content{flex-grow:1;height:100%;overflow:auto;padding:var(--ibiz-control-dataview-padding)}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__load-more{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__layout-row{padding:var(--ibiz-spacing-tight)}.ibiz-control-dataview__layout-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview__layout-flex{display:flex;flex-wrap:wrap;overflow:auto;align-content:flex-start}.ibiz-control-dataview__layout-flex>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.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;--ibiz-control-dataview-item-bg-color:transparent;cursor:pointer;color:var(--ibiz-control-dataview-text-color);background-color:var(--ibiz-control-dataview-item-bg-color)}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item__content{width:100%;height:100%;display:flex;align-items:center}.ibiz-control-dataview-item__content--checkbox{flex-shrink:0;margin-right:var(--ibiz-spacing-tight)!important}.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-bg-color:transparent}.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.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.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{--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-bg-color:transparent;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;position:relative;height:100%}.ibiz-control-dataview__nav-icon{position:absolute;top:20px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-dataview__drag-icon{cursor:move;visibility:hidden}.ibiz-control-dataview__content{flex-grow:1;height:100%;padding:var(--ibiz-control-dataview-padding);overflow:auto}.ibiz-control-dataview__pagination{flex-shrink:0}.ibiz-control-dataview__load-more{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__load-more i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__load-more i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__collapse-expand-icon{width:calc(100% - var(--ibiz-spacing-base-tight));text-align:center}.ibiz-control-dataview__collapse-expand-icon i{font-size:var(--ibiz-font-size-header-3);color:var(--ibiz-color-text-2);cursor:pointer}.ibiz-control-dataview__collapse-expand-icon i:hover{color:var(--ibiz-color-primary-light-hover)}.ibiz-control-dataview__layout-row{padding:var(--ibiz-spacing-tight)}.ibiz-control-dataview__layout-col{padding:0 var(--ibiz-spacing-base-tight) var(--ibiz-spacing-base-tight) 0}.ibiz-control-dataview__layout-flex{display:flex;flex-wrap:wrap;align-content:flex-start;overflow:auto}.ibiz-control-dataview__layout-flex>*{margin:calc(var(--ibiz-spacing-base-tight)/ 2)}.ibiz-control-dataview__batchtoolbar{padding:0 var(--ibiz-spacing-base);margin:var(--ibiz-spacing-tight) var(--ibiz-spacing-super-tight)}.ibiz-control-dataview__quicktoolbar{display:flex;justify-content:center;width:100%}.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;--ibiz-control-dataview-item-bg-color:transparent;color:var(--ibiz-control-dataview-text-color);cursor:pointer;background-color:var(--ibiz-control-dataview-item-bg-color)}.ibiz-control-dataview-item:hover{background-color:var(--ibiz-control-dataview-hover-bg-color)}.ibiz-control-dataview-item:hover .ibiz-control-dataview__drag-icon{visibility:visible}.ibiz-control-dataview-item__new{color:var(--ibiz-color-text-3);border:2px dashed var(--ibiz-color-border)}.ibiz-control-dataview-item__new .el-card__body{display:flex;align-items:center;justify-content:center}.ibiz-control-dataview-item__content{display:flex;align-items:center;width:100%;height:100%}.ibiz-control-dataview-item__content--checkbox{flex-shrink:0;margin-right:var(--ibiz-spacing-tight)!important}.ibiz-control-dataview-item.is-active{background-color:var(--ibiz-control-dataview-active-bg-color)}.ibiz-control-dataview-item-content{flex-grow:1;--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-bg-color:transparent}.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{display:flex;align-items:center;justify-content:center;padding:var(--ibiz-spacing-tight);margin-top:var(--ibiz-spacing-tight);border-top:1px solid var(--ibiz-color-border)}.ibiz-control-dataview-item-content__bottom--actions{display:flex;justify-content:center}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item{margin:0}.ibiz-control-dataview-item-content__bottom--actions .ibiz-action-toolbar__item--label.is-has-caption{margin:0}.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.is-collapse .ibiz-control-dataview-group-content__item-content{height:0;overflow:hidden}.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)}

package/lib/control/drbar/drbar.cjs

@@ -81,6 +81,12 @@ const DRBarControl = /* @__PURE__ */ vue.defineComponent({
     c.setRouter(router);
     const handleSelect = (key) => {
       c.handleSelectChange(key);
+      const drBarItem = c.state.drBarItems.find((item) => item.tag === key);
+      if (drBarItem) {
+        c.evt.emit("onTabChange", {
+          data: drBarItem
+        });
+      }
     };
     const route = vueRouter.useRoute();
     let expViewRoutePath = "";

package/lib/control/drbar/drbar.controller.cjs

@@ -106,6 +106,7 @@ class DRBarController extends runtime.ControlController {
     super.initState();
     this.state.drBarItems = [];
     this.state.srfnav = "";
+    this.state.selectedItem = "";
     this.state.hideEditItem = !!this.model.hideEditItem;
   }
   /**
@@ -128,6 +129,8 @@ class DRBarController extends runtime.ControlController {
    * @param {boolean} [reset=true]
    */
   calcItemStateByCounter(_data, reset = true) {
+    if (!this.state.activated)
+      return;
     this.state.drBarItems.forEach((item) => {
       var _a;
       if ((_a = item.children) == null ? void 0 : _a.length) {
@@ -328,6 +331,7 @@ class DRBarController extends runtime.ControlController {
         fullPath: (_a = this.router) == null ? void 0 : _a.currentRoute.value.fullPath
       });
       this.state.defaultItem = uniqueTag;
+      this.state.selectedItem = drBarItems[0].tag;
     }
     const getItemState = (item) => {
       let itemCaption = item.caption;
@@ -392,19 +396,17 @@ class DRBarController extends runtime.ControlController {
    * @memberof DRBarController
    */
   handleSelectChange(key = this.state.selectedItem || this.state.defaultItem, isRoutePushed = false) {
-    var _a;
-    if (this.state.selectedItem === key) {
+    var _a, _b;
+    if (this.state.selectedItem === key)
       return;
-    }
     const drBarItem = (_a = this.model.dedrctrlItems) == null ? void 0 : _a.find((item) => item.id === key);
     if (drBarItem) {
       this.setVisible("navPos");
       this.openNavPosView(drBarItem, isRoutePushed);
     } else {
       this.setVisible("form");
-      if (this.routeDepth) {
+      if (this.routeDepth && ((_b = this.state.drBarItems[0]) == null ? void 0 : _b.fullPath))
         this.router.push(this.state.drBarItems[0].fullPath);
-      }
     }
     this.state.selectedItem = key;
   }
@@ -557,6 +559,14 @@ class DRBarController extends runtime.ControlController {
       this.counter.destroy();
     }
   }
+  /**
+   * @description 设置激活项
+   * @param {string} name
+   * @memberof DRBarController
+   */
+  setActive(name) {
+    this.handleSelectChange(name);
+  }
 }
 
 exports.DRBarController = DRBarController;

package/lib/control/drbar/drbar.css

@@ -1 +1 @@
-.ibiz-control-drbar{height:100%;--el-menu-base-level-padding:var(--ibiz-spacing-base);--ibiz-control-drbar-item-height:40px}.ibiz-control-drbar .el-menu--horizontal.el-menu{border-bottom:none}.ibiz-control-drbar .el-menu-item{justify-content:space-between;height:var(--ibiz-control-drbar-item-height);padding:0 var(--ibiz-spacing-base);margin:0 var(--ibiz-spacing-base);line-height:unset}.ibiz-control-drbar .el-menu--horizontal .el-sub-menu{height:var(--ibiz-control-drbar-item-height)}.ibiz-control-drbar .el-menu--horizontal .el-sub-menu .el-sub-menu__title{line-height:var(--ibiz-control-drbar-item-height)}.ibiz-control-drbar__menu{height:100%;overflow:hidden auto}
+.ibiz-control-drbar{height:100%;--el-menu-base-level-padding:var(--ibiz-spacing-base);--ibiz-control-drbar-item-height:40px}.ibiz-control-drbar .el-menu--horizontal.el-menu{border-bottom:none}.ibiz-control-drbar .el-menu-item{justify-content:space-between;height:var(--ibiz-control-drbar-item-height);padding:0 var(--ibiz-spacing-base);margin:0 var(--ibiz-spacing-base);line-height:unset}.ibiz-control-drbar .el-menu--horizontal .el-sub-menu{height:var(--ibiz-control-drbar-item-height)}.ibiz-control-drbar .el-menu--horizontal .el-sub-menu .el-sub-menu__title{line-height:var(--ibiz-control-drbar-item-height)}.ibiz-control-drbar__menu{height:100%;overflow:hidden auto}.ibiz-control-drbar .ibiz-badge{text-align:center}

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.41-alpha.2_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');
+var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.41-alpha.18_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

@@ -8,8 +8,8 @@ var ramda = require('ramda');
 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');
+require('./drtab.css');
 
 "use strict";
 const DRTabControl = /* @__PURE__ */ vue.defineComponent({
@@ -42,6 +42,13 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
      */
     provider: {
       type: Object
+    },
+    /**
+     * @description 隐藏编辑项
+     */
+    hideEditItem: {
+      type: Boolean,
+      default: void 0
     }
   },
   setup() {
@@ -72,12 +79,25 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
       (_a2 = c.counter) == null ? void 0 : _a2.offChange(fn);
     });
     c.setRouter(router);
+    const emitChange = () => {
+      const {
+        activeName
+      } = c.state;
+      const drTabItem = c.state.drTabPages.find((item) => item.tag === activeName);
+      if (drTabItem) {
+        c.evt.emit("onTabChange", {
+          data: drTabItem
+        });
+      }
+    };
     const handleTabChange = () => {
       c.handleTabChange();
+      emitChange();
     };
     const onTabChange = (key) => {
       c.state.activeName = key;
       c.handleTabChange();
+      emitChange();
     };
     const route = vueRouter.useRoute();
     let expViewRoutePath = "";
@@ -190,7 +210,8 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
         "params": this.c.params,
         "showHeader": this.tabPosition === "flow",
         "counterData": this.counterData,
-        "activeTab": this.activeTab
+        "activeTab": this.activeTab,
+        "controller": this.c
       }, null);
     }
     const moreTab = this.moreItems.find((tab) => tab.tag === this.c.state.activeName) || {};
@@ -247,6 +268,7 @@ const DRTabControl = /* @__PURE__ */ vue.defineComponent({
       default: () => [isCreated && isCalculatedPermission && this.tabPosition === "top_dropdownlist" ? this.renderDropdownList() : vue.createVNode(vue.resolveComponent("el-tabs"), {
         "modelValue": this.c.state.activeName,
         "onUpdate:modelValue": ($event) => this.c.state.activeName = $event,
+        "tabPosition": this.tabPosition,
         "onTabChange": this.handleTabChange
       }, {
         default: () => [this.visibleItems.map((tab) => {

package/lib/control/drtab/drtab.controller.cjs

@@ -84,6 +84,40 @@ class DRTabController extends runtime.ControlController {
     const userId = this.context.srfuserid;
     return "".concat(userId, "_").concat(this.view.model.codeName, "_").concat(this.model.codeName);
   }
+  /**
+   * 是否启用锚点栏
+   *
+   * @readonly
+   * @type {boolean}
+   * @memberof DRTabController
+   */
+  get enableAnchor() {
+    if (this.controlParams.enablenavbar) {
+      return this.controlParams.enablenavbar === "true";
+    }
+    return ibiz.config.drtab.enableNavbar;
+  }
+  /**
+   * 导航栏位置
+   *
+   * @readonly
+   * @type {string}
+   * @memberof DRTabController
+   */
+  get navbarpos() {
+    var _a;
+    return ((_a = this.controlParams.navbarpos) == null ? void 0 : _a.toLowerCase()) || ibiz.config.drtab.navbarPos.toLowerCase();
+  }
+  /**
+   * 导航栏宽度
+   *
+   * @readonly
+   * @type {string}
+   * @memberof DRTabController
+   */
+  get navbarwidth() {
+    return this.controlParams.navbarwidth || ibiz.config.drtab.navbarWidth;
+  }
   /**
    * 设置 Router 对象
    *
@@ -113,7 +147,7 @@ class DRTabController extends runtime.ControlController {
     super.initState();
     this.state.drTabPages = [];
     this.state.showMore = false;
-    this.state.hideEditItem = !Object.is(this.model.hideEditItem, false);
+    this.state.hideEditItem = !!this.model.hideEditItem;
   }
   /**
    * 创建完成
@@ -139,6 +173,8 @@ class DRTabController extends runtime.ControlController {
    * @date 2024-05-16 17:05:01
    */
   calcItemStateByCounter() {
+    if (!this.state.activated)
+      return;
     this.state.drTabPages.forEach((item) => {
       const visible = runtime.calcItemVisibleByCounter(item, this.counter);
       if (visible !== void 0) {
@@ -240,6 +276,7 @@ class DRTabController extends runtime.ControlController {
         }
         await this.calcDrTabPagesState();
         this.handleFormChange();
+        this.doDefaultSelect();
       });
       this.form.evt.on("onLoadDraftSuccess", () => {
         this.handleFormChange();
@@ -252,6 +289,24 @@ class DRTabController extends runtime.ControlController {
     if (!this.form) {
       await this.calcDrTabPagesState();
     }
+    if (this.form && this.form.state.isLoaded) {
+      this.doDefaultSelect();
+    }
+  }
+  /**
+   * @description 处理第一次的默认选中
+   * @memberof DRTabController
+   */
+  doDefaultSelect() {
+    var _a;
+    const viewForm = (_a = this.view.layoutPanel) == null ? void 0 : _a.panelItems.view_form;
+    if (viewForm) {
+      viewForm.state.visible = false;
+      viewForm.state.keepAlive = false;
+    }
+    if (!this.state.hideEditItem && this.state.activeName === this.model.uniqueTag) {
+      this.setVisible("form");
+    }
   }
   /**
    * 处理表单数据变更
@@ -296,16 +351,13 @@ class DRTabController extends runtime.ControlController {
     }
     if (!this.state.hideEditItem) {
       drTabPages.push({
-        tag: uniqueTag,
         caption,
+        tag: uniqueTag,
         hidden: !!this.state.hideEditItem,
         disabled: false,
         sysImage: editItemSysImage,
         fullPath: this.routeDepth ? vue3Util.getNestedRoutePath(this.router.currentRoute.value, this.routeDepth) : ""
       });
-      this.state.defaultName = "";
-    } else {
-      this.state.defaultName = (dedrtabPages == null ? void 0 : dedrtabPages[0].id) || "";
     }
     dedrtabPages == null ? void 0 : dedrtabPages.forEach((item) => {
       let itemCaption = item.caption;
@@ -334,6 +386,7 @@ class DRTabController extends runtime.ControlController {
       });
     });
     this.state.drTabPages = drTabPages;
+    this.state.defaultName = drTabPages[0].tag;
     if (this.view.state.srfnav) {
       this.state.activeName = this.view.state.srfnav;
     } else {
@@ -509,6 +562,15 @@ class DRTabController extends runtime.ControlController {
       this.counter.destroy();
     }
   }
+  /**
+   * @description 设置激活项
+   * @param {string} name
+   * @memberof DRTabController
+   */
+  setActive(name) {
+    this.state.activeName = name;
+    this.handleTabChange();
+  }
 }
 
 exports.DRTabController = DRTabController;

package/lib/control/drtab/drtab.css

@@ -1 +1 @@
-.ibiz-control-drtab{--ibiz-control-drtab-active-color:var(--ibiz-color-primary);--ibiz-control-drtab-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-hover-bg-color:transparent}.ibiz-control-drtab__counter{margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-drtab-hover-color);background-color:var(--ibiz-control-drtab-hover-bg-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs.el-tabs--bottom .el-tabs__nav-scroll,.ibiz-control-drtab .el-tabs.el-tabs--top .el-tabs__nav-scroll{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__item{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__nav-next,.ibiz-control-drtab .el-tabs__nav-prev{line-height:var(--el-tabs-header-height)}.ibiz-control-drtab-label__icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-next,.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-prev{display:none}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__nav-wrap.is-scrollable{padding:var(--ibiz-spacing-none)}.ibiz-control-drtab-more-dropdown{height:100%}.ibiz-control-drtab-more-dropdown__link{position:relative;display:flex;align-items:center;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link svg{color:var(--ibiz-color-text-2);fill:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link:hover svg{color:var(--ibiz-color-text-0);fill:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link::after{position:absolute;left:-16px;display:inline-block;width:100%;height:100%;content:""}.ibiz-control-drtab-more-dropdown-popper{width:240px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;align-items:center;width:100%;overflow:hidden}.ibiz-control-drtab-more-dropdown-popper__label--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-more-dropdown-popper__label--counter{min-width:20px;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .ibiz-control-drtab-more-dropdown-popper__active.el-dropdown-menu__item{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-dropdown-list .ibiz-badge{width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__trigger{display:flex;cursor:pointer;align-items:center;font-size:var(--ibiz-font-size-header-5)}.ibiz-control-drtab-dropdown-list__trigger .caption{position:relative;padding:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__trigger .caption .ibiz-badge{top:0;right:-6px;position:absolute}.ibiz-control-drtab-dropdown-list__popper{max-width:220px;min-width:150px}.ibiz-control-drtab-dropdown-list__popper--content{max-height:26vh;overflow:auto}.ibiz-control-drtab-dropdown-list__popper--item{display:flex;align-items:center}.ibiz-control-drtab-dropdown-list__popper--item .caption{padding-right:var(--ibiz-spacing-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-dropdown-list__popper--item .ibiz-badge{width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);display:flex;align-items:center;justify-content:center;font-size:var(--ibiz-font-size-small);margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__popper--item ion-icon{color:var(--ibiz-color-primary);font-size:var(--ibiz-width-icon-medium)}.ibiz-control-drtab-dropdown-list__popper--item.is-active{background-color:var(--ibiz-color-fill-0)!important}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{min-height:38px;color:var(--ibiz-color-text-0);background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-fill-0)}
+.ibiz-control-drtab{--ibiz-control-drtab-active-color:var(--ibiz-color-primary);--ibiz-control-drtab-hover-color:var(--ibiz-color-text-0);--ibiz-control-drtab-hover-bg-color:transparent}.ibiz-control-drtab__counter{margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab .el-tabs .el-tabs__header{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap{margin:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__active-bar{background-color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item{font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item:hover{color:var(--ibiz-control-drtab-hover-color);background-color:var(--ibiz-control-drtab-hover-bg-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-active{color:var(--ibiz-control-drtab-active-color)}.ibiz-control-drtab .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav .el-tabs__item.is-top:last-child{padding-right:var(--ibiz-spacing-none)}.ibiz-control-drtab .el-tabs.el-tabs--bottom .el-tabs__nav-scroll,.ibiz-control-drtab .el-tabs.el-tabs--top .el-tabs__nav-scroll{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__item{padding:0 var(--ibiz-spacing-base)}.ibiz-control-drtab .el-tabs__nav-next,.ibiz-control-drtab .el-tabs__nav-prev{line-height:var(--el-tabs-header-height)}.ibiz-control-drtab .ibiz-badge{text-align:center}.ibiz-control-drtab-label__icon{margin-right:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-next,.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__header .el-tabs__nav-prev{display:none}.ibiz-control-drtab-more .el-tabs.el-tabs.el-tabs--top .el-tabs__nav-wrap.is-scrollable{padding:var(--ibiz-spacing-none)}.ibiz-control-drtab-more-dropdown{height:100%}.ibiz-control-drtab-more-dropdown__link{position:relative;display:flex;align-items:center;font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link svg{color:var(--ibiz-color-text-2);fill:var(--ibiz-color-text-2)}.ibiz-control-drtab-more-dropdown__link:hover{color:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link:hover svg{color:var(--ibiz-color-text-0);fill:var(--ibiz-color-text-0)}.ibiz-control-drtab-more-dropdown__link::after{position:absolute;left:-16px;display:inline-block;width:100%;height:100%;content:""}.ibiz-control-drtab-more-dropdown-popper{width:240px}.ibiz-control-drtab-more-dropdown-popper__active{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-more-dropdown-popper__label{display:flex;align-items:center;width:100%;overflow:hidden}.ibiz-control-drtab-more-dropdown-popper__label--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-more-dropdown-popper__label--counter{min-width:20px;margin-left:var(--ibiz-spacing-tight)}.ibiz-control-drtab-more-dropdown-popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .ibiz-control-drtab-more-dropdown-popper__active.el-dropdown-menu__item{background-color:var(--ibiz-color-primary-active)}.ibiz-control-drtab-dropdown-list .ibiz-badge{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__trigger{display:flex;align-items:center;font-size:var(--ibiz-font-size-header-5);cursor:pointer}.ibiz-control-drtab-dropdown-list__trigger .caption{position:relative;padding:var(--ibiz-spacing-tight)}.ibiz-control-drtab-dropdown-list__trigger .caption .ibiz-badge{position:absolute;top:0;right:-6px}.ibiz-control-drtab-dropdown-list__popper{min-width:150px;max-width:220px}.ibiz-control-drtab-dropdown-list__popper--content{max-height:26vh;overflow:auto}.ibiz-control-drtab-dropdown-list__popper--item{display:flex;align-items:center}.ibiz-control-drtab-dropdown-list__popper--item .caption{padding-right:var(--ibiz-spacing-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-drtab-dropdown-list__popper--item .ibiz-badge{display:flex;align-items:center;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-tight);font-size:var(--ibiz-font-size-small)}.ibiz-control-drtab-dropdown-list__popper--item ion-icon{font-size:var(--ibiz-width-icon-medium);color:var(--ibiz-color-primary)}.ibiz-control-drtab-dropdown-list__popper--item.is-active{background-color:var(--ibiz-color-fill-0)!important}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{min-height:38px;color:var(--ibiz-color-text-0);background-color:transparent}.ibiz-control-drtab-dropdown-list__popper.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-fill-0)}