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

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

@@ -26,17 +26,14 @@
     // }
     markComponentRaw(menus) {
       menus.forEach((menu) => {
-        if (menu.component)
-          menu.component = vue.markRaw(menu.component);
-        if (menu.children)
-          this.markComponentRaw(menu.children);
+        if (menu.component) menu.component = vue.markRaw(menu.component);
+        if (menu.children) this.markComponentRaw(menu.children);
       });
     }
   }
   const useContextMenu = () => {
     const contextMenu = vue.inject(ContextMenuPluginKey);
-    if (!contextMenu)
-      throw new Error("BSContextMenuPlugin is not initialized.");
+    if (!contextMenu) throw new Error("BSContextMenuPlugin is not initialized.");
     return contextMenu;
   };
   const useContextMenuOptional = () => {
@@ -61,8 +58,7 @@
       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 }
@@ -70,14 +66,10 @@
     }
     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");
@@ -158,10 +150,8 @@
     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;
@@ -169,12 +159,10 @@
   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 = {
@@ -208,8 +196,8 @@
       hideTooltip();
     }
   };
-  const _hoisted_1$q = ["textContent"];
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$u = ["textContent"];
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "BSButton",
     props: {
       caption: {},
@@ -238,7 +226,7 @@
             }, vue.toDisplayString(__props.leftIcon), 3)) : vue.createCommentVNode("", true),
             vue.createElementVNode("span", {
               textContent: vue.toDisplayString(__props.caption)
-            }, null, 8, _hoisted_1$q),
+            }, null, 8, _hoisted_1$u),
             __props.rightIcon ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 1,
               class: vue.normalizeClass([{ "ml-1": !!__props.caption }, "font-icon right"])
@@ -251,9 +239,9 @@
       };
     }
   });
-  const _hoisted_1$p = { class: "page-navigation" };
-  const _hoisted_2$l = ["data-page", "onClick"];
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$t = { class: "page-navigation" };
+  const _hoisted_2$o = ["data-page", "onClick"];
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     __name: "BSPageNavigation",
     props: {
       totalCount: { default: 0 },
@@ -313,7 +301,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
           vue.createElementVNode("span", {
             class: vue.normalizeClass([{ "disabled": isFirstSet.value }, "font-icon first"]),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => !isFirstSet.value && goToPage(1), ["prevent"]))
@@ -328,7 +316,7 @@
               class: vue.normalizeClass([{ on: page === currentPage.value }, "page"]),
               "data-page": page,
               onClick: vue.withModifiers(($event) => goToPage(page), ["prevent"])
-            }, vue.toDisplayString(page), 11, _hoisted_2$l);
+            }, vue.toDisplayString(page), 11, _hoisted_2$o);
           }), 128)),
           vue.createElementVNode("span", {
             class: vue.normalizeClass([{ "disabled": isLastSet.value }, "font-icon next"]),
@@ -349,14 +337,14 @@
     }
     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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [..._cache[0] || (_cache[0] = [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [..._cache[0] || (_cache[0] = [
       vue.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;
@@ -379,9 +367,9 @@
       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__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "BSPopup",
     props: {
       popupId: {},
@@ -572,7 +560,7 @@
                 onKeydown: _cache[1] || (_cache[1] = ($event) => emit("keydown", $event))
               }, [
                 vue.renderSlot(_ctx.$slots, "default")
-              ], 46, _hoisted_1$n)
+              ], 46, _hoisted_1$r)
             ]),
             _: 3
           })
@@ -580,8 +568,8 @@
       };
     }
   });
-  const _hoisted_1$m = ["textContent"];
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$q = ["textContent"];
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "BSTooltip",
     props: {
       align: { default: "center" },
@@ -608,7 +596,7 @@
         }, [
           vue.createElementVNode("div", {
             textContent: vue.toDisplayString(__props.content)
-          }, null, 8, _hoisted_1$m)
+          }, null, 8, _hoisted_1$q)
         ], 6);
       };
     }
@@ -650,14 +638,14 @@
       });
     };
   };
-  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__ */ vue.defineComponent({
+  const _hoisted_2$n = ["data-value", "onMouseover", "onClick"];
+  const _hoisted_3$h = ["textContent"];
+  const _hoisted_4$b = ["textContent"];
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "BSSelectPopup",
     props: {
       items: {},
@@ -799,7 +787,7 @@
         handleKeyboard
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$t, {
           "base-element": __props.baseElement,
           "max-height": __props.maxHeight,
           "offset-from-base-element": 4,
@@ -810,7 +798,7 @@
           onKeydown: vue.withKeys(vue.withModifiers(handleKeyboard, ["stop", "prevent"]), ["enter", "down", "up"])
         }, {
           default: vue.withCtx(() => [
-            actualShowSearch.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+            actualShowSearch.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
               vue.withDirectives(vue.createElementVNode("input", {
                 type: "text",
                 onInput: setSearchKeyword,
@@ -843,12 +831,12 @@
                     key: 0,
                     textContent: vue.toDisplayString(item?.label),
                     class: "label"
-                  }, null, 8, _hoisted_3$g)) : (vue.openBlock(), vue.createElementBlock("label", {
+                  }, null, 8, _hoisted_3$h)) : (vue.openBlock(), vue.createElementBlock("label", {
                     key: 1,
                     textContent: vue.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)
           ]),
@@ -865,13 +853,10 @@
     };
   };
   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 = {
@@ -896,8 +881,7 @@
     },
     unmounted: (el) => {
       const clickListener = el.vClickOutsideListener;
-      if (clickListener)
-        window.removeEventListener("click", clickListener);
+      if (clickListener) window.removeEventListener("click", clickListener);
       delete el.vClickOutsideContext;
     }
   };
@@ -992,10 +976,12 @@
     };
     stringValue.value = convertFromValue(value.value);
     if (option.field) {
-      vue.watch(option.field, (field) => {
-        if (field)
-          storeFieldValidator(field, validator);
-      });
+      vue.watch(
+        option.field,
+        (field) => {
+          if (field) storeFieldValidator(field, validator);
+        }
+      );
     }
     return validator;
   };
@@ -1004,8 +990,7 @@
     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));
     }
@@ -1115,26 +1100,25 @@
         setCurrentValue: option.setCurrentValue,
         compare: option.compare
       });
