@gx-design-vue/pro-layout 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/TabsRoute/utils/config.js

@@ -1,64 +0,0 @@
-import { createVNode } from "vue";
-import { isBoolean } from "@gx-design-vue/pro-utils";
-import { CloseOutlined, ExportOutlined, FullscreenExitOutlined, FullscreenOutlined, ReloadOutlined, SwapOutlined, VerticalAlignMiddleOutlined, VerticalLeftOutlined, VerticalRightOutlined } from "@ant-design/icons-vue";
-import { GIcon } from "@gx-design-vue/icon";
-
-//#region src/components/TabsRoute/utils/config.tsx
-const tabsMenuList = [
-	{
-		key: "fixed",
-		label: "置顶",
-		icon: (value) => createVNode(GIcon, { "type": value ? "unpin" : "pin" }, null)
-	},
-	{
-		key: "close",
-		label: "关闭",
-		icon: createVNode(CloseOutlined, null, null)
-	},
-	{
-		key: "fullScreen",
-		icon: (value) => value ? createVNode(FullscreenExitOutlined, null, null) : createVNode(FullscreenOutlined, null, null)
-	},
-	{
-		key: "reloadPage",
-		label: "重新加载",
-		icon: createVNode(ReloadOutlined, null, null)
-	},
-	{
-		key: "newBlank",
-		label: "新窗口打开",
-		icon: createVNode(ExportOutlined, null, null)
-	},
-	{ key: "divider" },
-	{
-		key: "closeLeftTabs",
-		label: "关闭左侧",
-		icon: createVNode(VerticalRightOutlined, null, null)
-	},
-	{
-		key: "closeRightTabs",
-		label: "关闭右侧",
-		icon: createVNode(VerticalLeftOutlined, null, null)
-	},
-	{ key: "divider" },
-	{
-		key: "closeOthersTabs",
-		label: "关闭其他",
-		icon: createVNode(VerticalAlignMiddleOutlined, { "rotate": 90 }, null)
-	},
-	{
-		key: "closeAllTabs",
-		label: "关闭全部",
-		icon: createVNode(SwapOutlined, null, null)
-	}
-];
-function handleTabsMenuName(record, options) {
-	const { fixed } = options.tabs;
-	const isFixed = isBoolean(fixed) ? fixed : fixed === 0;
-	if (record.key === "fixed") return isFixed ? "取消置顶" : "置顶";
-	else if (record.key === "fullScreen") return options.fullScreen ? "还原" : "最大化";
-	return record.label;
-}
-
-//#endregion
-export { handleTabsMenuName, tabsMenuList };

package/dist/config/animate.d.ts

@@ -1,11 +0,0 @@
-//#region src/config/animate.d.ts
-interface AnimateConfig {
-  preset: {
-    name: string;
-    alias: string;
-    directions: string[];
-  }[];
-}
-declare const animateSetting: AnimateConfig;
-//#endregion
-export { AnimateConfig, animateSetting };

package/dist/config/animate.js

@@ -1,76 +0,0 @@
-//#region src/config/animate.ts
-const direct_s = ["left", "right"];
-const direct_1 = [
-	"left",
-	"right",
-	"down",
-	"up"
-];
-const direct_1_b = [
-	"downBig",
-	"upBig",
-	"leftBig",
-	"rightBig"
-];
-const direct_2 = [
-	"topLeft",
-	"bottomRight",
-	"topRight",
-	"bottomLeft"
-];
-const direct_3 = [
-	"downLeft",
-	"upRight",
-	"downRight",
-	"upLeft"
-];
-const animateSetting = { preset: [
-	{
-		name: "back",
-		alias: "渐近",
-		directions: direct_1
-	},
-	{
-		name: "bounce",
-		alias: "弹跳",
-		directions: direct_1.concat("default")
-	},
-	{
-		name: "fade",
-		alias: "淡化",
-		directions: direct_1.concat(direct_1_b).concat(direct_2).concat("default")
-	},
-	{
-		name: "flip",
-		alias: "翻转",
-		directions: ["x", "y"]
-	},
-	{
-		name: "lightSpeed",
-		alias: "光速",
-		directions: direct_s
-	},
-	{
-		name: "rotate",
-		alias: "旋转",
-		directions: direct_3.concat("default")
-	},
-	{
-		name: "roll",
-		alias: "翻滚",
-		directions: ["default"]
-	},
-	{
-		name: "zoom",
-		alias: "缩放",
-		directions: direct_1.concat("default")
-	},
-	{
-		name: "slide",
-		alias: "滑动",
-		directions: direct_1
-	}
-] };
-
-//#endregion
-export { animateSetting };

