@g1cloud/bluesea 5.0.0-alpha.50 → 5.0.0-alpha.51

package/css/reset.scss

@@ -61,4 +61,8 @@ table {
 
 strong {
   font-weight: bold;
+}
+
+a {
+  text-underline-offset: 2px;
 }

package/dist/{AddressSearchModal-CdgJFLjT.js → AddressSearchModal-Dhrg9zFz.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, onMounted, openBlock, createBlock, withCtx, createElementVNode, createVNode, unref } from "vue";
-import { S as SearchParam, P as PaginatedList, u as useModalHandle, _ as _sfc_main$1, a as _sfc_main$2, b as _sfc_main$3, B as BSButton, w as waitDuring } from "./index-CX5p0Ph_.js";
+import { S as SearchParam, P as PaginatedList, u as useModalHandle, _ as _sfc_main$1, a as _sfc_main$2, b as _sfc_main$3, B as BSButton, w as waitDuring } from "./index-C81TfBCL.js";
 const gridColumns = [
   { propertyId: "zipCode", caption: "Zipcode", width: 80 },
   { propertyId: "address1", caption: "state/province/region", width: 150 },

package/dist/{BSAlertModal-CzXYUrgA.js → BSAlertModal-CeAHPZr3.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, withDirectives, createVNode, unref } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, B as BSButton, v as vFocusOnLoad, c as vT } from "./index-CX5p0Ph_.js";
+import { u as useModalHandle, _ as _sfc_main$1, B as BSButton, v as vFocusOnLoad, c as vT } from "./index-C81TfBCL.js";
 const _hoisted_1 = { class: "text-right" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BSAlertModal",

package/dist/{BSYesNoModal-DxwzLJSi.js → BSYesNoModal-DmAqwhlo.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode, withDirectives, unref } from "vue";
-import { u as useModalHandle, _ as _sfc_main$1, B as BSButton, v as vFocusOnLoad, c as vT } from "./index-CX5p0Ph_.js";
+import { u as useModalHandle, _ as _sfc_main$1, B as BSButton, v as vFocusOnLoad, c as vT } from "./index-C81TfBCL.js";
 const _hoisted_1 = { class: "text-right" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BSYesNoModal",

package/dist/bluesea.js

@@ -1,4 +1,4 @@
-import { aL, aM, d, a0, a4, B, L, q, r, k, a5, bi, o, p, K, e, b, I, a, a1, G, i, O, N, Y, b2, a2, _, H, W, X, V, U, T, z, Z, a3, m, l, g, D, n, j, s, t, F, y, M, $, E, J, h, Q, R, C, A, x, f, aT, aS, ac, a7, bm, a6, aj, ag, ad, aR, al, ak, bq, aP, ai, aQ, am, aO, aN, af, P, aH, S, at, by, b8, aU, a$, a_, aa, aK, ba, ab, bl, bn, ah, b5, ae, aq, ar, aZ, aE, aF, aG, aC, aD, aB, ay, av, bt, bg, bd, br, aX, a9, bz, bx, au, aY, ax, bA, aW, bs, b6, aV, bw, bo, b0, b4, aI, an, b9, bf, be, b7, bc, aw, as, bb, bv, bj, bk, bp, b1, b3, u, aJ, ao, ap, a8, c, az, aA, w, bu, bh } from "./index-CX5p0Ph_.js";
+import { aL, aM, d, a0, a4, B, L, q, r, k, a5, bi, o, p, K, e, b, I, a, a1, G, i, O, N, Y, b2, a2, _, H, W, X, V, U, T, z, Z, a3, m, l, g, D, n, j, s, t, F, y, M, $, E, J, h, Q, R, C, A, x, f, aT, aS, ac, a7, bm, a6, aj, ag, ad, aR, al, ak, bq, aP, ai, aQ, am, aO, aN, af, P, aH, S, at, by, b8, aU, a$, a_, aa, aK, ba, ab, bl, bn, ah, b5, ae, aq, ar, aZ, aE, aF, aG, aC, aD, aB, ay, av, bt, bg, bd, br, aX, a9, bz, bx, au, aY, ax, bA, aW, bs, b6, aV, bw, bo, b0, b4, aI, an, b9, bf, be, b7, bc, aw, as, bb, bv, bj, bk, bp, b1, b3, u, aJ, ao, ap, a8, c, az, aA, w, bu, bh } from "./index-C81TfBCL.js";
 export {
   aL as AbstractFilter,
   aM as AndFilter,

package/dist/bluesea.umd.cjs

@@ -363,7 +363,7 @@ var __publicField = (obj, key, value) => {
     }
     return target;
   };
-  const BSButton = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__scopeId", "data-v-6f347589"]]);
+  const BSButton = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__scopeId", "data-v-2d45c4bb"]]);
   const _sfc_main$1m = /* @__PURE__ */ vue.defineComponent({
     __name: "BSFormLabel",
     props: {
@@ -881,7 +881,7 @@ var __publicField = (obj, key, value) => {
     key: 1,
     class: "label"
   };
-  const _hoisted_5$i = /* @__PURE__ */ vue.createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
+  const _hoisted_5$j = /* @__PURE__ */ vue.createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
   const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
     __name: "BSSelect",
     props: {
@@ -994,7 +994,7 @@ var __publicField = (obj, key, value) => {
               ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", _hoisted_4$n, null, 512)), [
                 [vue.unref(vT), selectedItemLabel.value]
               ]),
-              _hoisted_5$i
+              _hoisted_5$j
             ], 512),
             !_ctx.disabled && showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1k, {
               key: 0,
@@ -1536,7 +1536,7 @@ var __publicField = (obj, key, value) => {
     class: "indeterminate"
   };
   const _hoisted_4$l = /* @__PURE__ */ vue.createElementVNode("div", { class: "in-box" }, null, -1);
-  const _hoisted_5$h = [
+  const _hoisted_5$i = [
     _hoisted_4$l
   ];
   const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
@@ -1566,7 +1566,7 @@ var __publicField = (obj, key, value) => {
             class: "inner-progressbar"
           }, [
             calculateProgress.value !== void 0 && calculateProgress.value < 50 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$$, vue.toDisplayString(calculatePercent.value) + "% ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$O, vue.toDisplayString(calculatePercent.value) + "% ", 1))
-          ], 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$t, _hoisted_5$h))
+          ], 4)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$t, _hoisted_5$i))
         ], 4);
       };
     }
@@ -2020,8 +2020,8 @@ var __publicField = (obj, key, value) => {
     key: 1,
     class: "input-area"
   };