-      vue.watch(option.field, (field) => {
-        if (field)
-          this.fields.set(field, handler);
-      });
+      vue.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() {
@@ -1187,8 +1171,7 @@
       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);
@@ -1197,9 +1180,9 @@
       return this.isModified(this.valueProvider.getCurrentValue());
     }
   }
-  const _hoisted_1$k = { key: 0 };
-  const _hoisted_2$j = ["textContent"];
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$o = { key: 0 };
+  const _hoisted_2$m = ["textContent"];
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     __name: "ValidationErrors",
     props: {
       errors: {},
@@ -1207,13 +1190,13 @@
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return !__props.hideErrorMessage && __props.errors && __props.errors.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return !__props.hideErrorMessage && __props.errors && __props.errors.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.errors, (error) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: error.code,
               textContent: vue.toDisplayString(error.message),
               class: "bs-field-error"
-            }, null, 8, _hoisted_2$j);
+            }, null, 8, _hoisted_2$m);
           }), 128))
         ])) : vue.createCommentVNode("", true);
       };
@@ -1229,39 +1212,43 @@
     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__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "BSSelect",
     props: {
       modelValue: {},
@@ -1396,7 +1383,7 @@
           __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             textContent: vue.toDisplayString(selectedItemLabel.value)
-          }, null, 8, _hoisted_2$i)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          }, null, 8, _hoisted_2$l)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.createElementVNode("div", {
               ref_key: "field",
               ref: field,
@@ -1408,15 +1395,15 @@
                 key: 0,
                 textContent: vue.toDisplayString(__props.placeholder),
                 class: "placeholder grow"
-              }, null, 8, _hoisted_4$9)) : (vue.openBlock(), vue.createElementBlock("span", {
+              }, null, 8, _hoisted_4$a)) : (vue.openBlock(), vue.createElementBlock("span", {
                 key: 1,
                 textContent: vue.toDisplayString(selectedItemLabel.value),
                 class: "label"
-              }, null, 8, _hoisted_5$4)),
+              }, null, 8, _hoisted_5$5)),
               _cache[4] || (_cache[4] = vue.createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1)),
               loadingItems.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$2, "progress_activity")) : vue.createCommentVNode("", true)
-            ], 8, _hoisted_3$f),
-            !__props.disabled && showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+            ], 8, _hoisted_3$g),
+            !__props.disabled && showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
               key: 0,
               ref_key: "selectPopup",
               ref: selectPopup,
@@ -1438,26 +1425,26 @@
                 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"])) : vue.createCommentVNode("", true),
-            !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+            !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
               key: 1,
               errors: vue.unref(errors),
               "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
             }, null, 8, ["errors", "hide-error-message"])) : vue.createCommentVNode("", true)
           ], 64))
