@g1cloud/open-bluesea-core 1.0.0-alpha.7 → 1.0.0-alpha.9

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

@@ -42,6 +42,110 @@
   const createContextMenuPlugin = () => {
     return new BSContextMenuPlugin();
   };
+  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();
+  };
   class BlueseaConfig {
     dateFormat = "YYYY-MM-DD HH:mm";
     dateFormatDay = "YYYY-MM-DD";
@@ -80,8 +184,10 @@
     install(app, options) {
       const config = new BlueseaConfig(options);
       app.provide(BlueseaConfigKey, config);
-      const contextMenu = new BSContextMenuPlugin();
+      const contextMenu = createContextMenuPlugin();
       app.provide(ContextMenuPluginKey, contextMenu);
+      const modal = createModalPlugin();
+      app.use(modal);
     }
   };
   const notificationEntries = vue.reactive([]);
@@ -196,14 +302,12 @@
       hideTooltip();
     }
   };
-  const _hoisted_1$u = ["textContent"];
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$v = ["textContent"];
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "BSButton",
     props: {
       caption: {},
       buttonColor: { default: "default" },
-      leftIcon: {},
-      rightIcon: {},
       disabled: { type: Boolean, default: false },
       linkUrl: {},
       linkTarget: {},
@@ -211,6 +315,9 @@
       tooltip: {}
     },
     setup(__props) {
+      const slots = vue.useSlots();
+      const hasLeftSlot = vue.computed(() => !!slots.left);
+      const hasRightSlot = vue.computed(() => !!slots.right);
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.linkUrl ? "a" : __props.routePath ? "router-link" : "button"), {
           class: vue.normalizeClass([[__props.buttonColor], "bs-button position-relative"]),
@@ -220,25 +327,118 @@
           to: __props.routePath
         }, {
           default: vue.withCtx(() => [
-            __props.leftIcon ? (vue.openBlock(), vue.createElementBlock("span", {
+            hasLeftSlot.value ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
-              class: vue.normalizeClass([{ "mr-1": !!__props.caption }, "font-icon left"])
-            }, vue.toDisplayString(__props.leftIcon), 3)) : vue.createCommentVNode("", true),
+              class: vue.normalizeClass([{ "mr-1": !!__props.caption }, "left"])
+            }, [
+              vue.renderSlot(_ctx.$slots, "left")
+            ], 2)) : vue.createCommentVNode("", true),
             vue.createElementVNode("span", {
               textContent: vue.toDisplayString(__props.caption)
-            }, null, 8, _hoisted_1$u),
-            __props.rightIcon ? (vue.openBlock(), vue.createElementBlock("span", {
+            }, null, 8, _hoisted_1$v),
+            hasRightSlot.value ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 1,
-              class: vue.normalizeClass([{ "ml-1": !!__props.caption }, "font-icon right"])
-            }, vue.toDisplayString(__props.rightIcon), 3)) : vue.createCommentVNode("", true)
+              class: vue.normalizeClass([{ "ml-1": !!__props.caption }, "right"])
+            }, [
+              vue.renderSlot(_ctx.$slots, "right")
+            ], 2)) : vue.createCommentVNode("", true)
           ]),
-          _: 1
+          _: 3
         }, 8, ["class", "disabled", "href", "target", "to"])), [
           [vue.unref(vTooltip), { content: __props.tooltip }]
         ]);
       };
     }
   });
