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

package/dist/components/Menu/style/index.d.ts

@@ -0,0 +1,356 @@
+import { CSSProperties } from "vue";
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { GetDefaultToken } from "antdv-next/dist/theme/internal";
+
+//#region src/components/Menu/style/index.d.ts
+/** Component only token. Which will handle additional calculation of alias token */
+interface ComponentToken {
+  /**
+   * @desc 弹出菜单的宽度
+   * @descEN Width of popup menu
+   */
+  dropdownWidth: number | string;
+  /**
+   * @desc 弹出菜单的 z-index
+   * @descEN z-index of popup menu
+   */
+  zIndexPopup: number;
+  /** @deprecated Use `groupTitleColor` instead */
+  colorGroupTitle: string;
+  /**
+   * @desc 分组标题文字颜色
+   * @descEN Color of group title text
+   */
+  groupTitleColor: string;
+  /**
+   * @desc 分组标题文字高度
+   * @descEN line-height of group title
+   */
+  groupTitleLineHeight: string | number;
+  /**
+   * @desc 分组标题文字大小
+   * @descEN font-size of group title
+   */
+  groupTitleFontSize: number;
+  /** @deprecated Use `itemBorderRadius` instead */
+  radiusItem: number;
+  /**
+   * @desc 菜单项的圆角
+   * @descEN Radius of menu item
+   */
+  itemBorderRadius: number;
+  /** @deprecated Use `subMenuItemBorderRadius` instead */
+  radiusSubMenuItem: number;
+  /**
+   * @desc 子菜单项的圆角
+   * @descEN Radius of sub-menu item
+   */
+  subMenuItemBorderRadius: number;
+  /** @deprecated Use `itemColor` instead */
+  colorItemText: string;
+  /**
+   * @desc 菜单项文字颜色
+   * @descEN Color of menu item text
+   */
+  itemColor: string;
+  /** @deprecated Use `itemHoverColor` instead */
+  colorItemTextHover: string;
+  /**
+   * @desc 菜单项文字悬浮颜色
+   * @descEN Hover color of menu item text
+   */
+  itemHoverColor: string;
+  /** @deprecated Use `horizontalItemHoverColor` instead */
+  colorItemTextHoverHorizontal: string;
+  /**
+   * @desc 水平菜单项文字悬浮颜色
+   * @descEN Hover color of horizontal menu item text
+   */
+  horizontalItemHoverColor: string;
+  /** @deprecated Use `itemSelectedColor` instead */
+  colorItemTextSelected: string;
+  /**
+   * @desc 菜单项文字选中颜色
+   * @descEN Color of selected menu item text
+   */
+  itemSelectedColor: string;
+  /**
+   * @desc 子菜单内有选中项时，子菜单标题色
+   * @descEN Color of submenu title when submenu has selected item
+   */
+  subMenuItemSelectedColor: string;
+  /** @deprecated Use `horizontalItemSelectedColor` instead */
+  colorItemTextSelectedHorizontal: string;
+  /**
+   * @desc 水平菜单项文字选中颜色
+   * @descEN Color of selected horizontal menu item text
+   */
+  horizontalItemSelectedColor: string;
+  /** @deprecated Use `itemDisabledColor` instead */
+  colorItemTextDisabled: string;
+  /**
+   * @desc 菜单项文字禁用颜色
+   * @descEN Color of disabled menu item text
+   */
+  itemDisabledColor: string;
+  /** @deprecated Use `dangerItemColor` instead */
+  colorDangerItemText: string;
+  /**
+   * @desc 危险菜单项文字颜色
+   * @descEN Color of danger menu item text
+   */
+  dangerItemColor: string;
+  /** @deprecated Use `dangerItemHoverColor` instead */
+  colorDangerItemTextHover: string;
+  /**
+   * @desc 危险菜单项文字悬浮颜色
+   * @descEN Hover color of danger menu item text
+   */
+  dangerItemHoverColor: string;
+  /** @deprecated Use `dangerItemSelectedColor` instead */
+  colorDangerItemTextSelected: string;
+  /**
+   * @desc 危险菜单项文字选中颜色
+   * @descEN Color of selected danger menu item text
+   */
+  dangerItemSelectedColor: string;
+  /** @deprecated Use `dangerItemActiveBg` instead */
+  colorDangerItemBgActive: string;
+  /**
+   * @desc 危险菜单项激活态背景色
+   * @descEN Background color of danger menu item when active
+   */
+  dangerItemActiveBg: string;
+  /** @deprecated Use `dangerItemSelectedBg` instead */
+  colorDangerItemBgSelected: string;
+  /**
+   * @desc 危险菜单项选中背景色
+   * @descEN Background color of selected danger item
+   */
+  dangerItemSelectedBg: string;
+  /** @deprecated Use `itemBg` instead */
+  colorItemBg: string;
+  /**
+   * @desc 菜单项背景色
+   */
+  itemBg: string;
+  /** @deprecated Use `itemHoverBg` instead */
+  colorItemBgHover: string;
+  /**
+   * @desc 菜单项悬浮态背景色
+   * @descEN Background color of menu item when hover
+   */
+  itemHoverBg: string;
+  /** @deprecated Use `subMenuItemBg` instead */
+  colorSubItemBg: string;
+  /**
+   * @desc 子菜单项背景色
+   * @descEN Background color of sub-menu item
+   */
+  subMenuItemBg: string;
+  /** @deprecated Use `itemActiveBg` instead */
+  colorItemBgActive: string;
+  /**
+   * @desc 菜单项激活态背景色
+   * @descEN Background color of menu item when active
+   */
+  itemActiveBg: string;
+  /** @deprecated Use `itemSelectedBg` instead */
+  colorItemBgSelected: string;
+  /**
+   * @desc 菜单项选中态背景色
+   * @descEN Background color of menu item when selected
+   */
+  itemSelectedBg: string;
+  /** @deprecated Use `horizontalItemSelectedBg` instead */
+  colorItemBgSelectedHorizontal: string;
+  /**
+   * @desc 水平菜单项选中态背景色
+   * @descEN Background color of horizontal menu item when selected
+   */
+  horizontalItemSelectedBg: string;
+  /** @deprecated Use `activeBarWidth` instead */
+  colorActiveBarWidth: number | string;
+  /**
+   * @desc 菜单项指示条宽度
+   * @descEN Width of menu item active bar
+   */
+  activeBarWidth: number | string;
+  /** @deprecated Use `activeBarHeight` instead */
+  colorActiveBarHeight: number;
+  /**
+   * @desc 菜单项指示条高度
+   * @descEN Height of menu item active bar
+   */
+  activeBarHeight: number;
+  /** @deprecated Use `activeBarBorderWidth` instead */
+  colorActiveBarBorderSize: number;
+  /**
+   * @desc 菜单项指示条边框宽度
+   * @descEN Border width of menu item active bar
+   */
+  activeBarBorderWidth: number | string;
+  /**
+   * @desc 菜单项横向外间距
+   * @descEN Horizontal margin of menu item
+   */
+  itemMarginInline: number;
+  /**
+   * @desc 横向菜单项悬浮态背景色
+   * @descEN Background color of horizontal menu item when hover
+   */
+  horizontalItemHoverBg: string;
+  /**
+   * @desc 菜单项高度
+   * @descEN Height of menu item
+   */
+  itemHeight: number | string;
+  /**
+   * @desc 收起后的宽度
+   * @descEN Width when collapsed
+   */
+  collapsedWidth: number | string;
+  /**
+   * @desc 弹出框背景色
+   * @descEN Background color of popup
+   */
+  popupBg: string;
+  /**
+   * @desc 菜单项纵向外间距
+   * @descEN margin-block of menu item
+   */
+  itemMarginBlock: CSSProperties['marginBlock'];
+  /**
+   * @desc 菜单项横向内间距
+   * @descEN padding-inline of menu item
+   */
+  itemPaddingInline: CSSProperties['paddingInline'];
+  /**
+   * @desc 图标与文字间距
+   * @descEN Spacing between icon and text
+   */
+  iconMarginInlineEnd: CSSProperties['marginInlineEnd'];
+  /**
+   * @desc 图标尺寸
+   * @descEN Size of icon
+   */
+  iconSize: number;
+  /**
+   * @desc 收起时图标尺寸
+   * @descEN Size of icon when collapsed
+   */
+  collapsedIconSize: number;
+  /**
+   * @desc 暗色模式下的浮层菜单的背景颜色
+   * @descEN The background color of the overlay menu in dark mode.
+   */
+  darkPopupBg: string;
+  /**
+   * @desc 暗色模式下的菜单项文字颜色
+   * @descEN Color of menu item text in dark mode
+   */
+  darkItemColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项文字颜色
+   * @descEN Color of danger menu item text in dark mode
+   */
+  darkDangerItemColor: string;
+  /**
+   * @desc 暗色模式下的菜单项背景
+   * @descEN Background of menu item in dark mode
+   */
+  darkItemBg: string;
+  /**
+   * @desc 暗色模式下的子菜单项背景
+   * @descEN Background of submenu item in dark mode
+   */
+  darkSubMenuItemBg: string;
+  /**
+   * @desc 暗色模式下的菜单项选中颜色
+   * @descEN Color of selected menu item in dark mode
+   */
+  darkItemSelectedColor: string;
+  /**
+   * @desc 暗色模式下的菜单项选中背景
+   * @descEN Background of active menu item in dark mode
+   */
+  darkItemSelectedBg: string;
+  /**
+   * @desc 暗色模式下的菜单项悬浮背景
+   * @descEN Background of hovered menu item in dark mode
+   */
+  darkItemHoverBg: string;
+  /**
+   * @desc 暗色模式下的分组标题文字颜色
+   * @descEN Color of group title text in dark mode
+   */
+  darkGroupTitleColor: string;
+  /**
+   * @desc 暗色模式下的菜单项悬浮颜色
+   * @descEN Color of hovered menu item in dark mode
+   */
+  darkItemHoverColor: string;
+  /**
+   * @desc 暗色模式下的菜单项禁用颜色
+   * @descEN Color of disabled menu item in dark mode
+   */
+  darkItemDisabledColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项选中背景
+   * @descEN Background of active danger menu item in dark mode
+   */
+  darkDangerItemSelectedBg: string;
+  /**
+   * @desc 暗色模式下的危险菜单项悬浮文字背景
+   * @descEN Background of hovered danger menu item in dark mode
+   */
+  darkDangerItemHoverColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项选中文字颜色
+   * @descEN Color of selected danger menu item in dark mode
+   */
+  darkDangerItemSelectedColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项激活态背景
+   * @descEN Background of active danger menu item
+   */
+  darkDangerItemActiveBg: string;
+  /**
+   * @desc 水平菜单项行高
+   * @descEN LineHeight of horizontal menu item
+   */
+  horizontalLineHeight: CSSProperties['lineHeight'];
+  /**
+   * @desc 水平菜单项圆角
+   * @descEN Border radius of horizontal menu item
+   */
+  horizontalItemBorderRadius: number;
+  /** @internal */
+  itemWidth: number | string;
+}
+interface MenuToken extends ProFullToken<'ProMenu'> {
+  /**
+   * @desc 水平菜单高度
+   * @descEN Height of horizontal menu
+   */
+  menuHorizontalHeight: number | string;
+  /**
+   * @desc 菜单箭头尺寸
+   * @descEN Size of menu arrow
+   */
+  menuArrowSize: number | string;
+  /**
+   * @desc 菜单箭头偏移量
+   * @descEN Offset of menu arrow
+   */
+  menuArrowOffset: number | string;
+  /**
+   * @desc 子菜单背景色
+   * @descEN Background color of sub-menu
+   */
+  menuSubMenuBg: string;
+}
+declare const prepareComponentToken: GetDefaultToken<'ProMenu'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, MenuToken, _default as default, prepareComponentToken };