-        ], 42, _hoisted_1$j)), [
+        ], 42, _hoisted_1$n)), [
           [vue.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 = {
@@ -1465,7 +1452,7 @@
     class: "bs-calendar-time"
   };
   const _hoisted_9$1 = { class: "select-wrap" };
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "BSCalendar",
     props: {
       modelValue: {},
@@ -1654,39 +1641,39 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          vue.createElementVNode("div", _hoisted_2$h, [
-            vue.createElementVNode("div", _hoisted_3$e, [
-              vue.createVNode(_sfc_main$r, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+          vue.createElementVNode("div", _hoisted_2$k, [
+            vue.createElementVNode("div", _hoisted_3$f, [
+              vue.createVNode(_sfc_main$w, {
                 class: "",
                 "left-icon": "chevron_left",
                 onClick: prevMonth
               }),
-              vue.createVNode(_sfc_main$k, {
+              vue.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"]),
-              vue.createVNode(_sfc_main$k, {
+              vue.createVNode(_sfc_main$p, {
                 modelValue: month.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => month.value = $event),
                 disabled: __props.disabled,
                 items: vue.unref(months)
               }, null, 8, ["modelValue", "disabled", "items"]),
-              vue.createVNode(_sfc_main$r, {
+              vue.createVNode(_sfc_main$w, {
                 class: "",
                 "left-icon": "chevron_right",
                 onClick: nextMonth
               })
             ]),
-            __props.showTimeZone ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$8, "(" + vue.toDisplayString(actualTimeZone.value) + ")", 1)) : vue.createCommentVNode("", true)
+            __props.showTimeZone ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$9, "(" + vue.toDisplayString(actualTimeZone.value) + ")", 1)) : vue.createCommentVNode("", true)
           ]),
           vue.createElementVNode("table", {
             class: vue.normalizeClass([{ disabled: __props.disabled }, "align-self-center"])
           }, [
             vue.createElementVNode("tbody", null, [
-              vue.createElementVNode("tr", _hoisted_5$3, [
+              vue.createElementVNode("tr", _hoisted_5$4, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(weekdays.value, (day) => {
                   return vue.openBlock(), vue.createElementBlock("th", {
                     key: day,
@@ -1716,7 +1703,7 @@
             __props.resolution
           ) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$1, [
             vue.createElementVNode("div", _hoisted_9$1, [
-              vue.createVNode(_sfc_main$k, {
+              vue.createVNode(_sfc_main$p, {
                 disabled: __props.disabled,
                 items: hours,
                 "label-provider": (item) => item < 10 ? "0" + item : item.toString(),
@@ -1725,7 +1712,7 @@
                 "onUpdate:modelValue": updateHour
               }, null, 8, ["disabled", "label-provider", "model-value"]),
               _cache[2] || (_cache[2] = vue.createElementVNode("span", { class: "" }, ":", -1)),
-              vue.createVNode(_sfc_main$k, {
+              vue.createVNode(_sfc_main$p, {
                 disabled: __props.disabled || __props.resolution === "HOUR",
                 items: minutes.value,
                 "label-provider": (item) => item < 10 ? "0" + item : item.toString(),
@@ -1739,10 +1726,10 @@
       };
     }
   });
-  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__ */ vue.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__ */ vue.defineComponent({
     __name: "BSCalendarRange",
     props: {
       from: {},
@@ -1780,10 +1767,10 @@
         emit("update:to", value);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$g, [
-            vue.createElementVNode("div", _hoisted_3$d, [
-              vue.createVNode(_sfc_main$j, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          vue.createElementVNode("div", _hoisted_2$j, [
+            vue.createElementVNode("div", _hoisted_3$e, [
+              vue.createVNode(_sfc_main$o, {
                 modelValue: fromValue.value,
                 "onUpdate:modelValue": [
                   _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -1801,7 +1788,7 @@
                 "range-type": "from"
               }, null, 8, ["modelValue", "disabled", "display-format", "end-year", "first-day", "range-value", "resolution", "start-year", "time-zone"]),
               _cache[2] || (_cache[2] = vue.createElementVNode("span", { class: "tilde" }, "~", -1)),
-              vue.createVNode(_sfc_main$j, {
+              vue.createVNode(_sfc_main$o, {
                 modelValue: toValue.value,
                 "onUpdate:modelValue": [
                   _cache[1] || (_cache[1] = ($event) => toValue.value = $event),
@@ -1862,13 +1849,11 @@
       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 {
@@ -1876,12 +1861,16 @@
         }
       }
       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__ */ vue.defineComponent({
+  const _hoisted_1$k = ["textContent"];
+  const _hoisted_2$i = { class: "font-icon" };
+  const _hoisted_3$d = ["src", "alt"];
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "BSPrefixSuffix",
     props: {
       value: {},
@@ -1897,11 +1886,11 @@
               textContent: vue.toDisplayString(item.value),
               key: JSON.stringify(item.value),
               class: vue.normalizeClass(__props.type)
-            }, null, 10, _hoisted_1$g)) : item.type === "font-icon" ? (vue.openBlock(), vue.createElementBlock("span", {
+            }, null, 10, _hoisted_1$k)) : item.type === "font-icon" ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 1,
               class: vue.normalizeClass(__props.type)
             }, [
-              vue.createElementVNode("span", _hoisted_2$f, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$i, vue.toDisplayString(item.value), 1)
             ], 2)) : item.type === "image-url" ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 2,
               class: vue.normalizeClass(__props.type)
@@ -1909,24 +1898,24 @@
               vue.createElementVNode("img", {
                 src: item.value,
                 alt: __props.type
-              }, null, 8, _hoisted_3$c)
+              }, null, 8, _hoisted_3$d)
             ], 2)) : vue.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__ */ vue.defineComponent({
+  const _hoisted_4$8 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "type"];
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "BSTextInput",
     props: {
       id: {},
@@ -2050,20 +2039,20 @@
           class: vue.normalizeClass([{ required: __props.required, disabled: __props.disabled, modified: modified.value, error: vue.unref(errors).length > 0 }, "bs-text-input bs-input-wrap"]),
           style: vue.normalizeStyle({ width: __props.width })
         }, [
-          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
-            vue.createVNode(_sfc_main$h, {
+          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+            vue.createVNode(_sfc_main$m, {
               value: __props.prefix,
               type: "prefix"
             }, null, 8, ["value"]),
             vue.createElementVNode("span", {
               textContent: vue.toDisplayString(vue.unref(stringValue))
-            }, null, 8, _hoisted_2$e),
-            vue.createVNode(_sfc_main$h, {
+            }, null, 8, _hoisted_2$h),
+            vue.createVNode(_sfc_main$m, {
               value: __props.suffix,
               type: "suffix"
             }, null, 8, ["value"])
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$b, [
-            vue.createVNode(_sfc_main$h, {
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$c, [
+            vue.createVNode(_sfc_main$m, {
               value: __props.prefix,
               type: "prefix"
             }, null, 8, ["value"]),
@@ -2079,15 +2068,15 @@
               name: __props.name,
               tabindex: __props.tabindex,
               type: __props.inputType
-            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$7), [
+            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$8), [
               [vue.vModelDynamic, vue.unref(stringValue)]
             ]),
-            vue.createVNode(_sfc_main$h, {
+            vue.createVNode(_sfc_main$m, {
               value: __props.suffix,
               type: "suffix"
             }, null, 8, ["value"])
           ])),
-          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 2,
             errors: vue.unref(errors),
             "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
@@ -2290,8 +2279,7 @@
     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 "";
@@ -2370,17 +2358,17 @@
       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__ */ vue.defineComponent({
+  const _hoisted_4$7 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "BSNumberInput",
     props: {
       id: {},
@@ -2512,20 +2500,20 @@
           class: vue.normalizeClass([{ required: __props.required, disabled: __props.disabled, modified: modified.value, error: vue.unref(errors).length > 0 }, "bs-number-input bs-input-wrap"]),
           style: vue.normalizeStyle({ width: __props.width })
         }, [
-          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-            vue.createVNode(_sfc_main$h, {
+          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+            vue.createVNode(_sfc_main$m, {
               value: __props.prefix,
               type: "prefix"
             }, null, 8, ["value"]),
             vue.createElementVNode("span", {
               textContent: vue.toDisplayString(__props.formatInViewMode ? formattedStringValue.value : vue.unref(stringValue))
-            }, null, 8, _hoisted_2$d),
-            vue.createVNode(_sfc_main$h, {
+            }, null, 8, _hoisted_2$g),
+            vue.createVNode(_sfc_main$m, {
               value: __props.suffix,
               type: "suffix"
             }, null, 8, ["value"])
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a, [
-            vue.createVNode(_sfc_main$h, {
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$b, [
+            vue.createVNode(_sfc_main$m, {
               value: __props.prefix,
               type: "prefix"
             }, null, 8, ["value"]),
@@ -2541,13 +2529,13 @@
               tabindex: __props.tabindex,
               value: focused.value || !__props.formatOnBlur ? vue.unref(stringValue) : formattedStringValue.value,
               type: "text"
-            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$6),
-            vue.createVNode(_sfc_main$h, {
+            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$7),
+            vue.createVNode(_sfc_main$m, {
               value: __props.suffix,
               type: "suffix"
             }, null, 8, ["value"])
           ])),
-          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 2,
             errors: vue.unref(errors),
             "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
@@ -2556,17 +2544,17 @@
       };
     }
   });
-  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__ */ vue.defineComponent({
+  const _hoisted_4$6 = ["placeholder", "disabled", "maxlength", "name", "tabindex"];
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "BSTextArea",
     props: {
       id: {},
@@ -2681,20 +2669,20 @@
           class: vue.normalizeClass([{ disabled: __props.disabled, modified: modified.value, error: vue.unref(errors).length > 0 }, "bs-text-area bs-input-wrap"]),
           style: vue.normalizeStyle({ width: outerWidth.value, height: outerHeight.value })
         }, [
-          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-            vue.createVNode(_sfc_main$h, {
+          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+            vue.createVNode(_sfc_main$m, {
               value: __props.prefix,
               type: "prefix"
             }, null, 8, ["value"]),
             vue.createElementVNode("div", {
               textContent: vue.toDisplayString(vue.unref(stringValue))
-            }, null, 8, _hoisted_2$c),
-            vue.createVNode(_sfc_main$h, {
+            }, null, 8, _hoisted_2$f),
+            vue.createVNode(_sfc_main$m, {
               value: __props.suffix,
               type: "suffix"
             }, null, 8, ["value"])
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9, [
-            vue.createVNode(_sfc_main$h, {
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a, [
+            vue.createVNode(_sfc_main$m, {
               value: __props.prefix,
               type: "prefix"
             }, null, 8, ["value"]),
@@ -2711,15 +2699,15 @@
               class: "grow",
               onPointerdown: capturePointer,
               onPointerup: preserveResizedHeight
-            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$5), [
+            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$6), [
               [vue.vModelText, vue.unref(stringValue)]
             ]),
-            vue.createVNode(_sfc_main$h, {
+            vue.createVNode(_sfc_main$m, {
               value: __props.suffix,
               type: "suffix"
             }, null, 8, ["value"])
           ])),
-          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 2,
             errors: vue.unref(errors),
             "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
@@ -2728,10 +2716,10 @@
       };
     }
   });
-  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__ */ vue.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__ */ vue.defineComponent({
     __name: "BSCheckbox",
     props: {
       id: { default: () => componentUtil.generateNextId("checkbox") },
@@ -2787,28 +2775,28 @@
             tabindex: __props.tabindex,
             class: "",
             type: "checkbox"
-          }, vue.toHandlers(handlers, true)), null, 16, _hoisted_1$c),
+          }, vue.toHandlers(handlers, true)), null, 16, _hoisted_1$g),
           __props.label ? (vue.openBlock(), vue.createElementBlock("label", {
             key: 0,
             textContent: vue.toDisplayString(__props.label),
             for: __props.id,
             class: "text-label"
-          }, null, 8, _hoisted_2$b)) : vue.createCommentVNode("", true),
+          }, null, 8, _hoisted_2$e)) : vue.createCommentVNode("", true),
           hasLabelSlot.value ? (vue.openBlock(), vue.createElementBlock("label", {
             key: 1,
             for: __props.id,
             class: "slot-label cursor-pointer"
           }, [
             vue.renderSlot(_ctx.$slots, "default", { disabled: __props.disabled })
-          ], 8, _hoisted_3$8)) : vue.createCommentVNode("", true)
+          ], 8, _hoisted_3$9)) : vue.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__ */ vue.defineComponent({
+  const _hoisted_1$f = ["data-field-name"];
+  const _hoisted_2$d = { class: "items" };
+  const _hoisted_3$8 = ["textContent"];
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "BSCheckboxGroup",
     props: {
       name: {},
@@ -2914,13 +2902,13 @@
           "data-field-name": __props.name,
           role: "group"
         }, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
               class: "view-mode",
               textContent: vue.toDisplayString(modelValueLabels.value)
-            }, null, 8, _hoisted_3$7)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(__props.items, (item) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$d, {
+            }, null, 8, _hoisted_3$8)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(__props.items, (item) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$i, {
                 key: itemKey(item),
                 disabled: __props.disabled || isDisabledItem(item),
                 label: itemLabel(item),
@@ -2932,24 +2920,24 @@
               }, null, 8, ["disabled", "label", "model-value", "name", "tabindex", "onUpdate:modelValue"]);
             }), 128))
           ]),
-          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 0,
             errors: vue.unref(errors),
             "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
           }, null, 8, ["errors", "hide-error-message"])) : vue.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__ */ vue.defineComponent({
+  const _hoisted_4$5 = ["textContent"];
+  const _hoisted_5$3 = ["for"];
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "BSRadioButton",
     props: {
       id: { default: () => componentUtil.generateNextId("radio") },
@@ -2992,34 +2980,34 @@
             class: "",
             role: "radio",
             type: "radio"
-          }, vue.toHandlers(handlers, true)), null, 16, _hoisted_1$a),
+          }, vue.toHandlers(handlers, true)), null, 16, _hoisted_1$e),
           vue.createElementVNode("label", { for: __props.id }, [
-            __props.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$6, vue.toDisplayString(__props.icon), 1)) : vue.createCommentVNode("", true),
+            __props.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$7, vue.toDisplayString(__props.icon), 1)) : vue.createCommentVNode("", true),
             __props.label ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 1,
               textContent: vue.toDisplayString(__props.label),
               class: "text-label"
-            }, null, 8, _hoisted_4$4)) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_2$9),
+            }, null, 8, _hoisted_4$5)) : vue.createCommentVNode("", true)
+          ], 8, _hoisted_2$c),
           hasLabelSlot.value ? (vue.openBlock(), vue.createElementBlock("label", {
             key: 0,
             for: __props.id,
             class: "slot-label cursor-pointer"
           }, [
             vue.renderSlot(_ctx.$slots, "default", { disabled: __props.disabled })
-          ], 8, _hoisted_5$2)) : vue.createCommentVNode("", true)
+          ], 8, _hoisted_5$3)) : vue.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__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "BSRadioButtonGroup",
     props: {
       name: { default: () => componentUtil.generateNextName("radioGroup") },
@@ -3102,9 +3090,9 @@
           __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             textContent: vue.toDisplayString(modelValueLabel.value)
-          }, null, 8, _hoisted_2$8)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [
+          }, null, 8, _hoisted_2$b)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$6, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
-              return vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$b, {
+              return vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$g, {
                 key: itemKey(item),
                 disabled: __props.disabled || isDisabledItem(item),
                 icon: __props.iconProvider?.(item),
@@ -3119,20 +3107,20 @@
               ]);
             }), 128))
           ])),
