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

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

@@ -1,6 +1,32 @@
-import { markRaw, reactive, ref, nextTick, defineComponent, createElementBlock, openBlock, withDirectives, createElementVNode, normalizeStyle, unref, vShow, computed, useSlots, withModifiers, normalizeClass, renderSlot, createVNode, createCommentVNode, toDisplayString, watch, createTextVNode, createBlock, Fragment, renderList, createSlots, withCtx, watchEffect, onBeforeUnmount, onMounted, mergeProps, toHandlers, defineAsyncComponent, withKeys, vModelText, resolveComponent } from "vue";
+import { registerIcons, notNull, formatUtil, waitDuring, useContextMenu, BSIcon, vTooltip, componentUtil, provideSavePoint, provideFieldContext, emptyKeyProvider, useSavePoint, cancelProvidedSavePoint, BSLoadingIcon, BSPageNavigation, useModalHandle, BSModalFrame, BSButton, BSNumberInput, BSCheckbox, useModal, BSSelect, useBlueseaConfig, BSRadioButtonGroup, BSDateRange } from "@g1cloud/open-bluesea-core";
+import { markRaw, reactive, ref, nextTick, defineComponent, createElementBlock, openBlock, withDirectives, createElementVNode, normalizeStyle, unref, vShow, computed, useSlots, withModifiers, normalizeClass, renderSlot, createVNode, createBlock, createCommentVNode, toDisplayString, watch, createTextVNode, Fragment, renderList, createSlots, withCtx, watchEffect, onBeforeUnmount, onMounted, mergeProps, toHandlers, defineAsyncComponent, withKeys, vModelText } from "vue";
 import dayjs from "dayjs";