package/dist/components/Menu/style/index.js

@@ -0,0 +1,147 @@
+import genBaseStyle from "./base.js";
+import genHorizontalStyle from "./horizontal.js";
+import genInlineStyle from "./inline.js";
+import { proGenStyleHooks, setAlpha } from "@gx-design-vue/pro-provider";
+import { unit as unit$1 } from "@antdv-next/cssinjs";
+import { mergeToken } from "antdv-next/dist/theme/internal";
+//#region src/components/Menu/style/index.ts
+function hasActiveBarWidth(activeBarWidth) {
+	if (activeBarWidth == null) return false;
+	if (typeof activeBarWidth === "number") return activeBarWidth !== 0;
+	const width = activeBarWidth.trim();
+	if (!width) return false;
+	const numericWidth = Number.parseFloat(width);
+	return Number.isNaN(numericWidth) || numericWidth !== 0;
+}
+const prepareComponentToken = (token) => {
+	const { colorPrimary, colorError, colorTextDisabled, colorErrorBg, colorText, colorTextDescription, colorBgContainer, colorFillAlter, colorFillContent, lineWidth, lineWidthBold, controlItemBgActive, colorBgTextHover, controlHeightLG, lineHeight, colorBgElevated, marginXXS, padding, fontSize, controlHeightSM, fontSizeLG, colorTextLightSolid, colorErrorHover } = token;
+	const activeBarWidth = token.activeBarWidth ?? 0;
+	const activeBarBorderWidth = token.activeBarBorderWidth ?? lineWidth;
+	const itemMarginInline = token.itemMarginInline ?? token.marginXXS;
+	const colorTextDark = setAlpha(colorTextLightSolid, .65);
+	return {
+		dropdownWidth: 160,
+		zIndexPopup: token.zIndexPopupBase + 50,
+		radiusItem: token.borderRadiusLG,
+		itemBorderRadius: token.borderRadiusLG,
+		radiusSubMenuItem: token.borderRadiusSM,
+		subMenuItemBorderRadius: token.borderRadiusSM,
+		colorItemText: colorText,
+		itemColor: colorText,
+		colorItemTextHover: colorText,
+		itemHoverColor: colorText,
+		colorItemTextHoverHorizontal: colorPrimary,
+		horizontalItemHoverColor: colorPrimary,
+		colorGroupTitle: colorTextDescription,
+		groupTitleColor: colorTextDescription,
+		colorItemTextSelected: colorPrimary,
+		itemSelectedColor: colorPrimary,
+		subMenuItemSelectedColor: colorPrimary,
+		colorItemTextSelectedHorizontal: colorPrimary,
+		horizontalItemSelectedColor: colorPrimary,
+		colorItemBg: colorBgContainer,
+		itemBg: colorBgContainer,
+		colorItemBgHover: colorBgTextHover,
+		itemHoverBg: colorBgTextHover,
+		colorItemBgActive: colorFillContent,
+		itemActiveBg: controlItemBgActive,
+		colorSubItemBg: colorFillAlter,
+		subMenuItemBg: colorFillAlter,
+		colorItemBgSelected: controlItemBgActive,
+		itemSelectedBg: controlItemBgActive,
+		colorItemBgSelectedHorizontal: "transparent",
+		horizontalItemSelectedBg: "transparent",
+		colorActiveBarWidth: 0,
+		activeBarWidth,
+		colorActiveBarHeight: lineWidthBold,
+		activeBarHeight: lineWidthBold,
+		colorActiveBarBorderSize: lineWidth,
+		activeBarBorderWidth,
+		colorItemTextDisabled: colorTextDisabled,
+		itemDisabledColor: colorTextDisabled,
+		colorDangerItemText: colorError,
+		dangerItemColor: colorError,
+		colorDangerItemTextHover: colorError,
+		dangerItemHoverColor: colorError,
+		colorDangerItemTextSelected: colorError,
+		dangerItemSelectedColor: colorError,
+		colorDangerItemBgActive: colorErrorBg,
+		dangerItemActiveBg: colorErrorBg,
+		colorDangerItemBgSelected: colorErrorBg,
+		dangerItemSelectedBg: colorErrorBg,
+		itemMarginInline,
+		horizontalItemHoverBg: "transparent",
+		itemHeight: controlHeightLG,
+		groupTitleLineHeight: lineHeight,
+		collapsedWidth: controlHeightLG * 2,
+		popupBg: colorBgElevated,
+		itemMarginBlock: marginXXS,
+		itemPaddingInline: padding,
+		iconSize: fontSize,
+		iconMarginInlineEnd: controlHeightSM - fontSize,
+		collapsedIconSize: fontSizeLG,
+		groupTitleFontSize: fontSize,
+		darkItemDisabledColor: setAlpha(colorTextLightSolid, .25),
+		darkItemColor: colorTextDark,
+		darkDangerItemColor: colorError,
+		darkItemBg: "#001529",
+		darkPopupBg: "#001529",
+		darkSubMenuItemBg: "#000c17",
+		darkItemSelectedColor: colorTextLightSolid,
+		darkItemSelectedBg: colorPrimary,
+		darkDangerItemSelectedBg: colorError,
+		darkItemHoverBg: "transparent",
+		darkGroupTitleColor: colorTextDark,
+		darkItemHoverColor: colorTextLightSolid,
+		darkDangerItemHoverColor: colorErrorHover,
+		darkDangerItemSelectedColor: colorTextLightSolid,
+		darkDangerItemActiveBg: colorError,
+		horizontalLineHeight: `${controlHeightLG * 1.15}px`,
+		horizontalItemBorderRadius: 0,
+		itemWidth: hasActiveBarWidth(activeBarWidth) ? `calc(100% + ${unit$1(activeBarBorderWidth)})` : `calc(100% - ${itemMarginInline * 2}px)`
+	};
+};
+const genMenuStyle = (token) => {
+	const menuArrowSize = token.calc(token.fontSize).div(7).mul(5).equal();
+	const menuToken = mergeToken(token, {
+		menuArrowSize,
+		menuHorizontalHeight: token.calc(token.controlHeightLG).mul(1.15).equal(),
+		menuArrowOffset: token.calc(menuArrowSize).mul(.25).equal(),
+		menuSubMenuBg: token.colorBgElevated
+	});
+	return [
+		genBaseStyle(menuToken),
+		genInlineStyle(menuToken),
+		genHorizontalStyle(menuToken)
+	];
+};
+var style_default = proGenStyleHooks("ProMenu", genMenuStyle, prepareComponentToken, {
+	deprecatedTokens: [
+		["colorGroupTitle", "groupTitleColor"],
+		["radiusItem", "itemBorderRadius"],
+		["radiusSubMenuItem", "subMenuItemBorderRadius"],
+		["colorItemText", "itemColor"],
+		["colorItemTextHover", "itemHoverColor"],
+		["colorItemTextHoverHorizontal", "horizontalItemHoverColor"],
+		["colorItemTextSelected", "itemSelectedColor"],
+		["colorItemTextSelectedHorizontal", "horizontalItemSelectedColor"],
+		["colorItemTextDisabled", "itemDisabledColor"],
+		["colorDangerItemText", "dangerItemColor"],
+		["colorDangerItemTextHover", "dangerItemHoverColor"],
+		["colorDangerItemTextSelected", "dangerItemSelectedColor"],
+		["colorDangerItemBgActive", "dangerItemActiveBg"],
+		["colorDangerItemBgSelected", "dangerItemSelectedBg"],
+		["colorItemBg", "itemBg"],
+		["colorItemBgHover", "itemHoverBg"],
+		["colorSubItemBg", "subMenuItemBg"],
+		["colorItemBgActive", "itemActiveBg"],
+		["colorItemBgSelectedHorizontal", "horizontalItemSelectedBg"],
+		["colorActiveBarWidth", "activeBarWidth"],
+		["colorActiveBarHeight", "activeBarHeight"],
+		["colorActiveBarBorderSize", "activeBarBorderWidth"],
+		["colorItemBgSelected", "itemSelectedBg"]
+	],
+	unitless: { groupTitleLineHeight: true }
+});
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/components/Menu/style/inline.d.ts

@@ -0,0 +1,13 @@
+import { MenuToken } from "./index.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/components/Menu/style/inline.d.ts
+/**
+ * Inline 模式样式。
+ *
+ * 只处理 inline 模式结构、状态和侧边栏 token 映射。
+ */
+declare const genInlineStyle: GenerateStyle<MenuToken, CSSObject>;
+//#endregion
+export { genInlineStyle as default };