@g1cloud/open-bluesea-core 1.0.0-alpha.5 → 1.0.0-alpha.6

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

@@ -1,4 +1,4 @@
-import { inject, ref, markRaw, reactive, defineComponent, withDirectives, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, createElementVNode, toDisplayString, unref, computed, withModifiers, Fragment, renderList, onMounted, onBeforeUnmount, Teleport, createVNode, Transition, normalizeStyle, renderSlot, watch, nextTick, withKeys, provide, shallowRef, useTemplateRef, mergeProps, isRef, toHandlers, vModelDynamic, vModelText, useSlots, vShow, TransitionGroup, resolveComponent } from "vue";
+import { inject, ref, markRaw, reactive, defineComponent, withDirectives, createBlock, openBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, createCommentVNode, createElementVNode, toDisplayString, unref, computed, withModifiers, Fragment, renderList, onMounted, onBeforeUnmount, Teleport, createVNode, Transition, normalizeStyle, renderSlot, watch, nextTick, withKeys, provide, shallowRef, useTemplateRef, mergeProps, isRef, toHandlers, vModelDynamic, vModelText, useSlots, vShow, defineAsyncComponent, TransitionGroup, resolveComponent } from "vue";
 import dayjs from "dayjs";
 const ContextMenuPluginKey = Symbol("BlueseaContextMenuPlugin");
 class BSContextMenuPlugin {
@@ -24,17 +24,14 @@ class BSContextMenuPlugin {
   // }
   markComponentRaw(menus) {
     menus.forEach((menu) => {
-      if (menu.component)
-        menu.component = markRaw(menu.component);
-      if (menu.children)
-        this.markComponentRaw(menu.children);
+      if (menu.component) menu.component = markRaw(menu.component);
+      if (menu.children) this.markComponentRaw(menu.children);
     });
   }
 }
 const useContextMenu = () => {
   const contextMenu = inject(ContextMenuPluginKey);
-  if (!contextMenu)
-    throw new Error("BSContextMenuPlugin is not initialized.");
+  if (!contextMenu) throw new Error("BSContextMenuPlugin is not initialized.");
   return contextMenu;
 };
 const useContextMenuOptional = () => {
@@ -59,8 +56,7 @@ class BlueseaConfig {
     this.dateFormatSecond = config?.dateFormatSecond || this.dateFormatSecond;
     this.minDateValue = config?.minDateValue || this.minDateValue;
     this.maxDateValue = config?.maxDateValue || this.maxDateValue;
-    if (config?.timeZone)
-      this.timeZone = config.timeZone;
+    if (config?.timeZone) this.timeZone = config.timeZone;
     this.componentConfig = {
       popup: { hideOnScroll: false, ...config?.componentConfig?.popup },
       calendar: { startYear: "-20", endYear: "+20", ...config?.componentConfig?.calendar }
@@ -68,14 +64,10 @@ class BlueseaConfig {
   }
   resolveDisplayDateFormat(format) {
     const actualFormat = format || this.dateFormat;
-    if (actualFormat === "DAY")
-      return this.dateFormatDay;
-    else if (actualFormat === "MINUTE")
-      return this.dateFormatMinute;
-    else if (actualFormat === "SECOND")
-      return this.dateFormatSecond;
-    else
-      return actualFormat;
+    if (actualFormat === "DAY") return this.dateFormatDay;
+    else if (actualFormat === "MINUTE") return this.dateFormatMinute;
+    else if (actualFormat === "SECOND") return this.dateFormatSecond;
+    else return actualFormat;
   }
 }
 const BlueseaConfigKey = Symbol("BlueseaConfig");
@@ -156,10 +148,8 @@ const withLoading = async (func) => {
   try {
     return await func();
   } finally {
-    if (shown)
-      hideLoading();
-    if (timeoutId)
-      window.clearTimeout(timeoutId);
+    if (shown) hideLoading();
+    if (timeoutId) window.clearTimeout(timeoutId);
   }
 };
 const DEFAULT_TOOLTIP_SHOW_DELAY = 800;
@@ -167,12 +157,10 @@ const DEFAULT_TOOLTIP_HIDE_DELAY = 0;
 const setTooltipParam = (el, param) => {
   if (param && param.content) {
     el.setAttribute("data-bs-tooltip-data", JSON.stringify(param));
-    if (isTooltipDisplayed())
-      showTooltip(param.content, el);
+    if (isTooltipDisplayed()) showTooltip(param.content, el);
   } else {
     el.removeAttribute("data-bs-tooltip-data");
-    if (isTooltipDisplayed())
-      hideTooltip();
+    if (isTooltipDisplayed()) hideTooltip();
   }
 };
 const vTooltip = {
@@ -206,8 +194,8 @@ const vTooltip = {
     hideTooltip();
   }
 };
-const _hoisted_1$q = ["textContent"];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = ["textContent"];
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "BSButton",
   props: {
     caption: {},
@@ -236,7 +224,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           }, toDisplayString(__props.leftIcon), 3)) : createCommentVNode("", true),
           createElementVNode("span", {
             textContent: toDisplayString(__props.caption)
-          }, null, 8, _hoisted_1$q),
+          }, null, 8, _hoisted_1$u),
           __props.rightIcon ? (openBlock(), createElementBlock("span", {
             key: 1,
             class: normalizeClass([{ "ml-1": !!__props.caption }, "font-icon right"])
@@ -249,9 +237,9 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$p = { class: "page-navigation" };
-const _hoisted_2$l = ["data-page", "onClick"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$t = { class: "page-navigation" };
+const _hoisted_2$o = ["data-page", "onClick"];
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "BSPageNavigation",
   props: {
     totalCount: { default: 0 },
@@ -311,7 +299,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
         createElementVNode("span", {
           class: normalizeClass([{ "disabled": isFirstSet.value }, "font-icon first"]),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => !isFirstSet.value && goToPage(1), ["prevent"]))
@@ -326,7 +314,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             class: normalizeClass([{ on: page === currentPage.value }, "page"]),
             "data-page": page,
             onClick: withModifiers(($event) => goToPage(page), ["prevent"])
-          }, toDisplayString(page), 11, _hoisted_2$l);
+          }, toDisplayString(page), 11, _hoisted_2$o);
         }), 128)),
         createElementVNode("span", {
           class: normalizeClass([{ "disabled": isLastSet.value }, "font-icon next"]),
@@ -347,14 +335,14 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$p = {};
-const _hoisted_1$o = { class: "bs-loading-icon" };
+const _sfc_main$u = {};
+const _hoisted_1$s = { class: "bs-loading-icon" };
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$o, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("div", _hoisted_1$s, [..._cache[0] || (_cache[0] = [
     createElementVNode("span", { class: "font-icon" }, "progress_activity", -1)
   ])]);
 }
-const BSLoadingIcon = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render]]);
+const BSLoadingIcon = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render]]);
 const waitUntil = async (condition, intervalMilliseconds = 200, maxTrial = 15) => {
   return await new Promise((resolve) => {
     let tried = 0;
@@ -377,9 +365,9 @@ const tryUntil = (until, tryCall, intervalMilliseconds = 200, maxTrial = 15) =>
     tried++;
   }, intervalMilliseconds);
 };
-const _hoisted_1$n = ["data-popup-id"];
+const _hoisted_1$r = ["data-popup-id"];
 const ADJUST_OFFSET = 8;
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "BSPopup",
   props: {
     popupId: {},
@@ -570,7 +558,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               onKeydown: _cache[1] || (_cache[1] = ($event) => emit("keydown", $event))
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 46, _hoisted_1$n)
+            ], 46, _hoisted_1$r)
           ]),
           _: 3
         })
@@ -578,8 +566,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = ["textContent"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["textContent"];
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "BSTooltip",
   props: {
     align: { default: "center" },
@@ -606,7 +594,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", {
           textContent: toDisplayString(__props.content)
-        }, null, 8, _hoisted_1$m)
+        }, null, 8, _hoisted_1$q)
       ], 6);
     };
   }
@@ -648,14 +636,14 @@ const debounce = (func, wait) => {
     });
   };
 };
-const _hoisted_1$l = {
+const _hoisted_1$p = {
   key: 0,
   class: "popup-search"
 };
-const _hoisted_2$k = ["data-value", "onMouseover", "onClick"];
-const _hoisted_3$g = ["textContent"];
-const _hoisted_4$a = ["textContent"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_2$n = ["data-value", "onMouseover", "onClick"];
+const _hoisted_3$h = ["textContent"];
+const _hoisted_4$b = ["textContent"];
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "BSSelectPopup",
   props: {
     items: {},
@@ -797,7 +785,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       handleKeyboard
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, {
+      return openBlock(), createBlock(_sfc_main$t, {
         "base-element": __props.baseElement,
         "max-height": __props.maxHeight,
         "offset-from-base-element": 4,
@@ -808,7 +796,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         onKeydown: withKeys(withModifiers(handleKeyboard, ["stop", "prevent"]), ["enter", "down", "up"])
       }, {
         default: withCtx(() => [
-          actualShowSearch.value ? (openBlock(), createElementBlock("div", _hoisted_1$l, [
+          actualShowSearch.value ? (openBlock(), createElementBlock("div", _hoisted_1$p, [
             withDirectives(createElementVNode("input", {
               type: "text",
               onInput: setSearchKeyword,
@@ -841,12 +829,12 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                   key: 0,
                   textContent: toDisplayString(item?.label),
                   class: "label"
-                }, null, 8, _hoisted_3$g)) : (openBlock(), createElementBlock("label", {
+                }, null, 8, _hoisted_3$h)) : (openBlock(), createElementBlock("label", {
                   key: 1,
                   textContent: toDisplayString(__props.nullLabel),
                   class: "label null-label"
-                }, null, 8, _hoisted_4$a))
-              ], 42, _hoisted_2$k);
+                }, null, 8, _hoisted_4$b))
+              ], 42, _hoisted_2$n);
             }), 128))
           ], 512)
         ]),