+  const Add = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>';
+  const CalendarMonth = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z"/></svg>';
+  const Check = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41L9 16.17z"/></svg>';
+  const CheckBox = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
+  const CheckBoxOutlineBlank = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>';
+  const CheckCircle = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4l8-8z"/></svg>';
+  const Close = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"/></svg>';
+  const Cancel = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8zm3.59-13L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41z"/></svg>';
+  const DragHandle = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z"/></svg>';
+  const Edit = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>';
+  const ExpandMore = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17L7.41 8.59L6 10l6 6l6-6l-1.41-1.41z"/></svg>';
+  const KeyboardArrowLeft = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.41z"/></svg>';
+  const KeyboardArrowRight = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.41z"/></svg>';
+  const KeyboardDoubleArrowLeft = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.59 18L19 16.59L14.42 12L19 7.41L17.59 6l-6 6z"/><path d="M11 18l1.41-1.41L7.83 12l4.58-4.59L11 6l-6 6z"/></svg>';
+  const KeyboardDoubleArrowRight = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.41 6L5 7.41L9.58 12L5 16.59L6.41 18l6-6z"/><path d="M13 6l-1.41 1.41L16.17 12l-4.58 4.59L13 18l6-6z"/></svg>';
+  const Label = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16z"/></svg>';
+  const Maximize = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 11V3h-8l3.29 3.29l-10 10L3 13v8h8l-3.29-3.29l10-10z"/></svg>';
+  const Minimize = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 3.41L16.71 8.7L20 12h-8V4l3.29 3.29L20.59 2L22 3.41zM3.41 22l5.29-5.29L12 20v-8H4l3.29 3.29L2 20.59L3.41 22z"/></svg>';
+  const North = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 9l1.41 1.41L11 5.83V22h2V5.83l4.59 4.59L19 9l-7-7l-7 7z"/></svg>';
+  const Numbers = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.5 10l.5-2h-4l1-4h-2l-1 4h-4l1-4h-2L9 8H5l-.5 2h4l-1 4h-4L3 16h4l-1 4h2l1-4h4l-1 4h2l1-4h4l.5-2h-4l1-4h4zm-7 4h-4l1-4h4l-1 4z"/></svg>';
+  const ProgressActivity = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 6v3l4-4l-4-4v3c-4.42 0-8 3.58-8 8c0 1.57.46 3.03 1.24 4.26L6.7 14.8A5.87 5.87 0 0 1 6 12c0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8c0 3.31-2.69 6-6 6v-3l-4 4l4 4v-3c4.42 0 8-3.58 8-8c0-1.57-.46-3.03-1.24-4.26z"/></svg>';
+  const RadioButtonChecked = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"/></svg>';
+  const RadioButtonUnchecked = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"/></svg>';
+  const Remove = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>';
+  const Replay = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6s-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8z"/></svg>';
+  const South = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 15l-1.41-1.41L13 18.17V2h-2v16.17l-4.59-4.59L5 15l7 7l7-7z"/></svg>';
+  const Straight = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 6.83L9.41 8.41L8 7l4-4l4 4l-1.41 1.41L13 6.83V21h-2z"/></svg>';
+  const SwapVert = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"/></svg>';
+  const iconRegistry = {
+    add: Add,
+    calendar_month: CalendarMonth,
+    check: Check,
+    check_box: CheckBox,
+    check_box_outline_blank: CheckBoxOutlineBlank,
+    check_circle: CheckCircle,
+    close: Close,
+    cancel: Cancel,
+    drag_handle: DragHandle,
+    edit: Edit,
+    expand_more: ExpandMore,
+    keyboard_arrow_left: KeyboardArrowLeft,
+    keyboard_arrow_right: KeyboardArrowRight,
+    keyboard_double_arrow_left: KeyboardDoubleArrowLeft,
+    keyboard_double_arrow_right: KeyboardDoubleArrowRight,
+    label: Label,
+    maximize: Maximize,
+    minimize: Minimize,
+    north: North,
+    numbers: Numbers,
+    progress_activity: ProgressActivity,
+    radio_button_checked: RadioButtonChecked,
+    radio_button_unchecked: RadioButtonUnchecked,
+    remove: Remove,
+    replay: Replay,
+    south: South,
+    straight: Straight,
+    swap_vert: SwapVert
+  };
+  const registerIcon = (name, svg) => {
+    iconRegistry[name] = svg;
+  };
+  const registerIcons = (icons2) => {
+    Object.entries(icons2).forEach(([name, svg]) => {
+      iconRegistry[name] = svg;
+    });
+  };
+  const getIcon = (name) => {
+    return iconRegistry[name];
+  };
+  const _hoisted_1$u = ["innerHTML"];
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+    __name: "BSIcon",
+    props: {
+      name: {},
+      spin: { type: Boolean, default: false }
+    },
+    setup(__props) {
+      const props = __props;
+      const svgContent = vue.computed(() => {
+        return getIcon(props.name) || "";
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("span", {
+          class: vue.normalizeClass(["bs-icon", { spin: __props.spin }]),
+          innerHTML: svgContent.value
+        }, null, 10, _hoisted_1$u);
+      };
+    }
+  });
   const _hoisted_1$t = { class: "page-navigation" };
   const _hoisted_2$o = ["data-page", "onClick"];
   const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
