@das-fed/utils 1.0.0

package/directive/auth.js

@@ -0,0 +1,114 @@
+import { getUrlParams, flatTree } from '@das-fed/utils/common-tools';
+import { getTabInfo, getSubApps, getPageAuth } from '@das-fed/utils/common-info';
+
+const getEl = async (el, options) => {
+  let res = el;
+  if (options?.target) {
+    if (typeof options.target === "string")
+      res = options.target;
+    if (typeof options.target === "function")
+      res = await options.target(el);
+  }
+  return res;
+};
+
+const hasBtnAuth = (btnList, code) => {
+  if (!btnList || !code)
+    return false;
+  if (typeof code === "string") {
+    const currentItem = btnList.find((item) => item.code === code);
+    return !!currentItem;
+  } else {
+    let flag = false;
+    for (let value of code) {
+      const currentItem = btnList.find((item) => item.code === value);
+      if (currentItem) {
+        flag = true;
+        break;
+      }
+    }
+    return flag;
+  }
+};
+const hasPermission = (options) => {
+  const code = options?.code ?? "";
+  const path = options?.path ?? location.pathname;
+  const applicationCode = options?.applicationCode ?? "";
+  let menuCode = "";
+  if (window.__IN_MICRO_APP__) {
+    menuCode = options?.menuCode ? options.menuCode : getUrlParams(location.href, "menu");
+  } else {
+    menuCode = options?.menuCode ? options.menuCode : getTabInfo().currentTab?.code;
+  }
+  if (!menuCode) {
+    const currentMenus = getSubApps().currentSubApp?.menus ?? [];
+    if (currentMenus && currentMenus.length) {
+      const flatMenus = flatTree(currentMenus).filter((item) => item?.routeUrl);
+      if (flatMenus && flatMenus.length) {
+        const currentMenu = flatMenus.find((item) => {
+          if (item?.applicationPath) {
+            return path?.includes("/" + item.applicationPath + item.routeUrl);
+          } else {
+            return path?.includes(item.routeUrl);
+          }
+        });
+        if (currentMenu)
+          menuCode = currentMenu?.code ?? "";
+      }
+    }
+  }
+  let flag = false;
+  if (code) {
+    const btnList = getPageAuth(menuCode, applicationCode) ?? [];
+    flag = hasBtnAuth(btnList, code);
+  } else {
+    flag = !!getPageAuth(menuCode, applicationCode);
+  }
+  return flag;
+};
+const removeEl = (el, type) => {
+  if (type === "hide") {
+    el.classList.add("is-hide");
+  } else {
+    el.setAttribute("disabled", "");
+    el.classList.add("is-disabled");
+  }
+};
+const addEl = (el, type) => {
+  if (type === "hide") {
+    el.classList.remove("is-hide");
+  } else {
+    el.removeAttribute("disabled");
+    el.classList.remove("is-disabled");
+  }
+};
+const vAuth = (el, binding) => {
+  let options = (el ? binding.value : binding) || {};
+  if (typeof options === "string")
+    options = { code: options };
+  const type = options?.type ?? "hide";
+  const isPermission = hasPermission(options);
+  if (el) {
+    if (!binding.oldValue) {
+      if (!isPermission)
+        getEl(el, options).then((element) => {
+          removeEl(element, type);
+        });
+    } else {
+      const oldHasPermission = hasPermission(binding.oldValue);
+      const newHasPermission = isPermission;
+      if (oldHasPermission === newHasPermission)
+        return;
+      getEl(el, options).then((element) => {
+        if (newHasPermission) {
+          addEl(element, type);
+        } else {
+          removeEl(element, type);
+        }
+      });
+    }
+  }
+  return isPermission;
+};
+
+export { vAuth };

package/directive/clickOutside.js

