@zboson/ui 0.0.0-stage → 0.0.2

package/dist/tabs/index.js

@@ -0,0 +1,380 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import useAnimateConfig from "./hooks/useAnimateConfig.js";
+import TabPane from "./TabPane.js";
+import useLegacyItems from "./hooks/useLegacyItems.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef, toRef } from "vue";
+import { clsx } from "@v-c/util";
+import { CloseOutlined, EllipsisOutlined, PlusOutlined } from "@zboson/icons";
+import { omit } from "es-toolkit";
+import VcTabs from "@v-c/tabs";
+//#region src/tabs/index.tsx
+const InternalTabs = /* @__PURE__ */ defineComponent((props, { attrs, slots, emit, expose }) => {
+	const { classes, styles, type, size: customSize, tabPlacement: tabPlacementProp, tabPosition, hideAdd, centered, indicatorSize } = toPropsRefs(props, "classes", "styles", "type", "size", "tabPlacement", "tabPosition", "hideAdd", "centered", "indicatorSize");
+	const more = toRef(props, "more");
+	const popupClassName = toRef(props, "popupClassName");
+	const indicator = toRef(props, "indicator");
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles, getPopupContainer, getPrefixCls, scrollPosition: contextScrollPosition } = useComponentBaseConfig("tabs", props, ["scrollPosition"]);
+	const size = useSize(customSize);
+	const mergedScrollPosition = computed(() => props.scrollPosition ?? contextScrollPosition.value);
+	const mergedPlacement = computed(() => {
+		const placement = tabPlacementProp.value ?? tabPosition.value;
+		const isRTL = direction.value === "rtl";
+		switch (placement) {
+			case "start": return isRTL ? "right" : "left";
+			case "end": return isRTL ? "left" : "right";
+			default: return placement;
+		}
+	});
+	const mergedItems = useLegacyItems(() => props.items, slots);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: size.value,
+			tabPlacement: mergedPlacement.value,
+			items: mergedItems.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps), computed(() => ({ popup: { _default: "root" } })));
+	const mergedAnimated = computed(() => useAnimateConfig(prefixCls.value, props.animated));
+	const mergedIndicator = computed(() => ({
+		align: indicator.value?.align,
+		size: indicator.value?.size ?? indicatorSize.value
+	}));
+	const tabsRef = shallowRef();
+	expose({ nativeElement: computed(() => tabsRef.value?.$el ?? tabsRef.value ?? null) });
+	if (isDev) {
+		const warning = devUseWarning("Tabs");
+		warning.deprecated(!popupClassName.value, "popupClassName", "classes.popup");
+		warning.deprecated(!tabPosition.value, "tabPosition", "tabPlacement");
+		warning(!(attrs.onPrevClick || attrs.onNextClick), "breaking", "`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.");
+		warning.deprecated(!indicatorSize.value, "indicatorSize", "indicator");
+		warning.deprecated(!(props.destroyInactiveTabPane || props.items?.some((item) => "destroyInactiveTabPane" in item)), "destroyInactiveTabPane", "destroyOnHidden");
+		if (more.value) [["visible", "open"], ["onVisibleChange", "onOpenChange"]].forEach(([deprecatedName, newName]) => {
+			warning.deprecated(!(deprecatedName in more.value), `more.${deprecatedName}`, `more.${newName}`);
+		});
+	}
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const onInternalChange = (activeKey) => {
+		emit("update:activeKey", activeKey);
+		emit("change", activeKey);
+	};
+	const onInternalTabClick = (activeKey, e) => {
+		emit("tabClick", activeKey, e);
+	};
+	const onInternalTabScroll = (info) => {
+		emit("tabScroll", info);
+	};
+	return () => {
+		const { className: attrClassName, style: attrStyle, restAttrs } = getAttrStyleAndClass(attrs);
+		const addIcon = getSlotPropsFnRun(slots, props, "addIcon") ?? createVNode(PlusOutlined, null, null);
+		const removeIcon = getSlotPropsFnRun(slots, props, "removeIcon") ?? createVNode(CloseOutlined, null, null);
+		const moreIcon = getSlotPropsFnRun(slots, props, "moreIcon") ?? createVNode(EllipsisOutlined, null, null);
+		const editableFn = () => {
+			if (type.value !== "editable-card") return;
+			return {
+				onEdit: (editType, { key, event }) => {
+					emit("edit", editType === "add" ? event : key ?? "", editType);
+				},
+				removeIcon,
+				addIcon,
+				showAdd: hideAdd.value !== true
+			};
+		};
+		const mergedMoreFn = () => {
+			const rootPrefixCls = getPrefixCls();
+			const { visible: moreVisible, ...restMoreProps } = more.value ?? {};
+			const legacyMoreProps = more.value && !("open" in more.value) && "visible" in more.value ? { open: moreVisible } : {};
+			if (!rootPrefixCls) return {
+				icon: moreIcon,
+				...restMoreProps,
+				...legacyMoreProps
+			};
+			return {
+				icon: moreIcon,
+				transitionName: `${rootPrefixCls}-slide-up`,
+				...restMoreProps,
+				...legacyMoreProps
+			};
+		};
+		const mergedMore = mergedMoreFn();
+		const editable = editableFn();
+		const restProps = omit(props, [
+			"items",
+			"styles",
+			"classes",
+			"type",
+			"size",
+			"hideAdd",
+			"centered",
+			"addIcon",
+			"removeIcon",
+			"moreIcon",
+			"more",
+			"indicatorSize",
+			"tabPlacement",
+			"tabPosition",
+			"rootClass",
+			"popupClassName",
+			"animated",
+			"indicator",
+			"destroyInactiveTabPane",
+			"renderTabBar",
+			"tabBarExtraContent"
+		]);
+		const rootClassName = clsx(props.rootClass, contextClassName.value, mergedClassNames.value.root, {
+			[`${prefixCls.value}-large`]: size.value === "large",
+			[`${prefixCls.value}-small`]: size.value === "small",
+			[`${prefixCls.value}-card`]: ["card", "editable-card"].includes(type.value ?? ""),
+			[`${prefixCls.value}-editable-card`]: type.value === "editable-card",
+			[`${prefixCls.value}-centered`]: centered.value
+		}, hashId.value, cssVarCls.value, rootCls.value, attrClassName);
+		const popupCls = clsx(popupClassName.value, hashId.value, cssVarCls.value, rootCls.value, mergedClassNames.value?.popup?.root);
+		const mergedStyle = {
+			...mergedStyles.value.root,
+			...attrStyle
+		};
+		let renderTabBar;
+		if (slots.renderTabBar || props.renderTabBar) renderTabBar = (tabBarProps, TabNavListComponent) => {
+			return getSlotPropsFnRun(slots, props, "renderTabBar", true, {
+				props: tabBarProps,
+				TabNavListComponent
+			});
+		};
+		let tabBarExtraContent;
+		if (props.tabBarExtraContent) tabBarExtraContent = props.tabBarExtraContent;
+		else {
+			const leftExtra = getSlotPropsFnRun(slots, {}, "leftExtra");
+			const rightExtra = getSlotPropsFnRun(slots, {}, "rightExtra");
+			if (!leftExtra && rightExtra) tabBarExtraContent = rightExtra;
+			else if (leftExtra && rightExtra) tabBarExtraContent = {
+				left: leftExtra,
+				right: rightExtra
+			};
+			else if (leftExtra && !rightExtra) tabBarExtraContent = { left: leftExtra };
+		}
+		return createVNode(VcTabs, mergeProps({
+			"ref": tabsRef,
+			"getPopupContainer": getPopupContainer
+		}, restAttrs, restProps, {
+			"items": mergedItems.value,
+			"className": rootClassName,
+			"classNames": {
+				...mergedClassNames.value,
+				popup: popupCls
+			},
+			"renderTabBar": renderTabBar,
+			"tabBarExtraContent": tabBarExtraContent,
+			"styles": {
+				...mergedStyles.value,
+				popup: mergedStyles.value.popup?.root
+			},
+			"style": mergedStyle,
+			"editable": editable,
+			"more": mergedMore,
+			"prefixCls": prefixCls.value,
+			"animated": mergedAnimated.value,
+			"indicator": mergedIndicator.value,
+			"scrollPosition": mergedScrollPosition.value,
+			"destroyOnHidden": props.destroyOnHidden ?? props.destroyInactiveTabPane,
+			"tabPosition": mergedPlacement.value,
+			"direction": props.direction ?? direction.value,
+			"onChange": onInternalChange,
+			"onTabClick": onInternalTabClick,
+			"onTabScroll": onInternalTabScroll
+		}), null);
+	};
+}, {
+	props: {
+		addIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		moreIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		more: {
+			type: Object,
+			required: false
+		},
+		removeIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		popupClassName: {
+			type: String,
+			required: false
+		},
+		renderTabBar: {
+			type: Function,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		hideAdd: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		centered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tabPosition: {
+			type: String,
+			required: false
+		},
+		tabPlacement: {
+			type: String,
+			required: false
+		},
+		scrollPosition: {
+			type: [String, Number],
+			required: false
+		},
+		indicatorSize: {
+			type: [Number, Function],
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		destroyInactiveTabPane: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		id: {
+			type: [String, null],
+			required: false
+		},
+		activeKey: {
+			type: String,
+			required: false
+		},
+		defaultActiveKey: {
+			type: String,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		animated: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		tabBarExtraContent: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		tabBarGutter: {
+			type: Number,
+			required: false
+		},
+		tabBarStyle: {
+			type: Object,
+			required: false
+		},
+		destroyOnHidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		getPopupContainer: {
+			type: Function,
+			required: false
+		},
+		locale: {
+			type: Object,
+			required: false
+		},
+		indicator: {
+			type: Object,
+			required: false
+		}
+	},
+	emits: [
+		"edit",
+		"change",
+		"tabClick",
+		"tabScroll",
+		"update:activeKey"
+	],
+	name: "ATabs",
+	inheritAttrs: false
+});
+const Tabs = InternalTabs;
+Tabs.TabPane = TabPane;
+Tabs.install = (app) => {
+	app.component(InternalTabs.name, Tabs);
+	app.component(TabPane.name, TabPane);
+};
+//#endregion
+export { TabPane, Tabs as default };

package/dist/tabs/style/index.d.ts

@@ -0,0 +1,152 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { FullToken, GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
+import "../../theme/internal.js";
+//#region src/tabs/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 下拉菜单 z-index
+   * @descEN z-index of dropdown menu
+   */
+  zIndexPopup: number;
+  /**
+   * @desc 卡片标签页背景色
+   * @descEN Background color of card tab
+   */
+  cardBg: string;
+  /**
+   * @desc 卡片标签页高度
+   * @descEN Height of card tab
+   */
+  cardHeight: number;
+  /**
+   * @desc 小尺寸卡片标签页高度
+   * @descEN Height of small card tab
+   */
+  cardHeightSM: number;
+  /**
+   * @desc 大尺寸卡片标签页高度
+   * @descEN Height of large card tab
+   */
+  cardHeightLG: number;
+  /**
+   * @desc 卡片标签页内间距
+   * @descEN Padding of card tab
+   */
+  cardPadding: string;
+  /**
+   * @desc 小号卡片标签页内间距
+   * @descEN Padding of small card tab
+   */
+  cardPaddingSM: string;
+  /**
+   * @desc 大号卡片标签页内间距
+   * @descEN Padding of large card tab
+   */
+  cardPaddingLG: string;
+  /**
+   * @desc 标签页标题文本大小
+   * @descEN Font size of title
+   */
+  titleFontSize: number;
+  /**
+   * @desc 大号标签页标题文本大小
+   * @descEN Font size of large title
+   */
+  titleFontSizeLG: number;
+  /**
+   * @desc 小号标签页标题文本大小
+   * @descEN Font size of small title
+   */
+  titleFontSizeSM: number;
+  /**
+   * @desc 指示条颜色
+   * @descEN Color of indicator
+   */
+  inkBarColor: string;
+  /**
+   * @desc 横向标签页外间距
+   * @descEN Horizontal margin of horizontal tab
+   */
+  horizontalMargin: string;
+  /**
+   * @desc 横向标签页标签间距
+   * @descEN Horizontal gutter of horizontal tab
+   */
+  horizontalItemGutter: number;
+  /**
+   * @desc 横向标签页标签外间距
+   * @descEN Horizontal margin of horizontal tab item
+   */
+  horizontalItemMargin: string;
+  /**
+   * @desc 横向标签页标签外间距（RTL）
+   * @descEN Horizontal margin of horizontal tab item (RTL)
+   */
+  horizontalItemMarginRTL: string;
+  /**
+   * @desc 横向标签页标签内间距
+   * @descEN Horizontal padding of horizontal tab item
+   */
+  horizontalItemPadding: string;
+  /**
+   * @desc 大号横向标签页标签内间距
+   * @descEN Horizontal padding of large horizontal tab item
+   */
+  horizontalItemPaddingLG: string;
+  /**
+   * @desc 小号横向标签页标签内间距
+   * @descEN Horizontal padding of small horizontal tab item
+   */
+  horizontalItemPaddingSM: string;
+  /**
+   * @desc 纵向标签页标签内间距
+   * @descEN Vertical padding of vertical tab item
+   */
+  verticalItemPadding: string;
+  /**
+   * @desc 纵向标签页标签外间距
+   * @descEN Vertical margin of vertical tab item
+   */
+  verticalItemMargin: string;
+  /**
+   * @desc 标签文本颜色
+   * @descEN Text color of tab
+   */
+  itemColor: string;
+  /**
+   * @desc 标签激活态文本颜色
+   * @descEN Text color of active tab
+   */
+  itemActiveColor: string;
+  /**
+   * @desc 标签悬浮态文本颜色
+   * @descEN Text color of hover tab
+   */
+  itemHoverColor: string;
+  /**
+   * @desc 标签选中态文本颜色
+   * @descEN Text color of selected tab
+   */
+  itemSelectedColor: string;
+  /**
+   * @desc 卡片标签间距
+   * @descEN Gutter of card tab
+   */
+  cardGutter: number;
+}
+interface TabsToken extends FullToken<'Tabs'> {
+  tabsCardPadding: string;
+  dropdownEdgeChildVerticalPadding: number;
+  tabsNavWrapPseudoWidth: number;
+  tabsDropdownHeight: number | string;
+  tabsDropdownWidth: number | string;
+  tabsHorizontalItemMargin: string;
+  tabsHorizontalItemMarginRTL: string;
+}
+declare const prepareComponentToken: GetDefaultToken<'Tabs'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@zboson/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, TabsToken, _default as default, prepareComponentToken };