@amirjalili1374/ui-kit 1.3.33 → 1.4.0

package/dist/ui-kit.es.js

@@ -1,9 +1,13 @@
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key2, value2) => key2 in obj ? __defProp2(obj, key2, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key2] = value2;
+var __publicField = (obj, key2, value2) => __defNormalProp2(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value2);
 import { capitalize, reactive, watchEffect, toRef, shallowRef, Fragment, camelize, isVNode, Comment, unref, warn, getCurrentInstance as getCurrentInstance$1, ref, computed, provide, inject, defineComponent as defineComponent$1, h, createElementVNode, normalizeStyle, normalizeClass, toValue, resolveDynamicComponent, nextTick, onScopeDispose, createVNode, mergeProps, toRefs, Text, isRef, TransitionGroup, Transition, watch, onBeforeMount, onBeforeUnmount, withDirectives, vShow, toDisplayString, effectScope, toRaw, readonly, createBlock, openBlock, withCtx, createCommentVNode, useId, onMounted, onUpdated, Teleport, createTextVNode, createElementBlock, renderSlot, onDeactivated, cloneVNode, renderList, createSlots, normalizeProps, guardReactiveProps, resolveComponent, onActivated, onBeforeUpdate, withModifiers, vModelText, withKeys, onUnmounted } from "vue";
 import { IconHome, IconArrowBadgeLeft, IconChevronDown, IconChevronRight, IconMinus, IconPlus, IconRefresh, IconChevronLeft, IconDownload, IconPrinter, IconMaximize, IconMinimize, IconX, IconFileText, IconCheck, IconPencil, IconClock, IconMenu2, IconPalette } from "@tabler/icons-vue";
 import axios from "axios";
 import { useDebounceFn } from "@vueuse/core";
 import { useRouter as useRouter$1 } from "vue-router";
 import { defineStore } from "pinia";
