@g1cloud/open-bluesea-grid 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/open-bluesea-grid.umd.js

@@ -1,7 +1,33 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("dayjs"), require("@g1cloud/open-bluesea-core")) : typeof define === "function" && define.amd ? define(["exports", "vue", "dayjs", "@g1cloud/open-bluesea-core"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.OpenBlueseaGrid = {}, global.Vue, global.dayjs, global.OpenBlueseaCore));
-})(this, (function(exports2, vue, dayjs, openBlueseaCore) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@g1cloud/open-bluesea-core"), require("vue"), require("dayjs")) : typeof define === "function" && define.amd ? define(["exports", "@g1cloud/open-bluesea-core", "vue", "dayjs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.OpenBlueseaGrid = {}, global.OpenBlueseaCore, global.Vue, global.dayjs));
+})(this, (function(exports2, openBlueseaCore, vue, dayjs) {
   "use strict";
+  const checkBoxIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
+  const checkBoxOutlineBlankIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>';
+  const numbersIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.5 10l.5-2h-4l1-4h-2l-1 4h-4l1-4h-2L9 8H5l-.5 2h4l-1 4h-4L3 16h4l-1 4h2l1-4h4l-1 4h2l1-4h4l.5-2h-4l1-4h4zm-7 4h-4l1-4h4l-1 4z"/></svg>';
+  const dragHandleIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z"/></svg>';
+  const editIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83l3.75 3.75l1.83-1.83z"/></svg>';
+  const replayIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/></svg>';
+  const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z"/></svg>';
+  const tableChartIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 10.02h5V21h-5zM17 21h3c1.1 0 2-.9 2-2v-9h-5v11zm3-18H5c-1.1 0-2 .9-2 2v3h19V5c0-1.1-.9-2-2-2zM3 19c0 1.1.9 2 2 2h3V10H3v9z"/></svg>';
+  const syncIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4l-4-4v3z"/></svg>';
+  const filterAltOffIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19.79 5.61A.998.998 0 0 0 19 4H6.83l7.97 7.97l4.99-6.36zM2.81 2.81L1.39 4.22L10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-2.17l5.78 5.78l1.41-1.41L2.81 2.81z"/></svg>';
+  const addIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>';
+  const removeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>';
+  openBlueseaCore.registerIcons({
+    check_box: checkBoxIcon,
+    check_box_outline_blank: checkBoxOutlineBlankIcon,
+    numbers: numbersIcon,
+    drag_handle: dragHandleIcon,
+    edit: editIcon,
+    replay: replayIcon,
+    search: searchIcon,
+    data_table: tableChartIcon,
+    sync: syncIcon,
+    filter_alt_off: filterAltOffIcon,
+    add: addIcon,
+    remove: removeIcon
+  });
   class AbstractFilter {
     type;
     constructor(type) {
@@ -1115,10 +1141,9 @@
     return target;
   };
   const BSGridHeaderCellResizeHandle = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-3bda3a20"]]);
-  const _hoisted_1$d = ["data-property-id"];
-  const _hoisted_2$8 = { class: "bs-layout-horizontal align-items-center" };
+  const _hoisted_1$c = ["data-property-id"];
+  const _hoisted_2$5 = { class: "flex items-center w-full" };
   const _hoisted_3$4 = ["textContent"];
-  const _hoisted_4$4 = ["textContent"];
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGridHeaderCell",
     props: {
@@ -1199,20 +1224,20 @@
             class: vue.normalizeClass([styleClass.value, "position-relative"]),
             style: vue.normalizeStyle(styleCss.value)
           }, [
-            vue.createElementVNode("div", _hoisted_2$8, [
+            vue.createElementVNode("div", _hoisted_2$5, [
               vue.createElementVNode("span", {
                 textContent: vue.toDisplayString(__props.column.caption),
                 class: "grow text-truncate"
               }, null, 8, _hoisted_3$4),
-              __props.column.sortable ? (vue.openBlock(), vue.createElementBlock("span", {
+              __props.column.sortable ? (vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSIcon), {
                 key: 0,
+                name: ascending.value === void 0 ? "swap_vert" : "straight",
                 class: vue.normalizeClass([{
                   "text-gray-400": ascending.value === void 0,
                   descending: !ascending.value
-                }, "sort-icon font-icon bs-clickable"]),
-                onClick: sort,
-                textContent: vue.toDisplayString(ascending.value === void 0 ? "swap_vert" : "straight")
-              }, null, 10, _hoisted_4$4)) : vue.createCommentVNode("", true)
+                }, "sort-icon bs-clickable"]),
+                onClick: sort
+              }, null, 8, ["name", "class"])) : vue.createCommentVNode("", true)
             ]),
             vue.renderSlot(_ctx.$slots, "filter", {}, void 0, true),
             vue.createVNode(BSGridHeaderCellResizeHandle, {
@@ -1220,13 +1245,12 @@
               onColumnResized: columnResized
             }, null, 8, ["column"])
           ], 6)