@@ -863,13 +851,10 @@ const updateContext = (el, value) => {
   };
 };
 const clickInsideElements = (target, elements) => {
-  if (!elements)
-    return false;
+  if (!elements) return false;
   return elements.some((el) => {
-    if (el instanceof HTMLElement)
-      return el.contains(target);
-    else if (typeof el === "string")
-      return document.querySelector(el)?.contains(target);
+    if (el instanceof HTMLElement) return el.contains(target);
+    else if (typeof el === "string") return document.querySelector(el)?.contains(target);
   });
 };
 const vClickOutside = {
@@ -894,8 +879,7 @@ const vClickOutside = {
   },
   unmounted: (el) => {
     const clickListener = el.vClickOutsideListener;
-    if (clickListener)
-      window.removeEventListener("click", clickListener);
+    if (clickListener) window.removeEventListener("click", clickListener);
     delete el.vClickOutsideContext;
   }
 };
@@ -990,10 +974,12 @@ const fieldValidator = (option) => {
   };
   stringValue.value = convertFromValue(value.value);
   if (option.field) {
-    watch(option.field, (field) => {
-      if (field)
-        storeFieldValidator(field, validator);
-    });
+    watch(
+      option.field,
+      (field) => {
+        if (field) storeFieldValidator(field, validator);
+      }
+    );
   }
   return validator;
 };
@@ -1002,8 +988,7 @@ const executeFieldValidationRule = async (value, rules, errors, phase, fieldCont
   if (rules) {
     for (const rule of rules) {
       const result = await rule(value, phase, fieldContext);
-      if (result)
-        result.forEach((error) => errs.push(error));
+      if (result) result.forEach((error) => errs.push(error));
     }
     errs.forEach((error) => errors.push(error));
   }
@@ -1113,26 +1098,25 @@ class SavePointImpl {
       setCurrentValue: option.setCurrentValue,
       compare: option.compare
     });
-    watch(option.field, (field) => {
-      if (field)
-        this.fields.set(field, handler);
-    });
+    watch(
+      option.field,
+      (field) => {
+        if (field) this.fields.set(field, handler);
+      }
+    );
     return handler;
   }
   unregisterField(field) {
-    if (field.value)
-      this.fields.delete(field.value);
+    if (field.value) this.fields.delete(field.value);
   }
   addChild(child) {
-    if (!this.children)
-      this.children = [];
+    if (!this.children) this.children = [];
     this.children.push(child);
   }
   removeChild(child) {
     if (this.children) {
       const index = this.children.findIndex((ch) => ch === child);
-      if (index >= 0)
-        this.children.splice(index, 1);
+      if (index >= 0) this.children.splice(index, 1);
     }
   }
   set() {
@@ -1185,8 +1169,7 @@ class SavePointHandlerImpl {
     return this.savedValue.value;
   }
   rollbackValue() {
-    if (this.saved)
-      this.valueProvider.setCurrentValue(this.savedValue.value);
+    if (this.saved) this.valueProvider.setCurrentValue(this.savedValue.value);
   }
   isModified(currentValue) {
     return this.saved && (this.valueProvider.compare ? !this.valueProvider.compare(this.savedValue.value, currentValue) : this.savedValue?.value !== currentValue);
@@ -1195,9 +1178,9 @@ class SavePointHandlerImpl {
     return this.isModified(this.valueProvider.getCurrentValue());
   }
 }
-const _hoisted_1$k = { key: 0 };
-const _hoisted_2$j = ["textContent"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = { key: 0 };
+const _hoisted_2$m = ["textContent"];
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "ValidationErrors",
   props: {
     errors: {},
@@ -1205,13 +1188,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return !__props.hideErrorMessage && __props.errors && __props.errors.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return !__props.hideErrorMessage && __props.errors && __props.errors.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$o, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.errors, (error) => {
           return openBlock(), createElementBlock("div", {
             key: error.code,
             textContent: toDisplayString(error.message),
             class: "bs-field-error"
-          }, null, 8, _hoisted_2$j);
+          }, null, 8, _hoisted_2$m);
         }), 128))
       ])) : createCommentVNode("", true);
     };
@@ -1227,39 +1210,43 @@ const useFieldContext = () => {
   return result === dummyFieldContext ? void 0 : result;
 };
 const defaultLabelProvider = (item) => {
-  if (!item)
-    return "";
-  else if (typeof item === "string")
-    return item;
-  else
-    return String(item);
+  if (!item) return "";
+  else if (typeof item === "string") return item;
+  else return String(item);
+};
+const emptyLabelProvider = (_item) => {
+  return void 0;
 };
 const executeLabelProviderOrDefault = (item, labelProvider, defaultLabel) => {
   if (labelProvider) {
     const label = labelProvider(item);
-    if (label !== void 0)
-      return label;
+    if (label !== void 0) return label;
   }
   return defaultLabel(item);
 };
+const defaultKeyProvider = (item) => {
+  return JSON.stringify(item);
+};
+const emptyKeyProvider = (_item) => {
+  return void 0;
+};
 const executeKeyProviderOrDefault = (item, keyProvider, defaultKey) => {
   if (keyProvider) {
     const key = keyProvider(item);
-    if (key)
-      return key;
+    if (key) return key;
   }
   return defaultKey(item);
 };
-const _hoisted_1$j = ["tabindex", "onKeydown"];
-const _hoisted_2$i = ["textContent"];
-const _hoisted_3$f = ["data-field-name"];
-const _hoisted_4$9 = ["textContent"];
-const _hoisted_5$4 = ["textContent"];
+const _hoisted_1$n = ["tabindex", "onKeydown"];
+const _hoisted_2$l = ["textContent"];
+const _hoisted_3$g = ["data-field-name"];
+const _hoisted_4$a = ["textContent"];
+const _hoisted_5$5 = ["textContent"];
 const _hoisted_6$2 = {
   key: 2,
   class: "small-progress"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "BSSelect",
   props: {
     modelValue: {},
@@ -1394,7 +1381,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         __props.viewMode ? (openBlock(), createElementBlock("div", {
           key: 0,
           textContent: toDisplayString(selectedItemLabel.value)
-        }, null, 8, _hoisted_2$i)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        }, null, 8, _hoisted_2$l)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createElementVNode("div", {
             ref_key: "field",
             ref: field,
@@ -1406,15 +1393,15 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               key: 0,
               textContent: toDisplayString(__props.placeholder),
               class: "placeholder grow"
-            }, null, 8, _hoisted_4$9)) : (openBlock(), createElementBlock("span", {
+            }, null, 8, _hoisted_4$a)) : (openBlock(), createElementBlock("span", {
               key: 1,
               textContent: toDisplayString(selectedItemLabel.value),
               class: "label"
-            }, null, 8, _hoisted_5$4)),
+            }, null, 8, _hoisted_5$5)),
             _cache[4] || (_cache[4] = createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1)),
             loadingItems.value ? (openBlock(), createElementBlock("span", _hoisted_6$2, "progress_activity")) : createCommentVNode("", true)
-          ], 8, _hoisted_3$f),
-          !__props.disabled && showPopup.value ? (openBlock(), createBlock(_sfc_main$m, {
+          ], 8, _hoisted_3$g),
+          !__props.disabled && showPopup.value ? (openBlock(), createBlock(_sfc_main$r, {
             key: 0,
             ref_key: "selectPopup",
             ref: selectPopup,
@@ -1436,26 +1423,26 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               focusToRoot();
             })
           }, null, 8, ["allow-null", "base-element", "initial-item", "items", "label-provider", "max-height", "null-label", "popup-align", "popup-direction", "selected-items", "show-search", "value-provider"])) : createCommentVNode("", true),
-          !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+          !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
             key: 1,
             errors: unref(errors),
             "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
           }, null, 8, ["errors", "hide-error-message"])) : createCommentVNode("", true)
         ], 64))
-      ], 42, _hoisted_1$j)), [
+      ], 42, _hoisted_1$n)), [
         [unref(vClickOutside), () => togglePopup(false)]
       ]);
     };
   }
 });