@@ -303,13 +503,17 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
           vue.createElementVNode("span", {
-            class: vue.normalizeClass([{ "disabled": isFirstSet.value }, "font-icon first"]),
+            class: vue.normalizeClass([{ "disabled": isFirstSet.value }, "nav-icon first"]),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => !isFirstSet.value && goToPage(1), ["prevent"]))
-          }, "keyboard_double_arrow_left", 2),
+          }, [
+            vue.createVNode(_sfc_main$w, { name: "keyboard_double_arrow_left" })
+          ], 2),
           vue.createElementVNode("span", {
-            class: vue.normalizeClass([{ "disabled": isFirstSet.value }, "font-icon prev"]),
+            class: vue.normalizeClass([{ "disabled": isFirstSet.value }, "nav-icon prev"]),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => !isFirstSet.value && goToPage(prevArrowPage.value), ["prevent"]))
-          }, "keyboard_arrow_left", 2),
+          }, [
+            vue.createVNode(_sfc_main$w, { name: "keyboard_arrow_left" })
+          ], 2),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visiblePages.value, (page) => {
             return vue.openBlock(), vue.createElementBlock("span", {
               key: page,
@@ -319,32 +523,35 @@
             }, vue.toDisplayString(page), 11, _hoisted_2$o);
           }), 128)),
           vue.createElementVNode("span", {
-            class: vue.normalizeClass([{ "disabled": isLastSet.value }, "font-icon next"]),
+            class: vue.normalizeClass([{ "disabled": isLastSet.value }, "nav-icon next"]),
             onClick: _cache[2] || (_cache[2] = vue.withModifiers(($event) => !isLastSet.value && goToPage(nextArrowPage.value), ["prevent"]))
-          }, "keyboard_arrow_right", 2),
+          }, [
+            vue.createVNode(_sfc_main$w, { name: "keyboard_arrow_right" })
+          ], 2),
           vue.createElementVNode("span", {
-            class: vue.normalizeClass([{ "disabled": isLastSet.value }, "font-icon last"]),
+            class: vue.normalizeClass([{ "disabled": isLastSet.value }, "nav-icon last"]),
             onClick: _cache[3] || (_cache[3] = vue.withModifiers(($event) => !isLastSet.value && goToPage(totalPage.value), ["prevent"]))
-          }, "keyboard_double_arrow_right", 2)
+          }, [
+            vue.createVNode(_sfc_main$w, { name: "keyboard_double_arrow_right" })
+          ], 2)
         ]);
       };
     }
   });