@@ -0,0 +1,53 @@
+const getEl = async (el, options) => {
+  let res = el;
+  if (options?.target) {
+    if (typeof options.target === "string")
+      res = options.target;
+    if (typeof options.target === "function")
+      res = await options.target(el);
+  }
+  return res;
+};
+
+const vClickOutside = {
+  mounted: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    function eventHandler(e) {
+      let flag = true;
+      if (Array.isArray(targetEl)) {
+        for (let dom of targetEl) {
+          dom.__click_outside__ = eventHandler;
+          if (dom.contains(e.target))
+            flag = false;
+        }
+      } else {
+        if (targetEl.contains(e.target)) {
+          flag = false;
+        }
+        targetEl.__click_outside__ = eventHandler;
+      }
+      if (flag) {
+        if (options?.fn && typeof options?.fn === "function") {
+          options?.fn(e);
+        }
+      }
+    }
+    document.addEventListener("click", eventHandler);
+  },
+  beforeUnmount: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    if (Array.isArray(targetEl)) {
+      for (let dom of targetEl) {
+        document.removeEventListener("click", dom.__click_outside__);
+        delete dom.__click_outside__;
+      }
+    } else {
+      document.removeEventListener("click", targetEl.__click_outside__);
+      delete targetEl.__click_outside__;
+    }
+  }
+};
+
+export { vClickOutside };

package/directive/hoverInside.js

@@ -0,0 +1,40 @@
+const getEl = async (el, options) => {
+  let res = el;
+  if (options?.target) {
+    if (typeof options.target === "string")
+      res = options.target;
+    if (typeof options.target === "function")
+      res = await options.target(el);
+  }
+  return res;
+};
+
+const vHoverInside = {
+  mounted: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    function eventHandler(flag, e) {
+      targetEl._inside_event = eventHandler;
+      if (typeof options === "function") {
+        options(flag, e);
+      } else if (options?.fn && typeof options?.fn === "function") {
+        options?.fn(flag, e);
+      }
+    }
+    targetEl.addEventListener("mouseenter", (e) => {
+      eventHandler(true, e);
+    });
+    targetEl.addEventListener("mouseleave", (e) => {
+      eventHandler(false, e);
+    });
+  },
+  beforeUnmount: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    targetEl.addEventListener("mouseenter", targetEl._inside_event);
+    targetEl.addEventListener("mouseleave", targetEl._inside_event);
+    delete targetEl._inside_event;
+  }
+};
+
+export { vHoverInside };

package/directive/index.js