-          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 2,
             errors: vue.unref(errors),
             "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
           }, null, 8, ["errors", "hide-error-message"])) : vue.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,
@@ -3144,7 +3132,7 @@
     key: 2,
     class: "small-progress"
   };
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "BSMultiSelect",
     props: {
       modelValue: { default: () => [] },
@@ -3267,17 +3255,17 @@
             _cache[4] || (_cache[4] = vue.withKeys(($event) => togglePopup(false), ["tab"]))
           ]
         }, [
-          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
+          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
             __props.selectedLabelProvider ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               textContent: vue.toDisplayString(__props.selectedLabelProvider(selectedItems.value)),
               class: "label"
-            }, null, 8, _hoisted_3$4)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(selectedItems.value, (item) => {
+            }, null, 8, _hoisted_3$5)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(selectedItems.value, (item) => {
               return vue.openBlock(), vue.createElementBlock("span", {
                 key: itemKey(item),
                 textContent: vue.toDisplayString(itemLabel(item)),
                 class: "label"
-              }, null, 8, _hoisted_4$3);
+              }, null, 8, _hoisted_4$4);
             }), 128))
           ])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.createElementVNode("div", {
@@ -3306,8 +3294,8 @@
               ])),
               _cache[5] || (_cache[5] = vue.createElementVNode("span", { class: "dropdown-btn" }, "expand_more", -1)),
               loadingItems.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_10, "progress_activity")) : vue.createCommentVNode("", true)