-  const _hoisted_5$g = ["id", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
-  const _hoisted_6$8 = ["textContent"];
+  const _hoisted_5$h = ["id", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
+  const _hoisted_6$9 = ["textContent"];
   const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
     __name: "BSPriceInput",
     props: {
@@ -2166,7 +2166,7 @@ var __publicField = (obj, key, value) => {
               tabindex: _ctx.tabindex,
               value: focused.value || !_ctx.formatOnBlur ? vue.unref(stringValue) : formattedStringValue.value,
               type: "text"
-            }, vue.toHandlers(handlers2, true)), null, 16, _hoisted_5$g), [
+            }, vue.toHandlers(handlers2, true)), null, 16, _hoisted_5$h), [
               [
                 vue.unref(vT),
                 _ctx.placeholder,
@@ -2177,7 +2177,7 @@ var __publicField = (obj, key, value) => {
             vue.createElementVNode("div", {
               class: "currency-code",
               textContent: vue.toDisplayString(currencyCode.value)
-            }, null, 8, _hoisted_6$8)
+            }, null, 8, _hoisted_6$9)
           ])),
           vue.createVNode(_sfc_main$1j, { errors: vue.unref(errors) }, null, 8, ["errors"])
         ], 6);
@@ -2350,8 +2350,8 @@ var __publicField = (obj, key, value) => {
   };
   const _hoisted_3$p = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "calendar_month", -1);
   const _hoisted_4$h = ["id", "disabled", "maxlength", "name", "tabindex", "value"];
-  const _hoisted_5$f = /* @__PURE__ */ vue.createElementVNode("span", { class: "px-4" }, "~", -1);
-  const _hoisted_6$7 = ["id", "disabled", "maxlength", "name", "tabindex", "value"];
+  const _hoisted_5$g = /* @__PURE__ */ vue.createElementVNode("span", { class: "px-4" }, "~", -1);
+  const _hoisted_6$8 = ["id", "disabled", "maxlength", "name", "tabindex", "value"];
   const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
     __name: "BSDateRange",
     props: {
@@ -2561,7 +2561,7 @@ var __publicField = (obj, key, value) => {
                 { placeholder: true }
               ]
             ]),
-            _hoisted_5$f,
+            _hoisted_5$g,
             vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
               id: _ctx.idTo,
               ref_key: "fieldTo",
@@ -2572,7 +2572,7 @@ var __publicField = (obj, key, value) => {
               tabindex: _ctx.tabindex,
               value: focusedTo.value ? vue.unref(stringValueTo) : formattedTo.value,
               type: "text"
-            }, vue.toHandlers(handlersTo, true)), null, 16, _hoisted_6$7), [
+            }, vue.toHandlers(handlersTo, true)), null, 16, _hoisted_6$8), [
               [
                 vue.unref(vT),
                 _ctx.placeholderTo,
@@ -3010,7 +3010,7 @@ var __publicField = (obj, key, value) => {
     class: "placeholder flex-grow-1"
   };
   const _hoisted_4$g = { key: 1 };
-  const _hoisted_5$e = /* @__PURE__ */ vue.createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
+  const _hoisted_5$f = /* @__PURE__ */ vue.createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
   const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     __name: "BSMultiSelect",
     props: {
@@ -3149,7 +3149,7 @@ var __publicField = (obj, key, value) => {
                   ]);
                 }), 128))
               ])),
-              _hoisted_5$e
+              _hoisted_5$f
             ], 512),
             !_ctx.disabled && showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1k, {
               key: 0,
@@ -3323,6 +3323,10 @@ var __publicField = (obj, key, value) => {
   const _hoisted_2$E = { class: "row-caption" };
   const _hoisted_3$l = ["textContent"];
   const _hoisted_4$f = {
+    key: 1,
+    class: "font-icon w-16 text-gray-400"
+  };
+  const _hoisted_5$e = {
     key: 0,
     class: "child-rows"
   };
@@ -3333,6 +3337,7 @@ var __publicField = (obj, key, value) => {
       parentRow: {},
       siblings: {},
       childrenProvider: { default: () => defaultTreeChildrenProvider },
+      iconProvider: {},
       labelProvider: { default: () => defaultLabelProvider },
       keyProvider: {},
       showCheckbox: { type: Boolean },
@@ -3343,6 +3348,7 @@ var __publicField = (obj, key, value) => {
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
+      const icon = vue.computed(() => props.iconProvider && props.iconProvider(props.row));
       const label = vue.computed(() => props.labelProvider(props.row));
       const children = vue.computed(() => props.childrenProvider(props.row));
       const treeRowStatuses = vue.inject("TREE_ROW_STATUSES");
@@ -3401,6 +3407,7 @@ var __publicField = (obj, key, value) => {
               textContent: vue.toDisplayString(isSelected.value ? "check_box" : "check_box_outline_blank"),
               onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => selectRow(true), ["stop"]))
             }, null, 8, _hoisted_3$l)) : vue.createCommentVNode("", true),
+            _ctx.iconProvider ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$f, vue.toDisplayString(icon.value || ""), 1)) : vue.createCommentVNode("", true),
             vue.withDirectives(vue.createElementVNode("span", {
               class: vue.normalizeClass([{ selected: isSelected.value }, "caption"]),
               onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => selectRow(false), ["stop"])),
@@ -3411,24 +3418,25 @@ var __publicField = (obj, key, value) => {
               [vue.unref(vTreeRowDrag), dragOption]
             ]),
             _ctx.showMoveButton ? (vue.openBlock(), vue.createElementBlock("span", {
-              key: 1,
+              key: 2,
               class: "bs-clickable font-icon move-down",
               onClick: moveDownRow
             }, "arrow_downward")) : vue.createCommentVNode("", true),
             _ctx.showMoveButton ? (vue.openBlock(), vue.createElementBlock("span", {
-              key: 2,
+              key: 3,
               class: "bs-clickable font-icon move-up",
               onClick: moveUpRow
             }, "arrow_upward")) : vue.createCommentVNode("", true)
           ])), [
             [vue.unref(vTreeRowDrop), dropOption]
           ]),