@@ -0,0 +1,183 @@
+import { getUrlParams, flatTree } from '@das-fed/utils/common-tools';
+import { getTabInfo, getSubApps, getPageAuth } from '@das-fed/utils/common-info';
+
+const getEl = async (el, options) => {
+  let res = el;
+  if (options?.target) {
+    if (typeof options.target === "string")
+      res = options.target;
+    if (typeof options.target === "function")
+      res = await options.target(el);
+  }
+  return res;
+};
+
+const hasBtnAuth = (btnList, code) => {
+  if (!btnList || !code)
+    return false;
+  if (typeof code === "string") {
+    const currentItem = btnList.find((item) => item.code === code);
+    return !!currentItem;
+  } else {
+    let flag = false;
+    for (let value of code) {
+      const currentItem = btnList.find((item) => item.code === value);
+      if (currentItem) {
+        flag = true;
+        break;
+      }
+    }
+    return flag;
+  }
+};
+const hasPermission = (options) => {
+  const code = options?.code ?? "";
+  const path = options?.path ?? location.pathname;
+  const applicationCode = options?.applicationCode ?? "";
+  let menuCode = "";
+  if (window.__IN_MICRO_APP__) {
+    menuCode = options?.menuCode ? options.menuCode : getUrlParams(location.href, "menu");
+  } else {
+    menuCode = options?.menuCode ? options.menuCode : getTabInfo().currentTab?.code;
+  }
+  if (!menuCode) {
+    const currentMenus = getSubApps().currentSubApp?.menus ?? [];
+    if (currentMenus && currentMenus.length) {
+      const flatMenus = flatTree(currentMenus).filter((item) => item?.routeUrl);
+      if (flatMenus && flatMenus.length) {
+        const currentMenu = flatMenus.find((item) => {
+          if (item?.applicationPath) {
+            return path?.includes("/" + item.applicationPath + item.routeUrl);
+          } else {
+            return path?.includes(item.routeUrl);
+          }
+        });
+        if (currentMenu)
+          menuCode = currentMenu?.code ?? "";
+      }
+    }
+  }
+  let flag = false;
+  if (code) {
+    const btnList = getPageAuth(menuCode, applicationCode) ?? [];
+    flag = hasBtnAuth(btnList, code);
+  } else {
+    flag = !!getPageAuth(menuCode, applicationCode);
+  }
+  return flag;
+};
+const removeEl = (el, type) => {
+  if (type === "hide") {
+    el.classList.add("is-hide");
+  } else {
+    el.setAttribute("disabled", "");
+    el.classList.add("is-disabled");
+  }
+};
+const addEl = (el, type) => {
+  if (type === "hide") {
+    el.classList.remove("is-hide");
+  } else {
+    el.removeAttribute("disabled");
+    el.classList.remove("is-disabled");
+  }
+};
+const vAuth = (el, binding) => {
+  let options = (el ? binding.value : binding) || {};
+  if (typeof options === "string")
+    options = { code: options };
+  const type = options?.type ?? "hide";
+  const isPermission = hasPermission(options);
+  if (el) {
+    if (!binding.oldValue) {
+      if (!isPermission)
+        getEl(el, options).then((element) => {
+          removeEl(element, type);
+        });
+    } else {
+      const oldHasPermission = hasPermission(binding.oldValue);
+      const newHasPermission = isPermission;
+      if (oldHasPermission === newHasPermission)
+        return;
+      getEl(el, options).then((element) => {
+        if (newHasPermission) {
+          addEl(element, type);
+        } else {
+          removeEl(element, type);
+        }
+      });
+    }
+  }
+  return isPermission;
+};
+
+const vClickOutside = {
+  mounted: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    function eventHandler(e) {
+      let flag = true;
+      if (Array.isArray(targetEl)) {
+        for (let dom of targetEl) {
+          dom.__click_outside__ = eventHandler;
+          if (dom.contains(e.target))
+            flag = false;
+        }
+      } else {
+        if (targetEl.contains(e.target)) {
+          flag = false;
+        }
+        targetEl.__click_outside__ = eventHandler;
+      }
+      if (flag) {
+        if (options?.fn && typeof options?.fn === "function") {
+          options?.fn(e);
+        }
+      }
+    }
+    document.addEventListener("click", eventHandler);
+  },
+  beforeUnmount: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    if (Array.isArray(targetEl)) {
+      for (let dom of targetEl) {
+        document.removeEventListener("click", dom.__click_outside__);
+        delete dom.__click_outside__;
+      }
+    } else {
+      document.removeEventListener("click", targetEl.__click_outside__);
+      delete targetEl.__click_outside__;
+    }
+  }
+};
+
+const vHoverInside = {
+  mounted: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    function eventHandler(flag, e) {
+      targetEl._inside_event = eventHandler;
+      if (typeof options === "function") {
+        options(flag, e);
+      } else if (options?.fn && typeof options?.fn === "function") {
+        options?.fn(flag, e);
+      }
+    }
+    targetEl.addEventListener("mouseenter", (e) => {
+      eventHandler(true, e);
+    });
+    targetEl.addEventListener("mouseleave", (e) => {
+      eventHandler(false, e);
+    });
+  },
+  beforeUnmount: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    targetEl.addEventListener("mouseenter", targetEl._inside_event);
+    targetEl.addEventListener("mouseleave", targetEl._inside_event);
+    delete targetEl._inside_event;
+  }
+};
+
+export { vAuth, vClickOutside, vHoverInside };

package/directive/utils.js

@@ -0,0 +1,12 @@
+const getEl = async (el, options) => {
+  let res = el;
+  if (options?.target) {
+    if (typeof options.target === "string")
+      res = options.target;
+    if (typeof options.target === "function")
+      res = await options.target(el);
+  }
+  return res;
+};
+
+export { getEl };

package/dom-check-in/index.js