-            ], 8, _hoisted_5$1),
-            !__props.disabled && showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+            ], 8, _hoisted_5$2),
+            !__props.disabled && showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
               key: 0,
               ref_key: "selectPopup",
               ref: selectPopup,
@@ -3325,12 +3313,12 @@
               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"])) : vue.createCommentVNode("", true)
           ], 64)),
-          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 2,
             errors: vue.unref(errors),
             "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
           }, null, 8, ["errors", "hide-error-message"])) : vue.createCommentVNode("", true)
-        ], 42, _hoisted_1$8)), [
+        ], 42, _hoisted_1$c)), [
           [vue.unref(vClickOutside), () => togglePopup(false)]
         ]);
       };
@@ -3339,14 +3327,10 @@
   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) {
@@ -3359,19 +3343,16 @@
           }
         }
         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;
@@ -3401,9 +3382,9 @@
   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__ */ vue.defineComponent({
+  const _hoisted_1$b = { class: "bs-date-input-popup" };
+  const _hoisted_2$9 = { class: "buttons" };
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "BSDateInputPopup",
     props: {
       modelValue: {},
@@ -3431,7 +3412,7 @@
         emit("close");
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$t, {
           "base-element": __props.baseElement,
           "popup-align": __props.popupAlign,
           "offset-from-base-element": 4,
@@ -3442,8 +3423,8 @@
           }, ["stop"]))
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$7, [
-              vue.createVNode(_sfc_main$j, {
+            vue.createElementVNode("div", _hoisted_1$b, [
+              vue.createVNode(_sfc_main$o, {
                 modelValue: date.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => date.value = $event),
                 "display-format": __props.displayFormat,
@@ -3452,14 +3433,14 @@
                 "start-year": __props.selectStartYear,
                 "time-zone": __props.timeZone
               }, null, 8, ["modelValue", "display-format", "end-year", "resolution", "start-year", "time-zone"]),
-              vue.createElementVNode("div", _hoisted_2$6, [
-                vue.createVNode(_sfc_main$r, {
+              vue.createElementVNode("div", _hoisted_2$9, [
+                vue.createVNode(_sfc_main$w, {
                   caption: __props.okButtonCaption,
                   "button-color": "blue",
                   class: "min-w-80",
                   onClick: emitValue
                 }, null, 8, ["caption"]),
-                vue.createVNode(_sfc_main$r, {
+                vue.createVNode(_sfc_main$w, {
                   caption: __props.cancelButtonCaption,
                   class: "min-w-80",
                   onClick: close
@@ -3472,16 +3453,16 @@
       };
     }
   });
-  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__ */ vue.defineComponent({
+  const _hoisted_3$4 = ["id", "placeholder", "disabled", "maxlength", "name", "tabindex", "value"];
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     __name: "BSDateInput",
     props: {
       id: {},
@@ -3688,9 +3669,9 @@
           style: vue.normalizeStyle({ width: __props.width }),
           onKeydown: _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(() => togglePopup(false), ["stop", "prevent"]), ["esc"]))
         }, [
-          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
             vue.createElementVNode("span", null, vue.toDisplayString(viewModeValue.value), 1)
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$8, [
             vue.createElementVNode("span", {
               class: vue.normalizeClass([{ "bs-clickable": !__props.disabled }, "font-icon"]),
               onClick: _cache[0] || (_cache[0] = ($event) => togglePopup())
@@ -3706,14 +3687,14 @@
               tabindex: __props.tabindex,
               value: focused.value ? vue.unref(stringValue) : formattedValue.value,
               type: "text"
-            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_3$3)
+            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_3$4)
           ])),
-          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 2,
             errors: vue.unref(errors),
             "hide-error-message": __props.hideErrorMessage || __props.disabled && !__props.showErrorMessageOnDisabled
           }, null, 8, ["errors", "hide-error-message"])) : vue.createCommentVNode("", true),
-          showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
+          showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
             key: 3,
             "base-element": rootRef.value,
             "display-format": actualDisplayFormat.value,
@@ -3734,9 +3715,9 @@
       };
     }
   });
-  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__ */ vue.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__ */ vue.defineComponent({
     __name: "BSDateRangeInputPopup",
     props: {
       from: {},
@@ -3767,7 +3748,7 @@
         emit("close");
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$t, {
           "base-element": __props.baseElement,
           "offset-from-base-element": 4,
           "max-height": "auto",
@@ -3776,8 +3757,8 @@
           }, ["stop"]))
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$5, [
-              vue.createVNode(_sfc_main$i, {
+            vue.createElementVNode("div", _hoisted_1$9, [
+              vue.createVNode(_sfc_main$n, {
                 from: fromValue.value,
                 "onUpdate:from": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
                 to: toValue.value,
@@ -3790,14 +3771,14 @@
                 "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"]),
-              vue.createElementVNode("div", _hoisted_2$4, [
-                vue.createVNode(_sfc_main$r, {
+              vue.createElementVNode("div", _hoisted_2$7, [
+                vue.createVNode(_sfc_main$w, {
                   caption: __props.okButtonCaption,
                   "button-color": "blue",
                   class: "min-w-80",
                   onClick: emitValue
                 }, null, 8, ["caption"]),
-                vue.createVNode(_sfc_main$r, {
+                vue.createVNode(_sfc_main$w, {
                   caption: __props.cancelButtonCaption,
                   class: "min-w-80",
                   onClick: close
@@ -3810,17 +3791,17 @@
       };
     }
   });
-  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__ */ vue.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__ */ vue.defineComponent({
     __name: "BSDateRange",
     props: {
       idFrom: {},
@@ -4198,9 +4179,9 @@
           style: vue.normalizeStyle({ width: __props.width }),
           onKeydown: _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(() => togglePopup(false), ["stop", "prevent"]), ["esc"]))
         }, [
-          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          __props.viewMode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
             vue.createElementVNode("span", null, vue.toDisplayString(formattedDateRange.value), 1)
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
             vue.createElementVNode("span", {
               class: vue.normalizeClass([{ "bs-clickable": !disabled.value }, "font-icon"]),
               onClick: _cache[0] || (_cache[0] = () => togglePopup())
@@ -4216,7 +4197,7 @@
               tabindex: __props.tabindex,
               value: focusedFrom.value ? vue.unref(stringValueFrom) : formattedFrom.value,
               type: "text"
-            }, vue.toHandlers(handlersFrom, true)), null, 16, _hoisted_3$2),
+            }, vue.toHandlers(handlersFrom, true)), null, 16, _hoisted_3$3),
             _cache[3] || (_cache[3] = vue.createElementVNode("span", { class: "px-4" }, "~", -1)),
             vue.createElementVNode("input", vue.mergeProps({
               id: __props.idTo,
@@ -4229,14 +4210,14 @@
               tabindex: __props.tabindex,
               value: focusedTo.value ? vue.unref(stringValueTo) : formattedTo.value,
               type: "text"
-            }, vue.toHandlers(handlersTo, true)), null, 16, _hoisted_4$2)
+            }, vue.toHandlers(handlersTo, true)), null, 16, _hoisted_4$3)
           ])),
-          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
+          !__props.viewMode ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 2,
             errors: errors.value,
             "hide-error-message": __props.hideErrorMessage || disabled.value && !__props.showErrorMessageOnDisabled
           }, null, 8, ["errors", "hide-error-message"])) : vue.createCommentVNode("", true),
-          showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+          showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
             key: 3,
             "base-element": rootRef.value,
             "disabled-from": __props.disabledFrom,
@@ -4261,7 +4242,7 @@
       };
     }
   });
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     __name: "SlideDownTransition",
     setup(__props) {
       const beforeEnter = (el) => {
@@ -4324,12 +4305,12 @@
       };
     }
   });