-import { notNull, formatUtil, waitDuring, useContextMenu, vTooltip, componentUtil, provideSavePoint, provideFieldContext, emptyKeyProvider, useSavePoint, cancelProvidedSavePoint, BSLoadingIcon, BSPageNavigation, useModalHandle, BSModalFrame, BSButton, BSNumberInput, BSCheckbox, useModal, BSSelect, useBlueseaConfig, BSRadioButtonGroup, BSDateRange } from "@g1cloud/open-bluesea-core";
+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>';
+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) {
@@ -1114,10 +1140,9 @@ const _export_sfc = (sfc, props) => {
   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__ */ defineComponent({
   __name: "BSGridHeaderCell",
   props: {
@@ -1198,20 +1223,20 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           class: normalizeClass([styleClass.value, "position-relative"]),
           style: normalizeStyle(styleCss.value)
         }, [
-          createElementVNode("div", _hoisted_2$8, [
+          createElementVNode("div", _hoisted_2$5, [
             createElementVNode("span", {
               textContent: toDisplayString(__props.column.caption),
               class: "grow text-truncate"
             }, null, 8, _hoisted_3$4),
-            __props.column.sortable ? (openBlock(), createElementBlock("span", {
+            __props.column.sortable ? (openBlock(), createBlock(unref(BSIcon), {
               key: 0,
+              name: ascending.value === void 0 ? "swap_vert" : "straight",
               class: normalizeClass([{
                 "text-gray-400": ascending.value === void 0,
                 descending: !ascending.value
-              }, "sort-icon font-icon bs-clickable"]),
-              onClick: sort,
-              textContent: toDisplayString(ascending.value === void 0 ? "swap_vert" : "straight")
-            }, null, 10, _hoisted_4$4)) : createCommentVNode("", true)
+              }, "sort-icon bs-clickable"]),
+              onClick: sort
+            }, null, 8, ["name", "class"])) : createCommentVNode("", true)
           ]),
           renderSlot(_ctx.$slots, "filter", {}, void 0, true),
           createVNode(BSGridHeaderCellResizeHandle, {
@@ -1219,13 +1244,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             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__ */ defineComponent({
   __name: "BSGridHeaderCellCheckbox",
   props: {
@@ -1241,24 +1265,29 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         class: normalizeClass([{ checked: checked.value }, "fixed func-cell"]),
         onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
       }, [
-        createElementVNode("div", _hoisted_1$c, [
-          createElementVNode("span", _hoisted_2$7, toDisplayString(checked.value ? "check_box" : "check_box_outline_blank"), 1)
+        createElementVNode("div", _hoisted_1$b, [
+          createVNode(unref(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 openBlock(), createElementBlock("th", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
-    createElementVNode("div", null, [
-      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__ */ defineComponent({
+  __name: "BSGridHeaderCellSerialNo",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("th", _hoisted_1$a, [
+        createElementVNode("div", null, [
+          createVNode(unref(BSIcon), { name: "numbers" })
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1$9 = ["data-property-id"];
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "BSGridCell",
   props: {
@@ -1365,11 +1394,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         ], 6)), [
           [unref(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__ */ defineComponent({
   __name: "BSGridCellSerialNo",
   props: {
@@ -1377,13 +1406,12 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("td", _hoisted_1$9, [
+      return openBlock(), createElementBlock("td", _hoisted_1$8, [
         createElementVNode("div", null, toDisplayString(__props.serialNo), 1)
       ]);
     };
   }
 });
-const _hoisted_1$8 = { class: "font-icon" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "BSGridCellCheckbox",
   props: {
@@ -1405,15 +1433,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass([{ "bs-clickable": !__props.disabled }, "checkbox"])
         }, [
-          createElementVNode("div", _hoisted_1$8, toDisplayString(__props.checked ? "check_box" : "check_box_outline_blank"), 1)
+          createVNode(unref(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__ */ defineComponent({
   __name: "BSGridCellEdit",
   props: {
@@ -1429,7 +1458,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           key: 0,
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("toggleEditMode"), ["stop"]))
         }, [
-          createElementVNode("span", _hoisted_2$6, toDisplayString(__props.isEditing ? "replay" : "stylus"), 1)
+          createVNode(unref(BSIcon), {
+            name: __props.isEditing ? "replay" : "edit"
+          }, null, 8, ["name"])
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -1540,9 +1571,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("td", _hoisted_1$6, [..._cache[0] || (_cache[0] = [
-        createElementVNode("div", { class: "font-icon" }, "drag_handle", -1)
-      ])])), [
+      return withDirectives((openBlock(), createElementBlock("td", _hoisted_1$6, [
+        createVNode(unref(BSIcon), { name: "drag_handle" })
+      ])), [
         [unref(vDragSupport), {
           draggable: true,
           sourceProvider: (td) => td.parentElement,
@@ -1694,7 +1725,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 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"
@@ -1704,8 +1735,9 @@ const _hoisted_4$3 = {
   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__ */ defineComponent({
   __name: "BSGrid",
   props: {
@@ -1986,7 +2018,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ref: table
           }, [
             createElementVNode("thead", null, [
-              createElementVNode("tr", _hoisted_2$5, [
+              createElementVNode("tr", _hoisted_2$4, [
                 __props.showDragHandle ? (openBlock(), createElementBlock("th", _hoisted_3$3, [..._cache[0] || (_cache[0] = [
                   createElementVNode("div", null, null, -1)
                 ])])) : createCommentVNode("", true),
@@ -1998,7 +2030,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                 __props.editable && !__props.hideEditIcon ? (openBlock(), createElementBlock("th", _hoisted_4$3, [..._cache[1] || (_cache[1] = [
                   createElementVNode("div", null, null, -1)
                 ])])) : createCommentVNode("", true),
-                __props.showSerial ? (openBlock(), createBlock(BSGridHeaderCellSerialNo, { key: 3 })) : createCommentVNode("", true),
+                __props.showSerial ? (openBlock(), createBlock(_sfc_main$e, { key: 3 })) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(internalColumns.value, (column) => {
                   return openBlock(), createBlock(BSGridHeaderCell, {
                     key: column.propertyId,
@@ -2026,15 +2058,15 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ]),
             createElementVNode("tbody", null, [
               __props.loading ? (openBlock(), createElementBlock("tr", _hoisted_5$2, [
-                createElementVNode("td", null, [
+                createElementVNode("td", _hoisted_6$1, [
                   createVNode(unref(BSLoadingIcon), { class: "position-absolute pa-8" })
                 ])
-              ])) : __props.data && __props.data.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6$1, [
+              ])) : __props.data && __props.data.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_7$1, [
                 createElementVNode("td", null, [
                   createElementVNode("div", {
                     textContent: toDisplayString(__props.emptyMessage),
                     class: "position-absolute text-nowrap pa-8"
-                  }, null, 8, _hoisted_7$1)
+                  }, null, 8, _hoisted_8$1)
                 ])
               ])) : __props.data ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(__props.data, (row, index) => {
                 return openBlock(), createBlock(_sfc_main$8, {
@@ -2097,9 +2129,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 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__ */ defineComponent({
   __name: "BSGridColumnSettingModal",
   props: {
@@ -2203,7 +2235,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               ])
             ]),
             fixed: withCtx(({ row }) => [
-              createElementVNode("div", _hoisted_2$4, [
+              createElementVNode("div", _hoisted_2$3, [
                 createVNode(unref(BSCheckbox), {
                   modelValue: row.fixed,
                   "onUpdate:modelValue": [($event) => row.fixed = $event, ($event) => updateFixedColumn($event, row)],
@@ -2249,7 +2281,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 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 };
@@ -2317,44 +2349,73 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        __props.showSetting ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+        __props.showSetting ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
           createVNode(unref(BSButton), {
             caption: "Column Settings",
             "data-id": "columnSettingBtn",
-            "left-icon": "data_table",
             onClick: openSettingModal
+          }, {
+            left: withCtx(() => [
+              createVNode(unref(BSIcon), {
+                class: "mt-0.5",
+                name: "data_table"
+              })
+            ]),
+            _: 1
           })
         ])) : createCommentVNode("", true),
         __props.showRefresh ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
           createVNode(unref(BSButton), {
             caption: "Refresh",
             "data-id": "refreshBtn",
-            "left-icon": "sync",
             onClick: refreshGrid
+          }, {
+            left: withCtx(() => [
+              createVNode(unref(BSIcon), {
+                class: "mt-0.5",
+                name: "sync"
+              })
+            ]),
+            _: 1
           })
         ])) : createCommentVNode("", true),
         __props.showClearFilter ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
           createVNode(unref(BSButton), {
             caption: "Clear Settings",
             "data-id": "clearSettingBtn",
-            "left-icon": "filter_alt_off",
             onClick: clearGridFilter
+          }, {
+            left: withCtx(() => [
+              createVNode(unref(BSIcon), {
+                class: "mt-0.5",
+                name: "filter_alt_off"
+              })
+            ]),
+            _: 1
           })
         ])) : createCommentVNode("", true),
         __props.showAddButton ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
           createVNode(unref(BSButton), {
             caption: "Add Row",
             "data-id": "addRowBtn",
-            "left-icon": "add",
             onClick: _cache[0] || (_cache[0] = ($event) => emit("clickAdd"))
+          }, {
+            left: withCtx(() => [
+              createVNode(unref(BSIcon), { name: "add" })
+            ]),
+            _: 1
           })
         ])) : createCommentVNode("", true),
         __props.showRemoveButton ? (openBlock(), createElementBlock("div", _hoisted_6, [
           createVNode(unref(BSButton), {
             caption: "Remove Row",
             "data-id": "removeRowBtn",
-            "left-icon": "remove",
             onClick: _cache[1] || (_cache[1] = ($event) => emit("clickRemove"))
+          }, {
+            left: withCtx(() => [
+              createVNode(unref(BSIcon), { name: "remove" })
+            ]),
+            _: 1
           })
         ])) : createCommentVNode("", true),
         createElementVNode("div", null, [
@@ -2390,7 +2451,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 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",
@@ -2408,15 +2469,31 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const likeTextFilterItems = computed(() => props.textFilterItems);
-    const inTextFilterItems = computed(() => props.textFilterItems.filter((filter) => filter.allowMultiLineFilter));
-    const hasTextAreaFilterItem = computed(() => inTextFilterItems.value.length > 0);
+    const likeTextFilterItems = computed(
+      () => props.textFilterItems
+    );
+    const inTextFilterItems = computed(
+      () => props.textFilterItems.filter((filter) => filter.allowMultiLineFilter)
+    );
+    const hasTextAreaFilterItem = computed(
+      () => inTextFilterItems.value.length > 0
+    );
     const filterMode = ref("INPUT");
     const changeFilterMode = (mode) => filterMode.value = mode;
-    const likeFilterItems = computed(() => likeTextFilterItems.value.filter((item) => !item.filterCreator && item.filterType !== "NUMBER"));
-    const equalFilterItemPropertyIds = computed(() => likeTextFilterItems.value.filter((item) => !item.filterCreator && item.filterType === "NUMBER").map((item) => item.propertyId));
-    const customFilterItems = computed(() => likeTextFilterItems.value.filter((item) => item.filterCreator));
-    const inFilterItemPropertyIds = computed(() => inTextFilterItems.value.map((filter) => filter.propertyId));
+    const likeFilterItems = computed(
+      () => likeTextFilterItems.value.filter(
+        (item) => !item.filterCreator && item.filterType !== "NUMBER"
+      )
+    );
+    const equalFilterItemPropertyIds = computed(
+      () => likeTextFilterItems.value.filter((item) => !item.filterCreator && item.filterType === "NUMBER").map((item) => item.propertyId)
+    );
+    const customFilterItems = computed(
+      () => likeTextFilterItems.value.filter((item) => item.filterCreator)
+    );
+    const inFilterItemPropertyIds = computed(
+      () => inTextFilterItems.value.map((filter) => filter.propertyId)
+    );
     const getFilterKeyword = (filter) => {
       const actualFilter = filter instanceof OrFilter ? filter.filters[0] : filter;
       if (actualFilter && "getFilterValueString" in actualFilter) {
@@ -2447,13 +2524,31 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
     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) => {
@@ -2463,13 +2558,15 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         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(notNull);
         if (allFilters.length >= 2) return orFilter(allFilters);
         else return allFilters[0];
@@ -2489,7 +2586,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        withDirectives(createElementVNode("div", _hoisted_2$2, [
+        withDirectives(createElementVNode("div", _hoisted_2$1, [
           withDirectives(createElementVNode("input", {
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputText.value = $event),
             "data-id": "textFilterInput",
@@ -2500,11 +2597,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, null, 544), [
             [vModelText, inputText.value]
           ]),
-          hasTextAreaFilterItem.value ? (openBlock(), createElementBlock("span", {
+          hasTextAreaFilterItem.value ? (openBlock(), createBlock(unref(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")) : createCommentVNode("", true)
+          })) : createCommentVNode("", true)
         ], 512), [
           [vShow, filterMode.value === "INPUT"]
         ]),
@@ -2516,10 +2614,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, null, 544), [
             [vModelText, textareaText.value]
           ]),
-          createElementVNode("span", {
-            class: "font-icon bs-clickable mr-4 mt-5",
+          createVNode(unref(BSIcon), {
+            name: "north",
+            class: "bs-clickable m-1.5",
             onClick: _cache[4] || (_cache[4] = ($event) => changeFilterMode("INPUT"))
-          }, "north")
+          })
         ], 512), [
           [vShow, filterMode.value === "TEXTAREA"]
         ]),
@@ -2844,12 +2943,80 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$2 = /* @__PURE__ */ 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 = ref();
+    const toValue = ref();
+    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 openBlock(), createBlock(unref(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__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "BSDateRangeFilters",
   props: {
     dateFilter: {},
@@ -2965,37 +3132,37 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return props.dateFilter.filterItems.find((item) => item.propertyId === propertyId)?.filterWidth || props.filterWidth;
     };
     return (_ctx, _cache) => {
-      const _component_BSDateRangeFilter = resolveComponent("BSDateRangeFilter");
       return __props.dateFilter.filterItems ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(dateFilterValues.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             key: index,
-            class: "bs-layout-horizontal mb-4 flex-align-center"
+            class: "flex gap-1 mb-1 flex-align-center"
           }, [
-            index === 0 ? (openBlock(), createElementBlock("span", {
+            index === 0 ? (openBlock(), createBlock(unref(BSIcon), {
               key: 0,
+              name: "add",
               class: normalizeClass([{
                 disabled: dateFilterValues.value.length >= __props.dateFilter.filterItems.length
-              }, "font-icon bs-clickable mr-4"]),
+              }, "bs-clickable"]),
               "data-id": "addDateFilterBtn",
               onClick: addDateFilter
-            }, "add", 2)) : (openBlock(), createElementBlock("span", {
+            }, null, 8, ["class"])) : (openBlock(), createBlock(unref(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"])),
             createVNode(unref(BSSelect), {
               items: __props.dateFilter.filterItems,
               "label-provider": (filter) => filter.caption,
               "model-value": item.propertyId,
               style: 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"]),
-            createVNode(_component_BSDateRangeFilter, {
+            createVNode(_sfc_main$2, {
               "display-format": dateFormatOfFilterItem(item.propertyId),
               "from-id": `${item.propertyId}From`,
               "model-value": item.value,
@@ -3017,8 +3184,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 (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))
@@ -3026,9 +3192,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "bs-grid-lookup bs-layout-horizontal flex-align-start" };
-const _hoisted_2 = { class: "text-nowrap" };
-const _sfc_main$1 = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "BSGridLookup",
   props: {
     gridId: {},
@@ -3126,10 +3292,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             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"])) : createCommentVNode("", true),
-        __props.config?.dateFilter ? (openBlock(), createBlock(_sfc_main$2, {
+        __props.config?.dateFilter ? (openBlock(), createBlock(_sfc_main$1, {
           key: 1,
           modelValue: dateFilterValue.value,
           "onUpdate:modelValue": [
@@ -3149,19 +3314,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_2, [
           createVNode(unref(BSButton), {
             caption: "Search",
-            class: "blue",
-            "left-icon": "search",
+            "button-color": "blue",
             onClick: emitSearch
+          }, {
+            left: withCtx(() => [
+              createVNode(unref(BSIcon), {
+                class: "mt-0.5",
+                name: "search"
+              })
+            ]),
+            _: 1
           }),
           __props.config?.dateFilter ? (openBlock(), createBlock(unref(BSButton), {
             key: 0,
             caption: "Save",
-            class: "ml-4",
             onClick: saveSearchCondition
           })) : createCommentVNode("", true),
           createVNode(unref(BSButton), {
             caption: "Reset",
-            class: "ml-4",
             onClick: resetSearchCondition
           })
         ])
@@ -3169,80 +3339,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ 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 = ref();
-    const toValue = ref();
-    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 openBlock(), createBlock(unref(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"]);
-    };
-  }
-});
 export {
   AbstractFilter,
   AndFilter,
-  _sfc_main as BSDateRangeFilter,
-  _sfc_main$2 as BSDateRangeFilters,
+  _sfc_main$2 as BSDateRangeFilter,
+  _sfc_main$1 as BSDateRangeFilters,
   _sfc_main$3 as BSDateRangePresets,
   _sfc_main$7 as BSGrid,
   _sfc_main$d as BSGridCell,
@@ -3255,8 +3356,8 @@ export {
   BSGridHeaderCell,
   _sfc_main$f as BSGridHeaderCellCheckbox,
   BSGridHeaderCellResizeHandle,
-  BSGridHeaderCellSerialNo,
-  _sfc_main$1 as BSGridLookup,
+  _sfc_main$e as BSGridHeaderCellSerialNo,
+  _sfc_main as BSGridLookup,
   _sfc_main$8 as BSGridRow,
   _sfc_main$4 as BSTextFilter,
   BetweenDateFilter,