@@ -0,0 +1,16 @@
+const domCheckIn = (dom) => {
+  const event = window.event;
+  let x = Number(event.clientX);
+  let y = Number(event.clientY);
+  let div_x = Number(dom.getBoundingClientRect().left);
+  let div_x_width = Number(dom.getBoundingClientRect().left + dom.clientWidth);
+  let div_y = Number(dom.getBoundingClientRect().top);
+  let div_y_height = Number(dom.getBoundingClientRect().top + dom.clientHeight);
+  if (x > div_x && x < div_x_width && y > div_y && y < div_y_height) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+export { domCheckIn };

package/dom-watcher/index.js

@@ -0,0 +1,10 @@
+const DomWatcher = (cb, dom, config = { attributes: true, childList: true, subtree: true }) => {
+  const watchDom = dom || document.body;
+  const domObserver = new MutationObserver((mutationsList) => {
+    cb(mutationsList);
+  });
+  domObserver.observe(watchDom, config);
+  return domObserver;
+};
+
+export { DomWatcher };

package/hooks/popup-manager/use-zindex.js

@@ -0,0 +1,41 @@
+import { ref, getCurrentInstance, inject, computed, unref } from 'vue';
+
+const isNumber = (val) => typeof val === "number";
+
+const zIndex = ref(0);
+const defaultInitialZIndex = 2e3;
+const zIndexContextKey = Symbol("zIndexContextKey");
+const useZIndex$1 = (zIndexOverrides) => {
+  const zIndexInjection = zIndexOverrides || (getCurrentInstance() ? inject(zIndexContextKey, void 0) : void 0);
+  const initialZIndex = computed(() => {
+    const zIndexFromInjection = unref(zIndexInjection);
+    return isNumber(zIndexFromInjection) ? zIndexFromInjection : defaultInitialZIndex;
+  });
+  const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
+  const nextZIndex = () => {
+    zIndex.value++;
+    return currentZIndex.value;
+  };
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex
+  };
+};
+
+const elementZindex = useZIndex$1();
+const useZIndex = () => {
+  const initialZIndex = computed(() => elementZindex.initialZIndex.value);
+  const currentZIndex = computed(() => elementZindex.currentZIndex.value);
+  const nextZIndex = () => {
+    const currentZIndex2 = elementZindex.nextZIndex();
+    return currentZIndex2;
+  };
+  return {
+    initialZIndex,
+    currentZIndex,
+    nextZIndex
+  };
+};
+
+export { useZIndex };

package/index.js