-const _hoisted_1$i = { class: "bs-calendar" };
-const _hoisted_2$h = { class: "bs-calendar-head" };
-const _hoisted_3$e = { class: "year-month" };
-const _hoisted_4$8 = {
+const _hoisted_1$m = { class: "bs-calendar" };
+const _hoisted_2$k = { class: "bs-calendar-head" };
+const _hoisted_3$f = { class: "year-month" };
+const _hoisted_4$9 = {
   key: 0,
   class: "timezone"
 };
-const _hoisted_5$3 = { class: "weekdays" };
+const _hoisted_5$4 = { class: "weekdays" };
 const _hoisted_6$1 = ["textContent"];
 const _hoisted_7$1 = ["onClick"];
 const _hoisted_8$1 = {
@@ -1463,7 +1450,7 @@ const _hoisted_8$1 = {
   class: "bs-calendar-time"
 };
 const _hoisted_9$1 = { class: "select-wrap" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "BSCalendar",
   props: {
     modelValue: {},
@@ -1652,39 +1639,39 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        createElementVNode("div", _hoisted_2$h, [
-          createElementVNode("div", _hoisted_3$e, [
-            createVNode(_sfc_main$r, {
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        createElementVNode("div", _hoisted_2$k, [
+          createElementVNode("div", _hoisted_3$f, [
+            createVNode(_sfc_main$w, {
               class: "",
               "left-icon": "chevron_left",
               onClick: prevMonth
             }),
-            createVNode(_sfc_main$k, {
+            createVNode(_sfc_main$p, {
               modelValue: year.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => year.value = $event),
               disabled: __props.disabled,
               items: years.value
             }, null, 8, ["modelValue", "disabled", "items"]),
-            createVNode(_sfc_main$k, {
+            createVNode(_sfc_main$p, {
               modelValue: month.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => month.value = $event),
               disabled: __props.disabled,
               items: unref(months)
             }, null, 8, ["modelValue", "disabled", "items"]),
-            createVNode(_sfc_main$r, {
+            createVNode(_sfc_main$w, {
               class: "",
               "left-icon": "chevron_right",
               onClick: nextMonth
             })
           ]),
-          __props.showTimeZone ? (openBlock(), createElementBlock("div", _hoisted_4$8, "(" + toDisplayString(actualTimeZone.value) + ")", 1)) : createCommentVNode("", true)
+          __props.showTimeZone ? (openBlock(), createElementBlock("div", _hoisted_4$9, "(" + toDisplayString(actualTimeZone.value) + ")", 1)) : createCommentVNode("", true)
         ]),
         createElementVNode("table", {
           class: normalizeClass([{ disabled: __props.disabled }, "align-self-center"])
         }, [
           createElementVNode("tbody", null, [
-            createElementVNode("tr", _hoisted_5$3, [
+            createElementVNode("tr", _hoisted_5$4, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(weekdays.value, (day) => {
                 return openBlock(), createElementBlock("th", {
                   key: day,
@@ -1714,7 +1701,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           __props.resolution
         ) ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
           createElementVNode("div", _hoisted_9$1, [
-            createVNode(_sfc_main$k, {
+            createVNode(_sfc_main$p, {
               disabled: __props.disabled,
               items: hours,
               "label-provider": (item) => item < 10 ? "0" + item : item.toString(),
@@ -1723,7 +1710,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               "onUpdate:modelValue": updateHour
             }, null, 8, ["disabled", "label-provider", "model-value"]),
             _cache[2] || (_cache[2] = createElementVNode("span", { class: "" }, ":", -1)),
-            createVNode(_sfc_main$k, {
+            createVNode(_sfc_main$p, {
               disabled: __props.disabled || __props.resolution === "HOUR",
               items: minutes.value,
               "label-provider": (item) => item < 10 ? "0" + item : item.toString(),
@@ -1737,10 +1724,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "bs-calendar-range flex flex-row" };
-const _hoisted_2$g = { class: "flex flex-col" };
-const _hoisted_3$d = { class: "flex flex-row items-center" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$l = { class: "bs-calendar-range flex flex-row" };
+const _hoisted_2$j = { class: "flex flex-col" };
+const _hoisted_3$e = { class: "flex flex-row items-center" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "BSCalendarRange",
   props: {
     from: {},
@@ -1778,10 +1765,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       emit("update:to", value);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$g, [
-          createElementVNode("div", _hoisted_3$d, [
-            createVNode(_sfc_main$j, {
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+        createElementVNode("div", _hoisted_2$j, [
+          createElementVNode("div", _hoisted_3$e, [
+            createVNode(_sfc_main$o, {
               modelValue: fromValue.value,
               "onUpdate:modelValue": [
                 _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -1799,7 +1786,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               "range-type": "from"
             }, null, 8, ["modelValue", "disabled", "display-format", "end-year", "first-day", "range-value", "resolution", "start-year", "time-zone"]),
             _cache[2] || (_cache[2] = createElementVNode("span", { class: "tilde" }, "~", -1)),
-            createVNode(_sfc_main$j, {
+            createVNode(_sfc_main$o, {
               modelValue: toValue.value,
               "onUpdate:modelValue": [
                 _cache[1] || (_cache[1] = ($event) => toValue.value = $event),
@@ -1860,13 +1847,11 @@ const componentUtil = {
     return trim ? value?.trim() : value;
   },
   getPrefixSuffixList(param) {
-    if (!param)
-      return [];
+    if (!param) return [];
     const params = Array.isArray(param) ? param : [param];
     const list = [];
     for (let item of params) {
-      if (!item)
-        continue;
+      if (!item) continue;
       if (typeof item === "object" && item.hasOwnProperty("type") && item.hasOwnProperty("value")) {
         list.push(item);
       } else {
@@ -1874,12 +1859,16 @@ const componentUtil = {
       }
     }
     return list;
+  },
+  isCursorInElement(event, element) {
+    const rect = element.getBoundingClientRect();
+    return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
   }
 };
-const _hoisted_1$g = ["textContent"];
-const _hoisted_2$f = { class: "font-icon" };
-const _hoisted_3$c = ["src", "alt"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$k = ["textContent"];
+const _hoisted_2$i = { class: "font-icon" };
+const _hoisted_3$d = ["src", "alt"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "BSPrefixSuffix",
   props: {
     value: {},
@@ -1895,11 +1884,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             textContent: toDisplayString(item.value),
             key: JSON.stringify(item.value),
             class: normalizeClass(__props.type)
-          }, null, 10, _hoisted_1$g)) : item.type === "font-icon" ? (openBlock(), createElementBlock("span", {
+          }, null, 10, _hoisted_1$k)) : item.type === "font-icon" ? (openBlock(), createElementBlock("span", {
             key: 1,
             class: normalizeClass(__props.type)
           }, [
-            createElementVNode("span", _hoisted_2$f, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$i, toDisplayString(item.value), 1)
           ], 2)) : item.type === "image-url" ? (openBlock(), createElementBlock("span", {
             key: 2,
             class: normalizeClass(__props.type)
@@ -1907,24 +1896,24 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             createElementVNode("img", {
               src: item.value,
               alt: __props.type
-            }, null, 8, _hoisted_3$c)
+            }, null, 8, _hoisted_3$d)
           ], 2)) : createCommentVNode("", true)
         ], 64);
       }), 256);
     };
   }
 });
-const _hoisted_1$f = {
+const _hoisted_1$j = {
   key: 0,
   class: "view-mode"
 };
-const _hoisted_2$e = ["textContent"];
-const _hoisted_3$b = {
+const _hoisted_2$h = ["textContent"];
+const _hoisted_3$c = {
   key: 1,
   class: "input-area"
 };
-const _hoisted_4$7 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "type"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_4$8 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "type"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "BSTextInput",
   props: {
     id: {},
@@ -2048,20 +2037,20 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         class: normalizeClass([{ required: __props.required, disabled: __props.disabled, modified: modified.value, error: unref(errors).length > 0 }, "bs-text-input bs-input-wrap"]),
         style: normalizeStyle({ width: __props.width })
       }, [
-        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
-          createVNode(_sfc_main$h, {
+        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
+          createVNode(_sfc_main$m, {
             value: __props.prefix,
             type: "prefix"
           }, null, 8, ["value"]),
           createElementVNode("span", {
             textContent: toDisplayString(unref(stringValue))
-          }, null, 8, _hoisted_2$e),
-          createVNode(_sfc_main$h, {
+          }, null, 8, _hoisted_2$h),
+          createVNode(_sfc_main$m, {
             value: __props.suffix,
             type: "suffix"
           }, null, 8, ["value"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_3$b, [
-          createVNode(_sfc_main$h, {
+        ])) : (openBlock(), createElementBlock("div", _hoisted_3$c, [
+          createVNode(_sfc_main$m, {
             value: __props.prefix,
             type: "prefix"
           }, null, 8, ["value"]),
@@ -2077,15 +2066,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             name: __props.name,
             tabindex: __props.tabindex,
             type: __props.inputType
-          }, toHandlers(handlers, true)), null, 16, _hoisted_4$7), [
+          }, toHandlers(handlers, true)), null, 16, _hoisted_4$8), [
             [vModelDynamic, unref(stringValue)]
           ]),
-          createVNode(_sfc_main$h, {
+          createVNode(_sfc_main$m, {
             value: __props.suffix,
             type: "suffix"
           }, null, 8, ["value"])
         ])),
-        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
           key: 2,
           errors: unref(errors),
           "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
@@ -2288,8 +2277,7 @@ const formatUtil = {
   formatDateString(utcDate, format, displayTimeZone) {
     if (utcDate) {
       let date = dayjs(utcDate);
-      if (displayTimeZone)
-        date = date.tz(displayTimeZone);
+      if (displayTimeZone) date = date.tz(displayTimeZone);
       return date.format(format || "YYYY-MM-DD HH:mm Z");
     }
     return "";
@@ -2368,17 +2356,17 @@ const formatUtil = {
     return tmp.textContent || tmp.innerText;
   }
 };
-const _hoisted_1$e = {
+const _hoisted_1$i = {
   key: 0,
   class: "view-mode"
 };
-const _hoisted_2$d = ["textContent"];
-const _hoisted_3$a = {
+const _hoisted_2$g = ["textContent"];
+const _hoisted_3$b = {
   key: 1,
   class: "input-area"
 };
-const _hoisted_4$6 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_4$7 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "BSNumberInput",
   props: {
     id: {},
@@ -2510,20 +2498,20 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         class: normalizeClass([{ required: __props.required, disabled: __props.disabled, modified: modified.value, error: unref(errors).length > 0 }, "bs-number-input bs-input-wrap"]),
         style: normalizeStyle({ width: __props.width })
       }, [
-        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
-          createVNode(_sfc_main$h, {
+        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$i, [
+          createVNode(_sfc_main$m, {
             value: __props.prefix,
             type: "prefix"
           }, null, 8, ["value"]),
           createElementVNode("span", {
             textContent: toDisplayString(__props.formatInViewMode ? formattedStringValue.value : unref(stringValue))
-          }, null, 8, _hoisted_2$d),
-          createVNode(_sfc_main$h, {
+          }, null, 8, _hoisted_2$g),
+          createVNode(_sfc_main$m, {
             value: __props.suffix,
             type: "suffix"
           }, null, 8, ["value"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_3$a, [
-          createVNode(_sfc_main$h, {
+        ])) : (openBlock(), createElementBlock("div", _hoisted_3$b, [
+          createVNode(_sfc_main$m, {
             value: __props.prefix,
             type: "prefix"
           }, null, 8, ["value"]),
@@ -2539,13 +2527,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             tabindex: __props.tabindex,
             value: focused.value || !__props.formatOnBlur ? unref(stringValue) : formattedStringValue.value,
             type: "text"
-          }, toHandlers(handlers, true)), null, 16, _hoisted_4$6),
-          createVNode(_sfc_main$h, {
+          }, toHandlers(handlers, true)), null, 16, _hoisted_4$7),
+          createVNode(_sfc_main$m, {
             value: __props.suffix,
             type: "suffix"
           }, null, 8, ["value"])
         ])),
-        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
           key: 2,
           errors: unref(errors),
           "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
@@ -2554,17 +2542,17 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = {
+const _hoisted_1$h = {
   key: 0,
   class: "view-mode flex flex-row gap-2 items-start"
 };
-const _hoisted_2$c = ["textContent"];
-const _hoisted_3$9 = {
+const _hoisted_2$f = ["textContent"];
+const _hoisted_3$a = {
   key: 1,
   class: "input-area flex flex-row items-start"
 };
-const _hoisted_4$5 = ["placeholder", "disabled", "maxlength", "name", "tabindex"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_4$6 = ["placeholder", "disabled", "maxlength", "name", "tabindex"];
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "BSTextArea",
   props: {
     id: {},
@@ -2679,20 +2667,20 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         class: normalizeClass([{ disabled: __props.disabled, modified: modified.value, error: unref(errors).length > 0 }, "bs-text-area bs-input-wrap"]),
         style: normalizeStyle({ width: outerWidth.value, height: outerHeight.value })
       }, [
-        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
-          createVNode(_sfc_main$h, {
+        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
+          createVNode(_sfc_main$m, {
             value: __props.prefix,
             type: "prefix"
           }, null, 8, ["value"]),
           createElementVNode("div", {
             textContent: toDisplayString(unref(stringValue))
-          }, null, 8, _hoisted_2$c),
-          createVNode(_sfc_main$h, {
+          }, null, 8, _hoisted_2$f),
+          createVNode(_sfc_main$m, {
             value: __props.suffix,
             type: "suffix"
           }, null, 8, ["value"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_3$9, [
-          createVNode(_sfc_main$h, {
+        ])) : (openBlock(), createElementBlock("div", _hoisted_3$a, [
+          createVNode(_sfc_main$m, {
             value: __props.prefix,
             type: "prefix"
           }, null, 8, ["value"]),
@@ -2709,15 +2697,15 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             class: "grow",
             onPointerdown: capturePointer,
             onPointerup: preserveResizedHeight
-          }, toHandlers(handlers, true)), null, 16, _hoisted_4$5), [
+          }, toHandlers(handlers, true)), null, 16, _hoisted_4$6), [
             [vModelText, unref(stringValue)]
           ]),
-          createVNode(_sfc_main$h, {
+          createVNode(_sfc_main$m, {
             value: __props.suffix,
             type: "suffix"
           }, null, 8, ["value"])
         ])),
-        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
           key: 2,
           errors: unref(errors),
           "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
@@ -2726,10 +2714,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = ["id", "checked", "disabled", "name", "tabindex"];
-const _hoisted_2$b = ["textContent", "for"];
-const _hoisted_3$8 = ["for"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["id", "checked", "disabled", "name", "tabindex"];
+const _hoisted_2$e = ["textContent", "for"];
+const _hoisted_3$9 = ["for"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "BSCheckbox",
   props: {
     id: { default: () => componentUtil.generateNextId("checkbox") },
@@ -2785,28 +2773,28 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           tabindex: __props.tabindex,
           class: "",
           type: "checkbox"
-        }, toHandlers(handlers, true)), null, 16, _hoisted_1$c),
+        }, toHandlers(handlers, true)), null, 16, _hoisted_1$g),
         __props.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           textContent: toDisplayString(__props.label),
           for: __props.id,
           class: "text-label"
-        }, null, 8, _hoisted_2$b)) : createCommentVNode("", true),
+        }, null, 8, _hoisted_2$e)) : createCommentVNode("", true),
         hasLabelSlot.value ? (openBlock(), createElementBlock("label", {
           key: 1,
           for: __props.id,
           class: "slot-label cursor-pointer"
         }, [
           renderSlot(_ctx.$slots, "default", { disabled: __props.disabled })
-        ], 8, _hoisted_3$8)) : createCommentVNode("", true)
+        ], 8, _hoisted_3$9)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _hoisted_1$b = ["data-field-name"];
-const _hoisted_2$a = { class: "items" };
-const _hoisted_3$7 = ["textContent"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = ["data-field-name"];
+const _hoisted_2$d = { class: "items" };
+const _hoisted_3$8 = ["textContent"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "BSCheckboxGroup",
   props: {
     name: {},
@@ -2912,13 +2900,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         "data-field-name": __props.name,
         role: "group"
       }, [
-        createElementVNode("div", _hoisted_2$a, [
+        createElementVNode("div", _hoisted_2$d, [
           __props.viewMode ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: "view-mode",
             textContent: toDisplayString(modelValueLabels.value)
-          }, null, 8, _hoisted_3$7)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.items, (item) => {
-            return openBlock(), createBlock(_sfc_main$d, {
+          }, null, 8, _hoisted_3$8)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.items, (item) => {
+            return openBlock(), createBlock(_sfc_main$i, {
               key: itemKey(item),
               disabled: __props.disabled || isDisabledItem(item),
               label: itemLabel(item),
@@ -2930,24 +2918,24 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             }, null, 8, ["disabled", "label", "model-value", "name", "tabindex", "onUpdate:modelValue"]);
           }), 128))
         ]),
-        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
           key: 0,
           errors: unref(errors),
           "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
         }, null, 8, ["errors", "hide-error-message"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$b);
+      ], 10, _hoisted_1$f);
     };
   }
 });
-const _hoisted_1$a = ["id", "checked", "disabled", "name", "tabindex"];
-const _hoisted_2$9 = ["for"];
-const _hoisted_3$6 = {
+const _hoisted_1$e = ["id", "checked", "disabled", "name", "tabindex"];
+const _hoisted_2$c = ["for"];
+const _hoisted_3$7 = {
   key: 0,
   class: "font-icon"
 };
-const _hoisted_4$4 = ["textContent"];
-const _hoisted_5$2 = ["for"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _hoisted_4$5 = ["textContent"];
+const _hoisted_5$3 = ["for"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "BSRadioButton",
   props: {
     id: { default: () => componentUtil.generateNextId("radio") },
@@ -2990,34 +2978,34 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           class: "",
           role: "radio",
           type: "radio"
-        }, toHandlers(handlers, true)), null, 16, _hoisted_1$a),
+        }, toHandlers(handlers, true)), null, 16, _hoisted_1$e),
         createElementVNode("label", { for: __props.id }, [
-          __props.icon ? (openBlock(), createElementBlock("span", _hoisted_3$6, toDisplayString(__props.icon), 1)) : createCommentVNode("", true),
+          __props.icon ? (openBlock(), createElementBlock("span", _hoisted_3$7, toDisplayString(__props.icon), 1)) : createCommentVNode("", true),
           __props.label ? (openBlock(), createElementBlock("span", {
             key: 1,
             textContent: toDisplayString(__props.label),
             class: "text-label"
-          }, null, 8, _hoisted_4$4)) : createCommentVNode("", true)
-        ], 8, _hoisted_2$9),
+          }, null, 8, _hoisted_4$5)) : createCommentVNode("", true)
+        ], 8, _hoisted_2$c),
         hasLabelSlot.value ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: __props.id,
           class: "slot-label cursor-pointer"
         }, [
           renderSlot(_ctx.$slots, "default", { disabled: __props.disabled })
-        ], 8, _hoisted_5$2)) : createCommentVNode("", true)
+        ], 8, _hoisted_5$3)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const _hoisted_1$9 = ["data-field-name"];
-const _hoisted_2$8 = ["textContent"];
-const _hoisted_3$5 = {
+const _hoisted_1$d = ["data-field-name"];
+const _hoisted_2$b = ["textContent"];
+const _hoisted_3$6 = {
   key: 1,
   class: "radio-button-group",
   role: "radiogroup"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "BSRadioButtonGroup",
   props: {
     name: { default: () => componentUtil.generateNextName("radioGroup") },
@@ -3100,9 +3088,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         __props.viewMode ? (openBlock(), createElementBlock("div", {
           key: 0,
           textContent: toDisplayString(modelValueLabel.value)
-        }, null, 8, _hoisted_2$8)) : (openBlock(), createElementBlock("div", _hoisted_3$5, [
+        }, null, 8, _hoisted_2$b)) : (openBlock(), createElementBlock("div", _hoisted_3$6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-            return withDirectives((openBlock(), createBlock(_sfc_main$b, {
+            return withDirectives((openBlock(), createBlock(_sfc_main$g, {
               key: itemKey(item),
               disabled: __props.disabled || isDisabledItem(item),
               icon: __props.iconProvider?.(item),
@@ -3117,20 +3105,20 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             ]);
           }), 128))
         ])),
-        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
           key: 2,
           errors: unref(errors),
           "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
         }, null, 8, ["errors", "hide-error-message"])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$9);
+      ], 10, _hoisted_1$d);
     };
   }
 });
-const _hoisted_1$8 = ["tabindex", "onKeydown"];
-const _hoisted_2$7 = { key: 0 };
-const _hoisted_3$4 = ["textContent"];
-const _hoisted_4$3 = ["textContent"];
-const _hoisted_5$1 = ["data-field-name"];
+const _hoisted_1$c = ["tabindex", "onKeydown"];
+const _hoisted_2$a = { key: 0 };
+const _hoisted_3$5 = ["textContent"];
+const _hoisted_4$4 = ["textContent"];
+const _hoisted_5$2 = ["data-field-name"];
 const _hoisted_6 = ["textContent"];
 const _hoisted_7 = {
   key: 1,
@@ -3142,7 +3130,7 @@ const _hoisted_10 = {
   key: 2,
   class: "small-progress"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "BSMultiSelect",
   props: {
     modelValue: { default: () => [] },
@@ -3265,17 +3253,17 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           _cache[4] || (_cache[4] = withKeys(($event) => togglePopup(false), ["tab"]))
         ]
       }, [
-        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
+        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
           __props.selectedLabelProvider ? (openBlock(), createElementBlock("span", {
             key: 0,
             textContent: toDisplayString(__props.selectedLabelProvider(selectedItems.value)),
             class: "label"
-          }, null, 8, _hoisted_3$4)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(selectedItems.value, (item) => {
+          }, null, 8, _hoisted_3$5)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(selectedItems.value, (item) => {
             return openBlock(), createElementBlock("span", {
               key: itemKey(item),
               textContent: toDisplayString(itemLabel(item)),
               class: "label"
-            }, null, 8, _hoisted_4$3);
+            }, null, 8, _hoisted_4$4);
           }), 128))
         ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createElementVNode("div", {
@@ -3304,8 +3292,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             ])),
             _cache[5] || (_cache[5] = createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1)),
             loadingItems.value ? (openBlock(), createElementBlock("span", _hoisted_10, "progress_activity")) : createCommentVNode("", true)
-          ], 8, _hoisted_5$1),
-          !__props.disabled && showPopup.value ? (openBlock(), createBlock(_sfc_main$m, {
+          ], 8, _hoisted_5$2),
+          !__props.disabled && showPopup.value ? (openBlock(), createBlock(_sfc_main$r, {
             key: 0,
             ref_key: "selectPopup",
             ref: selectPopup,
@@ -3323,12 +3311,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             onRequestClose: _cache[0] || (_cache[0] = ($event) => togglePopup(false))
           }, null, 8, ["base-element", "initial-item", "items", "label-provider", "max-height", "popup-align", "popup-direction", "selected-items", "show-search", "value-provider"])) : createCommentVNode("", true)
         ], 64)),
-        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
           key: 2,
           errors: unref(errors),
           "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
         }, null, 8, ["errors", "hide-error-message"])) : createCommentVNode("", true)
-      ], 42, _hoisted_1$8)), [
+      ], 42, _hoisted_1$c)), [
         [unref(vClickOutside), () => togglePopup(false)]
       ]);
     };