-          children.value && children.value.length > 0 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_4$f, [
+          children.value && children.value.length > 0 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_5$e, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(children.value, (child) => {
               return vue.openBlock(), vue.createBlock(_component_BSTreeRow, {
                 key: _ctx.keyProvider(child),
                 "children-provider": _ctx.childrenProvider,
                 "enable-drag-and-drop": _ctx.enableDragAndDrop,
+                "icon-provider": _ctx.iconProvider,
                 "key-provider": _ctx.keyProvider,
                 "label-provider": _ctx.labelProvider,
                 "parent-row": _ctx.row,
@@ -3439,7 +3447,7 @@ var __publicField = (obj, key, value) => {
                 onToggleRow: toggleChildRow,
                 onMoveRow: moveChildRow,
                 onSelectRow: selectChildRow
-              }, null, 8, ["children-provider", "enable-drag-and-drop", "key-provider", "label-provider", "parent-row", "row", "show-checkbox", "show-move-button", "siblings"]);
+              }, null, 8, ["children-provider", "enable-drag-and-drop", "icon-provider", "key-provider", "label-provider", "parent-row", "row", "show-checkbox", "show-move-button", "siblings"]);
             }), 128))
           ], 512)), [
             [vue.vShow, isOpen.value]
@@ -3454,6 +3462,7 @@ var __publicField = (obj, key, value) => {
       data: {},
       keyProvider: { default: () => defaultKeyProvider },
       childrenProvider: { default: () => defaultTreeChildrenProvider },
+      iconProvider: {},
       labelProvider: { default: () => defaultLabelProvider },
       showMoveButton: { type: Boolean },
       enableDragAndDrop: { type: [Boolean, Object] },
@@ -3556,6 +3565,7 @@ var __publicField = (obj, key, value) => {
                 key: _ctx.keyProvider(item),
                 "children-provider": _ctx.childrenProvider,
                 "enable-drag-and-drop": _ctx.enableDragAndDrop,
+                "icon-provider": _ctx.iconProvider,
                 "key-provider": _ctx.keyProvider,
                 "label-provider": _ctx.labelProvider,
                 "parent-row": void 0,
@@ -3567,7 +3577,7 @@ var __publicField = (obj, key, value) => {
                 onToggleRow: toggleRow,
                 onMoveRow: moveRow,
                 onSelectRow: selectRow
-              }, null, 8, ["children-provider", "enable-drag-and-drop", "key-provider", "label-provider", "row", "show-checkbox", "show-move-button", "siblings"]);
+              }, null, 8, ["children-provider", "enable-drag-and-drop", "icon-provider", "key-provider", "label-provider", "row", "show-checkbox", "show-move-button", "siblings"]);
             }), 128))
           ]),
           _: 1
@@ -31650,13 +31660,13 @@ img.ProseMirror-separator {
   const _hoisted_5$9 = [
     _hoisted_4$9
   ];
-  const _hoisted_6$6 = {
+  const _hoisted_6$7 = {
     key: 2,
     class: "fixed func-cell"
   };
-  const _hoisted_7$4 = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1);
+  const _hoisted_7$5 = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1);
   const _hoisted_8$3 = [
-    _hoisted_7$4
+    _hoisted_7$5
   ];
   const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGrid",
@@ -31825,18 +31835,20 @@ img.ProseMirror-separator {
         cancelProvidedSavePoint();
       }
       const scrolledHorizontally = vue.ref(false);
