@g1cloud/bluesea 5.0.0-alpha.1

package/dist/bluesea.js

@@ -0,0 +1,2465 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, openBlock, createElementBlock, toDisplayString, ref, normalizeStyle, createElementVNode, withDirectives, mergeProps, toHandlers, vModelText, createCommentVNode, computed, watch, createVNode, useSlots, normalizeClass, renderSlot, Fragment, renderList, createBlock, Transition, withCtx, onMounted, onBeforeUnmount, withModifiers, withKeys, createTextVNode, reactive, nextTick, unref, vShow, inject, resolveComponent, provide, shallowReactive, markRaw, resolveDynamicComponent } from "vue";
+import dayjs from "dayjs";
+import { useRouter, useRoute } from "vue-router";
+const _hoisted_1$w = { class: "bs-button" };
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  __name: "BSButton",
+  props: {
+    caption: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", _hoisted_1$w, toDisplayString(_ctx.caption), 1);
+    };
+  }
+});
+const _hoisted_1$v = { class: "input-area" };
+const _hoisted_2$k = ["id", "autocomplete", "disabled", "maxlength", "name", "placeholder"];
+const _hoisted_3$f = {
+  key: 0,
+  class: "message"
+};
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  __name: "BSTextInput",
+  props: {
+    id: {},
+    placeholder: {},
+    name: {},
+    modelValue: {},
+    maxlength: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    width: { default: "200px" },
+    autocomplete: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const value = ref(props.modelValue);
+    const handlers = {
+      change: () => emit("update:modelValue", String(value.value || ""))
+    };
+    const messages = ref();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ width: _ctx.width }),
+        class: "bs-text-input"
+      }, [
+        createElementVNode("div", _hoisted_1$v, [
+          withDirectives(createElementVNode("input", mergeProps({
+            id: _ctx.id,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+            autocomplete: _ctx.autocomplete,
+            disabled: _ctx.disabled,
+            maxlength: _ctx.maxlength,
+            name: _ctx.name,
+            placeholder: _ctx.placeholder,
+            type: "text"
+          }, toHandlers(handlers, true)), null, 16, _hoisted_2$k), [
+            [vModelText, value.value]
+          ])
+        ]),
+        messages.value ? (openBlock(), createElementBlock("div", _hoisted_3$f)) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$u = { class: "input-area" };
+const _hoisted_2$j = ["id", "autocomplete", "disabled", "maxlength", "name", "placeholder"];
+const _hoisted_3$e = /* @__PURE__ */ createElementVNode("div", { class: "message-area" }, null, -1);
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  __name: "BSNumberInput",
+  props: {
+    id: {},
+    placeholder: {},
+    name: {},
+    modelValue: {},
+    maxlength: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    width: { default: "200px" },
+    autocomplete: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const value = ref(props.modelValue);
+    const handlers = {
+      change: () => emit("update:modelValue", value.value || void 0)
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ width: _ctx.width }),
+        class: "bs-number-input"
+      }, [
+        createElementVNode("div", _hoisted_1$u, [
+          withDirectives(createElementVNode("input", mergeProps({
+            id: _ctx.id,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+            autocomplete: _ctx.autocomplete,
+            disabled: _ctx.disabled,
+            maxlength: _ctx.maxlength,
+            name: _ctx.name,
+            placeholder: _ctx.placeholder,
+            pattern: "\\d*",
+            type: "text"
+          }, toHandlers(handlers, true)), null, 16, _hoisted_2$j), [
+            [vModelText, value.value]
+          ])
+        ]),
+        _hoisted_3$e
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$t = ["id", "disabled", "maxlength", "name", "placeholder", "value"];
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  __name: "InternalDateInput",
+  props: {
+    id: {},
+    placeholder: {},
+    name: {},
+    modelValue: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    resolution: {},
+    endTime: { type: Boolean },
+    displayFormat: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const VALUE_FORMAT = computed(() => {
+      if (props.resolution === "DAY")
+        return "YYYYMMDD";
+      else if (props.resolution === "HOUR")
+        return "YYYYMMDDHH";
+      else
+        return "YYYYMMDDHHMM";
+    });
+    const convertStringToDate = (str) => {
+      if (str) {
+        let value2 = dayjs(str, VALUE_FORMAT.value);
+        if (props.endTime) {
+          value2 = value2.endOf(props.resolution.toLowerCase());
+        }
+        return value2;
+      }
+    };
+    const convertDateToString = (date) => {
+      return date ? dayjs(date).format(VALUE_FORMAT.value) : "";
+    };
+    const focused = ref(false);
+    const value = ref(convertDateToString(props.modelValue));
+    const formattedValue = computed(() => {
+      var _a;
+      return ((_a = convertStringToDate(value.value)) == null ? void 0 : _a.format(props.displayFormat)) || "";
+    });
+    const maxlength = computed(() => 12);
+    const emitValue = (event) => {
+      const inputValue = event.target.value;
+      value.value = inputValue;
+      const date = convertStringToDate(inputValue);
+      emit("update:modelValue", date);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("input", {
+        id: _ctx.id,
+        disabled: _ctx.disabled,
+        maxlength: maxlength.value,
+        name: _ctx.name,
+        placeholder: _ctx.placeholder,
+        value: focused.value ? value.value : formattedValue.value,
+        type: "text",
+        onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false),
+        onChange: emitValue,
+        onFocus: _cache[1] || (_cache[1] = ($event) => focused.value = true),
+        "on:update:modelValue": _cache[2] || (_cache[2] = () => {
+        })
+      }, null, 40, _hoisted_1$t);
+    };
+  }
+});
+const _hoisted_1$s = { class: "bs-date-input" };
+const _hoisted_2$i = { class: "input-area" };
+const _hoisted_3$d = /* @__PURE__ */ createElementVNode("span", { class: "icon" }, "calendar_month", -1);
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  __name: "BSDateInput",
+  props: {
+    id: {},
+    placeholder: {},
+    name: {},
+    modelValue: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    width: { default: "200px" },
+    resolution: { default: "MINUTE" },
+    displayFormat: { default: "YYYY-MM-DD HH:mm Z" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const value = ref();
+    const emitValue = (value2) => {
+      emit("update:modelValue", value2);
+    };
+    watch(
+      () => props.modelValue,
+      () => value.value = props.modelValue ? dayjs(props.modelValue) : void 0,
+      { immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
+        createElementVNode("div", _hoisted_2$i, [
+          _hoisted_3$d,
+          createVNode(_sfc_main$x, {
+            id: _ctx.id,
+            modelValue: value.value,
+            "onUpdate:modelValue": [
+              _cache[0] || (_cache[0] = ($event) => value.value = $event),
+              emitValue
+            ],
+            disabled: !!_ctx.disabled,
+            "display-format": _ctx.displayFormat,
+            name: _ctx.name,
+            placeholder: _ctx.placeholder,
+            required: !!_ctx.required,
+            resolution: _ctx.resolution
+          }, null, 8, ["id", "modelValue", "disabled", "display-format", "name", "placeholder", "required", "resolution"])
+        ])
+      ]);
+    };
+  }
+});
+let nextId = 0;
+const componentUtil = {
+  handleExternalErrorMessage(showErrorMessage, errorMessage, elementId) {
+    if (elementId) {
+      const el = document.getElementById(elementId);
+      if (el) {
+        if (!showErrorMessage || !errorMessage || errorMessage.length === 0) {
+          el.style.display = "none";
+        } else {
+          el.style.display = "";
+          el.innerText = errorMessage || "";
+        }
+      }
+    }
+  },
+  generateNextId(prefix) {
+    return `${prefix}-${++nextId}`;
+  },
+  isRelativeSize(size) {
+    return (size == null ? void 0 : size.endsWith("%")) || false;
+  },
+  delayed(func, millis = 200) {
+    if (millis <= 0) {
+      func();
+    } else {
+      window.setTimeout(func, millis);
+    }
+  }
+};
+const _hoisted_1$r = ["id", "checked", "disabled", "name"];
+const _hoisted_2$h = ["for"];
+const _hoisted_3$c = ["for"];
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  __name: "BSCheckbox",
+  props: {
+    id: { default: () => componentUtil.generateNextId("checkbox") },
+    name: {},
+    label: {},
+    modelValue: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const checked = ref(props.modelValue);
+    const slots = useSlots();
+    const hasLabelSlot = computed(() => !!(slots == null ? void 0 : slots.default));
+    const handlers = {
+      change: (event) => {
+        checked.value = event.target.checked;
+        emit("update:modelValue", checked.value);
+      }
+    };
+    watch(
+      () => props.modelValue,
+      () => checked.value = props.modelValue
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass([{ checked: checked.value }, "bs-checkbox"])
+      }, [
+        createElementVNode("input", mergeProps({
+          id: _ctx.id,
+          checked: checked.value,
+          disabled: _ctx.disabled,
+          name: _ctx.name,
+          class: "",
+          type: "checkbox"
+        }, toHandlers(handlers, true)), null, 16, _hoisted_1$r),
+        _ctx.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: _ctx.id,
+          class: "text-label"
+        }, toDisplayString(_ctx.label), 9, _hoisted_2$h)) : createCommentVNode("", true),
+        hasLabelSlot.value ? (openBlock(), createElementBlock("label", {
+          key: 1,
+          for: _ctx.id,
+          class: "slot-label cursor-pointer"
+        }, [
+          renderSlot(_ctx.$slots, "default", { disabled: _ctx.disabled })
+        ], 8, _hoisted_3$c)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$q = { class: "bs-checkbox-group" };
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  __name: "BSCheckboxGroup",
+  props: {
+    modelValue: { default: () => [] },
+    items: { default: () => [] },
+    valueProvider: {},
+    labelProvider: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const itemLabel = (item) => {
+      return props.labelProvider ? props.labelProvider(item) : String(item);
+    };
+    const itemValue = (item) => {
+      return props.valueProvider ? props.valueProvider(item) : item;
+    };
+    const containsItem = (item) => {
+      const value = itemValue(item);
+      return props.modelValue.includes(value);
+    };
+    const toggleItemValue = (checked, item) => {
+      const value = itemValue(item);
+      const contains = props.modelValue.includes(value);
+      if (checked && !contains) {
+        const newValue = [...props.modelValue, value];
+        emit("update:modelValue", newValue);
+      } else if (!checked && contains) {
+        const index = props.modelValue.indexOf(value);
+        const newValue = props.modelValue.toSpliced(index, 1);
+        emit("update:modelValue", newValue);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+          return openBlock(), createBlock(_sfc_main$v, {
+            key: String(item),
+            label: itemLabel(item),
+            "model-value": containsItem(item),
+            "onUpdate:modelValue": ($event) => toggleItemValue($event, item)
+          }, null, 8, ["label", "model-value", "onUpdate:modelValue"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _hoisted_1$p = ["id", "checked", "disabled", "name"];
+const _hoisted_2$g = ["for"];
+const _hoisted_3$b = ["for"];
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  __name: "BSRadioButton",
+  props: {
+    id: { default: () => componentUtil.generateNextId("radio") },
+    name: {},
+    label: {},
+    modelValue: {},
+    itemValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const checked = computed(() => props.itemValue && props.itemValue === props.modelValue || false);
+    const slots = useSlots();
+    const hasLabelSlot = computed(() => !!(slots == null ? void 0 : slots.default));
+    const handleClick = (event) => {
+      const curChecked = event.target.checked;
+      if (curChecked) {
+        emit("update:modelValue", props.itemValue);
+      }
+    };
+    const handlers = {
+      change: handleClick
+      // click: handleClick
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass([{ checked: checked.value }, "bs-radio-button"])
+      }, [
+        createElementVNode("input", mergeProps({
+          id: _ctx.id,
+          checked: checked.value,
+          disabled: _ctx.disabled,
+          name: _ctx.name,
+          class: "",
+          type: "radio"
+        }, toHandlers(handlers, true)), null, 16, _hoisted_1$p),
+        _ctx.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          for: _ctx.id,
+          class: "text-label"
+        }, toDisplayString(_ctx.label), 9, _hoisted_2$g)) : createCommentVNode("", true),
+        hasLabelSlot.value ? (openBlock(), createElementBlock("label", {
+          key: 1,
+          for: _ctx.id,
+          class: "slot-label cursor-pointer"
+        }, [
+          renderSlot(_ctx.$slots, "default", { disabled: _ctx.disabled })
+        ], 8, _hoisted_3$b)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$o = { class: "bs-radio-button-group" };
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  __name: "BSRadioButtonGroup",
+  props: {
+    modelValue: {},
+    items: { default: () => [] },
+    valueProvider: {},
+    labelProvider: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const itemLabel = (item) => {
+      return props.labelProvider ? props.labelProvider(item) : String(item);
+    };
+    const itemValue = (item) => {
+      return props.valueProvider ? props.valueProvider(item) : item;
+    };
+    const emitValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+          return openBlock(), createBlock(_sfc_main$t, {
+            key: String(itemValue(item)),
+            "item-value": itemValue(item),
+            label: itemLabel(item),
+            "model-value": _ctx.modelValue,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emitValue($event))
+          }, null, 8, ["item-value", "label", "model-value"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$r = {};
+const _hoisted_1$n = { class: "bs-popup" };
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createBlock(Transition, null, {
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_1$n, [
+        renderSlot(_ctx.$slots, "default")
+      ])
+    ]),
+    _: 3
+  });
+}
+const BSPopup = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render]]);
+const _hoisted_1$m = ["onMouseover", "onClick"];
+const _hoisted_2$f = /* @__PURE__ */ createElementVNode("span", { class: "checkbox" }, null, -1);
+const _hoisted_3$a = { class: "label" };
+const _hoisted_4$9 = {
+  key: 0,
+  class: "sub-items"
+};
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  __name: "BSSelectPopup",
+  props: {
+    items: {},
+    initialItem: {},
+    selectedItems: {},
+    itemLabel: { type: Function },
+    tree: { type: Boolean }
+  },
+  emits: ["keyboardHandlerReady", "itemSelected"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const nextPopupItem = () => {
+      if (props.items.length > 0) {
+        if (hoveredPopupItem.value) {
+          const index = props.items.indexOf(hoveredPopupItem.value) + 1;
+          hoveredPopupItem.value = props.items[index % props.items.length];
+        } else {
+          hoveredPopupItem.value = props.items[0];
+        }
+      }
+    };
+    const prevPopupItem = () => {
+      if (props.items.length > 0) {
+        if (hoveredPopupItem.value) {
+          const index = props.items.indexOf(hoveredPopupItem.value) + props.items.length - 1;
+          hoveredPopupItem.value = props.items[index % props.items.length || 0];
+        } else {
+          hoveredPopupItem.value = props.items[props.items.length - 1];
+        }
+      }
+    };
+    const selectItem = () => {
+      selectPopupItem(hoveredPopupItem.value);
+    };
+    const keyboardHandler = (event) => {
+      switch (event.key) {
+        case "Enter":
+          selectItem();
+          break;
+        case "ArrowDown":
+          nextPopupItem();
+          break;
+        case "ArrowUp":
+          prevPopupItem();
+          break;
+      }
+    };
+    onMounted(() => emit("keyboardHandlerReady", keyboardHandler));
+    onBeforeUnmount(() => emit("keyboardHandlerReady", void 0));
+    const hoveredPopupItem = ref();
+    hoveredPopupItem.value = props.initialItem;
+    const setHoveredPopupItem = (item) => {
+      hoveredPopupItem.value = item;
+    };
+    const selectPopupItem = (item) => {
+      emit("itemSelected", item);
+    };
+    const hasSubItems = (item) => {
+      return item && typeof item === "object" && "children" in item && Array.isArray(item.children);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BSPopup, { class: "bs-select-popup" }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+            var _a;
+            return openBlock(), createElementBlock("div", {
+              key: _ctx.itemLabel(item),
+              class: normalizeClass([{ hovered: hoveredPopupItem.value === item, "selected-item": (_a = _ctx.selectedItems) == null ? void 0 : _a.includes(item) }, "popup-item"]),
+              onMouseover: ($event) => setHoveredPopupItem(item),
+              onClick: withModifiers(($event) => selectPopupItem(item), ["stop"])
+            }, [
+              _hoisted_2$f,
+              createElementVNode("span", _hoisted_3$a, toDisplayString(_ctx.itemLabel(item)), 1),
+              _ctx.tree && hasSubItems(item) ? (openBlock(), createElementBlock("span", _hoisted_4$9)) : createCommentVNode("", true)
+            ], 42, _hoisted_1$m);
+          }), 128))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const _hoisted_1$l = ["onKeydown"];
+const _hoisted_2$e = { class: "selected" };
+const _hoisted_3$9 = ["textContent"];
+const _hoisted_4$8 = /* @__PURE__ */ createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
+const _hoisted_5$7 = {
+  key: 1,
+  class: "message"
+};
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "BSSelect",
+  props: {
+    modelValue: {},
+    items: { default: () => [] },
+    valueProvider: {},
+    labelProvider: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const itemLabel = (item) => {
+      return props.labelProvider ? props.labelProvider(item) : String(item);
+    };
+    const itemValue = (item) => {
+      return props.valueProvider ? props.valueProvider(item) : item;
+    };
+    const findItemFromValue = (value) => {
+      return value ? props.items.find((item) => itemValue(item) === value) : void 0;
+    };
+    const selectedItem = computed(() => findItemFromValue(props.modelValue));
+    const selectedItems = computed(() => selectedItem.value ? [selectedItem.value] : []);
+    const selectedItemLabel = computed(() => selectedItem.value ? itemLabel(selectedItem.value) : "");
+    const showPopup = ref(false);
+    const togglePopup = (show) => {
+      showPopup.value = show === void 0 ? !showPopup.value : show;
+    };
+    let keyboardHandler = void 0;
+    const setKeyboardHandler = (handler) => {
+      keyboardHandler = handler;
+    };
+    const handleKeyboardEvent = (event) => {
+      if (!showPopup.value)
+        togglePopup(true);
+      if (keyboardHandler)
+        keyboardHandler(event);
+    };
+    const itemSelected = (item) => {
+      const value = item ? itemValue(item) : void 0;
+      emit("update:modelValue", value);
+      showPopup.value = false;
+    };
+    const messages = ref();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ "popup-open": showPopup.value }, "bs-select"]),
+        tabindex: "0",
+        onBlur: _cache[0] || (_cache[0] = ($event) => togglePopup(false)),
+        onClick: _cache[1] || (_cache[1] = ($event) => togglePopup()),
+        onKeydown: [
+          _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => togglePopup(), ["stop", "prevent"]), ["space"])),
+          withKeys(withModifiers(handleKeyboardEvent, ["stop", "prevent"]), ["enter", "down", "up"]),
+          _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => togglePopup(false), ["stop", "prevent"]), ["esc"]))
+        ]
+      }, [
+        createElementVNode("div", _hoisted_2$e, [
+          createElementVNode("span", {
+            class: "label",
+            textContent: toDisplayString(selectedItemLabel.value)
+          }, null, 8, _hoisted_3$9),
+          _hoisted_4$8
+        ]),
+        showPopup.value ? (openBlock(), createBlock(_sfc_main$q, {
+          key: 0,
+          "initial-item": selectedItem.value,
+          "item-label": itemLabel,
+          items: _ctx.items,
+          "selected-items": selectedItems.value,
+          onKeyboardHandlerReady: setKeyboardHandler,
+          onItemSelected: itemSelected
+        }, null, 8, ["initial-item", "items", "selected-items"])) : createCommentVNode("", true),
+        messages.value ? (openBlock(), createElementBlock("div", _hoisted_5$7)) : createCommentVNode("", true)
+      ], 42, _hoisted_1$l);
+    };
+  }
+});
+function notNull(value) {
+  return value !== null && value !== void 0;
+}
+const _hoisted_1$k = ["onKeydown"];
+const _hoisted_2$d = { class: "selected" };
+const _hoisted_3$8 = ["textContent"];
+const _hoisted_4$7 = /* @__PURE__ */ createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
+const _hoisted_5$6 = {
+  key: 1,
+  class: "message"
+};
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  __name: "BSMultiSelect",
+  props: {
+    modelValue: { default: () => [] },
+    items: { default: () => [] },
+    valueProvider: {},
+    labelProvider: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const itemLabel = (item) => {
+      return props.labelProvider ? props.labelProvider(item) : String(item);
+    };
+    const itemValue = (item) => {
+      return props.valueProvider ? props.valueProvider(item) : item;
+    };
+    const findItemFromValue = (value) => {
+      return value ? props.items.find((item) => itemValue(item) === value) : void 0;
+    };
+    const selectedItems = computed(() => props.modelValue.map(findItemFromValue).filter(notNull));
+    const selectedItemsLabel = computed(() => selectedItems.value.map(itemLabel).filter(notNull).join(", "));
+    const showPopup = ref(false);
+    const togglePopup = (show) => {
+      showPopup.value = show === void 0 ? !showPopup.value : show;
+    };
+    let keyboardHandler = void 0;
+    const setKeyboardHandler = (handler) => {
+      keyboardHandler = handler;
+    };
+    const handleKeyboardEvent = (event) => {
+      if (!showPopup.value)
+        togglePopup(true);
+      if (keyboardHandler)
+        keyboardHandler(event);
+    };
+    const itemSelected = (item) => {
+      if (item) {
+        let newItems = [...selectedItems.value];
+        const index = newItems.indexOf(item);
+        if (index >= 0) {
+          newItems.splice(index, 1);
+        } else {
+          newItems = props.items.filter((it) => newItems.includes(it) || it === item);
+        }
+        const values = newItems.map(itemValue);
+        emit("update:modelValue", values);
+      }
+    };
+    const messages = ref();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ "popup-open": showPopup.value }, "bs-select"]),
+        tabindex: "0",
+        onBlur: _cache[0] || (_cache[0] = ($event) => togglePopup(false)),
+        onClick: _cache[1] || (_cache[1] = ($event) => togglePopup()),
+        onKeydown: [
+          _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => togglePopup(), ["stop", "prevent"]), ["space"])),
+          withKeys(withModifiers(handleKeyboardEvent, ["stop", "prevent"]), ["enter", "down", "up"]),
+          _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => togglePopup(false), ["stop", "prevent"]), ["esc"]))
+        ]
+      }, [
+        createElementVNode("div", _hoisted_2$d, [
+          createElementVNode("span", {
+            class: "label",
+            textContent: toDisplayString(selectedItemsLabel.value)
+          }, null, 8, _hoisted_3$8),
+          _hoisted_4$7
+        ]),
+        showPopup.value ? (openBlock(), createBlock(_sfc_main$q, {
+          key: 0,
+          "item-label": itemLabel,
+          items: _ctx.items,
+          "selected-items": selectedItems.value,
+          onKeyboardHandlerReady: setKeyboardHandler,
+          onItemSelected: itemSelected
+        }, null, 8, ["items", "selected-items"])) : createCommentVNode("", true),
+        messages.value ? (openBlock(), createElementBlock("div", _hoisted_5$6)) : createCommentVNode("", true)
+      ], 42, _hoisted_1$k);
+    };
+  }
+});
+const _hoisted_1$j = ["onKeydown"];
+const _hoisted_2$c = { class: "selected" };
+const _hoisted_3$7 = ["textContent"];
+const _hoisted_4$6 = /* @__PURE__ */ createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1);
+const _hoisted_5$5 = {
+  key: 1,
+  class: "message"
+};
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "BSTreeSelect",
+  props: {
+    modelValue: {},
+    items: { default: () => [] },
+    valueProvider: {},
+    labelProvider: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const itemLabel = (item) => {
+      return props.labelProvider ? props.labelProvider(item) : String(item);
+    };
+    const itemValue = (item) => {
+      return props.valueProvider ? props.valueProvider(item) : item;
+    };
+    const findItemFromValue = (value) => {
+      return value ? props.items.find((item) => itemValue(item) === value) : void 0;
+    };
+    const selectedItem = computed(() => findItemFromValue(props.modelValue));
+    const selectedItemLabel = computed(() => selectedItem.value ? itemLabel(selectedItem.value) : "");
+    const showPopup = ref(false);
+    const togglePopup = (show) => {
+      showPopup.value = show === void 0 ? !showPopup.value : show;
+    };
+    let keyboardHandler = void 0;
+    const setKeyboardHandler = (handler) => {
+      keyboardHandler = handler;
+    };
+    const handleKeyboardEvent = (event) => {
+      if (!showPopup.value)
+        togglePopup(true);
+      if (keyboardHandler)
+        keyboardHandler(event);
+    };
+    const itemSelected = (item) => {
+      const value = item ? itemValue(item) : void 0;
+      emit("update:modelValue", value);
+      showPopup.value = false;
+    };
+    const messages = ref();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ "popup-open": showPopup.value }, "bs-tree-select"]),
+        tabindex: "0",
+        onBlur: _cache[0] || (_cache[0] = ($event) => togglePopup(false)),
+        onClick: _cache[1] || (_cache[1] = ($event) => togglePopup()),
+        onKeydown: [
+          _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => togglePopup(), ["stop", "prevent"]), ["space"])),
+          withKeys(withModifiers(handleKeyboardEvent, ["stop", "prevent"]), ["enter", "down", "up"]),
+          _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => togglePopup(false), ["stop", "prevent"]), ["esc"]))
+        ]
+      }, [
+        createElementVNode("div", _hoisted_2$c, [
+          createElementVNode("span", {
+            class: "label",
+            textContent: toDisplayString(selectedItemLabel.value)
+          }, null, 8, _hoisted_3$7),
+          _hoisted_4$6
+        ]),
+        showPopup.value ? (openBlock(), createBlock(_sfc_main$q, {
+          key: 0,
+          "initial-item": selectedItem.value,
+          "item-label": itemLabel,
+          items: _ctx.items,
+          tree: "",
+          onKeyboardHandlerReady: setKeyboardHandler,
+          onItemSelected: itemSelected
+        }, null, 8, ["initial-item", "items"])) : createCommentVNode("", true),
+        messages.value ? (openBlock(), createElementBlock("div", _hoisted_5$5)) : createCommentVNode("", true)
+      ], 42, _hoisted_1$j);
+    };
+  }
+});
+const _hoisted_1$i = { class: "input-area" };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  __name: "BSTextArea",
+  props: {
+    id: {},
+    placeholder: {},
+    name: {},
+    modelValue: {},
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    width: { default: "400px" },
+    height: {},
+    autocomplete: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const value = ref(props.modelValue);
+    const emitValue = () => {
+      emit("update:modelValue", value.value || "");
+    };
+    const outerWidth = computed(() => componentUtil.isRelativeSize(props.width) ? props.width : void 0);
+    const outerHeight = computed(() => componentUtil.isRelativeSize(props.height) ? props.height : void 0);
+    const innerWidth = computed(() => componentUtil.isRelativeSize(props.width) ? "100%" : props.width);
+    const innerHeight = computed(() => componentUtil.isRelativeSize(props.height) ? "100%" : props.height);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ width: outerWidth.value, height: outerHeight.value }),
+        class: "bs-text-area"
+      }, [
+        createElementVNode("div", _hoisted_1$i, [
+          withDirectives(createElementVNode("textarea", {
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+            style: normalizeStyle({ width: innerWidth.value, height: innerHeight.value }),
+            onChange: emitValue
+          }, null, 36), [
+            [vModelText, value.value]
+          ])
+        ])
+      ], 4);
+    };
+  }
+});
+const DEFAULT_GRID_COLUMN_WIDTH = 100;
+const setFixedCellLeftStyle = (table) => {
+  if (table) {
+    const header = table.querySelector("tr.header-row");
+    if (header) {
+      const widths = [];
+      const headerCells = header.querySelectorAll("th.fixed");
+      headerCells.forEach((th) => widths.push(th.getBoundingClientRect().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`);
+      });
+    }
+  }
+};
+const styleCssToObject = (style) => {
+  const result = {};
+  style == null ? void 0 : 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 == null ? void 0 : style.split(/\s/).filter((item) => item).forEach((item) => {
+    result[item] = true;
+  });
+  return result;
+};
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "BSGridHeaderCell",
+  props: {
+    column: {},
+    columns: {},
+    fixed: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const thStyleCss = computed(() => {
+      return {
+        minWidth: `${props.column.width || DEFAULT_GRID_COLUMN_WIDTH}px`,
+        maxWidth: `${props.column.width || DEFAULT_GRID_COLUMN_WIDTH}px`
+        // left 는 BSGrid 의 onMounted 에서 설정함
+      };
+    });
+    const styleCss = computed(() => {
+      return styleCssToObject(props.column.headerCellStyleCss);
+    });
+    const styleClass = computed(() => {
+      return styleClassToObject(props.column.headerCellStyleClass);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("th", {
+        class: normalizeClass({ fixed: _ctx.fixed }),
+        style: normalizeStyle(thStyleCss.value)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(styleClass.value),
+          style: normalizeStyle(styleCss.value)
+        }, toDisplayString(_ctx.column.caption), 7)
+      ], 6);
+    };
+  }
+});
+const DATE_PATTERN = /* @__PURE__ */ new Map([
+  ["DATE", "YYYY-MM-DD"],
+  ["MINUTE", "YYYY-MM-DD HH:mm"],
+  ["SECOND", "YYYY-MM-DD HH:mm:ss"]
+]);
+const round = (num, decimalPlace = 2) => {
+  const pow = Math.pow(10, decimalPlace);
+  return Math.round(num * pow) / pow;
+};
+const formatUtil = {
+  /**
+   * 개행 문자('\r', '\n')를 '<br/>' 태그로 변경한다.
+   * @param str 변경할 String
+   * @return 개행문자가 '<br/>'로 변경된 String
+   */
+  escapeNewLine(str) {
+    return str ? str.replace(/\r\n|\r|\n/g, "<br />") : "";
+  },
+  /**
+   * `str` 안의 `&<>"'` 문자를 escape 처리한다.
+   * @param str 변경할 String
+   */
+  escapeHtml(str) {
+    return str ? str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;") : "";
+  },
+  /**
+   * String 을 개행 문자('\r', '\n') 기준으로 나눈다.
+   * @param str
+   * @return 개행문자로 나누어진 string 의 array
+   */
+  splitNewLine(str) {
+    return str ? str.split(/\r\n|\r|\n/g) : [];
+  },
+  /**
+   * 날짜를 주어진 형식의 문자열로 변환한다.
+   * ````javascript
+   *   formatUtil.formatDate('2020-10-04T12:34:56.000') // returns "2020.10.04"
+   *   formatUtil.formatDate('2020-10-04T12:34:56.000', 'MINUTE') // returns "2020.10.04 12:34"
+   *   formatUtil.formatDate(null, 'DATE') // returns ''
+   *   formatUtil.formatDate(undefined, 'DATE') // returns ''
+   * ````
+   * @param date 날짜. string, Date, Dayjs 타입 중 하나.
+   * @param pattern 'DATE', 'MINUTE', 또는 날짜 패턴 (ex: 'YYYY.MM.DD')
+   * @returns pattern 형식으로 변환된 문자열. date 나 pattern 이 false 이면 빈 문자열을 리턴한다.
+   */
+  formatDate(date, pattern = "SECOND") {
+    if (!date || !pattern) {
+      return "";
+    }
+    if (typeof date === "string") {
+      date = dayjs(date);
+    }
+    const actualPattern = DATE_PATTERN.get(pattern) || pattern;
+    return dayjs(date).format(actualPattern);
+  },
+  /**
+   * 숫자에 구분점을 넣는다.
+   * @param value
+   * @return
+   */
+  formatNumber(value) {
+    if (value || typeof value === "number") {
+      const regexp = /\B(?=(\d{3})+(?!\d))/g;
+      return String(value).replace(regexp, ",");
+    }
+    return null;
+  },
+  /**
+   * rate 를 받아 percent 를 출력한다.
+   * * 0.1 -> 10%
+   * * 0.55 -> 55%
+   * * 0.551 -> 55.1%
+   * @param value 비율 값
+   * @param withUnit true 이면 % 를 붙이고, false 이면 붙이지 않는다.
+   * @param decimalPlace 소숫점 n번째에서 반올림한다.
+   */
+  formatPercent(value, withUnit = true, decimalPlace = 2) {
+    return value !== void 0 && value !== null && !isNaN(Number(value)) ? `${round(Number(value) * 100, decimalPlace)}${withUnit ? "%" : ""}` : null;
+  },
+  /**
+   * 신용카드번호를 4자리 단위로 나누어 구분자를 넣는다.
+   * @param value
+   * @param separator 구분자
+   */
+  formatCreditCardNo(value, separator = "-") {
+    var _a;
+    return (_a = value.match(/.{1,4}/g)) == null ? void 0 : _a.join(separator);
+  },
+  /**
+   *  `HTML`태그가 포함된 문자열에서 text만 남긴다.
+   *  @param textIncludedHTMLElement HTML 태그를 포함하는 문자열
+   *  @return HTML 태그가 제거된 문자열
+   */
+  toPlainText(textIncludedHTMLElement) {
+    const tmp = document.createElement("DIV");
+    tmp.innerHTML = textIncludedHTMLElement || "";
+    return tmp.textContent || tmp.innerText;
+  }
+};
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  __name: "BSGridCell",
+  props: {
+    column: {},
+    columns: {},
+    fixed: { type: Boolean },
+    row: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const tdStyleCss = computed(() => {
+      return {
+        minWidth: `${props.column.width || DEFAULT_GRID_COLUMN_WIDTH}px`,
+        maxWidth: `${props.column.width || DEFAULT_GRID_COLUMN_WIDTH}px`
+        // left 는 BSGrid 의 onMounted 에서 설정함
+      };
+    });
+    const tdStyleClass = computed(() => {
+      return {
+        fixed: props.fixed,
+        "text-right": ["NUMBER", "PERCENTAGE"].includes(props.column.cellType || "")
+      };
+    });
+    const styleCss = computed(() => {
+      return styleCssToObject(props.column.cellStyleCss);
+    });
+    const styleClass = computed(() => {
+      return styleClassToObject(props.column.cellStyleClass);
+    });
+    const cellValue = computed(() => {
+      const properties = props.column.propertyId.split(".");
+      let value = props.row;
+      for (let index = 0; index < properties.length; ++index) {
+        if (!value || typeof value !== "object" || !(properties[index] in value)) {
+          return "";
+        }
+        value = value[properties[index]];
+      }
+      return value;
+    });
+    const formattedCellValue = computed(() => {
+      if (props.column.cellType === "NUMBER") {
+        return formatUtil.formatNumber(Number(cellValue.value));
+      } else if (props.column.cellType === "PERCENTAGE") {
+        return formatUtil.formatPercent(Number(cellValue.value));
+      } else if (props.column.cellType === "DATE") {
+        return formatUtil.formatDate(String(cellValue.value), props.column.dateFormat);
+      } else {
+        return cellValue.value;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("td", {
+        class: normalizeClass(tdStyleClass.value),
+        style: normalizeStyle(tdStyleCss.value)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(styleClass.value),
+          style: normalizeStyle(styleCss.value)
+        }, [
+          renderSlot(_ctx.$slots, _ctx.column.propertyId, {
+            cell: cellValue.value,
+            row: _ctx.row
+          }, () => [
+            createTextVNode(toDisplayString(formattedCellValue.value), 1)
+          ])
+        ], 6)
+      ], 6);
+    };
+  }
+});
+const _hoisted_1$h = { class: "font-icon" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "BSGridCheckboxCell",
+  props: {
+    checked: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("td", {
+        class: normalizeClass([{ checked: _ctx.checked }, "fixed func-cell checkbox bs-clickable"]),
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+      }, [
+        createElementVNode("div", _hoisted_1$h, toDisplayString(_ctx.checked ? "check" : ""), 1)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$g = { class: "font-icon" };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "BSGridCheckboxHeaderCell",
+  props: {
+    selectedRowCount: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const checked = computed(() => props.selectedRowCount > 0);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("th", {
+        class: normalizeClass([{ checked: checked.value }, "fixed func-cell checkbox bs-clickable"]),
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+      }, [
+        createElementVNode("div", _hoisted_1$g, toDisplayString(checked.value ? "check" : "check_box_outline_blank"), 1)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$f = { class: "page-navigation" };
+const _hoisted_2$b = ["data-page", "onClick"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "BSGridPageNavigation",
+  props: {
+    totalCount: { default: 0 },
+    offset: { default: 0 },
+    limit: { default: 10 },
+    visiblePageCount: { default: 10 },
+    maxPage: {}
+  },
+  emits: ["offsetChanged"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const totalPage = computed(() => {
+      const totalPage2 = Math.floor((props.totalCount - 1) / props.limit) + 1;
+      if (props.totalCount < 1)
+        return 1;
+      if (props.maxPage && totalPage2 > props.maxPage)
+        return props.maxPage;
+      return totalPage2 || 0;
+    });
+    const currentPage = computed(() => {
+      return Math.min(Math.floor(props.offset / props.limit) + 1, totalPage.value);
+    });
+    const currentSetFirstPage = computed(() => {
+      return Math.floor((currentPage.value - 1) / props.visiblePageCount) * props.visiblePageCount + 1;
+    });
+    const currentSetLastPage = computed(() => {
+      return Math.min(currentSetFirstPage.value + props.visiblePageCount - 1, totalPage.value);
+    });
+    const visiblePages = computed(() => {
+      if (props.totalCount <= 0)
+        return [];
+      const first = currentSetFirstPage.value;
+      const last = currentSetLastPage.value;
+      const pages = Array(last - first + 1);
+      for (let i = 0; i < pages.length; i++)
+        pages[i] = i + first;
+      return pages;
+    });
+    const prevArrowPage = computed(() => {
+      return currentSetFirstPage.value - 1;
+    });
+    const nextArrowPage = computed(() => {
+      return currentSetLastPage.value + 1;
+    });
+    const isFirstSet = computed(() => {
+      return currentSetFirstPage.value <= 1;
+    });
+    const isLastSet = computed(() => {
+      return currentSetLastPage.value >= totalPage.value;
+    });
+    const goToPage = (page) => {
+      const normalized = Math.max(1, Math.min(page, totalPage.value));
+      if (currentPage.value !== normalized) {
+        const offset = (normalized - 1) * props.limit;
+        emit(
+          "offsetChanged",
+          offset,
+          { offset: props.offset, limit: props.limit, totalCount: props.totalCount }
+        );
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("span", {
+          class: normalizeClass([{ "disabled": isFirstSet.value }, "font-icon first"]),
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => !isFirstSet.value ? goToPage(1) : void 0, ["prevent"]))
+        }, "first_page", 2),
+        createElementVNode("span", {
+          class: normalizeClass([{ "disabled": isFirstSet.value }, "font-icon prev"]),
+          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => !isFirstSet.value ? goToPage(prevArrowPage.value) : void 0, ["prevent"]))
+        }, "keyboard_arrow_left", 2),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(visiblePages.value, (page) => {
+          return openBlock(), createElementBlock("span", {
+            key: page,
+            class: normalizeClass([{ on: page === currentPage.value }, "page"]),
+            "data-page": page,
+            onClick: withModifiers(($event) => goToPage(page), ["prevent"])
+          }, toDisplayString(page), 11, _hoisted_2$b);
+        }), 128)),
+        createElementVNode("span", {
+          class: normalizeClass([{ "disabled": !isLastSet.value }, "font-icon next"]),
+          onClick: _cache[2] || (_cache[2] = withModifiers(($event) => goToPage(nextArrowPage.value), ["prevent"]))
+        }, "keyboard_arrow_right", 2),
+        createElementVNode("span", {
+          class: normalizeClass([{ "disabled": !isLastSet.value }, "font-icon last"]),
+          onClick: _cache[3] || (_cache[3] = withModifiers(($event) => !isLastSet.value ? goToPage(totalPage.value) : void 0, ["prevent"]))
+        }, "last_page", 2)
+      ]);
+    };
+  }
+});
+const _hoisted_1$e = { class: "table-wrap" };
+const _hoisted_2$a = { class: "header-row" };
+const _hoisted_3$6 = {
+  key: 1,
+  class: "fixed func-cell serial-no"
+};
+const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("div", { class: "font-icon" }, "numbers", -1);
+const _hoisted_5$4 = [
+  _hoisted_4$5
+];
+const _hoisted_6$1 = {
+  key: 1,
+  class: "fixed func-cell serial-no"
+};
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "BSGrid",
+  props: {
+    columns: { default: () => [] },
+    data: {},
+    pageInfo: {},
+    width: { default: "100%" },
+    height: { default: "300px" },
+    fixedColumnCount: { default: 0 },
+    showSerial: { type: Boolean },
+    showCheckbox: { type: Boolean },
+    showPageNavigation: { type: Boolean }
+  },
+  emits: ["selectionChanged", "offsetChanged"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visibleColumns = computed(() => {
+      return props.columns;
+    });
+    const fixedColumns = computed(() => {
+      return props.fixedColumnCount;
+    });
+    const selectedRows = reactive(/* @__PURE__ */ new Set());
+    const isRowSelected = (row) => selectedRows.has(row);
+    const toggleSelection = (row) => {
+      selectedRows.has(row) ? selectedRows.delete(row) : selectedRows.add(row);
+      emit("selectionChanged", selectedRows);
+    };
+    const toggleAll = () => {
+      selectedRows.size > 0 ? selectedRows.clear() : props.data.forEach((row) => selectedRows.add(row));
+      emit("selectionChanged", selectedRows);
+    };
+    const table = ref();
+    watch(
+      () => props.data,
+      async () => {
+        await nextTick();
+        setFixedCellLeftStyle(table.value);
+      },
+      { immediate: true }
+    );
+    const handleOffsetChange = (offset, currentPageInfo) => {
+      emit("offsetChanged", offset, currentPageInfo);
+    };
+    return (_ctx, _cache) => {
+      var _a, _b, _c;
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ width: _ctx.width, height: _ctx.height }),
+        class: "bs-grid"
+      }, [
+        createElementVNode("div", _hoisted_1$e, [
+          createElementVNode("table", {
+            ref_key: "table",
+            ref: table
+          }, [
+            createElementVNode("thead", null, [
+              createElementVNode("tr", _hoisted_2$a, [
+                _ctx.showCheckbox ? (openBlock(), createBlock(_sfc_main$i, {
+                  key: 0,
+                  "selected-row-count": selectedRows.size,
+                  onClick: toggleAll
+                }, null, 8, ["selected-row-count"])) : createCommentVNode("", true),
+                _ctx.showSerial ? (openBlock(), createElementBlock("th", _hoisted_3$6, _hoisted_5$4)) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (column, index) => {
+                  return openBlock(), createBlock(_sfc_main$l, {
+                    key: column.propertyId,
+                    column,
+                    columns: visibleColumns.value,
+                    fixed: index < fixedColumns.value
+                  }, null, 8, ["column", "columns", "fixed"]);
+                }), 128))
+              ])
+            ]),
+            createElementVNode("tbody", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (row, index) => {
+                var _a2;
+                return openBlock(), createElementBlock("tr", {
+                  key: `${row}_${index}`,
+                  class: normalizeClass([{ selected: isRowSelected(row) }, "data-row"])
+                }, [
+                  _ctx.showCheckbox ? (openBlock(), createBlock(_sfc_main$j, {
+                    key: 0,
+                    checked: isRowSelected(row),
+                    onClick: ($event) => toggleSelection(row)
+                  }, null, 8, ["checked", "onClick"])) : createCommentVNode("", true),
+                  _ctx.showSerial ? (openBlock(), createElementBlock("td", _hoisted_6$1, [
+                    createElementVNode("div", null, toDisplayString(index + (((_a2 = _ctx.pageInfo) == null ? void 0 : _a2.offset) || 0) + 1), 1)
+                  ])) : createCommentVNode("", true),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (column, index2) => {
+                    return openBlock(), createBlock(_sfc_main$k, {
+                      key: column.propertyId,
+                      column,
+                      columns: _ctx.columns,
+                      fixed: index2 < fixedColumns.value,
+                      row
+                    }, {
+                      [column.propertyId]: withCtx(({ row: row2, cell }) => [
+                        renderSlot(_ctx.$slots, column.propertyId, {
+                          cell,
+                          row: row2
+                        })
+                      ]),
+                      _: 2
+                    }, 1032, ["column", "columns", "fixed", "row"]);
+                  }), 128))
+                ], 2);
+              }), 128))
+            ])
+          ], 512)
+        ]),
+        _ctx.showPageNavigation ? (openBlock(), createBlock(_sfc_main$h, {
+          key: 0,
+          limit: ((_a = _ctx.pageInfo) == null ? void 0 : _a.limit) || 10,
+          offset: ((_b = _ctx.pageInfo) == null ? void 0 : _b.offset) || 0,
+          "total-count": ((_c = _ctx.pageInfo) == null ? void 0 : _c.totalCount) || 0,
+          "visible-page-count": 20,
+          onOffsetChanged: handleOffsetChange
+        }, null, 8, ["limit", "offset", "total-count"])) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+const isInsideElement = (el, maybeChild) => {
+  let target = maybeChild;
+  while (target) {
+    if (el === target) {
+      return true;
+    }
+    target = target.parentElement;
+  }
+  return false;
+};
+const vClickOutside = {
+  mounted: (el, binding) => {
+    const clickListener = (event) => {
+      let target = event.target;
+      if (!isInsideElement(el, target)) {
+        const handler = binding.value;
+        if (handler && typeof handler === "function")
+          handler();
+      }
+    };
+    el.vClickOutsideListener = clickListener;
+    window.addEventListener("click", clickListener);
+  },
+  unmounted: (el) => {
+    const clickListener = el.vClickOutsideListener;
+    window.removeEventListener("click", clickListener);
+  }
+};
+class AbstractFilter {
+  constructor(type) {
+    this.type = type;
+  }
+}
+class AndFilter extends AbstractFilter {
+  constructor(filters) {
+    super("AND");
+    __publicField(this, "filters");
+    this.filters = filters;
+  }
+  toString() {
+    return this.filters.map((filter) => `(${filter.toString()})`).join(" AND ");
+  }
+}
+class InFilter extends AbstractFilter {
+  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})`;
+  }
+}
+class LikeFilter extends AbstractFilter {
+  constructor(names, value, prefix, suffix, ignoreCase) {
+    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}`;
+  }
+}
+class BetweenDateFilter extends AbstractFilter {
+  constructor(names, fromValue, toValue) {
+    super("BT_D");
+    this.names = names;
+    this.fromValue = fromValue;
+    this.toValue = toValue;
+  }
+  toString() {
+    const names = this.names.join(",");
+    const from = this.fromValue ? dayjs(this.fromValue).toISOString() : "undefined";
+    const to = this.toValue ? dayjs(this.toValue).toISOString() : "undefined";
+    return `${names} BETWEEN ${from} AND ${to}`;
+  }
+}
+const andFilter = (filters) => {
+  return new AndFilter(filters);
+};
+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 betweenDateFilter = (names, fromValue, toValue) => {
+  return new BetweenDateFilter(names, fromValue, toValue);
+};
+const _hoisted_1$d = { class: "bs-text-filter" };
+const _hoisted_2$9 = { class: "input-wrap" };
+const _hoisted_3$5 = ["onKeyup"];
+const _hoisted_4$4 = { class: "input-wrap" };
+const _hoisted_5$3 = /* @__PURE__ */ createElementVNode("textarea", { cols: "3" }, null, -1);
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "BSTextFilter",
+  props: {
+    textFilterItems: { default: () => [] },
+    modelValue: {},
+    activeFilters: {}
+  },
+  emits: ["update:modelValue", "update:activeFilters"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const showFilterItems = ref(false);
+    const toggleFilterItemPopup = () => showFilterItems.value = !showFilterItems.value;
+    const hideFilterItemPopup = () => showFilterItems.value = false;
+    const activeFilters = ref(props.activeFilters || [...props.textFilterItems]);
+    const changeFilterItem = (value) => {
+      if (value) {
+        const idx = activeFilters.value.indexOf(value);
+        if (idx >= 0)
+          activeFilters.value.splice(idx, 1);
+        else
+          activeFilters.value.push(value);
+        const filter = createFilter(inputText.value);
+        emit("update:activeFilters", activeFilters.value, filter);
+      }
+    };
+    const filterMode = ref("INPUT");
+    const changeFilterMode = (mode) => filterMode.value = mode;
+    const getFilterKeyword = (filter) => {
+      if (filter instanceof LikeFilter) {
+        return filter.value;
+      } else if (filter instanceof InFilter) {
+        return filter.values.join("\n");
+      } else {
+        return "";
+      }
+    };
+    const inputText = ref(getFilterKeyword(props.modelValue));
+    const inputTextChanged = () => {
+      var _a;
+      const filter = createFilter(inputText.value);
+      if (((_a = props.modelValue) == null ? void 0 : _a.toString()) !== (filter == null ? void 0 : filter.toString())) {
+        emit("update:modelValue", filter, activeFilters.value);
+      }
+    };
+    const createFilter = (text) => {
+      const keyword = text == null ? void 0 : text.trim();
+      if (!keyword)
+        return void 0;
+      if (filterMode.value === "INPUT") {
+        const names = activeFilters.value.map((filter) => filter.propertyId);
+        return likeFilter(names, keyword, true, true, true);
+      } else if (filterMode.value === "TEXTAREA") {
+        const names = activeFilters.value.filter((filter) => filter.allowMultiLineFilter).map((filter) => filter.propertyId);
+        const keywords = keyword.split("\n");
+        return inFilter(names, keywords, true);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        withDirectives((openBlock(), createElementBlock("span", {
+          class: "font-icon mr-8 bs-clickable",
+          onClick: toggleFilterItemPopup
+        }, [
+          createTextVNode("checklist")
+        ])), [
+          [unref(vClickOutside), hideFilterItemPopup]
+        ]),
+        withDirectives(createElementVNode("span", _hoisted_2$9, [
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputText.value = $event),
+            type: "text",
+            onChange: inputTextChanged,
+            onKeyup: withKeys(withModifiers(inputTextChanged, ["prevent", "stop"]), ["enter"])
+          }, null, 40, _hoisted_3$5), [
+            [vModelText, inputText.value]
+          ])
+        ], 512), [
+          [vShow, filterMode.value === "INPUT"]
+        ]),
+        withDirectives(createElementVNode("span", _hoisted_4$4, [
+          _hoisted_5$3,
+          createElementVNode("span", {
+            class: "mr-4 font-icon bs-clickable",
+            onClick: _cache[1] || (_cache[1] = ($event) => changeFilterMode("INPUT"))
+          }, "expand_circle_up")
+        ], 512), [
+          [vShow, filterMode.value === "TEXTAREA"]
+        ]),
+        showFilterItems.value ? (openBlock(), createBlock(_sfc_main$q, {
+          key: 0,
+          "item-label": (item) => item.caption,
+          items: _ctx.textFilterItems,
+          "selected-items": activeFilters.value,
+          onItemSelected: changeFilterItem
+        }, null, 8, ["item-label", "items", "selected-items"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$c = { class: "bs-date-range-filter" };
+const _hoisted_2$8 = { class: "input-area" };
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "calendar_month", -1);
+const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("span", { class: "px-4" }, "~", -1);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "BSDateRangeFilter",
+  props: {
+    fromId: {},
+    toId: {},
+    fromName: {},
+    toName: {},
+    modelValue: {},
+    disabled: { type: Boolean },
+    width: { default: "200px" },
+    resolution: { default: "DAY" },
+    displayFormat: { default: "YYYY-MM-DD HH:mm" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const fromValue = ref();
+    const toValue = ref();
+    const toISOString = (value, endTime = false) => {
+      if (value) {
+        const date = dayjs(value);
+        if (endTime) {
+          return date.endOf(props.resolution.toLowerCase()).toISOString();
+        } else {
+          return date.startOf(props.resolution.toLowerCase()).toISOString();
+        }
+      }
+    };
+    const emitValue = () => {
+      const value = {
+        from: toISOString(fromValue.value, false),
+        to: toISOString(toValue.value, true)
+      };
+      emit("update:modelValue", value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", _hoisted_2$8, [
+          _hoisted_3$4,
+          createVNode(_sfc_main$x, {
+            id: _ctx.fromId,
+            modelValue: fromValue.value,
+            "onUpdate:modelValue": [
+              _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
+              emitValue
+            ],
+            disabled: !!_ctx.disabled,
+            "display-format": _ctx.displayFormat,
+            name: _ctx.fromName,
+            resolution: _ctx.resolution
+          }, null, 8, ["id", "modelValue", "disabled", "display-format", "name", "resolution"]),
+          _hoisted_4$3,
+          createVNode(_sfc_main$x, {
+            id: _ctx.toId,
+            modelValue: toValue.value,
+            "onUpdate:modelValue": [
+              _cache[1] || (_cache[1] = ($event) => toValue.value = $event),
+              emitValue
+            ],
+            disabled: !!_ctx.disabled,
+            "display-format": _ctx.displayFormat,
+            name: _ctx.toName,
+            resolution: _ctx.resolution,
+            "end-time": ""
+          }, null, 8, ["id", "modelValue", "disabled", "display-format", "name", "resolution"])
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1$b = {
+  key: 0,
+  class: "date-filters .bs-layout-vertical mr-32"
+};
+const _hoisted_2$7 = ["onClick"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "BSDateRangeFilters",
+  props: {
+    dateFilter: {},
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const dateFilterValues = reactive([]);
+    onMounted(() => {
+      var _a;
+      const items = (_a = props.dateFilter) == null ? void 0 : _a.filterItems;
+      if (items && items.length > 0) {
+        dateFilterValues[0] = {
+          propertyId: items[0].propertyId,
+          value: {}
+        };
+      }
+    });
+    const setDateFilterPropertyId = (index, propertyId) => {
+      const item = dateFilterValues[index];
+      if (propertyId)
+        item.propertyId = propertyId;
+      emitValue();
+    };
+    const setDateFilterValue = (index, value) => {
+      const item = dateFilterValues[index];
+      item.value = value || {};
+      emitValue();
+    };
+    const addDateFilter = () => {
+      var _a;
+      const dateFilterItems = ((_a = props.dateFilter) == null ? void 0 : _a.filterItems) || [];
+      if (dateFilterValues.length < dateFilterItems.length) {
+        const selectedPropertyIds = dateFilterValues.map((value) => value.propertyId);
+        const notSelected = dateFilterItems.filter((item) => !selectedPropertyIds.includes(item.propertyId));
+        if (notSelected.length > 0) {
+          dateFilterValues.push({
+            propertyId: notSelected[0].propertyId,
+            value: {}
+          });
+        }
+      }
+    };
+    const removeDateFilter = (index) => {
+      if (index >= 0 && index < dateFilterValues.length) {
+        dateFilterValues.splice(index, 1);
+        emitValue();
+      }
+    };
+    const emitValue = () => {
+      var _a;
+      const filters = dateFilterValues.filter((item) => item.propertyId && (item.value.from || item.value.to)).map((item) => betweenDateFilter([item.propertyId], item.value.from, item.value.to));
+      const and = filters.length > 0 ? andFilter(filters) : void 0;
+      if (((_a = props.modelValue) == null ? void 0 : _a.toString()) !== (and == null ? void 0 : and.toString())) {
+        emit("update:modelValue", and);
+      }
+    };
+    return (_ctx, _cache) => {
+      return _ctx.dateFilter.filterItems ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(dateFilterValues, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            key: index,
+            class: "bs-layout-horizontal mb-4 flex-align-center"
+          }, [
+            index === 0 ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass([{ disabled: dateFilterValues.length >= _ctx.dateFilter.filterItems.length }, "font-icon bs-clickable mr-4"]),
+              onClick: addDateFilter
+            }, "add_circle", 2)) : (openBlock(), createElementBlock("span", {
+              key: 1,
+              class: "font-icon bs-clickable mr-4",
+              onClick: ($event) => removeDateFilter(index)
+            }, "do_not_disturb_on", 8, _hoisted_2$7)),
+            createVNode(_sfc_main$p, {
+              items: _ctx.dateFilter.filterItems,
+              "label-provider": (filter) => filter.caption,
+              "model-value": item.propertyId,
+              "value-provider": (filter) => filter.propertyId,
+              class: "mr-4",
+              "onUpdate:modelValue": ($event) => setDateFilterPropertyId(index, $event)
+            }, null, 8, ["items", "label-provider", "model-value", "value-provider", "onUpdate:modelValue"]),
+            createVNode(_sfc_main$e, {
+              "from-id": `${item.propertyId}From`,
+              "model-value": item.value,
+              "to-id": `${item.propertyId}To`,
+              "onUpdate:modelValue": ($event) => setDateFilterValue(index, $event)
+            }, null, 8, ["from-id", "model-value", "to-id", "onUpdate:modelValue"])
+          ]);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$a = { class: "bs-grid-lookup bs-layout-horizontal flex-align-start" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "BSGridLookup",
+  props: {
+    config: {}
+  },
+  emits: ["search"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const textFilterValue = ref();
+    const dateFilterValue = ref();
+    const emitSearch = () => {
+      const filters = [];
+      if (textFilterValue.value)
+        filters.push(textFilterValue.value);
+      if (dateFilterValue.value) {
+        dateFilterValue.value.filters.forEach((filter) => filters.push(filter));
+      }
+      const and = filters.length > 0 ? andFilter(filters) : void 0;
+      emit("search", and);
+    };
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+        ((_a = _ctx.config) == null ? void 0 : _a.textFilter) ? (openBlock(), createBlock(_sfc_main$f, {
+          key: 0,
+          modelValue: textFilterValue.value,
+          "onUpdate:modelValue": [
+            _cache[0] || (_cache[0] = ($event) => textFilterValue.value = $event),
+            emitSearch
+          ],
+          "text-filter-items": _ctx.config.textFilter.filterItems,
+          class: "mr-32"
+        }, null, 8, ["modelValue", "text-filter-items"])) : createCommentVNode("", true),
+        ((_b = _ctx.config) == null ? void 0 : _b.dateFilter) ? (openBlock(), createBlock(_sfc_main$d, {
+          key: 1,
+          modelValue: dateFilterValue.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => dateFilterValue.value = $event),
+          "date-filter": _ctx.config.dateFilter
+        }, null, 8, ["modelValue", "date-filter"])) : createCommentVNode("", true),
+        createElementVNode("div", null, [
+          createVNode(_sfc_main$A, {
+            caption: "Search",
+            onClick: emitSearch
+          })
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1$9 = { class: "bs-grid-control" };
+const _hoisted_2$6 = {
+  key: 0,
+  class: "bs-clickable"
+};
+const _hoisted_3$3 = {
+  key: 1,
+  class: "bs-clickable"
+};
+const _hoisted_4$2 = {
+  key: 2,
+  class: "bs-clickable"
+};
+const _hoisted_5$2 = { "data-id": "totalCount" };
+const _hoisted_6 = { key: 5 };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "BSGridControl",
+  props: {
+    showSetting: { type: Boolean },
+    showClearFilter: { type: Boolean },
+    showFilter: { type: Boolean },
+    showLimit: { type: Boolean },
+    showAdd: { type: Boolean },
+    showRemove: { type: Boolean },
+    limitItems: { default: () => [100, 300, 500] },
+    limit: {},
+    totalCount: {}
+  },
+  emits: ["update:limit", "clickAdd", "clickRemove"],
+  setup(__props, { emit: __emit }) {
+    var _a;
+    const props = __props;
+    const emit = __emit;
+    const limitValue = ref(props.limit || ((_a = props.limitItems) == null ? void 0 : _a[0]) || 100);
+    const changeLimit = (limit) => {
+      emit("update:limit", Math.max(1, limit || 0));
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+        _ctx.showSetting ? (openBlock(), createElementBlock("div", _hoisted_2$6, " 칼럼설정 ")) : createCommentVNode("", true),
+        _ctx.showClearFilter ? (openBlock(), createElementBlock("div", _hoisted_3$3, " 필터초기화 ")) : createCommentVNode("", true),
+        _ctx.showFilter ? (openBlock(), createElementBlock("div", _hoisted_4$2, " 필터 ")) : createCommentVNode("", true),
+        _ctx.showAdd ? (openBlock(), createElementBlock("div", {
+          key: 3,
+          class: "bs-clickable",
+          onClick: _cache[0] || (_cache[0] = ($event) => emit("clickAdd"))
+        }, " 추가 ")) : createCommentVNode("", true),
+        _ctx.showRemove ? (openBlock(), createElementBlock("div", {
+          key: 4,
+          class: "bs-clickable",
+          onClick: _cache[1] || (_cache[1] = ($event) => emit("clickRemove"))
+        }, " 선택삭제 ")) : createCommentVNode("", true),
+        createElementVNode("div", null, [
+          createTextVNode("전체: "),
+          createElementVNode("span", _hoisted_5$2, toDisplayString(unref(formatUtil).formatNumber(_ctx.totalCount)), 1)
+        ]),
+        _ctx.showLimit ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          createVNode(_sfc_main$p, {
+            modelValue: limitValue.value,
+            "onUpdate:modelValue": [
+              _cache[2] || (_cache[2] = ($event) => limitValue.value = $event),
+              changeLimit
+            ],
+            items: _ctx.limitItems,
+            class: "page-length"
+          }, null, 8, ["modelValue", "items"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$8 = { class: "bs-tab-sheet bs-layout-vertical" };
+const _hoisted_2$5 = { class: "tab-bar bs-layout-horizontal" };
+const _hoisted_3$2 = { class: "tabs flex-grow-1 flex-shrink-1" };
+const _hoisted_4$1 = ["onClick"];
+const _hoisted_5$1 = { class: "buttons text-nowrap" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "BSTabSheet",
+  props: {
+    tabs: { default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    const currentTab = ref();
+    const selectTab = (tab) => currentTab.value = tab;
+    onMounted(() => {
+      selectTab(props.tabs[0]);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        createElementVNode("div", _hoisted_2$5, [
+          createElementVNode("div", _hoisted_3$2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, (tab) => {
+              var _a;
+              return openBlock(), createElementBlock("div", {
+                key: tab.tabId,
+                class: normalizeClass([{ selected: (tab == null ? void 0 : tab.tabId) === ((_a = currentTab.value) == null ? void 0 : _a.tabId) }, "bs-clickable tab"]),
+                onClick: ($event) => selectTab(tab)
+              }, toDisplayString(tab.caption), 11, _hoisted_4$1);
+            }), 128))
+          ]),
+          createElementVNode("div", _hoisted_5$1, [
+            renderSlot(_ctx.$slots, "buttons")
+          ])
+        ]),
+        currentTab.value ? renderSlot(_ctx.$slots, currentTab.value.tabId, { key: 0 }) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const defaultTreeChildrenProvider = (item) => {
+  return item && typeof item === "object" && "children" in item ? item.children : void 0;
+};
+class TreeRowStatuses {
+  constructor() {
+    __publicField(this, "expanded", /* @__PURE__ */ new Set());
+    __publicField(this, "selected", /* @__PURE__ */ new Set());
+  }
+}
+const defaultCaptionProvider = (item) => (item == null ? void 0 : item.toString()) || "";
+const _hoisted_1$7 = { class: "bs-tree-row" };
+const _hoisted_2$4 = { class: "row-caption" };
+const _hoisted_3$1 = ["onClick"];
+const _hoisted_4 = ["textContent", "onClick", "onDblclick"];
+const _hoisted_5 = {
+  key: 0,
+  class: "child-rows"
+};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "BSTreeRow",
+  props: {
+    row: {},
+    childrenProvider: { type: Function, default: defaultTreeChildrenProvider },
+    captionProvider: { type: Function, default: defaultCaptionProvider }
+  },
+  emits: ["toggleRow", "selectRow"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const caption = computed(() => props.captionProvider(props.row));
+    const children = computed(() => props.childrenProvider(props.row));
+    const treeRowStatuses = inject("TREE_ROW_STATUSES");
+    const isOpen = computed(() => (treeRowStatuses == null ? void 0 : treeRowStatuses.expanded.has(props.row)) || false);
+    const toggleRow = () => emit("toggleRow", props.row, !isOpen.value);
+    const toggleChildRow = (row, expanded) => emit("toggleRow", row, expanded);
+    const isSelected = computed(() => (treeRowStatuses == null ? void 0 : treeRowStatuses.selected.has(props.row)) || false);
+    const selectRow = () => emit("selectRow", props.row, !isSelected.value);
+    const selectChildRow = (row, selected) => emit("selectRow", row, selected);
+    const rowIcon = computed(() => children.value && children.value.length > 0 ? isOpen.value ? "arrow_drop_down" : "arrow_right" : "");
+    return (_ctx, _cache) => {
+      const _component_BSTreeRow = resolveComponent("BSTreeRow", true);
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+        createElementVNode("div", _hoisted_2$4, [
+          createElementVNode("span", {
+            class: "bs-clickable font-icon w-16",
+            onClick: withModifiers(toggleRow, ["stop"])
+          }, toDisplayString(rowIcon.value), 9, _hoisted_3$1),
+          createElementVNode("span", {
+            class: normalizeClass([{ selected: isSelected.value }, "caption"]),
+            textContent: toDisplayString(caption.value),
+            onClick: withModifiers(selectRow, ["stop"]),
+            onDblclick: withModifiers(toggleRow, ["stop"])
+          }, null, 42, _hoisted_4)
+        ]),
+        children.value && children.value.length > 0 ? withDirectives((openBlock(), createElementBlock("div", _hoisted_5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child) => {
+            return openBlock(), createBlock(_component_BSTreeRow, {
+              key: child == null ? void 0 : child.toString(),
+              "caption-provider": _ctx.captionProvider,
+              "children-provider": _ctx.childrenProvider,
+              row: child,
+              onToggleRow: toggleChildRow,
+              onSelectRow: selectChildRow
+            }, null, 8, ["caption-provider", "children-provider", "row"]);
+          }), 128))
+        ], 512)), [
+          [vShow, isOpen.value]
+        ]) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$6 = { class: "bs-tree" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "BSTree",
+  props: {
+    data: {},
+    childrenProvider: { type: Function, default: defaultTreeChildrenProvider },
+    captionProvider: { type: Function, default: defaultCaptionProvider },
+    expandedRows: {},
+    selectedRows: {},
+    multiSelect: { type: Boolean }
+  },
+  emits: ["update:expandedRows", "update:selectedRows"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const treeRowStatuses = reactive(new TreeRowStatuses());
+    provide("TREE_ROW_STATUSES", treeRowStatuses);
+    watch(
+      () => props.expandedRows,
+      () => {
+        if (props.expandedRows && props.expandedRows !== treeRowStatuses.expanded) {
+          treeRowStatuses.expanded = props.expandedRows;
+        }
+      },
+      { immediate: true }
+    );
+    const toggleRow = (row, expanded) => {
+      if (expanded) {
+        treeRowStatuses.expanded.add(row);
+      } else {
+        treeRowStatuses.expanded.delete(row);
+      }
+      emit("update:expandedRows", treeRowStatuses.expanded);
+    };
+    watch(
+      () => props.selectedRows,
+      () => {
+        if (props.selectedRows && props.selectedRows !== treeRowStatuses.selected) {
+          treeRowStatuses.selected = props.selectedRows;
+        }
+      },
+      { immediate: true }
+    );
+    const selectRow = (row, selected) => {
+      const selectedItems = treeRowStatuses.selected;
+      if (props.multiSelect) {
+        if (selected) {
+          selectedItems.add(row);
+        } else {
+          selectedItems.delete(row);
+        }
+        emit("update:selectedRows", selectedItems);
+      } else {
+        if (selectedItems.size !== 1 || !selectedItems.has(row)) {
+          selectedItems.clear();
+          selectedItems.add(row);
+          emit("update:selectedRows", selectedItems);
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (row) => {
+          return openBlock(), createBlock(_sfc_main$9, {
+            key: row == null ? void 0 : row.toString(),
+            "caption-provider": _ctx.captionProvider,
+            "children-provider": _ctx.childrenProvider,
+            row,
+            onToggleRow: toggleRow,
+            onSelectRow: selectRow
+          }, null, 8, ["caption-provider", "children-provider", "row"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+class DefaultFrameContext {
+  constructor(config) {
+    __publicField(this, "pageManager");
+    this.config = config;
+    this.pageManager = new PageManager(config.menus, config.extraPages, config.firstPage);
+  }
+  getMenus() {
+    return this.config.menus;
+  }
+  // 현재 route 에 해당하는 Page 를 오픈한다.
+  openCurrentPage(route) {
+    const pagePath = route.path.substring(this.config.framePrefix.length);
+    this.pageManager.openPage(pagePath);
+  }
+  // pagePath 에 해당하는 화면 URL 로 이동한다.
+  async openPagePath(router, pagePath) {
+    const actualPath = pagePath.replace(/^\/+/, "");
+    await router.push({ path: `${this.config.framePrefix}/${actualPath}` });
+  }
+}
+const createDefaultFrameContext = (config) => {
+  const defaultConfig = {
+    framePrefix: "/",
+    logoText: "G1 Commerce",
+    menus: [],
+    extraPages: []
+  };
+  const mergedConfig = Object.assign(defaultConfig, config || {});
+  return new DefaultFrameContext(mergedConfig);
+};
+const CONTEXT_NAME = "DEFAULT_FRAME_CONTEXT";
+const provideDefaultFrameContext = (config) => {
+  const context = createDefaultFrameContext(config);
+  provide(CONTEXT_NAME, context);
+  return context;
+};
+const useDefaultFrame = () => {
+  const context = inject(CONTEXT_NAME);
+  if (!context)
+    throw new Error("DefaultFrameContext not found. You should call provideDefaultFrameContext().");
+  else
+    return context;
+};
+class PageManager {
+  constructor(menus, extraPages, firstPage) {
+    __publicField(this, "openPages", shallowReactive([]));
+    __publicField(this, "pageMap", /* @__PURE__ */ new Map());
+    this.menus = menus;
+    this.extraPages = extraPages;
+    this.firstPage = firstPage;
+    this.collectPages(this.pageMap, this.menus);
+    this.extraPages.forEach((page) => this.pageMap.set(page.pageId, page));
+  }
+  createPageInstance(pagePath) {
+    var _a;
+    let page;
+    if (pagePath === "/" || pagePath === "") {
+      page = this.firstPage;
+    } else {
+      const pageId = (_a = /^\/([^\/]+)/.exec(pagePath)) == null ? void 0 : _a[1];
+      page = pageId ? this.pageMap.get(pageId) : void 0;
+    }
+    if (page) {
+      return reactive({
+        pageId: page.pageId,
+        path: pagePath,
+        active: false,
+        component: markRaw(page.component),
+        // component 는 reactive 하지 않아야 한다.
+        hideTab: page === this.firstPage
+      });
+    }
+  }
+  openPage(pagePath) {
+    let page = this.openPages.find((instance) => instance.path === pagePath);
+    if (!page) {
+      page = this.createPageInstance(pagePath);
+      if (page) {
+        this.openPages.push(page);
+      }
+    }
+    this.setActivePage(page);
+  }
+  collectPages(pageMap, menus) {
+    menus.forEach((menu) => {
+      var _a;
+      (_a = menu.pages) == null ? void 0 : _a.forEach((page) => pageMap.set(page.pageId, page));
+      if (menu.subMenu)
+        this.collectPages(pageMap, menu.subMenu);
+    });
+  }
+  setActivePage(page) {
+    this.openPages.forEach((p) => p.active = p === page);
+  }
+}
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "SidebarMenuLink",
+  props: {
+    menu: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const context = useDefaultFrame();
+    const menuLink = computed(() => props.menu.pages && props.menu.pages.length > 0 ? `${context.config.framePrefix}/${props.menu.pages[0].pageId}` : void 0);
+    return (_ctx, _cache) => {
+      const _component_router_link = resolveComponent("router-link");
+      return menuLink.value ? (openBlock(), createBlock(_component_router_link, {
+        key: 0,
+        to: menuLink.value,
+        class: "sidebar-menu-link",
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click"))
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.menu.caption), 1)
+        ]),
+        _: 1
+      }, 8, ["to"])) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: "sidebar-menu-link",
+        tabindex: "0",
+        onClick: _cache[1] || (_cache[1] = ($event) => emit("click")),
+        onKeyup: _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => emit("click"), ["prevent"]), ["enter"]))
+      }, toDisplayString(_ctx.menu.caption), 33));
+    };
+  }
+});
+const _hoisted_1$5 = { class: "sidebar-menu-item" };
+const _hoisted_2$3 = {
+  key: 0,
+  class: "sidebar-submenu"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "SidebarMenuItem",
+  props: {
+    menu: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const hasSubMenus = computed(() => {
+      var _a;
+      return (((_a = props.menu.subMenu) == null ? void 0 : _a.length) || 0) > 0;
+    });
+    const showSubMenu = ref(false);
+    const toggleSubMenu = () => showSubMenu.value = !showSubMenu.value;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createVNode(_sfc_main$7, {
+          menu: _ctx.menu,
+          onClick: toggleSubMenu
+        }, null, 8, ["menu"]),
+        hasSubMenus.value && showSubMenu.value ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menu.subMenu, (submenu) => {
+            return openBlock(), createBlock(_sfc_main$7, {
+              key: submenu.menuId,
+              menu: submenu
+            }, null, 8, ["menu"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$4 = ["onKeyup"];
+const _hoisted_2$2 = ["onKeydown", "onClick"];
+const _hoisted_3 = { class: "menu-container" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "SidebarMenu",
+  setup(__props) {
+    const showMenu = ref(false);
+    const toggleMenu = () => {
+      showMenu.value = !showMenu.value;
+    };
+    const hideMenu = () => {
+      showMenu.value = false;
+    };
+    const context = useDefaultFrame();
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: "sidebar-menu",
+        onKeyup: withKeys(hideMenu, ["esc"])
+      }, [
+        createElementVNode("div", {
+          class: "menu-btn font-icon",
+          tabindex: "0",
+          onKeydown: withKeys(withModifiers(toggleMenu, ["stop"]), ["enter", "space"]),
+          onClick: withModifiers(toggleMenu, ["stop"])
+        }, toDisplayString(showMenu.value ? "menu_open" : "menu"), 41, _hoisted_2$2),
+        createVNode(Transition, { name: "menu-slide" }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", _hoisted_3, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(context).getMenus(), (menu) => {
+                return openBlock(), createBlock(_sfc_main$6, {
+                  key: menu.menuId,
+                  menu
+                }, null, 8, ["menu"]);
+              }), 128))
+            ], 512), [
+              [vShow, showMenu.value]
+            ])
+          ]),
+          _: 1
+        })
+      ], 40, _hoisted_1$4)), [
+        [unref(vClickOutside), hideMenu]
+      ]);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "HeaderLogo",
+  setup(__props) {
+    const context = useDefaultFrame();
+    const router = useRouter();
+    const goToFirstPage = () => {
+      context.openPagePath(router, "/");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "header-logo",
+        onClick: goToFirstPage
+      }, " G1 Commerce ");
+    };
+  }
+});
+const _hoisted_1$3 = { class: "header-title" };
+const _hoisted_2$1 = ["onClick"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "HeaderTab",
+  props: {
+    page: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const context = useDefaultFrame();
+    const router = useRouter();
+    const selectPage = () => {
+      context.openPagePath(router, props.page.path);
+    };
+    const closePage = () => {
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([{ selected: _ctx.page.active }, "header-tab"]),
+        onClick: selectPage
+      }, [
+        createElementVNode("div", _hoisted_1$3, toDisplayString(_ctx.page.pageId), 1),
+        createElementVNode("div", {
+          class: "font-icon close-btn",
+          onClick: withModifiers(closePage, ["stop"])
+        }, " close ", 8, _hoisted_2$1)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$2 = { class: "header-tabs" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "HeaderTabs",
+  setup(__props) {
+    const context = useDefaultFrame();
+    const openPages = computed(() => context.pageManager.openPages.filter((page) => !page.hideTab));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(openPages.value, (page) => {
+          return openBlock(), createBlock(_sfc_main$3, {
+            key: page.path,
+            page
+          }, null, 8, ["page"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "default-header" };
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", null, null, -1);
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "DefaultHeader",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("header", _hoisted_1$1, [
+        createVNode(_sfc_main$5),
+        createVNode(_sfc_main$4),
+        createVNode(_sfc_main$2),
+        _hoisted_2
+      ]);
+    };
+  }
+});
+const _hoisted_1 = { class: "default-body" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DefaultBody",
+  setup(__props) {
+    const context = useDefaultFrame();
+    const route = useRoute();
+    const openPages = computed(() => context.pageManager.openPages);
+    watch(() => route.path, () => {
+      context.openCurrentPage(route);
+    }, { immediate: true });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(openPages.value, (item) => {
+          return withDirectives((openBlock(), createElementBlock("div", {
+            key: item.path,
+            class: "body-tab"
+          }, [
+            (openBlock(), createBlock(resolveDynamicComponent(item.component)))
+          ])), [
+            [vShow, item.active]
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const waitUntil = async (condition, intervalMilliseconds = 200, maxTrial = 15) => {
+  return await new Promise((resolve) => {
+    let tried = 0;
+    const interval = setInterval(() => {
+      if (tried > maxTrial || condition()) {
+        clearInterval(interval);
+        resolve(void 0);
+      }
+      tried++;
+    }, intervalMilliseconds);
+  });
+};
+const waitDuring = async (milliSec = 2e3) => {
+  return new Promise((resolve) => setTimeout(resolve, milliSec));
+};
+const tryUntil = (until, tryCall, intervalMilliseconds = 200, maxTrial = 15) => {
+  let tried = 0;
+  const interval = setInterval(() => {
+    tried > maxTrial || until() ? clearInterval(interval) : tryCall == null ? void 0 : tryCall();
+    tried++;
+  }, intervalMilliseconds);
+};
+const parsePathParam = (route) => {
+  const pagePath = String(route.params.pagePath);
+  return pagePath.split("/").slice(1);
+};
+const BLUESEA_VERSION = "5.0.0";
+export {
+  BLUESEA_VERSION,
+  _sfc_main$A as BSButton,
+  _sfc_main$v as BSCheckbox,
+  _sfc_main$u as BSCheckboxGroup,
+  _sfc_main$w as BSDateInput,
+  _sfc_main$e as BSDateRangeFilter,
+  _sfc_main$g as BSGrid,
+  _sfc_main$b as BSGridControl,
+  _sfc_main$c as BSGridLookup,
+  _sfc_main$o as BSMultiSelect,
+  _sfc_main$y as BSNumberInput,
+  _sfc_main$t as BSRadioButton,
+  _sfc_main$s as BSRadioButtonGroup,
+  _sfc_main$p as BSSelect,
+  _sfc_main$a as BSTabSheet,
+  _sfc_main$m as BSTextArea,
+  _sfc_main$f as BSTextFilter,
+  _sfc_main$z as BSTextInput,
+  _sfc_main$8 as BSTree,
+  _sfc_main$n as BSTreeSelect,
+  _sfc_main as DefaultBody,
+  DefaultFrameContext,
+  _sfc_main$1 as DefaultHeader,
+  createDefaultFrameContext,
+  formatUtil,
+  notNull,
+  parsePathParam,
+  provideDefaultFrameContext,
+  tryUntil,
+  useDefaultFrame,
+  waitDuring,
+  waitUntil
+};