-        ], 46, _hoisted_1$d);
+        ], 46, _hoisted_1$c);
       };
     }
   });
-  const BSGridHeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-e140e95e"]]);
-  const _hoisted_1$c = { class: "checkbox bs-clickable" };
-  const _hoisted_2$7 = { class: "font-icon" };
+  const BSGridHeaderCell = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-37a577b0"]]);
+  const _hoisted_1$b = { class: "checkbox bs-clickable" };
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGridHeaderCellCheckbox",
     props: {
@@ -1242,24 +1266,29 @@
           class: vue.normalizeClass([{ checked: checked.value }, "fixed func-cell"]),
           onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
         }, [
-          vue.createElementVNode("div", _hoisted_1$c, [
-            vue.createElementVNode("span", _hoisted_2$7, vue.toDisplayString(checked.value ? "check_box" : "check_box_outline_blank"), 1)
+          vue.createElementVNode("div", _hoisted_1$b, [
+            vue.createVNode(vue.unref(openBlueseaCore.BSIcon), {
+              name: checked.value ? "check_box" : "check_box_outline_blank"
+            }, null, 8, ["name"])
           ])
         ], 2);
       };
     }
   });
-  const _sfc_main$e = {};
-  const _hoisted_1$b = { class: "fixed func-cell serial-no min-w-48" };
-  function _sfc_render(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("th", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
-      vue.createElementVNode("div", null, [
-        vue.createElementVNode("span", { class: "font-icon" }, "numbers")
-      ], -1)
-    ])]);
-  }
-  const BSGridHeaderCellSerialNo = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render]]);
-  const _hoisted_1$a = ["data-property-id"];
+  const _hoisted_1$a = { class: "fixed func-cell serial-no min-w-48" };
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+    __name: "BSGridHeaderCellSerialNo",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("th", _hoisted_1$a, [
+          vue.createElementVNode("div", null, [
+            vue.createVNode(vue.unref(openBlueseaCore.BSIcon), { name: "numbers" })
+          ])
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$9 = ["data-property-id"];
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGridCell",
     props: {
@@ -1366,11 +1395,11 @@
           ], 6)), [
             [vue.unref(openBlueseaCore.vTooltip), { content: tooltipText.value }]
           ])
-        ], 14, _hoisted_1$a);
+        ], 14, _hoisted_1$9);
       };
     }
   });
-  const _hoisted_1$9 = { class: "fixed func-cell serial-no" };
+  const _hoisted_1$8 = { class: "fixed func-cell serial-no text-right" };
   const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGridCellSerialNo",
     props: {
@@ -1378,13 +1407,12 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$9, [
+        return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$8, [
           vue.createElementVNode("div", null, vue.toDisplayString(__props.serialNo), 1)
         ]);
       };
     }
   });
-  const _hoisted_1$8 = { class: "font-icon" };
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGridCellCheckbox",
     props: {
@@ -1406,15 +1434,16 @@
           vue.createElementVNode("div", {
             class: vue.normalizeClass([{ "bs-clickable": !__props.disabled }, "checkbox"])
           }, [
-            vue.createElementVNode("div", _hoisted_1$8, vue.toDisplayString(__props.checked ? "check_box" : "check_box_outline_blank"), 1)
+            vue.createVNode(vue.unref(openBlueseaCore.BSIcon), {
+              name: __props.checked ? "check_box" : "check_box_outline_blank"
+            }, null, 8, ["name"])
           ], 2)
         ], 2);
       };
     }
   });
-  const BSGridCellCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-0211159f"]]);
+  const BSGridCellCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-704bd1b5"]]);
   const _hoisted_1$7 = { class: "fixed func-cell cursor-pointer" };