+      const scrolledVertically = vue.ref(false);
       vue.onMounted(() => {
         var _a, _b;
-        (_b = (_a = table.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.addEventListener("scroll", setHorizontalScrollStyle, { passive: true });
+        (_b = (_a = table.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.addEventListener("scroll", setScrollStyle, { passive: true });
       });
-      const setHorizontalScrollStyle = () => {
-        var _a, _b;
+      const setScrollStyle = () => {
+        var _a, _b, _c, _d;
         scrolledHorizontally.value = (((_b = (_a = table.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.scrollLeft) || 0) > 0;
+        scrolledVertically.value = (((_d = (_c = table.value) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.scrollTop) || 0) > 0;
       };
       return (_ctx, _cache) => {
         var _a, _b, _c;
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass([{ "h-scrolled": scrolledHorizontally.value }, "bs-grid"]),
+          class: vue.normalizeClass([{ "h-scrolled": scrolledHorizontally.value, "v-scrolled": scrolledVertically.value }, "bs-grid"]),
           style: vue.normalizeStyle({ width: _ctx.width, height: _ctx.height })
         }, [
           vue.createElementVNode("div", _hoisted_1$y, [
@@ -31852,7 +31864,7 @@ img.ProseMirror-separator {
                     "selected-row-count": vue.unref(internalSelectedRows).size,
                     onClick: toggleAllSelection
                   }, null, 8, ["selected-row-count"])) : vue.createCommentVNode("", true),
-                  _ctx.editable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$6, _hoisted_8$3)) : vue.createCommentVNode("", true),
+                  _ctx.editable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_6$7, _hoisted_8$3)) : vue.createCommentVNode("", true),
                   _ctx.showSerial ? (vue.openBlock(), vue.createBlock(BSGridHeaderCellSerialNo, { key: 3 })) : vue.createCommentVNode("", true),
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalColumns.value, (column) => {
                     return vue.openBlock(), vue.createBlock(BSGridHeaderCell, {
@@ -32460,8 +32472,8 @@ img.ProseMirror-separator {
   const _hoisted_3$a = { key: 1 };
   const _hoisted_4$7 = { key: 2 };
   const _hoisted_5$7 = { key: 3 };
-  const _hoisted_6$5 = { key: 4 };
-  const _hoisted_7$3 = { key: 5 };
+  const _hoisted_6$6 = { key: 4 };
+  const _hoisted_7$4 = { key: 5 };
   const _hoisted_8$2 = ["textContent"];
   const _hoisted_9$1 = { key: 6 };
   const _hoisted_10$1 = ["textContent"];
@@ -32532,14 +32544,14 @@ img.ProseMirror-separator {
               "left-icon": "filter_alt"
             })
           ])) : vue.createCommentVNode("", true),
-          _ctx.showAddButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$5, [
+          _ctx.showAddButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$6, [
             vue.createVNode(BSButton, {
               caption: { key: "bs.gridcontrol.addRow" },
               "left-icon": "add",
               onClick: _cache[0] || (_cache[0] = ($event) => emit("clickAdd"))
             })
           ])) : vue.createCommentVNode("", true),
-          _ctx.showRemoveButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$3, [
+          _ctx.showRemoveButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$4, [
             vue.createVNode(BSButton, {
               caption: { key: "bs.gridcontrol.removeRow" },
               "left-icon": "remove",
@@ -32759,8 +32771,13 @@ img.ProseMirror-separator {
   const _hoisted_1$s = { class: "bs-tab-sheet bs-layout-vertical" };
   const _hoisted_2$i = { class: "tabs flex-grow-1 flex-shrink-1" };
   const _hoisted_3$9 = ["onClick"];
-  const _hoisted_4$6 = { class: "buttons text-nowrap" };
-  const _hoisted_5$6 = { class: "flex-grow-1 bs-layout-vertical" };
+  const _hoisted_4$6 = {
+    key: 0,
+    class: "font-icon"
+  };
+  const _hoisted_5$6 = { class: "ml-4" };
+  const _hoisted_6$5 = { class: "buttons text-nowrap" };
+  const _hoisted_7$3 = { class: "flex-grow-1 bs-layout-vertical" };
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "BSTabSheet",
     props: {
@@ -32812,24 +32829,23 @@ img.ProseMirror-separator {
             vue.createElementVNode("div", _hoisted_2$i, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleTabs.value, (tab) => {
                 var _a;
-                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                return vue.openBlock(), vue.createElementBlock("div", {
                   key: tab.tabId,
-                  class: vue.normalizeClass([{ selected: (tab == null ? void 0 : tab.tabId) === ((_a = currentTab.value) == null ? void 0 : _a.tabId), disabled: tab == null ? void 0 : tab.disabled }, "tab"]),
+                  class: vue.normalizeClass([{ selected: (tab == null ? void 0 : tab.tabId) === ((_a = currentTab.value) == null ? void 0 : _a.tabId), disabled: tab == null ? void 0 : tab.disabled }, "tab flex-row align-items-center"]),
                   onClick: ($event) => selectTab(tab)
                 }, [
-                  vue.withDirectives(vue.createElementVNode("span", null, null, 512), [
+                  tab.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$6, vue.toDisplayString(tab.icon), 1)) : vue.createCommentVNode("", true),
+                  vue.withDirectives(vue.createElementVNode("span", _hoisted_5$6, null, 512), [
                     [vue.unref(vT), tab.caption]
                   ])
-                ], 10, _hoisted_3$9)), [
-                  [vue.unref(vT), tab.caption]
-                ]);
+                ], 10, _hoisted_3$9);
               }), 128))
             ]),
-            vue.createElementVNode("div", _hoisted_4$6, [
+            vue.createElementVNode("div", _hoisted_6$5, [
               vue.renderSlot(_ctx.$slots, "buttons")
             ])
           ], 2),
-          vue.createElementVNode("div", _hoisted_5$6, [
+          vue.createElementVNode("div", _hoisted_7$3, [
             currentTab.value ? vue.renderSlot(_ctx.$slots, currentTab.value.tabId, {
               key: 0,
               tabId: currentTab.value.tabId

package/dist/component/layout/TabSheetModel.d.ts

@@ -3,6 +3,7 @@ import { MultiLangText } from '../../model/CommonTypes';
 export type TabEntry = {
     tabId: string;
     caption?: MultiLangText;
+    icon?: string;
     disabled?: boolean;
     hidden?: boolean;
 };

package/dist/component/tree/BSTree.vue.d.ts

@@ -1,6 +1,6 @@
 import { MenuItem } from '../../contextmenu/contextMenuPlugin';
 import { ChangeSelectionEvent, DragAndDropPolicy, RowMovedEvent, TreeChildrenProvider } from './TreeModel';
-import { KeyProvider, LabelProvider } from '../../model/CommonTypes';
+import { IconProvider, KeyProvider, LabelProvider } from '../../model/CommonTypes';
 
 declare const _default: <T>(__VLS_props: {
     data: T[];
@@ -13,6 +13,7 @@ declare const _default: <T>(__VLS_props: {
     contextMenuProvider?: ((rows: T[]) => (MenuItem[] | undefined)) | undefined;
     onRowMoved?: ((event: RowMovedEvent<T>) => any) | undefined;
     "onUpdate:selectedRows"?: ((value: Set<T>) => any) | undefined;
+    iconProvider?: IconProvider<T> | undefined;
     showMoveButton?: boolean | undefined;
     "onUpdate:expandedRows"?: ((value: Set<string>) => any) | undefined;
     "onBefore:selectedRows"?: ((event: ChangeSelectionEvent<T>) => any) | undefined;
@@ -39,6 +40,7 @@ declare const _default: <T>(__VLS_props: {
         contextMenuProvider?: ((rows: T[]) => (MenuItem[] | undefined)) | undefined;
         onRowMoved?: ((event: RowMovedEvent<T>) => any) | undefined;
         "onUpdate:selectedRows"?: ((value: Set<T>) => any) | undefined;
+        iconProvider?: IconProvider<T> | undefined;
         showMoveButton?: boolean | undefined;
         "onUpdate:expandedRows"?: ((value: Set<string>) => any) | undefined;
         "onBefore:selectedRows"?: ((event: ChangeSelectionEvent<T>) => any) | undefined;
@@ -69,6 +71,7 @@ declare const _default: <T>(__VLS_props: {
             contextMenuProvider?: ((rows: T[]) => (MenuItem[] | undefined)) | undefined;
             onRowMoved?: ((event: RowMovedEvent<T>) => any) | undefined;
             "onUpdate:selectedRows"?: ((value: Set<T>) => any) | undefined;
+            iconProvider?: IconProvider<T> | undefined;
             showMoveButton?: boolean | undefined;
             "onUpdate:expandedRows"?: ((value: Set<string>) => any) | undefined;
             "onBefore:selectedRows"?: ((event: ChangeSelectionEvent<T>) => any) | undefined;

package/dist/component/tree/BSTreeRow.vue.d.ts

@@ -1,4 +1,4 @@
-import { KeyProvider, LabelProvider } from '../../model/CommonTypes';
+import { IconProvider, KeyProvider, LabelProvider } from '../../model/CommonTypes';
 import { DragAndDropPolicy, TreeChildrenProvider } from './TreeModel';
 
 declare const _default: <T>(__VLS_props: {
@@ -13,6 +13,7 @@ declare const _default: <T>(__VLS_props: {
     onMoveRow?: ((row: T, siblings: T[], destRow: T | undefined, destSiblings: T[] | undefined, destIndex: number) => any) | undefined;
     parentRow: T | undefined;
     siblings: T[];
+    iconProvider?: IconProvider<T> | undefined;
     showMoveButton?: boolean | undefined;
 } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
     slots: {};
@@ -35,6 +36,7 @@ declare const _default: <T>(__VLS_props: {
         onMoveRow?: ((row: T, siblings: T[], destRow: T | undefined, destSiblings: T[] | undefined, destIndex: number) => any) | undefined;
         parentRow: T | undefined;
         siblings: T[];
+        iconProvider?: IconProvider<T> | undefined;
         showMoveButton?: boolean | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
@@ -61,6 +63,7 @@ declare const _default: <T>(__VLS_props: {
             onMoveRow?: ((row: T, siblings: T[], destRow: T | undefined, destSiblings: T[] | undefined, destIndex: number) => any) | undefined;
             parentRow: T | undefined;
             siblings: T[];
+            iconProvider?: IconProvider<T> | undefined;
             showMoveButton?: boolean | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;

package/dist/{index-CX5p0Ph_.js → index-C81TfBCL.js}

@@ -362,7 +362,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const BSButton = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-6f347589"]]);
+const BSButton = /* @__PURE__ */ _export_sfc(_sfc_main$1k, [["__scopeId", "data-v-2d45c4bb"]]);
 const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "BSFormLabel",
   props: {
@@ -880,7 +880,7 @@ const _hoisted_4$n = {
   key: 1,
   class: "label"
 };
-const _hoisted_5$i = /* @__PURE__ */ createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
+const _hoisted_5$j = /* @__PURE__ */ createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
 const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "BSSelect",
   props: {
@@ -993,7 +993,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
             ]) : withDirectives((openBlock(), createElementBlock("span", _hoisted_4$n, null, 512)), [
               [unref(vT), selectedItemLabel.value]
             ]),
-            _hoisted_5$i
+            _hoisted_5$j
           ], 512),
           !_ctx.disabled && showPopup.value ? (openBlock(), createBlock(_sfc_main$1h, {
             key: 0,
@@ -1535,7 +1535,7 @@ const _hoisted_3$s = {
   class: "indeterminate"
 };
 const _hoisted_4$l = /* @__PURE__ */ createElementVNode("div", { class: "in-box" }, null, -1);
-const _hoisted_5$h = [
+const _hoisted_5$i = [
   _hoisted_4$l
 ];
 const _sfc_main$19 = /* @__PURE__ */ defineComponent({
@@ -1565,7 +1565,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
           class: "inner-progressbar"
         }, [
           calculateProgress.value !== void 0 && calculateProgress.value < 50 ? (openBlock(), createElementBlock("span", _hoisted_1$Y, toDisplayString(calculatePercent.value) + "% ", 1)) : (openBlock(), createElementBlock("span", _hoisted_2$N, toDisplayString(calculatePercent.value) + "% ", 1))
-        ], 4)) : (openBlock(), createElementBlock("div", _hoisted_3$s, _hoisted_5$h))
+        ], 4)) : (openBlock(), createElementBlock("div", _hoisted_3$s, _hoisted_5$i))
       ], 4);
     };
   }
@@ -2019,8 +2019,8 @@ const _hoisted_4$j = {
   key: 1,
   class: "input-area"
 };
-const _hoisted_5$g = ["id", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
-const _hoisted_6$8 = ["textContent"];
+const _hoisted_5$h = ["id", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
+const _hoisted_6$9 = ["textContent"];
 const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "BSPriceInput",
   props: {
@@ -2165,7 +2165,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
             tabindex: _ctx.tabindex,
             value: focused.value || !_ctx.formatOnBlur ? unref(stringValue) : formattedStringValue.value,
             type: "text"
-          }, toHandlers(handlers2, true)), null, 16, _hoisted_5$g), [
+          }, toHandlers(handlers2, true)), null, 16, _hoisted_5$h), [
             [
               unref(vT),
               _ctx.placeholder,
@@ -2176,7 +2176,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             class: "currency-code",
             textContent: toDisplayString(currencyCode.value)
-          }, null, 8, _hoisted_6$8)
+          }, null, 8, _hoisted_6$9)
         ])),
         createVNode(_sfc_main$1g, { errors: unref(errors) }, null, 8, ["errors"])
       ], 6);
@@ -2349,8 +2349,8 @@ const _hoisted_2$I = {
 };
 const _hoisted_3$o = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "calendar_month", -1);
 const _hoisted_4$h = ["id", "disabled", "maxlength", "name", "tabindex", "value"];
-const _hoisted_5$f = /* @__PURE__ */ createElementVNode("span", { class: "px-4" }, "~", -1);
-const _hoisted_6$7 = ["id", "disabled", "maxlength", "name", "tabindex", "value"];
+const _hoisted_5$g = /* @__PURE__ */ createElementVNode("span", { class: "px-4" }, "~", -1);
+const _hoisted_6$8 = ["id", "disabled", "maxlength", "name", "tabindex", "value"];
 const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "BSDateRange",
   props: {
@@ -2560,7 +2560,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               { placeholder: true }
             ]
           ]),
-          _hoisted_5$f,
+          _hoisted_5$g,
           withDirectives(createElementVNode("input", mergeProps({
             id: _ctx.idTo,
             ref_key: "fieldTo",
@@ -2571,7 +2571,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
             tabindex: _ctx.tabindex,
             value: focusedTo.value ? unref(stringValueTo) : formattedTo.value,
             type: "text"
-          }, toHandlers(handlersTo, true)), null, 16, _hoisted_6$7), [
+          }, toHandlers(handlersTo, true)), null, 16, _hoisted_6$8), [
             [
               unref(vT),
               _ctx.placeholderTo,
@@ -3009,7 +3009,7 @@ const _hoisted_3$l = {
   class: "placeholder flex-grow-1"
 };
 const _hoisted_4$g = { key: 1 };
-const _hoisted_5$e = /* @__PURE__ */ createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
+const _hoisted_5$f = /* @__PURE__ */ createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   __name: "BSMultiSelect",
   props: {
@@ -3148,7 +3148,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
                 ]);
               }), 128))
             ])),
