inl-ui 0.0.30 → 0.0.32

package/dist/components/index.js

@@ -1,672 +0,0 @@
-import { defineComponent, createVNode, ref, watch, resolveComponent, isVNode, computed, inject, withDirectives, vShow } from 'vue';
-import { createFromIconfontCN, SearchOutlined, LeftOutlined, CloseOutlined, RightOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
-import { useMounted, useThrottleFn, useVModel, watchArray, useToggle } from '@vueuse/core';
-import { Menu, MenuItem, Input, Badge, Avatar, SubMenu, Dropdown, Layout as Layout$1, LayoutHeader, LayoutSider, LayoutContent } from 'ant-design-vue';
-import { useRoute, useRouter } from 'vue-router';
-import _, { differenceBy } from 'lodash';
-import { loadMicroApp } from 'qiankun';
-import appList from '@/micro-apps/apps';
-
-const config = {
-  prefix: "inl",
-  requestOmitParams: ["createDt", "createUser", "updateDt", "updateUser"]
-};
-
-const {
-  prefix
-} = config;
-function installComponent(component, name, withPrefix = true) {
-  component.install = app => {
-    name = withPrefix ? `${prefix}-${name}` : name;
-    app.component(name, component);
-  };
-  return component;
-}
-
-const Demo = defineComponent({
-  props: {
-    name: {
-      type: String,
-      default: "\u5F20\u4E09"
-    }
-  },
-  setup(props) {
-    return () => createVNode("div", {
-      "class": "Demo"
-    }, ["\u6211\u662Fdemo, ", props.name]);
-  }
-});
-var index$2 = installComponent(Demo, "demo");
-
-const IconFont = createFromIconfontCN();
-var index$1 = installComponent(IconFont, "icon-font", false);
-
-function getMenuByKeyPath(menuList, keyPath, keyProp = "id") {
-  function getMenuByKey2(list2, key) {
-    return list2.find(item => item[keyProp] && item[keyProp] === key);
-  }
-  let list = menuList;
-  for (let i = 0; i < keyPath.length; i++) {
-    const menu = getMenuByKey2(list, keyPath[i]);
-    if (!menu) return;
-    if (i === keyPath.length - 1) {
-      return menu;
-    }
-    list = menu.subList;
-  }
-}
-function flattenMenu(menuList) {
-  const res = [];
-  for (const menu of menuList) {
-    res.push(menu);
-    res.push(...menu.subList);
-  }
-  return res;
-}
-function getMenuByKey(menuList, key, propName = "id") {
-  const flattenMenuList = flattenMenu(menuList);
-  return flattenMenuList.find(item => item[propName] && item[propName] === key);
-}
-function getNavByChildKey(navList, key, propName = "id") {
-  for (const nav of navList) {
-    const menu = getMenuByKey(nav.subList, key, propName);
-    if (menu) {
-      return nav;
-    }
-  }
-}
-
-function useActiveMenu(menuList, extraPages, isNav = false, watchOnce = false) {
-  const route = useRoute();
-  const isMounted = useMounted();
-  const menu = ref();
-  const unwatch = watch([menuList, isMounted, route], _.debounce(([list]) => {
-    if (list.length && isMounted) {
-      watchOnce && unwatch();
-      const {
-        query,
-        path
-      } = route;
-      const id = "" + query.iframeId;
-      if (query.iframeId) {
-        menu.value = isNav ? getNavByChildKey(list, id, "id") : getMenuByKey(list, id, "id");
-      } else if (query.extraPageKey) {
-        const page = extraPages.find(item => item.key === query.extraPageKey);
-        menu.value = page;
-      } else if (path !== "/") {
-        menu.value = isNav ? getNavByChildKey(list, path, "url") : getMenuByKey(list, path, "url");
-      } else {
-        const getFirstMenu = list2 => {
-          if (list2[0].subList?.length) {
-            return getFirstMenu(list2[0].subList);
-          }
-          return list2[0];
-        };
-        const firstMenu = getFirstMenu(list);
-        menu.value = firstMenu;
-      }
-    }
-  }, 10, {
-    leading: false
-  }));
-  return menu;
-}
-
-function _isSlot$1(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
-}
-const Header = defineComponent({
-  emits: ["navSelect"],
-  props: {
-    menu: {
-      type: Array,
-      required: true
-    },
-    logo: {
-      type: String
-    },
-    userInfo: {
-      type: Object,
-      required: true
-    },
-    extraPages: {
-      type: Array,
-      required: true
-    },
-    messageCount: {
-      type: Number
-    }
-  },
-  setup(props, {
-    emit
-  }) {
-    const isMounted = useMounted();
-    const router = useRouter();
-    const searchText = ref("");
-    const handleGlobalSearch = () => {
-      searchText.value = "";
-    };
-    const acitveMenuKey = ref([]);
-    const handleMenuSelected = ({
-      key
-    }) => {
-      emit("navSelect", key);
-    };
-    const activeMenu = useActiveMenu(() => props.menu, props.extraPages, true);
-    watch(activeMenu, val => {
-      if (val && val.id) {
-        handleMenuSelected({
-          key: val.id
-        });
-        acitveMenuKey.value = [val.id];
-      }
-    });
-    const cancleWatch = watch([isMounted, () => props.menu], ([mounted, list]) => {
-      if (mounted && list.length) {
-        cancleWatch();
-        if (!activeMenu.value) {
-          const firstNav = list[0];
-          emit("navSelect", firstNav.id);
-          acitveMenuKey.value = [firstNav.id];
-        }
-      }
-    });
-    const handlePersonalCenter = () => {
-      router.push({
-        path: "/",
-        query: {
-          extraPageKey: "personalCenter"
-        }
-      });
-    };
-    return () => {
-      let _slot;
-      return createVNode("div", {
-        "class": "header"
-      }, [createVNode("div", {
-        "class": "logo"
-      }, [createVNode("img", {
-        "src": props.logo,
-        "alt": ""
-      }, null)]), createVNode(Menu, {
-        "class": "menu",
-        "mode": "horizontal",
-        "selectedKeys": acitveMenuKey.value,
-        "onUpdate:selectedKeys": $event => acitveMenuKey.value = $event,
-        "onSelect": handleMenuSelected
-      }, _isSlot$1(_slot = props.menu.map(item => createVNode(MenuItem, {
-        "key": item.id,
-        "icon": createVNode(resolveComponent("icon-font"), {
-          "type": item.icon
-        }, null)
-      }, {
-        default: () => [item.name]
-      }))) ? _slot : {
-        default: () => [_slot]
-      }), createVNode(Input, {
-        "class": "search",
-        "placeholder": "\u641C\u7D22",
-        "allowClear": true,
-        "value": searchText.value,
-        "onUpdate:value": $event => searchText.value = $event,
-        "onPressEnter": handleGlobalSearch
-      }, {
-        suffix: () => createVNode(SearchOutlined, null, null)
-      }), createVNode("div", {
-        "class": "user-info"
-      }, [createVNode("span", {
-        "class": "username"
-      }, [props.userInfo.userName]), createVNode("div", {
-        "onClick": handlePersonalCenter
-      }, [createVNode(Badge, {
-        "dot": !!props.messageCount
-      }, {
-        default: () => [createVNode(Avatar, {
-          "class": "avatar",
-          "src": "https://joeschmoe.io/api/v1/random"
-        }, null)]
-      })])])]);
-    };
-  }
-});
-
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
-}
-const renderMenuItem = item => {
-  if (item.subList?.length) {
-    let _slot;
-    return createVNode(SubMenu, {
-      "key": item.id,
-      "icon": createVNode(resolveComponent("icon-font"), {
-        "type": item.icon
-      }, null),
-      "title": item.name
-    }, _isSlot(_slot = item.subList.map(i => renderMenuItem(i))) ? _slot : {
-      default: () => [_slot]
-    });
-  }
-  return createVNode(MenuItem, {
-    "key": item.id,
-    "icon": createVNode(resolveComponent("icon-font"), {
-      "type": item.icon
-    }, null)
-  }, {
-    default: () => [item.name]
-  });
-};
-const SideMenu = defineComponent({
-  emits: ["menuSelect"],
-  props: {
-    menu: {
-      type: Array,
-      required: true
-    },
-    extraPages: {
-      type: Array,
-      required: true
-    }
-  },
-  setup(props, {
-    emit
-  }) {
-    const activeMenu = ref([]);
-    const initialMenu = useActiveMenu(() => props.menu, props.extraPages);
-    watch(initialMenu, val => {
-      if (val?.id) {
-        activeMenu.value = [val.id];
-      } else {
-        activeMenu.value = [];
-      }
-    });
-    const handleMenuSelect = param => {
-      const {
-        keyPath
-      } = param;
-      const menu = getMenuByKeyPath(props.menu, keyPath);
-      if (menu) {
-        emit("menuSelect", menu);
-      }
-    };
-    return () => {
-      let _slot2;
-      return createVNode(Menu, {
-        "mode": "inline",
-        "selectedKeys": activeMenu.value,
-        "onUpdate:selectedKeys": $event => activeMenu.value = $event,
-        "onSelect": handleMenuSelect
-      }, _isSlot(_slot2 = props.menu.map(item => renderMenuItem(item))) ? _slot2 : {
-        default: () => [_slot2]
-      });
-    };
-  }
-});
-
-function useActiveApp() {
-  const route = useRoute();
-  const activeAppName = computed(() => {
-    return route.path.split("/")[1];
-  });
-  return activeAppName;
-}
-
-function useMicroApp() {
-  const route = useRoute();
-  const activeAppName = useActiveApp();
-  const loadAppList = ref([]);
-  const handleRouteChange = useThrottleFn(async () => {
-    const microAppName = activeAppName.value;
-    const loadApp = loadAppList.value.find(item => item.name === microAppName);
-    if (loadApp) return;
-    const microApp = appList.find(item => item.name === microAppName);
-    if (!microApp) return;
-    const domId = `microApp_${microAppName}`;
-    const app = loadMicroApp({
-      name: microApp.name,
-      entry: microApp.entry,
-      container: `#${domId}`
-    });
-    loadAppList.value.push({
-      name: microAppName,
-      domId,
-      app
-    });
-  }, 100);
-  watch(route, handleRouteChange, {
-    immediate: true
-  });
-  return loadAppList;
-}
-
-function onAddExtraTabs(handler) {
-  const qiankunState = inject("qiankunState");
-  watch(() => qiankunState.value.extraTabs, (val = [], prev = []) => {
-    if (val.length > prev.length) {
-      const added = differenceBy(val, prev, item => item.key);
-      handler(added);
-    }
-  }, {
-    deep: true,
-    immediate: true
-  });
-}
-
-const TabList = defineComponent({
-  emits: ["update:activeKey", "update:list", "tabSelect"],
-  props: {
-    list: {
-      type: Array,
-      default: () => []
-    },
-    activeKey: {
-      type: String
-    }
-  },
-  setup(props, {
-    emit
-  }) {
-    const qiankunState = inject("qiankunState");
-    const tabContainerRef = ref();
-    const tabList = useVModel(props, "list", emit);
-    const activeTabKey = useVModel(props, "activeKey", emit);
-    const scrollLeft = val => {
-      if (!tabContainerRef.value) return;
-      tabContainerRef.value.scrollTo({
-        left: tabContainerRef.value.scrollLeft + val,
-        behavior: "smooth"
-      });
-    };
-    const handleScroll = e => {
-      if (!e.deltaX) {
-        scrollLeft(e.deltaY < 0 ? -300 : 300);
-      }
-    };
-    const handleRemove = async (e, tab, index) => {
-      e.stopPropagation();
-      if (tab.key === activeTabKey.value) {
-        const next = tabList.value[index + 1];
-        const prev = tabList.value[index - 1];
-        if (next) {
-          activeTabKey.value = next.key;
-          emit("tabSelect", next);
-        } else if (prev) {
-          activeTabKey.value = prev.key;
-          emit("tabSelect", prev);
-        } else {
-          return;
-        }
-      }
-      tabList.value.splice(index, 1);
-    };
-    const closeToRight = index => tabList.value = tabList.value.filter((_2, i) => i <= index);
-    const closeToLeft = index => tabList.value = tabList.value.filter((_2, i) => i >= index);
-    const closeOther = index => {
-      activeTabKey.value = tabList.value[index].key;
-      tabList.value = tabList.value.filter((_2, i) => i === index);
-    };
-    watchArray(tabList, (val, prev, added, removed) => {
-      for (const tab of removed) {
-        if (tab.isExtraTab) {
-          const idx = qiankunState.value.extraTabs.find(item => item.key === tab.key);
-          idx !== -1 && qiankunState.value.extraTabs.splice(idx, 1);
-        }
-      }
-    }, {
-      deep: true
-    });
-    return () => createVNode("div", {
-      "class": "tab-list"
-    }, [createVNode("div", {
-      "class": "handle",
-      "onClick": () => scrollLeft(-150)
-    }, [createVNode(LeftOutlined, null, null)]), createVNode("div", {
-      "class": "tabs-container",
-      "ref": tabContainerRef,
-      "onWheel": handleScroll
-    }, [tabList.value.map((item, index) => createVNode(Dropdown, {
-      "placement": "bottomLeft",
-      "trigger": ["contextmenu"]
-    }, {
-      default: () => [createVNode("div", {
-        "key": item.id,
-        "class": ["tab", {
-          active: item.key === activeTabKey.value
-        }],
-        "onClick": () => emit("tabSelect", item)
-      }, [createVNode(resolveComponent("icon-font"), {
-        "class": "icon",
-        "type": item.icon
-      }, null), createVNode("span", {
-        "class": "tab-name"
-      }, [item.name]), tabList.value.length > 1 && createVNode(CloseOutlined, {
-        "class": "close",
-        "onClick": e => handleRemove(e, item, index)
-      }, null)])],
-      overlay: () => createVNode(Menu, null, {
-        default: () => [createVNode(MenuItem, {
-          "key": "right",
-          "onClick": () => closeToRight(index)
-        }, {
-          default: () => ["\u5173\u95ED\u53F3\u4FA7"]
-        }), createVNode(MenuItem, {
-          "key": "left",
-          "onClick": () => closeToLeft(index)
-        }, {
-          default: () => ["\u5173\u95ED\u5DE6\u4FA7"]
-        }), createVNode(MenuItem, {
-          "key": "other",
-          "onClick": () => closeOther(index)
-        }, {
-          default: () => ["\u5173\u95ED\u5176\u4ED6"]
-        })]
-      })
-    }))]), createVNode("div", {
-      "class": "handle",
-      "onClick": () => scrollLeft(150)
-    }, [createVNode(RightOutlined, null, null)])]);
-  }
-});
-
-const PageContent = defineComponent({
-  props: {
-    currMenu: {
-      type: Object
-    },
-    menu: {
-      type: Array,
-      default: () => []
-    },
-    extraPages: {
-      type: Array,
-      required: true
-    }
-  },
-  setup(props, {
-    emit
-  }) {
-    const router = useRouter();
-    const qiankunState = inject("qiankunState");
-    const activeKey = ref();
-    const tabList = ref([]);
-    const activeAppName = useActiveApp();
-    const loadAppList = useMicroApp();
-    const iframeList = ref([]);
-    const extraPageList = ref([]);
-    const handleMenuChange = _.throttle(val => {
-      if (!val) return;
-      if (val.isExtra) {
-        const exist = extraPageList.value.find(item => item.key === val.key);
-        if (!exist) {
-          tabList.value.push(val);
-          extraPageList.value.push(val);
-        }
-        router.push(`/?extraPageKey=${val.key}`);
-        activeKey.value = val.key;
-        return;
-      }
-      const {
-        key,
-        id,
-        mode = 0,
-        url
-      } = val;
-      const isOpened = tabList.value.find(item => item.id === id);
-      const tab = _.cloneDeep(val);
-      switch (mode) {
-        case 0:
-          if (!isOpened) tabList.value.push({
-            ...tab,
-            key: key ?? id
-          });
-          router.push(url);
-          break;
-        case 1:
-          window.open(url);
-          break;
-        case 2:
-          if (!isOpened) {
-            iframeList.value.push(val);
-            tabList.value.push({
-              ...tab,
-              key: id
-            });
-          }
-          router.push({
-            path: "/",
-            query: {
-              iframeId: id
-            }
-          });
-          break;
-      }
-      activeKey.value = key ?? id;
-    }, 100, {
-      trailing: false
-    });
-    const activeMenu = useActiveMenu(() => props.menu, props.extraPages);
-    watch(activeMenu, handleMenuChange);
-    watch(() => props.currMenu, handleMenuChange, {
-      immediate: true
-    });
-    watch(activeKey, val => qiankunState.value.activeTabKey = val, {
-      immediate: true
-    });
-    watch(() => qiankunState.value.activeTabKey, val => activeKey.value = val);
-    onAddExtraTabs(added => {
-      tabList.value.push(...added);
-    });
-    return () => createVNode("div", {
-      "class": "page-content"
-    }, [createVNode(TabList, {
-      "activeKey": activeKey.value,
-      "onUpdate:activeKey": $event => activeKey.value = $event,
-      "list": tabList.value,
-      "onUpdate:list": $event => tabList.value = $event,
-      "onTabSelect": handleMenuChange
-    }, null), createVNode("div", {
-      "class": "page-container"
-    }, [loadAppList.value.map(item => withDirectives(createVNode("div", {
-      "id": item.domId
-    }, null), [[vShow, item.name === activeAppName.value]])), iframeList.value.map(item => withDirectives(createVNode("iframe", {
-      "src": item.url,
-      "width": "100%",
-      "height": "100%",
-      "frameborder": "0"
-    }, null), [[vShow, item.id === activeKey.value]])), extraPageList.value.map(item => withDirectives(createVNode("div", {
-      "style": {
-        height: "100%"
-      }
-    }, [createVNode(item.component, null, null)]), [[vShow, item.key === activeKey.value]]))])]);
-  }
-});
-
-const Layout = defineComponent({
-  props: {
-    userMenu: {
-      type: Array,
-      required: true
-    },
-    copyRight: {
-      type: String
-    },
-    userInfo: {
-      type: Object,
-      required: true
-    },
-    extraPages: {
-      type: Array,
-      default: () => []
-    },
-    messageCount: {
-      type: Number,
-      default: 0
-    },
-    logo: {
-      type: String
-    }
-  },
-  setup(props, {
-    emit
-  }) {
-    const [isFolder, toggleFolder] = useToggle(false);
-    const currentNavKey = ref();
-    const siderMenu = ref([]);
-    const handleNavSelect = id => {
-      currentNavKey.value = id;
-    };
-    watch(currentNavKey, val => {
-      if (!val) return;
-      const nav = props.userMenu.find(item => item.id === val);
-      if (nav) {
-        siderMenu.value = nav.subList;
-      }
-    }, {
-      immediate: true,
-      flush: "post"
-    });
-    const currMenu = ref();
-    const handleMenuSelect = menu => {
-      currMenu.value = menu;
-    };
-    return () => createVNode("div", {
-      "class": "Layout"
-    }, [createVNode(Layout$1, null, {
-      default: () => [createVNode(LayoutHeader, null, {
-        default: () => [createVNode(Header, {
-          "menu": props.userMenu,
-          "onNavSelect": handleNavSelect,
-          "userInfo": props.userInfo,
-          "extraPages": props.extraPages,
-          "messageCount": props.messageCount,
-          "logo": props.logo
-        }, null)]
-      }), createVNode(Layout$1, null, {
-        default: () => [createVNode(LayoutSider, {
-          "width": "10.416vw",
-          "collapsedWidth": "3.125vw",
-          "collapsed": isFolder.value
-        }, {
-          default: () => [createVNode("div", {
-            "class": "folder",
-            "onClick": () => toggleFolder()
-          }, [isFolder.value ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]), createVNode(SideMenu, {
-            "menu": siderMenu.value,
-            "onMenuSelect": handleMenuSelect,
-            "extraPages": props.extraPages
-          }, null), createVNode("div", {
-            "class": "copyright"
-          }, [props.copyRight])]
-        }), createVNode(LayoutContent, null, {
-          default: () => [createVNode(PageContent, {
-            "currMenu": currMenu.value,
-            "menu": props.userMenu,
-            "extraPages": props.extraPages
-          }, null)]
-        })]
-      })]
-    })]);
-  }
-});
-var index = installComponent(Layout, "layout");
-
-export { index$2 as Demo, index$1 as IconFont, index as Layout };