-  const _hoisted_2$6 = { class: "font-icon" };
   const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGridCellEdit",
     props: {
@@ -1430,7 +1459,9 @@
             key: 0,
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => emit("toggleEditMode"), ["stop"]))
           }, [
-            vue.createElementVNode("span", _hoisted_2$6, vue.toDisplayString(__props.isEditing ? "replay" : "stylus"), 1)
+            vue.createVNode(vue.unref(openBlueseaCore.BSIcon), {
+              name: __props.isEditing ? "replay" : "edit"
+            }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true)
         ]);
       };
@@ -1541,9 +1572,9 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("td", _hoisted_1$6, [..._cache[0] || (_cache[0] = [
-          vue.createElementVNode("div", { class: "font-icon" }, "drag_handle", -1)
-        ])])), [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("td", _hoisted_1$6, [
+          vue.createVNode(vue.unref(openBlueseaCore.BSIcon), { name: "drag_handle" })
+        ])), [
           [vue.unref(vDragSupport), {
             draggable: true,
             sourceProvider: (td) => td.parentElement,
@@ -1695,7 +1726,7 @@
     }
   });
   const _hoisted_1$5 = { class: "table-wrap" };
-  const _hoisted_2$5 = { class: "header-row" };
+  const _hoisted_2$4 = { class: "header-row" };
   const _hoisted_3$3 = {
     key: 0,
     class: "fixed func-cell"
@@ -1705,8 +1736,9 @@
     class: "fixed func-cell edit-icon"
   };
   const _hoisted_5$2 = { key: 0 };
-  const _hoisted_6$1 = { key: 1 };
-  const _hoisted_7$1 = ["textContent"];
+  const _hoisted_6$1 = { class: "absolute" };
+  const _hoisted_7$1 = { key: 1 };
+  const _hoisted_8$1 = ["textContent"];
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGrid",
     props: {
@@ -1987,7 +2019,7 @@
               ref: table
             }, [
               vue.createElementVNode("thead", null, [
-                vue.createElementVNode("tr", _hoisted_2$5, [
+                vue.createElementVNode("tr", _hoisted_2$4, [
                   __props.showDragHandle ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3$3, [..._cache[0] || (_cache[0] = [
                     vue.createElementVNode("div", null, null, -1)
                   ])])) : vue.createCommentVNode("", true),
@@ -1999,7 +2031,7 @@
                   __props.editable && !__props.hideEditIcon ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$3, [..._cache[1] || (_cache[1] = [
                     vue.createElementVNode("div", null, null, -1)
                   ])])) : vue.createCommentVNode("", true),
-                  __props.showSerial ? (vue.openBlock(), vue.createBlock(BSGridHeaderCellSerialNo, { key: 3 })) : vue.createCommentVNode("", true),
+                  __props.showSerial ? (vue.openBlock(), vue.createBlock(_sfc_main$e, { key: 3 })) : vue.createCommentVNode("", true),
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalColumns.value, (column) => {
                     return vue.openBlock(), vue.createBlock(BSGridHeaderCell, {
                       key: column.propertyId,
@@ -2027,15 +2059,15 @@
               ]),
               vue.createElementVNode("tbody", null, [
                 __props.loading ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_5$2, [
-                  vue.createElementVNode("td", null, [
+                  vue.createElementVNode("td", _hoisted_6$1, [
                     vue.createVNode(vue.unref(openBlueseaCore.BSLoadingIcon), { class: "position-absolute pa-8" })
                   ])
-                ])) : __props.data && __props.data.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$1, [
+                ])) : __props.data && __props.data.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$1, [
                   vue.createElementVNode("td", null, [
                     vue.createElementVNode("div", {
                       textContent: vue.toDisplayString(__props.emptyMessage),
                       class: "position-absolute text-nowrap pa-8"
-                    }, null, 8, _hoisted_7$1)
+                    }, null, 8, _hoisted_8$1)
                   ])
                 ])) : __props.data ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(__props.data, (row, index) => {
                   return vue.openBlock(), vue.createBlock(_sfc_main$8, {
@@ -2098,9 +2130,9 @@
     }
   });
   const _hoisted_1$4 = { class: "text-center" };
-  const _hoisted_2$4 = { class: "text-center" };
-  const _hoisted_3$2 = { class: "bs-layout-horizontal" };
-  const _hoisted_4$2 = { class: "bs-layout-horizontal grow justify-content-end gap-8" };
+  const _hoisted_2$3 = { class: "text-center" };
+  const _hoisted_3$2 = { class: "flex" };
+  const _hoisted_4$2 = { class: "flex grow justify-end gap-1" };
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGridColumnSettingModal",
     props: {
@@ -2204,7 +2236,7 @@
                 ])
               ]),
               fixed: vue.withCtx(({ row }) => [
-                vue.createElementVNode("div", _hoisted_2$4, [
+                vue.createElementVNode("div", _hoisted_2$3, [
                   vue.createVNode(vue.unref(openBlueseaCore.BSCheckbox), {
                     modelValue: row.fixed,
                     "onUpdate:modelValue": [($event) => row.fixed = $event, ($event) => updateFixedColumn($event, row)],
@@ -2254,7 +2286,7 @@
     default: _sfc_main$6
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1$3 = { class: "bs-grid-control" };
-  const _hoisted_2$3 = { key: 0 };
+  const _hoisted_2$2 = { key: 0 };
   const _hoisted_3$1 = { key: 1 };
   const _hoisted_4$1 = { key: 2 };
   const _hoisted_5$1 = { key: 3 };
@@ -2322,44 +2354,73 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-          __props.showSetting ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
+          __props.showSetting ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
             vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
               caption: "Column Settings",
               "data-id": "columnSettingBtn",
-              "left-icon": "data_table",
               onClick: openSettingModal
+            }, {
+              left: vue.withCtx(() => [
+                vue.createVNode(vue.unref(openBlueseaCore.BSIcon), {
+                  class: "mt-0.5",
+                  name: "data_table"
+                })
+              ]),
+              _: 1
             })
           ])) : vue.createCommentVNode("", true),
           __props.showRefresh ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
             vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
               caption: "Refresh",
               "data-id": "refreshBtn",
-              "left-icon": "sync",
               onClick: refreshGrid
+            }, {
+              left: vue.withCtx(() => [
+                vue.createVNode(vue.unref(openBlueseaCore.BSIcon), {
+                  class: "mt-0.5",
+                  name: "sync"
+                })
+              ]),
+              _: 1
             })
           ])) : vue.createCommentVNode("", true),
           __props.showClearFilter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
             vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
               caption: "Clear Settings",
               "data-id": "clearSettingBtn",