-            _hoisted_5$e
+            _hoisted_5$f
           ], 512),
           !_ctx.disabled && showPopup.value ? (openBlock(), createBlock(_sfc_main$1h, {
             key: 0,
@@ -3322,6 +3322,10 @@ const _hoisted_1$N = { class: "bs-tree-row" };
 const _hoisted_2$D = { class: "row-caption" };
 const _hoisted_3$k = ["textContent"];
 const _hoisted_4$f = {
+  key: 1,
+  class: "font-icon w-16 text-gray-400"
+};
+const _hoisted_5$e = {
   key: 0,
   class: "child-rows"
 };
@@ -3332,6 +3336,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     parentRow: {},
     siblings: {},
     childrenProvider: { default: () => defaultTreeChildrenProvider },
+    iconProvider: {},
     labelProvider: { default: () => defaultLabelProvider },
     keyProvider: {},
     showCheckbox: { type: Boolean },
@@ -3342,6 +3347,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const icon = computed(() => props.iconProvider && props.iconProvider(props.row));
     const label = computed(() => props.labelProvider(props.row));
     const children = computed(() => props.childrenProvider(props.row));
     const treeRowStatuses = inject("TREE_ROW_STATUSES");
@@ -3400,6 +3406,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
             textContent: toDisplayString(isSelected.value ? "check_box" : "check_box_outline_blank"),
             onClick: _cache[0] || (_cache[0] = withModifiers(($event) => selectRow(true), ["stop"]))
           }, null, 8, _hoisted_3$k)) : createCommentVNode("", true),
+          _ctx.iconProvider ? (openBlock(), createElementBlock("span", _hoisted_4$f, toDisplayString(icon.value || ""), 1)) : createCommentVNode("", true),
           withDirectives(createElementVNode("span", {
             class: normalizeClass([{ selected: isSelected.value }, "caption"]),
             onClick: _cache[1] || (_cache[1] = withModifiers(($event) => selectRow(false), ["stop"])),
@@ -3410,24 +3417,25 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
             [unref(vTreeRowDrag), dragOption]
           ]),
           _ctx.showMoveButton ? (openBlock(), createElementBlock("span", {
-            key: 1,
+            key: 2,
             class: "bs-clickable font-icon move-down",
             onClick: moveDownRow
           }, "arrow_downward")) : createCommentVNode("", true),
           _ctx.showMoveButton ? (openBlock(), createElementBlock("span", {
-            key: 2,
+            key: 3,
             class: "bs-clickable font-icon move-up",
             onClick: moveUpRow
           }, "arrow_upward")) : createCommentVNode("", true)
         ])), [
           [unref(vTreeRowDrop), dropOption]
         ]),
