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

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

@@ -0,0 +1,3315 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("dayjs"), require("@g1cloud/open-bluesea-core")) : typeof define === "function" && define.amd ? define(["exports", "vue", "dayjs", "@g1cloud/open-bluesea-core"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.OpenBlueseaGrid = {}, global.Vue, global.dayjs, global.OpenBlueseaCore));
+})(this, (function(exports2, vue, dayjs, openBlueseaCore) {
+  "use strict";
+  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(openBlueseaCore.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(openBlueseaCore.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(openBlueseaCore.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 = vue.markRaw(new SearchParam());
+    selectDeleteSupport;
+    grid;
+    gridEventListener;
+    control;
+    controlEventListener;
+    lookup;
+    lookupEventListener;
+    preferenceLoader;
+    constructor(option) {
+      this.option = vue.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 = vue.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 = vue.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 = vue.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 = vue.reactive({});
+    preferenceLoader;
+    constructor(option) {
+      this.option = vue.markRaw(option);
+      this.grid = vue.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 = vue.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 = vue.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 = vue.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 = vue.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, openBlueseaCore.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 openBlueseaCore.formatUtil.formatNumber(Number(value));
+    } else if (column.cellType === "PERCENTAGE") {
+      return openBlueseaCore.formatUtil.formatPercent(Number(value));
+    } else {
+      return value;
+    }
+  };
+  const setFixedCellLeftStyle = async (table) => {
+    if (table) {
+      await vue.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__ */ vue.defineComponent({
+    __name: "BSGridHeaderCellResizeHandle",
+    props: {
+      column: {}
+    },
+    emits: ["columnResized"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      let startPosition = void 0;
+      let deltaX = vue.ref(0);
+      let startWidth = 0;
+      const resizeGuideHeight = vue.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 = vue.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 vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "resizeHandle",
+          ref: resizeHandle,
+          class: "resize-handle",
+          onPointerdown: startResize,
+          onPointermove: doResize,
+          onPointerup: endResize
+        }, [
+          vue.withDirectives(vue.createElementVNode("div", {
+            style: vue.normalizeStyle({ transform: `translateX(${vue.unref(deltaX)}px)`, height: resizeGuideHeight.value }),
+            class: "resize-guide"
+          }, null, 4), [
+            [vue.vShow, vue.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__ */ vue.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 = vue.computed(() => {
+        return {
+          minWidth: `${props.column.render.width}px`,
+          maxWidth: `${props.column.render.width}px`
+          // left 는 BSGrid 의 onMounted 에서 설정함
+        };
+      });
+      const styleCss = vue.computed(() => {
+        return styleCssToObject(props.column.headerCellStyleCss);
+      });
+      const styleClass = vue.computed(() => {
+        return styleClassToObject(props.column.headerCellStyleClass);
+      });
+      const ascending = vue.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 = vue.useSlots();
+      const hasFilter = vue.computed(() => !!slots.filter);
+      const contextMenu = openBlueseaCore.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 vue.openBlock(), vue.createElementBlock("th", {
+          class: vue.normalizeClass({ fixed: __props.column.render.fixed, "has-filter": hasFilter.value }),
+          "data-property-id": __props.column.propertyId,
+          style: vue.normalizeStyle(thStyleCss.value),
+          onContextmenu: vue.withModifiers(showContextMenu, ["prevent", "stop"])
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass([styleClass.value, "position-relative"]),
+            style: vue.normalizeStyle(styleCss.value)
+          }, [
+            vue.createElementVNode("div", _hoisted_2$8, [
+              vue.createElementVNode("span", {
+                textContent: vue.toDisplayString(__props.column.caption),
+                class: "grow text-truncate"
+              }, null, 8, _hoisted_3$4),
+              __props.column.sortable ? (vue.openBlock(), vue.createElementBlock("span", {
+                key: 0,
+                class: vue.normalizeClass([{
+                  "text-gray-400": ascending.value === void 0,
+                  descending: !ascending.value
+                }, "sort-icon font-icon bs-clickable"]),
+                onClick: sort,
+                textContent: vue.toDisplayString(ascending.value === void 0 ? "swap_vert" : "straight")
+              }, null, 10, _hoisted_4$4)) : vue.createCommentVNode("", true)
+            ]),
+            vue.renderSlot(_ctx.$slots, "filter", {}, void 0, true),
+            vue.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__ */ vue.defineComponent({
+    __name: "BSGridHeaderCellCheckbox",
+    props: {
+      selectedRowCount: {}
+    },
+    emits: ["click"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const checked = vue.computed(() => props.selectedRowCount > 0);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("th", {
+          class: vue.normalizeClass([{ checked: checked.value }, "fixed func-cell"]),
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+        }, [
+          vue.createElementVNode("div", _hoisted_1$c, [
+            vue.createElementVNode("span", _hoisted_2$7, vue.toDisplayString(checked.value ? "check_box" : "check_box_outline_blank"), 1)
+          ])
+        ], 2);
+      };
+    }
+  });
+  const _sfc_main$e = {};
+  const _hoisted_1$b = { class: "fixed func-cell serial-no min-w-48" };
+  function _sfc_render(_ctx, _cache) {
+    return vue.openBlock(), vue.createElementBlock("th", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
+      vue.createElementVNode("div", null, [
+        vue.createElementVNode("span", { class: "font-icon" }, "numbers")
+      ], -1)
+    ])]);
+  }
+  const BSGridHeaderCellSerialNo = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render]]);
+  const _hoisted_1$a = ["data-property-id"];
+  const _sfc_main$d = /* @__PURE__ */ vue.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 = vue.useSlots();
+      const tdStyleCss = vue.computed(() => {
+        return {
+          minWidth: `${props.column.render.width}px`,
+          maxWidth: `${props.column.render.width}px`
+          // left 는 BSGrid 의 onMounted 에서 설정함
+        };
+      });
+      const tdStyleClass = vue.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 = vue.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 = vue.computed(() => {
+        return defaultCellFormatter(props.column, cellValue.value);
+      });
+      const clickTd = () => {
+        if (props.selectOnClick && !props.disableSelection) {
+          emit("toggleSelection", props.column);
+        }
+      };
+      const cellDiv = vue.ref();
+      const tooltipText = vue.ref();
+      vue.watch(
+        () => props.column.render.width,
+        async () => {
+          await vue.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 vue.openBlock(), vue.createElementBlock("td", {
+          class: vue.normalizeClass(tdStyleClass.value),
+          "data-property-id": __props.column.propertyId,
+          style: vue.normalizeStyle(tdStyleCss.value),
+          onClick: clickTd
+        }, [
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            ref_key: "cellDiv",
+            ref: cellDiv,
+            class: vue.normalizeClass([__props.column.cellStyleClass, "text-nowrap text-ellipsis"]),
+            style: vue.normalizeStyle(__props.column.cellStyleCss)
+          }, [
+            __props.editing ? vue.renderSlot(_ctx.$slots, `${__props.column.templateId}Edit`, {
+              key: 0,
+              cell: cellValue.value,
+              propertyId: __props.column.propertyId,
+              row: __props.row
+            }, () => [
+              vue.renderSlot(_ctx.$slots, __props.column.templateId, {
+                cell: cellValue.value,
+                propertyId: __props.column.propertyId,
+                row: __props.row
+              }, () => [
+                vue.createTextVNode(vue.toDisplayString(formattedCellValue.value), 1)
+              ])
+            ]) : vue.renderSlot(_ctx.$slots, __props.column.templateId, {
+              key: 1,
+              cell: cellValue.value,
+              propertyId: __props.column.propertyId,
+              row: __props.row
+            }, () => [
+              vue.createTextVNode(vue.toDisplayString(formattedCellValue.value), 1)
+            ])
+          ], 6)), [
+            [vue.unref(openBlueseaCore.vTooltip), { content: tooltipText.value }]
+          ])
+        ], 14, _hoisted_1$a);
+      };
+    }
+  });
+  const _hoisted_1$9 = { class: "fixed func-cell serial-no" };
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+    __name: "BSGridCellSerialNo",
+    props: {
+      serialNo: {}
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$9, [
+          vue.createElementVNode("div", null, vue.toDisplayString(__props.serialNo), 1)
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$8 = { class: "font-icon" };
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+    __name: "BSGridCellCheckbox",
+    props: {
+      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 vue.openBlock(), vue.createElementBlock("td", {
+          class: vue.normalizeClass([{ checked: __props.checked, disabled: __props.disabled }, "fixed func-cell"]),
+          onClick: toggleCheckbox
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass([{ "bs-clickable": !__props.disabled }, "checkbox"])
+          }, [
+            vue.createElementVNode("div", _hoisted_1$8, vue.toDisplayString(__props.checked ? "check_box" : "check_box_outline_blank"), 1)
+          ], 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__ */ vue.defineComponent({
+    __name: "BSGridCellEdit",
+    props: {
+      isEditing: { type: Boolean },
+      showEditIcon: { type: Boolean }
+    },
+    emits: ["toggleEditMode"],
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("td", _hoisted_1$7, [
+          __props.showEditIcon ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => emit("toggleEditMode"), ["stop"]))
+          }, [
+            vue.createElementVNode("span", _hoisted_2$6, vue.toDisplayString(__props.isEditing ? "replay" : "stylus"), 1)
+          ])) : vue.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 && !openBlueseaCore.componentUtil.isCursorInElement(event, target) && !openBlueseaCore.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__ */ vue.defineComponent({
+    __name: "BSGridCellDragHandle",
+    props: {
+      rowIndex: {}
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("td", _hoisted_1$6, [..._cache[0] || (_cache[0] = [
+          vue.createElementVNode("div", { class: "font-icon" }, "drag_handle", -1)
+        ])])), [
+          [vue.unref(vDragSupport), {
+            draggable: true,
+            sourceProvider: (td) => td.parentElement,
+            keyProvider: () => __props.rowIndex,
+            sourceType: "grid-row"
+          }]
+        ]);
+      };
+    }
+  });
+  const _sfc_main$8 = /* @__PURE__ */ vue.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 = vue.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 = openBlueseaCore.provideSavePoint();
+      vue.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 }
+      );
+      openBlueseaCore.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 vue.withDirectives((vue.openBlock(), vue.createElementBlock("tr", {
+          class: vue.normalizeClass([{ selected: isRowSelected.value }, "data-row"]),
+          onDblclick: vue.withModifiers(enterEditMode, ["stop"])
+        }, [
+          __props.showDragHandle ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+            key: 0,
+            "row-index": __props.rowIndex
+          }, null, 8, ["row-index"])) : vue.createCommentVNode("", true),
+          __props.showCheckbox ? (vue.openBlock(), vue.createBlock(BSGridCellCheckbox, {
+            key: 1,
+            checked: isRowSelected.value,
+            disabled: __props.disableSelection || __props.disableUnselectedRowsSelection && !isRowSelected.value,
+            onClick: toggleSelection
+          }, null, 8, ["checked", "disabled"])) : vue.createCommentVNode("", true),
+          __props.editable && !__props.hideEditIcon ? (vue.openBlock(), vue.createBlock(_sfc_main$a, {
+            key: 2,
+            "is-editing": __props.isEditing,
+            "show-edit-icon": __props.rowEditable,
+            onToggleEditMode: toggleEditMode
+          }, null, 8, ["is-editing", "show-edit-icon"])) : vue.createCommentVNode("", true),
+          __props.showSerial ? (vue.openBlock(), vue.createBlock(_sfc_main$c, {
+            key: 3,
+            "serial-no": __props.rowIndex + (__props.pageInfo?.offset || 0) + 1
+          }, null, 8, ["serial-no"])) : vue.createCommentVNode("", true),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.visibleColumns, (column) => {
+            return vue.openBlock(), vue.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
+            }, vue.createSlots({ _: 2 }, [
+              _ctx.$slots[column.templateId] ? {
+                name: column.templateId,
+                fn: vue.withCtx(({ row, cell, propertyId }) => [
+                  vue.renderSlot(_ctx.$slots, column.templateId, {
+                    cell,
+                    propertyId,
+                    row
+                  })
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots[`${column.templateId}Edit`] ? {
+                name: `${column.templateId}Edit`,
+                fn: vue.withCtx(({ row, cell, propertyId }) => [
+                  vue.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)), [
+          [vue.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__ */ vue.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: () => openBlueseaCore.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 = vue.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: vue.reactive({
+            width: col.width || DEFAULT_GRID_COLUMN_WIDTH,
+            fixed: index < props.fixedColumnCount
+          })
+        }));
+      });
+      const fixedColumns = vue.computed(() => props.fixedColumnCount);
+      vue.watch(
+        () => [JSON.stringify(props.columnSettings), props.fixedColumnCount],
+        async () => {
+          await setFixedCellLeftStyle(table.value);
+          if (props.data) emit("tableChanged", table.value);
+        }
+      );
+      const internalSelectedRows = props.selectedRows || vue.reactive(/* @__PURE__ */ new Set());
+      const disableUnselectedRowsSelection = vue.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 = vue.ref();
+      const handleOffsetChange = (offset, currentPageInfo) => {
+        emit("offsetChanged", offset, currentPageInfo);
+      };
+      const internalEditingRows = props.editingRows || vue.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 vue.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 });
+            }
+          });
+        }
+      };
+      vue.watch(
+        () => [props.alwaysEditing, props.data.length],
+        () => initEditing(),
+        { immediate: true }
+      );
+      const internalSorts = props.sorts || vue.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);
+        }
+      };
+      vue.watch(
+        () => [props.data, props.loading],
+        async () => {
+          await clearEditing();
+          clearSelection();
+          initEditing();
+          await setFixedCellLeftStyle(table.value);
+        },
+        { immediate: true }
+      );
+      vue.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 = openBlueseaCore.useSavePoint();
+      if (parentSavePoint) {
+        const childSavePoint = {
+          set() {
+          },
+          rollback() {
+          },
+          isModified() {
+            return !!internalEditingRows.getRows().find((row) => row.savePoint?.isModified());
+          }
+        };
+        parentSavePoint.addChild(childSavePoint);
+        vue.onBeforeUnmount(() => parentSavePoint.removeChild(childSavePoint));
+        openBlueseaCore.cancelProvidedSavePoint();
+      }
+      const scrolledHorizontally = vue.ref(false);
+      const scrolledVertically = vue.ref(false);
+      vue.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(openBlueseaCore.notNull);
+        }
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass([{
+            "h-scrolled": scrolledHorizontally.value,
+            "v-scrolled": scrolledVertically.value
+          }, "bs-grid min-h-128"]),
+          style: vue.normalizeStyle({ width: __props.width, height: __props.height })
+        }, [
+          vue.createElementVNode("div", _hoisted_1$5, [
+            vue.createElementVNode("table", {
+              ref_key: "table",
+              ref: table
+            }, [
+              vue.createElementVNode("thead", null, [
+                vue.createElementVNode("tr", _hoisted_2$5, [
+                  __props.showDragHandle ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_3$3, [..._cache[0] || (_cache[0] = [
+                    vue.createElementVNode("div", null, null, -1)
+                  ])])) : vue.createCommentVNode("", true),
+                  __props.showCheckbox ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
+                    key: 1,
+                    "selected-row-count": vue.unref(internalSelectedRows).size,
+                    onClick: toggleAllSelection
+                  }, null, 8, ["selected-row-count"])) : vue.createCommentVNode("", true),
+                  __props.editable && !__props.hideEditIcon ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$3, [..._cache[1] || (_cache[1] = [
+                    vue.createElementVNode("div", null, null, -1)
+                  ])])) : vue.createCommentVNode("", true),
+                  __props.showSerial ? (vue.openBlock(), vue.createBlock(BSGridHeaderCellSerialNo, { key: 3 })) : vue.createCommentVNode("", true),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(internalColumns.value, (column) => {
+                    return vue.openBlock(), vue.createBlock(BSGridHeaderCell, {
+                      key: column.propertyId,
+                      column,
+                      columns: internalColumns.value,
+                      "extension-handler": extensionHandler,
+                      "grid-id": __props.gridId,
+                      sorts: vue.unref(internalSorts),
+                      onSort: changeSort,
+                      onColumnResized: columnResized,
+                      onToggleColumnFixed: toggleColumnFixed,
+                      onHideColumn: hideColumn,
+                      onRestoreAllColumnSettings: restoreAllColumnSettings
+                    }, vue.createSlots({ _: 2 }, [
+                      _ctx.$slots[vue.unref(filterSlotName)(column)] ? {
+                        name: "filter",
+                        fn: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, vue.unref(filterSlotName)(column))
+                        ]),
+                        key: "0"
+                      } : void 0
+                    ]), 1032, ["column", "columns", "grid-id", "sorts"]);
+                  }), 128))
+                ])
+              ]),
+              vue.createElementVNode("tbody", null, [
+                __props.loading ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_5$2, [
+                  vue.createElementVNode("td", null, [
+                    vue.createVNode(vue.unref(openBlueseaCore.BSLoadingIcon), { class: "position-absolute pa-8" })
+                  ])
+                ])) : __props.data && __props.data.length === 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$1, [
+                  vue.createElementVNode("td", null, [
+                    vue.createElementVNode("div", {
+                      textContent: vue.toDisplayString(__props.emptyMessage),
+                      class: "position-absolute text-nowrap pa-8"
+                    }, null, 8, _hoisted_7$1)
+                  ])
+                ])) : __props.data ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(__props.data, (row, index) => {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$8, {
+                    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": vue.unref(internalEditingRows).isEditingRow(row),
+                    "page-info": __props.pageInfo,
+                    row,
+                    "row-editable": !__props.rowEditPolicy || __props.rowEditPolicy(row, vue.unref(internalEditingRows)),
+                    "row-index": index,
+                    "row-key": __props.keyProvider(row),
+                    "select-on-click": __props.selectOnClick,
+                    "selected-rows": vue.unref(internalSelectedRows),
+                    "show-checkbox": __props.showCheckbox,
+                    "show-drag-handle": __props.showDragHandle,
+                    "show-serial": __props.showSerial,
+                    style: vue.normalizeStyle({
+                      display: __props.rowDisplayPolicy?.(row) === false ? "none" : void 0
+                    }),
+                    "visible-columns": internalColumns.value,
+                    onToggleSelection: toggleSelection,
+                    onEnterEditMode: enterEditMode,
+                    onCancelEditMode: cancelEditMode,
+                    onRowMoved: rowMoved
+                  }, vue.createSlots({ _: 2 }, [
+                    vue.renderList(Object.keys(_ctx.$slots), (slot, _index) => {
+                      return {
+                        name: slot,
+                        fn: vue.withCtx(({ row: row2, cell, propertyId }) => [
+                          vue.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)) : vue.createCommentVNode("", true)
+              ])
+            ], 512)
+          ]),
+          __props.showPageNavigation ? (vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.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"])) : vue.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__ */ vue.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 = vue.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(openBlueseaCore.notNull);
+        origColumns.forEach((orig) => {
+          result.push({ ...orig, width: orig.width });
+        });
+        return result;
+      };
+      vue.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 vue.nextTick();
+        const fixedIndex = !value && oldFixedIndex === 0 && rowIndex === 0 ? -1 : rowIndex;
+        editingColumns.value.forEach((col, idx) => col.fixed = idx <= fixedIndex);
+      };
+      const modalHandle = openBlueseaCore.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 vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSModalFrame), { title: __props.columnSettingTitle }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$7, vue.mergeProps({
+              columns: settingColumns,
+              height: "100%",
+              "show-drag-handle": "",
+              "show-serial": ""
+            }, vue.unref(gridHandler).grid, vue.toHandlers(vue.unref(gridHandler).gridEventListener)), {
+              visible: vue.withCtx(({ row }) => [
+                vue.createElementVNode("div", _hoisted_1$4, [
+                  vue.createVNode(vue.unref(openBlueseaCore.BSCheckbox), {
+                    "model-value": !row.hidden,
+                    class: "reverted",
+                    "onUpdate:modelValue": (value) => row.hidden = !value
+                  }, null, 8, ["model-value", "onUpdate:modelValue"])
+                ])
+              ]),
+              fixed: vue.withCtx(({ row }) => [
+                vue.createElementVNode("div", _hoisted_2$4, [
+                  vue.createVNode(vue.unref(openBlueseaCore.BSCheckbox), {
+                    modelValue: row.fixed,
+                    "onUpdate:modelValue": [($event) => row.fixed = $event, ($event) => updateFixedColumn($event, row)],
+                    class: "reverted"
+                  }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                ])
+              ]),
+              width: vue.withCtx(({ row }) => [
+                vue.createVNode(vue.unref(openBlueseaCore.BSNumberInput), {
+                  modelValue: row.width,
+                  "onUpdate:modelValue": ($event) => row.width = $event,
+                  width: "100%"
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ]),
+              _: 1
+            }, 16)
+          ]),
+          buttons: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_3$2, [
+              vue.createElementVNode("div", null, [
+                vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+                  caption: "Restore Settings",
+                  "button-color": "gray",
+                  onClick: restore
+                })
+              ]),
+              vue.createElementVNode("div", _hoisted_4$2, [
+                vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+                  caption: "Cancel",
+                  onClick: close
+                }),
+                vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+                  caption: "OK",
+                  "button-color": "blue",
+                  onClick: save
+                })
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["title"]);
+      };
+    }
+  });
+  const BSGridColumnSettingModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    default: _sfc_main$6
+  }, Symbol.toStringTag, { value: "Module" }));
+  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__ */ vue.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 = vue.ref(props.limit || props.limitItems?.[0] || 100);
+      const selectedCount = vue.computed(() => props.selectedRows?.size || 0);
+      const formattedTotalCount = vue.computed(
+        () => openBlueseaCore.formatUtil.formatNumber(props.totalCount) || ""
+      );
+      const formattedSelectedCount = vue.computed(
+        () => openBlueseaCore.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 = openBlueseaCore.useModal();
+      const openSettingModal = () => {
+        modal.openModal({
+          component: vue.defineAsyncComponent(
+            () => Promise.resolve().then(() => BSGridColumnSettingModal)
+          ),
+          bind: {
+            columns: props.columns,
+            columnSettings: props.columnSettings,
+            fixedColumnCount: props.fixedColumnCount
+          },
+          on: {
+            settingChanged: (columnSettings, fixedColumnCount) => emit("settingChanged", columnSettings, fixedColumnCount)
+          }
+        });
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          __props.showSetting ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
+            vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+              caption: "Column Settings",
+              "data-id": "columnSettingBtn",
+              "left-icon": "data_table",
+              onClick: openSettingModal
+            })
+          ])) : vue.createCommentVNode("", true),
+          __props.showRefresh ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+            vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+              caption: "Refresh",
+              "data-id": "refreshBtn",
+              "left-icon": "sync",
+              onClick: refreshGrid
+            })
+          ])) : vue.createCommentVNode("", true),
+          __props.showClearFilter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
+            vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+              caption: "Clear Settings",
+              "data-id": "clearSettingBtn",
+              "left-icon": "filter_alt_off",
+              onClick: clearGridFilter
+            })
+          ])) : vue.createCommentVNode("", true),
+          __props.showAddButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+            vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+              caption: "Add Row",
+              "data-id": "addRowBtn",
+              "left-icon": "add",
+              onClick: _cache[0] || (_cache[0] = ($event) => emit("clickAdd"))
+            })
+          ])) : vue.createCommentVNode("", true),
+          __props.showRemoveButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+            vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+              caption: "Remove Row",
+              "data-id": "removeRowBtn",
+              "left-icon": "remove",
+              onClick: _cache[1] || (_cache[1] = ($event) => emit("clickRemove"))
+            })
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", null, [
+            _cache[3] || (_cache[3] = vue.createElementVNode("span", { textContent: "Total" }, null, -1)),
+            _cache[4] || (_cache[4] = vue.createTextVNode(": ", -1)),
+            vue.createElementVNode("span", {
+              "data-id": "totalCount",
+              textContent: vue.toDisplayString(formattedTotalCount.value)
+            }, null, 8, _hoisted_7)
+          ]),
+          selectedCount.value > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+            _cache[5] || (_cache[5] = vue.createElementVNode("span", { textContent: "Selected" }, null, -1)),
+            _cache[6] || (_cache[6] = vue.createTextVNode(": ", -1)),
+            vue.createElementVNode("span", {
+              "data-id": "selectedCount",
+              textContent: vue.toDisplayString(formattedSelectedCount.value)
+            }, null, 8, _hoisted_9)
+          ])) : vue.createCommentVNode("", true),
+          __props.showLimit ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
+            vue.createVNode(vue.unref(openBlueseaCore.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"])
+          ])) : vue.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__ */ vue.defineComponent({
+    __name: "BSTextFilter",
+    props: {
+      textFilterItems: { default: () => [] },
+      modelValue: {},
+      keyword: {}
+    },
+    emits: ["update:modelValue", "search"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const likeTextFilterItems = vue.computed(() => props.textFilterItems);
+      const inTextFilterItems = vue.computed(() => props.textFilterItems.filter((filter) => filter.allowMultiLineFilter));
+      const hasTextAreaFilterItem = vue.computed(() => inTextFilterItems.value.length > 0);
+      const filterMode = vue.ref("INPUT");
+      const changeFilterMode = (mode) => filterMode.value = mode;
+      const likeFilterItems = vue.computed(() => likeTextFilterItems.value.filter((item) => !item.filterCreator && item.filterType !== "NUMBER"));
+      const equalFilterItemPropertyIds = vue.computed(() => likeTextFilterItems.value.filter((item) => !item.filterCreator && item.filterType === "NUMBER").map((item) => item.propertyId));
+      const customFilterItems = vue.computed(() => likeTextFilterItems.value.filter((item) => item.filterCreator));
+      const inFilterItemPropertyIds = vue.computed(() => inTextFilterItems.value.map((filter) => filter.propertyId));
+      const 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 = vue.ref(getFilterKeyword(props.modelValue));
+      vue.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 = vue.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(openBlueseaCore.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);
+        }
+      };
+      vue.watch(
+        () => props.keyword,
+        () => {
+          inputText.value = props.keyword || "";
+          inputTextChanged();
+        },
+        { immediate: true }
+      );
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_2$2, [
+            vue.withDirectives(vue.createElementVNode("input", {
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputText.value = $event),
+              "data-id": "textFilterInput",
+              type: "text",
+              onChange: inputTextChanged,
+              onKeyup: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(() => {
+              }, ["prevent", "stop"]), ["enter"]))
+            }, null, 544), [
+              [vue.vModelText, inputText.value]
+            ]),
+            hasTextAreaFilterItem.value ? (vue.openBlock(), vue.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")) : vue.createCommentVNode("", true)
+          ], 512), [
+            [vue.vShow, filterMode.value === "INPUT"]
+          ]),
+          vue.withDirectives(vue.createElementVNode("div", _hoisted_3, [
+            vue.withDirectives(vue.createElementVNode("textarea", {
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => textareaText.value = $event),
+              "data-id": "textFilterTextarea",
+              onChange: textareaTextChanged
+            }, null, 544), [
+              [vue.vModelText, textareaText.value]
+            ]),
+            vue.createElementVNode("span", {
+              class: "font-icon bs-clickable mr-4 mt-5",
+              onClick: _cache[4] || (_cache[4] = ($event) => changeFilterMode("INPUT"))
+            }, "north")
+          ], 512), [
+            [vue.vShow, filterMode.value === "TEXTAREA"]
+          ]),
+          vue.createElementVNode("div", _hoisted_4, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filterMode.value === "INPUT" ? likeTextFilterItems.value : inTextFilterItems.value, (item) => {
+              return vue.openBlock(), vue.createElementBlock("span", {
+                key: item.propertyId,
+                textContent: vue.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(module2, exports3) {
+      !(function(t, i) {
+        module2.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(module2, exports3) {
+      !(function(t, e) {
+        module2.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__ */ vue.defineComponent({
+    __name: "BSDateRangePresets",
+    props: {
+      modelValue: {},
+      presets: { default: () => [] },
+      timeZone: {}
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const blueseaConfig = openBlueseaCore.useBlueseaConfig();
+      const actualTimeZone = vue.computed(() => props.timeZone || blueseaConfig.timeZone);
+      const currentPreset = vue.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;
+        });
+      };
+      vue.watch(
+        () => props.modelValue,
+        () => {
+          currentPreset.value = findPreset2(props.modelValue);
+        },
+        { immediate: true }
+      );
+      return (_ctx, _cache) => {
+        return __props.presets && __props.presets.length > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.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"])) : vue.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__ */ vue.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 = vue.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;
+          }
+        }
+      };
+      vue.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 = vue.resolveComponent("BSDateRangeFilter");
+        return __props.dateFilter.filterItems ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(dateFilterValues.value, (item, index) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: index,
+              class: "bs-layout-horizontal mb-4 flex-align-center"
+            }, [
+              index === 0 ? (vue.openBlock(), vue.createElementBlock("span", {
+                key: 0,
+                class: vue.normalizeClass([{
+                  disabled: dateFilterValues.value.length >= __props.dateFilter.filterItems.length
+                }, "font-icon bs-clickable mr-4"]),
+                "data-id": "addDateFilterBtn",
+                onClick: addDateFilter
+              }, "add", 2)) : (vue.openBlock(), vue.createElementBlock("span", {
+                key: 1,
+                class: "font-icon bs-clickable mr-4",
+                "data-id": "removeDateFilterBtn",
+                onClick: ($event) => removeDateFilter(index)
+              }, "remove", 8, _hoisted_2$1)),
+              vue.createVNode(vue.unref(openBlueseaCore.BSSelect), {
+                items: __props.dateFilter.filterItems,
+                "label-provider": (filter) => filter.caption,
+                "model-value": item.propertyId,
+                style: vue.normalizeStyle({ minWidth: __props.captionMinWidth }),
+                "value-provider": (filter) => filter.propertyId,
+                class: "mr-4",
+                "data-id": "filterItemSelect",
+                "onUpdate:modelValue": ($event) => setDateFilterPropertyId(index, $event)
+              }, null, 8, ["items", "label-provider", "model-value", "style", "value-provider", "onUpdate:modelValue"]),
+              vue.createVNode(_component_BSDateRangeFilter, {
+                "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"]),
+              vue.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))
+        ])) : vue.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__ */ vue.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 = vue.ref();
+      const dateFilterValue = vue.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 = openBlueseaCore.useBlueseaConfig();
+      const findDateFilterTimeZone = (name, dateFilter) => {
+        return dateFilter?.filterItems.find((f) => f.propertyId === name)?.timeZone || blueseaConfig.timeZone;
+      };
+      vue.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(openBlueseaCore.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          __props.config?.textFilter ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
+          __props.config?.dateFilter ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_2, [
+            vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+              caption: "Search",
+              class: "blue",
+              "left-icon": "search",
+              onClick: emitSearch
+            }),
+            __props.config?.dateFilter ? (vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSButton), {
+              key: 0,
+              caption: "Save",
+              class: "ml-4",
+              onClick: saveSearchCondition
+            })) : vue.createCommentVNode("", true),
+            vue.createVNode(vue.unref(openBlueseaCore.BSButton), {
+              caption: "Reset",
+              class: "ml-4",
+              onClick: resetSearchCondition
+            })
+          ])
+        ]);
+      };
+    }
+  });
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    __name: "BSDateRangeFilter",
+    props: {
+      idFrom: {},
+      idTo: {},
+      nameFrom: {},
+      nameTo: {},
+      modelValue: {},
+      disabled: { type: Boolean },
+      width: { default: "300px" },
+      resolution: { default: "DAY" },
+      displayFormat: {},
+      popupDisplayFormat: {},
+      popupStartYear: {},
+      popupEndYear: {},
+      timeZone: {}
+    },
+    emits: ["update:modelValue"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const fromValue = vue.ref();
+      const toValue = vue.ref();
+      vue.watch(
+        () => props.modelValue,
+        () => {
+          fromValue.value = props.modelValue?.from;
+          toValue.value = props.modelValue?.to;
+        },
+        { immediate: true }
+      );
+      const emitValue = () => {
+        const value = {
+          from: fromValue.value,
+          to: toValue.value
+        };
+        emit("update:modelValue", value);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(openBlueseaCore.BSDateRange), {
+          "from-value": fromValue.value,
+          "onUpdate:fromValue": [
+            _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
+            emitValue
+          ],
+          "to-value": toValue.value,
+          "onUpdate:toValue": [
+            _cache[1] || (_cache[1] = ($event) => toValue.value = $event),
+            emitValue
+          ],
+          "disabled-from": __props.disabled,
+          "disabled-to": __props.disabled,
+          "display-format": __props.displayFormat,
+          "id-from": __props.idFrom,
+          "id-to": __props.idTo,
+          "name-from": __props.nameFrom,
+          "name-to": __props.nameTo,
+          "popup-display-format": __props.popupDisplayFormat,
+          "popup-end-year": __props.popupEndYear,
+          "popup-start-year": __props.popupStartYear,
+          resolution: __props.resolution,
+          "time-zone": __props.timeZone,
+          "validate-date-order": false,
+          width: __props.width,
+          "hide-extra-date": ""
+        }, null, 8, ["from-value", "to-value", "disabled-from", "disabled-to", "display-format", "id-from", "id-to", "name-from", "name-to", "popup-display-format", "popup-end-year", "popup-start-year", "resolution", "time-zone", "width"]);
+      };
+    }
+  });
+  exports2.AbstractFilter = AbstractFilter;
+  exports2.AndFilter = AndFilter;
+  exports2.BSDateRangeFilter = _sfc_main;
+  exports2.BSDateRangeFilters = _sfc_main$2;
+  exports2.BSDateRangePresets = _sfc_main$3;
+  exports2.BSGrid = _sfc_main$7;
+  exports2.BSGridCell = _sfc_main$d;
+  exports2.BSGridCellCheckbox = BSGridCellCheckbox;
+  exports2.BSGridCellDragHandle = _sfc_main$9;
+  exports2.BSGridCellEdit = _sfc_main$a;
+  exports2.BSGridCellSerialNo = _sfc_main$c;
+  exports2.BSGridColumnSettingModal = _sfc_main$6;
+  exports2.BSGridControl = _sfc_main$5;
+  exports2.BSGridHeaderCell = BSGridHeaderCell;
+  exports2.BSGridHeaderCellCheckbox = _sfc_main$f;
+  exports2.BSGridHeaderCellResizeHandle = BSGridHeaderCellResizeHandle;
+  exports2.BSGridHeaderCellSerialNo = BSGridHeaderCellSerialNo;
+  exports2.BSGridLookup = _sfc_main$1;
+  exports2.BSGridRow = _sfc_main$8;
+  exports2.BSTextFilter = _sfc_main$4;
+  exports2.BetweenDateFilter = BetweenDateFilter;
+  exports2.BetweenDateFilterWithPreset = BetweenDateFilterWithPreset;
+  exports2.BetweenFilter = BetweenFilter;
+  exports2.DEFAULT_GRID_COLUMN_WIDTH = DEFAULT_GRID_COLUMN_WIDTH;
+  exports2.EditableInputGridHandlerImpl = EditableInputGridHandlerImpl;
+  exports2.EditablePageGridHandlerImpl = EditablePageGridHandlerImpl;
+  exports2.EditingRows = EditingRows;
+  exports2.EqualFilter = EqualFilter;
+  exports2.GridHandlerEditableSupport = GridHandlerEditableSupport;
+  exports2.GridHandlerSelectDeleteSupport = GridHandlerSelectDeleteSupport;
+  exports2.InFilter = InFilter;
+  exports2.InputGridHandlerImpl = InputGridHandlerImpl;
+  exports2.IsNotNullFilter = IsNotNullFilter;
+  exports2.IsNullFilter = IsNullFilter;
+  exports2.LikeFilter = LikeFilter;
+  exports2.LocalStorageGridPreferenceStore = LocalStorageGridPreferenceStore;
+  exports2.NotFilter = NotFilter;
+  exports2.OrFilter = OrFilter;
+  exports2.PageGridHandlerImpl = PageGridHandlerImpl;
+  exports2.PaginatedList = PaginatedList;
+  exports2.SearchParam = SearchParam;
+  exports2.acceptFilter = acceptFilter;
+  exports2.andFilter = andFilter;
+  exports2.betweenDateFilter = betweenDateFilter;
+  exports2.betweenFilter = betweenFilter;
+  exports2.convertDateRangePresetKey = convertDateRangePresetKey;
+  exports2.createDateRangeFromPreset = createDateRangeFromPreset;
+  exports2.createInputGridHandler = createInputGridHandler;
+  exports2.createPageGridHandler = createPageGridHandler;
+  exports2.defaultCellFormatter = defaultCellFormatter;
+  exports2.editComponentSlotName = editComponentSlotName;
+  exports2.equalFilter = equalFilter;
+  exports2.filterSlotName = filterSlotName;
+  exports2.inFilter = inFilter;
+  exports2.isNotNullFilter = isNotNullFilter;
+  exports2.isNullFilter = isNullFilter;
+  exports2.likeFilter = likeFilter;
+  exports2.mergeColumnSettings = mergeColumnSettings;
+  exports2.mergeSameValueVertical = mergeSameValueVertical;
+  exports2.nameFilterCreator = nameFilterCreator;
+  exports2.notFilter = notFilter;
+  exports2.orFilter = orFilter;
+  exports2.resolveMoment = resolveMoment;
+  exports2.setFixedCellLeftStyle = setFixedCellLeftStyle;
+  exports2.styleClassToObject = styleClassToObject;
+  exports2.styleCssToObject = styleCssToObject;
+  exports2.vDragSupport = vDragSupport;
+  exports2.vDropSupport = vDropSupport;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+}));