package/dist/config/index.d.ts

@@ -1,34 +0,0 @@
-import { BaseTheme } from "@gx-design-vue/context";
-import { ProAliasToken } from "@gx-design-vue/pro-provider";
-
-//#region src/config/index.d.ts
-type ProLayoutType = 'side' | 'mix' | 'simple' | 'wide' | 'top';
-interface ProLayoutConfig {
-  title: string;
-  layout: ProLayoutType;
-  splitMenus: boolean;
-  fixedHeader: boolean;
-  fixSiderbar: boolean;
-  showTabsBar: boolean;
-  fixedTabsBar: boolean;
-  headerHeight?: number | string;
-  wideWidth?: number | string;
-  siderWidth?: number | string;
-  contentWidth?: number | string;
-  iconfontUrl?: string;
-  animate?: {
-    disabled?: boolean;
-    name: string;
-    direction: string;
-  };
-}
-declare function getTokenLayoutTheme(token: ProAliasToken): {
-  theme: BaseTheme;
-  layout: ProLayoutType;
-};
-/**
- * @description 导出默认主题配置
- */
-declare const defaultSettings: ProLayoutConfig;
-//#endregion
-export { ProLayoutConfig, ProLayoutType, defaultSettings, getTokenLayoutTheme };

package/dist/config/index.js

@@ -1,30 +0,0 @@
-//#region src/config/index.ts
-function getTokenLayoutTheme(token) {
-	const keys = token.layout?.key?.split(":") || [];
-	return {
-		theme: keys[0],
-		layout: keys[1]
-	};
-}
-/**
-* @description 导出默认主题配置
-*/
-const defaultSettings = {
-	layout: "mix",
-	title: "GX Pro Admin",
-	wideWidth: 1300,
-	headerHeight: 48,
-	siderWidth: 215,
-	fixedHeader: true,
-	fixSiderbar: true,
-	splitMenus: true,
-	showTabsBar: true,
-	fixedTabsBar: true,
-	animate: {
-		name: "fade",
-		direction: "default"
-	}
-};
-
-//#endregion
-export { defaultSettings, getTokenLayoutTheme };

package/dist/hooks/collapsed/index.d.ts

@@ -1,15 +0,0 @@
-import { ComputedRef, Ref } from "vue";
-
-//#region src/hooks/collapsed/index.d.ts
-type Ref$1<T> = Ref<T> | ComputedRef<T>;
-declare function useCollapsed(outCollapsed: Ref$1<boolean>, props?: {
-  rectEl?: Ref$1<HTMLElement | undefined>;
-  footEl?: Ref$1<HTMLElement | undefined>;
-  disabled?: boolean;
-  distance?: number;
-}): {
-  innerCollapsed: Ref<boolean, boolean>;
-  setInnerCollapsed: (val: boolean) => void;
-};
-//#endregion
-export { useCollapsed };

package/dist/hooks/collapsed/index.js