+import VueKeycloakJs from "@dsb-norge/vue-keycloak-js";
 function propsFactory(props, source) {
   return (defaults) => {
     return Object.keys(props).reduce((obj, prop) => {
@@ -38252,7 +38256,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent$1({
                   default: withCtx(() => [
                     item.icon ? (openBlock(), createBlock(resolveDynamicComponent(item.icon), {
                       key: 0,
-                      class: "mr-2",
+                      class: "ml-2",
                       size: "18"
                     })) : createCommentVNode("", true),
                     createElementVNode("span", null, toDisplayString(item.title), 1),
@@ -38386,7 +38390,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent$1({
     };
   }
 });
-const AppHeader = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__scopeId", "data-v-60197e34"]]);
+const AppHeader = /* @__PURE__ */ _export_sfc$1(_sfc_main$1, [["__scopeId", "data-v-9b94743b"]]);
 const makeVAppProps = propsFactory({
   ...makeComponentProps(),
   ...omit(makeLayoutProps(), ["fullHeight"]),
@@ -39054,6 +39058,342 @@ function handleResponse(response) {
     return data2;
   });
 }
+function setupKeycloak(app, options) {
+  const {
+    config,
+    init = {
+      flow: "standard",
+      checkLoginIframe: false,
+      onLoad: "login-required",
+      pkceMethod: "S256"
+    },
+    logout = {
+      redirectUri: window.location.origin
+    },
+    callbacks = {},
+    exposeGlobally = true
+  } = options;
+  const pluginOptions = {
+    config,
+    init,
+    logout,
+    onAuthLogout: callbacks.onAuthLogout || (() => {
+      if (init.enableLogging) {
+        console.log("User logged out from Keycloak");
+      }
+    }),
+    onReady: (keycloakInstance) => {
+      var _a;
+      if (exposeGlobally) {
+        window.$keycloak = keycloakInstance;
+        if (init.enableLogging) {
+          console.log("Keycloak ready, instance exposed globally");
+        }
+      }
+      (_a = callbacks.onReady) == null ? void 0 : _a.call(callbacks, keycloakInstance);
+    },
+    onInitError: (error) => {
+      var _a;
+      if (init.enableLogging !== false) {
+        console.error("Keycloak initialization error:", error);
+      }
+      (_a = callbacks.onInitError) == null ? void 0 : _a.call(callbacks, error);
+    }
+  };
+  if (callbacks.onAuthSuccess) {
+    pluginOptions.onAuthSuccess = callbacks.onAuthSuccess;
+  }
+  if (callbacks.onAuthError) {
+    pluginOptions.onAuthError = callbacks.onAuthError;
+  }
+  return app.use(VueKeycloakJs, pluginOptions);
+}
+class AuthModeInitializer {
+  constructor(config) {
+    __publicField(this, "config");
+    this.config = config;
+  }
+  /**
+   * Check if this initializer should handle the given mode
+   */
+  canHandle(mode) {
+    return this.getMode() === mode;
+  }
+  /**
+   * Handle errors during initialization
+   */
+  handleError(error) {
+    if (this.config.onError) {
+      this.config.onError(error);
+    } else {
+      console.error(`[${this.getMode()}] Initialization error:`, error);
+    }
+  }
+  /**
+   * Handle successful initialization
+   */
+  handleSuccess() {
+    if (this.config.onSuccess) {
+      this.config.onSuccess();
+    }
+  }
+}
+class KeycloakInitializer extends AuthModeInitializer {
+  constructor(app, config) {
+    super(config);
+    __publicField(this, "app");
+    __publicField(this, "keycloakOptions");
+    this.app = app;
+    this.keycloakOptions = config.keycloakOptions;
+  }
+  getMode() {
+    return "keycloak";
+  }
+  async initialize() {
+    try {
+      console.log("🔐 Initializing Keycloak authentication...");
+      setupKeycloak(this.app, this.keycloakOptions);
+      console.log("✅ Keycloak initialized successfully");
+      this.handleSuccess();
+    } catch (error) {
+      this.handleError(error);
+      throw error;
+    }
+  }
+}
+class JwtInitializer extends AuthModeInitializer {
+  constructor(config) {
+    super(config);
+  }
+  get jwtConfig() {
+    return this.config;
+  }
+  getMode() {
+    return "jwt";
+  }
+  async initialize() {
+    var _a, _b;
+    try {
+      console.log("🔐 Initializing JWT authentication...");
+      const response = await this.jwtConfig.getUserInfo();
+      if (response == null ? void 0 : response.data) {
+        this.jwtConfig.setUser(response.data);
+        if (this.jwtConfig.setUserInStorage) {
+          this.jwtConfig.setUserInStorage(response.data);
+        }
+        console.log("✅ JWT authentication initialized successfully");
+        this.handleSuccess();
+      } else {
+        throw new Error("No user data received from getUserInfo");
+      }
+    } catch (error) {
+      if (((_a = error == null ? void 0 : error.response) == null ? void 0 : _a.status) === 401) {
+        console.log("ℹ️ User not authenticated (401), continuing...");
+        this.handleSuccess();
+        return;
+      }
+      if (((_b = error == null ? void 0 : error.response) == null ? void 0 : _b.status) !== 401) {
+        console.warn("⚠️ getUserInfo API call failed:", (error == null ? void 0 : error.message) ?? error);
+      }
+      this.handleError(error);
+    }
+  }
+}
+class InitializerModeInitializer extends AuthModeInitializer {
+  constructor(app, config) {
+    super(config);
+    __publicField(this, "app");
+    this.app = app;
+  }
+  get initializerConfig() {
+    return this.config;
+  }
+  getMode() {
+    return this.initializerConfig.mode;
+  }
+  async initialize() {
+    try {
+      console.log("📱 Initializing app via AppInitializer...");
+      const initPromise = this.initializerConfig.appInitializer.initializeApp();
+      if (this.initializerConfig.setLoading) {
+        this.initializerConfig.setLoading(true);
+      }
+      try {
+        await this.initializerConfig.appInitializer.startInitialization();
+        await initPromise;
+        console.log("✅ App initialization completed successfully");
+        if (this.initializerConfig.mode === "dev") {
+          console.log("🔧 Dev mode: forcing loading false");
+          if (this.initializerConfig.setLoading) {
+            this.initializerConfig.setLoading(false);
+            setTimeout(() => {
+              if (this.initializerConfig.setLoading) {
+                this.initializerConfig.setLoading(false);
+              }
+            }, 100);
+          }
+        }
+        this.handleSuccess();
+      } catch (error) {
+        console.error("❌ App initialization failed:", error);
+        if (this.initializerConfig.redirectToLogin) {
+          const currentPath = this.initializerConfig.currentRoutePath || "";
+          const loginPath = this.initializerConfig.loginRoutePath || "/auth/login";
+          if (currentPath !== loginPath) {
+            await this.initializerConfig.redirectToLogin();
+          }
+        }
+        this.handleError(error);
+        throw error;
+      } finally {
+        if (this.initializerConfig.setLoading) {
+          this.initializerConfig.setLoading(false);
+        }
+      }
+    } catch (error) {
+      this.handleError(error);
+      throw error;
+    }
+  }
+}
+class AppBootstrap {
+  constructor(config) {
+    __publicField(this, "app");
+    __publicField(this, "authMode");
+    __publicField(this, "authConfig");
+    __publicField(this, "plugins");
+    __publicField(this, "directives");
+    __publicField(this, "components");
+    __publicField(this, "onBootstrapStart");
+    __publicField(this, "onBootstrapComplete");
+    __publicField(this, "onBootstrapError");
+    this.app = config.app;
+    this.authMode = config.authMode;
+    this.authConfig = config.authConfig;
+    this.plugins = config.plugins;
+    this.directives = config.directives;
+    this.components = config.components;
+    this.onBootstrapStart = config.onBootstrapStart;
+    this.onBootstrapComplete = config.onBootstrapComplete;
+    this.onBootstrapError = config.onBootstrapError;
+  }
+  /**
+   * Start the bootstrap process
+   */
+  async bootstrap() {
+    var _a, _b, _c;
+    try {
+      (_a = this.onBootstrapStart) == null ? void 0 : _a.call(this);
+      console.log("🚀 Bootstrap starting with authMode:", this.authMode);
+      await this.initializeAuth();
+      this.registerPlugins();
+      this.registerDirectives();
+      this.registerComponents();
+      this.mountApp();
+      (_b = this.onBootstrapComplete) == null ? void 0 : _b.call(this);
+      console.log("✅ Bootstrap completed successfully");
+    } catch (error) {
+      console.error("❌ Bootstrap error:", error);
+      (_c = this.onBootstrapError) == null ? void 0 : _c.call(this, error);
+      throw error;
+    }
+  }
+  /**
+   * Initialize authentication based on mode
+   */
+  async initializeAuth() {
+    let initializer;
+    switch (this.authMode) {
+      case "keycloak":
+        if (!("keycloakOptions" in this.authConfig)) {
+          throw new Error("Keycloak config must include keycloakOptions");
+        }
+        initializer = new KeycloakInitializer(this.app, this.authConfig);
+        break;
+      case "jwt":
+        initializer = new JwtInitializer(this.authConfig);
+        break;
+      case "initializer":
+      case "dev":
+        initializer = new InitializerModeInitializer(this.app, this.authConfig);
+        break;
+      default:
+        throw new Error(`Unknown auth mode: ${this.authMode}`);
+    }
+    await initializer.initialize();
+  }
+  /**
+   * Register Vue plugins
+   */
+  registerPlugins() {
+    if (!this.plugins) return;
+    if (this.plugins.router) {
+      this.app.use(this.plugins.router);
+    }
+    if (this.plugins.perfectScrollbar) {
+      this.app.use(this.plugins.perfectScrollbar);
+    }
+    if (this.plugins.print) {
+      this.app.use(this.plugins.print);
+    }
+    if (this.plugins.vueApexCharts) {
+      this.app.use(this.plugins.vueApexCharts);
+    }
+    if (this.plugins.vuetify) {
+      this.app.use(this.plugins.vuetify);
+    }
+    if (this.plugins.customPlugins) {
+      this.plugins.customPlugins.forEach(({ plugin, options }) => {
+        if (options) {
+          this.app.use(plugin, options);
+        } else {
+          this.app.use(plugin);
+        }
+      });
+    }
+  }
+  /**
+   * Register Vue directives
+   */
+  registerDirectives() {
+    if (!this.directives) return;
+    if (this.directives.digitLimit) {
+      this.app.directive("digit-limit", this.directives.digitLimit);
+    }
+    if (this.directives.permission) {
+      this.app.directive("permission", this.directives.permission);
+    }
+    if (this.directives.customDirectives) {
+      this.directives.customDirectives.forEach(({ name: name2, directive: directive2 }) => {
+        this.app.directive(name2, directive2);
+      });
+    }
+  }
+  /**
+   * Register Vue components
+   */
+  registerComponents() {
+    if (!this.components) return;
+    if (this.components.vue3PersianDatetimePicker) {
+      this.app.component("Vue3PersianDatetimePicker", this.components.vue3PersianDatetimePicker);
+    }
+    if (this.components.customComponents) {
+      this.components.customComponents.forEach(({ name: name2, component }) => {
+        this.app.component(name2, component);
+      });
+    }
+  }
+  /**
+   * Mount the Vue app
+   */
+  mountApp() {
+    this.app.mount("#app");
+  }
+}
+async function bootstrapApp(config) {
+  const bootstrap = new AppBootstrap(config);
+  await bootstrap.bootstrap();
+}
 function nationalCodeRule(nationalCode, customerType) {
   if (!NationalCodeValidator.isValid(nationalCode, customerType)) return "کد ملی نامعتبر است";
   return false;
@@ -39073,10 +39413,12 @@ const index = {
   install
 };
 export {
+  AppBootstrap,
   AppHeader,
   AppLayout,
   _sfc_main$2 as AppSidebar,
   AppStepper,
+  AuthModeInitializer,
   _sfc_main$l as BaseBreadcrumb,
   _sfc_main$k as BaseIcon,
   BooleanEnum,
@@ -39089,6 +39431,9 @@ export {
   DigitLimit,
   DownloadButton,
   GreetingUtils,
+  InitializerModeInitializer,
+  JwtInitializer,
+  KeycloakInitializer,
   Loading,
   _sfc_main$h as MoneyInput,
   NationalCodeValidator,
@@ -39097,6 +39442,7 @@ export {
   _sfc_main$b as UiChildCard,
   _sfc_main$a as UiParentCard,
   _sfc_main$9 as VPriceTextField,
+  bootstrapApp,
   configureAuth,
   configureAxiosInstance,
   index as default,
@@ -39106,6 +39452,7 @@ export {
   getAxiosInstance,
   install,
   nationalCodeRule,
+  setupKeycloak,
   useCustomizerStore,
   useDataTable,
   useTableActions,