-        children.value && children.value.length > 0 ? withDirectives((openBlock(), createElementBlock("div", _hoisted_4$f, [
+        children.value && children.value.length > 0 ? withDirectives((openBlock(), createElementBlock("div", _hoisted_5$e, [
           (openBlock(true), createElementBlock(Fragment$1, null, renderList(children.value, (child) => {
             return openBlock(), createBlock(_component_BSTreeRow, {
               key: _ctx.keyProvider(child),
               "children-provider": _ctx.childrenProvider,
               "enable-drag-and-drop": _ctx.enableDragAndDrop,
+              "icon-provider": _ctx.iconProvider,
               "key-provider": _ctx.keyProvider,
               "label-provider": _ctx.labelProvider,
               "parent-row": _ctx.row,
@@ -3438,7 +3446,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
               onToggleRow: toggleChildRow,
               onMoveRow: moveChildRow,
               onSelectRow: selectChildRow
-            }, null, 8, ["children-provider", "enable-drag-and-drop", "key-provider", "label-provider", "parent-row", "row", "show-checkbox", "show-move-button", "siblings"]);
+            }, null, 8, ["children-provider", "enable-drag-and-drop", "icon-provider", "key-provider", "label-provider", "parent-row", "row", "show-checkbox", "show-move-button", "siblings"]);
           }), 128))
         ], 512)), [
           [vShow, isOpen.value]
@@ -3453,6 +3461,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     data: {},
     keyProvider: { default: () => defaultKeyProvider },
     childrenProvider: { default: () => defaultTreeChildrenProvider },
+    iconProvider: {},
     labelProvider: { default: () => defaultLabelProvider },
     showMoveButton: { type: Boolean },
     enableDragAndDrop: { type: [Boolean, Object] },
@@ -3555,6 +3564,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
               key: _ctx.keyProvider(item),
               "children-provider": _ctx.childrenProvider,
               "enable-drag-and-drop": _ctx.enableDragAndDrop,
+              "icon-provider": _ctx.iconProvider,
               "key-provider": _ctx.keyProvider,
               "label-provider": _ctx.labelProvider,
               "parent-row": void 0,
@@ -3566,7 +3576,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
               onToggleRow: toggleRow,
               onMoveRow: moveRow,
               onSelectRow: selectRow
-            }, null, 8, ["children-provider", "enable-drag-and-drop", "key-provider", "label-provider", "row", "show-checkbox", "show-move-button", "siblings"]);
+            }, null, 8, ["children-provider", "enable-drag-and-drop", "icon-provider", "key-provider", "label-provider", "row", "show-checkbox", "show-move-button", "siblings"]);
           }), 128))
         ]),
         _: 1