-              "left-icon": "filter_alt_off",
               onClick: clearGridFilter
+            }, {
+              left: vue.withCtx(() => [
+                vue.createVNode(vue.unref(openBlueseaCore.BSIcon), {
+                  class: "mt-0.5",
+                  name: "filter_alt_off"
+                })
+              ]),
+              _: 1
             })
           ])) : vue.createCommentVNode("", true),
           __props.showAddButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
             vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
               caption: "Add Row",
               "data-id": "addRowBtn",
-              "left-icon": "add",
               onClick: _cache[0] || (_cache[0] = ($event) => emit("clickAdd"))
+            }, {
+              left: vue.withCtx(() => [
+                vue.createVNode(vue.unref(openBlueseaCore.BSIcon), { name: "add" })
+              ]),
+              _: 1
             })
           ])) : vue.createCommentVNode("", true),
           __props.showRemoveButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
             vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
               caption: "Remove Row",
               "data-id": "removeRowBtn",
-              "left-icon": "remove",
               onClick: _cache[1] || (_cache[1] = ($event) => emit("clickRemove"))
+            }, {
+              left: vue.withCtx(() => [
+                vue.createVNode(vue.unref(openBlueseaCore.BSIcon), { name: "remove" })
+              ]),
+              _: 1
             })
           ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", null, [
@@ -2395,7 +2456,7 @@
     }
   });
   const _hoisted_1$2 = { class: "bs-text-filter" };