-  const _export_sfc = (sfc, props) => {
-    const target = sfc.__vccOpts || sfc;
-    for (const [key, val] of props) {
-      target[key] = val;
-    }
-    return target;
-  };
-  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$s, [..._cache[0] || (_cache[0] = [
-      vue.createElementVNode("span", { class: "font-icon" }, "progress_activity", -1)
-    ])]);
-  }
-  const BSLoadingIcon = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render]]);
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+    __name: "BSLoadingIcon",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+          vue.createVNode(_sfc_main$w, {
+            name: "progress_activity",
+            spin: ""
+          })
+        ]);
+      };
+    }
+  });
   const waitUntil = async (condition, intervalMilliseconds = 200, maxTrial = 15) => {
     return await new Promise((resolve) => {
       let tried = 0;
@@ -643,8 +850,9 @@
     class: "popup-search"
   };
   const _hoisted_2$n = ["data-value", "onMouseover", "onClick"];
-  const _hoisted_3$h = ["textContent"];
-  const _hoisted_4$b = ["textContent"];
+  const _hoisted_3$g = { class: "checkbox" };
+  const _hoisted_4$c = ["textContent"];
+  const _hoisted_5$6 = ["textContent"];
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "BSSelectPopup",
     props: {
@@ -826,16 +1034,21 @@
                   onMouseover: ($event) => setHoveredPopupItem(item?.original),
                   onClick: vue.withModifiers(($event) => selectPopupItem(item?.original), ["stop"])
                 }, [
-                  _cache[3] || (_cache[3] = vue.createElementVNode("span", { class: "checkbox" }, null, -1)),
+                  vue.createElementVNode("span", _hoisted_3$g, [
+                    item !== void 0 && __props.selectedItems?.includes(item?.original) ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                      key: 0,
+                      name: "check"
+                    })) : vue.createCommentVNode("", true)
+                  ]),
                   item !== void 0 ? (vue.openBlock(), vue.createElementBlock("label", {
                     key: 0,
                     textContent: vue.toDisplayString(item?.label),
                     class: "label"
-                  }, null, 8, _hoisted_3$h)) : (vue.openBlock(), vue.createElementBlock("label", {
+                  }, null, 8, _hoisted_4$c)) : (vue.openBlock(), vue.createElementBlock("label", {
                     key: 1,
                     textContent: vue.toDisplayString(__props.nullLabel),
                     class: "label null-label"
-                  }, null, 8, _hoisted_4$b))
+                  }, null, 8, _hoisted_5$6))
                 ], 42, _hoisted_2$n);
               }), 128))
             ], 512)
@@ -1241,13 +1454,9 @@
   };
   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_3$f = ["data-field-name"];
+  const _hoisted_4$b = ["textContent"];
   const _hoisted_5$5 = ["textContent"];
-  const _hoisted_6$2 = {
-    key: 2,
-    class: "small-progress"
-  };
   const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "BSSelect",
     props: {
@@ -1395,14 +1604,22 @@
                 key: 0,
                 textContent: vue.toDisplayString(__props.placeholder),
                 class: "placeholder grow"
-              }, null, 8, _hoisted_4$a)) : (vue.openBlock(), vue.createElementBlock("span", {
+              }, null, 8, _hoisted_4$b)) : (vue.openBlock(), vue.createElementBlock("span", {
                 key: 1,
                 textContent: vue.toDisplayString(selectedItemLabel.value),
                 class: "label"
               }, 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$g),
+              vue.createVNode(_sfc_main$w, {
+                name: "expand_more",
+                class: "dropdown-btn"
+              }),
+              loadingItems.value ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                key: 2,
+                name: "progress_activity",
+                class: "small-progress",
+                spin: ""
+              })) : vue.createCommentVNode("", true)
+            ], 8, _hoisted_3$f),
             !__props.disabled && showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
               key: 0,
               ref_key: "selectPopup",
@@ -1439,8 +1656,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 = {
+  const _hoisted_3$e = { class: "year-month" };
+  const _hoisted_4$a = {
     key: 0,
     class: "timezone"
   };
@@ -1643,11 +1860,15 @@
       return (_ctx, _cache) => {
         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",
+            vue.createElementVNode("div", _hoisted_3$e, [
+              vue.createVNode(_sfc_main$x, {
+                class: "min-w-[2em]",
                 onClick: prevMonth
+              }, {
+                left: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$w, { name: "chevron_left" })
+                ]),
+                _: 1
               }),
               vue.createVNode(_sfc_main$p, {
                 modelValue: year.value,
@@ -1661,13 +1882,17 @@
                 disabled: __props.disabled,
                 items: vue.unref(months)
               }, null, 8, ["modelValue", "disabled", "items"]),
-              vue.createVNode(_sfc_main$w, {
-                class: "",
-                "left-icon": "chevron_right",
+              vue.createVNode(_sfc_main$x, {
+                class: "min-w-[2em]",
                 onClick: nextMonth
+              }, {
+                left: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$w, { name: "chevron_right" })
+                ]),
+                _: 1
               })
             ]),