@@ -3624,7 +3634,7 @@ class BSModal {
   }
   openAlert(title, message, clickHandler2) {
     const option = {
-      component: defineAsyncComponent(() => import("./BSAlertModal-CzXYUrgA.js")),
+      component: defineAsyncComponent(() => import("./BSAlertModal-CeAHPZr3.js")),
       bind: {
         title,
         message
@@ -3637,7 +3647,7 @@ class BSModal {
   }
   openYesNo(title, message, yesHandler, noHandler) {
     const option = {
-      component: defineAsyncComponent(() => import("./BSYesNoModal-DxwzLJSi.js")),
+      component: defineAsyncComponent(() => import("./BSYesNoModal-DmAqwhlo.js")),
       bind: {
         title,
         message
@@ -31649,13 +31659,13 @@ const _hoisted_4$9 = /* @__PURE__ */ createElementVNode("div", null, null, -1);
 const _hoisted_5$9 = [
   _hoisted_4$9
 ];
-const _hoisted_6$6 = {
+const _hoisted_6$7 = {
   key: 2,
   class: "fixed func-cell"
 };
-const _hoisted_7$4 = /* @__PURE__ */ createElementVNode("div", null, null, -1);
+const _hoisted_7$5 = /* @__PURE__ */ createElementVNode("div", null, null, -1);
 const _hoisted_8$3 = [
-  _hoisted_7$4
+  _hoisted_7$5
 ];
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "BSGrid",
@@ -31824,18 +31834,20 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       cancelProvidedSavePoint();
     }
     const scrolledHorizontally = ref(false);
+    const scrolledVertically = ref(false);
     onMounted(() => {
       var _a, _b;
-      (_b = (_a = table.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.addEventListener("scroll", setHorizontalScrollStyle, { passive: true });
+      (_b = (_a = table.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.addEventListener("scroll", setScrollStyle, { passive: true });
     });
-    const setHorizontalScrollStyle = () => {
-      var _a, _b;
+    const setScrollStyle = () => {
+      var _a, _b, _c, _d;
       scrolledHorizontally.value = (((_b = (_a = table.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.scrollLeft) || 0) > 0;
+      scrolledVertically.value = (((_d = (_c = table.value) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.scrollTop) || 0) > 0;
     };
     return (_ctx, _cache) => {
       var _a, _b, _c;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([{ "h-scrolled": scrolledHorizontally.value }, "bs-grid"]),
+        class: normalizeClass([{ "h-scrolled": scrolledHorizontally.value, "v-scrolled": scrolledVertically.value }, "bs-grid"]),
         style: normalizeStyle({ width: _ctx.width, height: _ctx.height })
       }, [
         createElementVNode("div", _hoisted_1$v, [
@@ -31851,7 +31863,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                   "selected-row-count": unref(internalSelectedRows).size,
                   onClick: toggleAllSelection
                 }, null, 8, ["selected-row-count"])) : createCommentVNode("", true),
-                _ctx.editable ? (openBlock(), createElementBlock("th", _hoisted_6$6, _hoisted_8$3)) : createCommentVNode("", true),
+                _ctx.editable ? (openBlock(), createElementBlock("th", _hoisted_6$7, _hoisted_8$3)) : createCommentVNode("", true),
                 _ctx.showSerial ? (openBlock(), createBlock(BSGridHeaderCellSerialNo, { key: 3 })) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment$1, null, renderList(internalColumns.value, (column) => {
                   return openBlock(), createBlock(BSGridHeaderCell, {
@@ -32459,8 +32471,8 @@ const _hoisted_2$j = { key: 0 };
 const _hoisted_3$9 = { key: 1 };
 const _hoisted_4$7 = { key: 2 };
 const _hoisted_5$7 = { key: 3 };
-const _hoisted_6$5 = { key: 4 };
-const _hoisted_7$3 = { key: 5 };
+const _hoisted_6$6 = { key: 4 };
+const _hoisted_7$4 = { key: 5 };
 const _hoisted_8$2 = ["textContent"];
 const _hoisted_9$1 = { key: 6 };
 const _hoisted_10$1 = ["textContent"];
@@ -32531,14 +32543,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             "left-icon": "filter_alt"
           })
         ])) : createCommentVNode("", true),
-        _ctx.showAddButton ? (openBlock(), createElementBlock("div", _hoisted_6$5, [
+        _ctx.showAddButton ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
           createVNode(BSButton, {
             caption: { key: "bs.gridcontrol.addRow" },
             "left-icon": "add",
             onClick: _cache[0] || (_cache[0] = ($event) => emit("clickAdd"))
           })
         ])) : createCommentVNode("", true),
-        _ctx.showRemoveButton ? (openBlock(), createElementBlock("div", _hoisted_7$3, [
+        _ctx.showRemoveButton ? (openBlock(), createElementBlock("div", _hoisted_7$4, [
           createVNode(BSButton, {
             caption: { key: "bs.gridcontrol.removeRow" },
             "left-icon": "remove",
@@ -32758,8 +32770,13 @@ const useTabManagerSilently = () => {
 const _hoisted_1$p = { class: "bs-tab-sheet bs-layout-vertical" };
 const _hoisted_2$h = { class: "tabs flex-grow-1 flex-shrink-1" };
 const _hoisted_3$8 = ["onClick"];
-const _hoisted_4$6 = { class: "buttons text-nowrap" };
-const _hoisted_5$6 = { class: "flex-grow-1 bs-layout-vertical" };
+const _hoisted_4$6 = {
+  key: 0,
+  class: "font-icon"
+};
+const _hoisted_5$6 = { class: "ml-4" };
+const _hoisted_6$5 = { class: "buttons text-nowrap" };
+const _hoisted_7$3 = { class: "flex-grow-1 bs-layout-vertical" };
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "BSTabSheet",
   props: {
@@ -32811,24 +32828,23 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_2$h, [
             (openBlock(true), createElementBlock(Fragment$1, null, renderList(visibleTabs.value, (tab) => {
               var _a;
-              return withDirectives((openBlock(), createElementBlock("div", {
+              return openBlock(), createElementBlock("div", {
                 key: tab.tabId,
-                class: normalizeClass([{ selected: (tab == null ? void 0 : tab.tabId) === ((_a = currentTab.value) == null ? void 0 : _a.tabId), disabled: tab == null ? void 0 : tab.disabled }, "tab"]),
+                class: normalizeClass([{ selected: (tab == null ? void 0 : tab.tabId) === ((_a = currentTab.value) == null ? void 0 : _a.tabId), disabled: tab == null ? void 0 : tab.disabled }, "tab flex-row align-items-center"]),
                 onClick: ($event) => selectTab(tab)
               }, [
-                withDirectives(createElementVNode("span", null, null, 512), [
+                tab.icon ? (openBlock(), createElementBlock("span", _hoisted_4$6, toDisplayString(tab.icon), 1)) : createCommentVNode("", true),
+                withDirectives(createElementVNode("span", _hoisted_5$6, null, 512), [
                   [unref(vT), tab.caption]
                 ])
-              ], 10, _hoisted_3$8)), [
-                [unref(vT), tab.caption]
-              ]);
+              ], 10, _hoisted_3$8);
             }), 128))
           ]),
-          createElementVNode("div", _hoisted_4$6, [
+          createElementVNode("div", _hoisted_6$5, [
             renderSlot(_ctx.$slots, "buttons")
           ])
         ], 2),
-        createElementVNode("div", _hoisted_5$6, [
+        createElementVNode("div", _hoisted_7$3, [
           currentTab.value ? renderSlot(_ctx.$slots, currentTab.value.tabId, {
             key: 0,
             tabId: currentTab.value.tabId
@@ -33939,7 +33955,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const modal = useModal();
     const openModal = () => {
       modal.openModal({
-        component: defineAsyncComponent(() => import("./AddressSearchModal-CdgJFLjT.js")),
+        component: defineAsyncComponent(() => import("./AddressSearchModal-Dhrg9zFz.js")),
         bind: {},
         on: {
           select: (addr) => {

package/dist/model/CommonTypes.d.ts

@@ -1,6 +1,7 @@
 export type LabelProvider<T> = (item: T) => MultiLangText | undefined;
 export type KeyProvider<T> = (item: T) => string | undefined;
 export type EnabledItemProvider<T> = (item: T) => boolean;
+export type IconProvider<T> = (item: T) => string | undefined;
 export type LocaleName = string;
 export type TimeZone = string;
 /**

package/dist/style.css

@@ -1,22 +1,22 @@
-[data-v-6f347589]:root {
+[data-v-2d45c4bb]:root {
   --font-size: 13px;
   --font-size-input: 13px;
   --font-size-button: 13px;
 }
-body[data-v-6f347589] {
+body[data-v-2d45c4bb] {
   font-size: var(--font-size);
 }
-input[data-v-6f347589] {
+input[data-v-2d45c4bb] {
   font-size: var(--font-size-input);
   padding-top: 2px;
 }
-button[data-v-6f347589] {
+button[data-v-2d45c4bb] {
   font-size: var(--font-size-button);
 }
-textarea[data-v-6f347589] {
+textarea[data-v-2d45c4bb] {
   font-size: var(--font-size-input);
 }
-.bs-button[data-v-6f347589] {
+.bs-button[data-v-2d45c4bb] {
   color: #555555;
   border: none;
   border-radius: 2px;
@@ -30,105 +30,106 @@ textarea[data-v-6f347589] {
   vertical-align: middle;
   white-space: nowrap;
 }
-.bs-button.border-0 > .font-icon.left[data-v-6f347589] {
+.bs-button.border-0 > .font-icon.left[data-v-2d45c4bb] {
   margin-right: 0;
 }
-.bs-button.border-0 > .font-icon.right[data-v-6f347589] {
+.bs-button.border-0 > .font-icon.right[data-v-2d45c4bb] {
   margin-left: 0;
 }
-.bs-button.bg-transparent[data-v-6f347589]:not(:disabled):hover {
+.bs-button.bg-transparent[data-v-2d45c4bb]:not(:disabled):hover {
   color: #444444;
 }
-.bs-button.bg-transparent[data-v-6f347589]:not(:disabled):active {
+.bs-button.bg-transparent[data-v-2d45c4bb]:not(:disabled):active {
   color: black;
 }
-.bs-button[data-v-6f347589]:disabled {
+.bs-button[data-v-2d45c4bb]:disabled {
   cursor: default;
   opacity: 0.6;
 }
-.bs-button.default[data-v-6f347589] {
+.bs-button.default[data-v-2d45c4bb] {
   background-color: white;
   border: 1px solid #CCCCCC;
 }
-.bs-button.default[data-v-6f347589]:not(:disabled):hover {
+.bs-button.default[data-v-2d45c4bb]:not(:disabled):hover {
   background-color: #f2f2f2;
 }
-.bs-button.default[data-v-6f347589]:not(:disabled):active {
+.bs-button.default[data-v-2d45c4bb]:not(:disabled):active {
   background-color: #e6e6e6;
 }
-.bs-button.underline[data-v-6f347589] {
+.bs-button.underline[data-v-2d45c4bb] {
   padding: 0 8px;
   border: 0 none;
   border-radius: 0;
   text-decoration: underline;
+  text-underline-offset: 2px;
 }
-.bs-button.underline.blue[data-v-6f347589]:not(:disabled):hover {
+.bs-button.underline.blue[data-v-2d45c4bb]:not(:disabled):hover {
   background-color: #3f5fed;
 }
-.bs-button.underline.blue[data-v-6f347589]:not(:disabled):active {
+.bs-button.underline.blue[data-v-2d45c4bb]:not(:disabled):active {
   color: #274beb;
 }
-.bs-button.underline.red[data-v-6f347589]:not(:disabled):active {
+.bs-button.underline.red[data-v-2d45c4bb]:not(:disabled):active {
   color: #cc171c;
 }
-.bs-button.underline.orange[data-v-6f347589]:not(:disabled):active {
+.bs-button.underline.orange[data-v-2d45c4bb]:not(:disabled):active {
   color: #f77710;
 }
-.bs-button.underline.green[data-v-6f347589]:not(:disabled):active {
+.bs-button.underline.green[data-v-2d45c4bb]:not(:disabled):active {
   color: #3e8038;
 }
-.bs-button.underline.gray[data-v-6f347589]:not(:disabled):active {
+.bs-button.underline.gray[data-v-2d45c4bb]:not(:disabled):active {
   color: #4d4d4d;
 }
-.bs-button.blue[data-v-6f347589] {
+.bs-button.blue[data-v-2d45c4bb] {
   background-color: #5672EF;
   border: 1px solid #5672EF;
   color: white;
 }
-.bs-button.blue[data-v-6f347589]:not(:disabled):hover {
+.bs-button.blue[data-v-2d45c4bb]:not(:disabled):hover {
   background-color: #274beb;
 }
-.bs-button.blue[data-v-6f347589]:not(:disabled):active {
+.bs-button.blue[data-v-2d45c4bb]:not(:disabled):active {
   background-color: #1335cc;
 }
-.bs-button.red[data-v-6f347589] {
+.bs-button.red[data-v-2d45c4bb] {
   background-color: #E72F34;
   color: white;
 }
-.bs-button.red[data-v-6f347589]:not(:disabled):hover {
+.bs-button.red[data-v-2d45c4bb]:not(:disabled):hover {
   background-color: #cc171c;
 }
-.bs-button.red[data-v-6f347589]:not(:disabled):active {
+.bs-button.red[data-v-2d45c4bb]:not(:disabled):active {
   background-color: #9e1216;
 }
-.bs-button.orange[data-v-6f347589] {
+.bs-button.orange[data-v-2d45c4bb] {
   background-color: #F99341;
   color: white;
 }
-.bs-button.orange[data-v-6f347589]:not(:disabled):hover {
+.bs-button.orange[data-v-2d45c4bb]:not(:disabled):hover {
   background-color: #f77710;
 }
-.bs-button.orange[data-v-6f347589]:not(:disabled):active {
+.bs-button.orange[data-v-2d45c4bb]:not(:disabled):active {
   background-color: #ce5f06;
 }
-.bs-button.green[data-v-6f347589] {
+.bs-button.green[data-v-2d45c4bb] {
   background-color: #4FA348;
   color: white;
 }
-.bs-button.green[data-v-6f347589]:not(:disabled):hover {
+.bs-button.green[data-v-2d45c4bb]:not(:disabled):hover {
   background-color: #3e8038;
 }
-.bs-button.green[data-v-6f347589]:not(:disabled):active {
+.bs-button.green[data-v-2d45c4bb]:not(:disabled):active {
   background-color: #2d5c29;
 }
-.bs-button.gray[data-v-6f347589] {
+.bs-button.gray[data-v-2d45c4bb] {
   background-color: #666666;
   color: white;
 }
-.bs-button.gray[data-v-6f347589]:not(:disabled):hover {
+.bs-button.gray[data-v-2d45c4bb]:not(:disabled):hover {
   background-color: #4d4d4d;
 }
-.bs-button.gray[data-v-6f347589]:not(:disabled):active {
+.bs-button.gray[data-v-2d45c4bb]:not(:disabled):active {
   background-color: #333333;
 }:root {
   --font-size: 13px;
@@ -32936,7 +32937,7 @@ textarea {
 .bs-grid > .table-wrap {
   overflow: auto;
   flex-grow: 1;
-  background-color: #EAEAEA;
+  background-color: #FAFAFA;
   border-top: 1px solid #EAEAEA;
   border-bottom: 1px solid #EAEAEA;
 }
@@ -32944,6 +32945,7 @@ textarea {
   flex-grow: 1;
   table-layout: fixed;
   border-collapse: collapse;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.03);
 }
 .bs-grid > .table-wrap > table > thead > tr > td, .bs-grid > .table-wrap > table > thead > tr > th, .bs-grid > .table-wrap > table tbody > tr > td, .bs-grid > .table-wrap > table tbody > tr > th {
   vertical-align: middle;
@@ -32978,6 +32980,9 @@ textarea {
 .bs-grid > .table-wrap > table > thead > tr.header-row > .func-cell.serial-no {
   min-width: 40px;
 }
+.bs-grid > .table-wrap > table > thead > tr.header-row:has(.has-filter) th > div {
+  height: 50px;
+}
 .bs-grid > .table-wrap > table > thead > tr.header-row > th {
   position: sticky;
   top: 0;
@@ -32995,7 +33000,7 @@ textarea {
 .bs-grid > .table-wrap > table > thead > tr.header-row > th > div {
   border-right: 1px solid #EAEAEA;
   border-bottom: 1px solid #EAEAEA;
-  height: 50px;
+  min-height: 36.5px;
   text-align: left;
   display: flex;
   flex-direction: column;
@@ -33074,6 +33079,20 @@ textarea {
 }
 .bs-grid > .table-wrap > table > tbody > tr.data-row.selected > td > div {
   border-right-color: #DDEEFF;
+}
+.bs-grid.h-scrolled .header-row .fixed:after,
+.bs-grid.h-scrolled .data-row .fixed:after {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: -8px;
+  width: 8px;
+  height: 100%;
+  content: "";
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
+}
+.bs-grid.v-scrolled .header-row > th > div {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
 }:root {
   --font-size: 13px;
   --font-size-input: 13px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/bluesea",
   "private": false,
-  "version": "5.0.0-alpha.50",
+  "version": "5.0.0-alpha.51",
   "description": "Ui Library for g1cloud BackOffice.",
   "type": "module",
   "engines": {