-  const _hoisted_2$2 = { class: "input-wrap" };
+  const _hoisted_2$1 = { class: "input-wrap" };
   const _hoisted_3 = { class: "textarea-wrap" };
   const _hoisted_4 = {
     class: "filter-caption text-nowrap",
@@ -2413,15 +2474,31 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const likeTextFilterItems = vue.computed(() => props.textFilterItems);
-      const inTextFilterItems = vue.computed(() => props.textFilterItems.filter((filter) => filter.allowMultiLineFilter));
-      const hasTextAreaFilterItem = vue.computed(() => inTextFilterItems.value.length > 0);
+      const likeTextFilterItems = vue.computed(
+        () => props.textFilterItems
+      );
+      const inTextFilterItems = vue.computed(
+        () => props.textFilterItems.filter((filter) => filter.allowMultiLineFilter)
+      );
+      const hasTextAreaFilterItem = vue.computed(
+        () => inTextFilterItems.value.length > 0
+      );
       const filterMode = vue.ref("INPUT");
       const changeFilterMode = (mode) => filterMode.value = mode;
-      const likeFilterItems = vue.computed(() => likeTextFilterItems.value.filter((item) => !item.filterCreator && item.filterType !== "NUMBER"));
-      const equalFilterItemPropertyIds = vue.computed(() => likeTextFilterItems.value.filter((item) => !item.filterCreator && item.filterType === "NUMBER").map((item) => item.propertyId));
-      const customFilterItems = vue.computed(() => likeTextFilterItems.value.filter((item) => item.filterCreator));
-      const inFilterItemPropertyIds = vue.computed(() => inTextFilterItems.value.map((filter) => filter.propertyId));
+      const likeFilterItems = vue.computed(
+        () => likeTextFilterItems.value.filter(
+          (item) => !item.filterCreator && item.filterType !== "NUMBER"
+        )
+      );
+      const equalFilterItemPropertyIds = vue.computed(
+        () => likeTextFilterItems.value.filter((item) => !item.filterCreator && item.filterType === "NUMBER").map((item) => item.propertyId)
+      );
+      const customFilterItems = vue.computed(
+        () => likeTextFilterItems.value.filter((item) => item.filterCreator)
+      );
+      const inFilterItemPropertyIds = vue.computed(
+        () => inTextFilterItems.value.map((filter) => filter.propertyId)
+      );
       const getFilterKeyword = (filter) => {
         const actualFilter = filter instanceof OrFilter ? filter.filters[0] : filter;
         if (actualFilter && "getFilterValueString" in actualFilter) {
@@ -2452,13 +2529,31 @@
       };
       const makeLikeFilters = (items, keyword) => {
         if (items.length === 0) return [];
-        const prefixSuffix = items.map((item) => (item.prefix === false ? "f" : "t") + (item.suffix === false ? "f" : "t"));
+        const prefixSuffix = items.map(
+          (item) => (item.prefix === false ? "f" : "t") + (item.suffix === false ? "f" : "t")
+        );
         if (prefixSuffix.every((val) => val === prefixSuffix[0])) {
           const likeNames = likeFilterItems.value.map((item) => item.propertyId);
           const first = items[0];
-          return [likeFilter(likeNames, keyword, first.prefix !== false, first.suffix !== false, true)];
+          return [
+            likeFilter(
+              likeNames,
+              keyword,
+              first.prefix !== false,
+              first.suffix !== false,
+              true
+            )
+          ];
         } else {
-          return items.map((item) => likeFilter([item.propertyId], keyword, item.prefix !== false, item.suffix !== false, true));
+          return items.map(
+            (item) => likeFilter(
+              [item.propertyId],
+              keyword,
+              item.prefix !== false,
+              item.suffix !== false,
+              true
+            )
+          );
         }
       };
       const createFilter = async (text) => {
@@ -2468,13 +2563,15 @@
           const like = makeLikeFilters(likeFilterItems.value, keyword);
           const equalNames = equalFilterItemPropertyIds.value;
           const equal = equalNames.length > 0 && !Number.isNaN(Number(keyword)) ? equalFilter(equalNames, Number(keyword), true) : void 0;
-          const customFilters = (await Promise.all(customFilterItems.value.map(async (item) => {
-            let created = item.filterCreator?.(item.propertyId, keyword);
-            if (created && created instanceof Promise) {
-              created = await created;
-            }
-            return created || [];
-          }))).flatMap((item) => item);
+          const customFilters = (await Promise.all(
+            customFilterItems.value.map(async (item) => {
+              let created = item.filterCreator?.(item.propertyId, keyword);
+              if (created && created instanceof Promise) {
+                created = await created;
+              }
+              return created || [];
+            })
+          )).flatMap((item) => item);
           const allFilters = [...like, equal, ...customFilters].filter(openBlueseaCore.notNull);
           if (allFilters.length >= 2) return orFilter(allFilters);
           else return allFilters[0];
@@ -2494,7 +2591,7 @@
       );
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-          vue.withDirectives(vue.createElementVNode("div", _hoisted_2$2, [
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_2$1, [
             vue.withDirectives(vue.createElementVNode("input", {
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputText.value = $event),
               "data-id": "textFilterInput",
@@ -2505,11 +2602,12 @@
             }, null, 544), [
               [vue.vModelText, inputText.value]
             ]),
-            hasTextAreaFilterItem.value ? (vue.openBlock(), vue.createElementBlock("span", {
+            hasTextAreaFilterItem.value ? (vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSIcon), {
               key: 0,
-              class: "filter-mode-btn font-icon bs-clickable mr-4 mt-5",
+              name: "south",
+              class: "bs-clickable m-1.5",
               onClick: _cache[2] || (_cache[2] = ($event) => changeFilterMode("TEXTAREA"))
-            }, "south")) : vue.createCommentVNode("", true)
+            })) : vue.createCommentVNode("", true)
           ], 512), [
             [vue.vShow, filterMode.value === "INPUT"]
           ]),