@@ -1,50 +0,0 @@
-import { watch } from "vue";
-import { useState } from "@gx-design-vue/pro-hooks";
-import { useMouse, watchThrottled } from "@vueuse/core";
-
-//#region src/hooks/collapsed/index.ts
-function useCollapsed(outCollapsed, props) {
-	const { x, y } = useMouse();
-	const [innerCollapsed, setInnerCollapsed] = useState(false);
-	if (!props?.disabled) {
-		let stop;
-		watch(() => outCollapsed.value, (val) => {
-			if (val) stop = watchThrottled([() => x.value, () => y.value], ([distanceX, distanceY]) => {
-				toggleCollapsed(distanceX, distanceY);
-			}, { throttle: 60 });
-			else {
-				stop?.();
-				setInnerCollapsed(false);
-			}
-		}, { immediate: true });
-	}
-	function isPointInRect(x, y, rect) {
-		return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
-	}
-	function isPointInElements(x, y, elements) {
-		return elements.some((el) => {
-			if (!el) return false;
-			return isPointInRect(x, y, el.getBoundingClientRect());
-		});
-	}
-	function toggleCollapsed(distanceX, distanceY) {
-		const rectEl = props?.rectEl?.value;
-		const footEl = props?.footEl?.value;
-		if (!rectEl) return;
-		const distance = props?.distance || 50;
-		if (distanceX <= distance && !innerCollapsed.value) {
-			setInnerCollapsed(true);
-			return;
-		}
-		if (!innerCollapsed.value) return;
-		if (distanceX <= distance) return;
-		if (!isPointInElements(distanceX, distanceY, [rectEl, footEl])) setInnerCollapsed(false);
-	}
-	return {
-		innerCollapsed,
-		setInnerCollapsed
-	};
-}
-
-//#endregion
-export { useCollapsed };

package/dist/hooks/layout/useLayoutExpose.d.ts

@@ -1,15 +0,0 @@
-import { AppRouteModule } from "../../types/RouteTypings.js";
-
-//#region src/hooks/layout/useLayoutExpose.d.ts
-declare function useLayoutExpose(): {
-  tabsRouter: {
-    clean: () => void;
-    close: (options?: {
-      name?: AppRouteModule["name"];
-      callback?: (row: AppRouteModule) => void;
-    }) => void;
-    update: (params: Partial<AppRouteModule>, route?: AppRouteModule) => void;
-  };
-};
-//#endregion
-export { useLayoutExpose };

package/dist/hooks/layout/useLayoutExpose.js

@@ -1,22 +0,0 @@
-import { useProLayoutExposeContext } from "../../Context/expose.js";
-import { useRoute, useRouter } from "vue-router";
-
-//#region src/hooks/layout/useLayoutExpose.ts
-function useLayoutExpose() {
-	const route = useRoute();
-	const router = useRouter();
-	const { tabsRouteRef } = useProLayoutExposeContext();
-	return { tabsRouter: {
-		clean: () => tabsRouteRef.value?.clean(),
-		close: (options) => tabsRouteRef.value?.close(options?.name || route.name, options?.callback),
-		update: (params, route) => {
-			tabsRouteRef.value?.update(route || router.currentRoute.value, {
-				type: "merge",
-				params
-			});
-		}
-	} };
-}
-
-//#endregion
-export { useLayoutExpose };

package/dist/hooks/layout/usePageContent.d.ts

@@ -1,6 +0,0 @@
-import * as vue204 from "vue";
-
-//#region src/hooks/layout/usePageContent.d.ts
-declare function usePageContent(count?: number): vue204.ComputedRef<string>;
-//#endregion
-export { usePageContent };

package/dist/hooks/layout/usePageContent.js