@@ -0,0 +1,215 @@
+import { getUrlParams, flatTree } from '@das-fed/utils/common-tools';
+import { getTabInfo, getSubApps, getPageAuth } from '@das-fed/utils/common-info';
+
+const getConfig = () => {
+  let windowConfig = window?.config || {};
+  let config = { ...windowConfig };
+  if (!config.rootContainer)
+    config.rootContainer = "#app";
+  if (!config.baseURL)
+    config.baseURL = location.origin;
+  if (!config.ossBaseURL)
+    config.ossBaseURL = "/oss";
+  if (config.ossBaseURL.startsWith("/"))
+    config.ossBaseURL = `${config.baseURL}/oss`;
+  if (!config.ssoBaseURL)
+    config.ssoBaseURL = config.baseURL;
+  let { microAppName, publicPath, mainAppName } = config;
+  const isPro = import.meta.env.PROD;
+  if (microAppName && isPro && !publicPath)
+    publicPath = `/${microAppName}/`.replace(/\/\//g, "/");
+  if (!publicPath)
+    publicPath = "/";
+  config.publicPath = publicPath;
+  if (!config.autoOssBucket)
+    config.autoOssBucket = mainAppName || microAppName;
+  return config;
+};
+
+const getEl = async (el, options) => {
+  let res = el;
+  if (options?.target) {
+    if (typeof options.target === "string")
+      res = options.target;
+    if (typeof options.target === "function")
+      res = await options.target(el);
+  }
+  return res;
+};
+
+const hasBtnAuth = (btnList, code) => {
+  if (!btnList || !code)
+    return false;
+  if (typeof code === "string") {
+    const currentItem = btnList.find((item) => item.code === code);
+    return !!currentItem;
+  } else {
+    let flag = false;
+    for (let value of code) {
+      const currentItem = btnList.find((item) => item.code === value);
+      if (currentItem) {
+        flag = true;
+        break;
+      }
+    }
+    return flag;
+  }
+};
+const hasPermission = (options) => {
+  const code = options?.code ?? "";
+  const path = options?.path ?? location.pathname;
+  const applicationCode = options?.applicationCode ?? "";
+  let menuCode = "";
+  if (window.__IN_MICRO_APP__) {
+    menuCode = options?.menuCode ? options.menuCode : getUrlParams(location.href, "menu");
+  } else {
+    menuCode = options?.menuCode ? options.menuCode : getTabInfo().currentTab?.code;
+  }
+  if (!menuCode) {
+    const currentMenus = getSubApps().currentSubApp?.menus ?? [];
+    if (currentMenus && currentMenus.length) {
+      const flatMenus = flatTree(currentMenus).filter((item) => item?.routeUrl);
+      if (flatMenus && flatMenus.length) {
+        const currentMenu = flatMenus.find((item) => {
+          if (item?.applicationPath) {
+            return path?.includes("/" + item.applicationPath + item.routeUrl);
+          } else {
+            return path?.includes(item.routeUrl);
+          }
+        });
+        if (currentMenu)
+          menuCode = currentMenu?.code ?? "";
+      }
+    }
+  }
+  let flag = false;
+  if (code) {
+    const btnList = getPageAuth(menuCode, applicationCode) ?? [];
+    flag = hasBtnAuth(btnList, code);
+  } else {
+    flag = !!getPageAuth(menuCode, applicationCode);
+  }
+  return flag;
+};
+const removeEl = (el, type) => {
+  if (type === "hide") {
+    el.classList.add("is-hide");
+  } else {
+    el.setAttribute("disabled", "");
+    el.classList.add("is-disabled");
+  }
+};
+const addEl = (el, type) => {
+  if (type === "hide") {
+    el.classList.remove("is-hide");
+  } else {
+    el.removeAttribute("disabled");
+    el.classList.remove("is-disabled");
+  }
+};
+const vAuth = (el, binding) => {
+  let options = (el ? binding.value : binding) || {};
+  if (typeof options === "string")
+    options = { code: options };
+  const type = options?.type ?? "hide";
+  const isPermission = hasPermission(options);
+  if (el) {
+    if (!binding.oldValue) {
+      if (!isPermission)
+        getEl(el, options).then((element) => {
+          removeEl(element, type);
+        });
+    } else {
+      const oldHasPermission = hasPermission(binding.oldValue);
+      const newHasPermission = isPermission;
+      if (oldHasPermission === newHasPermission)
+        return;
+      getEl(el, options).then((element) => {
+        if (newHasPermission) {
+          addEl(element, type);
+        } else {
+          removeEl(element, type);
+        }
+      });
+    }
+  }
+  return isPermission;
+};
+
+const vClickOutside = {
+  mounted: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    function eventHandler(e) {
+      let flag = true;
+      if (Array.isArray(targetEl)) {
+        for (let dom of targetEl) {
+          dom.__click_outside__ = eventHandler;
+          if (dom.contains(e.target))
+            flag = false;
+        }
+      } else {
+        if (targetEl.contains(e.target)) {
+          flag = false;
+        }
+        targetEl.__click_outside__ = eventHandler;
+      }
+      if (flag) {
+        if (options?.fn && typeof options?.fn === "function") {
+          options?.fn(e);
+        }
+      }
+    }
+    document.addEventListener("click", eventHandler);
+  },
+  beforeUnmount: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    if (Array.isArray(targetEl)) {
+      for (let dom of targetEl) {
+        document.removeEventListener("click", dom.__click_outside__);
+        delete dom.__click_outside__;
+      }
+    } else {
+      document.removeEventListener("click", targetEl.__click_outside__);
+      delete targetEl.__click_outside__;
+    }
+  }
+};
+
+const vHoverInside = {
+  mounted: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    function eventHandler(flag, e) {
+      targetEl._inside_event = eventHandler;
+      if (typeof options === "function") {
+        options(flag, e);
+      } else if (options?.fn && typeof options?.fn === "function") {
+        options?.fn(flag, e);
+      }
+    }
+    targetEl.addEventListener("mouseenter", (e) => {
+      eventHandler(true, e);
+    });
+    targetEl.addEventListener("mouseleave", (e) => {
+      eventHandler(false, e);
+    });
+  },
+  beforeUnmount: async (el, binding) => {
+    const options = binding.value;
+    const targetEl = await getEl(el, options);
+    targetEl.addEventListener("mouseenter", targetEl._inside_event);
+    targetEl.addEventListener("mouseleave", targetEl._inside_event);
+    delete targetEl._inside_event;
+  }
+};
+
+const withInstall = (comp) => {
+  comp.install = function(app) {
+    app.component(comp.name, comp);
+  };
+  return comp;
+};
+
+export { getConfig, vAuth, vClickOutside, vHoverInside, withInstall };