-            __props.showTimeZone ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$9, "(" + vue.toDisplayString(actualTimeZone.value) + ")", 1)) : vue.createCommentVNode("", true)
+            __props.showTimeZone ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$a, "(" + vue.toDisplayString(actualTimeZone.value) + ")", 1)) : vue.createCommentVNode("", true)
           ]),
           vue.createElementVNode("table", {
             class: vue.normalizeClass([{ disabled: __props.disabled }, "align-self-center"])
@@ -1728,7 +1953,7 @@
   });
   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 _hoisted_3$d = { class: "flex flex-row items-center" };
   const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     __name: "BSCalendarRange",
     props: {
@@ -1769,7 +1994,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createElementVNode("div", _hoisted_2$j, [
-            vue.createElementVNode("div", _hoisted_3$e, [
+            vue.createElementVNode("div", _hoisted_3$d, [
               vue.createVNode(_sfc_main$o, {
                 modelValue: fromValue.value,
                 "onUpdate:modelValue": [
@@ -1868,8 +2093,7 @@
     }
   };
   const _hoisted_1$k = ["textContent"];
-  const _hoisted_2$i = { class: "font-icon" };
-  const _hoisted_3$d = ["src", "alt"];
+  const _hoisted_2$i = ["src", "alt"];
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "BSPrefixSuffix",
     props: {
@@ -1886,11 +2110,13 @@
               textContent: vue.toDisplayString(item.value),
               key: JSON.stringify(item.value),
               class: vue.normalizeClass(__props.type)
-            }, null, 10, _hoisted_1$k)) : item.type === "font-icon" ? (vue.openBlock(), vue.createElementBlock("span", {
+            }, null, 10, _hoisted_1$k)) : item.type === "icon" ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 1,
               class: vue.normalizeClass(__props.type)
             }, [
-              vue.createElementVNode("span", _hoisted_2$i, vue.toDisplayString(item.value), 1)
+              vue.createVNode(_sfc_main$w, {
+                name: item.value
+              }, null, 8, ["name"])
             ], 2)) : item.type === "image-url" ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 2,
               class: vue.normalizeClass(__props.type)
@@ -1898,7 +2124,7 @@
               vue.createElementVNode("img", {
                 src: item.value,
                 alt: __props.type
-              }, null, 8, _hoisted_3$d)
+              }, null, 8, _hoisted_2$i)
             ], 2)) : vue.createCommentVNode("", true)
           ], 64);
         }), 256);
@@ -1914,7 +2140,7 @@
     key: 1,
     class: "input-area"
   };
-  const _hoisted_4$8 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "type"];
+  const _hoisted_4$9 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "type"];
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "BSTextInput",
     props: {
@@ -2068,7 +2294,7 @@
               name: __props.name,
               tabindex: __props.tabindex,
               type: __props.inputType
-            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$8), [
+            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$9), [
               [vue.vModelDynamic, vue.unref(stringValue)]
             ]),
             vue.createVNode(_sfc_main$m, {
@@ -2367,7 +2593,7 @@
     key: 1,
     class: "input-area"
   };
-  const _hoisted_4$7 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
+  const _hoisted_4$8 = ["id", "placeholder", "autocomplete", "disabled", "maxlength", "name", "tabindex", "value"];
   const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "BSNumberInput",
     props: {
@@ -2529,7 +2755,7 @@
               tabindex: __props.tabindex,
               value: focused.value || !__props.formatOnBlur ? vue.unref(stringValue) : formattedStringValue.value,
               type: "text"
-            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$7),
+            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$8),
             vue.createVNode(_sfc_main$m, {
               value: __props.suffix,
               type: "suffix"
@@ -2553,7 +2779,7 @@
     key: 1,
     class: "input-area flex flex-row items-start"
   };
-  const _hoisted_4$6 = ["placeholder", "disabled", "maxlength", "name", "tabindex"];
+  const _hoisted_4$7 = ["placeholder", "disabled", "maxlength", "name", "tabindex"];
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "BSTextArea",
     props: {
@@ -2699,7 +2925,7 @@
               class: "grow",
               onPointerdown: capturePointer,
               onPointerup: preserveResizedHeight
-            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$6), [
+            }, vue.toHandlers(handlers, true)), null, 16, _hoisted_4$7), [
               [vue.vModelText, vue.unref(stringValue)]
             ]),
             vue.createVNode(_sfc_main$m, {
@@ -2717,8 +2943,9 @@
     }
   });
   const _hoisted_1$g = ["id", "checked", "disabled", "name", "tabindex"];