@@ -2521,10 +2619,11 @@
             }, null, 544), [
               [vue.vModelText, textareaText.value]
             ]),
-            vue.createElementVNode("span", {
-              class: "font-icon bs-clickable mr-4 mt-5",
+            vue.createVNode(vue.unref(openBlueseaCore.BSIcon), {
+              name: "north",
+              class: "bs-clickable m-1.5",
               onClick: _cache[4] || (_cache[4] = ($event) => changeFilterMode("INPUT"))
-            }, "north")
+            })
           ], 512), [
             [vue.vShow, filterMode.value === "TEXTAREA"]
           ]),
@@ -2849,12 +2948,80 @@
       };
     }
   });
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    __name: "BSDateRangeFilter",
+    props: {
+      idFrom: {},
+      idTo: {},
+      nameFrom: {},
+      nameTo: {},
+      modelValue: {},
+      disabled: { type: Boolean },
+      width: { default: "360px" },
+      resolution: { default: "DAY" },
+      displayFormat: {},
+      popupDisplayFormat: {},
+      popupStartYear: {},
+      popupEndYear: {},
+      timeZone: {}
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const fromValue = vue.ref();
+      const toValue = vue.ref();
+      vue.watch(
+        () => props.modelValue,
+        () => {
+          fromValue.value = props.modelValue?.from;
+          toValue.value = props.modelValue?.to;
+        },
+        { immediate: true }
+      );
+      const emitValue = () => {
+        const value = {
+          from: fromValue.value,
+          to: toValue.value
+        };
+        emit("update:modelValue", value);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSDateRange), {
+          "from-value": fromValue.value,
+          "onUpdate:fromValue": [
+            _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
+            emitValue
+          ],
+          "to-value": toValue.value,
+          "onUpdate:toValue": [
+            _cache[1] || (_cache[1] = ($event) => toValue.value = $event),
+            emitValue
+          ],
+          "disabled-from": __props.disabled,
+          "disabled-to": __props.disabled,
+          "display-format": __props.displayFormat,
+          "id-from": __props.idFrom,
+          "id-to": __props.idTo,
+          "name-from": __props.nameFrom,
+          "name-to": __props.nameTo,
+          "popup-display-format": __props.popupDisplayFormat,
+          "popup-end-year": __props.popupEndYear,
+          "popup-start-year": __props.popupStartYear,
+          resolution: __props.resolution,
+          "time-zone": __props.timeZone,
+          "validate-date-order": false,
+          width: __props.width,
+          "hide-extra-date": ""
+        }, null, 8, ["from-value", "to-value", "disabled-from", "disabled-to", "display-format", "id-from", "id-to", "name-from", "name-to", "popup-display-format", "popup-end-year", "popup-start-year", "resolution", "time-zone", "width"]);
+      };
+    }
+  });
   const _hoisted_1$1 = {
     key: 0,
-    class: "date-filters .bs-layout-vertical mr-16"
+    class: "date-filters flex flex-col"
   };