@@ -1,28 +0,0 @@
-import { useProLayoutContext } from "../../Context/index.js";
-import { computed } from "vue";
-import { unit, useProConfigContext } from "@gx-design-vue/pro-provider";
-
-//#region src/hooks/layout/usePageContent.ts
-function usePageContent(count = 0) {
-	const { token } = useProConfigContext();
-	const { settings } = useProLayoutContext();
-	return computed(() => {
-		const headerHeight = token.value?.layout?.header?.heightLayoutHeader ?? settings.value?.headerHeight ?? 48;
-		const margin = token.value?.layout?.pageContainer?.margin || "";
-		const padding = token.value?.layout?.pageContainer?.padding || "";
-		const marginBlock = margin?.split(" ")?.[0];
-		const paddingBlock = padding?.split(" ")?.[0];
-		const blockMarginStr = marginBlock ? `(${marginBlock} * 2)` : 0;
-		const blockPaddingStr = paddingBlock ? `(${paddingBlock} * 2)` : 0;
-		return `calc(100vh - ${[
-			headerHeight,
-			settings.value?.showTabsBar ? 40 : 0,
-			blockMarginStr,
-			blockPaddingStr,
-			count
-		].filter(Boolean).map((item) => unit(item)).join(" - ")})`;
-	});
-}
-
-//#endregion
-export { usePageContent };

package/dist/hooks/menu/context.d.ts

@@ -1,21 +0,0 @@
-import { AppRouteModule } from "../../types/RouteTypings.js";
-import { MenuData } from "../../utils/menu.js";
-import { ComputedRef, Ref } from "vue";
-
-//#region src/hooks/menu/context.d.ts
-interface ProLayoutMenuContext {
-  update: () => void;
-  names: Ref<string[]>;
-  menuData: Ref<AppRouteModule[]>;
-  menuMap: Ref<MenuData['menuMap']>;
-  flatMenus: Ref<AppRouteModule[]>;
-  matchedMenu: ComputedRef<AppRouteModule[]>;
-  matchedKeys: {
-    openKeys: string[];
-    selectedKeys: string[];
-  };
-  syncMatchedKeys: (timer?: number) => void;
-}
-declare const provideProLayoutMenuContext: (value: ProLayoutMenuContext) => void, useProLayoutMenuContext: (injectDefaultValue?: ProLayoutMenuContext) => ProLayoutMenuContext;
-//#endregion
-export { provideProLayoutMenuContext, useProLayoutMenuContext };

package/dist/hooks/menu/context.js

@@ -1,7 +0,0 @@
-import { useContext } from "@gx-design-vue/context";
-
-//#region src/hooks/menu/context.ts
-const { provideContext: provideProLayoutMenuContext, useInjectContext: useProLayoutMenuContext } = useContext("pro-layout-menu");
-
-//#endregion
-export { provideProLayoutMenuContext, useProLayoutMenuContext };

package/dist/hooks/menu/index.d.ts

@@ -1,29 +0,0 @@
-import { AppRouteModule } from "../../types/RouteTypings.js";
-import { ProRoute } from "../../types/Breadcrumb.js";
-import { MenuData } from "../../utils/menu.js";
-import { ComputedRef, MaybeRef, Ref } from "vue";
-
-//#region src/hooks/menu/index.d.ts
-interface MenuState {
-  menuMap: MenuData['menuMap'];
-  flatMenus: AppRouteModule[];
-  names: string[];
-}
-declare function export_default(options?: {
-  menuData?: MaybeRef<any[]>;
-  defaultOpen?: boolean;
-  autoClose?: boolean;
-  currentName?: ComputedRef<string>;
-}): {
-  update: () => void;
-  menuState: MenuState;
-  menuData: Ref<AppRouteModule[]>;
-  matchedKeys: {
-    openKeys: string[];
-    selectedKeys: string[];
-  };
-  matchedMenu: ComputedRef<AppRouteModule[]>;
-  breadcrumbRouters: ComputedRef<ProRoute[]>;
-};
-//#endregion
-export { MenuState, export_default as default };

package/dist/hooks/menu/index.js