-  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__ */ vue.defineComponent({
+  const _hoisted_2$5 = ["textContent"];
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "BSCardLayout",
     props: {
       title: {},
@@ -4343,7 +4324,7 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass([{ expanded: expanded.value }, "bs-card-layout"])
         }, [
-          !__props.hideTitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          !__props.hideTitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
             vue.createElementVNode("span", {
               class: "expand-btn font-icon bs-clickable",
               onClick: toggleExpand
@@ -4351,13 +4332,13 @@
             vue.createElementVNode("div", {
               textContent: vue.toDisplayString(__props.title),
               class: "card-layout-title"
-            }, null, 8, _hoisted_2$2),
+            }, null, 8, _hoisted_2$5),
             _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "grow" }, null, -1)),
             vue.createElementVNode("div", null, [
               vue.renderSlot(_ctx.$slots, "title-right")
             ])
           ])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$4, null, {
+          vue.createVNode(_sfc_main$9, null, {
             default: vue.withCtx(() => [
               vue.withDirectives(vue.createElementVNode("div", {
                 class: vue.normalizeClass(__props.cardBodyClass)
@@ -4373,6 +4354,742 @@
       };
     }
   });
+  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 = vue.reactive([]);
+    openModal(modalItem) {
+      const modalId = Math.random().toString(36);
+      const handle = new ModalHandleImpl(this, modalId);
+      const registered = {
+        modalId,
+        pageId: modalItem.pageId,
+        component: vue.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: vue.defineAsyncComponent(() => Promise.resolve().then(() => BSAlertModal)),
+        bind: {
+          title,
+          message
+        },
+        on: {
+          click: async () => await clickHandler?.()
+        }
+      };
+      return this.openModal(option);
+    }
+    openYesNo(title, message, yesHandler, noHandler) {
+      const option = {
+        component: vue.defineAsyncComponent(() => Promise.resolve().then(() => BSYesNoModal)),
+        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 = vue.inject(modalPluginKey);
+    if (!modal) throw new Error("BSModal is not initialized.");
+    return modal;
+  };
+  const provideModalHandle = (modalHandle) => {
+    vue.provide(modalHandleKey, modalHandle);
+  };
+  const useModalHandle = () => {
+    const modalHandle = vue.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__ */ vue.defineComponent({
+    __name: "BSModalWrapper",
+    props: {
+      modalItem: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const defaultModalPosition = vue.ref();
+      props.modalItem.modalHandle.setDefaultPositionListener(
+        (position) => {
+          defaultModalPosition.value = position;
+          initializeOffset(position);
+        }
+      );
+      const modalPositionStyle = vue.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 = vue.ref();
+      props.modalItem.modalHandle.setDefaultStyleListener((style) => {
+        defaultModalStyle.value = style;
+        props.modalItem.escToClose = style.escToClose;
+      });
+      const mergedStyle = vue.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 = vue.ref();
+      const modalPanel = vue.ref();
+      const offset = vue.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 vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass([modalPositionStyle.value, "modal-wrapper flex flex-col"])
+        }, [
+          vue.createElementVNode("div", {
+            ref_key: "modalPanel",
+            ref: modalPanel,
+            class: vue.normalizeClass([[
+              __props.modalItem.style?.styleClass,
+              __props.modalItem.modalHandle.maximized ? "maximized" : void 0
+            ], "modal-panel"]),
+            style: vue.normalizeStyle(mergedStyle.value),
+            onPointerdown: startMoveModal,
+            onPointermove: moveModal,
+            onPointerup: endMoveModal
+          }, [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.modalItem.component), vue.mergeProps({
+              ref_key: "modalComponent",
+              ref: modalComponent
+            }, __props.modalItem.bind || {}, vue.toHandlers(__props.modalItem.on || {})), null, 16))
+          ], 38)
+        ], 2)), [
+          [vue.vShow, modalComponent.value]
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$6 = {
+    key: 0,
+    class: "modal-curtain"
+  };
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+    __name: "BSModalContainer",
+    setup(__props) {
+      const modal = useModal();
+      const modalExists = vue.computed(() => modal.modalItems.length > 0);
+      const disableBodyScroll = (disable) => {
+        document.body.style.overflow = disable ? "hidden" : "auto";
+      };
+      vue.watch(
+        modalExists,
+        () => disableBodyScroll(modalExists.value)
+      );
+      const modalContainer = vue.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();
+            }
+          }
+        }
+      };
+      vue.onMounted(() => {
+        window.addEventListener("keydown", handleKeyDown);
+      });
+      vue.onBeforeUnmount(() => {
+        window.removeEventListener("keydown", handleKeyDown);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "modalContainer",
+          ref: modalContainer,
+          class: "bs-modal-container"
+        }, [
+          modalExists.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6)) : vue.createCommentVNode("", true),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(modal).modalItems, (item) => {
+            return vue.openBlock(), vue.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 vue.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__ */ vue.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 = vue.useSlots();
+      const hasTitleBar = vue.computed(
+        () => props.title || slots["title"] || slots["title-buttons"] || !props.hideCloseButton
+      );
+      const hasButtons = vue.computed(() => slots["buttons"]);
+      const modalHandle = useModalHandle();
+      const toggleMaximize = () => {
+        modalHandle.maximized = !modalHandle.maximized;
+      };
+      const closeModal = () => {
+        modalHandle.close();
+        emit("closeModal");
+      };
+      const modalBody = vue.ref();
+      const modalButtons = vue.ref();
+      vue.onMounted(async () => {
+        await vue.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 vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+          hasTitleBar.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
+            vue.createElementVNode("div", _hoisted_3$2, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createElementVNode("span", {
+                  textContent: vue.toDisplayString(__props.title)
+                }, null, 8, _hoisted_4$2)
+              ])
+            ]),
+            vue.createElementVNode("div", _hoisted_5$1, [
+              vue.renderSlot(_ctx.$slots, "title-buttons")
+            ]),
+            vue.createElementVNode("div", null, [
+              !__props.hideMaximizeButton ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                key: 0,
+                "left-icon": vue.unref(modalHandle).maximized ? "minimize" : "maximize",
+                title: vue.unref(modalHandle).maximized ? "Restore" : "Maximize",
+                class: "border-0 maximize-btn",
+                onClick: toggleMaximize
+              }, null, 8, ["left-icon", "title"])) : vue.createCommentVNode("", true),
+              !__props.hideCloseButton ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                key: 1,
+                title: __props.closeCaption,
+                class: "border-0 close-btn",
+                "left-icon": "close",
+                onClick: closeModal
+              }, null, 8, ["title"])) : vue.createCommentVNode("", true)
+            ])
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            ref_key: "modalBody",
+            ref: modalBody,
+            class: "grow overflow-auto outline-none"
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 512),
+          hasButtons.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            ref_key: "modalButtons",
+            ref: modalButtons,
+            class: "buttons"
+          }, [
+            vue.renderSlot(_ctx.$slots, "buttons")
+          ], 512)) : vue.createCommentVNode("", true)
+        ])), [
+          [vue.unref(VFocusLoop)]
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$4 = ["textContent"];
+  const _hoisted_2$3 = { class: "text-right" };
+  const _sfc_main$4 = /* @__PURE__ */ vue.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 vue.openBlock(), vue.createBlock(_sfc_main$5, {
+          title: __props.title,
+          "auto-focus": ""
+        }, {
+          buttons: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2$3, [
+              vue.withDirectives(vue.createVNode(_sfc_main$w, {
+                caption: __props.okCaption,
+                "button-color": "blue",
+                class: "min-w-80",
+                "data-id": "okBtn",
+                onClick: clickOk
+              }, null, 8, ["caption"]), [
+                [vue.unref(vFocusOnLoad)]
+              ])
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              textContent: vue.toDisplayString(__props.message)
+            }, null, 8, _hoisted_1$4)
+          ]),
+          _: 1
+        }, 8, ["title"]);
+      };
+    }
+  });
+  const BSAlertModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    default: _sfc_main$4
+  }, Symbol.toStringTag, { value: "Module" }));
+  const _hoisted_1$3 = ["textContent"];
+  const _hoisted_2$2 = { class: "text-right" };
+  const _sfc_main$3 = /* @__PURE__ */ vue.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 vue.openBlock(), vue.createBlock(_sfc_main$5, { title: __props.title }, {
+          buttons: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2$2, [
+              vue.createVNode(_sfc_main$w, {
+                caption: __props.noCaption,
+                class: "min-w-80",
+                "data-id": "noBtn",
+                onClick: clickNo
+              }, null, 8, ["caption"]),
+              vue.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: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              textContent: vue.toDisplayString(__props.message)
+            }, null, 8, _hoisted_1$3)
+          ]),
+          _: 1
+        }, 8, ["title"]);
+      };
+    }
+  });
+  const BSYesNoModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    default: _sfc_main$3
+  }, Symbol.toStringTag, { value: "Module" }));
   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"];