-  const _hoisted_2$e = ["textContent", "for"];
-  const _hoisted_3$9 = ["for"];
+  const _hoisted_2$e = ["for"];
+  const _hoisted_3$9 = ["textContent", "for"];
+  const _hoisted_4$6 = ["for"];
   const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "BSCheckbox",
     props: {
@@ -2776,19 +3003,27 @@
             class: "",
             type: "checkbox"
           }, vue.toHandlers(handlers, true)), null, 16, _hoisted_1$g),
+          vue.createElementVNode("label", {
+            for: __props.id,
+            class: "icon-label"
+          }, [
+            vue.createVNode(_sfc_main$w, {
+              name: checked.value ? "check_box" : "check_box_outline_blank"
+            }, null, 8, ["name"])
+          ], 8, _hoisted_2$e),
           __props.label ? (vue.openBlock(), vue.createElementBlock("label", {
             key: 0,
             textContent: vue.toDisplayString(__props.label),
             for: __props.id,
             class: "text-label"
-          }, null, 8, _hoisted_2$e)) : vue.createCommentVNode("", true),
+          }, null, 8, _hoisted_3$9)) : 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$9)) : vue.createCommentVNode("", true)
+          ], 8, _hoisted_4$6)) : vue.createCommentVNode("", true)
         ], 2);
       };
     }
@@ -2931,10 +3166,7 @@
   });
   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_3$7 = ["for"];
   const _hoisted_4$5 = ["textContent"];
   const _hoisted_5$3 = ["for"];
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
@@ -2981,14 +3213,25 @@
             role: "radio",
             type: "radio"
           }, vue.toHandlers(handlers, true)), null, 16, _hoisted_1$e),
+          vue.createElementVNode("label", {
+            for: __props.id,
+            class: "icon-label"
+          }, [
+            vue.createVNode(_sfc_main$w, {
+              name: checked.value ? "radio_button_checked" : "radio_button_unchecked"
+            }, null, 8, ["name"])
+          ], 8, _hoisted_2$c),
           vue.createElementVNode("label", { for: __props.id }, [
-            __props.icon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$7, vue.toDisplayString(__props.icon), 1)) : vue.createCommentVNode("", true),
+            __props.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+              key: 0,
+              name: __props.icon
+            }, null, 8, ["name"])) : vue.createCommentVNode("", true),
             __props.label ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 1,
               textContent: vue.toDisplayString(__props.label),
               class: "text-label"
             }, null, 8, _hoisted_4$5)) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_2$c),
+          ], 8, _hoisted_3$7),
           hasLabelSlot.value ? (vue.openBlock(), vue.createElementBlock("label", {
             key: 0,
             for: __props.id,
@@ -3128,10 +3371,6 @@
   };
   const _hoisted_8 = ["textContent"];
   const _hoisted_9 = ["textContent"];
-  const _hoisted_10 = {
-    key: 2,
-    class: "small-progress"
-  };
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "BSMultiSelect",
     props: {
@@ -3292,8 +3531,16 @@
                   }, null, 8, _hoisted_9);
                 }), 128))
               ])),
-              _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)
+              vue.createVNode(_sfc_main$w, {
+                name: "expand_more",
+                class: "dropdown-btn"
+              }),
+              loadingItems.value ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                key: 2,
+                name: "progress_activity",
+                class: "small-progress",
+                spin: ""
+              })) : vue.createCommentVNode("", true)
             ], 8, _hoisted_5$2),
             !__props.disabled && showPopup.value ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
               key: 0,