@@ -1,118 +0,0 @@
-import { provideProLayoutMenuContext } from "./context.js";
-import { clearMenuItem, getLastPath, getMatchedList, getMenuData } from "../../utils/menu.js";
-import { computed, isRef, onMounted, reactive, ref, toRaw, toRefs, unref, watch } from "vue";
-import { cloneDeep } from "@gx-design-vue/pro-utils";
-import { useRouter } from "vue-router";
-
-//#region src/hooks/menu/index.ts
-function menu_default(options) {
-	const router = useRouter();
-	const defaultOpen = options?.defaultOpen ?? true;
-	const autoClose = options?.autoClose ?? true;
-	const routeData = router.getRoutes();
-	const menuData = ref([]);
-	const menuState = reactive({
-		menuMap: /* @__PURE__ */ new Map(),
-		flatMenus: [],
-		names: []
-	});
-	const matchedKeys = reactive({
-		openKeys: [],
-		selectedKeys: []
-	});
-	const currentRoute = computed(() => router.currentRoute.value);
-	const currentName = computed(() => options?.currentName?.value ?? currentRoute.value?.name);
-	function flattenMenu(menuData, flatMenus = [], map = /* @__PURE__ */ new Map()) {
-		for (const item of menuData) {
-			flatMenus.push(toRaw(item));
-			map.set(item.name, toRaw(item));
-			if (item.children?.length) flattenMenu(item.children, flatMenus, map);
-		}
-		return {
-			flatMenus,
-			map
-		};
-	}
-	const handleMenuData = (data) => {
-		const menuInfos = getMenuData(clearMenuItem(data));
-		menuData.value = cloneDeep(menuInfos.menuData);
-		menuState.menuMap = menuInfos.menuMap;
-		menuState.flatMenus = menuInfos.flatMenus;
-		menuState.names = menuInfos.flatMenus.map((item) => item.name);
-	};
-	if (options?.menuData) watch(() => isRef(options.menuData) ? options.menuData.value : options.menuData, (data) => {
-		handleMenuData(data || []);
-	}, { deep: true });
-	handleMenuData(options?.menuData ? isRef(options.menuData) ? options.menuData.value : options.menuData : routeData);
-	const matchedMenu = computed(() => {
-		return getMatchedList({
-			menuMap: menuState.menuMap,
-			flatMenus: menuState.flatMenus
-		}, currentName.value);
-	});
-	const breadcrumbRouters = computed(() => {
-		function setBreadcrumbData(row) {
-			const path = getLastPath(row.meta?.hideChildrenInMenu ? [] : row.children || []);
-			return {
-				name: row.name,
-				icon: row.meta?.icon || "",
-				path: row.redirect || path || row.path || "",
-				breadcrumbName: row.meta?.title || "",
-				children: row.children && row.children?.length > 1 ? row.children?.filter((item) => !(item.meta?.hidden || item.meta?.hideInMenu))?.map((item) => setBreadcrumbData(item)).filter((item) => item.breadcrumbName) : []
-			};
-		}
-		const list = matchedMenu.value.filter((item) => !(item.meta?.hidden || item.meta?.hideInMenu)).map((item) => setBreadcrumbData(item)).filter((item) => item.breadcrumbName);
-		if (currentRoute.value?.meta?.menuSelectKey) list.push({
-			name: currentRoute.value.name,
-			icon: currentRoute.value.meta?.icon || "",
-			path: currentRoute.value.path || "",
-			breadcrumbName: currentRoute.value.meta?.title || ""
-		});
-		return list;
-	});
-	const update = () => {
-		const { flatMenus, map } = flattenMenu(unref(menuData));
-		menuState.flatMenus = flatMenus;
-		menuState.menuMap = map;
-		menuState.names = flatMenus.map((item) => item.name);
-	};
-	const getOpenKeys = () => {
-		matchedKeys.openKeys = matchedMenu.value.filter((item) => item.name !== currentName.value).map((item) => item.name);
-	};
-	watch(() => currentRoute.value, (route) => {
-		if (route) {
-			matchedKeys.selectedKeys = matchedMenu.value.map((item) => item.name);
-			if (autoClose) getOpenKeys();
-		}
-	}, {
-		immediate: true,
-		deep: true
-	});
-	onMounted(() => {
-		if (defaultOpen) getOpenKeys();
-	});
-	provideProLayoutMenuContext({
-		...toRefs(menuState),
-		syncMatchedKeys: (time = 60) => {
-			setTimeout(() => {
-				matchedKeys.selectedKeys = matchedMenu.value.map((item) => item.name);
-				getOpenKeys();
-			}, time);
-		},
-		update,
-		menuData,
-		matchedMenu,
-		matchedKeys
-	});
-	return {
-		update,
-		menuState,
-		menuData,
-		matchedKeys,
-		matchedMenu,
-		breadcrumbRouters
-	};
-}
-
-//#endregion
-export { menu_default as default };