-  const _hoisted_2$1 = ["onClick"];
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "BSDateRangeFilters",
     props: {
       dateFilter: {},
@@ -2970,37 +3137,37 @@
         return props.dateFilter.filterItems.find((item) => item.propertyId === propertyId)?.filterWidth || props.filterWidth;
       };
       return (_ctx, _cache) => {
-        const _component_BSDateRangeFilter = vue.resolveComponent("BSDateRangeFilter");
         return __props.dateFilter.filterItems ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dateFilterValues.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: index,
-              class: "bs-layout-horizontal mb-4 flex-align-center"
+              class: "flex gap-1 mb-1 flex-align-center"
             }, [
-              index === 0 ? (vue.openBlock(), vue.createElementBlock("span", {
+              index === 0 ? (vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSIcon), {
                 key: 0,
+                name: "add",
                 class: vue.normalizeClass([{
                   disabled: dateFilterValues.value.length >= __props.dateFilter.filterItems.length
-                }, "font-icon bs-clickable mr-4"]),
+                }, "bs-clickable"]),
                 "data-id": "addDateFilterBtn",
                 onClick: addDateFilter
-              }, "add", 2)) : (vue.openBlock(), vue.createElementBlock("span", {
+              }, null, 8, ["class"])) : (vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSIcon), {
                 key: 1,
-                class: "font-icon bs-clickable mr-4",
+                name: "remove",
+                class: "bs-clickable",
                 "data-id": "removeDateFilterBtn",
                 onClick: ($event) => removeDateFilter(index)
-              }, "remove", 8, _hoisted_2$1)),
+              }, null, 8, ["onClick"])),
               vue.createVNode(vue.unref(openBlueseaCore.BSSelect), {
                 items: __props.dateFilter.filterItems,
                 "label-provider": (filter) => filter.caption,
                 "model-value": item.propertyId,
                 style: vue.normalizeStyle({ minWidth: __props.captionMinWidth }),
                 "value-provider": (filter) => filter.propertyId,
-                class: "mr-4",
                 "data-id": "filterItemSelect",
                 "onUpdate:modelValue": ($event) => setDateFilterPropertyId(index, $event)
               }, null, 8, ["items", "label-provider", "model-value", "style", "value-provider", "onUpdate:modelValue"]),
-              vue.createVNode(_component_BSDateRangeFilter, {
+              vue.createVNode(_sfc_main$2, {
                 "display-format": dateFormatOfFilterItem(item.propertyId),
                 "from-id": `${item.propertyId}From`,
                 "model-value": item.value,
@@ -3022,8 +3189,7 @@
                   (value, preset) => setDateFilterValue(index, value, preset)
                 ],
                 presets: __props.presets,
-                "time-zone": timeZoneOfFilterItem(item.propertyId),
-                class: "ml-4"
+                "time-zone": timeZoneOfFilterItem(item.propertyId)
               }, null, 8, ["modelValue", "onUpdate:modelValue", "presets", "time-zone"])
             ]);
           }), 128))
@@ -3031,9 +3197,9 @@
       };
     }
   });
-  const _hoisted_1 = { class: "bs-grid-lookup bs-layout-horizontal flex-align-start" };
-  const _hoisted_2 = { class: "text-nowrap" };
-  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1 = { class: "bs-grid-lookup flex flex-align-start" };
+  const _hoisted_2 = { class: "text-nowrap flex gap-1" };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     __name: "BSGridLookup",
     props: {
       gridId: {},
@@ -3131,10 +3297,9 @@
               emitUpdateModelValueAndSearch
             ],
             keyword: __props.keyword,
-            "text-filter-items": __props.config.textFilter.filterItems,
-            class: "mr-16"
+            "text-filter-items": __props.config.textFilter.filterItems
           }, null, 8, ["modelValue", "keyword", "text-filter-items"])) : vue.createCommentVNode("", true),