@@ -3434,13 +3681,13 @@
                 "time-zone": __props.timeZone
               }, null, 8, ["modelValue", "display-format", "end-year", "resolution", "start-year", "time-zone"]),
               vue.createElementVNode("div", _hoisted_2$9, [
-                vue.createVNode(_sfc_main$w, {
+                vue.createVNode(_sfc_main$x, {
                   caption: __props.okButtonCaption,
                   "button-color": "blue",
                   class: "min-w-80",
                   onClick: emitValue
                 }, null, 8, ["caption"]),
-                vue.createVNode(_sfc_main$w, {
+                vue.createVNode(_sfc_main$x, {
                   caption: __props.cancelButtonCaption,
                   class: "min-w-80",
                   onClick: close
@@ -3672,10 +3919,11 @@
           __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$8, [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass([{ "bs-clickable": !__props.disabled }, "font-icon"]),
+            vue.createVNode(_sfc_main$w, {
+              name: "calendar_month",
+              class: vue.normalizeClass({ "bs-clickable": !__props.disabled }),
               onClick: _cache[0] || (_cache[0] = ($event) => togglePopup())
-            }, " calendar_month ", 2),
+            }, null, 8, ["class"]),
             vue.createElementVNode("input", vue.mergeProps({
               id: __props.id,
               ref_key: "field",
@@ -3772,13 +4020,13 @@
                 "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$7, [
-                vue.createVNode(_sfc_main$w, {
+                vue.createVNode(_sfc_main$x, {
                   caption: __props.okButtonCaption,
                   "button-color": "blue",
                   class: "min-w-80",
                   onClick: emitValue
                 }, null, 8, ["caption"]),
-                vue.createVNode(_sfc_main$w, {
+                vue.createVNode(_sfc_main$x, {
                   caption: __props.cancelButtonCaption,
                   class: "min-w-80",
                   onClick: close
@@ -4182,10 +4430,11 @@
           __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$6, [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass([{ "bs-clickable": !disabled.value }, "font-icon"]),
+            vue.createVNode(_sfc_main$w, {
+              name: "calendar_month",
+              class: vue.normalizeClass({ "bs-clickable": !disabled.value }),
               onClick: _cache[0] || (_cache[0] = () => togglePopup())
-            }, " calendar_month ", 2),
+            }, null, 8, ["class"]),
             vue.createElementVNode("input", vue.mergeProps({
               id: __props.idFrom,
               ref_key: "fieldFrom",
@@ -4325,10 +4574,11 @@
           class: vue.normalizeClass([{ expanded: expanded.value }, "bs-card-layout"])
         }, [
           !__props.hideTitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
-            vue.createElementVNode("span", {
-              class: "expand-btn font-icon bs-clickable",
+            vue.createVNode(_sfc_main$w, {
+              name: "label",
+              class: "expand-btn bs-clickable",
               onClick: toggleExpand
-            }, "label"),
+            }),
             vue.createElementVNode("div", {
               textContent: vue.toDisplayString(__props.title),
               class: "card-layout-title"
@@ -4354,110 +4604,6 @@
       };
     }
   });
-  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: {
@@ -4941,20 +5087,30 @@
               vue.renderSlot(_ctx.$slots, "title-buttons")
             ]),
             vue.createElementVNode("div", null, [
-              !__props.hideMaximizeButton ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+              !__props.hideMaximizeButton ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
                 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, {
+              }, {
+                left: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$w, {
+                    name: vue.unref(modalHandle).maximized ? "minimize" : "maximize"
+                  }, null, 8, ["name"])
+                ]),
+                _: 1
+              }, 8, ["title"])) : vue.createCommentVNode("", true),
+              !__props.hideCloseButton ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
                 key: 1,
                 title: __props.closeCaption,
                 class: "border-0 close-btn",
-                "left-icon": "close",
                 onClick: closeModal
-              }, null, 8, ["title"])) : vue.createCommentVNode("", true)
+              }, {
+                left: vue.withCtx(() => [
+                  vue.createVNode(_sfc_main$w, { name: "close" })
+                ]),
+                _: 1
+              }, 8, ["title"])) : vue.createCommentVNode("", true)
             ])
           ])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
@@ -5006,7 +5162,7 @@
         }, {
           buttons: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_2$3, [
-              vue.withDirectives(vue.createVNode(_sfc_main$w, {
+              vue.withDirectives(vue.createVNode(_sfc_main$x, {
                 caption: __props.okCaption,
                 "button-color": "blue",
                 class: "min-w-80",
@@ -5061,13 +5217,13 @@
         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, {
+              vue.createVNode(_sfc_main$x, {
                 caption: __props.noCaption,
                 class: "min-w-80",
                 "data-id": "noBtn",
                 onClick: clickNo
               }, null, 8, ["caption"]),
-              vue.createVNode(_sfc_main$w, {
+              vue.createVNode(_sfc_main$x, {
                 caption: __props.yesCaption,
                 "button-color": "blue",
                 class: "ml-8 min-w-80",
@@ -5113,9 +5269,16 @@
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(notificationEntries), (entry) => {
                   return vue.openBlock(), vue.createElementBlock("div", {
                     key: entry.entryId,
-                    textContent: vue.toDisplayString(entry.message),
                     class: vue.normalizeClass(entry.style)
-                  }, null, 10, _hoisted_3$1);
+                  }, [
+                    vue.createVNode(_sfc_main$w, {
+                      name: entry.style === "error" ? "cancel" : "check_circle",
+                      class: "notification-icon"
+                    }, null, 8, ["name"]),
+                    vue.createElementVNode("span", {
+                      textContent: vue.toDisplayString(entry.message)
+                    }, null, 8, _hoisted_3$1)
+                  ], 2);
                 }), 128))
               ]),
               _: 1
@@ -5146,7 +5309,7 @@
               onMouseover: _cache[1] || (_cache[1] = ($event) => setCursorInTooltip(true, $event))
             }, null, 8, ["content", "target"])) : vue.createCommentVNode("", true)
           ]),
-          vue.unref(showLoadingIcon) ? (vue.openBlock(), vue.createBlock(BSLoadingIcon, { key: 0 })) : vue.createCommentVNode("", true)
+          vue.unref(showLoadingIcon) ? (vue.openBlock(), vue.createBlock(_sfc_main$u, { key: 0 })) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -5305,7 +5468,7 @@
   class IllegalAccessError {
   }
   exports2.BSAlertModal = _sfc_main$4;
-  exports2.BSButton = _sfc_main$w;
+  exports2.BSButton = _sfc_main$x;
   exports2.BSCalendar = _sfc_main$o;
   exports2.BSCalendarRange = _sfc_main$n;
   exports2.BSCardLayout = _sfc_main$8;
@@ -5318,7 +5481,8 @@
   exports2.BSDateInputPopup = _sfc_main$d;
   exports2.BSDateRange = _sfc_main$a;
   exports2.BSDateRangeInputPopup = _sfc_main$b;
-  exports2.BSLoadingIcon = BSLoadingIcon;
+  exports2.BSIcon = _sfc_main$w;
+  exports2.BSLoadingIcon = _sfc_main$u;
   exports2.BSModal = BSModal;
   exports2.BSModalContainer = _sfc_main$6;
   exports2.BSModalFrame = _sfc_main$5;
@@ -5360,6 +5524,7 @@
   exports2.focusLastElement = focusLastElement;
   exports2.formatUtil = formatUtil;
   exports2.getComponentRootElement = getComponentRootElement;
+  exports2.getIcon = getIcon;
   exports2.getSelfIndex = getSelfIndex;
   exports2.hideLoading = hideLoading;
   exports2.hideTooltip = hideTooltip;
@@ -5371,6 +5536,8 @@
   exports2.provideFieldContext = provideFieldContext;
   exports2.provideModalHandle = provideModalHandle;
   exports2.provideSavePoint = provideSavePoint;
+  exports2.registerIcon = registerIcon;
+  exports2.registerIcons = registerIcons;
   exports2.showAlarm = showAlarm;
   exports2.showLoading = showLoading;
   exports2.showLoadingIcon = showLoadingIcon;