package/dist/hooks/theme/index.d.ts

@@ -1,11 +0,0 @@
-import * as vue263 from "vue";
-import { ThemeValue } from "@gx-design-vue/context";
-import * as _vueuse_core0 from "@vueuse/core";
-
-//#region src/hooks/theme/index.d.ts
-declare function export_default(value?: ThemeValue): {
-  theme: vue263.Ref<ThemeValue, ThemeValue>;
-  isDark: _vueuse_core0.UseDarkReturn;
-};
-//#endregion
-export { export_default as default };

package/dist/hooks/theme/index.js

@@ -1,13 +0,0 @@
-import { ref } from "vue";
-import { useDark } from "@vueuse/core";
-
-//#region src/hooks/theme/index.ts
-function theme_default(value) {
-	return {
-		theme: ref(value ?? "system"),
-		isDark: useDark()
-	};
-}
-
-//#endregion
-export { theme_default as default };

package/dist/props/collapsedProps.d.ts

@@ -1,39 +0,0 @@
-import { CollapsedButtonRender, CollapsedIconRender } from "../types/SlotsTypings.js";
-import { CollapsedProps } from "../types/typings.js";
-import { PropType } from "vue";
-
-//#region src/props/collapsedProps.d.ts
-declare const commonCollapsedProps: {
-  collapsedButtonRender: {
-    type: PropType<CollapsedButtonRender>;
-    default: () => any;
-  };
-  collapsedIconRender: {
-    type: PropType<CollapsedIconRender>;
-    default: () => any;
-  };
-};
-declare const _default: {
-  collapsedButtonRender: {
-    type: PropType<CollapsedButtonRender>;
-    default: () => any;
-  };
-  collapsedIconRender: {
-    type: PropType<CollapsedIconRender>;
-    default: () => any;
-  };
-  position: {
-    type: PropType<CollapsedProps["position"]>;
-    default: string;
-  };
-  collapsed: PropType<CollapsedProps["value"]>;
-  width: {
-    type: PropType<CollapsedProps["width"]>;
-    default: number;
-  };
-  onCollapse: {
-    type: PropType<CollapsedProps["onCollapse"]>;
-  };
-};
-//#endregion
-export { commonCollapsedProps, _default as default };

package/dist/props/collapsedProps.js

@@ -1,45 +0,0 @@
-//#region src/props/collapsedProps.ts
-const commonCollapsedProps = {
-	collapsedButtonRender: {
-		type: [
-			Function,
-			Object,
-			Boolean,
-			Array,
-			String,
-			Number
-		],
-		default: () => void 0
-	},
-	collapsedIconRender: {
-		type: [
-			Function,
-			Object,
-			Boolean,
-			Array,
-			String,
-			Number
-		],
-		default: () => void 0
-	}
-};
-var collapsedProps_default = {
-	position: {
-		type: [
-			Object,
-			Boolean,
-			String
-		],
-		default: "fixed"
-	},
-	collapsed: Boolean,
-	width: {
-		type: Number,
-		default: 64
-	},
-	onCollapse: { type: Function },
-	...commonCollapsedProps
-};
-
-//#endregion
-export { commonCollapsedProps, collapsedProps_default as default };