@@ -4419,7 +5136,7 @@
             })
           ]),
           vue.createElementVNode("div", _hoisted_5, [
-            vue.unref(tooltipEntry) ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+            vue.unref(tooltipEntry) ? (vue.openBlock(), vue.createBlock(_sfc_main$s, {
               key: 0,
               ref_key: "tooltip",
               ref: tooltip,
@@ -4486,7 +5203,7 @@
       return (_ctx, _cache) => {
         const _component_router_link = vue.resolveComponent("router-link");
         const _component_BSContextMenu = vue.resolveComponent("BSContextMenu", true);
-        return vue.openBlock(), vue.createBlock(_sfc_main$o, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$t, {
           ref: "root",
           "base-element": __props.baseElement || { left: __props.left || 0, top: __props.top || 0 },
           "popup-direction": __props.direction,
@@ -4585,45 +5302,74 @@
       };
     }
   });
-  exports2.BSButton = _sfc_main$r;
-  exports2.BSCalendar = _sfc_main$j;
-  exports2.BSCalendarRange = _sfc_main$i;
-  exports2.BSCardLayout = _sfc_main$3;
-  exports2.BSCheckbox = _sfc_main$d;
-  exports2.BSCheckboxGroup = _sfc_main$c;
+  class IllegalAccessError {
+  }
+  exports2.BSAlertModal = _sfc_main$4;
+  exports2.BSButton = _sfc_main$w;
+  exports2.BSCalendar = _sfc_main$o;
+  exports2.BSCalendarRange = _sfc_main$n;
+  exports2.BSCardLayout = _sfc_main$8;
+  exports2.BSCheckbox = _sfc_main$i;
+  exports2.BSCheckboxGroup = _sfc_main$h;
   exports2.BSContextMenu = _sfc_main$1;
   exports2.BSContextMenuContainer = _sfc_main;
   exports2.BSContextMenuPlugin = BSContextMenuPlugin;
-  exports2.BSDateInput = _sfc_main$7;
-  exports2.BSDateInputPopup = _sfc_main$8;
-  exports2.BSDateRange = _sfc_main$5;
-  exports2.BSDateRangeInputPopup = _sfc_main$6;
+  exports2.BSDateInput = _sfc_main$c;
+  exports2.BSDateInputPopup = _sfc_main$d;
+  exports2.BSDateRange = _sfc_main$a;
+  exports2.BSDateRangeInputPopup = _sfc_main$b;
   exports2.BSLoadingIcon = BSLoadingIcon;
-  exports2.BSMultiSelect = _sfc_main$9;
+  exports2.BSModal = BSModal;
+  exports2.BSModalContainer = _sfc_main$6;
+  exports2.BSModalFrame = _sfc_main$5;
+  exports2.BSMultiSelect = _sfc_main$e;
   exports2.BSNotificationContainer = _sfc_main$2;
-  exports2.BSNumberInput = _sfc_main$f;
-  exports2.BSPageNavigation = _sfc_main$q;
-  exports2.BSPopup = _sfc_main$o;
-  exports2.BSRadioButton = _sfc_main$b;
-  exports2.BSRadioButtonGroup = _sfc_main$a;
-  exports2.BSSelect = _sfc_main$k;
-  exports2.BSTextArea = _sfc_main$e;
-  exports2.BSTextInput = _sfc_main$g;
-  exports2.BSTooltip = _sfc_main$n;
+  exports2.BSNumberInput = _sfc_main$k;
+  exports2.BSPageNavigation = _sfc_main$v;
+  exports2.BSPopup = _sfc_main$t;
+  exports2.BSRadioButton = _sfc_main$g;
+  exports2.BSRadioButtonGroup = _sfc_main$f;
+  exports2.BSSelect = _sfc_main$p;
+  exports2.BSTextArea = _sfc_main$j;
+  exports2.BSTextInput = _sfc_main$l;
+  exports2.BSTooltip = _sfc_main$s;
+  exports2.BSYesNoModal = _sfc_main$3;
   exports2.BlueseaPlugin = BlueseaPlugin;
   exports2.ContextMenuPluginKey = ContextMenuPluginKey;
+  exports2.IllegalAccessError = IllegalAccessError;
+  exports2.NAMED_COLORS = NAMED_COLORS;
   exports2.SavePointImpl = SavePointImpl;
   exports2.alarmEntries = alarmEntries;
   exports2.cancelProvidedSavePoint = cancelProvidedSavePoint;
   exports2.closeAlarm = closeAlarm;
+  exports2.componentUtil = componentUtil;
   exports2.createContextMenuPlugin = createContextMenuPlugin;
+  exports2.createModalPlugin = createModalPlugin;
   exports2.debounce = debounce;
+  exports2.defaultKeyProvider = defaultKeyProvider;
+  exports2.defaultLabelProvider = defaultLabelProvider;
+  exports2.emptyKeyProvider = emptyKeyProvider;
+  exports2.emptyLabelProvider = emptyLabelProvider;
+  exports2.executeKeyProviderOrDefault = executeKeyProviderOrDefault;
+  exports2.executeLabelProviderOrDefault = executeLabelProviderOrDefault;
+  exports2.findElement = findElement;
+  exports2.findFirstFocusableElement = findFirstFocusableElement;
+  exports2.findInputComponents = findInputComponents;
+  exports2.findLastFocusableElement = findLastFocusableElement;
+  exports2.focusFirstElement = focusFirstElement;
+  exports2.focusLastElement = focusLastElement;
+  exports2.formatUtil = formatUtil;
+  exports2.getComponentRootElement = getComponentRootElement;
+  exports2.getSelfIndex = getSelfIndex;
   exports2.hideLoading = hideLoading;
   exports2.hideTooltip = hideTooltip;
   exports2.isTooltipDisplayed = isTooltipDisplayed;
+  exports2.modalHandleKey = modalHandleKey;
+  exports2.modalPluginKey = modalPluginKey;
   exports2.notNull = notNull;
   exports2.notificationEntries = notificationEntries;
   exports2.provideFieldContext = provideFieldContext;
+  exports2.provideModalHandle = provideModalHandle;
   exports2.provideSavePoint = provideSavePoint;
   exports2.showAlarm = showAlarm;
   exports2.showLoading = showLoading;
@@ -4632,11 +5378,15 @@
   exports2.showTooltip = showTooltip;
   exports2.tooltipEntry = tooltipEntry;
   exports2.tryUntil = tryUntil;
+  exports2.useBlueseaConfig = useBlueseaConfig;
   exports2.useContextMenu = useContextMenu;
   exports2.useContextMenuOptional = useContextMenuOptional;
   exports2.useFieldContext = useFieldContext;
+  exports2.useModal = useModal;
+  exports2.useModalHandle = useModalHandle;
   exports2.useSavePoint = useSavePoint;
   exports2.vClickOutside = vClickOutside;
+  exports2.vFocusLoop = VFocusLoop;
   exports2.vFocusOnLoad = vFocusOnLoad;
   exports2.vTooltip = vTooltip;
   exports2.waitDuring = waitDuring;