@@ -3337,14 +3325,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 dayjs.extend(utc);
 dayjs.extend(timezone);
 const dateInputFormatByResolution = (resolution) => {
-  if (resolution === "DAY")
-    return "YYYYMMDD";
-  else if (resolution === "HOUR")
-    return "YYYYMMDDHH";
-  else if (resolution === "SECOND")
-    return "YYYYMMDDHHmmss";
-  else
-    return "YYYYMMDDHHmm";
+  if (resolution === "DAY") return "YYYYMMDD";
+  else if (resolution === "HOUR") return "YYYYMMDDHH";
+  else if (resolution === "SECOND") return "YYYYMMDDHHmmss";
+  else return "YYYYMMDDHHmm";
 };
 const convertInputToDateString = (str, inputFormat, endTime, resolution, inputTimeZone, minDateValue, maxDateValue) => {
   if (str) {
@@ -3357,19 +3341,16 @@ const convertInputToDateString = (str, inputFormat, endTime, resolution, inputTi
         }
       }
       let value = dayjs.tz(str, inputFormat, inputTimeZone);
-      if (endTime)
-        value = value.endOf(resolution.toLowerCase());
+      if (endTime) value = value.endOf(resolution.toLowerCase());
       const minValue = minDateValue;
       if (minValue) {
         let minDate = dayjs(minValue).tz(inputTimeZone);
-        if (value.isBefore(minDate))
-          value = minDate;
+        if (value.isBefore(minDate)) value = minDate;
       }
       const maxValue = maxDateValue;
       if (maxValue) {
         let maxDate = dayjs(maxValue).tz(inputTimeZone);
-        if (maxDate.isBefore(value))
-          value = maxDate;
+        if (maxDate.isBefore(value)) value = maxDate;
       }
       if (resolution === "MINUTE_10" || resolution === "MINUTE_30") {
         const truncateUnit = resolution === "MINUTE_10" ? 10 : 30;
@@ -3399,9 +3380,9 @@ const checkDateMinMaxValue = (value, inputFormat, endTime, resolution, inputTime
 const normalizeDateInput = (value) => {
   return value.replace(/[^\d-]/g, "");
 };
-const _hoisted_1$7 = { class: "bs-date-input-popup" };
-const _hoisted_2$6 = { class: "buttons" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b = { class: "bs-date-input-popup" };
+const _hoisted_2$9 = { class: "buttons" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "BSDateInputPopup",
   props: {
     modelValue: {},
@@ -3429,7 +3410,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       emit("close");
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, {
+      return openBlock(), createBlock(_sfc_main$t, {
         "base-element": __props.baseElement,
         "popup-align": __props.popupAlign,
         "offset-from-base-element": 4,
@@ -3440,8 +3421,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         }, ["stop"]))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$7, [
-            createVNode(_sfc_main$j, {
+          createElementVNode("div", _hoisted_1$b, [
+            createVNode(_sfc_main$o, {
               modelValue: date.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => date.value = $event),
               "display-format": __props.displayFormat,
@@ -3450,14 +3431,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               "start-year": __props.selectStartYear,
               "time-zone": __props.timeZone
             }, null, 8, ["modelValue", "display-format", "end-year", "resolution", "start-year", "time-zone"]),
-            createElementVNode("div", _hoisted_2$6, [
-              createVNode(_sfc_main$r, {
+            createElementVNode("div", _hoisted_2$9, [
+              createVNode(_sfc_main$w, {
                 caption: __props.okButtonCaption,
                 "button-color": "blue",
                 class: "min-w-80",
                 onClick: emitValue
               }, null, 8, ["caption"]),
-              createVNode(_sfc_main$r, {
+              createVNode(_sfc_main$w, {
                 caption: __props.cancelButtonCaption,
                 class: "min-w-80",
                 onClick: close
@@ -3470,16 +3451,16 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$a = {
   key: 0,
   class: "view-mode"
 };
-const _hoisted_2$5 = {
+const _hoisted_2$8 = {
   key: 1,
   class: "input-area"
 };
-const _hoisted_3$3 = ["id", "placeholder", "disabled", "maxlength", "name", "tabindex", "value"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$4 = ["id", "placeholder", "disabled", "maxlength", "name", "tabindex", "value"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "BSDateInput",
   props: {
     id: {},
@@ -3686,9 +3667,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         style: normalizeStyle({ width: __props.width }),
         onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(() => togglePopup(false), ["stop", "prevent"]), ["esc"]))
       }, [
-        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
+        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
           createElementVNode("span", null, toDisplayString(viewModeValue.value), 1)
-        ])) : (openBlock(), createElementBlock("div", _hoisted_2$5, [
+        ])) : (openBlock(), createElementBlock("div", _hoisted_2$8, [
           createElementVNode("span", {
             class: normalizeClass([{ "bs-clickable": !__props.disabled }, "font-icon"]),
             onClick: _cache[0] || (_cache[0] = ($event) => togglePopup())
@@ -3704,14 +3685,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             tabindex: __props.tabindex,
             value: focused.value ? unref(stringValue) : formattedValue.value,
             type: "text"
-          }, toHandlers(handlers, true)), null, 16, _hoisted_3$3)
+          }, toHandlers(handlers, true)), null, 16, _hoisted_3$4)
         ])),
-        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
           key: 2,
           errors: unref(errors),
           "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
         }, null, 8, ["errors", "hide-error-message"])) : createCommentVNode("", true),
-        showPopup.value ? (openBlock(), createBlock(_sfc_main$8, {
+        showPopup.value ? (openBlock(), createBlock(_sfc_main$d, {
           key: 3,
           "base-element": rootRef.value,
           "display-format": actualDisplayFormat.value,
@@ -3732,9 +3713,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { class: "bs-date-range-popup flex flex-col px-16 py-8" };
-const _hoisted_2$4 = { class: "buttons" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = { class: "bs-date-range-popup flex flex-col px-16 py-8" };
+const _hoisted_2$7 = { class: "buttons" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "BSDateRangeInputPopup",
   props: {
     from: {},
@@ -3765,7 +3746,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       emit("close");
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, {
+      return openBlock(), createBlock(_sfc_main$t, {
         "base-element": __props.baseElement,
         "offset-from-base-element": 4,
         "max-height": "auto",
@@ -3774,8 +3755,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         }, ["stop"]))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$5, [
-            createVNode(_sfc_main$i, {
+          createElementVNode("div", _hoisted_1$9, [
+            createVNode(_sfc_main$n, {
               from: fromValue.value,
               "onUpdate:from": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
               to: toValue.value,
@@ -3788,14 +3769,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               "start-year": __props.selectStartYear,
               "time-zone": __props.timeZone
             }, null, 8, ["from", "to", "disabled-from", "disabled-to", "display-format", "end-year", "resolution", "start-year", "time-zone"]),
-            createElementVNode("div", _hoisted_2$4, [
-              createVNode(_sfc_main$r, {
+            createElementVNode("div", _hoisted_2$7, [
+              createVNode(_sfc_main$w, {
                 caption: __props.okButtonCaption,
                 "button-color": "blue",
                 class: "min-w-80",
                 onClick: emitValue
               }, null, 8, ["caption"]),
-              createVNode(_sfc_main$r, {
+              createVNode(_sfc_main$w, {
                 caption: __props.cancelButtonCaption,
                 class: "min-w-80",
                 onClick: close
@@ -3808,17 +3789,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "view-mode"
 };
-const _hoisted_2$3 = {
+const _hoisted_2$6 = {
   key: 1,
   class: "input-area"
 };
-const _hoisted_3$2 = ["id", "placeholder", "disabled", "maxlength", "name", "tabindex", "value"];
-const _hoisted_4$2 = ["id", "placeholder", "disabled", "maxlength", "name", "tabindex", "value"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$3 = ["id", "placeholder", "disabled", "maxlength", "name", "tabindex", "value"];
+const _hoisted_4$3 = ["id", "placeholder", "disabled", "maxlength", "name", "tabindex", "value"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "BSDateRange",
   props: {
     idFrom: {},
@@ -4196,9 +4177,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         style: normalizeStyle({ width: __props.width }),
         onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers(() => togglePopup(false), ["stop", "prevent"]), ["esc"]))
       }, [
-        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+        __props.viewMode ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
           createElementVNode("span", null, toDisplayString(formattedDateRange.value), 1)
-        ])) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
+        ])) : (openBlock(), createElementBlock("div", _hoisted_2$6, [
           createElementVNode("span", {
             class: normalizeClass([{ "bs-clickable": !disabled.value }, "font-icon"]),
             onClick: _cache[0] || (_cache[0] = () => togglePopup())
@@ -4214,7 +4195,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             tabindex: __props.tabindex,
             value: focusedFrom.value ? unref(stringValueFrom) : formattedFrom.value,
             type: "text"
-          }, toHandlers(handlersFrom, true)), null, 16, _hoisted_3$2),
+          }, toHandlers(handlersFrom, true)), null, 16, _hoisted_3$3),
           _cache[3] || (_cache[3] = createElementVNode("span", { class: "px-4" }, "~", -1)),
           createElementVNode("input", mergeProps({
             id: __props.idTo,
@@ -4227,14 +4208,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             tabindex: __props.tabindex,
             value: focusedTo.value ? unref(stringValueTo) : formattedTo.value,
             type: "text"
-          }, toHandlers(handlersTo, true)), null, 16, _hoisted_4$2)
+          }, toHandlers(handlersTo, true)), null, 16, _hoisted_4$3)
         ])),
-        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$l, {
+        !__props.viewMode ? (openBlock(), createBlock(_sfc_main$q, {
           key: 2,
           errors: errors.value,
           "hide-error-message": __props.hideErrorMessage || disabled.value && !__props.showErrorMessageOnDisabled
         }, null, 8, ["errors", "hide-error-message"])) : createCommentVNode("", true),
-        showPopup.value ? (openBlock(), createBlock(_sfc_main$6, {
+        showPopup.value ? (openBlock(), createBlock(_sfc_main$b, {
           key: 3,
           "base-element": rootRef.value,
           "disabled-from": __props.disabledFrom,
@@ -4259,7 +4240,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "SlideDownTransition",
   setup(__props) {
     const beforeEnter = (el) => {
@@ -4322,12 +4303,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$7 = {
   key: 0,
   class: "card-layout-header flex flex-row items-center"
 };
-const _hoisted_2$2 = ["textContent"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_2$5 = ["textContent"];
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "BSCardLayout",
   props: {
     title: {},
@@ -4341,7 +4322,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([{ expanded: expanded.value }, "bs-card-layout"])
       }, [
-        !__props.hideTitle ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+        !__props.hideTitle ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
           createElementVNode("span", {
             class: "expand-btn font-icon bs-clickable",
             onClick: toggleExpand
@@ -4349,13 +4330,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", {
             textContent: toDisplayString(__props.title),
             class: "card-layout-title"
-          }, null, 8, _hoisted_2$2),
+          }, null, 8, _hoisted_2$5),
           _cache[0] || (_cache[0] = createElementVNode("div", { class: "grow" }, null, -1)),
           createElementVNode("div", null, [
             renderSlot(_ctx.$slots, "title-right")
           ])
         ])) : createCommentVNode("", true),
-        createVNode(_sfc_main$4, null, {
+        createVNode(_sfc_main$9, null, {
           default: withCtx(() => [
             withDirectives(createElementVNode("div", {
               class: normalizeClass(__props.cardBodyClass)
@@ -4371,6 +4352,734 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const modalPluginKey = "BlueseaModalPlugin";
+const modalHandleKey = "BlueseaModalHandle";
+class ModalHandleImpl {
+  constructor(modal, modalId) {
+    this.modal = modal;
+    this.modalId = modalId;
+  }
+  maximized = false;
+  defaultStyleListener;
+  defaultPositionListener;
+  close() {
+    this.modal.closeModal(this.modalId);
+  }
+  setDefaultStyle(modalStyle) {
+    this.defaultStyleListener?.(modalStyle);
+  }
+  setDefaultPosition(modalPosition) {
+    this.defaultPositionListener?.(modalPosition);
+  }
+  setDefaultStyleListener(listener) {
+    this.defaultStyleListener = listener;
+  }
+  setDefaultPositionListener(listener) {
+    this.defaultPositionListener = listener;
+  }
+}
+class BSModal {
+  modalItems = reactive([]);
+  openModal(modalItem) {
+    const modalId = Math.random().toString(36);
+    const handle = new ModalHandleImpl(this, modalId);
+    const registered = {
+      modalId,
+      pageId: modalItem.pageId,
+      component: markRaw(modalItem.component),
+      style: modalItem.style,
+      position: modalItem.position,
+      bind: modalItem.bind,
+      on: modalItem.on,
+      slots: modalItem.slots,
+      modalHandle: handle
+    };
+    this.modalItems.push(registered);
+    return registered;
+  }
+  closeModal(modalItem) {
+    let index = -1;
+    if (typeof modalItem === "string") {
+      index = this.modalItems.findIndex((item) => item.modalId === modalItem);
+    } else {
+      index = this.modalItems.findIndex((item) => item === modalItem);
+    }
+    if (index >= 0) this.modalItems.splice(index, 1);
+  }
+  closeAllModals() {
+    this.modalItems.splice(0, this.modalItems.length);
+  }
+  openAlert(title, message, clickHandler) {
+    const option = {
+      component: defineAsyncComponent(() => import("./BSAlertModal-ZEIUM0ut.js")),
+      bind: {
+        title,
+        message
+      },
+      on: {
+        click: async () => await clickHandler?.()
+      }
+    };
+    return this.openModal(option);
+  }
+  openYesNo(title, message, yesHandler, noHandler) {
+    const option = {
+      component: defineAsyncComponent(() => import("./BSYesNoModal-Cs6mgXcP.js")),
+      bind: {
+        title,
+        message
+      },
+      on: {
+        clickYes: async () => await yesHandler?.(),
+        clickNo: async () => await noHandler?.()
+      }
+    };
+    return this.openModal(option);
+  }
+  install(app) {
+    app.provide(modalPluginKey, this);
+  }
+}
+const useModal = () => {
+  const modal = inject(modalPluginKey);
+  if (!modal) throw new Error("BSModal is not initialized.");
+  return modal;
+};
+const provideModalHandle = (modalHandle) => {
+  provide(modalHandleKey, modalHandle);
+};
+const useModalHandle = () => {
+  const modalHandle = inject(modalHandleKey);
+  if (!modalHandle) throw new Error("ModalHandle not found. Maybe not inside modal component.");
+  return modalHandle;
+};
+const createModalPlugin = () => {
+  return new BSModal();
+};
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "BSModalWrapper",
+  props: {
+    modalItem: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const defaultModalPosition = ref();
+    props.modalItem.modalHandle.setDefaultPositionListener(
+      (position) => {
+        defaultModalPosition.value = position;
+        initializeOffset(position);
+      }
+    );
+    const modalPositionStyle = computed(() => {
+      const pos = {
+        ...defaultModalPosition.value,
+        ...props.modalItem.position
+      };
+      const result = [];
+      if (pos.horizontal === "left") result.push("items-start");
+      else if (pos.horizontal === "right") result.push("items-end");
+      else result.push("items-center");
+      if (pos.vertical === "top") result.push("justify-start");
+      else if (pos.vertical === "bottom") result.push("justify-end");
+      else result.push("justify-center");
+      return result;
+    });
+    const defaultModalStyle = ref();
+    props.modalItem.modalHandle.setDefaultStyleListener((style) => {
+      defaultModalStyle.value = style;
+      props.modalItem.escToClose = style.escToClose;
+    });
+    const mergedStyle = computed(() => {
+      const result = {
+        ...defaultModalStyle.value,
+        ...props.modalItem.style,
+        transform: ""
+      };
+      if (props.modalItem.modalHandle.maximized) {
+        delete result.maxWidth;
+        delete result.maxHeight;
+      } else {
+        result.transform = `translate(${offset.value.x}px, ${offset.value.y}px)`;
+      }
+      return result;
+    });
+    provideModalHandle(props.modalItem.modalHandle);
+    const modalComponent = ref();
+    const modalPanel = ref();
+    const offset = ref({ x: 0, y: 0 });
+    const initializeOffset = (defaultPosition) => {
+      if (offset.value.x === 0) {
+        offset.value.x = props.modalItem.position?.offsetX ?? defaultPosition?.offsetX ?? 0;
+      }
+      if (offset.value.y === 0) {
+        offset.value.y = props.modalItem.position?.offsetY ?? defaultPosition?.offsetY ?? 0;
+      }
+    };
+    initializeOffset();
+    let initialPosition = void 0;
+    const startMoveModal = (event) => {
+      if (!props.modalItem.modalHandle.maximized && modalPanel.value === event.target && event.button === 0) {
+        initialPosition = {
+          x: event.clientX - offset.value.x,
+          y: event.clientY - offset.value.y
+        };
+        modalPanel.value.setPointerCapture(event.pointerId);
+      }
+    };
+    const moveModal = (event) => {
+      if (!props.modalItem.modalHandle.maximized && initialPosition) {
+        offset.value.x = event.clientX - initialPosition.x;
+        offset.value.y = event.clientY - initialPosition.y;
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    const endMoveModal = (event) => {
+      if (!props.modalItem.modalHandle.maximized && initialPosition) {
+        modalPanel.value?.releasePointerCapture(event.pointerId);
+        initialPosition = void 0;
+      }
+    };
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        class: normalizeClass([modalPositionStyle.value, "modal-wrapper flex flex-col"])
+      }, [
+        createElementVNode("div", {
+          ref_key: "modalPanel",
+          ref: modalPanel,
+          class: normalizeClass([[
+            __props.modalItem.style?.styleClass,
+            __props.modalItem.modalHandle.maximized ? "maximized" : void 0
+          ], "modal-panel"]),
+          style: normalizeStyle(mergedStyle.value),
+          onPointerdown: startMoveModal,
+          onPointermove: moveModal,
+          onPointerup: endMoveModal
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(__props.modalItem.component), mergeProps({
+            ref_key: "modalComponent",
+            ref: modalComponent
+          }, __props.modalItem.bind || {}, toHandlers(__props.modalItem.on || {})), null, 16))
+        ], 38)
+      ], 2)), [
+        [vShow, modalComponent.value]
+      ]);
+    };
+  }
+});
+const _hoisted_1$6 = {
+  key: 0,
+  class: "modal-curtain"
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "BSModalContainer",
+  setup(__props) {
+    const modal = useModal();
+    const modalExists = computed(() => modal.modalItems.length > 0);
+    const disableBodyScroll = (disable) => {
+      document.body.style.overflow = disable ? "hidden" : "auto";
+    };
+    watch(
+      modalExists,
+      () => disableBodyScroll(modalExists.value)
+    );
+    const modalContainer = ref();
+    const getLastModal = () => {
+      return modal.modalItems[modal.modalItems.length - 1];
+    };
+    const escapeLastModal = () => {
+      const lastModal = getLastModal();
+      if (lastModal) {
+        if (lastModal.modalHandle.maximized) {
+          lastModal.modalHandle.maximized = false;
+        } else {
+          lastModal.modalHandle.close();
+        }
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (modalExists.value && event.key === "Escape") {
+        if (event.shiftKey) {
+          escapeLastModal();
+        } else if (modalContainer.value) {
+          const lastModal = getLastModal();
+          if (lastModal?.escToClose) {
+            escapeLastModal();
+          }
+        }
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("keydown", handleKeyDown);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "modalContainer",
+        ref: modalContainer,
+        class: "bs-modal-container"
+      }, [
+        modalExists.value ? (openBlock(), createElementBlock("div", _hoisted_1$6)) : createCommentVNode("", true),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(modal).modalItems, (item) => {
+          return openBlock(), createBlock(_sfc_main$7, {
+            key: item.modalId,
+            "data-page-id": item.pageId,
+            "modal-item": item
+          }, null, 8, ["data-page-id", "modal-item"]);
+        }), 128))
+      ], 512);
+    };
+  }
+});
+const findElement = (maybeElement) => {
+  const val = maybeElement?.value;
+  if (val) {
+    if ("querySelectorAll" in val) return val;
+    if ("$el" in val && "querySelectorAll" in val.$el) return val.$el;
+  }
+};
+const findInputComponents = (maybeElement) => {
+  const element = findElement(maybeElement);
+  if (element) {
+    const selector = `input,textarea,select,[role=listbox],[role=radiogroup],[role=group],[role=textbox],[role=img]`;
+    return Array.from(element.querySelectorAll(selector)).map((el) => el);
+  }
+  return [];
+};
+const getComponentRootElement = (component) => {
+  return "$el" in component ? component.$el : void 0;
+};
+const focusFirstElement = (element) => {
+  const focusable = findFirstFocusableElement(element);
+  if (focusable) {
+    focusable.focus();
+    return true;
+  } else {
+    return false;
+  }
+};
+const focusLastElement = (element) => {
+  const focusable = findLastFocusableElement(element);
+  if (focusable) {
+    focusable.focus();
+    return true;
+  } else {
+    return false;
+  }
+};
+const findFirstFocusableElement = (element) => {
+  const focusableElementsSelector = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), [tabindex]:not([disabled])';
+  return element.querySelector(focusableElementsSelector) || void 0;
+};
+const findLastFocusableElement = (element) => {
+  const focusableElementsSelector = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), [tabindex]:not([disabled])';
+  const all = element.querySelectorAll(focusableElementsSelector);
+  return all.item(all.length - 1) || void 0;
+};
+const getSelfIndex = (element) => {
+  if (element.parentElement) {
+    return Array.from(element.parentElement.children).indexOf(element);
+  } else {
+    return -1;
+  }
+};
+const NAMED_COLORS = {
+  aliceblue: "#F0F8FF",
+  antiquewhite: "#FAEBD7",
+  aqua: "#00FFFF",
+  aquamarine: "#7FFFD4",
+  azure: "#F0FFFF",
+  beige: "#F5F5DC",
+  bisque: "#FFE4C4",
+  black: "#000000",
+  blanchedalmond: "#FFEBCD",
+  blue: "#0000FF",
+  blueviolet: "#8A2BE2",
+  brown: "#A52A2A",
+  burlywood: "#DEB887",
+  cadetblue: "#5F9EA0",
+  chartreuse: "#7FFF00",
+  chocolate: "#D2691E",
+  coral: "#FF7F50",
+  cornflowerblue: "#6495ED",
+  cornsilk: "#FFF8DC",
+  crimson: "#DC143C",
+  cyan: "#00FFFF",
+  darkblue: "#00008B",
+  darkcyan: "#008B8B",
+  darkgoldenrod: "#B8860B",
+  darkgray: "#A9A9A9",
+  darkgrey: "#A9A9A9",
+  darkgreen: "#006400",
+  darkkhaki: "#BDB76B",
+  darkmagenta: "#8B008B",
+  darkolivegreen: "#556B2F",
+  darkorange: "#FF8C00",
+  darkorchid: "#9932CC",
+  darkred: "#8B0000",
+  darksalmon: "#E9967A",
+  darkseagreen: "#8FBC8F",
+  darkslateblue: "#483D8B",
+  darkslategray: "#2F4F4F",
+  darkslategrey: "#2F4F4F",
+  darkturquoise: "#00CED1",
+  darkviolet: "#9400D3",
+  deeppink: "#FF1493",
+  deepskyblue: "#00BFFF",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1E90FF",
+  firebrick: "#B22222",
+  floralwhite: "#FFFAF0",
+  forestgreen: "#228B22",
+  fuchsia: "#FF00FF",
+  gainsboro: "#DCDCDC",
+  ghostwhite: "#F8F8FF",
+  gold: "#FFD700",
+  goldenrod: "#DAA520",
+  gray: "#808080",
+  grey: "#808080",
+  green: "#008000",
+  greenyellow: "#ADFF2F",
+  honeydew: "#F0FFF0",
+  hotpink: "#FF69B4",
+  indianred: "#CD5C5C",
+  indigo: "#4B0082",
+  ivory: "#FFFFF0",
+  khaki: "#F0E68C",
+  lavender: "#E6E6FA",
+  lavenderblush: "#FFF0F5",
+  lawngreen: "#7CFC00",
+  lemonchiffon: "#FFFACD",
+  lightblue: "#ADD8E6",
+  lightcoral: "#F08080",
+  lightcyan: "#E0FFFF",
+  lightgoldenrodyellow: "#FAFAD2",
+  lightgray: "#D3D3D3",
+  lightgrey: "#D3D3D3",
+  lightgreen: "#90EE90",
+  lightpink: "#FFB6C1",
+  lightsalmon: "#FFA07A",
+  lightseagreen: "#20B2AA",
+  lightskyblue: "#87CEFA",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#B0C4DE",
+  lightyellow: "#FFFFE0",
+  lime: "#00FF00",
+  limegreen: "#32CD32",
+  linen: "#FAF0E6",
+  magenta: "#FF00FF",
+  maroon: "#800000",
+  mediumaquamarine: "#66CDAA",
+  mediumblue: "#0000CD",
+  mediumorchid: "#BA55D3",
+  mediumpurple: "#9370DB",
+  mediumseagreen: "#3CB371",
+  mediumslateblue: "#7B68EE",
+  mediumspringgreen: "#00FA9A",
+  mediumturquoise: "#48D1CC",
+  mediumvioletred: "#C71585",
+  midnightblue: "#191970",
+  mintcream: "#F5FFFA",
+  mistyrose: "#FFE4E1",
+  moccasin: "#FFE4B5",
+  navajowhite: "#FFDEAD",
+  navy: "#000080",
+  oldlace: "#FDF5E6",
+  olive: "#808000",
+  olivedrab: "#6B8E23",
+  orange: "#FFA500",
+  orangered: "#FF4500",
+  orchid: "#DA70D6",
+  palegoldenrod: "#EEE8AA",
+  palegreen: "#98FB98",
+  paleturquoise: "#AFEEEE",
+  palevioletred: "#DB7093",
+  papayawhip: "#FFEFD5",
+  peachpuff: "#FFDAB9",
+  peru: "#CD853F",
+  pink: "#FFC0CB",
+  plum: "#DDA0DD",
+  powderblue: "#B0E0E6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#FF0000",
+  rosybrown: "#BC8F8F",
+  royalblue: "#4169E1",
+  saddlebrown: "#8B4513",
+  salmon: "#FA8072",
+  sandybrown: "#F4A460",
+  seagreen: "#2E8B57",
+  seashell: "#FFF5EE",
+  sienna: "#A0522D",
+  silver: "#C0C0C0",
+  skyblue: "#87CEEB",
+  slateblue: "#6A5ACD",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#FFFAFA",
+  springgreen: "#00FF7F",
+  steelblue: "#4682B4",
+  tan: "#D2B48C",
+  teal: "#008080",
+  thistle: "#D8BFD8",
+  tomato: "#FF6347",
+  turquoise: "#40E0D0",
+  violet: "#EE82EE",
+  wheat: "#F5DEB3",
+  white: "#FFFFFF",
+  whitesmoke: "#F5F5F5",
+  yellow: "#FFFF00",
+  yellowgreen: "#9ACD32"
+};
+class FocusLoopContext {
+  constructor(el) {
+    this.el = el;
+  }
+  firstEl;
+  lastEl;
+  update() {
+    const first = findFirstFocusableElement(this.el);
+    if (this.firstEl !== first) {
+      this.firstEl?.removeEventListener("keydown", this.onShiftTabKeyDown.bind(this));
+      this.firstEl = first;
+      this.firstEl?.addEventListener("keydown", this.onShiftTabKeyDown.bind(this));
+    }
+    const last = findLastFocusableElement(this.el);
+    if (this.lastEl !== last) {
+      this.lastEl?.removeEventListener("keydown", this.onTabKeyDown.bind(this));
+      this.lastEl = last;
+      this.lastEl?.addEventListener("keydown", this.onTabKeyDown.bind(this));
+    }
+  }
+  onTabKeyDown(event) {
+    if (event.key == "Tab" && !event.shiftKey) {
+      this.firstEl?.focus();
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  onShiftTabKeyDown(event) {
+    if (event.key == "Tab" && event.shiftKey) {
+      this.lastEl?.focus();
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+}
+const VFocusLoop = {
+  mounted: async (el, _binding) => {
+    if (el instanceof HTMLElement) {
+      el.vFocusLoopContext = new FocusLoopContext(el);
+      await nextTick();
+      el.vFocusLoopContext.update();
+    }
+  }
+};
+const _hoisted_1$5 = { class: "bs-modal-frame flex flex-col" };
+const _hoisted_2$4 = {
+  key: 0,
+  class: "title-bar flex flex-row items-center"
+};
+const _hoisted_3$2 = { class: "title grow" };
+const _hoisted_4$2 = ["textContent"];
+const _hoisted_5$1 = { class: "title-buttons" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "BSModalFrame",
+  props: {
+    title: {},
+    hideMaximizeButton: { type: Boolean },
+    hideCloseButton: { type: Boolean },
+    closeCaption: { default: "Close" },
+    autoFocus: { type: Boolean }
+  },
+  emits: ["closeModal"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    const hasTitleBar = computed(
+      () => props.title || slots["title"] || slots["title-buttons"] || !props.hideCloseButton
+    );
+    const hasButtons = computed(() => slots["buttons"]);
+    const modalHandle = useModalHandle();
+    const toggleMaximize = () => {
+      modalHandle.maximized = !modalHandle.maximized;
+    };
+    const closeModal = () => {
+      modalHandle.close();
+      emit("closeModal");
+    };
+    const modalBody = ref();
+    const modalButtons = ref();
+    onMounted(async () => {
+      await nextTick();
+      if (props.autoFocus) {
+        modalBody.value && focusFirstElement(modalBody.value) || modalButtons.value && focusFirstElement(modalButtons.value);
+      } else if (modalBody.value) {
+        modalBody.value.tabIndex = 0;
+        modalBody.value.focus();
+        modalBody.value.tabIndex = -1;
+      }
+    });
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$5, [
+        hasTitleBar.value ? (openBlock(), createElementBlock("div", _hoisted_2$4, [
+          createElementVNode("div", _hoisted_3$2, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createElementVNode("span", {
+                textContent: toDisplayString(__props.title)
+              }, null, 8, _hoisted_4$2)
+            ])
+          ]),
+          createElementVNode("div", _hoisted_5$1, [
+            renderSlot(_ctx.$slots, "title-buttons")
+          ]),
+          createElementVNode("div", null, [
+            !__props.hideMaximizeButton ? (openBlock(), createBlock(_sfc_main$w, {
+              key: 0,
+              "left-icon": unref(modalHandle).maximized ? "minimize" : "maximize",
+              title: unref(modalHandle).maximized ? "Restore" : "Maximize",
+              class: "border-0 maximize-btn",
+              onClick: toggleMaximize
+            }, null, 8, ["left-icon", "title"])) : createCommentVNode("", true),
+            !__props.hideCloseButton ? (openBlock(), createBlock(_sfc_main$w, {
+              key: 1,
+              title: __props.closeCaption,
+              class: "border-0 close-btn",
+              "left-icon": "close",
+              onClick: closeModal
+            }, null, 8, ["title"])) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          ref_key: "modalBody",
+          ref: modalBody,
+          class: "grow overflow-auto outline-none"
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 512),
+        hasButtons.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "modalButtons",
+          ref: modalButtons,
+          class: "buttons"
+        }, [
+          renderSlot(_ctx.$slots, "buttons")
+        ], 512)) : createCommentVNode("", true)
+      ])), [
+        [unref(VFocusLoop)]
+      ]);
+    };
+  }
+});
+const _hoisted_1$4 = ["textContent"];
+const _hoisted_2$3 = { class: "text-right" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "BSAlertModal",
+  props: {
+    title: {},
+    message: {},
+    okCaption: { default: "OK" }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const modalHandle = useModalHandle();
+    modalHandle.setDefaultStyle({
+      minWidth: "300px",
+      escToClose: true
+    });
+    const clickOk = () => {
+      emit("click");
+      modalHandle.close();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$5, {
+        title: __props.title,
+        "auto-focus": ""
+      }, {
+        buttons: withCtx(() => [
+          createElementVNode("div", _hoisted_2$3, [
+            withDirectives(createVNode(_sfc_main$w, {
+              caption: __props.okCaption,
+              "button-color": "blue",
+              class: "min-w-80",
+              "data-id": "okBtn",
+              onClick: clickOk
+            }, null, 8, ["caption"]), [
+              [unref(vFocusOnLoad)]
+            ])
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            textContent: toDisplayString(__props.message)
+          }, null, 8, _hoisted_1$4)
+        ]),
+        _: 1
+      }, 8, ["title"]);
+    };
+  }
+});
+const _hoisted_1$3 = ["textContent"];
+const _hoisted_2$2 = { class: "text-right" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "BSYesNoModal",
+  props: {
+    title: {},
+    message: {},
+    yesCaption: { default: "Yes" },
+    noCaption: { default: "No" }
+  },
+  emits: ["clickNo", "clickYes"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const modalHandle = useModalHandle();
+    modalHandle.setDefaultStyle({
+      minWidth: "300px",
+      escToClose: true
+    });
+    const clickNo = () => {
+      emit("clickNo");
+      modalHandle.close();
+    };
+    const clickYes = () => {
+      emit("clickYes");
+      modalHandle.close();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$5, { title: __props.title }, {
+        buttons: withCtx(() => [
+          createElementVNode("div", _hoisted_2$2, [
+            createVNode(_sfc_main$w, {
+              caption: __props.noCaption,
+              class: "min-w-80",
+              "data-id": "noBtn",
+              onClick: clickNo
+            }, null, 8, ["caption"]),
+            createVNode(_sfc_main$w, {
+              caption: __props.yesCaption,
+              "button-color": "blue",
+              class: "ml-8 min-w-80",
+              "data-id": "yesBtn",
+              onClick: clickYes
+            }, null, 8, ["caption"])
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            textContent: toDisplayString(__props.message)
+          }, null, 8, _hoisted_1$3)
+        ]),
+        _: 1
+      }, 8, ["title"]);
+    };
+  }
+});
 const _hoisted_1$2 = { class: "bs-notification-container" };
 const _hoisted_2$1 = { class: "top-notification inline-flex flex-col items-center gap-1" };
 const _hoisted_3$1 = ["textContent"];
@@ -4417,7 +5126,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           })
         ]),
         createElementVNode("div", _hoisted_5, [
-          unref(tooltipEntry) ? (openBlock(), createBlock(_sfc_main$n, {
+          unref(tooltipEntry) ? (openBlock(), createBlock(_sfc_main$s, {
             key: 0,
             ref_key: "tooltip",
             ref: tooltip,
@@ -4484,7 +5193,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       const _component_BSContextMenu = resolveComponent("BSContextMenu", true);
-      return openBlock(), createBlock(_sfc_main$o, {
+      return openBlock(), createBlock(_sfc_main$t, {
         ref: "root",
         "base-element": __props.baseElement || { left: __props.left || 0, top: __props.top || 0 },
         "popup-direction": __props.direction,
@@ -4583,46 +5292,75 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+class IllegalAccessError {
+}
 export {
-  _sfc_main$r as BSButton,
-  _sfc_main$j as BSCalendar,
-  _sfc_main$i as BSCalendarRange,
-  _sfc_main$3 as BSCardLayout,
-  _sfc_main$d as BSCheckbox,
-  _sfc_main$c as BSCheckboxGroup,
+  _sfc_main$4 as BSAlertModal,
+  _sfc_main$w as BSButton,
+  _sfc_main$o as BSCalendar,
+  _sfc_main$n as BSCalendarRange,
+  _sfc_main$8 as BSCardLayout,
+  _sfc_main$i as BSCheckbox,
+  _sfc_main$h as BSCheckboxGroup,
   _sfc_main$1 as BSContextMenu,
   _sfc_main as BSContextMenuContainer,
   BSContextMenuPlugin,
-  _sfc_main$7 as BSDateInput,
-  _sfc_main$8 as BSDateInputPopup,
-  _sfc_main$5 as BSDateRange,
-  _sfc_main$6 as BSDateRangeInputPopup,
+  _sfc_main$c as BSDateInput,
+  _sfc_main$d as BSDateInputPopup,
+  _sfc_main$a as BSDateRange,
+  _sfc_main$b as BSDateRangeInputPopup,
   BSLoadingIcon,
-  _sfc_main$9 as BSMultiSelect,
+  BSModal,
+  _sfc_main$6 as BSModalContainer,
+  _sfc_main$5 as BSModalFrame,
+  _sfc_main$e as BSMultiSelect,
   _sfc_main$2 as BSNotificationContainer,
-  _sfc_main$f as BSNumberInput,
-  _sfc_main$q as BSPageNavigation,
-  _sfc_main$o as BSPopup,
-  _sfc_main$b as BSRadioButton,
-  _sfc_main$a as BSRadioButtonGroup,
-  _sfc_main$k as BSSelect,
-  _sfc_main$e as BSTextArea,
-  _sfc_main$g as BSTextInput,
-  _sfc_main$n as BSTooltip,
+  _sfc_main$k as BSNumberInput,
+  _sfc_main$v as BSPageNavigation,
+  _sfc_main$t as BSPopup,
+  _sfc_main$g as BSRadioButton,
+  _sfc_main$f as BSRadioButtonGroup,
+  _sfc_main$p as BSSelect,
+  _sfc_main$j as BSTextArea,
+  _sfc_main$l as BSTextInput,
+  _sfc_main$s as BSTooltip,
+  _sfc_main$3 as BSYesNoModal,
   BlueseaPlugin,
   ContextMenuPluginKey,
+  IllegalAccessError,
+  NAMED_COLORS,
   SavePointImpl,
   alarmEntries,
   cancelProvidedSavePoint,
   closeAlarm,
+  componentUtil,
   createContextMenuPlugin,
+  createModalPlugin,
   debounce,
+  defaultKeyProvider,
+  defaultLabelProvider,
+  emptyKeyProvider,
+  emptyLabelProvider,
+  executeKeyProviderOrDefault,
+  executeLabelProviderOrDefault,
+  findElement,
+  findFirstFocusableElement,
+  findInputComponents,
+  findLastFocusableElement,
+  focusFirstElement,
+  focusLastElement,
+  formatUtil,
+  getComponentRootElement,
+  getSelfIndex,
   hideLoading,
   hideTooltip,
   isTooltipDisplayed,
+  modalHandleKey,
+  modalPluginKey,
   notNull,
   notificationEntries,
   provideFieldContext,
+  provideModalHandle,
   provideSavePoint,
   showAlarm,
   showLoading,
@@ -4631,11 +5369,15 @@ export {
   showTooltip,
   tooltipEntry,
   tryUntil,
+  useBlueseaConfig,
   useContextMenu,
   useContextMenuOptional,
   useFieldContext,
+  useModal,
+  useModalHandle,
   useSavePoint,
   vClickOutside,
+  VFocusLoop as vFocusLoop,
   vFocusOnLoad,
   vTooltip,
   waitDuring,