-          __props.config?.dateFilter ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+          __props.config?.dateFilter ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
             key: 1,
             modelValue: dateFilterValue.value,
             "onUpdate:modelValue": [
@@ -3154,19 +3319,24 @@
           vue.createElementVNode("div", _hoisted_2, [
             vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
               caption: "Search",
-              class: "blue",
-              "left-icon": "search",
+              "button-color": "blue",
               onClick: emitSearch
+            }, {
+              left: vue.withCtx(() => [
+                vue.createVNode(vue.unref(openBlueseaCore.BSIcon), {
+                  class: "mt-0.5",
+                  name: "search"
+                })
+              ]),
+              _: 1
             }),
             __props.config?.dateFilter ? (vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSButton), {
               key: 0,
               caption: "Save",
-              class: "ml-4",
               onClick: saveSearchCondition
             })) : vue.createCommentVNode("", true),
             vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
               caption: "Reset",
-              class: "ml-4",
               onClick: resetSearchCondition
             })
           ])
@@ -3174,79 +3344,10 @@
       };
     }
   });
-  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-    __name: "BSDateRangeFilter",
-    props: {
-      idFrom: {},
-      idTo: {},
-      nameFrom: {},
-      nameTo: {},
-      modelValue: {},
-      disabled: { type: Boolean },
-      width: { default: "300px" },
-      resolution: { default: "DAY" },
-      displayFormat: {},
-      popupDisplayFormat: {},
-      popupStartYear: {},
-      popupEndYear: {},
-      timeZone: {}
-    },
-    emits: ["update:modelValue"],
-    setup(__props, { emit: __emit }) {
-      const props = __props;
-      const emit = __emit;
-      const fromValue = vue.ref();
-      const toValue = vue.ref();
-      vue.watch(
-        () => props.modelValue,
-        () => {
-          fromValue.value = props.modelValue?.from;
-          toValue.value = props.modelValue?.to;
-        },
-        { immediate: true }
-      );
-      const emitValue = () => {
-        const value = {
-          from: fromValue.value,
-          to: toValue.value
-        };
-        emit("update:modelValue", value);
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSDateRange), {
-          "from-value": fromValue.value,
-          "onUpdate:fromValue": [
-            _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
-            emitValue
-          ],
-          "to-value": toValue.value,
-          "onUpdate:toValue": [
-            _cache[1] || (_cache[1] = ($event) => toValue.value = $event),
-            emitValue
-          ],
-          "disabled-from": __props.disabled,
-          "disabled-to": __props.disabled,
-          "display-format": __props.displayFormat,
-          "id-from": __props.idFrom,
-          "id-to": __props.idTo,
-          "name-from": __props.nameFrom,
-          "name-to": __props.nameTo,
-          "popup-display-format": __props.popupDisplayFormat,
-          "popup-end-year": __props.popupEndYear,
-          "popup-start-year": __props.popupStartYear,
-          resolution: __props.resolution,
-          "time-zone": __props.timeZone,
-          "validate-date-order": false,
-          width: __props.width,
-          "hide-extra-date": ""
-        }, null, 8, ["from-value", "to-value", "disabled-from", "disabled-to", "display-format", "id-from", "id-to", "name-from", "name-to", "popup-display-format", "popup-end-year", "popup-start-year", "resolution", "time-zone", "width"]);
-      };
-    }
-  });
   exports2.AbstractFilter = AbstractFilter;
   exports2.AndFilter = AndFilter;
-  exports2.BSDateRangeFilter = _sfc_main;
-  exports2.BSDateRangeFilters = _sfc_main$2;
+  exports2.BSDateRangeFilter = _sfc_main$2;
+  exports2.BSDateRangeFilters = _sfc_main$1;
   exports2.BSDateRangePresets = _sfc_main$3;
   exports2.BSGrid = _sfc_main$7;
   exports2.BSGridCell = _sfc_main$d;
@@ -3259,8 +3360,8 @@
   exports2.BSGridHeaderCell = BSGridHeaderCell;
   exports2.BSGridHeaderCellCheckbox = _sfc_main$f;
   exports2.BSGridHeaderCellResizeHandle = BSGridHeaderCellResizeHandle;
-  exports2.BSGridHeaderCellSerialNo = BSGridHeaderCellSerialNo;
-  exports2.BSGridLookup = _sfc_main$1;
+  exports2.BSGridHeaderCellSerialNo = _sfc_main$e;
+  exports2.BSGridLookup = _sfc_main;
   exports2.BSGridRow = _sfc_main$8;
   exports2.BSTextFilter = _sfc_main$4;
   exports2.BetweenDateFilter = BetweenDateFilter;