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

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

@@ -0,0 +1,3310 @@
+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 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";
+class AbstractFilter {
+  type;
+  constructor(type) {
+    this.type = type;
+  }
+  serialize() {
+    return void 0;
+  }
+  isEmpty() {
+    return true;
+  }
+}
+class AndFilter extends AbstractFilter {
+  filters;
+  constructor(filters) {
+    super("AND");
+    this.filters = filters;
+  }
+  toString() {
+    return this.filters.map((filter) => `(${filter.toString()})`).join(" AND ");
+  }
+  serialize() {
+    const values = this.filters.map((f) => f.serialize()).filter(notNull);
+    return ["AN", null, ...values];
+  }
+  isEmpty() {
+    return this.filters.length === 0 || !this.filters.find((child) => !child.isEmpty());
+  }
+}
+class OrFilter extends AbstractFilter {
+  filters;
+  constructor(filters) {
+    super("OR");
+    this.filters = filters;
+  }
+  toString() {
+    return this.filters.map((filter) => `(${filter.toString()})`).join(" OR ");
+  }
+  serialize() {
+    const values = this.filters.map((f) => f.serialize()).filter(notNull);
+    return ["OR", null, ...values];
+  }
+  isEmpty() {
+    return this.filters.length === 0 || !this.filters.find((child) => !child.isEmpty());
+  }
+}
+class NotFilter extends AbstractFilter {
+  filter;
+  constructor(filter) {
+    super("NOT");
+    this.filter = filter;
+  }
+  toString() {
+    return `NOT(${this.filter.toString()})`;
+  }
+  serialize() {
+    return ["NT", this.filter.serialize()];
+  }
+  isEmpty() {
+    return this.filter.isEmpty();
+  }
+}
+class InFilter extends AbstractFilter {
+  names;
+  values;
+  ignoreCase;
+  constructor(names, values, ignoreCase) {
+    super("IN");
+    this.names = names;
+    this.values = values;
+    this.ignoreCase = ignoreCase;
+  }
+  toString() {
+    const names = this.names.join(",");
+    const values = this.values.join(",");
+    return `${names} IN (${values})`;
+  }
+  serialize() {
+    if (this.names.length === 1) {
+      return ["IN", this.names, ...this.values];
+    } else if (this.names.length > 1) {
+      const filters = this.names.map((name) => inFilter([name], this.values, this.ignoreCase));
+      return orFilter(filters).serialize();
+    }
+  }
+  getFilterValueString() {
+    return this.values.map((value) => String(value));
+  }
+  isEmpty() {
+    return this.names.length === 0 || this.values.length === 0;
+  }
+}
+class LikeFilter extends AbstractFilter {
+  names;
+  value;
+  prefix;
+  suffix;
+  ignoreCase;
+  constructor(names, value, prefix, suffix, ignoreCase = true) {
+    super("LIKE");
+    this.names = names;
+    this.value = value;
+    this.prefix = prefix;
+    this.suffix = suffix;
+    this.ignoreCase = ignoreCase;
+  }
+  toString() {
+    const names = this.names.join(",");
+    return `${names} LIKE ${this.value}`;
+  }
+  serialize() {
+    if (this.names.length === 1) {
+      const result = ["LI", this.names[0], this.value, this.prefix ? 1 : 0, this.suffix ? 1 : 0];
+      if (!this.ignoreCase)
+        result.push(0);
+      return result;
+    } else if (this.names.length > 1) {
+      const filters = this.names.map((name) => likeFilter([name], this.value, this.prefix, this.suffix, this.ignoreCase));
+      return orFilter(filters).serialize();
+    }
+  }
+  getFilterValueString() {
+    return this.value;
+  }
+  isEmpty() {
+    return this.names.length === 0 || !this.value;
+  }
+}
+class EqualFilter extends AbstractFilter {
+  names;
+  value;
+  ignoreCase;
+  constructor(names, value, ignoreCase) {
+    super("EQ");
+    this.names = names;
+    this.value = value;
+    this.ignoreCase = ignoreCase;
+  }
+  toString() {
+    const names = this.names.join(",");
+    return `${names} = ${this.value}`;
+  }
+  serialize() {
+    if (this.names.length === 1) {
+      const result = ["EQ", this.names[0], this.value];
+      if (this.ignoreCase)
+        result.push(1);
+      return result;
+    } else if (this.names.length > 1) {
+      const filters = this.names.map((name) => equalFilter([name], this.value, this.ignoreCase));
+      return orFilter(filters).serialize();
+    }
+  }
+  getFilterValueString() {
+    return String(this.value);
+  }
+  isEmpty() {
+    return this.names.length === 0 || this.value === void 0 || this.value === "";
+  }
+}
+class BetweenFilter extends AbstractFilter {
+  name;
+  fromValue;
+  toValue;
+  constructor(name, fromValue, toValue) {
+    super("BT_V");
+    this.name = name;
+    this.fromValue = fromValue;
+    this.toValue = toValue;
+  }
+  toString() {
+    return `${this.name} BETWEEN ${this.fromValue} AND ${this.toValue}`;
+  }
+  serialize() {
+    return ["BT", this.name, this.fromValue, this.toValue];
+  }
+  isEmpty() {
+    return !this.name || (this.fromValue === void 0 || this.fromValue === "") && (this.toValue === void 0 || this.toValue === "");
+  }
+}
+class BetweenDateFilter extends AbstractFilter {
+  name;
+  fromValue;
+  toValue;
+  constructor(name, fromValue, toValue) {
+    super("BT_D");
+    this.name = name;
+    this.fromValue = fromValue;
+    this.toValue = toValue;
+  }
+  toString() {
+    const from = this.fromValue ? dayjs(this.fromValue).toISOString() : "undefined";
+    const to = this.toValue ? dayjs(this.toValue).toISOString() : "undefined";
+    return `${this.name} BETWEEN ${from} AND ${to}`;
+  }
+  serialize() {
+    const from = this.fromValue ? dayjs(this.fromValue).toISOString() : null;
+    const to = this.toValue ? dayjs(this.toValue).toISOString() : null;
+    return ["BT", this.name, from, to];
+  }
+  isEmpty() {
+    return !this.name || (this.fromValue === void 0 || this.fromValue === "") && (this.toValue === void 0 || this.toValue === "");
+  }
+}
+class IsNullFilter extends AbstractFilter {
+  names;
+  constructor(names) {
+    super("NU");
+    this.names = names;
+  }
+  toString() {
+    const names = this.names.join(",");
+    return `${names} IS NULL`;
+  }
+  serialize() {
+    if (this.names.length === 1) {
+      return ["NU", this.names[0]];
+    } else if (this.names.length > 1) {
+      const filters = this.names.map((name) => isNullFilter([name]));
+      return orFilter(filters).serialize();
+    }
+  }
+  getFilterValueString() {
+    return String();
+  }
+  isEmpty() {
+    return this.names.length === 0;
+  }
+}
+class IsNotNullFilter extends AbstractFilter {
+  names;
+  constructor(names) {
+    super("NN");
+    this.names = names;
+  }
+  toString() {
+    const names = this.names.join(",");
+    return `${names} IS NOT NULL`;
+  }
+  serialize() {
+    if (this.names.length === 1) {
+      return ["NN", this.names[0]];
+    } else if (this.names.length > 1) {
+      const filters = this.names.map((name) => isNotNullFilter([name]));
+      return orFilter(filters).serialize();
+    }
+  }
+  getFilterValueString() {
+    return String();
+  }
+  isEmpty() {
+    return this.names.length === 0;
+  }
+}
+const andFilter = (filters) => {
+  return new AndFilter(filters);
+};
+const orFilter = (filters) => {
+  return new OrFilter(filters);
+};
+const notFilter = (filter) => {
+  return new NotFilter(filter);
+};
+const inFilter = (names, values, ignoreCase) => {
+  return new InFilter(names, values, ignoreCase);
+};
+const likeFilter = (names, value, prefix, suffix, ignoreCase) => {
+  return new LikeFilter(names, value, prefix, suffix, ignoreCase);
+};
+const equalFilter = (names, value, ignoreCase) => {
+  return new EqualFilter(names, value, ignoreCase);
+};
+const betweenFilter = (name, fromValue, toValue) => {
+  return new BetweenFilter(name, fromValue, toValue);
+};
+const betweenDateFilter = (name, fromValue, toValue) => {
+  return new BetweenDateFilter(name, fromValue, toValue);
+};
+const isNullFilter = (names) => {
+  return new IsNullFilter(names);
+};
+const isNotNullFilter = (names) => {
+  return new IsNotNullFilter(names);
+};
+const acceptFilter = (filter, visit) => {
+  const result = visit(filter);
+  if (result === void 0 || result) {
+    if ("filters" in filter) {
+      const children = filter.filters;
+      if (children && Array.isArray(children)) {
+        children.forEach((child) => acceptFilter(child, visit));
+      }
+    }
+  }
+};
+const valueToFilter = (filters) => {
+  return Object.keys(filters).map((filterName) => {
+    const filter = filters[filterName];
+    if (filter instanceof AbstractFilter) {
+      return filter;
+    } else if (["string", "number", "boolean"].includes(typeof filter)) {
+      return equalFilter([filterName], filter);
+    } else if (Array.isArray(filter)) {
+      return inFilter([filterName], filter);
+    } else {
+      if (filter !== void 0)
+        console.warn("Unsupported filter value: " + filter);
+      return void 0;
+    }
+  }).filter(notNull);
+};
+const serializeFilter = (filters) => {
+  if (filters.length === 0)
+    return void 0;
+  else if (filters.length === 1)
+    return JSON.stringify(filters[0].serialize());
+  else
+    return JSON.stringify(andFilter(filters).serialize());
+};
+const serializeSort = (sorts) => {
+  if (sorts && sorts.length > 0) {
+    return sorts.map((sort) => {
+      const dir = sort.ascending ? "" : "-";
+      const propertyId = encodeURIComponent(sort.propertyId);
+      const nulls = sort.nullHandling || "";
+      return `${dir}${propertyId}${nulls ? ` ${nulls}` : ""}`;
+    }).join(",");
+  }
+};
+class SearchParam {
+  offset;
+  limit;
+  gridFilter = {};
+  lookupFilter = [];
+  defaultFilter = [];
+  sorts;
+  toQueryMap() {
+    const filters = [...this.defaultFilter, ...this.lookupFilter, ...valueToFilter(this.gridFilter)];
+    return {
+      filter: serializeFilter(filters),
+      sort: serializeSort(this.sorts),
+      offset: this.offset,
+      limit: this.limit
+    };
+  }
+}
+class PaginatedList {
+  data = [];
+  totalCount = 0;
+  offset = 0;
+  limit = 0;
+  static of(data = [], totalCount = void 0, offset = 0, limit = void 0) {
+    const paginatedList = new PaginatedList();
+    paginatedList.data = data ? data.slice() : [];
+    paginatedList.totalCount = Math.max(0, totalCount || paginatedList.data.length);
+    paginatedList.offset = Math.max(0, offset);
+    paginatedList.limit = Math.max(0, limit || paginatedList.data.length);
+    return paginatedList;
+  }
+  /**
+   * `AxiosResponse` 등의 http response 로부터 `PaginatedList` 를 생성한다.
+   * @param response
+   * @param converter
+   */
+  static fromAxiosResponse(response, converter) {
+    return PaginatedList.fromAxiosHeader(response.headers, response.data, converter);
+  }
+  /**
+   * Axios Header 와 response data 로부터 `PaginatedList` 를 생성한다.
+   * @param headers
+   * @param data
+   * @param converter
+   */
+  static fromAxiosHeader(headers, data, converter) {
+    const actualConverter = converter ? converter : ((item) => item);
+    const convertedData = data && data.length ? data.map((item) => actualConverter(item)) : [];
+    return PaginatedList.of(convertedData, Number(headers["x-total-count"]) || void 0, Number(headers["x-offset"]) || 0, Number(headers["x-limit"] || void 0));
+  }
+  /**
+   * @return 로딩된 데이터가 비어있으면 true
+   */
+  isEmpty() {
+    return this.data.length === 0;
+  }
+}
+const DEFAULT_GRID_COLUMN_WIDTH = 100;
+const nameFilterCreator = (maxIndex = 4) => {
+  return (propertyId, keyword) => {
+    const names = Array.from({ length: Math.max(1, Math.min(maxIndex, 4)) }).map((_, index) => `${propertyId}.name${index + 1}`);
+    return [likeFilter(names, keyword)];
+  };
+};
+class EditingRows {
+  keyProvider;
+  rows = [];
+  constructor(keyProvider) {
+    this.keyProvider = keyProvider;
+  }
+  addEditingRow(row) {
+    this.rows.push(row);
+  }
+  addRow(row) {
+    this.rows.push({ row });
+  }
+  rowEquals(a, b) {
+    return a === b || !!(this.keyProvider && this.keyProvider(a) === this.keyProvider(b));
+  }
+  removeRow(row) {
+    const index = this.rows.findIndex((editing) => this.rowEquals(editing.row, row));
+    if (index >= 0)
+      this.rows.splice(index, 1);
+  }
+  clear() {
+    this.rows.splice(0, this.rows.length);
+  }
+  getEditingRow(row) {
+    return this.rows.find((editing) => this.rowEquals(editing.row, row));
+  }
+  isEditingRow(row) {
+    return !!this.getEditingRow(row);
+  }
+  getRows() {
+    return this.rows;
+  }
+  getModifiedRows() {
+    return this.rows.filter((row) => row.savePoint?.isModified());
+  }
+}
+const createPageGridHandler = (option) => {
+  const handler = option.editable ? new EditablePageGridHandlerImpl(option) : new PageGridHandlerImpl(option);
+  handler.loadPreference();
+  return handler;
+};
+class PageGridHandlerImpl {
+  option;
+  searchParam = markRaw(new SearchParam());
+  selectDeleteSupport;
+  grid;
+  gridEventListener;
+  control;
+  controlEventListener;
+  lookup;
+  lookupEventListener;
+  preferenceLoader;
+  constructor(option) {
+    this.option = markRaw(option);
+    this.searchParam.offset = 0;
+    this.searchParam.limit = option.limit || option.limitItems?.[0] || 100;
+    this.searchParam.defaultFilter = option.defaultFilter || [];
+    this.searchParam.sorts = [...option.defaultSorts || []];
+    this.grid = reactive({
+      gridId: option.gridId,
+      pageInfo: {
+        offset: 0,
+        limit: this.searchParam.limit,
+        totalCount: 0
+      },
+      sorts: this.searchParam.sorts,
+      data: [],
+      loading: false,
+      keyProvider: (row) => option.getRowKey(row),
+      editable: false
+    });
+    if (option.isRowSelectable) {
+      this.grid.rowSelectPolicy = (row) => option.isRowSelectable?.(row) || false;
+    }
+    this.gridEventListener = {
+      "offsetChanged": async (offset, _pageInfo) => {
+        this.searchParam.offset = offset;
+        await this.loadGridData();
+      },
+      "update:sorts": async (sorts) => {
+        if (this.option.defaultSorts && this.option.defaultSorts.length > 0) {
+          this.searchParam.sorts = [...sorts, ...this.option.defaultSorts];
+        }
+        await this.loadGridData(0);
+      },
+      settingChanged: async (columnSettings, fixedColumnCount) => {
+        await gridColumnSettingChanged(this.grid, this.control, option.gridId, columnSettings, fixedColumnCount);
+      }
+    };
+    this.control = reactive({
+      gridId: option.gridId,
+      limit: this.searchParam.limit,
+      limitItems: option.limitItems || [100, 300, 500],
+      totalCount: 0
+    });
+    this.controlEventListener = {
+      "update:limit": async (limit) => {
+        this.searchParam.limit = limit;
+        if (this.grid.pageInfo)
+          this.grid.pageInfo.limit = limit;
+        await this.loadGridData(0);
+      },
+      refresh: async () => {
+        await this.loadGridData();
+      },
+      clearFilter: async () => {
+        this.searchParam.gridFilter = {};
+        await this.loadGridData(0);
+      },
+      settingChanged: (columnSettings, fixedColumnCount) => {
+        gridColumnSettingChanged(this.grid, this.control, option.gridId, columnSettings, fixedColumnCount);
+      }
+    };
+    this.lookup = reactive({
+      gridId: option.gridId,
+      modelValue: []
+    });
+    this.lookupEventListener = {
+      "update:modelValue": (filters) => {
+        this.lookup.modelValue = this.searchParam.lookupFilter = filters;
+      },
+      search: async () => {
+        this.searchParam.gridFilter = {};
+        await this.loadGridData(0);
+      }
+    };
+    this.selectDeleteSupport = new GridHandlerSelectDeleteSupport(this.grid, this.control, this.controlEventListener, option.removeRowHandler, () => this.updateCounts());
+  }
+  get preferenceLoaded() {
+    return this.preferenceLoader?.preferenceLoaded.value ?? true;
+  }
+  getSelectedRows() {
+    return this.selectDeleteSupport.selectedRows;
+  }
+  getEditingRows() {
+    return this.grid.editingRows;
+  }
+  getAddedRows() {
+    return [];
+  }
+  getModifiedRows() {
+    return [];
+  }
+  getDeletedRows() {
+    return this.selectDeleteSupport.deletedRows;
+  }
+  isAddedRow(_row) {
+    return false;
+  }
+  addNewRow(_newRow) {
+    return -1;
+  }
+  isGridModified() {
+    return this.getAddedRows().length > 0 || this.getModifiedRows().length > 0 || this.getDeletedRows().length > 0;
+  }
+  /**
+   *
+   * @param offset
+   */
+  async loadGridData(offset) {
+    await this.preferenceLoader?.waitForLoaded();
+    this.grid.loading = true;
+    if (offset !== void 0)
+      this.searchParam.offset = offset;
+    const result = await this.option.getGridData(this.searchParam);
+    this.doSetSearchResult(result);
+    this.grid.loading = false;
+  }
+  loadPreference() {
+    if (this.option.gridId) {
+      this.preferenceLoader = new GridPreferenceLoader(this.option.gridId, this);
+      this.preferenceLoader.loadGridPreference();
+    }
+  }
+  doSetSearchResult(result) {
+    this.selectDeleteSupport.clear();
+    if (this.grid.pageInfo)
+      this.grid.pageInfo.offset = result.offset;
+    if (this.grid.pageInfo)
+      this.grid.pageInfo.totalCount = result.totalCount;
+    this.grid.data = result.data;
+    this.control.totalCount = result.totalCount;
+  }
+  updateCounts() {
+    this.control.totalCount = this.grid.data.length;
+  }
+}
+class EditablePageGridHandlerImpl extends PageGridHandlerImpl {
+  editableSupport;
+  constructor(option) {
+    super(option);
+    this.grid.rowEditPolicy = option.isRowEditable;
+    this.editableSupport = new GridHandlerEditableSupport(this.grid, this.gridEventListener, this.controlEventListener, option.getRowKey, option.newRowCreator, option.addRowToLast, () => this.updateCounts());
+    this.selectDeleteSupport.isAddedRow = (row) => this.editableSupport.isAddedRow(row);
+    this.selectDeleteSupport.removeIfAddedRow = (row) => this.editableSupport.removeIfAddedRow(row);
+  }
+  getModifiedRows() {
+    return this.editableSupport.getModifiedRows();
+  }
+  getAddedRows() {
+    return this.editableSupport.getAddedRows();
+  }
+  isAddedRow(row) {
+    return this.editableSupport.isAddedRow(row);
+  }
+  addNewRow(newRow) {
+    return this.editableSupport.addNewRow(newRow);
+  }
+  doSetSearchResult(result) {
+    super.doSetSearchResult(result);
+    this.editableSupport.clearAddedRows();
+  }
+}
+const createInputGridHandler = (option) => {
+  const handler = option.editable ? new EditableInputGridHandlerImpl(option) : new InputGridHandlerImpl(option);
+  handler.loadPreference();
+  return handler;
+};
+class InputGridHandlerImpl {
+  option;
+  selectDeleteSupport;
+  grid;
+  gridEventListener;
+  control;
+  controlEventListener;
+  gridFilter = reactive({});
+  preferenceLoader;
+  constructor(option) {
+    this.option = markRaw(option);
+    this.grid = reactive({
+      gridId: option.gridId,
+      data: [],
+      keyProvider: (row) => option.getRowKey(row),
+      editable: false,
+      rowDisplayPolicy: (row) => this.applyGridFilter(row)
+    });
+    if (option.isRowSelectable) {
+      this.grid.rowSelectPolicy = (row) => option.isRowSelectable?.(row) || false;
+    }
+    this.gridEventListener = {
+      settingChanged: async (columnSettings, fixedColumnCount) => {
+        await gridColumnSettingChanged(this.grid, this.control, option.gridId, columnSettings, fixedColumnCount);
+      }
+    };
+    this.control = reactive({
+      gridId: option.gridId,
+      totalCount: 0
+    });
+    this.controlEventListener = {
+      clearFilter: () => {
+        Object.keys(this.gridFilter).forEach((key) => delete this.gridFilter[key]);
+      },
+      settingChanged: async (columnSettings, fixedColumnCount) => {
+        await gridColumnSettingChanged(this.grid, this.control, option.gridId, columnSettings, fixedColumnCount);
+      }
+    };
+    this.selectDeleteSupport = new GridHandlerSelectDeleteSupport(this.grid, this.control, this.controlEventListener, option.removeRowHandler, () => this.updateCounts());
+  }
+  get preferenceLoaded() {
+    return this.preferenceLoader?.preferenceLoaded.value ?? true;
+  }
+  setGridData(data) {
+    this.grid.loading = data === void 0;
+    this.grid.data = data ?? [];
+    this.control.totalCount = data?.length ?? 0;
+    this.selectDeleteSupport.clear();
+  }
+  getSelectedRows() {
+    return this.selectDeleteSupport.selectedRows;
+  }
+  getEditingRows() {
+    return this.grid.editingRows;
+  }
+  getDeletedRows() {
+    return this.selectDeleteSupport.deletedRows;
+  }
+  getAddedRows() {
+    return [];
+  }
+  getModifiedRows() {
+    return [];
+  }
+  isAddedRow(_row) {
+    return false;
+  }
+  addNewRow(_newRow) {
+    return -1;
+  }
+  isGridModified() {
+    return this.getAddedRows().length > 0 || this.getModifiedRows().length > 0 || this.getDeletedRows().length > 0;
+  }
+  loadPreference() {
+    if (this.option.gridId) {
+      this.preferenceLoader = new GridPreferenceLoader(this.option.gridId, this);
+      this.preferenceLoader.loadGridPreference();
+    }
+  }
+  updateCounts() {
+    this.control.totalCount = this.grid.data.length;
+  }
+  applyGridFilter(row) {
+    const mismatch = Object.keys(this.gridFilter).filter((key) => this.gridFilter[key] !== void 0).find((key) => {
+      const filter = this.gridFilter[key];
+      if (typeof filter === "function") {
+        return !filter(row);
+      } else if (Array.isArray(filter)) {
+        return filter.length > 0 && !filter.find((item) => row[key] === item);
+      } else {
+        return row[key] !== filter;
+      }
+    });
+    return !mismatch;
+  }
+}
+class EditableInputGridHandlerImpl extends InputGridHandlerImpl {
+  editableSupport;
+  constructor(option) {
+    super(option);
+    this.grid.rowEditPolicy = option.isRowEditable;
+    this.editableSupport = new GridHandlerEditableSupport(this.grid, this.gridEventListener, this.controlEventListener, option.getRowKey, option.newRowCreator, option.addRowToLast, () => this.updateCounts());
+    this.selectDeleteSupport.isAddedRow = (row) => this.editableSupport.isAddedRow(row);
+    this.selectDeleteSupport.removeIfAddedRow = (row) => this.editableSupport.removeIfAddedRow(row);
+  }
+  setGridData(data) {
+    GridHandlerEditableSupport.cleanUpData(data);
+    super.setGridData(data);
+    this.editableSupport.clearAddedRows();
+  }
+  getModifiedRows() {
+    return this.editableSupport.getModifiedRows();
+  }
+  getAddedRows() {
+    return this.editableSupport.getAddedRows();
+  }
+  isAddedRow(row) {
+    return this.editableSupport.isAddedRow(row);
+  }
+  addNewRow(newRow) {
+    return this.editableSupport.addNewRow(newRow);
+  }
+}
+class GridHandlerSelectDeleteSupport {
+  grid;
+  control;
+  controlEventListener;
+  removeRowHandler;
+  listener;
+  selectedRows = reactive(/* @__PURE__ */ new Set());
+  deletedRows = [];
+  isAddedRow;
+  removeIfAddedRow;
+  constructor(grid, control, controlEventListener, removeRowHandler, listener) {
+    this.grid = grid;
+    this.control = control;
+    this.controlEventListener = controlEventListener;
+    this.removeRowHandler = removeRowHandler;
+    this.listener = listener;
+    grid.selectedRows = this.selectedRows;
+    control.selectedRows = this.selectedRows;
+    controlEventListener["clickRemove"] = () => this.removeSelectedRows();
+  }
+  removeSelectedRows() {
+    if (this.selectedRows.size > 0) {
+      if (!this.removeRowHandler || !this.removeRowHandler(this.selectedRows)) {
+        const keyProvider = this.grid.keyProvider;
+        this.selectedRows.forEach((row) => {
+          const index = this.grid.data.findIndex((item) => keyProvider(item) === keyProvider(row));
+          if (index >= 0) {
+            const item = this.grid.data[index];
+            this.grid.editingRows?.removeRow(item);
+            if (this.isAddedRow?.(item))
+              this.removeIfAddedRow?.(item);
+            else {
+              const deleted = this.grid.data.splice(index, 1);
+              this.deletedRows.push(deleted[0]);
+            }
+          }
+        });
+        this.selectedRows.clear();
+        this.listener?.("selectedRowsChanged");
+      }
+    }
+  }
+  clear() {
+    this.selectedRows.clear();
+    this.listener?.("selectedRowsChanged");
+    this.deletedRows.splice(0, this.deletedRows.length);
+  }
+}
+let lastAddedRowIndex = 0;
+const GRID_NEW_ROW_KEY = "_new_row_key_";
+class GridHandlerEditableSupport {
+  grid;
+  gridEventListener;
+  controlEventListener;
+  newRowCreator;
+  addRowToLast;
+  listener;
+  addedRows = [];
+  constructor(grid, gridEventListener, controlEventListener, getRowKey, newRowCreator, addRowToLast, listener) {
+    this.grid = grid;
+    this.gridEventListener = gridEventListener;
+    this.controlEventListener = controlEventListener;
+    this.newRowCreator = newRowCreator;
+    this.addRowToLast = addRowToLast;
+    this.listener = listener;
+    grid.editable = true;
+    const keyProvider = (row) => {
+      const key = this.getNewRowKey(row);
+      return key ? key : getRowKey(row);
+    };
+    grid.keyProvider = keyProvider;
+    grid.editingRows = reactive(new EditingRows(keyProvider));
+    gridEventListener.changeEditingRow = (row, editing) => {
+      if (!editing) {
+        this.removeIfAddedRow(row);
+      }
+    };
+    controlEventListener.clickAdd = () => this.createAndAddNewRow();
+  }
+  static cleanUpData(data) {
+    data?.forEach((row) => {
+      if (row && row[GRID_NEW_ROW_KEY])
+        delete row[GRID_NEW_ROW_KEY];
+    });
+  }
+  getModifiedRows() {
+    const addedKeys = this.addedRows.map((row) => row[GRID_NEW_ROW_KEY]);
+    return this.grid.editingRows?.getModifiedRows().map((editing) => editing.row).filter((row) => !addedKeys.includes(row[GRID_NEW_ROW_KEY])) || [];
+  }
+  getAddedRows() {
+    return this.addedRows;
+  }
+  clearAddedRows() {
+    this.addedRows.splice(0, this.addedRows.length);
+  }
+  isAddedRow(row) {
+    return !!this.getNewRowKey(row);
+  }
+  getNewRowKey(row) {
+    return row[GRID_NEW_ROW_KEY];
+  }
+  setNewRowKey(row) {
+    row[GRID_NEW_ROW_KEY] = `_ADDED_${++lastAddedRowIndex}`;
+  }
+  removeIfAddedRow(row) {
+    if (this.isAddedRow(row)) {
+      const keyProvider = this.grid.keyProvider;
+      const index = this.grid.data.findIndex((item) => keyProvider(item) === keyProvider(row));
+      if (index >= 0)
+        this.grid.data.splice(index, 1);
+      const rowIndex = this.addedRows.findIndex((item) => keyProvider(item) === keyProvider(row));
+      if (rowIndex >= 0)
+        this.addedRows.splice(rowIndex, 1);
+      this.listener?.("rowRemoved");
+      return true;
+    } else {
+      return false;
+    }
+  }
+  addNewRow(newRow) {
+    this.setNewRowKey(newRow);
+    this.appendAddedRow(newRow);
+    let index = 0;
+    if (this.addRowToLast) {
+      this.grid.data.push(newRow);
+      index = this.grid.data.length;
+    } else {
+      this.grid.data.unshift(newRow);
+      index = 0;
+    }
+    this.listener?.("rowAdded");
+    return index;
+  }
+  appendAddedRow(row) {
+    this.addedRows.push(row);
+    this.grid.editingRows?.addRow(row);
+  }
+  createAndAddNewRow() {
+    if (this.newRowCreator) {
+      const newRow = this.newRowCreator();
+      if (newRow)
+        this.addNewRow(newRow);
+    } else {
+      console.error("newRowCreator is missing.");
+    }
+  }
+}
+const gridColumnSettingChanged = async (grid, control, gridId, columnSettings, fixedColumnCount) => {
+  if (grid) {
+    grid.columnSettings = columnSettings;
+    grid.fixedColumnCount = fixedColumnCount;
+  }
+  if (control) {
+    control.columnSettings = columnSettings;
+    control.fixedColumnCount = fixedColumnCount;
+  }
+  await storeGridColumnSettingPreference();
+};
+class GridPreferenceLoader {
+  gridId;
+  handler;
+  preferenceLoaded = ref(true);
+  loadPromise = void 0;
+  constructor(gridId, handler) {
+    this.gridId = gridId;
+    this.handler = handler;
+  }
+  async loadGridPreference() {
+    console.log(this.gridId, this.handler);
+  }
+  async waitForLoaded() {
+    if (this.loadPromise)
+      await Promise.any([this.loadPromise, waitDuring(1e3)]);
+  }
+}
+class LocalStorageGridPreferenceStore {
+  async storePreference(gridId, preference) {
+    localStorage.setItem(`bs-pref-${gridId}`, JSON.stringify(preference));
+  }
+  async loadPreference(gridId) {
+    const json = localStorage.getItem(`bs-pref-${gridId}`);
+    return json ? JSON.parse(json) : void 0;
+  }
+  async removePreference(gridId) {
+    localStorage.removeItem(`bs-pref-${gridId}`);
+  }
+}
+const storeGridColumnSettingPreference = async (_gridId, _columnSettings, _fixedColumnCount) => {
+};
+const getCellText = (cell) => {
+  return cell?.textContent?.trim() || "";
+};
+const mergeSameValueVertical = (propertyIds, table) => {
+  if (table) {
+    propertyIds.forEach((propertyId) => {
+      const cells = table.querySelectorAll(`tbody tr > td[data-property-id="${propertyId}"]`);
+      for (let idx = 0; idx < cells.length; idx++) {
+        const value = getCellText(cells[idx]);
+        if (!value)
+          continue;
+        let count = 0;
+        for (let idxNext = idx + 1; idxNext < cells.length; idxNext++) {
+          const next = getCellText(cells[idxNext]);
+          if (!next || next !== value)
+            break;
+          count++;
+        }
+        if (count > 0) {
+          const cell = cells[idx];
+          cell.setAttribute("rowspan", `${count + 1}`);
+          cell.classList.add("bs-grid-merged-cell");
+          for (let hide = idx + 1; hide < idx + count + 1; hide++) {
+            cells[hide].style.display = "none";
+          }
+        }
+        idx += count;
+      }
+    });
+  }
+};
+const defaultCellFormatter = (column, value) => {
+  if (column.cellType === "NUMBER") {
+    return formatUtil.formatNumber(Number(value));
+  } else if (column.cellType === "PERCENTAGE") {
+    return formatUtil.formatPercent(Number(value));
+  } else {
+    return value;
+  }
+};
+const setFixedCellLeftStyle = async (table) => {
+  if (table) {
+    await nextTick();
+    const header = table.querySelector("tr.header-row");
+    if (header) {
+      const widths = [];
+      const headerCells = header.querySelectorAll("th.fixed");
+      headerCells.forEach((th) => {
+        const width = th.getBoundingClientRect().width;
+        widths.push(Math.floor(width));
+      });
+      let acc = 0;
+      for (let idx = 0; idx < widths.length; ++idx) {
+        widths[idx] = acc += widths[idx];
+      }
+      widths.unshift(0);
+      headerCells.forEach((th, idx) => th.style.left = `${widths[idx]}px`);
+      table.querySelectorAll("tr.data-row").forEach((tr) => {
+        tr.querySelectorAll("td.fixed").forEach((td, idx) => td.style.left = `${widths[idx]}px`);
+      });
+      header.querySelectorAll("th:not(.fixed)").forEach((th) => th.style.left = "auto");
+    }
+  }
+};
+const styleCssToObject = (style) => {
+  const result = {};
+  style?.split(";").forEach((item) => {
+    const [key, value] = item.split(":");
+    if (key && value)
+      result[key.trim()] = value.trim();
+  });
+  return result;
+};
+const styleClassToObject = (style) => {
+  const result = {};
+  style?.split(/\s/).filter((item) => item).forEach((item) => {
+    result[item] = true;
+  });
+  return result;
+};
+const filterSlotName = (column) => {
+  return `${column.propertyId}Filter`;
+};
+const editComponentSlotName = (column) => {
+  return `${column.propertyId}Edit`;
+};
+const mergeColumnSettings = (columns, settings) => {
+  const newSettings = settings.filter((col) => columns.find((baseCol) => baseCol.propertyId === col.propertyId));
+  const added = columns.filter((baseCol) => !newSettings.find((col) => col.propertyId === baseCol.propertyId));
+  added.forEach((addedCol) => {
+    const addedColSetting = {
+      propertyId: addedCol.propertyId,
+      width: addedCol.width
+    };
+    const index = columns.findIndex((col) => col.propertyId === addedCol.propertyId);
+    if (index === 0) {
+      newSettings.splice(0, 0, addedColSetting);
+    } else if (index > 0) {
+      const prev = columns[index - 1];
+      const prevIndex = newSettings.findIndex((col) => col.propertyId === prev.propertyId);
+      if (prevIndex >= 0) {
+        newSettings.splice(prevIndex + 1, 0, addedColSetting);
+      } else {
+        newSettings.push(addedColSetting);
+      }
+    } else {
+      newSettings.push(addedColSetting);
+    }
+  });
+  return newSettings;
+};
+const COLUMN_MIN_WIDTH = 24;
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "BSGridHeaderCellResizeHandle",
+  props: {
+    column: {}
+  },
+  emits: ["columnResized"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    let startPosition = void 0;
+    let deltaX = ref(0);
+    let startWidth = 0;
+    const resizeGuideHeight = ref();
+    const startResize = (event) => {
+      const target = event.target;
+      target.setPointerCapture(event.pointerId);
+      startWidth = props.column.render.width;
+      startPosition = { x: event.clientX };
+      resizeGuideHeight.value = `${getTableWrapHeight() || 30}px`;
+      window.addEventListener("pointerup", endResize);
+    };
+    const doResize = (event) => {
+      if (startPosition) {
+        const min = COLUMN_MIN_WIDTH - startWidth;
+        deltaX.value = Math.max(min, event.clientX - startPosition.x);
+      }
+    };
+    const endResize = (event) => {
+      if (startPosition) {
+        const target = event.target;
+        target.releasePointerCapture(event.pointerId);
+        const newWidth = startWidth + (event.clientX - startPosition.x);
+        const normalized = Math.max(COLUMN_MIN_WIDTH, Math.ceil(newWidth));
+        if (props.column.render.width !== normalized) {
+          props.column.render.width = normalized;
+        }
+        startPosition = void 0;
+        deltaX.value = 0;
+        emit("columnResized", props.column);
+      }
+      window.removeEventListener("pointerup", endResize);
+    };
+    const resizeHandle = ref();
+    const getTableWrapHeight = () => {
+      if (resizeHandle.value) {
+        let el = resizeHandle.value;
+        while (el && !el.classList.contains("table-wrap")) {
+          el = el.parentElement;
+        }
+        if (el) return el.offsetHeight;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "resizeHandle",
+        ref: resizeHandle,
+        class: "resize-handle",
+        onPointerdown: startResize,
+        onPointermove: doResize,
+        onPointerup: endResize
+      }, [
+        withDirectives(createElementVNode("div", {
+          style: normalizeStyle({ transform: `translateX(${unref(deltaX)}px)`, height: resizeGuideHeight.value }),
+          class: "resize-guide"
+        }, null, 4), [
+          [vShow, unref(startPosition)]
+        ])
+      ], 544);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  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_3$4 = ["textContent"];
+const _hoisted_4$4 = ["textContent"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "BSGridHeaderCell",
+  props: {
+    column: {},
+    columns: {},
+    sorts: {},
+    gridId: {},
+    extensionHandler: {}
+  },
+  emits: ["sort", "columnResized", "toggleColumnFixed", "hideColumn", "restoreAllColumnSettings"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const thStyleCss = computed(() => {
+      return {
+        minWidth: `${props.column.render.width}px`,
+        maxWidth: `${props.column.render.width}px`
+        // left 는 BSGrid 의 onMounted 에서 설정함
+      };
+    });
+    const styleCss = computed(() => {
+      return styleCssToObject(props.column.headerCellStyleCss);
+    });
+    const styleClass = computed(() => {
+      return styleClassToObject(props.column.headerCellStyleClass);
+    });
+    const ascending = computed(() => {
+      const sortPropertyId = props.column.sortPropertyId || props.column.propertyId;
+      const sort2 = props.sorts?.find((sort3) => sort3.propertyId === sortPropertyId);
+      return sort2 ? sort2.ascending : void 0;
+    });
+    const sort = () => emit("sort", props.column, !ascending.value);
+    const columnResized = (column) => emit("columnResized", column);
+    const slots = useSlots();
+    const hasFilter = computed(() => !!slots.filter);
+    const contextMenu = useContextMenu();
+    const showContextMenu = (event) => {
+      const menus = [
+        {
+          type: "menu",
+          caption: "Fixed",
+          handler: () => emit("toggleColumnFixed", props.column.propertyId)
+        },
+        {
+          type: "menu",
+          caption: "Hide Column",
+          handler: () => emit("hideColumn", props.column.propertyId)
+        },
+        { type: "separator" },
+        {
+          type: "menu",
+          caption: "Restore All",
+          handler: () => emit("restoreAllColumnSettings")
+        }
+      ];
+      const param = {
+        type: "HeaderCell",
+        column: props.column
+      };
+      const extMenus = props.extensionHandler?.handleExtendsContextMenu(
+        event,
+        param
+      );
+      if (extMenus) {
+        menus.push({ type: "separator" });
+        menus.push(...extMenus);
+      }
+      contextMenu.showContextMenu(event, menus);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("th", {
+        class: normalizeClass({ fixed: __props.column.render.fixed, "has-filter": hasFilter.value }),
+        "data-property-id": __props.column.propertyId,
+        style: normalizeStyle(thStyleCss.value),
+        onContextmenu: withModifiers(showContextMenu, ["prevent", "stop"])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([styleClass.value, "position-relative"]),
+          style: normalizeStyle(styleCss.value)
+        }, [
+          createElementVNode("div", _hoisted_2$8, [
+            createElementVNode("span", {
+              textContent: toDisplayString(__props.column.caption),
+              class: "grow text-truncate"
+            }, null, 8, _hoisted_3$4),
+            __props.column.sortable ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              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)
+          ]),
+          renderSlot(_ctx.$slots, "filter", {}, void 0, true),
+          createVNode(BSGridHeaderCellResizeHandle, {
+            column: __props.column,
+            onColumnResized: columnResized
+          }, null, 8, ["column"])
+        ], 6)
+      ], 46, _hoisted_1$d);
+    };
+  }
+});
+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 _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "BSGridHeaderCellCheckbox",
+  props: {
+    selectedRowCount: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const checked = computed(() => props.selectedRowCount > 0);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("th", {
+        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)
+        ])
+      ], 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 _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "BSGridCell",
+  props: {
+    column: {},
+    columns: {},
+    row: {},
+    editing: { type: Boolean },
+    selectOnClick: { type: Boolean },
+    disableSelection: { type: Boolean }
+  },
+  emits: ["toggleSelection"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const tdStyleCss = computed(() => {
+      return {
+        minWidth: `${props.column.render.width}px`,
+        maxWidth: `${props.column.render.width}px`
+        // left 는 BSGrid 의 onMounted 에서 설정함
+      };
+    });
+    const tdStyleClass = computed(() => {
+      return {
+        fixed: props.column.render.fixed,
+        "text-right": ["NUMBER", "MONEY", "PERCENTAGE"].includes(
+          props.column.cellType || ""
+        ),
+        editing: props.editing && slots[`${props.column.templateId}Edit`],
+        "cursor-pointer": props.selectOnClick
+      };
+    });
+    const cellValue = computed(() => {
+      const properties = props.column.propertyId.split(".");
+      let value = props.row;
+      for (let index = 0; index < properties.length; ++index) {
+        if (!value || typeof value !== "object" || !(properties[index] in value)) {
+          return "";
+        }
+        value = value[properties[index]];
+      }
+      return value ?? "";
+    });
+    const formattedCellValue = computed(() => {
+      return defaultCellFormatter(props.column, cellValue.value);
+    });
+    const clickTd = () => {
+      if (props.selectOnClick && !props.disableSelection) {
+        emit("toggleSelection", props.column);
+      }
+    };
+    const cellDiv = ref();
+    const tooltipText = ref();
+    watch(
+      () => props.column.render.width,
+      async () => {
+        await nextTick();
+        if (!props.editing && cellDiv.value && cellDiv.value.scrollWidth > cellDiv.value.clientWidth) {
+          if (props.column.tooltipProvider) {
+            tooltipText.value = props.column.tooltipProvider(props.row);
+          } else {
+            tooltipText.value = cellDiv.value.innerText;
+          }
+        } else {
+          tooltipText.value = void 0;
+        }
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("td", {
+        class: normalizeClass(tdStyleClass.value),
+        "data-property-id": __props.column.propertyId,
+        style: normalizeStyle(tdStyleCss.value),
+        onClick: clickTd
+      }, [
+        withDirectives((openBlock(), createElementBlock("div", {
+          ref_key: "cellDiv",
+          ref: cellDiv,
+          class: normalizeClass([__props.column.cellStyleClass, "text-nowrap text-ellipsis"]),
+          style: normalizeStyle(__props.column.cellStyleCss)
+        }, [
+          __props.editing ? renderSlot(_ctx.$slots, `${__props.column.templateId}Edit`, {
+            key: 0,
+            cell: cellValue.value,
+            propertyId: __props.column.propertyId,
+            row: __props.row
+          }, () => [
+            renderSlot(_ctx.$slots, __props.column.templateId, {
+              cell: cellValue.value,
+              propertyId: __props.column.propertyId,
+              row: __props.row
+            }, () => [
+              createTextVNode(toDisplayString(formattedCellValue.value), 1)
+            ])
+          ]) : renderSlot(_ctx.$slots, __props.column.templateId, {
+            key: 1,
+            cell: cellValue.value,
+            propertyId: __props.column.propertyId,
+            row: __props.row
+          }, () => [
+            createTextVNode(toDisplayString(formattedCellValue.value), 1)
+          ])
+        ], 6)), [
+          [unref(vTooltip), { content: tooltipText.value }]
+        ])
+      ], 14, _hoisted_1$a);
+    };
+  }
+});
+const _hoisted_1$9 = { class: "fixed func-cell serial-no" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "BSGridCellSerialNo",
+  props: {
+    serialNo: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("td", _hoisted_1$9, [
+        createElementVNode("div", null, toDisplayString(__props.serialNo), 1)
+      ]);
+    };
+  }
+});
+const _hoisted_1$8 = { class: "font-icon" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "BSGridCellCheckbox",
+  props: {
+    checked: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const toggleCheckbox = () => {
+      if (!props.disabled) emit("click");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("td", {
+        class: normalizeClass([{ checked: __props.checked, disabled: __props.disabled }, "fixed func-cell"]),
+        onClick: toggleCheckbox
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([{ "bs-clickable": !__props.disabled }, "checkbox"])
+        }, [
+          createElementVNode("div", _hoisted_1$8, toDisplayString(__props.checked ? "check_box" : "check_box_outline_blank"), 1)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const BSGridCellCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-0211159f"]]);
+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: {
+    isEditing: { type: Boolean },
+    showEditIcon: { type: Boolean }
+  },
+  emits: ["toggleEditMode"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("td", _hoisted_1$7, [
+        __props.showEditIcon ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("toggleEditMode"), ["stop"]))
+        }, [
+          createElementVNode("span", _hoisted_2$6, toDisplayString(__props.isEditing ? "replay" : "stylus"), 1)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+let dndContext;
+const vDragSupport = {
+  mounted: (el, binding) => {
+    const draggable = binding.value.draggable;
+    const sourceElement = binding.value.sourceProvider ? binding.value.sourceProvider(el) : el;
+    const keyProvider = binding.value.keyProvider;
+    const sourceType = binding.value.sourceType;
+    const dropEffect = binding.value.dropEffect || "move";
+    if (draggable) {
+      el.draggable = true;
+      el.ondragstart = (event) => {
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = dropEffect;
+          event.dataTransfer.setDragImage(sourceElement, 0, 0);
+        }
+        dndContext = {
+          sourceElement,
+          key: keyProvider?.(sourceElement),
+          sourceType
+        };
+        event.stopPropagation();
+      };
+      el.ondragend = () => {
+        if (dndContext) {
+          dndContext.dropPosition?.remove();
+          dndContext = void 0;
+        }
+      };
+    }
+  }
+};
+const vDropSupport = {
+  mounted: (el, binding) => {
+    const droppable = binding.value.droppable;
+    const isDroppable = binding.value.isDroppable;
+    const createDropPosition = binding.value.createDropPosition || defaultCreateDropPosition;
+    const locateDropPosition = binding.value.locateDropPosition || defaultLocateDropPosition;
+    const dropHandler = binding.value.dropHandler;
+    const direction = binding.value.direction || "vertical";
+    if (droppable) {
+      el.ondragover = (event) => {
+        if (dndContext) {
+          const target = event.currentTarget;
+          if (!isDroppable || isDroppable(dndContext, target)) {
+            const beforeOrAfter = direction === "horizontal" ? checkLeftOrRight(target, event) : checkUpOrDown(target, event);
+            if (!dndContext.dropPosition) {
+              dndContext.dropPosition = createDropPosition(dndContext, target, direction);
+            }
+            locateDropPosition(dndContext, target, dndContext.dropPosition, beforeOrAfter, direction);
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        }
+      };
+      el.ondragleave = (event) => {
+        const target = event.currentTarget;
+        if (dndContext && dndContext.dropPosition && !componentUtil.isCursorInElement(event, target) && !componentUtil.isCursorInElement(event, dndContext.dropPosition)) {
+          dndContext.dropPosition.remove();
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      };
+      el.ondrop = (event) => {
+        if (dndContext) {
+          const target = event.currentTarget;
+          if (!isDroppable || isDroppable(dndContext, target)) {
+            const beforeOrAfter = direction === "horizontal" ? checkLeftOrRight(target, event) : checkUpOrDown(target, event);
+            dropHandler?.(dndContext, target, beforeOrAfter);
+          }
+        }
+      };
+    }
+  }
+};
+const defaultCreateDropPosition = (_dndContext, target, direction) => {
+  const div = target.ownerDocument.createElement("DIV");
+  div.className = `bs-drop-position ${direction}`;
+  return div;
+};
+const defaultLocateDropPosition = (_dndContext, target, dropPosition, beforeOrAfter) => {
+  target.appendChild(dropPosition);
+  dropPosition.classList.remove("before", "after");
+  dropPosition.classList.add(beforeOrAfter);
+};
+const checkLeftOrRight = (target, event) => {
+  const targetRect = target.getBoundingClientRect();
+  const x = event.clientX - targetRect.left;
+  return x < targetRect.width / 2 ? "before" : "after";
+};
+const checkUpOrDown = (target, event) => {
+  const targetRect = target.getBoundingClientRect();
+  const y = event.clientY - targetRect.top;
+  return y < targetRect.height / 2 ? "before" : "after";
+};
+const _hoisted_1$6 = {
+  class: "fixed func-cell drag-handle",
+  draggable: "true"
+};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "BSGridCellDragHandle",
+  props: {
+    rowIndex: {}
+  },
+  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)
+      ])])), [
+        [unref(vDragSupport), {
+          draggable: true,
+          sourceProvider: (td) => td.parentElement,
+          keyProvider: () => __props.rowIndex,
+          sourceType: "grid-row"
+        }]
+      ]);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "BSGridRow",
+  props: {
+    row: {},
+    rowIndex: {},
+    rowKey: {},
+    allRows: {},
+    columns: {},
+    visibleColumns: {},
+    fixedColumns: {},
+    pageInfo: {},
+    showSerial: { type: Boolean },
+    showCheckbox: { type: Boolean },
+    showDragHandle: { type: Boolean },
+    selectedRows: {},
+    editable: { type: Boolean },
+    rowEditable: { type: Boolean },
+    hideEditIcon: { type: Boolean },
+    editingRow: {},
+    isEditing: { type: Boolean },
+    selectOnClick: { type: Boolean },
+    disableSelection: { type: Boolean },
+    disableUnselectedRowsSelection: { type: Boolean }
+  },
+  emits: ["toggleSelection", "enterEditMode", "cancelEditMode", "rowMoved"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isRowSelected = computed(() => props.selectedRows.has(props.row));
+    const toggleSelection = () => {
+      emit("toggleSelection", props.row);
+    };
+    const enterEditMode = () => {
+      if (props.editable && props.rowEditable) emit("enterEditMode", props.row, savePoint);
+    };
+    const toggleEditMode = () => {
+      if (props.editable && props.rowEditable) {
+        props.isEditing ? emit("cancelEditMode", props.row) : enterEditMode();
+      }
+    };
+    const savePoint = provideSavePoint();
+    watch(
+      () => props.isEditing,
+      async () => {
+        if (props.isEditing) {
+          await savePoint.setNextTick();
+          if (props.editingRow && !props.editingRow.savePoint) {
+            props.editingRow.savePoint = savePoint;
+          }
+        } else {
+          savePoint.rollback();
+        }
+      },
+      { immediate: true }
+    );
+    provideFieldContext({
+      iteration: {
+        componentName: "BSGrid",
+        record: props.row,
+        recordKey: props.rowKey,
+        recordIndex: props.rowIndex,
+        data: props.allRows
+      }
+    });
+    const isDroppable = (dndContext2, target) => {
+      const src = dndContext2.sourceElement;
+      return src.tagName === "TR" && src.parentElement === target.parentElement;
+    };
+    const dropHandler = (dndContext2, _target, beforeOrAfter) => {
+      const srcIndex = dndContext2.key;
+      if (srcIndex !== void 0) {
+        emit("rowMoved", srcIndex, props.rowIndex, beforeOrAfter === "before");
+      }
+    };
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("tr", {
+        class: normalizeClass([{ selected: isRowSelected.value }, "data-row"]),
+        onDblclick: withModifiers(enterEditMode, ["stop"])
+      }, [
+        __props.showDragHandle ? (openBlock(), createBlock(_sfc_main$9, {
+          key: 0,
+          "row-index": __props.rowIndex
+        }, null, 8, ["row-index"])) : createCommentVNode("", true),
+        __props.showCheckbox ? (openBlock(), createBlock(BSGridCellCheckbox, {
+          key: 1,
+          checked: isRowSelected.value,
+          disabled: __props.disableSelection || __props.disableUnselectedRowsSelection && !isRowSelected.value,
+          onClick: toggleSelection
+        }, null, 8, ["checked", "disabled"])) : createCommentVNode("", true),
+        __props.editable && !__props.hideEditIcon ? (openBlock(), createBlock(_sfc_main$a, {
+          key: 2,
+          "is-editing": __props.isEditing,
+          "show-edit-icon": __props.rowEditable,
+          onToggleEditMode: toggleEditMode
+        }, null, 8, ["is-editing", "show-edit-icon"])) : createCommentVNode("", true),
+        __props.showSerial ? (openBlock(), createBlock(_sfc_main$c, {
+          key: 3,
+          "serial-no": __props.rowIndex + (__props.pageInfo?.offset || 0) + 1
+        }, null, 8, ["serial-no"])) : createCommentVNode("", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.visibleColumns, (column) => {
+          return openBlock(), createBlock(_sfc_main$d, {
+            key: `${column.propertyId}${__props.isEditing ? "Edit" : ""}`,
+            column,
+            columns: __props.columns,
+            "disable-selection": __props.disableSelection,
+            editing: __props.isEditing,
+            row: __props.row,
+            "select-on-click": __props.selectOnClick,
+            onToggleSelection: toggleSelection
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots[column.templateId] ? {
+              name: column.templateId,
+              fn: withCtx(({ row, cell, propertyId }) => [
+                renderSlot(_ctx.$slots, column.templateId, {
+                  cell,
+                  propertyId,
+                  row
+                })
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots[`${column.templateId}Edit`] ? {
+              name: `${column.templateId}Edit`,
+              fn: withCtx(({ row, cell, propertyId }) => [
+                renderSlot(_ctx.$slots, `${column.templateId}Edit`, {
+                  cell,
+                  propertyId,
+                  row
+                })
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["column", "columns", "disable-selection", "editing", "row", "select-on-click"]);
+        }), 128))
+      ], 34)), [
+        [unref(vDropSupport), { droppable: __props.showDragHandle, isDroppable, dropHandler }]
+      ]);
+    };
+  }
+});
+const _hoisted_1$5 = { class: "table-wrap" };
+const _hoisted_2$5 = { class: "header-row" };
+const _hoisted_3$3 = {
+  key: 0,
+  class: "fixed func-cell"
+};
+const _hoisted_4$3 = {
+  key: 2,
+  class: "fixed func-cell edit-icon"
+};
+const _hoisted_5$2 = { key: 0 };
+const _hoisted_6$1 = { key: 1 };
+const _hoisted_7$1 = ["textContent"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "BSGrid",
+  props: {
+    gridId: {},
+    columns: { default: () => [] },
+    data: {},
+    pageInfo: {},
+    sorts: {},
+    loading: { type: Boolean },
+    width: { default: "100%" },
+    height: { default: "auto" },
+    fixedColumnCount: { default: 0 },
+    showSerial: { type: Boolean },
+    showCheckbox: { type: Boolean },
+    showDragHandle: { type: Boolean },
+    showPageNavigation: { type: Boolean },
+    selectOnClick: { type: Boolean },
+    maxSelectCount: {},
+    singleSelect: { type: Boolean },
+    keyProvider: { type: Function, default: () => emptyKeyProvider },
+    selectedRows: {},
+    editable: { type: Boolean },
+    hideEditIcon: { type: Boolean },
+    editingRows: {},
+    rowEditPolicy: {},
+    rowSelectPolicy: {},
+    alwaysEditing: { type: Boolean },
+    rowDisplayPolicy: {},
+    columnSettings: {},
+    extensions: {},
+    emptyMessage: {}
+  },
+  emits: ["offsetChanged", "update:selectedRows", "changeSelectedRows", "update:editingRows", "changeEditingRow", "update:sorts", "settingChanged", "tableChanged"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const internalColumns = computed(() => {
+      const visibleColumns = props.columnSettings ? mergeColumnSettings(props.columns, props.columnSettings).filter((col) => !col.hidden).map((col) => {
+        const orig = props.columns.find(
+          (column) => column.propertyId === col.propertyId
+        );
+        return { ...orig, width: col.width || orig?.width };
+      }).filter((col) => col.propertyId) : props.columns;
+      return visibleColumns.map((col, index) => ({
+        ...col,
+        templateId: col.templateId || col.propertyId,
+        // templateId 가 없으면 propertyId 를 사용한다.
+        render: reactive({
+          width: col.width || DEFAULT_GRID_COLUMN_WIDTH,
+          fixed: index < props.fixedColumnCount
+        })
+      }));
+    });
+    const fixedColumns = computed(() => props.fixedColumnCount);
+    watch(
+      () => [JSON.stringify(props.columnSettings), props.fixedColumnCount],
+      async () => {
+        await setFixedCellLeftStyle(table.value);
+        if (props.data) emit("tableChanged", table.value);
+      }
+    );
+    const internalSelectedRows = props.selectedRows || reactive(/* @__PURE__ */ new Set());
+    const disableUnselectedRowsSelection = computed(
+      () => !!(props.maxSelectCount && internalSelectedRows.size >= props.maxSelectCount)
+    );
+    const toggleSelection = (row) => {
+      if (internalSelectedRows.has(row)) {
+        internalSelectedRows.delete(row);
+        emit("changeSelectedRows", {
+          allRows: false,
+          targetRows: [row],
+          selected: false
+        });
+      } else {
+        if (props.singleSelect) internalSelectedRows.clear();
+        internalSelectedRows.add(row);
+        emit("changeSelectedRows", {
+          allRows: false,
+          targetRows: [row],
+          selected: true
+        });
+      }
+      emit("update:selectedRows", internalSelectedRows);
+    };
+    const toggleAllSelection = () => {
+      if (internalSelectedRows.size > 0) {
+        internalSelectedRows.clear();
+        emit("changeSelectedRows", { allRows: true, selected: false });
+      } else {
+        if (props.singleSelect) {
+          if (props.data[0]) {
+            internalSelectedRows.add(props.data[0]);
+            emit("changeSelectedRows", {
+              allRows: false,
+              targetRows: [props.data[0]],
+              selected: true
+            });
+          }
+        } else {
+          const selectable = props.rowSelectPolicy ? props.data.filter((item) => props.rowSelectPolicy(item)) : props.data;
+          const data = props.maxSelectCount ? selectable.slice(0, props.maxSelectCount) : selectable;
+          data.forEach((row) => internalSelectedRows.add(row));
+          emit("changeSelectedRows", { allRows: true, selected: true });
+        }
+      }
+      emit("update:selectedRows", internalSelectedRows);
+    };
+    const clearSelection = () => {
+      if (internalSelectedRows.size > 0) {
+        internalSelectedRows.clear();
+        emit("changeSelectedRows", { allRows: true, selected: false });
+        emit("update:selectedRows", internalSelectedRows);
+      }
+    };
+    const table = ref();
+    const handleOffsetChange = (offset, currentPageInfo) => {
+      emit("offsetChanged", offset, currentPageInfo);
+    };
+    const internalEditingRows = props.editingRows || reactive(new EditingRows(props.keyProvider));
+    const enterEditMode = async (row, savePoint) => {
+      if (!internalEditingRows.isEditingRow(row)) {
+        internalEditingRows.addEditingRow({ row, savePoint });
+        emit("update:editingRows", internalEditingRows);
+        emit("changeEditingRow", row, true);
+        await setFixedCellLeftStyle(table.value);
+        emit("tableChanged", table.value);
+      }
+    };
+    const cancelEditMode = async (row) => {
+      if (internalEditingRows.isEditingRow(row)) {
+        if (props.alwaysEditing) {
+          internalEditingRows.removeRow(row);
+          emit("changeEditingRow", row, false);
+          await nextTick();
+          internalEditingRows.addEditingRow({ row });
+          emit("changeEditingRow", row, true);
+        } else {
+          internalEditingRows.removeRow(row);
+          emit("update:editingRows", internalEditingRows);
+          emit("changeEditingRow", row, false);
+          await setFixedCellLeftStyle(table.value);
+          emit("tableChanged", table.value);
+        }
+      }
+    };
+    const clearEditing = async () => {
+      if (internalEditingRows.getRows().length > 0) {
+        const rows = internalEditingRows.getRows().map((row) => row.row);
+        internalEditingRows.clear();
+        emit("update:editingRows", internalEditingRows);
+        rows.forEach((row) => emit("changeEditingRow", row, false));
+        await setFixedCellLeftStyle(table.value);
+        emit("tableChanged", table.value);
+      }
+    };
+    const initEditing = () => {
+      if (props.alwaysEditing) {
+        props.data.forEach((row) => {
+          if ((!props.rowEditPolicy || props.rowEditPolicy(row, internalEditingRows)) && !internalEditingRows.isEditingRow(row)) {
+            internalEditingRows.addEditingRow({ row });
+          }
+        });
+      }
+    };
+    watch(
+      () => [props.alwaysEditing, props.data.length],
+      () => initEditing(),
+      { immediate: true }
+    );
+    const internalSorts = props.sorts || reactive([]);
+    const changeSort = (column, ascending) => {
+      internalSorts.splice(0, internalSorts.length);
+      if (ascending !== void 0) {
+        internalSorts.push({
+          propertyId: column.sortPropertyId || column.propertyId,
+          ascending
+        });
+      }
+      emit("update:sorts", internalSorts);
+    };
+    const rowMoved = (srcIndex, destIndex, before) => {
+      if (srcIndex !== destIndex) {
+        const dest = destIndex - (srcIndex < destIndex ? 1 : 0) + (before ? 0 : 1);
+        const src = props.data.splice(srcIndex, 1)[0];
+        props.data.splice(dest, 0, src);
+      }
+    };
+    watch(
+      () => [props.data, props.loading],
+      async () => {
+        await clearEditing();
+        clearSelection();
+        initEditing();
+        await setFixedCellLeftStyle(table.value);
+      },
+      { immediate: true }
+    );
+    watchEffect(async () => {
+      if (props.data.length > 0) await setFixedCellLeftStyle(table.value);
+      emit("tableChanged", table.value);
+    });
+    const columnResized = async (column) => {
+      setColumnWidth(column.propertyId, column.render.width);
+      if (column.render.fixed) await setFixedCellLeftStyle(table.value);
+    };
+    const parentSavePoint = useSavePoint();
+    if (parentSavePoint) {
+      const childSavePoint = {
+        set() {
+        },
+        rollback() {
+        },
+        isModified() {
+          return !!internalEditingRows.getRows().find((row) => row.savePoint?.isModified());
+        }
+      };
+      parentSavePoint.addChild(childSavePoint);
+      onBeforeUnmount(() => parentSavePoint.removeChild(childSavePoint));
+      cancelProvidedSavePoint();
+    }
+    const scrolledHorizontally = ref(false);
+    const scrolledVertically = ref(false);
+    onMounted(() => {
+      table.value?.parentElement?.addEventListener("scroll", setScrollStyle, {
+        passive: true
+      });
+    });
+    const setScrollStyle = () => {
+      scrolledHorizontally.value = (table.value?.parentElement?.scrollLeft || 0) > 0;
+      scrolledVertically.value = (table.value?.parentElement?.scrollTop || 0) > 0;
+    };
+    const getColumnSettings = () => {
+      return props.columnSettings || props.columns.map((col) => ({ propertyId: col.propertyId }));
+    };
+    const toggleColumnFixed = (propertyId) => {
+      const index = internalColumns.value.findIndex(
+        (col) => col.propertyId === propertyId
+      );
+      const newValue = props.fixedColumnCount === index + 1 ? 0 : index + 1;
+      emit("settingChanged", props.columnSettings, newValue);
+    };
+    const hideColumn = (propertyId) => {
+      const settings = getColumnSettings();
+      const column = settings.find((col) => col.propertyId === propertyId);
+      if (column) column.hidden = true;
+      emit("settingChanged", settings, props.fixedColumnCount);
+    };
+    const restoreAllColumnSettings = () => {
+      emit("settingChanged", void 0, void 0);
+    };
+    const setColumnWidth = (propertyId, width) => {
+      const settings = getColumnSettings();
+      const column = settings.find((col) => col.propertyId === propertyId);
+      const orig = props.columns.find((col) => col.propertyId === propertyId);
+      if (column) column.width = width === orig?.width ? void 0 : width;
+      emit("settingChanged", settings, props.fixedColumnCount);
+    };
+    const extensionHandler = {
+      handleExtendsContextMenu: (event, param) => {
+        const context = {
+          gridId: props.gridId,
+          table: table.value || void 0
+        };
+        return props.extensions?.flatMap((ext) => ext.extendsContextMenu?.(event, param, context)).filter(notNull);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{
+          "h-scrolled": scrolledHorizontally.value,
+          "v-scrolled": scrolledVertically.value
+        }, "bs-grid min-h-128"]),
+        style: normalizeStyle({ width: __props.width, height: __props.height })
+      }, [
+        createElementVNode("div", _hoisted_1$5, [
+          createElementVNode("table", {
+            ref_key: "table",
+            ref: table
+          }, [
+            createElementVNode("thead", null, [
+              createElementVNode("tr", _hoisted_2$5, [
+                __props.showDragHandle ? (openBlock(), createElementBlock("th", _hoisted_3$3, [..._cache[0] || (_cache[0] = [
+                  createElementVNode("div", null, null, -1)
+                ])])) : createCommentVNode("", true),
+                __props.showCheckbox ? (openBlock(), createBlock(_sfc_main$f, {
+                  key: 1,
+                  "selected-row-count": unref(internalSelectedRows).size,
+                  onClick: toggleAllSelection
+                }, null, 8, ["selected-row-count"])) : createCommentVNode("", true),
+                __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),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(internalColumns.value, (column) => {
+                  return openBlock(), createBlock(BSGridHeaderCell, {
+                    key: column.propertyId,
+                    column,
+                    columns: internalColumns.value,
+                    "extension-handler": extensionHandler,
+                    "grid-id": __props.gridId,
+                    sorts: unref(internalSorts),
+                    onSort: changeSort,
+                    onColumnResized: columnResized,
+                    onToggleColumnFixed: toggleColumnFixed,
+                    onHideColumn: hideColumn,
+                    onRestoreAllColumnSettings: restoreAllColumnSettings
+                  }, createSlots({ _: 2 }, [
+                    _ctx.$slots[unref(filterSlotName)(column)] ? {
+                      name: "filter",
+                      fn: withCtx(() => [
+                        renderSlot(_ctx.$slots, unref(filterSlotName)(column))
+                      ]),
+                      key: "0"
+                    } : void 0
+                  ]), 1032, ["column", "columns", "grid-id", "sorts"]);
+                }), 128))
+              ])
+            ]),
+            createElementVNode("tbody", null, [
+              __props.loading ? (openBlock(), createElementBlock("tr", _hoisted_5$2, [
+                createElementVNode("td", null, [
+                  createVNode(unref(BSLoadingIcon), { class: "position-absolute pa-8" })
+                ])
+              ])) : __props.data && __props.data.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6$1, [
+                createElementVNode("td", null, [
+                  createElementVNode("div", {
+                    textContent: toDisplayString(__props.emptyMessage),
+                    class: "position-absolute text-nowrap pa-8"
+                  }, null, 8, _hoisted_7$1)
+                ])
+              ])) : __props.data ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(__props.data, (row, index) => {
+                return openBlock(), createBlock(_sfc_main$8, {
+                  key: __props.keyProvider(row) || index,
+                  "all-rows": __props.data,
+                  columns: internalColumns.value,
+                  "disable-selection": __props.rowSelectPolicy && !__props.rowSelectPolicy(row),
+                  "disable-unselected-rows-selection": disableUnselectedRowsSelection.value,
+                  editable: __props.editable,
+                  "editing-row": __props.editingRows?.getEditingRow(row),
+                  "fixed-columns": fixedColumns.value,
+                  "hide-edit-icon": __props.hideEditIcon,
+                  "is-editing": unref(internalEditingRows).isEditingRow(row),
+                  "page-info": __props.pageInfo,
+                  row,
+                  "row-editable": !__props.rowEditPolicy || __props.rowEditPolicy(row, unref(internalEditingRows)),
+                  "row-index": index,
+                  "row-key": __props.keyProvider(row),
+                  "select-on-click": __props.selectOnClick,
+                  "selected-rows": unref(internalSelectedRows),
+                  "show-checkbox": __props.showCheckbox,
+                  "show-drag-handle": __props.showDragHandle,
+                  "show-serial": __props.showSerial,
+                  style: normalizeStyle({
+                    display: __props.rowDisplayPolicy?.(row) === false ? "none" : void 0
+                  }),
+                  "visible-columns": internalColumns.value,
+                  onToggleSelection: toggleSelection,
+                  onEnterEditMode: enterEditMode,
+                  onCancelEditMode: cancelEditMode,
+                  onRowMoved: rowMoved
+                }, createSlots({ _: 2 }, [
+                  renderList(Object.keys(_ctx.$slots), (slot, _index) => {
+                    return {
+                      name: slot,
+                      fn: withCtx(({ row: row2, cell, propertyId }) => [
+                        renderSlot(_ctx.$slots, slot, {
+                          cell,
+                          propertyId,
+                          row: row2
+                        })
+                      ])
+                    };
+                  })
+                ]), 1032, ["all-rows", "columns", "disable-selection", "disable-unselected-rows-selection", "editable", "editing-row", "fixed-columns", "hide-edit-icon", "is-editing", "page-info", "row", "row-editable", "row-index", "row-key", "select-on-click", "selected-rows", "show-checkbox", "show-drag-handle", "show-serial", "style", "visible-columns"]);
+              }), 128)) : createCommentVNode("", true)
+            ])
+          ], 512)
+        ]),
+        __props.showPageNavigation ? (openBlock(), createBlock(unref(BSPageNavigation), {
+          key: 0,
+          limit: __props.pageInfo?.limit || 10,
+          offset: __props.pageInfo?.offset || 0,
+          "total-count": __props.pageInfo?.totalCount || 0,
+          "visible-page-count": 20,
+          onOffsetChanged: handleOffsetChange
+        }, null, 8, ["limit", "offset", "total-count"])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+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 _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "BSGridColumnSettingModal",
+  props: {
+    columns: {},
+    columnSettings: {},
+    fixedColumnCount: {},
+    columnSettingTitle: { default: "Column Settings" }
+  },
+  emits: ["settingChanged"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const settingColumns = [
+      {
+        propertyId: "caption",
+        caption: "Caption",
+        width: 200
+      },
+      { propertyId: "visible", caption: "Visible", width: 60 },
+      { propertyId: "fixed", caption: "Fixed", width: 60 },
+      { propertyId: "width", caption: "Width", width: 100 }
+    ];
+    const gridHandler = createInputGridHandler({
+      getRowKey: (row) => row.propertyId
+    });
+    const editingColumns = ref([]);
+    const margeColumnSettingsAndOrigColumns = (columnSettings, columns) => {
+      const origColumns = [...columns || []];
+      const result = columnSettings.map((col) => {
+        const origIndex = origColumns.findIndex(
+          (orig) => orig.propertyId === col.propertyId
+        );
+        if (origIndex >= 0) {
+          const orig = origColumns.splice(origIndex, 1)[0];
+          return { ...orig, hidden: col.hidden, width: col.width || orig.width };
+        } else {
+          return void 0;
+        }
+      }).filter(notNull);
+      origColumns.forEach((orig) => {
+        result.push({ ...orig, width: orig.width });
+      });
+      return result;
+    };
+    onMounted(() => {
+      const columns = props.columnSettings ? margeColumnSettingsAndOrigColumns(props.columnSettings, props.columns) : props.columns?.map((orig) => ({ ...orig })) || [];
+      editingColumns.value = columns.map((col, idx) => ({
+        ...col,
+        fixed: idx < (props.fixedColumnCount || 0)
+      }));
+      gridHandler.setGridData(editingColumns.value);
+    });
+    const updateFixedColumn = async (value, row) => {
+      const rowIndex = editingColumns.value.indexOf(row);
+      const oldFixedIndex = editingColumns.value.findLastIndex((col) => col.fixed) + 1;
+      await nextTick();
+      const fixedIndex = !value && oldFixedIndex === 0 && rowIndex === 0 ? -1 : rowIndex;
+      editingColumns.value.forEach((col, idx) => col.fixed = idx <= fixedIndex);
+    };
+    const modalHandle = useModalHandle();
+    const save = () => {
+      const columnSettings = editingColumns.value.map((col) => {
+        const orig = props.columns?.find((c) => c.propertyId === col.propertyId);
+        return {
+          propertyId: col.propertyId,
+          hidden: col.hidden ? true : void 0,
+          width: col.width !== orig?.width ? col.width : void 0
+        };
+      });
+      const fixedColumnCount = editingColumns.value.findLastIndex((col) => col.fixed) + 1;
+      emit("settingChanged", columnSettings, fixedColumnCount);
+      modalHandle.close();
+    };
+    const close = () => {
+      modalHandle.close();
+    };
+    const restore = () => {
+      emit("settingChanged", void 0, void 0);
+      modalHandle.close();
+    };
+    modalHandle.setDefaultStyle({
+      maxWidth: "600px",
+      maxHeight: "80%"
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BSModalFrame), { title: __props.columnSettingTitle }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$7, mergeProps({
+            columns: settingColumns,
+            height: "100%",
+            "show-drag-handle": "",
+            "show-serial": ""
+          }, unref(gridHandler).grid, toHandlers(unref(gridHandler).gridEventListener)), {
+            visible: withCtx(({ row }) => [
+              createElementVNode("div", _hoisted_1$4, [
+                createVNode(unref(BSCheckbox), {
+                  "model-value": !row.hidden,
+                  class: "reverted",
+                  "onUpdate:modelValue": (value) => row.hidden = !value
+                }, null, 8, ["model-value", "onUpdate:modelValue"])
+              ])
+            ]),
+            fixed: withCtx(({ row }) => [
+              createElementVNode("div", _hoisted_2$4, [
+                createVNode(unref(BSCheckbox), {
+                  modelValue: row.fixed,
+                  "onUpdate:modelValue": [($event) => row.fixed = $event, ($event) => updateFixedColumn($event, row)],
+                  class: "reverted"
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ])
+            ]),
+            width: withCtx(({ row }) => [
+              createVNode(unref(BSNumberInput), {
+                modelValue: row.width,
+                "onUpdate:modelValue": ($event) => row.width = $event,
+                width: "100%"
+              }, null, 8, ["modelValue", "onUpdate:modelValue"])
+            ]),
+            _: 1
+          }, 16)
+        ]),
+        buttons: withCtx(() => [
+          createElementVNode("div", _hoisted_3$2, [
+            createElementVNode("div", null, [
+              createVNode(unref(BSButton), {
+                caption: "Restore Settings",
+                "button-color": "gray",
+                onClick: restore
+              })
+            ]),
+            createElementVNode("div", _hoisted_4$2, [
+              createVNode(unref(BSButton), {
+                caption: "Cancel",
+                onClick: close
+              }),
+              createVNode(unref(BSButton), {
+                caption: "OK",
+                "button-color": "blue",
+                onClick: save
+              })
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["title"]);
+    };
+  }
+});
+const _hoisted_1$3 = { class: "bs-grid-control" };
+const _hoisted_2$3 = { key: 0 };
+const _hoisted_3$1 = { key: 1 };
+const _hoisted_4$1 = { key: 2 };
+const _hoisted_5$1 = { key: 3 };
+const _hoisted_6 = { key: 4 };
+const _hoisted_7 = ["textContent"];
+const _hoisted_8 = { key: 5 };
+const _hoisted_9 = ["textContent"];
+const _hoisted_10 = { key: 6 };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "BSGridControl",
+  props: {
+    gridId: {},
+    showSetting: { type: Boolean },
+    showRefresh: { type: Boolean },
+    showClearFilter: { type: Boolean },
+    showFilter: { type: Boolean },
+    showLimit: { type: Boolean },
+    showAddButton: { type: Boolean },
+    showRemoveButton: { type: Boolean },
+    columns: {},
+    columnSettings: {},
+    fixedColumnCount: {},
+    limitItems: { default: () => [100, 300, 500] },
+    limit: { default: 100 },
+    totalCount: {},
+    selectedRows: {},
+    gridFilters: {}
+  },
+  emits: ["update:limit", "refresh", "clearFilter", "clickAdd", "clickRemove", "settingChanged"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const limitValue = ref(props.limit || props.limitItems?.[0] || 100);
+    const selectedCount = computed(() => props.selectedRows?.size || 0);
+    const formattedTotalCount = computed(
+      () => formatUtil.formatNumber(props.totalCount) || ""
+    );
+    const formattedSelectedCount = computed(
+      () => formatUtil.formatNumber(selectedCount.value) || ""
+    );
+    const changeLimit = (limit) => {
+      emit("update:limit", Math.max(1, limit || 0));
+    };
+    const refreshGrid = () => {
+      emit("refresh");
+    };
+    const clearGridFilter = () => {
+      emit("clearFilter");
+    };
+    const modal = useModal();
+    const openSettingModal = () => {
+      modal.openModal({
+        component: defineAsyncComponent(
+          () => import("./BSGridColumnSettingModal-GMHDkrKO.js")
+        ),
+        bind: {
+          columns: props.columns,
+          columnSettings: props.columnSettings,
+          fixedColumnCount: props.fixedColumnCount
+        },
+        on: {
+          settingChanged: (columnSettings, fixedColumnCount) => emit("settingChanged", columnSettings, fixedColumnCount)
+        }
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        __props.showSetting ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+          createVNode(unref(BSButton), {
+            caption: "Column Settings",
+            "data-id": "columnSettingBtn",
+            "left-icon": "data_table",
+            onClick: openSettingModal
+          })
+        ])) : createCommentVNode("", true),
+        __props.showRefresh ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+          createVNode(unref(BSButton), {
+            caption: "Refresh",
+            "data-id": "refreshBtn",
+            "left-icon": "sync",
+            onClick: refreshGrid
+          })
+        ])) : 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
+          })
+        ])) : 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"))
+          })
+        ])) : 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"))
+          })
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", null, [
+          _cache[3] || (_cache[3] = createElementVNode("span", { textContent: "Total" }, null, -1)),
+          _cache[4] || (_cache[4] = createTextVNode(": ", -1)),
+          createElementVNode("span", {
+            "data-id": "totalCount",
+            textContent: toDisplayString(formattedTotalCount.value)
+          }, null, 8, _hoisted_7)
+        ]),
+        selectedCount.value > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          _cache[5] || (_cache[5] = createElementVNode("span", { textContent: "Selected" }, null, -1)),
+          _cache[6] || (_cache[6] = createTextVNode(": ", -1)),
+          createElementVNode("span", {
+            "data-id": "selectedCount",
+            textContent: toDisplayString(formattedSelectedCount.value)
+          }, null, 8, _hoisted_9)
+        ])) : createCommentVNode("", true),
+        __props.showLimit ? (openBlock(), createElementBlock("div", _hoisted_10, [
+          createVNode(unref(BSSelect), {
+            modelValue: limitValue.value,
+            "onUpdate:modelValue": [
+              _cache[2] || (_cache[2] = ($event) => limitValue.value = $event),
+              changeLimit
+            ],
+            items: __props.limitItems,
+            class: "page-length",
+            "data-id": "limitSelect"
+          }, null, 8, ["modelValue", "items"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "bs-text-filter" };
+const _hoisted_2$2 = { class: "input-wrap" };
+const _hoisted_3 = { class: "textarea-wrap" };
+const _hoisted_4 = {
+  class: "filter-caption text-nowrap",
+  "data-id": "filterCaption"
+};
+const _hoisted_5 = ["textContent"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "BSTextFilter",
+  props: {
+    textFilterItems: { default: () => [] },
+    modelValue: {},
+    keyword: {}
+  },
+  emits: ["update:modelValue", "search"],
+  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 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 getFilterKeyword = (filter) => {
+      const actualFilter = filter instanceof OrFilter ? filter.filters[0] : filter;
+      if (actualFilter && "getFilterValueString" in actualFilter) {
+        const value = actualFilter.getFilterValueString();
+        return Array.isArray(value) ? value.join("\n") : value;
+      }
+      return "";
+    };
+    const inputText = ref(getFilterKeyword(props.modelValue));
+    watch(
+      () => props.modelValue,
+      () => inputText.value = getFilterKeyword(props.modelValue)
+    );
+    const inputTextChanged = async () => {
+      inputText.value = inputText.value.trim();
+      const filter = await createFilter(inputText.value);
+      if (props.modelValue?.toString() !== filter?.toString()) {
+        emit("update:modelValue", filter, likeTextFilterItems.value);
+      }
+    };
+    const textareaText = ref(getFilterKeyword(props.modelValue));
+    const textareaTextChanged = async () => {
+      textareaText.value = textareaText.value.trim();
+      const filter = await createFilter(textareaText.value);
+      if (props.modelValue?.toString() !== filter?.toString()) {
+        emit("update:modelValue", filter, inTextFilterItems.value);
+      }
+    };
+    const makeLikeFilters = (items, keyword) => {
+      if (items.length === 0) return [];
+      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)];
+      } else {
+        return items.map((item) => likeFilter([item.propertyId], keyword, item.prefix !== false, item.suffix !== false, true));
+      }
+    };
+    const createFilter = async (text) => {
+      const keyword = text?.trim();
+      if (!keyword) return void 0;
+      if (filterMode.value === "INPUT") {
+        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 allFilters = [...like, equal, ...customFilters].filter(notNull);
+        if (allFilters.length >= 2) return orFilter(allFilters);
+        else return allFilters[0];
+      } else if (filterMode.value === "TEXTAREA") {
+        const names = inFilterItemPropertyIds.value;
+        const keywords = keyword.split("\n");
+        return inFilter(names, keywords, true);
+      }
+    };
+    watch(
+      () => props.keyword,
+      () => {
+        inputText.value = props.keyword || "";
+        inputTextChanged();
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        withDirectives(createElementVNode("div", _hoisted_2$2, [
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputText.value = $event),
+            "data-id": "textFilterInput",
+            type: "text",
+            onChange: inputTextChanged,
+            onKeyup: _cache[1] || (_cache[1] = withKeys(withModifiers(() => {
+            }, ["prevent", "stop"]), ["enter"]))
+          }, null, 544), [
+            [vModelText, inputText.value]
+          ]),
+          hasTextAreaFilterItem.value ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "filter-mode-btn font-icon bs-clickable mr-4 mt-5",
+            onClick: _cache[2] || (_cache[2] = ($event) => changeFilterMode("TEXTAREA"))
+          }, "south")) : createCommentVNode("", true)
+        ], 512), [
+          [vShow, filterMode.value === "INPUT"]
+        ]),
+        withDirectives(createElementVNode("div", _hoisted_3, [
+          withDirectives(createElementVNode("textarea", {
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => textareaText.value = $event),
+            "data-id": "textFilterTextarea",
+            onChange: textareaTextChanged
+          }, null, 544), [
+            [vModelText, textareaText.value]
+          ]),
+          createElementVNode("span", {
+            class: "font-icon bs-clickable mr-4 mt-5",
+            onClick: _cache[4] || (_cache[4] = ($event) => changeFilterMode("INPUT"))
+          }, "north")
+        ], 512), [
+          [vShow, filterMode.value === "TEXTAREA"]
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(filterMode.value === "INPUT" ? likeTextFilterItems.value : inTextFilterItems.value, (item) => {
+            return openBlock(), createElementBlock("span", {
+              key: item.propertyId,
+              textContent: toDisplayString(item.caption)
+            }, null, 8, _hoisted_5);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var utc$2 = { exports: {} };
+var utc$1 = utc$2.exports;
+var hasRequiredUtc;
+function requireUtc() {
+  if (hasRequiredUtc) return utc$2.exports;
+  hasRequiredUtc = 1;
+  (function(module, exports) {
+    !(function(t, i) {
+      module.exports = i();
+    })(utc$1, (function() {
+      var t = "minute", i = /[+-]\d\d(?::?\d\d)?/g, e = /([+-]|\d\d)/g;
+      return function(s, f, n) {
+        var u = f.prototype;
+        n.utc = function(t2) {
+          var i2 = { date: t2, utc: true, args: arguments };
+          return new f(i2);
+        }, u.utc = function(i2) {
+          var e2 = n(this.toDate(), { locale: this.$L, utc: true });
+          return i2 ? e2.add(this.utcOffset(), t) : e2;
+        }, u.local = function() {
+          return n(this.toDate(), { locale: this.$L, utc: false });
+        };
+        var r = u.parse;
+        u.parse = function(t2) {
+          t2.utc && (this.$u = true), this.$utils().u(t2.$offset) || (this.$offset = t2.$offset), r.call(this, t2);
+        };
+        var o = u.init;
+        u.init = function() {
+          if (this.$u) {
+            var t2 = this.$d;
+            this.$y = t2.getUTCFullYear(), this.$M = t2.getUTCMonth(), this.$D = t2.getUTCDate(), this.$W = t2.getUTCDay(), this.$H = t2.getUTCHours(), this.$m = t2.getUTCMinutes(), this.$s = t2.getUTCSeconds(), this.$ms = t2.getUTCMilliseconds();
+          } else o.call(this);
+        };
+        var a = u.utcOffset;
+        u.utcOffset = function(s2, f2) {
+          var n2 = this.$utils().u;
+          if (n2(s2)) return this.$u ? 0 : n2(this.$offset) ? a.call(this) : this.$offset;
+          if ("string" == typeof s2 && (s2 = (function(t2) {
+            void 0 === t2 && (t2 = "");
+            var s3 = t2.match(i);
+            if (!s3) return null;
+            var f3 = ("" + s3[0]).match(e) || ["-", 0, 0], n3 = f3[0], u3 = 60 * +f3[1] + +f3[2];
+            return 0 === u3 ? 0 : "+" === n3 ? u3 : -u3;
+          })(s2), null === s2)) return this;
+          var u2 = Math.abs(s2) <= 16 ? 60 * s2 : s2;
+          if (0 === u2) return this.utc(f2);
+          var r2 = this.clone();
+          if (f2) return r2.$offset = u2, r2.$u = false, r2;
+          var o2 = this.$u ? this.toDate().getTimezoneOffset() : -1 * this.utcOffset();
+          return (r2 = this.local().add(u2 + o2, t)).$offset = u2, r2.$x.$localOffset = o2, r2;
+        };
+        var h = u.format;
+        u.format = function(t2) {
+          var i2 = t2 || (this.$u ? "YYYY-MM-DDTHH:mm:ss[Z]" : "");
+          return h.call(this, i2);
+        }, u.valueOf = function() {
+          var t2 = this.$utils().u(this.$offset) ? 0 : this.$offset + (this.$x.$localOffset || this.$d.getTimezoneOffset());
+          return this.$d.valueOf() - 6e4 * t2;
+        }, u.isUTC = function() {
+          return !!this.$u;
+        }, u.toISOString = function() {
+          return this.toDate().toISOString();
+        }, u.toString = function() {
+          return this.toDate().toUTCString();
+        };
+        var l = u.toDate;
+        u.toDate = function(t2) {
+          return "s" === t2 && this.$offset ? n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate() : l.call(this);
+        };
+        var c = u.diff;
+        u.diff = function(t2, i2, e2) {
+          if (t2 && this.$u === t2.$u) return c.call(this, t2, i2, e2);
+          var s2 = this.local(), f2 = n(t2).local();
+          return c.call(s2, f2, i2, e2);
+        };
+      };
+    }));
+  })(utc$2);
+  return utc$2.exports;
+}
+var utcExports = requireUtc();
+const utc = /* @__PURE__ */ getDefaultExportFromCjs(utcExports);
+var timezone$2 = { exports: {} };
+var timezone$1 = timezone$2.exports;
+var hasRequiredTimezone;
+function requireTimezone() {
+  if (hasRequiredTimezone) return timezone$2.exports;
+  hasRequiredTimezone = 1;
+  (function(module, exports) {
+    !(function(t, e) {
+      module.exports = e();
+    })(timezone$1, (function() {
+      var t = { year: 0, month: 1, day: 2, hour: 3, minute: 4, second: 5 }, e = {};
+      return function(n, i, o) {
+        var r, a = function(t2, n2, i2) {
+          void 0 === i2 && (i2 = {});
+          var o2 = new Date(t2), r2 = (function(t3, n3) {
+            void 0 === n3 && (n3 = {});
+            var i3 = n3.timeZoneName || "short", o3 = t3 + "|" + i3, r3 = e[o3];
+            return r3 || (r3 = new Intl.DateTimeFormat("en-US", { hour12: false, timeZone: t3, year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit", timeZoneName: i3 }), e[o3] = r3), r3;
+          })(n2, i2);
+          return r2.formatToParts(o2);
+        }, u = function(e2, n2) {
+          for (var i2 = a(e2, n2), r2 = [], u2 = 0; u2 < i2.length; u2 += 1) {
+            var f2 = i2[u2], s2 = f2.type, m = f2.value, c = t[s2];
+            c >= 0 && (r2[c] = parseInt(m, 10));
+          }
+          var d = r2[3], l = 24 === d ? 0 : d, h = r2[0] + "-" + r2[1] + "-" + r2[2] + " " + l + ":" + r2[4] + ":" + r2[5] + ":000", v = +e2;
+          return (o.utc(h).valueOf() - (v -= v % 1e3)) / 6e4;
+        }, f = i.prototype;
+        f.tz = function(t2, e2) {
+          void 0 === t2 && (t2 = r);
+          var n2, i2 = this.utcOffset(), a2 = this.toDate(), u2 = a2.toLocaleString("en-US", { timeZone: t2 }), f2 = Math.round((a2 - new Date(u2)) / 1e3 / 60), s2 = 15 * -Math.round(a2.getTimezoneOffset() / 15) - f2;
+          if (!Number(s2)) n2 = this.utcOffset(0, e2);
+          else if (n2 = o(u2, { locale: this.$L }).$set("millisecond", this.$ms).utcOffset(s2, true), e2) {
+            var m = n2.utcOffset();
+            n2 = n2.add(i2 - m, "minute");
+          }
+          return n2.$x.$timezone = t2, n2;
+        }, f.offsetName = function(t2) {
+          var e2 = this.$x.$timezone || o.tz.guess(), n2 = a(this.valueOf(), e2, { timeZoneName: t2 }).find((function(t3) {
+            return "timezonename" === t3.type.toLowerCase();
+          }));
+          return n2 && n2.value;
+        };
+        var s = f.startOf;
+        f.startOf = function(t2, e2) {
+          if (!this.$x || !this.$x.$timezone) return s.call(this, t2, e2);
+          var n2 = o(this.format("YYYY-MM-DD HH:mm:ss:SSS"), { locale: this.$L });
+          return s.call(n2, t2, e2).tz(this.$x.$timezone, true);
+        }, o.tz = function(t2, e2, n2) {
+          var i2 = n2 && e2, a2 = n2 || e2 || r, f2 = u(+o(), a2);
+          if ("string" != typeof t2) return o(t2).tz(a2);
+          var s2 = (function(t3, e3, n3) {
+            var i3 = t3 - 60 * e3 * 1e3, o2 = u(i3, n3);
+            if (e3 === o2) return [i3, e3];
+            var r2 = u(i3 -= 60 * (o2 - e3) * 1e3, n3);
+            return o2 === r2 ? [i3, o2] : [t3 - 60 * Math.min(o2, r2) * 1e3, Math.max(o2, r2)];
+          })(o.utc(t2, i2).valueOf(), f2, a2), m = s2[0], c = s2[1], d = o(m).utcOffset(c);
+          return d.$x.$timezone = a2, d;
+        }, o.tz.guess = function() {
+          return Intl.DateTimeFormat().resolvedOptions().timeZone;
+        }, o.tz.setDefault = function(t2) {
+          r = t2;
+        };
+      };
+    }));
+  })(timezone$2);
+  return timezone$2.exports;
+}
+var timezoneExports = requireTimezone();
+const timezone = /* @__PURE__ */ getDefaultExportFromCjs(timezoneExports);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const createDateRangeFromPreset = (value, timeZone) => {
+  const from = value.from ? resolveMoment(value.from, true, timeZone) : void 0;
+  const to = value.to ? resolveMoment(value.to, false, timeZone) : void 0;
+  return { from: from?.toISOString(), to: to?.toISOString() };
+};
+const resolveMoment = (setting, from, timeZone, baseDate) => {
+  switch (setting.type) {
+    case "TODAY":
+      return resolveToday(from, timeZone, baseDate);
+    case "THIS_WEEK":
+      return resolveThisWeek(from, timeZone, baseDate);
+    case "THIS_MONTH":
+      return resolveThisMonth(from, timeZone, baseDate);
+    case "THIS_YEAR":
+      return resolveThisYear(from, timeZone, baseDate);
+    case "LAST_HOURS":
+      return resolveLastHours(setting.value || 0, from, timeZone, baseDate);
+    case "LAST_DAYS":
+      return resolveLastDays(setting.value || 0, from, timeZone, baseDate);
+    case "DAYS_AGO":
+      return resolveDaysAgo(setting.value || 0, from, timeZone, baseDate);
+    case "WEEKS_AGO":
+      return resolveWeeksAgo(setting.value || 0, from, timeZone, baseDate);
+    case "MONTHS_AGO":
+      return resolveMonthsAgo(setting.value || 0, from, timeZone, baseDate);
+    case "YEARS_AGO":
+      return resolveYearsAgo(setting.value || 0, from, timeZone, baseDate);
+  }
+};
+const resolveToday = (from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.startOf("day") : today.endOf("day");
+};
+const resolveThisWeek = (from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.startOf("week") : today.endOf("week");
+};
+const resolveThisMonth = (from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.startOf("month") : today.endOf("month");
+};
+const resolveThisYear = (from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.startOf("year") : today.endOf("year");
+};
+const resolveLastHours = (hours, from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.add(-hours, "hour").startOf("minute") : today.endOf("minute");
+};
+const resolveLastDays = (days, from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.add(-days, "day").startOf("day") : today.endOf("day");
+};
+const resolveDaysAgo = (days, from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.add(-days, "day").startOf("day") : today.add(-days, "day").endOf("day");
+};
+const resolveWeeksAgo = (weeks, from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.add(-weeks, "week").startOf("week") : today.add(-weeks, "week").endOf("week");
+};
+const resolveMonthsAgo = (months, from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.add(-months, "month").startOf("month") : today.add(-months, "month").endOf("month");
+};
+const resolveYearsAgo = (years, from, timeZone, baseDate) => {
+  const today = (baseDate || dayjs()).tz(timeZone);
+  return from ? today.add(-years, "year").startOf("year") : today.add(-years, "year").endOf("year");
+};
+const serializeMomentSetting = (setting) => {
+  if (!setting)
+    return "";
+  const value = setting.value === void 0 ? "" : `:${setting.value}`;
+  return `${setting.type}${value}`;
+};
+const convertDateRangePresetKey = (preset) => {
+  if (preset.from === void 0 && preset.to === void 0)
+    return "";
+  return `${serializeMomentSetting(preset.from)}~${serializeMomentSetting(preset.to)}`;
+};
+const findPreset = (presetKey, candidatePresets) => {
+  if (!presetKey)
+    return void 0;
+  return candidatePresets?.find((preset) => convertDateRangePresetKey(preset) === presetKey);
+};
+class BetweenDateFilterWithPreset extends BetweenDateFilter {
+  name;
+  fromValue;
+  toValue;
+  presetKey;
+  constructor(name, fromValue, toValue, preset) {
+    super(name, fromValue, toValue);
+    this.name = name;
+    this.fromValue = fromValue;
+    this.toValue = toValue;
+    this.presetKey = preset ? convertDateRangePresetKey(preset) : void 0;
+  }
+  // candidatePresets 중 presetKey 에 해당하는 preset 을 찾아, fromValue, toValue 를 설정한다.
+  // preset 을 찾을 수 없으면 undefined 를 리턴한다.
+  static createFromPresetKey(name, presetKey, candidatePresets, timeZone) {
+    const preset = findPreset(presetKey, candidatePresets);
+    const range = preset ? createDateRangeFromPreset(preset, timeZone) : void 0;
+    return range ? new BetweenDateFilterWithPreset(name, range.from, range.to, preset) : void 0;
+  }
+}
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "BSDateRangePresets",
+  props: {
+    modelValue: {},
+    presets: { default: () => [] },
+    timeZone: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const blueseaConfig = useBlueseaConfig();
+    const actualTimeZone = computed(() => props.timeZone || blueseaConfig.timeZone);
+    const currentPreset = ref();
+    const presetSelected = (value) => {
+      const range = value ? createDateRangeFromPreset(value, actualTimeZone.value) : void 0;
+      emit("update:modelValue", range, value);
+    };
+    const findPreset2 = (range) => {
+      return props.presets.find((preset) => {
+        const presetValue = createDateRangeFromPreset(preset, actualTimeZone.value);
+        return range?.from === presetValue.from && range?.to === presetValue.to;
+      });
+    };
+    watch(
+      () => props.modelValue,
+      () => {
+        currentPreset.value = findPreset2(props.modelValue);
+      },
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return __props.presets && __props.presets.length > 0 ? (openBlock(), createBlock(unref(BSRadioButtonGroup), {
+        key: 0,
+        modelValue: currentPreset.value,
+        "onUpdate:modelValue": [
+          _cache[0] || (_cache[0] = ($event) => currentPreset.value = $event),
+          presetSelected
+        ],
+        items: __props.presets,
+        "label-provider": (item) => item.caption,
+        class: "button-group-style nowrap",
+        name: "dateRangePreset"
+      }, null, 8, ["modelValue", "items", "label-provider"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$1 = {
+  key: 0,
+  class: "date-filters .bs-layout-vertical mr-16"
+};
+const _hoisted_2$1 = ["onClick"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "BSDateRangeFilters",
+  props: {
+    dateFilter: {},
+    modelValue: {},
+    captionMinWidth: { default: "140px" },
+    dateFormat: {},
+    popupDateFormat: {},
+    popupStartYear: {},
+    popupEndYear: {},
+    filterWidth: {},
+    presets: {},
+    resolution: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const dateFilterValues = ref([]);
+    const resetDateFilter = () => {
+      const items = props.dateFilter?.filterItems;
+      if (items && items.length > 0) {
+        let values = void 0;
+        if (props.modelValue && props.modelValue.filters.length > 0) {
+          const validPropertyIds = items.map((item) => item.propertyId);
+          values = props.modelValue.filters.filter((filter) => filter instanceof BetweenDateFilter).map((filter) => filter).map((filter) => ({
+            propertyId: filter.name,
+            value: {
+              from: filter.fromValue ? String(filter.fromValue) : void 0,
+              // string 타입으로 가정함
+              to: filter.toValue ? String(filter.toValue) : void 0
+              // string 타입으로 가정함
+            }
+          })).filter((value) => validPropertyIds.includes(value.propertyId));
+        }
+        if (!values || values.length === 0) {
+          values = [
+            {
+              propertyId: items[0].propertyId,
+              value: {}
+            }
+          ];
+        }
+        if (JSON.stringify(values) !== JSON.stringify(dateFilterValues.value)) {
+          dateFilterValues.value = values;
+        }
+      }
+    };
+    watch(
+      () => props.modelValue,
+      () => resetDateFilter(),
+      { immediate: true }
+    );
+    const setDateFilterPropertyId = (index, propertyId) => {
+      const item = dateFilterValues.value[index];
+      if (propertyId) item.propertyId = propertyId;
+      emitValue();
+    };
+    const setDateFilterValue = (index, value, preset) => {
+      const item = dateFilterValues.value[index];
+      item.value = value || {};
+      item.preset = preset;
+      emitValue();
+    };
+    const addDateFilter = () => {
+      const dateFilterItems = props.dateFilter?.filterItems || [];
+      if (dateFilterValues.value.length < dateFilterItems.length) {
+        const selectedPropertyIds = dateFilterValues.value.map(
+          (value) => value.propertyId
+        );
+        const notSelected = dateFilterItems.filter(
+          (item) => !selectedPropertyIds.includes(item.propertyId)
+        );
+        if (notSelected.length > 0) {
+          dateFilterValues.value.push({
+            propertyId: notSelected[0].propertyId,
+            value: {}
+          });
+        }
+      }
+    };
+    const removeDateFilter = (index) => {
+      if (index >= 0 && index < dateFilterValues.value.length) {
+        dateFilterValues.value.splice(index, 1);
+        emitValue();
+      }
+    };
+    const emitValue = () => {
+      const filters = dateFilterValues.value.map(
+        (item) => new BetweenDateFilterWithPreset(
+          item.propertyId,
+          item.value.from,
+          item.value.to,
+          item.preset
+        )
+      );
+      const and = filters.length > 0 ? andFilter(filters) : void 0;
+      if (props.modelValue?.toString() !== and?.toString()) {
+        emit("update:modelValue", and);
+      }
+    };
+    const dateFormatOfFilterItem = (propertyId) => {
+      return props.dateFilter.filterItems.find((item) => item.propertyId === propertyId)?.dateFormat || props.dateFormat;
+    };
+    const popupDateFormatOfFilterItem = (propertyId) => {
+      return props.dateFilter.filterItems.find((item) => item.propertyId === propertyId)?.popupDateFormat || props.popupDateFormat;
+    };
+    const timeZoneOfFilterItem = (propertyId) => {
+      return props.dateFilter.filterItems.find(
+        (item) => item.propertyId === propertyId
+      )?.timeZone;
+    };
+    const filterWidthOfFilterItem = (propertyId) => {
+      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"
+          }, [
+            index === 0 ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass([{
+                disabled: dateFilterValues.value.length >= __props.dateFilter.filterItems.length
+              }, "font-icon bs-clickable mr-4"]),
+              "data-id": "addDateFilterBtn",
+              onClick: addDateFilter
+            }, "add", 2)) : (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: "font-icon bs-clickable mr-4",
+              "data-id": "removeDateFilterBtn",
+              onClick: ($event) => removeDateFilter(index)
+            }, "remove", 8, _hoisted_2$1)),
+            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, {
+              "display-format": dateFormatOfFilterItem(item.propertyId),
+              "from-id": `${item.propertyId}From`,
+              "model-value": item.value,
+              "name-from": `${item.propertyId}From`,
+              "name-to": `${item.propertyId}To`,
+              "popup-display-format": popupDateFormatOfFilterItem(item.propertyId),
+              "popup-end-year": __props.popupEndYear,
+              "popup-start-year": __props.popupStartYear,
+              resolution: __props.resolution,
+              "time-zone": timeZoneOfFilterItem(item.propertyId),
+              "to-id": `${item.propertyId}To`,
+              width: filterWidthOfFilterItem(item.propertyId),
+              "onUpdate:modelValue": ($event) => setDateFilterValue(index, $event)
+            }, null, 8, ["display-format", "from-id", "model-value", "name-from", "name-to", "popup-display-format", "popup-end-year", "popup-start-year", "resolution", "time-zone", "to-id", "width", "onUpdate:modelValue"]),
+            createVNode(_sfc_main$3, {
+              modelValue: item.value,
+              "onUpdate:modelValue": [
+                ($event) => item.value = $event,
+                (value, preset) => setDateFilterValue(index, value, preset)
+              ],
+              presets: __props.presets,
+              "time-zone": timeZoneOfFilterItem(item.propertyId),
+              class: "ml-4"
+            }, null, 8, ["modelValue", "onUpdate:modelValue", "presets", "time-zone"])
+          ]);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+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({
+  __name: "BSGridLookup",
+  props: {
+    gridId: {},
+    config: {},
+    modelValue: {},
+    dateRangePresets: {},
+    dateFilterCaptionMinWidth: {},
+    dateFilterDateFormat: { default: "YYYY-MM-DD HH:mm" },
+    dateFilterResolution: { default: "DAY" },
+    dateFilterPopupDateFormat: {},
+    dateFilterWidth: {},
+    dateFilterPopupStartYear: {},
+    dateFilterPopupEndYear: {},
+    keyword: {},
+    gridPreferenceDateFilterValues: {}
+  },
+  emits: ["update:modelValue", "search"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const textFilterValue = ref();
+    const dateFilterValue = ref();
+    const makeFilters = () => {
+      const filters = [];
+      if (textFilterValue.value) filters.push(textFilterValue.value);
+      if (dateFilterValue.value) {
+        dateFilterValue.value.filters.filter((filter) => !filter.isEmpty()).forEach((filter) => filters.push(filter));
+      }
+      return filters;
+    };
+    const emitUpdateModelValue = () => {
+      emit("update:modelValue", makeFilters());
+    };
+    const emitSearch = () => {
+      emit("search", makeFilters());
+    };
+    const emitUpdateModelValueAndSearch = () => {
+      emitUpdateModelValue();
+      emitSearch();
+    };
+    const blueseaConfig = useBlueseaConfig();
+    const findDateFilterTimeZone = (name, dateFilter) => {
+      return dateFilter?.filterItems.find((f) => f.propertyId === name)?.timeZone || blueseaConfig.timeZone;
+    };
+    watch(
+      () => props.gridPreferenceDateFilterValues,
+      () => {
+        if (props.gridPreferenceDateFilterValues && props.gridPreferenceDateFilterValues.filters && props.gridPreferenceDateFilterValues.filters.length > 0) {
+          const filters = props.gridPreferenceDateFilterValues.filters.map((filter) => {
+            const f = filter;
+            if (f.name && (f.fromValue || f.toValue)) {
+              if (f.presetKey) {
+                const presets = props.dateRangePresets || //blueseaConfig.componentConfig.gridLookup?.dateRangePresets ||
+                [];
+                const timeZone = findDateFilterTimeZone(
+                  f.name,
+                  props.config?.dateFilter
+                );
+                return BetweenDateFilterWithPreset.createFromPresetKey(
+                  f.name,
+                  f.presetKey,
+                  presets,
+                  timeZone
+                );
+              } else {
+                return new BetweenDateFilterWithPreset(
+                  f.name,
+                  f.fromValue,
+                  f.toValue
+                );
+              }
+            }
+          }).filter(notNull);
+          if (filters.length > 0) {
+            dateFilterValue.value = andFilter(filters);
+            emitUpdateModelValue();
+          }
+        }
+      }
+    );
+    const saveSearchCondition = async () => {
+    };
+    const resetSearchCondition = () => {
+      textFilterValue.value = void 0;
+      dateFilterValue.value = void 0;
+      emitUpdateModelValueAndSearch();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.config?.textFilter ? (openBlock(), createBlock(_sfc_main$4, {
+          key: 0,
+          modelValue: textFilterValue.value,
+          "onUpdate:modelValue": [
+            _cache[0] || (_cache[0] = ($event) => textFilterValue.value = $event),
+            emitUpdateModelValueAndSearch
+          ],
+          keyword: __props.keyword,
+          "text-filter-items": __props.config.textFilter.filterItems,
+          class: "mr-16"
+        }, null, 8, ["modelValue", "keyword", "text-filter-items"])) : createCommentVNode("", true),
+        __props.config?.dateFilter ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 1,
+          modelValue: dateFilterValue.value,
+          "onUpdate:modelValue": [
+            _cache[1] || (_cache[1] = ($event) => dateFilterValue.value = $event),
+            emitUpdateModelValueAndSearch
+          ],
+          "caption-min-width": __props.dateFilterCaptionMinWidth,
+          "date-filter": __props.config.dateFilter,
+          "date-format": __props.dateFilterDateFormat,
+          "filter-width": __props.dateFilterWidth,
+          "popup-date-format": __props.dateFilterPopupDateFormat,
+          "popup-end-year": __props.dateFilterPopupEndYear,
+          "popup-start-year": __props.dateFilterPopupStartYear,
+          presets: __props.dateRangePresets,
+          resolution: __props.dateFilterResolution
+        }, null, 8, ["modelValue", "caption-min-width", "date-filter", "date-format", "filter-width", "popup-date-format", "popup-end-year", "popup-start-year", "presets", "resolution"])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(unref(BSButton), {
+            caption: "Search",
+            class: "blue",
+            "left-icon": "search",
+            onClick: emitSearch
+          }),
+          __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
+          })
+        ])
+      ]);
+    };
+  }
+});
+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$3 as BSDateRangePresets,
+  _sfc_main$7 as BSGrid,
+  _sfc_main$d as BSGridCell,
+  BSGridCellCheckbox,
+  _sfc_main$9 as BSGridCellDragHandle,
+  _sfc_main$a as BSGridCellEdit,
+  _sfc_main$c as BSGridCellSerialNo,
+  _sfc_main$6 as BSGridColumnSettingModal,
+  _sfc_main$5 as BSGridControl,
+  BSGridHeaderCell,
+  _sfc_main$f as BSGridHeaderCellCheckbox,
+  BSGridHeaderCellResizeHandle,
+  BSGridHeaderCellSerialNo,
+  _sfc_main$1 as BSGridLookup,
+  _sfc_main$8 as BSGridRow,
+  _sfc_main$4 as BSTextFilter,
+  BetweenDateFilter,
+  BetweenDateFilterWithPreset,
+  BetweenFilter,
+  DEFAULT_GRID_COLUMN_WIDTH,
+  EditableInputGridHandlerImpl,
+  EditablePageGridHandlerImpl,
+  EditingRows,
+  EqualFilter,
+  GridHandlerEditableSupport,
+  GridHandlerSelectDeleteSupport,
+  InFilter,
+  InputGridHandlerImpl,
+  IsNotNullFilter,
+  IsNullFilter,
+  LikeFilter,
+  LocalStorageGridPreferenceStore,
+  NotFilter,
+  OrFilter,
+  PageGridHandlerImpl,
+  PaginatedList,
+  SearchParam,
+  acceptFilter,
+  andFilter,
+  betweenDateFilter,
+  betweenFilter,
+  convertDateRangePresetKey,
+  createDateRangeFromPreset,
+  createInputGridHandler,
+  createPageGridHandler,
+  defaultCellFormatter,
+  editComponentSlotName,
+  equalFilter,
+  filterSlotName,
+  inFilter,
+  isNotNullFilter,
+  isNullFilter,
+  likeFilter,
+  mergeColumnSettings,
+  mergeSameValueVertical,
+  nameFilterCreator,
+  notFilter,
+  orFilter,
+  resolveMoment,
+  setFixedCellLeftStyle,
+  styleClassToObject,
+  styleCssToObject,
+  vDragSupport,
+  vDropSupport
+};